/* =====================================================================
   Design-Grundlagen: alle Farben, Abstände und Rundungen an einer Stelle.
   Dunkel ist der Standard. Hell kommt, wenn das iPhone auf hell steht
   (prefers-color-scheme) oder wenn man in den Einstellungen "Hell" wählt
   (dann setzt darstellung.js <html data-darstellung="hell">).
   ===================================================================== */
:root {
  color-scheme: dark; /* Browser-eigene Teile (Auswahllisten, Häkchen) passen sich an */
  /* "Clubhaus": Dunkelgrün, Creme, Gold */
  --grund: #0e2219;          /* Seitenhintergrund */
  --flaeche: #15301f;        /* Karten, Kästen */
  --flaeche-innen: #102719;  /* Karte in einer Karte */
  --rand: #2a4a37;
  --text: #f3ecdc;
  --text-leise: #b7b29f;
  --akzent: #c9a45c;         /* Hauptfarbe: Knöpfe, aktive Auswahl, Fokusring */
  --akzent-marke: #c9a45c;   /* Marke und aktiver Tab (reiner Text auf der Fläche) */
  --auf-akzent: #0e2219;     /* Schrift auf einem goldenen Knopf */

  /* Bewertungsfarben der Karten */
  --gut: #7fae7f;
  --achtung: #c9793f;
  --verbessern: #c2604a;
  --unsicher: #7a8a7f;
  --info: #7dd3fc;
  --auf-farbe: #06140c;      /* Schrift auf den farbigen Abzeichen */
  --rot-text: #ef4444;
  /* Live-Rahmen (ampel.js): in Hell und Dunkel gleich, damit man ihn auch draußen sofort erkennt */
  --ampel-gruen: #22c55e;
  --ampel-gelb: #facc15;
  --ampel-rot: #ef4444;
  --ampel-grau: #8a8f98;
  --gelb-text: #facc15;
  /* Pfahlfarben auf dem Golfplatz (Schaubild in der Wissensseite) */
  --pfahl-weiss: #ffffff;
  --pfahl-gelb: #facc15;
  --pfahl-rot: #dc2626;
  /* Beschriftung unter den Strichfiguren. Gilt hell und dunkel gleich, weil der
     Figurkasten (.figur) immer dunkel ist – deshalb nicht in den hellen Farbsätzen. */
  --figur-text: #facc15;

  /* Kleine farbige Kästen in den Karten */
  --tipp-grund: #1a2b23;
  --gefuehl-grund: #16283a;
  --gedanke-verlauf: #1a3a2b;
  --skala-rot: #3a2620;
  --skala-gut: #24402c;
  --skala-achtung: #4a3620;

  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
  --r-klein: 10px;           /* Rundung: Knöpfe, Eingabefelder */
  --r: 14px;                 /* Rundung: Karten */
  --r-gross: 20px;           /* Rundung: große Kästen */
  --leiste-hoehe: 64px;      /* Tab-Leiste unten (ohne Home-Balken) */
}

/* Heller Farbsatz ("Scorecard": Creme, Dunkelgrün, Gold). Er steht zweimal da,
   weil CSS "automatisch hell ODER von Hand hell gewählt" nicht in einer
   einzigen Regel ausdrücken kann.
   --akzent-marke ist dunkler als --akzent: Text direkt auf der creme­farbenen
   Fläche (Marke, aktiver Tab) braucht mehr Kontrast als eine gefüllte Fläche. */
@media (prefers-color-scheme: light) {
  :root:not([data-darstellung="dunkel"]) {
    color-scheme: light;
    --grund: #f6f1e6; --flaeche: #fffdf8; --flaeche-innen: #f1ebdd; --rand: #e2d9c4;
    --text: #13301f; --text-leise: #6b6a5c; --akzent: #13402a; --akzent-marke: #7a5f26; --auf-akzent: #f6f1e6;
    --gut: #2f6b3f; --achtung: #9a5a1f; --verbessern: #8c3f2e; --info: #0369a1; --auf-farbe: #ffffff;
    --rot-text: #dc2626; --gelb-text: #a16207;
    --pfahl-weiss: #ffffff; --pfahl-gelb: #eab308; --pfahl-rot: #dc2626;
    --tipp-grund: #efe6d5; --gefuehl-grund: #e7f0fb; --gedanke-verlauf: #f1e6cf;
    --skala-rot: #f4ddd3; --skala-gut: #dcead8; --skala-achtung: #f1e0b8;
    --schatten: 0 1px 2px rgba(19, 48, 31, 0.06), 0 6px 20px rgba(19, 48, 31, 0.08);
  }
}
:root[data-darstellung="hell"] {
  color-scheme: light;
  --grund: #f6f1e6; --flaeche: #fffdf8; --flaeche-innen: #f1ebdd; --rand: #e2d9c4;
  --text: #13301f; --text-leise: #6b6a5c; --akzent: #13402a; --akzent-marke: #7a5f26; --auf-akzent: #f6f1e6;
  --gut: #2f6b3f; --achtung: #9a5a1f; --verbessern: #8c3f2e; --info: #0369a1; --auf-farbe: #ffffff;
  --rot-text: #dc2626; --gelb-text: #a16207;
  --pfahl-weiss: #ffffff; --pfahl-gelb: #eab308; --pfahl-rot: #dc2626;
  --tipp-grund: #efe6d5; --gefuehl-grund: #e7f0fb; --gedanke-verlauf: #f1e6cf;
  --skala-rot: #f4ddd3; --skala-gut: #dcead8; --skala-achtung: #f1e0b8;
  --schatten: 0 1px 2px rgba(19, 48, 31, 0.06), 0 6px 20px rgba(19, 48, 31, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  /* Systemschrift: auf dem iPhone SF Pro – sieht gut aus und muss nicht geladen werden */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  background: var(--grund);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  /* Platz für Notch / Home-Balken, unten zusätzlich für die Tab-Leiste */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 12px) env(safe-area-inset-left);
}

header, main {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}
main { padding-top: 4px; }

