/* dioptify Sprachdokumentation Pflege. Ruhiges Markenbild: Grün als Signal, Gelb für Prüfstellen,
   Bernstein für Warnungen. Schriften selbst gehostet, keine Anfrage nach außen. */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url(fonts/ibm-plex-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); }

:root {
  --grund: #ffffff;
  --grund-2: #f6faf2;
  --flaeche: #ffffff;
  --tinte: #1c2318;
  --tinte-2: #4a5543;
  --linie: #dce5d3;
  --marke: #4fb916;
  --marke-text: #367300;
  --marke-weich: #e8f5dc;
  --gelb: #f2c200;
  --gelb-weich: #fff7d6;
  --gelb-text: #6e5600;
  --bernstein: #b86e00;
  --bernstein-text: #8a5200;
  --bernstein-weich: #fdf3e3;
  --bernstein-linie: #f0d9b0;
  --knopf: #367300;
  --knopf-text: #ffffff;
  --knopf-gedrueckt: #2b5c00;
  --seite: #f6faf2;
  --rund: 14px;
  --schatten: 0 18px 40px -18px rgb(20 35 10 / .35);
  --schatten-karte: 0 1px 2px rgb(20 35 10 / .06);
  --kurve: cubic-bezier(.16, 1, .3, 1);
  --f-titel: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-text: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --rand: 16px;
  --pegel: 0;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0e130b;
    --grund-2: #131a0f;
    --flaeche: #172012;
    --tinte: #e6eedd;
    --tinte-2: #a3b096;
    --linie: #2a3622;
    --marke-text: #79d43e;
    --marke-weich: #1c2a13;
    --gelb-weich: #2a2509;
    --gelb-text: #f2d46b;
    --bernstein: #f0b45a;
    --bernstein-text: #f0b45a;
    --bernstein-weich: #271d0e;
    --bernstein-linie: #4a3818;
    --knopf: #79d43e;
    --knopf-text: #0e1a08;
    --knopf-gedrueckt: #96e05e;
    --seite: #0e130b;
    --schatten: 0 18px 40px -18px rgb(0 0 0 / .7);
    --schatten-karte: 0 1px 2px rgb(0 0 0 / .3);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--seite);
  overscroll-behavior-y: none;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--seite);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
::selection { background: var(--gelb); color: #1c2318; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
a { color: var(--marke-text); }
:focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.mono { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.unsichtbar {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.i {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Gerüst */
.app {
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 560px;
  margin-inline: auto;
  padding-left: max(var(--rand), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rand), env(safe-area-inset-right, 0px));
}
.inhalt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ansicht { flex: 1; display: flex; flex-direction: column; min-width: 0; animation: einblenden .5s var(--kurve) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Kopf */
.kopf {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  min-height: 64px;
  padding-top: env(safe-area-inset-top, 0px);
}
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0; margin: 0 auto 0 0;
  border: 0; background: none; text-align: left;
}
.marke img { width: 30px; height: auto; transition: transform .8s var(--kurve); }
.marke:active img { transform: rotate(60deg); }
.marke-text { display: grid; line-height: 1.1; }
.wortmarke { font-family: var(--f-titel); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--tinte); }
.wortmarke .punkt { color: var(--gelb); }
.produkt { font-size: 12.5px; color: var(--tinte-2); letter-spacing: .01em; margin-top: 2px; white-space: nowrap; }
.marke { min-width: 0; }
.marke-text { min-width: 0; }
.testmodus {
  font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--gelb-text); background: var(--gelb-weich);
  padding: 6px 8px; border-radius: 6px;
}
.symbolknopf {
  width: 56px; height: 56px; margin-right: -10px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--tinte);
}
.symbolknopf::before {
  content: ""; grid-area: 1 / 1; width: 44px; height: 44px; border-radius: 50%;
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie);
  transition: transform .3s var(--kurve);
}
.symbolknopf .i { grid-area: 1 / 1; position: relative; }
.symbolknopf:active::before { transform: scale(.92); }
.symbolknopf[aria-expanded="true"]::before { background: var(--marke-weich); box-shadow: none; }

