/* ==========================================================
   weltenklang.com

   Alles Aussehen der Hauptseite steht in dieser einen Datei.
   Die Wissenswelt (lieder.weltenklang.com) hat ihr eigenes
   Stylesheet unter assets/css/wk.css und beruehrt diese nicht.

   Neu gebaut am 25.09.2026 um das Nidhoeggr-Kopfvideo herum.
   Die Farben stammen aus der alten carrd-Seite, das Gruen ist
   neu dazugekommen -- es ist das Gift aus dem Kopfvideo und
   taucht darum nur dort auf, wo es etwas verbindet.

   Die vorige Fassung, die carrd Pixel fuer Pixel nachbaute,
   liegt unter .sicherung-carrd-nachbau/.
   ========================================================== */

:root {
  --grund:       #1c1f26;   /* Seitenhintergrund */
  --platte:      #23262e;   /* abgesetzte Flaechen */
  --tief:        #0b0d0f;   /* hinter dem Kopfvideo */
  --gold:        #f0a830;
  --gold-hell:   #ffd98a;
  --gold-dunkel: #c07f18;
  --gift:        #8fe07a;   /* Nidhoeggrs Atem, sehr sparsam */
  --schrift:     #ffffff;
  --schrift-weich: rgba(255, 255, 255, .88);
  --schrift-leise: rgba(255, 255, 255, .62);

  --spalte: 720px;          /* die Lesespalte */
  --spalte-weit: 1120px;    /* fuer zweispaltige Abschnitte */
  --luft: clamp(72px, 9vw, 130px);   /* Abstand zwischen den Bahnen */
}

/* ---------- Schriften, alle oertlich ---------------------- */

/* Skranji, Space Grotesk und Sono stehen unter der SIL Open Font
   License. Sie liegen auf dem eigenen Server, es geht also keine
   Anfrage an Google. */

@font-face {
  font-family: 'Skranji';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/skranji-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Sono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/sono-500.woff2') format('woff2');
}

/* ---------- Grundgeruest --------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift-weich);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); }

mark { background: none; color: var(--gold); }

/* Fuer Vorleseprogramme sichtbar, fuer das Auge nicht. */
.nur-fuer-vorleser {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ==========================================================
   Die Buehne: das Kopfvideo, das beim Scrollen laeuft
   ========================================================== */

/* Die Buehne ist hoch. Darin klebt ein bildschirmfuellender
   Block fest, waehrend man an ihm vorbeiscrollt -- und genau
   dieser Scrollweg treibt das Video an. 260vh heisst: gut
   zweieinhalb Bildschirmhoehen scrollen, dann ist der Drache
   fertig und die Seite geht weiter. */

.buehne {
  position: relative;
  /* Der Scrollweg. Er bestimmt, wie lange man dreht, bis das Video
     durch ist. 260vh war zu viel: Man kurbelte zweieinhalb Schirme
     weit, bevor es weiterging, und das fuehlte sich nach Stillstand
     an. 180vh laesst das Video noch ruhig laufen, ohne aufzuhalten. */
  height: 180vh;
  background: var(--tief);
}

.buehne__halt {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Der Dunst hinter dem Video.

   Ein 16:9-Video auf einem hochkant gehaltenen Telefon fuellt nur
   etwa ein Viertel der Hoehe. Der Rest war schwarz, oben wie unten,
   und sah nach Fehler aus statt nach Absicht. Beschneiden hilft
   nicht: dann faellt die Wortmarke seitlich heraus.

   Also faellt das Bild selbst in die Leere -- stark unscharf und
   abgedunkelt, wie das Licht eines Fernsehers auf die Wand hinter
   ihm. Die Datei dafuer ist 420 Pixel breit und wiegt 1 KB. */
.buehne__halt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tief) url('/img/kopf-dunst.webp') center / cover no-repeat;
  /* Noch etwas weicher, als das kleine Bild von sich aus ist, und
     an den Raendern ins Dunkle auslaufend -- sonst zeichnet sich ein
     Rechteck ab. */
  filter: blur(14px) saturate(1.15);
  transform: scale(1.12);
  opacity: .72;
  z-index: 0;
}

.buehne__halt::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Zum Rand hin dunkler, damit das Video nicht in einem hellen
     Feld schwimmt, sondern aus dem Dunkel heraustritt. */
  background: radial-gradient(125% 85% at 50% 48%,
              rgba(11, 13, 17, 0) 0%,
              rgba(11, 13, 17, .38) 58%,
              rgba(11, 13, 17, .8) 100%);
  z-index: 0;
}

/* Video, Hinweis und Knoepfe gehoeren ueber den Dunst. */
.buehne__bild { position: relative; z-index: 2; }
.buehne__wink, .buehne__inhalt { z-index: 4; }

