/* ===================================================================
   BOLLWERK PDM — Grundgeruest
   Farben und Schrift stehen hier, Bewegungswerte in werte.json.
   =================================================================== */

@font-face {
  font-family: 'Hausschrift';
  src: url('schriften/Archivo-Expanded-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  --schwarz:   #070706;
  --creme:     #efdfc0;
  --gold:      #c8ab74;
  --gold-matt: #9c8a5e;
  --rand:      rgba(200, 171, 116, .22);
  /* Lesetext laeuft auf Weiss. Creme war auf den hellen Bildstellen
     (Palastfenster, Goldfeld) zu schwach. Gold bleibt den Akzenten. */
  --weiss:     #ffffff;
  --weiss-ab:  rgba(255, 255, 255, .88);
  --weiss-still: rgba(255, 255, 255, .46);
  --kopfhoehe: 72px;
  --gasse:     clamp(16px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--schwarz);
  color: var(--creme);
  font-family: 'Hausschrift', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* ---------- Buehne: das gesamte Bild haengt an einem Canvas ---------- */
#buehne { position: fixed; inset: 0; z-index: 1; background: var(--schwarz); }
#leinwand { display: block; width: 100%; height: 100%; }

/* ---------- Scrollstrecke ---------- */
#strecke { position: relative; z-index: 0; }

/* ---------- Kopf ---------- */
/* Schleier unter Kopf und Fuss: die Akte wechseln zwischen hellem
   Goldfeld und tiefem Schwarz, ohne ihn verschwindet die Navigation. */
#kopf::before {
  content: ''; position: absolute; inset: -1px 0 -40px 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(5,5,4,.72) 0%, rgba(5,5,4,.42) 55%, rgba(5,5,4,0) 100%);
  pointer-events: none;
}
#kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: var(--kopfhoehe);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  padding: 0 var(--gasse);
  pointer-events: none;
}
#kopf > * { pointer-events: auto; }

#marke {
  font-size: clamp(13px, 1.15vw, 15px);
  letter-spacing: .115em;
  color: var(--creme);
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}

#menue { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 22px); }
#menue a {
  font-size: clamp(10px, .85vw, 12px);
  letter-spacing: .105em;
  text-transform: uppercase;
  color: #d8c49a;
  text-decoration: none;
  transition: color .25s ease;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
#menue a:not(.knopf):hover, #menue a:not(.knopf):focus-visible { color: var(--creme); }

/* Der Knopf ist kein Menuelink: eigene Farben, hoehere Spezifitaet,
   sonst ueberschreibt die Menueregel den Text und er wird unlesbar. */
#menue a.knopf { color: var(--schwarz); }
#menue a.knopf:hover, #menue a.knopf:focus-visible { color: var(--creme); }

.knopf {
  box-shadow: 0 2px 18px rgba(0,0,0,.45);
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 17px;
  font-size: clamp(10px, .85vw, 12px);
  letter-spacing: .115em; text-transform: uppercase;
  color: var(--schwarz); background: var(--creme);
  border: 1px solid var(--creme); border-radius: 2px;
  text-decoration: none; white-space: nowrap;
  transition: background .25s ease, color .25s ease, transform .12s ease;
}
.knopf:hover, .knopf:focus-visible { background: transparent; color: var(--creme); }
.knopf:active { transform: translateY(1px); }

/* Auf dem Telefon wandert der Hauptknopf nach unten, damit er nicht
   mit dem Logo kollidiert. Das war der Fehler in der ersten Demo.
   Die Grundregel muss VOR der Medienabfrage stehen, sonst gewinnt sie
   bei gleicher Spezifitaet und der Knopf bleibt unsichtbar. */
#fussknopf {
  display: none;
  position: fixed; z-index: 11;
  left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  min-height: 46px; padding: 0 26px;
}
#fussknopf:active { transform: translateX(-50%) translateY(1px); }

@media (max-width: 720px) {
  #menue { display: none; }
  #fussknopf { display: inline-flex; }
  /* Der Hinweis stand frueher unten neben dem Knopf und musste deshalb
     auf dem Telefon weichen. Jetzt steht er in der Bildmitte und bleibt. */
}

/* ---------- Akt null: das Laden ist Teil der Inszenierung ---------- */
#laden {
  position: fixed; inset: 0; z-index: 50;
  background: var(--schwarz);
  display: grid; place-items: center;
  transition: opacity .9s ease;
}
#laden[hidden] { opacity: 0; pointer-events: none; }
#ladeinhalt { text-align: center; width: min(320px, 70vw); }
#ladewort {
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: .34em; color: var(--creme);
  margin-bottom: 22px;
}
#ladebalken { height: 1px; background: rgba(200,171,116,.2); overflow: hidden; }
#ladefuellung { height: 100%; width: 0; background: var(--gold); transition: width .4s ease; }
#ladezahl {
  margin-top: 12px;
  font-size: 11px; letter-spacing: .22em; color: var(--gold-matt);
  font-variant-numeric: tabular-nums;
}