/* Wortmarke im Kopf: Kapitälchen mit Fähnchen statt Golf-Emoji */
h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent-marke);
}
h1 svg { width: 18px; height: 18px; flex-shrink: 0; }
h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
main > h2 { margin: 8px 0 14px; }
.hinweis { margin: 0 0 10px; color: var(--text-leise); font-size: 0.9rem; }
.klein-text { font-size: 0.8rem; margin-top: 12px; }
.status { color: var(--text-leise); min-height: 1.4em; font-size: 0.95rem; }

a, summary { color: var(--akzent); }
summary { cursor: pointer; font-size: 0.9rem; }

/* Sichtbarer Rahmen, wenn man per Tastatur unterwegs ist (nicht beim Tippen mit dem Finger) */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Knöpfe: ein System mit drei Sorten
   .haupt  = die eine wichtigste Aktion (grün, gefüllt)
   .klein  = Nebenaktion (nur Rand)
   .gefahr = löscht endgültig (rot)
   --------------------------------------------------------------------- */
button {
  font: inherit;
  -webkit-tap-highlight-color: transparent; /* kein grauer Blitz beim Antippen auf dem iPhone */
  touch-action: manipulation;               /* kein Zoom bei schnellem Doppeltippen */
  transition: transform 0.1s, background-color 0.15s, border-color 0.15s;
}
/* Kleines "Einsinken" beim Antippen – fühlt sich wie ein echter Knopf an */
button:active:not(:disabled) { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: wait; }

button.haupt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-weight: 650;
  border: 1px solid var(--akzent);
  border-radius: var(--r-klein);
  font-size: 1rem;
  cursor: pointer;
}
button.haupt svg { width: 18px; height: 18px; flex-shrink: 0; }
button.klein {
  margin-top: 8px;
  padding: 9px 13px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--r-klein);
  font-size: 0.95rem;
  cursor: pointer;
}
button.gefahr {
  padding: 10px 16px;
  background: #b91c1c;
  color: #fff;
  border: 1px solid #b91c1c;
  border-radius: var(--r-klein);
  font-size: 1rem;
  font-weight: 650;
  cursor: pointer;
}
/* Umriss: eine Sonderaktion, wichtig aber nicht DIE eine Hauptaktion des Bildschirms */
button.umriss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: transparent;
  color: var(--akzent);
  border: 1.5px solid var(--akzent);
  border-radius: var(--r-klein);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
/* Schlichter Text als Knopf, z. B. Export – kein Rahmen, keine Fläche */
button.text-link {
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-leise);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Für Bildschirmleser da, visuell aber unsichtbar (z. B. Zwischenüberschriften,
   die Sehende schon am Zusammenhang erkennen) */
.nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Kopf und Tab-Leiste
   --------------------------------------------------------------------- */
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.level-anzeige {
  margin: 0;
  padding: 4px 10px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 999px;
  color: var(--text-leise);
  font-size: 0.85rem;
}

/* Die drei Bereiche als Leiste unten – wie bei iPhone-Apps, gut mit dem Daumen erreichbar.
   Bewusst ohne Weichzeichner-Effekt (backdrop-filter): der kostet beim Abspielen
   des Videos Rechenzeit. */
.umschalter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
  min-height: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom));
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
}
.umschalter button {
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  background: none;
  border: none;
  color: var(--text-leise);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.umschalter button.aktiv { color: var(--akzent-marke); }
.umschalter svg { width: 26px; height: 26px; }

/* Hinweis "Als App installieren" (steuert pwa.js) */
.install-hinweis {
  display: flex;
  gap: 10px;
  align-items: center;
  width: calc(100% - 32px);
  max-width: 868px;
  margin: 12px auto 0;
  padding: 12px 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  font-size: 0.95rem;
}
.install-hinweis span { flex: 1; }
.install-hinweis .haupt { padding: 8px 12px; }
.install-hinweis .schliessen {
  background: none;
  border: none;
  color: var(--text-leise);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
}

/* Version, Netz und Offline-Stand stehen nur auf der Startseite (Analyse ohne Video).
   :has() = "enthält" – so geht das ohne zusätzliches JavaScript. */
body:has(#analyseBereich[hidden]) .fuss,
body:has(#buehne:not([hidden])) .fuss,
body:has(#liveBox:not([hidden])) .fuss { display: none; }
/* Auf der Startseite steht der Name groß im Einstiegsbild – oben dann nicht noch einmal */
body:has(#analyseBereich:not([hidden]) #buehne[hidden]):not(:has(#liveBox:not([hidden]))) h1 { visibility: hidden; }
.fuss {
  max-width: 900px;
  margin: 8px auto 16px;
  padding: 0 16px;
  color: var(--text-leise);
  font-size: 0.75rem;
  text-align: center;
}
.fuss-schutz { margin: 0 0 4px; font-size: 0.85rem; }

/* ---------------------------------------------------------------------
   Start: Video auswählen mit kurzen Filmtipps
   --------------------------------------------------------------------- */
.start-karte {
  padding: 18px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
}
.start-karte h2 {
  margin: 0 0 6px;
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.25;
}
.start-karte h2 em { font-style: italic; color: var(--akzent-marke); }
/* Einstiegsbild: Logo + Name groß und mittig, darunter der Spruch */
.start-logo { text-align: center; margin: 6px 0 10px; }
.start-logo img { display: block; margin: 0 auto 10px; width: 96px; height: 96px; border-radius: 22px; box-shadow: var(--schatten); }
.start-name { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--akzent-marke); }
.start-karte h2.start-text { text-align: center; margin-bottom: 4px; }

/* Live: Schläger, Kamera (zwei große Knöpfe) und Start – alles volle Breite, gut mit dem Daumen */
.live-wahl { display: grid; gap: 8px; margin-top: 12px; }
.live-wahl .live-schlaeger { display: block; margin: 0; }
.live-wahl select, .schwung-wahl select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--flaeche-innen);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--r-klein);
  font-size: 1rem; /* ab 16 px zoomt Safari beim Antippen nicht hinein */
  font-weight: 600;
}
.live-wahl .segmente { margin: 0; }
.live-wahl .segmente label { padding: 12px 4px; font-size: 1rem; }
.live-wahl button.umriss { width: 100%; min-height: 48px; }
.schwung-wahl { display: block; margin-top: 10px; }

/* Upload-Knopf: das echte Datei-Feld wird versteckt, der Text ist klickbar */
.upload { display: block; margin-top: 14px; }
.upload input { display: none; }
.upload span {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 12px 16px;
  text-align: center;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 1.05rem;
  font-weight: 650;
  border-radius: var(--r);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.upload span:active { transform: scale(0.98); }

.filmtipps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.filmtipps li {
  padding: 12px 4px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-leise);
}
.filmtipps li + li { border-left: 1px solid var(--rand); }
.filmtipps svg { display: block; margin: 0 auto 6px; width: 20px; height: 20px; color: var(--akzent-marke); }
.filmtipps b { display: block; color: var(--text); font-size: 0.88rem; font-weight: 600; }

/* Sobald ein Video geladen ist, braucht man die Filmtipps nicht mehr.
   :has() = "enthält" – so geht das ohne zusätzliches JavaScript. */
#analyseBereich:has(#buehne:not([hidden])) :is(.start-text, .filmtipps) { display: none; }
#analyseBereich:has(#buehne:not([hidden])) .start-karte h2 { display: none; }
#analyseBereich:has(#buehne:not([hidden])) .upload { margin-top: 0; }

/* ---------------------------------------------------------------------
   Video mit Skelett und Steuerung
   --------------------------------------------------------------------- */
/* Video und Canvas liegen exakt übereinander.
   --ratio (Breite/Höhe des Videos) setzt app.js, damit auch Hochkant-Videos passen. */
.buehne {
  position: relative;
  width: min(100%, calc(70vh * var(--ratio, 1.78)));
  margin: 0 auto;
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  box-shadow: var(--schatten);
}
.buehne video { display: block; width: 100%; height: auto; }
.buehne canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.steuerung {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

/* Zeitleiste mit einem Punkt pro Schwungphase, an der echten Videozeit ausgerichtet
   (app.js setzt "left" je Punkt in Prozent). Erscheint erst nach dem Analysieren. */
#phasenZeitleisteBox .hinweis { margin: 8px 0 0; }
.zeitleiste { position: relative; height: 18px; }
.zeitleiste::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--rand);
}
.zeitleiste-fortschritt {
  position: absolute;
  top: 8px;
  left: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--akzent);
}
.zeitleiste button {
  position: absolute;
  top: 3px;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--grund);
  border: 2px solid var(--rand);
  cursor: pointer;
}
.zeitleiste button.aktiv {
  top: 1px;
  width: 16px;
  height: 16px;
  background: var(--akzent);
  border: 3px solid var(--grund);
  box-shadow: 0 0 0 1.5px var(--akzent);
}