/* Das Video sitzt als 16:9-Bild mittig, nicht bildschirmfuellend
   beschnitten. So bleibt die Wortmarke auf jedem Geraet ganz
   sichtbar -- auf dem Telefon war sie bei der alten Seite halb
   abgeschnitten. */
.buehne__bild {
  width: 100%;
  max-height: 100vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  /* Kein eigener Hintergrund: Das Video soll im Dunst stehen, nicht
     als schwarzer Kasten darin. Solange es laedt, zeigt das
     poster-Bild ohnehin schon das erste Bild. */
  background: transparent;
  /* Eine schmale goldene Fuge und ein tiefer Schatten heben es vom
     Dunst ab. */
  box-shadow: 0 0 0 1px rgba(240, 168, 48, .18),
              0 24px 70px rgba(0, 0, 0, .6);
}

/* Ueber dem Video liegt nichts.

   Hier lag eine Vignette. Sie machte aus dem Bild einen
   dunklen Kasten mit einem hellen Streifen darin, statt es
   einfach zu zeigen. Die Knoepfe darauf sind goldgefuellt mit
   dunkler Schrift und der Scroll-Hinweis hat seine eigene
   Pille -- beide brauchen keinen Schleier. */
.buehne__schleier { display: none; }
/* Die Knoepfe unten im Bild. Sie sind zu Beginn unsichtbar und
   kommen erst, wenn der Drache fertig gespien hat -- das Video
   soll zuerst gesehen werden. Das Klassenwechseln macht das
   Skript in der Vorlage. */
.buehne__inhalt {
  position: absolute;
  left: 50%;
  bottom: clamp(38px, 7vh, 80px);
  transform: translateX(-50%);
  width: min(94vw, 900px);
  text-align: center;
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}

/* Der Satz unter den Knoepfen.

   Am grossen Schirm nicht noetig: Dort liegen die Knoepfe im Bild und
   direkt darunter faengt der Abschnitt "Was das hier ist" an. Auf dem
   Telefon dagegen klaffte unter den Knoepfen ein knapper Drittel
   Bildschirm Leere. Statt sie mit noch mehr Abstand zu fuellen, steht
   dort jetzt, worum es geht -- das gehoert auf eine Startseite
   ohnehin ganz nach oben. */
.buehne__spruch { display: none; }

.buehne__inhalt { transform: translate(-50%, 18px); }
.buehne__inhalt.da { opacity: 1; transform: translate(-50%, 0); }

/* Der Grund unter den Knoepfen.

   Die Knoepfe liegen am grossen Schirm im Bild, und an der Stelle, an
   der sie auftauchen, speit der Drache hellgruen. Gold auf Gruen liest
   sich nicht.

   Frueher lag deshalb ein Schleier ueber dem ganzen Video. Der war die
   falsche Antwort: Er verdunkelte auch den Anfang, wo gar nichts
   darauf liegt, und machte aus dem Bild einen Kasten.

   Dieser Verlauf liegt nur unter den Knoepfen, laeuft nach oben ins
   Nichts aus und gehoert zum selben Element -- er erscheint also
   genau dann, wenn die Knoepfe erscheinen, und keinen Wimpernschlag
   frueher. */
.buehne__inhalt::before {
  content: '';
  position: absolute;
  left: 50%;
  /* Oben laeuft er ins Nichts aus, unten muss er bis an den Rand der
     Buehne reichen. Endete er vorher, blieb dort eine sichtbare
     Kante: darueber abgedunkelt, darunter wieder das helle Video.
     Die Knoepfe sitzen clamp(38px, 7vh, 80px) ueber dem Rand -- genau
     diesen Abstand holt der Verlauf nach unten wieder heraus. */
  top: -165%;
  bottom: calc(-1 * clamp(38px, 7vh, 80px));
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(to top,
              rgba(7, 8, 11, .93) 0%,
              rgba(7, 8, 11, .88) 26%,
              rgba(7, 8, 11, .62) 56%,
              rgba(7, 8, 11, .26) 80%,
              rgba(7, 8, 11, 0) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Der Hinweis, dass man scrollen soll.

   Er muss auf einem unruhigen Bild lesbar bleiben, darum die
   dunkle Pille darunter. Sobald es losgeht, verschwindet er. */
.buehne__wink {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4vh, 44px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 20px 9px 22px;
  border-radius: 40px;
  background: rgba(10, 12, 16, .62);
  box-shadow: inset 0 0 0 1px rgba(240, 168, 48, .42),
              0 8px 26px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-hell);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  z-index: 4;
  animation: wink-kommt .8s .9s backwards ease-out;
}

.buehne__wink.weg {
  opacity: 0;
  transform: translate(-50%, 12px);
}

.buehne__wink svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  animation: sinken 1.9s ease-in-out infinite;
}

