@font-face{font-family:PlanLato;src:url('/material/schriften/Lato-Regular.woff2') format('woff2'),url('/material/schriften/Lato-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PlanLato;src:url('/material/schriften/Lato-Bold.woff2') format('woff2'),url('/material/schriften/Lato-Bold.ttf') format('truetype');font-weight:600 900;font-display:swap}
/* Aussehen des Betreuungstools. Stand vorher im <style>-Block von index.html.
   Getrennt, damit die Oberfläche nicht Aussehen, Aufbau und Ablauf in einer Datei
   mischt – und damit der Browser die Datei zwischenspeichern kann. */
/* Drei Flächen, die sich unterscheiden müssen: die Seite (--sand), die Karte
   darauf (--karte) und der eingelassene Block in der Karte (--flaeche).
   --linie trennt nur, --rand umreißt etwas Antippbares und muss deutlich
   kräftiger sein: Ein Knopf in Kartenfarbe auf einer Karte ist sonst unsichtbar. */
/* `hidden` muss `hidden` heißen. Jede eigene Regel mit display schlägt sonst die
   des Browsers, und dann steht ein ausgeblendeter Abschnitt weiter da – gemerkt
   an der Überschrift „Einzelne Tagesgäste“ (.dokuschritt ist ein Flexkasten), die
   im Einzeleintrag sichtbar blieb. Einmal für alle statt je Fall eine Ausnahme. */
[hidden]{display:none !important}

:root{
  /* Kühle Neutraltöne, ein Akzent. Vorher lagen Sand und Lehm auf allem – Fläche,
     Linie, Rand, sogar die Schrift –, und eine Oberfläche, in der jeder Neutralton
     eingefärbt ist, sieht nach Basteln aus, nicht nach Werkzeug. Jetzt sind die
     Neutraltöne ein kühles Grau mit einem Hauch Blau; Farbe trägt nur noch, was
     wirklich Zeichen ist: der heutige Tag, ein wichtiger Knopf, ein Verweis.
     Weiß bleibt der Karte vorbehalten, damit Geschriebenes auf Papier liegt.
     Das blaue Weiß / blau Farbschema inspiriert von der SDLZ-Referenzwebsite. */
  /* Stand 27.10.2026 (Design „Papier“): Der Grund ist warmes Papier statt Kühlgrau,
     Weiß bleibt der Karte. Das Hausblau ist der einzige Akzent – auch im Dunkeln. */
  --gruen:#1b5a8a; --auf-gruen:#fff; --gruen-hell:#e7eef6; --sand:#f6f4ef; --karte:#ffffff; --flaeche:#f3f1ec;
  --text:#1b232c; --grau:#5b6672; --linie:#e6e1d8; --rand:#d3ccc0;
  --rot:#b0413c; --gelb:#8a6516;
  /* Eigener Ton für die Themenwoche: Ein sattes Orange, das in keiner Bereichsfarbe
     und keiner Statusfarbe (rot/gelb/grün) schon vorkommt – eine Themenwoche ist
     kein Bereich und kein Zustand, sondern der seltene Sonderfall selbst. */
  --fest:#a85511;
  /* Die sieben Bereichsfarben: gedeckt und untereinander gleich kräftig, damit
     keine aus der Reihe springt. Auf das blaue Grundsystem angepasst, damit die
     Akzente zum Referenzdesign der SDLZ passen. Sieben Farbtöne, die sich im Farbkreis
     nicht ins Gehege kommen: Blaugrün, Terrakotta, Violett, Grün, Rot, Ocker, Stahlblau. */
  --bewegung:#0f5a8a; --kreativ:#9a5533; --musik:#65498c; --kognition:#396b46; --gesellig:#a03f4a;
  --aktivierung:#836414; --rezepte:#335c8a;
  /* Die Kartenfarbe halbdurchsichtig. Bisher stand an neun Stellen
     rgba(255,253,249,.9x) fest im Regelsatz – im Dunkelmodus lagen damit cremefarbene
     Karten auf schwarzem Grund. Eine Marke, die mitwechselt, statt neun Zahlen. */
  --karte-weich:rgba(255,255,255,.92);
  /* Ein Maß je Größe statt elf Einzelwerte: Knopf und Feld (--r-s), Kasten in der
     Karte (--r-m), Karte (--r), große Fläche (--r-l), Marke und Chip (--r-pille).
     Ungleiche Rundungen nebeneinander sind das, woran man Selbstgebautes erkennt. */
  --r-s:8px; --r-m:10px; --r:12px; --r-l:14px; --r-xl:20px; --r-pille:999px;
  /* Eine zweite Schrift, nur für Überschriften und Tagesnamen. Eine Oberfläche aus
     einer einzigen serifenlosen Schrift sieht aus wie jede andere; die Serife gibt
     ihr ein Gesicht, ohne dass etwas nachgeladen werden muss – Georgia und die
     Verwandtschaft liegen auf jedem Gerät. Der gedruckte Aushang ist ohnehin schon
     in Georgia gesetzt: Bildschirm und Papier sprechen damit dieselbe Sprache. */
  --titel:Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif", serif;
  /* Drei Höhen statt fünf Rezepte: aufliegend, abgehoben, schwebend. Als Marke, damit
     sie im Dunkeln mitwechseln – feste rgba(32,49,42,…) waren dort wirkungslos.
     Der zweite Wert hat negativen Radius: Der Schatten bleibt unter dem Element,
     statt es als grauer Hof zu umranden. Das ist der Unterschied zwischen
     „liegt auf der Seite“ und „ist auf die Seite gemalt“. */
  /* Der Schatten nimmt die Farbe des Grundes an: Auf kühlem Grau sieht ein brauner
     Schatten schmutzig aus, ein blaugrauer sieht nach Tiefe aus. */
  /* Aufliegendes trägt keinen Schatten mehr, nur die Hairline (--linie). Schatten
     bleibt dem, was wirklich schwebt: Menü, Dialog, Blatt. */
  --schatten-1:none;
  --schatten-2:0 1px 2px rgba(20,32,45,.06);
  --schatten-3:0 2px 4px rgba(20,32,45,.06), 0 20px 40px -16px rgba(20,32,45,.20);
  --schatten:var(--schatten-2);
  /* Ein Ring statt vier verschiedener outline-Zeilen – aus der Akzentfarbe, damit er
     in beiden Ansichten stimmt. */
  --ring:0 0 0 3px color-mix(in srgb, var(--gruen) 25%, transparent);
  --text-schrift:PlanLato, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Grün ist ein Zeichen, keine Fläche. Vorher trug jeder gewöhnliche Knopf einen
     grünen Ton, grünen Rand und grüne Schrift – und derselbe Ton bedeutete an anderer
     Stelle „ausgewählt“, „erledigt“, „heute“, „gespeichert“ und „Maus liegt drauf“.
     Sechs Aussagen in einer Farbe sind keine Aussage: „Abbrechen“ und „Übernehmen“
     standen als zwei grüne Kästchen nebeneinander, drei Knöpfe unter einer Kachel
     als ein Block. Der gewöhnliche Knopf ist deshalb neutral getönt – Fläche, damit
     er nicht wieder das weiße Kästchen von früher wird, aber ohne Farbton. Grün trägt
     ab hier nur noch die eine wichtige Handlung und den Zustand. */
  --knopf-flaeche:var(--flaeche);
  --knopf-rand:var(--rand);
  --knopf-text:var(--text);
  /* Eine Stufe von der Fläche weg, in beide Richtungen mit einer Formel: --rand liegt
     im Hellen dunkler und im Dunkeln heller als --flaeche, der Ton wandert also von
     selbst mit. Rückmeldung auf Überfahren ist eine Helligkeit, kein Farbwechsel –
     ein Knopf, der unter der Maus grün wird, sieht aus wie ein ausgewählter Knopf. */
  --flaeche-hoch:color-mix(in srgb, var(--rand) 26%, var(--flaeche));
  /* Sagt dem Browser, in welcher Ansicht er seine eigenen Bedienteile zeichnen soll:
     Bildlaufleiste, Datumsauswahl, Häkchen. Ohne das bleiben sie hell, während der
     Rest dunkel ist. */
  color-scheme:light;
}
/* Die Dunkelfassung hängt am Element, nicht an der Gerätevorliebe: Ein kurzes
   Skript im Kopf setzt data-theme vor dem ersten Bild – aus der gespeicherten Wahl
   oder, solange keine getroffen wurde, aus der Einstellung des Geräts. So braucht
   jede Dunkelregel genau einen Selektor statt Medienabfrage plus Ausnahme, und der
   Schalter oben rechts wirkt sofort.
   Im Dunkeln liegt das Eingelassene heller, nicht dunkler – sonst fällt es mit dem
   Seitenhintergrund zusammen. */

:root[data-theme="dark"]{ color-scheme:dark;
    /* Im Dunkeln dieselbe Kühle: der Grund ist Schiefer, nicht Braun. Ein warmes
       Dunkel unter einer kühlen Hellfassung sieht aus wie zwei verschiedene
       Programme. Die Bereichsfarben werden aufgehellt, nicht nur abgedunkelt –
       gesättigte Volltöne auf Schwarz sind nicht lesbar. */
    /* Nachtblau statt Schiefer, und der Akzent bleibt Blau: Vorher war er im Dunkeln
       Mintgrün – zwei Marken in einem Programm. */
    --gruen:#7db4e0; --auf-gruen:#0f1720; --gruen-hell:#1c2c48; --sand:#0e1726; --karte:#15213a; --flaeche:#1c2a45;
    --text:#e6ebf1; --grau:#9fabbd; --linie:#25344f; --rand:#3a4b69;
    --rot:#e08a83; --gelb:#d9b264; --fest:#e2a15c;
    --bewegung:#5aa1c6; --kreativ:#d79a72; --musik:#ad96da; --kognition:#7fc296; --gesellig:#e2868f;
    --aktivierung:#cdaa5c; --rezepte:#5a86c6;
    --karte-weich:rgba(21,33,58,.92);
    /* Im Dunkeln trägt nicht der Schatten die Höhe, sondern der Lichtsaum an der
       Oberkante – ein schwarzer Schatten auf schwarzem Grund ist nichts. */
    --schatten-1:none;
    --schatten-2:0 1px 2px rgba(0,0,0,.4);
    --schatten-3:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.45), 0 24px 48px -18px rgba(0,0,0,.65); }
*{box-sizing:border-box}
html,body{margin:0;padding:0}body{
  /* Zwei weiche Lichter auf der Seitenfarbe statt eines Verlaufs mit festen
     Hellwerten. Der alte lief von var(--sand) nach #f8f4ed – im Dunkelmodus also
     von Schwarz nach Creme quer über die Seite. Die Lichter liegen jetzt als
     durchsichtige Schicht darüber und stimmen in beiden Modi.
     background-attachment:fixed, damit sie beim Scrollen stehen bleiben: ein
     Verlauf, der mitwandert, sieht nach Farbfehler aus.
     Anpassung an das blaue Weiß / Blau Schema der SDLZ-Referenzwebsite. */
  /* Stand 27.10.2026: Die Lichter sind weg – eine ruhige Fläche wirkt hochwertiger
     als ein Schein. Und Lato (liegt ohnehin für den Druck im Projekt) statt Avenir:
     Avenir gibt es nur auf dem Mac, überall sonst stand eine andere Systemschrift da. */
  background:var(--sand);
  color:var(--text);
  font:15.5px/1.55 var(--text-schrift);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; -webkit-text-size-adjust:100%;
}
/* Große Schrift steht enger als kleine – ein Titel mit dem Zeilenabstand eines
   Fließtexts zerfällt in Zeilen, statt als Block zu wirken. */
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1,.blatt-titel{letter-spacing:-.03em}
/* Angesetzt wird sie nur dort, wo etwas anfängt: Seitentitel, Detailblatt, Tagesname
   im Wochenplan. Nicht an den Angebotskacheln – dreißig Serifentitel in einer Liste
   liest niemand, die werden überflogen. */
.kopf h1,.titelzeile h2,.blatt-titel,#anmeldung h1,.tag-kopf b,.wochenkopf .mitte b{
  font-family:var(--titel);font-weight:600;letter-spacing:-.015em}
.kopf h1 span,.wochenkopf .mitte span{font-family:inherit}
/* Zahlen in Tabellen, Uhrzeiten und Zählern gleich breit: Sonst springt eine
   Minutenangabe beim Hochzählen in der Breite und die Spalte zappelt. */
time,.wann,.zeitzeile,.zeitangabe,.dauerfeld{font-variant-numeric:tabular-nums}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--gruen)}
.knopf.wichtig{background:var(--gruen);border-color:var(--gruen);color:var(--auf-gruen);box-shadow:none}
.knopf.wichtig:hover{background:color-mix(in srgb,var(--gruen) 88%,black);border-color:color-mix(in srgb,var(--gruen) 88%,black);color:var(--auf-gruen)}

/* ---------- Grundbausteine ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:44px;padding:0 1.1em;border-radius:var(--r-s);
  background:var(--knopf-flaeche);border:1px solid var(--knopf-rand);
  color:var(--knopf-text);font-weight:600;
  box-shadow:var(--schatten-1);
  /* Der frühere Schatten war "0 2px 0" – eine harte Kante unter dem Knopf, die ihn
     wie eine Taste aus einem alten Kasten aussehen ließ. Höhe macht jetzt --schatten-1.
     Der Rahmen ist 1px statt 1.5px; --rand wurde dafür einen Ton kräftiger. */
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.knopf:hover{background:var(--flaeche-hoch);border-color:var(--grau)}
/* Stand 27.10.2026: Knöpfe hüpfen nicht mehr. Ein Knopf, der sich unter der Maus
   hebt, macht eine Reihe aus fünf Tagen unruhig – die Fläche reicht als Rückmeldung. */
.knopf:active{transform:scale(.985)}
.knopf:focus-visible,.pfeil:focus-visible,.ich:focus-visible,nav.reiter button:focus-visible{outline:2px solid var(--gruen);outline-offset:2px;box-shadow:var(--ring)}
/* Wer die Maus nicht bewegen kann, mag auch keine wandernden Knöpfe. */
@media (prefers-reduced-motion: reduce){ *{transition-duration:.01ms !important;animation-duration:.01ms !important} }
/* Drei Tonlagen, und zwar überall dieselben drei – nicht wie bisher eine Abstufung,
   die nur unter den Angebotskacheln galt und sonst nirgends:
     .wichtig  volle Hausfarbe   – die eine Handlung, wegen der die Seite offen ist
     (nichts)  neutrale Fläche   – alles Übliche: Abbrechen, Öffnen, Tauschen
     .leise    ohne Rand, grau   – Beiwerk, das nur danebensteht
   Eine Ansicht trägt einen wichtigen Knopf. Standen zwei nebeneinander, ist einer
   davon in Wahrheit der übliche Fall. */
/* Kein Rand und keine Fläche: Er wird erst zum Kasten, wenn man ihn anfasst. So
   zählt eine Reihe aus drei Handlungen nicht mehr als drei gleich schwere Kästchen. */
.knopf.leise{background:none;border-color:transparent;color:var(--grau);box-shadow:none}
.knopf.leise:hover{background:var(--flaeche-hoch);border-color:transparent;color:var(--text);box-shadow:none;transform:none}
.knopf.klein{min-height:40px;padding:0 .85em;font-size:.92rem;border-radius:8px}
/* Rot und Gelb ebenfalls als Fläche, nicht nur als Randfarbe: Ein roter Strich um
   ein cremefarbenes Kästchen ist auf einer cremefarbenen Seite kaum ein Signal. */
.knopf.gefahr{color:var(--rot);background:color-mix(in srgb, var(--rot) 9%, var(--karte));
  border-color:color-mix(in srgb, var(--rot) 42%, var(--linie))}
.knopf.gefahr:hover{background:color-mix(in srgb, var(--rot) 16%, var(--karte));
  border-color:var(--rot);color:var(--rot)}
.knopf.abweichend{color:var(--gelb);background:color-mix(in srgb, var(--gelb) 11%, var(--karte));
  border-color:color-mix(in srgb, var(--gelb) 42%, var(--linie))}
.knopf.abweichend:hover{background:color-mix(in srgb, var(--gelb) 18%, var(--karte));
  border-color:var(--gelb);color:var(--gelb)}
.einstellzeile{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;flex-wrap:wrap}
.einstellzeile .feld{flex:1;min-width:7rem}
.einstellzeile input[type=time]{flex:0 0 7rem}
/* Handy: Name in eigener Zeile, darunter „von bis bis“ – sonst hing „bis“ am
   Zeilenende und die Endzeit stand allein in der nächsten Zeile. */
@media(max-width:520px){
  .einstellzeile > [data-slotname]{flex:1 1 100%}
  .einstellzeile[data-slot]{margin-bottom:1rem}
  .einstellzeile > [data-pflichtname]{flex:1 1 100%}
  /* Tagesablauf: Zeit und ✕ oben, Baustein und Inhalt darunter in voller Breite.
     Vorher waren beide Textfelder halb so breit und der Inhalt nicht lesbar. */
  .einstellzeile[data-ablauf]{display:grid;grid-template-columns:7rem auto 7rem 1fr;
    padding-top:.6rem;border-top:1px solid var(--linie)}
  .einstellzeile[data-ablauf] > [data-ablaufbaustein],
  .einstellzeile[data-ablauf] > [data-ablaufinhalt]{grid-column:1 / -1}
  .einstellzeile[data-ablauf] > [data-ablaufweg]{grid-row:1;grid-column:4;justify-self:end}
}
.einstellzeile.pflicht{align-items:flex-start;border-top:1px solid var(--linie);padding-top:.6rem}
/* Die Angebotswahl bekommt die volle Breite und eine eigene Zeile: Hundert Kästchen
   neben einem Namensfeld gehen auf keinem Bildschirm auf. */
.einstellzeile.pflicht .pflichtwahl{flex:1 1 100%;order:3}
.einstellzeile.pflicht .pflichtstand{flex:1 1 100%;order:3;margin:0}
.pflichtwahl > summary{cursor:pointer;padding:.35rem 0;font-size:.9rem;min-height:32px}
.pflichtwahl .wahlfeld{max-height:16rem;overflow-y:auto;border:1px solid var(--linie);
  border-radius:var(--r-m);padding:.5rem}
/* Der Speichern-Knopf sagt, ob es etwas zu speichern gibt – und klebt beim Scrollen
   unten fest, weil die Karte darüber auf dem Handy mehrere Bildschirme lang ist. */
.speicherleiste{position:sticky;bottom:0;display:flex;gap:.7rem;align-items:center;
  flex-wrap:wrap;margin-top:.9rem;padding:.7rem 0;background:var(--karte);
  border-top:1px solid var(--linie);z-index:3}
.speicherleiste .knopf:disabled{opacity:.55}
@media(max-width:899px){ .speicherleiste{bottom:calc(56px + env(safe-area-inset-bottom,0px))} }
/* Zugeklappte Bereiche: die Zusammenfassung sieht aus wie eine Überschrift. */
summary{font-size:1.05rem;font-weight:700;cursor:pointer;padding:.5rem 0;list-style:none;
  display:flex;align-items:center;gap:.5rem}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";color:var(--grau);transition:transform .15s;flex:none}
/* Titel und Erklärung untereinander, obwohl summary ein Flexkasten ist. */
.summarytext{flex:1;min-width:0;font-weight:inherit}
.summarytext b{display:block}
.summarytext .hinweis{display:block;font-weight:400;font-size:.86rem;margin-top:.25rem;line-height:1.45}
details[open] > summary::before{transform:rotate(90deg)}
/* Nur noch "geplant [ 45 ] Min" – die vorgeschlagene Spanne stand hier früher als
   Hinweis daneben und war im Wochenplan bloß Rauschen; sie steht weiterhin im title
   des Eingabefelds. Damit hat die Zeile feste Breite und kann nicht mehr umbrechen,
   was vorher je nach Hinweistext ganze Tagesspalten gegeneinander verschoben hat. */
.dauerfeld{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-top:.4rem;font-size:.8rem;color:var(--grau)}
/* Zugeklappte Zusatzfelder: Der Regelfall ist der Gruppentext, alles Weitere stört
   dort nur. Die Überschrift muss trotzdem sagen, was drin steckt – ein Dreieck
   allein lädt niemanden zum Klicken ein. */
.zusatzfeld{border:1px solid var(--linie);border-radius:var(--r);padding:.7rem .9rem;margin-bottom:.9rem}
.zusatzfeld > summary{cursor:pointer;font-size:.92rem;color:var(--grau);list-style-position:outside}
.zusatzfeld > summary b{color:var(--text)}
.zusatzfeld > summary:hover{color:var(--text)}
.zusatzfeld[open] > summary{margin-bottom:.2rem}
.zusatzfeld > summary:focus-visible{outline:2px solid var(--gruen);outline-offset:2px;border-radius:4px}
.dauerfeld input{width:4.2rem;padding:.2rem .35rem;font-size:.85rem;border:1px solid var(--rand);
  border-radius:8px;background:var(--karte);color:var(--text);font-variant-numeric:tabular-nums}
.knopf[disabled]{opacity:.45;pointer-events:none}
/* Karte und Kasten sind dieselbe Fläche: gleicher Grund, gleicher Rand, gleicher
   Schatten. Vorher hob die Karte mit dem größeren Schatten ab, und Doku sah neben
   Heute und Team aus wie aus einer anderen Anwendung. */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten-1)}
/* Felder bleiben kartenhell. Sie sind der Ort, an dem geschrieben wird – Getipptes
   gehört auf Papier, nicht auf eine getönte Fläche. Der Unterschied zu den nun
   getönten Knöpfen macht auf einen Blick klar, was zum Tippen und was zum Tippen-
   drauf da ist. */
.feld{width:100%;min-height:48px;padding:.6em .8em;border:1px solid var(--rand);
  border-radius:var(--r-s);background:var(--karte);font-size:16px;
  transition:border-color .16s ease, box-shadow .16s ease}
.feld:hover{border-color:var(--gruen)}
/* Ring statt dicker outline: Der Ring liegt außerhalb der Kante und schiebt nichts.
   Die frühere Regel machte den Rahmen zusätzlich durchsichtig – das Feld sprang
   beim Hineinklicken sichtbar in der Farbe. */