/* Bild zurück / Abspielen / Bild vor: runde Knöpfe, Abspielen in der Mitte größer */
.steuerung-transport { display: flex; align-items: center; justify-content: center; gap: 20px; }
.steuerung-transport button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--rand);
  background: transparent;
  color: var(--akzent-marke);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.steuerung-transport button svg { width: 20px; height: 20px; }
#playPause {
  width: 64px;
  height: 64px;
  border: none;
  background: var(--akzent);
  color: var(--auf-akzent);
}
#playPause svg { width: 24px; height: 24px; }

/* Tempo als Pille, Skelett als Schalter */
.steuerung-optionen { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.steuerung-optionen label:has(#tempo) {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.steuerung-optionen select {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
}

.schalter { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-spur {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--rand);
  flex-shrink: 0;
  transition: background 0.15s;
}
.schalter-spur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--flaeche);
  transition: transform 0.15s;
}
.schalter:has(input:checked) .schalter-spur { background: var(--akzent); }
.schalter:has(input:checked) .schalter-spur::after { transform: translateX(16px); background: var(--auf-akzent); }
.schalter:has(input:focus-visible) .schalter-spur { outline: 2px solid var(--akzent); outline-offset: 2px; }

#analysieren { width: 100%; height: 56px; font-size: 1.05rem; }

/* ---------------------------------------------------------------------
   Ergebnis der Analyse
   --------------------------------------------------------------------- */
.ergebnis {
  margin-top: 20px;
  padding: 16px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
}
.ergebnis h2 { font-size: 1.15rem; margin: 8px 0; }
.ergebnis h3 { font-size: 1.05rem; margin: 22px 0 6px; }