/* Er kommt erst, wenn das Bild einen Moment gestanden hat. */
@keyframes wink-kommt {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Ein ruhiges Pochen. Auf dem Telefon steht der Hinweis in einem
   schwarzen Feld unter dem Video -- ohne Bewegung liest man ihn
   als Beschriftung und nicht als Aufforderung. */
@keyframes wink-puls {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(240, 168, 48, .42),
                         0 8px 26px rgba(0, 0, 0, .45); }
  50%      { box-shadow: inset 0 0 0 1px rgba(240, 168, 48, .95),
                         0 8px 30px rgba(240, 168, 48, .22); }
}

@keyframes sinken {
  0%, 100% { transform: translateY(-2px); opacity: .6; }
  50%      { transform: translateY(4px);  opacity: 1; }
}

/* ==========================================================
   Die Bahnen: ein Abschnitt ueber die volle Breite
   ========================================================== */

.bahn {
  position: relative;
  padding: var(--luft) 24px;
}

.bahn__innen {
  position: relative;
  z-index: 1;
  max-width: var(--spalte);
  margin: 0 auto;
  text-align: center;
}

.bahn--weit .bahn__innen { max-width: var(--spalte-weit); }

.bahn--platte { background: var(--platte); }

.bahn--tief { background: var(--tief); }

/* Der koernige, fast schwarze Grund des Buchabschnitts.
   Das Rauschen steckt als SVG in der Adresse, es ist also
   keine zusaetzliche Datei. */
.bahn--koernig {
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' width='512' height='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.875' result='n'/%3E%3CfeColorMatrix type='matrix' values='0.0195 0 0 0 0 0 0.0234 0 0 0 0 0 0.0312 0 0 0 0 0 0.34 0'/%3E%3C/filter%3E%3Crect filter='url(%23n)' width='512' height='512' fill='transparent'/%3E%3C/svg%3E"),
    radial-gradient(140% 140% at 50% 0%, #34343c 0%, #15151a 55%);
  background-size: 512px auto, cover;
}

/* Bahnen mit Bildhintergrund. */
.bahn--bild {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Das Bild bleibt stehen, der Text zieht darueber hinweg.
   Auf iOS wird das ignoriert und das Bild scrollt normal mit --
   das ist kein Fehler, dort gibt es diese Technik schlicht
   nicht. Die Seite sieht deswegen nirgends kaputt aus. */
.bahn--parallax { background-attachment: fixed; }

@media (hover: none) and (pointer: coarse) {
  /* Auf Telefonen und Tablets kostet das Festhalten mehr
     Rechenzeit als es bringt. */
  .bahn--parallax { background-attachment: scroll; }
}

.bahn--bild::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,16,20,.62) 0%, rgba(14,16,20,.88) 100%);
  pointer-events: none;
}

/* Die feine Goldlinie, die Abschnitte trennt. */
.bahn + .bahn::after,
.bahn--strich::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,168,48,.34), transparent);
}

/* ---------- Schriftbild ---------------------------------- */

.ueber {                        /* die goldene Zeile ueber der Ueberschrift */
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--gold);
}

.titel {
  margin: 0 0 26px;
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -2px;
  color: var(--schrift);
  text-wrap: balance;
}

.titel--klein { font-size: clamp(25px, 3.2vw, 34px); letter-spacing: -1.2px; }

.satz {
  margin: 0 0 24px;
  font-size: 19px;
  line-height: 1.75;
  color: var(--schrift-weich);
}

.satz:last-child { margin-bottom: 0; }

.leise { color: var(--schrift-leise); font-size: 15px; line-height: 1.65; }

/* Die Zierzeile mit den drei Sternen. */
.zierde {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 0 0 26px;
  font-size: 12px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  color: var(--gold);
}

.zierde span {
  width: 54px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- Knoepfe -------------------------------------- */

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.knopfreihe:first-child { margin-top: 0; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 11px;
  background: var(--gold);
  color: #17191f;
  font-family: 'Sono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -1.4px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1),
              box-shadow .35s ease, filter .3s ease;
}

.knopf svg { width: 21px; height: 21px; fill: currentColor; flex: none; }

/* Der helle Streifen, der beim Zeigen ueber den Knopf wandert. */
.knopf::after {
  content: '';
  position: absolute;
  top: -20%; left: -140%;
  width: 55%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-22deg);
  pointer-events: none;
}

.knopf:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 28px rgba(240,169,46,.36);
  filter: brightness(1.06);
}

.knopf:hover::after { animation: streifen .85s cubic-bezier(.3,.7,.3,1); }
.knopf:active { transform: translateY(0) scale(.98); }

.knopf:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

@keyframes streifen {
  from { left: -140%; }
  to   { left: 150%; }
}

/* Der ruhige Knopf: nur Umriss, fuer das Zweitwichtige. */
.knopf--still {
  background: transparent;
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(240,168,48,.4);
}

.knopf--still:hover {
  background: rgba(240,168,48,.1);
  box-shadow: inset 0 0 0 1px var(--gold), 0 8px 22px rgba(0,0,0,.35);
}

