/* ═══════════════════════════════════════════════════════════════
   HAVENSTEIN — Gestaltungsstudie
   Hellwig Digital Solutions

   Aufbau: 1 Token · 2 Grundlagen · 3 Bewegung · 4 Rahmen
           5 Sektionen · 6 Formular/Fuß · 7 Schmale Schirme
   Regel: Grundzustand ist immer sichtbar und fertig. Bewegung
   wird ausschließlich innerhalb des fx-Gates zugeschaltet.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · Token ─────────────────────────────────────────────── */
:root {
  --ink:        #0a0a0b;
  --ink-2:      #131316;
  --ink-3:      #1c1c20;
  --paper:      #f4f2ee;
  --paper-2:    #e8e4dc;
  --paper-3:    #d8d3c8;

  --on-dark:      #f4f2ee;
  --on-dark-mid:  #a8a49c;
  --on-dark-low:  #6e6b65;
  --on-light:     #16161a;
  --on-light-mid: #5f5c55;
  --on-light-low: #918d84;

  --brass:      #b9975b;
  --brass-deep: #8c6f3c;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Eine Kurve für die ganze Seite */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 0.7s;
  --dur-2: 1.1s;
  --dur-3: 1.7s;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --max: 96rem;
}

/* ── 2 · Grundlagen ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, dd, blockquote, figure, ol { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Typografie */
.display {
  font-family: var(--serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
  font-size: clamp(2.5rem, 7.4vw, 7rem);
  color: var(--on-dark);
}
.display--dark { color: var(--on-light); }
.display .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.display .line > span { display: block; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
}
.sec--light .eyebrow, .anfrage .eyebrow, .tenets .eyebrow { color: var(--on-light-low); }

/* ── 3 · Bewegung ──────────────────────────────────────────── */
/* Weicher Lauf: Inhalt wird fixiert und selbst verschoben,
   die echte Bildlaufleiste bleibt erhalten. */
.scroll-root { width: 100%; }
html.smooth .scroll-content {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}

/* Gepinnte Bühnen — nur ab 48rem, darunter läuft alles im normalen
   Fluss (JS setzt die Klasse „pin“). Auf schmalen Schirmen bleibt für
   eine gepinnte Bühne zu wenig Höhe übrig, der Text würde abgeschnitten. */
html.pin .sec[data-pin] { position: relative; }
html.pin .sec[data-pin] > .pin {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  will-change: transform;
}

/* Parallax und Zoom: JS schreibt nur --py / --pz */
[data-parallax] > img,
[data-parallax] > picture > img { transform: translate3d(0, var(--py, 0px), 0) scale(var(--pz, 1)); }
html.fx [data-parallax] { overflow: hidden; }
html.fx [data-parallax] > img { will-change: transform; }

/* Auftakt-Vorhang */
.preloader { display: none; }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

  /* Reveals – Anfangszustände erst hier */
  html.js [data-reveal="rise"]  { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
  html.js [data-reveal="plain"] { opacity: 0; }
  html.js [data-reveal="mask"]  { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  /* Zeilen starten unter ihrer Kante. Die Deckung gehört NUR zu den
     beobachteten Zeilen: der Hero-Auftakt animiert allein die
     Verschiebung, eine Deckung von 0 im Startzustand bliebe dort
     für immer stehen. */
  html.js .display .line > span { transform: translate3d(0, 108%, 0); }
  html.js [data-reveal="line"] > span { transform: translate3d(0, 108%, 0); opacity: 0; }

  html.js [data-reveal] {
    transition:
      opacity var(--dur-2) var(--ease) var(--rd, 0ms),
      transform var(--dur-2) var(--ease) var(--rd, 0ms),
      filter var(--dur-2) var(--ease) var(--rd, 0ms),
      clip-path var(--dur-3) var(--ease) var(--rd, 0ms);
  }
  html.js [data-reveal="line"] > span {
    transition:
      transform var(--dur-2) var(--ease) var(--rd, 0ms),
      opacity var(--dur-1) var(--ease) var(--rd, 0ms);
  }
  html.js [data-reveal].is-in {
    opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0);
  }
  html.js [data-reveal="line"].is-in > span { transform: none; opacity: 1; }

  /* Auftakt über der Falz: reines CSS, kein Beobachter */
  html.js .lead-in { opacity: 0; transform: translate3d(0, 22px, 0); animation: leadIn var(--dur-2) var(--ease) var(--d, 0s) both; }
  html.js .hero__title .line.lead-in { transform: none; opacity: 1; animation: none; }
  html.js .hero__title .line.lead-in > span { transform: translate3d(0, 108%, 0); animation: leadUp var(--dur-3) var(--ease) var(--d, 0s) both; }
  @keyframes leadIn { to { opacity: 1; transform: none; } }
  @keyframes leadUp { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }

  /* Vorhang: Wortmarke zeichnet sich */
  html.js.is-first .preloader {
    display: grid; place-items: center;
    position: fixed; inset: 0; z-index: 200;
    background: var(--ink);
    animation: plOut 0.9s var(--ease) 2.1s both;
  }
  .preloader__inner { display: grid; justify-items: center; gap: 1.25rem; }
  .preloader__mark { width: 3.5rem; height: 3.5rem; }
  .pl-line {
    stroke: var(--paper); stroke-width: 2.4; stroke-linecap: square;
    stroke-dasharray: 44; stroke-dashoffset: 44;
    animation: plDraw 1s var(--ease-io) both;
  }
  .pl-line:nth-child(2) { animation-delay: 0.12s; }
  .pl-line:nth-child(3) { animation-delay: 0.26s; }
  .preloader__word {
    font-family: var(--serif); text-transform: uppercase;
    font-size: clamp(1.1rem, 3.6vw, 1.9rem); letter-spacing: 0.42em;
    color: var(--paper);
    clip-path: inset(0 100% 0 0);
    animation: plWipe 1.1s var(--ease) 0.5s both;
  }
  .preloader__bar { display: block; width: 6.5rem; height: 1px; background: rgba(244,242,238,0.18); }
  .preloader__bar > i { display: block; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; animation: plBar 1.7s var(--ease-io) 0.3s both; }
  @keyframes plDraw { to { stroke-dashoffset: 0; } }
  @keyframes plWipe { to { clip-path: inset(0 0 0 0); } }
  @keyframes plBar  { to { transform: scaleX(1); } }
  @keyframes plOut  { to { opacity: 0; visibility: hidden; } }
}

/* ── 4 · Rahmen: Entwurfsleiste, Kopf, Menü ───────────────── */
.draftbar {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem var(--gut);
  background: var(--paper);
  color: var(--on-light);
  font-size: 0.72rem; letter-spacing: 0.02em; line-height: 1.35;
}
.draftbar strong { font-weight: 500; }
.draftbar__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brass-deep); }