.feld:focus{outline:none;border-color:var(--gruen);box-shadow:var(--ring)}
textarea.feld{min-height:100px;resize:vertical;line-height:1.5}
label.beschriftung{display:block;font-size:.8rem;font-weight:700;color:var(--grau);
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 .4em}
.hinweis{font-size:.9rem;color:var(--grau)}
.punkt{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.k-bewegung{background:var(--bewegung)} .k-kreativ{background:var(--kreativ)}
.k-musik{background:var(--musik)} .k-kognition{background:var(--kognition)}
.k-gesellig{background:var(--gesellig)} .k-aktivierung{background:var(--aktivierung)}
.k-rezepte{background:var(--rezepte)}
.t-bewegung{color:var(--bewegung)} .t-kreativ{color:var(--kreativ)}
.t-musik{color:var(--musik)} .t-kognition{color:var(--kognition)} .t-gesellig{color:var(--gesellig)}
.t-aktivierung{color:var(--aktivierung)} .t-rezepte{color:var(--rezepte)}

/* ---------- Rahmen ---------- */
/* Kein backdrop-filter auf dem Handy – der Grund ist nicht Geschmack:
   Ein Element mit backdrop-filter wird zum Bezugsrahmen für alles `position:fixed`
   darin. Die Reiterleiste steht im Kopf und klebte damit an dessen Unterkante statt
   am unteren Bildschirmrand: Auf dem Handy lagen beide oben übereinander.
   Unten wird der Kopf deshalb schlicht deckend gefüllt; ab 900 px steht die
   Reiterleiste ohnehin still im Kopf, dort darf der Milchglaseffekt zurückkommen. */
header.kopf{
  position:sticky;top:0;z-index:30;background:var(--karte);
  border-bottom:1px solid var(--linie);padding:.7rem 1rem;
  padding-top:calc(.7rem + env(safe-area-inset-top));
  display:flex;align-items:center;gap:.75rem;
}
.kopfmarke{flex:none;border-radius:10px;display:block;width:48px;height:48px}
.kopf h1{font-size:1.02rem;letter-spacing:-.01em;flex:1;min-width:0}
.kopf h1{display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;row-gap:.15rem}
.kopf h1 span{order:1;flex-basis:100%;font-size:.82rem;font-weight:500;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kopf h1 b:not(.kopf-kw){order:2}
.kopf-kw{order:3}
.kopf-kw{flex:none;display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .55rem;border-radius:var(--r-pille);background:var(--gruen);color:var(--karte);font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.kopf-kw::before{content:"";display:block;width:.45rem;height:.45rem;background:currentColor;border-radius:50%;opacity:.25}
@media(min-width:900px){.kopf-kw{padding:.18rem .7rem;font-size:.75rem}}
.nav-kw{display:inline-block;padding:.05rem .4rem;margin-left:.35rem;border-radius:var(--r-pille);background:var(--gruen);color:var(--karte);font-size:.65rem;font-weight:700;letter-spacing:.02em;vertical-align:middle}
@media(min-width:900px){.nav-kw{padding:.1rem .5rem;font-size:.68rem}}
.ich{min-height:44px;min-width:44px;padding:0 .8em;border-radius:var(--r-pille);background:var(--gruen-hell);
  color:var(--gruen);font-weight:700;font-size:.85rem;border:none;flex:none}
/* Der Ansichtsschalter sieht aus wie das Kürzel – gleiche Höhe, gleiche Rundung –,
   tritt aber zurück: Er wird einmal benutzt, das Kürzel steht immer da.
   ponytail: zwei Zustände, kein Dreierwechsel mit „folgt dem Gerät“. Wer nie tippt,
   folgt ohnehin dem Gerät; gespeichert wird nur eine bewusste Wahl. */
.ansicht{background:none;color:var(--grau);font-size:1.2rem;font-weight:400;
  padding:0;width:44px;transition:background .16s ease, color .16s ease}
.ansicht:hover{background:var(--flaeche-hoch);color:var(--text)}
.ansicht{display:inline-grid;place-items:center}
.ansicht svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ansicht{color:var(--text)}
main{max-width:1240px;margin:0 auto;padding:1.1rem 1rem 6.5rem;}
@media(min-width:900px){
  /* Oben in jedem Reiter derselbe Abstand, damit der Seitenkopf beim Wechseln stehen bleibt. */
  main{padding:1rem 2rem 4rem}
  .abschnitt[data-aktiv] > .wochenkopf:first-child{margin-bottom:1.4rem}
}

nav.reiter{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--karte);border-top:1px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
nav.reiter button{
  flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:.8rem;font-weight:600;color:var(--grau);
}
/* Acht Reiter auf 390 px: Gleich breite Knöpfe (49 px) sind für „Angebote“ zu schmal,
   die Namen liefen ineinander. Jeder Knopf bekommt seine Textbreite, der Rest wird
   gleichmäßig verteilt – zusammen brauchen die Namen gut 310 px. */
@media(max-width:899px){ nav.reiter button{flex:1 1 auto;min-width:0;padding:0 2px;font-size:.7rem;white-space:nowrap} }
/* Handy: vier Hauptreiter und „Mehr“. Die übrigen vier klappen als Liste über der
   Leiste auf (eigene Zeilen im selben Raster), die Hauptreiter rücken in die letzte Zeile. */
@media(max-width:899px){
  nav.reiter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  nav.reiter button{font-size:.78rem}
  nav.reiter .nav-neben{display:none}
  nav.reiter.mehr-offen .nav-neben{display:flex;grid-column:1/-1;flex-direction:row;justify-content:flex-start;
    gap:.8rem;min-height:52px;padding:0 1.25rem;font-size:.95rem;color:var(--text);border-bottom:1px solid var(--linie)}
  nav.reiter.mehr-offen > button:not(.nav-neben){grid-row:5}
  nav.reiter.mehr-offen{box-shadow:var(--schatten-3)}
  nav.reiter .nav-neben[aria-current="true"]{color:var(--gruen)}
  nav.reiter:has(.nav-neben[aria-current="true"]) .nav-mehr{color:var(--gruen);font-weight:700}
}
@media(min-width:900px){ nav.reiter .nav-mehr{display:none} }
nav.reiter button b{font-size:1.25rem;line-height:1;font-weight:400;
  padding:.2rem .95rem;border-radius:var(--r-pille);transition:background .16s ease}
nav.reiter button[aria-current="true"]{color:var(--gruen);font-weight:700}
nav.reiter button[aria-current="true"] b{background:var(--gruen-hell)}
/* Die KW-Pille ist selbst gefüllt – auf dem gefüllten offenen Reiter kehrt sie sich um. */
nav.reiter button[aria-current="true"] .nav-kw{background:var(--karte);color:var(--gruen)}
@media(min-width:900px){
  /* in der Kopfzeile: statisch, füllt den Platz zwischen Titel und Ich-Knopf */
  nav.reiter{position:static;flex:1;border-top:none;padding:0;gap:.25rem;background:none;box-shadow:none}
  /* Erst hier, wo nichts mehr fixiert im Kopf steht, ist der Milchglaseffekt gefahrlos. */
  header.kopf{background:var(--karte-weich);
    backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
  nav.reiter button{flex:none;flex-direction:row;gap:.5em;font-size:.95rem;min-height:44px;
    padding:0 .9em;border-radius:var(--r-s);transition:background .16s ease,color .16s ease}
  nav.reiter button{color:color-mix(in srgb, var(--text) 78%, var(--grau))}
  nav.reiter button:hover{background:var(--flaeche-hoch);color:var(--text)}
  nav.reiter button[aria-current="true"]{background:var(--gruen-hell);color:var(--gruen)}
  nav.reiter button b{font-size:1.05rem;padding:0;background:none !important}
  .kopf h1{flex:none}
}
@media(min-width:900px) and (max-width:1100px){
  header.kopf{gap:.4rem}
  .kopfmarke{width:38px;height:38px}
  /* Acht Reiter sind hier knapp (je nach Schrift 16–50 px zu breit): Die Leiste scrollt dann in sich,
     statt die ganze Seite zu verbreitern. */
  nav.reiter{min-width:0;gap:0;overflow-x:auto;scrollbar-width:none}
  nav.reiter button{padding:0 .35em;font-size:.8rem;gap:.25em}
  nav.reiter button b,.nav-kw{display:none}
  .kopf h1 span{display:none}
  /* Acht volle Namen brauchen die Breite: Der Schriftzug tritt hier zurück (das Zeichen
     bleibt), für Vorleseprogramme steht er weiter da. */
  .kopf h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Zwischen 1100 und 1400 px stehen acht Reiter mit Zeichen neben Marke und Knöpfen: etwas enger setzen, sonst ragt der Kopf über den Rand. */
@media(min-width:1101px) and (max-width:1399px){
  header.kopf{gap:.5rem}
  nav.reiter{min-width:0;gap:0}
  nav.reiter button{padding:0 .45em;font-size:.9rem;gap:.3em}
}
/* Bis 1260 px reicht auch das nicht: Dort fallen die Zeichen vor den Namen weg, wie unter 1100 px. */
@media(min-width:1101px) and (max-width:1259px){
  nav.reiter button .nav-symbol,nav.reiter .nav-kw{display:none}
}

/* ---------- Seitenleiste ab 1100 px ----------
   Dieselbe Kopfzeile, hochkant gestellt: ein Raster mit vier Zeilen – Markenkopf,
   Navigation, Zwischenraum, Fuß. Kein zweites Menü im HTML und kein Umhängen per JS,
   darunter liegt derselbe Knopf mit demselben aria-current wie auf dem Handy.
   1400 px und nicht 900: Die Leiste nimmt 252 px, und die fünf Tagesspalten des
   Wochenplans brauchen jede gut 210 px, sonst passt „Anleitung“ neben „Tauschen“
   nicht mehr in eine Zeile. Bei 1200 px stapelten sich die Knöpfe dreifach
   untereinander – die Leiste hatte der Woche genau die Breite genommen, die sie
   braucht. Zwischen 900 und 1400 stehen die Reiter also waagerecht oben. */
@media(min-width:1400px){
  body{padding-left:252px}
  header.kopf{
    position:fixed;top:0;left:0;bottom:0;width:252px;
    display:grid;grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto 1fr auto;
    gap:0 .6rem;align-content:start;
    padding:1.25rem .85rem calc(.9rem + env(safe-area-inset-bottom));
    padding-top:calc(1.25rem + env(safe-area-inset-top));
    border-bottom:none;border-right:1px solid var(--linie);
    background:var(--sand);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* Zeile 1: Zeichen und Name nebeneinander, darunter das Datum. */
  .kopfmarke{grid-row:1;grid-column:1;align-self:center;margin-left:.15rem}
  .kopf h1{grid-row:1;grid-column:2/-1;flex:none;font-size:1.05rem;align-self:center}
  .kopf h1 span{margin-top:.1rem;font-size:.8rem}

  /* Zeile 2: die Reiter, direkt unter der Marke und durch eine Linie abgesetzt. */
  nav.reiter{grid-row:2;grid-column:1/-1;flex-direction:column;gap:1px;
    margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--linie)}
  nav.reiter button{width:100%;justify-content:flex-start;gap:.7em;
    padding:0 .7em;min-height:44px;font-size:.94rem;border-radius:var(--r-s)}
  nav.reiter button b{width:1.15rem;text-align:center;flex:none;opacity:1}
  /* Der offene Reiter liegt als Karte auf dem Papier, mit Balken in der Hausfarbe. */
  nav.reiter button[aria-current="true"]{background:var(--karte);color:var(--gruen);
    box-shadow:inset 3px 0 0 var(--gruen), 0 0 0 1px var(--linie)}

  /* Zeile 3 ist der Zwischenraum. Die Linie darunter trennt den Fuß ab – sie hängt
     am Zwischenraum, weil sich eine Rasterzeile selbst keinen Rahmen geben kann. */
  header.kopf::after{content:"";grid-row:3;grid-column:1/-1;
    border-bottom:1px solid var(--linie);margin-bottom:.85rem}

  /* Zeile 4: Ansichtsschalter links, Kürzel rechts.
     :not(.ansicht), weil der Schalter beide Klassen trägt – ohne das schlägt die
     spätere .ich-Regel die frühere und beide Knöpfe lägen in derselben Zelle. */
  .ansicht{grid-row:4;grid-column:1/3;justify-self:start}
  .ich:not(.ansicht){grid-row:4;grid-column:3;justify-self:end}

  /* Der Inhalt darf die Breite neben der Leiste wirklich nutzen. main hatte weiter
     die 1240 px Deckelung aus der Zeit ohne Seitenleiste – auf einem 1920er Schirm
     standen dadurch rechts über 400 px leer, und der Wochenplan bekam schmalere
     Spalten, als das Fenster hergab. Gedeckelt wird jetzt bei 1600 px: Eine Zeile
     Fließtext soll trotzdem lesbar breit bleiben, und dafür sorgt zusätzlich die
     Begrenzung an den Textabsätzen selbst. */
  main{padding:1rem 2.6rem 4rem;max-width:1600px}
}
.abschnitt{display:none}
.abschnitt[data-aktiv]{display:block}
/* Ein Seitenkopf für jeden Reiter: gleich hoch, unten eine Linie, der Titel ist der
   Name aus der Navigation. Vorher hatte Heute keinen, Woche und Doku hießen anders als
   ihr Reiter, und jeder Kopf saß in einer anderen Höhe. */
.titelzeile{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1rem;
  min-height:48px;padding-bottom:.75rem;border-bottom:1px solid var(--linie)}
/* Der Seitentitel in der Hausfarbe. Er ist die einzige Überschrift je Reiter und
   damit die Stelle, an der die Farbe etwas sagt statt nur zu schmücken. */
.titelzeile h2{font-size:1.6rem;letter-spacing:-.02em;color:var(--gruen)}

/* ---------- Drucken ----------
   Drucken ist keine Planung: Es gibt aus, was geplant wurde, und endet auf Papier.
   Deshalb eine eigene Tonlage – die Tintenfarbe der Seite statt des Hausgrüns –
   und das Druckersymbol davor. Zusammen sagt der Knopf, was passiert, bevor man
   die Beschriftung liest; das ist bei einem Knopf, der einen Systemdialog öffnet,
   die halbe Miete. */
/* Jeder Druckknopf sieht gleich aus: ein gewöhnlicher Zweitknopf mit Druckersymbol.
   Gefüllt in Tinte stand er als schwarzer Block neben dem blauen Hauptknopf und
   wirkte wie eine zweite, dritte Hauptfarbe. Das Symbol sagt „Drucken“ schon.
   Im Druckdialog ist Drucken die Haupthandlung und trägt dort .wichtig wie jeder
   andere Hauptknopf. */
.knopf.drucken{gap:.55em}
/* Neben der Überschrift rückt er ans rechte Ende der Zeile. */
.titelzeile-rechts{margin-left:auto}
/* Das Symbol trägt die Schriftfarbe und wächst mit ihr. Ein festes 16 px sähe im
   kleinen Knopf zu groß und in der Fußzeile zu klein aus. */
.knopf .sym{width:1.15em;height:1.15em;flex:none;display:block}
.knopf.klein .sym{width:1.05em;height:1.05em}
/* Das Symbol steht eine Spur zurück gegenüber der Beschriftung. */
.knopf.drucken .sym{opacity:.9}

/* Ausgeben und Wegwerfen rücken von den planenden Knöpfen ab. Der Abstand
   gruppiert, sonst steht „Woche leeren“ neben „Wochenvorschlag“ wie ein
   gleichrangiger nächster Schritt. */
.werkzeuge-rechts{display:flex;gap:.5rem;flex-wrap:wrap;flex:1 1 auto}
@media(min-width:820px){ .werkzeuge-rechts{flex:0 0 auto;margin-left:auto} }
@media(max-width:819px){ .werkzeuge-rechts .knopf{flex:1 1 calc(50% - .25rem);min-width:0} }

/* Die Sofort-Material-Knöpfe drucken jeweils ein Blatt – das Symbol sagt es, bevor
   jemand einen Systemdialog vor sich hat, den er nicht erwartet hat. */
.sofortgruppe .knopf.drucken .sym{opacity:.65}

/* ---------- Knopfreihe eines Angebots im Reiter Heute ----------
   Drei Gruppen mit Luft dazwischen statt fünf gleicher Kästchen in einer Reihe.
   Der Abstand ist die ganze Gliederung: 0,4 rem innerhalb einer Gruppe, 1,3 rem
   zwischen den Gruppen. Wo Gleiches zusammensteht, muss keine Linie es einrahmen. */
.tunreihe{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.3rem}
.tungruppe{display:flex;flex-wrap:wrap;gap:.4rem}

/* Der Abstand gruppiert, die Tonlage gewichtet – zusammen sagen sie, was zu tun ist
   und was nur danebensteht: die beiden Schritte des Tages sind die Handlung und
   bleiben neutrale Knöpfe, Nachschlagen und Rückmeldung treten als .leise zurück.
   Die Abstufung steht als Auswahl statt als Klasse im Skript, weil sie sich aus dem
   Ort ergibt: Was in dieser Reihe neben den Schritten steht, ist immer Beiwerk.
   Nachschlagen ist überall dieselbe Geste und deshalb überall gleich leise – im
   Wochenplan neben „Tauschen“ genauso wie hier neben den Schritten. */
.tunreihe .echo > .knopf{
  background:none;border-color:transparent;color:var(--grau);box-shadow:none}
.tunreihe .echo > .knopf:hover{
  background:var(--flaeche-hoch);border-color:transparent;color:var(--text);
  box-shadow:none;transform:none}
/* „Anleitung“ bleibt ruhig, ist aber als Knopf erkennbar: ohne Rahmen las er sich als
   loser Text neben „Tauschen“ (Prüfung 29.10.2026). Hairline statt Fläche. */
.knopf[data-detail]{background:none;border-color:var(--rand);color:var(--text);box-shadow:none}
.knopf[data-detail]:hover{background:var(--flaeche-hoch);border-color:var(--gruen);color:var(--gruen);
  box-shadow:none;transform:none}

/* Die beiden Schritte des Tages: durchgeführt, dokumentiert. Kreis heißt offen,
   Haken heißt erledigt – das steht vor der Beschriftung und ist auch dann zu lesen,
   wenn jemand Farben schlecht unterscheidet. Vorher sagte das nur die Füllfarbe. */
.schritt{gap:.45em}
.schritt i{font-style:normal;font-size:.95em;line-height:1;opacity:.7}
.schritt.fertig{background:var(--gruen-hell);border-color:var(--gruen);color:var(--gruen)}
.schritt.fertig i{opacity:1;font-weight:800}
.schritt.fertig:hover{background:var(--gruen);color:var(--auf-gruen)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .schritt.fertig:hover{color:#11161b}
}

/* Die Rückmeldung ist ein Paar und wird als eines gezeichnet: zwei Hälften eines
   Schalters, nicht zwei Knöpfe, die zufällig nebeneinanderstehen. Sie tritt zurück –
   sie ist die freiwilligste der drei Handlungen. */
.echo{gap:0}
.echo .knopf{border-radius:0;color:var(--grau);font-weight:600;
  background:var(--karte);border-color:var(--rand)}
.echo .knopf:first-child{border-radius:var(--r-s) 0 0 var(--r-s)}
.echo .knopf:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.echo .knopf + .knopf{margin-left:-1px}
/* Beim Überfahren nach vorn holen, sonst deckt der Nachbar die eigene Kante zu. */
.echo .knopf:hover{position:relative;z-index:1;color:var(--gruen)}
.echo .knopf:last-child:hover{color:var(--rot);border-color:var(--rot);background:var(--karte)}
/* Ist die Rückmeldung schon gegeben, steht dort ein einzelner Knopf – der bekommt
   seine Rundung zurück und sagt in Grün, dass etwas angekommen ist. */
.echo-zurueck{border-radius:var(--r-s) !important;color:var(--gruen);border-color:var(--gruen)}

/* ---------- Tagesstreifen im Reiter Heute ----------
   Fünf Betreuungstage nebeneinander statt zwei Pfeile um einen Titel. Der gezeigte
   Tag ist gefüllt, der heutige trägt einen Punkt – zwei verschiedene Aussagen,
   deshalb zwei verschiedene Zeichen und nicht zweimal dieselbe Farbe.
   Die Pfeile springen eine Woche; für den einzelnen Tag ist der Streifen da. */
.tagwahl{display:flex;align-items:stretch;gap:.4rem;margin-bottom:.5rem}
.tagwahl .pfeil{flex:none;width:40px;border:1px solid var(--knopf-rand);border-radius:var(--r-s);
  background:var(--knopf-flaeche);color:var(--gruen);font-size:1.2rem;line-height:1}
.tagwahl .pfeil:hover{border-color:var(--gruen);color:var(--gruen)}
.tagwahl-tage{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.4rem;min-width:0}
.tagchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  min-height:56px;padding:.35rem .2rem;border:1px solid var(--knopf-rand);border-radius:var(--r-s);
  background:var(--knopf-flaeche);color:var(--knopf-text);cursor:pointer;position:relative;
  transition:border-color .16s ease, background .16s ease}
.tagchip b{font-size:.9rem;font-weight:700;letter-spacing:.02em}
.tagchip span{font-size:.8rem;color:var(--grau);font-variant-numeric:tabular-nums}
.tagchip b{color:var(--text)}
.tagchip:hover{border-color:var(--rand)}
/* Der heutige Tag: ein Punkt oben. Er sagt „von hier aus wird gerechnet“ und ist
   auch dann zu sehen, wenn gerade ein anderer Tag gewählt ist. */
.tagchip.heute::before{content:"";position:absolute;top:.3rem;right:.35rem;
  width:5px;height:5px;border-radius:50%;background:var(--gruen)}
/* Der gezeigte Tag: gefüllt. Nur einer kann es sein, deshalb die kräftigste Marke. */
/* `b` erbt die Farbe nicht von selbst: Weiter unten steht `.tagchip b{color:var(--text)}`
   für die nicht gewählten Chips, und das schlägt die Vererbung. Ohne diese Zeile stand
   der Wochentag des gewählten Tages dunkel auf dunkelgrün – ein Kontrast von 2,07
   statt der geforderten 3. Gemessen, nicht geschätzt: Auf dem Bild sah es hell aus. */
.tagchip.gewaehlt{background:var(--gruen);border-color:var(--gruen);color:var(--auf-gruen)}
/* inherit, nicht #fff: Im Dunkeln ist der gewählte Chip hellgrün und trägt dunkle
   Schrift (#11161b) – ein festes Weiß hätte dort 1,97 statt der geforderten 3
   ergeben. So nimmt `b` in beiden Ansichten die Farbe des Chips. */
.tagchip.gewaehlt b{color:inherit}
.tagchip.gewaehlt span{color:rgba(255,255,255,.78)}
.tagchip.gewaehlt::before{background:#fff}
:root[data-theme="dark"] .tagchip.gewaehlt{color:#11161b}
:root[data-theme="dark"] .tagchip.gewaehlt span{color:rgba(22,18,13,.7)}
:root[data-theme="dark"] .tagchip.gewaehlt::before{background:#11161b}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tagchip.gewaehlt{color:#11161b}
  :root:not([data-theme="light"]) .tagchip.gewaehlt span{color:rgba(22,18,13,.7)}
  :root:not([data-theme="light"]) .tagchip.gewaehlt::before{background:#11161b}
}
.tagchip:disabled{opacity:.4;pointer-events:none}
/* Gezeigt wird eine andere als die laufende Woche: Der Chip trägt dasselbe Orange wie
   der Rahmen um den Plan. Die Klasse setzte app.js schon länger, nur eine Regel dazu
   fehlte – man sah den Rahmen, aber nicht, welche KW er meint. Innenschatten statt
   dickerem Rand, damit der Chip nicht gegen seine Nachbarn verrutscht. */
.tagchip.naechster{border-color:var(--fest);box-shadow:inset 0 0 0 1px var(--fest);
  background:color-mix(in srgb,var(--fest) 18%,var(--knopf-flaeche))}
.tagchip.naechster span{color:var(--text)}
/* Der Wochenstreifen benutzt dieselben Klassen wie der Tagesstreifen – bis auf die
   Chipbreite: „KW 36" braucht mehr Platz als „Mo", und fünf Wochen sollen auf dem
   Handy nicht auf zwei Zeilen umbrechen. */
.wochenwahl .tagchip b,.abschnitt[data-name="heute"] .tagwahl .tagchip b{font-size:.82rem}
/* „KW“ ist Beschriftung, nicht Inhalt: Auf schmalen Handys reicht die Zahl, sonst brach
   „KW 43“ mit Schloss in zwei Zeilen. Das aria-label nennt die Kalenderwoche weiter voll. */
.tagchip b .kw-vor{font-size:inherit;color:inherit}
.tagchip b{white-space:nowrap}
.tagchip .sym-schloss{width:.75em;height:.75em;margin-left:.2em;vertical-align:-.05em}
@media (max-width:480px){ .wochenwahl .kw-vor{display:none} }
/* Die Zeitangabe – ein Bauteil für alle Reiter: fett, um welchen Zeitraum es geht
   („Donnerstag · heute“, „KW 36 · diese Woche“), dahinter grau das Datum. Vorher war
   sie auf der Heute-Seite eine große Georgia-Zeile unter dem Streifen und in Woche
   und Material eine kleine graue Angabe neben der Überschrift – dieselbe Auskunft in
   zwei Schriften und zwei Größen. Neben einer Überschrift steht sie in derselben
   Zeile, auf der Heute-Seite (die keine Überschrift hat) in einer eigenen. */
.zeitangabe{margin:0 0 1.1rem;font-size:.92rem;color:var(--grau)}
.titelzeile > .zeitangabe{margin:0}
.zeitangabe b{font-weight:650;color:var(--text);margin-right:.3rem}
/* Im Reiter Woche ist der Zeitraum genauso wichtig wie die KW – beides fett. */
#wocheSpanne{font-weight:650;color:var(--text)}

/* ---------- Wochenplan ---------- */
.wochenkopf{
  display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  /* Flach und nur von einer Linie gefasst. Der Verlauf hier war die zweite
     eingefärbte Fläche über der Woche und hat mit den Tageskarten um Aufmerksamkeit
     gestritten – dabei ist das hier nur eine Beschriftung mit zwei Pfeilen. */
  background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--r);padding:.55rem;
  box-shadow:var(--schatten-1);
}
.wochenkopf .pfeil{min-width:48px;min-height:48px;border-radius:var(--r-s);font-size:1.4rem;color:var(--gruen)}
.wochenkopf .mitte{flex:1;text-align:center;min-width:0}
.wochenkopf .mitte b{display:block;font-size:1.1rem}
.wochenkopf .mitte span{font-size:.82rem;color:var(--grau)}
.werkzeuge{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem}
/* Auf dem Handy zwei Knöpfe je Zeile, damit die Liste nicht die halbe Seite füllt. */
.werkzeuge .knopf{flex:1 1 calc(50% - .25rem);min-width:0;padding:0 .5em;font-size:.94rem}
@media(min-width:700px){ .werkzeuge .knopf{flex:0 0 auto;padding:0 1.15em;font-size:1rem} }

.woche{display:grid;gap:.9rem}
/* Nicht die laufende Woche: der ganze Plan orange gerahmt und leicht getönt – sichtbar
   auch, wenn der Wochenstreifen weggescrollt ist. Nur am Bildschirm, nicht im Druck. */
.wochen-abstand{display:inline-block;margin-left:.35rem;padding:.05rem .55rem;border-radius:999px;
  border:1px solid var(--fest);background:color-mix(in srgb,var(--fest) 18%,var(--karte));
  color:var(--text);font-size:.82rem;font-weight:650;white-space:nowrap}
@media screen{
  .abschnitt[data-name="woche"].andere-woche #wochenGitter{
    outline:2px solid var(--fest);outline-offset:.4rem;border-radius:.6rem}
}
@media(min-width:760px){
  .woche{grid-template-columns:repeat(5,1fr);gap:.75rem}
  /* min-width:0 an den Tageskarten. Rasterfelder sind von Haus aus mindestens so
     breit wie ihr Inhalt – ohne das kann eine Spalte nicht unter die Breite ihres
     längsten Wortes schrumpfen, und bei fünf Spalten in einem schmalen Fenster
     stand der Text über der Kartenkante im Nachbartag. Aufgefallen ist es erst mit
     der Seitenleiste, die 252 px von der Breite nimmt. */
  .woche > .tag{min-width:0}
  /* Und dasselbe eine Ebene tiefer: Kopf, Schwerpunkt und Zeitfenster sind selbst
     Rasterfelder der Tageskarte (subgrid) und erben dieselbe Mindestbreite. */
  .woche > .tag > *{min-width:0}
  /* Die Tage sollen zeilenweise auf gleicher Höhe liegen – Kopf, Schwerpunkt,
     Vormittag, Nachmittag. Mit subgrid übernehmen die Tageskarten die Zeilen des
     Wochengitters; ohne subgrid bleibt es beim bisherigen Verhalten. */
  @supports (grid-template-rows: subgrid){
    /* Jede Zeile so hoch wie ihr höchster Tag, nichts wird gestreckt. Mit 1fr bekamen
       die Zeitfenster den ganzen Rest des Bildschirms – als Leerraum unter den Knöpfen. */
    .woche{grid-template-rows:auto repeat(var(--slotzeilen,2),auto);align-content:start}
    /* .woche > .tag statt .tag: die Grundregel steht weiter unten in der Datei
       und würde display:flex sonst zurücksetzen. */
    .woche > .tag{display:grid;grid-template-rows:subgrid;grid-row:span var(--zeilen,4)}
  }
}
.tag{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--schatten-1);display:flex;flex-direction:column;
  transition:box-shadow .2s ease, border-color .2s ease}
/* Kein Anheben mehr beim Überfahren: Fünf Karten nebeneinander, von denen eine
   springt, sobald der Zeiger vorbeikommt, macht die Woche unruhig. Die Linie wird
   kräftiger, das reicht als Antwort. */
@media(min-width:760px){.tag:hover{border-color:var(--rand);box-shadow:var(--schatten-2)}}
/* Der heutige Tag hebt sich durch den Ring, nicht durch einen dickeren Rahmen:
   2.5px Rahmen verschoben die Karte gegenüber ihren vier Nachbarn um einen Pixel. */
.tag.heute{border-color:var(--gruen);box-shadow:var(--ring),var(--schatten-2)}
/* Der Tageskopf trägt keine eigene Farbe mehr: Er ist Teil der Karte und wird von
   einer Linie abgesetzt, nicht von einer Fläche. Fünf eingefärbte Köpfe nebeneinander
   waren die auffälligste Sache auf der Seite – und die mit dem geringsten Inhalt. */
.tag-kopf{padding:.85rem .95rem;background:none;display:flex;
  align-items:baseline;gap:.5rem;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.tag-kopf b{font-size:1.05rem}
.tag-kopf > span:last-child{font-size:.85rem;color:var(--grau);margin-left:auto;
  font-variant-numeric:tabular-nums}
/* Heute: getönt statt vollflächig grün, Schrift in Grün statt Weiß. Den Ausschlag
   gibt ohnehin der Ring um die ganze Karte – der grüne Balken obendrauf war doppelt
   gemoppelt und hat die Karte optisch gekippt. */
.tag.heute .tag-kopf{background:var(--gruen-hell)}
.tag.heute .tag-kopf b{color:var(--gruen)}
.heute-marke{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  background:none;color:var(--gruen);border:1px solid var(--gruen);
  padding:.1em .45em;border-radius:var(--r-pille)}
/* Beschriftungszeile, keine eigene Fläche – Großbuchstaben und Sperrung machen sie
   auch ohne Hintergrund als Etikett kenntlich. Sitzt jetzt im Kopf jedes einzelnen
   Zeitfensters statt einmal für den ganzen Tag: Vormittag und Nachmittag haben
   seit der Rotation je einen eigenen Schwerpunkt, keinen gemeinsamen mehr.
   Kein Flexkasten: Als Flexkasten rutschte der farbige Punkt bei einem langen
   Bereichsnamen auf eine eigene Zeile und stand allein über dem Text. Als Fließtext
   mit einem inline-Punkt davor bleibt er am ersten Wort kleben und der Rest bricht
   normal um. */
.slot-schwerpunkt{font-size:.8rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau);line-height:1.3}
.slot-schwerpunkt .punkt{margin-right:.45rem;vertical-align:.05em}
.slot{padding:.75rem .9rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
/* Vormittag und Nachmittag sind zwei getrennte Blöcke, keine Fortsetzung – getrennt
   von einer Linie, nicht von einer Fläche.
   Vorher lag hier ein 3-px-Balken plus eingefärbter Hintergrund. Der stammt aus der
   Zeit, als der Nachmittag in Seitenfarbe stand und wie ein Loch in der Karte aussah;
   die eingefärbte Fläche war die Antwort darauf. In Kartenfarbe stellt sich die Frage
   nicht mehr, und die Überschrift „Nachmittag“ sagt ohnehin, was hier anfängt. */
 /* Eine Haarlinie war zu wenig: Vormittag und Nachmittag sind zwei getrennte Blöcke
    im Tag, keine zwei Absätze. Eine kräftige Linie in Randfarbe plus etwas mehr Luft
    darüber trennt sie, ohne dass eine der beiden Hälften eine eigene Farbfläche
    bekommt – eingefärbt sah der Nachmittag früher aus wie ein Sonderfall. */
.slot + .slot{border-top:2px solid var(--rand);margin-top:.2rem;padding-top:.85rem}
.slot-titel{font-size:.8rem;font-weight:700;color:var(--grau);text-transform:uppercase;letter-spacing:.1em}
/* Titel, Balken und Zeitzeile bilden einen Kopf gleicher Höhe über alle fünf Tage.
   Dafür sorgen zwei Dinge: Der Kopf wird immer vollständig gezeichnet, auch im leeren
   Zeitfenster ("0 Min von 90 Min · 90 Min frei"), und die Zeitzeile hat zwei Zeilen
   fest reserviert. Ohne das schob ein Umbruch – "· 30 Min frei" rutscht in Zeile zwei –
   alles darunter eine Zeile tiefer, und die Tage standen nicht mehr auf einer Höhe. */
.slot-kopf{display:flex;flex-direction:column;gap:.5rem}
.eintrag{display:flex;flex-direction:column;gap:.35rem;width:100%;text-align:left;
  border-top:3px solid var(--kat,var(--linie));padding-top:.7rem;min-height:52px;justify-content:center}
/* Genau zwei Zeilen: kürzere Titel füllen auf, längere werden abgeschnitten.
   Sonst steht die Knopfreihe in jeder Tagesspalte auf einer anderen Höhe.
   Der volle Titel hängt als title-Attribut daran und steht auf der Detailseite. */
.eintrag b{font-size:1.02rem;font-weight:650;line-height:1.3;min-height:2.6em;overflow-wrap:anywhere;text-align:center;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.eintrag.erledigt b{opacity:.6}
.eintrag.erledigt b::before{content:"✓ ";color:var(--kognition);font-weight:800}
.eintrag.ausgefallen b{opacity:.6;text-decoration:line-through}
/* Ziehen als Zusatzweg zum Tauschen-Knopf: nur auf Geräten mit Maus sichtbar
   gemacht (grab-Cursor), auf Touch bleibt der Knopf der einzige Weg. */
.eintrag{cursor:grab}
.eintrag.wird-gezogen{opacity:.4}
.slot.dropziel-aktiv{outline:2px dashed var(--gruen);outline-offset:-2px;border-radius:var(--r-s)}
/* Monatsplan: Angebot auf ein offenes Feld ziehen (verschiebenNach in app.js). */
.monat-eintrag.wird-gezogen{opacity:.4}
@media (pointer:fine){.monat-eintrag[draggable="true"]{cursor:grab}}
.monat-offen.dropziel-aktiv{outline:2px dashed var(--gruen);outline-offset:-2px;background:var(--gruen-hell)}
.leer{min-height:52px;display:flex;align-items:center;justify-content:center;width:100%;
  border:1px dashed var(--rand);border-radius:var(--r-s);color:var(--grau);font-size:.9rem}
/* Zwei gleich breite Knöpfe plus schmales ⋯ – auch in einer engen Tagesspalte. */
/* Raster statt Flexkasten: Ein Flexkasten bricht um, sobald die drei Knöpfe nicht
   mehr nebeneinanderpassen – und umgebrochen ist es ausgerechnet das schmale ✕, das
   allein in einer zweiten Zeile landet und die Karte um eine Zeile höher macht als
   ihre vier Nachbarn. Ein Raster mit drei festen Spalten kann nicht umbrechen. */
.slot-knoepfe{display:grid;grid-template-columns:1fr 1fr auto;gap:.4rem}
@media(max-width:899px){.eintrag-block .slot-knoepfe .mehr-knopf{min-width:44px}}
.tagwahl-klein .pfeil{min-height:44px}
/* Angebot und seine Knopfreihe gehören zusammen und werden nie auseinandergezogen.
   Früher drückte margin-top:auto die letzte Knopfreihe an den Fuß des Zeitfensters,
   damit die Reihen über alle fünf Tage in einer Linie stehen. Das hielt nur, solange
   jeder Tag gleich viele Angebote hatte: Sobald ein Tag ein zweites bekam, wuchs die
   subgrid-Zeile in allen Spalten mit und riss dort Angebot und Knöpfe weit auseinander.
   Jetzt stehen die Blöcke oben, der freie Platz sammelt sich unten im Zeitfenster.
   Weil .eintrag feste Mindesthöhen hat, liegen die Blöcke von selbst auf einer Linie. */
.eintrag .bildchen{display:block;margin:0 auto;width:75%;aspect-ratio:1;object-fit:cover;border-radius:.4rem}
.blatt-bild{display:block;width:100%;max-width:22rem;aspect-ratio:1;object-fit:cover;margin-top:1.5rem;
  border-radius:.75rem;border:1px solid var(--linie);box-shadow:0 1px 3px rgba(0,0,0,.08),0 6px 16px rgba(0,0,0,.06)}
.heute-text{min-width:0;flex:1}
.eintrag-block{display:flex;flex-direction:column;gap:.5rem}
/* Umbrechen statt abschneiden, wenn es doch einmal eng wird: „A…“ und „Ta…“ waren
   nicht zu lesen, und ein Knopf, den man raten muss, ist keiner. Mit der Seitenleiste
   erst ab 1400 px passen die beiden benannten Knöpfe aber wieder nebeneinander. */
.slot-knoepfe .knopf{min-height:44px;font-size:.82rem;padding:0 .35em;
  min-width:0;
  /* Statt abzuschneiden darf die Beschriftung im Knopf umbrechen. Sie tut es erst,
     wenn die Spalte schmaler wird als das Wort – dann ist ein Knopf mit zwei Zeilen
     immer noch besser als „A…“ oder ein ✕ in der nächsten Zeile. */
  white-space:normal;line-height:1.2;hyphens:auto}
/* Das ⋯ bleibt schmal – es ist ein Zeichen, kein Wort, und soll die
   beiden benannten Knöpfe nicht auf eine zweite Zeile drängen. */
.slot-knoepfe .mehr-knopf{min-width:2.2rem;padding:0 .45em;font-size:1.1rem;letter-spacing:.05em}
/* Verschieben und Entfernen: kleines Menü am ⋯-Knopf (Lage setzt app.js). */
.mehr-menue{position:fixed;inset:auto;margin:0;padding:.35rem;min-width:11rem;
  display:none;flex-direction:column;gap:.25rem;
  background:var(--karte);color:var(--text);border:1px solid var(--rand);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06)}
.mehr-menue:popover-open{display:flex}
.mehr-menue .knopf{justify-content:flex-start;width:100%;border-color:transparent;background:none;box-shadow:none}
.mehr-menue .knopf:hover{background:var(--flaeche);transform:none}
.mehr-menue .knopf.gefahr{color:var(--rot)}
.mehr-menue .knopf.gefahr:hover{background:color-mix(in srgb,var(--rot) 9%,var(--karte))}
.slot-knoepfe.frei{grid-template-columns:1fr}
/* Geteilte Slots haben keinen Anleitung-Knopf (der Titel öffnet sie); ohne diese
   Zeile rückte ⇄ in die freie 1fr-Spalte und wurde so breit wie „Tauschen“. */
.slot-knoepfe:not(.frei):not(:has([data-detail])){grid-template-columns:1fr auto}
.zeitbalken{height:4px;border-radius:2px;background:var(--linie);overflow:hidden}
.zeitbalken span{display:block;height:100%;background:var(--gelb);border-radius:2px}
.zeitbalken.voll span{background:var(--kognition)}
/* Zwei Zeilen hoch reserviert: "· 30 Min frei" bricht in schmalen Spalten um,
   ohne feste Höhe säße dann alles darunter eine Zeile tiefer als in den Nachbartagen. */
.zeitzeile{font-size:.8rem;color:var(--grau);margin-top:-.2rem;line-height:1.35;min-height:2.7em}
.bilanz{margin:.6rem 0 1rem}
.bilanz-balken{height:10px;border-radius:5px;background:var(--rot);overflow:hidden}
.bilanz-balken span{display:block;height:100%;background:var(--kognition)}
.bilanz-zahlen{margin-top:.4rem;font-weight:650}
.verlauf li{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  padding:.45rem 0;border-bottom:1px solid var(--linie)}
.verlauf li:last-child{border-bottom:none}
.verlauf .daumen{flex:none}
.verlauf .wann{color:var(--grau);font-size:.85rem;margin-left:auto;font-variant-numeric:tabular-nums}
.verlauf .notiztext{flex:1 0 100%;color:var(--grau);font-size:.9rem}

/* Der Schalter für die Mittagsgruppe steht in der Titelzeile. Als Flexkasten, damit
   Knopf und Erklärung nebeneinander bleiben; die Titelzeile bricht ihn als Ganzes um,
   wenn der Platz nicht reicht. margin-left:auto schiebt ihn ans rechte Ende. */
/* Der Schalter für die Mittagsgruppe steht am rechten Ende der Werkzeugleiste,
   abgesetzt von den Knöpfen, die die Woche belegen. Als Flexkasten, damit Knopf und
   Zeitangabe nebeneinander bleiben. */
/* Nicht ganz an den rechten Rand: Am Fensterrand geklebt stand der Schalter weit weg
   von den Knöpfen, zu denen er gehört, und sah aus wie eine zweite Werkzeuggruppe.
   Ein fester Abstand setzt ihn ab, ohne ihn abzuhängen. */
.zusatzzeile{display:flex;align-items:center;gap:.5rem;margin-left:4.5rem;margin-right:auto}
/* Auf dem Handy die eigene Zeile, die es vorher war – in die Knopfreihe gequetscht
   bricht schon die Beschriftung um. */
@media(max-width:819px){ .zusatzzeile{flex:1 0 100%;margin-left:0} }
/* Und dort nicht auf halbe Zeilenbreite gezogen wie die Knöpfe daneben: Der Schalter
   hat seine Zeitangabe neben sich, kein zweiter Knopf. */
@media(max-width:819px){ .zusatzzeile .knopf{flex:0 0 auto} }
/* Themenwochen sind selten – ein paar im Jahr –, aber besonders, und sollen genauso
   wirken: ein sattes Band statt der sonst zurückhaltenden Optik der Seite. Gleicher
   Aufbau wie .rezept-link (Verlauf über die Bereichsfarbe, weiße Schrift), nur mit
   dem eigenen Ton --fest statt einer Bereichsfarbe. Steht nur da, wenn #wocheThema
   für die angezeigte Woche einen Wert hat – sonst bleibt [hidden]. */
.themenwoche-band{margin:.7rem 0;padding:.8rem 1.1rem;border-radius:var(--r-l);
  background:color-mix(in srgb,var(--fest) 9%,var(--karte));color:var(--text);
  border:1px solid color-mix(in srgb,var(--fest) 35%,var(--linie));font-family:var(--titel);
  font-size:1.05rem;font-weight:650;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.themenwoche-marke{font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:.3em .7em;
  border-radius:var(--r-pille);background:var(--fest);color:var(--karte)}

/* Das Wochenthema und der Pflichtstand stehen direkt neben der Kalenderwoche. */
/* Als Marke wie „ungeprüft“ (Variante B, gewählt 28.10.2026): gesetzt eine hellblaue
   Pille, leer eine gestrichelte „+ Wochenthema“. Die Beschriftung bleibt für Vorleseprogramme. */
.woche-thema-feld{position:relative;flex:0 1 auto;min-width:0;align-self:center}
.woche-thema-feld .beschriftung{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.woche-thema-feld .feld{field-sizing:content;min-width:8rem;max-width:22rem;min-height:0;height:36px;
  padding:0 .9rem;border-radius:var(--r-pille);font-size:.92rem;font-weight:700;color:var(--gruen);
  background:var(--gruen-hell);border:1px solid color-mix(in srgb,var(--gruen) 30%,var(--linie))}
.woche-thema-feld .feld:placeholder-shown{background:transparent;border-style:dashed;border-color:var(--rand)}
.woche-thema-feld .feld::placeholder{color:var(--grau);font-weight:600;opacity:1}
.woche-thema-feld .feld:hover{border-color:var(--gruen)}
.woche-thema-feld .feld:focus{border-style:solid;border-color:var(--gruen);background:var(--karte)}
.wochenstatus{display:flex;align-items:center;gap:.45rem;flex:0 0 auto;
  min-height:44px;padding:.45rem .65rem;text-align:left;font-size:.84rem;font-weight:650;
  color:var(--gruen);background:var(--gruen-hell);border:1px solid var(--gruen);
  border-radius:var(--r-s);cursor:pointer}
.wochenstatus::before{content:"✓";display:grid;place-items:center;flex:none;
  width:1.35rem;height:1.35rem;border-radius:50%;background:var(--gruen);color:var(--auf-gruen);font-size:.8rem}
.wochenstatus::after{content:"↗";margin-left:auto;font-size:1.15rem;line-height:1}
.wochenstatus:hover{background:var(--flaeche-hoch)}
.wochenstatus:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.wochenstatus.warnt{color:var(--rot);background:color-mix(in srgb,var(--rot) 8%,var(--karte));border-color:var(--rot)}
.wochenstatus.warnt::before{content:attr(data-offen);background:var(--rot)}
/* Im Planen-Menü steht die Zeile so breit wie die anderen Einträge. */
.planmenue-liste .wochenstatus{width:100%}
/* Offene Pflichten als rote Zahl am geschlossenen Planen-Knopf. */
.plan-offen{display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;padding:0 .3rem;margin-left:.1rem;
  border-radius:var(--r-pille);background:var(--rot);color:#fff;font-size:.74rem;font-weight:700}
@media(max-width:700px){.abschnitt[data-name="woche"] > .titelzeile .woche-thema-feld{flex:0 1 auto;max-width:100%}}
.wochen-dialog{width:min(760px,94vw);max-width:min(760px,94vw);max-height:85dvh;
  overflow-y:auto;padding:0 1.2rem 1.2rem;border:1px solid var(--linie);
  border-radius:var(--r-l);background:var(--karte);color:var(--text);box-shadow:var(--schatten-3)}
.wochen-dialog::backdrop{background:rgba(0,0,0,.45)}
.wochen-dialog-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:start;
  justify-content:space-between;gap:1rem;padding:1.2rem 0 .9rem;margin-bottom:1rem;
  border-bottom:1px solid var(--linie);background:var(--karte)}
.wochen-dialog-kopf h3{font-size:1.35rem;color:var(--gruen)}
.wochen-dialog-kopf p{margin:.2rem 0 0}
.wochen-dialog-kopf form{flex:none}
.wochenfuss-inhalt{display:grid;gap:.9rem;align-items:start}
.wochenfuss-inhalt > :empty{display:none}
.wochenfuss-inhalt > #rotationHinweis{margin:0}
@media(min-width:700px){.wochenfuss-inhalt{grid-template-columns:1fr 1fr}}
.wochenfuss-inhalt > #verwandtHinweis,.wochenfuss-inhalt > #poolHinweis{grid-column:1/-1}
.wochen-dialog-karte{height:100%;padding:1rem;border:1px solid var(--linie);
  border-radius:var(--r-s);background:var(--flaeche)}
.wochen-dialog-karte.hat-offenes{border-color:var(--rot)}
.wochen-dialog-karte h4{font-size:1.03rem;color:var(--text);margin:0 0 .3rem}
.wochen-dialog-karte p{font-size:.9rem;line-height:1.45;color:var(--grau);margin:0 0 .8rem}
.wochen-pflichtliste{display:grid;gap:.1rem}
.wochen-pflichtliste li{display:flex;align-items:start;gap:.55rem;padding:.5rem 0;
  border-top:1px solid var(--linie)}
.wochen-pflichtliste li span:last-child{min-width:0}
.wochen-pflichtliste strong,.wochen-rotationstag strong{display:block;font-size:.88rem}
.wochen-pflichtliste small{display:block;margin-top:.1rem;color:var(--grau);line-height:1.35}
.wochen-pflichtliste .offen small{color:var(--rot)}
.wochen-pflichtzeichen{display:grid;place-items:center;flex:none;width:1.25rem;height:1.25rem;
  border-radius:50%;background:var(--gruen-hell);color:var(--gruen);font-weight:800;font-size:.8rem}
.wochen-pflichtliste .offen .wochen-pflichtzeichen{background:color-mix(in srgb,var(--rot) 12%,var(--karte));color:var(--rot)}
.wochen-rotationliste{display:grid;gap:.45rem}
.wochen-rotationstag{display:grid;gap:.1rem;padding:.45rem .6rem;border:1px solid var(--linie);
  border-radius:var(--r-s);background:var(--karte)}
.wochen-rotationstag span{font-size:.82rem;color:var(--grau)}

/* ---------- Wochenplan auf einen Bildschirm ---------- */
/* Am Rechner soll die geplante Woche ohne Scrollen dastehen: fünf Tage nebeneinander
   nützen wenig, wenn der Freitagnachmittag unter dem Fensterrand liegt. Gekürzt wird
   nur, was doppelt oder großzügig war – kein Inhalt fällt weg.
   Nur im Reiter Woche: Im Material-Reiter stehen dieselben Bausteine, dort ist eine
   lange Liste normal und Scrollen kein Fehler. */
/* Auf dem Handy stand der Druckknopf in einer eigenen Zeile unter Überschrift und
   Zeitangabe – eine ganze Knopfhöhe für einen Knopf, der einmal je Woche gedrückt
   wird. Er rückt neben die Überschrift ans rechte Ende; Zeitangabe und Sofort-Band
   gehen dafür in die Zeilen darunter. Sie sind kleiner als ein Knopf, und die
   Reihenfolge stimmt weiter: erst worum es geht, dann was man mitnimmt. Passt der
   Knopf neben der Überschrift nicht (sehr schmale Geräte), greift der Umbruch wie
   bisher. */
@media(max-width:899px){
  /* Handy: Bild klein neben dem Titel wie bei .slot.mehrere – mit großem Bild war jedes
     Zeitfenster gut 400 px hoch, die Woche zehn Bildschirme lang. */
  .woche .eintrag{flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem;min-height:0}
  .woche .eintrag .bildchen{width:4.5rem;height:4.5rem;margin:0;flex:none}
  .woche .eintrag b{min-height:0;text-align:left;overflow-wrap:break-word;hyphens:auto}
  .titelzeile > .zeitangabe{order:1;flex:1 0 100%}
  .titelzeile > .knopf.drucken{margin-left:auto}
  .abschnitt[data-name="woche"] > .titelzeile .woche-thema-feld{order:2;flex:0 1 auto}
  .abschnitt[data-name="woche"] > .titelzeile .wochenstatus{order:3;flex:1 1 auto}
}
/* Tablet hochkant (760–899 px): fünf Spalten à gut 140 px. Bild neben Titel ließ dem
   Titel drei Buchstaben („Wa s…“), die Knöpfe brachen in Silben. Hier stehen Bild und
   Titel untereinander. Der Knopfbereich ist nur gut 110 px breit: „Anleitung“ und „…“
   teilen sich die erste Zeile, „Tauschen“ bekommt die zweite ganz. */
@media(min-width:760px) and (max-width:899px){
  .woche .eintrag{flex-direction:column;align-items:stretch;gap:.4rem}
  .woche .eintrag .bildchen{width:100%;height:auto;aspect-ratio:4/3}
  .woche .eintrag b{font-size:.9rem;hyphens:manual}
  .woche .slot-knoepfe{grid-template-columns:1fr auto}
  .woche .slot-knoepfe [data-waehlen]{grid-column:1/-1;grid-row:2}
  .woche .slot-knoepfe .knopf{hyphens:none;padding:0 .2em;font-size:.8rem}
  .woche .slot-knoepfe .mehr-knopf{min-width:44px;width:44px}
}

@media(min-width:900px){
  main:has(> .abschnitt[data-name="woche"][data-aktiv]){padding-top:1rem;padding-bottom:.75rem}
  main:has(> .abschnitt[data-name="woche"][data-aktiv]){
    height:calc(100dvh - var(--kopfh,0px));display:flex;flex-direction:column}
  .abschnitt[data-name="woche"][data-aktiv]{display:flex;flex-direction:column;flex:1;min-height:0}
  .abschnitt[data-name="woche"] #wochenGitter{flex:1;min-height:0}
  .abschnitt[data-name="woche"] > .titelzeile{align-items:center;gap:.5rem}
  .abschnitt[data-name="woche"] > .titelzeile .titelzeile-rechts{margin-left:auto}
  .abschnitt[data-name="woche"] > .titelzeile .zeitangabe{white-space:nowrap}
  .abschnitt[data-name="woche"] > .titelzeile .knopf{min-height:44px;padding:0 .8em;font-size:.94rem}
  .abschnitt[data-name="woche"] > .titelzeile .knopf.drucken{padding:0 .5em;font-size:.88rem}
  .abschnitt[data-name="woche"] > .titelzeile .zeitangabe{font-size:.92rem}
  .abschnitt[data-name="woche"] .zusatzzeile{margin-left:auto;margin-right:0}
  /* Etwas Luft zurück, nachdem die doppelte Wochenangabe unter dem Streifen weg ist:
     Der Kopf wirkte gequetscht – Überschrift, drei Knopfreihen und der Streifen
     standen fast ohne Abstand aufeinander. Der Abstand zum oberen Seitenrand bleibt
     dabei wie in jedem anderen Reiter (main-padding-top), nur darunter kommt Luft dazu. */
  .abschnitt[data-name="woche"] > .titelzeile{margin-bottom:.25rem;padding-bottom:.2rem;min-height:0}
  /* Wochenthema, Schwerpunkte und Planen als Gruppe in die Mitte: Links hingen sie
     direkt an der KW, und die Zeile wirkte überladen. Zwei automatische Abstände –
     vor der Gruppe und vor „Drucken“ – teilen den freien Platz gleich auf. */
  .abschnitt[data-name="woche"] > .titelzeile .woche-thema-feld{margin-left:auto}
  .abschnitt[data-name="woche"] > .titelzeile #druckMenue{margin-left:auto}
  .abschnitt[data-name="woche"] .zusatzzeile{gap:.25rem;font-size:.78rem}
  .abschnitt[data-name="woche"] .wochenwahl{margin-bottom:1.05rem}
  /* Tages- und Wochenstreifen gleich hoch: dieselben Chips, dieselbe Größe in beiden Reitern. */
  .abschnitt[data-name="woche"] .wochenwahl .tagchip,
  .abschnitt[data-name="heute"] .tagwahl .tagchip{min-height:44px;padding:.15rem}
  .abschnitt[data-name="woche"] .themenwoche-band{margin:.2rem 0;padding:.25rem .6rem;
    border-radius:var(--r-s);box-shadow:none;font-size:.85rem;display:none}
  .abschnitt[data-name="woche"] .themenwoche-marke{font-size:.68rem;padding:.15em .45em}

  .woche{gap:.55rem}
  /* Unten weniger Polster: Die Zeilenhöhe der Serifenschrift legt schon Luft unter den
     Wochentag. Mit .55rem stand er weiter über der Linie als „Nachmittag“ unter seiner. */
  .woche .tag-kopf{padding:.55rem .8rem .3rem;gap:.5rem}
  .woche .heute-marke{display:none}
  .woche .slot{padding:.5rem .8rem;gap:.35rem}
  .woche .slot + .slot{padding-top:.55rem;margin-top:0}
  .woche .slot-kopf{gap:.25rem}
  .woche .slot-titel,.woche .slot-schwerpunkt{font-size:.8rem;letter-spacing:.08em}
  /* Die Mindesthöhen hielten früher die fünf Tage auf einer Linie. Das macht seit
     subgrid das Wochengitter selbst – hier bleibt nur die Höhe des Titels. */
  .woche .eintrag{min-height:0}
  .woche .eintrag{flex-direction:column;align-items:stretch;justify-content:center;gap:.3rem;padding-top:.5rem}
  /* Das Bild richtet sich nach der Bildschirmhöhe, nicht nach der Spaltenbreite:
     Zwei Zeitfenster müssen untereinander passen. Bei 900 px Höhe 160 px, ab
     etwa 1100 px die volle Größe. Mit 56 % der Breite lief die Seite bei
     1440 × 900 unten über. */
  /* Das Bild vollständig zeigen (contain) – beschnitten fehlten Köpfe und Hände. Die
     Größe hängt deshalb an der Höhe; die holt sich das Bild aus der Bereichszeile, die
     an belegten Fenstern entfällt (siehe .slot.belegt). */
  .woche .eintrag .bildchen{width:100%;height:clamp(4.5rem,calc(50dvh - 290px),14rem);max-width:none;
    aspect-ratio:auto;object-fit:contain;margin:0;flex:none}
  /* Umbruch an Wortgrenzen und mit Silbentrennung – „Backen/Koche|n“ las sich wie ein Fehler. */
  .woche .eintrag b{overflow-wrap:break-word;hyphens:auto}
  /* Nicht mehr fest zwei Zeilen: Kurze Titel ließen darunter eine leere Zeile bis zur
     „Anleitung“ stehen. */
  .woche .eintrag b{min-height:0;font-size:1.02rem;line-height:1.3}
  .woche .eintrag-block{gap:.2rem}
  .woche .leer{min-height:44px}
  /* „Anlei-tung“ über zwei Zeilen: Die Spalte war drei Pixel zu schmal für das Wort.
     Der Umbruch bleibt als Rückfall stehen (er rettet noch schmalere Fenster), aber
     erst muss der Platz ausgereizt sein – ein getrenntes Wort in einem Knopf liest
     sich wie ein Fehler. Geholt werden die Pixel beim Innenabstand und am ✕, das
     als Zeichen keine 2,2 rem braucht. */
  .woche .slot-knoepfe{gap:.4rem}
  .woche .slot-knoepfe .knopf{padding:0 .2em;font-size:.82rem}
  .woche .slot-knoepfe .mehr-knopf{min-width:1.9rem;padding:0 .3em}
}
/* Kleinere Knopfhöhe nur mit Maus: 44 px sind das Mindestmaß für den Finger, am
   Rechner zielt man genauer, und zwei Knopfreihen je Tag schlagen sonst voll durch. */
@media(min-width:900px) and (pointer:fine){
  .woche .slot-knoepfe .knopf{min-height:36px}
}
@media(min-width:900px) and (max-width:1100px){
  .abschnitt[data-name="woche"] > .titelzeile .knopf{min-height:40px;padding:0 .7em;font-size:.88rem}
  .abschnitt[data-name="woche"] > .titelzeile .zeitangabe{font-size:.84rem}
  .abschnitt[data-name="woche"] > .titelzeile .woche-thema-feld{flex-basis:auto}
  .abschnitt[data-name="woche"] > .titelzeile .wochenstatus{font-size:.78rem}
  .abschnitt[data-name="woche"] .werkzeuge .knopf{min-height:40px;padding:0 .55em;font-size:.88rem}
  .abschnitt[data-name="woche"] .zusatzzeile{gap:.25rem;font-size:.78rem}
  .woche .tag-kopf{padding:.35rem .55rem;gap:.2rem}
  .woche .slot{padding:.4rem .55rem;gap:.25rem}
  .woche .slot + .slot{padding-top:.45rem}
  .woche .slot-kopf{gap:.2rem}
  .woche .slot-titel,.woche .slot-schwerpunkt{font-size:.72rem;letter-spacing:.03em}
  .woche .eintrag{gap:.35rem;padding-top:.25rem}
  .woche .eintrag .bildchen{width:2.75rem;height:2.75rem}
  .woche .eintrag b{font-size:.86rem;line-height:1.2}
  .woche .eintrag-block{gap:.25rem}
  .woche .slot-knoepfe{gap:.15rem}
  .woche .slot-knoepfe .knopf{padding:0 .1em;font-size:.73rem}
}
@media(min-width:900px) and (max-height:899px),
      (min-width:900px) and (max-width:1399px) and (max-height:999px){
  /* In niedrigen Rechnerfenstern passt die Bild-Titel-Anordnung untereinander
     physisch nicht zweimal in eine Tageskarte. Nur dort stehen sie nebeneinander. */
  .abschnitt[data-name="woche"] .themenwoche-band{display:none}
  .woche .eintrag{flex-direction:row;align-items:center;justify-content:flex-start;gap:.5rem;padding-top:.4rem}
  /* Mit der Fensterhöhe: bei 720 px 3,75 rem (mehr passt nicht ohne Scrollen), darüber größer. */
  .woche .eintrag .bildchen{width:clamp(3.75rem,calc(15dvh - 3rem),5.25rem);height:clamp(3.75rem,calc(15dvh - 3rem),5.25rem);aspect-ratio:auto;margin:0;flex:none}
  .woche .eintrag b{min-height:0;font-size:1rem;text-align:left}
}
/* Wo das große Bild über dem Titel steht: Die Zeitfenster teilen sich die ganze
   Höhe bis zum Rand, und das Bild nimmt, was nach Titel und Knöpfen übrig bleibt.
   Die feste Formel (50dvh − 290px) rechnete mit genau zwei Fenstern – bei zwei ließ
   sie unten Platz frei, bei einem dritten (Mittag) lief die Woche über. So wird das
   Bild mit jedem weiteren Zeitfenster von selbst kleiner. Breiter als die Spalte
   wird es nicht (contain), und unter 4,5 rem schrumpft es nicht. */
@media(min-width:1400px) and (min-height:900px), (min-width:1101px) and (min-height:1000px){
  @supports (grid-template-rows: subgrid){
    .woche{grid-template-rows:auto repeat(var(--slotzeilen,2),1fr)}
  }
  .woche .slot:not(.mehrere) > .eintrag-block,
  .woche .slot:not(.mehrere) .eintrag{flex:1;min-height:0}
  .woche .slot:not(.mehrere) .eintrag .bildchen{flex:1 1 0;height:auto;min-height:4.5rem}
}
@media(min-width:900px) and (max-width:1100px) and (max-height:999px){
  .woche .eintrag .bildchen{width:3.25rem;height:3.25rem}
}
@media(min-width:900px) and (max-width:1100px) and (min-height:1000px){
  .woche .eintrag .bildchen{width:70%;height:auto}
  .woche .eintrag b{font-size:.95rem;line-height:1.3}
}

/* Zwei Angebote in einem Zeitfenster (Hauptangebot plus Kurzangebot): Jedes mit großem
   Bild übereinander machte das Fenster doppelt so hoch, und die Woche lief unten aus
   dem Bildschirm. Dann stehen sie kompakt – kleines Bild neben dem Titel. */
.woche .slot.mehrere .eintrag{flex-direction:row;align-items:center;justify-content:flex-start;gap:.6rem;padding-top:.15rem}
.woche .slot.mehrere{gap:.2rem}
.woche .slot.mehrere .eintrag-block{gap:.15rem}
/* Auf dem Handy wird ohnehin gescrollt: Luft zwischen den beiden Angeboten, sonst
   klebte die zweite Uhrzeit an den Knöpfen des ersten. */
@media(max-width:899px){ .woche .slot.mehrere{gap:.75rem} }
.woche .slot.mehrere .eintrag .bildchen{width:2.75rem;height:2.75rem;aspect-ratio:auto;margin:0;flex:none;max-width:none}
.woche .slot.mehrere .eintrag b{min-height:0;text-align:left;font-size:.95rem}
.titel-link{all:unset;cursor:pointer;min-width:0;flex:1;min-height:44px;display:flex;align-items:center}
.titel-link:hover b{text-decoration:underline}
.titel-link:focus-visible{outline:2px solid var(--gruen);outline-offset:2px;border-radius:4px}

/* ---------- Angebotsliste ---------- */
.filterzeile{display:grid;gap:.6rem;margin-bottom:1rem}
@media(min-width:700px){ .filterzeile{grid-template-columns:2fr 1fr 1fr auto;align-items:center} }
/* „Was passt“ und „Jahreszeit“ stecken auf dem Handy hinter einem Umschalter statt
   offen unter der Suche zu stehen – zwei Zeilen, die selten benutzt werden, aber
   immer Platz kosteten. Ab 700px ist in der Zeile ohnehin Platz für alle vier
   Felder: Dort verschwindet der Umschalter und `display:contents` reicht die
   beiden Felder als eigene Rasterkinder an `.filterzeile` durch, damit sie wieder
   in den ursprünglichen Spalten (2fr 1fr 1fr auto) landen statt in einer eigenen.
   Bewusst eine eigene Klasse statt des `hidden`-Attributs: Zeile 12 erzwingt
   `[hidden]{display:none!important}` projektweit – eine spätere Regel kann das,
   anders als hier gebraucht, nie wieder auf `contents` zurückdrehen. */
.filter-umschalter{position:relative}
.filter-umschalter::after{content:"▾";margin-left:.4em;color:var(--grau);transition:transform .15s;display:inline-block}
.filter-umschalter[aria-expanded="true"]::after{transform:rotate(180deg)}
.filter-aktiv-zahl{margin-left:.4em;font-size:.75rem;font-weight:700;color:var(--gruen);
  background:color-mix(in srgb,var(--gruen) 14%,transparent);border-radius:var(--r-pille);padding:.05em .55em}
.filter-mehr{display:flex;flex-direction:column;gap:.6rem}
.filter-mehr.eingeklappt{display:none}
@media(min-width:700px){
  .filter-umschalter{display:none}
  .filter-mehr,.filter-mehr.eingeklappt{display:contents}
}
.einstellgruppe{border-top:1px solid var(--linie)}
.einstellgruppe:first-of-type{border-top:none}
/* Auf schmalen Bildschirmen bricht der Untertitel unter den Titel. An der Grundlinie
   ausgerichtet klebte er dann direkt auf der Trennlinie der nächsten Gruppe – als
   Block mit eigenem Abstand steht er sichtbar zum Titel gehörig darunter. */
.einstellgruppe>summary{display:flex;align-items:baseline;gap:.15rem .6rem;flex-wrap:wrap;
  padding:.7rem 0 .8rem;cursor:pointer;font-weight:650;list-style:none;line-height:1.4}
/* Der Pfeil rutschte dabei in eine eigene dritte Zeile; er steht jetzt rechts mittig. */
@media(max-width:559px){ .einstellgruppe>summary > .hinweis{flex:1 1 100%}
  .einstellgruppe>summary{position:relative;padding-right:1.6rem}
  .einstellgruppe>summary::after{position:absolute;right:0;top:50%;translate:0 -50%} }
.einstellgruppe>summary::-webkit-details-marker{display:none}
.einstellgruppe>summary::before{content:none}
.einstellgruppe>summary::after{content:"▾";margin-left:auto;color:var(--grau);transition:transform .15s}
.einstellgruppe[open]>summary::after{transform:rotate(180deg)}
.einstellgruppe>.gruppeninhalt{padding:0 0 1rem}
/* Im Kasten „Einstellungen und Verwaltung“ liegen alle Aufklapper in einer Reihe.
   Der Kasten hat keinen Innenabstand – den bringen die Gruppen selbst mit, damit die
   Trennlinie zwischen ihnen von Kante zu Kante läuft. Ohne das säße sie eingerückt und
   die Reihe hätte zwei Kanten statt einer. */
/* Der Kasten selbst klappt auf: seine Kopfleiste ist das summary, der Winkel rechts
   dieselbe Sprache wie bei den Gruppen darin. */
summary.kasten-kopf{cursor:pointer;list-style:none}
summary.kasten-kopf::-webkit-details-marker{display:none}
summary.kasten-kopf::after{content:"▾";margin-left:auto;
  color:color-mix(in srgb,var(--ton) 55%,var(--grau));transition:transform .15s}
details.kasten[open] > summary.kasten-kopf::after{transform:rotate(180deg)}
details.kasten:not([open]) > summary.kasten-kopf{border-bottom:none}
.einstellkasten > .einstellgruppe{padding:0 .95rem}
.einstellkasten > .einstellgruppe:first-of-type{border-top:none}
.einstellkasten > .einstellgruppe[open]{background:var(--karte-weich)}
/* Die Auswertung bringt ihre eigene Karte nicht mehr mit – sie ist hier eine Gruppe
   wie die anderen. */
.einstellkasten > .auswertung{box-shadow:none;border:0;border-top:1px solid var(--linie)}
/* Der Speichern-Knopf gehört zu den drei Gruppen darüber, nicht zur Auswertung
   darunter – deshalb rückt er auf deren Textkante ein und wird von einer Linie
   abgesetzt, nicht von einem Abstand. */
.einstellkasten > .speicherleiste{padding:.9rem .95rem;border-top:1px solid var(--linie)}
.legende{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;margin-top:2.25rem;padding-top:1rem;border-top:1px solid var(--linie);
  font-size:.84rem;color:var(--grau)}
.legende span{display:inline-flex;align-items:center;gap:.35rem}
/* Die Zahl in Bereichsfarbe: Sie ist die einzige Stelle, an der die Farbe auch etwas
   misst, und ersetzt den Punkt, der vorher davorstand. */
.angebot{--angebot-kat:var(--rand);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;
  min-width:0;padding:1rem 2.5rem 1rem 1rem;text-align:left;background:var(--karte);
  border:1px solid color-mix(in srgb,var(--angebot-kat) 28%,var(--linie));border-radius:var(--r);
  box-shadow:0 1px 1px rgba(0,0,0,.025);width:100%;min-height:112px;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.angebot:hover{border-color:var(--angebot-kat);box-shadow:var(--schatten-1);transform:translateY(-1px)}
.angebot h4{font-size:1rem;font-weight:680;line-height:1.3}
.angebot-pfeil{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1.65rem;
  line-height:1;color:var(--angebot-kat)}
.angebot-untertitel{font-size:.83rem;color:var(--grau);line-height:1.35;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.angebot-meta{display:flex;align-items:center;gap:.35rem .5rem;flex-wrap:wrap;margin-top:auto;
  font-size:.77rem;color:var(--grau)}
.angebot-meta>span:not(.marke){display:inline-flex;align-items:center;gap:.25rem}
/* Bewährt soll auffallen: Gruppe kräftig getönt mit dicker Kante, Kacheln mit Goldton. */
.angebot.bew{background:color-mix(in srgb,#f5b301 12%,var(--karte));border-color:#e0a800;border-top-width:4px}
.angebot.bew h4{color:#8a5d00}
@media (prefers-color-scheme:dark){.angebot.bew h4{color:#ffd15c}}
.bereich-kachel-punkt{width:8px;height:8px;border-radius:50%;background:var(--kat);flex:none}
.angebote-werkzeugleiste{padding:.6rem;border:1px solid var(--linie);border-radius:var(--r);
  background:var(--karte);box-shadow:var(--schatten-1);margin-bottom:.85rem}
.angebote-werkzeugleiste #suche{min-width:min(100%,19rem);flex:1 1 19rem}
@media(max-width:559px){.angebote-werkzeugleiste{gap:.45rem}.angebote-werkzeugleiste #suche{flex-basis:100%}}
/* max-width und Umbruch: „Kreuzworträtsel in großer Schrift“ als Materialposten lief
   in der Tagesspalte über die Kartenkante hinaus und wurde abgeschnitten. Eine Marke
   ist ein Etikett, keine Zeile – sie darf umbrechen, aber nicht überstehen. */
/* Grüner Grund war hier nur Gewohnheit: Eine Materialliste zeigt acht Marken
   nebeneinander – „Schere“, „Papier“, „Kleber“ –, und acht grüne Kapseln machen
   aus der Hausfarbe Tapete. Eine Marke benennt etwas, sie meldet nichts. Also
   neutral getönt, mit Rand statt Farbe als Umriss. */
.marke{display:inline-block;padding:.15em .6em;border-radius:var(--r-pille);
  background:var(--flaeche);border:1px solid var(--linie);
  font-size:.8rem;font-weight:650;color:var(--grau);
  max-width:100%;overflow-wrap:anywhere;line-height:1.35}

/* ---------- Detailseite ---------- */
/* Das Detailblatt legt sich über den Inhalt, nicht über die Navigation. Vorher war
   es `inset:0` – wer eine Anleitung öffnete, hatte keinen Reiter mehr vor sich und
   musste erst zurückgehen, um irgendwo anders hinzukommen. Ein Blatt ist kein
   eigener Bildschirm, es ist eine Schicht über diesem.
   Wo die Navigation steht, hängt von der Breite ab, deshalb drei Fälle: unten die
   feste Leiste (--nav), in der Mitte die Kopfzeile (--kopfh), oben die Seitenleiste. */
.blatt{position:fixed;inset:0;z-index:20;background:var(--sand);overflow-y:auto;
  overscroll-behavior:contain;display:none}
/* Auch oben eingerückt, nicht nur unten: Das Blatt liegt seit dem Umbau unter der
   Kopfzeile (z-index 20 gegen 30), damit die Navigation erreichbar bleibt. Ohne den
   oberen Abstand schob sich die Kopfzeile damit über den Blattkopf – und mit ihm
   über den Zurück-Knopf. Auf dem Handy gab es dann keinen Weg zurück außer der
   Zurück-Taste des Browsers.
   Damit liegt das Blatt in allen Breiten gleich: innerhalb des Rahmens der
   Anwendung, nie darüber. */
@media(max-width:899px){ .blatt{top:var(--kopfh,0px);bottom:var(--nav,0px)} }
@media(min-width:900px) and (max-width:1399px){ .blatt{top:var(--kopfh,0px)} }
@media(min-width:1400px){ .blatt{left:252px} }
.blatt[data-offen]{display:block}
/* Auswahl beim Tauschen am Rechner: Seitenleiste rechts, der Plan bleibt links abgedunkelt sichtbar.
   Handy und Tablet behalten das ganze Blatt. */
@media(min-width:1101px){
  .blatt.seitenleiste{left:auto;width:min(560px,100vw);border-left:1px solid var(--linie);box-shadow:0 0 0 100vmax rgb(0 0 0 / .35)}
  .blatt.seitenleiste .blatt-inhalt{max-width:none;padding:1rem 1.4rem 3rem}
  /* Angebotsdetails: großes Fenster mittig über dem Inhaltsbereich (neben der Navigationsleiste). */
  .blatt.fenster{inset:calc(var(--kopfh,0px) + 3dvh) auto auto calc(var(--leiste,0px) + (100vw - var(--leiste,0px)) / 2);transform:translateX(-50%);
    width:min(1180px,calc(100vw - var(--leiste,0px) - 3rem));height:calc(94dvh - var(--kopfh,0px));border:1px solid var(--linie);border-radius:var(--r-l);
    box-shadow:0 0 0 100vmax rgb(0 0 0 / .35)}
  .blatt.fenster .blatt-kopf{border-radius:var(--r-l) var(--r-l) 0 0}
  .blatt.fenster .blatt-inhalt{max-width:none;padding:1rem 1.8rem 3rem}
}
@media(min-width:1400px){ .blatt.fenster{--leiste:252px;top:4dvh;height:92dvh} }
/* Der Blattkopf klebt oben im Blatt, damit der Zurück-Knopf beim Lesen einer langen
   Anleitung nicht wegscrollt. Er trägt dieselbe getönte Fläche wie jede Kastenkopf-
   leiste: Als weißer Balken war er das einzige reine Weiß auf der Seite und sah aus
   wie ein fremdes Fenster über der Anwendung. Getönt gehört er dazu und hebt sich
   trotzdem vom Text darunter ab. */
.blatt-kopf{position:sticky;top:0;
  background:color-mix(in srgb,var(--rand) 14%,var(--flaeche));
  border-bottom:1px solid var(--linie);
  padding:.7rem 1rem;padding-top:calc(.7rem + env(safe-area-inset-top));
  display:flex;gap:.6rem;align-items:center;z-index:5}
.blatt-inhalt{max-width:820px;margin:0 auto;padding:1.2rem 1rem 4rem}
/* Handy: „‹ Zurück“ brach zweizeilig um und „Bearbeiten“ ragte rechts aus dem Bild.
   Drucken zeigt dort nur das Symbol (der Name bleibt für Vorlesegeräte), drucken
   wird ohnehin am Rechner. */
@media(max-width:480px){
  .blatt-kopf{padding-inline:.75rem;gap:.4rem}
  .blatt-kopf .knopf{white-space:nowrap;padding:0 .7em}
  .blatt-kopf .blatt-druck-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* 820 px sind das Maß für eine Textsäule – für ein Blatt, das in zwei Spalten steht
   oder eine Liste in Spalten trägt, sind sie eine halbe Seite Leerraum. Beides
   erkennt man am Inhalt, nicht an einer zweiten Kennung im Programm.
   Breite und Innenabstand sind dieselben wie bei `main`: Das Blatt liegt über der
   Seite, und wenn der Text darauf schmaler steht als die Liste darunter, sieht es
   aus wie ein fremdes Fenster. Gedeckelt wird deshalb genauso – 1240 px, ab der
   Seitenleiste 1600 px. */
.blatt-inhalt:has(.detailgitter),.blatt-inhalt:has(.sofortgruppe),.blatt-inhalt:has(.woche){max-width:1240px}
@media(min-width:900px){ .blatt-inhalt{padding:1.8rem 2rem 4rem} }
@media(min-width:1400px){
  .blatt-inhalt{padding:2.4rem 2.6rem 4rem}
  .blatt-inhalt:has(.detailgitter),.blatt-inhalt:has(.sofortgruppe),.blatt-inhalt:has(.woche){max-width:1600px}
  /* Auf der ganzen Breite bekommt die Nebenspalte mehr ab: Sonst wächst nur die
     Hauptspalte, und ein Absatz über 1000 px verliert beim Zeilenwechsel die Zeile.
     Der Fließtext selbst ist zusätzlich gedeckelt – 80 Zeichen sind die Grenze, ab
     der man die nächste Zeile sucht. */
  .detailgitter{grid-template-columns:minmax(0,1.5fr) minmax(20rem,1fr);gap:0 3rem}
  .detail-haupt p{max-width:80ch}
}
.detailgitter{display:grid;gap:0}
@media(min-width:1000px){
  .detailgitter{grid-template-columns:minmax(0,1.6fr) minmax(17rem,.85fr);
    gap:0 2.6rem;align-items:start}
  /* Die Nebenspalte beginnt auf der Höhe der Hauptspalte, nicht 1,8 rem darunter:
     Der Abstand über einer Überschrift trennt sie vom Absatz davor – oben steht
     keiner. */
  .detailgitter > * > h3:first-child{margin-top:0}
  /* Das Beiwerk tritt zurück: eine Spur kleiner, damit links die Anleitung führt. */
  .detail-neben{font-size:.95rem;
    padding-left:1.6rem;border-left:1px solid var(--linie)}
  /* Vier statt zwei Spalten: Dauer, Zielgruppe, Setting und Jahreszeit stehen dann
     zu zweit nebeneinander statt als schmale Leiter in einem breiten Kasten.
     Zwei Klassen, weil die Grundregel weiter unten steht – eine Medienabfrage
     erhöht die Gewichtung nicht. */
  .blatt .kopfdaten{grid-template-columns:auto 1fr auto 1fr;gap:.35rem 1.2rem}
}
.blatt-titel{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:.2rem}
@media(min-width:700px){ .blatt-titel{font-size:2rem} }
.blatt-unter{color:var(--grau);font-size:1.02rem;margin-bottom:1.2rem}
.kopfdaten{display:grid;gap:.1rem .9rem;grid-template-columns:auto 1fr;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  padding:.9rem 1rem;margin-bottom:1.4rem;font-size:.95rem}
.kopfdaten dt{color:var(--grau);font-weight:600}
.kopfdaten dd{margin:0}
.blatt h3{font-size:1.15rem;margin:1.8rem 0 .6rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--linie);color:var(--gruen)}
.blatt p{margin:.5rem 0}
.strichliste li{position:relative;padding-left:1.3em;margin:.4em 0}
.strichliste li::before{content:"–";position:absolute;left:0;color:var(--gruen);font-weight:700}
/* Sicherheit steht über der Differenzierung und muss sich davon abheben, ohne zu
   schreien: eine Kante links, kein farbiger Kasten. Wer die Anleitung im Stehen
   liest, findet die Grenze am Rand wieder, nicht an einer Fläche. */
.sicherheit{border-left:3px solid var(--gelb);padding-left:.9rem;margin:1.8rem 0}
.sicherheit h3{margin-top:0;border-bottom:none;color:var(--gelb)}
.schwierig{border-left:3px solid var(--rot);padding-left:.9rem;margin:1rem 0}
.schwierig h3{margin-top:0;border-bottom:none;font-size:1rem;color:var(--rot)}
.linkliste li{margin:.5em 0;min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:.2em .6em}
.linkliste a{color:var(--gruen);font-weight:650}
.phase{display:grid;gap:.2rem .9rem;margin:.9rem 0;padding-left:.9rem;border-left:3px solid var(--linie)}
@media(min-width:640px){ .phase{grid-template-columns:9rem 1fr} }
.phase .zeit{font-size:.85rem;color:var(--grau);font-weight:650;padding-top:.15em}
.phase h4{font-size:1rem;margin-bottom:.25rem}
.rezept-link{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:var(--rezepte);
  color:#fff;border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:1.4rem;text-decoration:none}
.rezept-link b{font-size:1.05rem}
.rezept-link span{font-size:.85rem;opacity:.85}
.rezept-link .knopf{background:rgba(255,255,255,.18);color:#fff;border-color:transparent;white-space:nowrap}
.blatt-fuss{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem;
  padding-top:1.2rem;border-top:1px solid var(--linie)}
.blatt-fuss .knopf{flex:1 1 auto}

/* ---------- Formular ---------- */
.formzeile{margin-bottom:1rem}
.formgitter{display:grid;gap:1rem}
@media(min-width:640px){ .formgitter.zwei{grid-template-columns:1fr 1fr} }
.phasenblock{border:1px solid var(--linie);border-radius:var(--r-m);padding:.8rem;margin-bottom:.7rem;background:var(--karte)}

/* ---------- Material ---------- */
.materialposten{border-left:3px solid var(--linie);padding-left:.65rem;margin:.1rem 0 .5rem}
.materialposten b{font-size:.98rem;font-weight:650;display:block;margin-bottom:.3rem}
.markenreihe{display:flex;flex-wrap:wrap;gap:.3rem}

/* ---------- Doku ---------- */
/* Vier Abschnitte statt einer Feldliste, geordnet nach Aufwand: „Was, wann und
   warum“ (alles vorbelegt) · „Wie lief es in der Gruppe“ (die eigentliche Arbeit) ·
   „Einzelne Tagesgäste“ (nur wenn etwas auffiel) · „Weitergabe“ (meist nichts).
   Kein Assistent mit Weiter-Knöpfen – im Gruppenraum zählt jeder gesparte Griff. */
/* Kopf des Blatts: zurück zur Übersicht, daneben das Angebot. Suche und Angebotsliste
   gehören nur zum Weg über „Anderes Angebot” (.frei).
   Klebt unter der Kopfzeile (--kopfh, dieselbe Variable wie bei .blatt): Bei einem
   langen Einzeleintrag scrollten der Zurück-Knopf und der Name des Angebots nach
   oben weg – ohne dass irgendwo noch stand, welchen Eintrag man gerade ausfüllt.
   Kein Assistent, nur eine Erinnerung, die stehen bleibt. */
#btnDokuZurListe{flex:none;white-space:nowrap}
.dokuFormKopf{display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;padding:.5rem 0 .6rem;
  border-bottom:1px solid var(--linie);
  position:sticky;top:var(--kopfh,0px);z-index:10;
  /* Der Kopf ist die Kopfleiste der Karte: bis an ihre Ränder, oben mit ihrer Rundung. */
  margin-inline:-1.3rem;padding:1rem 1.3rem .8rem;border-radius:var(--r) var(--r) 0 0;
  background:var(--karte)}
.dokuFortschritt{margin:0;font-family:var(--titel);font-size:1.3rem;font-weight:700;line-height:1.25;color:var(--text)}
.dokuWizard:not(.frei) .nurFrei{display:none}
/* Die Legende ersetzt die frühere Mengenangabe-Zeile: Ein Zustand, den man nicht
   sieht, benutzt niemand – und ein Regelfall, der erklärt ist, braucht kein Feld. */
.legende{font-size:.84rem;color:var(--grau);margin:-.4rem 0 .9rem}
.legende b{color:var(--text);font-weight:650}
/* Vorschläge für die Begründung: der halbe Satz aus dem Angebot, zum Antippen. */
.vorschlaege{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.vorschlaege .knopf{max-width:100%;white-space:normal;text-align:left}
.dokuPersonen{margin-top:.8rem;padding-top:.6rem;border-top:1px solid var(--linie, #ddd)}
.dokuPerson{display:flex;gap:.5rem;align-items:flex-start;margin-top:.4rem}
.dokuPerson .ergebnis{flex:1;min-height:3.2rem}
/* Eine Legende, die nicht unter einer Überschrift steht, sondern über der Häkchenreihe,
   zu der sie gehört – ohne den Zug nach oben, der sie sonst an die Überschrift heftet. */
.legende.zuReihe{margin-top:.2rem}
.hinweis.mahnung{color:var(--gelb);font-weight:600;margin-top:.4rem}
/* „ⓘ Mehr dazu“: Nachschlagewissen zu einem Feld, zugeklappt unter dem einen Satz,
   der sichtbar bleibt. */
.erklaer{margin-top:.25rem}
.erklaer > summary{cursor:pointer;font-size:.8rem;color:var(--grau);list-style:none;display:inline-block}
.erklaer > summary::-webkit-details-marker{display:none}
.erklaer > summary:hover{color:var(--text)}
.erklaer > summary:focus-visible{outline:2px solid var(--gruen);outline-offset:2px;border-radius:4px}
.erklaer > .hinweis{margin:.3rem 0 0}
/* Anstoßfrage: Wer unter Zeitdruck vor einem leeren Feld sitzt, schreibt nichts. */
.anstoss{margin-top:.4rem;color:var(--gruen);font-weight:600}
/* Der Knopf sperrt nicht, er sagt was fehlt – sichtbar, aber benutzbar. */
.knopf.wichtig.mahnung{background:var(--gelb);border-color:var(--gelb)}
.wahlfeld{display:flex;flex-wrap:wrap;gap:.45rem}
.angebot .andere-zeit{color:var(--gelb)}
.wahlfeld label{display:inline-flex;align-items:center;gap:.45em;min-height:44px;
  padding:0 .85em;border:1px solid var(--rand);border-radius:var(--r-pille);background:var(--karte);
  font-size:.92rem;cursor:pointer;transition:border-color .16s ease, background .16s ease}
.wahlfeld label:hover{border-color:var(--gruen)}
.wahlfeld input{width:18px;height:18px;accent-color:var(--gruen)}
/* Titel und Kategorie standen bisher nur durch die Grauabstufung auseinander –
   bei fast gleicher Schriftgröße kaum zu unterscheiden. Trennpunkt plus der
   farbige Kategoriepunkt (wie überall sonst im Programm) machen den Unterschied
   auf einen Blick sichtbar, nicht erst beim genauen Lesen. */
.wahlfeld label .hinweis{display:inline-flex;align-items:center;gap:.3em;
  font-size:.8rem;margin-left:.1em}
.wahlfeld label .hinweis .punkt{width:8px;height:8px}
.wahlfeld label:has(input:checked){border-color:var(--gruen);background:var(--gruen-hell);font-weight:600}
/* Zweiter Zustand: Das Häkchen gilt für einen Tagesgast. Andere Farbe und ein
   angehängtes Wort – ein Zustand, den man nicht sieht, benutzt niemand. */
.wahlfeld label[data-nur="1"]{border-color:var(--gelb);background:color-mix(in srgb,var(--gelb) 12%,var(--karte))}
.wahlfeld label[data-nur="1"]::after{content:' · ein Tagesgast';font-size:.8rem;
  font-weight:600;color:var(--gelb);white-space:nowrap}
@media(max-width:620px){.dokuEntwurf{align-items:flex-start;flex-direction:column}.dokuEntwurf .werkzeuge{width:100%}}
.ergebnis{width:100%;display:block;white-space:pre-wrap;background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--r);padding:1rem;min-height:120px;
  line-height:1.65;font:inherit;color:inherit;resize:vertical}
/* Ein Hinweis sieht überall gleich aus wie die Erinnerungszeilen auf Heute: Rahmen,
   Kante links in der Farbe des Zustands, leicht getönt. */
.melde{padding:.7rem .9rem;border-radius:var(--r);margin:.7rem 0;font-size:.92rem;
  border:1px solid var(--linie);border-left:3px solid var(--rand)}
/* Prüfbogen-Ampel: zeigt beim Ausfüllen, was für den Nachweis noch fehlt. Nach dem
   Kopieren ist es zu spät.
   Sie steht nur da, wenn ein Pflichtteil fehlt – ein Tipp springt zum Feld. */
/* Dieselbe getönte Fläche wie .melde.warn: Am Rechner ist Platz für die Zeile da,
   aber ungestützt neben dem großen Kopieren-Knopf ging sie im ersten Blick unter.
   Ein Kasten statt reinen Fließtexts holt sie ohne Fläche zum Kleben zurück. */
.ampel{display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:baseline;
  font-size:.85rem;margin:.6rem 0 0;padding:.5rem .7rem;border-radius:var(--r-m);
  background:color-mix(in srgb,var(--gelb) 12%,var(--karte))}
.ampel b{font-weight:600;color:var(--grau)}
.ampel span{white-space:nowrap}
.ampel .ja{color:var(--gruen);font-weight:600}
.ampel .nein{color:var(--gelb);font-weight:600}
.ampel .egal{color:var(--grau)}
.melde.ok{background:var(--gruen-hell);color:var(--gruen);border-left-color:var(--gruen)}
.melde.warn{background:color-mix(in srgb,var(--gelb) 7%,var(--karte));color:var(--gelb);border-left-color:var(--gelb)}
/* Weder grün noch gelb: Die Prüfung hat nichts gefunden, das ist keine Entwarnung
   und kein Alarm. Rahmen statt Fläche, damit die Zeile nicht nach Ergebnis aussieht. */
.melde.neutral{border:1px solid var(--linie);color:var(--grau)}
.woche-leer-band{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;background:var(--karte)}
.woche-leer-band[hidden]{display:none}
.woche-leer-band > span{flex:1 1 18rem}

/* ---------- Rückmeldung statt Systemdialog ----------
   Unten, weil dort der Daumen ist und weil oben schon der Netzstand sitzt. Über der
   Reiterleiste (--nav), sonst läge sie auf dem Handy hinter den Reitern. Sie hält
   sich selbst kurz und verschwindet – wer einen Knopf darin braucht (Rückgängig),
   bekommt mehr Zeit; das entscheidet das Programm, nicht der Stil. */
/* Ohne eigene Fläche: Die bekommt sie aus `.melde.ok` bzw. `.melde.warn`. Eine
   Grundfarbe hier stünde in der Datei hinter den beiden und schlüge sie – die
   Leiste wäre in jedem Fall weiß, und grün und gelb sagten nichts mehr. */
.hinweisleiste{position:fixed;left:.7rem;right:.7rem;bottom:calc(var(--nav,0px) + .7rem);
  z-index:60;margin:0;display:flex;gap:.8rem;align-items:center;
  box-shadow:var(--schatten);border:1px solid var(--rand)}
.hinweisleiste > span{flex:1;min-width:0}
/* Der Knopf darin muss antippbar bleiben, ohne die Leiste auf zwei Zeilen zu treiben. */
.hinweisleiste > button{flex:none;min-height:40px;padding:0 .8em;border-radius:8px;
  border:1px solid currentColor;background:none;color:inherit;font:inherit;
  font-weight:600;font-size:.9rem;cursor:pointer}
.hinweisleiste > button:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
@media(min-width:700px){ .hinweisleiste{left:auto;right:1rem;max-width:28rem} }
/* Die Netzleiste steht fest im Aufbau und ist leer ausgeblendet – der Stil gehört
   deshalb hierher und nicht als style-Zeichenkette ins Programm. */
#netzstand{background:var(--gelb);color:#fff;padding:.5rem .9rem;font-size:.9rem;text-align:center}
/* Im Dunkeln ist --gelb die helle Farbe – weiße Schrift darauf war grenzwertig
   lesbar, seit es den Dunkelmodus gibt. Dort also dunkle Schrift. */
:root[data-theme="dark"] #netzstand{color:#11161b}

/* Das Ergebnis ist der letzte Abschnitt der Seite, kein festgeklebter Balken.
   Fixiert nahm es auf dem Handy ein Drittel des Bildes weg – und zwar die ganze
   Zeit, auch beim Ausfüllen ganz oben, wo noch kein Text existiert. */
/* Wächst mit dem Text – auch beim Tippen und wenn das Feld beim Füllen versteckt
   war. Ohne field-sizing übernimmt dokuTextHoehe() in app.js. */
#dokuErgebnis{field-sizing:content;min-height:120px;max-height:60vh}
.dokuLeiste .melde{margin:.6rem 0 0}
.dokuLeiste .werkzeuge{margin:.8rem 0 0}
/* Was schon dokumentiert ist, muss man wiederfinden – sonst schreibt jemand den
   Eintrag zweimal oder gar nicht. */
.dokuStand{font-size:.86rem;color:var(--grau);margin:-.4rem 0 1.1rem}
/* ---------- Doku: Liste links, Eintrag rechts ----------
   Kopf in einer Zeile: Titel, Tageswahl, Zähler, Hilfe. Der Zähler ist ein Balken
   plus Zahl – die Zahl allein stand vorher als graue Zeile unter der Überschrift. */
.dokuTitel{align-items:center;gap:.6rem 1rem}
.dokuTitel .tagwahl-klein{margin:0}
.dokuRaster{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}
@media(min-width:1200px){
  .dokuRaster{grid-template-columns:minmax(18rem,22rem) minmax(0,1fr);gap:1.4rem}
  /* Liste und Erinnerung bleiben beim Scrollen durch einen langen Eintrag stehen. */
  .dokuSpalte{position:sticky;top:calc(var(--kopfh,0px) + 1rem)}
  #btnDokuZurListe{display:none}
}
@media(max-width:1199px){
  .blattOffen #dokuUebersicht, .dokuLeer{display:none}
}
.dokuSpalte{display:grid;gap:1rem}
.dokuListe{padding:.5rem}
.dokuArbeitsstand{display:grid;gap:2px}
.dokuPunkt{display:flex;align-items:center;gap:.75rem;width:100%;min-height:56px;padding:.6rem .7rem;
  border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.dokuPunkt:hover{background:var(--flaeche)}
.dokuPunkt:focus-visible{outline:2px solid var(--gruen);outline-offset:-2px}
.dokuPunkt.aktiv{background:var(--gruen-hell);box-shadow:inset 3px 0 var(--gruen)}
.dokuPunktZeichen{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--rand);font-size:.8rem;font-weight:800}
.dokuPunkt.aktiv .dokuPunktZeichen{border-color:var(--gruen)}
.dokuPunkt.kopiert .dokuPunktZeichen{background:var(--gruen);border-color:var(--gruen);color:var(--auf-gruen)}
.dokuPunkt.entwurf .dokuPunktZeichen{border-color:var(--gelb);border-style:dashed}
/* Dasselbe Bild wie im Wochenplan: Man erkennt die Runde, bevor man den Titel liest. */
.dokuPunkt .bildchen{flex:none;width:3rem;height:3rem;object-fit:cover;border-radius:.4rem}
.dokuPunkt .bildchen.bildchen-leer{font-size:1.2rem}
.dokuPunktText{min-width:0;display:grid;gap:.1rem}
.dokuPunktText b{font-weight:600;line-height:1.3}
.dokuPunktText small{font-size:.84rem;color:var(--grau)}
.dokuPunkt.entwurf small{color:var(--gelb);font-weight:600}
.dokuNichts{margin:.6rem .7rem}
.dokuNeu{display:block;width:100%;margin-top:.4rem;padding:.8rem .7rem .5rem;border:0;border-top:1px solid var(--linie);
  background:none;color:var(--gruen);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.dokuNeu:hover{text-decoration:underline}
.dokuNeu:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
/* „Kurz erinnert“: die vier Regeln, an denen ein Eintrag am häufigsten scheitert. */
.dokuErinnert{padding:1rem 1.1rem 1.1rem}
.dokuErinnert h3{margin:0 0 .7rem;font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.dokuErinnert p{margin:0 0 .65rem;padding-left:.75rem;border-left:3px solid var(--gruen);font-size:.9rem;line-height:1.45}
.dokuErinnert .knopf{margin-top:.3rem}
/* Rechts: der Eintrag als eine Karte. Ohne gewähltes Angebot ein ruhiger Platzhalter. */
.dokuWizard{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  box-shadow:var(--schatten-2);padding:0 1.3rem 1.3rem}
.dokuLeer{padding:2.5rem 1.5rem;text-align:center;border-style:dashed;box-shadow:none;background:none}
.dokuLeer p{margin:.2rem 0}
.dokuTextTitel{display:block;margin:1rem 0 .4rem}
/* Kompakte Tageswahl im Doku-Kopf: vor/zurück statt des ganzen Wochenstreifens
   aus dem Heute-Reiter – hier reicht ein Tag daneben. */
.tagwahl-klein{margin:0 0 .9rem;max-width:16rem}
.tagwahl-klein .zeitangabe{flex:1;margin:0;text-align:center;align-self:center;font-weight:600;color:var(--text)}
.wahlfeld:not(.alle) label.mehr:not(:has(input:checked)){display:none}
/* Rechtshilfe als Dialog: Kopf mit Titel und zwei Reitern bleibt stehen, nur der
   Text darunter scrollt. Lesebreite begrenzt – Fließtext über 80 Zeichen liest
   niemand zu Ende. */
.rh-dialog{width:min(820px,94vw);max-height:min(88vh,900px);padding:0;border:1px solid var(--linie);
  border-radius:var(--r-l);background:var(--karte);color:var(--text);box-shadow:var(--schatten-3);overflow:hidden}
.rh-dialog[open]{display:flex;flex-direction:column}
.rh-dialog::backdrop{background:rgba(15,23,32,.5)}
.rh-kopf{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:1.3rem 1.6rem 0;
  border-bottom:1px solid var(--linie);background:var(--karte)}
.rh-kopf h2{margin:0;font-family:var(--titel);font-size:1.45rem;color:var(--gruen);letter-spacing:-.01em}
.rh-kopf .hinweis{margin:.2rem 0 0}
.rh-zu{align-self:start;width:40px;height:40px;border:1px solid var(--rand);border-radius:50%;
  background:var(--flaeche);color:var(--text);font-size:1.4rem;line-height:1;cursor:pointer}
.rh-zu:hover{border-color:var(--gruen);color:var(--gruen)}
.rh-reiter{grid-column:1/-1;display:flex;gap:1.4rem;margin-top:1rem}
.rh-reiter button{padding:.55rem 0 .7rem;border:0;border-bottom:3px solid transparent;background:none;
  color:var(--grau);font:inherit;font-weight:600;cursor:pointer}
.rh-reiter button[aria-selected="true"]{color:var(--gruen);border-bottom-color:var(--gruen)}
.rh-reiter button:focus-visible,.rh-zu:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.rh-rumpf{overflow-y:auto;padding:.4rem 1.6rem 1.8rem;overscroll-behavior:contain}
.rh-dialog .rechtshilfe{padding:0;margin:0;border:0;font-size:.95rem}
.rh-einleitung{margin:1rem 0 .2rem !important;color:var(--grau);font-size:.92rem}
.rh-dialog .rechtshilfe h4{margin:1.6rem 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--linie);
  font-family:var(--titel);font-size:1.08rem}
@media(max-width:640px){
  .rh-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  .rh-kopf{padding:1rem 1rem 0}.rh-rumpf{padding:.2rem 1rem 1.5rem}
  .rh-reiter{gap:1rem}.rh-reiter button{font-size:.9rem}
}
.dokuSchnellstart{margin:.4rem 0 1.1rem}
/* Für wen und Wann nebeneinander; auf schmalen Bildschirmen bricht die Zeile um. */
.dokuKopfzeile{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:flex-end;margin-bottom:.5rem}
.dokuKopfzeile .formzeile{margin:0}
.dokuKopfzeile .wahlfeld{flex-wrap:nowrap;gap:.35rem}
/* Umschalter statt Radiopunkte: Der Zustand steht in der Farbe (siehe :has(:checked) oben),
   der Punkt kostete pro Pille 30 px und hätte die Zeile auf dem Handy umbrechen lassen. */
.dokuKopfzeile .wahlfeld label{padding:0 .8em;position:relative}
.dokuKopfzeile .wahlfeld input{position:absolute;opacity:0;width:1px;height:1px}
.dokuKopfzeile .wahlfeld label:has(input:focus-visible){outline:2px solid var(--gruen);outline-offset:2px}
.dokuKopfzeile #dokuZeit{width:8.4rem;max-width:100%}
.dokuSchnellWege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.dokuSchnellWege button{display:flex;align-items:flex-start;justify-content:flex-start;gap:.5rem;min-height:48px;padding:.7rem .8rem;text-align:left;font:inherit;cursor:pointer;border:1px solid var(--rand);border-radius:var(--r-m);background:var(--flaeche);color:var(--text)}
.dokuSchnellWege button:hover{border-color:var(--gruen)}
.dokuSchnellWege button:focus-visible{outline:3px solid color-mix(in srgb,var(--gruen) 35%,transparent);outline-offset:2px}
.dokuSchnellWege button>span:first-child{font-weight:800;color:var(--grau)}
.dokuSchnellWege button.aktiv{border:2px solid var(--gruen);background:var(--gruen-hell)}
.dokuSchnellWege button.aktiv>span:first-child{color:var(--gruen)}
.dokuSchnellWege b,.dokuSchnellWege small{display:block}
.dokuSchnellWege small{font-size:.8rem;color:var(--grau);margin-top:.1rem}
@media(max-width:520px){.dokuSchnellWege small{display:none}.dokuSchnellWege button{flex-direction:column;align-items:center;text-align:center;padding:.55rem .3rem;gap:.15rem;font-size:.9rem}}
.dokuKopieren{display:block;width:100%;min-height:52px;margin:.8rem 0 0;font-size:1.05rem}
.dokuNebenknoepfe{display:flex;justify-content:space-between;gap:.5rem;margin:.5rem 0 0}
/* „Beobachtung“ war bei 390 px breiter als seine Kachel und lief über den Rand:
   weniger Innenrand am Blatt, etwas kleinere Schrift, Silbentrennung als Netz. */
@media(max-width:520px){.dokuWizard{padding-inline:.9rem}.dokuSchnellWege b{hyphens:auto}}
@media(max-width:400px){.dokuSchnellWege button{font-size:.84rem;padding:.45rem .2rem}}
/* Auf dem Handy liegt der fertige Text mehrere Bildschirme unter dem letzten
   Häkchen. Diese Leiste bleibt unten stehen – nur die Zahl der fehlenden
   Pflichtangaben und der Kopieren-Knopf, keine zweite Ampel. Am Rechner ist
   genug Platz, dort bleibt sie weg. */
.dokuMobilLeiste{display:none}
@media(max-width:640px){
  .dokuMobilLeiste.aktiv{display:flex;align-items:center;justify-content:space-between;
    gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:20;
    padding:.55rem .9rem;background:var(--karte);border-top:1px solid var(--linie);
    box-shadow:0 -2px 8px rgba(0,0,0,.08)}
  .dokuMobilLeiste span{font-size:.82rem;color:var(--grau);flex:1;min-width:0}
  .dokuMobilLeiste .knopf{flex:none}
  /* Sonst deckt die Leiste den letzten Abschnitt des Blatts zu. */
  .dokuWizard{padding-bottom:3.4rem}
}
.dokuLetzterEintrag + .dokuLetzterEintrag{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--linie)}
/* Nicht der heutige Tag: Das muss auffallen, bevor der Text im Pflegeprogramm mit
   dem falschen Datum landet. */
.dokuStand.warn{color:var(--gelb);font-weight:600}
/* Nach dem Kopieren war der Text unwiederbringlich weg. Scheitert das Einfügen im
   Pflegeprogramm – abgelaufene Sitzung, falsches Feld –, steht er hier noch. */
.dokuLetzter{margin:1rem 0 0;font-size:.9rem}
.dokuLetzter .ergebnis{min-height:0;margin:.6rem 0 .5rem;font-size:.92rem}
/* Erklärt ist erklärt: Wer ein Feld benutzt hat, braucht den Hinweis darunter nicht
   mehr – so wird das Formular beim Ausfüllen kürzer statt länger. Der vorbelegten
   Uhrzeit bleibt ihr Hinweis, bis jemand sie anfasst: Sie ist gefüllt, ohne dass
   jemand sie gelesen hätte. */
.formzeile[data-benutzt] > p.hinweis:not([id]){display:none}
/* Die Ampel sagt, was fehlt – jetzt auch, wo es steht. Knopf statt span, damit der
   Sprung auch mit der Tastatur geht. */
.ampel button{font:inherit;font-size:.8rem;background:none;border:0;padding:.15rem .1rem;
  white-space:nowrap;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}

/* ---------- Auswahlblatt ---------- */
.auswahl-liste{display:grid;gap:.5rem}
.auswahl-liste mark{background:var(--gruen-hell);color:var(--gruen);font-weight:700;
  padding:0 .1em;border-radius:3px}

/* Trefferliste unter dem Suchfeld im Doku-Reiter: erscheint beim Tippen und ist
   sofort antippbar – kein Aufklappen einer Auswahlliste dazwischen. Sie schiebt
   das Formular nach unten statt darüberzuliegen: ein Overlay, das im Gruppenraum
   unter dem Daumen hängenbleibt, ist schlimmer als ein Sprung im Seitenfluss.
   Die Karten sind flacher als in der Angebotsauswahl – hier zählt, wie viele
   Treffer gleichzeitig zu sehen sind. */
.dokutreffer{display:grid;gap:.5rem;max-height:44vh;overflow-y:auto;
  margin-bottom:.5rem;padding:.15rem}
.dokutreffer .angebot{min-height:60px;padding:.6rem .85rem}
.dokutreffer .angebot h4{font-size:1rem}
.dokutreffer > p{margin:0;padding:.2rem .1rem}

/* ---------- Material / Team ---------- */
.hakenliste li{display:flex;align-items:center;gap:.7rem;min-height:52px;
  padding:.3rem .9rem;border-bottom:1px solid var(--linie)}
.hakenliste li:last-child{border-bottom:none}
/* Der Tagesablauf steht vollstaendig hinter einem Aufklapper; im Normalzustand ist
   keine einzelne Ablaufzeile sichtbar. */
#heuteAblaufMehr > summary{padding:.65rem .9rem}
#heuteAblaufMehr > ul{margin:0}
.hakenliste input[type=checkbox]{width:24px;height:24px;accent-color:var(--gruen);flex:none}
.hakenliste .name{flex:1;min-width:0}
.ritualzeile{padding:.6rem 0;border-top:1px solid var(--linie)}
.ritualzeile > b{display:block;margin-bottom:.4rem}
.ritualzeile .ritualfeld{display:block;margin-bottom:.5rem}
.ritualzeile .ritualfeld .hinweis{display:block;margin-bottom:.15rem}
@media(min-width:640px){
  .ritualzeile{display:grid;grid-template-columns:7rem repeat(var(--slots,2),1fr);gap:.6rem;align-items:center}
  .ritualzeile > b{margin:0}
  .ritualzeile .ritualfeld{margin:0}
}
/* ---------- Notizen im Reiter Team ----------
   Derselbe Kasten wie „Aus dem Team“ auf der Heute-Seite: gleicher Kopf, gleiche
   grüne Kante. Es ist dieselbe Sache an zwei Stellen und soll auch so aussehen. */
/* Derselbe Kasten wie „Aus dem Team“ auf der Heute-Seite – es ist dieselbe Sache,
   einmal zum Lesen und einmal zum Schreiben. Eigen ist hier nur der Fußabstand. */
/* Das Teamboard ist eine Arbeitsflaeche statt drei aufeinanderfolgender
   Zusammenfassungen: oben entsteht ein Eintrag, darunter sind Aufgaben und Notizen
   als zwei klar benannte Spalten gleichzeitig sichtbar. */
.teamboard{--ton:var(--gruen);margin-bottom:1.8rem}
.team-neu{padding:.9rem;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.team-art{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin:0 0 .65rem;padding:0;border:0}
.team-art legend{flex:1 1 100%;width:100%;margin:0 0 .4rem;font-size:.82rem;font-weight:700;color:var(--grau)}
.team-art label{position:relative;cursor:pointer}
.team-art input{position:absolute;opacity:0;pointer-events:none}
.team-art span{display:flex;align-items:center;justify-content:center;min-height:38px;
  padding:.35rem .8rem;border:1px solid var(--linie);border-radius:var(--r-pille);
  background:var(--karte);font-size:.9rem;font-weight:600}
.team-art input:checked + span{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen)}
.team-art input:focus-visible + span{outline:2px solid var(--gruen);outline-offset:2px}
.team-neu-zeile{display:flex;align-items:stretch;gap:.5rem;flex-wrap:wrap}
.team-neu-zeile > #notizNeu{flex:2 1 18rem;width:auto}
.team-termin{display:flex;gap:.5rem;flex:1 1 13rem}
.team-termin > .feld{flex:1 1 9rem;width:auto}
.team-neu-zeile > .knopf{flex:none}
.team-neu > .hinweis{margin:.45rem 0 0;font-size:.82rem;text-wrap:pretty}
.formularfehler{margin:.45rem 0 0;color:var(--rot);font-size:.84rem;font-weight:600}
.team-spalten{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.team-spalte{min-width:0;--ton:var(--rand)}
.team-spalte + .team-spalte{border-top:1px solid var(--linie)}
.team-aufgaben{--ton:var(--aktivierung)}
.team-notizen{--ton:var(--gruen)}
/* Zwei eigene Karten statt zweier Abschnitte in einem Kasten: Farbe im Kopf, ein
   Zeichen davor, dazwischen Luft. Notizen liegen als kleine Zettel da, Aufgaben
   als Abhakliste – verschiedene Dinge sehen verschieden aus. */
.team-spalten{gap:.9rem;padding:.9rem}
.team-spalten > .team-spalte{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;background:var(--karte);box-shadow:var(--schatten-1)}
.team-spalten > .team-spalte + .team-spalte{border-top:1px solid var(--linie)}
.team-spalte .team-spalte-kopf{background:color-mix(in srgb,var(--ton) 12%,var(--karte));border-top:3px solid var(--ton)}
.team-spalte .team-spalte-kopf h3{color:color-mix(in srgb,var(--ton) 70%,var(--text))}
.team-spalte-zeichen{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--ton);color:#fff;font-size:.9rem;font-weight:700}
/* Umbruch statt Quetschen: Kürzel, Uhrzeit und ✕ ließen dem Text auf dem Handy
   keine 90 px, er brach mitten im Wort um. Uhrzeit und ✕ rutschen jetzt darunter. */
/* Kürzel und Text stehen an derselben Kante wie Haken und Text der Aufgaben darunter. */
.team-notizen .notiz{flex-wrap:wrap;gap:.6rem;margin:.4rem;padding:.45rem .6rem;border:0;border-radius:var(--r-m);
  background:var(--karte);border:1px solid var(--linie)}
.team-notizen .notizkuerzel{width:1.75rem;height:1.75rem;font-size:.72rem}
.team-notizen .notiz:last-child{border:1px solid var(--linie)}
/* Handy: Drei Rahmen ineinander (Sand, Karte, Zettel) und das mittig daneben
   stehende Kürzel ließen dem Text kaum 210 von 390 px. Jetzt weniger Rand, das
   Kürzel oben neben der ersten Zeile, Uhrzeit und ✕ in einer Zeile darunter. */
@media(max-width:620px){
  .team-spalten{padding:.5rem;gap:.6rem}
  .team-notizen .notiz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    column-gap:.6rem;row-gap:.1rem;align-items:center;margin:.4rem;padding:.55rem .6rem .3rem}
  .team-notizen .notizkuerzel{grid-row:1 / 3;align-self:start}
  .team-notizen .notiztext{grid-column:2 / 4}
  .team-notizen .notiz .wann{grid-column:2;margin:0}
  .team-notizen .notiz .weg{grid-column:3}
  .team-aufgaben .aufgabe-stift{align-self:flex-start}
}

.team-spalte-kopf{display:flex;align-items:center;gap:.6rem;min-height:52px;
  padding:.55rem .9rem;border-bottom:1px solid var(--linie)}
/* Dasselbe Etikett wie im Kasten-Kopf: eine Art Überschrift für eine Art Abschnitt. */
.team-spalte-kopf h3{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap}
.team-spalte-kopf h3 span{font-size:.8rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--grau);white-space:nowrap}
.team-spalte-kopf .knopf{margin-left:auto}
.team-leer{margin:0;padding:1rem .9rem;color:var(--grau);font-size:.9rem;line-height:1.45;text-wrap:pretty}
.team-aufgaben-fuss{display:flex;align-items:center;gap:.5rem;padding:.35rem .75rem;border-top:1px solid var(--linie)}
.team-aufgaben-fuss > .team-archiv{flex:1;min-width:0;margin:0;border:0}
.team-aufgaben-fuss > .team-archiv > summary{padding:.65rem .2rem}
.team-aufgaben-fuss > .knopf{margin-left:auto;flex:none}
/* Filter der Pinnwand – auf allen Größen, nicht mehr nur am Handy. */
.team-ansichten{display:flex;flex-wrap:wrap;gap:.45rem;padding:.65rem .9rem;border-bottom:1px solid var(--linie)}
.team-ansicht{min-height:40px;padding:.35rem .9rem;border:1px solid var(--rand);border-radius:var(--r-pille);background:var(--karte);color:var(--text);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.team-ansicht.aktiv{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen)}
.team-ansicht:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.team-spalte[hidden]{display:none}
/* Unterreiter im Team: eine eigene Zeile unter der Überschrift, gebaut wie die
   Reiter der Rechtshilfe. Der Unterstrich sitzt auf der Trennlinie der Titelzeile,
   so gehören Reiter und Inhalt sichtbar zusammen und die Überschrift bleibt oben. */
.team-reiter{flex:1 0 100%;display:flex;gap:1.4rem;margin-bottom:calc(-.75rem - 1px)}
.team-reiter [role=tab]{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .1rem;
  border:0;border-bottom:3px solid transparent;background:none;font:inherit;font-weight:600;color:var(--grau);
  cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.team-reiter [role=tab]:hover{color:var(--text);border-bottom-color:var(--rand)}
.team-reiter-zeichen{display:inline-flex}
.team-reiter [role=tab][aria-selected="true"]{color:var(--gruen);border-bottom-color:var(--gruen);font-weight:700}
.team-reiter [role=tab]:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
@media(max-width:620px){ .team-reiter{gap:0} .team-reiter [role=tab]{flex:1;justify-content:center;font-size:.92rem}
  .team-reiter-zeichen{display:none} }
/* Pinnwand: Liste links, „Auf einen Blick“ rechts. Schmal steht der Blick darunter. */
.team-pinnwand{display:grid;gap:1.2rem;align-items:start}
@media(min-width:1000px){ .team-pinnwand{grid-template-columns:minmax(0,1fr) 18rem} }
/* Schmal stehen dieselben Zahlen schon in den Filterchips. */
@media(max-width:999px){ .team-blick{display:none} }
.team-pinnwand > .teamboard{margin-bottom:0}
.team-blick .kasten-kopf h3{margin:0}
.team-blick-liste{margin:0;padding:.4rem .95rem}
.team-blick-liste > div{display:flex;justify-content:space-between;align-items:center;min-height:40px;border-bottom:1px solid var(--linie)}
.team-blick-liste > div:last-child{border-bottom:0}
.team-blick-liste dt{font-size:.95rem}
.team-blick-liste dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.knopf-link{all:unset;cursor:pointer;color:var(--gruen);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.knopf-link:focus-visible{outline:2px solid var(--gruen);outline-offset:2px;border-radius:3px}
/* Im Unterreiter Einstellungen ist der Kasten immer offen; sein Kopf wäre doppelt. */
#teamEinstellungen .einstellkasten > summary{display:none}
.team-archiv{border-top:1px solid var(--linie);margin-top:.3rem}
.team-archiv > summary{cursor:pointer;list-style:none;padding:.75rem .9rem;color:var(--grau);font-size:.88rem;font-weight:600}
.team-archiv > summary::-webkit-details-marker{display:none}
.team-archiv > summary::before{content:'›';display:inline-block;width:1.1rem;color:var(--gruen);font-size:1.1rem}
.team-archiv[open] > summary::before{content:'⌄'}
@media(max-width:620px){
  .team-neu-zeile > #notizNeu,.team-termin,.team-neu-zeile > .knopf{flex:1 1 100%}
  .team-neu-zeile > .knopf{width:100%}
}
/* Tagesüberschrift im Stapel: klebt beim Scrollen oben, damit bei langen Listen
   immer sichtbar bleibt, aus welchem Tag die Zeile unter dem Daumen stammt. */
/* Die Tagesüberschrift stand in --flaeche auf --karte – zwei warme Sandtöne, die
   sich um zwei Prozent Helligkeit unterscheiden. Auf dem Bildschirm war die Zeile
   damit kaum als Überschrift zu erkennen, sie sah aus wie eine leicht verrutschte
   Notiz. Jetzt trägt sie die Hausfarbe: grüner Text auf grünem Ton, oben und unten
   von einer Linie gefasst. Eine Überschrift muss man als Überschrift sehen, bevor
   man sie liest. */

/* Das Kürzel als runde Marke, wie oben in der Kopfzeile – nicht als Fließtext.
   Feste Breite, damit die Texte aller Zeilen an derselben Kante beginnen. */
.notizkuerzel{flex:none;width:2rem;height:2rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gruen-hell);color:var(--gruen);
  font-size:.8rem;font-weight:700;letter-spacing:.02em}
/* Der Löschknopf ist die seltenste Handlung hier und stand trotzdem an jeder Zeile.
   Jetzt zeigt er sich beim Überfahren – und immer, sobald er den Tastaturfokus hat,
   sonst wäre er ohne Maus nicht erreichbar. Auf Geräten ohne Zeiger bleibt er
   sichtbar: Dort gibt es kein Überfahren. */
@media (hover:hover){
  .notiz .weg{opacity:0;transition:opacity .15s}
  .notiz:hover .weg,.notiz .weg:focus-visible{opacity:1}
}
/* Nur für Vorlesegeräte: Das Kürzel steht sichtbar als Marke, die aber aria-hidden
   ist – ohne diesen Zusatz bliebe im Vorlesen offen, von wem die Notiz stammt. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Eine Notiz ist meist ein Halbsatz. Kürzel, Text und Uhrzeit standen trotzdem auf
   zwei Zeilen und ein Knopf mit 40 px Mindesthöhe zog jede Zeile auf gut siebzig
   Pixel – fünf Notizen füllten den halben Bildschirm, bevor der Tag anfing.
   Jetzt eine Zeile; nur ein langer Text bricht um, und dann nur er. */
.notiz{display:flex;align-items:center;gap:.65rem;padding:.55rem .9rem;
  border-bottom:1px solid var(--linie);font-size:.94rem}
.notiz:last-child{border-bottom:none}
.notiz>b{flex:none;color:var(--gruen);font-size:.8rem}
.notiz .notiztext{flex:1 1 12rem;min-width:0;overflow-wrap:break-word}
.notiztext a{color:var(--gruen);text-underline-offset:2px}
.notiz .wann{flex:none;margin-left:auto;color:var(--grau);font-size:.8rem;
  font-variant-numeric:tabular-nums}
/* Eigener Knopf statt .knopf.klein: dessen 40 px Mindesthöhe war der Grund für die
   hohen Zeilen. 34 px bleiben mit dem Zeilenabstand ein brauchbares Tippziel. */
.notiz .weg{flex:none;width:34px;height:34px;align-self:center;padding:0;line-height:1;
  border:none;background:none;color:var(--grau);border-radius:var(--r-s);cursor:pointer}
.notiz .weg:hover,.notiz .weg:focus-visible{color:var(--rot);background:color-mix(in srgb,var(--rot) 12%,var(--karte))}

/* ---------- Wer schreibt gerade? (M3) ----------
   Die Marken sind die eigentliche Anmeldung auf einem Gemeinschaftsgerät: ein Tipp,
   kein Feld. Deshalb sind sie groß, stehen zuerst und sehen antippbar aus – das Feld
   darunter ist für den, der neu ist. */
.kuerzelmarken{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .8rem}
.kuerzelmarke{min-height:44px;min-width:3.2rem;padding:0 .9em;border-radius:var(--r-pille);
  border:1px solid var(--knopf-rand);background:var(--knopf-flaeche);color:var(--knopf-text);
  font:inherit;font-weight:700;letter-spacing:.03em;cursor:pointer;
  transition:background .16s ease, border-color .16s ease}
.kuerzelmarke:hover{background:var(--flaeche-hoch);border-color:var(--grau);color:var(--text)}
.kuerzelmarke.eigen{background:var(--gruen);border-color:var(--gruen);color:var(--auf-gruen)}
:root[data-theme="dark"] .kuerzelmarke.eigen{color:#11161b}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .kuerzelmarke.eigen{color:#11161b}
}

/* Wem gehört das Gerät: zwei Zeilen zum Antippen, keine nackten Radioknöpfe.
   Die Frage entscheidet, wie lange Kürzel und Anmeldung halten – sie muss lesbar
   sein, nicht nur beantwortbar. */
.geraetwahl{border:1px solid var(--linie);border-radius:var(--r-m);padding:.6rem .8rem .7rem;
  margin:1rem 0 .2rem;min-width:0}
.geraetwahl legend{font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau);padding:0 .3rem}
.geraetwahl label{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem .2rem;
  cursor:pointer;text-align:left}
.geraetwahl label + label{border-top:1px solid var(--linie)}
.geraetwahl input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--gruen)}
.geraetwahl b{display:block;font-size:.94rem;font-weight:650}
.geraetwahl .hinweis{display:block;font-size:.8rem;line-height:1.4;margin-top:.1rem}
#anmeldung .geraetwahl{margin:.2rem 0 1.1rem}

/* ---------- Druckfach ----------
   Eine Zeile je Datei: Name als Knopf (er öffnet sie), dahinter wer und wann, rechts
   das Entfernen. Der Name trägt die Handlung, nicht ein zusätzlicher Öffnen-Knopf –
   in einer Liste, in der jede Zeile genau eine Sache tut, ist die Zeile der Knopf. */
.dateiliste{display:flex;flex-direction:column;margin:0}
.dateiliste li{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;
  border-bottom:1px solid var(--linie)}
.dateiliste li:last-child{border-bottom:none}
.dateiname{flex:1;min-width:0;text-align:left;font:inherit;font-weight:650;
  color:var(--gruen);background:none;border:0;padding:0;cursor:pointer;
  overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color .15s}
.dateiname:hover,.dateiname:focus-visible{text-decoration-color:currentColor}
.dateimeta{flex:none;font-size:.8rem;color:var(--grau);font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media(max-width:559px){
  .dateiliste li{flex-wrap:wrap}
  .dateiname{flex:1 1 100%}
  .dateimeta{margin-right:auto}
}
/* Der Knopf für die Dateiwahl ist ein <label> auf einem versteckten <input>: Ein
   Dateifeld sieht in jedem Browser anders aus und lässt sich nicht gestalten.
   Das label muss deshalb aussehen und sich anfühlen wie ein Knopf. */
label.knopf[for="dateiWahl"]{cursor:pointer}
label.knopf[for="dateiWahl"]:focus-within{outline:2px solid var(--gruen);outline-offset:2px}

/* Die Materialliste zeigt je Angebot nur das Besondere. Der Schrank-Aufklapper
   („aus dem Schrank · 8") ist dort ausgeblendet: Grundausstattung kauft niemand ein
   und richtet sie auch nicht her – sie steht ohnehin da. Auf der Detailseite und im
   Ausdruck bleibt sie sichtbar, dort wird nachgeschlagen statt überflogen. */
#materialWoche .materialposten > details:not(.mehrposten){display:none}
/* Das Material einer Woche soll ohne Scrollen auf den Bildschirm passen: weniger Luft
   über dem Titel, Ergänzungen als eine zugeklappte Zeile. */
@media(min-width:900px){ .blatt-inhalt:has(#materialWoche){padding-top:.9rem;padding-bottom:1.2rem} }
.mat-eigen{padding:.7rem 1rem;margin-top:.9rem}
.mat-eigen > summary{cursor:pointer;min-height:28px}
/* Niedrige Rechnerbildschirme (768 px und weniger): etwas kleiner statt scrollen. */
@media(min-width:900px) and (max-height:860px){
  .blatt-inhalt:has(#materialWoche){padding-top:.5rem}
  .blatt-inhalt:has(#materialWoche) > .titelzeile{margin-bottom:.4rem;padding-bottom:.3rem}
  .blatt-inhalt:has(#materialWoche) .wochenwahl{margin-bottom:.4rem}
  .blatt-inhalt:has(#materialWoche) .wochenwahl .tagchip{min-height:40px;padding:.1rem}
  #materialWoche .tag-kopf{padding:.35rem .7rem}
  #materialWoche .slot{padding:.35rem .7rem;gap:.2rem}
  #materialWoche .materialposten{margin-bottom:.25rem}
  #materialWoche .materialposten b{font-size:.9rem;line-height:1.25;margin-bottom:.2rem}
  #materialWoche .marke{font-size:.74rem;padding:.08em .5em}
  #materialWoche .markenreihe{gap:.2rem}
  .mat-eigen{margin-top:.5rem;padding:.45rem .9rem}
}

/* Der Aufklapper für die überzähligen Angebote im Material-Reiter. Er sitzt am Fuß
   des Zeitfensters und sieht aus wie ein Hinweis, nicht wie ein Knopf – geöffnet wird
   er selten. */
.mehrposten{margin-top:.4rem;padding-top:.4rem;border-top:1px dashed var(--linie)}
.mehrposten > summary{padding:.2rem 0;font-size:.85rem;font-weight:600;color:var(--gruen)}
.mehrposten[open] > summary{margin-bottom:.4rem}

/* ---------- Aufklappblöcke im Doku-Formular ----------
   Zugeklappt kostet ein Block eine Zeile statt zwei Bildschirmdritteln; sobald ein
   Häkchen sitzt, bleibt er offen – was angekreuzt ist, darf nicht hinter einem Dreieck
   verschwinden. Zugeklappt startet nur noch die Anpassung: Sie ist die Ausnahme. Das
   Befinden steht offen, weil Stimmung und Verhalten an fast jedem Tag zu sehen sind
   und eine zugeklappte Reihe übersehen statt bewusst leer gelassen wird. */
.dokublock{border:1px solid var(--linie);border-radius:var(--r);padding:.5rem .9rem .2rem;
  margin-bottom:1rem;background:var(--karte)}
.dokublock[open]{padding-bottom:.9rem}
.dokublock > summary{padding:.35rem 0;font-size:.95rem}
.dokublock .summarytext b{font-size:.95rem}
.dokublock-stand{margin-left:auto;flex:none;font-size:.8rem;font-weight:700;
  color:var(--gruen);background:var(--gruen-hell);border-radius:var(--r-pille);
  padding:.15em .6em;font-variant-numeric:tabular-nums}
.dokublock:not(.gefuellt) .dokublock-stand{display:none}
/* „Getan“ statt „gesehen“: Die Anpassungen beschreiben, was die Betreuungskraft
   gemacht hat – im Nachweis eine andere Aussage als eine Beobachtung. Der gelbe
   Anschnitt sagt das, bevor jemand die Überschrift liest. */
.dokublock.getan{border-left:3px solid var(--gelb)}
.dokublock.getan .dokublock-stand{color:var(--gelb);
  background:color-mix(in srgb, var(--gelb) 13%, transparent)}

/* ---------- Wochenvorlagen (M2) ---------- */
.vorlagenliste{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0 0}
.vorlagenliste li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  background:var(--karte);border:1px solid var(--linie);border-left:3px solid var(--gruen);
  border-radius:var(--r-m);padding:.7rem .9rem}
.vorlagen-text{flex:1 1 12rem;min-width:0}
.vorlagen-text b{display:block;font-size:1rem}
.vorlagen-text .hinweis{font-size:.8rem}

/* ---------- Auswertung (M4) ----------
   Kennzahlen als eine Flaeche mit Trennlinien, nicht als sechs schwebende Kacheln:
   Sie gehoeren zusammen und werden am Stueck gelesen. */
.kennwerte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  overflow:hidden;margin-bottom:1.4rem}
@media(min-width:760px){ .kennwerte{grid-template-columns:repeat(3,1fr)} }
/* „DURCHGEFÜHRT“ in Versalien mit Sperrung war auf dem Handy breiter als die Spalte. */
@media(max-width:520px){ .kennwert{padding-inline:.7rem} .kennwert .was{letter-spacing:.06em;hyphens:auto} }
.kennwert{padding:.7rem .9rem .8rem;border-right:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.kennwert .was{display:block;font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grau)}
.kennwert .zahl{display:block;font-size:1.45rem;font-weight:700;letter-spacing:-.03em;
  margin-top:.2rem;font-variant-numeric:tabular-nums;line-height:1.1}
.kennwert .dazu{font-size:.8rem;color:var(--grau);font-variant-numeric:tabular-nums}
.aueberschrift{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grau);margin:1.5rem 0 .6rem;padding-bottom:.35rem;border-bottom:1px solid var(--linie)}
/* Die Verteilung mit Balken: Zahlen allein sagen nicht, ob 12 viel oder wenig ist. */
.averteilung{display:flex;flex-direction:column;gap:.45rem}
.averteilung li{display:grid;grid-template-columns:minmax(9rem,1.2fr) 2fr auto;
  gap:.7rem;align-items:center;font-size:.92rem}
.aname{display:flex;align-items:center;gap:.45rem;min-width:0}
.abalken{display:block;height:8px;border-radius:4px;background:var(--linie);overflow:hidden}
.abalken i{display:block;height:100%;border-radius:4px}
.azahl{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.azahl .hinweis{font-weight:400;font-size:.8rem}
.aliste{display:flex;flex-direction:column}
.aliste li{display:flex;align-items:center;gap:.55rem;padding:.42rem 0;
  border-bottom:1px solid var(--linie);font-size:.92rem}
.aliste li:last-child{border-bottom:none}
.aliste li span{flex:1;min-width:0}
.aliste li b{font-variant-numeric:tabular-nums;flex:none}
.aliste .gut{color:var(--kognition)} .aliste .schlecht{color:var(--rot)}
@media(max-width:559px){
  .averteilung li{grid-template-columns:1fr auto;gap:.3rem .6rem}
  .averteilung .abalken{grid-column:1/-1;order:3}
}

/* ---------- Sofort-Material ----------
   Sechzehn Knöpfe nebeneinander sind eine Wand. Nach Art gruppiert, jede Gruppe mit
   einer Beschriftung darüber, findet man in Sekunden, was gebraucht wird – und das
   ist der ganze Zweck dieses Kastens: Er wird unter Zeitdruck geöffnet. */
/* Die Gruppenfarbe kommt als --ton von der Gruppe selbst (im Programm gesetzt) und
   färbt alles darin: Kante, Titel, Punkt, Symbol, das Tönen beim Überfahren. Ohne
   sie stand die ganze Liste in einem Grau, und beim Suchen unter Zeitdruck sah jede
   Zeile aus wie die nächste. */
.sofortgruppe{--ton:var(--rand);margin-top:1.5rem;
  border-left:3px solid color-mix(in srgb, var(--ton) 55%, transparent);
  padding-left:.8rem}
.sofortgruppe:first-child{margin-top:.3rem}
.sofortgruppe-titel{display:flex;align-items:center;gap:.45rem;
  font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ton);padding-bottom:.4rem;
  border-bottom:1px solid color-mix(in srgb, var(--ton) 30%, var(--linie));
  margin-bottom:.2rem}
.sofortgruppe-titel .punkt{background:var(--ton)}
/* Wie viele Blätter in der Gruppe liegen – rechts, leise, damit der Titel der Titel
   bleibt. */
.sofortgruppe-zahl{margin-left:auto;font-weight:400;letter-spacing:.04em;
  text-transform:none;color:var(--grau);font-variant-numeric:tabular-nums}
.sofortliste{display:grid;grid-template-columns:1fr;margin:0}
@media(min-width:820px){ .sofortliste{grid-template-columns:1fr 1fr;column-gap:1.4rem} }
/* Ab 1200 px eine dritte Spalte: Sechzehn Blätter in zwei Spalten sind acht Zeilen
   hoch, in drei Spalten sechs – und der Kasten steht dann so breit da wie alles
   andere auf der Seite, statt auf halber Breite zu enden. */
@media(min-width:1200px){ .sofortliste{grid-template-columns:1fr 1fr 1fr} }
/* Die ganze Zeile ist der Knopf – ein zusätzlicher „Drucken“-Knopf daneben wäre ein
   zweites Ziel für dieselbe Handlung. Kein Rahmen, kein Hintergrund: In einer Liste
   aus sechzehn Einträgen ist jeder Rahmen ein Strich zu viel. Die Trennlinie
   genügt, und beim Überfahren tönt sich die Zeile. */
.sofortliste li{border-bottom:1px solid var(--linie)}
.sofortliste button{display:flex;align-items:flex-start;gap:.7rem;width:100%;
  padding:.6rem .5rem;text-align:left;font:inherit;color:inherit;
  background:none;border:0;border-radius:var(--r-s);cursor:pointer}
.sofortliste button:hover{background:color-mix(in srgb, var(--ton) 10%, var(--karte))}
.sofortliste button:focus-visible{outline:2px solid var(--ton);outline-offset:-2px}
.sofort-symbol{flex:none;color:color-mix(in srgb, var(--ton) 70%, var(--grau));margin-top:.2rem}
.sofortliste button:hover .sofort-symbol{color:var(--ton)}
.sofort-symbol svg{width:1.25em;height:1.25em;display:block}
.sofort-text{flex:1;min-width:0}
/* Titel und Hinweis müssen sich unterscheiden lassen, ohne dass man beide liest:
   der Titel in Serife und dunkel, der Hinweis kleiner und grau. Vorher trennte die
   beiden nur ein Zehntel Schriftgröße. */
.sofort-text b{display:block;font-family:var(--titel);font-size:1.05rem;font-weight:600;
  line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.sofort-text .hinweis{display:block;font-size:.8rem;line-height:1.4;margin-top:.15rem}
.sofort-zahl{flex:none;font-size:.82rem;font-weight:700;color:var(--grau);
  font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:.15rem}
.sofort-zahl .hinweis{font-weight:400}

/* ---------- Aus dem Team ----------
   Der Kasten muss auf der Heute-Seite auffallen, ohne wie eine Warnung auszusehen:
   Er trägt eine Übergabe, keinen Fehler. Deshalb die Kartenfarbe wie überall, aber
   eine grüne Kante links und ein grüner Kopf – dieselbe Sprache, mit der auch der
   heutige Tag im Wochenplan markiert ist.
   Ist nichts da, nimmt er sich zurück (.leer): kein Grün, keine Kante. Ein leerer
   Kasten, der genauso laut ist wie ein voller, macht das Zeichen wertlos. */
/* ---------- Kasten: ein Bauteil für alle Kästen mit Kopfzeile ---------- */
/* Karte, farbige Kante links, darüber eine getönte Kopfleiste mit Zeichen, Titel in
   Versalien und einer Angabe rechts.
   Vorher hatte jeder Block seine eigene Bauweise: „Aus dem Team“ diesen Kasten, die
   Zeitfenster auf der Heute-Seite eine nackte Karte mit Inline-Abständen, der
   Tagesablauf eine Überschrift über einer nackten Karte, die Wochenpflicht eine
   Karte mit Inline-Rahmen. Untereinander sah das nach drei Anwendungen aus, obwohl
   alle vier dasselbe sind: ein benannter Kasten mit Inhalt. */
.kasten{--ton:var(--rand);
  background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--r);
  box-shadow:var(--schatten-1);overflow:hidden;margin-bottom:1rem}
/* Jeder Kasten ist gleich gebaut: neutrale Karte, heller Kopf, Etikett in Versalien.
   Farbe tragen nur Hinweise, die einen Zustand melden (.melde, die Kacheln
   auf Heute) – eine farbige Kante an jedem Kasten sagte nichts mehr, weil sie überall
   war, und in jedem Reiter in einer anderen Farbe. */
.kasten-kopf{display:flex;align-items:center;gap:.55rem;
  padding:.6rem .9rem;border-bottom:1px solid var(--linie);
  background:var(--flaeche)}
.kasten-kopf h3,.kasten-kopf .kasten-titel{font-size:.8rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;margin:0;border-bottom:none;padding-bottom:0;
  color:var(--text)}
.kasten-marke{font-size:.95rem;line-height:1;flex:none;
  color:var(--grau)}
/* Was rechts in der Kopfleiste steht – die Zahl, die Zeitangabe, das Drucken –
   rückt ans Ende und bleibt Fließtext, kein zweites Etikett. */
.kasten-kopf > .hinweis,.kasten-kopf > .kasten-rechts{margin-left:auto;font-size:.8rem;color:var(--grau);
  font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;font-weight:400}
.kasten-kopf > .knopf.kasten-rechts{font-size:.82rem}
.kasten-inhalt{padding:.9rem}
/* Die erste Zeile im Kasten braucht keine Trennlinie nach oben – der Kopf hat schon eine. */
.kasten .notiz:first-child,
.kasten > .hakenliste > li:first-child{border-top:none}


/* ---------- Aufgaben ----------
   Eine Zeile: Haken links, Text mit seinem Termin darunter, rechts wer. Dieselbe
   Bauart wie die Hakenliste im Tagesablauf, nur mit zwei Zeilen Text – der Termin
   („jeden Donnerstag“) gehört an die Aufgabe und nicht in eine eigene Spalte, sonst
   steht auf dem Handy die halbe Zeile leer. */
.aufgabe{display:flex;align-items:flex-start;gap:.7rem;min-height:52px;
  padding:.55rem .9rem;border-bottom:1px solid var(--linie)}
.aufgabe:last-child{border-bottom:none}
.aufgabe input[type=checkbox]{width:24px;height:24px;accent-color:var(--gruen);
  flex:none;margin-top:.25rem}
.aufgabe .name{flex:1;min-width:0}
.aufgabe .name b{display:block;font-weight:600}
.aufgabe .wann{display:block;font-size:.8rem;color:var(--grau);margin-top:.1rem}
/* Überfällig ist die einzige Stelle, an der die Aufgabenliste laut wird. */
.aufgabe .wann.faellig{color:var(--rot);font-weight:600}
.aufgabe .rechts{flex:none;display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--grau);white-space:nowrap;margin-top:.1rem}
.aufgabe .notizkuerzel{width:1.75rem;height:1.75rem;font-size:.72rem}
/* Abgehakt bleibt stehen, statt zu verschwinden: Wer den Kasten zwei Minuten später
   wieder ansieht, soll sehen, dass es getan wurde – und von wem. */
.aufgabe.fertig .name b{color:var(--grau);text-decoration:line-through}
/* Zwischenüberschrift in einem Kasten – der Tag über einer Notiz, „Überfällig“ über
   einer Aufgabe. Sie gliedert, ohne dass daraus drei Kästen werden, und nimmt den Ton
   ihres Kastens an: In den Notizen ist sie grünstichig, in den Aufgaben ockerstichig,
   gebaut ist sie einmal. Vorher war die eine grün auf Grün und die andere grau auf
   Sand – zwei Bauarten für dieselbe Zeile, und im selben Reiter untereinander. */
.trenner{padding:.38rem .9rem;font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  background:color-mix(in srgb,var(--ton,var(--rand)) 10%,var(--flaeche));
  color:var(--text);
  border-bottom:1px solid var(--linie)}
/* Überfällig ist die Ausnahme: Dort schlägt der Ton des Kastens nicht durch. */
.trenner.spaet{color:var(--rot);background:color-mix(in srgb,var(--rot) 8%,var(--flaeche))}
/* Anlegen im Blatt: eine Zeile, die auf dem Handy umbricht. */
.aufgabe-neu{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 .4rem}
.aufgabe-neu > #aufgabeText{flex:2 1 16rem}
.aufgabe-neu > select{flex:1 1 11rem}
/* Bearbeiten: dieselbe Zeile wie „Neue Aufgabe“, an der Stelle der Aufgabe. */
.aufgabe-bearbeiten{margin:.3rem 0;padding:.6rem .9rem;background:var(--gruen-hell);border-radius:var(--r-s)}
.aufgabe-bearbeiten > #aufgabeBearbText{flex:2 1 16rem}
.aufgabe-stift{flex:none;min-width:40px;padding:0;align-self:center}
.aufgabe-neu > input[type=date]{flex:1 1 9rem}
/* Im Blatt trägt die Zeile keinen Haken – dort wird gepflegt, nicht abgehakt. Der
   Text rückt trotzdem nicht an den Rand: Er soll unter dem Gruppentitel stehen. */
#blattInhalt .sofortgruppe > .aufgabe{padding-left:.5rem}

/* „Aus dem Team“ trägt die Hausfarbe: Es ist die einzige Stelle, an der eine
   Kollegin unmittelbar etwas mitteilt. Nur den Ton – gebaut ist der Kasten wie jeder
   andere. */
.kasten-team{--ton:var(--gruen);margin-bottom:1.6rem}

.protokoll li{padding:.55rem .9rem;border-bottom:1px solid var(--linie);font-size:.9rem}
.protokoll .wann{color:var(--grau);font-size:.8rem}

/* ---------- Anmeldung ---------- */
/* Derselbe Untergrund wie die Anwendung dahinter: zwei warme Lichter auf der
   Seitenfarbe. Vorher lag hier ein grüner Schein, den es sonst nirgends gibt. */
#anmeldung{position:fixed;inset:0;z-index:90;overflow-y:auto;
  background:var(--sand);
  display:flex;align-items:center;justify-content:center;padding:1.5rem}
/* Linksbündig und mit denselben Bausteinen wie der Rest: Beschriftung über dem Feld,
   Feld in Kartenfarbe, ein wichtiger Knopf. Vorher war hier alles mittig gesetzt und
   ohne Beschriftungen – die Startseite sah aus wie ein anderes Programm als das,
   das danach aufging. */
#anmeldung .box{max-width:400px;width:100%;background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--r-l);padding:2rem 1.9rem 1.7rem;
  box-shadow:var(--schatten-3)}
.anmelde-marke{display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem}
.anmelde-marke img{border-radius:11px;flex:none}
.anmelde-marke b{font-family:var(--titel);font-size:1.15rem;font-weight:600;letter-spacing:-.015em}
#anmeldung h1{font-size:1.5rem;margin-bottom:.4rem}
#anmeldung p{color:var(--grau);margin:0 0 1.5rem;font-size:.92rem;line-height:1.5}
#anmeldung .feld{margin-bottom:.9rem}
#anmeldung label.beschriftung{text-align:left}
/* Warum das Kürzel gebraucht wird – zwei Zeilen, die eine Rückfrage ersparen. */
.anmelde-warum{margin:-.5rem 0 1.2rem;font-size:.82rem;line-height:1.45}
#anmeldung .knopf{width:100%}
.anmelde-fuss{margin:1.4rem 0 0 !important;padding-top:1rem;border-top:1px solid var(--linie);
  font-size:.8rem;color:var(--grau)}
/* Das Auge sitzt im Feld, nicht daneben: Eine zweite Spalte würde das Feld schmaler
   machen, und das Kennwort steht mittig. */
.kennwortzeile{position:relative;margin-bottom:.7rem}
.kennwortzeile .feld{margin-bottom:0;padding-right:3rem}
#btnKennwortZeigen{position:absolute;top:0;bottom:0;right:0;width:3rem;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;font-size:1.15rem;line-height:1;
  color:var(--grau);opacity:.75}
#btnKennwortZeigen[aria-pressed="true"]{opacity:1;color:var(--gruen)}
#btnKennwortZeigen .sym,.team-spalte-zeichen .sym,.heute-kachel-zeichen .sym{width:1.15rem;height:1.15rem;display:block}

/* ---------- Rätsel & Runden: das Auswahlblatt ----------
   Dieselben Gruppenkästen wie beim Sofort-Material; darin stehen die Felder
   nebeneinander und rutschen auf dem Handy untereinander. */
.rr-zeile{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:.7rem 0}
.rr-zeile > div{flex:1 1 13rem;min-width:0}
.rr-zahlen,.rr-haken{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.rr-zahl{display:flex;align-items:center;gap:.4rem;letter-spacing:.05em}
.rr-zahl input{width:5rem}
.rr-haken label{display:flex;align-items:center;gap:.4rem;min-height:48px;cursor:pointer;letter-spacing:.05em}
.rr-haken input{width:22px;height:22px;accent-color:var(--gruen)}
.rr-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin:.3rem 0 .6rem}
.rr-block{border-top:1px solid var(--linie);padding:.8rem 0 .2rem}
.rr-block:first-of-type{border-top:0}
.rr-block > b{font-family:var(--titel);font-size:1.05rem}
.rr-block > .hinweis{display:block;margin:.15rem 0 .2rem}

/* ---------- Druckdialog ----------
Ein Dialog für jeden Ausdruck: Auswahl links, Vorschau aller Seiten rechts, unten
Seitenzahl, Dateiname und der Druckknopf. Am Handy untereinander, Knopf immer sichtbar. */
dialog.druckdialog{width:min(1040px,96vw);max-width:none;height:min(820px,92dvh);padding:0;border:1px solid var(--linie);
  border-radius:var(--r-l);background:var(--karte);color:var(--text);box-shadow:var(--schatten-3);overflow:hidden}
dialog.druckdialog[open]{display:flex;flex-direction:column}
dialog.druckdialog::backdrop{background:rgba(15,23,32,.5)}
.dd-kopf{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid var(--linie)}
.dd-kopf h3{font-size:1.2rem;color:var(--gruen);margin:0}
.dd-kopf p{margin:.1rem 0 0}
.dd-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-s);background:var(--gruen-hell);color:var(--gruen);flex:none}
.dd-symbol .sym{width:22px;height:22px}
.dd-zu{margin-left:auto;width:40px;min-height:40px;padding:0}
.dd-körper{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,320px) 1fr}
.druckdialog.ohne-wahl .dd-körper{grid-template-columns:1fr}
.dd-wahl{margin:0;border:0;border-right:1px solid var(--linie);padding:1rem 1.2rem;overflow:auto;min-width:0}
.dd-wahl legend{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grau);padding:0;margin-bottom:.5rem}
.dd-wahl label{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;margin-bottom:.5rem;border:1px solid var(--linie);
  border-radius:var(--r-m);cursor:pointer;background:var(--karte)}
.dd-wahl label:has(input:checked){border-color:var(--gruen);background:var(--gruen-hell)}
.dd-wahl label:has(input:focus-visible){outline:2px solid var(--gruen);outline-offset:2px}
.dd-wahl input{width:20px;height:20px;accent-color:var(--gruen);flex:none;margin-top:.15rem}
.dd-wahl b{display:block}
.dd-wahl .hinweis{display:block;margin-top:.15rem}
.dd-vorschau{position:relative;overflow:auto;background:#e9edf1;min-width:0;min-height:0}
.dd-skala{overflow:hidden}
.dd-vorschau iframe{border:0;display:block;transform-origin:0 0;pointer-events:none;background:#e9edf1}
.dd-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:.8rem 1.2rem;border-top:1px solid var(--linie);background:var(--karte)}
.dd-info{display:grid;gap:.1rem;min-width:0;flex:1}
.dd-info b{font-size:1.05rem}
.dd-info .hinweis{overflow-wrap:anywhere}
.dd-knoepfe{display:flex;gap:.5rem}
.dd-tipp{flex-basis:100%;margin:0}
@media (max-width:760px){
  dialog.druckdialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .dd-körper{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .dd-wahl{border-right:0;border-bottom:1px solid var(--linie);padding:.7rem 1rem;overflow:visible}
  .dd-wahl legend{display:none}
  .dd-wahl .hinweis{display:none}
  .dd-wahl label{padding:.55rem .7rem;margin-bottom:.4rem}
  .dd-fuss{padding:.7rem 1rem}
  .dd-info{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.1rem .8rem;align-items:baseline}
  .dd-knoepfe{flex:1}.dd-knoepfe .knopf{flex:1}
  .dd-tipp{display:none}
}

/* ---------- Verschieben per Antippen ---------- */
dialog#verschiebeDialog{border:1px solid var(--linie);border-radius:var(--r-l);padding:1.2rem;width:min(480px,94vw);
  background:var(--karte);color:var(--text);box-shadow:var(--schatten-3)}
dialog#verschiebeDialog::backdrop{background:rgba(0,0,0,.45)}
dialog#verschiebeDialog h3{font-size:1.15rem;margin-bottom:.2rem}
.verschiebe-tag{display:grid;grid-template-columns:5.5rem repeat(auto-fit,minmax(6.5rem,1fr));gap:.4rem;align-items:center;margin-top:.5rem}
.verschiebe-tag > b{font-size:.95rem}
.verschiebe-tag .knopf{flex-direction:column;gap:0;line-height:1.15}
.verschiebe-tag .knopf .hinweis{font-size:.8rem}
dialog#verschiebeDialog .knopfzeile{display:flex;margin-top:1rem}
dialog#verschiebeDialog .knopfzeile .knopf{flex:1}
.fest-marke{margin-left:.3rem;padding:0;width:28px;min-height:28px;border:1px solid color-mix(in srgb,var(--gelb) 45%,var(--karte));
  border-radius:var(--r-pille);background:color-mix(in srgb,var(--gelb) 10%,var(--karte));color:var(--gelb);
  font:inherit;font-size:.8rem;font-weight:700;cursor:help;white-space:nowrap}
.fest-marke:focus-visible{outline:2px solid var(--gelb);outline-offset:2px}

/* ---------- Druckbereich ---------- */
#aushang{display:none}
dialog#kuerzelDialog{border:1px solid var(--linie);border-radius:var(--r-l);padding:1.4rem;max-width:min(430px,92vw);
  background:var(--karte);color:var(--text);box-shadow:var(--schatten-3)}
dialog#kuerzelDialog::backdrop{background:rgba(0,0,0,.45)}
dialog#kuerzelDialog h3{font-size:1.15rem;margin-bottom:.3rem}
dialog#kuerzelDialog .knopfzeile{display:flex;gap:.5rem;margin-top:.8rem}
dialog#kuerzelDialog .knopfzeile .knopf{flex:1}

@media print{
@font-face{font-family:PlanLato;src:url('/material/schriften/Lato-Regular.woff2') format('woff2'),url('/material/schriften/Lato-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:PlanLato;src:url('/material/schriften/Lato-Bold.woff2') format('woff2'),url('/material/schriften/Lato-Bold.ttf') format('truetype');font-weight:600 900;font-display:swap}

  /* Eigenständiger Monats-Aushang: kein Bildschirmkalender im Druck. */
  #aushang .monatsaushang{--md-tage:5;--md-blau:#1b5a8a;--md-text:#1b232c;--md-grau:#5b6672;--md-linie:#cbd5df;--md-hell:#edf3f8;page:quer;-webkit-print-color-adjust:exact;print-color-adjust:exact;color:var(--md-text);background:#fff;font:10.5pt/1.3 PlanLato,Lato,sans-serif;box-sizing:border-box;min-height:184mm;display:flex;flex-direction:column;break-inside:avoid}
  #aushang .md-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;padding:0 0 5mm;margin:0 0 4mm;border-bottom:1.2mm solid var(--md-blau)}
  #aushang .md-marke{font-size:8pt;text-transform:uppercase;letter-spacing:1pt;color:var(--md-blau);margin:0 0 2mm}
  #aushang .md-kopf h1{font:700 29pt/1.05 Georgia,serif;color:var(--md-blau);margin:0;text-align:left}
  #aushang .md-untertitel{font-size:10pt;color:var(--md-grau);margin:2mm 0 0}
  #aushang .md-ausgabe{display:grid;text-align:right;gap:2mm;flex:none;font-size:9pt;color:var(--md-grau)}
  #aushang .md-ausgabe b{font-size:8pt;letter-spacing:1pt;text-transform:uppercase;color:var(--md-blau)}
  #aushang .md-wochentage,#aushang .md-reihe{display:grid;grid-template-columns:14mm repeat(var(--md-tage),minmax(0,1fr));gap:2mm}
  #aushang .md-wochentage{padding:0 0 2mm;color:var(--md-blau);font-size:9pt}
  #aushang .md-wochentage b{padding:1.5mm 3mm;border-bottom:.4mm solid var(--md-blau);font-weight:700}
  #aushang .md-wochentage>span{font-size:7.5pt;padding-top:2mm;color:var(--md-grau)}
  #aushang .md-woche{margin:0 0 4mm;break-inside:avoid}
  #aushang .md-thema{margin:0 0 2mm 16mm;font-size:9pt;font-weight:700;color:var(--md-blau)}
  #aushang .md-kw{padding:3mm 0;color:var(--md-grau)}#aushang .md-kw b{font-size:12pt;font-weight:700}#aushang .md-kw small{display:block;font-size:7pt;overflow-wrap:anywhere;margin-top:2mm}
  #aushang .md-tag{padding:3mm;background:#fff;border:.3mm solid var(--md-linie);border-radius:2mm;min-height:23mm;overflow-wrap:anywhere}
  #aushang .md-tag h2{font:700 13pt/1.2 Georgia,serif;color:var(--md-blau);padding:0 0 2mm;margin:0 0 2.5mm;border-bottom:.25mm solid var(--md-linie)}
  #aushang .md-angebot+.md-angebot{margin-top:3mm;padding-top:2mm;border-top:.2mm solid var(--md-linie)}
  #aushang .md-zeit{font-size:8pt;line-height:1.2;letter-spacing:.1pt;color:var(--md-grau);margin:0 0 1mm;font-variant-numeric:tabular-nums}
  #aushang .md-tag h3{font:600 10.5pt/1.28 PlanLato,Lato,sans-serif;color:var(--md-text);margin:0;letter-spacing:0;text-transform:none}
  #aushang .md-ausserhalb{background:var(--md-hell);border-color:var(--md-hell)}
  #aushang .md-geschlossen{background:var(--md-hell)}#aushang .md-schliesstag{margin:0;font-size:9pt;color:var(--md-grau)}#aushang .md-schliesstag b,#aushang .md-schliesstag span{display:block;margin:0 0 2mm}
  #aushang .md-leer{font-size:9pt;color:var(--md-grau);font-style:italic;margin:0}
  #aushang .md-fuss{margin-top:auto;padding:3mm 0 0;border-top:.3mm solid var(--md-linie);display:flex;justify-content:space-between;gap:5mm;color:var(--md-grau);font-size:8pt}
  #aushang .monatsaushang.kompakt{font-size:8.5pt}#aushang .kompakt .md-tag{padding:2mm}#aushang .kompakt .md-tag h3{font-size:8.5pt}#aushang .kompakt .md-zeit{font-size:7pt}#aushang .kompakt .md-angebot+.md-angebot{margin-top:2mm;padding-top:1.5mm}

  /* Grundregel: alles weg, nur der Druckbereich bleibt. */
  body > *{display:none !important}
  body > #aushang{display:block !important}
  /* Die Seitenleiste am Rechner und die Leiste unten am Handy geben dem body Innenabstand.
     Auf Papier gibt es beide nicht – der Abstand schob sonst Inhalt auf ein zweites Blatt. */
  html,body{padding:0 !important;margin:0 !important;min-height:0 !important}
  body{background:#fff;color:#000}
  @page{margin:1.2cm}
  #aushang{font:12pt/1.45 Georgia,"Times New Roman",serif;color:#000}
  #aushang h1{font-size:24pt;text-align:center;margin:0 0 .1cm}
  #aushang .zeitraum{text-align:center;color:#444;margin-bottom:.7cm;font-size:12pt}
  #aushang table{width:100%;border-collapse:collapse;table-layout:fixed}

  /* ---------- Der Wochenaushang ----------
     Quer, weil fünf Spalten hochkant nur 36 mm bekommen – zu wenig für einen
     Angebotstitel, den man aus zwei Metern lesen soll. Benannte Seite, damit nur
     dieses Blatt quer läuft: Anleitungen, Arbeitsblätter und die Materialliste
     bleiben hochkant. */
  @page quer{ size: A4 landscape; margin: 1.1cm; }
  #aushang .wochenaushang{page:quer}

  /* Ruhiges Blatt: ein dunkler Tagesbalken, eine helle Zeitspalte, feine Linien
     dazwischen. Der Balken hält die Woche auch auf einem Schwarzweiß-Kopierer
     zusammen; `print-color-adjust` sorgt dafür, dass der Browser die Füllung nicht
     als „Hintergrund sparen“ wegwirft. Serifenlos, weil der Aushang aus Distanz
     gelesen wird und Blockschrift dort ruhiger steht. */
  #aushang .aushangkopf{display:flex;align-items:flex-end;justify-content:space-between;
    gap:.6cm;padding-bottom:.24cm;margin-bottom:.32cm;border-bottom:2.4pt solid #1f2d2a}
  #aushang .aushangkopf .ueber{font-size:9pt;letter-spacing:1.6pt;text-transform:uppercase;
    color:#555;margin-bottom:.06cm}
  #aushang .aushangkopf h1{font-size:28pt;line-height:1;text-align:left;margin:0;
    letter-spacing:-.5pt;font-weight:700;color:#1f2d2a}
  #aushang .aushangkopf .thema{margin-top:.14cm;font-size:12.5pt;color:#1f2d2a}
  #aushang .aushangkopf .thema::before{content:"★ ";font-size:11pt}
  #aushang .aushangkopf .kwblock{text-align:right;line-height:1.15}
  #aushang .aushangkopf .kwblock b{display:block;font-size:22pt;font-weight:700;color:#1f2d2a}
  #aushang .aushangkopf .kwblock span{display:block;font-size:11pt;color:#444;margin-top:.05cm}

  /* Nachbau der Designvorlage „Betreuungsplanung KW39–44 v5“: blauer Kopf, blaue
     Tageszeile, hellblaue Zeitspalte, schwarze Linien, alles mittig. */
  #aushang .wochenaushang{font-family:Lato,Carlito,Calibri,"Helvetica Neue",Arial,sans-serif;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;color:#333}
  #aushang :is(.wochenaushang,.ablaufaushang) .aushangkopf{display:flex;align-items:center;gap:.6cm;margin-bottom:.1cm;padding:0;border:none}
  #aushang :is(.wochenaushang,.ablaufaushang) .aushangkopf .titelblock{flex:1;background:#0060a6;color:#fff;padding:.28cm .45cm .4cm}
  #aushang :is(.wochenaushang,.ablaufaushang) .aushangkopf .ueber{font-size:7pt;letter-spacing:1pt;text-transform:uppercase;
    color:#dbe8f3;margin-bottom:.14cm}
  #aushang :is(.wochenaushang,.ablaufaushang) .aushangkopf h1{font-size:21pt;line-height:1.1;text-align:left;margin:0;font-weight:700;color:#fff}
  #aushang .wochenaushang .aushangkopf .thema{margin:0;flex:0 0 33%;text-align:center;font-size:14pt;font-weight:700;
    text-transform:uppercase;color:#1f78a8}
  #aushang .wochenaushang .aushangkopf .thema::before{content:none}

  /* Die Tabelle füllt das Blatt wie in der Vorlage. */
  #aushang .wochenaushang{display:flex;flex-direction:column;min-height:18.6cm}
  #aushang .wochenaushang table{flex:1;border:.8pt solid #333}
  #aushang .wochenaushang th,
  #aushang .wochenaushang td{border:.6pt solid #333;background:#fff;text-align:center}
  #aushang .wochenaushang thead th{background:#0060a6;color:#fff;padding:.14cm;
    font-size:14pt;font-weight:700;border-color:#333}
  #aushang .wochenaushang .zeitspalte{width:3.3cm}
  #aushang .wochenaushang tbody .zeitspalte{background:#dde9f3;vertical-align:middle;padding:.2cm}
  #aushang .wochenaushang tbody .zeitspalte b{display:block;font-size:11pt;font-weight:700;
    text-transform:uppercase;color:#0060a6}
  #aushang .wochenaushang tbody .zeitspalte span{display:block;font-size:9.5pt;color:#0060a6;margin-top:.08cm}

  #aushang .wochenaushang tbody td{padding:.3cm .2cm;vertical-align:top}
  #aushang .wochenaushang tbody td .kat{display:block;font-size:8.5pt;font-weight:700;color:#1f78a8;margin-bottom:.2cm}
  #aushang .wochenaushang tbody td .kartenbild{display:block;margin:0 auto .3cm;width:3.6cm;height:3.6cm;object-fit:cover}
  #aushang .wochenaushang tbody td b{display:block;font-size:11pt;line-height:1.3;font-weight:700;
    overflow-wrap:break-word;hyphens:auto;color:#333}
  #aushang .wochenaushang tbody td b + .kat{margin-top:.3cm}
  #aushang .wochenaushang tbody td .offen{color:#8a938f;font-size:11pt;font-style:italic}

  #aushang .aushangfuss{display:flex;justify-content:space-between;gap:1cm;margin-top:.3cm;
    padding-top:.14cm;border-top:.8pt solid #1f2d2a;font-size:9.5pt;color:#444}
  #aushang .aushangfuss .stand{white-space:nowrap;color:#666}

  /* ---------- Der frühere Aushang-Stil, weiterhin für alles Übrige ---------- */
  #aushang th{background:#eef3f0;padding:.28cm;font-size:12.5pt;border:1px solid #b0bfb8}
  #aushang td{border:1px solid #b0bfb8;padding:.3cm;vertical-align:top;font-size:12pt;height:3cm}
  #aushang td .zeit{display:block;font-size:9pt;color:#555;margin-bottom:.08cm}
  #aushang td b{font-size:12.5pt;line-height:1.25}
  #aushang td .tagkat{display:block;font-size:9pt;color:#555;margin-top:.1cm}
  /* Der Wochenplan endet mit seiner Seite. */
  #aushang .aushangseite{page-break-after:always;break-after:page}
  /* ---------- Der Tagesablauf ----------
     Hängt neben dem Wochenaushang an derselben Wand, also dieselbe Bauart: Kopfbalken,
     eine Linie je Zeile, keine Kästchen. Vorher lief er über den allgemeinen
     #aushang-Tabellenstil und sah damit aus wie ein Formular – gerahmte Zellen mit
     grauem Kopf. Hochkant, eine Seite, und die Tabelle füllt sie. */
  /* Eine feste Seitenhöhe (A4 hoch, 29,7 cm minus Ränder) statt „mindestens“: Der
     Ablauf soll auf ein Blatt, nicht darüber hinaus. Die Zeilen teilen sich die Höhe,
     `dicht` und `sehrdicht` setzen enger, je nach Zeilen und Textmenge (tagesablaufHtml).
     Keine feste Blatthöhe mehr: Sie lag knapp unter der Seite, und jeder Browser mit
     eigenen Rändern oder Kopf- und Fußzeilen schob den Fuß auf ein zweites Blatt.
     Jetzt ist das Blatt so hoch wie sein Inhalt – kompakte Zeilen, ein halbes bis
     ganzes Blatt, nie mehr. */
  /* Das Blatt bringt sein Format selbst mit: Ohne `size` nimmt der Browser das
     Papier des Druckers (in Letter-Voreinstellung 25,5 cm nutzbar) – dann läuft der
     Fuß auf eine zweite Seite. */
  @page hoch{ size: A4 portrait; margin: 1.2cm; }
  /* Farben und Schrift wie der Wochenplan-Aushang: blauer Kopf, hellblaue
     Zeitspalte mit blauer Schrift, dunkle Linien. Beide hängen nebeneinander. */
  #aushang .ablaufaushang{page:hoch;display:flex;flex-direction:column;
    break-inside:avoid;font-family:Lato,Carlito,Calibri,"Helvetica Neue",Arial,sans-serif;color:#333;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #aushang .ablaufaushang table{border:.8pt solid #333}
  #aushang .ablaufaushang th,#aushang .ablaufaushang td{border:none;background:#fff;
    padding:.1cm .3cm;vertical-align:middle;height:auto;text-align:left}
  #aushang .ablaufaushang tr + tr th,#aushang .ablaufaushang tr + tr td{
    border-top:.6pt solid #333}
  /* Die Uhrzeit als eigene, getönte Spalte, Ende unter dem Anfang: So fluchten alle
     Anfänge untereinander und man liest die Spalte als Zeitleiste. */
  /* Uhrzeit in einer Zeile („08:15–09:00 Uhr“): halbiert die Zeilenhöhe gegenüber
     Anfang über Ende, und die Spalte liest sich trotzdem als Zeitleiste. */
  #aushang .ablaufaushang .ablaufzeit{width:4.3cm;font-weight:700;background:#dde9f3;
    border-right:.6pt solid #333;color:#0060a6;
    font-variant-numeric:tabular-nums;font-size:12pt;line-height:1.2;white-space:nowrap}
  #aushang .ablaufaushang .ablaufzeit span{display:inline;font-size:12pt;font-weight:700;color:#0060a6}
  #aushang .ablaufaushang td b{display:block;font-size:12.5pt;line-height:1.2;color:#333}
  #aushang .ablaufaushang .aushangfuss{border-top-color:#333}
  #aushang .ablaufaushang td .was{display:block;font-size:10pt;color:#444;
    line-height:1.25;margin-top:.02cm}
  #aushang .ablaufaushang.dicht th,#aushang .ablaufaushang.dicht td{padding:.07cm .3cm}
  #aushang .ablaufaushang.dicht .ablaufzeit,#aushang .ablaufaushang.dicht .ablaufzeit span{font-size:11pt}
  #aushang .ablaufaushang.dicht td b{font-size:11.5pt}
  #aushang .ablaufaushang.dicht td .was{font-size:9.5pt}
  /* Beschreibungen höchstens zwei Zeilen – eine lange darf die Zeilen darunter nicht
     vom Blatt schieben. */
  #aushang .ablaufaushang.dicht td .was,#aushang .ablaufaushang.sehrdicht td .was{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #aushang .ablaufaushang.sehrdicht th,#aushang .ablaufaushang.sehrdicht td{padding:.05cm .3cm}
  #aushang .ablaufaushang.sehrdicht .ablaufzeit,#aushang .ablaufaushang.sehrdicht .ablaufzeit span{font-size:10pt}
  #aushang .ablaufaushang.sehrdicht td b{font-size:11pt}
  #aushang .ablaufaushang.sehrdicht td .was{font-size:8.5pt;line-height:1.2}
  #aushang .ablaufaushang.sehrdicht .aushangkopf h1{font-size:22pt}
  #aushang .ablaufaushang.ohnetext td .was{display:none}
  #aushang .ablaufaushang.ohnetext th,#aushang .ablaufaushang.ohnetext td{padding:.03cm .3cm}
  /* Die einzige Seite endet ohne Umbruch – sonst schiebt der Drucker ein leeres Blatt nach. */
  #aushang .ablaufaushang:last-child{page-break-after:auto;break-after:auto}
  /* Wochenrückblick für die Gäste: dieselbe Bauart wie der Tagesablauf, aber Großdruck –
     ein Bild vom Höhepunkt, je Tag ein Absatz, eine Zeile zum Handschreiben. */
  #aushang .rueckblickaushang{gap:.5cm}
  #aushang .rueckblickaushang .rb-hoehe{margin:.2cm auto 0;text-align:center}
  #aushang .rueckblickaushang .rb-hoehe img{display:block;width:8.5cm;height:8.5cm;object-fit:cover;margin:0 auto;border:.8pt solid #333}
  #aushang .rueckblickaushang .rb-hoehe figcaption{margin-top:.2cm;font-size:18pt;font-weight:700;color:#0060a6}
  #aushang .rueckblickaushang .rb-tage p{display:flex;gap:.5cm;margin:0;padding:.2cm 0;border-bottom:.5pt solid #999;font-size:16pt;line-height:1.3}
  #aushang .rueckblickaushang .rb-tage b{flex:0 0 4.4cm;color:#0060a6}
  #aushang .rueckblickaushang .rb-moment{margin-top:.2cm;font-size:16pt}
  #aushang .rueckblickaushang .rb-moment i{display:block;height:1.1cm;border-bottom:.8pt solid #333}
  /* Anleitungen: je Angebot genau eine Seite. Umbruch danach statt davor –
     sonst steht beim Druck nur der Anleitungen eine leere Seite vorweg.
     Die letzte bekommt keinen Umbruch, sonst schiebt der Drucker eine
     leere Seite hinterher. */
  #aushang .anleitung{page-break-after:always;break-after:page;break-inside:avoid;
    font-size:10.5pt;line-height:1.28}
  #aushang .anleitung:last-child{page-break-after:auto;break-after:auto}
  /* Alles Beschreibende läuft zweispaltig: Hintergrund, Ziele, Material und
     Differenzierung untereinander kosten die Seite, die der Ablauf braucht.
     Der Ablauf bleibt einspaltig – er wird beim Angebot Schritt für Schritt gelesen. */
  #aushang .anleitung .spalten{column-count:2;column-gap:.8cm;margin-bottom:.2cm}
  #aushang .anleitung .spalten h4{margin-top:.15cm;break-after:avoid}
  #aushang .anleitung .spalten > *:first-child{margin-top:0}
  #aushang .anleitung h2{font-size:17pt;margin:0 0 .05cm}
  #aushang .anleitung .unter{color:#444;font-style:italic;margin-bottom:.2cm}
  #aushang .anleitung .kopfzeile{font-size:10pt;color:#444;margin-bottom:.28cm;
    border-bottom:1px solid #b0bfb8;padding-bottom:.15cm}
  #aushang .anleitung h4{font-size:11.5pt;margin:.3cm 0 .08cm}
  #aushang .anleitung ul{margin:.1cm 0 .1cm .7cm;padding:0;list-style:disc}
  #aushang .anleitung li{margin:.03cm 0}
  #aushang .anleitung p{margin:.1cm 0}
  /* display:block, und zwar ausdrücklich. Der Bildschirmstil macht .phase ab 640 px
     zu einem Raster aus zwei Spalten (Zeit | Inhalt) – und die Druckseite ist breiter
     als 640 px, die Regel greift also auch hier. Der Ablauf im Ausdruck hat aber drei
     Kinder statt zweier: Zeit, Titel, Liste. Die Liste rutschte damit in die zweite
     Rasterzeile und dort in die 38 mm schmale Zeitspalte – zehn Wörter untereinander,
     und die Anleitung lief auf eine zweite Seite über.
     Auf Papier braucht es das Raster ohnehin nicht: Zeit und Titel stehen in einer
     Zeile, die Punkte darunter. */
  #aushang .anleitung .phase{display:block;margin:.2cm 0;padding-left:.35cm;
    border-left:2px solid #ccd6d1;page-break-inside:avoid;break-inside:avoid}
  #aushang .anleitung .phase .zeit{font-size:9.5pt;color:#555;font-weight:700;
    letter-spacing:.3pt;margin-right:.28cm}
  /* Titel in derselben Zeile wie die Zeitangabe – zusammen sind sie der Kopf des
     Abschnitts, nicht zwei Angaben untereinander. */
  #aushang .anleitung .phase > b{font-size:11pt}

  /* ---------- Materialliste ----------
     Eine Liste zum Abhaken beim Herrichten und beim Einkaufen. Große Schrift, viel
     Weißraum, keine Grautöne, die beim Kopieren verschwinden. */
  #aushang .matliste h2{font-size:14pt;margin:.5cm 0 .12cm;border-bottom:1px solid #b0bfb8;
    padding-bottom:.06cm;break-after:avoid}
  #aushang .matliste h3{font-size:11pt;margin:.24cm 0 .06cm;color:#444;break-after:avoid}
  #aushang .matliste .matangebot{margin:.1cm 0 .02cm;font-size:11.5pt}
  #aushang .matliste ul{margin:.05cm 0 .16cm .8cm;padding:0;list-style:square;font-size:11.5pt}
  #aushang .matliste li{margin:.05cm 0;break-inside:avoid}
  #aushang .matliste .einkauf{list-style:none;margin-left:0}
  #aushang .matliste .einkauf li{border-bottom:1px dotted #b0bfb8;padding:.08cm 0}
  /* Das Kästchen zum Abhaken: Wer einkauft, streicht durch – dafür braucht es Platz. */
  #aushang .matliste .einkauf li::before{content:"";display:inline-block;width:.42cm;height:.42cm;
    border:1px solid #000;margin-right:.24cm;vertical-align:-.06cm}
  #aushang .matliste .einkauf span{color:#555;font-size:9.5pt;display:block;margin-left:.66cm}
  #aushang .matliste .hinweis{font-size:9.5pt;color:#555;margin:.04cm 0 .12cm}

  /* ---------- Arbeitsblätter ----------
     Je Block eine Seite. Das Papier geht mit in die Gruppe, deshalb gelten hier andere
     Regeln als bei der Anleitung: große Schrift, viel Weißraum, kein Grauton der beim
     Kopieren verschwindet. */
  #aushang .arbeitsblatt{page-break-after:always;break-after:page}
  #aushang .arbeitsblatt:last-child{page-break-after:auto;break-after:auto}
  #aushang .ab-kopf{display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:2px solid #000;padding-bottom:.15cm;margin-bottom:.5cm}
  #aushang .ab-kopf b{font-size:17pt}
  #aushang .ab-kopf span{font-size:10pt;color:#444}
  #aushang .ab-hinweis{font-size:9.5pt;color:#555;margin:0 0 .4cm}

  /* Leitungsblatt: Frage links, Lösung rechts – im Stehen lesbar. */
  #aushang .ab-liste{margin:0;padding-left:.9cm;font-size:12.5pt;line-height:1.7}
  #aushang .ab-liste li{margin:.12cm 0;page-break-inside:avoid;break-inside:avoid}
  #aushang .ab-liste .frage{display:inline-block;min-width:9.5cm}
  #aushang .ab-liste .loesung{font-weight:700}

  /* Karten zum Auseinanderschneiden, zwei je Reihe. Wie viele auf ein Blatt passen,
     entscheidet die Seitenhöhe – eine Zahl im Hinweis wäre nach der ersten Änderung
     an der Kartenhöhe falsch. Die Schrift ist bewusst groß: Eine Stationskarte wird
     aus zwei Metern Entfernung gelesen. */
  #aushang .kartengitter{display:grid;grid-template-columns:1fr 1fr;gap:.4cm}
  /* background und box-shadow ausdrücklich weg: Die Klasse .karte trägt auf dem
     Bildschirm eine cremefarbene Fläche und einen Schatten. Beides landete auf dem
     Papier – sechs getönte Kästen je Blatt, die den Toner kosten und beim Kopieren
     grau werden. Auf Papier ist die Karte eine gestrichelte Schnittlinie, sonst nichts. */
  #aushang .kartengitter .karte{border:2px dashed #999;border-radius:.2cm;
    background:none;box-shadow:none;
    min-height:6.4cm;padding:.5cm;display:flex;align-items:center;justify-content:center;
    text-align:center;font-size:19pt;line-height:1.25;font-weight:700;
    /* Die Karten sind mehrzeilig geschrieben – ohne pre-line macht HTML eine Zeile daraus. */
    white-space:pre-line;
    page-break-inside:avoid;break-inside:avoid}

  /* Bingoscheine: zwei je Seite, Zahlen groß genug für unsichere Augen. */
  #aushang .bingogitter{display:grid;grid-template-columns:1fr 1fr;gap:.5cm}
  #aushang .bingokarte{border-collapse:collapse;width:100%;table-layout:fixed;
    page-break-inside:avoid;break-inside:avoid;margin-bottom:.3cm}
  #aushang .bingokarte td{border:1.5px solid #000;text-align:center;vertical-align:middle;
    height:1.5cm;font-size:16pt;font-weight:700;padding:0}
  #aushang .bingokarte td.frei{font-size:13pt}
  #aushang .bingokarte.bild td.lang{font-size:9pt}
  #aushang .bingokarte.bild td{height:2.1cm;font-size:11pt;font-weight:600;
    padding:.1cm;line-height:1.2;word-break:break-word}

  /* ---------- Rätselblätter ----------
     Seitenrahmen wie die Angebotsmappen (material.css .papier): Lato, Akzentstrich oben,
     Marke „BETREUUNGSPLAN“ mit Rolle, blaue Titel, Fuß mit Linie. Gästeblätter groß
     (Aufgaben 17–18 pt) und über die ganze Seite verteilt; die Seiten für die Betreuung
     dichter. Die Farben als eigene Tokens – der Druck kennt die Bildschirmtokens nicht. */
  #aushang .rb,#aushang .rb-leitung{--rb-akzent:#1b5a8a;--rb-text:#1b232c;--rb-neben:#5b6672;
    --rb-linie:#c9d1d9;--rb-weich:#e6f0fa;
    position:relative;padding-top:.5cm;font-family:PlanLato,Arial,sans-serif;color:var(--rb-text);
    page-break-after:always;break-after:page}
  #aushang .rb:last-child,#aushang .rb-leitung:last-child{page-break-after:auto;break-after:auto}
  #aushang .rb::before,#aushang .rb-leitung::before{content:"";position:absolute;top:0;left:0;width:1.8cm;height:.12cm;
    background:var(--rb-akzent);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #aushang .rb-marke{display:flex;align-items:center;gap:.25cm;margin:0 0 .5cm;font-size:8.5pt;font-weight:700;
    letter-spacing:.08em;color:var(--rb-akzent)}
  #aushang .rb-marke i{width:.3cm;height:.3cm;border:.1cm solid var(--rb-akzent);border-radius:50%;box-sizing:border-box}
  #aushang .rb-marke span:last-child{margin-left:auto;font-weight:400;letter-spacing:0;color:var(--rb-neben);font-size:9pt}

  #aushang .rb{display:flex;flex-direction:column;min-height:26.4cm;font-size:17pt;line-height:1.4}
  #aushang .rb-namen{display:flex;gap:1.2cm;font-size:11pt;color:var(--rb-neben);margin-bottom:.6cm}
  #aushang .rb-namen span{flex:1;border-bottom:1px solid var(--rb-neben);padding-bottom:.1cm}
  #aushang .rb h1{font-size:28pt;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--rb-akzent);margin:0 0 .2cm}
  #aushang .rb-auftrag{margin:0 0 .7cm;font-size:16pt;line-height:1.35}
  /* Der Inhalt nimmt den Platz bis zum Fuß; Zeilen verteilen sich darauf statt oben zu kleben. */
  #aushang .rb-inhalt{flex:1;display:flex;flex-direction:column}
  /* width und table-layout zurück: #aushang table gilt für den Wochenaushang und zöge das
     Gitter auf volle Breite – aus quadratischen Feldern würden flache Rechtecke. */
  #aushang .rb-gitter{border-collapse:collapse;margin:0 auto .4cm;width:auto;table-layout:auto}
  #aushang .rb-gitter td{width:1.6cm;height:1.6cm;border:1px solid #8a96a3;text-align:center;
    vertical-align:middle;font-size:26pt;font-weight:700;padding:0}
  #aushang .rb-gitter.g12 td{width:1.2cm;height:1.2cm;font-size:18pt}
  #aushang .rb-gitter.g15 td{width:.96cm;height:.96cm;font-size:15pt}
  /* Lösungsgitter: Wörter auf Fläche, die Füllung bleibt leer. */
  #aushang .rb-gitter.klein td{width:.55cm;height:.55cm;font-size:9.5pt;border-color:var(--rb-linie);
    background:var(--rb-weich);color:var(--rb-text);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #aushang .rb-gitter.klein td.frei{background:none}
  #aushang .rb-satz{text-align:center;font-size:12pt;color:var(--rb-neben);margin:0 0 .4cm}
  #aushang .rb-wortliste{display:flex;flex-wrap:wrap;justify-content:center;gap:.25cm .8cm;font-weight:700;font-size:16pt;margin:0}
  #aushang .rb-zeilen{margin:0;padding-left:1.1cm}
  #aushang .rb .rb-zeilen{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;max-height:19cm}
  #aushang .rb .rb-zeilen li{padding:.15cm 0 .15cm .2cm;font-size:18pt}
  #aushang .rb .rb-zeilen li::marker{color:var(--rb-akzent);font-weight:700}
  #aushang .rb .rb-zeilen li > span:first-child{margin-right:.3cm}
  #aushang .luecke{display:inline-block;min-width:6cm;border-bottom:1.5px solid var(--rb-text)}
  #aushang .rb-salat{font-size:24pt;font-weight:700;letter-spacing:.3em}
  #aushang .rb-wort{font-weight:700}
  #aushang .rb-auswahl{margin:.5cm 0 0;border:.4mm solid var(--rb-akzent);border-radius:.2cm;padding:.35cm .5cm;font-size:17pt}
  #aushang .rb-fuss{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.2cm;
    border-top:.25mm solid var(--rb-linie);font-size:8pt;color:var(--rb-neben)}
  #aushang .rb-fuss b{font-size:11pt;color:var(--rb-akzent)}
  #aushang .rb-sterne{display:grid;grid-template-columns:repeat(3,1fr);gap:.4cm}
  #aushang .rb-sternkasten{border:.3mm dashed #8a96a3;border-radius:.2cm;padding:.25cm;font-size:12pt;
    break-inside:avoid;page-break-inside:avoid}
  #aushang .rb-sternkasten > b{color:var(--rb-akzent)}
  #aushang .rb-stern{display:block;width:100%;height:auto;margin:.1cm 0}
  #aushang .rb .rb-stern{max-height:4.5cm}
  #aushang .rb-stern circle{fill:#000}
  #aushang .rb-stern polyline{stroke:var(--rb-akzent)}
  #aushang .rb-stern text{font:700 9.5px PlanLato,Arial,sans-serif;fill:#000}
  #aushang .rb-sternkasten .luecke{display:block;min-width:0;height:.8cm}
  #aushang .rb-sternkasten .rb-klein{font-size:12pt;color:var(--rb-text);margin:.1cm 0}

  #aushang .rb-leitung{font-size:11pt;line-height:1.45}
  #aushang .rb-leitung h2{font:400 24pt/1.2 Georgia,"Times New Roman",serif;color:var(--rb-akzent);margin:0 0 .1cm}
  #aushang .rb-leitung h3{font-size:11.5pt;margin:.45cm 0 .15cm;color:var(--rb-akzent)}
  #aushang .rb-unter{color:var(--rb-neben);margin:0 0 .5cm}
  /* Ein Rahmen und ein Tonwert links, damit eine Lösung auf einen Blick als Lösung erkennbar ist. */
  #aushang .rb-lteil{break-inside:avoid;page-break-inside:avoid;
    margin:0 0 .4cm;padding:.25cm .5cm;border-left:1mm solid var(--rb-akzent);background:var(--rb-weich);
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #aushang .rb-lteil h3{margin:0 0 .15cm}
  #aushang .rb-lteil .rb-gitter.klein td{background:#fff}
  #aushang .rb-lteil .rb-gitter.klein td.frei{background:none;border-color:transparent}
  #aushang .rb-leitung .rb-zeilen{columns:2;column-gap:.8cm;padding-left:.7cm}
  #aushang .rb-leitung .rb-zeilen li{margin:0 0 .1cm;break-inside:avoid}
  #aushang .rb-leitung .rb-zeilen b{color:var(--rb-akzent)}
  #aushang .marke{letter-spacing:.05em;color:var(--rb-akzent);font-weight:400}
  #aushang .rb-klein,#aushang .rb-leitung .klein{font-size:9.5pt;color:var(--rb-neben)}
  #aushang .rb-fragen{padding-left:.8cm}
  #aushang .rb-fragen li{margin:0 0 .28cm;break-inside:avoid;page-break-inside:avoid}
  #aushang .rb-fragen i{color:#333}
  #aushang .rb-warnung{border:1.5px solid #000;padding:.25cm .35cm}
  #aushang .rb-tabelle{width:100%;border-collapse:collapse;table-layout:auto}
  /* height, background und border ausdrücklich zurück: #aushang th/td gelten dem Wochenaushang
     mit hohen, getönten Zellen – eine Tagesrunde wurde damit eine Seite voller leerer Kästen. */
  #aushang .rb-tabelle th,#aushang .rb-tabelle td{height:auto;background:none;border:0;border-bottom:.5pt solid #bbb;
    padding:.15cm .2cm;text-align:left;vertical-align:top;font-size:11pt}
  #aushang .rb-tabelle th{width:3.2cm}
  #aushang .rb-ansage{padding-left:.9cm;margin:0}
  #aushang .rb-ansage.spalten{columns:2;column-gap:.7cm;font-size:9.5pt}
  #aushang .rb-ansage li{margin:0 0 .08cm;break-inside:avoid}
  #aushang .kaestchen{display:inline-block;width:.3cm;height:.3cm;border:1px solid #000;
    margin-right:.15cm;vertical-align:-1px}
  #aushang .rb-zieh{display:grid;grid-template-columns:repeat(4,1fr)}
  #aushang .rb-zieh span{border:1px dashed #999;height:3cm;display:flex;align-items:center;
    justify-content:center;font:700 15pt Arial,sans-serif}
  #aushang .rb-stufen{padding-left:.5cm}
}

