/* =====================================================================
   Vorleser — Stylesheet im Erscheinungsbild von OK Digital
   Mobil zuerst und barrierearm: grosse Trefferflaechen, klarer Fokusring.
   Durchgehend dunkel wie ok-digital.at — bewusst keine Hell-Variante.
   Schriften sind selbst gehostet, es wird nichts bei Google abgerufen;
   keine Frameworks.

   EINE Ausnahme vom Markenbild, mit Absicht: der Lesetext benutzt die
   Systemschrift statt JetBrains Mono. Siehe Kommentar bei --font-lesen.

   Enthaelt bewusst auch die Klassen, die app.js zur Laufzeit erzeugt
   (.einstellung, .dok-*, .treffer, #hinweis-ocr, .absatz, .tab--aktiv …).
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Farb- und Massvariablen
   --------------------------------------------------------------- */

/* Marken-Schriften, selbst gehostet — es wird nichts bei Google abgerufen.
   Beide Familien stehen unter der SIL Open Font License, Selbsthosting ist
   ausdruecklich erlaubt. Eingebunden sind nur die tatsaechlich benutzten
   Schnitte, jeweils auf den lateinischen Zeichensatz beschnitten (9-20 KB). */
@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/ChakraPetch-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/ChakraPetch-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../assets/fonts/ChakraPetch-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Das Erscheinungsbild von OK Digital ist durchgehend dunkel — es gibt
     bewusst keine Hell-Variante, damit die App wie die Website wirkt. */
  color-scheme: dark;

  /* --- Flaechen und Text ------------------------------------------------ */
  --bg:            #070f0d;
  --bg-erhoben:    #0d1f1a;
  --bg-gedaempft:  #112722;
  --text:          #e9f6f1;
  --text-leise:    #a9c4bb;
  --rand:          rgba(140, 255, 214, .16);
  --rand-stark:    rgba(140, 255, 214, .32);

  /* --- Akzente ---------------------------------------------------------- */
  --akzent:        #ffe83d;   /* Signal-Gelb der Marke */
  --akzent-hell:   #fff59a;
  --akzent-text:   #070f0d;   /* auf Gelb wird IMMER dunkel geschrieben */
  --akzent-2:      #35f2cf;   /* Tuerkis der Marke */
  --fokus:         #35f2cf;   /* Fokusring: Tuerkis hebt sich vom gelben
                                 Akzent ab, damit beides unterscheidbar bleibt */

  /* --- Warnungen -------------------------------------------------------- */
  --warn-bg:       #2a2410;
  --warn-rand:     #b8862f;
  --warn-text:     #f6e3ac;

  --gefahr:        #ff9b9b;

  /* --- Lesezustaende der Woerter ----------------------------------------
     Die drei Zustaende unterscheiden sich zusaetzlich zum Farbton ueber
     Helligkeit und Unterstreichungsart, damit sie auch fuer Farbfehlsichtige
     auseinanderzuhalten sind. */
  --bereich-bg:    rgba(53, 242, 207, .12);
  --bereich-linie: #35f2cf;
  --satz-bg:       rgba(255, 232, 61, .10);
  --satz-linie:    #ffe83d;
  --aktiv-bg:      #ffe83d;
  --aktiv-text:    #070f0d;

  /* --- Schriften --------------------------------------------------------
     Display und Bedienoberflaeche folgen der Marke. Der LESETEXT nicht:
     JetBrains Mono ist eine Schreibmaschinenschrift und auf Absatzlaenge
     anstrengend — in einer App, deren Zweck das Mitlesen ist, waere das der
     falsche Sparzwang. Dort steht deshalb die Systemschrift. */
  --font-display:  "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-body:     "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-lesen:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Masse ------------------------------------------------------------ */
  --tap:           48px;      /* Mindest-Trefferflaeche */
  --radius:        12px;
  --raum:          16px;
  --lesetext-groesse: 130%;
  --schatten:      0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);

  /* Abgeschraegte Ecke aus dem Marken-Kit. */
  --chamfer: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ---------------------------------------------------------------
   2. Grundlagen
   --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  margin: 0 0 .4em;
  font-family: var(--font-display);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: .01em;
}

p { margin: 0 0 .8em; }

img { max-width: 100%; }

/* `hidden` muss immer gewinnen — app.js schaltet Ansichten, Reiter und
   Hinweise ueber dieses Attribut. */
[hidden] { display: none !important; }

