/* Presenter — Umsetzung des Designs "Thömus Kiosk" (Claude Design).
 *
 * Grundmass ist der Entwurf: 1280 x 800 quer. Die Samsung-Tablets melden bei
 * 1920 x 1200 oder 2560 x 1600 genau dieselben CSS-Pixel, die Zahlen aus dem
 * Entwurf treffen also direkt. Wo es ohne Nachteil ging, ist das Layout
 * trotzdem fliessend statt fest.
 *
 * Farben und Schrift kommen aus design-system.css. Der Entwurf schreibt
 * dieselben Werte als Hex — hier stehen die Tokens.
 */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  /* Auf 18 Symbole zusammengeschnitten und selbst gehostet: 6,7 KB statt
     mehrerer Megabyte, und vor allem ohne Google — ein Kiosk ohne Netz haette
     sonst leere Kaesten statt Symbolen in der Menueleiste. */
  /* ?v erhoehen, wenn ein Symbol dazukommt — sonst behaelt ein Tablet die
     alte Schrift und zeigt statt des neuen Symbols dessen Namen als Text. */
  src: url('fonts/material-symbols-subset.ttf?v=4') format('truetype');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  font-variant-ligatures: normal;
}

/* SCHRIFTSTAERKE: hoechstens Bold (700), kein Black und kein ExtraBold.
   Die grossen Bike-Namen stehen in SemiBold (600) — je groesser der Schriftgrad,
   desto fetter wirkt dieselbe Staerke; 96px in Bold wurde zum Block. */

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

/* hidden heisst hidden.
 *
 * Der Browser gibt [hidden] nur ein schwaches "display: none" mit. Jede
 * Klassenregel mit eigenem display schlaegt es — so stand "Bild folgt"
 * dauerhaft ueber dem Hero-Bild, obwohl das Element als versteckt markiert war.
 * Diese Zeile raeumt die ganze Fehlerklasse aus dem Weg. */
[hidden] { display: none !important; }

html { background: var(--tho-black); }

:root {
  /* Einmal gerechnet, an drei Stellen gebraucht.
     env() NICHT in max() in calc() schachteln — der Parser verwirft die ganze
     Deklaration, die Variable kommt leer an und das inset faellt aus. Der
     Rueckfallwert im env() genuegt. */
  --menue-hoehe: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Schirme ohne Menueleiste bekommen die ganze Hoehe. */
body[data-schirm="start"],
body[data-schirm="ungewaehlt"],
body[data-schirm="anmelden"],
body[data-schirm="wahl"],
body[data-schirm="laden"] { --menue-hoehe: 0px; }

/* Die Seite fuellt den Bildschirm wirklich vollstaendig.
 *
 * "height: 100%" allein genuegt auf iOS nicht: in der Homescreen-App bleibt
 * unten ein Streifen, in dem der schwarze Untergrund des Systems durchscheint —
 * genau der Balken, der uns beschaeftigt hat. position:fixed mit inset:0 nagelt
 * die Seite an alle vier Kanten, unabhaengig davon, welche Hoehe der Browser
 * gerade meldet. */
html, body { margin: 0; height: 100%; overflow: hidden; }
/* dvh statt Prozent: auf iOS meldet der Browser mit "100%" gelegentlich eine
   kuerzere Hoehe als der Bildschirm hat — darunter bleibt ein Streifen. dvh
   bezieht sich auf den tatsaechlich sichtbaren Bereich. Der Prozentwert oben
   bleibt als Rueckfall fuer aeltere Browser stehen. */
html, body { height: 100dvh; }
/* Zusaetzlich zu inset:0 die Breite hart begrenzen: nichts darf breiter werden
   als der Bildschirm, sonst laesst sich die Seite seitlich schieben und es
   erscheinen weisse Raender. */
body { position: fixed; inset: 0; max-width: 100%; overflow: hidden; }
.buehne, .schirm { max-width: 100%; }

body {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  /* Auf einem Ausstellungsgeraet darf ein langer Druck weder Text markieren
     noch das Bildmenue oeffnen. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  /* "manipulation" nimmt dem Doppeltipp das Zoomen. Auf iOS noetig, weil
     Safari user-scalable=no seit iOS 10 ignoriert. */
  touch-action: manipulation;
  overscroll-behavior: none;
}

.buehne { position: relative; flex: 1; min-height: 0; }

/* Die Schirme enden ueber der fest sitzenden Menueleiste.
   Ein padding-bottom an der Buehne haette nichts genuetzt: absolut
   positionierte Kinder richten sich an deren Innenkante aus, nicht an der
   Polsterung — der Preis waere weiterhin unter der Leiste gelegen. */
.schirm { position: absolute; inset: 0 0 var(--menue-hoehe) 0; display: none; }
/* Der sichtbare Schirm bekommt hier seinen display-Wert — NICHT in der
   jeweiligen Klassenregel weiter unten. Stuende dort "display:grid", wuerde
   das gleich spezifische, aber spaetere `.schirm { display:none }`
   ueberschrieben und alle Schirme laegen uebereinander. */
body[data-schirm="start"]  .schirm[data-fuer="start"],
body[data-schirm="video"]  .schirm[data-fuer="video"],
body[data-schirm="fotos"]  .schirm[data-fuer="fotos"],
body[data-schirm="modell"] .schirm[data-fuer="modell"] { display: block; }

body[data-schirm="specs"] .schirm[data-fuer="specs"] { display: grid; }

body[data-schirm="laden"]         .schirm[data-fuer="laden"],
body[data-schirm="keine-station"] .schirm[data-fuer="keine-station"],
body[data-schirm="farben"]        .schirm[data-fuer="farben"],
body[data-schirm="mehr"]          .schirm[data-fuer="mehr"],
body[data-schirm="qr"]            .schirm[data-fuer="qr"] { display: flex; }

/* Eigener Hintergrund, statt sich auf den des Koerpers zu verlassen. */
.mitte {
  background: var(--color-bg);
  flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-6);
  padding: var(--space-12); text-align: center;
}
.hinweis       { font-size: var(--text-lg); color: var(--color-fg-subtle); margin: 0; }
.hinweis-gross { font-size: var(--text-2xl); font-weight: var(--fw-semibold); margin: 0; }