/* Rätsel & Runden: drei Reiter statt einer langen Wand. */
.rr-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.6rem 0 1.2rem}
.rr-tabs button{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-height:56px;padding:.5rem .4rem;
  font:inherit;color:var(--text);background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);cursor:pointer}
.rr-tabs button b{font-size:1.05rem}
.rr-tabs button span{font-size:.78rem;color:var(--grau);text-align:center}
.rr-tabs button[aria-pressed="true"]{background:var(--gruen-hell);border:2px solid var(--gruen)}
.rr-tabs button:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}


/* Planen-Menü im Wochenplan: ersetzt die frühere Knopfreihe über dem Plan.
   Die Liste klappt über dem Plan auf, statt ihn nach unten zu schieben. */
.planmenue{position:relative;flex:0 0 auto}
.planmenue > summary{list-style:none;display:inline-flex;align-items:center;gap:.4em;cursor:pointer;user-select:none}
.planmenue > summary::-webkit-details-marker{display:none}
.planmenue > summary::before{content:none}
.planmenue > summary::after{content:"▾";font-size:.8em;transition:transform .15s}
.planmenue[open] > summary::after{transform:rotate(180deg)}
.planmenue-liste{position:absolute;z-index:30;top:calc(100% + .35rem);left:0;
  display:flex;flex-direction:column;gap:.4rem;min-width:16rem;padding:.6rem;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten-3)}
