/* ==========================================================================
   Gudula Rautenbach – Photographien.
   Editorial Monochrome
   --------------------------------------------------------------------------
   Aufbau
     01  Schrift & Farben
     02  Reset
     03  Raster & Rhythmus
     04  Typografie
     05  Kopf & Navigation
     06  Fuß
     07  Bildbausteine
     08  Startseite
     09  Bildstrecken
     10  Begleitungen, FAQ, Reportagen
     11  Formular
     12  Vollbildansicht
     13  Bewegung
   ========================================================================== */


/* 01  Schrift & Farben ==================================================== */

/*  Bahnschrift ist eine Systemschrift von Windows und darf nicht als Webfont
    ausgeliefert werden. Es liegt keine lizenzierte Fontdatei im Projekt, daher
    wird sie als erste Systemschrift angesprochen (Light über font-weight 300)
    und über eine schmale, DIN-nahe Kette abgesichert:
      macOS/iOS  -> DIN Alternate
      Android    -> Roboto Condensed
      sonst      -> Segoe UI / system-ui / Helvetica / Arial
    Siehe README, Abschnitt „Typografie“.                                     */

/*  Das Logo behält die Schriften der bisherigen Website: Playfair Display
    für den Namen, Raleway für die Zeile darunter. Beide sind hier lokal
    eingebunden (SIL Open Font License) – es wird nichts von Google geladen,
    deshalb ist auch kein Einwilligungsbanner nötig. Die Dateien liegen in
    assets/fonts/, die Content-Security-Policy erlaubt font-src 'self'.      */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-logo:     "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-logo-tag: "Raleway", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bahnschrift Light", "Bahnschrift", "DIN Alternate",
                  "Roboto Condensed", "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui,
                  -apple-system, "Helvetica Neue", Arial, sans-serif;

  --paper:      #ffffff;
  --paper-sunk: #f2f2f2;
  --ink:        #101010;
  --ink-soft:   #444444;
  --ink-mute:   #6d6d6d;
  --rule:       #d9d9d9;

  --stage:      #0b0b0b;
  --stage-ink:  #f4f4f4;
  --stage-mute: #9a9a9a;
  --stage-rule: #2c2c2c;

  /* Fließende Typoskala */
  --t--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --t-0:  clamp(1rem, 0.965rem + 0.18vw, 1.0625rem);
  --t-1:  clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-2:  clamp(1.3125rem, 1.17rem + 0.7vw, 1.75rem);
  --t-3:  clamp(1.625rem, 1.32rem + 1.5vw, 2.5rem);
  --t-4:  clamp(2rem, 1.4rem + 3vw, 4rem);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;

  /* Vertikaler Rhythmus */
  --space-s:  clamp(1rem, 2vw, 1.5rem);
  --space-m:  clamp(2rem, 4vw, 3.5rem);
  --space-l:  clamp(3.5rem, 8vw, 7rem);
  --space-xl: clamp(5rem, 12vw, 11rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 02  Reset =============================================================== */

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

/*  Kein globales scroll-behavior: smooth. Es gilt sonst auch für das
    Blättern mit Pfeiltasten, Bild auf/ab und Leertaste – jeder Tastendruck
    wird zur Animation, das Scrollen wirkt zäh. Der eine bewusste Sprung auf
    der Startseite („Weiter“) wird stattdessen in site.js weich gescrollt.   */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; border: 0; background: var(--paper-sunk); }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  border-radius: 0;
}

/* Sichtbarer Fokus – doppelter Ring, damit er auch auf Fotografien trägt */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible,
summary:focus-visible, .lb__img:focus-visible {
  box-shadow: 0 0 0 5px var(--paper);
}
.stage :focus-visible, .lb :focus-visible {
  box-shadow: 0 0 0 5px var(--stage);
}

::selection { background: var(--ink); color: var(--paper); }
.stage ::selection { background: var(--stage-ink); color: var(--stage); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-110%);
}
.skip-link:focus { transform: translateY(0); }


