/* ============================================================
   INTRO-FILM
   Eine Fahrt durchs Jahr: Die Straße läuft auf den Betrachter zu, die
   Landschaft zieht in Ebenen vorbei, der Himmel wandert durch die
   Jahreszeiten. Alles erzeugt — kein Videomaterial nötig.

   Sobald eine echte Videodatei unter /medien/intro.mp4 liegt, übernimmt
   sie: das <video> legt sich darüber und die Szene wird zum Rückfall.
   ============================================================ */

.buehne{
  position:relative;
  /* `min-height`, nicht `height`: Die Buehne darf ueber den Bildschirm
     hinauswachsen, wenn ihr Inhalt mehr braucht. Frueher tat er das — mit
     fester Hoehe schob sich der Text unter das Mautband und verlor seine
     Klicks an dessen Kasten.

     Von 96vh/860 auf 84vh/740 zurueckgenommen, seit der Textblock entfallen
     ist: Die Buehne hielt Hoehe fuer Leitspruch, Vorspann, zwei Knoepfe und
     zwei Hinweiszeilen frei, und die gibt es nicht mehr. Sie ganz an den
     Inhalt zu binden waere falsch — die Karte IST der Inhalt, und die
     braucht Flaeche. 740 lassen das Schild atmen und geben die Zeile
     darunter frueher frei. */
  min-height:min(84vh,740px);
  overflow:hidden;
  background:#08131B;
  isolation:isolate;
  /* Spalte statt Überlagerung: Inhalt oben, Mautband unten. Vorher lag das
     Band absolut über der Bühne, und ein fester Fußabstand am Inhalt hielt
     ihm Platz frei — 148 Pixel für ein Band, das damals 125 hoch war.

     Mit der Bilanzzeile wuchs es auf 151 und schob sich über die Knöpfe.
     Sichtbar war davon nichts; nur die Klicks kamen nicht mehr an. Eine
     Zahl, die zur Höhe eines anderen Elements passen muss, ist eine
     Verabredung, an die sich niemand erinnert. */
  display:flex;
  flex-direction:column;
}
.buehne-film{position:absolute;inset:0;z-index:0}
.buehne-film svg,
.buehne-film video{width:100%;height:100%;display:block;object-fit:cover}

/* Das echte Video liegt darüber und blendet sich ein, wenn es abspielt */
#introVideo{position:absolute;inset:0;opacity:0;transition:opacity 1var(--d-kurz) ease;z-index:1}
#introVideo.laeuft{opacity:1}

/* Abdunkelung, damit der Text unter allen Jahreszeiten lesbar bleibt */
.buehne::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,19,25,.72) 0%, rgba(14,19,25,.30) 34%, rgba(14,19,25,.55) 72%, var(--nacht) 100%),
    radial-gradient(120% 80% at 15% 60%, rgba(14,19,25,.55), transparent 70%);
}

/* ---------- Der Grundriss der Bühne ----------
   Eine Spalte. Es waren zwei: links der Satz und die Wege, rechts das
   Schild — die Entscheidung links im Kopf, die Tafel rechts über der
   Fahrbahn. Der Textblock ist am 17.08. entfallen, und eine Rasterspalte
   für nichts ist keine Spalte.

   Das Raster bleibt trotzdem stehen, obwohl nur noch die Tafel darin
   liegt. Es hat zwei Aufgaben, die nichts mit dem Textblock zu tun hatten:
   Es begrenzt die Breite auf `--w` und ist mit `position:relative` der
   Bezugsrahmen, gegen den `mitteSetzen` in start.js die Tafel auf die
   Kartenmitte rechnet. Nähme man es heraus, richtete sie sich an der Bühne
   aus, und die ist 340 Pixel breiter. */
.buehne-raster{
  position:relative;z-index:3;
  flex:1;width:100%;max-width:var(--w);margin:0 auto;padding:0 28px 28px;
  display:grid;grid-template-columns:1fr;
  align-items:center;justify-items:center;gap:var(--a9);
}

