/* ============================================================================
   COFFEE FESTIVAL EUROPE — Sektionsarten
   ----------------------------------------------------------------------------
   Damit nicht jede Unterseite gleich aussieht, gibt es hier mehrere Bauformen.
   Jede Seite bekommt eine andere Mischung, und jede Bauform hat ihre eigene
   Bewegung — die Kinobahn arbeitet mit Parallaxe, der Klebesatz mit einem
   Bildwechsel am Scrollpunkt, die Filmrolle mit waagerechtem Lauf.

   Gemeinsam ist ihnen nur zweierlei: sie halten sich an die Markenfarben, und
   sie halten still, wenn jemand reduzierte Bewegung eingestellt hat.        */

/* ══ B · KINOBAHN ═══════════════════════════════════════════════════════════
   Ein Bild über die volle Breite, das beim Scrollen langsamer läuft als die
   Seite. Die Schrift liegt darüber und läuft schneller — der Abstand dazwischen
   erzeugt Tiefe, ohne dass etwas ruckelt.                                    */
.cine{position:relative;height:min(92svh,760px);overflow:clip;background:var(--ink)}
.cine__media{position:absolute;inset:-12% 0 -12% 0;will-change:transform}
.cine__media video,.cine__media img{width:100%;height:100%;object-fit:cover;display:block}
.cine__veil{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,8,6,.72) 0,rgba(11,8,6,.28) 38%,
      rgba(11,8,6,.42) 68%,rgba(11,8,6,.94) 100%),
    linear-gradient(96deg,rgba(11,8,6,.74) 0,rgba(11,8,6,.3) 46%,rgba(11,8,6,0) 78%)}
.cine__inner{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(28px,5vw,80px) var(--gutter,clamp(18px,4vw,64px))}
.cine__k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);
  margin:0 0 .8rem}
.cine__h{font-family:var(--f-display);font-weight:800;font-stretch:106%;line-height:.94;
  font-size:clamp(2.2rem,6.6vw,5.4rem);letter-spacing:-.02em;color:var(--ivory);margin:0;
  max-width:16ch}
.cine__b{margin:1.1rem 0 0;max-width:52ch;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.6;
  color:rgba(244,238,228,.76)}
.cine__meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem}
.cine__meta span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,238,228,.54)}

/* ══ C · KLEBESATZ ══════════════════════════════════════════════════════════
   Links bleibt das Bild stehen, rechts laufen die Schritte durch. Beim
   Erreichen eines Schrittes wechselt das Bild. Das ist die Bauform für
   Abläufe: sechs Stationen, ein Blickanker.                                  */
.stick{background:var(--ivory);color:var(--ink);padding-block:clamp(50px,7vw,110px)}
.stick--dark{background:var(--ink);color:var(--ivory)}
.stick__grid{display:grid;gap:clamp(24px,4vw,64px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stick__media{position:sticky;top:clamp(80px,12vh,140px);border-radius:18px;overflow:hidden;
  aspect-ratio:4/5;background:rgba(11,8,6,.08)}
.stick--dark .stick__media{background:rgba(244,238,228,.06)}
.stick__media figure{margin:0;position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,.72,.2,1)}
.stick__media figure.is-on{opacity:1;transform:none}
.stick__media img,.stick__media video{width:100%;height:100%;object-fit:cover;display:block}
.stick__steps{display:flex;flex-direction:column;gap:clamp(40px,9vh,110px);
  padding-block:clamp(20px,6vh,80px)}
.stick__step{min-height:38svh;display:flex;flex-direction:column;justify-content:center}
.stick__n{font-family:var(--f-mono,ui-monospace,monospace);font-size:.78rem;letter-spacing:.14em;
  color:var(--ember)}
.stick__t{font-family:var(--f-display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.4rem,3vw,2.3rem);line-height:1.08;margin:.6rem 0 0;letter-spacing:-.01em}
.stick__b{margin:.8rem 0 0;font-size:clamp(.94rem,1.2vw,1.05rem);line-height:1.65;
  color:var(--muted-2);max-width:46ch}
.stick--dark .stick__b{color:rgba(244,238,228,.66)}
@media (max-width:860px){
  .stick__grid{grid-template-columns:1fr}
  .stick__media{position:relative;top:0;aspect-ratio:16/10}
  .stick__step{min-height:0}
}

/* ══ D · FILMROLLE ══════════════════════════════════════════════════════════
   Eine Reihe, die waagerecht läuft. Mit dem Rad, mit dem Finger, mit der
   Maus gezogen — und mit Tastatur, weil sonst die Hälfte der Leute aussteigt. */
.rail{padding-block:clamp(44px,6vw,92px);overflow:hidden}
.rail__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,36px)}
.rail__track{display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;cursor:grab;scrollbar-width:thin;
  scrollbar-color:rgba(226,85,30,.5) transparent}
