/* ==========================================================================
   Hausschrift des Museums: Myriad Pro (Adobe, lizenzpflichtig)
   Zwei Wege, beide werden unterstützt:
   1. Adobe Fonts: Projekt-Link des Museums in index.html einbinden — die
      Schrift heißt dort "myriad-pro".
   2. Eigene Webfont-Dateien (vom Museum, mit Web-Lizenz) in den Ordner
      fonts/ legen, mit genau diesen Dateinamen:
        fonts/MyriadPro-Regular.woff2   (normal, 400)
        fonts/MyriadPro-Semibold.woff2  (halbfett, 600)
        fonts/MyriadPro-Bold.woff2      (fett, 700)
      Ist Myriad Pro auf dem Gerät installiert, wird die direkt genommen.
   Fehlt die Schrift, greift automatisch Helvetica/Arial wie bisher.
   ========================================================================== */
@font-face {
  font-family: "Myriad Pro";
  src: local("Myriad Pro"), local("MyriadPro-Regular"), url("../fonts/MyriadPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: local("Myriad Pro Semibold"), local("MyriadPro-Semibold"), url("../fonts/MyriadPro-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: local("Myriad Pro Bold"), local("MyriadPro-Bold"), url("../fonts/MyriadPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design Tokens — aus design_handoff_guide_app/README.md
   ========================================================================== */
:root {
  --green: #5E9C55;
  --green-dark: #47763E;
  --blue: #3E8CC0;
  --blue-dark: #2E6E9C;
  --orange: #E08A2E;
  --orange-dark: #B96C1E;

  --ink: #1C1B19;
  --body-text: #33302A;
  --muted: #8A857A;

  --bg-doc: #E9E6DE;
  --bg-station: #F4F2EC;
  --white: #FFFFFF;
  --hairline: #E4E0D6;
  --task-bg: #EDEAE1;
  --grid-line: #F1EFE8;

  --progress-todo: #DEDACF;
  --dashed-border: #D9D4C8;
  --stamp-dashed: #D3CEC2;

  --font: "myriad-pro", "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--bg-doc);
}

body {
  font-family: var(--font);
  color: var(--body-text);
  overscroll-behavior-y: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  /* iOS/Safari legt sonst eigenes Button-Chrome (Verlauf/Rahmen) über jedes
     <button>, egal was hier drübersteht — das macht z.B. den runden
     Play-Button kaputt. */
  -webkit-appearance: none;
  appearance: none;
}
img { display: block; max-width: 100%; }

#app {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg-station);
  position: relative;
  overflow-x: hidden;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Shared: full-bleed accent screens (onboarding cards, Ziel screens)
   ========================================================================== */
.accent-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top) + 40px) 28px calc(var(--safe-bottom) + 30px);
  color: var(--white);
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--ink);
  border-radius: 6px;
  padding: 15px 30px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.pill-btn:active { opacity: 0.8; }

/* ==========================================================================
   1. Onboarding — alle Guides als antippbare Liste
   ========================================================================== */
.onboard-list {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--bg-station);
  padding: calc(var(--safe-top) + 40px) 28px calc(var(--safe-bottom) + 30px);
}

.onboard-list__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboard-list__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.onboard-list__title {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.onboard-list__cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.guide-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 108px;
  border-radius: 18px;
  padding: 18px 20px;
  color: var(--white);
  text-align: left;
  transition: transform 0.15s ease;
}
.guide-card:active { transform: scale(0.98); }