.head {
  /* --bar wird von der Engine auf die gemessene Höhe der Entwurfs-
     leiste gesetzt; die bricht je nach Breite auf zwei Zeilen um. */
  position: fixed; top: var(--bar, 2.2rem); left: 0; right: 0; z-index: 110;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem var(--gut);
  color: var(--on-dark);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.head.is-light { color: var(--on-light); }
.head.is-hidden { transform: translateY(-140%); }
html.pin .head { transition: color var(--dur-1) var(--ease), transform 0.55s var(--ease); }
.head__brand { display: flex; align-items: center; gap: 0.7rem; }
.head__mark { width: 1.4rem; height: 1.4rem; }
.head__mark path, .foot__mark path { stroke: currentColor; stroke-width: 2.6; }
.head__word { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.95rem; }
.head__nav { display: none; gap: 2rem; align-items: center; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.head__nav a { position: relative; padding-block: 0.3rem; }
.head__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-1) var(--ease);
}
.head__nav a:hover::after { transform: scaleX(1); }
.head__cta { border: 1px solid currentColor; padding: 0.55rem 1.1rem !important; border-radius: 100px; }
.head__cta::after { display: none; }
.head__burger {
  display: grid; gap: 5px; align-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0.6rem;
  background: none; border: 0; cursor: pointer;
}
.head__burger span { display: block; height: 1px; background: currentColor; transition: transform var(--dur-1) var(--ease); }
.head__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.head__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 105;
  display: grid; align-content: center; gap: 0.4rem;
  padding: var(--gut);
  background: var(--ink-2);
  font-family: var(--serif); text-transform: uppercase;
  font-size: clamp(2rem, 11vw, 3.4rem); line-height: 1.15; letter-spacing: 0.02em;
  visibility: hidden; opacity: 0;
  transition: opacity var(--dur-1) var(--ease), visibility var(--dur-1);
}
.mnav.is-open { visibility: visible; opacity: 1; }
.mnav a { color: var(--on-dark); }

