:root {
  --papier: #EEF0F4;
  --flaeche: #FFFFFF;
  --tinte: #1D2340;
  --lasur: #5E6E91;
  --linie: #D3D7E2;
  --gruen: #3E8E5A;
  --bernstein: #B87A14;
  --bernstein-hell: #F6E7C8;
  --rost: #A9532C;
  --rost-hell: #F3DDD3;
  --titel: "Bodoni Moda", "Didot", Georgia, serif;
  --text: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --rand: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141829; --flaeche: #1E2338; --tinte: #E6E8F0; --lasur: #9AA6C4; --linie: #2E3452;
    --gruen: #6CC08A; --bernstein: #E2A33B; --bernstein-hell: #3A2F17; --rost: #E08A63; --rost-hell: #3B2219;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 17px/1.5 var(--text);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
main { max-width: 560px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) var(--rand) 24px; outline: none; }
h1, h2 { margin: 0; font-weight: 700; }
h2 { font-size: 15px; color: var(--lasur); margin: 28px 0 8px; }
p { margin: 0 0 12px; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lasur); outline-offset: 2px; border-radius: 4px; }

/* Titel einer Folge: die Frage in Didone */
.frage { font-family: var(--titel); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }

/* Ideenfeld als Titelkarte */
.idee { border-bottom: 2px solid var(--tinte); padding: 8px 0 12px; }
.idee label { display: block; font-family: var(--titel); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.idee textarea {
  width: 100%; border: 0; background: transparent; resize: none; padding: 6px 0 0;
  font-family: var(--titel); font-style: italic; font-size: 26px; line-height: 1.2; min-height: 2.6em;
}
.idee textarea::placeholder { color: var(--lasur); opacity: .7; }
.idee textarea:focus-visible { outline: none; }
.idee .zeile { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 8px; }
.idee .notiz { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--linie); background: transparent; padding: 6px 0; font-size: 15px; }

.knopf {
  appearance: none; border: 0; border-radius: 999px; background: var(--tinte); color: var(--papier);
  padding: 10px 18px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap;
}
.knopf.leise { background: transparent; color: var(--tinte); border: 1.5px solid var(--linie); padding: 7px 14px; font-weight: 400; }
.knopf.warn { background: var(--rost); color: #fff; }
.knopf[disabled] { opacity: .5; }

.hinweis { border-radius: 10px; padding: 12px 14px; margin-top: 20px; background: var(--bernstein-hell); }
.hinweis strong { display: block; color: var(--bernstein); }
.hinweis.fehler { background: var(--rost-hell); }
.hinweis.fehler strong { color: var(--rost); }

/* Das, was gerade entsteht */
.gerade { background: var(--flaeche); border-radius: 14px; padding: 16px; margin-top: 20px; }
.gerade .frage { font-size: 24px; margin: 4px 0 14px; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.schritte li { font-size: 12px; color: var(--lasur); padding-top: 8px; border-top: 4px solid var(--linie); }
.schritte li.erledigt { border-color: var(--gruen); color: var(--tinte); }
.schritte li.jetzt { border-color: var(--tinte); color: var(--tinte); font-weight: 700; }
.schritte li.jetzt.pause { border-color: var(--bernstein); }
.klein { font-size: 14px; color: var(--lasur); }

/* Kennzahlen */
.zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); border-radius: 12px; overflow: hidden; margin-top: 8px; }
.zahlen div { background: var(--papier); padding: 12px 14px; }
.zahlen b { display: block; font-family: var(--titel); font-size: 28px; font-weight: 500; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.zahlen span { font-size: 14px; color: var(--lasur); }

/* Listen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.liste li > a:not(.knopf) { flex: 1; min-width: 0; text-decoration: none; }
.liste .frage { font-size: 19px; display: block; overflow-wrap: anywhere; }
.status { font-size: 13px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; background: var(--linie); }
.status.fertig { background: var(--gruen); color: #fff; }
.status.pausiert { background: var(--bernstein-hell); color: var(--bernstein); }
.status.fehlgeschlagen { background: var(--rost-hell); color: var(--rost); }
.status.in_arbeit { background: var(--tinte); color: var(--papier); }
.leer { color: var(--lasur); padding: 16px 0; }

/* Detail */
.zurueck { display: inline-block; margin-bottom: 12px; text-decoration: none; color: var(--lasur); }
video { width: 100%; max-height: 70vh; background: #000; border-radius: 12px; margin: 16px 0 4px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.beschreibung { white-space: pre-wrap; background: var(--flaeche); border-radius: 10px; padding: 12px; font-size: 15px; }
dl.kosten { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
dl.kosten dt { color: var(--lasur); }
dl.kosten dd { margin: 0; font-variant-numeric: tabular-nums; }
.protokoll { font-size: 14px; }
.protokoll li { display: block; padding: 6px 0; }
.protokoll time { color: var(--lasur); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* Formulare */
.feld { display: grid; grid-template-columns: 1fr 110px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.feld input { width: 100%; border: 1.5px solid var(--linie); border-radius: 8px; padding: 8px; background: var(--flaeche); text-align: right; }
.feld small { display: block; color: var(--lasur); font-size: 13px; }
.anmeldung { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
.anmeldung h1 { font-family: var(--titel); font-size: 44px; line-height: 1; margin-bottom: 24px; }
.anmeldung input { width: 100%; border: 1.5px solid var(--linie); border-radius: 10px; padding: 12px; background: var(--flaeche); margin-bottom: 12px; }

/* Leiste unten */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px;
  background: var(--flaeche); border-top: 1px solid var(--linie); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.leiste[hidden] { display: none; }
.leiste a { flex: 1; max-width: 180px; text-align: center; text-decoration: none; padding: 10px 0; border-radius: 10px; color: var(--lasur); font-weight: 700; }
.leiste a[aria-current="page"] { color: var(--tinte); background: var(--papier); }

.meldung {
  position: fixed; left: var(--rand); right: var(--rand); bottom: calc(80px + env(safe-area-inset-bottom)); max-width: 528px; margin: 0 auto;
  background: var(--tinte); color: var(--papier); border-radius: 10px; padding: 12px 14px; opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.meldung.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .meldung { transition: none; } }