.guide-card__avatar {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

.guide-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guide-card__name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.guide-card__quote {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.guide-card__meta {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--white);
}

.guide-card__chevron {
  flex: 0 0 auto;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   1b. Auswahl-Animation — Farbe "flutet" den Screen, dann Piktogramm + Weiter
   ========================================================================== */
.guide-intro {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg-station);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-intro__fill {
  position: absolute;
  inset: 0;
  background: var(--accent, var(--ink));
}

/* Variante "wave-up" (Schwimmer): flutet mit welliger Kante von unten. */
.guide-intro--wave-up .guide-intro__fill {
  top: auto;
  height: 0%;
  transition: height 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.guide-intro--wave-up.guide-intro--filled .guide-intro__fill { height: 100%; }

/* Varianten "slide-left" (Läufer) / "slide-right" (Reiter): gerade Kante,
   läuft zügig von links bzw. rechts ins Bild — wie angelaufen/angeritten. */
.guide-intro--slide-left .guide-intro__fill,
.guide-intro--slide-right .guide-intro__fill {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.guide-intro--slide-left .guide-intro__fill { transform: translateX(-100%); }
.guide-intro--slide-right .guide-intro__fill { transform: translateX(100%); }
.guide-intro--slide-left.guide-intro--filled .guide-intro__fill,
.guide-intro--slide-right.guide-intro--filled .guide-intro__fill {
  transform: translateX(0);
}

/* Wellenlinie an der Oberkante der "Flut" — nur bei "wave-up" sichtbar.
   Eine SVG-Welle wird als Maske über eine akzentfarbene Fläche gelegt und
   läuft in einer Endlosschleife seitwärts, damit die Füllung wie Wasser
   wirkt. Bei den geraden Varianten (Läufer/Reiter) bleibt die Kante glatt. */
.guide-intro__wave { display: none; }
.guide-intro--wave-up .guide-intro__wave {
  display: block;
  position: absolute;
  left: -10px;
  right: -10px;
  top: -22px;
  height: 30px;
  background: var(--accent, var(--ink));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30'><path d='M0 15 Q 55 30 110 15 T 220 15 V30 H0 Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 30'><path d='M0 15 Q 55 30 110 15 T 220 15 V30 H0 Z' fill='black'/></svg>");
  -webkit-mask-size: 220px 30px;
  mask-size: 220px 30px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  animation: guide-wave-scroll 1.8s linear infinite;
}
@keyframes guide-wave-scroll {
  from { -webkit-mask-position-x: 0; mask-position-x: 0; }
  to { -webkit-mask-position-x: -220px; mask-position-x: -220px; }
}

.guide-intro__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.guide-intro__pictogram {
  width: 42vw;
  max-width: 220px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.guide-intro__pictogram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2));
}
.guide-intro--revealed .guide-intro__pictogram {
  opacity: 1;
  transform: scale(1);
}

.guide-intro__name {
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.6) translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.guide-intro--revealed .guide-intro__name {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.guide-intro__name::after {
  content: "";
  display: block;
  margin: 12px auto 0;
  width: 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  transition: width 0.5s ease;
}
.guide-intro--ready .guide-intro__name::after {
  width: 56px;
}

.guide-intro__back {
  position: absolute;
  top: calc(var(--safe-top) + 20px);
  left: 20px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.guide-intro--ready .guide-intro__back {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.guide-intro__button {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: calc(var(--safe-bottom) + 32px);
  z-index: 2;
  width: auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.guide-intro--ready .guide-intro__button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   2. Station screen (Läufer / Schwimmer / Reiter)
   ========================================================================== */
.station {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-station);
  padding: calc(var(--safe-top) + 20px) 28px calc(var(--safe-bottom) + 14px);
}

.station__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.station__route-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.station__counter {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  line-height: 1.3;
}
.station__counter-page {
  font-size: 11px;
}

.station__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.station__header-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.station__back-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--task-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--ink);
}
.station__back-label {
  font-size: 13px;
  color: var(--muted);
}

.progress {
  display: flex;
  gap: 5px;
}
.progress__seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--progress-todo);
}
.progress__seg--done { background: var(--seg-color, var(--ink)); }

.station__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: -6px;
}