/* Sichtbarer, kraeftiger Fokusring auf allen bedienbaren Elementen. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* Nur fuer Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.noscript-hinweis {
  margin: 0;
  padding: var(--raum);
  background: var(--warn-bg);
  color: var(--warn-text);
  border-bottom: 2px solid var(--warn-rand);
}

/* ---------------------------------------------------------------
   3. Ansichten
   --------------------------------------------------------------- */

.view { display: none; }
.view.view--aktiv { display: block; }

.seite {
  max-width: 40rem;
  margin: 0 auto;
  padding:
    calc(var(--raum) + env(safe-area-inset-top))
    calc(var(--raum) + env(safe-area-inset-right))
    calc(var(--raum) * 2 + env(safe-area-inset-bottom))
    calc(var(--raum) + env(safe-area-inset-left));
}

/* ---------------------------------------------------------------
   4. Schaltflaechen
   --------------------------------------------------------------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: 100%;
  min-height: var(--tap);
  margin: 0 0 12px;
  padding: 12px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-erhoben);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:last-child { margin-bottom: 0; }

.btn--primaer {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-text);
}

.btn--sekundaer {
  background: var(--bg-erhoben);
  border-color: var(--rand);
}

.btn--schlicht {
  background: transparent;
  border-color: transparent;
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.btn-gross {
  min-height: 72px;
  font-size: 1.15em;
}

@media (hover: hover) {
  .btn--primaer:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }
  .btn:not(.btn--primaer):not(.btn--schlicht):hover { background: var(--bg-gedaempft); }
}

.btn:active { transform: translateY(1px); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .btn-icon:hover { background: var(--bg-gedaempft); }
}

.icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

.icon--gross { width: 30px; height: 30px; }

/* Aussparung im Kamera-Symbol, damit es in beiden Modi lesbar bleibt. */
.icon-loch { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------------------------------------------------------------
   5. Datei-Eingaben
   WICHTIG: niemals display:none — iOS oeffnet sonst den Bildwaehler
   nicht. Stattdessen visuell verstecken, aber im Layout belassen.
   --------------------------------------------------------------- */

.datei-eingabe {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
}

.aufnahme-gruppe { position: relative; }

/* Die versteckte Eingabe ist per Tastatur erreichbar; der Fokus wird
   an der zugehoerigen Beschriftung sichtbar gemacht. */
.aufnahme-gruppe:has(#file-input:focus-visible) #btn-foto,
.aufnahme-gruppe:has(#file-input-galerie:focus-visible) #btn-galerie {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   6. Startansicht
   --------------------------------------------------------------- */

.start-kopf { margin-bottom: calc(var(--raum) * 1.5); }

.start-titel {
  font-size: 1.9rem;
  letter-spacing: -.01em;
}

.start-untertitel {
  color: var(--text-leise);
  margin-bottom: 0;
}

.abschnitt { margin-top: calc(var(--raum) * 1.75); }

.abschnitt-titel {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-leise);
  margin-bottom: .6em;
}

/* Solange app.js die Liste noch nicht gefuellt hat, bleibt der
   Abschnitt weg — sonst blitzt eine leere Ueberschrift auf. */
#abschnitt-dokumente:has(#liste-dokumente:empty) { display: none; }

.dokumentenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-erhoben);
  overflow: hidden;
}

.dokumentenliste li + li { border-top: 1px solid var(--rand); }

.dokumentenliste li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 0;
}

.dokumentenliste .liste-leer {
  display: block;
  padding: 14px;
  color: var(--text-leise);
}

/* Von app.js erzeugt: Button mit Titel- und Meta-Zeile. */
.dok-oeffnen {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap);
  padding: 10px 6px 10px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dok-titel {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dok-meta {
  font-size: .85em;
  color: var(--text-leise);
}

.dok-loeschen {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: transparent;
  color: var(--gefahr);
  font: inherit;
  font-size: .9em;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   7. Hinweise
   --------------------------------------------------------------- */

.hinweis {
  margin: 0 0 var(--raum);
  color: var(--text-leise);
  font-size: .95em;
}

/* Leere Hinweisfelder verschwinden von selbst. */
.hinweis:empty { display: none; }

.hinweis--warnung {
  padding: 12px 14px;
  border: 1px solid var(--warn-rand);
  border-left-width: 5px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-weight: 500;
  text-align: left;
}

.hinweis--leise { color: var(--text-leise); }
.hinweis--klein { font-size: .88em; }

/* ---------------------------------------------------------------
   8. Arbeitsansicht
   app.js haengt #hinweis-qualitaet und #hinweis-ocr direkt an
   #view-arbeit an — deshalb ist die Ansicht selbst der Container.
   --------------------------------------------------------------- */

#view-arbeit.view--aktiv {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  margin: 0 auto;
  padding:
    calc(var(--raum) * 2.5 + env(safe-area-inset-top))
    calc(var(--raum) + env(safe-area-inset-right))
    calc(var(--raum) * 2 + env(safe-area-inset-bottom))
    calc(var(--raum) + env(safe-area-inset-left));
}

.arbeit-titel {
  font-size: 1.4rem;
  text-align: center;
}

/* Sobald der Hinweis „kaum Text erkannt" steht, waere „Einen Moment"
   irrefuehrend. */
#view-arbeit:has(#hinweis-ocr:not([hidden])) .arbeit-titel { display: none; }

#fortschritt {
  display: block;
  width: 100%;
  height: 14px;
  margin: var(--raum) 0;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--bg-gedaempft);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

