/* ============================================================
   DRILL. Der Fokus-Instruktor
   Welt: Exerzierplatz. Beton, Warnschild, Megafon, Dienstgrad.
   Layout: Megafon-Leiste oben (der Blickfang), darunter eine Ansicht,
   Navigation unten am Handy, links als Leiste ab 840 px.
   ============================================================ */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/BigShouldersDisplay.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/Barlow-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  /* Farben, hell: Beton am Tag */
  --grund: oklch(94% 0.008 250);
  --flaeche: oklch(99% 0.003 250);
  --flaeche-2: oklch(96.5% 0.006 250);
  --text: oklch(21% 0.012 250);
  --text-leise: oklch(42% 0.015 250);
  --linie: oklch(84% 0.01 250);
  --linie-stark: oklch(58% 0.012 250);
  --akzent: oklch(70% 0.19 48);
  --akzent-text: oklch(16% 0.01 48);
  --akzent-tief: oklch(52% 0.17 45);
  --akzent-rand: oklch(52% 0.17 45);
  --akzent-grafik: oklch(52% 0.17 45);
  --megafon-grund: oklch(16% 0.01 250);
  --megafon-text: oklch(80% 0.18 52);
  --megafon-leise: oklch(70% 0.01 250);
  --erfolg: oklch(46% 0.13 145);
  --erfolg-flaeche: oklch(93% 0.05 145);
  --schande: oklch(48% 0.17 25);
  --schande-flaeche: oklch(93% 0.04 25);
  --schatten: 0 2px 6px rgba(10, 12, 16, 0.12);

  /* Schrift */
  --schrift-display: "Big Shoulders Display", "League Gothic", Impact, "Arial Narrow", sans-serif;
  --schrift-text: "Barlow", "Avenir Next", "Segoe UI", sans-serif;
  --s12: 0.75rem; --s13: 0.8125rem; --s14: 0.875rem; --s16: 1rem; --s20: 1.25rem;
  --s24: 1.5rem; --s32: 2rem; --s40: 2.5rem; --s56: 3.5rem; --s80: 5rem;

  /* Raum */
  --r4: 4px; --r8: 8px; --r12: 12px; --r16: 16px; --r24: 24px; --r32: 32px; --r48: 48px;
  --radius: 10px;
  --radius-klein: 6px;
  --nav-hoehe: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: oklch(17% 0.01 250);
    --flaeche: oklch(22% 0.012 250);
    --flaeche-2: oklch(26% 0.012 250);
    --text: oklch(94% 0.008 90);
    --text-leise: oklch(74% 0.012 250);
    --linie: oklch(32% 0.012 250);
    --linie-stark: oklch(56% 0.012 250);
    --akzent: oklch(72% 0.18 50);
    --akzent-text: oklch(16% 0.01 48);
    --akzent-tief: oklch(78% 0.17 55);
    --akzent-rand: transparent;
    --akzent-grafik: oklch(72% 0.18 50);
    --megafon-grund: oklch(10% 0.01 250);
    --megafon-text: oklch(80% 0.18 52);
    --megafon-leise: oklch(70% 0.01 250);
    --erfolg: oklch(78% 0.14 145);
    --erfolg-flaeche: oklch(30% 0.05 145);
    --schande: oklch(76% 0.15 25);
    --schande-flaeche: oklch(30% 0.05 25);
    --schatten: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: oklch(17% 0.01 250);
  --flaeche: oklch(22% 0.012 250);
  --flaeche-2: oklch(26% 0.012 250);
  --text: oklch(94% 0.008 90);
  --text-leise: oklch(74% 0.012 250);
  --linie: oklch(32% 0.012 250);
  --linie-stark: oklch(56% 0.012 250);
  --akzent: oklch(72% 0.18 50);
  --akzent-text: oklch(16% 0.01 48);
  --akzent-tief: oklch(78% 0.17 55);
  --akzent-rand: transparent;
  --akzent-grafik: oklch(72% 0.18 50);
  --megafon-grund: oklch(10% 0.01 250);
  --megafon-text: oklch(80% 0.18 52);
  --megafon-leise: oklch(70% 0.01 250);
  --erfolg: oklch(78% 0.14 145);
  --erfolg-flaeche: oklch(30% 0.05 145);
  --schande: oklch(76% 0.15 25);
  --schande-flaeche: oklch(30% 0.05 25);
  --schatten: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---------- Grundgerüst ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--s16);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 2px; }