.planmenue-liste .knopf{width:100%;justify-content:flex-start;text-align:left}
.planmenue-liste .knopf[hidden]{display:none}
.planmenue-liste hr{width:100%;margin:.15rem 0;border:0;border-top:1px solid var(--linie)}
.planmenue-liste .zusatzzeile{margin:0;flex-wrap:wrap}
.planmenue-liste .zusatzzeile .knopf{width:auto}
/* Am rechten Rand klappt die Liste nach links auf, sonst liefe sie aus dem Bild. */
.planmenue.rechts .planmenue-liste{left:auto;right:0}
.planmenue-liste .knopf.drucken{white-space:nowrap}
/* Auf dem Handy liegt das Menü mal links, mal rechts in der umbrochenen Titelzeile:
   Die Liste spannt deshalb über die ganze Zeilenbreite, direkt unter ihrem Knopf
   (top:auto = dort, wo sie im Fluss stünde). */
@media(max-width:699px){
  .abschnitt[data-name="woche"] > .titelzeile{position:relative}
  .planmenue{position:static}
  .planmenue-liste,.planmenue.rechts .planmenue-liste{top:auto;left:0;right:0;min-width:0;margin-top:.35rem}
}

/* ---------- Angebote: Katalog ----------
   Links die Bereiche als feste Leiste, rechts Bildkarten. Die Leiste bleibt beim
   Scrollen stehen; auf dem Handy wird sie eine waagrecht wischbare Reihe über den Karten. */