/* ---------- Scrollhinweis, verschwindet nach der ersten Bewegung ---- */
#hinweis {
  /* Stand unten am Rand und ging dort unter. Jetzt in der Bildmitte,
     mit Pfeil, in Gold statt Creme, damit es sich von Menue und Fuss
     deutlich absetzt. */
  position: fixed; left: 50%; top: 50%; z-index: 9;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: opacity .6s ease;
  pointer-events: none;
}
#hinweiswort {
  font-size: clamp(11px, 1.05vw, 13px); letter-spacing: .42em;
  text-transform: uppercase; color: var(--gold);
  text-shadow: 0 2px 24px rgba(0,0,0,.9);
  padding-left: .42em;
}
#hinweispfeil {
  width: 20px; height: 28px; overflow: visible;
  fill: none; stroke: var(--gold); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  animation: hinweisnicken 2.4s ease-in-out infinite;
}
@keyframes hinweisnicken {
  0%, 100% { transform: translateY(-3px); opacity: .55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #hinweispfeil { animation: none; opacity: .9; }
}


@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* ---------- Marke ---------- */
#marke .punkt { color: var(--gold); }

/* ---------- Footer: laut Kundendokument auf allen Akten ---------- */
#fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px var(--gasse) calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: clamp(10px, .95vw, 12px);
  letter-spacing: .14em;
  color: var(--gold-matt);
  background: linear-gradient(to top, rgba(5,5,4,.78) 0%, rgba(5,5,4,.45) 55%, rgba(5,5,4,0) 100%);
  pointer-events: none;
}
#fuss > * { pointer-events: auto; }
/* Deutlich kleiner als alles andere: die Anschrift ist Pflichtangabe,
   kein Gestaltungselement. */
#anschrift {
  text-transform: uppercase;
  font-size: clamp(8px, .72vw, 10px); letter-spacing: .18em;
  color: rgba(255,255,255,.34);
}
#anschrift .trenn { color: rgba(200,171,116,.55); margin: 0 .35em; }
#fusslinks { display: flex; gap: clamp(14px, 1.8vw, 26px); }
#fusslinks a {
  /* Eigene, stillere Farbe als die Navigation oben, damit der Fuss nicht
     mit dem Menue konkurriert. */
  font-size: clamp(8px, .74vw, 10px); letter-spacing: .2em;
  color: var(--weiss-still); text-decoration: none; text-transform: uppercase;
  transition: color .25s ease;
  /* Die Zeilen sind nur 11 px hoch. Ohne Polsterung liegt die Tippflaeche
     weit unter den 44 px, die auf dem Telefon noetig sind. */
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;
}
#fusslinks a:hover, #fusslinks a:focus-visible { color: var(--weiss); }

/* Auf dem Telefon sitzt dort der Hauptknopf, der Footer rueckt darueber
   und zeigt nur noch die Rechtslinks. */
@media (max-width: 720px) {
  #fuss {
    justify-content: center;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    padding: 8px var(--gasse);
    /* Schleier bleibt auch hier: die Akte wechseln zwischen hellem
       Goldfeld und Schwarz, ohne ihn verschwinden die Links. */
    background: linear-gradient(to top, rgba(5,5,4,.80) 0%, rgba(5,5,4,.55) 60%, rgba(5,5,4,0) 100%);
  }
  #anschrift { display: none; }
  #fusslinks { gap: 14px; }
  #fusslinks a { color: #d8c49a; padding: 0 6px; }
}

/* ---------- Kopfzeile: nichts darf umbrechen ----------
   Flex-Elemente schrumpfen standardmaessig unter ihre Textbreite.
   Ohne diese Regeln stehen Marke und Menuepunkte zweizeilig. */
#marke, #menue a, #fusslinks a, #anschrift { white-space: nowrap; }
#menue a { flex: 0 0 auto; }
#marke { flex: 0 0 auto; }

/* Der Knopf wandert nach unten, wenn es oben eng wird. Die Grenze lag
   bei 1340 px, solange der Tonknopf danebenstand. Ohne ihn ist in der
   Kopfzeile rund 55 px mehr Platz, der Knopf bleibt also laenger oben. */
@media (max-width: 1280px) {
  #kopfknopf { display: none; }
  #fussknopf { display: inline-flex; }
  #fuss { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  #menue { gap: clamp(12px, 1.8vw, 22px); }
}

/* ===================================================================
   TEXTEBENE
   Liegt ueber dem Bild, folgt dem Scrollen, bewegt sich nie von allein.
   =================================================================== */
#texte { position: fixed; inset: 0; z-index: 5; pointer-events: none; }

.block {
  position: absolute;
  opacity: 0;
  will-change: opacity, transform;
  max-width: min(640px, 46vw);
}
.lage-mitte  { left: 50%; top: 50%; translate: -50% -50%; text-align: center; max-width: min(760px, 78vw); }
.lage-links  { left: var(--gasse); top: 50%; translate: 0 -50%; }
.lage-rechts { right: var(--gasse); top: 50%; translate: 0 -50%; max-width: min(520px, 44vw); }

/* Abschnittstitel. Keine Aktnummern, die sind nur Planungsvokabular. */
/* Titel brauchen mehr Breite als ein Textblock, sonst bricht
   "Das sind wir" dreizeilig um. */
.art-titel {
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px);
  max-width: min(1120px, 92vw);
}
.art-titel.lage-mitte { max-width: min(1120px, 92vw); }
.titelstrich {
  flex: 1 1 60px; height: 1px; max-width: 120px;
  background: linear-gradient(to right, transparent, rgba(200,171,116,.55), transparent);
}
.akttitel {
  font-size: clamp(32px, 5.6vw, 74px); letter-spacing: .16em;
  text-transform: uppercase; color: var(--weiss); line-height: 1.05;
  text-shadow: 0 2px 34px rgba(0,0,0,.85);
  white-space: nowrap;
}

/* Textblock */
/* h1 und h2 sehen gleich aus. Welche Ebene eine Ueberschrift hat, ist
   eine Frage der Bedeutung, nicht der Groesse. */
.block h1,
.block h2 {
  font-size: clamp(19px, 2.3vw, 33px);
  line-height: 1.22; letter-spacing: .012em;
  color: var(--weiss); font-weight: 600;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  text-shadow: 0 2px 26px rgba(0,0,0,.82);
}
.block .zeilen { display: flex; flex-direction: column; gap: clamp(5px, .7vw, 9px); }
.block .zeile {
  font-size: clamp(14px, 1.35vw, 19px);
  line-height: 1.58; color: var(--weiss-ab);
  text-shadow: 0 2px 20px rgba(0,0,0,.85);
}
.lage-mitte .zeilen { align-items: center; }