[hidden] { display: none !important; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "kopf" "megafon" "inhalt";
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Kopf: Wortmarke und Dienstgrad ---------- */
.kopf {
  grid-area: kopf;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r16);
  padding: var(--r12) var(--r16);
  padding-top: calc(var(--r12) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.wortmarke {
  font-family: var(--schrift-display);
  font-weight: 900;
  font-size: var(--s32);
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--r8);
}
.wortmarke svg { width: 28px; height: 28px; }
.dienstgrad { text-align: right; min-width: 0; }
.dienstgrad .label { font-size: var(--s12); color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.08em; }
.dienstgrad .rang { font-weight: 700; font-size: var(--s14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-balken { height: 4px; background: var(--linie); border-radius: 2px; margin-top: var(--r4); overflow: hidden; }
.xp-balken > div { height: 100%; background: var(--akzent); width: 0; transition: width 250ms ease-out; }

/* ---------- Megafon: der Instruktor spricht ---------- */
.megafon {
  grid-area: megafon;
  background: var(--megafon-grund);
  color: var(--megafon-text);
  padding: var(--r16);
  border-bottom: 6px solid var(--akzent);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--r12);
  align-items: start;
  min-height: 96px;
  cursor: pointer;
}
.megafon .spruch {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: clamp(var(--s32), 7.5vw, var(--s56));
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.megafon .spruch.lang { font-size: clamp(var(--s24), 5.5vw, var(--s40)); }
.megafon .absender { font-size: var(--s12); color: var(--megafon-leise); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--r4); }
.megafon .wiederholen {
  background: var(--akzent); border: 0; color: var(--akzent-text);
  border-radius: var(--radius-klein); width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  transition: transform 150ms ease-out, filter 150ms ease-out;
}
.megafon .wiederholen:hover { filter: brightness(1.08); }
.megafon .wiederholen:active { transform: scale(0.96); }
.megafon .wiederholen svg { width: 26px; height: 26px; }
.megafon.beben .spruch { animation: beben 300ms ease-out; }
@keyframes beben { 0% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 100% { transform: none; } }

/* ---------- Inhalt ---------- */
.inhalt { grid-area: inhalt; padding: var(--r24) var(--r16) var(--r32); max-width: 760px; width: 100%; margin: 0 auto; min-width: 0; }
.ansicht { display: grid; gap: var(--r32); }
.ansicht[hidden] { display: none; }
.abschnitt { display: grid; gap: var(--r12); min-width: 0; }
.abschnitt > h2 { font-family: var(--schrift-display); font-weight: 800; font-size: var(--s24); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; }
.abschnitt > h2 small { font-family: var(--schrift-text); font-weight: 400; font-size: var(--s14); text-transform: none; letter-spacing: 0; color: var(--text-leise); margin-left: var(--r8); }
.hinweis { font-size: var(--s14); color: var(--text-leise); }
.tagesbefehl { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; }
.befehl-wert { display: grid; gap: var(--r4); padding: var(--r12) var(--r8); text-align: center; border-right: 1px solid var(--linie); min-width: 0; }
.befehl-wert:last-child { border-right: 0; }
.befehl-wert .zahl { font-family: var(--schrift-display); font-weight: 900; font-size: var(--s40); line-height: 1; font-variant-numeric: tabular-nums; }
.befehl-wert .label { font-size: var(--s12); color: var(--text-leise); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.2; }
.befehl-wert.schande .zahl { color: var(--schande); }
.befehl-wert.leise .zahl { color: var(--text-leise); }
.befehl-wert.gut .zahl { color: var(--erfolg); }
.tagesnotiz { font-size: var(--s14); color: var(--text-leise); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r8);
  min-height: 44px; padding: 0 var(--r16);
  border-radius: var(--radius-klein); border: 1px solid var(--linie-stark);
  background: var(--flaeche); color: var(--text);
  font-weight: 600; font-size: var(--s14); letter-spacing: 0.02em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; transition: background 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: var(--flaeche-2); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf.haupt { background: var(--akzent); color: var(--akzent-text); border-color: transparent; font-family: var(--schrift-display); font-weight: 800; font-size: var(--s20); letter-spacing: 0.04em; }
.knopf.haupt:hover { filter: brightness(1.06); }
.knopf.gefahr { color: var(--schande); border-color: var(--schande); }
.knopf.klein { min-height: 36px; padding: 0 var(--r12); font-size: var(--s13); }
.knopf.breit { width: 100%; }
.knopf.symbol { width: 44px; padding: 0; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: var(--r8); }

/* ---------- Felder ---------- */
.feld, select.feld, input.feld {
  min-height: 44px; padding: 0 var(--r12); border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text); width: 100%; min-width: 0;
}
.feld::placeholder { color: var(--text-leise); }
.feld:focus { border-color: var(--akzent-tief); }
label.beschriftung { font-size: var(--s13); font-weight: 600; color: var(--text-leise); display: block; margin-bottom: var(--r4); }
.formular { display: grid; gap: var(--r8); }
.formular .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r8); }
input[type="date"].feld, input[type="time"].feld { font-variant-numeric: tabular-nums; }

/* Segmentwahl (Härtegrad, Dauer, Erscheinungsbild) */
.segmente { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); overflow: hidden; }
.segmente button {
  min-height: 44px; border: 0; border-right: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--text);
  font-weight: 600; font-size: var(--s14); cursor: pointer; padding: var(--r4) var(--r8); line-height: 1.15;
}
.segmente button:last-child { border-right: 0; }
.segmente button[aria-pressed="true"], .segmente button[aria-checked="true"] { background: var(--akzent); color: var(--akzent-text); }
.segmente button:focus-visible { outline-offset: -3px; }
.segmente button small { display: block; font-weight: 400; font-size: var(--s12); opacity: 0.85; }