.rail__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail__track::-webkit-scrollbar{height:6px}
.rail__track::-webkit-scrollbar-thumb{background:rgba(226,85,30,.5);border-radius:99px}
.rail__i{flex:0 0 clamp(230px,26vw,380px);scroll-snap-align:start;border-radius:14px;
  overflow:hidden;background:rgba(244,238,228,.05);position:relative}
.rail__i img,.rail__i video{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.22,.72,.2,1)}
.rail__i:hover img{transform:scale(1.05)}
.rail__i figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem;font-size:.82rem;
  color:var(--ivory);background:linear-gradient(0deg,rgba(11,8,6,.88),rgba(11,8,6,0))}
.rail__hint{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,238,228,.52)}

/* ══ E · ZEITSTRAHL, WAAGERECHT ═════════════════════════════════════════════ */
.hist{padding-block:clamp(44px,6vw,92px);overflow:hidden}
.hist__track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:20px}
.hist__i{flex:0 0 clamp(240px,24vw,330px);scroll-snap-align:center;position:relative;
  padding:0 clamp(14px,1.6vw,24px)}
.hist__i::before{content:"";position:absolute;left:0;right:0;top:46px;height:1px;
  background:rgba(244,238,228,.16)}
.hist__i::after{content:"";position:absolute;left:clamp(14px,1.6vw,24px);top:41px;
  width:11px;height:11px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 5px rgba(226,85,30,.16)}
.hist__y{font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1;color:var(--ivory);margin:0 0 .9rem}
.hist__t{margin:1.4rem 0 0;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember)}
.hist__b{margin:.5rem 0 0;font-size:.9rem;line-height:1.6;color:rgba(244,238,228,.62)}

/* ══ F · ZEITRASTER ═════════════════════════════════════════════════════════ */
.tt{padding-block:clamp(44px,6vw,92px)}
.tt__tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,34px)}
.tt__tab{padding:.6rem 1.1rem;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:.86rem;color:rgba(244,238,228,.7);background:rgba(244,238,228,.06);
  border:1px solid rgba(244,238,228,.14);transition:color .18s ease,border-color .18s ease,background-color .18s ease}
.tt__tab:hover{color:var(--ivory);border-color:rgba(244,238,228,.32)}
.tt__tab[aria-selected="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.tt__day{display:none}
.tt__day.is-on{display:block}
.tt__row{display:grid;grid-template-columns:92px 1fr;gap:clamp(12px,2vw,28px);
  padding:clamp(14px,1.8vw,22px) 0;border-top:1px solid rgba(244,238,228,.10);
  align-items:baseline}
.tt__time{font-family:var(--f-mono,ui-monospace,monospace);font-size:.84rem;color:var(--ember);
  font-variant-numeric:tabular-nums}
.tt__t{font-size:clamp(1rem,1.5vw,1.2rem);font-weight:600;color:var(--ivory);margin:0}
.tt__b{margin:.35rem 0 0;font-size:.9rem;line-height:1.6;color:rgba(244,238,228,.6);max-width:56ch}
.tt__tag{display:inline-block;margin-top:.5rem;padding:.2rem .6rem;border-radius:999px;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(226,85,30,.42);color:var(--ember)}

/* ══ G · MOSAIK ═════════════════════════════════════════════════════════════ */
.mos{display:grid;gap:clamp(8px,1.1vw,14px);grid-template-columns:repeat(6,1fr);
  /* Eine gemeinsame Zeilenhoehe fuer alles. Sie ist an die Fensterbreite
     gekoppelt, damit sie mit der Spaltenbreite mitwaechst — nur so bleiben
     die Kacheln in jeder Groesse im selben Verhaeltnis. */
  grid-auto-rows:clamp(76px,10.2vw,190px);
  grid-auto-flow:dense;
  margin-top:clamp(28px,3.6vw,52px)}
.mos figure{margin:0;position:relative;border-radius:12px;overflow:hidden;
  background:rgba(244,238,228,.05);
  grid-column:span 2;grid-row:span 2}
.mos img,.mos video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.22,.72,.2,1)}
.mos figure:hover img{transform:scale(1.06)}

/* Die Aufteilung haengt an der Position, nicht an einer Klasse im Markup.
   Jede Dreiergruppe von Zeilen belegt genau sechs Spalten. */
.mos figure:nth-child(6n+1){grid-column:span 4;grid-row:span 3}
.mos figure:nth-child(6n+2){grid-column:span 2;grid-row:span 3}
.mos figure:nth-child(6n+3),
.mos figure:nth-child(6n+4),
.mos figure:nth-child(6n+5){grid-column:span 2;grid-row:span 2}
.mos figure:nth-child(6n+6){grid-column:span 6;grid-row:span 2}
/* Bleibt ein Satz unvollstaendig, laeuft die letzte Kachel ueber den Rest —
   besser als eine Luecke am Zeilenende. */