/* Der pulsende Schein auf den wichtigsten Knoepfen. */
.knopf--ruf { animation: atem 3.6s ease-in-out infinite; }
.knopf--ruf:hover { animation: none; }

@keyframes atem {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,169,46,0); }
  50%      { box-shadow: 0 0 26px 2px rgba(240,169,46,.32); }
}

/* Die kleinen eckigen Knoepfe auf der Buehne. */
.buehne__inhalt .knopfreihe { gap: 9px; }

.buehne__inhalt .knopf {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 7px;
  font-family: 'Skranji', cursive;
  font-size: 15px;
  letter-spacing: .6px;
  backdrop-filter: blur(3px);
}

/* ---------- Die runden Kanalsymbole ---------------------- */

.kanaele {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.kanaele a {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gold);
  color: #17191f;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1),
              box-shadow .3s ease, background .3s ease;
}

.kanaele svg { width: 25px; height: 25px; fill: currentColor; }

.kanaele a:hover {
  transform: translateY(-4px) scale(1.09);
  background: var(--gold-hell);
  box-shadow: 0 10px 24px rgba(240,169,46,.4);
}

.kanaele a:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }

/* ---------- Einblenden beim Scrollen --------------------- */

.auftritt {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(5px);
  transition: opacity .85s cubic-bezier(.2,.7,.3,1),
              transform .85s cubic-bezier(.2,.7,.3,1),
              filter .85s ease;
  will-change: opacity, transform;
}

.auftritt.da { opacity: 1; transform: none; filter: none; }

/* ---------- Der Fortschrittsbalken oben ------------------ */

.fortschritt {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--gold-dunkel), var(--gold-hell));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

/* ==========================================================
   Das Buch
   ========================================================== */

.buchbild {
  margin: 0 auto 34px;
  max-width: 560px;
}

.buchbild img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(240,169,46,.26);
  transition: transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s ease;
}

.buchbild a:hover img {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 30px 70px rgba(0,0,0,.66), 0 0 0 1px rgba(240,169,46,.5);
}

/* Die beiden Hochkantvideos. */
.filme {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 250px));
  justify-content: center;
  gap: 20px;
  margin: 0 0 34px;
}

.filme video {
  width: 100%;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 14px 38px rgba(0,0,0,.5);
}

.buchtext { text-align: left; margin-bottom: 30px; }

.buchtext p { margin: 0 0 18px; }
.buchtext p:last-child { margin: 0; }

/* Der Preiskasten. */
.preis {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 13px 26px;
  margin: 0 0 8px;
  border-radius: 12px;
  background: rgba(240,168,48,.08);
  box-shadow: inset 0 0 0 1px rgba(240,168,48,.26);
}

.preis__schild {
  align-self: center;
  padding: 3px 11px;
  border-radius: 20px;
  background: var(--gold);
  color: #17191f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.preis__alt {
  font-size: 19px;
  color: var(--schrift-leise);
  text-decoration: line-through;
}

.preis__neu {
  font-family: 'Sono', ui-monospace, monospace;
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -1.6px;
  color: var(--gold);
}

/* ==========================================================
   Zwei Spalten: Bild neben Text
   ========================================================== */

.zweispalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  text-align: left;
}

.zweispalt--gedreht > :first-child { order: 2; }

.zweispalt img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 22px 56px rgba(0,0,0,.55), 0 0 0 1px rgba(240,169,46,.24);
}

.zweispalt .knopfreihe { justify-content: flex-start; }

/* ==========================================================
   Der Spendenzaehler

   Auf der alten Seite war das ein heller Kasten mitten im
   Dunkel -- er fiel heraus. Jetzt liegt er im selben Dunkel
   wie alles andere, das Herz gibt die Farbe.
   ========================================================== */

/* Das Bild dahinter (die Quilling-Rosen) ist hell, die Schrift
   ist weiss. Ohne diesen dunklen Grund waere der Text darauf
   nicht zu lesen -- genau das war er auch nicht. */
.spende {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 52px) clamp(22px, 3.4vw, 46px);
  border-radius: 18px;
  background: rgba(11, 13, 17, .84);
  box-shadow: inset 0 0 0 1px rgba(240, 168, 48, .22),
              0 26px 64px rgba(0, 0, 0, .5);
}

@supports (backdrop-filter: blur(1px)) {
  .spende { background: rgba(11, 13, 17, .72); backdrop-filter: blur(7px); }
}

.spende__herzen {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin: 0 0 22px;
}

.spende__herz { width: 34px; height: 34px; }
.spende__herz svg { width: 100%; height: 100%; }

.spende__herz--voll svg {
  fill: #e2564f;
  filter: drop-shadow(0 0 9px rgba(226,86,79,.55));
  animation: herzschlag 1.5s ease-in-out infinite;
}