.platzhalter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-fg-muted); font-size: var(--text-lg);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}

/* ================= MENÜLEISTE ================= */

/* Fest an die Unterkante genagelt statt ans Ende des Flex-Layouts gehaengt.
   In der Homescreen-App reichte das Layout nicht bis zum unteren Rand, und
   darunter schien der Untergrund durch — der weisse Balken. Fixiert kann das
   nicht passieren, unabhaengig davon, welche Hoehe der Browser meldet. */
.menue {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(96px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--tho-black);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  /* Der 1px-Spalt zeigt den Hintergrund und wirkt als Trennlinie. */
  gap: 1px; background: var(--tho-gray-300);
}

/* Der Streifen fuer die Home-Geste gehoert an den KOERPER, nicht an die
   Menueleiste.
   Als Innenabstand der Leiste schien dort deren Hintergrund durch — und der ist
   die helle Farbe der Trennlinien zwischen den Knoepfen. Ergebnis war ein
   heller Balken unter dem Menue, in der Homescreen-App breiter als im Browser,
   weil dort der Streifen groesser ist. Am Koerper ist er schlicht schwarz. */
/* Nur die Beschriftung rueckt ueber den Home-Strich, der Knopf selbst fuellt
   ihn mit aus. max(): meldet das System nichts, bleibt es bei 0. */
.menue-knopf { padding-bottom: env(safe-area-inset-bottom, 0px); }
.offline-hinweis { bottom: calc(var(--menue-hoehe) + var(--space-4)); }

.menue-knopf {
  border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--color-bg); color: var(--tho-black);
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  /* Mit acht Punkten wird es eng: die Schrift schrumpft lieber leicht mit,
     als dass "Mehr erfahren" auf zwei Zeilen umbricht. */
  font-size: clamp(12px, 1.2vw, 15px);
  white-space: nowrap;
}
.menue-knopf i { font-size: 26px; }
.menue-knopf[data-aktiv="ja"] { background: var(--tho-black); color: var(--color-fg-inverted); }
.menue-knopf:active { background: var(--color-brand); color: var(--color-fg-inverted); }

/* Auf dem Start-Schirm ist die Menueleiste weg: er soll wie ein Plakat wirken,
   nicht wie eine App mit Reitern. Die Leiste erscheint erst nach der ersten
   Beruehrung — und verschwindet wieder, sobald es zurueck auf Start geht. */
body[data-schirm="start"] .menue { display: none; }

/* ================= START · ATTRACT ================= */

.start { background: var(--tho-black); }
.start-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Zwei Verlaeufe statt eines flaechigen Schleiers:
   von unten, damit der Text traegt — und ein leichter von oben fuers Logo.
   Die Bildmitte bleibt dabei fast unangetastet, dort steht die Action. */