/* 03  Raster & Rhythmus =================================================== */

.wrap {
  width: 100%;
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 62rem; }
/*  Ein wrap im wrap ist immer zu viel: Der zweite Rand ist nicht
    gewollt, und ein randloses Bild darin bekommt ihn nicht mehr weg –
    .fig--bleed zieht sich um genau einen Gutter zurück, nicht um zwei.
    So etwas entsteht beim Umstellen eines Abschnitts auf dunkel.      */
.wrap .wrap { max-width: none; padding-inline: 0; }
/*  Und der umgekehrte Fall: eine Bildstrecke, um die gar kein Satzspiegel
    liegt, weil ihr Abschnitt kein .wrap trägt. Dann fehlt der Rand, den
    ein randloses Bild mit seinem negativen Rand herausrechnet – es ragte
    über das Fenster hinaus. Hier steht der Satzspiegel nach.             */
section:not(.wrap) > .sequence {
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--space-xl); }
.band--tight { padding-block: var(--space-l); }

.stage {
  background: var(--stage);
  color: var(--stage-ink);
}
.stage a { color: var(--stage-ink); }
.sunk { background: var(--paper-sunk); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--rule);
}
.stage .rule { background: var(--stage-rule); }

/*  Rasterelemente dürfen ihre Spur nie aufblähen. Ohne min-width: 0 setzt
    ein Bild seine Eigenbreite als Mindestbreite durch – auf schmalen
    Displays entstünde dadurch ein waagerechter Überlauf.                    */
.editorial > *, .sequence > *, .hero__inner > *, .tier > *,
.form__grid > *, .site-footer__grid > *, .choices > * { min-width: 0; }

/* Zweispaltiges Redaktionsraster: schmale Marginalie + Textspalte */
.editorial {
  display: grid;
  gap: var(--space-s) var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56rem) {
  .editorial {
    grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr);
    gap: var(--space-m) clamp(2rem, 6vw, 6rem);
  }
  .editorial--wide { grid-template-columns: minmax(8rem, 18rem) minmax(0, 1fr); }
}
/*  Ein Porträt in der Marginalie, unter der Abschnittsnummer. Schmale
    Schirme kennen die Spalte nicht – dort stünde ein formatfüllendes
    Gesicht über dem Text, deshalb die halbe Breite. */
.portraet-rand { margin-top: var(--space-s); max-width: 11rem; }
@media (min-width: 56rem) {
  .portraet-rand { max-width: none; }
}


/* 04  Typografie ========================================================== */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t--1);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stage .eyebrow { color: var(--stage-mute); }

.eyebrow--num::before {
  content: attr(data-num) " — ";
  color: inherit;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3); }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-1); font-weight: 400; letter-spacing: 0.02em; }

.display    { font-size: var(--t-3); }
.display--l { font-size: var(--t-4); line-height: 1.04; }

.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-2);
  line-height: 1.35;
  letter-spacing: -0.005em;
  /*  Bis Version vom 12.08. standen hier 26ch. Das brach Sätze wie
      „Erzählt mir von Euch und Eurem Tag." schon nach vier Wörtern um.  */
  max-width: 60ch;
  text-wrap: balance;
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--ink-soft); }
.stage .prose p { color: var(--stage-mute); }
.prose strong { font-weight: 600; color: var(--ink); }
.stage .prose strong { color: var(--stage-ink); }

.prose a,
.linked {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 0.3s var(--ease);
}
.prose a:hover, .linked:hover { text-decoration-color: currentColor; }
.stage .prose a, .stage .linked { text-decoration-color: var(--stage-rule); }

.quiet { color: var(--ink-mute); }
.stage .quiet { color: var(--stage-mute); }

.small { font-size: var(--t--1); line-height: 1.65; }