#fortschritt::-webkit-progress-bar { background: var(--bg-gedaempft); }
#fortschritt::-webkit-progress-value { background: var(--akzent); }
#fortschritt::-moz-progress-bar { background: var(--akzent); }

.arbeit-text {
  min-height: 1.5em;
  text-align: center;
  color: var(--text-leise);
}

/* Qualitaetshinweis (von app.js erzeugt) */
#hinweis-qualitaet {
  margin: var(--raum) 0 0;
  padding: 12px 14px;
  border: 1px solid var(--warn-rand);
  border-left-width: 5px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: .95em;
}

/* Panel „Erkennung war schlecht" (von app.js erzeugt) */
#hinweis-ocr {
  margin-top: var(--raum);
  padding-top: var(--raum);
  border-top: 1px solid var(--rand);
}

#hinweis-ocr h2 { font-size: 1.25rem; }

#hinweis-ocr p {
  color: var(--text-leise);
  font-size: .95em;
}

.ocr-neu-sprache { margin: 0 0 12px; }

.ocr-neu-sprache label {
  display: block;
  margin-bottom: 6px;
  font-size: .95em;
  color: var(--text-leise);
}

.ocr-neu-sprache select {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-erhoben);
  color: var(--text);
  font: inherit;
}

/* ---------------------------------------------------------------
   9. Leseransicht — Geruest
   Kopf und Steuerleiste bleiben stehen, nur der Textbereich scrollt.
   --------------------------------------------------------------- */

#view-leser.view--aktiv {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.leser-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding:
    calc(6px + env(safe-area-inset-top))
    calc(8px + env(safe-area-inset-right))
    6px
    calc(8px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--rand);
  background: var(--bg-erhoben);
}

.leser-titel {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabs {
  display: flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-gedaempft);
}

.tab {
  min-height: 42px;
  min-width: 60px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  font-weight: 600;
  font-size: .95em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* app.js setzt beides: aria-selected und .tab--aktiv. */
.tab[aria-selected="true"],
.tab.tab--aktiv {
  background: var(--bg-erhoben);
  color: var(--text);
  box-shadow: var(--schatten);
}

/* Die beiden Bereiche teilen sich den verbleibenden Platz und scrollen. */
.pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    var(--raum)
    calc(var(--raum) + env(safe-area-inset-right))
    var(--raum)
    calc(var(--raum) + env(safe-area-inset-left));
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------
   10. Lesetext
   --------------------------------------------------------------- */

/* Der Lesetext ist die eine Stelle, an der die Marke zurücktritt: hier wird
   tatsächlich gelesen, oft von Menschen, denen Lesen ohnehin schwerfällt.
   Proportionalschrift, grosszuegige Zeilenhoehe, begrenzte Zeilenlaenge. */
.reflow {
  max-width: 34rem;
  margin: 0 auto;
  font-family: var(--font-lesen);
  font-size: var(--lesetext-groesse);
  line-height: 1.8;
  letter-spacing: .005em;
  hyphens: none;
}

.reflow p,
.reflow .absatz { margin: 0 0 1.1em; }

.reflow p:last-child,
.reflow .absatz:last-child { margin-bottom: 0; }

.wort {
  border-radius: .18em;
  padding: .04em 0;
  cursor: pointer;
  transition: background-color 90ms linear, color 90ms linear;
}

/* Zustand 0: gewaehlter Startpunkt im Modus "ab hier lesen".
   Muss ohne Farbton erkennbar sein: senkrechter Balken davor plus Fettung —
   eine Klammer, die sagt "hier geht es los". */
.wort--start {
  box-shadow: inset .18em 0 0 0 var(--akzent);
  padding-left: .3em;
  font-weight: 600;
}

/* Zustand 1: im gewaehlten Bereich — warmer Grund, gepunktete Linie. */
.wort--bereich {
  background: var(--bereich-bg);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--bereich-linie);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

/* Zustand 2: aktueller Satz — kuehler Grund, durchgezogene Linie. */
.wort--satz {
  background: var(--satz-bg);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--satz-linie);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}