.station__title {
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.station-photo {
  flex: 1 1 70px;
  min-height: 60px;
  max-height: 220px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  object-fit: contain;
  background: var(--task-bg);
}

/* ---- Lyrics-Ansicht (Spotify/Apple-Music-artig) ----------------------
   Minimiert: schmaler Streifen, aktuelle Zeile fett & klar in der Mitte,
   Zeile davor/danach angedeutet, Rest über eine CSS-Maske ausgeblendet.
   Antippen (.lyrics__handle) klappt auf Vollbild auf (.lyrics--expanded,
   ausgelöst über die Modifier-Klasse .station--lyrics-expanded am
   Eltern-Screen, siehe unten). Die Zeilen-Spalte (.lyrics__track) wird per
   transform verschoben, sodass die aktive Zeile immer im Anker der Mitte
   steht — das ergibt die "aktive" Scroll-Animation beim Satzwechsel. */
.lyrics {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 120px;
  min-height: 120px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.lyrics__handle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--task-bg);
  border-bottom: 1px solid var(--hairline);
}
.lyrics__handle-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, var(--ink));
  display: flex;
  align-items: center;
  justify-content: center;
}
.lyrics__handle-avatar img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.lyrics__handle-label {
  flex: 1;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
/* Übliches Vollbild-Symbol: zwei Pfeile schräg nach außen (vergrößern),
   im Vollbild zwei Pfeile nach innen (verkleinern). */
.lyrics__handle-icon {
  flex: 0 0 auto;
  display: flex;
  width: 22px;
  height: 22px;
}
.lyrics__handle-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent, var(--ink));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lyrics__icon-collapse { display: none; }
.lyrics--expanded .lyrics__icon-expand { display: none; }
.lyrics--expanded .lyrics__icon-collapse { display: block; }

.lyrics__viewport {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 70px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 24%, black 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 24%, black 76%, transparent 100%);
}
.lyrics__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 0 18px;
  transition: transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.01);
  will-change: transform;
}
.lyrics__line {
  margin: 0;
  padding: 11px 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.28;
  /* Nur Opacity weich überblenden — font-weight/-size lassen sich ohne
     Variable-Font ohnehin nicht sauber zwischenstufig animieren (sieht dann
     wie ein mehrstufiges "Ruckeln" aus), deshalb springen die hart, dafür
     kurz. Das wirkt wie ein klarer, schneller Wechsel statt einer langen,
     sichtbar gestuften Überblendung. */
  transition: opacity 0.15s ease;
}
.lyrics__line--near {
  opacity: 0.6;
  color: var(--body-text);
}
.lyrics__line--active {
  opacity: 1;
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  transform: scale(1.02);
  transform-origin: left center;
}

/* Vollbild-Modus: wird über eine Modifier-Klasse am .station-Screen
   umgeschaltet (nicht am .lyrics-Element selbst), damit gleichzeitig auch
   die übrigen Screen-Inhalte ausgeblendet und die Player-Leiste unten
   angedockt werden kann. */
.station--lyrics-expanded {
  padding: 0;
  overflow: hidden;
}
.station--lyrics-expanded > *:not(.lyrics):not(.audio) {
  display: none;
}
.station--lyrics-expanded .lyrics {
  position: fixed;
  inset: 0;
  z-index: 200;
  border-radius: 0;
  border: none;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  animation: lyrics-expand-in 0.28s ease;
}
.station--lyrics-expanded .lyrics__handle {
  padding: 14px 20px 6px;
}
.station--lyrics-expanded .lyrics__viewport {
  flex: 1;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 14%, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 14%, black 86%, transparent 100%);
}
.station--lyrics-expanded .lyrics__track {
  padding: 0 22px;
}
.station--lyrics-expanded .lyrics__line {
  font-size: 21px;
  padding: 13px 0;
}
.station--lyrics-expanded .lyrics__line--active {
  font-size: 25px;
}
.station--lyrics-expanded .audio {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 210;
  background: var(--bg-station);
  padding: 14px 28px calc(var(--safe-bottom) + 14px);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
}
@keyframes lyrics-expand-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.audio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.audio__rewind {
  font-size: 14px;
  color: var(--muted);
}
.audio__play {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.audio__play:active { opacity: 0.85; }

/* Play/Pause als reine CSS-Form statt Unicode-Zeichen (▶/⏸) — die werden
   je nach Gerät/Systemschrift (v.a. iOS) unterschiedlich fett, schief oder
   emoji-artig dargestellt. So sieht es auf jedem Gerät exakt gleich aus. */
.audio__play-icon {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--white);
  margin-left: 4px;
}
.audio__play-icon--pause {
  width: 16px;
  height: 18px;
  border: none;
  margin-left: 0;
  position: relative;
}
.audio__play-icon--pause::before,
.audio__play-icon--pause::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--white);
  border-radius: 1px;
}
.audio__play-icon--pause::before { left: 1px; }
.audio__play-icon--pause::after { right: 1px; }
.audio__time {
  font-size: 13px;
  color: var(--muted);
  min-width: 78px;
  text-align: center;
}

