/* Stylesheet des Freigabe-Fensters. Die CSP erlaubt nur style-src 'self':
   Die Seiten haben keinen Inline-Stil. Die Farbe des Kopfes (Violett) kommt in
   der App nicht vor; sie soll das Freigabe-Fenster auf den ersten Blick von der
   App unterscheiden. Der Abschnitt „Zurück“ hat einen anderen Farbton (Blaugrün). */
:root {
  color-scheme: light dark;
  --bg: #f6f5f2; --card: #fff; --fg: #1d1d1f; --muted: #6b6b70; --line: #d9d7d2;
  --kopf: #4b1d7a; --kopf-fg: #fff;
  --rot: #a3312a; --rot-bg: #fbeceb;
  --zurueck: #0b6b73; --zurueck-bg: #e8f4f5;
  --akzent: #4b1d7a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141416; --card: #1d1d20; --fg: #ececee; --muted: #9a9aa0; --line: #34343a;
    --kopf: #6a3aa8; --kopf-fg: #fff;
    --rot: #ef8a80; --rot-bg: #3a1f1d;
    --zurueck: #5cc3cc; --zurueck-bg: #12292b;
    --akzent: #b697e0;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; }
.banner { background: var(--kopf); color: var(--kopf-fg); padding: 12px 20px; }
.banner p { margin: 2px 0; }
main { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; }
main.schmal { max-width: 380px; }
h1 { font-size: 20px; margin: 8px 0 16px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
h3 { font-size: 16px; margin: 12px 0 8px; }
h4 { font-size: 15px; margin: 0 0 6px; }
h5 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); }
p { margin: 8px 0; }
code { font: 13px/1.4 ui-monospace, monospace; }
pre { margin: 6px 0; padding: 10px; overflow-x: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font: 12px/1.4 ui-monospace, monospace; white-space: pre-wrap; word-break: break-word; }
a { color: var(--akzent); }
ul { margin: 4px 0; padding-left: 22px; }
.klein { color: var(--muted); font-size: 13px; }
.rot { color: var(--rot); }
.fett { font-weight: 700; }
.fehler { margin: 8px 0 16px; padding: 10px 12px; color: var(--rot); background: var(--rot-bg); border: 1px solid var(--rot); border-radius: 6px; }
.warnung { padding: 10px 12px; background: var(--rot-bg); border: 1px solid var(--rot); border-radius: 6px; font-weight: 600; }
.zustand { padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.zustand.rot { background: var(--rot-bg); border-color: var(--rot); }
.stand { margin: 12px 0; }
.kasten { margin: 12px 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.agenten { border-style: dashed; }
.undjetzt { border-color: var(--akzent); }
.wortlaut { margin: 12px 0; }
.wortlaut summary, .ausgabe summary { cursor: pointer; }
form.freigabe { margin: 16px 0; padding: 14px; background: var(--card); border: 2px solid var(--kopf); border-radius: 8px; }
label { display: block; margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
label input[type="checkbox"] { margin-right: 6px; }
input[type="text"], input[type="password"] { width: 100%; max-width: 280px; padding: 9px 10px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; }
input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
button { margin-top: 8px; padding: 10px 16px; font: inherit; font-weight: 600; color: var(--kopf-fg); background: var(--kopf); border: 0; border-radius: 6px; cursor: pointer; }
button.leise { margin-right: 8px; font-weight: 400; color: var(--fg); background: transparent; border: 1px solid var(--line); }
form.abmelden { margin-top: 32px; }
.zurueck-abschnitt { margin-top: 32px; padding: 4px 16px 16px; background: var(--zurueck-bg); border-left: 6px solid var(--zurueck); border-radius: 8px; }
.zurueck-abschnitt h2 { color: var(--zurueck); }
.zurueck-abschnitt form.freigabe { border-color: var(--zurueck); }
.zurueck-abschnitt button { background: var(--zurueck); }
table.ziele { width: 100%; border-collapse: collapse; margin: 8px 0; }
table.ziele th, table.ziele td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.ziele tr.gewaehlt td { font-weight: 700; }
.satz { font-size: 17px; font-weight: 600; }
.satz.rot { padding: 10px 12px; background: var(--rot-bg); border: 1px solid var(--rot); border-radius: 6px; }
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 12px 0; }
dl.daten dt { color: var(--muted); }
dl.daten dd { margin: 0; }
ol.schritte { padding-left: 22px; }
ol.schritte li.erledigt { color: var(--muted); }
ol.schritte li.laeuft { font-weight: 700; }
ol.schritte li.fehler { font-weight: 700; color: var(--rot); }