/* ==========================================================================
   Bühne — Bausteine und Effekte für Seiten, die beeindrucken sollen
   --------------------------------------------------------------------------
   Gehört zu assets/js/buehne.js und core/Blocks/elements/buehne.php.

   ❗️DREI REGELN, an die sich alles hier hält:
   1. OHNE SKRIPT IST ALLES SICHTBAR. Versteckt (abgedunkelt, maskiert,
      verschoben) wird nur unter `.fwb-bereit`, und diese Klasse setzt erst
      das Skript, wenn es die Bewegung übernimmt. Fehlt es, bricht es ab oder
      liest eine Suchmaschine die Seite, steht der Inhalt einfach da.
   2. `html.fwb-ruhe` HÄLT ALLES AN: bei „Bewegung reduzieren" im System und
      im Block-Modus des Editors (dort wird angeordnet, nicht geschaut).
      Dann gilt der Endzustand, ohne Übergang.
   3. Nur transform, opacity, clip-path und filter werden bewegt. Keine
      Eigenschaft, die das Layout neu rechnen lässt.
   ========================================================================== */

/* ❗️Der ganze Seiteninhalt steht in article.prose (seite.css). Dessen Regeln
   für h2, h3, a und ol haben eine Klasse UND ein Element und schlagen damit
   jede einfache Klasse hier: ein Titel mit Ebene h2 wurde 29 px klein und
   rot, der Knopf unterstrichen, die Pfad-Liste bekam fremden Einzug. Wo ein
   Bühnen-Teil so ein Element ist, steht deshalb eine zweite Klasse davor. */