/* Zustand 3: aktuelles Wort — umgekehrter Kontrast, deshalb auch ohne
   Farbwahrnehmung eindeutig. Keine Schriftstaerkeaenderung, damit die
   Zeile beim Weiterspringen nicht neu umbricht. */
.wort--aktiv {
  background: var(--aktiv-bg);
  color: var(--aktiv-text);
  text-decoration: none;
  box-shadow: 0 0 0 .12em var(--aktiv-bg);
  scroll-margin-block: 35vh;
}

/* ---------------------------------------------------------------
   11. Fotoansicht
   Kein object-fit, kein Rahmen, kein Innenabstand am Bild — sonst
   verschiebt sich die Umrechnung von Tap zu Bildkoordinate.

   `touch-action: none` steht hier mit Absicht NICHT: phototap.js setzt es
   nur dann, wenn Pointer Events vorhanden sind und es das Schieben und
   Zoomen selbst uebernimmt. Fest im Stylesheet wuerde es den Rueckfallweg
   ohne Pointer Events lahmlegen — das Foto liesse sich gar nicht bewegen.
   --------------------------------------------------------------- */

#foto-wrapper {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-gedaempft);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#foto {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0;
  transform-origin: 0 0;
  -webkit-user-drag: none;
  user-select: none;
}

/* Wortweises Nachjustieren unter dem Foto (SPEC 4.8: "zwei Buttons
   '◀ Wort' / 'Wort ▶' zum Nachjustieren").
   Eigene Regel statt .dialog-aktionen: diese Zeile steht in einer Ansicht und
   nicht in einem Dialog, sie richtet sich an der Breite des Fotos aus, und ihre
   beiden Knoepfe stehen IMMER nebeneinander — untereinander waere das
   Nachjustieren nach links und rechts nicht mehr ablesbar. */
.foto-justieren {
  display: flex;
  gap: 10px;
  max-width: 40rem;
  margin: var(--raum) auto 0;
}

.foto-justieren .btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   12. Modusleiste, Status und Suche
   --------------------------------------------------------------- */

#leiste-modus {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px calc(var(--raum) + env(safe-area-inset-right)) 0 calc(var(--raum) + env(safe-area-inset-left));
}

.modus-option {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-height: var(--tap);
  padding: 6px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-erhoben);
  font-size: .95em;
  cursor: pointer;
}

.modus-option input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--akzent);
}

.modus-option:has(input:checked) {
  border-color: var(--akzent);
  border-width: 2px;
  background: var(--satz-bg);
  font-weight: 600;
}

.modus-option:has(input:focus-visible) {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.status {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px calc(var(--raum) + env(safe-area-inset-right)) 0 calc(var(--raum) + env(safe-area-inset-left));
  min-height: 1.4em;
  color: var(--text-leise);
  font-size: .92em;
}

.suche-zeile {
  flex: 0 0 auto;
  padding: 8px calc(var(--raum) + env(safe-area-inset-right)) 0 calc(var(--raum) + env(safe-area-inset-left));
}

#suche {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-erhoben);
  color: var(--text);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.trefferliste {
  flex: 0 0 auto;
  list-style: none;
  margin: 8px calc(var(--raum) + env(safe-area-inset-right)) 0 calc(var(--raum) + env(safe-area-inset-left));
  padding: 0;
  max-height: 32vh;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-erhoben);
}

.trefferliste:empty { display: none; }

.trefferliste li + li { border-top: 1px solid var(--rand); }

/* app.js erzeugt in jedem li einen button.treffer bzw. ein li.treffer-leer. */
.trefferliste .treffer {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.trefferliste .treffer-leer {
  padding: 12px 14px;
  color: var(--text-leise);
  font-size: .95em;
}

/* ---------------------------------------------------------------
   13. Steuerleiste unten
   --------------------------------------------------------------- */

#steuerung {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding:
    10px
    calc(var(--raum) + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom))
    calc(var(--raum) + env(safe-area-inset-left));
  border-top: 1px solid var(--rand);
  background: var(--bg-erhoben);
}