.phasen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.phasen button {
  padding: 12px;
  text-align: left;
  background: var(--flaeche-innen);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--r-klein);
  font-size: 1rem;
  cursor: pointer;
}
.phasen button.aktiv { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.phasen small { display: block; color: var(--text-leise); margin-top: 2px; }

/* Bewertungskarten als schlichte Liste: dünne Trennlinie statt Kasten,
   die Bewertung steht als farbiges Wort da statt als gefüllte Pille. */
.kennzahlen { display: grid; }
.karte {
  padding: 13px 0;
  border-bottom: 1px solid var(--rand);
}
.kennzahlen > .karte:last-child { border-bottom: none; }
.karte.gut { --farbe: var(--gut); }
.karte.achtung { --farbe: var(--achtung); }
.karte.verbessern { --farbe: var(--verbessern); }
.karte.unsicher { --farbe: var(--unsicher); }
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.karte-kopf strong { font-size: 1.05rem; }
.karte .abzeichen { font-size: 0.8rem; font-weight: 700; color: var(--farbe); flex-shrink: 0; }
.karte p { margin: 6px 0 0; line-height: 1.45; }
.karte .detail { color: var(--text-leise); font-size: 0.85rem; }
.karte .tipp { background: var(--tipp-grund); padding: 8px 10px; border-radius: 8px; margin-top: 8px; }

.kennzahlen h4 { margin: 14px 0 2px; font-size: 0.95rem; color: var(--text-leise); }
.karte .gefuehl { background: var(--gefuehl-grund); padding: 8px 10px; border-radius: 8px; margin-top: 8px; }
.karte details { margin-top: 8px; }
.zeigen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  color: var(--akzent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.zeigen svg { width: 13px; height: 13px; flex-shrink: 0; }
.legende { display: block; margin-top: 2px; }
.legende .rot { color: var(--rot-text); }
.legende .gelb { color: var(--gelb-text); }

.warnungen { color: var(--achtung); padding-left: 20px; }
.warnungen:empty { display: none; }

/* Schwunggedanke für die Range: kein Kasten mehr, groß und zentriert wie
   eine kurze Ansage – die eine Sache, auf die es heute ankommt. */
.gedanke-oben { margin: 40px 0 0; text-align: center; }
.gedanke-oben small { display: block; color: var(--achtung); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.gedanke-oben div {
  margin-top: 8px;
  font-family: ui-serif, "New York", Georgia, serif;
  font-style: italic;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.3;
}

.karten-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 32px; }
.karten-kopf h3 { margin: 0; }
.karten-kopf .hinweis { margin: 0; white-space: nowrap; }

/* Wisch-Karten: scroll-snap lässt jede Karte beim Wischen einrasten. Kein Rahmen
   mehr – ein Fade am rechten Rand zeigt stattdessen, dass es weitergeht. */
.karten {
  display: flex;
  gap: 28px; /* app.js rechnet mit diesem Abstand (aktualisiereKartenPunkte) */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 8px -16px 0;
  padding: 0 16px 4px;
  scroll-padding: 0 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent 100%);
}
.karten::-webkit-scrollbar { display: none; }
.karte.baustelle {
  flex: 0 0 86%;
  max-width: 440px;
  scroll-snap-align: start;
}
.baustelle-strich { width: 48px; height: 3px; border-radius: 2px; background: var(--farbe); }
.karte.baustelle .abzeichen-text {
  margin: 12px 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--farbe);
}
.karte .moment { font-size: 0.8rem; color: var(--text-leise); }
.karte .kurz { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin-top: 8px; }
.karte.baustelle .kurz {
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
}
.karte .warum { color: var(--text); opacity: 0.9; }
.karte .warum b { color: var(--farbe); }
.karte .gedanke { background: var(--gefuehl-grund); padding: 9px 12px; border-radius: var(--r-klein); font-weight: 600; margin-top: 10px; font-style: italic; }
.karte.baustelle .stat { color: var(--text-leise); font-size: 0.95rem; }
.karte.baustelle .stat b { color: var(--farbe); }
.karte.baustelle .trenner { height: 1px; background: var(--rand); margin: 14px 0 0; }

.punkte { display: flex; justify-content: center; gap: 7px; margin: 10px 0 0; }
.punkte i { width: 7px; height: 7px; border-radius: 50%; background: var(--rand); transition: width 0.2s; }
.punkte i.aktiv { width: 20px; border-radius: 4px; background: var(--akzent); }

/* Strichfigur aus deinen Posedaten. Der Kasten bleibt auch im hellen Modus dunkel,
   weil die Figuren (app.js, uebungsbilder.js) hell auf dunkel gezeichnet sind. */
.figur { background: #0b1812; border-radius: var(--r-klein); margin-top: 10px; }
.figur svg { display: block; width: 100%; height: 170px; }
.figur .legende { display: flex; justify-content: center; gap: 14px; margin: 0; padding: 0 0 6px; font-size: 0.75rem; color: #a3bcad; }
.figur .legende span::before { content: ""; display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.figur .legende .rot { color: #a3bcad; }
.figur .legende .gelb { color: #a3bcad; }
.figur .legende .rot::before { background: #ef4444; }
.figur .legende .gelb::before { background: #facc15; }

/* Skala mit Zielbereich */
.skala { margin-top: 12px; }
.skala .balken { position: relative; height: 10px; border-radius: 999px; background: var(--skala-rot); }
.skala .zone { position: absolute; top: 0; bottom: 0; }
.skala .zone.gut { background: var(--skala-gut); }
.skala .zone.achtung { background: var(--skala-achtung); }
.skala .marke {
  position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px;
  background: var(--text); border-radius: 2px; box-shadow: 0 0 0 2px var(--flaeche-innen);
}
.skala .beschriftung { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 0.78rem; color: var(--text-leise); }
.skala .beschriftung strong { color: var(--farbe); }

/* Übung: aufklappbar, die Zeile ist ein schlichter Text-Link statt ein Knopf */
.karte details.uebung { margin-top: 14px; }
.karte details.uebung summary {
  list-style: none;
  padding: 0;
  background: none;
  color: var(--akzent);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 0;
}
.karte details.uebung summary::-webkit-details-marker { display: none; }
.karte details.uebung ol { margin: 10px 0 0; padding-left: 22px; line-height: 1.45; }
.karte details.uebung li { margin-bottom: 4px; }
.karte details.uebung button.starten { width: 100%; margin-top: 8px; }

.gut-liste { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; gap: 8px; }
.gut-liste li { display: flex; gap: 8px; line-height: 1.35; }
.gut-liste li::before { content: "✓"; color: var(--gut); font-weight: 800; }

/* ---------------------------------------------------------------------
   Speichern, Meine Schwünge, Formulare
   --------------------------------------------------------------------- */
.speichern { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--rand); }
.speichern > button.klein { margin-right: 6px; }
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.formular label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--text-leise); }
.formular .breit { grid-column: 1 / -1; }
.formular input, .formular select, .daten-zeile select {
  padding: 10px;
  background: var(--flaeche-innen);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--r-klein);
  font-size: 1rem; /* ab 16 px zoomt Safari beim Antippen nicht hinein */
}
.auswahl { display: grid; gap: 6px; margin-bottom: 12px; }
.auswahl label { display: flex; gap: 10px; align-items: center; }
.auswahl input { width: 20px; height: 20px; accent-color: var(--akzent); }
.auswahl small { color: var(--text-leise); }

.sitzungen { display: grid; gap: 10px; }
.sitzungen button {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  text-align: left;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  font-size: 1rem;
  cursor: pointer;
}
.sitzungen img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-klein); background: #000; flex-shrink: 0; }
.sitzungen small { display: block; color: var(--text-leise); margin-top: 2px; }
/* Sitzung ohne Video und ohne Vorschaubild: Platzhalter statt Bild */
.sitzungen .ohne-bild {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--r-klein);
  background: var(--flaeche-innen);
  font-size: 1.8rem;
}

/* ---------------------------------------------------------------------
   Einstellungen: schlichte Liste statt Karten, dünne Trennlinie
   --------------------------------------------------------------------- */
#einstellungenBereich > section,
#einstellungenBereich > .einstellung {
  max-width: 620px;
  margin: 0 0 32px;
}
#einstellungenBereich h3 { margin: 0 0 6px; font-size: 0.95rem; }