@media(max-width:1080px){
  /* Ab hier liegt die Tafel im Fluss statt auf der Kartenmitte
     (`mitteSetzen` gibt sie unterhalb von 1080 Pixeln frei). Sie steht
     dann mittig statt links: Ohne Text daneben gibt es keine Kante mehr,
     an der sie sich ausrichten müsste. */
  .buehne-raster{gap:var(--a7);align-content:center}
  .bsp-tafel{max-width:520px}
}

/* ---------- Die Bedienung oben rechts ----------
   Zwei Schalter für dasselbe Bild — Jahreszeit und Reisevorschlag —, also
   eine Spalte statt zweier Fundstellen. Rechtsbündig, weil die Plakette
   ihre Breite vom Text bezieht und der Blätterer von der Zahl der Punkte:
   Links ausgerichtet flösse die eine Kante mal so, mal so.

   z-index 4, nicht 3: `.buehne-inhalt` steht ebenfalls auf 3 und kommt im
   Markup später — bei gleichem Wert gewinnt das spätere Element. Es spannt
   sich über die ganze Bühne und läge damit über der Bedienung. Als Anzeige
   war das gleichgültig, als Knopf verschluckte es jeden Klick. */
.buehne-steuer{
  position:absolute;right:28px;top:24px;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}

/* ---------- Jahreszeit-Anzeige im Film ----------
   Ein <button>: über der Karte schaltet die Plakette die Jahreszeit weiter.
   In der gezeichneten Fahrt ist sie abgeschaltet (`disabled`), dort läuft
   die Jahreszeit mit dem Film. */
.film-marke{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(237,241,245,.72);
  background:rgba(14,19,25,.5);border:1px solid rgba(237,241,245,.16);
  border-radius:var(--r-pille);padding:7px 15px;backdrop-filter:blur(6px);
  appearance:none;cursor:pointer;
  transition:var(--d-tupf) var(--k-beides);
}
/* Sie sieht aus wie ein Schild und ist eine Bedienung — der Unterschied
   muss beim Darüberfahren sichtbar werden, sonst probiert es niemand. */
.film-marke:hover:not([disabled]){
  color:rgba(237,241,245,.95);border-color:rgba(237,241,245,.36);
  background:rgba(14,19,25,.68);
}
.film-marke:focus-visible{outline:2px solid var(--schild);outline-offset:3px}
.film-marke:active:not([disabled]){transform:translateY(1px)}
.film-marke[disabled]{cursor:default}
/* Fingerbedienung: 44 Pixel hängen an `pointer:coarse`, nicht an der
   Breite — ein Tablet im Querformat ist breit und wird trotzdem angetippt. */
@media (pointer:coarse){ .film-marke{min-height:44px} }
.film-marke i{
  width:7px;height:7px;border-radius:50%;background:var(--peage);
  animation:markePulsen 2.4s ease-in-out infinite;
}
@keyframes markePulsen{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}

/* Das Zeichen der Jahreszeit steht anstelle des Punktes, wenn die Karte
   läuft: Die Karte fährt nicht durchs Jahr, da hat ein pulsender Punkt
   nichts anzuzeigen. Etwas größer als die Schrift, weil ein ☀ auf 11 Punkt
   nur noch ein Fleck ist. */
.film-marke .marke-jz{font-size:14px;line-height:1;letter-spacing:0}

/* Die Erlebnisse der Jahreszeit, abgesetzt durch einen Strich: links steht,
   wann man fährt, rechts, wofür man anhält.

   Bewusst in der Textfarbe und nicht in Grün oder Bernstein — die beiden
   Farben bedeuten auf dieser Seite „kostenlos" und „kostet Maut". Ein
   grüner Gipfel würde behaupten, er sei mautfrei. */
.film-marke .marke-erl{
  display:flex;align-items:center;gap:8px;
  padding-left:11px;border-left:1px solid rgba(237,241,245,.18);
  font-size:14px;line-height:1;letter-spacing:0;color:rgba(237,241,245,.92);
}

/* ============================================================
   Bewegung im Film
   ============================================================ */