.steuerung-tasten {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.btn-rund {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-rund--primaer {
  width: 64px;
  height: 64px;
  border-color: var(--akzent);
  background: var(--akzent);
  color: var(--akzent-text);
}

.btn-rund--primaer .icon { width: 30px; height: 30px; }

.btn-rund:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (hover: hover) {
  .btn-rund:not(:disabled):not(.btn-rund--primaer):hover { background: var(--bg-gedaempft); }
  .btn-rund--primaer:not(:disabled):hover { background: var(--akzent-hell); }
}

/* Symbolwechsel allein ueber data-state, das app.js setzt. */
#btn-play[data-state="playing"] .icon-play { display: none; }
#btn-play:not([data-state="playing"]) .icon-pause { display: none; }

.steuerung-regler,
.steuerung-stimme {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.steuerung-regler label,
.steuerung-stimme label {
  flex: 0 0 auto;
  min-width: 4.2em;
  font-size: .9em;
  color: var(--text-leise);
}

#tempo {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--tap);
  accent-color: var(--akzent);
  background: transparent;
}

#tempo-wert {
  flex: 0 0 auto;
  min-width: 3.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: .95em;
}

#stimme {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .95em;
}

#tempo:disabled,
#stimme:disabled { opacity: .45; }

#hinweis-stimme { margin: 0; }

/* ---------------------------------------------------------------
   14. Dialoge
   app.js baut den Inhalt flach auf: h2, mehrere .einstellung-Bloecke
   und Buttons mit der Klasse .btn.
   --------------------------------------------------------------- */

dialog {
  width: min(34rem, 100vw);
  max-width: 100vw;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto auto 0;            /* auf dem Handy von unten */
  padding:
    var(--raum)
    var(--raum)
    calc(var(--raum) + env(safe-area-inset-bottom));
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-erhoben);
  color: var(--text);
  box-shadow: var(--schatten);
  overflow-y: auto;
  overscroll-behavior: contain;
}

dialog:not([open]) { display: none !important; }

dialog::backdrop { background: rgba(0, 0, 0, .5); }

@media (min-width: 40rem) {
  dialog {
    margin: auto;
    border-radius: var(--radius);
    max-height: 88dvh;
  }
}

dialog h2 {
  margin: 0 0 var(--raum);
  font-size: 1.25rem;
}

dialog > p {
  color: var(--text-leise);
  font-size: .95em;
}

dialog textarea {
  display: block;
  width: 100%;
  min-height: 10em;
  margin-bottom: var(--raum);
  padding: 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.dialog-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dialog-aktionen .btn {
  flex: 1 1 12rem;
  margin-bottom: 0;
}

/* Ein Einstellungsfeld: Beschriftung, Bedienelement, optionaler Hinweis. */
.einstellung {
  margin: 0 0 var(--raum);
  padding-bottom: var(--raum);
  border-bottom: 1px solid var(--rand);
}

.einstellung:last-of-type { border-bottom: 0; }

.einstellung > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.einstellung-titel {
  margin: 0 0 8px;
  font-weight: 600;
}

.einstellung-hinweis {
  margin: 8px 0 0;
  color: var(--text-leise);
  font-size: .88em;
}

.einstellung > select,
.einstellung > input[type="text"] {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.einstellung > input[type="range"] {
  width: 100%;
  height: var(--tap);
  accent-color: var(--akzent);
  background: transparent;
}

/* Ankreuzfeld: Kaestchen und Beschriftung nebeneinander. */
.einstellung:has(> input[type="checkbox"]) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
}

.einstellung:has(> input[type="checkbox"]) > input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--akzent);
}

.einstellung:has(> input[type="checkbox"]) > label {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
}