.start-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(13,13,13,0.88) 0%, rgba(13,13,13,0.72) 22%,
                            rgba(13,13,13,0.18) 48%, rgba(13,13,13,0) 66%),
    linear-gradient(to bottom, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0) 22%);
}

/* Unten links statt in der Mitte: ein zentrierter Titel liegt je nach Foto
   genau auf dem Fahrer. Unten ist bei Action-Aufnahmen fast immer Boden. */
.start-inhalt {
  position: absolute; left: 56px; right: 56px; bottom: 48px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-align: left; pointer-events: none;
}
/* Das Logo steht oben und gehoert nicht in die senkrecht zentrierte Mitte —
   sonst wandert es mit der Textlaenge. */
.start-logo {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  width: 260px; z-index: 2;
}
.start-name {
  margin: 0; max-width: 60%;
  font-family: var(--font-display); font-size: 88px; font-weight: var(--fw-semibold);
  line-height: 1; letter-spacing: var(--ls-tight);
  text-transform: uppercase; color: var(--color-fg-inverted);
}
.start-tagline {
  margin: 0; max-width: 60%;
  font-size: 26px; font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--tho-gray-200);
}
.start-tagline:empty { display: none; }

.start-tippen {
  position: absolute; right: 56px; bottom: 48px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  pointer-events: none;
}
.start-tippen p {
  margin: 0; font-size: 20px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-fg-inverted);
  animation: glimmen 2.4s ease-in-out infinite;
}
.puls-ring {
  position: relative; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-fg-inverted); border-radius: 50%;
}
.puls-ring i { font-size: 36px; color: var(--color-fg-inverted); }
.puls-welle {
  position: absolute; inset: -2px;
  border: 2px solid var(--color-fg-inverted); border-radius: 50%;
  animation: pulsieren 2.4s ease-out infinite;
}
@keyframes pulsieren { 0% { transform: scale(1); opacity: 0.9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
@keyframes glimmen  { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ================= SPECS ================= */

/* 50/50, Specs links, Bike rechts. Der Entwurf hatte 640px links fuer das
   Bild — halbe/halbe liest sich auf dem Tablet ruhiger, und die Specs stehen
   dort, wo der Blick zuerst hinfaellt. */
.specs { grid-template-columns: 1fr 1fr; background: var(--color-bg); }

.specs-bild { position: relative; background: var(--color-bg-subtle); }
.specs-bild .logo { position: absolute; top: 24px; left: 32px; width: 150px; z-index: 2; }
.specs-bild-flaeche { position: absolute; inset: 80px 32px 104px 32px; }
.specs-bild-flaeche img { width: 100%; height: 100%; object-fit: contain; }

/* Weisser Knopf mit hartem schwarzem Rahmen — die Formensprache des Entwurfs. */
.rahmenknopf {
  position: absolute; bottom: 24px; left: 32px;
  height: 64px; padding: 0 28px;
  display: flex; align-items: center; gap: 12px;
  background: var(--color-bg); color: var(--tho-black);
  border: 2px solid var(--tho-black); cursor: pointer;
  font-family: var(--font-body); font-size: 17px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.rahmenknopf i { font-size: 28px; }
.rahmenknopf:active { background: var(--tho-black); color: var(--color-fg-inverted); }
.rahmenknopf[hidden] { display: none; }

.specs-text { display: flex; flex-direction: column; padding: 44px 52px 28px; min-height: 0; }

.abzeichen {
  align-self: flex-start; margin: 0;
  padding: 4px 12px; background: var(--color-brand); color: var(--color-fg-inverted);
  font-size: 14px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.abzeichen:empty { display: none; }

.bike-name {
  margin: 12px 0 0;
  font-family: var(--font-display); font-size: 58px; font-weight: var(--fw-semibold);
  line-height: 1.02; letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--tho-black);
}
.claim { margin: 10px 0 0; font-size: 21px; line-height: 1.35; color: var(--color-fg-subtle); }

.spec-gitter { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
.spec-gitter dt {
  font-size: 13px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-fg-subtle);
}
.spec-gitter dd { margin: 3px 0 0; font-size: 24px; font-weight: var(--fw-semibold); color: var(--tho-black); }

.preis-zeile {
  margin-top: auto; padding-top: 16px; border-top: 2px solid var(--tho-black);
  display: flex; align-items: baseline; gap: 16px;
}
.preis { font-family: var(--font-display); font-size: 52px; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--tho-black); }
.preis-zusatz { font-size: 16px; color: var(--color-fg-subtle); }

/* ================= VIDEO ================= */

.video { background: var(--tho-black); }
.video video { width: 100%; height: 100%; object-fit: contain; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Eigene Datei: eigene Bedienelemente. YouTube: gar keine eigenen — der
   Spieler zeigt sein eigenes Abspielsymbol auf dem Standbild, zwei
   uebereinander waeren nur verwirrend. */
body[data-videoart="youtube"] .video video,
body[data-videoart="youtube"] .video-leiste,
body[data-videoart="youtube"] .abspielen { display: none; }
body[data-videoart="datei"] .video iframe,
body[data-videoart="datei"] .video-offline { display: none; }

.video-offline {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--tho-black); color: var(--tho-gray-300); font-size: 22px;
}
.video-offline[hidden] { display: none; }

.abspielen {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 13, 13, 0.7); border: 2px solid var(--color-fg-inverted);
  color: var(--color-fg-inverted); cursor: pointer;
}
.abspielen i { font-size: 52px; }
body[data-video="laeuft"] .abspielen { display: none; }

.video-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  display: flex; align-items: center; gap: 28px; padding: 0 32px;
  background: rgba(13, 13, 13, 0.88);
}
.video-knopf { background: none; border: none; color: var(--color-fg-inverted); cursor: pointer; padding: 0; display: flex; }
.video-knopf i { font-size: 38px; }
.fortschritt { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.28); position: relative; cursor: pointer; }
.fortschritt-fuell { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--color-brand); }
.video-zeit { font-size: 19px; color: var(--color-fg-inverted); font-variant-numeric: tabular-nums; }