/* Die Herzschlag-Kurve: zwei schnelle Schlaege, dann Ruhe. */
@keyframes herzschlag {
  0%, 26%, 100% { transform: scale(1); }
  9%            { transform: scale(1.17); }
  16%           { transform: scale(1.02); }
  22%           { transform: scale(1.11); }
}

.spende__herz--voll:nth-child(2) svg { animation-delay: .12s; }
.spende__herz--voll:nth-child(3) svg { animation-delay: .24s; }
.spende__herz--voll:nth-child(4) svg { animation-delay: .36s; }
.spende__herz--voll:nth-child(5) svg { animation-delay: .48s; }
.spende__herz--voll:nth-child(6) svg { animation-delay: .60s; }

.spende__herz--leer svg { fill: rgba(255,255,255,.13); }

.spende__zahlzeile {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.spende__zahl {
  font-family: 'Sono', ui-monospace, monospace;
  font-size: clamp(42px, 7vw, 62px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2.6px;
  color: var(--gold);
}

.spende__von { font-size: 17px; color: var(--schrift-leise); }

.spende__balken {
  height: 7px;
  margin: 0 auto 14px;
  max-width: 460px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.spende__fuellung {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, var(--gold-dunkel), var(--gold-hell));
  box-shadow: 0 0 14px rgba(240,169,46,.5);
  transition: width 1.2s cubic-bezier(.2,.8,.3,1);
}

.spende__summe { margin: 0 0 30px; font-size: 16px; color: var(--schrift-leise); }

.spende__hinweis {
  max-width: 540px;
  margin: 26px auto 0;
  font-size: 16px;
  color: var(--schrift-weich);
}

.spende__hinweis strong { color: var(--gold); }

.spende__fussnote {
  max-width: 500px;
  margin: 14px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--schrift-leise);
}

/* ==========================================================
   Der Newsletter
   ========================================================== */

.brief {
  max-width: 620px;
  margin: 0 auto;
}

.brief__form {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  justify-content: center;
  margin: 30px 0 0;
}

.brief__feld {
  flex: 1 1 260px;
  min-height: 48px;
  padding: 0 17px;
  border: 0;
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  color: var(--schrift);
  font-family: inherit;
  font-size: 17px;
  transition: box-shadow .25s ease, background .25s ease;
}

.brief__feld::placeholder { color: rgba(255,255,255,.38); }

.brief__feld:focus {
  outline: none;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(240,168,48,.16);
}

.brief__knopf { flex: 0 0 auto; }

/* Die Kalenderfrage.

   Sie steht im selben Formular, aber eine Zeile tiefer und leiser --
   abgesetzt durch eine duenne Linie. Die E-Mail ist die Hauptsache,
   der Kalender eine Frage nebenbei. Wer nur den Brief will, laesst das
   Feld leer und merkt kaum, dass es da war. */
.brief__extra {
  flex: 1 0 100%;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
}

.brief__frage {
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--schrift-weich);
}

.brief__zeile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Schmal: Es passen zwei Ziffern hinein, mehr braucht niemand. Ohne
   feste Breite wuerde das Zahlenfeld die ganze Zeile fuellen und
   wichtiger aussehen, als es ist. */
.brief__feld--zahl {
  flex: 0 0 92px;
  width: 92px;
  text-align: center;
}

.brief__notiz {
  margin: 0;
  padding-top: 3px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--schrift-leise);
}

.brief__recht {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--schrift-leise);
}

.brief__recht a { color: var(--gold); }

/* Das Hummelfeld: fuer Menschen nicht da, fuer Maschinen verlockend.
   Nicht display:none -- manche Maschinen erkennen das und lassen es
   dann aus. Es steht ausserhalb des Bildes. */
.brief__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================
   Wer bin ich
   ========================================================== */

.karte-ich {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  align-items: center;
  max-width: 640px;
  margin: 40px auto 0;
  padding: 30px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(240,168,48,.18);
  text-align: left;
}

.karte-ich img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }

.zitat {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: var(--schrift);
}

.karte-ich hr {
  border: 0;
  height: 1px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.handle {
  margin: 0;
  font-family: 'Sono', ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: -.6px;
  color: var(--gold);
}

/* ==========================================================
   Der Fuss
   ========================================================== */

.fuss {
  padding: clamp(56px, 7vw, 86px) 24px clamp(40px, 5vw, 60px);
  background: var(--tief);
  text-align: center;
}

.fuss .kanaele { margin-bottom: 30px; }

.fuss .satz { font-size: 15px; line-height: 1.7; color: var(--schrift-leise); }

.fuss .knopfreihe { margin-top: 26px; }

.fuss .knopf { min-height: 40px; font-size: 15px; padding: 0 18px; }

/* ==========================================================
   Die Museumsseite
   ========================================================== */

.schritte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.schritte li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 17px;
  border-radius: 40px;
  background: rgba(240,168,48,.07);
  box-shadow: inset 0 0 0 1px rgba(240,168,48,.2);
  font-size: 15px;
  line-height: 1.35;
  color: var(--schrift-weich);
  text-align: left;
}