/* ── 5 · Sektionen ─────────────────────────────────────────── */
.sec { position: relative; }
.sec--dark { background: var(--ink); color: var(--on-dark); }
.sec--light { background: var(--paper); color: var(--on-light); }
.sec--full { min-height: 100vh; display: grid; }

/* 5.1 Auftakt */
.hero { grid-template-rows: 1fr auto; align-items: end; overflow: hidden; }
.hero__bg, .stmt__bg, .zitat__bg, .anfrage__bg, .proj__bg { position: absolute; inset: 0; }
.hero__bg > img, .stmt__bg > img, .zitat__bg > img, .anfrage__bg > img, .proj__bg > img {
  width: 100%; height: 118%; margin-top: -9%; object-fit: cover;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(10,10,11,0.94) 0%, rgba(10,10,11,0.35) 45%, rgba(10,10,11,0.55) 100%);
}
.hero__inner { position: relative; padding-block: 8rem 2rem; align-self: end; }
.hero__title { margin-block: 0.6rem 1.6rem; max-width: 22ch; }
.hero__sub { max-width: 42ch; color: var(--on-dark-mid); }
.hero__foot {
  position: relative; display: flex; justify-content: space-between; align-items: end;
  gap: 1rem; padding-bottom: 2.2rem;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-mid);
}
.hero__scrollhint { display: grid; justify-items: start; gap: 0.7rem; }
.hero__scrollhint > i { display: block; width: 1px; height: 3.5rem; background: linear-gradient(var(--on-dark-mid), transparent); }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html.js .hero__scrollhint > i { animation: hint 2.4s var(--ease-io) infinite; transform-origin: top; }
  @keyframes hint { 0%,100% { transform: scaleY(0.35); opacity: 0.4; } 45% { transform: scaleY(1); opacity: 1; } }
}

/* 5.2 Haltung */
.haltung { padding-block: clamp(5rem, 14vh, 11rem); }
/* Kein ch auf dem Kasten: die Einheit rechnet mit der Schriftgröße des
   Kastens (18px), nicht mit der der Überschrift (bis 112px) — die
   Zeilen liefen dadurch seitlich aus ihrer Maske heraus. Begrenzung
   gehört an die Überschrift selbst, in em. */
.haltung__head { margin-bottom: clamp(3rem, 8vw, 6rem); }
.haltung__title { margin-top: 1.2rem; max-width: 10em; }
.haltung__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
.haltung__fig { background: var(--paper-2); }
.haltung__fig img { width: 100%; }
.haltung__text { display: grid; gap: 1.2rem; color: var(--on-light-mid); max-width: 46ch; }
.haltung__sig {
  font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 1.05rem; color: var(--on-light); padding-top: 0.6rem;
  border-top: 1px solid var(--paper-3);
}

/* 5.3 Statement */
.stmt { align-content: center; overflow: hidden; padding-block: clamp(6rem, 18vh, 12rem); }
.stmt__scrim { position: absolute; inset: 0; background: rgba(8,8,9,0.62); }
.stmt__inner { position: relative; }
.stmt__title { max-width: 20ch; }
.stmt__note { margin-top: 2.2rem; max-width: 40ch; color: var(--on-dark-mid); }

/* 5.4 Gewerke — WebGL */
.worlds { background: var(--ink-2); }
.worlds__stage { display: grid; }
.worlds__canvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.worlds.is-gl .worlds__canvas { opacity: 1; }
.worlds__canvas canvas { width: 100% !important; height: 100% !important; display: block; }
.worlds__fallback {
  display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr);
  align-content: center; padding: clamp(5rem, 12vh, 9rem) var(--gut);
}
.worlds.is-gl .worlds__fallback { display: none; }
.worlds__fallback figcaption {
  padding-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on-dark-mid);
}
.worlds__ui {
  position: relative; align-self: end; padding-bottom: clamp(2.5rem, 8vh, 5rem);
  pointer-events: none;
}
/* Die Karten sind Fotos mit hellen Flächen — ohne Verlauf steht der
   Text stellenweise auf Beton und ist nicht mehr lesbar. */