.katalog{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1rem;align-items:start}
.katalog-seite{position:sticky;top:1rem;display:grid;gap:.6rem}
.katalog-verwalten{width:100%}
.bereichsleiste{display:flex;flex-direction:column;gap:.2rem;
  padding:.45rem;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  box-shadow:var(--schatten-1)}
.bereich-eintrag{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.4rem .65rem;
  border:0;border-radius:var(--r-s);background:none;color:var(--text);font:inherit;font-size:.92rem;
  text-align:left;cursor:pointer}
.bereich-eintrag span{flex:1;min-width:0}
.bereich-eintrag b{font-size:.78rem;font-weight:700;color:var(--grau);font-variant-numeric:tabular-nums}
.bereich-eintrag:hover{background:var(--flaeche)}
.bereich-eintrag:focus-visible{outline:2px solid var(--gruen);outline-offset:1px}
.bereich-eintrag[aria-pressed="true"]{background:color-mix(in srgb,var(--kat,var(--gruen)) 13%,var(--karte));
  box-shadow:inset 3px 0 0 var(--kat,var(--gruen));font-weight:650}
.bereich-eintrag[aria-pressed="true"] b,.bereich-eintrag[aria-current="true"] b{color:var(--kat,var(--gruen))}
/* Beim Scrollen durch „Alle“ geht die Markierung auf den Bereich im Blick über. */
.bereich-eintrag{transition:background .2s ease,box-shadow .2s ease}
.bereich-eintrag[aria-current="true"]{background:color-mix(in srgb,var(--kat) 13%,var(--karte));
  box-shadow:inset 3px 0 0 var(--kat);font-weight:650}