/* Der Himmel wandert durch die vier Jahreszeiten — 32 s für einen Umlauf */
@keyframes jahreslauf{
  0%,18%   { opacity:1 }      /* eigene Jahreszeit sichtbar */
  25%,93%  { opacity:0 }
  100%     { opacity:1 }
}
.saison{position:absolute;inset:0;opacity:0}
.saison-winter   { animation:jahreslauf 32s linear infinite;   animation-delay:0s }
.saison-fruehling{ animation:jahreslauf 32s linear infinite;   animation-delay:-24s }
.saison-sommer   { animation:jahreslauf 32s linear infinite;   animation-delay:-16s }
.saison-herbst   { animation:jahreslauf 32s linear infinite;   animation-delay:-8s }

/* Fahrbahnmarkierung rauscht auf den Betrachter zu */
@keyframes fahren{ from{ stroke-dashoffset:0 } to{ stroke-dashoffset:-340 } }
.mittelstreifen{animation:fahren 1.15s linear infinite}
.mittelstreifen.langsam{animation-duration:2.3s}

/* Landschaftsebenen ziehen unterschiedlich schnell — Tiefenwirkung.

   Der Weg ist genau eine Bühnenbreite. Das ist keine beliebige Zahl: Die
   Ebenen zeichnen ihren Inhalt zweimal nebeneinander (siehe `kacheln` in
   intro.js), jede Kachel exakt so breit. Beim Rücksprung liegt Kachel 2
   dann dort, wo eben Kachel 1 stand — dasselbe Bild, kein sichtbarer Ruck.
   Wer diesen Wert ändert, muss SCHUB in intro.js mitändern.

   Eine nahe Baumebene gibt es nicht mehr: Sie müsste zwangsläufig durch die
   stillstehende Fahrbahn laufen. Bäume stehen jetzt fest in der Landschaft
   und halten Abstand zur Straße. */
@keyframes vorbei{ from{ transform:translateX(0) } to{ transform:translateX(-1600px) } }
.ebene-fern  { animation:vorbei 66s linear infinite }
.ebene-mitte { animation:vorbei 34s linear infinite }

/* Schilder kommen aus der Ferne und wachsen heran */
@keyframes heranfahren{
  from{ transform:translate(0,0) scale(.12); opacity:0 }
  12% { opacity:1 }
  85% { opacity:1 }
  to  { transform:translate(-360px,190px) scale(2.4); opacity:0 }
}
.schild-fahrt{animation:heranfahren 7s cubic-bezier(.55,0,.85,.5) infinite}
.schild-fahrt.b{animation-delay:-2.4s}
.schild-fahrt.c{animation-delay:-4.8s}

/* Schneeflocken nur in der Winterphase */
@keyframes fallen{
  from{ transform:translateY(-20px) translateX(0); opacity:0 }
  15% { opacity:.85 }
  to  { transform:translateY(560px) translateX(46px); opacity:0 }
}
.film-flocke{animation:fallen linear infinite}