html.pin .worlds__ui {
  position: absolute; inset: auto 0 0 0;
  padding-top: clamp(5rem, 14vh, 9rem);
  background: linear-gradient(to top,
    rgba(10,10,11,0.93) 0%, rgba(10,10,11,0.78) 38%, rgba(10,10,11,0) 100%);
}
/* Höhen dieser drei Kästen setzt die Engine aus dem höchsten Kind
   (data-autoheight). Feste rem-Werte schnitten Überschriften und
   längere Zitate ab, sobald Schrift oder Breite sich änderten. */
.worlds__titles { position: relative; min-height: 3.2rem; margin-block: 0.8rem 0.4rem; }
.worlds__t {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--serif); text-transform: uppercase; font-weight: 300;
  font-size: clamp(2.6rem, 8.6vw, 7.5rem); line-height: 1;
  opacity: 0; transform: translate3d(0, 0.35em, 0);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.worlds__t.is-on { opacity: 1; transform: none; }
.worlds__copies { position: relative; min-height: 3rem; max-width: 38ch; }
.worlds__c {
  position: absolute; inset: 0;
  color: var(--on-dark-mid);
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.worlds__c.is-on { opacity: 1; transform: none; }
.worlds__prog {
  position: absolute; right: var(--gut); bottom: clamp(2.5rem, 8vh, 5rem);
  width: 4.6rem; height: 4.6rem; display: grid; place-items: center;
}
.worlds__prog svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.worlds__ring-bg, .worlds__ring { fill: none; stroke-width: 1.5; }
.worlds__ring-bg { stroke: rgba(244,242,238,0.16); }
.worlds__ring {
  stroke: var(--brass);
  stroke-dasharray: 370.7; stroke-dashoffset: 370.7;
  transition: stroke-dashoffset 0.15s linear;
}
.worlds__count { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--on-dark); }
.worlds__count i { color: var(--on-dark-low); font-style: normal; }
html:not(.pin) .worlds__prog { display: none; }
html:not(.pin) .worlds__titles { height: auto; display: grid; gap: 0.2rem; }
html:not(.pin) .worlds__t { position: static; opacity: 1; transform: none; font-size: clamp(2rem, 6vw, 3.5rem); }
html:not(.pin) .worlds__copies { min-height: 0; display: grid; gap: 1rem; }
html:not(.pin) .worlds__c { position: static; opacity: 1; transform: none; }

/* 5.5 Grundsätze */
.tenets { background: var(--paper); color: var(--on-light); }
.tenets__stage { display: grid; align-content: center; }
.tenets__grid {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: start;
  padding-block: clamp(4rem, 12vh, 8rem);
}
.tenets__nav { display: grid; gap: 0.55rem; margin-top: 1.4rem; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.tenets__nav li { display: flex; gap: 0.9rem; align-items: baseline; color: var(--on-light-low); transition: color var(--dur-1) var(--ease); }
.tenets__nav li span { font-size: 0.68rem; letter-spacing: 0.2em; }
.tenets__nav li.is-on { color: var(--on-light); }
.tenets__nav li.is-on span { color: var(--brass-deep); }
.tenets__panelwrap { position: relative; }
html.pin .tenets__panelwrap { min-height: 12rem; }
html.pin .tenets__panel { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 20px, 0); pointer-events: none;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease); }
html.pin .tenets__panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.tenets__panel { display: grid; gap: 1.1rem; max-width: 46ch; }
.tenets__panel + .tenets__panel { margin-top: 2.5rem; }
html.pin .tenets__panel + .tenets__panel { margin-top: 0; }
.tenets__kicker { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--on-light-low); }
.tenets__h {
  font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1; letter-spacing: 0.01em;
}
.tenets__h em { font-style: normal; color: var(--brass-deep); }
.tenets__panel p:not(.tenets__kicker) { color: var(--on-light-mid); }
.tenets__media { display: none; }
html.pin .tenets__media {
  display: block; position: absolute; right: 0; top: 0; bottom: 0;
  width: 34vw; max-width: 30rem; overflow: hidden; z-index: 1;
}
.tenets__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.tenets__media img.is-on { opacity: 1; transform: none; }