/* Aufklappmenü: eine antippbare Zeile mit Pfeil, der Inhalt erscheint darunter */
details.aufklapp { border-bottom: 1px solid var(--rand); }
details.aufklapp > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 0;
  list-style: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary small { color: var(--text-leise); font-weight: 400; }
details.aufklapp > summary::after { content: "›"; margin-left: auto; color: var(--text-leise); font-size: 1.3rem; transition: transform 0.15s; }
details.aufklapp[open] > summary::after { transform: rotate(90deg); }
details.aufklapp[open] { padding-bottom: 12px; }

.level-auswahl { display: grid; }
.level-auswahl label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  text-align: left;
  border-bottom: 1px solid var(--rand);
  cursor: pointer;
}
.level-auswahl label:last-child { border-bottom: none; }
.level-auswahl input { width: 19px; height: 19px; margin-top: 1px; flex-shrink: 0; accent-color: var(--akzent); }
.level-auswahl strong { display: block; font-size: 0.95rem; font-weight: 700; }
.level-auswahl label.aktiv strong { color: var(--akzent); }
.level-auswahl small { display: block; margin-top: 2px; color: var(--text-leise); }

/* Hell / Dunkel / Automatisch: drei Knöpfe nebeneinander (Segmente) */
.segmente {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  margin: 8px 0 10px;
  background: var(--flaeche-innen);
  border: 1px solid var(--rand);
  border-radius: var(--r-klein);
}
.segmente label {
  display: block;
  padding: 9px 4px;
  text-align: center;
  border-radius: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-leise);
  cursor: pointer;
}
/* Das echte Auswahlfeld ist unsichtbar, bleibt aber per Tastatur bedienbar */
.segmente input { position: absolute; opacity: 0; pointer-events: none; }
.segmente label:has(input:checked) { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
.segmente label:has(input:focus-visible) { outline: 2px solid var(--akzent); }

.level-vorschlag {
  margin: 0 0 18px;
  padding: 14px;
  border-left: 4px solid var(--akzent);
  background: var(--flaeche);
  border-radius: var(--r-klein);
}
.level-vorschlag p { margin: 0 0 8px; }
.level-vorschlag button { margin: 4px 8px 0 0; }

.coach-einstellung ol { line-height: 1.5; padding-left: 22px; }
.coach-einstellung .formular { margin-top: 14px; margin-bottom: 0; }
/* Schlichtes Eingabefeld ohne Kasten, nur ein Strich darunter */
#coachSchluessel {
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rand);
  border-radius: 0;
}
.coach-einstellung > .knopfzeile { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
button.text-aktion { padding: 0; background: none; border: none; color: var(--akzent); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
button.text-gefahr { padding: 0; background: none; border: none; color: var(--verbessern); font-weight: 700; font-size: 0.95rem; cursor: pointer; }

/* Speicher verwalten: jede Aktion eine antippbare Zeile, dünne Trennlinie */
.daten h4 { margin: 18px 0 4px; font-size: 0.95rem; }
.daten-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rand); }
.daten-zeile select {
  flex: 1;
  padding: 4px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rand);
  border-radius: 0;
  color: var(--text);
}
.daten-zeile button.klein, .daten-zeile button.text-link { margin-top: 0; flex-shrink: 0; }
.daten > .daten-zeile:last-of-type { border-bottom: none; }
/* Sicherung: fertige Datei bzw. Prüfergebnis mit Knöpfen darunter */
.sicherung-box { padding: 10px 0 12px; border-bottom: 1px solid var(--rand); }
.sicherung-box .hinweis { margin-top: 0; }
.sicherung-box .knopfzeile { display: flex; align-items: center; gap: 24px; }
.sicherung-box .knopfzeile button.text-link { margin-top: 0; }

/* ---------------------------------------------------------------------
   Dialoge: Rückfrage vor dem Löschen, Einwilligung Coach
   --------------------------------------------------------------------- */
.loesch-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--r-gross);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.loesch-dialog::backdrop { background: rgba(0, 0, 0, 0.6); } /* abgedunkelte Seite dahinter */
.loesch-dialog h2 {
  margin: 0 0 14px;
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
}
.loesch-dialog p { margin: 12px 0 4px; }
/* "Wird gelöscht:" / "Bleibt erhalten:" als kleine Kapitälchen statt Fettdruck im Fließtext */
.loesch-dialog p strong { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-leise); }
.loesch-dialog ul { margin: 2px 0 0; padding: 0; list-style: none; line-height: 1.5; font-size: 0.95rem; }
.loesch-dialog .warnung { color: var(--achtung); font-size: 0.85rem; }
.loesch-dialog .haken { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; }
.loesch-dialog .haken input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #ef4444; }
.loesch-dialog .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.loesch-dialog .knoepfe button:first-child {
  padding: 10px 16px;
  background: var(--flaeche-innen);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: var(--r-klein);
  font-size: 1rem;
  cursor: pointer;
}
.loesch-dialog button:disabled { cursor: not-allowed; }

/* ---------------------------------------------------------------------
   Wissen: Lernpfade (Übersicht) und Lektionen (Wisch-Karten wie die Baustellen)
   --------------------------------------------------------------------- */