/* ---------- Missionen ---------- */
.missionen { display: grid; gap: var(--r8); }
.mission {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--r12); align-items: center;
  padding: var(--r12); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); min-width: 0;
}
.mission.dringend { border-color: var(--akzent-tief); }
.mission.ueberfaellig { border-color: var(--schande); background: var(--schande-flaeche); }
.mission.fokus { border-color: var(--text); border-width: 2px; }
.mission .haken {
  width: 44px; height: 44px; border-radius: var(--radius-klein); border: 2px solid var(--linie-stark); background: var(--flaeche);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.mission .haken svg { width: 24px; height: 24px; opacity: 0; }
.mission .haken:hover { border-color: var(--erfolg); }
.mission.erledigt .haken { background: var(--erfolg); border-color: var(--erfolg); }
.mission.erledigt .haken svg { opacity: 1; color: var(--flaeche); }
.mission .text { min-width: 0; }
.mission .titel { font-weight: 600; overflow-wrap: anywhere; }
.mission.erledigt .titel { text-decoration: line-through; color: var(--text-leise); }
.mission .meta { font-size: var(--s13); color: var(--text-leise); display: flex; flex-wrap: wrap; gap: var(--r4) var(--r12); }
.mission .meta .etikett { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--s12); }
.mission .meta .etikett.dringend { color: var(--akzent-tief); }
.mission .meta .etikett.ueberfaellig { color: var(--schande); }
.mission .meta .etikett.fokus { color: var(--text); }
.mission .aktionen { display: flex; gap: var(--r4); }
.mission .aktionen .knopf { border-color: transparent; background: transparent; color: var(--text-leise); }
.mission .aktionen .knopf:hover { background: var(--flaeche-2); color: var(--text); }
.leer { padding: var(--r24); border: 1px dashed var(--linie-stark); border-radius: var(--radius); text-align: center; display: grid; gap: var(--r8); color: var(--text-leise); }
.leer strong { color: var(--text); font-size: var(--s20); font-family: var(--schrift-display); text-transform: uppercase; letter-spacing: 0.03em; }
details.erledigt-liste > summary { cursor: pointer; font-weight: 600; color: var(--text-leise); padding: var(--r8) 0; list-style: none; display: flex; align-items: center; gap: var(--r8); min-height: 44px; }
details.erledigt-liste > summary::-webkit-details-marker { display: none; }
details.erledigt-liste > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 150ms ease-out; }
details.erledigt-liste[open] > summary::before { transform: rotate(45deg); }
details.erledigt-liste .missionen { margin-top: var(--r8); }

/* ---------- Drill-Session ---------- */
.timer-block { display: grid; gap: var(--r16); padding: var(--r24) var(--r16); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); text-align: center; }
.timer-zeit { font-family: var(--schrift-display); font-weight: 900; font-size: clamp(var(--s56), 22vw, 7.5rem); line-height: 0.95; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.timer-zeit.pause { color: var(--text-leise); }
.timer-status { font-size: var(--s14); color: var(--text-leise); }
.timer-mission { font-weight: 600; overflow-wrap: anywhere; }
.fortschritt { height: 8px; background: var(--linie); border-radius: 4px; overflow: hidden; }
.fortschritt > div { height: 100%; background: var(--akzent); width: 0; transition: width 500ms linear; }
.fortschritt > div.pause { background: var(--linie-stark); }
.timer-steuerung { display: grid; gap: var(--r8); grid-template-columns: 1fr; }
.timer-steuerung .knopf.haupt { min-height: 56px; }
.nachfrage { display: grid; gap: var(--r12); padding: var(--r16); border: 2px solid var(--erfolg); border-radius: var(--radius); background: var(--erfolg-flaeche); }
.nachfrage strong { font-size: var(--s20); }
.eigene-dauer { display: grid; grid-template-columns: 1fr auto; gap: var(--r8); align-items: end; }
.eigene-dauer input { width: 100%; }

/* ---------- Appell ---------- */
.appell-block { display: grid; gap: var(--r12); padding: var(--r16); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.appell-block .zeit { font-family: var(--schrift-display); font-weight: 900; font-size: var(--s56); line-height: 1; font-variant-numeric: tabular-nums; }
.appell-block .zeit.aus { color: var(--text-leise); }
.appell-zeile { display: grid; grid-template-columns: 1fr auto; gap: var(--r8); align-items: center; }
.status-zeile { display: flex; align-items: center; gap: var(--r8); font-weight: 600; }
.status-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--linie-stark); flex: none; }
.status-punkt.an { background: var(--erfolg); }

/* ---------- Akte: Statistik ---------- */
.werte { display: grid; gap: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; }
.wert { display: grid; grid-template-columns: 1fr auto; gap: var(--r12); padding: var(--r12) var(--r16); border-bottom: 1px solid var(--linie); align-items: baseline; }
.wert:last-child { border-bottom: 0; }
.wert .label { color: var(--text-leise); }
.wert .zahl { font-family: var(--schrift-display); font-weight: 800; font-size: var(--s32); line-height: 1; font-variant-numeric: tabular-nums; }
.wert.schande .zahl { color: var(--schande); }
.wert.gut .zahl { color: var(--erfolg); }
.wochenbalken { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--r8); align-items: end; height: 140px; padding: var(--r12) var(--r16) 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.wochenbalken .tag { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: var(--r4); text-align: center; font-size: var(--s12); color: var(--text-leise); font-variant-numeric: tabular-nums; }
.wochenbalken .tag .balken { align-self: end; background: var(--linie-stark); border-radius: 3px 3px 0 0; min-height: 2px; }
.wochenbalken .tag.heute .balken { background: var(--akzent); }
.wochenbalken .tag .zahl { font-weight: 700; color: var(--text); }
.wochenbalken .tag .name { padding-bottom: var(--r8); }