.btn-primary {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--white);
  border-radius: 6px;
  padding: 16px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.btn-primary:active { opacity: 0.85; }
.btn-primary--accent { background: var(--accent, var(--ink)); }

/* ==========================================================================
   3. Reiter — Map screen
   ========================================================================== */
.map-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-station);
  padding: calc(var(--safe-top) + 40px) 28px calc(var(--safe-bottom) + 26px);
}
.map-screen__title {
  font-size: 31px;
  font-weight: 700;
}
.map-screen__subline {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.4;
}

.map-card {
  flex: 1;
  min-height: 340px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 34px);
}

/* Gestrichelter Weg, der die Stationen in Reihenfolge verbindet — macht aus
   losen Punkten einen begehbaren Rundgang (wie ein Gebäude-Grundriss). */
.map-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-path polyline {
  fill: none;
  stroke: var(--dashed-border);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-node {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  background: var(--white);
  border: 2px solid var(--dashed-border);
  color: var(--ink);
  z-index: 1;
}
.map-node--done {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}

.map-here {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
.map-here__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--blue);
}

.stamp-tray {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stamp-tray__label {
  font-size: 15px;
  font-weight: 600;
}
.stamp-tray__circles {
  display: flex;
  gap: 8px;
}
.stamp {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--white);
  border: 2px dashed var(--stamp-dashed);
}
.stamp--done {
  background: var(--orange);
  border-style: solid;
  border-color: var(--orange);
}

/* ==========================================================================
   4. Ziel (finish) screens
   ========================================================================== */
.ziel { align-items: center; text-align: center; justify-content: center; gap: 18px; }

.ziel__pictogram {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ziel__pictogram img {
  width: 46%;
  max-width: 200px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.15));
}

.ziel__headline {
  font-size: 44px;
  font-weight: 700;
}

.ziel__subline {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  max-width: 34ch;
}

.ziel__pullquote {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 22ch;
}
.ziel__pullquote::before {
  content: "„";
  display: block;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0.85;
}

.ziel__stamps {
  display: flex;
  gap: 10px;
}
.ziel__stamp {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
}

.ziel__bubble {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  max-width: 36ch;
}

.ziel__spacer { flex: 1; min-height: 8px; }

/* "Nein, zurück zur Auswahl" — bewusst leiser als der Hauptbutton. */
.ziel__link {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 10px;
  margin-top: -6px;
}

/* ==========================================================================
   5. Aufgaben (nach dem Ziel-Screen) — nutzt das Layout des Station-Screens
   ========================================================================== */
.aufgabe__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 5px solid var(--accent, var(--ink));
  border-radius: 14px;
  padding: 20px;
}
.aufgabe__text {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
}
.aufgabe__hint {
  background: var(--task-bg);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--body-text);
}
.aufgabe__hint strong { color: var(--accent, var(--ink)); }

/* Gerade gesprochener Satz (Titel, Aufgabe oder Tipp) beim Abspielen. */
.aufgabe__phrase {
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.aufgabe__phrase--active {
  color: var(--accent, var(--ink));
}
.aufgabe__spacer { flex: 1; }

/* ==========================================================================
   Install hint toast
   ========================================================================== */
.install-hint {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--safe-bottom) + 16px);
  z-index: 50;
  background: var(--ink);
  color: var(--white);
  border-radius: 12px;
  padding: 14px 44px 14px 16px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: 480px;
  margin: 0 auto;
}
.install-hint p { margin: 0; }
.install-hint strong { font-weight: 700; }
#install-hint-close {
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--white);
  opacity: 0.7;
  font-size: 14px;
  padding: 6px;
}

/* ==========================================================================
   6. Barrierefreiheit
   ========================================================================== */