.bereichsleiste:has([aria-current]) .bereich-eintrag[aria-pressed="true"]{background:none;box-shadow:none;font-weight:inherit}
.bereichsleiste:has([aria-current]) .bereich-eintrag[aria-pressed="true"] b{color:var(--grau)}
.bereich-raetsel{--sofort:var(--gruen);display:flex;align-items:center;gap:.6rem;margin:0 0 .4rem;padding:.7rem .75rem;
  border:0;border-radius:var(--r-s);background:var(--sofort);color:#fff;font:inherit;text-align:left;cursor:pointer;
  box-shadow:var(--schatten-2);transition:transform .15s ease,box-shadow .15s ease}
.bereich-raetsel:hover{transform:translateY(-1px);box-shadow:var(--schatten-3)}
.bereich-raetsel:focus-visible{outline:2px solid var(--sofort);outline-offset:2px}
.bereich-raetsel > span:nth-child(2){flex:1;min-width:0}
.bereich-raetsel b{display:block;font-size:1rem}
.bereich-raetsel small{display:block;font-size:.76rem;opacity:.88}
.bereich-raetsel-sym{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:50%;
  background:rgba(255,255,255,.2);font-size:1.1rem}
.bereich-raetsel-pfeil{font-size:1.4rem;line-height:1}
:root[data-theme="dark"] .bereich-raetsel{--sofort:#a5b4ff;color:#11161b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bereich-raetsel{--sofort:#a5b4ff;color:#11161b}}
.bereich-kachel-punkt{width:8px;height:8px;border-radius:50%;background:var(--kat);flex:none}

.kartenraster{min-width:0}
.kartenraster > section + section{margin-top:1.3rem}
.karten-kopf{display:flex;align-items:center;gap:.5rem;margin:0 0 .55rem;font-family:var(--titel);
  font-size:1.02rem;font-weight:600}
.karten-kopf span{font-size:.78rem;font-weight:700;color:var(--kat)}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:.7rem}
.angebotskarte{display:flex;flex-direction:column;gap:.35rem;min-width:0;padding:0 0 .65rem;
  text-align:left;font:inherit;color:var(--text);cursor:pointer;overflow:hidden;
  background:var(--karte);border:1px solid var(--linie);border-top:3px solid var(--kat);border-radius:var(--r);
  transition:box-shadow .16s ease,transform .16s ease}