.einstellung:has(> input[type="checkbox"]) > .einstellung-hinweis {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Regler mit Wertanzeige daneben. */
.einstellung:has(> output) {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  align-items: center;
}

.einstellung:has(> output) > label { grid-column: 1 / -1; }
.einstellung:has(> output) > input[type="range"] { grid-column: 1; }

.einstellung:has(> output) > output {
  grid-column: 2;
  min-width: 3.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.einstellung:has(> output) > .einstellung-hinweis { grid-column: 1 / -1; }

/* ---------------------------------------------------------------
   14a. Seitennavigation (mehrseitige Dokumente)
   Beschriftete Knoepfe statt versteckter Gesten: der grosse Knopf
   "Seite 3 von 12" ist der Kern, Wischen nur eine Zugabe im Foto.
   --------------------------------------------------------------- */

.seitenleiste {
  flex: 0 0 auto;
  padding: 8px calc(var(--raum) + env(safe-area-inset-right)) 0 calc(var(--raum) + env(safe-area-inset-left));
}

.seitenleiste-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-seite {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  margin: 0;
  font-size: 1.05em;
  font-variant-numeric: tabular-nums;
}

.seitenleiste .btn-rund:disabled { opacity: .4; }

.btn-lesestelle {
  margin: 8px 0 0;
  min-height: var(--tap);
}

#hinweis-foto { margin: 8px 0 0; }

/* ---------------------------------------------------------------
   14b. Seitenwaehler (Dialog)
   --------------------------------------------------------------- */

.seiten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0 0 var(--raum);
  padding: 0;
  max-height: 58vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.seiten-eintrag { margin: 0; }

.seiten-knopf {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  padding: 6px;
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: .9em;
  text-align: center;
  cursor: pointer;
}

.seite--aktiv .seiten-knopf {
  border-color: var(--akzent);
  background: var(--satz-bg);
  font-weight: 600;
}

.seiten-bild {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-gedaempft);
}

/* Ohne Miniaturbild: ehrlicher Platzhalter mit der Seitenzahl. */
.seiten-bild--leer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-leise);
  font-size: 1.6em;
  font-weight: 700;
}

.seiten-label { display: block; }

.seiten-zustand {
  display: block;
  color: var(--text-leise);
  font-size: .85em;
  font-weight: 400;
}

.seiten-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.seiten-aktionen .stapel-knopf {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 6px 8px;
  font-size: .82em;
}

/* ---------------------------------------------------------------
   14c. Stapel-Aufnahme (Arbeitsansicht)
   --------------------------------------------------------------- */

.stapel-liste {
  list-style: none;
  margin: var(--raum) 0 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--bg-erhoben);
}

.stapel-liste:empty { display: none; }

.stapel-liste li + li { border-top: 1px solid var(--rand); }

.stapel-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  min-height: var(--tap);
}

.stapel-name {
  flex: 0 0 auto;
  font-weight: 600;
}

.stapel-zustand {
  flex: 1 1 6rem;
  min-width: 0;
  color: var(--text-leise);
  font-size: .9em;
}

.stapel-knopf {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .88em;
  cursor: pointer;
}

.stapel-knopf:disabled { opacity: .4; cursor: not-allowed; }
.stapel-knopf--gefahr { color: var(--gefahr); }

/* Zustaende: zusaetzlich zur Farbe ein Balken links, damit sie auch ohne
   Farbwahrnehmung unterscheidbar sind. */
.seite--wartet  { box-shadow: inset 4px 0 0 0 var(--rand); }
.seite--laeuft  { box-shadow: inset 4px 0 0 0 var(--akzent); }
.seite--fertig  { box-shadow: inset 4px 0 0 0 var(--satz-linie); }
.seite--fehler  { box-shadow: inset 4px 0 0 0 var(--gefahr); }
.seite--fehler .stapel-zustand { color: var(--gefahr); }

.stapel-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--raum) 0;
}

.stapel-aktionen .btn {
  flex: 1 1 12rem;
  margin-bottom: 0;
}

/* Ohne Stapel gibt es auch keine Stapel-Knoepfe. */
#view-arbeit:has(#stapel-liste:empty) .stapel-aktionen { display: none; }

/* Hinweis im Lesetext, wenn eine Seite (noch) keinen Text hat. */
.seite-leer {
  color: var(--text-leise);
  font-style: italic;
}

/* ---------------------------------------------------------------
   15. Grosse Bildschirme
   --------------------------------------------------------------- */

@media (min-width: 48rem) {
  body { font-size: 18px; }

  .pane { padding-top: calc(var(--raum) * 1.5); }

  /* Modusleiste, Status, Suche und Steuerung folgen der Lesespalte. */
  #leiste-seiten,
  #leiste-modus,
  #status-auswahl,
  .suche-zeile,
  .trefferliste {
    width: 100%;
    max-width: calc(34rem + var(--raum) * 2);
    margin-left: auto;
    margin-right: auto;
  }

  #steuerung > .steuerung-tasten,
  #steuerung > .steuerung-regler,
  #steuerung > .steuerung-stimme,
  #steuerung > #hinweis-stimme {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------------------------------------------------------
   16. Bewegung reduzieren
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .pane { scroll-behavior: auto; }
  .btn:active { transform: none; }
}

/* ---------------------------------------------------------------
   17. Hoher Kontrast
   --------------------------------------------------------------- */

@media (prefers-contrast: more) {
  :root {
    --rand: currentColor;
    --text-leise: var(--text);
  }

  .wort--satz { outline: 1px solid var(--satz-linie); }
  .wort--bereich { outline: 1px dotted var(--bereich-linie); }
  .wort--start { outline: 2px solid var(--akzent); }
}


