/* Kitapuls – Gestaltung
   Mobil zuerst: Eltern melden morgens um sieben mit einer Hand am Handy ab.
   Große Schaltflächen, wenig Text, kein Scrollen für die Hauptaktion. */

:root {
  --grund: #f6f7f9;
  --karte: #ffffff;
  --linie: #dfe3e8;
  --text: #1c2430;
  --leise: #5c6672;
  --akzent: #1f6f5c;
  --akzent-hell: #e6f2ee;
  --warn: #9a4b00;
  --warn-hell: #fdf0e2;
  --alarm: #a01f2e;
  --alarm-hell: #fbeaec;
  --rund: 12px;
  --schatten: 0 1px 2px rgba(20, 30, 45, .06), 0 4px 12px rgba(20, 30, 45, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14181d; --karte: #1c2229; --linie: #2e3841;
    --text: #e8ecf1; --leise: #9aa5b1;
    --akzent: #5fbfa4; --akzent-hell: #17332c;
    --warn: #e8a75c; --warn-hell: #33261505;
    --alarm: #f08a95; --alarm-hell: #33191d;
    --schatten: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--grund);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

/* ---- Gerüst ------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
header h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
header .luecke { flex: 1; }
header .wer { font-size: 13px; color: var(--leise); }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 96px; }

nav.reiter {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 8px 16px 0; background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
nav.reiter a {
  padding: 10px 14px; border-radius: 8px 8px 0 0;
  color: var(--leise); text-decoration: none; font-size: 15px; white-space: nowrap;
}
nav.reiter a.aktiv { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }

/* ---- Karten und Listen -------------------------------------------------- */
.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--schatten);
}
.karte h2 { margin: 0 0 4px; font-size: 16px; }
.karte h2 + .unter { margin: 0 0 14px; }
.unter { color: var(--leise); font-size: 14px; margin: 0 0 12px; }

.zeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
.zeile:first-of-type { border-top: 0; }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .haupt b { display: block; font-weight: 600; }
.zeile .haupt span { color: var(--leise); font-size: 14px; }

.marke {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.marke.gut   { background: var(--akzent-hell); color: var(--akzent); }
.marke.warn  { background: var(--warn-hell);   color: var(--warn); }
.marke.alarm { background: var(--alarm-hell);  color: var(--alarm); }
.marke.leise { background: var(--grund);       color: var(--leise); }

/* ---- Formulare ---------------------------------------------------------- */
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
label .zusatz { font-weight: 400; color: var(--leise); }

input, select, textarea {
  width: 100%; padding: 12px; font: inherit;
  background: var(--karte); color: var(--text);
  border: 1px solid var(--linie); border-radius: 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
textarea { min-height: 90px; resize: vertical; }

.reihe { display: flex; gap: 10px; }
.reihe > * { flex: 1; }

button {
  padding: 13px 18px; font: inherit; font-weight: 600;
  border: 1px solid var(--akzent); border-radius: 10px;
  background: var(--akzent); color: #fff; cursor: pointer;
}
button:hover { filter: brightness(1.06); }
button:disabled { opacity: .5; cursor: default; }
button.gross { width: 100%; padding: 16px; font-size: 17px; }
button.leise { background: transparent; color: var(--text); border-color: var(--linie); }
button.gefahr { background: transparent; color: var(--alarm); border-color: var(--alarm); }
button.klein { padding: 8px 12px; font-size: 14px; }

/* Die Kacheln auf der Elternseite: eine Aktion, ein großes Feld. */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kachel {
  display: block; text-align: left; padding: 18px 16px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  color: var(--text); text-decoration: none; box-shadow: var(--schatten); cursor: pointer;
}
.kachel:hover { border-color: var(--akzent); }
.kachel .sym { font-size: 24px; display: block; margin-bottom: 6px; }
.kachel b { display: block; font-size: 16px; }
.kachel span { color: var(--leise); font-size: 13px; }

/* ---- Hinweise ----------------------------------------------------------- */
.hinweis {
  padding: 12px 14px; border-radius: 10px; font-size: 14px;
  border: 1px solid var(--linie); background: var(--grund); margin-bottom: 14px;
}
.hinweis.warn  { background: var(--warn-hell);  border-color: var(--warn);  color: var(--warn); }
.hinweis.alarm { background: var(--alarm-hell); border-color: var(--alarm); color: var(--alarm); }
.hinweis.gut   { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); }
.hinweis b { display: block; margin-bottom: 2px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  max-width: 90vw; padding: 12px 18px; border-radius: 999px;
  background: var(--text); color: var(--grund); font-size: 14px;
  opacity: 0; pointer-events: none; transition: .2s; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.wbadge {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  padding: 10px 14px; border-radius: 10px; text-align: center; font-size: 13px;
  background: var(--warn-hell); color: var(--warn); border: 1px solid var(--warn); z-index: 40;
}

.leer { padding: 28px 16px; text-align: center; color: var(--leise); font-size: 15px; }

details.aufklapp { border-top: 1px solid var(--linie); padding: 12px 0; }
details.aufklapp summary { cursor: pointer; font-weight: 600; }
details.aufklapp .inhalt { padding-top: 10px; font-size: 14px; color: var(--leise); }

dl.fakten { margin: 0; font-size: 14px; }
dl.fakten dt { font-weight: 600; margin-top: 10px; }
dl.fakten dd { margin: 2px 0 0; color: var(--leise); }

/* ---- Aushang: muss auf Papier funktionieren ----------------------------- */
.aushang {
  background: #fff; color: #111; padding: 28px;
  border: 1px solid var(--linie); border-radius: var(--rund);
  white-space: pre-wrap; font-size: 15px; line-height: 1.6;
}
@media print {
  header, nav.reiter, .nichtdrucken, .toast, .wbadge { display: none !important; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .aushang { border: 0; padding: 0; font-size: 12pt; }
}

@media (max-width: 420px) {
  .kacheln { grid-template-columns: 1fr; }
  .reihe { flex-direction: column; }
}