style.css

:root {
  --primary: #5b5bd6;
  --bg: #f5f5f7;
  --fläche: #ffffff;
  --text: #1c1c1e;
  --dim: #6e6e73;
  --linie: rgba(0, 0, 0, .08);
  --blase: rgba(120, 120, 128, .12);
  --warn-bg: rgba(240, 173, 78, .18);
  --gefahr: #e15759;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101014;
    --fläche: #1c1c21;
    --text: #f2f2f7;
    --dim: #98989f;
    --linie: rgba(255, 255, 255, .1);
    --blase: rgba(120, 120, 128, .22);
  }
}

* { box-sizing: border-box; margin: 0 }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.5;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  /* Aus demselben Grund deckend wie die untere Leiste. */
  position: sticky; top: 0; background: var(--bg);
  transform: translateZ(0); z-index: 5;
}
/* Der Titel darf nie umbrechen — sonst wächst die Kopfzeile auf zwei
   Zeilen, sobald rechts ein Abzeichen dazukommt. Lieber kürzen. */
.topbar h1 { font-size: 1.25rem; font-weight: 700; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.topbar .row { flex: 0 0 auto }

main { max-width: 640px; margin: 0 auto; padding: 8px 16px }

.card {
  background: var(--fläche); border-radius: 16px; padding: 16px;
  margin: 12px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.center { display: flex; flex-direction: column; align-items: center; gap: 12px }
.row { display: flex; align-items: center; gap: 10px }
.grow { flex: 1; min-width: 0; overflow-wrap: anywhere }
.dim { color: var(--dim); font-size: .9rem }
.fehler { color: var(--gefahr); font-size: .9rem; min-height: 1.4em; margin-top: 8px }

button { font: inherit; border: 0; cursor: pointer; color: inherit; background: none }
.primary {
  display: block; width: 100%; min-height: 50px; margin-top: 12px;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 1.05rem;
  border-radius: 14px;
}
.primary:active { filter: brightness(.9) }
.primary[disabled] { opacity: .5 }
.ghost {
  min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--linie); color: var(--primary); font-weight: 600;
}
.icon-btn { min-width: 44px; min-height: 44px; font-size: 1.35rem;
  color: var(--dim); display: inline-flex; align-items: center;
  justify-content: center }
.icon-btn:active { opacity: .6 }
.sheet-kopf { display: flex; align-items: center; justify-content: space-between;
  margin: -6px -6px 6px 0 }
.status { font-size: .72rem; padding: 3px 8px; border-radius: 999px;
  background: var(--blase); color: var(--dim); white-space: nowrap }
.status.warn { background: var(--warn-bg); color: var(--text) }

.mitte { text-align: center }
.textlink { display: block; width: 100%; min-height: 44px; margin-top: 10px;
  color: var(--dim); font-size: .92rem; text-align: center;
  text-decoration: underline; text-underline-offset: 3px }
.textlink.aktiv { color: var(--gefahr); font-weight: 600;
  text-decoration: none }
#rec-status.laeuft::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  margin-right: 7px; border-radius: 50%; background: var(--gefahr);
  animation: puls 1.4s infinite }

/* Kennzeichnet, was die App wirklich braucht und was nur hilft. */
.marke { display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: .72rem; font-weight: 600;
  vertical-align: 2px; white-space: nowrap;
  background: var(--warn-bg); color: var(--text) }
.marke.bonus { background: var(--blase); color: var(--dim) }

.schritte { margin: 0; padding-left: 26px }
.schritte li { margin: 10px 0 }
.schritte li b { display: block }
.schritte li span { display: block; margin-top: 1px }
/* Muss die Blockregel darüber schlagen, sonst rutscht die Marke
   in eine eigene Zeile statt neben die Überschrift. */
.schritte li .marke { display: inline-block; margin-top: 0 }

.rec-btn {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(91, 91, 214, .35);
  transition: transform .15s;
}
.rec-btn:active { transform: scale(.94) }
.rec-btn.aktiv { background: var(--gefahr); animation: puls 1.4s infinite }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 87, 89, .45) }
  50% { box-shadow: 0 0 0 16px rgba(225, 87, 89, 0) }
}

audio { width: 100%; margin: 10px 0 }
details { margin: 8px 0 }
/* Kein Flex: sonst werden Auszeichnungen im Text zu eigenen Spalten */
summary { min-height: 44px; padding: 11px 0; color: var(--dim) }
summary b { color: var(--text) }
/* Der Zusatz gehört unter die Beschriftung, nicht daneben. */
.opt .klein { display: block; margin-top: 0 }
.opt input {
  width: 76px; min-height: 44px; text-align: center; font: inherit;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
.opt-block textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 16px;
  font-family: inherit; line-height: 1.4; resize: vertical;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
.vorschlag { border: 1px solid var(--linie); background: var(--blase);
  border-radius: 999px; padding: 7px 14px; margin: 4px 6px 4px 0;
  font-size: .9rem; min-height: 38px }
.vorschlag.drin { opacity: .45 }
#transkript {
  width: 100%; margin-top: 8px; padding: 10px 12px; font-size: 16px;
  font-family: inherit; line-height: 1.4; resize: vertical;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
#transkript-info { margin-top: 6px }
.opt-block { display: block; margin: 10px 0 }
.opt-block input {
  width: 100%; min-height: 44px; margin-top: 6px; padding: 0 12px;
  font-size: 16px; font-family: inherit;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--bg); color: var(--text);
}
.opt select {
  min-height: 44px; padding: 0 10px; font-size: 16px; font-family: inherit;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--bg); color: var(--text);
}

.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--blase); border-top-color: var(--primary);
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg) } }

/* Ergebnis */
.sa-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--dim);
  font-size: .9rem; margin-bottom: 12px }