.pfad {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r);
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}
.pfad h3 { margin: 0 0 4px; font-size: 1.1rem; }
.pfad .dein-pfad {
  margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--akzent-marke);
}
.pfad-balken { height: 6px; border-radius: 3px; background: var(--rand); overflow: hidden; }
.pfad-balken i { display: block; height: 100%; background: var(--akzent); transition: width 0.3s; }
.pfad-stand { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-leise); }
.lektionen-liste { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.lektionen-liste button {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 12px; border: none; border-radius: var(--r-klein);
  background: var(--flaeche-innen); color: var(--text); font-size: 0.95rem; cursor: pointer;
}
.lektion-nr {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rand); font-size: 0.8rem; font-weight: 700; color: var(--text-leise);
}
.lektionen-liste button.erledigt .lektion-nr { background: var(--gut); border-color: var(--gut); color: var(--auf-farbe); }

/* Lektionskarten: gleiche Karten wie die Baustellen (Klasse "baustelle"), Farbe = Akzent */
.karte.lektion { --farbe: var(--akzent-marke); }
.karte.lektion .inhalt { margin-top: 14px; font-size: 1.08rem; line-height: 1.5; }
.karte.lektion button.breit { width: 100%; margin-top: 10px; }
.schaubild { background: var(--flaeche-innen); border-radius: var(--r-klein); margin-top: 10px; padding: 6px 4px; }
.schaubild svg { display: block; width: 100%; height: 170px; font-family: inherit; }
.schaubild.hoch svg { height: 230px; } /* hohe Bilder, z. B. die neun Flugkurven */
/* Echte Fotos (fotos.js): höchstens so hoch wie ein großes Schaubild, ganz zu sehen (contain),
   darunter worauf man achtet und klein der Nachweis (Fotograf · Lizenz) */
.foto { margin: 10px 0 0; }
.foto img { display: block; width: 100%; height: auto; max-height: 230px; object-fit: contain; background: var(--flaeche-innen); border-radius: var(--r-klein); }
.foto figcaption { margin-top: 6px; font-size: 0.9rem; }
.foto figcaption small { display: block; margin-top: 2px; color: var(--text-leise); font-size: 0.7rem; }
.figur .figur-text { margin: 0; padding: 0 0 8px; text-align: center; font-weight: 700; color: var(--figur-text); }
/* Ballflug-Helfer: zwei Knopfgruppen (Start, Kurve) und das Ergebnis */
.helfer-gruppe { margin-top: 14px; }
.helfer-frage { margin: 0 0 6px; font-weight: 600; }
.helfer-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.helfer-knoepfe button {
  padding: 11px 6px; font-size: 0.95rem; border: 1px solid var(--rand); border-radius: var(--r-klein);
  background: var(--flaeche-innen); color: var(--text); cursor: pointer;
}
.helfer-knoepfe button[aria-pressed="true"] {
  border-color: var(--akzent-marke); box-shadow: 0 0 0 1px var(--akzent-marke); font-weight: 700;
}
/* Gewählt auch ohne Farbe erkennbar */
.helfer-knoepfe button[aria-pressed="true"]::before { content: "✓ "; }
.helfer-ergebnis .helfer-name { margin: 16px 0 0; font-size: 1.25rem; font-weight: 700; color: var(--akzent-marke); }
.quiz-antworten { display: grid; gap: 8px; margin-top: 14px; }
.quiz-antworten button {
  text-align: left; padding: 12px 14px; font-size: 1rem; line-height: 1.35;
  border: 1px solid var(--rand); border-radius: var(--r-klein);
  background: var(--flaeche-innen); color: var(--text); cursor: pointer;
}
/* Nach dem Antworten gesperrt – aber gut lesbar, nicht blass */
.quiz-antworten button:disabled { opacity: 0.6; cursor: default; }
.quiz-antworten button.richtig { opacity: 1; border-color: var(--gut); box-shadow: 0 0 0 1px var(--gut); }
.quiz-antworten button.falsch { opacity: 1; border-color: var(--verbessern); box-shadow: 0 0 0 1px var(--verbessern); }
/* Richtig/falsch auch ohne Farbe erkennbar (Rot-Grün-Schwäche) */
.quiz-antworten button.richtig::before { content: "✓ "; font-weight: 700; color: var(--gut); }
.quiz-antworten button.falsch::before { content: "✗ "; font-weight: 700; color: var(--verbessern); }
.quiz-erklaerung { min-height: 1.4em; }
.quiz-erklaerung:focus { outline: none; }
.quellen { color: var(--text-leise); font-size: 0.82rem; }
.quellen p { margin-top: 10px; }
.quellen ul { margin: 4px 0 0; padding-left: 18px; }
/* Nur eine Karte im Stapel (Ballflug-Helfer): volle Breite */
.karten > .karte:only-child { flex-basis: 100%; }

/* Umschalter „Lernpfade | Nachschlagen“: wie die Segmente in den Einstellungen, mit zwei Knöpfen */
.segmente.zwei { grid-template-columns: repeat(2, 1fr); margin: 4px 0 16px; }
.segmente button {
  padding: 9px 4px; border: none; border-radius: 7px; background: none;
  font-size: 0.95rem; font-weight: 600; color: var(--text-leise); cursor: pointer;
}
.segmente button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }

/* Nachschlagen: Suchfeld (16 px Schrift, sonst zoomt Safari beim Antippen), Kacheln, Treffer */
.suchfeld {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-klein);
}
.suchfeld::placeholder { color: var(--text-leise); }
.suchfeld:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.such-status { margin: 8px 0 0; min-height: 1.2em; }
.kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
.kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 14px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r);
  color: var(--text); cursor: pointer;
}
.kachel:last-child { grid-column: 1 / -1; } /* Ballflug-Helfer über die ganze Breite */
.kachel-symbol { font-size: 1.5rem; line-height: 1; margin-bottom: 6px; }
.kachel-titel { font-weight: 700; font-size: 1rem; }
.kachel-text { font-size: 0.82rem; color: var(--text-leise); }
.such-gruppe h3 { margin: 18px 0 4px; font-size: 0.95rem; color: var(--text-leise); }
.such-gruppe .lektionen-liste { margin-top: 8px; }
button.sprung {
  display: block; width: 100%; margin-top: 8px; padding: 11px 12px; text-align: left;
  background: var(--flaeche-innen); color: var(--text); border: none; border-radius: var(--r-klein);
  font-size: 0.95rem; cursor: pointer;
}