/* Textlink mit Linie – die einzige „Schaltfläche“ der Seite */
.link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t--1);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-block: 0.9rem;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.3s var(--ease);
}
.link:hover { opacity: 0.55; }
.link + .link { margin-left: clamp(1.5rem, 4vw, 3rem); }
/*  Beim Umbruch nimmt der zweite Link seinen linken Abstand mit und
    beginnt dann eingerückt – auf schmalen Schirmen der Regelfall. Eine
    Reihe mit Spaltenabstand macht denselben Zwischenraum, ohne ihn an den
    Zeilenanfang zu schleppen. */
p:has(> .link + .link) {
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 0;
}
p:has(> .link + .link) > .link + .link { margin-left: 0; }
/*  Ein Absatz mit zwei Links nebeneinander ist kein Lesetext – die
    Lesebreite (--measure) darf ihn nicht früher umbrechen, als der Platz
    es hergibt. Ohne das bricht z. B. "Anfrage schreiben" neben einer
    langen Mailadresse in eine zweite Zeile um, knapp unter der Breite, die
    beide bräuchten. Der Absatz selbst kann nicht breiter werden als sein
    Elternkasten (.prose) – der bekommt darum die Ausnahme, nicht der
    Absatz. */
.prose:has(> p > .link + .link) { max-width: 36rem; }

.mark {
  font-family: var(--font-display);
  font-weight: 300;
}


/* 05  Kopf & Navigation =================================================== */

/*  Der Kopf ist auf allen Seiten dieselbe schmale schwarze Bande. Auf der
    Startseite geht er nahtlos in die dunkle Hero-Fläche über, auf den
    übrigen Seiten rahmt er das weiße Blatt. Das braucht kein JavaScript
    und keine Zustandswechsel beim Scrollen.                                 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--stage);
  color: var(--stage-ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 4.5rem;
  padding-block: 0.9rem;
}

/* Wortmarke ------------------------------------------------------------- */
/*  Das Logo der bisherigen Website, unverändert übernommen: der Name in
    Playfair Display, darunter mittig „Photographien.“ in Raleway, 12 px,
    Versalien mit 0.03em Sperrung. Im Original steht der Name auf großen
    Schirmen in 67 px – dafür gibt es .wordmark--gross. In Kopf und Fuß
    läuft er kleiner mit, sonst sprengt er die Zeile.                        */