/* ---------------------------------------------------------------
   14. Marken-Rahmen (OK Digital)
   Kopfzeichen, Herkunftshinweis, Installationskarte und Fussbereich.
   Bewusst nur in der STARTANSICHT - in der Leseransicht hat nichts
   davon etwas verloren, dort zaehlt allein der Text.
   --------------------------------------------------------------- */

.marke {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-bottom: 1.1rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  line-height: 1;
}

.marke__zeichen { display: block; }

.marke__text {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  letter-spacing: .04em;
}

.marke__text strong {
  font-weight: 700;
  color: var(--akzent);
}

.marke__text small {
  font-size: .95em;
  font-weight: 500;
  color: var(--text-leise);
}

@media (hover: hover) {
  .marke:hover .marke__text small { color: var(--text); }
}

/* Der Titel der Startseite in der Markenschrift. */
.start-titel {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
}

/* Karten mit abgeschraegter Ecke - das Erkennungsmerkmal der Marke.
   clip-path statt border-radius, damit die Kante wirklich gerade ist. */
.karte-herkunft,
.karte-install {
  margin-top: 1.6rem;
  padding: var(--raum);
  background: var(--bg-erhoben);
  border: 1px solid var(--rand);
  clip-path: var(--chamfer);
}

.karte-herkunft p:last-child,
.karte-install p:last-child { margin-bottom: 0; }

.karte-install { border-color: var(--rand-stark); }

.install-text { color: var(--text-leise); }

/* ------------------------------- Fussbereich ------------------------------ */

.site-fuss {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rand);
  background: #050b0a;
  font-size: .92em;
}

.site-fuss .seite {
  display: grid;
  gap: 1.4rem;
  padding-bottom: 0;
}

@media (min-width: 40rem) {
  .site-fuss .seite {
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
  }
}

.fuss-marke {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.fuss-marke p {
  margin: 0;
  color: var(--text-leise);
  line-height: 1.6;
}

.fuss-marke strong { color: var(--text); }

.fuss-spalte h3 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-size: .95em;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
}

.fuss-spalte p { margin: 0 0 .35em; }

.fuss-spalte address {
  margin-top: .7em;
  font-style: normal;
  color: var(--text-leise);
  line-height: 1.6;
}

.fuss-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fuss-links li { margin-bottom: .35em; }

.site-fuss a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rand-stark);
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .site-fuss a:hover {
    color: var(--akzent);
    text-decoration-color: var(--akzent);
  }
}

/* Alles, was angetippt wird, braucht auch im Fuss eine ordentliche
   Trefferflaeche - Telefonnummer und Rechtslinks werden am Handy benutzt. */
.site-fuss a {
  display: inline-block;
  min-height: 32px;
  padding: 4px 0;
}

.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4rem;
  padding-top: 1rem;
  padding-bottom: calc(var(--raum) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rand);
  color: var(--text-leise);
}

.fuss-recht {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
}

/* ------------------------------ Rechtstexte ------------------------------- */

.rechtstext {
  max-width: 44rem;
  font-family: var(--font-lesen);
  line-height: 1.7;
}

.rechtstext h1,
.rechtstext h2 { font-family: var(--font-display); }

.rechtstext h2 {
  margin-top: 1.8em;
  font-size: 1.15em;
  color: var(--akzent);
}

.rechtstext h3 {
  margin-top: 1.3em;
  font-size: 1em;
}

.rechtstext dl { margin: 0 0 1em; }
.rechtstext dt { font-weight: 600; margin-top: .7em; }
.rechtstext dd { margin: 0 0 0 1.2em; color: var(--text-leise); }

.rechtstext table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}

.rechtstext th,
.rechtstext td {
  padding: .5em .6em;
  border-bottom: 1px solid var(--rand);
  text-align: left;
  vertical-align: top;
}

.rechtstext th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}

.zurueck-link {
  display: inline-block;
  margin-bottom: 1.4rem;
  color: var(--akzent);
}


/* ---------------------------------------------------------------
   15. Grosse Bildschirme
   Die App ist Handy-zuerst gebaut. Auf einem breiten Bildschirm waere
   eine schmale Spalte in der Mitte aber Verschwendung - und der eigent-
   liche Gewinn des Desktops ist, Foto UND Text zugleich zu sehen.
   --------------------------------------------------------------- */