.menue {
  position: absolute; right: -4px; top: calc(100% - 2px);
  min-width: 248px; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten);
  animation: menue-auf .35s var(--kurve) both;
  transform-origin: top right;
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.menue-hintergrund { position: fixed; inset: 0; z-index: 19; background: transparent; }
.menue-name { padding: 10px 12px 8px; font-size: 13px; color: var(--tinte-2); border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
.menue-name strong { display: block; color: var(--tinte); font-size: 15px; font-weight: 600; }
.menue-eintrag {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--tinte); text-decoration: none; font-size: 16px; text-align: left;
}
.menue-eintrag .i { color: var(--tinte-2); }
.menue-eintrag:active, .menue-eintrag:hover { background: var(--grund-2); }

/* Leiste für Funkloch und Abgleich */
.leiste { margin-bottom: 8px; animation: einblenden .4s var(--kurve) both; }
.leiste-knopf {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 0 14px;
  border: 1px solid var(--bernstein-linie); border-radius: var(--rund);
  background: var(--bernstein-weich); color: var(--bernstein-text);
  font-weight: 600; text-align: left;
}
.leiste-knopf .i { color: var(--bernstein); }
.leiste-knopf span { flex: 1; }
.leiste-pfeil { width: 18px; height: 18px; opacity: .7; }
.leiste[data-art="offline"] .leiste-pfeil { display: none; }
.leiste[data-art="bestaetigen"] .leiste-knopf { border-color: color-mix(in srgb, var(--gelb) 60%, transparent); background: var(--gelb-weich); color: var(--gelb-text); }
.leiste[data-art="bestaetigen"] .leiste-knopf .i { color: var(--gelb-text); }
.leiste[data-laeuft] .leiste-knopf > .i:first-child { animation: drehen 1.4s linear infinite; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px;
  border: 0; border-radius: var(--rund);
  font: 600 17px/1.2 var(--f-text); letter-spacing: .005em;
  transition: transform .35s var(--kurve), background-color .2s, box-shadow .2s, opacity .2s;
}
.knopf:active:not(:disabled) { transform: scale(.98); }
.knopf:disabled { opacity: .5; }
.knopf-primaer { background: var(--knopf); color: var(--knopf-text); box-shadow: var(--schatten); }
.knopf-primaer:active:not(:disabled) { background: var(--knopf-gedrueckt); }
.knopf-zweit { background: var(--marke-weich); color: var(--marke-text); }
.knopf-leise { background: none; color: var(--tinte); }
.knopf-leise:active { background: var(--grund-2); }

/* Felder */
.feld { display: grid; gap: 8px; }
.feld-name { font-size: 13px; font-weight: 600; color: var(--tinte-2); letter-spacing: .02em; }
.eingabe {
  width: 100%; min-height: 56px; padding: 0 16px;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--flaeche); color: var(--tinte);
  font-size: 17px; line-height: 1.3;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.eingabe:focus { outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 28%, transparent); }
