/* ==========================================================================
   Transkripteur – Gestaltung übernommen vom Sicherungskasten (V1.17.x)
   Warmgrauer Grund, weiße Flächen mit feiner Linie, runde Ecken,
   Hauptknöpfe in EKHN-Lila #5C2483, Textmarker in hellem Lila. Systemschrift.
   Keine externen Schriften, keine Fremdserver.
   ========================================================================== */

:root {
  --grund: #F8F7F3;
  --flaeche: #FFFFFF;
  --linie: #E6E3DA;
  --linie-zart: #EFECE4;
  --linie-stark: #DAD6CB;
  --rand-feld: #8A867B;
  --tusche: #23253A;
  --tusche-hover: #34374F;
  --grau: #5F6275;
  --t-gelb: #FFF7D6;
  --r-gelb: #F1E2A6;
  --lila: #5C2483;
  --lila-hover: #4A1D6A;
  --akzent: #DFCDF0;
  --t-lila: #EEE6F6;
  --t-lila-2: #F6F1FA;
  --r-lila: #DCCDEB;
  --pegel: #2E7D57;
  --rot: #B3261E;
  --t-rot: #FBE9E7;
  --fokus: #4A6FA5;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--sans);
  --r-s: 10px; --r-m: 14px; --r-l: 18px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--grund); color: var(--tusche); font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