.angebotskarte:hover{box-shadow:var(--schatten-1);transform:translateY(-1px)}
.angebotskarte:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.angebotskarte-bild{position:relative;display:grid;place-items:center;aspect-ratio:16/10;
  background:linear-gradient(135deg,color-mix(in srgb,var(--kat) 18%,var(--karte)),color-mix(in srgb,var(--kat) 6%,var(--karte)))}
.angebotskarte-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Ohne Foto: der Anfangsbuchstabe in Bereichsfarbe statt einer leeren Fläche. */
.angebotskarte-initial{font-family:var(--titel);font-size:2.6rem;font-weight:600;line-height:1;
  color:color-mix(in srgb,var(--kat) 55%,var(--karte))}
.angebotskarte-stern{position:absolute;top:.4rem;left:.4rem;display:grid;place-items:center;
  width:1.6rem;height:1.6rem;border-radius:50%;background:#f5b301;color:#3a2a00;font-size:.9rem;box-shadow:var(--schatten-1)}
.angebotskarte > b{padding:0 .7rem;font-size:.92rem;font-weight:650;line-height:1.3;overflow-wrap:break-word;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.angebotskarte-meta{display:flex;flex-wrap:wrap;gap:.1rem .6rem;margin-top:auto;padding:0 .7rem;
  font-size:.76rem;color:var(--grau)}
/* Markieren-Modus: Die Karte öffnet nichts, dafür zwei Schalter. Gedrückt heißt
   gefüllt – Bewährt im Stern-Gelb, Einzeln im Grundblau. */
.angebotskarte.markier{cursor:default}
.angebotskarte.markier:hover{transform:none;box-shadow:none}
.markier-knoepfe{display:flex;gap:.3rem;margin-top:auto;padding:0 .5rem}
.markier-knopf{flex:1 1 0;min-width:0;white-space:nowrap;min-height:44px;padding:0 .3rem;border-radius:var(--r-pille);border:1px solid var(--rand);
  background:var(--karte);font:inherit;font-size:.8rem;color:var(--grau);cursor:pointer}
.markier-knopf:hover{border-color:var(--gruen);color:var(--text)}
.markier-knopf[aria-pressed="true"]{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen);font-weight:700}
.markier-knopf.bewaehrt[aria-pressed="true"]{border-color:#e0a800;background:color-mix(in srgb,#f5b301 16%,var(--karte));color:var(--gelb)}
#btnMarkieren[aria-pressed="true"]{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen)}
/* Das Handymenü (Markieren + Verwalten) gibt es nur unter 800 px; darüber zwei einzelne Knöpfe. */
#btnAngebotMenue{display:none}
#btnAngebotMenue:not([popovertarget]){border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen)}
@media(max-width:799px){
  .katalog{grid-template-columns:1fr;gap:.6rem}
  .katalog-seite{position:static}
  #btnMarkieren,.katalog-verwalten{display:none}
  #btnAngebotMenue{display:inline-flex}
  .bereichsleiste{flex-direction:row;overflow-x:auto;padding:.3rem;scrollbar-width:thin}
  .bereich-eintrag{flex:none;white-space:nowrap}
  /* Auf dem Handy der erste Eintrag der wischbaren Reihe – farbig bleibt er, nur kürzer. */
  .bereich-raetsel{flex:none;margin:0;padding:.35rem .7rem .35rem .4rem;white-space:nowrap}
  .bereich-raetsel small,.bereich-raetsel-pfeil{display:none}
  .bereich-raetsel-sym{width:1.7rem;height:1.7rem;font-size:.95rem}
  .karten{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:.5rem}
}

/* Der Tagesablauf klappt über seine Kopfzeile auf; die eigene Aufklappzeile entfällt. */
#heuteAblaufMehr > summary{display:none}
.kasten-umschalter{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:0;margin:-.6rem 0;text-transform:inherit;letter-spacing:inherit;
  border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.kasten-umschalter::after{content:"▸";font-size:1.1em;color:var(--grau);transition:transform .15s}
.kasten-umschalter[aria-expanded="true"]::after{transform:rotate(90deg)}
.kasten-umschalter:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* Angebote verwalten: Liste nach Bereich wie im Katalog. */
.angebot-ma label{display:flex;align-items:center;gap:.5rem;min-height:40px;padding:.3rem 0;border-bottom:1px solid var(--linie);cursor:pointer}
#angebotMaListe section + section{margin-top:.9rem}
.ma-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:.45rem;margin:0;padding:.35rem 0;
  font-size:.88rem;background:var(--karte)}
.ma-kopf span{color:var(--kat);font-size:.78rem}

/* Platzhalter für Angebote ohne Foto: gleich groß wie .bildchen (die Größenregeln
   gelten für beide), Anfangsbuchstabe in Bereichsfarbe wie im Katalog. */
.bildchen-leer{display:grid;place-items:center;overflow:hidden;font-family:var(--titel);font-weight:600;
  font-size:clamp(1rem,2.2vw,2rem);line-height:1;color:color-mix(in srgb,var(--kat) 55%,var(--karte));
  background:linear-gradient(135deg,color-mix(in srgb,var(--kat) 18%,var(--karte)),color-mix(in srgb,var(--kat) 6%,var(--karte)))}
/* Die Knopfreihen der fünf Tage sollen auf einer Linie stehen. Die Zeilen des
   Wochengitters sind schon gleich hoch (subgrid); innerhalb eines Zeitfensters
   stehen die Teile aber oben. Also reserviert jeder Teil, der mal eine, mal zwei
   Zeilen hat, immer zwei: der Titel (min-height:2.6em weiter oben) und der
   Schwerpunkt („Bewegung, Sinne & Wohlbefinden“ bricht um, „Geselligkeit“ nicht).
   Kostet keine Höhe, weil die Zeile ohnehin nach dem längsten Tag bemessen wird. */
.woche .slot-schwerpunkt{min-height:2lh}
/* Belegt zeigt das Angebot selbst, was im Fenster ist – der geplante Bereich stand dort
   nur noch doppelt (und stimmte nicht immer). Leer bleibt er als Hinweis, was passt. */
.woche .slot.belegt .slot-schwerpunkt{display:none}
.bildchen.bildchen-leer{display:grid;font-size:2rem}

/* ---------- Doku: Rechtshilfe ----------
   Lesetext, kein Formular: normale Schriftgröße, klare Zwischenüberschriften,
   Listen statt Absatzblöcken. Links die Bereichskante wie bei den übrigen Klappen. */
.rechtshilfe{padding:.9rem 1.1rem;margin-bottom:1.2rem;border-left:3px solid var(--gruen);
  font-size:.94rem;line-height:1.55;color:var(--text)}
.rechtshilfe-quellen{border-left-color:var(--rand)}
.rechtshilfe > summary{cursor:pointer;line-height:1.4}
.rechtshilfe > summary .hinweis{font-size:.84rem;margin-left:.3rem}
.rechtshilfe[open] > summary{margin-bottom:.4rem}
.rechtshilfe h4{margin:1.25rem 0 .45rem;font-size:1rem;color:var(--gruen)}
.rechtshilfe p{margin:.45rem 0;max-width:72ch}
.rechtshilfe ul{list-style:disc}
.rechtshilfe ol{list-style:decimal}
.rechtshilfe ul,.rechtshilfe ol{margin:.35rem 0 .6rem;padding-left:1.25rem;max-width:72ch}
.rechtshilfe li{margin:.25rem 0}
.rechtshilfe li::marker{color:var(--gruen)}
.rh-regeln li{padding-left:.2rem}
.rh-kasten{padding:.65rem .85rem;border-radius:var(--r-s);background:var(--flaeche);border:1px solid var(--linie)}
.rh-merksatz{margin:1rem 0 .3rem;padding:.75rem 1rem;border-left:4px solid var(--gruen);border-radius:0 var(--r-s) var(--r-s) 0;
  background:var(--gruen-hell);font-weight:550;max-width:72ch}
.rh-tabelle{overflow-x:auto;margin:.5rem 0}
.rh-tabelle table{width:100%;border-collapse:collapse;font-size:.9rem}
.rh-tabelle th,.rh-tabelle td{padding:.5rem .65rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
.rh-tabelle thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
.rh-tabelle tbody th{white-space:nowrap;color:var(--gruen)}
.rh-tabelle td:first-child:not(:only-child){color:var(--grau)}
.rh-kette{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;max-width:none}
.rh-kette span{padding:.3rem .65rem;border-radius:var(--r-pille);background:var(--flaeche);border:1px solid var(--linie);font-size:.86rem;font-weight:600}
.rh-kette span + span::before{content:"→";margin:0 .45rem 0 -.1rem;color:var(--grau);font-weight:400}
.rh-marken{display:flex;flex-wrap:wrap;gap:.35rem;max-width:none}
.rh-marken span{padding:.2rem .6rem;border-radius:var(--r-pille);border:1px solid var(--linie);font-size:.84rem}
.rh-quellen{list-style:none;padding-left:0}
.rh-quellen a{font-weight:600}

/* Wochenplan am Rechner: „Anleitung“ in eigener Zeile über Tauschen und ⋯. In einer
   Reihe mit vier Knöpfen brachen „Anlei-tung“ und „Tau-schen“ mitten im Wort. Die
   Zeile ist niedriger als die Knopfreihe darunter: Nachschlagen tritt zurück. */
@media(min-width:900px){
  .woche .slot-knoepfe:not(.frei){grid-template-columns:1fr auto;row-gap:.2rem}
  .woche .slot-knoepfe:not(.frei) [data-detail]{grid-column:1 / -1;min-height:32px}
  .woche .slot-knoepfe .knopf{white-space:nowrap}
}
/* ---------- Heute: Tagesangebot und kompakte Teamübersicht ---------- */
.nav-symbol{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.heuteTitel{align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.2rem;border-bottom:0;padding-bottom:0}
.heute-titeltext{margin-right:auto;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.9rem;row-gap:.25rem}
.heute-tage{display:flex;align-items:center;gap:.4rem;min-width:0;flex:0 1 35rem}
.heute-tage-liste{display:flex;gap:.45rem;flex:1;min-width:0;overflow-x:auto}
.heute-tag{flex:1 0 3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-height:56px;border:1px solid var(--linie);border-radius:var(--r-s);background:var(--karte);color:var(--text);font:inherit;cursor:pointer}
.heute-tag span{font-size:.85rem;color:var(--grau)}
.heute-tag.gewaehlt{background:var(--gruen);border-color:var(--gruen);color:var(--auf-gruen)}
.heute-tag.gewaehlt span{color:var(--auf-gruen)}
.heute-tag:hover:not(:disabled):not(.gewaehlt){background:var(--gruen-hell)}
.heute-tag:disabled{opacity:.55;cursor:default}
.heute-tag:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.heute-tage .pfeil{min-width:28px;width:28px;min-height:48px;background:transparent;border-color:transparent;box-shadow:none}
.heuteTitel:has(.anderer-tag) .zeitangabe,.heuteTitel:has(.anderer-tag) .zeitangabe b{color:var(--fest)}
.heuteTitel .tag-zurueck{white-space:nowrap}
.tag-zurueck{border-color:var(--fest);color:var(--fest)}
.heute-fokus{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1.1rem 1.8rem;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten-2);
  padding:1.4rem;margin-bottom:1rem;min-height:0}
.heute-fokus.leer{min-height:0}
.heute-fokus.leer .fokus-text{grid-column:1 / -1}
.fokus-kopf{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.fokus-status{display:inline-flex;align-items:center;gap:.45rem;flex:none;padding:.2rem .65rem;
  font-size:.8rem;border-radius:var(--r-pille);background:var(--gruen-hell);color:var(--gruen)}
.fokus-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fokus-status.fertig{color:var(--kognition);background:color-mix(in srgb,var(--kognition) 10%,var(--karte))}
/* 20rem = 320px, auf scharfen Bildschirmen 640 Pixel – die Angebotsbilder haben
   rund 600, werden also kaum hochgerechnet. Quadratisch wie die Bilder selbst,
   damit zwischen Text und Bild keine Lücke bleibt. */
.fokus-bild{grid-column:1;grid-row:2;align-self:start;aspect-ratio:1;position:relative;display:grid;place-items:center;
  border-radius:var(--r-m);overflow:hidden;background:color-mix(in srgb,var(--kat) 8%,var(--karte))}
/* Das Bild ganz zeigen, nicht zuschneiden: Auf den Angebotsbildern ist meist die
   ganze Runde zu sehen, und beschnitten fehlten Köpfe und Hände. Der Rand daneben
   nimmt die Kartenfarbe an, die Bilder haben selbst einen hellen Grund. */
.fokus-bild:has(img){background:var(--karte)}
.fokus-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Seitenränder neben dem Bild: unscharfe Kopie desselben Bildes statt weißer Fläche. */
.fokus-bild{--bild:none}
.fokus-bild:has(img)::before{content:"";position:absolute;inset:-12%;background:var(--bild) center/cover;filter:blur(16px) saturate(1.1);opacity:.85}
/* Kennzeichnung: Die Angebotsbilder sind KI-erzeugt. Dezent, nur auf den großen
   Bildern (Heute, Angebotsdetails); bei den kleinen wäre sie nicht lesbar. */
.fokus-bild:has(img)::after{content:"KI-Bild";position:absolute;right:.4rem;bottom:.4rem;padding:.05rem .4rem;
  border-radius:var(--r-pille);background:rgb(0 0 0 / .25);color:rgb(255 255 255 / .9);font-size:.6rem;pointer-events:none}
.ki-hinweis{margin:.25rem 0 0;font-size:.65rem;color:var(--grau)}
.fokus-bild span{font-family:var(--titel);font-size:5rem;color:color-mix(in srgb,var(--kat) 55%,var(--karte))}
.fokus-text{grid-column:2;grid-row:2;min-width:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.fokus-auge{margin:0;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gruen)}
.fokus-zeit{margin:0;font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums}
.fokus-text h3{margin:0;font-family:var(--titel);font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.fokus-text > .hinweis{margin:0}
.fokus-bereich{align-self:flex-start;margin:0;font-size:.9rem;font-weight:600;padding:.2rem .7rem;border-radius:var(--r-pille);
  color:color-mix(in srgb,var(--kat) 80%,var(--text));background:color-mix(in srgb,var(--kat) 12%,var(--karte))}
/* Rechte Spalte: was man vorher braucht (Material) und was, wenn es anders läuft (Ersatz). */
/* Bild links, dann Text, dann Mitte; die Mitte füllt ihre Spalte nicht ganz aus. */
/* Breite Fenster: Die Textspalte ist nur so breit wie ihr Inhalt (höchstens 44rem), damit
   „Bereitlegen“ nah am Angebot steht; die übrige Breite bleibt rechts in einer leeren Spur. */
.heute-fokus:has(.fokus-mitte){grid-template-columns:17rem minmax(0,1fr) minmax(0,22rem)}
@media(min-width:1400px){.heute-fokus:has(.fokus-mitte){grid-template-columns:17rem fit-content(44rem) minmax(16rem,22rem) minmax(0,1fr)}
  .heute-fokus .fokus-mitte{margin-left:5rem;padding-left:2.5rem}}
.fokus-mitte{grid-column:3;grid-row:2;min-width:0;max-width:22rem;display:flex;flex-direction:column;gap:1.2rem;
  padding-left:1.4rem;border-left:1px solid var(--linie)}
.fokus-ersatz{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.fokus-ersatz > p{flex:1 1 100%}
.fokus-mitte-titel{margin:0 0 .1rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.fokus-aktionen > summary{font-size:.82rem;color:var(--grau);font-weight:500;min-height:44px;padding:.2rem 0}
.fokus-nebenaktionen{display:flex;flex-wrap:wrap;gap:.5rem;padding:.4rem 0}
.fokus-nebenaktionen .echo{margin-left:0}
.fokus-bereit{border:0;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.2rem}
.fokus-bereit legend{padding:0;margin-bottom:.3rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau)}
/* Kompakter als Fließtext: Mehrzeilige Einträge sonst luftig wie ein Absatz. */
.fokus-bereit label{display:flex;align-items:flex-start;gap:.6rem;min-height:32px;padding:.3rem 0;cursor:pointer;
  font-size:.92rem;font-weight:500;line-height:1.35}
.fokus-bereit input{width:18px;height:18px;margin:0;accent-color:var(--gruen);flex:none}
.fokus-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:.3rem}
.fokus-knoepfe .knopf{min-height:46px;padding:0 1rem;font-size:.95rem}
.fokus-knoepfe .knopf[data-detail],.fokus-knoepfe a.knopf,.weitere-zeile .weitere-anleitung{background:var(--karte);border-color:var(--rand);color:var(--gruen);box-shadow:none}
.fokus-knoepfe .knopf[data-detail]:hover,.fokus-knoepfe a.knopf:hover,.weitere-zeile .weitere-anleitung:hover{background:var(--gruen-hell);border-color:var(--gruen)}
.fokus-knoepfe a.knopf{text-decoration:none;display:inline-flex;align-items:center}
.fokus-knoepfe:empty{display:none}
/* Überschrift einer Häkchengruppe (Befinden: Stimmung / Wirkten) – eigene Zeile im Wahlfeld. */
.wahlfeld > .haken-gruppe{flex:1 1 100%;margin:.35rem 0 -.1rem;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau)}
.wahlfeld > .haken-gruppe:first-child{margin-top:0}
/* Die Rückmeldung rückt ans Ende der Reihe und bleibt klein – sie ist Nebensache. */
.fokus-knoepfe .echo{margin-left:auto;align-self:center}
.fokus-knoepfe .echo .knopf{min-height:44px;padding:0 .8rem;font-size:.92rem}
@media(max-width:1099px){
  .heute-fokus:has(.fokus-mitte){grid-template-columns:17rem minmax(0,1fr)}
  .fokus-mitte{grid-column:1 / -1;grid-row:3;max-width:none;padding:1rem 0 0;border-left:0;border-top:1px solid var(--linie);
    flex-direction:row;flex-wrap:wrap;gap:1rem 2rem}
}
@media(max-width:699px){
  .heute-fokus:has(.fokus-mitte){grid-template-columns:minmax(0,1fr)}
  .fokus-mitte{grid-row:4;flex-direction:column}
  .heuteTitel{gap:.6rem;margin-bottom:.85rem}
  .heute-titeltext{width:100%}
  .heute-tage{flex-basis:100%;gap:.15rem}
  .heute-tage-liste{gap:.3rem}
  .heute-tag{min-height:48px;flex-basis:2.6rem;font-size:.85rem}
  .heute-tag span{font-size:.75rem}
  .heute-tage .pfeil{min-width:32px;width:32px;padding:0}
  .heute-fokus{grid-template-columns:minmax(0,1fr);gap:.7rem;padding:.9rem}
  /* 9 statt 13 rem: So stehen auf dem Handy alle drei Knöpfe ohne Scrollen im Bild. */
  .fokus-bild{grid-column:1;grid-row:2;aspect-ratio:auto;height:9rem}
  .fokus-text{grid-column:1;grid-row:3;gap:.45rem}
  .heute-fokus.leer .fokus-text{grid-row:auto}
  .fokus-knoepfe .knopf{flex:1 1 100%}
  .kopfmarke{width:36px;height:36px}
  .kopf h1 span{display:none}
  header.kopf{padding-block:.5rem}
}
/* Der Rest des Tages: eine Zeile je Angebot, mit Knopfreihe für Doku und Rückmeldung. */
/* Größer als die Kacheln darunter und mit Schatten: Es sind Angebote des Tages,
   die Kacheln nur Hinweise. */
.heute-weitere{margin-bottom:1rem;box-shadow:var(--schatten-1)}
.heute-weitere .kasten-kopf{background:var(--karte)}
.heute-weitere .kasten-kopf h3,.heute-ablauf .kasten-kopf h3{font-family:var(--titel);font-size:1.15rem;text-transform:none;letter-spacing:0}
.weitere-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.2rem;padding:.9rem 1.1rem}
.weitere-zeile + .weitere-zeile{border-top:1px solid var(--linie)}
.weitere-wann{flex:0 0 7rem;font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau)}
.weitere-wann small{display:block;font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none}
.weitere-zeile .bildchen{flex:none;width:6rem;height:6rem;object-fit:cover;border-radius:.6rem}
.weitere-text{flex:1 1 11rem;min-width:0;display:flex;flex-direction:column}
.weitere-text b{font-family:var(--titel);font-size:1.3rem;line-height:1.2}
.weitere-status{font-weight:600;white-space:nowrap}
.weitere-status.offen{color:var(--gelb)}
.weitere-aktionen{flex-basis:100%;border-top:1px solid var(--linie);margin-top:.15rem}
.weitere-aktionen > summary{font-size:.8rem;color:var(--grau);font-weight:500;min-height:44px;padding:.2rem 0}
.weitere-aktionen .tunreihe > [data-detail]{display:none}
/* Handy: Das Bild hing einsam rechts neben der Uhrzeit, der Titel darunter. Jetzt
   steht es links, Uhrzeit und Titel daneben. */
@media(max-width:620px){
  .weitere-zeile:has(> .bildchen){display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:.3rem .9rem;padding:.9rem}
  .weitere-zeile > .bildchen{grid-row:1 / 3;width:4.5rem;height:4.5rem}
  .weitere-zeile:has(> .bildchen) > .weitere-wann,.weitere-zeile:has(> .bildchen) > .weitere-text{grid-column:2}
  .weitere-zeile:has(> .bildchen) > .tunreihe{grid-column:1 / -1}
  .weitere-zeile > .weitere-anleitung{grid-column:2;justify-self:start;min-height:44px}
  .weitere-zeile > .weitere-aktionen{grid-column:1 / -1}
  .weitere-zeile .weitere-text b{font-size:1.15rem}
}
/* Kacheln: was aus dem Team kommt und was als Nächstes ansteht. */
/* Abgesetzt vom Angebot darüber: eigene Überschrift mit Linie, mehr Luft, flache
   Kacheln ohne Schatten – Hinweise, keine Arbeitsfläche. Die Zeichen und Farben sind
   die aus dem Team-Reiter: Notiz blau, Aufgabe ocker. */
.heute-hinweise{display:flex;align-items:center;gap:1.2rem;margin:0 0 1.2rem;padding:.6rem 1rem;
  border:1px solid var(--linie);border-radius:var(--r);background:var(--karte);box-shadow:var(--schatten-1)}
.heute-hinweise-titel{margin:0 auto 0 0;font-family:var(--titel);font-size:1.15rem;white-space:nowrap}
.heute-kacheln{display:flex;gap:.6rem;min-width:0}
.heute-kachel{--ton:var(--gruen);display:flex;align-items:center;gap:.55rem;min-width:0;min-height:48px;padding:.35rem .6rem;text-align:left;
  font:inherit;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--r-s)}
.heute-kachel + .heute-kachel{border-left-color:var(--linie)}
.heute-kachel.notiz{--ton:var(--gruen)}
.heute-kachel.aufgabe{--ton:var(--aktivierung)}
/* Der Tagesablauf ist Nachschlagewerk: abgesetzt mit Abstand und gestrichelter Kante
   statt Schatten – er gehört weder zu den Kacheln noch zu den Angeboten. */
.heute-ablauf{margin-top:1rem;box-shadow:var(--schatten-1);border:1px solid var(--linie)}
.heute-ablauf .kasten-kopf{background:var(--karte);border-bottom:none}
.heute-ablauf .kasten-marke{display:none}
.heute-weitere .kasten-kopf,.heute-ablauf .kasten-kopf{padding:.7rem 1rem}
.heute-kachel-zeichen{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  color:var(--gruen);font-size:1.2rem;font-weight:500}
.heute-kachel-inhalt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.heute-kachel:hover{background:var(--gruen-hell)}
.heute-kachel:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.heute-kachel-titel{font-size:.88rem;font-weight:500;color:var(--text)}
.heute-kachel-text{font-size:.75rem;color:var(--rot)}
.heute-kachel-pfeil{margin-left:auto;color:var(--grau);font-size:1.3rem}
@media(max-width:799px){
  .heute-hinweise{display:block;padding:.7rem .8rem}
  .heute-hinweise-titel{font-size:1rem;margin-bottom:.25rem}
  .heute-kacheln{gap:.2rem}
  .heute-kachel{flex:1;padding:.25rem;gap:.25rem}
  .heute-kachel-zeichen{width:1.4rem}
  .heute-kachel-titel{font-size:.8rem}
}
/* Teilen sich mehrere Angebote ein Zeitfenster, steht über jedem seine Zeit. */
.eintrag-zeit{font-size:.8rem;font-weight:600;color:var(--grau);font-variant-numeric:tabular-nums;margin-bottom:-.3rem}

/* Feiertag oder Schließtag: die Karte bleibt im Raster, tritt aber zurück. */
.tag.geschlossen{background:var(--flaeche)}
.tag.geschlossen .leer{color:var(--grau);font-style:italic}
.tag-name{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.tag-name:hover,.tag-name:focus-visible{text-decoration:underline;text-underline-offset:3px}
.tag-menue{max-width:20rem;padding:1rem 1.1rem;border:1px solid var(--rand);border-radius:12px;
  background:var(--karte);color:var(--text);box-shadow:0 8px 30px rgb(0 0 0 / .18)}
.tag-menue p{margin:0 0 .7rem}
.tag-menue .hinweis{margin:.7rem 0 0;font-size:.85rem}
.geschlossen-marke{font-size:.8rem;font-weight:600;color:var(--grau);
  border:1px solid var(--linie);border-radius:var(--r-pille);padding:.05rem .5rem}
.fokus-draussen{margin:0;font-size:.88rem;color:var(--grau)}

/* Handy-Feinschliff (vorgemerkt 24.09.) */
@media(max-width:799px){
  /* Die Bereichsleiste läuft rechts weich aus – so sieht man, dass sie weitergeht. */
  .bereichsleiste{padding-right:2.5rem;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
    scrollbar-width:none}
  /* Notiz und Aufgaben in zwei Zeilen statt nach einem halben Satz abgeschnitten. */
  .heute-kachel-text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    line-clamp:2;-webkit-box-orient:vertical}
}
@media(max-width:480px){
  /* Planen und Drucken passen neben die Überschrift, statt Drucken in eine eigene Zeile zu schieben. */
  .abschnitt[data-name="woche"] > .titelzeile{gap:.4rem}
  .abschnitt[data-name="woche"] > .titelzeile .planmenue > summary.knopf{padding:0 .6em;font-size:.9rem;min-height:44px}
  .abschnitt[data-name="woche"] > .titelzeile #druckMenue{margin-left:auto}
}

/* Wochenrückblick */
.rb-oben{margin:0 0 .15rem!important;font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gruen)}
/* Vier gleich breite Kacheln statt einer Textzeile; am Handy 2 × 2. Der Punkt
   trägt den Zustand, die Zahl die Titelschrift. */