/* 5.6 Maßstab */
.scale { padding-block: clamp(5rem, 14vh, 11rem); overflow: hidden; }
.scale__intro { margin-bottom: clamp(3rem, 9vw, 6rem); }
.scale__title { margin-top: 1.2rem; max-width: 24ch; }
.scale__stream { display: grid; gap: clamp(1.5rem, 5vw, 4.5rem); padding-inline: var(--gut); max-width: var(--max); margin-inline: auto; }
.scale__f { background: var(--ink-3); }
.scale__f img { width: 100%; }
.scale__f figcaption {
  padding-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-dark-low);
}
.scale__pair { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }

/* 5.7 Projekte */
.projekte { position: relative; background: var(--ink); }
.proj {
  position: relative; min-height: 100vh;
  display: grid; align-content: end;
  overflow: hidden;
}
html.pin .proj { will-change: transform; }
.proj__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,9,0.95) 0%, rgba(8,8,9,0.3) 55%, rgba(8,8,9,0.5) 100%);
}
.proj__inner { position: relative; padding-block: clamp(3rem, 10vh, 6rem); display: grid; gap: 0.7rem; }
.proj__idx { font-size: 0.72rem; letter-spacing: 0.28em; color: var(--brass); }
.proj__h { font-family: var(--serif); font-weight: 300; text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 6rem); line-height: 0.95; }
.proj__place { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--on-dark-mid); }
.proj__txt { max-width: 44ch; color: var(--on-dark-mid); margin-top: 0.6rem; }
.proj__facts {
  display: grid; gap: 1.2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(9rem, auto));
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(244,242,238,0.14);
  justify-content: start;
}
.proj__facts dt { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-low); }
.proj__facts dd { font-family: var(--serif); font-size: 1.3rem; margin-top: 0.25rem; }

/* 5.8 Zitat */
.zitat__stage { display: grid; align-content: center; overflow: hidden; }
.zitat { min-height: 100vh; }
.zitat__scrim { position: absolute; inset: 0; background: rgba(8,8,9,0.72); }
.zitat__inner { position: relative; padding-block: clamp(4rem, 12vh, 8rem); }
.zitat__quotes { position: relative; min-height: 6rem; max-width: 34ch; }
.zitat__quotes blockquote { }
html.pin .zitat__quotes blockquote {
  position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
html.pin .zitat__quotes blockquote.is-on { opacity: 1; transform: none; }
.zitat__quotes blockquote + blockquote { margin-top: 2rem; }
html.pin .zitat__quotes blockquote + blockquote { margin-top: 0; }
.zitat__quotes p {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  line-height: 1.12; letter-spacing: 0.005em;
}
.zitat__by { display: flex; align-items: center; gap: 1rem; margin-top: clamp(2.5rem, 7vh, 4rem); }
.zitat__by img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.zitat__name { display: grid; }
.zitat__name b { font-weight: 400; font-size: 0.9rem; letter-spacing: 0.08em; }
.zitat__name i { font-style: normal; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-low); }
.zitat__count { margin-left: auto; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--on-dark-low); }
.zitat__count b { color: var(--brass); font-weight: 400; }

/* 5.9 Ablauf — seitwärts laufende Bahn */
.ablauf__stage { display: grid; align-content: center; gap: clamp(1.5rem, 4vh, 3rem); padding-block: clamp(3rem, 8vh, 5rem); }
.ablauf__title {
  font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.8rem, 4.6vw, 3.4rem); line-height: 1; margin-top: 0.8rem;
}
.ablauf__viewport { overflow: hidden; }
.ablauf__track { display: flex; gap: clamp(1rem, 2.4vw, 2rem); padding-inline: var(--gut); }
html.pin .ablauf__track { will-change: transform; }
.ablauf__station { flex: 0 0 auto; width: min(80vw, 22rem); display: grid; gap: 0.7rem; align-content: start; }
/* Breite in vw, nicht in rem gedeckelt: nur so ist die Bahn auf jedem
   Schirm ein Vielfaches der Fensterbreite lang. Mit einer festen
   Höchstbreite bleibt auf großen Schirmen fast kein Weg übrig — die
   Bahn stand dann praktisch still, während der Balken durchlief. */