/* Glossar und Regeln als Liste */
.liste-titel { margin: 12px 0 8px; }
.liste-gruppe {
  margin: 22px 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--akzent-marke);
}
.begriff, .regel { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.begriff p, .regel p { margin: 0; }
.begriff .begriff-englisch { color: var(--text-leise); font-style: italic; font-weight: 400; }
.begriff .begriff-text, .regel .regel-text { margin-top: 4px; line-height: 1.45; }
/* Links zur Lektion: eigene Zeile, bei langem Titel linksbündig umbrechen */
.begriff .zeigen, .regel + .zeigen, .karte.lektion .zeigen, .karte.baustelle .zeigen.zur-lektion { display: flex; text-align: left; }
.regel .regel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.regel .regel-nr { flex-shrink: 0; font-size: 0.8rem; color: var(--text-leise); }
.regel .regel-strafe { margin-top: 6px; font-size: 0.88rem; font-weight: 600; color: var(--akzent-marke); }

/* Irrtum-Karte: der Irrtum leise und kursiv, darunter „Was stimmt“ */
.karte.lektion .irrtum {
  margin-top: 14px; font-family: ui-serif, "New York", Georgia, serif;
  font-size: 1.3rem; font-style: italic; line-height: 1.3; color: var(--text-leise);
}
.karte.lektion .stimmt-titel {
  margin: 16px 0 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gut);
}
.karte.lektion .stimmt-titel + .inhalt { margin-top: 4px; }
/* Kleine Tabelle in einer Karte (Flex ↔ Tempo) */
.wissen-tabelle { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.92rem; }
.wissen-tabelle th, .wissen-tabelle td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--rand); }
.wissen-tabelle th { font-size: 0.78rem; font-weight: 600; color: var(--text-leise); }

/* ---------------------------------------------------------------------
   Übungsmodus: Vollbild, große Schrift und große Knöpfe für die Range
   --------------------------------------------------------------------- */
body.ohne-scrollen { overflow: hidden; }
.uebungsmodus {
  position: fixed;
  inset: 0;
  z-index: 20; /* liegt über der Tab-Leiste (10) */
  display: flex;
  flex-direction: column;
  background: var(--grund);
  padding: calc(env(safe-area-inset-top) + 12px) 18px calc(env(safe-area-inset-bottom) + 16px);
}
.uebung-oben { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 1.1rem; }
.uebungsmodus button.rund {
  width: 44px; height: 44px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--flaeche); color: var(--text); font-size: 1.2rem; cursor: pointer;
}
.uebungsmodus .fortschritt { display: flex; gap: 6px; margin-top: 12px; }
.uebungsmodus .fortschritt i { flex: 1; height: 4px; border-radius: 2px; background: var(--rand); }
.uebungsmodus .fortschritt i.fertig { background: var(--akzent); }
.uebung-mitte {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  text-align: center;
}
.uebungsbild { background: #0b1812; border-radius: var(--r); }
.uebungsbild svg { display: block; width: 100%; height: min(42vh, 340px); }
.uebung-takt { margin: 0; min-height: 1.4em; color: var(--gelb-text); font-size: 1.3rem; font-weight: 700; }
.uebung-mitte .hinweis { margin: 0; }
.uebung-schritt { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.3; }
.zaehlknopf {
  width: 180px; height: 180px; margin: 8px auto 0;
  border-radius: 50%; border: 6px solid var(--akzent);
  background: var(--flaeche); color: var(--text); cursor: pointer;
}
.zaehlknopf .zahl { display: block; font-size: 3.2rem; font-weight: 800; }
.zaehlknopf small { color: var(--text-leise); font-size: 0.95rem; }
.zaehlknopf:active { transform: scale(0.96); }
.uebung-unten { display: flex; gap: 10px; }
.uebung-unten button {
  flex: 1; padding: 16px; font-size: 1.1rem; border-radius: var(--r); cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--rand);
}
.uebung-unten button.haupt { background: var(--akzent); color: var(--auf-akzent); border: none; font-weight: 700; }

/* ---------------------------------------------------------------------
   Coach mit Claude (Etappe 11b)
   --------------------------------------------------------------------- */
.coach { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rand); }
.coach h3 { margin-top: 0; }
.coach #coachAntwort { margin-bottom: 12px; }
.coach details { margin-top: 8px; }
pre.vorschau {
  max-height: 260px; overflow: auto; margin: 8px 0 0; padding: 10px;
  background: var(--flaeche-innen); border-radius: 8px; font-size: 0.75rem; white-space: pre-wrap;
}
.karte.coach-antwort {
  --farbe: var(--info);
  padding: 0 0 0 14px;
  border-left: 3px solid var(--info);
  border-bottom: none;
}
.karte.coach-antwort .lob, .karte.coach-antwort .naechstes { margin-top: 8px; }
.karte.coach-antwort .befund { margin: 6px 0 8px; font-weight: 600; }
.karte.coach-antwort .herkunft { color: var(--text-leise); font-size: 0.78rem; margin-top: 12px; }
/* Ausführliche Antwort (ab 0.17.0): Abschnitte zum Auf- und Zuklappen */
.karte.coach-antwort details.abschnitt { margin-top: 14px; }
.karte.coach-antwort details.abschnitt:first-child { margin-top: 0; }
.karte.coach-antwort details.abschnitt > summary { font-size: 1rem; font-weight: 700; color: var(--text); }
.karte.coach-antwort details.abschnitt p { margin: 6px 0 0; line-height: 1.5; }
.karte.coach-antwort details.abschnitt ol,
.karte.coach-antwort details.abschnitt ul { margin: 6px 0 0; padding-left: 22px; line-height: 1.5; }
.karte.coach-antwort details.abschnitt li + li { margin-top: 6px; }
.karte.coach-antwort .trainingsplan li + li { margin-top: 10px; }
.karte.coach-antwort .trainingsplan p { margin-top: 2px; }
.karte.coach-antwort .trainingsplan .erfolg { color: var(--gut); }
.karte.coach-antwort > .gedanke { margin-top: 14px; }

