/* ═══════════════════════════════════════════════════════════════════
   WIELAND — zweite Fassung: die durchgehende Bühne.

   Nach dem Vorbild von Massif (vividsites): ein Raum steht die ganze
   Seite über, die Kamera fährt hindurch, der Text zieht darüber hinweg.
   Deshalb bringt hier KEIN Abschnitt ein eigenes Bild mit — es gibt nur
   noch Schrift auf der Bühne.

   Die Grammatik aus scroll.css wird bewusst NICHT geladen: die ist für
   die Diaschau gebaut. Diese Seite ist ein anderer Typ.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Cinzel';src:url('fonts/cinzel-500-normal-latin.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cinzel';src:url('fonts/cinzel-600-normal-latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cinzel';src:url('fonts/cinzel-700-normal-latin.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}

:root{
  --grund:#0B0805;
  --schrift:#F0E7D7;
  /* Auf einer echten Aufnahme braucht auch der Fliesstext mehr Deckung
     als auf einem flachen Grund — .62 verschwand im Lampenlicht. */
  --dim:rgba(243,235,221,.80);
  --leise:rgba(243,235,221,.46);
  --linie:rgba(240,231,215,.14);
  --akzent:#6FA3C7;
  --rand:clamp(18px,4.4vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--grund);color:var(--schrift);
  font-family:'Cormorant',Georgia,serif;font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--akzent);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--akzent);color:var(--grund);padding:10px 16px}

/* ── Die Fahrt liegt fest hinter allem ──────────────────────────────
   Kein gerechneter Raum, sondern eine echte Kameraaufnahme, die am
   Scrollbalken abläuft. Gerechnetes 3D sieht immer nach 3D aus. */
.fahrt{position:fixed;inset:0;z-index:0}
.fahrt__canvas,.fahrt__ersatz{position:absolute;inset:0;width:100%;height:100%}
.fahrt__canvas{opacity:0;transition:opacity 1.1s var(--ease)}
.fahrt__canvas.laeuft{opacity:1}
.fahrt__ersatz{object-fit:cover;transition:opacity 1.1s var(--ease)}
.fahrt__ersatz.weg{opacity:0}
/* Eine echte Aufnahme ist viel heller als eine gerechnete Szene — das
   Lampenlicht auf dem Holz schluckt weiße Schrift. Deshalb liegt hier
   zweierlei darüber: eine gleichmäßige Abdunklung, die überall wirkt,
   und eine Vignette, die die Ränder zufallen lässt. Zusammen bleibt die
   Struktur des Holzes sichtbar, aber jede Zeile hat Grund. */
.fahrt::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:rgba(8,5,3,.46)}
.fahrt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(74% 66% at 50% 44%,transparent 0%,rgba(5,3,2,.88) 100%)}

main{position:relative;z-index:1}

/* ── Die vier Ecken: winzige Beschriftungen, wie an einem Instrument ── */
.ecken{position:fixed;inset:0;z-index:2;pointer-events:none;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--leise)}
.ecken span{position:absolute;padding:0}
.ecke-lo{top:18px;left:var(--rand)}
.ecke-ro{top:18px;right:var(--rand)}
.ecke-lu{bottom:18px;left:var(--rand)}
.ecke-ru{bottom:18px;right:var(--rand)}
.ecken b{color:var(--schrift);font-weight:500;letter-spacing:.2em;font-size:13px}
.ecken a{pointer-events:auto;color:var(--akzent)}
@media(max-width:640px){.ecke-ro,.ecke-lu{display:none}}

/* ── Ein Halt ist ein Stück Fahrt, kein Kasten ─────────────────────── */
.halt{min-height:100svh;display:grid;align-content:center;
  padding:clamp(90px,16vh,150px) var(--rand)}
/* Rechtsbuendig wirkt erst, wenn daneben Platz ist. Auf dem Handy
   waere es nur schwerer zu lesen. */
.halt--rechts{justify-items:start;text-align:left}
@media(min-width:820px){.halt--rechts{justify-items:end;text-align:right}}
.halt--mitte{justify-items:center;text-align:center}

.marke{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--akzent);margin:0 0 1.6em}
h1,h2{font-family:'Cinzel',serif;margin:0;text-transform:uppercase;line-height:1.06;
  letter-spacing:.03em;font-weight:600}
h1{font-size:clamp(30px,5.6vw,78px);max-width:13ch}
h2{font-size:clamp(24px,4vw,54px);max-width:15ch}
/* Was hinter der Schrift liegt, wechselt mit jeder Kameraposition —
   mal dunkles Holz, mal glühendes Gold. Deshalb bringt jede Zeile
   ihren eigenen Halt mit, statt sich auf den Hintergrund zu verlassen. */