/* ================= FOTOS ================= */

.fotos { background: var(--tho-black); }
.foto-flaeche { position: absolute; inset: 0; }
.foto-flaeche img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 250ms var(--ease-out); pointer-events: none;
}
.foto-flaeche img[data-sichtbar="ja"] { opacity: 1; pointer-events: auto; }

.foto-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 13, 13, 0.72); border: none; color: var(--color-fg-inverted); cursor: pointer;
}
.foto-pfeil i { font-size: 48px; }
.foto-pfeil:active { background: var(--color-brand); }
.foto-pfeil.links  { left: 24px; }
.foto-pfeil.rechts { right: 24px; }

.foto-zaehler {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); margin: 0;
  background: rgba(13, 13, 13, 0.8); color: var(--color-fg-inverted);
  padding: 10px 24px; font-size: 22px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); font-variant-numeric: tabular-nums;
}

/* ================= FARBEN ================= */

.farben { background: var(--color-bg-subtle); flex-direction: column; }
.farb-flaeche { position: relative; flex: 1; min-height: 0; }
.farb-flaeche img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity 250ms var(--ease-out);
}
.farb-flaeche img[data-sichtbar="ja"] { opacity: 1; }

.farb-titel { position: absolute; top: 28px; left: 32px; pointer-events: none; }
.farb-eyebrow {
  margin: 0; font-size: 16px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-fg-subtle);
}
.farb-name {
  margin: 2px 0 0; font-family: var(--font-display); font-size: 34px; font-weight: var(--fw-bold);
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--tho-black);
}

/* Zwischen zwei und acht Farben je Bike. Der Abstand schrumpft mit,
   damit auch sechs Chips nebeneinander passen, ohne umzubrechen. */
.farb-chips {
  flex: none; height: 124px;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 4vw, 44px); padding: 0 24px;
  background: var(--color-bg); border-top: 1px solid var(--tho-gray-300);
  overflow-x: auto;
}
.farb-chip { flex: none; }
.farb-chip {
  background: none; border: none; cursor: pointer; padding: 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 16px; font-weight: var(--fw-semibold); color: var(--tho-black);
}
.farb-chip span.tupfer { width: 48px; height: 48px; display: block; border: 1px solid var(--tho-gray-300); }
.farb-chip[data-aktiv="ja"] span.tupfer { border: 3px solid var(--tho-black); }

/* ================= 3D ================= */