html.pin .ablauf__station {
  width: max(17rem, 34vw);
  opacity: calc(0.42 + 0.58 * var(--near, 1));
  transition: opacity 0.25s linear;
}
.ablauf__station figure { overflow: hidden; background: var(--ink-3); margin-bottom: 0.4rem; }
.ablauf__station img { width: 100%; }
/* Das Bild läuft in seinem Rahmen gegen die Fahrtrichtung — dadurch
   bekommt die Bahn Tiefe statt nur zu verrutschen. */
html.pin .ablauf__station img {
  width: 116%; margin-left: -8%;
  transform: translate3d(var(--shift, 0px), 0, 0);
  will-change: transform;
}
.ablauf__nr { font-size: 0.7rem; letter-spacing: 0.28em; color: var(--brass); }
.ablauf__station h3 {
  font-family: var(--serif); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1;
}
.ablauf__txt { color: var(--on-dark-mid); font-size: 0.95rem; }
.ablauf__foot { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.ablauf__step { flex: none; font-size: 0.78rem; letter-spacing: 0.16em; }
.ablauf__step b { font-weight: 400; color: var(--brass); }
.ablauf__step i { font-style: normal; color: var(--on-dark-low); margin-left: 0.4rem; }
.ablauf__bar { flex: 1 1 auto; height: 1px; background: rgba(244,242,238,0.16); }
.ablauf__bar > i { display: block; height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; }
.ablauf__label { flex: none; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-mid); }

/* Ohne Pinning: nativ wischbare Bahn statt Transform */
html:not(.pin) .ablauf__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.pin) .ablauf__station { scroll-snap-align: start; }
html:not(.pin) .ablauf__track { transform: none !important; }

/* 5.10 Einsatzgebiet — Polarkarte */
.gebiet { padding-block: clamp(5rem, 14vh, 10rem); }
.gebiet__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
/* Eigene Stufe: die Überschrift steht in einer halben Spalte, mit der
   vollen Display-Größe bricht schon ein einzelnes Wort um. */
.gebiet__title { margin-block: 1.2rem 1.5rem; font-size: clamp(2rem, 4.3vw, 3.9rem); }
.gebiet__intro { color: var(--on-light-mid); max-width: 44ch; }
.gebiet__list { display: grid; gap: 0; margin-top: clamp(2rem, 5vw, 3rem); }
.gebiet__list button {
  display: flex; gap: 1rem; align-items: baseline; width: 100%;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--paper-3);
  padding: 0.75rem 0.2rem; cursor: pointer; color: var(--on-light-low);
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}
.gebiet__list li:last-child button { border-bottom: 1px solid var(--paper-3); }
.gebiet__list button:hover { color: var(--on-light); padding-left: 0.6rem; }
.gebiet__list button.is-on { color: var(--on-light); }
.gebiet__km { flex: none; width: 4.6rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-light-low); }
.gebiet__list button.is-on .gebiet__km { color: var(--brass-deep); }
.gebiet__map { width: 100%; height: auto; }
.gebiet__rings circle { fill: none; stroke: var(--paper-3); stroke-width: 1; }
.gebiet__spokes line { stroke: var(--paper-3); stroke-width: 1; stroke-dasharray: 2 7; }
.gebiet__scale text { font-family: var(--sans); font-size: 11px; fill: var(--on-light-low); letter-spacing: 0.12em; text-anchor: middle; }
.gebiet__scale .gebiet__n { font-size: 13px; fill: var(--on-light-mid); text-anchor: middle; letter-spacing: 0.2em; }
.gebiet__links line { stroke: var(--paper-3); stroke-width: 1; transition: stroke var(--dur-1) var(--ease); }
.gebiet__links line.is-on { stroke: var(--brass-deep); }
.gebiet__pins circle { fill: var(--on-light); transition: fill var(--dur-1) var(--ease); }
.gebiet__pins text {
  font-family: var(--sans); font-size: 12.5px; text-anchor: middle;
  fill: var(--on-light-mid); letter-spacing: 0.09em;
  transition: fill var(--dur-1) var(--ease);
}
.gebiet__pins g.is-on circle { fill: var(--brass-deep); }
.gebiet__pins g.is-on text { fill: var(--on-light); }
.gebiet__panels { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--paper-3); }
.gebiet__panels article + article { margin-top: 1.2rem; }
.gebiet__panels h3 { font-family: var(--serif); font-weight: 300; text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.04em; }
.gebiet__panels p { color: var(--on-light-mid); margin-top: 0.4rem; max-width: 48ch; }
/* Mit Skript zeigt die Karte eine Tafel, ohne Skript stehen alle da. */
html.js .gebiet__panels article { display: none; }
html.js .gebiet__panels article.is-on { display: block; }

