/* Farben: #fff, #000, #888. Helvetica/Arial. Keine Rahmen, Schatten, runden Ecken. */

:root {
  --weiss: #fff;
  --schwarz: #000;
  --grau: #888;
  --rand: clamp(16px, 2.5vw, 32px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--weiss);
  color: var(--schwarz);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* Navigation: fix oben links, fett, Großbuchstaben, immer lesbar */
.kopf {
  position: fixed;
  top: var(--rand);
  left: var(--rand);
  right: var(--rand); /* Name links, ABOUT rechts */
  justify-content: space-between;
  pointer-events: none; /* nur die Links sind klickbar, nicht die ganze Breite */
  z-index: 10;
  display: flex;
  gap: clamp(40px, 12vw, 180px);
  color: var(--weiss);
  mix-blend-mode: difference;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.nav { display: flex; gap: 1.6em; margin-right: var(--rand); padding-top: 1.25em; } /* ABOUT etwas eingerückt, auf Höhe der zweiten Namenszeile */
.kopf a { pointer-events: auto; }
/* Große Klickfläche wie bei den Pfeilen der Projekt-Ansicht: 30px oben/unten, 60px links/rechts um den Text */
.kopf a { padding: 30px 60px; margin: -30px -60px; }
.kopf a:hover, .nav a[aria-current] { text-decoration: underline; text-underline-offset: 2px; }

/* Startseite: je Projekt eine Reihe. Links Foto (ganz, nicht beschnitten), rechts Plakat, beides auf Weiß.
   Beide Hälften sind bei jedem Projekt gleich groß. */
/* Jedes Projekt füllt genau einen Bildschirm: das nächste sieht man erst nach dem Scrollen */
.eintrag {
  --bildhoehe: calc(100svh - 12em - var(--rand) * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--rand) + 4em) 0 var(--rand);
}
.reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.reihe .plakat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
/* Plakat füllt seine Hälfte: Abstand zum rechten Seitenrand = Abstand des Fotos zum linken */
.reihe .plakat { padding: 0 var(--rand); }
.reihe .plakat img { width: 100%; max-height: var(--bildhoehe); object-fit: contain; object-position: right center; }
.reihe .foto { min-width: 0; padding: 0 var(--rand); }
.reihe .foto img {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: var(--bildhoehe);
  object-fit: contain;
  object-position: left center;
}
/* Zwei Bilder nebeneinander: links bild2 (freigestellt), rechts bild, größer und im Format 4:5 */
.reihe .foto.zwei { display: flex; align-items: center; gap: var(--rand); }
.reihe .foto.zwei img { flex: 1 1 0; width: 0; min-width: 0; }
.reihe .foto.zwei img:last-child { flex-grow: 1.7; height: auto; max-height: var(--bildhoehe); aspect-ratio: 4 / 5; object-fit: cover; }
.eintrag p {
  padding: 0.8em var(--rand) 0;
  font-weight: 700;
  text-transform: uppercase;
}

/* WORK: 2 Spalten, große Bilder, viel Weißraum */
.raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--rand);
  row-gap: clamp(64px, 10vw, 160px);
  align-items: end;
  padding: clamp(140px, 18vw, 260px) var(--rand) clamp(96px, 12vw, 200px);
}
.kachel { display: block; }
.kachel img { width: 100%; }
.kachel p { margin-top: 0.7em; font-weight: 700; text-transform: uppercase; }
.kachel:hover p { text-decoration: underline; text-underline-offset: 2px; }

/* Einblenden beim Scrollen */
.kachel { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.kachel.da { opacity: 1; transform: none; }

/* Footer: drei Spalten, klein, Großbuchstaben */
.fuss {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rand);
  padding: var(--rand);
  font-weight: 700;
  text-transform: uppercase;
}
.fuss a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Handy: alles untereinander */
@media (max-width: 700px) {
  .kopf { gap: 32px; }
  .nav { gap: 1em; }
  .reihe { grid-template-columns: 1fr; }
  .reihe .plakat { padding: 24px var(--rand) 0; }
  /* Handy: ein Projekt pro Bildschirm, rastet beim Wischen ein (wie TikTok) */
  html:has(.start-liste) { overscroll-behavior: none; }
  .start-liste { padding-top: 0; }
  .eintrag {
    --bildhoehe: 34svh;
    min-height: 100svh; height: 100svh; height: 100dvh;
    padding: 90px 0 var(--rand); margin: 0;
    justify-content: center;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .reihe .foto img, .reihe .plakat img { max-height: var(--bildhoehe); object-position: center; }
  .reihe .plakat img { width: auto; max-width: 100%; }
  .raster { grid-template-columns: 1fr; row-gap: 56px; padding-top: 120px; }
  .fuss { grid-template-columns: 1fr; gap: 1.2em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .kachel { opacity: 1; transform: none; }
}

/* ABOUT: ruhig, eine Spalte links. Kleines Porträt, kurzer Text, Kontakt. */
.about {
  min-height: calc(100vh - 6em);
  padding: clamp(120px, 15vw, 200px) var(--rand) clamp(80px, 10vw, 160px);
  font-size: 14px;
  line-height: 1.4;
}
.about-bild { width: clamp(160px, 18vw, 260px); aspect-ratio: 4 / 5; object-fit: cover; object-position: 53% center; margin-bottom: 2.5em; }
.about p { max-width: 46ch; }
.about p + p { margin-top: 1.4em; }
.about .klein { color: var(--grau); }
.about a:hover, .recht a:hover { text-decoration: underline; text-underline-offset: 2px; }
.recht h2 { font-size: inherit; font-weight: 400; text-transform: uppercase; }

/* Impressum / Datenschutz */
.recht { padding: clamp(120px, 15vw, 200px) var(--rand) clamp(80px, 10vw, 160px); font-size: 14px; line-height: 1.4; }
.recht section { max-width: 62ch; }
.recht section + section { margin-top: 4em; }
.recht h2 { margin-bottom: 1.2em; }
.recht p + p { margin-top: 1em; }


/* Hinweis auf ABOUT: handgezeichneter Pfeil und „me“, werden in Schreibrichtung aufgedeckt (main.js) */
.wink { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.wink svg { position: absolute; height: auto; overflow: visible; }
.wink path {
  fill: none; stroke: #fff; stroke-width: 62; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition-property: stroke-dashoffset; transition-timing-function: linear;
}
.wink.an path { stroke-dashoffset: 0; }
.wink.still path { transition: none !important; }