.wordmark {
  display: block;
  font-family: var(--font-logo);
  font-weight: 400;
  line-height: 1.34;
  text-align: center;
}
.wordmark__name {
  display: block;
  font-size: clamp(1.25rem, 1rem + 1.15vw, 1.875rem);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.wordmark__tag {
  display: block;
  margin-top: 0.1em;
  font-family: var(--font-logo-tag);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.site-header .wordmark__tag,
.stage .wordmark__tag { color: var(--stage-mute); }
.site-header :focus-visible { box-shadow: 0 0 0 5px var(--stage); }

/*  Originalmaß: 38 px auf schmalen, 67 px auf großen Schirmen. */
.wordmark--gross .wordmark__name {
  font-size: clamp(2.375rem, 1.4rem + 3.9vw, 4.188rem);
}

/* Navigation ------------------------------------------------------------ */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.nav__bars {
  display: block;
  position: relative;
  width: 1.5rem; height: 1px;
  background: currentColor;
}
.nav__bars::before, .nav__bars::after {
  content: "";
  position: absolute;
  left: 0; width: 1.5rem; height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__bars::before { top: -6px; }
.nav__bars::after  { top: 6px; }
[aria-expanded="true"] .nav__bars { background: transparent; }
[aria-expanded="true"] .nav__bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav__list {
  display: flex;
  align-items: baseline;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.nav__link {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__link:hover { border-bottom-color: currentColor; }
.nav__link[aria-current="page"] { border-bottom-color: currentColor; }

/* Mobil: Vollflächiges Panel */
@media (max-width: 61.9375rem) {
  .nav__panel {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--gutter);
    background: var(--stage);
    color: var(--stage-ink);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
  }
  .nav__panel[data-open="true"] { visibility: visible; opacity: 1; }
  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .nav__link {
    font-size: var(--t-2);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: none;
    padding-block: 0.6rem;
  }
  .nav__close {
    position: absolute;
    top: 1.4rem; right: var(--gutter);
    min-width: 2.75rem; min-height: 2.75rem;
    background: none; border: 0; cursor: pointer;
    color: inherit;
    font-family: var(--font-display);
    font-size: var(--t--1);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  body[data-nav-open="true"] { overflow: hidden; }
}
@media (min-width: 62rem) {
  .nav__toggle, .nav__close { display: none; }
  .nav__panel { display: block !important; }
}


/* 06  Fuß ================================================================ */

.site-footer {
  background: var(--stage);
  color: var(--stage-ink);
  padding-block: var(--space-l) var(--space-m);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.site-footer h2 {
  font-size: var(--t--1);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stage-mute);
  margin-bottom: 1.1rem;
}
.footer-list li + li { margin-top: 0.35rem; }
.footer-list a {
  display: inline-block;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.footer-list a:hover { border-bottom-color: currentColor; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem var(--space-m);
  justify-content: space-between;
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--stage-rule);
  font-size: var(--t--1);
  color: var(--stage-mute);
}


/* 07  Bildbausteine ======================================================= */

.fig { margin: 0; }
.fig img {
  width: 100%;
  height: auto;
  background: var(--paper-sunk);
}
.stage .fig img { background: #171717; }

.fig figcaption {
  margin-top: 0.85rem;
  font-size: var(--t--1);
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 32ch;
}
.stage .fig figcaption { color: var(--stage-mute); }

/* Feste Höhe mit bewusstem Ausschnitt (nur wo gestalterisch gewollt) */
.fig--crop img {
  height: clamp(20rem, 62vh, 44rem);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
@media (max-width: 47.9375rem) {
  .fig--crop img {
    height: clamp(22rem, 66vh, 34rem);
    object-position: var(--pos-mobile, var(--pos, 50% 50%));
  }
}

.fig--bleed {
  margin-inline: calc(var(--gutter) * -1);
}
/* Die Bildunterschrift bleibt im Satzspiegel, auch wenn das Bild ihn verlässt. */
.fig--bleed figcaption {
  box-sizing: content-box;
  padding-inline: var(--gutter);
}
@media (min-width: 88rem) {
  .fig--bleed { margin-inline: calc((100vw - 88rem) / -2 - var(--gutter)); }
  .fig--bleed figcaption {
    padding-inline: calc(var(--gutter) + (100vw - 88rem) / 2);
  }
}


/* 08  Startseite ========================================================== */

/* Hero: dunkle Bühne, das Hochformat bleibt ungeschnitten ---------------- */
.hero {
  background: var(--stage);
  color: var(--stage-ink);
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
}
.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
.hero__plate {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 32rem;
}
.hero__plate img {
  width: 100%;
  height: auto;
  background: #171717;
}
.hero__text > * + * { margin-top: var(--space-s); }
.hero__motto {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-3);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stage-mute);
  padding-block: 0.5rem;
}
.hero__scroll::after {
  content: "";
  width: 3rem; height: 1px;
  background: currentColor;
}
@media (min-width: 62rem) {
  .hero { padding-block: clamp(2.5rem, 4vw, 4rem) clamp(4rem, 8vw, 8rem); }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 7vw, 7rem);
  }
  .hero__inner { align-items: end; }
  .hero__plate { max-width: none; justify-self: stretch; }
  .hero__text { padding-bottom: clamp(1rem, 3vw, 2.5rem); }
  /* Das Hochformat bleibt ungeschnitten und passt trotzdem auf einen Blick. */
  .hero__plate img {
    max-height: calc(100svh - 13rem);
    width: auto;
    margin-inline: auto;
  }
}

/* Leitmotiv-Band */
.motto {
  text-align: center;
  padding-block: var(--space-xl);
}
.motto p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-4);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.motto .motto__sub {
  margin-top: var(--space-m);
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 40ch;
  margin-inline: auto;
  letter-spacing: 0;
}


/* 09  Bildstrecken ======================================================== */

/*  Kein Masonry, kein gleichförmiges Raster: einzelne, gesetzte Platten mit
    unterschiedlicher Breite und Position. Auf schmalen Displays fällt alles
    in eine ruhige Spalte zurück.                                            */

.sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}
@media (min-width: 48rem) {
  .sequence {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-l) clamp(1.5rem, 3vw, 3rem);
    align-items: end;
  }
  /* Setzkasten – bewusst asymmetrisch */
  .plate--full     { grid-column: 1 / -1; }
  .plate--wide-l   { grid-column: 1 / span 9; }
  .plate--wide-r   { grid-column: 4 / -1; }
  .plate--mid-l    { grid-column: 1 / span 7; }
  .plate--mid-r    { grid-column: 6 / -1; }
  .plate--half-l   { grid-column: 1 / span 6; }
  .plate--half-r   { grid-column: 7 / -1; }
  .plate--tall-l   { grid-column: 2 / span 5; }
  .plate--tall-r   { grid-column: 8 / span 4; }
  .plate--narrow-l { grid-column: 1 / span 4; }
  .plate--narrow-r { grid-column: 9 / -1; }
  .plate--inset    { grid-column: 3 / span 8; }

  .plate--pull-up   { margin-top: calc(var(--space-l) * -1); }
  .plate--push-down { margin-top: var(--space-l); }
  .plate--top       { align-self: start; }
}