/* ---------- Einstellungen ---------- */
.einstellung { display: grid; gap: var(--r8); padding: var(--r16) 0; border-bottom: 1px solid var(--linie); }
.einstellung:last-child { border-bottom: 0; }
.einstellung .kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: var(--r12); }
.einstellung .kopfzeile strong { font-weight: 600; }
.schalter { position: relative; width: 52px; height: 32px; border-radius: 16px; background: var(--linie-stark); border: 0; cursor: pointer; flex: none; transition: background 150ms ease-out; }
.schalter::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--flaeche); transition: transform 150ms ease-out; }
.schalter[aria-checked="true"] { background: var(--erfolg); }
.schalter[aria-checked="true"]::after { transform: translateX(20px); }
.sync-zeile { font-size: var(--s13); color: var(--text-leise); }
.bestaetigung { display: grid; gap: var(--r8); padding: var(--r12); border: 1px solid var(--schande); border-radius: var(--radius-klein); background: var(--schande-flaeche); }
textarea.feld { min-height: 120px; padding: var(--r12); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--s13); resize: vertical; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav button {
  min-height: var(--nav-hoehe); border: 0; background: transparent; color: var(--text-leise);
  display: grid; justify-items: center; align-content: center; gap: 2px; cursor: pointer;
  font-size: var(--s12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; position: relative;
}
.nav button svg { width: 24px; height: 24px; }
.nav button[aria-current="page"] { color: var(--text); }
.nav button[aria-current="page"]::after { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; background: var(--akzent); }
.nav button:focus-visible { outline-offset: -3px; }
.nav .marke { position: absolute; top: 8px; right: 12%; font-size: var(--s12); font-weight: 700; color: var(--akzent-text); background: var(--akzent); border-radius: 10px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.nav .marke[hidden] { display: none; }

/* ---------- Overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--r16);
  background: rgba(8, 10, 12, 0.92); color: oklch(94% 0.008 90);
  overflow: auto;
}
.overlay[hidden] { display: none; }
.overlay .karte { width: 100%; max-width: 520px; display: grid; gap: var(--r16); text-align: center; }
.overlay h1 { font-family: var(--schrift-display); font-weight: 900; font-size: var(--s56); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.02em; color: var(--megafon-text); }
.overlay .brueller { font-family: var(--schrift-display); font-weight: 700; font-size: var(--s24); line-height: 1.1; text-transform: uppercase; }
.overlay p { color: oklch(80% 0.01 250); }
.overlay .feld { background: oklch(18% 0.01 250); color: oklch(94% 0.008 90); border-color: oklch(55% 0.012 250); text-align: center; font-size: var(--s20); }
.overlay .feld::placeholder { color: oklch(60% 0.01 250); }
.overlay .knopf { border-color: oklch(60% 0.012 250); background: transparent; color: oklch(94% 0.008 90); }
.overlay .knopf.haupt { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
.overlay .fehler { color: var(--megafon-text); font-weight: 600; min-height: 1.5em; }
.overlay.alarm { background: oklch(16% 0.08 30); animation: alarmblitz 1s steps(2) infinite; }
@keyframes alarmblitz { 0% { background: oklch(16% 0.08 30); } 100% { background: oklch(28% 0.16 30); } }

/* ---------- Breite Bildschirme: Leiste links ---------- */
@media (min-width: 840px) {
  .app {
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "nav kopf" "nav megafon" "nav inhalt";
    padding-bottom: 0;
    min-height: 100vh;
  }
  .nav {
    grid-area: nav; position: sticky; top: 0; bottom: auto; left: auto; right: auto; height: 100vh;
    grid-template-columns: 1fr; align-content: start; gap: var(--r4);
    border-top: 0; border-right: 1px solid var(--linie); padding: var(--r24) var(--r12);
  }
  .nav button { min-height: 48px; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: var(--r12); padding: 0 var(--r12); border-radius: var(--radius-klein); font-size: var(--s14); }
  .nav button[aria-current="page"] { background: var(--flaeche-2); }
  .nav button[aria-current="page"]::after { top: 25%; bottom: 25%; left: 0; right: auto; width: 3px; height: auto; }
  .nav .marke { top: 50%; transform: translateY(-50%); right: var(--r12); }
  .kopf { padding: var(--r16) var(--r32); }
  .megafon { padding: var(--r24) var(--r32); }
  .megafon .spruch { font-size: var(--s56); }
  .megafon .spruch.lang { font-size: var(--s40); }
  .inhalt { padding: var(--r32); }
  .timer-steuerung { grid-template-columns: 2fr 1fr 1fr; }
  .timer-steuerung .knopf.haupt { grid-column: 1 / -1; }
  .timer-steuerung.laeuft { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- DRILL 2.1: Tagesplan, Teilschritte, Abendappell, Ruhetage ---------- */
.formular .zeile.drei { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 520px) { .formular .zeile.drei { grid-template-columns: 1fr; } }
.knopfzeile.mitte { justify-content: center; }

.plan { display: grid; gap: var(--r8); margin: 0; padding: 0; list-style: none; counter-reset: plan; }
.plan-eintrag {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--r12); align-items: center;
  padding: var(--r12); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); min-width: 0;
}
.plan-eintrag.dran { border: 2px solid var(--akzent); }
.plan-eintrag.erledigt { opacity: 0.7; }
.plan-eintrag .nummer {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-klein);
  font-family: var(--schrift-display); font-weight: 900; font-size: var(--s24); background: var(--flaeche-2); color: var(--text);
}
.plan-eintrag.dran .nummer { background: var(--akzent); color: var(--akzent-text); }
.plan-eintrag.erledigt .nummer { background: var(--erfolg); color: var(--flaeche); }
.plan-eintrag .text { min-width: 0; }
.plan-eintrag .titel { font-weight: 600; overflow-wrap: anywhere; }
.plan-eintrag.erledigt .titel { text-decoration: line-through; color: var(--text-leise); }
.plan-eintrag .meta { font-size: var(--s13); color: var(--text-leise); }
.plan-eintrag .meta .etikett { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--s12); color: var(--akzent-tief); }
.plan-eintrag .aktionen { display: flex; gap: var(--r4); }
.plan-eintrag .aktionen .knopf { border-color: transparent; background: transparent; color: var(--text-leise); }
.plan-eintrag .aktionen .knopf:hover { background: var(--flaeche-2); color: var(--text); }
.plan-eintrag .aktionen .knopf.start { color: var(--akzent-text); background: var(--akzent); }