/* ===================================================================
   FOTOSTAPEL
   =================================================================== */
.stapel { cursor: pointer; user-select: none; }
/* Buehne fuer den Stapel. Die Karten liegen mittig darin und behalten
   jede ihr eigenes Format, quer wie hoch. Ein einheitlicher Beschnitt
   wuerde Bildaufbauten zerstoeren. */
.karten {
  position: relative;
  width: min(460px, 36vw);
  height: min(460px, 36vw);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.karte {
  position: absolute; margin: 0;
  aspect-ratio: var(--seiten);
  max-width: 100%; max-height: 100%;
  border-radius: 3px; overflow: hidden;
  background: #121110;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(200,171,116,.14);
  transform:
    translate(calc(var(--platz) * 9px), calc(var(--platz) * -7px))
    rotate(calc(var(--dreh) * (1 - var(--platz) * .18)))
    scale(calc(1 - var(--platz) * .035));
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
}
.karte.quer { width: 100%; height: auto; }
.karte.hoch { height: 100%; width: auto; }
.karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte.weg {
  transform: translate(64px, -38px) rotate(9deg) scale(1.03);
  opacity: 0;
  transition: transform .5s cubic-bezier(.4,0,.6,1), opacity .42s ease;
}

.stapelleiste { display: flex; justify-content: flex-start; }
.blaettern {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 18px;
  font: inherit; font-size: clamp(10px, .9vw, 12px);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--creme); background: rgba(5,5,4,.6);
  border: 1px solid var(--rand); border-radius: 2px;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease;
}
.blaettern:hover, .stapel:hover .blaettern { background: rgba(5,5,4,.8); border-color: rgba(200,171,116,.45); }
/* Eigener Name: '.zaehler' gehoert den grossen Bilanzzahlen und setzt
   dort flex-direction column. Mit dem gleichen Namen standen hier die
   Ziffern untereinander. */