/*  Ruhigere Fassung der Strecke (Portfolio): deutlich größere Abstände,
    damit jedes Bild für sich steht.                                         */
.sequence--air { gap: var(--space-xl); }
@media (min-width: 48rem) {
  .sequence--air { gap: clamp(5rem, 10vw, 10rem) clamp(2rem, 4vw, 4rem); }
}

/*  Platten über die volle Fensterbreite bekommen zusätzlich Luft, weil sie
    den Satzspiegel verlassen (Randlosigkeit über .fig--bleed).              */
.sequence .fig--bleed { margin-block: var(--space-s); }

/* Textzwischenraum in der Bildstrecke */
.interlude {
  align-self: center;
}
.interlude p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-1);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 24ch;
}
@media (min-width: 48rem) {
  .interlude--l { grid-column: 1 / span 4; }
  .interlude--r { grid-column: 8 / -1; }
}

/*  Kapitelauftakt: mittig gesetzt, überall an derselben Stelle. So bildet
    der Text einen Takt und wirkt nicht wie eine zufällige Bildunterschrift. */
.interlude--mid {
  text-align: center;
  padding-block: var(--space-s);
}
.interlude--mid p {
  font-size: var(--t-2);
  line-height: 1.3;
  max-width: 26ch;
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .interlude--mid { grid-column: 3 / span 8; }
}

/* Portfolio-Pause */
.pause {
  grid-column: 1 / -1;
  height: var(--space-l);
}


/* 10  Begleitungen, FAQ, Reportagen ====================================== */

.tiers { border-top: 1px solid var(--rule); }
.stage .tiers { border-top-color: var(--stage-rule); }

.tier {
  display: grid;
  gap: 0.5rem var(--space-m);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--rule);
}
.stage .tier { border-bottom-color: var(--stage-rule); }