.mission .aktionen .knopf.heute { font-size: var(--s12); padding: 0 var(--r8); color: var(--text); border-color: var(--linie-stark); }
.mission .aktionen .knopf.heute[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); border-color: transparent; }
.mission .schritt-knopf { font-size: var(--s12); font-weight: 700; color: var(--text-leise); background: transparent; border: 0; padding: 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; min-height: 24px; }
.mission .schritt-knopf:hover { color: var(--text); }
.mission .schritte { grid-column: 1 / -1; display: grid; gap: var(--r4); padding-top: var(--r8); border-top: 1px solid var(--linie); }
.schritt { display: grid; grid-template-columns: auto 1fr auto; gap: var(--r8); align-items: center; min-height: 44px; }
.schritt .haken-klein { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; padding: 0; }
.schritt .haken-klein span { width: 22px; height: 22px; border: 2px solid var(--linie-stark); border-radius: 4px; display: grid; place-items: center; }
.schritt .haken-klein svg { width: 16px; height: 16px; opacity: 0; color: var(--flaeche); }
.schritt.erledigt .haken-klein span { background: var(--erfolg); border-color: var(--erfolg); }
.schritt.erledigt .haken-klein svg { opacity: 1; }
.schritt .text { font-size: var(--s14); overflow-wrap: anywhere; }
.schritt.erledigt .text { text-decoration: line-through; color: var(--text-leise); }
.schritt .knopf.symbol { border-color: transparent; background: transparent; color: var(--text-leise); }
.schritt-neu { display: grid; grid-template-columns: 1fr auto; gap: var(--r8); }
.schritt-neu .feld { min-height: 40px; }
.schritt-neu .knopf { min-height: 40px; }

.timer-schritt { font-size: var(--s14); color: var(--text-leise); }
.timer-status.sperre { color: var(--schande); font-weight: 600; }

.overlay .karte.links { text-align: left; }
.overlay .karte.links h1, .overlay .karte.links .brueller { text-align: center; }
.overlay textarea.feld, .overlay select.feld { text-align: left; font-size: var(--s16); min-height: 44px; }
.overlay textarea.feld { padding: var(--r12); font-family: var(--schrift-text); resize: vertical; }
.overlay label.beschriftung { color: oklch(80% 0.01 250); }

.segmente.ruhetage button { padding: var(--r4) 0; font-size: var(--s13); }

/* ---------- Handy: Aktionen unter den Text statt daneben ---------- */
@media (max-width: 599px) {
  .plan-eintrag { grid-template-columns: auto 1fr; grid-template-areas: "nummer text" "aktionen aktionen"; }
  .plan-eintrag .nummer { grid-area: nummer; }
  .plan-eintrag .text { grid-area: text; }
  .plan-eintrag .aktionen { grid-area: aktionen; justify-content: flex-end; padding-top: var(--r4); border-top: 1px solid var(--linie); }
  .mission { grid-template-columns: auto 1fr; grid-template-areas: "haken text" "aktionen aktionen" "schritte schritte"; }
  .mission .haken { grid-area: haken; }
  .mission .text { grid-area: text; }
  .mission .aktionen { grid-area: aktionen; justify-content: flex-end; padding-top: var(--r4); border-top: 1px solid var(--linie); }
  .mission .schritte { grid-area: schritte; }
}


/* ---------- Kompaktes Befehlsformular ---------- */
.befehl-optionen { display: grid; grid-template-columns: 2fr 4fr; gap: var(--r8); }
.befehl-optionen .option { display: grid; gap: var(--r4); align-content: start; min-width: 0; }
.befehl-optionen .option.breit { grid-column: 1 / -1; }
.segmente.klein button { min-height: 40px; font-size: var(--s13); padding: 0 var(--r4); }
#missionFrist { margin-top: var(--r4); }
@media (max-width: 520px) {
  .befehl-optionen { grid-template-columns: 1fr; }
  .tagesbefehl { grid-template-columns: repeat(2, 1fr); }
  .befehl-wert:nth-child(2) { border-right: 0; }
  .befehl-wert:nth-child(-n+2) { border-bottom: 1px solid var(--linie); }
  .befehl-wert .zahl { font-size: var(--s32); }
}