.blaettern .stapelzaehler { color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blaettern b { color: var(--creme); font-weight: 600; }

@media (max-width: 900px) {
  .lage-links, .lage-rechts {
    left: var(--gasse); right: var(--gasse); max-width: none;
    translate: 0 0;
  }
  .lage-links  { top: 16vh; }
  .lage-rechts { top: auto; bottom: 22vh; }
  .karten { width: min(330px, 78vw); height: min(330px, 78vw); margin-inline: auto; }
  .stapelleiste { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .karte { transition: none; }
}

/* Schleier unter den Textbloecken. Das Bild darunter bleibt sichtbar,
   aber die hellen Stellen (Palastfenster, Goldfeld) ziehen den Kontrast
   sonst auf unter 2 zu 1 herunter. Gemessen, nicht geschaetzt. */
.art-block, .art-titel { position: absolute; isolation: isolate; }
.art-block::before, .art-titel::before {
  /* Zwei Dinge waren falsch.

     Erstens die Form: ohne Angabe nimmt ein radialer Verlauf die
     entfernteste Ecke als Radius. Bei einem breiten, flachen Kasten
     reicht er senkrecht ueber den Kastenrand hinaus und wird dort
     abgeschnitten - oben und unten stand deshalb eine gerade schwarze
     Linie. Mit "farthest-side" beruehrt die Ellipse jede Seite genau
     bei 100 Prozent, der Verlauf endet also ringsum im Nichts.

     Zweitens die Staerke: 0,88 ergab auf der hellsten Flaeche der Seite
     (dem Goldfeld) einen Kontrast von 13 zu 1. Noetig sind 4,5 zu 1.
     Gemessen reicht dafuer 0,52, das ergibt 5,4 zu 1 und ist deutlich
     unauffaelliger. */
  content: ''; position: absolute; inset: -58% -42%; z-index: -1;
  background: radial-gradient(ellipse farthest-side at center,
      rgba(5,5,4,.52) 0%, rgba(5,5,4,.49) 24%, rgba(5,5,4,.36) 46%,
      rgba(5,5,4,.19) 64%, rgba(5,5,4,.07) 80%, rgba(5,5,4,0) 100%);
  pointer-events: none;
}
/* Auf der Goldflaeche hinter der Tuer steht die Schrift ohne Schleier.
   Der Schatten an der Schrift selbst traegt dort genug. */
#block-regeneration-text::before { content: none; }
#block-regeneration-text { text-align: center; }
#block-regeneration-text h2 { color: var(--weiss); text-shadow: 0 2px 30px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.45); }
#block-regeneration-text .zeile { color: var(--weiss-ab); text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
#block-regeneration-text .zeilen { align-items: center; }
.lage-links::before, .lage-rechts::before,
.lage-paarlinks::before, .lage-paarrechts::before { inset: -46% -34%; }

/* Sichtbarer Fokus, sonst ist der Tastaturzugang wertlos */
.stapel:focus-visible, .blaettern:focus-visible,
#menue a:focus-visible, #fusslinks a:focus-visible, #marke:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ===================================================================
   TRAINERKARTEN
   =================================================================== */
.lage-breit { left: var(--gasse); right: var(--gasse); top: 50%; translate: 0 -50%; max-width: none; }
.art-trainer::before { content: none; }
/* Die Textebene sitzt mittig im Fenster, der Fussbereich braucht aber mehr
   Platz als der Kopf. Ohne diese Verschiebung stiess die unterste Kante der
   Karten in die Fusszeile, waehrend oben Luft uebrig blieb. */
@media (min-width: 901px) {
  .art-trainer.lage-breit { top: calc(50% - 30px); }
}

.trainerreihe {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
  /* War 1180. Die Karten reichten damit fast vom Kopf bis zum Fuss und
     wirkten nicht mehr wie Karten, sondern wie drei Spalten. */
  max-width: 920px; margin: 0 auto;
  /* Alle Karten auf gleiche Hoehe, damit sie unten buendig stehen. */
  align-items: stretch;
  /* Gleiche Hoehe allein reicht nicht: Portraet, Name, Unterzeile, Zitat
     und Knopf sollen ueber alle drei Karten auf einer Linie liegen. Dafuer
     teilen sich die Karten das Zeilenraster der Reihe (subgrid). */
  grid-template-rows: auto auto auto 1fr auto;
}
.trainer {
  background: linear-gradient(to bottom, rgba(14,12,10,.88), rgba(8,7,6,.94));
  border: 1px solid var(--rand);
  border-radius: 3px;
  padding: clamp(13px, 1.3vw, 19px);
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  box-shadow: 0 20px 54px rgba(0,0,0,.5);
  /* Die Textebene liegt fest, eine Karte darf nie hoeher werden als
     das Fenster abzueglich Kopf und Fuss. Grosszuegiger als vorher, damit
     ueber und unter der Reihe Luft bleibt und man die Karte als Karte sieht. */
  max-height: calc(100svh - 250px);
}
/* War 1:1.36. Die Karte wird jetzt ueber die Breite der Reihe kleiner, nicht
   ueber eine Hoehendeckelung am Portraet: eine Deckelung hat das Bild schmaler
   als die Karte gemacht und rechts einen leeren Streifen stehen lassen. */
.portraet {
  aspect-ratio: 1 / 1.04;
  overflow: hidden; border-radius: 2px;
  background: #121110; margin-bottom: clamp(10px, 1.1vw, 15px);
}
.portraet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trainer h3 {
  font-size: clamp(15px, 1.4vw, 20px); letter-spacing: .055em;
  color: var(--creme); font-weight: 600; margin-bottom: 6px;
}
.unterzeile {
  font-size: clamp(11px, 1vw, 13px); line-height: 1.45;
  color: var(--gold); margin-bottom: clamp(10px, 1.1vw, 14px);
}
.zitat {
  font-size: clamp(12px, 1.02vw, 14px); line-height: 1.48;
  color: #cdbb95; border-left: 1px solid rgba(200,171,116,.4);
  padding-left: 12px; margin-bottom: clamp(10px, 1.1vw, 15px);
}
.mehr {
  align-self: end;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 14px;
  font: inherit; font-size: clamp(10px, .88vw, 12px);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--creme); background: transparent;
  border: 1px solid var(--rand); border-radius: 2px;
  cursor: pointer; transition: background .25s ease, border-color .25s ease;
}
.mehr:hover, .mehr:focus-visible { background: rgba(200,171,116,.10); border-color: rgba(200,171,116,.45); }
.kreuz { position: relative; width: 11px; height: 11px; flex: 0 0 auto; }
.kreuz::before, .kreuz::after {
  content: ''; position: absolute; background: var(--gold);
  transition: transform .3s ease, opacity .3s ease;
}
.kreuz::before { left: 0; right: 0; top: 5px; height: 1px; }
.kreuz::after  { top: 0; bottom: 0; left: 5px; width: 1px; }
/* Die alte Regel liess beim Aufklappen den senkrechten Strich des Plus
   verschwinden. Sie hatte hoehere Spezifitaet als die Regel fuer das
   Kreuz auf der Rueckseite und machte daraus einen Schraegstrich. Der
   Knopf auf der Vorderseite wechselt sein Zeichen nicht mehr, also weg
   damit. */

/* ---- Kartendrehung -------------------------------------------------
   Die Biografie liegt als Rueckseite deckungsgleich ueber der Karte und
   ist um 180 Grad gedreht. Sie steht damit ausserhalb des Textflusses -
   das loest nebenbei das alte Problem, dass sie als sechstes Kind im
   gemeinsamen Zeilenraster alle drei Karten auseinanderzog. */
.trainerreihe { perspective: 1800px; }
.trainer {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.2,.75,.2,1), box-shadow .4s ease;
}
.trainer.offen { transform: rotateY(180deg); }
.trainer > :not(.bio) { backface-visibility: hidden; }

.bio {
  position: absolute; inset: 0;
  padding: clamp(18px, 1.9vw, 26px);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display: flex; flex-direction: column; gap: 12px;
}
/* Eine duenne Goldlinie, innen liegend, einmal rundherum. Sie sitzt
   bewusst innerhalb der Kartenkante und beruehrt sie nicht - dadurch
   wirkt sie wie ein Passepartout und nicht wie ein zweiter Rahmen. */
.bio::before {
  content: ''; position: absolute;
  inset: clamp(8px, .8vw, 11px);
  border: 1px solid rgba(200,171,116,.38);
  border-radius: 2px;
  pointer-events: none;
}
.biotext {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  /* Der Text steht mittig in der Karte, waagerecht wie senkrecht. */
  text-align: center;
  padding: clamp(6px, .7vw, 10px) clamp(4px, .5vw, 8px);
}
.bio p { text-wrap: pretty; }
/* Der Schliessen-Knopf sitzt unten, genau dort, wo auf der Vorderseite
   der Aufklappknopf steht. */
.bio .zurueck { margin-top: auto; flex: 0 0 auto; justify-content: center; gap: 12px; }
/* Beide Striche im selben Drehsinn: der waagerechte wird zum einen
   Schenkel, der senkrechte zum anderen. Mit entgegengesetztem Vorzeichen
   lagen beide auf derselben Diagonale und es sah aus wie ein
   Schraegstrich. */
