:root{
  --ink: #000;
  --bg: #fff;

  /* pink hinter den buchstaben */
  --pill: #ff66b3;

  --nav-h: 44px;

  --z-content: 1;
  --z-cursor: 9000;
  --z-ui: 10000;

  --hue: 0deg;
  --sat: 1;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  overflow-x: hidden;
  overflow-y: auto;
  transition: 
    background-color 0.8s cubic-bezier(.77,0,.18,1),
    color 0.8s cubic-bezier(.77,0,.18,1);
}

.mono{
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #0f00b3;
}

a { color: inherit; text-decoration: none; }
.link { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- NAV (overlay) ---------------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: var(--z-ui);
  background: transparent;
  pointer-events: none;
}

.nav__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 12px 12px;
}

.nav__right{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* pills: <a> überall gleich */
.nav__pill{
  pointer-events: auto;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  background: var(--pill);
  border: none;
  color: var(--ink);
}

/* ---------------- HERO ---------------- */
.hero{
  height: 100vh;
  position: relative;
}

/* dein altes grid, nur nicht fixed */
.cube {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--col1, 1fr) var(--col2, 1fr);
  grid-template-rows: var(--row1, 1fr) var(--row2, 1fr);
  gap: 0;

  z-index: var(--z-content);

  filter: hue-rotate(var(--hue, 0deg)) saturate(var(--sat, 1));

  transition:
    grid-template-columns 1000ms ease-in-out,
    grid-template-rows 1000ms ease-in-out,
    filter 120ms linear;
}

.box {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 5px #000;
}

.box::before{
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  z-index: 0;
}

.box--1::before{ background-image: url('../img/bg-01.jpg'); transform: rotate(0deg); }
.box--2::before{ background-image: url('../img/bg-03.jpg'); transform: rotate(0deg); }
.box--3::before{ background-image: url('../img/bg-04.jpg'); transform: rotate(0deg); }
.box--4::before{ background-image: url('../img/bg-02.jpg'); transform: rotate(0deg); }

.box__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-width: 0;
  min-height: 0;
}

/* ---------------- INFO (4 spalten) ---------------- */
/* keine striche: kein border */
.info{
  padding: 30px 0;
}

.info__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0px 22px;
}

.info__col{
  min-width: 0;
  padding-right: 10px;
}
.info__col:nth-child(1){
  margin-top: 40px;
}

.info__col:nth-child(2){
  margin-top: 15px;  /* etwas höher */
}

.info__col:nth-child(3){
  margin-top: 138px;   /* deutlich tiefer */
}

.info__col:nth-child(4){
  margin-top: 52px;   /* leicht tiefer */
}


@media (max-width: 900px){
  .info__grid{ grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
}
@media (max-width: 520px){
  .info__grid{ grid-template-columns: 1fr; }
}

/* ---------------- PROJECTS ---------------- */
/* keine striche: keine borders */
.projects{
  padding: 0 0 10px 0;
}

.project{
  padding: 60px 12px 22px 12px;
}

.project__imageWrap{
  padding: 18px 0 10px 0;
  display: flex;
  justify-content: center;
}

.project__image{
  width: min(720px, 100%);
  height: auto;
  display: block;
  border: 0px solid var(--ink);
}

.project__meta{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: baseline;
  text-align: left;
}

.project__metaItem{
  font-size: 12px;
  line-height: 1.25;
}



@media (max-width: 700px){
  .project__meta{ grid-template-columns: repeat(2, 1fr); row-gap: 6px; }
  .meta--right{ text-align: left; }
}

/* ---------------- CONTACT ---------------- */
.contact{
  padding: 18px 12px 60px 12px;
}


/* ---------------- INVERT (nur farben, keine bilder) ---------------- */
body.is-inverted{
  background: #000000;
  color: #fff;
}

body.is-inverted .box{
  box-shadow: inset 0 0 0 0px #fff;
}

/* projektbilder NICHT invertieren */
body.is-inverted .project__image{
  border-color: #fff;
}

/* nav pills bleiben pink */
body.is-inverted .nav__pill{
  color: #3f4adc;
}

body.is-inverted .mono{
  color: #41a4e6;
}
/* ---------------- CURSOR / GLASS ---------------- */
.cursor-rect{
  position: fixed;
  left: 0; top: 0;
  width: 180px;
  height: 140px;
  pointer-events: none;
  z-index: var(--z-cursor);

  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(3px) contrast(1.2) brightness(1.05);
  -webkit-backdrop-filter: blur(3px) contrast(1.2) brightness(1.05);

  transform: translate3d(-999px, -999px, 0);
  will-change: transform;
}

.cursor-rect.is-hidden{ opacity: 0; }