/* ---------- Mitlesen: das gesprochene Wort leuchtet ---------- */
.megafon .spruch .w { transition: color 120ms ease-out, opacity 120ms ease-out; }
.megafon .spruch.liest .w.kommt { opacity: 0.45; }
.megafon .spruch.liest .w.aktiv { color: oklch(97% 0.01 90); }
@media (prefers-reduced-motion: reduce) { .megafon .spruch .w { transition: none; } }


/* ---------- 2.2: Lagebild mit Warnstreifen, Funkknopf, Befehlspanel ----------
   Grundlage: Version 2026-10-02 aus der Kommentar-Sitzung, hier nach den
   Gestaltungsregeln aufgeräumt (kein Seitenstreifen, Bewegung nur mit Zweck). */
.tagesbefehl {
  gap: 1px; border: 0; padding-top: 10px; box-shadow: var(--schatten);
  background: repeating-linear-gradient(-45deg, var(--akzent) 0 10px, var(--megafon-grund) 10px 20px) top / 100% 10px no-repeat, oklch(32% 0.012 250);
}
.befehl-wert { background: var(--megafon-grund); border: 0 !important; padding: var(--r12) var(--r8) var(--r16); }
.befehl-wert .zahl { font-size: clamp(2.5rem, 10vw, 3.25rem); line-height: 0.9; color: oklch(96% 0.005 90); }
.befehl-wert .label { color: var(--megafon-leise); font-weight: 700; letter-spacing: 0.1em; }
.befehl-wert.leise .zahl { color: oklch(52% 0.01 250); }
.befehl-wert.gut .zahl { color: var(--megafon-text); }
.befehl-wert.schande { background: oklch(40% 0.17 28); }
.befehl-wert.schande .zahl, .befehl-wert.schande .label { color: oklch(98% 0.01 30); }
@media (max-width: 520px) { .befehl-wert .zahl { font-size: 2.75rem; } }

.megafon { align-items: center; }
.megafon .wiederholen { width: 60px; height: 60px; border-radius: 50%; }
.megafon .wiederholen svg { width: 30px; height: 30px; }
.megafon .wiederholen:hover { transform: scale(1.06); }
.megafon .wiederholen.funk { animation: funk 1.2s ease-out 3; }
@keyframes funk { 0% { box-shadow: 0 0 0 0 oklch(72% 0.18 50 / 0.55); } 70% { box-shadow: 0 0 0 14px oklch(72% 0.18 50 / 0); } 100% { box-shadow: 0 0 0 0 oklch(72% 0.18 50 / 0); } }
@media (min-width: 840px) { .megafon .wiederholen { width: 68px; height: 68px; } }

#missionFormular { padding: var(--r12); border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); }
#missionFormular #missionText { min-height: 48px; font-weight: 600; }
#missionFormular .befehl-optionen .beschriftung { font-size: var(--s12); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 0; }


/* ---------- Prüfung 2026-10-02: Kontrast, Zielgrößen, Konsequenz ----------
   Orange Flächen bekommen im Hellmodus einen tiefen Rand (3:1 gegen Beton),
   Balken nutzen die Grafik-Variante, alle Tippflächen mindestens 44 px. */
.knopf.haupt, .overlay .knopf.haupt { border: 1px solid var(--akzent-rand); }
.segmente button[aria-pressed="true"], .segmente button[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--akzent-rand); }
.plan-eintrag.dran .nummer, .plan-eintrag .aktionen .knopf.start, .mission .aktionen .knopf.heute[aria-pressed="true"], .nav .marke { box-shadow: inset 0 0 0 1px var(--akzent-rand); }
.megafon .wiederholen { box-shadow: inset 0 0 0 1px var(--akzent-rand); }
.xp-balken > div, .fortschritt > div, .wochenbalken .tag.heute .balken { background: var(--akzent-grafik); }
.nav button[aria-current="page"]::after, .megafon { border-bottom-color: var(--akzent); }
.knopf.klein { min-height: 44px; }
.knopf.klein.symbol { width: 44px; height: 44px; }
.segmente.klein button { min-height: 44px; }
.schritt-neu .feld, .schritt-neu .knopf { min-height: 44px; }
.mission .schritt-knopf { min-height: 44px; padding: 0 var(--r4); margin: calc(var(--r4) * -1) 0; }
#missionFormular .befehl-optionen .beschriftung { font-size: var(--s13); text-transform: none; letter-spacing: 0; font-weight: 600; }
.app[inert] { filter: none; }

/* Zähler-Punkt in der Navigation: etwas Abstand zum Symbol */
.nav .marke { top: 6px; right: calc(50% - 30px); min-width: 20px; text-align: center; }
@media (min-width: 840px) { .nav .marke { top: 50%; right: var(--r12); transform: translateY(-50%); } }


/* ---------- 3.0 Konto, Anmeldung, Serverbetrieb ---------- */
body.pruefe .app { visibility: hidden; }