.auswahl { position: relative; display: block; }
.auswahl .eingabe { padding-right: 48px; text-overflow: ellipsis; }
.auswahl .i { position: absolute; right: 16px; top: 50%; margin-top: -11px; color: var(--tinte-2); pointer-events: none; }
select.eingabe:disabled { opacity: .6; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten-karte);
}
.titel { font-family: var(--f-titel); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.titel:focus { outline: none; }

/* Start */
.ansicht-start { align-items: center; justify-content: center; }
.start-zeichen { width: 56px; animation: atmen 2.4s var(--kurve) infinite; }
@keyframes atmen { 0%, 100% { opacity: .35; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* Anmeldung */
.ansicht-anmelden { justify-content: center; gap: 28px; padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
.app[data-ansicht="anmelden"] .kopf .marke,
.app[data-ansicht="start"] .kopf .marke { visibility: hidden; }
.anmelde-marke { display: grid; justify-items: center; gap: 6px; text-align: center; }
.anmelde-marke img { width: 64px; height: auto; margin-bottom: 10px; }
.wortmarke-gross { font-size: 34px; line-height: 1.05; }
.anmelde-marke .produkt { font-size: 15px; margin: 0; }
.anmelde-karte { display: grid; gap: 18px; padding: 22px 18px 18px; box-shadow: var(--schatten); }
.anmelde-karte .titel { font-size: 22px; }
.anmelde-karte .knopf { width: 100%; margin-top: 4px; }
.formfehler {
  display: flex; gap: 8px; align-items: center;
  color: var(--bernstein-text); background: var(--bernstein-weich);
  border-radius: 10px; padding: 12px 14px; font-weight: 600; font-size: 15px;
}

/* Hauptansicht */
.ansicht-haupt { padding-top: 4px; }
.feld-patient { margin-top: 4px; }
.buehne {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 28px 0 16px;
  min-height: 340px;
}
.buehne-zeit {
  font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--tinte);
  visibility: hidden; opacity: 0; transition: opacity .3s;
}
.buehne-max { font-size: 15px; color: var(--tinte-2); letter-spacing: 0; }
.buehne[data-zustand="aufnahme"] .buehne-zeit { visibility: visible; opacity: 1; }
.buehne[data-spaet] .buehne-zeit #aufnahme-lauf { color: var(--bernstein-text); }
.mic-rahmen { position: relative; width: 208px; height: 208px; display: grid; place-items: center; }
.mic-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-spur, .ring-wert { fill: none; stroke-width: 3; }
.ring-spur { stroke: var(--linie); opacity: 0; transition: opacity .4s; }
.ring-wert { stroke: var(--marke); stroke-linecap: round; stroke-dasharray: 0 604; opacity: 0; transition: opacity .4s, stroke-dasharray .45s linear; }
.mic-halo {
  position: absolute; width: 148px; height: 148px; border-radius: 50%;
  background: var(--marke); opacity: 0;
  transform: scale(1);
  transition: transform .09s linear, opacity .3s;
}
.mic {
  position: relative;
  width: 148px; height: 148px; border-radius: 50%;
  border: 0; padding: 0;
  display: grid; place-items: center;
  background: var(--knopf); color: var(--knopf-text);
  box-shadow: var(--schatten), 0 0 0 8px color-mix(in srgb, var(--marke) 12%, transparent);
  transition: transform .5s var(--kurve), background-color .35s, color .35s, box-shadow .35s;
}
.mic:active:not(:disabled) { transform: scale(.96); }
.mic > * { grid-area: 1 / 1; transition: opacity .25s, transform .45s var(--kurve); }
.mic .i { width: 52px; height: 52px; stroke-width: 1.75; }
.mic .stopp-symbol { width: 46px; height: 46px; }
.mic .stopp-symbol, .mic .fertig-symbol, .mic-sekunden { opacity: 0; transform: scale(.7); }
.mic-sekunden { font-size: 30px; letter-spacing: -.02em; }
.mic-sekunden small { font-size: 17px; letter-spacing: 0; color: var(--tinte-2); }
.panel-zeit small { font-size: inherit; color: inherit; }
.buehne-text { font-weight: 600; font-size: 17px; color: var(--tinte); min-height: 26px; text-align: center; max-width: 30ch; }
.buehne-text small { display: block; font-weight: 400; font-size: 14px; color: var(--tinte-2); margin-top: 2px; }

.buehne[data-zustand="startet"] .mic { opacity: .75; }
.buehne[data-zustand="aufnahme"] .mic-symbol { opacity: 0; transform: scale(.7); }
.buehne[data-zustand="aufnahme"] .stopp-symbol { opacity: 1; transform: none; }
.buehne[data-zustand="aufnahme"] .mic { box-shadow: var(--schatten); }
.buehne[data-zustand="aufnahme"] .mic-halo { opacity: calc(.12 + var(--pegel) * .2); transform: scale(calc(1 + var(--pegel) * .32)); }
.buehne[data-zustand="aufnahme"] .ring-spur,
.buehne[data-zustand="aufnahme"] .ring-wert { opacity: 1; }

.buehne[data-zustand="verarbeitung"] .mic {
  background: var(--flaeche); color: var(--tinte);
  box-shadow: var(--schatten), inset 0 0 0 1px var(--linie);
}
.buehne[data-zustand="verarbeitung"] .mic-symbol { opacity: 0; transform: scale(.7); }
.buehne[data-zustand="verarbeitung"] .mic-sekunden { opacity: 1; transform: none; }
.buehne[data-zustand="verarbeitung"] .ring-spur { opacity: 1; }
.buehne[data-zustand="verarbeitung"] .ring-wert { opacity: 1; stroke-dasharray: 120 604 !important; transition: opacity .4s; }
.buehne[data-zustand="verarbeitung"] .mic-ring { animation: drehen 1.8s linear infinite; }
@keyframes drehen { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

.buehne[data-zustand="gespeichert"] .mic { background: var(--marke-weich); color: var(--marke-text); box-shadow: none; }
.buehne[data-zustand="gespeichert"] .mic-symbol { opacity: 0; transform: scale(.7); }
.buehne[data-zustand="gespeichert"] .fertig-symbol { opacity: 1; transform: none; }
.buehne[data-zustand="fehler"] .buehne-text { color: var(--bernstein-text); }

.haupt-fuss {
  display: flex; justify-content: center;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}
.haupt-fuss .knopf { min-width: 180px; }
.zaehler {
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px;
  display: inline-grid; place-items: center;
  background: var(--marke-weich); color: var(--marke-text); font-size: 13px;
}

/* Unterkopf mit Zurück */
.unterkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 0 -10px; }
.zurueck {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 56px; padding: 0 14px 0 6px;
  border: 0; border-radius: 12px; background: none; color: var(--tinte);
  font-weight: 600; font-size: 16px;
}
.zurueck:active { background: var(--grund-2); }
.diktat-nr { font-size: 13px; color: var(--tinte-2); }

/* Ergebnis */
.ansicht-ergebnis { gap: 12px; }
.warnungen {
  display: grid; gap: 8px; padding: 14px 16px;
  background: var(--bernstein-weich); color: var(--bernstein-text);
  border: 1px solid var(--bernstein-linie); border-radius: var(--rund);
  animation: einblenden .5s var(--kurve) both;
}
.warnung { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.warnung .i { color: var(--bernstein); margin-top: 1px; }

.kopfkarte { padding: 16px; display: grid; gap: 12px; }
.kopfkarte-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.kopfkarte-wer { display: grid; gap: 6px; min-width: 0; }
.kopfkarte .titel { font-size: 25px; overflow-wrap: anywhere; }
.kopfkarte-zeit { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--linie); }
.zeitwert { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.zeitwert .mono { font-size: 24px; letter-spacing: -.01em; }
.quelle { font-size: 14px; color: var(--tinte-2); }
.kandidaten { font-size: 14px; color: var(--tinte-2); }
.kandidaten strong { color: var(--tinte); font-weight: 600; }

.messzeit { margin: -8px 0 -6px; }
.messzeit summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 0 4px; list-style: none;
  font: 500 13.5px/1.2 var(--f-mono); color: var(--tinte-2); cursor: pointer;
}
.messzeit summary::-webkit-details-marker { display: none; }
.messzeit summary .i { width: 16px; height: 16px; }
.messwerte {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 16px;
  margin: 2px 0 6px; padding: 12px 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  font-size: 13.5px;
}
.messwerte dt { color: var(--tinte-2); font-family: var(--f-text); font-weight: 400; }
.messwerte dd { margin: 0; text-align: right; }
.messwerte .summe { padding-top: 6px; border-top: 1px solid var(--linie); color: var(--tinte); font-weight: 600; }

.transkript summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 16px; list-style: none; cursor: pointer;
  font-weight: 600; font-size: 15px; color: var(--tinte-2);
}
.transkript summary::-webkit-details-marker { display: none; }
.transkript summary .i, .export-json .aufklapp { transition: transform .4s var(--kurve); color: var(--tinte-2); }
.transkript[open] summary .i, .export-json[open] .aufklapp { transform: rotate(180deg); }
.transkript p { padding: 0 16px 16px; font-size: 15px; line-height: 1.6; color: var(--tinte-2); }

.abschnitt { display: grid; gap: 10px; margin-top: 6px; }
.abschnitt-titel {
  display: flex; align-items: center; gap: 10px;
  font: 700 17px/1.2 var(--f-titel); letter-spacing: -.015em;
}
.abschnitt-titel .i { width: 20px; height: 20px; color: var(--marke-text); }

.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kachel {
  position: relative; display: grid; gap: 8px; align-content: start; min-width: 0;
  padding: 14px 14px 13px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten-karte);
  outline: 2px solid transparent; outline-offset: -1px;
}
.kachel-name { font-size: 14px; font-weight: 600; color: var(--tinte-2); }
.kachel-wert { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 0; }
.kachel-wert .wert { font-family: var(--f-mono); font-weight: 500; font-size: clamp(25px, 7.6vw, 31px); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
.kachel-wert .einheit { font-family: var(--f-mono); font-weight: 500; font-size: 14px; color: var(--tinte-2); }
.kachel .chip { justify-self: start; }

.zeilen { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.zeile {
  position: relative; display: grid; gap: 6px; padding: 14px 16px;
  outline: 2px solid transparent; outline-offset: -2px;
}
.zeile + .zeile { border-top: 1px solid var(--linie); }
.zeile-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.med-name { font-weight: 600; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.med-dosis { font-size: 17px; margin-left: 6px; white-space: nowrap; }
.med-gabe { font-size: 15px; color: var(--tinte-2); }
.zeile-text { font-size: 16px; line-height: 1.45; }
.zeile-einfach { display: flex; gap: 12px; align-items: flex-start; }
.zeile-einfach::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%;
  background: var(--marke);
}
.hinweis { font-size: 14px; line-height: 1.45; color: var(--tinte-2); }
.ist-pruefen { box-shadow: inset 4px 0 0 var(--gelb), var(--schatten-karte); }
.zeile.ist-pruefen { box-shadow: inset 4px 0 0 var(--gelb); background: color-mix(in srgb, var(--gelb-weich) 55%, transparent); }
.ist-pruefen .hinweis { color: var(--gelb-text); }
.ist-fehlt { box-shadow: inset 4px 0 0 var(--bernstein), var(--schatten-karte); }
.zeile.ist-fehlt { box-shadow: inset 4px 0 0 var(--bernstein); }

.chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  min-height: 26px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.chip .i { width: 14px; height: 14px; stroke-width: 2.6; }
.chip-sicher, .chip-bestaetigt { background: var(--marke-weich); color: var(--marke-text); }
.chip-pruefen, .chip-zu_bestaetigen { background: var(--gelb-weich); color: var(--gelb-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gelb) 55%, transparent); }
.chip-fehlt, .chip-fehler, .chip-wartet { background: var(--bernstein-weich); color: var(--bernstein-text); }
.chip-wartet { box-shadow: inset 0 0 0 1px var(--bernstein-linie); }

.neu { animation: aufleuchten 2.8s var(--kurve) both; }
@keyframes aufleuchten {
  0%, 20% { background-color: var(--gelb-weich); outline-color: var(--gelb); }
  100% { outline-color: transparent; }
}

/* Panel in der Daumenzone */
.panel {
  position: sticky; bottom: 0; z-index: 10;
  margin: auto calc(-1 * var(--rand)) 0;
  padding: 12px var(--rand) max(12px, env(safe-area-inset-bottom, 0px));
  background: var(--seite);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -14px 28px -22px rgb(20 35 10 / .45);
  display: grid; gap: 10px;
}
.ansicht-ergebnis .panel { margin-top: auto; }
.ansicht-ergebnis::after, .ansicht-fertig::after { content: none; }
.panel-status { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.panel-anzeige { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--marke-weich); color: var(--marke-text); }
.panel-anzeige > * { grid-area: 1 / 1; display: none; }
.panel-anzeige .i { width: 20px; height: 20px; }
.panel-text {
  flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.panel-zeit { font-size: 15px; color: var(--tinte-2); display: none; }
.panel-vorlesen, .panel-ende {
  display: none; align-items: center; gap: 8px; flex: none;
  min-height: 56px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte);
  font-weight: 600; font-size: 15px;
}
.panel-vorlesen .i { width: 20px; height: 20px; color: var(--marke-text); }
.panel-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.panel-knoepfe .knopf { width: 100%; padding: 0 12px; }
#panel-fehlerknoepfe { grid-template-columns: 1fr; }

.panel[data-zustand="vorlesen"] .p-lautsprecher { display: block; animation: sprechen 1.1s ease-in-out infinite; }
@keyframes sprechen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.panel[data-zustand="vorlesen"] .panel-text { font-weight: 400; color: var(--tinte-2); }
.panel[data-zustand="hoeren"] .p-pegel { display: flex; }
.panel[data-zustand="hoeren"] .panel-anzeige { background: var(--knopf); color: var(--knopf-text); }
.panel[data-zustand="hoeren"] .panel-zeit { display: block; }
.panel[data-zustand="hoeren"] .panel-ende { display: inline-flex; }
.panel[data-zustand="senden"] .p-kreisel { display: block; }
.panel[data-zustand="senden"] .panel-zeit { display: block; }
.panel[data-zustand="warten"] .panel-anzeige,
.panel[data-zustand="gesperrt"] .panel-anzeige { display: none; }
.panel[data-zustand="warten"] .panel-vorlesen,
.panel[data-zustand="gesperrt"] .panel-vorlesen,
.panel[data-zustand="fehler"] .panel-vorlesen { display: inline-flex; }
.panel[data-zustand="gesperrt"] .panel-vorlesen { background: var(--knopf); border-color: transparent; color: var(--knopf-text); }
.panel[data-zustand="gesperrt"] .panel-vorlesen .i { color: inherit; }
.panel[data-zustand="fehler"] .p-warnung { display: block; }
.panel[data-zustand="fehler"] .panel-anzeige { background: var(--bernstein-weich); color: var(--bernstein); }
.panel[data-zustand="fehler"] .panel-text { color: var(--bernstein-text); }
.panel[data-ohne-vorlesen] .panel-vorlesen { display: none !important; }
.panel[data-zustand="senden"] .panel-knoepfe .knopf { opacity: .5; pointer-events: none; }

.p-pegel { gap: 3px; align-items: center; height: 20px; }
.p-pegel i {
  display: block; width: 3px; height: 20px; border-radius: 2px; background: currentColor;
  transform-origin: center; transform: scaleY(calc(.25 + var(--pegel) * .75));
  transition: transform .09s linear;
}
.p-pegel i:nth-child(1) { transform: scaleY(calc(.2 + var(--pegel) * .45)); }
.p-pegel i:nth-child(3) { transform: scaleY(calc(.25 + var(--pegel) * .6)); }
.p-pegel i:nth-child(4) { transform: scaleY(calc(.2 + var(--pegel) * .35)); }
.p-kreisel { width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--marke-text) 25%, transparent); border-top-color: var(--marke-text); animation: kreisen .9s linear infinite; }
@keyframes kreisen { to { transform: rotate(360deg); } }