.mos figure:last-child:nth-child(6n+3){grid-column:span 4}
.mos figure:last-child:nth-child(6n+5){grid-column:span 4}

/* Bildunterschrift: am Zeiger beim Ueberfahren, auf dem Finger immer da.
   Ohne diese Trennung ist die Beschriftung auf jedem Tablet unsichtbar. */
.mos figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem;font-size:.78rem;
  color:var(--ivory);background:linear-gradient(0deg,rgba(11,8,6,.86),rgba(11,8,6,0));
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
@media (hover:hover){.mos figure:hover figcaption{opacity:1;transform:none}}
@media (hover:none){.mos figcaption{opacity:1;transform:none}}

@media (max-width:900px){
  .mos{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(64px,13vw,120px)}
  .mos figure{grid-column:span 2;grid-row:span 2}
  .mos figure:nth-child(6n+1){grid-column:span 4;grid-row:span 3}
  .mos figure:nth-child(6n+2){grid-column:span 2;grid-row:span 3}
  .mos figure:nth-child(6n+3){grid-column:span 2;grid-row:span 3}
  .mos figure:nth-child(6n+6){grid-column:span 4;grid-row:span 2}
  .mos figure:last-child:nth-child(6n+3),
  .mos figure:last-child:nth-child(6n+5){grid-column:span 4}
}
@media (max-width:560px){
  .mos{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(58px,17vw,110px)}
  .mos figure,
  .mos figure:nth-child(6n+1),.mos figure:nth-child(6n+2),
  .mos figure:nth-child(6n+3),.mos figure:nth-child(6n+6){grid-column:span 2;grid-row:span 2}
  .mos figure:nth-child(6n+1){grid-row:span 3}
}

/* Einblendung: die Kachel blendet auf, das Motiv darin setzt sich. */
@media (prefers-reduced-motion:no-preference){
  .mos img,.mos video{transform:scale(1.08)}
  .mos.is-in img,.mos.is-in video{transform:none;
    transition:transform 1.15s var(--e-out-expo)}
  .mos.is-in figure:nth-child(2) img{transition-delay:.07s}
  .mos.is-in figure:nth-child(3) img{transition-delay:.14s}
  .mos.is-in figure:nth-child(4) img{transition-delay:.21s}
  .mos.is-in figure:nth-child(5) img{transition-delay:.28s}
  .mos.is-in figure:nth-child(6) img{transition-delay:.35s}
  /* Beim Ueberfahren gewinnt die Lupe wieder — sonst haenge die Kachel nach
     dem Einlaufen an ihrer Verzoegerung fest. */
  .mos figure:hover img{transform:scale(1.06);transition-delay:0s;
    transition-duration:.9s}
}

/* ══ H · VERGLEICH ══════════════════════════════════════════════════════════ */
.cmp{display:grid;gap:clamp(12px,1.6vw,20px);margin-top:clamp(28px,3.6vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cmp__c{position:relative;padding:clamp(22px,2.6vw,34px);border-radius:16px;
  background:rgba(244,238,228,.045);border:1px solid rgba(244,238,228,.12);
  display:flex;flex-direction:column}
.cmp__c--hi{border-color:rgba(226,85,30,.55);background:rgba(226,85,30,.06)}
.cmp__badge{position:absolute;top:-10px;left:clamp(22px,2.6vw,34px);padding:.2rem .7rem;
  border-radius:999px;background:var(--ember);color:#fff;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase}
.cmp__t{font-family:var(--f-display);font-weight:700;font-stretch:104%;
  font-size:clamp(1.15rem,1.9vw,1.5rem);margin:0;color:var(--ivory)}
.cmp__p{margin:.5rem 0 0;font-size:.86rem;color:rgba(244,238,228,.6)}
.cmp__l{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.cmp__l li{display:flex;gap:.6rem;font-size:.9rem;line-height:1.5;
  color:rgba(244,238,228,.78)}
.cmp__l li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--ember);margin-top:.55rem}

@media (prefers-reduced-motion:reduce){
  .cine__media{transform:none!important}
  .stick__media figure{transition:none}
  .mos img,.rail__i img{transition:none}
}

/* ============================================================================
   JOURNAL — der redaktionelle Index
   Keine Kartenwand. Ein Aufmacher mit Bild, darunter eine Zeilenliste, die wie
   ein Inhaltsverzeichnis gelesen wird: Datum links, Titel in der Mitte, Rubrik
   rechts. Beim Zeigen wandert eine Glutlinie unter die Zeile.
   ========================================================================= */
.jrn__lead{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3.4vw,56px);
  align-items:center;margin-bottom:clamp(34px,5vw,72px)}
.jrn__shot{position:relative;overflow:hidden;border-radius:clamp(14px,1.4vw,20px);
  aspect-ratio:16/10;background:rgba(244,238,228,.04)}
.jrn__shot img,.jrn__shot video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.2s var(--e-out-expo)}
.jrn__lead:hover .jrn__shot img{transform:scale(1)}
.jrn__shot::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(226,85,30,.16),transparent 52%),
             linear-gradient(0deg,rgba(11,10,9,.42),transparent 46%)}
