/* =====================================================================
   Professionelles Erscheinungsbild für Erwachsene (Ticket #206, #211):
   gemeinsam für die Verwaltung (body.verwaltung) und den Elternbereich (body.erwachsene).
   hell, ruhig, viel Weissraum, Lern-Zoo-Grün nur als Akzent.
   Optionaler dunkler Modus über html[data-vw-thema="dunkel"] (Umschalter in der Verwaltung und im Elternbereich;
   in der Kinderansicht wird das Attribut entfernt).
   Wird nach style.css bzw. verwaltung.css geladen; die Kinderansicht (ohne diese Klassen) bleibt unverändert.
   ===================================================================== */
html:has(> body.verwaltung), html:has(> body.erwachsene) { font-size: 17px; }
html {
  --vw-bg: #f6f8f7; --vw-fl: #ffffff; --vw-fl2: #f1f4f2; --vw-rand: #dfe5e1; --vw-text: #1d2a22; --vw-text2: #4f5d55;
  --vw-akzent: #2b8a3e; --vw-akzent-h: #237032; --vw-akzent-bg: #e8f5ec; --vw-link: #1f6f35; --vw-fokus: #1c7ed6;
  --vw-schatten: 0 1px 2px rgba(16, 32, 22, 0.06), 0 1px 3px rgba(16, 32, 22, 0.05);
}
html[data-vw-thema="dunkel"] {
  --vw-bg: #121815; --vw-fl: #1a221e; --vw-fl2: #222c27; --vw-rand: #33403a; --vw-text: #e6ece8; --vw-text2: #a9b6ae;
  --vw-akzent: #3fae58; --vw-akzent-h: #4cc066; --vw-akzent-bg: #1f3527; --vw-link: #7fd193; --vw-fokus: #74c0fc;
  --vw-schatten: none; color-scheme: dark;
}
:is(body.verwaltung, body.erwachsene) { background: var(--vw-bg); color: var(--vw-text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; }
:is(.verwaltung, .erwachsene) #app { padding: 1rem 1.25rem 2.5rem; }
:is(.verwaltung, .erwachsene) :is(h1, h2, h3) { font-weight: 650; letter-spacing: -0.01em; color: var(--vw-text); }
:is(.verwaltung, .erwachsene) h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
:is(.verwaltung, .erwachsene) h3 { font-size: 1.05rem; }
:is(.verwaltung, .erwachsene) h1 span, :is(.verwaltung, .erwachsene) .small, :is(.verwaltung, .erwachsene) .hint { color: var(--vw-text2); }
:is(.verwaltung, .erwachsene) .small { font-size: 0.82rem; }
:is(.verwaltung, .erwachsene) a { color: var(--vw-link); }
:is(.verwaltung, .erwachsene) summary { color: var(--vw-text); font-weight: 600; }

/* Kopfzeile und Navigation (Reiter) */
:is(.verwaltung, .erwachsene) .top { background: var(--vw-fl); border: 1px solid var(--vw-rand); border-radius: 0.75rem; box-shadow: var(--vw-schatten);
  padding: 0.55rem 0.9rem; margin-bottom: 0.9rem; }
:is(.verwaltung, .erwachsene) .top .who { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
/* Desktop: kompakte Reiter, die bei Platzmangel umbrechen statt zu scrollen */
:is(.verwaltung, .erwachsene) .tabs { gap: 0 0.1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--vw-rand); flex-wrap: wrap; }
:is(.verwaltung, .erwachsene) .tab { background: transparent; color: var(--vw-text2); box-shadow: none; border-radius: 0; font-size: 0.86rem; font-weight: 600;
  padding: 0.45rem 0.6rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
/* Handy: Auswahlfeld statt Reiter (siehe Media-Query unten) */
.tab-wahl { display: none; }
:is(.verwaltung, .erwachsene) .tab:hover { color: var(--vw-text); background: var(--vw-fl2); }
:is(.verwaltung, .erwachsene) .tab.on { background: transparent; color: var(--vw-akzent); border-bottom-color: var(--vw-akzent); box-shadow: none; }

/* Karten, Tabellen, aufklappbare Blöcke */
:is(.verwaltung, .erwachsene) .card { background: var(--vw-fl); border: 1px solid var(--vw-rand); border-radius: 0.75rem; box-shadow: var(--vw-schatten); padding: 1.25rem 1.4rem; }
:is(.verwaltung, .erwachsene) table.stats { font-size: 0.88rem; }
:is(.verwaltung, .erwachsene) .stats th { font-weight: 600; color: var(--vw-text2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--vw-rand); padding: 0.55rem 0.6rem; background: var(--vw-fl2); }
:is(.verwaltung, .erwachsene) .stats td { border-bottom: 1px solid var(--vw-rand); padding: 0.55rem 0.6rem; }
:is(.verwaltung, .erwachsene) .stats tbody tr:hover td, :is(.verwaltung, .erwachsene) .stats tr:hover > td { background: var(--vw-fl2); }
:is(.verwaltung, .erwachsene) .stats tr.fach th { background: var(--vw-fl2); }
:is(.verwaltung, .erwachsene) details { border-color: var(--vw-rand); }

/* Knöpfe: flach, klare Kontraste */
:is(.verwaltung, .erwachsene) .btn { background: var(--vw-fl); color: var(--vw-text); border: 1px solid var(--vw-rand); box-shadow: none; border-radius: 0.5rem;
  font-weight: 600; font-size: 0.92rem; padding: 0.5rem 1rem; }
:is(.verwaltung, .erwachsene) .btn.small { font-size: 0.82rem; padding: 0.3rem 0.65rem; }
:is(.verwaltung, .erwachsene) .btn:hover:not(:disabled) { background: var(--vw-fl2); }
:is(.verwaltung, .erwachsene) .btn:active { transform: none; box-shadow: none; }
:is(.verwaltung, .erwachsene) .btn.primary { background: var(--vw-akzent); border-color: var(--vw-akzent); color: #fff; }
:is(.verwaltung, .erwachsene) .btn.primary:hover:not(:disabled) { background: var(--vw-akzent-h); }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) .btn.primary { color: #0e1a12; }
:is(.verwaltung, .erwachsene) .btn.danger { background: #c92a2a; border-color: #c92a2a; color: #fff; }
:is(.verwaltung, .erwachsene) .btn.ghost { background: transparent; border-color: transparent; }
:is(.verwaltung, .erwachsene) .btn.ghost:hover:not(:disabled) { background: var(--vw-fl2); }

/* Formulare */
:is(.verwaltung, .erwachsene) input:not([type=checkbox]):not([type=radio]), :is(.verwaltung, .erwachsene) select, :is(.verwaltung, .erwachsene) textarea {
  border: 1px solid #b8c2bc; border-radius: 0.45rem; background: var(--vw-fl); color: var(--vw-text); padding: 0.45rem 0.65rem; }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) input:not([type=checkbox]):not([type=radio]),
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) select, html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) textarea { border-color: var(--vw-rand); }
:is(.verwaltung, .erwachsene) input:focus, :is(.verwaltung, .erwachsene) select:focus, :is(.verwaltung, .erwachsene) textarea:focus { outline: none; border-color: var(--vw-akzent);
  box-shadow: 0 0 0 3px var(--vw-akzent-bg); }
:is(.verwaltung, .erwachsene) input[type=checkbox], :is(.verwaltung, .erwachsene) input[type=radio] { accent-color: var(--vw-akzent); }

/* Fokus für Tastaturbedienung gut sichtbar */
:is(.verwaltung, .erwachsene) .btn:focus-visible, :is(.verwaltung, .erwachsene) .tab:focus-visible, :is(.verwaltung, .erwachsene) a:focus-visible,
:is(.verwaltung, .erwachsene) summary:focus-visible, :is(.verwaltung, .erwachsene) .tile-stat:focus-visible,
:is(.verwaltung, .erwachsene) tr.tzeile:focus-visible, :is(.verwaltung, .erwachsene) .tkarte:focus-visible {
  outline: 2px solid var(--vw-fokus); outline-offset: 2px; }

/* Hinweise und Meldungen */
:is(.verwaltung, .erwachsene) .warnbox { background: #fff8e1; color: #5c3d00; border: 1px solid #f5d77a; border-radius: 0.6rem; font-weight: 500; }
:is(.verwaltung, .erwachsene) .warnbox.bad { background: #fff0f0; color: #a51d1d; border-color: #f3b4b4; }
:is(.verwaltung, .erwachsene) .okbox { background: var(--vw-akzent-bg); color: var(--vw-text); border: 1px solid #b2dfbe; border-radius: 0.6rem; }
:is(.verwaltung, .erwachsene) .toast { background: #1d2a22; border-radius: 0.6rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
:is(.verwaltung, .erwachsene) .toast.bad { background: #b02525; }
:is(.verwaltung, .erwachsene) code { background: var(--vw-fl2); color: var(--vw-text); }
:is(.verwaltung, .erwachsene) dialog { background: var(--vw-fl); color: var(--vw-text); }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) .warnbox { background: #3a2f12; color: #ffe08a; border-color: #6b5520; }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) .warnbox.bad { background: #3d1a1a; color: #ffb3b3; border-color: #6e2c2c; }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) .okbox { border-color: #2f5a3b; }

/* Dialoge «Fehler melden / Wunsch» und «Neu im Lern-Zoo» (Ticket #214): flach, mit den Variablen, auch dunkel */
:is(.verwaltung, .erwachsene) :is(dialog.meldung, dialog.neuigkeiten[open]) { background: var(--vw-fl); color: var(--vw-text); border: 1px solid var(--vw-rand);
  border-radius: 0.75rem; box-shadow: 0 12px 40px rgba(16, 32, 22, 0.18); }
:is(.verwaltung, .erwachsene) :is(dialog.meldung, dialog.neuigkeiten)::backdrop { background: rgba(16, 24, 20, 0.5); }
:is(.verwaltung, .erwachsene) :is(.mtitel, .neu-kopf) h2 { color: var(--vw-text); font-size: 1.15rem; display: flex; align-items: center; gap: 0.45rem; margin: 0; }
:is(.verwaltung, .erwachsene) :is(.mtitel, .neu-kopf) .vw-ico { color: var(--vw-akzent); }
:is(.verwaltung, .erwachsene) .mform label { font-weight: 600; }
:is(.verwaltung, .erwachsene) dialog.meldung .mform :is(input:not([type=radio]), textarea) { border: 1px solid var(--vw-rand); border-radius: 0.45rem;
  background: var(--vw-fl); color: var(--vw-text); }
:is(.verwaltung, .erwachsene) dialog.meldung .mform input[type=file] { border-style: dashed; }
:is(.verwaltung, .erwachsene) .mform h3 { border-top-color: var(--vw-rand); }
:is(.verwaltung, .erwachsene) .mart-wahl span { border: 1px solid var(--vw-rand); border-radius: 0.6rem; font-weight: 650; }
:is(.verwaltung, .erwachsene) .mart-wahl small { color: var(--vw-text2); }
:is(.verwaltung, .erwachsene) .mart-wahl input:checked + span { border-color: var(--vw-akzent); background: var(--vw-akzent-bg); box-shadow: inset 0 0 0 1px var(--vw-akzent); }
:is(.verwaltung, .erwachsene) .mart-wahl input:focus-visible + span { outline: 2px solid var(--vw-fokus); outline-offset: 2px; }
:is(.verwaltung, .erwachsene) .mhinweis { background: var(--vw-fl2); color: var(--vw-text2); border: 1px solid var(--vw-rand); border-radius: 0.6rem; }
:is(.verwaltung, .erwachsene) .mmsg { background: var(--vw-akzent-bg); color: var(--vw-text); border-radius: 0.5rem; font-weight: 600; }
:is(.verwaltung, .erwachsene) .mbild img { border-color: var(--vw-rand); }
:is(.verwaltung, .erwachsene) .mliste li { border-bottom-color: var(--vw-rand); }
:is(.verwaltung, .erwachsene) .neu-liste .small { color: var(--vw-text2); }
:is(.verwaltung, .erwachsene) .mmsg.bad { background: #fff0f0; color: #a51d1d; }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) .mmsg.bad { background: #3d1a1a; color: #ffb3b3; }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) :is(dialog.meldung, dialog.neuigkeiten[open]) { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
/* Hinweis «Wo melde ich etwas?» (Ticket #419) */
:is(.verwaltung, .erwachsene) dialog.meldehinweis { background: var(--vw-fl); color: var(--vw-text); border: 1px solid var(--vw-rand);
  border-radius: 0.75rem; box-shadow: 0 12px 40px rgba(16, 32, 22, 0.18); }
:is(.verwaltung, .erwachsene) dialog.meldehinweis::backdrop { background: rgba(16, 24, 20, 0.5); }
:is(.verwaltung, .erwachsene) .mh-rahmen { border-color: var(--vw-rand); }
:is(.verwaltung, .erwachsene) .mh-bild figcaption { color: var(--vw-text2); }
html[data-vw-thema="dunkel"] :is(.verwaltung, .erwachsene) dialog.meldehinweis { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }

/* Nur Elternbereich: Unter-Reiter je Kind und Fach-Blöcke an die Verwaltung angleichen */
.erwachsene .tabs.kid-subtabs { margin: 0.6rem 0; padding-top: 0.6rem; border-top: 1px solid var(--vw-rand); }
.erwachsene .kid-subtabs .tab { font-size: 0.85rem; padding: 0.5rem 0.75rem; }
.erwachsene details.fach-block { border-top: 0; border-bottom: 1px solid var(--vw-rand); padding: 0.2rem 0; }
/* Umschalter heller/dunkler Modus in der Kopfzeile (Ticket #213) */
.erwachsene .vw-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.erwachsene .vw-thema { display: inline-flex; align-items: center; }
.erwachsene .vw-ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex: none; }

/* Responsiv: Tablet und Handy */
@media (max-width: 760px) {
  html:has(> body.verwaltung), html:has(> body.erwachsene) { font-size: 16px; }
  :is(.verwaltung, .erwachsene) #app { padding: 0.6rem 0.6rem 2rem; }
  :is(.verwaltung, .erwachsene) .top { flex-direction: column; align-items: flex-start; }
  :is(.verwaltung, .erwachsene) .card { padding: 1rem; }
  :is(.verwaltung, .erwachsene) .stats { display: block; overflow-x: auto; }
  :is(.verwaltung, .erwachsene) .tabs:not(.kid-subtabs) { display: none; }
  :is(.verwaltung, .erwachsene) select.tab-wahl { display: block; width: 100%; margin: 0 0 1rem; font-size: 1rem; font-weight: 600; min-height: 2.6rem; }
}
/* Lade-Anzeige (Ticket #496): sachlich – Kreis statt Tatze, Farben aus dem hellen bzw. dunklen Modus */
:is(body.verwaltung, body.erwachsene) .lade-box { width: 4rem; height: 4rem; border-radius: 0.75rem; background: var(--vw-fl); border: 1px solid var(--vw-rand);
  box-shadow: 0 6px 20px rgba(16, 32, 22, 0.16); }
:is(body.verwaltung, body.erwachsene) .lade-tatze { display: none; }
:is(body.verwaltung, body.erwachsene) .lade-kreis { display: block; width: 1.8rem; height: 1.8rem; border: 3px solid var(--vw-akzent-bg); border-top-color: var(--vw-akzent);
  border-radius: 50%; animation: spin 0.9s linear infinite; }
html[data-vw-thema="dunkel"] .lade-sperre { background: rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-motion: reduce) { :is(.verwaltung, .erwachsene) * { transition: none !important; animation: none !important; } }

/* Seite «Datenschutz & Impressum» (Ticket #379): breiter als die übrigen schmalen Karten, Hinweis-Kasten für den Entwurf */
.card.narrow.datenschutz { max-width: 48rem; }
.datenschutz h3 { margin-top: 1.4rem; }
.datenschutz h4 { font-size: 0.98rem; margin: 1rem 0 0.3rem; }
.datenschutz .entwurf-hinweis { border: 1px solid var(--vw-rand); border-left: 4px solid #e8a33d; background: var(--vw-fl2);
  border-radius: 0.5rem; padding: 0.6rem 0.9rem; margin: 0 0 1.2rem; font-size: 0.9rem; color: var(--vw-text2); }
.datenschutz .entwurf-hinweis p { margin: 0; }
.datenschutz .inhalt { font-size: 0.92rem; }
.datenschutz .inhalt ol { margin: 0.3rem 0 0; padding-left: 1.4rem; }