.rb-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem;margin:1.1rem 0 1.4rem}
.rb-zahl{--ton:var(--grau);background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);
  box-shadow:var(--schatten-1);padding:.8rem 1rem .75rem}
.rb-zahl[data-ton="ok"]{--ton:var(--kognition)}
.rb-zahl[data-ton="offen"]{--ton:var(--gelb)}
.rb-zahl[data-ton="kommt"]{--ton:var(--gruen)}
.rb-zahl b{display:block;font-family:var(--titel);font-weight:600;font-size:2.2rem;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rb-zahl span{display:flex;align-items:center;gap:.4rem;color:var(--grau);font-size:.9rem}
.rb-zahl span::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--ton);flex:none}
.rb-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;padding:.55rem 0;border-top:1px solid var(--linie)}
.rb-zeile:first-child{border-top:none}
.rb-wann{width:8rem;color:var(--grau);font-size:.85rem}
.rb-zeile b{flex:1;min-width:8rem}
.rb-notiz{color:var(--grau);font-size:.9rem}
.rb-notiz:empty{display:none}
.rb-knoepfe{display:flex;gap:.4rem;margin-left:auto}
/* Zwei Antworten auf eine Frage: ein Umschalter, nicht zwei Knöpfe. */
.rb-wahl{display:inline-flex;border:1px solid var(--linie);border-radius:8px;overflow:hidden;background:var(--karte)}
.rb-wahl .knopf{border:none;border-radius:0;box-shadow:none;background:none;color:var(--grau)}
.rb-wahl .knopf + .knopf{border-left:1px solid var(--linie)}
.rb-wahl .knopf:hover{background:var(--flaeche);color:var(--text);transform:none}
.rb-wahl [data-rb-erledigt]:hover{color:var(--kognition)}
/* Ausgefallen: Titel tritt zurück, der Grund steht als Etikett. */
.rb-aus b{color:var(--grau);font-weight:600}
.rb-grund{display:inline-block;padding:.1rem .6rem;border-radius:var(--r-pille);
  background:var(--flaeche);border:1px solid var(--linie);font-size:.82rem;color:var(--grau)}
/* Handy: Wann steht über dem Titel statt ihn in eine schmale Spalte zu drücken. */
@media(max-width:480px){
  .rb-wann{width:100%}
  .rb-zeile b{flex-basis:100%}
  .rb-knoepfe{margin-left:0}
  .blatt-inhalt:has(.rb-zahlen) .kasten-kopf h3{white-space:nowrap}
}
.rb-fertig{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;margin:0 0 1rem!important;
  background:color-mix(in srgb,var(--kognition) 8%,var(--karte));border:1px solid color-mix(in srgb,var(--kognition) 25%,var(--linie));
  border-radius:var(--r);color:var(--kognition);font-weight:600}
.rb-fertig span{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--kognition);color:var(--karte);font-size:.9rem}

/* Blatt ohne eigene Knöpfe: Der Kopf trägt nur „Zurück“ – dann kein getönter Balken
   über die ganze Breite, sondern ein leiser Textknopf auf dem Seitengrund. */
.blatt-kopf:has(#blattKnoepfe:empty){background:var(--sand);border-bottom-color:transparent}
.blatt-kopf:has(#blattKnoepfe:empty) #blattZurueck{background:none;border-color:transparent;box-shadow:none;
  color:var(--gruen);font-weight:600;padding-inline:.4em}
.blatt-kopf:has(#blattKnoepfe:empty) #blattZurueck:hover{background:var(--flaeche)}

/* Umschalter der Betreuungsbereiche eines Hauses (nur bei zwei oder mehr). */
.kopf h1 #hausBereiche{display:flex;flex-wrap:wrap;gap:.35rem;overflow:visible;white-space:normal;margin:.15rem 0 .1rem}
.kopf h1 #hausBereiche[hidden]{display:none}
.hb{font:inherit;font-size:.8rem;font-weight:600;line-height:1.2;color:var(--text);background:var(--karte);
  border:1px solid var(--rand);border-radius:var(--r-pille);padding:.35rem .65rem;min-height:2.1rem;cursor:pointer}
@media(min-width:900px){.hb{padding:.35rem .8rem}}
.hb:hover{background:var(--flaeche)}
.hb[aria-pressed="true"]{background:var(--gruen-hell);border-color:var(--gruen);color:var(--gruen);font-weight:700}
.hb:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* Die aktive Einrichtung bleibt auch in der schmalen Desktop-Seitenleiste sichtbar. */
.kopf h1 #kundenName:empty{display:none}
.kopf h1 #kundenName:not(:empty){display:block;white-space:normal;overflow-wrap:anywhere}


/* ---- Monat ---- */
.monat-wahl{display:flex;align-items:center;gap:.6rem}
.monat-wahl b{min-width:9rem;text-align:center}
.monat-stand{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:baseline;margin:.2rem 0 .8rem;padding:.6rem .85rem;
  border:1px solid var(--linie);border-left-width:4px;border-radius:var(--r-m);background:var(--sand)}
.monat-stand.ok{border-left-color:var(--gruen);background:var(--gruen-hell)}
.monat-stand.warn{border-left-color:#8a5a00}
.monat-stand span{color:var(--grau)}
.monat-knoepfe{margin-bottom:.9rem}
.monat-gitter{overflow-x:auto}
.monat-tabelle{width:100%;border-collapse:collapse;table-layout:fixed;min-width:42rem}
.monat-tabelle th,.monat-tabelle td{border:1px solid var(--linie);padding:.35rem .45rem;vertical-align:top;text-align:left;font-size:.88rem}
.monat-tabelle thead th{background:var(--flaeche);color:var(--grau);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.monat-tabelle tbody th{width:6.5rem}
.monat-kw{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--text);cursor:pointer;text-align:left}
.monat-kw span{font-weight:500;font-size:.78rem;color:var(--grau)}
.monat-kw:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.monat-tag{display:block;font-weight:700;font-size:.78rem;color:var(--grau);margin-bottom:.2rem;font-variant-numeric:tabular-nums}
.monat-eintrag{display:block;margin:.15rem 0;padding:.1rem .15rem;font-size:.95rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.monat-eintrag{width:100%;font:inherit;font-size:.95rem;font-weight:600;color:var(--text);text-align:left;background:none;border:0;border-radius:4px;cursor:pointer}
button.monat-eintrag:hover,button.monat-eintrag:focus-visible{background:var(--gruen-hell)}
.monat-offen{display:block;margin:.15rem 0;padding:.1rem .4rem;color:var(--grau);font-style:italic}
button.monat-offen{width:100%;font:inherit;font-style:italic;text-align:left;background:none;border:1px dashed var(--rand);border-radius:4px;cursor:pointer}
button.monat-offen:hover,button.monat-offen:focus-visible{background:var(--gruen-hell);color:var(--text)}
.monat-kat{display:block;margin-top:.05rem;font-size:.72rem;font-weight:400;line-height:1.2;color:var(--grau);overflow:hidden;text-overflow:ellipsis}
.monat-kat .punkt{width:8px;height:8px;margin-right:.3rem}
.monat-zeile{display:flex;align-items:stretch;gap:.2rem}
.monat-zeile .monat-eintrag{flex:1;min-width:0}
.monat-x{flex:none;min-width:1.75rem;background:none;border:0;border-radius:4px;color:var(--grau);font:inherit;cursor:pointer}
.monat-x:hover,.monat-x:focus-visible{background:var(--gruen-hell);color:var(--text)}
.monat-zu{display:block;color:var(--grau)}
.monat-tabelle td.ausserhalb{background:var(--flaeche)}
.monat-tabelle td.vorbei{opacity:.65}
@media(max-width:700px){ .monat-wahl b{min-width:7rem} }
@media(min-width:701px){
  .monat-stand{margin:0 0 .5rem;padding:.4rem .85rem}
  .monat-knoepfe{margin-bottom:.5rem}
  .monat-tabelle thead th:first-child{width:6.5rem}
  .monat-tabelle th,.monat-tabelle td{padding:.25rem .4rem}
  .monat-tag{margin-bottom:.05rem}
  .monat-eintrag{margin:.15rem 0;padding:.05rem .4rem}
  .monat-kat{margin-top:.05rem;line-height:1.15}
}

.einstell-reiter{display:flex;gap:1.4rem;margin:0 0 .9rem;border-bottom:1px solid var(--linie);overflow-x:auto}
.einstell-reiter [role=tab]{min-height:44px;padding:0 .1rem;background:none;border:0;border-bottom:2px solid transparent;
  font:inherit;color:var(--grau);cursor:pointer;white-space:nowrap}
.einstell-reiter [role=tab]:hover{color:var(--text);border-bottom-color:var(--rand)}
.einstell-reiter [role=tab][aria-selected="true"]{color:var(--gruen);border-bottom-color:var(--gruen);font-weight:700}
.einstell-reiter [role=tab]:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.einstellgruppe[hidden]{display:none}

/* ---- Gute Nachrichten ---- */
.nachrichten{margin-top:1.2rem;padding:1rem}
.nachrichten-kopf h3{margin:0 0 .2rem;font-family:var(--titel);font-size:1.15rem;text-transform:none;letter-spacing:0}
.nachrichten-kopf{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
.nachrichten-liste{margin:1rem 0 0;padding:0;list-style:none;counter-reset:n;display:grid;gap:.7rem}
.nachrichten-liste li{counter-increment:n;padding:.7rem .9rem .7rem 2.6rem;position:relative;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--karte)}
.nachrichten-liste li::before{content:counter(n);position:absolute;left:.8rem;top:.65rem;font-weight:700;color:var(--gruen);font-variant-numeric:tabular-nums}
.nachrichten-liste b{font-size:1.1rem;line-height:1.35}
.nachrichten-liste p{margin:.3rem 0;font-size:1.05rem;line-height:1.5}
.nachrichten-blatt ol{padding-left:1.4rem}.nachrichten-blatt li{margin:0 0 1rem;font-size:15pt;line-height:1.45}
.nachrichten-blatt li p{margin:.2rem 0}.nachrichten-blatt li span{font-size:10pt;color:#555}

/* ---- Schließtage ---- */
.schliess-neu{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.6rem;align-items:end;margin:.4rem 0 .6rem}
.schliess-neu .knopf{align-self:end}
.schliess-chips{display:flex;flex-wrap:wrap;gap:.4rem}

/* Monat am Desktop: weiße Karte, Haarlinien, Farbe nur als Punkt der Kategorie. */
@media(min-width:701px){
  .monat-tabelle{border-collapse:separate;border-spacing:0;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-m);overflow:hidden}
  .monat-tabelle th,.monat-tabelle td{border:0;border-bottom:1px solid var(--linie);border-right:1px solid var(--linie)}
  .monat-tabelle tr>:last-child{border-right:0}
  .monat-tabelle tbody tr:last-child>*{border-bottom:0}
}

/* Monat am Rechner: Die Tabelle streckt sich auf die freie Fensterhöhe, die Wochen
   werden höher statt unten Leerraum zu lassen. Reicht der Platz nicht (viele Einträge,
   kleines Fenster), wächst sie wie bisher – gestreckt wird nur, nie gequetscht. */
@media(min-width:1101px) and (min-height:640px){
  main:has(>.abschnitt[data-name="monat"][data-aktiv]){padding-bottom:1rem}
  .abschnitt[data-name="monat"][data-aktiv]{display:flex;flex-direction:column;height:calc(100dvh - 2rem)}
  .monat-gitter{flex:1;min-height:0;overflow:visible}
  .monat-tabelle{height:100%}
}
/* Größere Schrift erst, wenn die Höhe sicher reicht – kleine Fenster scrollen sonst früher. */
@media(min-width:1101px) and (min-height:860px){
  .monat-tabelle td,.monat-tabelle tbody th{padding:.45rem .55rem}
  .monat-tag{font-size:.85rem;margin-bottom:.2rem}
  button.monat-eintrag,.monat-eintrag{font-size:1rem}
  button.monat-offen{padding:.25rem .5rem}
  .monat-kat{font-size:.76rem}
}

/* Monat auf dem Handy: eine Karte je Woche, darin je Tag eine Zeile – keine gequetschte Tabelle. */
@media(max-width:700px){
  .monat-gitter{overflow:visible}
  .monat-tabelle,.monat-tabelle tbody,.monat-tabelle tr,.monat-tabelle th,.monat-tabelle td{display:block;min-width:0;width:auto}
  .monat-tabelle thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .monat-tabelle tr{margin:0 0 .8rem;border:1px solid var(--linie);border-radius:var(--r-m);overflow:hidden;background:var(--karte)}
  .monat-tabelle th,.monat-tabelle td{border:0}
  .monat-tabelle tbody th{width:auto;background:var(--flaeche);padding:.5rem .7rem}
  .monat-kw{flex-direction:row;align-items:baseline;gap:.6rem}
  .monat-tabelle td{padding:.5rem .7rem;border-top:1px solid var(--linie)}
  .monat-tabelle td.ausserhalb{display:none}
  .monat-tabelle td::before{content:attr(data-tag);display:block;font-size:.8rem;color:var(--grau);text-transform:uppercase;letter-spacing:.04em}
  .monat-tag{display:inline;margin-right:.4rem}
  .monat-eintrag{white-space:normal}
}

/* ---- Zeitungsansicht der Nachrichten ---- */
.nachrichten-liste{display:block;column-gap:2rem;column-rule:1px solid var(--linie)}
@media(min-width:900px){ .nachrichten-liste{column-count:2} }
.nachrichten-liste li{counter-increment:none;position:static;padding:0 0 1rem;margin:0 0 1rem;border:0;border-bottom:1px solid var(--linie);border-radius:0;background:none;break-inside:avoid}
.nachrichten-liste li::before{content:none}
.nachrichten-liste .zeitung-kopf{column-span:all;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1rem;
  padding:0 0 .5rem;border-bottom:3px double var(--text);margin-bottom:1.2rem}
.zeitung-kopf b{font-family:var(--titel);font-size:1.9rem;font-weight:700;letter-spacing:.01em}
.zeitung-kopf span{color:var(--grau);font-size:.95rem}
.zeitung-ressort{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gruen);margin-bottom:.2rem}
.nachrichten-liste h4{margin:0 0 .35rem;font-family:var(--titel);font-size:1.3rem;line-height:1.25}
.nachrichten-liste .aufmacher h4{font-size:1.65rem}
.nachrichten-liste li p{margin:.3rem 0;font-size:1.05rem;line-height:1.55}
.zeitung-fuss{display:block;font-size:.85rem;color:var(--grau);margin-top:.3rem}
.nachrichten-auswahl{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;margin-top:.8rem;padding:.6rem .8rem;border:1px solid var(--linie);border-radius:var(--r-m);background:var(--gruen-hell)}
.nachrichten-auswahl[hidden]{display:none}
/* Zeitungsseite im Fenster: breiter als die übrigen Dialoge, damit zwei Spalten Platz haben. */
.nachrichten-dialog{width:min(1100px,94vw);max-width:min(1100px,94vw)}
.nachrichten-dialog .nachrichten-auswahl{position:sticky;top:4.2rem;z-index:1;margin:0 0 1rem}
.nachrichten-dialog .nachrichten-liste{margin-top:0}
.nachrichten-auswahl .hinweis{margin:0 auto 0 0;font-weight:700;color:var(--text)}
.zeitung-aktionen{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:.5rem}
.zeitung-quelle{text-decoration:none;color:var(--gruen);font-weight:700}
.zeitung-wahl{display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;cursor:pointer}
.zeitung-wahl input{width:1.1rem;height:1.1rem;accent-color:var(--gruen)}
.zeitung-quelle:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.nachrichten-liste details summary{cursor:pointer;color:var(--gruen);font-weight:700}
@media(max-width:560px){nav.reiter button{font-size:.74rem}}

/* Druckmaterial eingebettet: füllt den Platz unter dem Kopf; Mobil bleibt Platz für die untere Leiste. */
.material-rahmen{display:block;width:100%;border:0;height:calc(100dvh - 8rem);min-height:480px;background:transparent}
@media(max-width:900px){.material-rahmen{height:calc(100dvh - 11rem)}}

/* Untere Leiste am Handy: Das Wochen-Kürzel drückte „Woche“ nach oben; die KW steht in der Wochenansicht. */
@media(max-width:899px){nav.reiter .nav-kw{display:none}}

/* ---- Einstellungen: jede Gruppe ist eine eigene Karte ----
   Vorher lagen vier Reiter, ein Rahmenkasten und darin Aufklapper mit Trennlinien
   übereinander – drei Ebenen für eine Seite. Jetzt trägt der Reiter die Gliederung,
   jede Gruppe steht als Karte darunter, und Zwischenüberschriften gliedern innerhalb. */
.einstellkasten{background:none;border:0;box-shadow:none;overflow:visible;margin-bottom:0}
.einstellkasten > .einstellgruppe{margin:0 0 .9rem;padding:0 1.1rem;border:1px solid var(--linie);
  border-radius:var(--r);background:var(--karte)}
.einstellkasten > .einstellgruppe[open]{background:var(--karte)}
.einstellkasten > .auswertung{border:1px solid var(--linie);box-shadow:none}
.einstellgruppe>summary{padding:1rem 1.6rem 1rem 0;font-size:1.08rem;font-weight:700;
  position:relative;gap:.1rem .75rem}
.einstellgruppe[open]>summary{border-bottom:1px solid var(--linie)}
.einstellgruppe>summary>.hinweis{font-size:.86rem;font-weight:400;flex:1 1 100%}
.einstellgruppe>summary::after{position:absolute;right:0;top:1.35rem;translate:none}
.einstellgruppe[open]>summary::after{transform:rotate(180deg)}
.einstellgruppe>.gruppeninhalt{padding:1rem 0 1.2rem}
/* Zwischenüberschriften: Satzschrift statt kleiner Versalien, durch Haarlinie getrennt. */
.einstellgruppe .gruppeninhalt > label.beschriftung,
.einstellgruppe #vorrat > label.beschriftung{font-size:1rem;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--text);margin:1.3rem 0 .25rem !important;
  padding-top:1.1rem;border-top:1px solid var(--linie)}
.einstellgruppe .gruppeninhalt > label.beschriftung:first-child{border-top:0;padding-top:0;margin-top:0 !important}
.einstellgruppe .gruppeninhalt > .hinweis,#vorrat > .hinweis,.einstellgruppe .formzeile > .hinweis{
  max-width:68ch;font-size:.88rem;line-height:1.5;margin-top:0 !important}
.einstellgruppe .formzeile > .beschriftung{font-size:.92rem;font-weight:700;text-transform:none;
  letter-spacing:0;color:var(--text)}
#ablaufBlock{padding-top:1rem;border-top:1px solid var(--linie)}
/* Speichern gibt es nur dort, wo es etwas zu speichern gibt. */
.einstellkasten[data-bereich="auswertung"] > .speicherleiste,
.einstellkasten[data-bereich="daten"] > .speicherleiste{display:none}
.einstellkasten > .speicherleiste{margin:0 0 .9rem;padding:.75rem 1.1rem;border:1px solid var(--linie);
  border-radius:var(--r);background:var(--karte);box-shadow:var(--schatten-1)}
/* Kennzahlen der Auswertung als einzelne Kacheln, ohne leere Restzelle. */
.auswertung .kennwerte{gap:.6rem;background:none;border:0;border-radius:0;overflow:visible}
.auswertung .kennwert{border:1px solid var(--linie);border-radius:var(--r-m);background:var(--flaeche);
  padding:.8rem .95rem}
.auswertung .kennwert .zahl{font-size:1.6rem}
@media(max-width:559px){
  .einstell-reiter{gap:.8rem;justify-content:space-between}
  .einstell-reiter [role=tab]{font-size:.88rem;padding:0}
  .einstellkasten > .einstellgruppe{padding:0 .9rem}
}

/* ---- Einstellungen: Umschalter oben, Teilnavigation links, Karten (Entwurf A, 26.10.2026) ---- */
.einstell-reiter{display:inline-flex;gap:0;padding:4px;margin:0 0 1.1rem;border:0;border-radius:var(--r-pille);
  background:color-mix(in srgb,var(--rand) 35%,var(--sand));max-width:100%}
.einstell-reiter [role=tab]{min-height:40px;padding:0 1.1rem;border:0;border-radius:var(--r-pille);color:var(--grau);font-weight:700}
.einstell-reiter [role=tab]:hover{color:var(--text);background:none}
.einstell-reiter [role=tab][aria-selected="true"]{background:var(--karte);color:var(--gruen);box-shadow:var(--schatten-1)}
.einstkarte,.einstellkarte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);padding:1.1rem 1.25rem 1.25rem;margin:0 0 .9rem;scroll-margin-top:1rem}
.einstellkarte:first-of-type{border-top:1px solid var(--linie)}
.karte-titel{margin:0;font-size:1.05rem}
.karte-unter{margin:.15rem 0 .8rem}
.einstellkarte > .beschriftung:first-of-type{margin-top:.4rem}
#vorrat > .beschriftung:first-child{display:none}
#vorrat > .hinweis:first-of-type{margin-top:0}
.einstellkasten > .speicherleiste{position:sticky;bottom:0;margin:0;padding:.75rem 1.25rem;background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);box-shadow:var(--schatten-2)}
.gefahrenkarte{border-color:color-mix(in srgb,var(--rot) 35%,var(--linie))}
.gefahrenkarte .karte-titel{color:var(--rot)}
.gefahr-zeile{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:.6rem}
.gefahr-zeile > div{flex:1 1 20rem}
.gefahr-zeile .hinweis{margin:.15rem 0 0}
@media(max-width:899px){
  .einstellkarte{padding:1rem}
}
/* Handy: alle vier Bereiche sichtbar statt seitlich wegscrollen („Daten & Zugang“ war abgeschnitten). */
@media(max-width:559px){ .einstell-reiter{display:grid;grid-template-columns:repeat(4,auto);justify-content:stretch}
  .einstell-reiter [role=tab]{padding:.2rem .45rem;font-size:.82rem;line-height:1.15;white-space:normal;text-align:center} }
/* Ungeprüft: an der Kachel ein Zeichen oben rechts, die Anzahl einmal im Wochenkopf. */
.eintrag-block{position:relative}
/* Links oben auf der Bildecke: rechts läge es über dem Titelende. */
.ungeprueft{position:absolute;top:.25rem;left:.25rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;
  border-radius:var(--r-pille);background:var(--karte);color:var(--gelb);box-shadow:0 0 0 1px color-mix(in srgb,var(--gelb) 40%,var(--linie))}
.ungeprueft svg,.ungeprueft-zahl svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ungeprueft-zahl{display:inline-flex;align-items:center;gap:.3rem;margin-left:.35rem;padding:.05rem .55rem;border-radius:var(--r-pille);
  background:color-mix(in srgb,var(--gelb) 12%,var(--karte));color:var(--gelb);font-size:.82rem;font-weight:650;white-space:nowrap;vertical-align:middle}
.ungeprueft-zahl[hidden]{display:none}

/* ---- Einstellungen „Einstellungszeilen“ (Variante 2, gewählt 27.10.2026) ----
   Links Beschriftung und Erklärung, rechts das Feld; Kartentitel in der Titelschrift mit
   Hairline darunter. Zeitfenster als Tabelle mit ausgerechneter Dauer. */
.einstellkarte .karte-titel{font-family:var(--titel);font-size:1.2rem;font-weight:700;color:var(--text);padding-bottom:.6rem;border-bottom:1px solid var(--linie);margin-bottom:.2rem}
.einstellkarte .karte-unter{margin-top:.6rem}
.einstellkarte label.beschriftung{text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--text)}
#e-wochenrahmen{display:grid;grid-template-columns:1fr 16rem;column-gap:1.5rem;align-items:start}
#e-wochenrahmen > *{grid-column:1/-1}
#e-wochenrahmen label[for=bundesland]{grid-column:1;margin-top:1rem!important}
#e-wochenrahmen label[for=bundesland] + .hinweis{grid-column:1;margin:0!important}
#e-wochenrahmen #bundesland{grid-column:2;grid-row:span 2;align-self:center;margin-top:1rem}
#e-regeln .formgitter.zwei{grid-template-columns:1fr;gap:0}
#e-regeln .formzeile{display:grid;grid-template-columns:1fr 6rem;column-gap:1.5rem;padding:.8rem 0;border-top:1px solid var(--linie)}
#e-regeln .formzeile:first-child{border-top:0}
#e-regeln .formzeile label{grid-column:1;margin:0}
#e-regeln .formzeile input{grid-column:2;grid-row:1/span 2;align-self:center;text-align:center;font-variant-numeric:tabular-nums}
#e-regeln .formzeile .hinweis{grid-column:1;margin:.2rem 0 0!important;max-width:42rem}
#gaesteFelder.formgitter.zwei{grid-template-columns:repeat(5,minmax(0,6rem));gap:0;border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;width:max-content;max-width:100%}
#gaesteFelder .formzeile{border-left:1px solid var(--linie);padding:.5rem .6rem;text-align:center}
#gaesteFelder .formzeile:first-child{border-left:0}
#gaesteFelder label{text-align:center}
#gaesteFelder .feld{text-align:center;border-color:transparent;background:var(--sand);font-variant-numeric:tabular-nums}
#gaesteFelder .feld:focus{border-color:var(--gruen)}
/* Zeitfenster: Name | 10:00 – 11:45 | Dauer | wochenweise – jede Zeile gleich ausgerichtet */
#slotFelder{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.zeitkopf,#slotFelder .zeitzeile{display:grid;grid-template-columns:minmax(10rem,20rem) 16.2rem 7rem 1fr;column-gap:1.25rem;align-items:center;padding:.55rem .9rem}
.zeitkopf{background:var(--sand);font-size:.8rem;font-weight:700;color:var(--grau);border-bottom:1px solid var(--linie)}
#slotFelder .zeitzeile{margin:0;border-top:1px solid var(--linie);flex-wrap:nowrap}
#slotFelder .zeitzeile:nth-child(2){border-top:0}
#slotFelder .zeitzeile .feld{min-width:0}
#slotFelder [data-slotname]{font-weight:600;border-color:transparent;background:transparent;padding-inline:.4rem;margin-left:-.4rem}
#slotFelder [data-slotname]:hover,#slotFelder [data-slotname]:focus{border-color:var(--rand);background:var(--karte)}
.zeitspanne{display:inline-flex;align-items:center;gap:.4rem;color:var(--grau)}
.zeitspanne input[type=time]{width:7.2rem;flex:none;font-variant-numeric:tabular-nums}
.zeitdauer{font-size:.88rem;color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap}
.zeitart{justify-self:end}
/* Auswertung: Kennzahlen als Tabelle links, Bereiche rechts */
#auswertung{display:grid;grid-template-columns:minmax(16rem,22rem) 1fr;column-gap:2rem;align-items:start}
#auswertung > *{grid-column:1/-1}
#auswertung > .kennwerte{grid-column:1;grid-row:2 / span 3;display:block}
#auswertung > .aueberschrift:first-of-type{grid-column:2;margin-top:0}
#auswertung > .aueberschrift:first-of-type + *{grid-column:2}
#auswertung .kennwert{display:flex;align-items:baseline;gap:.5rem;background:none;border:0;border-radius:0;border-top:1px solid var(--linie);padding:.55rem 0;min-height:0}
#auswertung .kennwert:first-child{border-top:0}
#auswertung .kennwert .was{flex:1;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--text)}
#auswertung .kennwert .zahl{order:2;font-size:1.15rem;font-variant-numeric:tabular-nums}
#auswertung .kennwert .dazu{order:1;color:var(--grau);font-size:.82rem}
@media(max-width:700px){
  #e-wochenrahmen{display:block}
  #e-wochenrahmen #bundesland{margin-top:.5rem}
  #auswertung{display:block}
  #gaesteFelder.formgitter.zwei{grid-template-columns:repeat(auto-fill,minmax(5.8rem,1fr));gap:.5rem;width:auto;border:0;border-radius:0}
  #gaesteFelder .formzeile{padding:0;border:0}
  #e-regeln .formzeile{grid-template-columns:1fr 4.5rem;column-gap:1rem}
  .zeitkopf{display:none}
  #slotFelder .zeitzeile{grid-template-columns:1fr auto;row-gap:.4rem;padding:.7rem .8rem}
  #slotFelder .zeitspanne{grid-column:1/-1;grid-row:2}
  #slotFelder .zeitart{grid-column:1/-1;grid-row:3;justify-self:start}
  #slotFelder .zeitart:empty{display:none}
  .zeitspanne input[type=time]{width:6.6rem}
}

/* Monat: echte Knöpfe in zwei Gruppen – Planen links (Leeren leise daneben),
   Abschließen rechts mit gefüllter Übergabe (Variante 1, 29.10.2026). */
.monat-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.9rem}
.monat-knoepfe .knopf{min-height:44px}
.monat-knoepfe .knopf:not(.wichtig){background:var(--karte);border-color:var(--rand);color:var(--gruen);box-shadow:none;font-weight:600;padding:0 1rem}
.monat-knoepfe .knopf:not(.wichtig):hover{background:var(--gruen-hell);border-color:var(--gruen)}
.monat-knoepfe .knopf.gefahr{order:2;background:none;border-color:transparent;color:var(--rot)}
.monat-knoepfe .knopf.gefahr:hover{background:color-mix(in srgb,var(--rot) 9%,var(--karte));border-color:transparent}
.monat-knoepfe .knopf.drucken{order:4;margin-left:auto}
.monat-knoepfe .knopf.wichtig{order:5}

/* Stand 29.10.2026 (Variante „Dreiklang“): Flächen wechseln wie im Druckmaterial
   zwischen Creme, Hellblau und Graublau, statt überall weiß zu bleiben. Die Töne
   sind Tokens (--ton-1…3); Eingabefelder, Knöpfe und Tabellenköpfe behalten ihre
   eigene Fläche und heben sich so weiter ab. */
:root{--ton-1:#f6edda; --ton-2:#e6f0fa; --ton-3:#e7edef}
:root[data-theme="dark"]{--ton-1:#262a35; --ton-2:#182b4a; --ton-3:#1b2840}
.heute-fokus{background:var(--ton-1)}
section[data-name="heute"] .kasten.nachrichten{background:var(--ton-2)}
section[data-name="heute"] .kasten:not(.nachrichten){background:var(--ton-3)}
#wochenGitter .tag:nth-child(3n+1){background:var(--ton-1)}
#wochenGitter .tag:nth-child(3n+2){background:var(--ton-2)}
#wochenGitter .tag:nth-child(3n){background:var(--ton-3)}
.monat-tabelle tbody tr:nth-child(3n+1) > :not(.ausserhalb){background:var(--ton-1)}
.monat-tabelle tbody tr:nth-child(3n+2) > :not(.ausserhalb){background:var(--ton-2)}
.monat-tabelle tbody tr:nth-child(3n) > :not(.ausserhalb){background:var(--ton-3)}
.karten > .angebotskarte:nth-child(3n+1){background:var(--ton-1)}
.karten > .angebotskarte:nth-child(3n+2){background:var(--ton-2)}
.karten > .angebotskarte:nth-child(3n){background:var(--ton-3)}
.karte.dokuListe{background:var(--ton-1)}
.karte.dokuErinnert{background:var(--ton-2)}
.dokuWizard,.dokuWizard .dokuFormKopf,.karte.dokuLeer{background:var(--ton-3)}
.team-blick.kasten{background:var(--ton-2)}
.einst-inhalt > .einstellkarte:nth-child(3n+1){background:var(--ton-1)}
.einst-inhalt > .einstellkarte:nth-child(3n+2){background:var(--ton-2)}
.einst-inhalt > .einstellkarte:nth-child(3n){background:var(--ton-3)}

/* Tippflächen auf Touch-Geräten und schmalen Bildschirmen (Prüfung 29.10.2026): Monat
   vor/zurück, „+ offen“, die Entfernen-Kreuze und das Tagesmenü der Woche lagen bei
   26–31 px. Am Rechner mit Maus bleibt es kompakt – dort muss der Monat auf einen
   Bildschirm passen. */
#monatZurueck,#monatVor{min-width:40px}
@media (pointer:coarse), (max-width:700px){
  #monatZurueck,#monatVor{min-width:44px;min-height:44px}
  button.monat-offen{min-height:40px}
  .monat-x{min-width:44px;min-height:44px}
  .tag-name{min-height:44px;padding:0 .3rem;margin-left:-.3rem}
}