.schritte em { font-style: normal; color: var(--gold); }

.schritte__zahl {
  display: grid;
  place-items: center;
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--gold);
  color: #17191f;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Die Karte ------------------------------------ */

/* Vor dem Klick steht hier nur ein Kasten. Erst wenn jemand
   darauf klickt, wird Leaflet geladen und OpenStreetMap
   gefragt -- dieselbe Zwei-Klick-Loesung wie bei den Videos
   in der Wissenswelt. */

.karte {
  position: relative;
  height: 460px;
  border-radius: 14px;
  overflow: hidden;
  background: #14161c;
  box-shadow: inset 0 0 0 1px rgba(240,168,48,.2);
}

.karte__vorschau {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 70% at 50% 45%, rgba(240,168,48,.07), transparent 70%),
    #14161c;
}

.karte__hinweis {
  max-width: 34rem;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--schrift-leise);
}

/* leaflet.css wird erst beim Klick nachgeladen und steht darum
   hinter diesem Stylesheet. Bei gleicher Spezifitaet gewinnt
   das spaetere -- die Regel fuer den Kartengrund braucht
   deshalb beide Klassen, sonst leuchtet Leaflets helles Grau
   durch. */
.karte.leaflet-container { background: #14161c; font-family: inherit; }

/* Die Kacheln von OpenStreetMap sind hell und bunt. Auf dieser Seite
   waere das ein weisses Rechteck mitten im Dunkeln.

   Umkehren dreht Schwarz und Weiss, macht aus dem hellen Papier also
   dunklen Grund. Dabei kippen aber auch alle Farben ins Gegenteil:
   Waelder wuerden violett, Wasser orange. Die Drehung um 180 Grad im
   Farbkreis holt sie zurueck. Der Rest daempft nur noch, damit die
   Karte nicht schreit. */
.karte .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.86) saturate(.55);
}

/* Die Nadeln, Sprechblasen und Bedienknoepfe liegen in eigenen Ebenen
   und duerfen davon nichts abbekommen. */
.karte .leaflet-marker-pane,
.karte .leaflet-popup-pane,
.karte .leaflet-control-container { filter: none; }

.karte .leaflet-popup-content-wrapper {
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
}

.karte .leaflet-popup-content { margin: 0; }
.karte .leaflet-popup-tip { background: var(--gold); }

.karte .leaflet-popup-close-button {
  top: 7px; right: 9px;
  font-size: 19px; font-weight: 400; color: #999;
}

.karte .leaflet-popup-close-button:hover { color: var(--gold-dunkel); background: none; }

.blase { padding: 17px 20px 15px; text-align: left; }

.blase__name {
  margin: 0 0 3px;
  font-size: 16px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.5px; color: #1c1f26;
}

.blase__ort { margin: 0 0 11px; font-size: 13px; line-height: 1.4; color: #888; }

.blase__strich {
  height: 1px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(240,168,48,.7), transparent);
}

.blase__tipp { margin: 0; font-size: 14px; line-height: 1.6; color: #2a1a1e; }
.blase__wort { font-weight: 700; color: #b06a08; }

.karte .leaflet-control-zoom a {
  background: rgba(28,31,38,.92);
  color: var(--gold);
  border-color: rgba(240,168,48,.2);
}

.karte .leaflet-control-zoom a:hover { background: #2a2d36; color: var(--gold-hell); }

.karte .leaflet-control-attribution {
  background: rgba(10,12,16,.72);
  color: #6b6152;
  font-size: 10px;
}

.karte .leaflet-control-attribution a { color: #a07030; }

/* ---------- Die Museumskarten ---------------------------- */

/* Die Karten wachsen bis 520 und nicht weiter: sonst zoege
   sich eine einzelne Karte ueber die ganze Breite. */
.haeuser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 520px));
  justify-content: center;
  gap: 28px;
  margin-top: 44px;
  text-align: left;
}

.haus {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--platte);
  box-shadow: inset 0 0 0 1px rgba(240,168,48,.18);
}

/* Die feinen Ecken oben links und unten rechts. */
.haus::before, .haus::after {
  content: '';
  position: absolute;
  width: 19px; height: 19px;
  border-color: rgba(240,168,48,.42);
  border-style: solid;
  pointer-events: none;
}