@media (min-width: 48rem) {
  .tier {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    /*  Der Zeilenabstand trennt hier nur Absätze in der Textspalte – in
        Spalte 1 steht allein der Name. Deshalb derselbe Rhythmus wie
        zwischen zwei Absätzen im .tier__body: Ein Absatz, der neben dem
        Rumpf gelandet ist, liest sich sonst wie ein abgetrennter Block
        statt wie der erste Absatz des Textes.                          */
    gap: 0.9rem clamp(2rem, 6vw, 6rem);
  }
  /*  Alles außer dem Namen gehört rechts hin. Ohne diese Zeile stellt sich
      ein drittes Kind – etwa ein Absatz, der neben dem Namen statt in
      .tier__body gelandet ist – in die schmale Namensspalte, und die
      ganze Zeile bricht um.                                              */
  .tier > :not(.tier__name) { grid-column: 2; }
}
/*  Und er soll aussehen wie der übrige Fließtext der Zeile, nicht wie
    eine Überschrift.                                                     */
.tier > p:not(.tier__name) { max-width: var(--measure); color: var(--ink-soft); }
.stage .tier > p:not(.tier__name) { color: var(--stage-mute); }
.tier__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-2);
  line-height: 1.15;
}
.tier__hours {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stage .tier__hours { color: var(--stage-mute); }
.tier__body { max-width: var(--measure); }
.tier__body p + p { margin-top: 0.9em; }
.tier__body p { color: var(--ink-soft); }
.stage .tier__body p { color: var(--stage-mute); }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 1.35rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-1);
  line-height: 1.3;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: none;
  font-size: 1.25em;
  line-height: 1;
  color: var(--ink-mute);
  transition: transform 0.3s var(--ease);
}
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a {
  max-width: var(--measure);
  padding-bottom: 1.6rem;
  color: var(--ink-soft);
}
.faq__a p + p { margin-top: 0.9em; }

/* Kundenstimme */
.voice { text-align: center; }
.voice blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-2);
  line-height: 1.4;
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
}
.voice figcaption {
  margin-top: var(--space-s);
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Redaktioneller Hinweis auf offene Inhalte (nur in der Testfassung) */
.todo {
  border: 1px dashed var(--rule);
  padding: var(--space-s);
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: var(--measure);
}
.stage .todo { border-color: var(--stage-rule); color: var(--stage-mute); }
.todo b {
  display: block;
  margin-bottom: 0.3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--ink);
}
.stage .todo b { color: var(--stage-ink); }

/* Kapitel innerhalb einer Reportage */
.chapter { padding-block: var(--space-l); }
.chapter__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
}
.chapter__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.stage .chapter__head::after { background: var(--stage-rule); }


/* 11  Formular =========================================================== */

.form { max-width: 44rem; }
.form__grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field label,
.fieldset__legend {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.field__hint {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t--1);
  color: var(--ink-mute);
  letter-spacing: 0;
  text-transform: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field select {
  padding-right: 1.5rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 0.55rem center, right 0.25rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-bottom-color: var(--ink);
  outline: 2px solid transparent; /* Ersetzt durch die Linie unten */
  outline-offset: 0;
  box-shadow: 0 1px 0 0 var(--ink);
}
.field input:focus-visible, .field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  box-shadow: none;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-bottom-color: var(--ink); }

.field__error {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--t--1);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.field__error:empty { display: none; }