a { color: var(--tusche); text-underline-offset: 3px; }
a:hover { color: var(--tusche-hover); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.sprung { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tusche); color: #fff; padding: 8px 14px; border-radius: 8px; }
.sprung:focus { left: 12px; color: #fff; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -.015em; }
h1 { margin: .2rem 0 .5rem; font-size: clamp(26px, 4vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 .9rem; }

.rahmen { max-width: 46rem; margin: 0 auto; padding: 32px 20px 8px; }

/* ---------- Kopfzeile ---------- */
.seitenkopf { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--linie); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.seitenkopf-in { max-width: 72rem; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.kopf-marke { display: inline-flex; align-items: center; gap: 10px; color: var(--tusche); text-decoration: none; border-radius: 10px; }
.kopf-marke:hover { color: var(--tusche); }
.marke-zettel { flex: none; width: 34px; height: 34px; }
.marke-wort { font-family: var(--display); font-weight: 650; font-size: 1.1875rem; letter-spacing: -.02em; }
.kopf-unterzeile { padding-left: 16px; border-left: 1px solid var(--linie); font-size: 0.8438rem; color: var(--grau); }
/* Link zu allen Diensten oben rechts (seit 1.1.1, wie im Sicherungskasten) */
.kopf-navi { margin-left: auto; }
.kopf-dienste { display: inline-flex; align-items: center; gap: .35em; min-height: 40px; padding: 0 12px; border-radius: var(--r-s); font-size: 0.875rem; font-weight: 500; color: var(--grau); text-decoration: none; white-space: nowrap; }
.kopf-dienste:hover { background: var(--t-lila-2); color: var(--tusche); }
@media (max-width: 30rem) { .kopf-unterzeile { display: none; } .seitenkopf-in { padding: 10px 16px; } .kopf-dienste { padding: 0 8px; } }

/* ---------- Fußzeile ---------- */
.fuss { border-top: 1px solid var(--linie); margin-top: 56px; }
.fuss-in { max-width: 72rem; margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 0.8125rem; color: var(--grau); }
.fuss-in img { width: 200px; height: auto; display: block; }
.fuss-in p { margin: 0; }
.fuss-in a { color: var(--grau); display: inline-block; padding-block: 4px; }

/* ---------- Text ---------- */
.kopf { margin-bottom: 1.5rem; }
.kopf p { margin: 0; }
.marker { background: linear-gradient(transparent 55%, var(--akzent) 55%, var(--akzent) 92%, transparent 92%); padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.klein { font-size: 0.8438rem; color: var(--grau); }

/* ---------- Karten ---------- */
.karte { background: var(--flaeche); padding: 20px; margin: 0 0 1rem; }
.sketch { border: 1px solid var(--linie); border-radius: var(--r-l); }

/* ---------- Formulare ---------- */
.formular { display: flex; flex-direction: column; gap: 6px; }
.formular label { font-size: 0.875rem; font-weight: 600; }
input, select { font: inherit; font-size: 0.9375rem; color: var(--tusche); background: var(--flaeche); border: 1px solid var(--rand-feld); border-radius: 12px; padding: 10px 14px; min-height: 44px; width: 100%; }
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--lila); }
input:focus, select:focus { border-color: var(--fokus); outline: 3px solid var(--fokus); outline-offset: 1px; }
.einst-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(11rem, 1fr); gap: 16px 20px; align-items: start; }
@media (max-width: 40rem) { .einst-raster { grid-template-columns: 1fr; } }
.wahl { border: 0; margin: 0; padding: 0; }
.wahl legend { font-size: 0.875rem; font-weight: 600; padding: 0; margin-bottom: 6px; }
.wahl-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; margin-bottom: 6px; cursor: pointer; }
.wahl-zeile:has(input:checked) { border-color: var(--r-lila); background: var(--t-lila-2); }
.wahl-zeile:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.wahl-zeile input { margin-top: .15em; }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 0.9062rem; font-weight: 600; text-decoration: none; color: var(--tusche); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 12px; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; }
.knopf:hover { background: var(--grund); color: var(--tusche); }
.knopf:active { transform: translateY(1px); }
.knopf.haupt { background: var(--lila); border-color: var(--lila); color: #fff; }
.knopf.haupt:hover { background: var(--lila-hover); border-color: var(--lila-hover); color: #fff; }
.knopf.leise { border-color: transparent; background: transparent; padding-inline: 12px; }
.knopf.leise:hover { background: var(--linie-zart); }
.knopf.gefahr { color: var(--rot); border-color: #F0C9C5; }
.knopf.gefahr:hover { background: var(--t-rot); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf.gross { min-height: 50px; padding: 0 20px; font-size: 0.9375rem; border-radius: 14px; }
.knopf.klein-knopf { min-height: 36px; padding: 0 12px; font-size: 0.8438rem; border-radius: 10px; }
.knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:active { transform: none; } }
.aktionen, .knopfzeile, .zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aktionen { margin-top: 1.25rem; }

/* ---------- Meldungen ---------- */
.meldung { padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; font-size: 0.9062rem; margin: 0 0 1rem; }
.meldung.fehler { background: var(--t-rot); border-color: #F0C9C5; color: #7A1B15; }
.meldung.warnung { background: var(--t-gelb); border-color: var(--r-gelb); }
.datei-info { margin: 1rem 0 0; background: var(--t-lila-2); border-color: var(--r-lila); overflow-wrap: anywhere; }
.datei-info:empty { margin: 0; padding: 0; border: 0; }

/* ---------- Datei-Ablage ---------- */
.ablage { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; border: 2px dashed var(--linie-stark); border-radius: var(--r-l); text-align: center; background: var(--grund); transition: background .15s, border-color .15s; }
.ablage p { margin: 0; }
.ablage.drueber { border-color: var(--lila); background: var(--t-lila-2); }
.ablage-symbol { width: 32px; height: 32px; fill: none; stroke: var(--lila); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oder { display: flex; align-items: center; gap: 12px; margin: 1rem 0; color: var(--grau); font-size: 0.8438rem; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

/* ---------- Aufnahme ---------- */
.aufnahme p { margin: .5rem 0 0; }
.aufnahme-knopf.nimmt-auf { color: #fff; background: var(--rot); border-color: var(--rot); }
.aufnahme-knopf.nimmt-auf:hover { background: var(--rot); filter: brightness(.92); }
.aufnahme-uhr { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.aufnahme-uhr::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 50%; background: var(--rot); vertical-align: .05em; }
.pegel { display: inline-block; width: 9rem; max-width: 40vw; height: .7rem; border: 1px solid var(--rand-feld); border-radius: 999px; overflow: hidden; background: var(--flaeche); }
.pegel-balken { display: block; width: 100%; height: 100%; background: var(--pegel); transform-origin: left center; transform: scaleX(0); }

/* ---------- Fortschritt und Status ---------- */
.fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 1rem; }
.fortschritt progress { flex: 1 1 14rem; height: .8rem; accent-color: var(--lila); }
.status { margin: .75rem 0 0; }
.status:empty { margin: 0; }

/* ---------- Ergebnis ---------- */
.ergebnis-leiste { margin-bottom: .75rem; }
.zeitmarken-wahl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.875rem; cursor: pointer; }
.transkript { margin-top: 1rem; border-top: 1px solid var(--linie); }
.abschnitt { display: grid; grid-template-columns: 5.5rem 1fr; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--linie-zart); }
.abschnitt time { font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--grau); padding-top: .15em; }
.abschnitt p { margin: 0; line-height: 1.6; }
.abschnitt.leer p { color: var(--grau); font-style: italic; }
@media (max-width: 30rem) { .abschnitt { grid-template-columns: 1fr; } }

/* ---------- Technische Details ---------- */
.details { margin: 0 0 1rem; font-size: 0.8125rem; }
.details summary { cursor: pointer; font-weight: 600; padding-block: 6px; }
.log { max-height: 16rem; overflow: auto; margin: .4rem 0; padding: .5rem .6rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; font-size: 0.75rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Hilfe: Wovon Dauer und Erfolg abhängen (ab V1.1.0) */
.hilfe { margin: 1rem 0 0; }
.hilfe h3 { font-size: 0.875rem; margin: 1rem 0 .3rem; }
.hilfe ul { margin: 0; padding-left: 1.2rem; }
.hilfe li { margin: 0 0 .35rem; }

/* Hinweise unten: „Bitte beachten“ + „So schützt …“ – kleiner, leicht hervorgehoben */
.hinweise { margin-top: 2.5rem; padding: 16px 18px; background: var(--t-lila-2); border: 1px solid var(--r-lila); border-left: 4px solid var(--lila); border-radius: var(--r-m); font-size: 0.875rem; }
.hinweise h2 { font-size: 0.9375rem; margin: 0 0 .4rem; }
.hinweise ul { margin: 0; padding-left: 1.2em; }
.hinweise li { margin-bottom: .25rem; }
.hinweise p { margin: .5rem 0 0; }
.aufklapp { margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--r-lila); }
.aufklapp > summary { display: flex; align-items: center; gap: .55rem; min-height: 32px; cursor: pointer; list-style: none; border-radius: 6px; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before { content: ""; flex: none; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.aufklapp[open] > summary::before { transform: rotate(45deg); }
.aufklapp > summary h2 { margin: 0; }
.aufklapp[open] > summary { margin-bottom: .35rem; }
@media (prefers-reduced-motion: reduce) { .aufklapp > summary::before { transition: none; } }