/* Anmelde-Overlay: Asphalt, Warnband oben (wie im Lagebild), Karte erst ab Tablet */
.overlay.konto {
  --konto-flaeche: oklch(17% 0.01 250);
  --konto-text: oklch(92% 0.008 250);
  --konto-leise: oklch(80% 0.01 250);
  --konto-rand: oklch(66% 0.012 250);
  color-scheme: dark;
  z-index: 60; align-items: start; scroll-padding-bottom: 88px;
  background: repeating-linear-gradient(-45deg, var(--akzent) 0 10px, oklch(12% 0.01 250) 10px 20px) top / 100% 8px no-repeat, oklch(12% 0.01 250);
  padding-top: calc(var(--r24) + 8px);
}
.overlay.konto .karte { margin-block: 0 var(--r24); gap: var(--r16); }
.konto-marke { display: flex; align-items: center; justify-content: center; gap: var(--r8); font-family: var(--schrift-display); font-weight: 900; font-size: var(--s20); letter-spacing: 0.12em; color: var(--konto-leise) !important; line-height: 1; }
.konto-marke svg { width: 20px; height: 20px; color: var(--akzent); }
.overlay.konto h1 { font-size: var(--s40); }
.overlay.konto .brueller { font-size: var(--s20); min-height: 2.2em; display: grid; align-content: start; color: var(--konto-leise); text-wrap: balance; }
.overlay.konto .segmente { border-color: var(--konto-rand); }
.overlay.konto .segmente button { border-color: var(--konto-rand); }
.overlay.konto :focus-visible { outline-color: var(--megafon-text); }

.konto-form { display: grid; gap: var(--r16); }
.konto-form[hidden] { display: none; }
.konto-zeile { display: grid; gap: var(--r4); }
.overlay .konto-zeile .beschriftung { color: var(--konto-text); font-size: var(--s14); margin: 0; }
.overlay.konto .feld { text-align: left; font-size: var(--s16); border-color: var(--konto-rand); }
.overlay.konto .feld:focus { border-color: var(--megafon-text); }
.overlay .konto-hinweis { font-size: var(--s14); color: var(--konto-leise); }

/* Zustimmung: ein geschlossener Block, Kernsatz groß, Rest lesbar klein */
.zustimmung {
  display: grid; grid-template-columns: 28px 1fr; gap: var(--r12); align-items: start;
  padding: var(--r12); border: 1px solid var(--konto-rand); border-radius: var(--radius-klein);
  background: var(--konto-flaeche); font-size: var(--s14); line-height: 1.5; color: var(--konto-leise); cursor: pointer;
}
.zustimmung:has(input:checked) { border-color: var(--megafon-text); }
.zustimmung:has(input:focus-visible) { outline: 3px solid var(--megafon-text); outline-offset: 2px; }
.zustimmung-kern { display: block; font-size: var(--s16); font-weight: 600; color: var(--konto-text); line-height: 1.4; }
.zustimmung-rest { display: block; margin-top: var(--r8); }
.zustimmung input {
  appearance: none; -webkit-appearance: none; width: 28px; height: 28px; margin: 0; flex: none;
  border: 2px solid var(--konto-rand); border-radius: 4px; background: oklch(18% 0.01 250); cursor: pointer;
  display: grid; place-items: center;
}
.zustimmung input:checked { background: var(--akzent); border-color: var(--akzent); }
.zustimmung input:checked::after { content: ""; width: 14px; height: 8px; border-left: 3px solid var(--akzent-text); border-bottom: 3px solid var(--akzent-text); transform: translateY(-2px) rotate(-45deg); }
.zustimmung input:focus-visible { outline: 0; }
.zustimmung a, .konto-fuss a { color: var(--megafon-text); text-underline-offset: 3px; }
.zustimmung a { display: inline; padding: 0; }

/* Meldung: immer sichtbar am unteren Rand, auch wenn der Knopf weit oben liegt */
.overlay .fehler#kontoFehler {
  position: sticky; bottom: var(--r8); z-index: 2;
  min-height: 0; margin: 0; padding: var(--r12) var(--r16);
  border: 1px solid var(--megafon-text); border-radius: var(--radius-klein);
  background: oklch(20% 0.04 55); color: oklch(95% 0.02 70); font-size: var(--s16); line-height: 1.35; text-align: left;
  overflow-wrap: anywhere; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.overlay .fehler#kontoFehler:empty { padding: 0; border-width: 0; box-shadow: none; background: none; margin-block: calc(var(--r8) * -1); }

.konto-fuss { display: flex; flex-wrap: wrap; gap: 0 var(--r16); font-size: var(--s14); justify-content: center; margin: 0; }
.konto-fuss a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--r4); }
.overlay .zustimmung a:focus-visible, .overlay .konto-fuss a:focus-visible { outline: 3px solid var(--megafon-text); outline-offset: 2px; }

@media (min-width: 600px) {
  .overlay.konto { align-items: center; }
  .konto-form { gap: var(--r12); }
  .zustimmung { padding: var(--r12) var(--r16); }
  .overlay.konto .karte { margin-block: auto; max-width: 540px; padding: var(--r24) var(--r32); background: var(--konto-flaeche); border: 1px solid oklch(32% 0.012 250); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); }
}
/* Kleine Höhe (Handy mit Bildschirmtastatur): kompakter Kopf, nichts Überflüssiges */
@media (max-height: 700px) {
  .overlay.konto { padding-top: calc(var(--r16) + 8px); }
  .konto-marke { display: none; }
  .overlay.konto h1 { font-size: var(--s32); }
  .overlay.konto .brueller { font-size: var(--s16); min-height: 2.2em; }
  .overlay.konto .karte { gap: var(--r12); }
  .konto-form { gap: var(--r12); }
}