/* ---- Großes Statement ---------------------------------------------------- */
.fwb-statement, .prose .fwb-statement{
  width:100%; margin:0; color:var(--fwb-farbe,#111827);
  font-size:var(--fwb-groesse,56px); line-height:var(--fwb-zeile,1.1);
  font-weight:var(--fwb-gewicht,700); letter-spacing:-.02em;
  text-wrap:balance; overflow-wrap:break-word;
}
.fwb-statement--titel{font-family:var(--font-heading, inherit)}
.fwb-statement--text{font-family:var(--font-body, inherit)}
.fwb-statement .fwb-w{display:inline-block; white-space:pre}
.fwb-statement .fwb-w--akzent{color:var(--fwb-akzent,#2563eb)}
.fwb-bereit.fwb-statement[data-buehne-wirkung="scroll"] .fwb-w{
  opacity:.16; transition:opacity .45s cubic-bezier(.16,1,.3,1);
}
.fwb-bereit.fwb-statement[data-buehne-wirkung="scroll"] .fwb-w.is-an{opacity:1}
.fwb-bereit.fwb-statement[data-buehne-wirkung="auftauchen"] .fwb-w{
  opacity:0; transform:translateY(.55em) rotate(2deg);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(min(var(--i,0), 40) * 38ms);
}
.fwb-bereit.fwb-statement[data-buehne-wirkung="auftauchen"].is-da .fwb-w{opacity:1; transform:none}

/* ---- Text mit Auftritt -------------------------------------------------- */
/* Zwei Klassen je Regel: der Block steht in article.prose (siehe oben). */
.fwb-text{display:flex; flex-direction:column; align-items:flex-start; gap:0; width:100%; color:var(--fwb-t-farbe,#111827)}
.fwb-text--mitte{align-items:center; text-align:center}
.fwb-text .fwb-t-kicker{
  display:flex; align-items:center; gap:14px; margin:0 0 18px; color:var(--fwb-t-akzent,#2563eb);
  font:700 13px/1.2 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
  letter-spacing:.2em; text-transform:uppercase;
}
.fwb-text .fwb-t-kicker--strich::before{content:""; width:34px; height:2px; background:currentColor; flex:none}
.fwb-text .fwb-t-titel{margin:0; max-width:20ch}
.fwb-text .fwb-t-text{
  margin:20px 0 0; max-width:56ch; color:var(--fwb-t-farbe,#111827); opacity:.78;
  font-size:clamp(16px,1.3vw,18px); line-height:1.65;
}
.fwb-text .fwb-t-knoepfe{display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin-top:30px}
.fwb-text--mitte .fwb-t-knoepfe{justify-content:center}
.fwb-text .fwb-t-knopf{
  display:inline-flex; align-items:center; gap:.5em; min-height:50px; padding:0 26px; border-radius:999px;
  font:600 16px/1.2 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
  text-decoration:none; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background .25s, color .25s;
}
.fwb-text .fwb-t-knopf span[aria-hidden]{display:inline-block; transition:transform .25s cubic-bezier(.16,1,.3,1)}
.fwb-text .fwb-t-knopf:hover span[aria-hidden]{transform:translateX(5px)}
.fwb-text .fwb-t-knopf--voll, .fwb-text .fwb-t-knopf--voll:hover{background:var(--fwb-t-knopf,#2563eb); color:var(--fwb-t-knopftext,#fff)}
.fwb-text .fwb-t-knopf--voll:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px var(--fwb-t-knopf,#2563eb)}
.fwb-text .fwb-t-knopf--linie, .fwb-text .fwb-t-knopf--linie:hover{box-shadow:inset 0 0 0 2px var(--fwb-t-knopf,#2563eb); color:var(--fwb-t-knopf,#2563eb)}
.fwb-text .fwb-t-knopf--linie:hover{background:var(--fwb-t-knopf,#2563eb); color:var(--fwb-t-knopftext,#fff)}
.fwb-text .fwb-t-knopf--pfeil, .fwb-text .fwb-t-knopf--pfeil:hover{padding:0; min-height:0; color:var(--fwb-t-knopf,#2563eb); border-radius:0}
.fwb-text .fwb-t-knopf--zweit, .fwb-text .fwb-t-knopf--zweit:hover{
  padding:0; min-height:0; border-radius:0; color:var(--fwb-t-farbe,#111827);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
}
.fwb-text .fwb-t-knopf:focus-visible{outline:3px solid var(--fwb-t-knopf,#2563eb); outline-offset:3px}
/* Auftritt: kleine Zeile, dann die Überschrift Wort für Wort, dann der Rest. */
.fwb-bereit.fwb-text > *, .fwb-bereit.fwb-text .fwb-t-titel .fwb-w{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.fwb-bereit.fwb-text > .fwb-t-titel{opacity:1; transform:none}
.fwb-bereit.fwb-text .fwb-t-titel .fwb-w{transform:translateY(.5em); transition-delay:calc(120ms + min(var(--i,0), 40) * 45ms)}
.fwb-bereit.fwb-text > .fwb-t-text{transition-delay:var(--fwb-t-nach,400ms)}
.fwb-bereit.fwb-text > .fwb-t-knoepfe{transition-delay:calc(var(--fwb-t-nach,400ms) + 140ms)}
.fwb-bereit.fwb-text.is-da > *, .fwb-bereit.fwb-text.is-da .fwb-t-titel .fwb-w{opacity:1; transform:none}
.fwb-bereit.fwb-text.is-da > .fwb-t-text{opacity:.78}

/* ---- Angehefteter Abschnitt (anheften) ---------------------------------- */
/* Grundform OHNE Skript, am Handy und in Ruhe: eine Liste, je Schritt Bild
   über Text. Die angeheftete Form gilt nur ab 860 px und erst, wenn das
   Skript `fwb-bereit` gesetzt hat. Zwei Klassen je Regel wegen .prose. */
.fwb-anheften, .fwb-quer{--fwb-buehne-h:min(calc(100vh - var(--fwb-kopf,0px) - 24px), 720px)}
.fwb-quer{--fwb-buehne-h:min(calc(100vh - var(--fwb-kopf,0px)), 780px)}
.fwb-anheften{color:var(--fwb-farbe,#111827); width:100%}
.fwb-anheften .fwb-ah-liste{list-style:none; margin:0; padding:0; display:grid; gap:44px}
.fwb-anheften .fwb-ah-schritt{margin:0; display:grid; gap:18px}
.fwb-anheften .fwb-ah-bild{margin:0; aspect-ratio:4/3; border-radius:var(--fwb-radius,0); overflow:hidden; background:color-mix(in srgb,var(--fwb-akzent,#2563eb) 14%,transparent)}
.fwb-anheften .fwb-ah-bild img{display:block; width:100%; height:100%; max-height:none; object-fit:cover}
.fwb-anheften .fwb-ah-bild--leer{display:grid; place-items:center; background:var(--fwb-akzent,#2563eb); color:#fff}
.fwb-anheften .fwb-ah-bild--leer span{font:800 clamp(60px,9vw,140px)/1 var(--font-heading, Georgia, serif); opacity:.9}
.fwb-anheften .fwb-ah-kicker{font:700 13px/1.2 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif); letter-spacing:.18em; text-transform:uppercase; color:var(--fwb-akzent,#2563eb); margin-bottom:12px}
.fwb-anheften .fwb-ah-titel{margin:0 0 14px; font-family:var(--font-heading, inherit); font-size:clamp(28px,3.4vw,48px); line-height:1.05; letter-spacing:-.01em; color:inherit}
.fwb-anheften .fwb-ah-txt p{margin:0; max-width:46ch; font-size:clamp(16px,1.3vw,19px); line-height:1.65; opacity:.82}
.fwb-anheften .fwb-ah-zaehler, .fwb-anheften .fwb-ah-leiste{display:none}
@media (min-width:860px){
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften{height:calc(var(--fwb-buehne-h,720px) + (var(--fwb-n,3) - 1) * var(--fwb-weg,520px))}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-buehne{
    position:sticky; top:calc(var(--fwb-kopf,0px) + 12px); height:var(--fwb-buehne-h,720px);
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,80px); align-items:center;
  }
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften--bild-links .fwb-ah-buehne{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-liste, html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-schritt{display:contents}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-txt{grid-column:1; grid-row:1}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-bild{grid-column:2; grid-row:1; height:100%; aspect-ratio:auto}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften--bild-links .fwb-ah-txt{grid-column:2}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften--bild-links .fwb-ah-bild{grid-column:1}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-txt{opacity:0; transform:translateY(28px); pointer-events:none;
    transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-bild{opacity:0; transform:scale(1.06);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .is-an > .fwb-ah-txt{opacity:1; transform:none; pointer-events:auto}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .is-an > .fwb-ah-bild{opacity:1; transform:none}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-zaehler{display:block; position:absolute; top:0; font:700 13px/1 var(--font-body, sans-serif);
    letter-spacing:.14em; color:var(--fwb-akzent,#2563eb)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften--bild-links .fwb-ah-zaehler{left:calc(54.5% + clamp(16px,2.5vw,40px))}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-nr{font-size:28px; letter-spacing:0}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-leiste{display:block; position:absolute; left:0; bottom:0; width:clamp(120px,18vw,240px); height:3px;
    background:color-mix(in srgb,var(--fwb-akzent,#2563eb) 20%,transparent)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften--bild-links .fwb-ah-leiste{left:calc(54.5% + clamp(16px,2.5vw,40px))}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-anheften .fwb-ah-leiste i{display:block; height:100%; background:var(--fwb-akzent,#2563eb);
    transform-origin:left; transform:scaleX(var(--fwb-p,0))}
}

/* ---- Querfahrt (quer) ----------------------------------------------------- */
/* Grundform: eine Reihe zum Wischen mit Einrasten. Ab 860 px und mit Skript:
   die Bühne bleibt stehen, die Reihe fährt beim Scrollen seitwärts. */
.fwb-quer{background:var(--fwb-grund,#0f172a); color:var(--fwb-farbe,#fff); width:100%; border-radius:var(--fwb-radius,0)}
.fwb-quer .fwb-q-buehne{position:relative; padding:clamp(36px,5vw,72px) 0}
.fwb-quer .fwb-q-spur{display:flex; gap:clamp(16px,2vw,28px); align-items:center; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-padding-inline:clamp(16px,5vw,72px);
  padding:0 clamp(16px,5vw,72px); scrollbar-width:none; -webkit-overflow-scrolling:touch}
.fwb-quer .fwb-q-spur::-webkit-scrollbar{display:none}
.fwb-quer .fwb-q-kopf{flex:0 0 min(78vw,420px); scroll-snap-align:start}
.fwb-quer .fwb-q-kicker{font:700 13px/1.2 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif); letter-spacing:.2em; text-transform:uppercase; color:var(--fwb-akzent,#f59e0b); margin-bottom:14px}
.fwb-quer .fwb-q-titel{margin:0; font-family:var(--font-heading, inherit); font-size:clamp(36px,5vw,76px); line-height:1; letter-spacing:-.02em; color:inherit}
.fwb-quer .fwb-q-titel .fwb-w--akzent{color:var(--fwb-akzent,#f59e0b)}
.fwb-quer .fwb-q-karte{margin:0; flex:0 0 min(78vw,var(--fwb-karte,380px)); scroll-snap-align:center}
.fwb-quer .fwb-q-bild{aspect-ratio:3/4; border-radius:max(6px,var(--fwb-radius,0px)); overflow:hidden; background:rgba(255,255,255,.08)}
.fwb-quer--quer .fwb-q-bild{aspect-ratio:4/3}
.fwb-quer--quadrat .fwb-q-bild{aspect-ratio:1}
.fwb-quer .fwb-q-bild img{display:block; width:100%; height:100%; max-height:none; object-fit:cover; transform:scale(1.04); transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.fwb-quer .fwb-q-karte:hover .fwb-q-bild img{transform:scale(1.09)}
.fwb-quer .fwb-q-bild--leer{display:grid; place-items:center; background:color-mix(in srgb,var(--fwb-akzent,#f59e0b) 30%,transparent)}
.fwb-quer .fwb-q-bild--leer span{font:800 64px/1 var(--font-heading, Georgia, serif); opacity:.7}
.fwb-quer figcaption{margin-top:14px; display:grid; gap:4px}
.fwb-quer figcaption b{font:700 18px/1.25 var(--font-heading, inherit)}
.fwb-quer figcaption span{font-size:15px; line-height:1.55; opacity:.75}
.fwb-quer .fwb-q-leiste{display:none}
@media (min-width:860px){
  html:not(.fwb-ruhe) .fwb-bereit.fwb-quer{height:calc(var(--fwb-buehne-h,720px) + var(--fwb-n,3) * var(--fwb-weg,300px))}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-quer .fwb-q-buehne{position:sticky; top:calc(var(--fwb-kopf,0px)); height:var(--fwb-buehne-h,720px);
    overflow:hidden; display:flex; align-items:center; padding:0}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-quer .fwb-q-spur{overflow:visible; scroll-snap-type:none; will-change:transform;
    transform:translate3d(var(--fwb-x,0px),0,0); padding:0 clamp(24px,6vw,96px)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-quer .fwb-q-kopf{flex-basis:clamp(280px,30vw,460px)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-quer .fwb-q-karte{flex-basis:var(--fwb-karte,380px)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-quer .fwb-q-leiste{display:block; position:absolute; left:clamp(24px,6vw,96px); right:clamp(24px,6vw,96px); bottom:32px;
    height:2px; background:rgba(255,255,255,.18)}
  html:not(.fwb-ruhe) .fwb-bereit.fwb-quer .fwb-q-leiste i{display:block; height:100%; background:var(--fwb-akzent,#f59e0b); transform-origin:left; transform:scaleX(var(--fwb-p,0))}
}

/* ---- Bild im Text (fenster) ------------------------------------------------ */
.fwb-fenster{width:100%; container-type:inline-size}
.fwb-fenster--mitte{text-align:center}
.fwb-fenster .fwb-f-text{
  margin:0; line-height:.9; font-weight:900; letter-spacing:-.03em;
  /* Nie breiter als der Block: die längste Zeile (--fwb-zeichen) muss hineinpassen.
     --fwb-breite ist eine SCHÄTZUNG der Breite je Zeichen in em. Genau wird es erst
     in buehne.js (fensterEinpassen), das nach dem Laden der Schrift nachmisst (#2118). */
  font-size:min(var(--fwb-groesse,200px), calc(100cqw / (var(--fwb-zeichen,6) * var(--fwb-breite,.7))));
  background-size:cover; background-position:50% var(--fwb-f-y,50%); background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  overflow-wrap:break-word;
}
.fwb-fenster--titel .fwb-f-text{font-family:var(--font-heading, inherit)}
.fwb-fenster--text .fwb-f-text{font-family:var(--font-body, inherit)}
/* ❗️Großbuchstaben sind breiter (#2118). Gemessen über alle 51 mitgelieferten
   Familien, fettester Schnitt: Median 0,69 em je Zeichen, Lora 0,73, Montserrat 0,77,
   Spitze 1,03 (Sacramento). Mit .7 brach „MORGEN" in Lora am Handy mitten im Wort.
   .78 deckt 46 von 51 ab; den Rest fängt buehne.js ab. Kleinbuchstaben: höchstens
   0,685, dafür reicht .7. */
.fwb-fenster--gross .fwb-f-text{text-transform:uppercase; --fwb-breite:.78}
.fwb-fenster .fwb-f-unter{margin-top:18px; font:600 14px/1.4 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif); letter-spacing:.2em; text-transform:uppercase}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .fwb-fenster .fwb-f-text{color:var(--color-text,#111827); -webkit-text-fill-color:currentColor; background:none}
}

/* ---- Laufband ------------------------------------------------------------ */
.fwb-laufband{
  position:relative; overflow:hidden; width:100%; box-sizing:border-box;
  background:var(--fwb-grund,#111827); color:var(--fwb-schrift,#fff);
  padding:var(--fwb-polster,18px) 0; font-size:var(--fwb-groesse,56px); line-height:1.05;
  font-weight:700; letter-spacing:-.01em;
}
.fwb-laufband--titel{font-family:var(--font-heading, inherit)}
.fwb-laufband--text{font-family:var(--font-body, inherit)}
.fwb-laufband--gross{text-transform:uppercase; letter-spacing:.01em}
.fwb-laufband--geneigt{width:104%; margin-left:-2%}
/* Ein schräges Band ragt um die halbe Breite mal sin(Winkel) über seine
   eigene Höhe hinaus, nach oben wie nach unten. Der Block bekommt genau so
   viel Abstand (Prozent beziehen sich auf die BREITE, also passt es bei
   jeder Bildschirmbreite): das Band steht mittig, ragt nicht in den
   Abschnitt darüber, und am Handy liegt es nicht auf Text und Bild daneben.
   --fwb-schraeg = |sin(Winkel)|, gesetzt in der Vorlage. */
.fwb-laufband--geneigt{margin-block:calc(52% * var(--fwb-schraeg, 0) + 4px)}
/* flow-root: sonst fiele der Aussenabstand durch den Block hindurch und
   zählte nicht zu seiner Höhe. */
.fw-block__inner:has(> .fwb-laufband--geneigt){display:flow-root}
.fwb-lb-spur{display:flex; width:max-content; will-change:transform}
.fwb-lb-teil{display:flex; flex:0 0 auto; align-items:center}
.fwb-lb-eintrag{white-space:nowrap; padding:0 .45em}
.fwb-lb-trenner{white-space:nowrap; padding:0 .25em; opacity:.6; font-size:.55em}
.fwb-laufband--kontur .fwb-lb-eintrag,
.fwb-laufband--wechsel .fwb-lb-eintrag:nth-child(4n+3){
  color:transparent; -webkit-text-stroke:max(1px,.025em) var(--fwb-schrift,#fff);
}
.fwb-laufband .fwb-lb-spur{animation:fwb-laufen var(--fwb-dauer,30s) linear infinite}
.fwb-laufband[data-buehne-richtung="rechts"] .fwb-lb-spur{animation-direction:reverse}
.fwb-laufband--halten:hover .fwb-lb-spur{animation-play-state:paused}
@keyframes fwb-laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- Zahlen, die hochzählen ---------------------------------------------- */
.fwb-zaehler{
  display:grid; width:100%; gap:28px 0;
  grid-template-columns:repeat(var(--fwb-spalten,4), minmax(0,1fr));
  color:var(--fwb-text,#111827); font-family:var(--font-body, inherit);
}
.fwb-zaehler--auto{grid-template-columns:repeat(auto-fit, minmax(160px,1fr))}
.fwb-z-eintrag{padding:4px 22px; min-width:0}
.fwb-zaehler--mitte .fwb-z-eintrag{text-align:center}
.fwb-zaehler--linien .fwb-z-eintrag + .fwb-z-eintrag{border-left:1px solid color-mix(in srgb, var(--fwb-text,#111827) 18%, transparent)}
.fwb-z-zahl{
  font-family:var(--font-heading, inherit); font-size:var(--fwb-groesse,64px); line-height:1;
  font-weight:800; letter-spacing:-.03em; color:var(--fwb-farbe,#2563eb);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.fwb-z-text{margin-top:.55em; font-size:15px; line-height:1.4; opacity:.75}
@media (max-width:640px){
  .fwb-zaehler, .fwb-zaehler--auto{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fwb-zaehler--linien .fwb-z-eintrag + .fwb-z-eintrag{border-left:0}
  .fwb-z-zahl{font-size:min(var(--fwb-groesse,64px), 12vw)}
}

/* ---- Bild mit Auftritt ----------------------------------------------------- */
.fwb-bild{position:relative; margin:0; width:100%; height:100%; min-height:120px}
.fwb-bild-rahmen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:var(--fwb-radius,0); background:var(--color-primary-light, #e5e7eb);
  transition:clip-path 1.25s cubic-bezier(.77,0,.18,1);
}
/* ❗️site-mobile.css setzt am Handy jedes Bild unter main auf height:auto,
   max-height:60vh und object-fit:contain. Ohne die zweite Klasse blieb unter
   dem Bild ein Streifen in der Grundfarbe stehen. */
.fwb-bild .fwb-bild-rahmen img{
  display:block; width:100%; height:100%; max-height:none; object-fit:cover;
  transform:scale(var(--fwb-zoom,1)); transform-origin:50% 50%;
}
.fwb-bild-leer{
  width:100%; height:100%;
  background:linear-gradient(135deg, var(--color-primary,#2563eb), var(--color-accent,#9333ea));
}
.fwb-bild--verlauf .fwb-bild-rahmen::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.fwb-bild figcaption{margin-top:.6em; font-size:14px; opacity:.75; font-family:var(--font-body, inherit)}
.fwb-bild--auf figcaption{
  position:absolute; left:clamp(14px,3vw,32px); bottom:clamp(12px,3vw,28px); right:14px; margin:0;
  color:#fff; opacity:1; font-size:clamp(15px,1.6vw,20px); font-weight:600; z-index:2;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.fwb-bereit.fwb-bild[data-buehne-auftritt="vorhang"] .fwb-bild-rahmen{clip-path:inset(100% 0 0 0)}
.fwb-bereit.fwb-bild[data-buehne-auftritt="seite"] .fwb-bild-rahmen{clip-path:inset(0 100% 0 0)}
.fwb-bereit.fwb-bild[data-buehne-auftritt="kreis"] .fwb-bild-rahmen{clip-path:circle(0% at 50% 50%)}
.fwb-bereit.fwb-bild[data-buehne-auftritt="rahmen"] .fwb-bild-rahmen{clip-path:inset(16% 14% 16% 14%)}
.fwb-bereit.fwb-bild.is-da .fwb-bild-rahmen{clip-path:inset(0 0 0 0)}
.fwb-bereit.fwb-bild[data-buehne-auftritt="kreis"].is-da .fwb-bild-rahmen{clip-path:circle(75% at 50% 50%)}

/* ---- Weg beim Scrollen ----------------------------------------------------- */
.fwb-pfad{
  position:relative; width:100%; color:var(--fwb-text,#111827);
  font-family:var(--font-body, inherit); padding:8px 0;
}
.fwb-pfad-linie{
  position:absolute; top:10px; bottom:10px; left:11px; width:3px; border-radius:3px;
  background:color-mix(in srgb, var(--fwb-linie,#2563eb) 18%, transparent);
}
.fwb-pfad-fuell{
  position:absolute; inset:0; border-radius:inherit; background:var(--fwb-linie,#2563eb);
  transform-origin:top; transform:scaleY(var(--fwb-fuell,1));
}
.fwb-pfad .fwb-pfad-liste{list-style:none; margin:0; padding:0 0 0 52px; display:grid; gap:clamp(28px,5vw,64px)}
.fwb-pfad .fwb-pfad-station{position:relative; margin:0; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
.fwb-pfad-punkt{
  position:absolute; left:-49px; top:.35em; width:19px; height:19px; border-radius:50%;
  box-sizing:border-box; border:3px solid var(--fwb-linie,#2563eb); background:var(--fwb-linie,#2563eb);
  transition:background .4s, transform .4s;
}
.fwb-pfad-kicker{
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fwb-linie,#2563eb);
}
.fwb-pfad .fwb-pfad-titel{
  margin:.25em 0 .35em; font-family:var(--font-heading, inherit);
  font-size:var(--fwb-groesse,26px); line-height:1.15; letter-spacing:-.01em; color:inherit;
}
.fwb-pfad-station p{margin:0; max-width:60ch; line-height:1.6; opacity:.8}
.fwb-bereit.fwb-pfad .fwb-pfad-station{opacity:.25; transform:translateX(18px)}
.fwb-bereit.fwb-pfad .fwb-pfad-station.is-da{opacity:1; transform:none}
.fwb-bereit.fwb-pfad .fwb-pfad-punkt{background:var(--fwb-grund-punkt, #fff); transform:scale(.8)}
.fwb-bereit.fwb-pfad .is-da .fwb-pfad-punkt{background:var(--fwb-linie,#2563eb); transform:scale(1)}
@media (min-width:860px){
  .fwb-pfad--wechsel .fwb-pfad-linie{left:calc(50% - 1.5px)}
  .fwb-pfad--wechsel .fwb-pfad-liste{padding:0}
  .fwb-pfad--wechsel .fwb-pfad-station{width:calc(50% - 44px)}
  /* Links der Linie rechtsbündig, rechts davon linksbündig: der Text steht
     immer zur Linie hin, der Punkt sitzt genau auf ihr. */
  .fwb-pfad--wechsel .fwb-pfad-station:nth-child(odd){justify-self:start; text-align:right}
  .fwb-pfad--wechsel .fwb-pfad-station:nth-child(odd) p{margin-left:auto}
  .fwb-pfad--wechsel .fwb-pfad-station:nth-child(odd) .fwb-pfad-punkt{left:auto; right:-53.5px}
  .fwb-pfad--wechsel .fwb-pfad-station:nth-child(even){justify-self:end}
  .fwb-pfad--wechsel .fwb-pfad-station:nth-child(even) .fwb-pfad-punkt{left:-53.5px}
  .fwb-bereit.fwb-pfad--wechsel .fwb-pfad-station:nth-child(odd){transform:translateX(-18px)}
  .fwb-bereit.fwb-pfad--wechsel .fwb-pfad-station.is-da{transform:none}
}

/* ---- Video-Fläche -------------------------------------------------------- */
.fwb-video{
  position:relative; width:100%; height:100%; min-height:120px; overflow:hidden;
  border-radius:var(--fwb-radius,0); background:#0b0b0f;
}
.fwb-video video, .fwb-video .fwb-video-bild{
  position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover;
  object-position:var(--fwb-fokus,50% 50%);
}
.fwb-video-schleier{position:absolute; inset:0; pointer-events:none}
.fwb-video-leer{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:14px/1.4 system-ui,sans-serif;
  background:linear-gradient(135deg, var(--color-primary,#2563eb), #0b0b0f); opacity:.9; text-align:center; padding:12px;
}

/* ---- Lebendiger Hintergrund ---------------------------------------------- */
.fwb-aurora{
  position:relative; width:100%; height:100%; min-height:80px; overflow:hidden;
  border-radius:var(--fwb-radius,0); background:var(--fwb-grund,#0b1020);
  isolation:isolate;
}
.fwb-au-b{
  position:absolute; width:62%; aspect-ratio:1; border-radius:50%;
  filter:blur(var(--fwb-weich,90px)); opacity:var(--fwb-deck,.85); mix-blend-mode:normal;
  animation:fwb-treiben var(--fwb-dauer,22s) ease-in-out infinite alternate;
}
.fwb-au-b1{background:var(--fwb-a1,#2563eb); left:-12%; top:-30%}
.fwb-au-b2{background:var(--fwb-a2,#9333ea); right:-14%; top:-10%; animation-duration:calc(var(--fwb-dauer,22s) * 1.3); animation-delay:calc(var(--fwb-dauer,22s) * -.4)}
.fwb-au-b3{background:var(--fwb-a3,#14b8a6); left:22%; bottom:-46%; animation-duration:calc(var(--fwb-dauer,22s) * .8); animation-delay:calc(var(--fwb-dauer,22s) * -.7)}
@keyframes fwb-treiben{
  0%  {transform:translate(0,0) scale(1)}
  33% {transform:translate(14%,10%) scale(1.15)}
  66% {transform:translate(-10%,16%) scale(.92)}
  100%{transform:translate(8%,-8%) scale(1.08)}
}
.fwb-au-korn{
  position:absolute; inset:-50%; opacity:.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Muster über den Wolken, zur Mitte hin sichtbar, zum Rand ausgeblendet.
   Farbe = Schriftfarbe der Fläche (inline gesetzt), also immer im Kontrast. */
.fwb-au-muster{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.2;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 25%,transparent 85%);
  mask-image:radial-gradient(ellipse 90% 80% at 50% 45%,#000 25%,transparent 85%);
}
.fwb-au-muster--raster{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px); background-size:64px 64px; background-position:center}
.fwb-au-muster--linien{background-image:repeating-linear-gradient(-35deg,currentColor 0 1px,transparent 1px 16px)}
.fwb-au-muster--punkte{background-image:radial-gradient(currentColor 1.3px,transparent 1.8px); background-size:20px 20px; opacity:.28}
.fwb-au-muster--hoehen{background-image:repeating-radial-gradient(circle at 28% 72%,transparent 0 26px,currentColor 26px 27px,transparent 27px 54px); opacity:.24}
.fwb-au-muster--strahlen{background-image:repeating-conic-gradient(from -90deg at 50% 115%,currentColor 0 .5deg,transparent .5deg 6deg); opacity:.16}

/* ---- Inhalt auf Bühnen-Flächen (Wolken, Video) ---------------------------- */
.fwb-inhalt{
  position:absolute; inset:0; z-index:2; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px;
  padding:clamp(28px,5vw,80px); text-align:center; color:var(--fwb-schrift,#fff);
}
.fwb-inhalt--links{align-items:flex-start; justify-content:flex-end; text-align:left}
.fwb-b-kicker{
  font:600 13px/1.2 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif); letter-spacing:.22em; text-transform:uppercase; opacity:.85;
}
.fwb-statement.fwb-b-titel{margin:0; max-width:16ch}
.fwb-inhalt--links .fwb-statement.fwb-b-titel{max-width:18ch}
.fwb-b-text{margin:0; max-width:52ch; font:400 clamp(16px,1.45vw,20px)/1.55 var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif); opacity:.9}
.fwb-inhalt .fwb-b-knopf{
  display:inline-flex; align-items:center; gap:.5em; height:52px; padding:0 26px; margin-top:6px; border-radius:999px;
  background:var(--fwb-knopf,#fff); color:#111; font:600 16px var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
  text-decoration:none; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.fwb-inhalt .fwb-b-knopf:hover{color:#111; transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.28)}
.fwb-b-knopf:focus-visible{outline:3px solid var(--fwb-knopf,#fff); outline-offset:3px}

/* ---- Am Handy: feste Flächen brauchen eine eigene Höhe -------------------- */
/* ❗️Am Handy stehen die Blöcke untereinander und haben keine Rasterhöhe mehr
   (blocks.css, Stapel in Leserichtung). Was seine Fläche nur aus der Höhe
   des Blocks nimmt, fiele dort auf die Mindesthöhe zusammen: ein Bild wäre
   120 px hoch, Wolken und Video mit Text darauf zu flach für den Text. */
@media (max-width:719.98px){
  /* Am Handy steht jeder Block nur 12 px unter dem vorigen, auch über eine
     Abschnittsgrenze hinweg (blocks.css). Nach einer randlosen Fläche lief
     der nächste Abschnitt dadurch direkt an ihre Kante. Die Flächen der
     Bühne bekommen deshalb selbst Luft, oben nur, wenn etwas davor steht. */
  .fw-blocks__grid > .fw-block:has(> .fw-block__inner > :is(.fwb-aurora, .fwb-video)),
  .fw-blocks__grid > .fw-block--bleed:has(> .fw-block__inner > .fwb-bild){margin-block:28px 40px}
  .fw-blocks__grid > .fw-block:has(> .fw-block__inner > :is(.fwb-aurora, .fwb-video)):first-child,
  .fw-blocks__grid > .fw-block--bleed:has(> .fw-block__inner > .fwb-bild):first-child{margin-top:0}
  .fwb-bild{height:auto; aspect-ratio:4/3}
  .fwb-video{height:auto; aspect-ratio:16/10}
  .fwb-aurora{height:auto; min-height:180px}
  .fwb-aurora--inhalt, .fwb-video--inhalt{aspect-ratio:auto; min-height:520px}
  .fwb-inhalt{padding:32px 22px}
}

/* ---- Kacheln mit Lichtkante ---------------------------------------------- */
.fwb-kacheln{
  display:grid; width:100%; gap:18px;
  grid-template-columns:repeat(var(--fwb-spalten,3), minmax(0,1fr));
  font-family:var(--font-body, inherit); perspective:900px;
}
.fwb-kacheln--auto{grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.fwb-kachel{
  position:relative; padding:clamp(20px,2.4vw,30px); border-radius:var(--fwb-radius,18px);
  background:var(--fwb-grund,#fff); color:var(--fwb-text,#111827); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--fwb-text,#111827) 10%, transparent);
  transform:rotateX(var(--fwb-rx,0deg)) rotateY(var(--fwb-ry,0deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1), border-color .3s;
  transform-style:preserve-3d;
}
.fwb-kachel::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--fwb-mx,50%) var(--fwb-my,50%),
             color-mix(in srgb, var(--fwb-licht,#2563eb) 22%, transparent), transparent 60%);
}
.fwb-kachel:hover::before{opacity:1}
.fwb-kachel:hover{border-color:color-mix(in srgb, var(--fwb-licht,#2563eb) 45%, transparent)}
.fwb-k-nr{
  display:block; font-family:var(--font-heading, inherit); font-size:14px; font-weight:700;
  letter-spacing:.08em; color:var(--fwb-licht,#2563eb); margin-bottom:22px;
}
.fwb-kachel h3{
  position:relative; margin:0 0 .45em; font-family:var(--font-heading, inherit);
  font-size:clamp(19px,1.7vw,24px); line-height:1.2; color:inherit;
}
.fwb-kachel p{position:relative; margin:0; line-height:1.6; opacity:.78}
@media (max-width:640px){ .fwb-kacheln{grid-template-columns:1fr} }

/* ---- Ruhe: Bewegung reduzieren, Block-Modus ------------------------------- */
html.fwb-ruhe .fwb-statement .fwb-w{opacity:1 !important; transform:none !important; transition:none !important}
/* Angeheftet und Querfahrt: in Ruhe die Grundform (Liste, Wischreihe). Das Skript setzt dort kein fwb-bereit. */
html.fwb-ruhe .fwb-q-bild img{transform:none !important; transition:none !important}
html.fwb-ruhe .fwb-text > *, html.fwb-ruhe .fwb-text .fwb-w{opacity:1 !important; transform:none !important; transition:none !important}
html.fwb-ruhe .fwb-text > .fwb-t-text{opacity:.78 !important}
html.fwb-ruhe .fwb-lb-spur{animation:none !important}
html.fwb-ruhe .fwb-bild-rahmen{clip-path:none !important; transition:none !important}
html.fwb-ruhe .fwb-bild-rahmen img{transform:none !important}
html.fwb-ruhe .fwb-pfad-station{opacity:1 !important; transform:none !important}
html.fwb-ruhe .fwb-pfad-fuell{transform:none !important}
html.fwb-ruhe .fwb-au-b{animation:none !important}
html.fwb-ruhe .fwb-kachel{transform:none !important}
html.fwb-ruhe [data-fw-scroll] > .fw-block__inner{transform:none !important; opacity:1 !important}
@media (prefers-reduced-motion: reduce){
  .fwb-lb-spur, .fwb-au-b{animation:none !important}
}

/* ---- Eröffnung beim ersten Laden (core/Intro.php) ------------------------- */
html.fwb-intro-laeuft{overflow:hidden}
/* Unsichtbar, bis das Kopf-Skript ihn freigibt (core/Intro.php). */
#fwb-intro{display:none}
html.fwb-intro-laeuft #fwb-intro{
  position:fixed; inset:0; z-index:2147483000; pointer-events:auto; overflow:hidden;
  display:grid; place-items:center; color:var(--fwb-i-text,#fff);
  font-family:var(--font-heading, Georgia, serif);
}
#fwb-intro .fwb-i-flaeche{position:absolute; inset:0; background:var(--fwb-i-grund,#111827)}
#fwb-intro .fwb-i-mitte{position:relative; text-align:center; padding:0 6vw}
#fwb-intro .fwb-i-name{
  display:block; font-size:clamp(34px,7vw,104px); line-height:1; font-weight:700; letter-spacing:-.03em;
  overflow:hidden; padding:.08em 0;
}
#fwb-intro .fwb-i-name span{display:inline-block; white-space:pre; transform:translateY(110%);
  animation:fwb-i-hoch .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--i,0) * 35ms + 120ms)}
#fwb-intro .fwb-i-unter{
  display:block; margin-top:18px; font-family:var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif);
  font-size:clamp(12px,1.3vw,15px); letter-spacing:.22em; text-transform:uppercase; opacity:0;
  animation:fwb-i-ein .7s ease forwards; animation-delay:.55s;
}
#fwb-intro .fwb-i-strich{
  display:block; height:2px; margin:20px auto 0; width:min(240px,40vw); background:currentColor;
  transform:scaleX(0); transform-origin:left; animation:fwb-i-strich calc(var(--fwb-i-dauer,1800ms) * .55) cubic-bezier(.65,0,.35,1) forwards;
  animation-delay:.3s;
}
@keyframes fwb-i-hoch{to{transform:none}}
@keyframes fwb-i-ein{to{opacity:.8}}
@keyframes fwb-i-strich{to{transform:scaleX(1)}}
/* Abgang: je Art anders. Die Klasse setzt das Skript nach der Haltezeit. */
#fwb-intro.fwb-i-weg .fwb-i-mitte{transition:opacity .35s ease, transform .6s cubic-bezier(.7,0,.84,0); opacity:0; transform:translateY(-30px)}
#fwb-intro[data-art="vorhang"].fwb-i-weg .fwb-i-flaeche{transition:transform .9s cubic-bezier(.77,0,.18,1); transform:translateY(-101%)}
#fwb-intro[data-art="blende"] .fwb-i-flaeche{clip-path:circle(150% at 50% 50%)}
#fwb-intro[data-art="blende"].fwb-i-weg .fwb-i-flaeche{transition:clip-path 1s cubic-bezier(.77,0,.18,1); clip-path:circle(0% at 50% 50%)}
#fwb-intro .fwb-i-streifen{position:absolute; inset:0; display:flex}
#fwb-intro .fwb-i-streifen i{flex:1; background:var(--fwb-i-grund,#111827); transform-origin:top}
#fwb-intro .fwb-i-streifen i:nth-child(even){background:color-mix(in srgb, var(--fwb-i-grund,#111827) 86%, #000)}
#fwb-intro[data-art="streifen"].fwb-i-weg .fwb-i-streifen i{
  transition:transform .75s cubic-bezier(.77,0,.18,1); transform:scaleY(0);
}
#fwb-intro[data-art="streifen"].fwb-i-weg .fwb-i-streifen i:nth-child(2){transition-delay:.06s}
#fwb-intro[data-art="streifen"].fwb-i-weg .fwb-i-streifen i:nth-child(3){transition-delay:.12s}
#fwb-intro[data-art="streifen"].fwb-i-weg .fwb-i-streifen i:nth-child(4){transition-delay:.18s}
#fwb-intro[data-art="streifen"].fwb-i-weg .fwb-i-streifen i:nth-child(5){transition-delay:.24s}
#fwb-intro .fwb-i-zahl{
  position:absolute; right:5vw; bottom:4vh; font-size:clamp(56px,14vw,200px); line-height:.8;
  font-weight:800; letter-spacing:-.05em; font-variant-numeric:tabular-nums; opacity:.92;
}
#fwb-intro .fwb-i-balken{position:absolute; left:0; bottom:0; height:4px; width:100%; background:currentColor;
  transform:scaleX(var(--fwb-i-stand,0)); transform-origin:left; opacity:.7}
#fwb-intro[data-art="zaehler"].fwb-i-weg .fwb-i-flaeche{transition:transform .9s cubic-bezier(.77,0,.18,1); transform:translateY(-101%)}
#fwb-intro[data-art="zaehler"].fwb-i-weg .fwb-i-zahl,
#fwb-intro[data-art="zaehler"].fwb-i-weg .fwb-i-balken{transition:opacity .3s; opacity:0}