/* Nur für Screenreader (unsichtbar, wird aber vorgelesen). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Überschriften bekommen per Script den Fokus (für Screenreader) — dabei
   soll kein Rahmen erscheinen. Tastatur-Fokus auf Buttons bleibt deutlich. */
[tabindex="-1"]:focus { outline: none; }
button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.guide-card:focus-visible,
.accent-screen button:focus-visible,
.guide-intro button:focus-visible {
  outline-color: var(--white);
}

/* Weniger Bewegung, wenn das im Gerät so eingestellt ist. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Text frei scrollbar (immer, solange nichts abgespielt wird — und im
   Textmodus durchgehend): ganzer Text gut lesbar, mit dem Finger scrollbar,
   der zuletzt gesprochene Satz bleibt fett markiert. */
.lyrics--free .lyrics__viewport {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  -webkit-mask-image: none;
  mask-image: none;
}
.lyrics--free .lyrics__track {
  position: static;
  transform: none !important;
  transition: none;
  padding: 6px 18px 12px;
}
.lyrics--free .lyrics__line {
  opacity: 1;
  color: var(--body-text);
}
.lyrics--free .lyrics__line--active {
  color: var(--ink);
}

/* Textmodus (für gehörlose und schwerhörige Menschen): größere Schrift,
   mehr Platz für den Text, Foto etwas kleiner. */
.a11y-text .lyrics { flex-grow: 3; }
.a11y-text .station-photo { max-height: 150px; }
.a11y-text .lyrics__line {
  font-size: 18px;
  line-height: 1.5;
  padding: 7px 0;
}
.a11y-text .lyrics__line--active { font-size: 19px; }
.a11y-text .aufgabe__text { font-size: 21px; }
.a11y-text .aufgabe__hint { font-size: 17px; }

/* Startseite: Button "Bedienhilfen" oben rechts. */
.onboard-list__top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -12px;
}
.a11y-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--task-bg);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.a11y-open__icon { font-size: 18px; }

/* Startseite: langes Drücken (Sprachmodus einschalten) soll weder Text
   markieren noch das Bild-Menü des Browsers öffnen. */
.onboard-list {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Menü "Bedienhilfen" */
.a11y-menu {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(28, 27, 25, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.a11y-menu__panel {
  width: 100%;
  max-width: 480px;
  max-height: 100dvh;
  overflow-y: auto;
  background: var(--bg-station);
  border-radius: 20px 20px 0 0;
  padding: 26px 22px calc(var(--safe-bottom) + 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a11y-menu__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}
.a11y-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 2px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--body-text);
}
.a11y-option--on { border-color: var(--ink); }
.a11y-option__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.a11y-option__name {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}
.a11y-option__state {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--task-bg);
  color: var(--muted);
}
.a11y-option--on .a11y-option__state {
  background: var(--ink);
  color: var(--white);
}
.a11y-option__who {
  font-size: 14px;
  font-weight: 700;
  color: var(--body-text);
}
.a11y-option__desc {
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
.a11y-menu__note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--body-text);
}
.a11y-menu__close {
  background: var(--ink);
  color: var(--white);
  margin-top: 4px;
}

/* Sprachmodus: unsichtbare Gesten-Fläche über allem, darüber nur die
   Leiste zum Beenden. */
.gesture-layer {
  position: fixed;
  inset: 0;
  z-index: 900;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.speech-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 910;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 8px) 16px 8px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}
.speech-bar__off {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.gesture-layer[hidden],
.speech-bar[hidden] {
  display: none;
}
/* Platz für die Leiste, damit sie nichts verdeckt. */
.a11y-speech .station,
.a11y-speech .onboard-list,
.a11y-speech .accent-screen {
  padding-top: calc(var(--safe-top) + 64px);
}
/* Gerade angesagter Guide auf der Startseite (für Begleitpersonen). */
.guide-card--speech-focus {
  outline: 4px solid var(--ink);
  outline-offset: 4px;
}

/* ==========================================================================
   Small screens safety
   ========================================================================== */
@media (max-height: 700px) {
  .onboard__name { font-size: 32px; }
  .ziel__headline { font-size: 34px; }
  .station__title { font-size: 26px; }
}