/* Auswahl der Begleitung als echte Radiogruppe */
.choices {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
/*  Die Zeile steht als `label` in einem `.field` – und `.field label`
    wiegt schwerer als `.choice` allein. Ohne den Elternteil im Selektor
    gewinnt dort `display: block`, und die Zeile fällt auseinander. */
.choice,
.field .choice {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  min-height: 3rem;
  /*  Aus demselben Grund wieder zurückgenommen, was `.field label` der
      Feldbeschriftung mitgibt: Eine Auswahlzeile ist Lesetext, keine
      Beschriftung – sonst steht sie in Versalien und in der Auszeichnungs-
      schrift, und ihr Abstand nach unten reißt die Trennlinien auseinander. */
  font-family: var(--font-text);
  font-size: var(--t-0);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0;
}
.choice input {
  width: 1.05rem; height: 1.05rem;
  margin: 0;
  flex: none;
  accent-color: var(--ink);
}
/*  Ein Ankreuzfeld ist keine Eingabezeile. Ohne diese Rücknahme gibt ihm
    `.field input` die Mindesthöhe, den Innenabstand und die Linie einer
    Zeile: Der Kreis säße dann in einem 3 rem hohen Kasten und stünde
    darum weit über seiner Beschriftung – der Grund, warum Kreis, Titel
    und Dauer auf drei verschiedenen Höhen und Einzügen standen. */
.field .choice input,
.field .consent input {
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.choice span { line-height: 1.4; }
.choice small {
  display: block;
  color: var(--ink-mute);
  font-size: var(--t--1);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-block: 0.5rem;
}
.consent input {
  margin-top: 0.4rem;
  flex: none;
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--ink);
}
.consent label { text-transform: none; letter-spacing: 0; font-size: var(--t-0); color: var(--ink-soft); font-family: var(--font-text); margin: 0; }

.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__submit {
  display: inline-block;
  margin-top: var(--space-s);
  padding: 1.05rem 2.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.form__submit:hover { background: transparent; color: var(--ink); }
.form__submit[disabled] { opacity: 0.5; cursor: progress; }

.form__note {
  margin-top: var(--space-s);
  padding: var(--space-s);
  border: 1px solid var(--ink);
  max-width: var(--measure);
}
.form__note:empty { display: none; padding: 0; border: 0; }
.form__note h2 { font-size: var(--t-1); margin-bottom: 0.4rem; }
.form__note ul { margin-top: 0.5rem; }
.form__note li { padding-left: 1rem; position: relative; }
.form__note li::before { content: "—"; position: absolute; left: 0; }


/* Kennwortformular des geschützten Bereichs */
.gate { max-width: 26rem; }
.gate .field input { border-bottom-color: var(--stage-rule); }
.gate .field input:focus { border-bottom-color: var(--stage-ink); box-shadow: 0 1px 0 0 var(--stage-ink); }
.gate .form__submit { background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); }
.gate .form__submit:hover { background: transparent; color: var(--stage-ink); }
.gate .field label { color: var(--stage-mute); }
.gate__error {
  margin-bottom: var(--space-s);
  padding: 0.9rem 1rem;
  border: 1px solid var(--stage-ink);
}
/* Die Codeanfrage steht unter der Eingabe, abgesetzt, aber nicht versteckt:
   Wer keinen Code hat, soll ihn hier holen können und nicht erst im großen
   Kontaktformular Datum und Ort angeben müssen. */
.gate-trenner {
  max-width: 26rem;
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--stage-rule);
}
.gate-trenner .gate__error { margin-bottom: 0; }
.gate .field__hint { color: var(--stage-mute); }

/* Übersicht hinter dem Code: je Reportage ein Vorschaubild, daneben der
   Text. Die ganze Karte ist der Link – als bloße Textzeile war kaum zu
   erkennen, dass es hier zu den Bildern geht. */
.rep-liste {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-m);
  padding: 0;
  list-style: none;
}
.rep-karte {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.rep-karte > * { min-width: 0; }
@media (min-width: 40rem) {
  .rep-karte {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: var(--space-m);
  }
  .rep-karte--ohne { grid-template-columns: minmax(0, 1fr); }
}
/*  Fester Ausschnitt statt Eigenformat: Sonst stünde ein Hochformat doppelt
    so hoch neben einem Querformat, und die Liste verlöre ihre Zeilen. */
.rep-karte__bild {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #171717;
  transition: opacity 0.3s var(--ease);
}
.rep-karte:hover .rep-karte__bild { opacity: 0.8; }
.rep-karte__text > span { display: block; }
.rep-karte__titel {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-2);
  line-height: 1.2;
}
.rep-karte__unter { margin-top: 0.4rem; color: var(--stage-mute); }
.rep-karte__intro {
  margin-top: 0.8rem;
  max-width: 38ch;
  color: var(--stage-mute);
  font-size: var(--t--1);
  line-height: 1.65;
}
.rep-karte__text > .link { display: inline-block; margin-top: 1rem; }
.rep-karte:hover .link { opacity: 0.55; }