.jrn__date{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-lo)}
.jrn__h{margin:.55em 0 .5em;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--ivory);font-weight:600}
.jrn__b{font-size:clamp(.94rem,1.05vw,1.05rem);line-height:1.68;color:var(--bone);opacity:.84;
  max-width:52ch}

.jrn__idx{border-top:1px solid rgba(244,238,228,.14)}
.jrn__r{position:relative;display:grid;grid-template-columns:9.5rem 1fr auto;
  gap:clamp(12px,2vw,32px);align-items:baseline;
  padding:clamp(15px,1.8vw,24px) 0;border-bottom:1px solid rgba(244,238,228,.09);
  transition:padding-left .6s var(--e-out-expo)}
.jrn__r::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--ember),transparent);
  transition:width .8s var(--e-out-expo)}
.jrn__r:hover{padding-left:clamp(6px,.8vw,14px)}
.jrn__r:hover::before{width:100%}
.jrn__rd{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.jrn__rt{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.35;color:var(--ivory);font-weight:600}
.jrn__rb{display:block;margin-top:.35em;font-size:clamp(.86rem,.95vw,.95rem);line-height:1.62;
  color:var(--bone);opacity:.76;font-weight:400;max-width:64ch}
.jrn__tag{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-lo);white-space:nowrap;
  padding:.28em .7em;border:1px solid rgba(226,85,30,.28);border-radius:999px}

/* ============================================================================
   LEERZUSTAND — die Rubrik gibt es, die Eintraege noch nicht
   Vorher ein gestrichelter Kasten in Elfenbeintoenen. Auf dunklem Grund war
   das lesbar; auf dem hellen Abschnitt stand Elfenbein auf Elfenbein — der
   Rahmen war unsichtbar und der Text kam auf 1,1:1. Dazu lag eine
   Deckkraft von .82 darueber, die den Kontrast noch einmal senkte.

   Jetzt: eine Karte mit zwei Grundfarben. Auf hellem Grund wird sie mit
   Weiss aufgehellt statt abgedunkelt — dadurch steigt der Kontrast des
   Textes, statt zu fallen (gemessen: Marke 4,9:1, Fliesstext 11,6:1).
   Statt der Strichlinie steht ein ruhig pulsender Punkt: der Zustand ist
   „in Arbeit", nicht „kaputt".
   ========================================================================= */
.leer{position:relative;max-width:62ch;display:grid;gap:.85rem;
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);
  border-radius:clamp(12px,1.2vw,18px);
  border:1px solid rgba(244,238,228,.14);
  background:linear-gradient(180deg,rgba(244,238,228,.05),rgba(244,238,228,.015));
  overflow:hidden}
/* Die farbige Kante links greift den Seitenton auf. */
.leer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--pt),transparent 78%)}
.leer__mark{display:flex;align-items:center;gap:.62rem;margin:0;
  font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.14em;
  text-transform:uppercase;color:var(--pt-lo)}