@media (min-width: 62rem) {

  /* Mehr Luft, aber die Zeilenlaenge des Lesetextes bleibt begrenzt -
     eine ueber den ganzen Bildschirm laufende Zeile liest sich schlecht. */
  .seite { max-width: 60rem; }

  /* Startseite: Aufnahme links, gespeicherte Dokumente rechts. Beides
     ist damit ohne Scrollen sichtbar. */
  #view-start .seite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "kopf     kopf"
      "hinweis1 hinweis1"
      "hinweis2 hinweis2"
      "aufnahme dokumente"
      "einfuegen dokumente"
      "hinweis3 dokumente"
      "install  dokumente"
      "herkunft herkunft";
    column-gap: 2.5rem;
    align-content: start;
  }

  #view-start .start-kopf      { grid-area: kopf; }
  #view-start #hinweis-speech  { grid-area: hinweis1; }
  #view-start #hinweis-speicher{ grid-area: hinweis2; }
  #view-start .aufnahme-gruppe { grid-area: aufnahme; }
  #view-start #btn-text-einfuegen { grid-area: einfuegen; }
  #view-start .hinweis--leise  { grid-area: hinweis3; }
  #view-start #abschnitt-dokumente { grid-area: dokumente; margin-top: 0; }
  #view-start #abschnitt-installieren { grid-area: install; }
  #view-start .karte-herkunft  { grid-area: herkunft; }

  /* Der Fussbereich bleibt volle Breite. */
  .site-fuss .seite { max-width: 60rem; }

  /* Grosszuegigerer Lesetext, wenn Platz da ist. */
  .reflow { font-size: calc(var(--lesetext-groesse) + 8%); }
}

/* ------------------- Geteilte Leseransicht (Desktop) ------------------- */

/* Die Reiter Text/Foto sind ueberfluessig, sobald beides nebeneinander steht. */
body.breit-geteilt .leser-kopf .tabs { display: none; }

body.breit-geteilt #view-leser.view--aktiv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: 2.5rem;
  align-content: start;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--raum);
}

/* Kopf und Steuerleiste ueber beide Spalten. */
body.breit-geteilt .leser-kopf,
body.breit-geteilt #steuerung { grid-column: 1 / -1; }

/* Linke Spalte: das Foto und alles, was zur Auswahl der Stelle gehoert. */
body.breit-geteilt #leiste-seiten,
body.breit-geteilt #pane-foto,
body.breit-geteilt #leiste-modus,
body.breit-geteilt #status-auswahl,
body.breit-geteilt .suche-zeile,
body.breit-geteilt #suche-treffer { grid-column: 1; }

/* Rechte Spalte: durchgehend der Lesetext, von der Seitenleiste bis zur
   Steuerleiste. Er scrollt mit der Seite - ein eigener Scrollbereich waere
   auf dem Desktop eine Falle, weil das Mausrad dann je nach Zeigerposition
   etwas anderes bewegt. */
/* Die rechte Spalte laeuft ueber genau die sechs Zeilen, die links belegt
   sind: Seitenleiste, Foto, Modus, Status, Suchfeld, Trefferliste.
   Bewusst KEINE negative Zeilennummer (-2): die zaehlt im expliziten Raster,
   das hier gar nicht definiert ist - das Ergebnis waere, dass der Text ueber
   dem Kopf landet. */
body.breit-geteilt #pane-text {
  grid-column: 2;
  grid-row: 2 / span 6;
}

body.breit-geteilt .reflow { margin: 0; }

/* Das Foto bleibt beim Scrollen im Blick. */
body.breit-geteilt #pane-foto {
  position: sticky;
  top: var(--raum);
}

/* --------------------------- Zeigergeraete --------------------------- */

/* Nur wo es einen echten Zeiger gibt: sichtbare Rueckmeldung, welches Wort
   man treffen wuerde. Auf Touchgeraeten waere das ein Storfaktor, weil der
   Hover-Zustand dort nach dem Tippen haengen bleibt. */
@media (hover: hover) and (pointer: fine) {
  .wort:hover {
    background: var(--bg-gedaempft);
    outline: 1px solid var(--rand-stark);
  }
}


/* Kopfzeile der Startansicht: Marke links, Einstellungen rechts.
   Die Einstellungen sind bewusst auch hier erreichbar - vorher gab es sie nur
   in der Leseransicht, also erst NACH dem ersten Foto. Wer die Sprache oder
   die Stimme vorher umstellen wollte, kam gar nicht hin. */
.start-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

/* Der Abstand sitzt jetzt an der Zeile, nicht mehr an der Marke selbst. */
.start-kopfzeile .marke { margin-bottom: 0; }