.kreuz.zu::before { transform: rotate(45deg); }
.kreuz.zu::after  { transform: rotate(45deg); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .trainer { transition: none; }
}
.bio p { font-size: clamp(11px, 1vw, 13px); line-height: 1.5; color: #b9a983; }

@media (max-width: 900px) {
  .trainerreihe { grid-template-columns: 1fr; gap: 10px; max-width: 460px; }

  /* Die Karte hat kein eigenes Textfeld im Markup. Mit 'flex-direction: row'
     stellten sich Name, Unterzeile, Zitat und Knopf nebeneinander - die Karte
     war 641 px breit auf einem 375-px-Schirm und der Aufklappknopf lag
     ausserhalb des Bildschirms. Feste Rasterflaechen loesen das ohne Markup-
     aenderung und halten die Hoehe vorhersagbar: Portraet links neben Name
     und Unterzeile, alles Weitere darunter ueber die volle Breite. */
  .trainer {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas:
      "bild name"
      "bild zeile"
      "zitat zitat"
      "knopf knopf";
    column-gap: 12px; row-gap: 0;
    align-items: start;
    max-height: none; padding: 12px;
  }
  .portraet   { grid-area: bild;  width: 88px; margin-bottom: 0; }
  .trainer h3 { grid-area: name;  font-size: 16px; line-height: 1.2; }
  .unterzeile { grid-area: zeile; margin-bottom: 0; }
  .zitat      { grid-area: zitat; margin: 10px 0 0; }
  .mehr       { grid-area: knopf; margin-top: 10px; }

  /* Hoehe ist auf dem Handy die knappe Groesse, nicht die Breite. Drei
     gestapelte Karten ergaben 1074 px auf 622 px verfuegbarer Flaeche.
     Das Zitat erscheint deshalb erst beim Aufklappen. */
  /* Das Zitat bleibt auf dem Handy immer aus. Vorher war es nur bei
     geschlossener Karte aus - sobald eine Karte sich drehte, wuchs ihre
     unsichtbare Vorderseite um 53 Pixel und schob die Reihe. */
  .zitat { display: none; }

  .lage-breit { top: 50%; }
}


/* ===================================================================
   LISTE, ZAEHLER, LAUFBAND
   =================================================================== */
.art-liste { display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px); }
.listenzeile {
  display: flex; gap: clamp(10px, 1.2vw, 18px); align-items: baseline;
  justify-content: center; text-align: left;
}
.schlagwort {
  flex: 0 0 auto; min-width: 5.5em;
  font-size: clamp(11px, 1vw, 13px); letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.listentext {
  font-size: clamp(13px, 1.25vw, 17px); line-height: 1.45; color: var(--creme);
}

.art-zaehler::before { content: none; }
.zaehlerreihe {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 54px);
  max-width: 920px; margin: 0 auto; text-align: center;
}
.zaehler { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zahl {
  font-size: clamp(38px, 6vw, 86px); line-height: 1;
  letter-spacing: .02em; color: var(--creme);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 34px rgba(0,0,0,.8);
}
.einheit {
  font-size: clamp(12px, 1.3vw, 18px); letter-spacing: .2em;
  color: var(--gold); margin-top: -4px; min-height: 1em;
}
.zaehlertitel {
  margin-top: 10px;
  font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .16em;
  text-transform: uppercase; color: var(--creme);
}
.zaehlerzeile { font-size: clamp(11px, 1vw, 13px); color: var(--gold-matt); }

.art-laufband::before { content: none; }
.laufband { overflow: hidden; width: 100%; }
.band {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px);
  white-space: nowrap; will-change: transform;
}
.bandwort {
  font-size: clamp(22px, 4.2vw, 58px); letter-spacing: .07em;
  text-transform: uppercase; color: var(--creme);
  text-shadow: 0 4px 30px rgba(0,0,0,.8);
}
.bandpunkt { font-size: clamp(18px, 3vw, 40px); color: var(--gold); }
.bandtitel {
  margin-top: clamp(16px, 2vw, 28px); text-align: center;
  font-size: clamp(13px, 1.5vw, 19px); letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}

@media (max-width: 760px) {
  .zaehlerreihe { grid-template-columns: 1fr; gap: 26px; }
  .listenzeile { flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; }
  .art-liste { align-items: flex-start; }
}

/* ===================================================================
   DREI SCHRITTE
   =================================================================== */