/* Die Tempozahlen stehen unter dem Balken und sollen sich vom Inhalt
   abheben, ohne ihn zu verdrängen. */
.sa-meta.tempo { font-size: .82rem; gap: 10px; margin: 2px 0 10px;
  opacity: .85 }
.chip { color: #fff; border-radius: 999px; padding: 2px 10px;
  font-weight: 600; font-size: .85rem; white-space: nowrap }
.sa-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden;
  margin: 4px 0 10px }
/* Flex mit Umbruch: die Legendeneinträge werden ohne Leerzeichen
   aneinandergehängt, es gäbe sonst keine Umbruchstelle und die Zeile
   schöbe die ganze Seite über den rechten Rand. */
.sa-legs { display: flex; flex-wrap: wrap; gap: 2px 14px; line-height: 2.2 }
.sa-leg { white-space: nowrap }
.sa-leg .dim { font-size: .85rem }
.sa-lane { position: relative; height: 14px; margin: 4px 0;
  background: var(--blase); border-radius: 3px }
.sa-lane div { position: absolute; top: 0; bottom: 0; border-radius: 3px }
.sa-ticks { display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--dim) }
.sa-timeline { margin: 16px 0 4px }
.sa-h { margin: 20px 0 6px; font-size: 1.1rem; font-weight: 700 }
.sa-msg { display: flex; gap: 10px; margin: 12px 0 }
.sa-rail { flex: 0 0 4px; border-radius: 2px }
.sa-msg-body { min-width: 0; flex: 1 }
.sa-msg-head { font-size: .78rem; color: var(--dim); margin-bottom: 3px }
.sa-bubble { background: var(--blase); padding: 10px 14px;
  border-radius: 12px; overflow-wrap: anywhere }
/* Unsichere Wörter: erkennbar, aber nicht schreiend — man soll den Text
   weiter lesen können und trotzdem sehen, wo er wackelt. */
.wackelig { color: var(--dim); text-decoration: underline dotted;
  text-underline-offset: 3px; cursor: pointer }
.wackelig:active { opacity: .6 }
.berichtigt { font-weight: 600; text-decoration: none }
.sa-warn { margin-top: 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--warn-bg); font-size: .9rem }
#progress-hinweis { max-width: 26em }
#progress-hinweis.frei { color: var(--primary); font-weight: 600 }
.gelernt { margin-top: 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--blase); color: var(--dim); font-size: .85rem }
.md-aktionen { margin-top: 16px }
.breit { display: block; width: 100%; margin-top: 8px; text-align: center }
.namen-zeile { margin: 10px 0 }
.punkt { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 14px }
.namen-feld { flex: 1; min-height: 44px; padding: 0 12px; font-size: 16px;
  font-family: inherit; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--bg); color: var(--text) }

/* Verlauf */
/* Klebt unter der Kopfzeile. Deren Höhe wird zur Laufzeit gemessen und
   als Variable gesetzt — geraten wäre sie je nach Gerät und
   Sicherheitsabstand daneben. */
.detail-kopf {
  position: sticky; top: var(--kopfhoehe, 56px); z-index: 4;
  gap: 8px; padding: 8px 0; margin-bottom: 4px;
  background: var(--bg); transform: translateZ(0);
}
.detail-kopf .primary { margin-top: 0 }
/* Im Kopf nebeneinander statt jeder über die volle Breite. */
.primary.knapp { width: auto; flex: 1; min-height: 44px; font-size: .95rem;
  padding: 0 14px }
.detail-kopf .ghost { flex: 0 0 auto; white-space: nowrap }

.v-card { width: 100%; text-align: left; background: var(--fläche);
  border-radius: 16px; padding: 14px 16px; margin: 10px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06) }
.v-card:active { filter: brightness(.95) }
.v-titel { font-weight: 600 }
.v-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--dim);
  font-size: .85rem; margin-top: 2px }

.md { overflow-x: auto }
.md h1 { font-size: 1.25rem; margin: 8px 0 }
.md h2 { font-size: 1.05rem; margin: 16px 0 6px }
.md table { border-collapse: collapse; width: 100%; font-size: .9rem }
.md th, .md td { border: 1px solid var(--linie); padding: 6px 8px; text-align: left }
.md p { margin: 8px 0 }

/* Tabbar */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: flex;
  /* Deckend und ohne backdrop-filter. Ein durchscheinender Hintergrund
     muss bei jedem Scrollschritt neu berechnet werden; iOS schiebt das
     auf und die feststehende Leiste bleibt dann mitten im Text stehen.
     Die eigene Komposition-Ebene hält sie an ihrem Platz. */
  background: var(--fläche);
  transform: translateZ(0);
  will-change: transform;
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab { flex: 1; min-height: 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-size: .75rem; color: var(--dim) }
.tab.active { color: var(--primary); font-weight: 600 }
.tab-icon { font-size: 1.25rem }

/* Login */
.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-start; z-index: 10; padding: 16px;
  overflow-y: auto }
.sheet { background: var(--fläche); width: 100%; border-radius: 20px;
  padding: 24px 20px; max-width: 480px;
  margin: max(48px, env(safe-area-inset-top)) auto auto }
.sheet h2 { margin-bottom: 6px }
.klein { font-size: .8rem; margin-top: 6px }
.sheet input { width: 100%; min-height: 50px; margin-top: 14px; padding: 0 14px;
  font-size: 16px; font-family: inherit;
  border: 1px solid var(--linie); border-radius: 12px;
  background: var(--bg); color: var(--text) }

#toast { position: fixed; left: 16px; right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  background: var(--text); color: var(--bg); padding: 12px 16px;
  border-radius: 12px; text-align: center; z-index: 20;
  font-size: .9rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .25) }