/* Sonne pulsiert leicht */
@keyframes glimmen{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.film-sonne{animation:glimmen 7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}

/* Wolken. Das Ziel liegt hinter dem rechten Bildrand (1600) plus der
   größten Wolkenbreite — vorher endete der Lauf bei 1180, also mitten im
   Bild: Die Wolke verschwand dort und tauchte links wieder auf. */
@keyframes treiben{from{transform:translateX(-260px)}to{transform:translateX(1880px)}}
.film-wolke{animation:treiben linear infinite}

/* Hier stand der Textblock der Buehne: Leitspruch, Vorspann, die beiden
   Knoepfe und zwei Hinweiszeilen. Er ist am 17.08. entfallen — die Buehne
   zeigt die Karte und das Schild darauf, sonst nichts.

   Mit ihm gehen `.buehne h1`, `.buehne .lead`, `.buehne-tat`,
   `.buehne-wegweiser` und `.buehne-note`. Keine dieser Regeln hat ein
   zweites Ziel: `.lead` und `.eyebrow` gibt es auch auf anderen Seiten,
   aber die Regeln hier waren auf `.buehne` eingegrenzt und trafen dort
   nichts mehr. */

/* Kurze Fenster. Die Regeln galten einmal vor allem der Schlagzeile: Sie
   skalierte mit `vw`, und ein 1280x720-Laptop bekam dieselbe 107-Pixel-
   Ueberschrift wie ein doppelt so hoher Monitor. Die Schlagzeile ist
   entfallen; was bleibt, ist das Schild — auf einem flachen Fenster darf
   es enger stehen, sonst reicht die Hoehe fuer vier Zeilen nicht. */
@media (max-height:820px){
  .wegweiser-ziele{padding-top:8px;padding-bottom:14px}
  .wegweiser-zeile{padding:6px 0}
}

/* ---------- Das Mautband als Fußleiste des Schildes ----------
   Es zeigt dieselbe Fahrt wie die Zeilen darüber, nur als Streifen: grün,
   wo sie nichts kostet, bernstein, wo sie zahlt. Beim Laden füllt es sich
   von links nach rechts, und solange das grüne Stück läuft, steht die
   Summe auf 0 €. Diese Pause ist die Aussage der ganzen Seite — sie muss
   niemand behaupten, man sieht sie.

   Es sitzt im Schild und nicht daneben: Zwei Objekte, die dieselbe Runde
   zeigen, waren eines zu viel. */
.mautband{
  position:relative;z-index:3;
  /* Innerhalb der weissen Innenlinie, nicht darunter hindurch: Sie laeuft
     mit neun Punkten Abstand zur Aussenkante des Schildes, das Band lag
     mit seinem Grund darueber hinaus. Auf dem Telefon blieb darunter ein
     blauer Streifen stehen, der wie ein Rest aussah. */
  margin:0 9px 9px;padding:12px 12px 13px;
  background:var(--wegweiser-kante);
  border-radius:var(--r-klein);
}
.band-kopf{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.band-etikett{
  font-family:var(--ff-display);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,241,245,.62);
}
.band-summe{
  font-family:var(--ff-display);
  font-size:20px;line-height:1;letter-spacing:-.01em;
  color:var(--peage);font-variant-numeric:tabular-nums;
}
.band-summe.null{color:var(--frei)}
.band-km{margin-left:auto;font-family:var(--ff-mono);font-size:11px;color:rgba(237,241,245,.7)}

.band-spur{
  position:relative;height:26px;border-radius:var(--r-fein);overflow:hidden;
  background:rgba(14,19,25,.45);border:1px solid rgba(237,241,245,.35);
}
.band-stuecke{position:absolute;inset:0;display:flex}
.band-stueck{
  position:relative;height:100%;
  display:flex;align-items:center;justify-content:center;
  border-right:1px solid rgba(14,19,25,.35);
}
.band-stueck:last-child{border-right:0}
/* Auf der blauen Tafel muss der Streifen selbst tragen — eine
   zwanzigprozentige Tönung verschwände darauf. Die Ländercodes stehen
   deshalb in der Farbe des Schildgrunds, nicht in Weiß. */
.band-stueck.frei{background:var(--frei)}
.band-stueck.maut{background:var(--peage)}
.band-code{
  font-family:var(--ff-display);font-size:10px;letter-spacing:.14em;
  color:rgba(14,19,25,.72);white-space:nowrap;overflow:hidden;
}
/* Der Schleier deckt ab, was noch nicht „gefahren" ist. */
.band-schleier{
  position:absolute;top:0;bottom:0;right:0;
  background:rgba(15,39,69,.9);
  border-left:1px solid rgba(237,241,245,.28);
  pointer-events:none;
}
.band-nadel{
  position:absolute;top:-4px;bottom:-4px;width:2px;
  background:var(--text);pointer-events:none;opacity:0;
  box-shadow:0 0 12px rgba(237,241,245,.7);
}
.band-nadel.laeuft{opacity:1}

/* Die Skala unter dem Streifen ist entfallen: Start und Ziel stehen in
   den Zeilen des Schildes darüber, und der Kilometerstand läuft im Kopf
   des Bandes mit. */

@media(max-width:640px){
  /* Auf dem Telefon steht die Bühne nicht mehr fest gerahmt, sondern
     wächst mit ihrem Inhalt, und das Band läuft im Fluss mit. */
  .buehne{height:auto;min-height:auto;padding:18px 0 0}

  /* Hier standen fünf Regeln, die Augenbraue, Leitspruch, Schlagzeile,
     Vorspann und Notizzeile enger setzten, damit das Mautband noch in den
     ersten Bildschirm passte. Ohne den Textblock ist dafür nichts mehr zu
     tun: Das Band steht ganz oben.

     Was stattdessen zu tun war: die Abstände darunter wegnehmen. Sie
     hielten Luft zwischen dem letzten Absatz und dem nächsten Abschnitt —
     ohne Absatz war daraus eine Lücke von gut hundert Punkten unter dem
     Schild geworden. Drei Angaben addierten sich dort: der Fußabstand der
     Bühne, der des Rasters und der des Mautbands. */
  .buehne-raster{padding:0 18px 18px}

  /* Seit die Bühne eine Spalte ist, läuft das Band ohnehin im Fluss mit —
     hier bleibt nur der engere Rand. */
  .mautband{padding:0 18px;margin-bottom:0;max-width:none}
  .film-marke{display:none}
  .band-spur{height:38px}
  /* Auf 390 Pixeln bleibt für vier Ländercodes kein Platz — der Streifen
     erzählt die Geschichte auch ohne sie, über Farbe und Länge. */
  .band-code{display:none}
  .band-skala span:last-child{display:none}
}

@media(prefers-reduced-motion:reduce){
  .buehne-film *{animation:none !important}
  .saison-sommer{opacity:1}
  .saison-winter,.saison-fruehling,.saison-herbst{opacity:0}
  #introVideo{display:none}
}

/* ============================================================
   KARTEN-INTRO (intro-karte.js)

   Zwei Bewegungen, die nichts miteinander zu tun haben:
   `zieht` läuft genau einmal — die Linie entsteht. `laeufer` läuft danach
   für immer, und zwar ohne Naht, weil die Route eine geschlossene Schleife
   ist: Der Punkt, an dem das Licht ankommt, ist der, an dem es startet.

   Die Längen stehen als --laenge am Element, weil sie aus den echten
   Koordinaten gerechnet werden und im Stylesheet nicht bekannt sein können.
   ============================================================ */
@keyframes strichZiehen { from { stroke-dashoffset: var(--laenge) } to { stroke-dashoffset: 0 } }
@keyframes strichLaufen { from { stroke-dashoffset: 0 } to { stroke-dashoffset: calc(-1 * var(--laenge) * 1px) } }
@keyframes auftauchen   { from { opacity: 0; transform: scale(.86) } to { opacity: 1; transform: none } }
@keyframes pulsRing     { from { opacity:.9; r:6.5 } to { opacity:0; r:26 } }

.zieht {
  stroke-dasharray: var(--laenge);
  stroke-dashoffset: var(--laenge);
  animation: strichZiehen linear forwards;
}
.laeufer {
  opacity: 0;
  animation: strichLaufen linear infinite, laeuferAn .8s ease forwards;
  animation-delay: inherit;
}
@keyframes laeuferAn { to { opacity: .85 } }

.ort {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: auftauchen .5s cubic-bezier(.22,1,.36,1) forwards;
}
.peage { opacity: 0; animation: auftauchen .6s ease forwards }
.peage-puls { animation: pulsRing 2.6s ease-out infinite }

/* Ohne Bewegung: alles fertig gezeichnet, nichts läuft. Die Aussage steht
   dann in den Farben, nicht im Ablauf. */
@media (prefers-reduced-motion: reduce) {
  .zieht { stroke-dashoffset: 0; animation: none }
  .ort, .peage { opacity: 1; animation: none }
  .laeufer, .peage-puls { display: none }
}

/* `hidden` allein genügt hier nicht: .film-marke setzt display:flex, und
   das schlägt das Attribut. Die Karte braucht die Jahreszeit-Marke nicht. */
.film-marke[hidden]{display:none}

/* Die volle Bilanz neben dem Streifen. Der Zähler darüber zählt Maut —
   die Farben des Bandes bedeuten Maut, also darf er nichts anderes zeigen.
   Sprit und Summe gehören trotzdem dazu, nur eben getrennt. */
.band-bilanz{
  margin:7px 0 0;font-family:var(--ff-mono);font-size:12.5px;
  color:rgba(237,241,245,.62);letter-spacing:-.01em;
}
.band-bilanz b{color:rgba(237,241,245,.92);font-weight:400}
.band-bilanz span{color:rgba(237,241,245,.38)}
@media(max-width:640px){
  .band-bilanz{font-size:11px;line-height:1.45}
  /* Der Nachsatz „bei 7,0 l/100 km und 1,80 €/l" ist eine Fussnote zur
     Fussnote. Auf 390 Punkten kostet er drei Zeilen im Schild und sagt
     nichts, was die Zahl davor nicht schon gesagt haette. */
  .band-bilanz span{display:none}
}




/* ---------- Der Wegweiser der Bühne kommt näher ----------
   Das Bauteil selbst steht in bausteine.css; hier steht nur, was die
   Startseite damit tut. In Ruhe steht die Tafel klein am Rand, beim
   Überfahren wächst sie auf volle Größe — ein Schild wird größer, wenn
   man auf es zufährt. Es bewegt sich nicht, man nähert sich ihm.

   Der Ankerpunkt liegt in der Mitte: Die Tafel sitzt auf der Mitte des
   Kartenfelds (gesetzt in start.js), und beim Schrumpfen soll sie dort
   bleiben. Mit einem Anker am Rand wäre sie in Ruhe verrutscht. */
/* Verkleinert wird die Hülle, nicht die Tafel: Der Blätterer hängt am
   unteren Rand der Tafel und muss dieselbe Bewegung machen. Läge die
   Verkleinerung weiter auf `.wegweiser`, stünde er in voller Größe unter
   einem halbierten Schild, und dazwischen klaffte eine Lücke.

   `.bsp-blaetterer` liegt absolut und zählt deshalb nicht zur Höhe der
   Hülle. Das ist kein Zufall, sondern Bedingung: Die Mitte der Hülle muss
   die Mitte der Tafel bleiben, sonst sitzt sie nicht mehr auf der
   Kartenmitte (siehe mitteSetzen in start.js). */
.buehne .bsp-tafel{
  transform:scale(.52);
  transform-origin:50% 50%;
  opacity:.88;
  transition:transform var(--d-mittel) var(--k-ein),
             opacity   var(--d-kurz)   var(--k-beides);
  will-change:transform;
}
.mautband-weg:hover{text-decoration:none}
/* Nur die Tafel selbst löst die Vergrößerung aus — nicht der Blätterer
   oben rechts. Eine Zeit lang tat er es über `:has`, damit man beim
   Blättern lesen kann, was man blättert. Die Folge war schlimmer als das
   Problem: Ein Klick auf den Pfeil lässt den Fokus dort liegen, und damit
   stand die erste Karte klein da und jede weitere groß. Zehn Vorschläge,
   zwei Größen, und der Wechsel dazwischen ein Sprung mitten im Bild.

   Wer lesen will, zeigt auf die Tafel; dafür ist sie da. `focus-within`
   und nicht `focus-visible`: Auch wer mit der Tastatur im Verweis steht,
   muss lesen können, was er gleich öffnet. */
.buehne .bsp-tafel:hover,
.buehne .bsp-tafel:focus-within{transform:scale(1);opacity:1}

/* Mit dem Finger gibt es kein Darüberfahren, und wer Bewegung abbestellt
   hat, soll nicht auf eine Animation angewiesen sein, um lesen zu können.
   In beiden Fällen steht die Tafel von vornherein in voller Größe. */
@media (pointer:coarse){ .buehne .bsp-tafel{transform:none;opacity:1} }
@media (prefers-reduced-motion:reduce){
  .buehne .bsp-tafel{transform:none;opacity:1;transition:none}
}

/* ---------- Der Blätterer unter der Plakette ----------
   Zehn Vorschläge, einer sichtbar. Er steht am Rand der Bühne und nicht
   auf dem Schild: Auf dem Schild wäre er Teil der Aussage — und ein Schild
   an der Autobahn hat keine Knöpfe. Er lag dort außerdem mitten im Bild
   und verdeckte die Karte, die er wechselt.

   Er sitzt jetzt in `.buehne-steuer` und braucht deshalb keine eigene
   Positionierung mehr: Die Hülle setzt ihn unter die Plakette, die Reihe
   selbst ist nur noch die Pille um Pfeile und Punkte. */
.bsp-tafel{position:relative}
.bsp-blaetterer{
  display:flex;align-items:center;gap:6px;
  padding:5px 7px;
  background:rgba(14,19,25,.5);border:1px solid rgba(237,241,245,.16);
  border-radius:var(--r-pille);backdrop-filter:blur(6px);
}

/* Name und Zähler stehen nur noch für die Vorlesestimme da. Nicht
   `display:none` und nicht `visibility:hidden` — beides nähme sie auch
   ihr weg. Stattdessen ein Pixel, aus dem Bild geschoben. */
.bsp-mitte{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.bsp-punkte{display:flex;align-items:center;gap:2px}
/* Der Knopf ist die Trefffläche, der Punkt darin ist das Bild. Sechs
   Pixel trifft keine Maus und erst recht kein Finger. */
.bsp-punkt{
  flex:none;width:14px;height:22px;
  display:grid;place-items:center;
  appearance:none;cursor:pointer;padding:0;
  background:transparent;border:0;border-radius:var(--r-klein);
  transition:width var(--d-tupf) var(--k-beides);
}
.bsp-punkt::before{
  content:"";display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(237,241,245,.34);
  transition:var(--d-tupf) var(--k-beides);
}
.bsp-punkt:hover::before{background:rgba(237,241,245,.72)}
/* Der laufende Vorschlag ist ein Strich, kein hellerer Punkt: Helligkeit
   allein unterscheidet zehn kleine Kreise zu schwach, Form tut es sofort. */
.bsp-punkt[aria-current="true"]{width:24px}
.bsp-punkt[aria-current="true"]::before{
  width:16px;height:6px;border-radius:var(--r-pille);background:var(--schild);
}
.bsp-punkt:focus-visible{outline:2px solid var(--schild);outline-offset:1px}

.bsp-pfeil{
  flex:none;width:26px;height:26px;
  display:grid;place-items:center;
  appearance:none;cursor:pointer;
  background:transparent;border:1px solid rgba(237,241,245,.22);
  border-radius:50%;color:rgba(237,241,245,.8);
  transition:var(--d-tupf) var(--k-beides);
}
.bsp-pfeil svg{width:14px;height:14px}
.bsp-pfeil:hover{color:#fff;border-color:rgba(237,241,245,.5);background:rgba(237,241,245,.08)}
.bsp-pfeil:focus-visible{outline:2px solid var(--schild);outline-offset:2px}
.bsp-pfeil:active{transform:translateY(1px)}

/* Sobald die Bühne einspaltig wird, steht die Tafel ganz oben — und eine
   absolut gesetzte Bedienung läge auf ihr. Sie geht deshalb in den Fluss
   und bleibt rechtsbündig: derselbe Platz im Blick, nur ohne Überlagerung.

   `align-self` und nicht `margin-left:auto`: Die Bühne ist eine Flex-Spalte,
   und dort ist das die Kante, nicht die Breite. */
@media(max-width:1080px){
  .buehne-steuer{
    position:relative;right:auto;top:auto;
    align-self:flex-end;margin:18px 28px 0;
  }
}
@media(max-width:640px){ .buehne-steuer{margin:0 18px 0} }

@media (pointer:coarse){
  /* 44 Pixel, weil hier ein Finger tippt — dieselbe Regel wie bei der
     Plakette über der Karte. Die Punkte werden dafür nur höher, nicht
     breiter: Zehn Stück mal 44 Pixel wären breiter als das Schild. */
  .bsp-pfeil{width:44px;height:44px}
  .bsp-pfeil svg{width:16px;height:16px}
  .bsp-punkt{width:18px;height:44px}
  .bsp-punkt[aria-current="true"]{width:28px}
}