.art-schritte::before { content: none; }
.art-schritte h1, .art-schritte h2 { text-align: center; margin-bottom: clamp(20px, 2.6vw, 40px); }
.schritte {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 32px); max-width: 1060px; margin: 0 auto;
}
.schritte li {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(16px, 1.8vw, 26px);
  border: 1px solid var(--rand); border-radius: 3px;
  background: linear-gradient(to bottom, rgba(14,12,10,.86), rgba(8,7,6,.92));
}
.nr {
  font-size: clamp(11px, 1vw, 13px); letter-spacing: .3em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.schritttitel {
  font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .04em; color: var(--creme);
}
.schritttext { font-size: clamp(12px, 1.1vw, 15px); line-height: 1.5; color: #cdbb95; }

/* ===================================================================
   ANMELDUNG
   =================================================================== */
.art-formular::before { content: none; }
/* "76 Plaetze frei" stand frueher ausserhalb des Formularkastens direkt
   auf dem Bild. Seit der neue Kettlebell-Take dort einen hellen Palast-
   schein hat (hellste 5 Prozent bei 205), war die Zeile nicht mehr zu
   lesen. Kopfzeile und Formular bilden jetzt eine Karte mit festem Grund. */
.anmeldung {
  max-width: 560px; margin: 0 auto;
  background: linear-gradient(to bottom, rgba(14,12,10,.93), rgba(8,7,6,.96));
  border: 1px solid var(--rand); border-radius: 3px;
  padding: clamp(16px, 1.8vw, 24px);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
.plaetze {
  text-align: center; color: var(--weiss);
  font-size: clamp(13px, 1.3vw, 17px);
  padding-bottom: clamp(12px, 1.4vw, 18px);
  border-bottom: 1px solid var(--rand);
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
.freizahl {
  font-size: clamp(30px, 4.4vw, 56px); color: var(--gold);
  font-variant-numeric: tabular-nums; margin-right: .25em;
  vertical-align: -.08em;
}
.anfrage {
  display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 16px);
  padding: 0;
}
.feld { display: flex; flex-direction: column; gap: 6px; }
.feldname {
  font-size: clamp(10px, .92vw, 12px); letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.anfrage input, .anfrage textarea {
  font: inherit; font-size: clamp(13px, 1.15vw, 16px);
  color: var(--creme); background: rgba(0,0,0,.42);
  border: 1px solid var(--rand); border-radius: 2px;
  padding: 11px 13px; min-height: 46px; width: 100%;
  transition: border-color .25s ease, background .25s ease;
}
.anfrage textarea { min-height: 92px; resize: vertical; }
.anfrage input:focus, .anfrage textarea:focus {
  outline: none; border-color: rgba(200,171,116,.6); background: rgba(0,0,0,.6);
}
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.absenden { margin-top: 4px; align-self: flex-start; min-height: 46px; }
.hinweiszeile { font-size: clamp(10px, .92vw, 12px); color: var(--gold-matt); line-height: 1.5; }
.hinweiszeile a { color: var(--creme); }
.meldung { font-size: clamp(12px, 1.05vw, 14px); line-height: 1.5; min-height: 1.2em; }
.meldung.gut { color: #9fd3a0; }
.meldung.schlecht { color: #e2a08c; }

@media (max-width: 860px) {
  .schritte { grid-template-columns: 1fr; gap: 10px; }
  .schritte li { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .schritttext { flex: 1 1 100%; }
  .absenden { align-self: stretch; justify-content: center; }
}

/* ===================================================================
   TERMINE UND COUNTDOWN
   =================================================================== */
.art-termine::before { content: none; }
.termine { max-width: 820px; margin: 0 auto; }

.countdown {
  border: 1px solid var(--rand); border-radius: 3px;
  background: linear-gradient(to bottom, rgba(14,12,10,.90), rgba(8,7,6,.94));
  padding: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
  text-align: center;
}
.naechstes {
  font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--creme);
  margin-bottom: clamp(12px, 1.5vw, 20px);
}
.naechstes .punkt { color: var(--gold); margin: 0 .3em; }
.uhr { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 24px); }
.einheit-block { display: flex; flex-direction: column; gap: 4px; }
.wert {
  font-size: clamp(28px, 4.6vw, 62px); line-height: 1;
  color: var(--creme); font-variant-numeric: tabular-nums;
}
.bezeichnung {
  font-size: clamp(9px, .88vw, 11px); letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-matt);
}

.terminliste { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.terminliste li {
  display: grid; grid-template-columns: 7.5em 1fr auto;
  gap: clamp(10px, 1.6vw, 24px); align-items: baseline;
  padding: clamp(11px, 1.3vw, 16px) clamp(13px, 1.5vw, 20px);
  background: rgba(10,9,8,.74);
  border: 1px solid var(--rand);
  border-radius: 2px;
}
.datum {
  font-size: clamp(11px, 1vw, 13px); letter-spacing: .1em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.termintitel { font-size: clamp(13px, 1.2vw, 16px); color: var(--creme); }
.plaetzefrei {
  font-size: clamp(10px, .95vw, 12px); letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-matt); white-space: nowrap;
}
.keintermin {
  text-align: center; font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.55; color: #cdbb95;
  border: 1px solid var(--rand); border-radius: 3px;
  padding: clamp(18px, 2vw, 28px);
  background: rgba(10,9,8,.8);
}

@media (max-width: 720px) {
  .terminliste li { grid-template-columns: 1fr auto; row-gap: 3px; }
  .datum { grid-column: 1 / -1; }
  .uhr { gap: 6px; }
}

/* ===================================================================
   TEXTSEITEN (Impressum, Datenschutz)
   Eigene Seiten ohne Bildstrecke, gleiche Hausschrift und Farben.
   =================================================================== */
body.textseite {
  height: auto; overflow-x: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(32,26,18,.55) 0%, rgba(7,7,6,0) 62%),
    var(--schwarz);
}
.textseite main {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--kopfhoehe) + clamp(40px, 7vw, 96px)) var(--gasse) clamp(90px, 12vw, 160px);
}
.textseite h1 {
  font-size: clamp(26px, 4.2vw, 48px); letter-spacing: .1em;
  text-transform: uppercase; color: var(--creme);
  margin-bottom: clamp(8px, 1.2vw, 14px);
}
.vorspann {
  font-size: clamp(12px, 1.1vw, 14px); color: var(--gold-matt);
  margin-bottom: clamp(30px, 4vw, 54px);
  padding-bottom: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--rand);
}
.textseite h2 {
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .06em;
  color: var(--creme); margin: clamp(30px, 4vw, 48px) 0 clamp(10px, 1.2vw, 14px);
}
.textseite h3 {
  font-size: clamp(12px, 1.15vw, 15px); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
  margin: clamp(20px, 2.6vw, 30px) 0 8px;
}
.textseite p, .textseite li {
  font-size: clamp(13px, 1.15vw, 16px); line-height: 1.65; color: #cdbb95;
}
.textseite p { margin-bottom: clamp(10px, 1.2vw, 14px); }
.textseite ul { margin: 0 0 clamp(10px, 1.2vw, 14px) 1.1em; }
.textseite li { margin-bottom: 5px; }
.textseite a { color: var(--creme); }
.textseite strong { color: var(--creme); font-weight: 600; }

/* Offene Stellen sollen auffallen, nicht untergehen. */
.luecke {
  display: inline-block;
  background: rgba(226,160,140,.14);
  border: 1px dashed rgba(226,160,140,.55);
  border-radius: 2px;
  padding: 1px 7px;
  color: #e2a08c;
  font-size: .94em;
}
.warnkasten {
  border: 1px solid rgba(226,160,140,.42);
  background: rgba(226,160,140,.08);
  border-radius: 3px;
  padding: clamp(14px, 1.8vw, 22px);
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.warnkasten p { color: #e2a08c; margin-bottom: 6px; }
.warnkasten p:last-child { margin-bottom: 0; }

.zurueck {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(34px, 4.4vw, 56px);
  min-height: 44px; padding: 0 18px;
  font-size: clamp(10px, .92vw, 12px); letter-spacing: .14em;
  text-transform: uppercase; color: var(--creme); text-decoration: none;
  border: 1px solid var(--rand); border-radius: 2px;
  transition: background .25s ease, border-color .25s ease;
}
.zurueck:hover, .zurueck:focus-visible { background: rgba(200,171,116,.1); border-color: rgba(200,171,116,.45); }

.textseite #kopf::before { opacity: .9; }
.textseite #fuss { position: static; background: none; padding-top: 0; }

/* ===================================================================
   DURCHGANG 06.10. — neue Bauteile
   =================================================================== */

/* ---------- Dauerband unter dem Menue (Punkt 17) --------------------
   Laeuft bewusst von allein. Es ist kein Teil der Inszenierung, sondern
   eine Dauerzeile mit den Pluspunkten, deshalb die Ausnahme von der
   Regel, dass sich ohne Scrollen nichts bewegt. */
#dauerband {
  position: fixed; left: 0; right: 0; top: var(--kopfhoehe); z-index: 8;
  overflow: hidden; pointer-events: none;
  padding: 7px 0;
  background: linear-gradient(to bottom, rgba(5,5,4,.62), rgba(5,5,4,.30) 70%, rgba(5,5,4,0));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
#dauerband .band {
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px);
  white-space: nowrap; width: max-content;
  animation: bandlauf 48s linear infinite;
  will-change: transform;
}
/* Die Folge steht zweimal im Band, bei -50 % springt sie zurueck.
   Dadurch ist die Schleife nahtlos, unabhaengig von der Fensterbreite. */
@keyframes bandlauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
#dauerband .bandwort {
  font-size: clamp(9px, .82vw, 11px); letter-spacing: .26em;
  text-transform: uppercase; color: rgba(255,255,255,.52);
  text-shadow: none;
}
#dauerband .bandpunkt { font-size: 11px; color: rgba(200,171,116,.7); }
@media (prefers-reduced-motion: reduce) {
  #dauerband .band { animation: none; }
}
@media (max-width: 720px) {
  #dauerband { padding: 5px 0; }
  #dauerband .band { animation-duration: 34s; }
}