/* Akte: Konto-Block. Aktionen füllen die Zeile, Gefahr steht abgesetzt darunter */
#kontoBereich { gap: var(--r12); }
#kontoInfo { overflow-wrap: anywhere; }
#kontoBereich a.knopf { text-decoration: none; }
.knopf.klein.haupt { font-size: var(--s16); letter-spacing: 0.05em; }
.schalter::before { content: ""; position: absolute; inset: -6px -4px; } /* Tippfläche 44 px hoch, Optik unverändert */
.knopfzeile:has(#kontoLoeschenBtn) { margin-top: var(--r8); padding-top: var(--r16); border-top: 1px solid var(--linie); }
.bestaetigung label.beschriftung { margin: var(--r4) 0 calc(var(--r4) * -1); color: var(--text); font-size: var(--s14); }
.bestaetigung > strong { font-size: var(--s16); line-height: 1.3; }
@media (max-width: 520px) {
  #kontoBereich .knopfzeile .knopf, .einstellung:has(#exportBtn) .knopfzeile .knopf { flex: 1 1 auto; }
}
#kontoBereich .hinweis a { color: var(--text); text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; padding: 0 var(--r4); }
.bestaetigung.neutral { border-color: var(--linie-stark); background: var(--flaeche-2); }
.bestaetigung .feld { width: 100%; }
.fehler-klein { color: var(--schande); font-size: var(--s14); font-weight: 600; min-height: 1.2em; }
.fehler-klein:empty { min-height: 0; margin-top: calc(var(--r8) * -1); }

.overlay .abend-hinweis { font-size: var(--s13); color: oklch(78% 0.01 250); margin-bottom: var(--r8); }
.einstellung > .hinweis { margin-top: var(--r4); }
.overlay .segmente { border-color: oklch(60% 0.012 250); }
.overlay .segmente button { background: transparent; color: oklch(94% 0.008 90); border-color: oklch(62% 0.012 250); }
.overlay .segmente button[aria-checked="true"] { background: var(--akzent); color: var(--akzent-text); }

/* Dialoge (Schwur, Abendbericht): deckend, damit die App dahinter nicht durchscheint und stört */
.overlay:not(.alarm):not(.konto) { background: oklch(11% 0.01 250); }


/* ---------- Arbeitsplatz: ab 1200 px zwei Spalten statt einer schmalen Röhre ----------
   Kopf, Megafon und Inhalt teilen sich eine Kante (Container 1200 px), das Megafon
   wird kleiner, damit Missionen und Formular ohne Scrollen im Blick bleiben. */
@media (min-width: 1200px) {
  .kopf, .megafon { padding-inline: max(var(--r32), calc((100% - 1200px) / 2 + var(--r32))); }
  .megafon { padding-block: var(--r16); min-height: 0; }
  .megafon .spruch { font-size: clamp(var(--s32), 2.6vw, 2.75rem); }
  .megafon .spruch.lang { font-size: clamp(var(--s24), 2.1vw, 2.125rem); }
  .inhalt { max-width: 1200px; padding-top: var(--r24); }
  .ansicht { align-items: start; }

  /* Heute: Lagebild quer, links planen und erteilen, rechts die Missionsliste */
  #ansichtHeute { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--r32); row-gap: var(--r24); }
  #ansichtHeute > .abschnitt:nth-child(1) { grid-column: 1 / -1; }
  #ansichtHeute > .abschnitt:nth-child(2) { grid-column: 1; grid-row: 2; }
  #ansichtHeute > .abschnitt:nth-child(3) { grid-column: 1; grid-row: 3; }
  #ansichtHeute > .abschnitt:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
  #ansichtHeute .tagesbefehl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #ansichtHeute .befehl-wert .zahl { font-size: var(--s56); }

  /* Appell und Akte: zwei Spalten, Drill: Einstellung links, Uhr rechts */
  #ansichtAppell, #ansichtAkte, #ansichtDrill { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--r32); row-gap: var(--r24); }
  #ansichtAkte { grid-template-rows: auto 1fr; }
  #ansichtDrill { grid-template-rows: auto auto 1fr; }
  #ansichtAkte > .abschnitt:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  #ansichtDrill > .abschnitt { grid-column: 1; grid-row: 1 / span 3; }
  #ansichtDrill > .timer-block { grid-column: 2; grid-row: 1; }
  #ansichtDrill > .nachfrage { grid-column: 2; grid-row: 2; }
  #ansichtDrill > .hinweis { grid-column: 2; grid-row: 3; }
}
@media (min-width: 1700px) {
  .kopf, .megafon { padding-inline: max(var(--r32), calc((100% - 1360px) / 2 + var(--r32))); }
  .inhalt { max-width: 1360px; }
}

.pw-zeigen { display: inline-flex; align-items: center; gap: var(--r8); min-height: 44px; font-size: var(--s14); color: oklch(82% 0.01 250); cursor: pointer; }
.pw-zeigen input { width: 22px; height: 22px; accent-color: var(--akzent); margin: 0; }