.haus::before { top: 10px;    left: 10px;  border-width: 1px 0 0 1px; }
.haus::after  { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

.haus__kopf {
  padding: 26px 28px 22px;
  background: linear-gradient(135deg, #2b2f3a 0%, #1e212a 100%);
  box-shadow: inset 0 -1px 0 rgba(240,168,48,.12);
}

.haus__abzeichen {
  display: inline-block;
  margin: 0 0 13px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(240,168,48,.1);
  box-shadow: inset 0 0 0 1px rgba(240,168,48,.25);
  font-size: 10px; font-weight: 500;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gold);
}

.haus__abzeichen::before { content: '\2726'; margin-right: 6px; }

.haus__name {
  margin: 0 0 4px;
  font-size: 23px; font-weight: 700; line-height: 1.2;
  letter-spacing: -1px; color: var(--schrift);
}

.haus__ort {
  margin: 0;
  font-size: 12px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--schrift-leise);
}

.haus__rumpf { padding: 22px 28px 26px; }

.haus__text { margin: 0 0 18px; font-size: 16px; line-height: 1.75; }

.haus__anschrift { margin: 0 0 22px; font-size: 14px; line-height: 1.5; color: var(--schrift-leise); }

.haus__anschrift span { margin-right: 6px; }

.haus__tipp {
  margin: 0;
  padding: 13px 17px;
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(240,168,48,.09), rgba(240,168,48,.04));
  font-size: 15px; line-height: 1.6;
  color: var(--schrift-weich);
}

.haus__tipp-kopf {
  display: block;
  margin-bottom: 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold);
}

.haus__tipp b { font-weight: 700; color: var(--gold); }

.haus__lied { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--schrift-leise); }

/* ==========================================================
   Rechtsseite  (Impressum und Datenschutz)

   Der einzige Ort auf dieser Seite mit langem Fliesstext.
   Alles andere ist mittig gesetzt und kurz -- hier waere das
   unlesbar. Deshalb linksbuendig, schmalere Spalte, groessere
   Zeilenabstaende.
   ========================================================== */

.recht {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.recht__kopf { text-align: center; margin-bottom: clamp(44px, 6vw, 70px); }

/* Das Inhaltsverzeichnis. Sechzehn Abschnitte sind zu viele,
   um sie zu erscrollen. */
.recht__wege {
  margin: 0 0 clamp(40px, 5vw, 62px);
  padding: 24px 26px;
  list-style: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(240, 168, 48, .16);
  columns: 2;
  column-gap: 30px;
}

.recht__wege li { margin: 0 0 9px; break-inside: avoid; }

.recht__wege a {
  font-size: 15px;
  line-height: 1.5;
  color: var(--schrift-weich);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.recht__wege a:hover {
  color: var(--gold-hell);
  border-bottom-color: rgba(240, 168, 48, .5);
}

.recht h2 {
  margin: clamp(52px, 6vw, 76px) 0 24px;
  padding-bottom: 14px;
  font-size: clamp(25px, 3.2vw, 33px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.1px;
  color: var(--schrift);
  border-bottom: 1px solid rgba(240, 168, 48, .28);
}

.recht h2:first-child { margin-top: 0; }

.recht h3 {
  margin: 44px 0 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gold);
  /* Damit der Sprung aus dem Inhaltsverzeichnis nicht unter
     dem oberen Rand klebt. */
  scroll-margin-top: 28px;
}

.recht h4 {
  margin: 30px 0 11px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--schrift);
}

.recht p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--schrift-weich);
}

.recht ul { margin: 0 0 18px; padding-left: 22px; }

.recht li {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--schrift-weich);
}

.recht a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(240, 168, 48, .4);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.recht a:hover { color: var(--gold-hell); text-decoration-color: currentColor; }

.recht strong { color: var(--schrift); }

.recht__stand {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 15px;
  color: var(--schrift-leise);
}

/* Zurueck nach oben, ohne ans Ende scrollen zu muessen. */
.recht__zurueck { margin-top: 34px; text-align: center; }

/* ==========================================================
   Schmale Fenster
   ========================================================== */