/* ── 6 · Anfrage und Fuß ───────────────────────────────────── */
.anfrage { padding-block: clamp(5rem, 14vh, 10rem); overflow: hidden; }
.anfrage__bg { opacity: 0.14; }
.anfrage__inner { position: relative; }
.anfrage__title { margin-block: 1.2rem clamp(2.5rem, 7vw, 4rem); }
.form { display: grid; gap: 1.4rem; max-width: 46rem; }
.form__row { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field > span { font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-light-low); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--paper-3);
  padding: 0.65rem 0.1rem;
  border-radius: 0;
  transition: border-color var(--dur-1) var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--on-light); }
.btn {
  justify-self: start; margin-top: 0.6rem;
  min-height: 3rem; padding: 0.8rem 2rem;
  background: var(--on-light); color: var(--paper);
  border: 1px solid var(--on-light); border-radius: 100px;
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover { background: transparent; color: var(--on-light); }
.form__hint { font-size: 0.85rem; color: var(--brass-deep); min-height: 1.2em; }

.foot { background: var(--ink-2); color: var(--on-dark); padding-block: clamp(3.5rem, 9vh, 6rem) 2rem; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.foot__brand { display: flex; align-items: center; gap: 0.9rem; }
.foot__mark { width: 1.6rem; height: 1.6rem; }
.foot__brand p { font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.28em; display: grid; gap: 0.3rem; }
.foot__brand span { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; color: var(--on-dark-low); }
.foot__col { display: grid; gap: 0.5rem; align-content: start; font-size: 0.85rem; color: var(--on-dark-mid); }
.foot__col h2 { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--on-dark-low); font-weight: 400; margin-bottom: 0.3rem; }
.foot__col a:hover { color: var(--on-dark); }
.foot__note { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(244,242,238,0.1); }
.foot__note p { font-size: 0.72rem; line-height: 1.6; color: var(--on-dark-low); max-width: 100ch; }

/* ── 7 · Schirme ───────────────────────────────────────────── */
@media (min-width: 48rem) {
  .haltung__grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }
  .haltung__fig--a { grid-column: 1 / 7; }
  .haltung__text  { grid-column: 8 / 13; }
  .haltung__fig--b { grid-column: 1 / 5; }
  .haltung__fig--c { grid-column: 6 / 13; }
  .scale__pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .scale__f--low { margin-top: clamp(3rem, 12vw, 9rem); }
  .form__row { grid-template-columns: 1fr 1fr; }
  .foot__grid { grid-template-columns: 2fr 1fr 1.4fr; }
  html.pin .tenets__grid { grid-template-columns: 1fr 1.25fr; padding-right: 36vw; }
  .tenets__grid { grid-template-columns: 1fr 1.4fr; }
  .gebiet__grid { grid-template-columns: 1fr 1.1fr; }
}
@media (min-width: 62rem) {
  .head__nav { display: flex; }
  .head__burger { display: none; }
  .mnav { display: none; }
  .worlds__ui { padding-right: 8rem; }
}
@media (max-width: 47.99rem) {
  .worlds__fallback { grid-template-columns: 1fr; gap: 2rem; }
  .hero__foot { font-size: 0.65rem; }
  .draftbar { font-size: 0.66rem; }
}