/* Lehrerzimmer – Gestaltung
   Farbtoken: Papier #FFFCF5, Tinte #2A2724, Honig #E3A12F, Heftblau #2E62A8, Grün #3D9A55, Rot #C9402F.
   Drei Breiten: Handy < 720 px (Leiste unten), Tablet 720–1200 px (schmale Seitenleiste), Bildschirm > 1200 px.
   Theme: html[data-theme="light"|"dark"|"auto"]. */

:root {
  --papier: #FFFCF5; --papier-2: #F5F0E4; --papier-3: #EBE4D3;
  --tinte: #2A2724; --tinte-2: #5C5751; --tinte-3: #8A847B;
  --honig: #E3A12F; --honig-hell: #FBEFD5;
  --blau: #2E62A8; --blau-hell: #E3ECF8;
  --gruen: #3D9A55; --gruen-hell: #E2F3E6;
  --rot: #C9402F; --rot-hell: #F9E3E0;
  --linie: #D9D2C2; --schatten: 0 1px 3px rgba(42,39,36,.10), 0 6px 18px rgba(42,39,36,.06);
  --radius: 14px; --radius-s: 8px;
  --seitenleiste: 240px; --seitenleiste-schmal: 72px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --basis: clamp(15px, 0.95vw + 10px, 18px);
  color-scheme: light;
}
html[data-theme="dark"], html[data-theme="auto"].dunkel {
  --papier: #1C1A18; --papier-2: #262320; --papier-3: #322E2A;
  --tinte: #F3EEE3; --tinte-2: #C9C2B4; --tinte-3: #8F887C;
  --honig: #F0B54A; --honig-hell: #3B3018;
  --blau: #6FA0E6; --blau-hell: #1E2C42;
  --gruen: #6CC584; --gruen-hell: #1D3324;
  --rot: #E6705F; --rot-hell: #3E211D;
  --linie: #3E3933; --schatten: 0 1px 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25);
  color-scheme: dark;
}
html[data-schrift="S"] { --basis: clamp(14px, 0.85vw + 9px, 16px); }
html[data-schrift="L"] { --basis: clamp(17px, 1.05vw + 11px, 21px); }
html[data-dichte="kompakt"] { --radius: 10px; }
html[data-dichte="kompakt"] .karte { padding: .7rem; }
html[data-dichte="kompakt"] th, html[data-dichte="kompakt"] td { padding: .3rem .45rem; }

* { box-sizing: border-box; }
html { font-size: var(--basis); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift); background: var(--papier); color: var(--tinte); line-height: 1.45; }
a { color: var(--blau); }
h1 { font-size: 1.6rem; margin: 0 0 .6rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; color: var(--tinte-2); }
p { margin: 0 0 .7rem; }
small, .klein { font-size: .85rem; color: var(--tinte-2); }
.leise { color: var(--tinte-3); }
:focus-visible { outline: 3px solid var(--honig); outline-offset: 2px; border-radius: 4px; }

/* Layout */
.app { display: grid; min-height: 100dvh; grid-template-columns: var(--seitenleiste) 1fr; }
.seitenleiste { background: var(--papier-2); border-right: 1px solid var(--linie); display: flex; flex-direction: column;
  padding: .8rem .6rem; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }  /* niedrige Bildschirme: Menü scrollt, „Abmelden“ bleibt erreichbar */
.marke { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem .9rem; font-weight: 700; }
.marke img { width: 34px; height: 34px; }
.menue { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menue a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--radius-s);
  color: var(--tinte); text-decoration: none; font-weight: 500; min-height: 44px; }
.menue a:hover { background: var(--papier-3); }
.menue a.aktiv { background: var(--blau); color: #fff; }
.menue a .symbol { width: 1.5rem; text-align: center; font-size: 1.15rem; }
.menue .unten { margin-top: auto; }
.inhalt { padding: 1.2rem clamp(.8rem, 2vw, 2rem) 5rem; max-width: 1600px; width: 100%; }
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kopfzeile .rechts { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

@media (max-width: 1200px) {
  .app { grid-template-columns: var(--seitenleiste-schmal) 1fr; }
  .seitenleiste { padding: .6rem .4rem; }
  .marke span, .menue a .text { display: none; }
  .menue a { justify-content: center; padding: .55rem; }
}
@media (max-width: 719px) {
  .app { grid-template-columns: 1fr; }
  .seitenleiste { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; border-right: 0;
    border-top: 1px solid var(--linie); flex-direction: row; padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom)); z-index: 30; }
  .marke { display: none; }
  .menue { flex-direction: row; justify-content: space-around; width: 100%; }
  .menue a { flex-direction: column; gap: 2px; padding: .35rem .4rem; font-size: .68rem; min-width: 56px; }
  .menue a .text { display: block; }
  .menue a.nur-gross { display: none; }
  .menue .unten { margin-top: 0; }
  .inhalt { padding-bottom: 6rem; }
}
.menue .nur-handy, .nur-handy { display: none; }   /* Handy-Leiste nur im Hochformat – spezifischer als .menue a */
@media (max-width: 719px) { .menue .nur-handy, .nur-handy { display: flex; } }

/* Bereiche (Redesign 29.10.2026): links nur fünf Bereiche, oben die Seiten des Bereichs als Leiste */
.menue a { min-height: 48px; }
.menue a .text-kurz { display: none; }
.bereichsleiste { display: flex; align-items: center; gap: .8rem; margin: -.2rem 0 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--linie); }
.bereich-name { font-weight: 700; color: var(--tinte-2); white-space: nowrap; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.bereich-seiten { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; flex: 1; padding: 2px; }
.bereich-seiten::-webkit-scrollbar { display: none; }
.bereich-seiten a, .bereich-zahnrad { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; min-height: 44px; padding: .4rem .95rem;
  border-radius: 999px; border: 1px solid var(--linie); background: var(--papier-2); color: var(--tinte); text-decoration: none; font-weight: 500; }
.bereich-seiten a:hover { background: var(--papier-3); }
.bereich-seiten a.aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }
html[data-theme="dark"] .bereich-seiten a.aktiv, html[data-theme="auto"].dunkel .bereich-seiten a.aktiv { color: #10161f; }
.bereich-zahnrad { padding: .4rem .7rem; flex: none; }
.bereichsleiste .nur-handy, .bereichsleiste.nur-am-handy { display: none; }
@media (max-width: 719px) {
  .menue a .text-lang { display: none; }
  .menue a .text-kurz { display: inline; }
  .menue a { font-size: .72rem; min-width: 60px; }
  .bereichsleiste { position: sticky; top: 0; z-index: 20; background: var(--papier); margin: -1.2rem calc(-1 * clamp(.8rem, 2vw, 2rem)) 1rem; padding: .6rem clamp(.8rem, 2vw, 2rem); gap: .5rem; }
  .bereich-name { display: none; }
  .bereichsleiste .nur-handy { display: inline-flex; }
  .bereichsleiste.nur-am-handy { display: flex; }
  .bereich-seiten a, .bereich-zahnrad { font-size: .85rem; padding: .3rem .75rem; gap: .25rem; }
}
@media print { .bereichsleiste { display: none !important; } }

/* Einstellungen: Gruppen-Liste links, Inhalt rechts; am Handy erst die Liste, dann der Abschnitt */
.einst-huelle { display: grid; grid-template-columns: 290px 1fr; gap: 1.4rem; align-items: start; }
.einst-liste { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .9rem; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 2px; }
.einst-liste input[type=search] { width: 100%; }
.einst-gruppe { display: flex; flex-direction: column; gap: 2px; }
.einst-gruppe h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-3); margin: 0 0 .2rem .5rem; }
.einst-gruppe button { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; min-height: 48px; padding: .4rem .6rem;
  border: 0; border-radius: var(--radius-s); background: transparent; color: var(--tinte); font-weight: 500; }