@media (max-width: 860px) {
  .zweispalt { grid-template-columns: 1fr; text-align: center; }
  .zweispalt--gedreht > :first-child { order: 0; }
  .zweispalt .knopfreihe { justify-content: center; }
  .zweispalt img { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 620px) {
  body { font-size: 18px; }

  /* Zwei Spalten Inhaltsverzeichnis waeren hier Briefmarkenbreite. */
  .recht__wege { columns: 1; padding: 20px 22px; }
  .recht p, .recht li { font-size: 16px; }

  /* Auf dem Telefon kuerzer. Ein Daumen schiebt weniger weit als ein
     Mausrad dreht. Nicht noch kuerzer: Bei 120vh blieben nur 160
     Pixel Scrollweg fuer 106 Bilder, da zuckte das Video bei der
     kleinsten Bewegung durch. 150vh sind etwa ein halber Wisch. */
  /* Die Buehne ist nur wenig hoeher als das, was sie zeigt.

     Vorher war der festklebende Block einen ganzen Bildschirm hoch,
     der Inhalt darin aber nur gut zwei Drittel davon. Der Rest war
     Leere, und sie blieb die ganze Fahrt ueber stehen. Jetzt ist der
     Block genau so hoch wie sein Inhalt, und der naechste Abschnitt
     schiebt sich beim Scrollen von unten heran. Die Luecke schliesst
     sich also, statt stehenzubleiben.

     Sie ist sogar etwas NIEDRIGER als der Bildschirm. Dadurch schaut
     der naechste Abschnitt schon beim Aufschlagen unten herein --
     man sieht auf den ersten Blick, dass es weitergeht, und die
     Luecke unter den Knoepfen ist von Anfang an kleiner. */
  .buehne { height: calc(100svh - 120px); }

  /* Ein 16:9-Video ist auf einem hochkant gehaltenen Telefon nur
     ein schmaler Streifen. Beschneiden hilft nicht: dann faellt
     die Wortmarke seitlich heraus, genau der Fehler der alten
     Seite. Stattdessen ruecken Video, Kanalsymbole und Knoepfe
     hier zu einem Block zusammen, der den Schirm gemeinsam
     fuellt -- statt eines Streifens in viel Schwarz. */
  /* svh statt vh: Auf dem Telefon ist vh die Hoehe OHNE eingeblendete
     Adressleiste. Die Buehne war damit hoeher als das, was man
     tatsaechlich sieht, und alles darin auf eine Mitte ausgerichtet,
     die gar nicht auf dem Schirm lag. svh rechnet mit dem kleinsten
     sichtbaren Bereich -- dann stimmt die Mitte immer. */
  .buehne__halt {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    padding-top: 26px;
    gap: 13px;
    /* Die Polsterung unten schiebt den Block ueber die Mitte. Genau
       mittig sass er wie hingelegt; etwas hoeher sitzt er wie
       gesetzt, und der Platz darunter laedt zum Weiterscrollen. */
    padding-bottom: 26px;
  }

  /* Die Abstaende im Block. Am grossen Schirm haben die Knoepfe Luft,
     weil sie ueber dem Video schweben. Hier stehen sie in einer Reihe
     darunter, und dieselbe Luft wirkt wie ein Loch. */
  .buehne__inhalt::before { display: none; }

  .buehne__inhalt .kanaele { margin-bottom: 0; gap: 13px; }
  .buehne__inhalt .knopfreihe { margin-top: 15px; gap: 8px; }
  .buehne__inhalt .kanaele a { width: 42px; height: 42px; }

  .buehne__spruch {
    display: block;
    margin: 20px auto 0;
    max-width: 19em;
    font-size: 17px;
    line-height: 1.55;
    color: var(--schrift-weich);
    text-wrap: balance;
  }

  /* Der Hinweis gehoert direkt unter das Video, nicht an den unteren
     Bildschirmrand. Dort verdeckte ihn die Adressleiste des Browsers
     zur Haelfte, und genau deshalb hat niemand gemerkt, dass man
     scrollen soll. Hier steht er im Blickfeld, gleich unter dem
     Drachen. */
  .buehne__wink {
    position: static;
    transform: none;
    align-self: center;
    font-size: 13px;
    padding: 11px 22px 11px 24px;
    animation: wink-kommt .8s .5s backwards ease-out, wink-puls 2.4s 1.4s ease-in-out infinite;
  }

  .buehne__wink.weg { transform: translateY(10px); }

  /* Das Video ueber die ganze Breite, der Rest bekommt seinen
     Rand einzeln -- sonst verschenkte das Bild links und rechts
     je 20 Pixel, die es auf einem Telefon nicht hat. */
  .buehne__bild { max-height: none; }

  .buehne__inhalt {
    position: static;
    width: 100%;
    padding: 0 20px;
    transform: translateY(16px);
  }

  .buehne__inhalt.da { transform: none; }

  .filme { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }

  .karte-ich {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 26px 22px;
  }

  .karte-ich hr { background: linear-gradient(90deg, transparent, var(--gold), transparent); }

  .karte { height: 380px; }

  .haeuser { grid-template-columns: 1fr; gap: 20px; }

  /* In der Spalte wuerde die Flex-Grundgroesse von 260px zur Hoehe
     des Feldes -- darum hier ausdruecklich zurueckgenommen. */
  .brief__form { flex-direction: column; }
  .brief__feld { flex: none; width: 100%; }
  .brief__feld--zahl { width: 84px; flex: 0 0 84px; }
  .brief__zeile { flex-direction: row; }
  .brief__knopf { width: 100%; }
}

/* ==========================================================
   Wer Bewegung nicht mag, bekommt keine
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .auftritt { opacity: 1; transform: none; filter: none; }

  /* Kein mitscrollendes Video: die Buehne wird zu einem
     ruhigen Standbild in Bildschirmhoehe. */
  .buehne { height: auto; }
  .buehne__halt { position: static; height: auto; min-height: 76vh; }
  .buehne__inhalt { opacity: 1; transform: translate(-50%, 0); }
  .buehne__wink { display: none; }
}