/* Wer in den iPhone-Einstellungen "Bewegung reduzieren" an hat, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  button:active:not(:disabled), .upload span:active, .zaehlknopf:active { transform: none; }
}

/* Fortschritt (Meine Schwünge → 📈 Fortschritt): Filter, Kästen, Diagramme.
   Farben nur über die Variablen oben, damit Hell und Dunkel stimmen. */
/* Ansicht und Schläger: zwei schmale Knopfzeilen (Segmente wie bei Hell/Dunkel) */
.fortschritt-filter { display: grid; grid-template-columns: 2fr 3fr; gap: 8px; margin-bottom: 12px; }
.fortschritt-filter .segmente { margin: 0; }
.fortschritt-filter .segmente label { padding: 8px 2px; font-size: 0.85rem; }
.fortschritt-kasten {
  margin: 0 0 12px; padding: 12px; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--r); box-shadow: var(--schatten);
}
.fortschritt-kasten h3 { margin: 0 0 6px; font-size: 1rem; }
.fortschritt-kasten p { margin: 0 0 6px; }
.fortschritt-kasten ul { margin: 0; padding-left: 20px; }
.fortschritt-kasten .klein { font-size: 0.8rem; margin: 6px 0 0; }
/* Meilensteine als kleine Abzeichen nebeneinander */
.abzeichen { display: flex; flex-wrap: wrap; gap: 6px; }
.abzeichen span { padding: 4px 10px; border-radius: 999px; background: var(--skala-gut); font-size: 0.85rem; font-weight: 600; }
.trend-besser { color: var(--gut); font-weight: 700; }
.trend-schlechter { color: var(--verbessern); font-weight: 700; }
.verlauf-zeile { font-size: 0.85rem; color: var(--text-leise); }
.verlauf-tage { display: flex; justify-content: space-between; margin: 2px 0 0 36px !important; font-size: 0.75rem; color: var(--text-leise); }
.verlauf-bild { width: 100%; height: auto; display: block; margin-top: 4px; }
.verlauf-bild .band-gut { fill: var(--gut); fill-opacity: 0.28; }
.verlauf-bild .band-achtung { fill: var(--achtung); fill-opacity: 0.2; }
.verlauf-bild .band-verbessern { fill: var(--verbessern); fill-opacity: 0.1; }
.verlauf-bild .hilfslinie { stroke: var(--rand); stroke-width: 1; }
.verlauf-bild .hilfslinie.grenze { stroke: var(--gut); stroke-dasharray: 3 3; }
.verlauf-bild .skala-zahl { fill: var(--text-leise); font-size: 10px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.verlauf-bild .punkt-gut { fill: var(--gut); }
.verlauf-bild .punkt-achtung { fill: var(--achtung); }
.verlauf-bild .punkt-verbessern { fill: var(--verbessern); }
/* Wert liegt außerhalb der Skala: als Ring am Rand */
.verlauf-bild .randwert { fill: var(--flaeche); stroke-width: 2; }
.verlauf-bild .punkt-verbessern.randwert { stroke: var(--verbessern); }
.verlauf-bild .punkt-achtung.randwert { stroke: var(--achtung); }
.verlauf-bild .punkt-gut.randwert { stroke: var(--gut); }
.verlauf-bild .mittellinie { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }

/* Vorher/Nachher: zwei Bilder nebeneinander (auf dem iPhone je ca. 160 px breit) */
.vergleich-phasen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vergleich-phasen button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }
.vergleich-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vergleich-spalte { margin: 0; }
.vergleich-spalte figcaption { font-size: 0.8rem; color: var(--text-leise); margin-bottom: 4px; }
.vergleich-bild canvas { width: 100%; height: auto; display: block; border-radius: var(--r-klein); background: #000; }
.vergleich-zahlen { margin-top: 10px; font-size: 0.9rem; }

/* Live-Kamera: Ampelrahmen und Kurzwort (Etappe 12c). Der Rahmen ist eine Ebene ÜBER dem Video
   (Schatten nach innen am Rand), damit die Bühne nicht größer wird und das Bild nicht springt.
   Ein Schatten direkt an der Bühne läge unter dem Video und wäre unsichtbar. */
#liveBuehne { --ampel: transparent; }
#liveBuehne::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 10px var(--ampel);
  pointer-events: none;
}
#liveBuehne.ampel-gruen { --ampel: var(--ampel-gruen); }
#liveBuehne.ampel-gelb { --ampel: var(--ampel-gelb); }
#liveBuehne.ampel-rot { --ampel: var(--ampel-rot); }
#liveBuehne.ampel-grau { --ampel: var(--ampel-grau); }
.live-wort {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--ampel);
  color: #111;
  font-size: clamp(1.2rem, 6vw, 2rem);
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}
.live-wort:empty { display: none; }

/* Live-Aufnahme (Etappe 12d): Schlägerwahl und das unsichtbare Video, aus dem Clips geschnitten werden */
.live-schlaeger { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.versteckt-video { position: fixed; left: 0; top: 0; width: 64px; height: 64px; opacity: 0.01; pointer-events: none; }

/* Phasen-Abspieler (Vorher/Nachher): Video mit Skelett-Leinwand darüber */
.vergleich-abspielen { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.abspiel-rahmen { position: relative; }
.abspiel-rahmen video { display: block; width: 100%; height: auto; border-radius: var(--r-klein); background: #000; }
.abspiel-rahmen canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Läuft die Live-Kamera, rückt sie nach oben: Startkarte und Statuszeile weg, damit das Bild
   auf dem Handy ohne Scrollen zu sehen ist */
#analyseBereich:has(#liveBox:not([hidden])) :is(.start-karte, #status) { display: none; }