/* Fertig */
.ansicht-fertig { gap: 12px; }
.fertig-kopf { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 0 14px; }
.haken { width: 96px; height: 96px; margin-bottom: 8px; }
.haken-kreis { fill: var(--marke-weich); stroke: none; transform-origin: center; animation: haken-kreis .6s var(--kurve) both; }
.haken-strich { fill: none; stroke: var(--marke-text); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: haken-strich .7s .15s var(--kurve) forwards; }
@keyframes haken-kreis { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes haken-strich { to { stroke-dashoffset: 0; } }
.fertig-kopf .titel { font-size: 28px; }
.fertig-wer { color: var(--tinte-2); font-size: 16px; }
.fertig-wer .mono { color: var(--tinte); }
.abschnitt-titel-programm { margin-top: 4px; }
.export { overflow: hidden; }
.export-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 64px; padding: 4px 4px 4px 16px;
}
.export-kopf h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.export-kopf h3 .i { width: 20px; height: 20px; color: var(--marke-text); }
.kopieren {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 56px; padding: 0 16px; border: 0; border-radius: 12px;
  background: var(--marke-weich); color: var(--marke-text);
  font-weight: 600; font-size: 15px;
  transition: background-color .25s, color .25s, transform .3s var(--kurve);
}
.kopieren .i { width: 19px; height: 19px; }
.kopieren:active { transform: scale(.97); }
.kopieren[data-erfolg] { background: var(--knopf); color: var(--knopf-text); }
.kopieren[data-misserfolg] { background: var(--bernstein-weich); color: var(--bernstein-text); }
.export-text {
  margin: 0; padding: 14px 16px 16px;
  border-top: 1px solid var(--linie);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
  font-family: var(--f-text); font-size: 15.5px; line-height: 1.6;
  -webkit-user-select: text; user-select: text;
}
.export-text.mono { font-family: var(--f-mono); font-size: 14px; line-height: 1.7; tab-size: 2; }
.export-zeile { display: block; padding-left: 2ch; text-indent: -2ch; }
.export-zeile + .export-zeile { margin-top: 2px; }
.export-json summary { list-style: none; cursor: pointer; padding-right: 16px; }
.export-json summary::-webkit-details-marker { display: none; }
.json-inhalt { border-top: 1px solid var(--linie); display: grid; }
.json-inhalt .kopieren { justify-self: end; margin: 10px 10px 0; }
.json-text { border-top: 0; font-size: 12.5px; line-height: 1.6; max-height: 420px; overflow-y: auto; }
.panel-fertig { margin-top: auto; }
.panel-fertig .knopf { width: 100%; }