/* 12  Vollbildansicht ==================================================== */

.lb {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--stage);
  color: var(--stage-ink);
  overflow: hidden;
}
.lb::backdrop { background: rgba(0, 0, 0, 0.94); }

.lb__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 8vw, 5rem) clamp(0.75rem, 4vw, 5rem);
}
.lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: transparent;
}

.lb__bar {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(0.75rem, 4vw, 2rem);
  font-size: var(--t--1);
}
.lb__bar--top { top: 0; }
.lb__bar--bottom { bottom: 0; color: var(--stage-mute); }

.lb__btn {
  min-width: 3rem;
  min-height: 3rem;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--t--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.lb__btn:hover { border-color: currentColor; }
.lb__btn[disabled] { opacity: 0.3; cursor: default; }
.lb__nav { display: flex; gap: 0.5rem; }
.lb__caption { max-width: 46ch; line-height: 1.5; }

/* Anklickbares Bild in Strecken */
.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: left;
}


/* 13  Bewegung =========================================================== */

/*  Ohne JavaScript ist alles sofort sichtbar. Erst wenn JS aktiv ist
    (html.js), wird der Startzustand gesetzt.                                */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js .reveal[data-delay="1"] { transition-delay: 0.09s; }
.js .reveal[data-delay="2"] { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* 14  Hilfsklassen ======================================================== */

/*  Diese Klassen ersetzen die früheren style-Attribute im Markup. Grund ist
    die Content-Security-Policy in public/.htaccess: Sie erlaubt
    style-src 'self', und der Browser verwirft daher jeden Stil, der direkt
    am Element steht. Lokal fiel das nie auf, weil der Testserver die
    Kopfzeile nicht mitschickt – auf dem Server blieben die Seiten dann
    halb ungestaltet.

    Sie stehen bewusst am Ende der Datei: Bei gleicher Spezifität gewinnt
    die zuletzt notierte Regel, und nur so setzen sie sich gegen
    .prose > * + * durch.                                                   */

.luft-s       { margin-top: var(--space-s); }
.luft-m       { margin-top: var(--space-m); }
.luft-l       { margin-top: var(--space-l); }
.luft-eng     { margin-top: 1rem; }
.luft-weit    { margin-top: 2rem; }
.luft-unten-s { margin-bottom: var(--space-s); }
.luft-unten-m { margin-bottom: var(--space-m); }

/* Satzbreiten in Zeichen – kurze Zeilen lesen sich besser */
.mass-24 { max-width: 24ch; }
.mass-26 { max-width: 26ch; }
.mass-30 { max-width: 30ch; }
.mass-34 { max-width: 34ch; }
.mass-36 { max-width: 36ch; }
.mass-38 { max-width: 38ch; }
.mass-44 { max-width: 44ch; }

.groesser { font-size: var(--t-1); }
.blank    { border: 0; padding: 0; margin: 0; }

/* Der Kasten für offene Punkte, wenn er allein in einer Spalte steht */
.todo--mittig { margin-inline: auto; text-align: left; }

/* Adminbereich: das ausgegebene Kennwort, gut ablesbar */
.kennwort {
  font-family: var(--font-display);
  font-size: var(--t-2);
  letter-spacing: 0.14em;
  color: var(--ink);
}

/* Zweitrangige Schaltfläche im Adminbereich */
.form__submit--leise { background: transparent; color: var(--ink); }

.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-s);
}

@media print {
  .site-header, .site-footer, .nav__panel, .lb { display: none !important; }
  body { color: #000; }
  .stage, .hero { background: #fff !important; color: #000 !important; }
}