/* ---------- Sachkarten (Punkt 13 und 17) ----------------------------
   Vorher eine enge Liste mittig im Bild, zu klein und schlecht lesbar.
   Als Karten ueber die freie Flaeche verteilt. */
.art-karten::before { content: none; }
.kartenfeld {
  display: grid; gap: clamp(10px, 1.4vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  max-width: 1180px; margin: 0 auto;
  align-items: stretch;
}
.sachkarte {
  background: linear-gradient(to bottom, rgba(12,11,9,.86), rgba(7,6,5,.93));
  border: 1px solid var(--rand); border-radius: 3px;
  padding: clamp(16px, 1.7vw, 26px);
  box-shadow: 0 18px 46px rgba(0,0,0,.48);
  backdrop-filter: blur(3px);
  display: flex; flex-direction: column; gap: 8px;
}
.sachtitel {
  font-size: clamp(13px, 1.15vw, 16px); letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold); font-weight: 600;
}
.sachtext {
  font-size: clamp(13px, 1.2vw, 16px); line-height: 1.55;
  color: var(--weiss-ab);
}

/* ---------- Zaehler in Boxen (Punkt 15) ----------------------------- */
.art-zaehler::before { content: none; }
.zaehlerreihe { gap: clamp(10px, 1.4vw, 20px); }
.zaehler {
  background: linear-gradient(to bottom, rgba(12,11,9,.86), rgba(7,6,5,.93));
  border: 1px solid var(--rand); border-radius: 3px;
  padding: clamp(18px, 2vw, 30px) clamp(12px, 1.4vw, 20px);
  box-shadow: 0 18px 46px rgba(0,0,0,.48);
  backdrop-filter: blur(3px);
}
.zaehlertitel { color: var(--weiss); }
.zaehlerzeile { color: var(--gold-matt); }

/* ---------- Beweisfotos mittiger (Punkt 23) -------------------------
   Vorher klebten Text und Stapel an den Aussenraendern. Jetzt stehen
   beide als Paar zusammen in der Bildmitte. */
.lage-paarlinks, .lage-paarrechts { top: 50%; translate: 0 -50%; }
.lage-paarlinks {
  left: 50%; margin-left: min(-560px, -44vw);
  width: min(400px, 34vw); max-width: none; text-align: right;
}
.lage-paarlinks .zeilen { align-items: flex-end; }
.lage-paarrechts { left: 50%; margin-left: clamp(-120px, -8vw, -60px); max-width: min(520px, 42vw); }
@media (min-width: 1500px) {
  .lage-paarlinks { margin-left: -660px; width: 420px; }
}
@media (max-width: 900px) {
  .lage-paarlinks, .lage-paarrechts {
    left: var(--gasse); right: var(--gasse); margin-left: 0;
    width: auto; max-width: none; text-align: center;
  }
  .lage-paarlinks .zeilen { align-items: center; }
}