.modell { background: #f7f7f7; }
.modell-buehne { position: absolute; inset: 36px 70px; }
.modell-buehne canvas { display: block; width: 100%; height: 100%; }

.ecke-oben-rechts {
  position: absolute; top: 0; right: 0;
  height: 72px; padding: 0 30px;
  display: flex; align-items: center; gap: 14px;
  background: var(--color-bg); color: var(--tho-black);
  border: none; border-left: 2px solid var(--tho-black); border-bottom: 2px solid var(--tho-black);
  cursor: pointer;
  font-family: var(--font-body); font-size: 18px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.ecke-oben-rechts i { font-size: 28px; }
.ecke-oben-rechts:active { background: var(--tho-black); color: var(--color-fg-inverted); }

.modell-hinweis {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); margin: 0;
  display: flex; align-items: center; gap: 14px;
  background: rgba(13, 13, 13, 0.85); color: var(--color-fg-inverted);
  padding: 16px 28px; font-size: 20px; font-weight: var(--fw-medium);
  transition: opacity var(--duration-slow) var(--ease-out);
}
.modell-hinweis i { font-size: 28px; }
.modell-hinweis[data-verblasst="ja"] { opacity: 0; }

/* ================= MEHR ERFAHREN ================= */

.mehr { flex-direction: column; background: var(--color-bg); }

.mehr-leiste {
  flex: none; height: 64px; display: flex; align-items: center;
  justify-content: flex-end; background: var(--tho-black);
}
.mehr-qr-knopf {
  margin-left: auto; height: 64px; padding: 0 32px;
  display: flex; align-items: center; gap: 12px;
  background: var(--color-brand); color: var(--color-fg-inverted); border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 17px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.mehr-qr-knopf i { font-size: 26px; }
.mehr-qr-knopf:active { background: var(--color-brand-hover); }

.mehr-inhalt { flex: 1; position: relative; min-height: 0; background: var(--color-bg-subtle); display: flex; }
.mehr-inhalt iframe { flex: 1; border: 0; min-width: 0; }



/* ================= QR ================= */

.qr-flaeche { background: var(--color-bg); display: grid; place-items: center; }
.qr-flaeche svg { width: 100%; height: 100%; display: block; }
.qr-gross { width: 288px; height: 288px; }

.qr-titel { margin: 0; font-size: 22px; font-weight: var(--fw-semibold); line-height: 1.25; color: var(--tho-black); }
.qr-text  { margin: 0; font-size: 18px; line-height: 1.45; color: var(--color-fg-subtle); }
.qr-text.breit { font-size: 20px; max-width: 560px; }

.qr-ueberschrift {
  margin: 0; font-family: var(--font-display);
  font-size: 40px; font-weight: var(--fw-bold); letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--tho-black); text-align: center;
}

/* ================= OFFLINE ================= */

.offline-hinweis {
  position: fixed; right: var(--space-4); bottom: calc(96px + var(--space-4)); z-index: 20;
  margin: 0; padding: var(--space-2) var(--space-4);
  background: rgba(13, 13, 13, 0.8); color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
}
.offline-hinweis[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ================= BIKE-WAHL AM GERÄT ================= */

body[data-schirm="ungewaehlt"] .schirm[data-fuer="ungewaehlt"],
body[data-schirm="anmelden"]   .schirm[data-fuer="anmelden"],
body[data-schirm="wahl"]       .schirm[data-fuer="wahl"] { display: block; }

/* Ohne gewaehltes Bike gibt es nichts zu navigieren. */
body[data-schirm="ungewaehlt"] .menue,
body[data-schirm="anmelden"]   .menue,
body[data-schirm="wahl"]       .menue { display: none; }

/* ---- Gerät ohne Bike ---- */

.ungewaehlt { background: var(--color-bg); }
.ungewaehlt-mitte {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.wahl-logo { width: 260px; }
.ungewaehlt-text { margin: 0; max-width: 640px; text-align: center; font-size: 24px; line-height: 1.4; color: var(--color-fg-subtle); }
.ungewaehlt-fuss {
  position: absolute; bottom: 32px; left: 0; right: 0; margin: 0; text-align: center;
  font-size: 14px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--tho-gray-400);
}

.rahmenknopf.gross {
  position: static; height: 80px; padding: 0 48px; gap: 16px;
  font-size: 20px;
}
.rahmenknopf.gross i { font-size: 32px; }

/* ---- Anmeldung am Tablet ---- */

.anmelden { background: var(--color-bg-subtle); }

.ecke-oben-links {
  position: absolute; top: 0; left: 0;
  height: 80px; padding: 0 32px;
  display: flex; align-items: center; gap: 14px;
  background: var(--tho-black); color: var(--color-fg-inverted); border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 19px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.ecke-oben-links i { font-size: 30px; }
.ecke-oben-links:active { background: var(--color-brand); }

/* Oben statt mittig: die Bildschirmtastatur klappt von unten auf und wuerde
   ein mittig sitzendes Formular verdecken. */
.anmelde-form {
  position: absolute; top: 96px; left: 50%; transform: translateX(-50%);
  width: 620px; display: flex; flex-direction: column; gap: 20px;
}
.anmelde-titel {
  margin: 0; text-align: center;
  font-family: var(--font-display); font-size: 28px; font-weight: var(--fw-bold);
  text-transform: uppercase; color: var(--tho-black);
}
.anmelde-form input {
  height: 80px; padding: 0 24px; text-align: center;
  font-family: var(--font-body); font-size: 30px; letter-spacing: var(--ls-widest);
  background: var(--color-bg); border: 3px solid var(--color-brand); border-radius: var(--radius-sm);
}
.anmelde-form input:focus { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.anmelde-fehler {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 19px; color: var(--color-brand-hover);
}
.anmelde-fehler i { font-size: 24px; }
.anmelde-fehler[hidden] { display: none; }

.vollknopf {
  height: 72px; border: none; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--color-brand); color: var(--color-fg-inverted);
  font-family: var(--font-body); font-size: 19px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
}
.vollknopf:active { background: var(--color-brand-hover); }

/* ---- Bike wählen ---- */

.wahl { background: var(--color-bg-subtle); }
.wahl > * { position: relative; }

.wahl-kopf {
  position: absolute; top: 0; left: 0; right: 0; height: 88px;
  display: flex; align-items: center; padding-left: 32px;
  background: var(--color-bg); border-bottom: 2px solid var(--tho-black);
}
.wahl-kopf-label { font-size: 17px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-fg-subtle); }
.wahl-kopf-name { margin-left: 14px; font-family: var(--font-display); font-size: 24px; font-weight: var(--fw-bold); text-transform: uppercase; color: var(--tho-black); }
.wahl-kopf-label[hidden] { display: none; }

.wahl-abbrechen {
  margin-left: auto; height: 88px; padding: 0 40px;
  display: flex; align-items: center; gap: 14px;
  background: var(--tho-black); color: var(--color-fg-inverted); border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 19px; font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.wahl-abbrechen i { font-size: 30px; }
.wahl-abbrechen:active { background: var(--color-brand); }
.wahl-abbrechen[hidden] { display: none; }

.fassung {
  position: absolute; right: 32px; bottom: 12px; margin: 0;
  font-size: 13px; color: var(--color-fg-muted); font-variant-numeric: tabular-nums;
}

.wahl-gitter {
  position: absolute; inset: 88px 0 0; padding: 28px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 20px;
  overflow-y: auto;
}
/* Bei mehr als acht Bikes wird eine Kachel sonst unbrauchbar flach. */
.fassung {
  position: absolute; right: 32px; bottom: 12px; margin: 0;
  font-size: 13px; color: var(--color-fg-muted); font-variant-numeric: tabular-nums;
}

.wahl-gitter { grid-auto-rows: minmax(280px, 1fr); }

.wahl-karte {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-bg); border: 1px solid var(--tho-gray-300); cursor: pointer;
  font-family: var(--font-body); text-align: left; padding: 0;
}
.wahl-karte[data-aktiv="ja"] { border: 3px solid var(--tho-black); }
.wahl-karte:active { border: 3px solid var(--tho-black); }

.wahl-marke {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 6px 12px; background: var(--color-brand); color: var(--color-fg-inverted);
  font-size: 12px; font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase;
}

.wahl-bild { flex: 1; min-height: 0; margin: 36px 16px 8px; display: grid; place-items: center; }
.wahl-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }

.wahl-text { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 2px; }
.wahl-karte-name { font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-bold); text-transform: uppercase; color: var(--tho-black); }
.wahl-karte-kat { font-size: 15px; color: var(--color-fg-subtle); }
.wahl-karte-preis { margin-top: 4px; font-size: 19px; font-weight: var(--fw-semibold); color: var(--tho-black); }

/* Der Griff, der die Wahl wieder oeffnet: unsichtbar, aber gross genug fuer
   einen Daumen. Liegt ueber allem, nimmt aber nur lange Druecke an. */
/* Vollstaendig unsichtbar — auch waehrend des Drueckens. Eine fuellende
   Ringanzeige half beim Finden, blieb aber auf dem Tablet stehen, wenn der
   Finger ausserhalb der Flaeche losliess, und stand dann als Kreis in der Ecke. */
.geheimgriff { position: fixed; top: 0; left: 0; width: 90px; height: 90px; z-index: 50; }