h1,h2{text-shadow:0 2px 40px rgba(4,2,1,.96),0 2px 12px rgba(4,2,1,.9),0 0 3px rgba(4,2,1,.7)}
.marke,.lauf{text-shadow:0 1px 18px rgba(6,4,2,.95)}
.werte b,.werte span,.ablauf b,.ablauf li{text-shadow:0 1px 16px rgba(6,4,2,.95)}
/* Der Akzent ist hier die SCHRIFTSTÄRKE, nicht die Farbe — so macht es
   Massif: "decided long before the rope goes on". Ein farbiges Wort wäre
   auf dieser Bühne zu laut, weil das Bild schon spricht. */
h1 b,h2 b{font-weight:700;color:#FFF6E4}
h1 i,h2 i{font-style:normal;color:var(--dim);font-weight:500}
.lauf{margin:1.5em 0 0;max-width:40ch;color:var(--dim);font-size:clamp(16.5px,1.6vw,19px)}
.halt--rechts .lauf,.halt--mitte .lauf{margin-left:auto}
.halt--mitte .lauf{margin-right:auto}

/* ── Zahlen: vier Werte in einer Reihe, wie bei Massif ─────────────── */
.werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,4vw,58px);margin:clamp(30px,5vh,54px) 0 0;list-style:none;padding:0}
@media(min-width:760px){.werte{grid-template-columns:repeat(4,minmax(0,1fr))}}
.werte b{display:block;font-family:'Cinzel',serif;font-size:clamp(28px,4.4vw,52px);
  font-weight:600;line-height:1}
.werte span{display:block;margin-top:.6em;font-family:'Cinzel',serif;font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--leise)}

/* ── Die Reviere: Chips direkt unter dem Auftakt ───────────────────── */
.reviere{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(26px,4vh,44px) 0 0;
  list-style:none;padding:0}
.reviere li{border:1px solid var(--linie);padding:9px 16px;
  font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim)}

/* ── Drei Karten, die auf der Bühne liegen ─────────────────────────── */
.karten{display:grid;gap:12px;grid-template-columns:1fr;margin:clamp(26px,4vh,44px) 0 0;
  list-style:none;padding:0;width:100%;max-width:940px}
@media(min-width:820px){.karten{grid-template-columns:repeat(3,1fr)}}
.karten li{border:1px solid var(--linie);background:rgba(11,8,5,.52);
  padding:clamp(18px,2.4vw,26px);text-align:left;
  transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.karten li:hover{border-color:rgba(240,231,215,.42);background:rgba(11,8,5,.72)}
.karten b{display:block;font-family:'Cinzel',serif;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.7em}
.karten p{margin:0;font-size:16px;color:var(--dim)}
.karten em{font-style:normal;color:var(--akzent);font-family:'Cinzel',serif;
  font-size:10.5px;letter-spacing:.24em;display:block;margin-bottom:1em}

/* ── Der Ablauf als schmale Liste, nicht als Tabelle ───────────────── */
.ablauf{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;
  border-top:1px solid var(--linie);width:100%;max-width:720px}
.ablauf li{display:flex;gap:16px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--linie);text-align:left}
.ablauf b{font-family:'Cinzel',serif;font-size:10.5px;letter-spacing:.24em;
  color:var(--akzent);flex:0 0 auto;width:2.4em}
.ablauf span{margin-left:auto;color:var(--leise);font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.14em;white-space:nowrap}

/* ── Der Abschluss liegt IM Bild, nicht auf eigenem Grund ──────────── */
.anfrage{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(26px,4vh,44px) 0 0;
  width:100%;max-width:620px}
.anfrage input{flex:1 1 180px;background:rgba(11,8,5,.6);border:1px solid var(--linie);
  color:var(--schrift);padding:14px 16px;font-family:'Cormorant',Georgia,serif;font-size:16px}
.anfrage input::placeholder{color:var(--leise)}
.anfrage button{flex:0 0 auto;background:var(--akzent);border:0;color:var(--grund);
  padding:14px 26px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;cursor:pointer;
  transition:filter .3s var(--ease)}
.anfrage button:hover{filter:brightness(1.14)}
.hinweis{margin:1.2em 0 0;font-size:14.5px;color:var(--leise);max-width:44ch}

/* Ohne Bewegung: das Ersatzfoto bleibt, die Halte werden kürzer. */
@media (prefers-reduced-motion:reduce){
  .fahrt__ersatz{opacity:.55}
  .halt{min-height:auto;padding:clamp(56px,10vh,90px) var(--rand)}
  .ecken{position:absolute}
}