/* ---------- Blaettern sichtbarer (Punkt 24) ------------------------- */
.stapelleiste { justify-content: center; margin-top: 4px; }
.blaettern {
  min-height: 52px; padding: 0 24px; gap: 14px;
  font-size: clamp(11px, .95vw, 13px); letter-spacing: .18em;
  color: var(--weiss);
  background: rgba(5,5,4,.74);
  border-color: rgba(200,171,116,.46);
  pointer-events: auto;
}
.blaettern .stapelzaehler { font-size: clamp(12px, 1.05vw, 15px); }
.blaettern b { color: var(--weiss); }

/* ---------- Termine lesbarer (Punkt 28) ----------------------------- */
/* ---------- Termine lesbarer (Punkt 28) -----------------------------
   Die Liste war kleinteilig: Datum 13 px, Titel 16 px, Plaetze 12 px.
   Alles eine Stufe groesser, mehr Luft je Zeile, Lesetext auf Weiss. */
.termine { max-width: 900px; }
.terminliste { gap: 6px; }
.terminliste li { padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px); }
.datum       { font-size: clamp(12px, 1.1vw, 15px); }
.termintitel { font-size: clamp(15px, 1.45vw, 20px); color: var(--weiss); }
.plaetzefrei { font-size: clamp(11px, 1.02vw, 13px); color: var(--gold); }
.naechstes   { font-size: clamp(12px, 1.15vw, 15px); color: var(--weiss-ab); }
.wert        { color: var(--weiss); }
.bezeichnung { font-size: clamp(10px, .95vw, 12px); }
.keintermin  { font-size: clamp(14px, 1.3vw, 18px); color: var(--weiss-ab); }

/* Auf dem Telefon darf der Titel umbrechen. Das nowrap von oben verhindert
   nur auf breiten Schirmen, dass "Das sind wir" dreizeilig bricht; bei
   375 px ragten "Special Events" und "Einer von 100" damit aus dem Bild. */
@media (max-width: 720px) {
  .akttitel { white-space: normal; }
  .art-titel { max-width: none; }
}


/* ===================================================================
   SPRUNGLINK, MENUE AUF DEM TELEFON, FORTSCHRITT
   =================================================================== */

/* Liegt ausserhalb des Bildes, bis ihn jemand mit der Tabulatortaste
   erreicht. Dann springt er sichtbar herein. */
#sprung {
  position: fixed; z-index: 60;
  left: 50%; top: 0; transform: translate(-50%, -140%);
  padding: 12px 22px;
  background: var(--creme); color: var(--schwarz);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-radius: 0 0 2px 2px;
  transition: transform .2s ease;
}
#sprung:focus { transform: translate(-50%, 0); outline: none; }

/* ---------- Burger ---------- */
#menueknopf {
  display: none;             /* nur auf dem Telefon */
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  position: relative; flex: 0 0 auto;
  order: 3;                  /* immer ganz rechts, hinter dem Tonknopf */
}
#menueknopf .balken {
  position: absolute; left: 11px; right: 11px; height: 1px;
  background: var(--creme);
  transition: transform .3s ease, opacity .3s ease;
}
#menueknopf .balken:nth-child(1) { top: 19px; }
#menueknopf .balken:nth-child(2) { top: 25px; }
#menueknopf.auf .balken:nth-child(1) { transform: translateY(3px) rotate(45deg); }
#menueknopf.auf .balken:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
#menueknopf:focus-visible { outline: 1px solid rgba(200,171,116,.6); outline-offset: 2px; }

/* ---------- Das aufgeklappte Feld ---------- */
#menuefeld {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  /* Deckend. Bei 97 Prozent schimmerten Marke, Fusszeile und der
     Scrollhinweis durch und das las sich wie ein Fehler, nicht wie
     Absicht. */
  background: #060605;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
#menuefeld.auf { opacity: 1; visibility: visible; }
#menueliste {
  display: flex; flex-direction: column; gap: 4px;
  text-align: center; padding: 0 var(--gasse);
}
.menuegross {
  display: block;
  padding: 13px 10px;
  font-size: clamp(20px, 6.4vw, 28px);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--creme); text-decoration: none;
}
.menuegross.knopf {
  margin-top: 18px; height: 50px;
  font-size: 12px; letter-spacing: .115em;
  color: var(--schwarz);
}
.menuegross:focus-visible { outline: 1px solid rgba(200,171,116,.6); outline-offset: 2px; }

/* ---------- Fortschritt ---------- */
#fortschritt {
  position: fixed; z-index: 12;
  left: 0; right: 0; top: 0; height: 2px;
  background: rgba(200,171,116,.12);
  pointer-events: none;
}
#fortschrittlinie {
  display: block; height: 100%; width: 0;
  background: linear-gradient(to right, rgba(200,171,116,.5), var(--gold));
  transform-origin: left center;
}

/* Solange das Menue offen ist, steht die Kopfzeile darueber: Marke,
   Tonknopf und das Kreuz zum Schliessen bleiben scharf statt durch die
   Flaeche zu schimmern. */
body.menueauf #kopf { z-index: 45; }
body.menueauf #dauerband { opacity: 0; transition: opacity .2s ease; }

@media (max-width: 720px) {
  #menueknopf { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  #menuefeld, #menueknopf .balken, #sprung { transition: none; }
}

/* Der Schritt zurueck steht schmal neben dem Blaettern-Knopf. */
.stapelleiste { gap: 8px; }
.blaettern.schmal { padding: 0 16px; gap: 0; }
.blaettern .pfeil { font-size: 1.35em; line-height: 1; color: var(--gold); }