.einst-gruppe button:hover { background: var(--papier-3); }
.einst-gruppe button.aktiv { background: var(--blau-hell); color: var(--blau); box-shadow: inset 3px 0 0 var(--blau); }
.einst-symbol { width: 1.5rem; text-align: center; font-size: 1.1rem; }
.einst-text { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
.einst-text small { font-size: .78rem; color: var(--tinte-3); font-weight: 400; }
.einst-pfeil { display: none; color: var(--tinte-3); font-size: 1.3rem; }
.einst-kopf { margin-bottom: .8rem; }
.einst-kopf h2 { margin: 0; font-size: 1.35rem; }
.einst-zurueck { display: none; }
@media (max-width: 999px) { .einst-huelle { grid-template-columns: 230px 1fr; } }
@media (max-width: 719px) {
  .einst-huelle { grid-template-columns: 1fr; }
  .einst-liste { position: static; max-height: none; }
  .einst-huelle.liste-zeigen .einst-inhalt, .einst-huelle:not(.liste-zeigen) .einst-liste { display: none; }
  .einst-gruppe { background: var(--papier-2); border: 1px solid var(--linie); border-radius: var(--radius); padding: .3rem; }
  .einst-gruppe h3 { margin: .4rem 0 .2rem .5rem; }
  .einst-gruppe button + button { border-top: 1px solid var(--linie); border-radius: 0; }
  .einst-pfeil { display: inline; }
  .einst-zurueck { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
}
@media print { .einst-liste, .einst-zurueck { display: none !important; } }

/* Karten, Raster */
.karte { background: var(--papier-2); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; box-shadow: var(--schatten); }
.karte h2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
.raster > * { grid-column: span 12; }
@media (min-width: 720px) { .raster > .halb { grid-column: span 6; } .raster > .drittel { grid-column: span 4; } .raster > .zwei-drittel { grid-column: span 8; } }
@media (min-width: 1200px) { .raster > .viertel { grid-column: span 3; } }
.zeile { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spalte { display: flex; flex-direction: column; gap: .6rem; }
.abstand { margin-top: 1rem; }
.zahnrad { background: transparent; border: 0; color: var(--tinte-3); cursor: pointer; font-size: 1.1rem; padding: .2rem .4rem; border-radius: 6px; min-height: 36px; }
.zahnrad:hover { background: var(--papier-3); color: var(--tinte); }

/* Bedienelemente */
button, .knopf { font: inherit; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); border-radius: var(--radius-s);
  padding: .5rem .9rem; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
button:hover, .knopf:hover { background: var(--papier-3); }
button.primaer, .knopf.primaer { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }
button.primaer:hover { filter: brightness(1.08); }
button.gefahr { color: var(--rot); border-color: var(--rot); }
button.leise { border-color: transparent; background: transparent; }
button.klein, .knopf.klein { min-height: 34px; padding: .25rem .6rem; font-size: .9rem; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; color: var(--tinte); background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-s);
  padding: .5rem .7rem; min-height: 44px; width: 100%; }
textarea { min-height: 5rem; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 1.3rem; height: 1.3rem; min-height: 0; accent-color: var(--blau); }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--tinte-2); }
label.inline { flex-direction: row; align-items: center; gap: .5rem; color: var(--tinte); }
.formular { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.formular .voll { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { border: 1px solid var(--linie); background: var(--papier); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: .3rem; }
.chip.aktiv { background: var(--blau); color: #fff; border-color: var(--blau); }
.chip.honig { background: var(--honig-hell); border-color: var(--honig); }
/* Krank markiert (Andre, 30.09.2026): keine Pflichtabgabe. Das K ist
   wichtig - die Farbe allein traegt die Bedeutung nicht, und auf einem
   Beamer oder bei Farbsehschwaeche waere Gelb sonst nur hell. */
.chip.krank { background: var(--honig-hell); border-color: var(--honig); }
/* Zahl hinter einem Filter: kursiv, damit sie sich vom Namen abhebt und
   als Angabe lesbar ist, nicht als Teil der Beschriftung (Andre, 07.10.2026). */
.zahl-filter { font-style: italic; opacity: .7; font-variant-numeric: tabular-nums; }

/* Notenkacheln je Fach in der Kind-Seite (Andre, 07.10.2026): Die Fachfarbe
   traegt die Kachel, die Note steht gross darin. Ein Tipp blendet das Fach
   aus - dann wird die Kachel blass, bleibt aber lesbar (Farbe ist nie das
   einzige Merkmal: ausgeblendete Kacheln tragen zusaetzlich aria-pressed). */
.notenkacheln { gap: .5rem; }
.notenkachel { display: flex; flex-direction: column; gap: .3rem; align-items: stretch; text-align: left;
  padding: .5rem .6rem; min-height: 44px; cursor: pointer;
  background: color-mix(in srgb, var(--fachfarbe, var(--blau)) 10%, var(--papier));
  border: 1px solid color-mix(in srgb, var(--fachfarbe, var(--blau)) 45%, var(--linie));
  border-left: 4px solid var(--fachfarbe, var(--blau)); border-radius: var(--radius-s); }
.notenkachel:hover { background: color-mix(in srgb, var(--fachfarbe, var(--blau)) 18%, var(--papier)); }
.notenkachel.aus { opacity: .45; border-left-style: dashed; }
.notenkachel-note { font-size: 1.6rem; font-weight: 700; line-height: 1.1; align-self: flex-start;
  padding: .05rem .5rem; border-radius: var(--radius-s); }
.notenkachel-note.gruen { background: var(--gruen-hell); color: var(--gruen); }
.notenkachel-note.honig { background: var(--honig-hell); color: #8a5a00; }
.notenkachel-note.rot   { background: var(--rot-hell); color: var(--rot); }
.notenkachel-note.grau  { background: var(--papier-3); color: var(--tinte-2); }
html[data-theme="dark"] .notenkachel-note.honig, html[data-theme="auto"].dunkel .notenkachel-note.honig { color: var(--honig); }
td.zelle.krank, tr:hover td.zelle.krank { background: var(--honig-hell); position: relative; }
td.zelle.krank::after { content: "K"; position: absolute; top: 0; right: 3px; font-size: .6rem; font-weight: 700; color: #8a5a00; }
html[data-theme="dark"] td.zelle.krank::after, html[data-theme="auto"].dunkel td.zelle.krank::after { color: var(--honig); }
.marker { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.marker.blau { background: var(--blau-hell); color: var(--blau); }
.marker.gruen { background: var(--gruen-hell); color: var(--gruen); }
.marker.honig { background: var(--honig-hell); color: #8a5a00; }
.marker.rot { background: var(--rot-hell); color: var(--rot); }
.marker.grau { background: var(--papier-3); color: var(--tinte-2); }
html[data-theme="dark"] .marker.honig, html[data-theme="auto"].dunkel .marker.honig { color: var(--honig); }

/* Tabellen: scrollen in sich */
.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border: 1px solid var(--linie); border-radius: var(--radius-s); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; white-space: nowrap; }
th { background: var(--papier-3); position: sticky; top: 0; z-index: 1; font-weight: 600; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tr:hover td { background: color-mix(in srgb, var(--papier-3) 50%, transparent); }
th.fest, td.fest { position: sticky; left: 0; background: var(--papier-2); z-index: 2; }
th.fest { z-index: 3; }
table input, table select { min-height: 36px; padding: .25rem .4rem; }

/* Reiter */
.reiter { display: flex; gap: .2rem; border-bottom: 1px solid var(--linie); margin-bottom: 1rem; overflow-x: auto; }
.reiter button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; white-space: nowrap; }
.reiter button.aktiv { border-bottom-color: var(--blau); color: var(--blau); font-weight: 600; }

/* Modal, Toast */
.modal-hintergrund { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
/* „Bitte bestätigen“ kann auch aus dem Fenster von Andi/Mona kommen – es liegt über allem. */
.modal-hintergrund.ueber-allem { z-index: 80; }
.modal { background: var(--papier); border-radius: var(--radius); padding: 1.2rem; width: min(720px, 100%); max-height: 92dvh; overflow: auto; box-shadow: var(--schatten); }
.modal.breit { width: min(1100px, 100%); }
.modal .fuss { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; z-index: 60; }
@media (max-width: 719px) { .toasts { bottom: 5.2rem; } }
.toast { background: var(--tinte); color: var(--papier); padding: .6rem 1rem; border-radius: 999px; box-shadow: var(--schatten); display: flex; gap: .8rem; align-items: center; }
.toast button { color: var(--honig); background: transparent; border: 0; min-height: 0; padding: 0; font-weight: 600; }
.toast.fehler { background: var(--rot); color: #fff; }

/* Login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.login .karte { width: min(420px, 100%); }

/* Hilfsklassen */
.leer { color: var(--tinte-3); text-align: center; padding: 1.5rem; }
.rechts { text-align: right; }
.fett { font-weight: 600; }
.punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.haken { width: 1.4rem; height: 1.4rem; }
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.liste li { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border-radius: var(--radius-s); background: var(--papier); border: 1px solid var(--linie); }
.liste li.erledigt { opacity: .55; text-decoration: line-through; }
.ueberfaellig { color: var(--rot); font-weight: 600; }
.heute { color: #8a5a00; font-weight: 600; }
.warnung { background: var(--honig-hell); border: 1px solid var(--honig); border-radius: var(--radius-s); padding: .6rem .8rem; }
.hinweis { background: var(--blau-hell); border-radius: var(--radius-s); padding: .6rem .8rem; }
.laden { text-align: center; padding: 2rem; color: var(--tinte-3); }

/* Wochenplan / Stundenplan-Raster */
.wochenraster { display: grid; grid-template-columns: 3rem repeat(5, minmax(150px, 1fr)); gap: 4px; min-width: 820px; }
.wochenraster .kopf { font-weight: 600; text-align: center; padding: .4rem; background: var(--papier-3); border-radius: 6px; }
.wochenraster .std { display: flex; align-items: center; justify-content: center; color: var(--tinte-2); font-weight: 600; }
.wochenraster .zelle { background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; padding: .4rem .5rem; min-height: 64px; cursor: pointer; }
.wochenraster .zelle:hover { border-color: var(--blau); }
.wochenraster .zelle.pause { min-height: 30px; background: var(--papier-3); border: 0; text-align: center; color: var(--tinte-3); font-size: .8rem; cursor: default; }
.wochenraster .zelle.frei { background: transparent; border-style: dashed; }
.wochenraster .zelle.gehalten { border-left: 4px solid var(--gruen); }
.wochenraster .zelle.teilweise { border-left: 4px solid var(--honig); }
.wochenraster .zelle.nicht_geschafft { border-left: 4px solid var(--rot); }
/* ── Stunde greifen und ablegen (Wochenplan) ─────────────────────────────── */
/* touch-action: none haelt das Wischen der Seite an, solange ein Finger auf
   einer greifbaren Zelle liegt - sonst scrollt die Seite statt zu ziehen. */
.wochenraster .zelle.greifbar { touch-action: none; }
.wochenraster .zelle.in-der-hand { opacity: .45; border-style: dashed; border-color: var(--blau); }
.wochenraster .zelle.ziel-offen { border: 2px solid var(--gruen); background: var(--gruen-hell); cursor: copy; }
.wochenraster .zelle.ziel-zu { border: 2px dotted var(--rot); background: var(--rot-hell); cursor: not-allowed; }
.wochenraster .zelle.ziel-fremd { opacity: .35; }
/* Solange eine Stunde in der Hand ist, faengt die Zelle JEDEN Klick ab. Sonst
   trifft der Finger beim Ablegen den Abhaken-Knopf in der Zelle und hakt die
   Stunde ab, statt sie zu verschieben. */
.wochenraster.greif-modus .zelle * { pointer-events: none; }
/* Die Leiste schwebt ueber der Seite. Waere sie Teil des Flusses, wuerde das
   Raster im Moment des Aufnehmens nach unten rutschen - und man zielt daneben. */
.greif-leiste { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 60;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; max-width: min(46rem, calc(100vw - 2rem));
  padding: .55rem .9rem; border-radius: 10px; background: var(--gruen-hell); border: 1px solid var(--gruen);
  box-shadow: var(--schatten); font-size: .9rem; }
.greif-leiste .fett { font-weight: 700; }
/* Platz unter dem Raster, damit die schwebende Leiste keine Zelle unerreichbar
   macht. Nur zusaetzlicher Scrollraum - die Zellen bleiben, wo sie sind. */
.wochenraster.greif-modus { padding-bottom: 5rem; }
@media (prefers-reduced-motion: no-preference) {
  .wochenraster .zelle.ziel-offen { transition: background .12s ease, border-color .12s ease; }
}

/* ── Nach Fach planen: Woche links, Bücherregal rechts (lehrwerke.js) ───────── */
.planen-raster { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
.planen-woche { min-width: 0; overflow-x: auto; }
.planen-tag { margin-bottom: .8rem; }
.planen-tagkopf { font-weight: 600; padding: .35rem .6rem; background: var(--papier-3); border-radius: 6px; margin-bottom: 4px; }
.planen-stunde { display: grid; grid-template-columns: minmax(13rem, 1.5fr); grid-auto-flow: column; grid-auto-columns: minmax(9rem, 1fr);
  gap: 4px; margin-bottom: 4px; border-radius: 8px; }
.planen-stunde.gehalten { box-shadow: inset 4px 0 0 var(--gruen); }
.planen-stunde.teilweise { box-shadow: inset 4px 0 0 var(--honig); }
.planen-zelle { background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; padding: .4rem .5rem; min-height: 64px; min-width: 0; }
.planen-thema input { width: 100%; font-weight: 600; margin-top: .2rem; }
.planen-thema textarea { width: 100%; min-height: 36px; margin-top: .25rem; resize: vertical; }
.planen-spaltenname { margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planen-seite { margin: 0 .25rem .25rem 0; display: inline-flex; align-items: center; gap: .2rem; }
.planen-seite button { min-height: 28px; min-width: 28px; padding: 0 .2rem; border: 0; background: transparent; color: inherit; cursor: pointer; }
.planen-stunde.ziel-offen .planen-zelle { border: 2px solid var(--gruen); background: var(--gruen-hell); cursor: copy; }
.planen-stunde.ziel-offen.drueber .planen-zelle { border-style: dashed; }
.planen-stunde.ziel-zu .planen-zelle { opacity: .45; cursor: not-allowed; }
.planen-vorschlaege { margin-top: .3rem; display: flex; flex-direction: column; gap: .25rem; }
.planen-vorschlag { text-align: left; justify-content: flex-start; }
.planen-regal { position: sticky; top: .5rem; max-height: calc(100vh - 1rem); display: flex; flex-direction: column; }
.planen-seitenliste { overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; padding-right: .2rem; min-height: 6rem; }
.planen-karte { background: var(--papier); border: 1px solid var(--linie); border-left: 4px solid var(--blau); border-radius: 8px;
  padding: .45rem .55rem; cursor: grab; min-height: 44px; touch-action: manipulation; flex-shrink: 0; }
.planen-karte:hover, .planen-karte:focus { border-color: var(--blau); outline: none; }
.planen-karte.erledigt { border-left-color: var(--gruen); opacity: .75; }
.planen-karte.gegriffen { background: var(--blau-hell); border-style: dashed; }
@media (max-width: 999px) {
  .planen-raster { grid-template-columns: 1fr; }
  .planen-regal { position: static; order: -1; max-height: none; }
  .planen-seitenliste { max-height: 40vh; }
}
@media (max-width: 719px) {
  .planen-stunde { display: flex; flex-wrap: wrap; }
  .planen-zelle { min-height: 0; flex: 1 1 40%; }
  .planen-zelle.planen-thema { flex-basis: 100%; }
}

/* Jahresarchiv (Stoffverteilung → Jahresarchiv) */
.jahresarchiv .liste li { flex-direction: column; gap: .2rem; }
.archiv-jahrkopf, .archiv-wochenkopf { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .3rem .8rem; text-align: left; background: transparent; border: 0; color: inherit; cursor: pointer; min-height: 44px; padding: .2rem 0; font: inherit; }
.archiv-woche { border-top: 1px solid var(--linie); }
.archiv-wochenkopf { justify-content: flex-start; }
.archiv-themen { flex: 1 1 14rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinte-3); }
.archiv-wocheninhalt { padding: .2rem 0 .8rem; }
@media (max-width: 719px) { .archiv-themen { white-space: normal; flex-basis: 100%; } }

.fachmarke { display: inline-block; padding: .05rem .45rem; border-radius: 6px; color: #fff; font-weight: 700; font-size: .85rem; }

@media print {
  .seitenleiste, .kopfzeile .rechts, .toasts, button { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .inhalt { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
}

/* Nie quer scrollen: Inhalt begrenzen, breite Raster scrollen in sich */
.inhalt { min-width: 0; overflow-x: hidden; overflow-x: clip; }  /* clip: kein eigener Scrollbereich, damit „sticky“ (z. B. Newsletter-Vorschau) wirkt */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; padding-bottom: 4px; }

/* Versteckte Elemente bleiben versteckt (unsichtbare Absende-Knöpfe in Formularen) */
[hidden] { display: none !important; }

/* Kalender (Modul kalender): Monatsraster, Wochenraster, Termin-Chips – Token wie oben, hell und dunkel */
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-raster .kopf { font-weight: 600; text-align: center; padding: .3rem 0; color: var(--tinte-2); font-size: .85rem; }
.kal-tag { background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; min-height: 96px; padding: .3rem; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kal-tag:hover { border-color: var(--blau); }
.kal-tag.fremd { opacity: .5; background: transparent; border-style: dashed; }
.kal-tag.wochenende, .kal-tag.frei { background: var(--papier-3); }
.kal-tag .nr { font-size: .85rem; color: var(--tinte-2); font-weight: 600; text-align: right; line-height: 1.4rem; }
.kal-tag.heute .nr { color: var(--tinte); }
.kal-tag.heute .nr span { display: inline-block; min-width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 999px;
  background: var(--honig); color: #2A2724; }
.kal-chip { display: block; width: 100%; min-height: 0; font: inherit; font-size: .78rem; line-height: 1.25; padding: .15rem .4rem; border-radius: 6px;
  background: var(--blau-hell); color: var(--blau); border: 0; border-left: 3px solid var(--blau); text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-chip:hover { filter: brightness(.96); background: var(--blau-hell); }
.kal-chip.gedaempft { background: var(--papier-3); color: var(--tinte-2); border-left-color: var(--tinte-3); }
.kal-chip.laufend { background: var(--honig-hell); color: #8a5a00; border-left-color: var(--honig); }
html[data-theme="dark"] .kal-chip.laufend, html[data-theme="auto"].dunkel .kal-chip.laufend { color: var(--honig); }
.kal-woche { display: grid; grid-template-columns: 3.6rem repeat(5, minmax(120px, 1fr)); gap: 4px; min-width: 720px; }
.kal-woche .kopf { font-weight: 600; text-align: center; padding: .3rem; background: var(--papier-3); border-radius: 6px; }
.kal-woche .kopf.heute { outline: 2px solid var(--honig); }
.kal-woche .std { display: flex; align-items: flex-start; justify-content: flex-end; padding: .2rem .3rem; color: var(--tinte-2); font-size: .8rem; }
.kal-woche .zelle { background: var(--papier); border: 1px solid var(--linie); border-radius: 6px; min-height: 44px; padding: 2px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kal-woche .zelle:hover { border-color: var(--blau); }
.kal-woche .zelle.frei { background: var(--papier-3); }
.kal-woche .zelle.ganztags { min-height: 32px; border-style: dashed; }
.kal-status { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.kal-status.zugesagt { background: var(--gruen-hell); color: var(--gruen); }
.kal-status.abgesagt { background: var(--rot-hell); color: var(--rot); }
.kal-status.offen { background: var(--honig-hell); color: #8a5a00; }
html[data-theme="dark"] .kal-status.offen, html[data-theme="auto"].dunkel .kal-status.offen { color: var(--honig); }
@media (max-width: 719px) {
  .kal-tag { min-height: 64px; padding: .15rem; gap: 2px; }
  .kal-tag .nr { font-size: .75rem; }
  .kal-chip { font-size: .66rem; padding: .08rem .25rem; border-left-width: 2px; }
}

/* Benutzername (app.js, einladung, einstellungen, verwaltung): Karte „Bitte leg deinen Benutzernamen fest“
   über dem Modul, der eigene Name groß in den Einstellungen, der Name als kleines Code-Etikett in Listen. */
.karte.umstellung { border: 2px solid var(--honig); background: var(--honig-hell); margin-bottom: 1rem; }
.karte.umstellung h2 { margin-bottom: .4rem; }
.benutzername-gross { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.7rem; font-weight: 700;
  letter-spacing: .02em; margin: 0 0 .8rem; padding: .4rem .8rem; display: inline-block; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-s); }
code.benutzername { background: var(--papier-3); padding: .05rem .4rem; border-radius: 6px; font-size: .92em; }

/* Dashboard-Bausteine verschieben (Andre, 16.09.2026).
   Ausserhalb des Anordnens ist nichts davon zu sehen: `.baustein` ist nur die
   Huelle, die dem Ziehen einen Griff gibt. Deshalb `display: contents` - so
   verhaelt sich die Karte im Raster, als waere die Huelle gar nicht da. */
.baustein { display: contents; }
.baustein.mit-griff { display: block; }
.baustein.gezogen { opacity: .55; }
.griffleiste { display: flex; align-items: center; gap: .3rem; padding: .3rem .5rem;
  background: var(--papier-3); border: 1px dashed var(--linie); border-bottom: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0; cursor: grab;
  /* Waehrend des Ziehens soll der Browser nicht scrollen wollen. */
  touch-action: none; user-select: none; }
.griffleiste:active { cursor: grabbing; }
/* Der Griff links, die Pfeile rechts - dazwischen nichts. Den Namen traegt
   die Karte selbst eine Zeile tiefer; ihn hier zu wiederholen war doppelt. */
.griffleiste .griff { margin-right: auto; cursor: grab; }
.griffleiste button { min-height: 32px; padding: .1rem .35rem; }
.baustein.mit-griff > .karte { border-top-left-radius: 0; border-top-right-radius: 0; }
.ablage { border: 2px dashed var(--linie); border-radius: var(--radius-s); text-align: center; padding: 1.2rem .6rem; }

/* Belohnung: Klassenziel und Abzeichen (Andre, 17.09.2026).
   Das Motiv ist ein SVG in den Farbtoken der App – dann stimmt es auch im
   dunklen Erscheinungsbild, ohne zweites Bild. */
.lz-motiv { width: 100%; height: auto; display: block; }
.lz-motiv-rahmen { max-width: 260px; margin: 0 auto; }
.lz-stand { text-align: center; font-size: 2.2rem; font-weight: 700; margin: .4rem 0 .2rem; font-variant-numeric: tabular-nums; }
.lz-stand span { font-size: 1.1rem; font-weight: 500; }
.lz-verlauf { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; }
.lz-verlauf li { display: flex; gap: .5rem; flex-wrap: wrap; padding: .3rem 0; border-top: 1px solid var(--linie); font-size: .9rem; }
.lz-abzeichen { display: flex; gap: .5rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.lz-abzeichen.ruht { opacity: .55; }
.lz-abzeichen-emoji { font-size: 1.5rem; width: 2rem; text-align: center; }
/* Die drei Knöpfe bleiben zusammen in einer Zeile – umgebrochen sah der
   Papierkorb aus, als gehörte er zum nächsten Abzeichen. */
.lz-abzeichen-knoepfe { display: flex; gap: .15rem; flex: 0 0 auto; }
/* Nummernknopf: quadratisch und gross genug für einen Finger – die Nummern
   werden im Unterricht am Tablet getippt, nicht mit der Maus. */
.chip.lz-nr { min-width: 3rem; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Beamer-Ansicht: deckt alles ab, auch die Seitenleiste. Was hier steht,
   sehen 24 Kinder – deshalb keine Nummern, keine Tabelle, keine Namen. */
.lz-beamer { position: fixed; inset: 0; z-index: 60; background: var(--papier); color: var(--tinte);
  display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(1rem, 3vw, 3rem); flex-wrap: wrap; overflow: auto; }
.lz-beamer-bild { flex: 0 1 min(44vh, 40vw); max-width: 44vh; }
.lz-beamer-text { flex: 1 1 18rem; max-width: 34rem; text-align: center; }
.lz-beamer-zahl { font-size: clamp(3rem, 11vw, 8rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.lz-beamer-zahl span { font-size: .35em; font-weight: 600; color: var(--tinte-2); }
.lz-beamer-rest { font-size: clamp(1.1rem, 2.4vw, 1.8rem); margin: .8rem 0 1.2rem; }
.lz-beamer-jubel { font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 800; color: var(--gruen); margin: .6rem 0 1.2rem;
  animation: lz-hupf 1.1s ease-in-out infinite; }
.lz-beamer-jubel span { display: block; font-size: .5em; font-weight: 600; color: var(--tinte); }
.lz-beamer-knoepfe { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-bottom: .8rem; }
.lz-beamer-zu { position: fixed; top: .8rem; right: .8rem; z-index: 61; }
button.lz-gross { font-size: clamp(1.1rem, 2.2vw, 1.7rem); padding: .8rem 1.6rem; min-height: 4rem; }
@keyframes lz-hupf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.25rem); } }
@media (prefers-reduced-motion: reduce) { .lz-beamer-jubel { animation: none; } }
.lz-beamer-geheim { font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 700; color: var(--blau); }

/* Schnell-Lob und Sammelpass (Andre, 29.10.2026; modules/sammeln.js).
   Die Kacheln sind groß genug für einen Daumen im Gehen; lange drücken öffnet
   das Blatt des Kindes – deshalb kein Markieren und kein Kontextmenü des Handys. */
.lz-mb { display: inline-flex; align-items: center; justify-content: center; position: relative; line-height: 1; }
.lz-mb img { width: 1.25em; height: 1.25em; object-fit: contain; border-radius: 50%; background: var(--papier-2); }
.lz-chip-bild { width: 1.4rem; height: 1.4rem; object-fit: contain; border-radius: 50%; }
.lz-mb-zusatz { position: absolute; right: -.35em; bottom: -.2em; font-size: .45em; }
.lz-lob-leiste { display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: .8rem; }
.lz-lob-leiste .chips { flex: 1 1 16rem; }
.lz-lob-voll { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.lz-lob-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .6rem; }
.lz-lob.kompakt .lz-lob-raster { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .4rem; }
.lz-lob-kachel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 6.4rem; padding: .5rem .3rem .7rem; border-radius: var(--radius); border: 2px solid var(--linie); background: var(--papier);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: transform .12s ease, border-color .12s ease; }
.lz-lob.kompakt .lz-lob-kachel { min-height: 4.8rem; padding: .35rem .2rem .55rem; }
.lz-lob-kachel:active { transform: scale(.96); }
.lz-lob-kachel.voll { border-color: var(--honig); background: var(--honig-hell); }
.lz-lob-kachel.gewaehlt { border-color: var(--blau); box-shadow: 0 0 0 3px var(--blau-hell); }
.lz-lob-kachel.huepft { animation: lz-lob-hupf .5s ease; border-color: var(--gruen); }
.lz-lob-bild { font-size: 2.3rem; line-height: 1; }
.lz-lob.kompakt .lz-lob-bild { font-size: 1.7rem; }
.lz-lob-nr { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-lob-nr .kind-name { font-weight: 500; }
.lz-lob-balken { position: absolute; left: .5rem; right: .5rem; bottom: .35rem; height: .3rem; border-radius: 99px; background: var(--papier-3); overflow: hidden; }
.lz-lob-balken span { display: block; height: 100%; background: var(--gruen); border-radius: 99px; transition: width .3s ease; }
.lz-lob-ecke { position: absolute; top: .25rem; right: .35rem; font-size: 1rem; }
.lz-lob-ecke.frage { font-weight: 800; color: var(--tinte-3); }
.lz-lob-haken { position: absolute; top: .2rem; left: .4rem; color: var(--blau); font-weight: 800; }
.lz-lob-plus { position: absolute; top: .1rem; left: 50%; transform: translateX(-50%); font-weight: 800; color: var(--gruen);
  animation: lz-lob-plus .9s ease forwards; pointer-events: none; }
.lz-lob-mehrere, .lz-lob-zuletzt { position: sticky; bottom: .5rem; margin-top: .8rem; background: var(--papier-2); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: .5rem .8rem; box-shadow: var(--schatten); z-index: 5; }
.lz-lob-zuletzt { display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 719px) { .lz-lob-mehrere, .lz-lob-zuletzt { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } }
@keyframes lz-lob-hupf { 0% { transform: scale(1); } 35% { transform: scale(1.08) translateY(-.2rem); } 100% { transform: scale(1); } }
@keyframes lz-lob-plus { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -1.4rem); } }
.lz-pass { display: grid; grid-template-columns: repeat(5, minmax(0, 2.6rem)); gap: .35rem; margin-top: .4rem; }
.lz-pass-feld { aspect-ratio: 1; border: 2px dashed var(--linie); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.lz-pass-feld.voll { border: 2px solid var(--gruen); background: var(--gruen-hell); }
.lz-blatt-kopf { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.lz-blatt-bild { font-size: 4rem; text-align: center; min-width: 5.5rem; line-height: 1; }
.lz-blatt-bild small { display: block; font-size: .85rem; margin-top: .3rem; }
.lz-preise { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; margin-top: .8rem; }
.lz-preis { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-height: 7rem; padding: .6rem; border-radius: var(--radius);
  border: 2px solid var(--linie); text-align: center; }
.lz-preis.aktiv { border-color: var(--blau); background: var(--blau-hell); }
.lz-preis-emoji { font-size: 2.4rem; line-height: 1; }
.lz-preis-symbol { width: 3.4rem; text-align: center; font-size: 1.3rem; }
.lz-mitte { text-align: center; margin-top: .8rem; }
.lz-rad { max-width: 320px; margin: 0 auto; }
.lz-rad svg { width: 100%; height: auto; display: block; }
.lz-rad-scheibe { transform-box: view-box; transform-origin: 0 0; transition: transform 4.2s cubic-bezier(.17, .67, .2, 1); }
.lz-geheimkarte { width: 9rem; height: 12rem; margin: .5rem auto; border-radius: var(--radius); background: var(--blau); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 4rem; box-shadow: var(--schatten); transition: transform .7s ease; }
.lz-geheimkarte.offen { transform: rotateY(180deg) scale(.9); opacity: .6; }
.lz-ergebnis { text-align: center; padding: 1rem 0; }
.lz-ergebnis-emoji { font-size: 5rem; line-height: 1; animation: lz-hupf 1.1s ease-in-out infinite; }
.lz-ergebnis-text { font-size: 1.6rem; font-weight: 800; margin: .6rem 0; }
.lz-geheim-nr { font-size: 1.5rem; font-weight: 800; }
@media (prefers-reduced-motion: reduce) {
  .lz-lob-kachel.huepft, .lz-lob-plus, .lz-ergebnis-emoji { animation: none; }
  .lz-rad-scheibe { transition-duration: .01s; }
  .lz-geheimkarte { transition: none; }
}

/* Andi – KI-Kundenservice (modules/andi.js). Petrol mit Orange-Akzent wie die Figur. */
:root { --andi: #1F6F78; --andi-akzent: #E8833A; }
html[data-theme="dark"], html[data-theme="auto"].dunkel { --andi: #4FB3BD; --andi-akzent: #F0A060; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.andi-knopf { position: fixed; right: 1rem; bottom: 1rem; z-index: 55; display: flex; align-items: center; gap: .5rem;
  min-height: 52px; padding: .3rem .9rem .3rem .3rem; border-radius: 999px; border: 2px solid var(--andi-akzent);
  background: var(--papier); color: var(--tinte); box-shadow: var(--schatten); font-weight: 600; cursor: pointer; }
.andi-knopf img, .andi-kopf img, .andi-ersatz { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.andi-ersatz { display: inline-flex; align-items: center; justify-content: center; background: var(--andi); color: #fff;
  font-weight: 700; font-size: 1.2rem; border: 2px solid var(--andi-akzent); }
.andi-fenster { position: fixed; right: 1rem; bottom: 1rem; z-index: 55; width: min(420px, calc(100vw - 2rem));
  height: min(620px, calc(100vh - 2rem)); display: flex; flex-direction: column; background: var(--papier);
  border: 1px solid var(--linie); border-top: 4px solid var(--andi); border-radius: var(--radius); box-shadow: var(--schatten); }
.andi-kopf { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-bottom: 1px solid var(--linie); }
.andi-titel { display: flex; flex-direction: column; flex: 1; line-height: 1.2; }
.andi-liste { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.andi-nachricht { max-width: 88%; padding: .55rem .8rem; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.andi-nachricht.andi { align-self: flex-start; background: var(--papier-2); border-left: 3px solid var(--andi); }
.andi-nachricht.nutzer { align-self: flex-end; background: var(--blau-hell); }
.andi-nachricht.fehler { border-left-color: var(--rot); }
.andi-nachricht.schreibt { color: var(--tinte-3); font-style: italic; }
.andi-fuss { display: flex; gap: .5rem; padding: .6rem .7rem 0; border-top: 1px solid var(--linie); align-items: flex-end; }
.andi-fuss textarea { flex: 1; resize: none; min-height: 44px; }
.andi-fuss button { min-height: 44px; }
.andi-hinweis { margin: .3rem .7rem .6rem; }
@media (max-width: 719px) {
  .andi-knopf { bottom: 5.2rem; right: .7rem; padding-right: .3rem; }
  .andi-knopf-text { display: none; }
  .andi-fenster { inset: 0; width: auto; height: auto; border-radius: 0; z-index: 70; }
}
.andi-wechsel { display: block; align-self: flex-start; margin-top: .15rem; padding: 0; border: 0; background: none; color: inherit;
  font-size: .8rem; text-decoration: underline; cursor: pointer; opacity: .9; }
.andi-wechsel:disabled { opacity: .5; cursor: default; }
.andi-ziele { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; white-space: normal; }
.andi-ziel { min-height: 44px; padding: .4rem .8rem; border-radius: 999px; border: 2px solid var(--andi); background: var(--papier);
  color: var(--andi); font-weight: 600; cursor: pointer; }
.andi-ziel:hover, .andi-ziel:focus-visible { background: var(--andi); color: var(--papier); }
/* Andi – Aufgaben geben (Reiter, Karten zum Bestätigen) */
.andi-reiter { margin: 0; padding: 0 .7rem; }
.andi-reiter button { min-height: 44px; }
.andi-auftrag { gap: .7rem; }
.andi-warnung { padding: .6rem .8rem; border-radius: 10px; background: var(--honig-hell); border-left: 3px solid var(--honig); }
.andi-haken { display: flex; flex-direction: row; align-items: center; gap: .4rem; min-height: 44px; margin: 0; }
.andi-haken input[type=checkbox] { width: 22px; height: 22px; flex: none; margin: 0; }
.andi-haken input[type=date] { width: auto; flex: 1; }
.andi-gesendet { margin: 0; padding: .5rem .7rem; border-radius: 10px; background: var(--papier-2); }
.andi-karte { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .7rem; border: 1px solid var(--linie);
  border-left: 4px solid var(--andi); border-radius: 10px; }
.andi-karte.aus { opacity: .6; border-left-color: var(--linie); }
.andi-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.andi-karte-kopf select { width: auto; flex: 1; min-width: 0; }
.andi-karte .chips select { width: auto; flex: none; }
.andi-karte select, .andi-karte textarea, .andi-karte input[type=date] { min-height: 44px; }
.andi-karte textarea { width: 100%; resize: vertical; }
.andi-karte .chips { align-items: center; }
.andi-karte .chip button { min-height: 0; padding: 0 .2rem; }
.andi-hinweis-karte { margin: 0; color: var(--rot); }
.andi-knoepfe { display: flex; flex-direction: column; gap: .4rem; }
.andi-mikro.an { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); font-weight: 600; }
.andi-fuss > button { flex: 1; }
/* Andi – Hilfen neben dem Gespräch: Neu-Punkt, Tipp beim ersten Besuch, erste Schritte, Daumen, Schnellfragen */
.andi-neu-punkt { position: absolute; top: -6px; right: -4px; padding: .05rem .4rem; border-radius: 999px; background: var(--andi-akzent);
  color: #1b1b1b; font-size: .7rem; font-weight: 700; }
.andi-tipp { position: fixed; right: 1rem; bottom: 4.6rem; z-index: 56; width: min(320px, calc(100vw - 2rem)); padding: .7rem .8rem;
  background: var(--papier); border: 1px solid var(--linie); border-left: 4px solid var(--andi); border-radius: var(--radius); box-shadow: var(--schatten); }
.andi-tipp p { margin: 0 0 .5rem; }
.andi-tipp-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.andi-tipp-knoepfe button { min-height: 44px; }
.andi-neu { border-left-color: var(--andi-akzent); }
.andi-neu p { margin: .1rem 0 .3rem; }
.andi-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.andi-schritte li { display: flex; align-items: center; gap: .4rem; min-height: 44px; }
.andi-schritte li.erledigt .andi-schritt-text { color: var(--tinte-3); text-decoration: line-through; }
.andi-schritt-text { flex: 1; }
.andi-daumen { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .4rem; white-space: normal; }
.andi-daumen button { min-height: 44px; min-width: 44px; }
.andi-schnell { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.andi-schnell .chip { min-height: 44px; text-align: left; cursor: pointer; border: 1px solid var(--andi); }
/* Leuchtrahmen nach „Bring mich hin“ */
.andi-leuchten { outline: 3px solid var(--andi-akzent); outline-offset: 4px; border-radius: 6px; animation: andi-puls 1.1s ease-in-out 3; }
@keyframes andi-puls { 50% { outline-color: var(--andi); outline-offset: 8px; } }
@media (prefers-reduced-motion: reduce) { .andi-leuchten { animation: none; } }
@media (max-width: 719px) { .andi-tipp { right: .7rem; bottom: 9.4rem; } }
@media print { .andi-knopf, .andi-fenster { display: none !important; } }
/* Hilfe für alles (Andre, 05.11.2026): Auf der Lehrerseite stehen Mona/Andi im Menü statt als schwebender Knopf.
   Am großen Bildschirm steht das Gespräch rechts NEBEN der Seite – die Seite rückt zur Seite, nichts wird verdeckt.
   (Die Lernfreunde auf Kinder- und Elternseite behalten .andi-knopf/.andi-fenster wie bisher.) */
:root { --andi-breite: 380px; }
@media (min-width: 1500px) { :root { --andi-breite: 440px; } }
.menue a.andi-menue { position: relative; }
.menue a.andi-menue:not(.aktiv) { color: var(--andi); }
.menue a.andi-menue.aktiv { background: var(--andi); color: #fff; }
html[data-theme="dark"] .menue a.andi-menue.aktiv, html[data-theme="auto"].dunkel .menue a.andi-menue.aktiv { color: #10161f; }
.andi-symbol { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.andi-symbol img, .andi-symbol .andi-ersatz { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--andi-akzent); font-size: .9rem; }
.andi-symbol .andi-neu-punkt { top: -8px; right: -16px; }
.andi-fenster.andi-helfer { top: 0; right: 0; bottom: 0; left: auto; width: var(--andi-breite); max-width: 100vw; height: auto;
  border-radius: 0; border-width: 0 0 0 1px; border-top: 4px solid var(--andi); }
@media (min-width: 1000px) {
  html.andi-offen .app { padding-right: var(--andi-breite); }
  html.andi-offen .toasts { left: calc(50% - var(--andi-breite) / 2); }
  .andi-fenster.andi-helfer { box-shadow: none; }
}
@media (max-width: 719px) {
  .andi-fenster.andi-helfer { inset: 0; width: auto; border-left: 0; z-index: 70; }
  .menue a.andi-menue { min-width: 52px; }
  .andi-symbol img, .andi-symbol .andi-ersatz { width: 26px; height: 26px; }
}
.andi-tipp.andi-helfer-tipp { right: auto; left: calc(var(--seitenleiste) + .8rem); bottom: 1rem; }
@media (max-width: 1200px) { .andi-tipp.andi-helfer-tipp { left: calc(var(--seitenleiste-schmal) + .8rem); } }
@media (max-width: 719px) { .andi-tipp.andi-helfer-tipp { left: .7rem; right: .7rem; width: auto; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); } }
html[dir="rtl"] .andi-fenster.andi-helfer { right: auto; left: 0; border-width: 0 1px 0 0; }
@media (min-width: 1000px) { html[dir="rtl"].andi-offen .app { padding-right: 0; padding-left: var(--andi-breite); } }
html[dir="rtl"] .andi-tipp.andi-helfer-tipp { left: auto; right: calc(var(--seitenleiste) + .8rem); }
/* Das Blatt, um das es gerade geht (Knopf „Mona fragen“ an der Materialkarte) */
.andi-blatt { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 .7rem .4rem;
  padding: .2rem .3rem .2rem .7rem; border-radius: 10px; background: var(--honig-hell); border-left: 3px solid var(--honig); }
.andi-blatt button { min-height: 44px; min-width: 44px; }
.andi-karten { display: flex; flex-direction: column; gap: .6rem; }
.andi-karten-knoepfe { display: flex; gap: .5rem; }
.andi-karten-knoepfe button { flex: 1; min-height: 44px; }
.andi-erledigt { margin: .4rem 0 0; white-space: normal; }
.andi-quellen { align-items: center; }
.andi-quelle { border-style: dashed; }
.andi-mikro { min-width: 44px; }
@media print { .andi-tipp, html.andi-offen .app { padding-right: 0 !important; } .andi-tipp { display: none !important; } }

/* ── Sprachen, Lernfreunde, freundlich schreiben (Andre, 30.10.2026) ─────────── */
/* 🌐 oben rechts auf Anmelde-, Eltern- und Kinderseite (sprache.js) */
.lz-sprachknopf { position: fixed; top: .6rem; right: .7rem; z-index: 60; }
.lz-sprachknopf > button { min-height: 44px; border-radius: 999px; background: var(--papier); box-shadow: var(--schatten); font-weight: 600; }
.lz-sprachliste { position: absolute; right: 0; top: calc(100% + .3rem); width: min(19rem, calc(100vw - 1.4rem)); max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: .3rem; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.lz-sprachliste button { min-height: 44px; border: 0; background: transparent; text-align: start; justify-content: flex-start; }
.lz-sprachliste button:hover, .lz-sprachliste button.aktiv { background: var(--blau-hell); color: var(--blau); }
.lz-sprachliste button.aktiv::after { content: " ✓"; }
@media print { .lz-sprachknopf { display: none !important; } }
/* Von rechts nach links (Arabisch, Persisch, Urdu, Hebräisch): die festen Knöpfe auf die andere Seite */
html[dir="rtl"] .lz-sprachknopf { right: auto; left: .7rem; }
html[dir="rtl"] .lz-sprachliste { right: auto; left: 0; }
html[dir="rtl"] .andi-knopf, html[dir="rtl"] .andi-fenster, html[dir="rtl"] .andi-tipp { right: auto; left: 1rem; }
html[dir="rtl"] .andi-tipp { border-left: 1px solid var(--linie); border-right: 4px solid var(--andi); }
/* Chat: übersetzte Nachricht, Satzanfänge */
.chat-uebersetzt { font-style: italic; }
.chat-original { display: block; margin-top: .2rem; padding: 0; min-height: 0; border: 0; background: none; color: var(--tinte-3); font-size: .78rem; text-decoration: underline; cursor: pointer; }
.satzanfaenge { display: flex; flex-direction: column; gap: .3rem; padding: .4rem 0; }
.satzanfaenge .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
.satzanfaenge .chip { white-space: nowrap; min-height: 40px; cursor: pointer; }
.satzanfang { background: var(--honig-hell); }
.freundlich-liste li { display: block; }
/* Frag Mona! (Kinderseite) – große Bildknöpfe */
.lf-knopf { border-color: var(--honig); padding-right: 1.1rem; }
.lf-knopf img { width: 52px; height: 52px; }
.lf-knopf-text { font-size: 1.15rem; font-weight: 800; }
.lf-fenster { width: min(460px, calc(100vw - 2rem)); }
.lf-zu { font-size: 1.3rem; min-width: 48px; }
.lf-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.lf-bild { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 6.5rem; padding: .5rem;
  border: 3px solid var(--linie); border-radius: var(--radius); background: var(--papier); font-weight: 700; font-size: 1rem; text-align: center; line-height: 1.2; }
.lf-bild span { font-size: 2.4rem; line-height: 1; }
.lf-bild:active { transform: scale(.96); }
.lf-bild:hover, .lf-bild:focus-visible { border-color: var(--andi); }
.lf-blase { margin-top: .2rem; }
.lf-blase::before { display: none; }
.lf-text { white-space: pre-line; font-size: 1.1rem; }
.lf-tipps { margin: 0; padding-left: 1.2em; white-space: normal; }
.lf-tipps li + li { margin-top: .3em; }
.lf-verlauf { display: flex; flex-direction: column; gap: .5rem; }
.lf-pause { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; padding: .6rem 0; }
.lf-atmen { width: 7rem; height: 7rem; border-radius: 50%; background: radial-gradient(circle, var(--blau-hell), var(--andi)); animation: lf-atmen 8s ease-in-out infinite; }
@keyframes lf-atmen { 0%, 100% { transform: scale(.6); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lf-atmen { animation: none; } }
@media (max-width: 719px) { .lf-knopf { bottom: 1rem; } .lf-knopf .lf-knopf-text { display: inline; } .lf-angebot { bottom: 5.4rem; } }
/* Stoffverteilung: Leiste „N Stunden markiert" – bleibt beim Blättern unten sichtbar,
   auf dem Handy über der Menüleiste. */
.markier-leiste { position: sticky; bottom: .6rem; z-index: 5; justify-content: space-between; box-shadow: var(--schatten); }
@media (max-width: 719px) { .markier-leiste { bottom: calc(5rem + env(safe-area-inset-bottom)); } }

/* Echte Namen (verschlüsselt, modules/namen.js) */
.kind-name { font-weight: 600; }
.code-gross { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; word-break: break-all; }
.code-feld { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.qr-bild { width: 220px; max-width: 100%; }
.qr-bild svg { display: block; width: 100%; height: auto; }
.namen-druck { display: none; }
@media print {
  html.namen-drucken body * { visibility: hidden !important; }
  html.namen-drucken .namen-druck, html.namen-drucken .namen-druck * { visibility: visible !important; }
  html.namen-drucken .namen-druck { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 1cm; color: #000; background: #fff; }
}

/* E-Mails an Eltern (modules/elternmail.js): Verlauf wie ein Chat, Eltern links, Lehrkraft rechts.
   Wer schreibt, steht immer auch als Text über der Blase (Farbe nie allein). */
.mail-verlauf { display: flex; flex-direction: column; gap: .7rem; }
.mail-blase { max-width: min(46rem, 92%); padding: .6rem .8rem; border-radius: 14px; border: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: .4rem; }
.mail-blase.eltern { align-self: flex-start; background: var(--papier-2); border-left: 4px solid var(--honig); }
.mail-blase.lehrkraft { align-self: flex-end; background: var(--blau-hell); border-right: 4px solid var(--blau); }
.mail-blase.entwurf { border-style: dashed; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-blase textarea { width: 100%; min-height: 12rem; }
.mail-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.mail-kachel { background: var(--papier-2); border-radius: var(--radius-s); padding: .45rem .6rem; }
.mail-kachel strong { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.mail-ampel { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--papier-3); }
.mail-ampel span { display: block; height: 100%; }
.mail-ampel .staerken { background: var(--gruen); }
.mail-ampel .rahmen { background: var(--blau); }
.mail-ampel .baustellen { background: var(--honig); }
/* Schülerprofil (modules/profil.js, Andre 27.10.2026) */
.profil-kopf { margin: 0; }
.profil-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .9rem 1rem;
  border-radius: var(--radius); border: 1px solid var(--linie); border-left: 6px solid var(--tinte-3); background: var(--papier-2);
  box-shadow: var(--schatten); cursor: pointer; min-height: 44px; }
.profil-kachel.gruen { border-left-color: var(--gruen); }
.profil-kachel.honig { border-left-color: var(--honig); }
.profil-kachel.rot { border-left-color: var(--rot); }
.profil-kachel-wert { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.profil-chip { font-size: .9rem; padding: .25rem .65rem; }
.profil-bereich { display: grid; grid-template-columns: minmax(9rem, 1.4fr) minmax(6rem, 2fr) 6.5rem minmax(9rem, 1.6fr); gap: .6rem; align-items: center;
  padding: .3rem 0; border-bottom: 1px dashed var(--linie); }
.profil-balken { display: block; height: .8rem; border-radius: 999px; background: var(--papier-3); overflow: hidden; }
.profil-balken > span { display: block; height: 100%; border-radius: 999px; background: var(--tinte-3); }
.profil-balken > .gruen { background: var(--gruen); }
.profil-balken > .honig { background: var(--honig); }
.profil-balken > .rot { background: var(--rot); }
@media (max-width: 719px) {
  .profil-bereich { grid-template-columns: 1fr 6rem; }
  .profil-bereich-name, .profil-bereich-trend { grid-column: 1 / -1; }
}
.profil-fach { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem; border-radius: var(--radius-s);
  border: 1px solid var(--linie); border-left: 5px solid var(--fachfarbe, var(--blau)); background: var(--papier); color: var(--tinte); }
.profil-note { font-size: 1.5rem; font-weight: 700; }
.profil-text h3, .profil-text h4 { margin: .8rem 0 .2rem; color: var(--tinte); }
.profil-text p { margin: .2rem 0; }
@media print {
  .profil-wahl, .profil [role="group"], .profil .formular, .profil textarea, .profil .knopf { display: none !important; }
  .profil .karte, .profil-kachel { break-inside: avoid; box-shadow: none; }
}

/* Zahl an Menüpunkten und Reitern (z. B. ungelesene Chat-Nachrichten) */
.menue-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  margin-left: auto; border-radius: 999px; background: var(--rot); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; }
.reiter .menue-zahl { margin-left: .4rem; }
@media (max-width: 1200px) { .menue a { position: relative; } .menue a .menue-zahl { position: absolute; top: 2px; right: 4px; margin: 0; } }

/* Chat (Andre, 29.10.2026): links Chats und Kontakte, rechts der offene Chat; am Handy eins von beiden */
.chat-layout { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 1rem; height: calc(100dvh - 7.5rem); min-height: 26rem; }
.chat-spalte { overflow-y: auto; min-width: 0; padding-right: .2rem; }
.chat-verlauf-spalte { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--papier-2); border: 1px solid var(--linie); border-radius: var(--radius); padding: .6rem; }
.chat-leer { margin: auto; }
.chat-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-eintrag { display: flex; align-items: center; gap: .6rem; padding: .55rem .5rem; min-height: 56px; border-radius: var(--radius-s); color: var(--tinte); text-decoration: none; }
.chat-eintrag:hover { background: var(--papier-3); }
.chat-eintrag.aktiv { background: var(--blau-hell); }
.chat-bild { flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .95rem; }
.chat-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-vorschau { color: var(--tinte-2); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-rand { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.chat-rand .menue-zahl { margin: 0; }
.chat-karte { margin-bottom: .8rem; }
.chat-kopf { display: flex; align-items: center; gap: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linie); }
.chat-kopf .leise { min-width: 44px; min-height: 44px; font-size: 1.2rem; }
.chat-zurueck { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; font-size: 1.6rem; text-decoration: none; color: var(--tinte); }
.chat-hinweis { color: var(--tinte-3); margin: .3rem 0 0; }
.chat-verlauf { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem; padding: .6rem .2rem; min-height: 0; }
.chat-system, .chat-tag { align-self: center; text-align: center; font-size: .8rem; color: var(--tinte-2); background: var(--papier-3); border-radius: 999px; padding: .2rem .7rem; margin: .3rem 0; max-width: 90%; }
.chat-tag { font-weight: 600; }
.chat-zeile { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.chat-zeile.eigen { align-items: flex-end; }
.chat-blase { max-width: min(36rem, 85%); padding: .45rem .7rem .3rem; border-radius: 14px; background: var(--papier); border: 1px solid var(--linie); border-top-left-radius: 4px; }
.chat-blase.eigen { background: var(--blau-hell); border-color: transparent; border-top-left-radius: 14px; border-top-right-radius: 4px; }
.chat-blase.geloescht { opacity: .7; }
.chat-absender { font-size: .8rem; font-weight: 700; margin-bottom: .1rem; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-fuss { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; font-size: .72rem; color: var(--tinte-3); margin-top: .15rem; }
.chat-gelesen { color: var(--blau); font-weight: 700; }
.chat-mehr { min-height: 28px; min-width: 32px; padding: 0 .3rem; border: 0; background: transparent; color: var(--tinte-3); cursor: pointer; font-size: 1rem; border-radius: 6px; }
.chat-mehr:hover, .chat-mehr[aria-expanded="true"] { background: var(--papier-3); color: var(--tinte); }
.chat-zitat { border-left: 3px solid var(--blau); background: color-mix(in srgb, var(--papier-3) 70%, transparent); border-radius: 6px; padding: .25rem .5rem; font-size: .85rem; margin-bottom: .25rem; color: var(--tinte-2); white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.chat-reaktionen { display: flex; gap: .25rem; margin-top: -.2rem; }
.chat-reaktion { min-height: 32px; min-width: 40px; padding: 0 .4rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier); cursor: pointer; font-size: .95rem; }
.chat-reaktion.meine { border-color: var(--blau); background: var(--blau-hell); }
.chat-aktionen { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; padding: .3rem; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-s); box-shadow: var(--schatten); }
.chat-aktionen .chat-reaktion { min-height: 44px; min-width: 44px; }
.chat-aktionen .klein { min-height: 44px; }
.chat-eingabe-bereich { border-top: 1px solid var(--linie); padding-top: .5rem; }
.chat-antwort-leiste { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; -webkit-line-clamp: unset; }
.chat-eingabe { display: flex; gap: .5rem; align-items: flex-end; }
.chat-eingabe textarea { flex: 1; resize: none; min-height: 44px; max-height: 9rem; field-sizing: content; }
.chat-eingabe button { min-width: 48px; min-height: 44px; font-size: 1.1rem; }
@media (max-width: 719px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100dvh - 10.5rem - env(safe-area-inset-bottom)); }
  .chat-spalte.verdeckt, .chat-verlauf-spalte.verdeckt { display: none; }
  .chat-zurueck { display: inline-flex; }
  .chat-verlauf-spalte { padding: .4rem; }
  .chat-seite .kopfzeile .marker { display: none; }
}
.chat-karte .liste li { flex-wrap: wrap; align-items: center; }
.chat-kontakt-name { flex: 1 1 100%; }
.modal .chat-kontakt-name { flex: 1 1 10rem; }
/* Chat, Etappe 2: Anhänge und Karten */
.chat-anhang { margin: .15rem 0 .25rem; }
.chat-foto { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: 10px; overflow: hidden; max-width: 100%; }
.chat-foto img { display: block; max-width: min(16rem, 100%); max-height: 18rem; width: auto; height: auto; border-radius: 10px; }
.chat-sprache audio { max-width: 100%; height: 40px; }
.chat-sprache button { min-height: 44px; }
.chat-datei { display: flex; align-items: center; gap: .5rem; padding: .35rem .4rem; background: color-mix(in srgb, var(--papier-3) 70%, transparent); border-radius: 10px; }
.chat-datei-symbol { font-size: 1.6rem; }
.chat-datei-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.chat-datei button { min-height: 44px; }
.chat-karte-inhalt { display: flex; flex-direction: column; gap: .25rem; padding: .45rem .55rem; margin: .15rem 0 .25rem; background: var(--papier); border: 1px solid var(--linie); border-left: 4px solid var(--blau); border-radius: 10px; min-width: min(15rem, 100%); }
.chat-blase.eigen .chat-karte-inhalt { background: color-mix(in srgb, var(--papier) 75%, transparent); }
.chat-karte-kopf { color: var(--tinte-2); }
.chat-karte-titel { font-size: 1rem; overflow-wrap: anywhere; }
.chat-karte-text { white-space: pre-wrap; margin: .2rem 0; overflow-wrap: anywhere; }
.chat-karte-punkte { margin: .1rem 0; padding-left: 1.1rem; }
.chat-karte-punkte li { margin: .1rem 0; overflow-wrap: anywhere; }
.chat-karte-inhalt .zeile button { min-height: 44px; }
.chat-karte-inhalt .leise.klein { align-self: flex-start; min-height: 44px; }
.chat-karte-termin { border-left-color: var(--gruen); }
.chat-karte-wetter { border-left-color: var(--honig); }
.chat-karte-kind, .chat-karte-beobachtungen { border-left-color: var(--rot); }
.chat-teilen-vorschau { max-height: 16rem; overflow-y: auto; }
.chat-teilen-liste { max-height: 14rem; overflow-y: auto; }
.chat-teilen-liste label { min-height: 44px; }
.chat-anhang-leiste { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.chat-anhang-wahl { display: flex; align-items: center; gap: .4rem; padding: .25rem .3rem .25rem .4rem; background: var(--papier); border: 1px solid var(--linie); border-radius: 10px; max-width: 100%; }
.chat-anhang-wahl img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.chat-anhang-wahl .leise { min-width: 44px; min-height: 44px; }
.chat-anhang-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-anhang-leiste .chat-hinweis { flex-basis: 100%; }
.chat-anhang-knopf { position: relative; }
.chat-anhang-knopf > .leise { min-width: 44px; min-height: 44px; font-size: 1.25rem; }
.chat-anhang-menue { position: absolute; bottom: calc(100% + .3rem); left: 0; z-index: 5; display: flex; flex-direction: column; min-width: 13rem; padding: .3rem; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-s); box-shadow: var(--schatten); }
.chat-anhang-menue button { justify-content: flex-start; min-height: 44px; border: 0; background: transparent; text-align: left; }
.chat-anhang-menue button:hover { background: var(--papier-3); }
.chat-aufnahme { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 44px; }
.chat-aufnahme-punkt { color: var(--rot); animation: chat-blinken 1s steps(2) infinite; }
@keyframes chat-blinken { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .chat-aufnahme-punkt { animation: none; } }

/* Eltern- und Kinderseite (eltern.html, kind.html, avatar.js) */
.ek-seite { max-width: 980px; margin: 0 auto; padding: 1rem 1rem 6rem; }
.ek-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ek-kopf h1 { margin: 0; overflow-wrap: anywhere; }
.ek-avatar { display: inline-flex; line-height: 0; flex: none; }
.ek-avatar svg { max-width: 100%; height: auto; }
.ek-kind-kopf { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ek-selbst { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ek-kind-kopf > div { flex: 1 1 10rem; min-width: 0; }
.ek-bildpw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ek-bildpw-feld { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .2rem; border: 2px solid var(--linie);
  border-radius: var(--radius); background: var(--papier); text-align: center; overflow-wrap: anywhere; font-size: .85rem; }
.ek-bildpw-zeichen { font-size: 2.6rem; line-height: 1.1; }
.ek-qr { display: flex; justify-content: center; }
.ek-qr svg { width: min(240px, 100%); height: auto; border-radius: var(--radius-s); }
.ek-code { font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; font-family: ui-monospace, Menlo, Consolas, monospace; text-align: center; overflow-wrap: anywhere; }
.ek-wahl-kind { display: flex; flex-direction: column; gap: .4rem; }
.ek-wahl-kind label { min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--papier); }

.ek-kind { font-size: 1.15rem; }
.ek-kind h1 { font-size: 1.8rem; }
.ek-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .7rem; }
.ek-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 8rem; padding: .6rem .4rem;
  border: 3px solid var(--linie); border-radius: var(--radius); background: var(--papier); color: var(--tinte); font-weight: 700;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; text-align: center; }
.ek-kachel:active { transform: scale(.96); }
.ek-kachel.gewaehlt { border-color: var(--blau); box-shadow: 0 0 0 4px var(--blau-hell); }
.ek-kachel small { font-weight: 500; color: var(--tinte-2); }
.ek-nummer { font-size: 1.9rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ek-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; max-width: 27rem; margin: 0 auto; }
.ek-gitter button { flex-direction: column; justify-content: center; aspect-ratio: 1; min-height: 5.5rem; padding: .3rem; border-width: 3px;
  border-radius: var(--radius); font-size: .85rem; touch-action: manipulation; overflow: hidden; }
.ek-gitter button span:first-child { font-size: clamp(2.2rem, 11vw, 3.4rem); line-height: 1.1; }
.ek-gitter button:active { transform: scale(.95); }
.ek-punkte { display: flex; justify-content: center; gap: .9rem; margin: 1rem 0; }
.ek-punkt { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 3px dashed var(--tinte-3); }
.ek-punkt.voll { border: 3px solid var(--gruen); background: var(--gruen); }
.ek-begleiter { display: flex; gap: .8rem; align-items: flex-start; }
.ek-begleiter img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--honig); flex: none; background: var(--papier-3); }
.ek-blase { position: relative; flex: 1; min-width: 0; background: var(--papier); border: 2px solid var(--linie); border-radius: var(--radius); padding: .7rem .9rem; }
.ek-blase::before { content: ""; position: absolute; left: -10px; top: 22px; width: 16px; height: 16px; background: var(--papier);
  border-left: 2px solid var(--linie); border-bottom: 2px solid var(--linie); transform: rotate(45deg); }
.ek-blase p { margin: 0 0 .3rem; }
.ek-gross-zahl { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.ek-landschaft svg { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }
.ek-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .5rem; }
.ek-wahl .ek-kachel { min-height: 6.5rem; font-size: .9rem; }
.ek-vorschau { display: flex; justify-content: center; padding: .5rem; background: var(--papier); border-radius: var(--radius); border: 1px solid var(--linie); }
@media (prefers-reduced-motion: reduce) { .ek-kachel:active, .ek-gitter button:active { transform: none; } }

/* Eltern & Kinder (Lehrkraft): Elternbriefe und Kinderkarten drucken – nur die Druckfläche, je Kind eine Seite */
.druck-flaeche { display: none; }
@media print {
  html.eltern-drucken body * { visibility: hidden; }
  html.eltern-drucken .druck-flaeche, html.eltern-drucken .druck-flaeche * { visibility: visible; }
  html.eltern-drucken .druck-flaeche { display: block; position: absolute; inset: 0 auto auto 0; width: 100%; color: #000; background: #fff; }
  .druck-brief { page-break-after: always; break-after: page; padding: 1.5cm 1.8cm; font-size: 12pt; line-height: 1.45; }
  .druck-brief:last-child { page-break-after: auto; break-after: auto; }
  .druck-brief h1 { font-size: 18pt; margin: 0 0 .4cm; }
  .druck-brief .qr-feld { display: flex; gap: .8cm; align-items: center; margin: .6cm 0; }
  .druck-brief .qr-feld svg { width: 4.5cm; height: 4.5cm; }
  .druck-brief .code { font: 700 20pt/1.2 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
  .druck-karten { display: grid; grid-template-columns: 1fr 1fr; gap: .4cm; padding: 1cm; }
  .druck-karte { border: 1.5pt dashed #888; border-radius: 10px; padding: .4cm; text-align: center; break-inside: avoid; }
  .druck-karte .bilder { font-size: 30pt; letter-spacing: .2em; }
}
.elternzugang-bild { font-size: 1.5rem; letter-spacing: .15em; white-space: nowrap; }
.elternzugang-figur svg { width: 44px; height: 44px; display: block; }

/* Eltern- und Kinderseite, Etappe 2: Lernweg, Fortschritt, Wünsche, Pause */
.ek-schritt { align-items: flex-start; }
.ek-schritt-zeichen { font-size: 1.6rem; line-height: 1.2; flex: none; }
.ek-schritt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; overflow-wrap: anywhere; }
.ek-schritt-text .klein.leise, .ek-schritt-text button.klein, .ek-schritt-text .knopf.klein { min-height: 44px; }
.ek-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ek-zahlen .karte { padding: .7rem .4rem; font-size: .9rem; overflow-wrap: anywhere; }
.ek-zahlen .ek-gross-zahl { font-size: clamp(1.6rem, 7vw, 2.6rem); }
.ek-balken-tag:last-child .ek-balken-text { display: flex; justify-content: flex-end; }
.ek-zahl-karte { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.ek-balken { display: flex; align-items: flex-end; gap: 2px; }
.ek-balken-tag { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.ek-balken-feld { height: 8rem; display: flex; align-items: flex-end; border-bottom: 2px solid var(--linie); }
.ek-balken-saeule { width: 100%; background: var(--blau); border-radius: 3px 3px 0 0; }
.ek-balken-text { font-size: .7rem; color: var(--tinte-2); height: 1.1rem; white-space: nowrap; overflow: visible; font-variant-numeric: tabular-nums; }
.ek-fortschritt { height: .9rem; border-radius: 999px; background: var(--papier-3); border: 1px solid var(--linie); overflow: hidden; margin: .3rem 0; }
.ek-fortschritt > div { height: 100%; background: var(--gruen); }

/* Kinderseite: goldener Weg als große Kacheln */
.ek-weg-schritt { display: flex; gap: .7rem; align-items: center; padding: .7rem; border: 3px solid var(--honig); border-radius: var(--radius);
  background: var(--papier); }
.ek-weg-schritt.erledigt { border: 2px dashed var(--linie); opacity: .75; }
.ek-weg-zeichen { font-size: 2.6rem; line-height: 1; flex: none; }
.ek-weg-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ek-weg-knopf { min-height: 56px; font-size: 1.1rem; padding: .5rem 1.1rem; }
.ek-frei { margin: 0; padding: .8rem; border-radius: var(--radius); background: var(--gruen-hell); border: 2px solid var(--gruen); font-weight: 700; }
.ek-wuensche { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; width: 100%; margin-top: .6rem; }
.ek-wunsch { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .4rem; border: 2px solid var(--linie);
  border-radius: var(--radius); background: var(--papier); text-align: center; overflow-wrap: anywhere; }
.ek-wunsch.gewaehlt { border-color: var(--blau); }
.ek-wunsch-bild { font-size: 2.4rem; line-height: 1.1; }
.ek-wunsch button { min-height: 52px; width: 100%; justify-content: center; }
.ek-pause .karte { max-width: 32rem; margin: 3rem auto 0; align-items: center; text-align: center; }
.ek-pause-bild { font-size: 5rem; line-height: 1; }
.ek-feier { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ek-feier-text { font-size: 3.2rem; font-weight: 800; color: var(--tinte); background: var(--honig-hell); border: 3px solid var(--honig);
  border-radius: 999px; padding: .3rem 1.4rem; box-shadow: var(--schatten); }
.ek-feier-sterne { display: flex; gap: 1.2rem; font-size: 2.6rem; margin-bottom: .4rem; }
@media (prefers-reduced-motion: no-preference) {
  .ek-feier-text { animation: ek-feier-auf .5s cubic-bezier(.3,1.6,.5,1) both; }
  .ek-feier-sterne span { animation: ek-stern-flug 1.6s ease-out both; }
  .ek-feier-sterne span:nth-child(2) { animation-delay: .12s; }
  .ek-feier-sterne span:nth-child(3) { animation-delay: .24s; }
}
@keyframes ek-feier-auf { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ek-stern-flug { 0% { transform: translateY(40px) scale(.4) rotate(0); opacity: 0; } 30% { opacity: 1; }
  100% { transform: translateY(-60px) scale(1.2) rotate(180deg); opacity: 0; } }
/* ── Lernwelt „Das Flusstal“ (welt.js, Kinderseite) ─────────────────────── */
.welt { position: fixed; inset: 0; z-index: 20; background: #A8DCF5; overflow: hidden; font-size: 1.15rem; }
.welt-buehne { position: absolute; inset: 0; touch-action: none; }
.welt-leinwand { display: block; width: 100%; height: 100%; touch-action: none; }
.welt-leiste { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: max(.6rem, env(safe-area-inset-top)) .8rem .6rem; z-index: 3; pointer-events: none; }
.welt-leiste > * { pointer-events: auto; }
.welt-leiste button, .welt-chip { min-height: 48px; border-radius: 999px; background: var(--papier); border: 2px solid var(--linie);
  box-shadow: 0 2px 8px rgba(0,0,0,.15); font-weight: 700; }
.welt-chip { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .9rem; color: var(--tinte); }
.welt-rechts { margin-left: auto; display: flex; gap: .5rem; margin-right: 4.4rem; } /* Platz für den Sprachknopf oben rechts */
.welt-liste { position: absolute; inset: 0; overflow-y: auto; padding-top: 5.5rem; background: var(--papier-2, var(--papier)); }
.welt-stick { position: absolute; left: max(1rem, env(safe-area-inset-left)); bottom: max(1.2rem, env(safe-area-inset-bottom)); width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255,255,255,.35); border: 3px solid rgba(255,255,255,.85); z-index: 2; touch-action: none; }
.welt-knauf { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; }
.welt-nahe { position: absolute; left: 0; right: 0; bottom: max(1.2rem, env(safe-area-inset-bottom)); display: flex; justify-content: center; z-index: 3;
  padding: 0 1rem 0 160px; pointer-events: none; }
.welt-nahe button { pointer-events: auto; box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 100%; }
.welt-tipp { position: absolute; right: 1rem; bottom: calc(max(1.2rem, env(safe-area-inset-bottom)) + 4.2rem); /* über „Frag Mona!“ */ margin: 0; max-width: 15rem; z-index: 1;
  background: rgba(255,255,255,.85); color: #2A2724; padding: .4rem .7rem; border-radius: var(--radius-s); font-size: .95rem; pointer-events: none; }
.welt-ueber { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: 4.8rem 1rem 2rem; background: rgba(20,30,40,.35); }
.welt-karte { width: 100%; max-width: 40rem; background: var(--papier); color: var(--tinte); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.3rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.welt-karte h1 { font-size: 1.7rem; } .welt-karte h2 { margin-top: .8rem; } .welt-karte h3 { margin: 1.1rem 0 .5rem; }
.welt-text { font-size: 1.3rem; line-height: 1.6; }
.welt-stufen { display: flex; gap: .4rem; flex-wrap: wrap; }
.welt-stufen button { min-height: 44px; }
.welt-wusstest { margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--radius-s); background: var(--honig-hell, #FFF3C9); border-left: 5px solid var(--honig, #F2C230); }
.welt-antworten { display: grid; gap: .5rem; }
.welt-antworten button { min-height: 56px; justify-content: flex-start; text-align: left; font-size: 1.15rem; border-width: 3px; }
.welt-antworten button.richtig { border-color: var(--gruen); background: var(--gruen-hell, #DFF3E4); }
.welt-antworten button.falsch { border-color: var(--rot); }
.welt-antworten button:disabled { opacity: 1; }
.welt-ergebnis { font-size: 1.25rem; font-weight: 700; margin-top: .8rem; }
/* Mona und Andi begleiten in der Lernwelt (Tipp, Weiter-Vorschlag, Zusammenhänge) */
.welt-begleitung { margin-top: 1rem; }
.welt-begleitung .ek-blase button { margin-top: .4rem; }
.welt-zusammenhang { margin-top: 1rem; padding-top: .8rem; border-top: 2px dashed var(--linie); }
.welt-zh-liste { list-style: none; margin: .6rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.welt-zh-liste li { padding: .6rem .8rem; border-radius: var(--radius-s); background: var(--papier); border: 1px solid var(--linie); }
.welt-zh-liste li > div { margin: .25rem 0 .4rem; }
.welt-faden { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: 0; margin: .3rem 0 .8rem; }
.welt-faden li { display: flex; align-items: center; gap: .3rem; }
.welt-faden li + li::before { content: "→"; color: var(--tinte-3); }
.welt-faden li.hier .chip { border: 3px solid var(--honig, #F2C230); font-weight: 700; }
.welt-faden li.entdeckt .chip { background: var(--gruen-hell, #E3F4E1); }
.welt-faden li.zu .chip { opacity: .6; }
.welt-knoepfe { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.2rem; }
@media (max-width: 560px) {
  .welt-lang { display: none; }
  .welt-stick { width: 112px; height: 112px; }
  .welt-nahe { padding-left: 130px; bottom: calc(max(1.2rem, env(safe-area-inset-bottom)) + 4.4rem); } /* über „Frag Mona!“ */
  .welt-nahe button { font-size: 1rem; padding: .6rem .9rem; min-height: 3.2rem; }
  .welt-tipp { display: none; }
  .welt-text { font-size: 1.2rem; }
}
.welt-gebiet { position: absolute; top: 4.6rem; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none;
  background: rgba(255,255,255,.9); color: #2A2724; font-weight: 700; padding: .4rem 1rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.2); white-space: nowrap; }

/* ── Spielwiese: Extras der Kinderseite (kind-extras.js, eltern-extras.js) ── */
.sw-karte .sw-zu { margin: 0; padding: .7rem; border-radius: var(--radius); background: var(--papier); border: 2px dashed var(--linie); }
.sw-ebene { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--papier-2); -webkit-overflow-scrolling: touch; }
.sw-kopf { position: sticky; top: 0; z-index: 2; background: var(--papier-2); padding: .5rem 0; }
.sw-kopf button.lz-gross { min-height: 52px; padding: .4rem 1rem; font-size: 1.1rem; }
.sw-zahlen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sw-zahlen .marker { font-size: 1.05rem; padding: .3rem .7rem; }
.sw-ton { min-height: 48px; min-width: 48px; font-size: 1.4rem; justify-content: center; }
.sw-reiter { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .8rem; }
.sw-reiter button { flex: none; min-height: 52px; font-size: 1.05rem; border-width: 2px; }
.sw-reiter button.gewaehlt { border-color: var(--blau); background: var(--blau-hell); color: var(--blau); font-weight: 700; }
.sw-reiter button.aus { opacity: .7; }
.sw-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .7rem; }
.sw-kachel { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .8rem .6rem; text-align: center;
  background: var(--papier); border: 3px solid var(--honig); border-radius: var(--radius); overflow-wrap: anywhere; }
.sw-kachel.zu { border: 2px dashed var(--linie); }
.sw-kachel button { width: 100%; min-height: 52px; justify-content: center; font-size: 1.05rem; }
.sw-kachel .klein { color: var(--tinte-2); }
.sw-bild { font-size: 3rem; line-height: 1.1; }
.sw-kachel.zu .sw-bild { filter: grayscale(.6); }
.sw-folge { text-align: left; justify-content: flex-start !important; font-size: .95rem !important; }
.sw-zu-gross { max-width: 32rem; margin: 2rem auto; align-items: center; text-align: center; }
.sw-titel { margin: .2rem 0 .6rem; font-size: 1.5rem; }
.sw-spiel { position: relative; }
.sw-buehne { position: relative; width: 100%; min-height: 50vh; }
.sw-blase { position: sticky; top: 4.2rem; z-index: 3; margin-bottom: .5rem; }
.sw-blase img { width: 56px; height: 56px; }
.sw-podcast { max-width: 40rem; margin: 0 auto; }
.sw-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; margin-top: .4rem; }
.sw-galerie figure { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.sw-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-s); }
.sw-galerie .knopf.klein, .sw-galerie button.klein { min-height: 44px; }

/* Modul Wissen (31.10.2026): Trefferzeilen, Steckbrief, Zeitleiste */
.wissen-ampel-hinweis { margin: 0 0 1rem; line-height: 1.9; }
.wissen-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; min-height: 44px; padding: .45rem 0; color: inherit; text-decoration: none; }
.wissen-zeile:hover .wissen-name, .wissen-zeile:focus-visible .wissen-name { text-decoration: underline; }
.wissen-name { font-weight: 600; color: var(--blau); }
.wissen-beschreibung { flex-basis: 100%; color: var(--tinte-2); }
.wissen-daten { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: .6rem 0 0; }
.wissen-daten dt { color: var(--tinte-2); font-weight: 600; }
.wissen-daten dd { margin: 0; overflow-wrap: anywhere; }
.wissen-aussagen td { white-space: normal; overflow-wrap: break-word; }
.wissen-aussagen td:nth-child(4), .wissen-aussagen td:nth-child(5) { white-space: nowrap; }
.wissen-aussagen a, .wissen-belege td { overflow-wrap: anywhere; }
.wissen-belege td { background: var(--papier-2); }
.wissen-verweise { display: flex; flex-wrap: wrap; gap: .4rem; }
.wissen-verweise .chip { text-decoration: none; color: inherit; }
.wissen-zeitleiste { list-style: none; padding: 0; margin: 1rem 0 0; border-left: 3px solid var(--linie); }
.wissen-zeitleiste > li { padding: 0 0 .6rem 1rem; position: relative; }
.wissen-zeitleiste > li::before { content: ""; position: absolute; left: -.5rem; top: .45rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--blau); }
.wissen-jahr { font-weight: 700; color: var(--tinte-2); }
.wissen-nennung { margin-top: 1.2rem; color: var(--tinte-2); }
@media (max-width: 719px) { .wissen-daten { grid-template-columns: 1fr; } .wissen-daten dt { margin-top: .4rem; } }
.wissen-belege .liste li { display: block; }
.wissen-belege .liste li > * { margin-right: .4rem; }
.wissen .chip.aktiv .klein { color: inherit; }
.wissen .tabelle-huelle table:not(.wissen-aussagen) td:first-child { white-space: normal; min-width: 11rem; overflow-wrap: anywhere; }
/* Wissen, klüger (Andre, 05.11.2026): eine Suche, Zeitreise, Zusammenhang davor → damals → danach */
.wissen .karte + .karte, .wissen .karte + .raster, .wissen .raster + .karte, .wissen-fluss + .raster, .wissen-fluss + .karte { margin-top: 1rem; }
.wissen-reiseziele > .karte, .wissen-ebenen > .karte, .wissen-ebenen-reise > .karte, .wissen-fluss > .karte, .wissen .raster > .karte { margin-top: 0; }
.wissen .raster { margin-top: 1rem; }
.wissen-suchkarte { padding: 1.2rem; }
.wissen-suchfrage { display: block; font-size: 1.25rem; font-weight: 700; margin-bottom: .6rem; }
.wissen-suchzeile { display: flex; gap: .5rem; }
.wissen-suchzeile input { flex: 1; min-width: 0; min-height: 52px; font-size: 1.05rem; padding: .5rem .9rem; border-radius: var(--radius-s); }
.wissen-suchzeile button { min-height: 52px; padding: 0 1.2rem; }
.wissen-beispiele { margin-top: .8rem; align-items: center; }
.wissen-abschnitt { margin: 1.4rem 0 .6rem; font-size: 1.1rem; }
.wissen-reisekarte { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; border: 2px solid var(--blau); background: var(--blau-hell); margin-top: 1rem; min-height: 64px; }
.wissen-reisekarte:hover b { text-decoration: underline; }
.wissen-reisesymbol { font-size: 2rem; }
.wissen-pfeil { margin-left: auto; font-size: 2rem; color: var(--blau); }
.wissen-mona { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.wissen-reiseziele { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wissen-reiseziel { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; min-height: 44px; padding: .8rem 1rem; }
.wissen-reiseziel:hover .wissen-reisejahr { text-decoration: underline; }
.wissen-reisejahr { font-size: 1.5rem; font-weight: 800; color: var(--blau); }
.wissen-ebenen { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.wissen-ebene { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; text-decoration: none; color: inherit; padding: .7rem .9rem; min-height: 44px; }
.wissen-ebene-symbol { grid-row: span 2; font-size: 1.6rem; }
.wissen-ebene-name { font-weight: 600; }
.wissen-ebene:hover .wissen-ebene-name { text-decoration: underline; }
.wissen-liste { list-style: none; margin: 0; padding: 0; }
.wissen-liste > li + li { border-top: 1px solid var(--linie); }
.wissen-eintrag { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .45rem .1rem; color: inherit; text-decoration: none; }
.wissen-eintrag:hover .wissen-name, .wissen-eintrag:focus-visible .wissen-name { text-decoration: underline; }
.wissen-symbol { width: 1.6rem; text-align: center; font-size: 1.1rem; line-height: 1.4; flex: none; }
.wissen-eintrag-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wissen-eintrag-zeit { color: var(--tinte-2); }
.wissen-eintrag .wissen-beschreibung { flex-basis: auto; }
.wissen-punkt { flex: none; font-weight: 700; line-height: 1.4; padding: 0 .2rem; }
.wissen-punkt.gruen { color: var(--gruen); } .wissen-punkt.honig { color: #8a5a00; } .wissen-punkt.rot { color: var(--rot); }
html[data-theme=dark] .wissen-punkt.honig { color: var(--honig); }
.wissen-reisekopf { padding: 1rem 1.2rem; }
.wissen-reiseleiste { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.wissen-reisemitte { text-align: center; flex: 1; }
.wissen-grossjahr { font-size: 2.6rem; font-weight: 800; line-height: 1.1; color: var(--blau); }
.wissen-blaettern { min-height: 52px; min-width: 52px; font-size: 1.4rem; font-weight: 700; }
.wissen-blaettern .klein { font-size: .85rem; font-weight: 600; }
.wissen-reisewahl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; margin-top: .8rem; }
.wissen-sprung { display: flex; gap: .4rem; }
.wissen-sprung input { min-width: 0; width: 16rem; max-width: 100%; }
.wissen-fluss { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .wissen-fluss { grid-template-columns: 1fr 1.25fr 1fr; align-items: start; } }
.wissen-fluss-teil h2 { font-size: 1.05rem; }
.wissen-fluss-teil h3 { margin: .6rem 0 .2rem; color: var(--tinte-2); font-weight: 600; }
.wissen-fluss-mitte { border: 2px solid var(--blau); }
.wissen-ehrlich { color: var(--tinte-2); margin: .5rem 0 0; }
.wissen-zweispaltig { columns: 2 15rem; column-gap: 1.2rem; }
.wissen-zweispaltig > li { break-inside: avoid; }
.wissen-zweispaltig > li + li { border-top: 0; }
.wissen-ebenen-reise { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.wissen-ebene-reise h3 { margin: 0 0 .3rem; }
.wissen-steckbrief-kopf { display: flex; align-items: center; gap: .9rem; }
.wissen-grosssymbol { font-size: 2.4rem; }
.wissen-titel { margin: 0; font-size: 1.5rem; }
.wissen-untertitel { margin: .1rem 0 0; color: var(--tinte-2); }
.wissen-lead { font-size: 1.08rem; margin: .8rem 0; }
.wissen-heilhinweis p { margin: 0; }
.wissen-rezepttext { margin: .6rem 0; padding: .8rem 1rem; border-left: 4px solid var(--honig); background: var(--honig-hell);
  border-radius: var(--radius-s); white-space: pre-line; font-family: Georgia, "Times New Roman", serif; line-height: 1.55;
  max-height: 32rem; overflow-y: auto; overflow-wrap: anywhere; }
.wissen-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; }
.wissen-schritte { counter-reset: schritt; }
.wissen-schritte > li { counter-increment: schritt; display: flex; gap: .3rem; align-items: flex-start; }
.wissen-schritte > li::before { content: counter(schritt); flex: none; width: 1.5rem; height: 1.5rem; margin-top: .6rem; border-radius: 50%; background: var(--blau-hell); color: var(--blau); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.wissen-schritte > li > .wissen-eintrag { flex: 1; }
.wissen-mehr { margin-top: .4rem; }
.wissen-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .6rem; }
.wissen-details[open] summary { margin-bottom: .5rem; }
.wissen-daten dd .wissen-punkt { margin-left: .2rem; }
@media (max-width: 560px) {
  .wissen-suchzeile { flex-direction: column; }
  .wissen-grossjahr { font-size: 2rem; }
  .wissen-blaettern .klein { display: none; }
  .wissen-sprung { width: 100%; } .wissen-sprung input { flex: 1; width: auto; }
}
/* Am Handy stehen die Aussagen untereinander statt in fünf schmalen Spalten */
@media (max-width: 719px) {
  .wissen-aussagen thead { display: none; }
  .wissen-aussagen tr, .wissen-aussagen td { display: block; }
  .wissen-aussagen td { border-bottom: 0; padding: .15rem .6rem; }
  .wissen-aussagen tr { border-bottom: 1px solid var(--linie); padding: .35rem 0; }
  .wissen-aussagen td:first-child { font-weight: 600; color: var(--tinte-2); }
  .wissen-aussagen td:empty { display: none; }
}
@media (max-width: 560px) {
  /* Am Handy rutscht die rechte Knopfgruppe in eine zweite Zeile – das Gebiets-Banner darunter */
  .welt-gebiet { top: 8.2rem; }
}

/* ── Wochenplan für Eltern (Andre, 04.11.2026): modules/elternplan.js und eltern-wochenplan.js ── */
.ep-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.ep-wahl > button { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left;
  padding: .8rem .9rem; min-height: 44px; border: 2px solid var(--linie); border-radius: var(--radius-s);
  background: var(--papier); color: var(--tinte); cursor: pointer; }
.ep-wahl > button.aktiv { border-color: var(--blau); background: var(--blau-hell); }
.ep-zeichen { font-size: 1.6rem; line-height: 1; }
.ep-tag { margin-top: 1rem; }
.ep-tag > .liste { margin-top: .4rem; }
.ep-stunde { flex-wrap: wrap; justify-content: space-between; }
.ep-stunde.verborgen { opacity: .6; }
.ep-stunde-text { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ep-stunde-text > .marker { align-self: flex-start; }
.ep-stunde-wahl { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.ep-stunde-wahl select { min-height: 44px; }
.liste li.ep-spalte { flex-direction: column; gap: .2rem; }
.ep-krank { background: var(--honig-hell); border-color: var(--honig); }
@media (max-width: 560px) { .ep-stunde-wahl { align-items: stretch; width: 100%; } }
/* ── Forscherheft mit Entdecker-Profil (forscherheft.js) ─────────────────── */
.fh { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.fh h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.fh-rang { display: flex; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--honig-hell), var(--blau-hell)); }
.fh-abzeichen { font-size: 2.6rem; width: 4.4rem; height: 4.4rem; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--papier); box-shadow: 0 0 0 4px var(--honig), var(--schatten); }
.fh-rang-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.fh-rang-name { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.fh-balken { display: block; height: .65rem; border-radius: 99px; background: var(--papier-3); overflow: hidden; }
.fh-balken > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--honig), var(--gruen)); }
.fh-leiter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.fh-leiter li { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: 1.4rem; opacity: .35;
  filter: grayscale(1); padding: .3rem 0; border-radius: var(--radius-s); }
.fh-leiter li small { font-size: .7rem; color: var(--tinte-2); }
.fh-leiter li.erreicht { opacity: 1; filter: none; }
.fh-leiter li.jetzt { background: var(--honig-hell); outline: 2px solid var(--honig); }
.fh-lob { margin: 0; padding: .7rem .9rem; border-radius: var(--radius); background: var(--gruen-hell); font-weight: 500; }
.fh-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.fh-zahlen > div { display: flex; flex-direction: column; padding: .55rem .7rem; border-radius: var(--radius-s);
  background: var(--papier-2); border: 1px solid var(--linie); }
.fh-zahlen b { font-size: 1.25rem; }
.fh-teil { border-top: 1px solid var(--linie); padding-top: .8rem; }
.fh-karte { width: 100%; max-width: 30rem; display: block; margin: 0 auto; }
.fh-meer-rand { fill: none; stroke: #9CCBE8; stroke-width: 12; opacity: .45; }
.fh-land { fill: #CFE6B5; stroke: #E9D9A6; stroke-width: 3; }
.fh-wasser { fill: #8EC3E6; }
.fh-ort { cursor: pointer; }
.fh-ort:focus { outline: none; }
.fh-ort:focus .fh-punkt { stroke: var(--blau); stroke-width: 2.4; }
.fh-punkt { fill: #fff; stroke: #8A847B; stroke-width: 1.2; }
.fh-ort.neu .fh-punkt { fill: #fff; stroke-dasharray: 2.5 2; }
.fh-ort.entdeckt .fh-punkt { fill: #FFF7E0; stroke: #B79B5A; }
.fh-ort.gold .fh-punkt { fill: #FFD84D; stroke: #B8860B; stroke-width: 2; }
.fh-ort.silber .fh-punkt { fill: #E2E6EA; stroke: #8E979F; stroke-width: 2; }
.fh-ort.bronze .fh-punkt { fill: #E9B98C; stroke: #A0612C; stroke-width: 2; }
.fh-ort.zu { opacity: .55; }
.fh-ort.zu .fh-punkt { fill: #D9D2C2; stroke: #A39C90; }
.fh-punkt.gewaehlt { stroke: var(--blau); stroke-width: 2.6; }
.fh-ortinfo { min-height: 2.6rem; margin: .4rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: center; text-align: center; }
.fh-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; color: var(--tinte-2); justify-content: center; }
.fh-legende li { display: flex; align-items: center; gap: .3rem; }
.fh-l { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid #8A847B; background: #fff; }
.fh-l.gold { background: #FFD84D; border-color: #B8860B; } .fh-l.silber { background: #E2E6EA; border-color: #8E979F; }
.fh-l.bronze { background: #E9B98C; border-color: #A0612C; } .fh-l.entdeckt { background: #FFF7E0; border-color: #B79B5A; }
.fh-l.neu { border-style: dashed; } .fh-l.zu { background: #D9D2C2; border-color: #A39C90; }
.fh-faecher, .fh-faeden, .fh-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.fh-faecher li { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 6.5rem; gap: .6rem; align-items: center; }
.fh-fach { font-weight: 600; }
.fh-fach small { display: block; font-weight: 400; }
.fh-faeden li { padding: .6rem .7rem; border-radius: var(--radius-s); border: 1px solid var(--linie); background: var(--papier-2); }
.fh-faeden li.fertig { border-color: var(--rot); background: var(--rot-hell); }
.fh-faden-kopf { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }
.fh-faden-kopf small { margin-left: auto; }
.fh-kette { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; align-items: center; }
.fh-kette > span { display: flex; flex-direction: column; align-items: center; font-size: 1.3rem; min-width: 3.6rem;
  padding: .2rem .3rem; border-radius: var(--radius-s); border: 2px dashed var(--linie); opacity: .6; }
.fh-kette > span small { font-size: .65rem; color: var(--tinte-2); text-align: center; line-height: 1.1; }
.fh-kette > span.an { border: 2px solid var(--rot); opacity: 1; background: var(--papier); }
.fh-kette > span.zu { opacity: .35; }
.fh-logtag h3 { margin: .4rem 0 .3rem; }
.fh-log li { padding: .35rem .2rem; border-bottom: 1px dotted var(--linie); }
.fh-log li span:last-child { color: var(--tinte-2); }
html[data-theme="dark"] .fh-land, html[data-theme="auto"].dunkel .fh-land { fill: #3E5A34; stroke: #6B6040; }
html[data-theme="dark"] .fh-wasser, html[data-theme="auto"].dunkel .fh-wasser { fill: #2F5F86; }
html[data-theme="dark"] .fh-ort.neu .fh-punkt, html[data-theme="auto"].dunkel .fh-ort.neu .fh-punkt, html[data-theme="dark"] .fh-punkt, html[data-theme="auto"].dunkel .fh-punkt { fill: #2A2724; stroke: #8F887C; }
html[data-theme="dark"] .fh-ort.entdeckt .fh-punkt, html[data-theme="auto"].dunkel .fh-ort.entdeckt .fh-punkt { fill: #4A4232; }
html[data-theme="dark"] .fh-ort.gold .fh-punkt, html[data-theme="auto"].dunkel .fh-ort.gold .fh-punkt { fill: #E6B92E; }
html[data-theme="dark"] .fh-ort.silber .fh-punkt, html[data-theme="auto"].dunkel .fh-ort.silber .fh-punkt { fill: #A9B1B8; }
html[data-theme="dark"] .fh-ort.bronze .fh-punkt, html[data-theme="auto"].dunkel .fh-ort.bronze .fh-punkt { fill: #B97D4C; }
@media (max-width: 560px) {
  .fh-rang { padding: .8rem; gap: .7rem; } .fh-abzeichen { width: 3.6rem; height: 3.6rem; font-size: 2rem; }
  .fh-leiter li small { font-size: .6rem; }
  .fh-faecher li { grid-template-columns: 1fr auto; } .fh-faecher li .fh-balken { grid-column: 1 / -1; grid-row: 2; }
}