/* Verlauf */
.verlauf-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.verlauf-kopf .titel { font-size: 26px; }
.kennzahlen { font-size: 13.5px; color: var(--tinte-2); }
.verlauf-liste { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.eintrag {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 12px 10px 12px 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten-karte); color: var(--tinte); text-align: left;
  transition: transform .35s var(--kurve);
}
button.eintrag:active { transform: scale(.985); }
.eintrag-zeit { display: grid; justify-items: start; min-width: 54px; }
.eintrag-zeit .mono { font-size: 19px; letter-spacing: -.01em; }
.eintrag-zeit small { font-size: 12px; color: var(--tinte-2); }
.eintrag-mitte { display: grid; gap: 6px; min-width: 0; }
.eintrag-name { font-weight: 600; font-size: 16.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eintrag-meta .mono { font-size: 12.5px; color: var(--tinte-2); }
.eintrag > .i { color: var(--tinte-2); width: 20px; height: 20px; }
.eintrag-aktionen { display: flex; gap: 8px; grid-column: 1 / -1; }
.eintrag-aktionen .knopf { flex: 1; min-height: 56px; font-size: 15px; padding: 0 12px; }
.eintrag-lokal { grid-template-columns: auto 1fr; }
.leer { color: var(--tinte-2); text-align: center; padding: 40px 0; }

/* Hinweis unten */
.toast {
  position: fixed; left: 50%; z-index: 40;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 12px;
  background: var(--tinte); color: var(--grund);
  font-weight: 600; font-size: 15px; box-shadow: var(--schatten);
  animation: toast-ein .4s var(--kurve) both;
}
@keyframes toast-ein { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.noscript { padding: 24px; text-align: center; }

@media (max-width: 374px) {
  .testmodus { font-size: 10px; padding: 5px 6px; letter-spacing: .04em; }
  .wortmarke { font-size: 19px; }
  .produkt { font-size: 12px; }
}
@media (min-width: 420px) {
  :root { --rand: 20px; }
  .kopfkarte .titel { font-size: 27px; }
}
@media (max-height: 640px) {
  .buehne { min-height: 300px; padding-top: 16px; gap: 10px; }
  .mic-rahmen { width: 188px; height: 188px; }
  .mic, .mic-halo { width: 132px; height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .buehne[data-zustand="verarbeitung"] .mic-ring { animation: none; }
  .haken-strich { stroke-dashoffset: 0; }
}

/* Einsprechliste (nur mit ?einsprechen) */
.einsprech { margin: 4px 0 0; padding: 14px 16px; border-radius: var(--rund, 14px); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 18px 40px -26px rgb(20 35 10 / .35); }
.einsprech[hidden] { display: none; }
.einsprech-kopf { margin: 0 0 6px; font-size: 13px; color: var(--tinte-2); }
.einsprech-text { margin: 0 0 10px; font-size: 18px; line-height: 1.45; color: var(--tinte); }
.einsprech-weiter { min-height: 44px; }

.feld-patientwahl { display: grid; gap: 6px; margin-top: 12px; }
.feld-patientwahl[hidden] { display: none; }