.leer__dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--pt);
  animation:leerPuls 2.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes leerPuls{
  0%{box-shadow:0 0 0 0 var(--pt-glow)}
  62%{box-shadow:0 0 0 10px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.jrn__soon{margin:0;max-width:62ch;
  font-size:clamp(.94rem,1.05vw,1.06rem);line-height:1.7;color:var(--bone)}

/* Heller Grund: aufhellen statt abdunkeln. */
.section--light .leer,.psec--light .leer{
  border-color:rgba(11,8,6,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  box-shadow:0 18px 40px rgba(11,8,6,.05)}
.section--light .leer__mark,.psec--light .leer__mark{color:var(--pt-dk)}
.section--light .jrn__soon,.psec--light .jrn__soon{color:#3A322C}

@media (prefers-reduced-motion:reduce){.leer__dot{animation:none}}
.a11y-rm .leer__dot{animation:none}

@media (max-width:860px){
  .jrn__lead{grid-template-columns:1fr}
  .jrn__r{grid-template-columns:1fr;gap:.35rem}
  .jrn__tag{justify-self:start;margin-top:.5rem}
}

/* ============================================================================
   ZUGANG — Servicezeilen mit Status
   Für „Barrierefreiheit vor Ort": jede Zeile nennt eine Leistung und sagt
   ehrlich, ob sie steht, geplant ist oder noch verhandelt wird.
   ========================================================================= */
.zug{display:grid;gap:0;border-top:1px solid rgba(244,238,228,.14)}
.zug__r{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,2vw,34px);
  align-items:start;padding:clamp(15px,1.8vw,24px) 0;
  border-bottom:1px solid rgba(244,238,228,.09)}
.zug__t{font-size:clamp(.98rem,1.15vw,1.1rem);color:var(--ivory);font-weight:620}
.zug__b{margin-top:.35em;font-size:clamp(.86rem,.95vw,.95rem);line-height:1.64;
  color:var(--bone);opacity:.78;max-width:66ch}
.zug__s{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
  font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase}
.zug__s i{width:7px;height:7px;border-radius:50%;flex:none}
.zug__s--yes{color:#7FC9A6}      .zug__s--yes i{background:#7FC9A6}
.zug__s--plan{color:var(--ember-lo)} .zug__s--plan i{background:var(--ember)}
.zug__s--open{color:var(--muted)}    .zug__s--open i{background:var(--muted)}
@media (max-width:700px){.zug__r{grid-template-columns:1fr}}

@media (prefers-reduced-motion:no-preference){
  [data-reveal] .jrn__r{opacity:0;transform:translateY(14px)}
  [data-reveal].is-in .jrn__r{opacity:1;transform:none;
    transition:opacity .7s var(--e-out-cubic) calc(var(--i,0) * 60ms),
               transform .9s var(--e-out-expo) calc(var(--i,0) * 60ms)}
  [data-reveal] .zug__r{opacity:0;transform:translateY(12px)}
  [data-reveal].is-in .zug__r{opacity:1;transform:none;
    transition:opacity .6s var(--e-out-cubic) calc(var(--i,0) * 50ms),
               transform .8s var(--e-out-expo) calc(var(--i,0) * 50ms)}
}

/* ============================================================================
   HELLE ABSCHNITTE
   Ein Abschnitt auf Elfenbein braucht dieselben Bauteile in umgekehrter
   Tonlage. Nur Farbe, keine neue Struktur.
   ========================================================================= */
/* Die Liste der hellen Gruende steht ab hier EINMAL, in `:is()`.

   Vorher stand sie in jeder Regel neu, und zwar in zwei verschiedenen
   Fassungen: hier nur `.section--light,.psec--light`, in theme.css und
   main.css dagegen mit `.stick`, `.cities` und `.xp` dabei. Das Ergebnis war
   auf „Ueber uns" zu sehen: der Abschnitt `.stick` liegt auf Elfenbein, sein
   Titel blieb aber elfenbeinfarben. Gemessen 1,0 : 1 — die Ueberschrift war
   schlicht nicht da. Sichtbar wurde sie nur waehrend der Aufblende, weil
   dahinter kurz eine dunkle Flaeche laeuft.

   Eine Liste an zwei Orten wird irgendwann zu zwei Listen. Deshalb hier nur
   noch eine, und wer einen hellen Abschnitt hinzufuegt, aendert genau diese
   eine Zeile. */
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .psec__title{color:var(--ink)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .psec__lede{color:var(--muted-2);opacity:1}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .label{color:var(--ember-tief)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .faq__item{border-color:rgba(11,8,6,.14);
  background:rgba(11,8,6,.025)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .faq__item[open]{border-color:rgba(226,85,30,.34);
  background:rgba(226,85,30,.05)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .faq__item summary{color:var(--ink)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .faq__item p{color:var(--muted-2);opacity:1}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .zug{border-top-color:rgba(11,8,6,.16)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .zug__r{border-bottom-color:rgba(11,8,6,.1)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .zug__t{color:var(--ink)}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .zug__b{color:var(--muted-2);opacity:1}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .zug__s--yes{color:#2F7D5C}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .zug__s--open{color:var(--muted-2)}

/* Die Bauteile des Klebesatzes selbst. Gemessen auf „Ueber uns":
   Nummer 3,28 : 1 (Ember auf Elfenbein), Fliesstext 3,32 : 1 (die leise
   Textstufe auf Elfenbein). Beides unter 4,5 — dafuer gibt es seit dem
   letzten Durchgang die beiden tiefen Varianten. */
.stick:not(.stick--dark) .stick__n{color:var(--ember-tief)}
.stick:not(.stick--dark) .stick__b{color:var(--muted-tief)}
.stick:not(.stick--dark) .stick__t{color:var(--ink)}


/* ============================================================================
   EINZUGSGEBIET — die fünfzehn Namen als Fläche
   Kein Diagramm, weil es hier nichts zu vergleichen gibt: die Aussage ist die
   Anzahl. Also stehen die Namen selbst da, gesetzt wie ein Register.
   ========================================================================= */
.geo{display:flex;flex-wrap:wrap;gap:.55rem .5rem;margin-top:clamp(20px,2.6vw,34px)}
.geo__n{padding:.5em .95em;border-radius:999px;
  border:1px solid rgba(244,238,228,.14);background:rgba(244,238,228,.03);
  font-size:clamp(.84rem,.95vw,.95rem);color:var(--bone);white-space:nowrap;
  transition:border-color .5s var(--e-out-cubic),color .5s var(--e-out-cubic),
             background-color .5s var(--e-out-cubic)}
.geo__n:hover{border-color:rgba(226,85,30,.34);color:var(--ivory);background:rgba(226,85,30,.07)}
.geo__n--hi{border-color:rgba(226,85,30,.42);background:rgba(226,85,30,.1);color:var(--ivory);
  font-weight:640}
:is(.section--light,.psec--light,.stick:not(.stick--dark),.cities,.xp,.city) .geo__n{border-color:rgba(11,8,6,.14);
  background:rgba(11,8,6,.025);color:var(--muted-2)}
@media (prefers-reduced-motion:no-preference){
  [data-reveal] .geo__n{opacity:0;transform:translateY(10px)}
  [data-reveal].is-in .geo__n{opacity:1;transform:none;
    transition:opacity .5s var(--e-out-cubic) calc(var(--i,0) * 34ms),
               transform .7s var(--e-out-expo) calc(var(--i,0) * 34ms),
               border-color .5s var(--e-out-cubic),background-color .5s var(--e-out-cubic)}
}

/* ============================================================================
   STOFFSTROM — was in vier Tagen durch die Fläche läuft
   Vier Größen nebeneinander, jede mit einer Säule, die ihre Menge zeigt. Die
   Säulen wachsen erst, wenn der Abschnitt im Bild ist, und über ihnen läuft
   ein leiser Schimmer weiter — ein Strom hört nicht auf, wenn man wegsieht.
   ========================================================================= */
.flow{display:grid;gap:clamp(12px,1.6vw,22px);margin-top:clamp(22px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.flow__i{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:clamp(180px,22vw,260px);
  padding:clamp(16px,2vw,24px);border-radius:clamp(12px,1.2vw,18px);
  border:1px solid rgba(244,238,228,.1);background:rgba(244,238,228,.03)}
/* Die Säule stand zuerst über der ganzen Kachel und lief mitten durch den
   Text. Jetzt ist sie ein Streifen an der linken Kante: dieselbe Aussage,
   aber nichts davon liegt hinter einem Wort. */
.flow__i{padding-left:clamp(28px,3vw,40px)}
.flow__col{position:absolute;left:0;bottom:0;width:clamp(5px,.55vw,7px);height:0;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--ember),rgba(226,85,30,.35))}
.flow__i::before{content:'';position:absolute;left:0;top:0;bottom:0;
  width:clamp(5px,.55vw,7px);background:rgba(244,238,228,.08)}
.flow__glow{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(226,85,30,.16),transparent)}
.flow__sheen{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:linear-gradient(105deg,transparent 38%,rgba(244,238,228,.13) 50%,transparent 62%);
  background-size:260% 100%}
.flow__n{position:relative;z-index:1;font-family:var(--f-display);font-weight:750;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1;color:var(--ivory);
  font-variant-numeric:tabular-nums}
.flow__u{position:relative;z-index:1;margin-top:.25em;font-family:var(--f-mono);
  font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase;color:var(--ember-lo)}
.flow__b{position:relative;z-index:1;margin-top:.55em;font-size:clamp(.82rem,.92vw,.9rem);
  line-height:1.55;color:var(--bone);opacity:.76}

/* ============================================================================
   KREISLAUF — der Becher geht im Kreis, die Grafik auch
   Der Ring zeichnet sich beim Eintreten, danach läuft ein Punkt die Bahn ab.
   Vier Stationen, mehr braucht ein Pfandsystem nicht erklärt zu bekommen.
   ========================================================================= */
.cyc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(24px,3.4vw,44px)}
.cyc__art{position:relative;width:100%;max-width:440px;justify-self:center}
.cyc__art svg{display:block;width:100%;height:auto;overflow:visible}
.cyc__ring{fill:none;stroke:rgba(226,85,30,.5);stroke-width:2;
  stroke-dasharray:var(--len,880);stroke-dashoffset:var(--len,880)}
.cyc__ghost{fill:none;stroke:rgba(244,238,228,.1);stroke-width:2}
.cyc__st circle{fill:var(--ink);stroke:rgba(226,85,30,.65);stroke-width:2}
.cyc__st text{fill:var(--ivory);font-size:15px;font-weight:650;
  font-family:var(--f-body,inherit)}
.cyc__st tspan.n{fill:var(--ember-lo);font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em}
.cyc__run circle{fill:var(--ember);filter:drop-shadow(0 0 10px rgba(226,85,30,.6))}
.cyc__mid{fill:rgba(244,238,228,.4);font-family:var(--f-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
.cyc__midn{fill:var(--ivory);font-family:var(--f-display);font-weight:750;font-size:38px;
  font-variant-numeric:tabular-nums}
.cyc__steps{display:grid;gap:clamp(10px,1.4vw,18px)}
.cyc__s{display:flex;gap:clamp(12px,1.4vw,18px);padding:clamp(12px,1.5vw,18px) 0;
  border-top:1px solid rgba(244,238,228,.1)}
.cyc__s p{margin:0}
.cyc__sn{flex:none;width:2.2em;font-family:var(--f-mono);font-size:var(--t-small);
  color:var(--ember);letter-spacing:.1em;padding-top:.2em}
.cyc__st2{font-size:clamp(.98rem,1.15vw,1.1rem);font-weight:620;color:var(--ivory)}
.cyc__sb{margin-top:.32em;font-size:clamp(.86rem,.95vw,.95rem);line-height:1.62;
  color:var(--bone);opacity:.78}
@media (max-width:880px){.cyc{grid-template-columns:1fr}}

/* ============================================================================
   MESSFELDER — sechs Vorhaben, jedes mit einem Stand
   Ein Balken sagt, wie weit ein Feld ist, ohne eine Prozentzahl zu erfinden:
   drei Stufen, beschriftet. Der Balken wächst beim Eintreten.
   ========================================================================= */
.mtr{display:grid;gap:0;margin-top:clamp(22px,3vw,38px);
  border-top:1px solid rgba(244,238,228,.14)}
.mtr__i{display:grid;grid-template-columns:2.4rem 1fr minmax(0,15rem);
  gap:clamp(12px,2vw,28px);align-items:start;padding:clamp(16px,2vw,26px) 0;
  border-bottom:1px solid rgba(244,238,228,.09)}
.mtr__n{font-family:var(--f-mono);font-size:var(--t-small);color:var(--ember);
  letter-spacing:.1em;padding-top:.35em}
.mtr__t{margin:0;font-size:clamp(1rem,1.2vw,1.14rem);font-weight:640;color:var(--ivory)}
.mtr__b{margin:.35em 0 0;font-size:clamp(.86rem,.95vw,.95rem);line-height:1.62;
  color:var(--bone);opacity:.78;max-width:60ch}
.mtr__gauge{padding-top:.5em}
.mtr__track{position:relative;height:6px;border-radius:999px;overflow:hidden;
  background:rgba(244,238,228,.09)}
.mtr__fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(226,85,30,.55),var(--ember))}
.mtr__lab{display:flex;justify-content:space-between;gap:1rem;margin-top:.6em;
  font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.mtr__lab b{font-weight:400;color:var(--ember-lo)}
@media (max-width:860px){.mtr__i{grid-template-columns:2.4rem 1fr}
  .mtr__gauge{grid-column:2}}

/* ============================================================================
   GEGENÜBERSTELLUNG — Einweg gegen Mehrweg
   Zwei Säulen, gleiche Skala, eine davon glüht. Der Unterschied soll man
   sehen können, ohne die Zahl darunter zu lesen.
   ========================================================================= */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  gap:clamp(14px,2vw,28px);margin-top:clamp(24px,3.4vw,44px);align-items:end}
.vs__i{display:flex;flex-direction:column;gap:.9rem}
.vs__bar{position:relative;height:clamp(140px,20vw,230px);border-radius:12px;
  background:rgba(244,238,228,.04);border:1px solid rgba(244,238,228,.12);
  display:flex;align-items:flex-end;overflow:hidden}
/* Vier Hilfslinien auf Viertelhoehe: erst dadurch ist ein Balken eine
   ablesbare Hoehe und nicht nur eine gefuellte Flaeche. */
.vs__bar::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(180deg,
    rgba(244,238,228,.09) 0 1px,transparent 1px 25%)}
.vs__fill{position:relative;width:100%;height:0;border-radius:0 0 11px 11px;
  /* Vorher stand hier .16 auf einem Kasten mit .05 — zwei fast gleiche Toene,
     und ein voller Balken sah aus wie ein leerer Kasten. */
  background:linear-gradient(180deg,rgba(244,238,228,.30),rgba(244,238,228,.11))}
/* Die Oberkante ist die eigentliche Aussage: dort endet der Balken. */
.vs__fill::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--bone);opacity:.85}
.vs__i--hi .vs__fill{background:linear-gradient(180deg,rgba(226,85,30,.92),rgba(226,85,30,.34))}
.vs__i--hi .vs__fill::after{background:var(--ember-lo,#EA9976);opacity:1;
  box-shadow:0 0 14px rgba(226,85,30,.6)}
.vs__fill[data-fill="0%"]::after{opacity:0}
.vs__n{font-family:var(--f-display);font-weight:750;font-size:clamp(1.3rem,2.4vw,2rem);
  line-height:1;color:var(--ivory);font-variant-numeric:tabular-nums}
.vs__t{font-family:var(--f-mono);font-size:var(--t-small);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-lo)}
.vs__b{font-size:clamp(.84rem,.94vw,.93rem);line-height:1.6;color:var(--bone);opacity:.76}

@media (prefers-reduced-motion:no-preference){
  [data-reveal] .flow__i{opacity:0;transform:translateY(16px)}
  [data-reveal].is-in .flow__i{opacity:1;transform:none;
    transition:opacity .6s var(--e-out-cubic) calc(var(--i,0) * 90ms),
               transform .9s var(--e-out-expo) calc(var(--i,0) * 90ms)}
  .flow__col,.flow__glow{transition:height 1.5s var(--e-out-expo) calc(var(--i,0) * 120ms + .2s)}
  [data-reveal].is-in .flow__sheen{animation:flow-sheen 5.5s linear infinite;
    animation-delay:calc(var(--i,0) * .5s)}
  @keyframes flow-sheen{from{background-position:180% 0}to{background-position:-80% 0}}

  .cyc__ring{transition:stroke-dashoffset 2.2s var(--e-out-expo) .25s}
  [data-reveal].is-in .cyc__ring{stroke-dashoffset:0}
  .cyc__st{opacity:0;transform:scale(.86);transform-origin:center;transform-box:fill-box}
  [data-reveal].is-in .cyc__st{opacity:1;transform:none;
    transition:opacity .5s var(--e-out-cubic) calc(.5s + var(--i,0) * .28s),
               transform .7s var(--e-out-expo) calc(.5s + var(--i,0) * .28s)}
  .cyc__run{opacity:0}
  [data-reveal].is-in .cyc__run{opacity:1;transition:opacity .6s ease 2.1s;
    animation:cyc-run 11s linear 2.1s infinite}
  @keyframes cyc-run{to{transform:rotate(360deg)}}
  [data-reveal] .cyc__s{opacity:0;transform:translateX(14px)}
  [data-reveal].is-in .cyc__s{opacity:1;transform:none;
    transition:opacity .6s var(--e-out-cubic) calc(var(--i,0) * 110ms),
               transform .8s var(--e-out-expo) calc(var(--i,0) * 110ms)}

  [data-reveal] .mtr__i{opacity:0;transform:translateY(12px)}
  [data-reveal].is-in .mtr__i{opacity:1;transform:none;
    transition:opacity .55s var(--e-out-cubic) calc(var(--i,0) * 70ms),
               transform .75s var(--e-out-expo) calc(var(--i,0) * 70ms)}
  .mtr__fill{transition:width 1.4s var(--e-out-expo) calc(var(--i,0) * 90ms + .25s)}

  [data-reveal] .vs__i{opacity:0;transform:translateY(14px)}
  [data-reveal].is-in .vs__i{opacity:1;transform:none;
    transition:opacity .6s var(--e-out-cubic) calc(var(--i,0) * 110ms),
               transform .8s var(--e-out-expo) calc(var(--i,0) * 110ms)}
  .vs__fill{transition:height 1.6s var(--e-out-expo) calc(var(--i,0) * 140ms + .3s)}
}

/* Zwei Paare statt einer Reihe: jede Gegenüberstellung bekommt ihre Überschrift
   und ihre eigene Skala. Und die Säulen stehen oben bündig — vorher richtete
   sich die Reihe an den Unterkanten aus, und ungleich lange Texte haben die
   Balken gegeneinander verschoben. */
.vs{align-items:start}
.vs__g{margin:clamp(24px,3vw,40px) 0 0;font-family:var(--f-mono);font-size:var(--t-small);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vs__g + .vs{margin-top:clamp(10px,1.2vw,16px)}

/* ---- <picture> traegt jetzt die Bilder ----------------------------------
   Seit die Motive in zwei Groessen ausgeliefert werden, steckt zwischen
   figure und img ein <picture>. Das ist von Haus aus inline und hoch wie sein
   Inhalt — damit liefe `height:100%` am img ins Leere und das Bild fiele auf
   seine Eigenhoehe zurueck. Also traegt das <picture> dieselbe Flaeche wie
   vorher das Bild.                                                         */
.mos picture,.stick__media picture,.rail__i picture,.jrn__shot picture{
  display:block;width:100%;height:100%}