/* Familienkalender: Telefon zuerst, der grosse Bildschirm ist die Zugabe.

   Seit dem 05.10.2026 eine Datei fuer die ganze App, auch fuer den
   Planungsteil (vorher stil.css mit eigener Huelle). Tokens hell und dunkel
   aus GL-003 Paragraph 2i (Iris, Migration K): der :root-Block unten ist
   wortgleich mit ihrer Vorlage und wird nur zusammen mit GL-003 geaendert.

   Drei Regeln aus 2i, ohne die die Werte nicht halten:
   1. Personenfarben kommen als Token (style="--f:var(--person-sasha)").
   2. Schrift auf einer gefuellten Farbflaeche ist var(--auf-farbe), nie #fff.
   3. Flaechen heissen var(--card), nie #fff. Ausnahme: --papier.

   Die Farben fuer Feiertage, Ferien und schulfreie Tage sind mit dem
   Druckbogen identisch, damit Telefon und Ausdruck dieselbe Sprache sprechen. */

@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/dm-serif-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/dm-serif-display-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ------------------------------------------- Tokens, GL-003 Paragraph 2i */
:root{
  color-scheme:light dark;

  --bg:#fafaf8;
  --card:#ffffff;
  --bg2:#f3f2ef;
  --bg2-h:#e8e5e0;
  --papier:#ffffff;
  --posten-vorbei:#f7f6f3;

  --border:#e5e2db;
  --border-lt:#eeece8;
  --border-control:#8e8a86;

  --text:#1a1917;
  --text2:#57534e;
  --text3:#6e6a65;

  --primary:#c0392b;
  --primary-h:#a93226;
  --heute:#c0392b;
  --sonntag:#7a5a55;
  --feiertag:#8f3a30;
  --fehler:#a93226;
  --focus:#1a1917;
  --auf-farbe:#ffffff;

  --ok:#166534;
  --ok-bg:#f0fdf4;
  --ok-bd:#bbf7d0;
  --warn:#92400e;
  --warn-bg:#fef3c7;
  --warn-bd:#fde68a;
  --fehler-bg:#fdf5f5;
  --fehler-bd:#f0cfcb;
  --arbeit:#7a3d06;

  --tag-we:#f6f5f2;
  --tag-fremd:#faf9f7;
  --tag-ferien:#fbfaf6;
  --tag-we-ferien:#f4f2ec;
  --tag-so:#fbf4f4;
  --tag-ft:#fdf6f5;
  --streifen-a:#f3f2ef;
  --streifen-b:#e5e2db;

  --ferien-be-bg:#eef2ff; --ferien-be-text:#3730a3; --ferien-be-bd:#c7d2fe;
  --ferien-bb-bg:#f0fdf4; --ferien-bb-text:#166534; --ferien-bb-bd:#bbf7d0;
  --schulfrei-bg:#fef3c7; --schulfrei-text:#92400e; --schulfrei-bd:#fcd34d;
  --einschulung-bg:#fae8ff; --einschulung-text:#86198f; --einschulung-bd:#f0abfc;

  --person-christian:#6d28d9;
  --person-ulle:#047857;
  --person-sasha:#be185d;
  --person-kita:#57534e;
  --person-herting:#1d4ed8;
  --person-hesse:#0f766e;
  --person-kraft:#78350f;
  --person-vorrat-0:#a16207;
  --person-vorrat-1:#155e75;
  --person-vorrat-2:#3f6212;
  --person-vorrat-3:#0e7490;
  --person-vorrat-4:#7e22ce;
  --person-vorrat-5:#4d7c0f;
  --person-unbekannt:var(--text3);

  --eingabe-tint:rgba(192,57,43,.12);
  --druck-tint:rgba(26,25,23,.05);
  --abdunkeln:rgba(26,25,23,.42);
  --schatten-klappe:0 8px 24px rgba(0,0,0,.12);
  --schatten-plus:0 4px 14px rgba(0,0,0,.22);
  --staffel-kante:-1px 0 0 rgba(26,25,23,.10);

  /* Masse, kein Farbwert. --kopfh ist die Hoehe der Zeile mit Tagesziffer,
     --bandh die Hoehe einer Bandreihe samt Abstand. Beide haengen zusammen:
     die Bandebene setzt auf --kopfh auf, und das Tagesfeld haelt --reihen mal
     --bandh frei. Wer eine der beiden Zahlen aendert, sieht sich das Raster an. */
  --kopfh:1.6rem;
  --bandh:1.05rem;
  --oben:env(safe-area-inset-top,0px);
  --unten:env(safe-area-inset-bottom,0px);
  --links:env(safe-area-inset-left,0px);
  --rechts:env(safe-area-inset-right,0px);
}

@media screen and (prefers-color-scheme:dark){
  :root{
    --bg:#141312;
    --card:#1d1c1a;
    --bg2:#262422;
    --bg2-h:#302e2b;
    --papier:#ffffff;
    --posten-vorbei:#181715;

    --border:#3a3835;
    --border-lt:#2c2a28;
    --border-control:#7c7873;

    --text:#f1efeb;
    --text2:#c9c5bf;
    --text3:#a29d96;

    --primary:#f0857a;
    --primary-h:#e86f63;
    --heute:#f0857a;
    --sonntag:#bfa29d;
    --feiertag:#e0a39a;
    --fehler:#f28b82;
    --focus:#f1efeb;
    --auf-farbe:#141312;

    --ok:#4ade80;
    --ok-bg:#142a1c;
    --ok-bd:#2f6b45;
    --warn:#fbbf24;
    --warn-bg:#2e2410;
    --warn-bd:#6b5217;
    --fehler-bg:#2a1716;
    --fehler-bd:#5a2a26;
    --arbeit:#d9a35b;

    --tag-we:#181715;
    --tag-fremd:#171614;
    --tag-ferien:#1f1d17;
    --tag-we-ferien:#1a1914;
    --tag-so:#211a19;
    --tag-ft:#261a18;
    --streifen-a:#24221f;
    --streifen-b:#2c2a27;

    --ferien-be-bg:#24243a; --ferien-be-text:#c7d2fe; --ferien-be-bd:#4b4f8f;
    --ferien-bb-bg:#17301f; --ferien-bb-text:#bbf7d0; --ferien-bb-bd:#2f6b45;
    --schulfrei-bg:#3a2c0e; --schulfrei-text:#fde68a; --schulfrei-bd:#8a6a1c;
    --einschulung-bg:#3a1840; --einschulung-text:#f5d0fe; --einschulung-bd:#7a3a86;

    --person-christian:#a78bfa;
    --person-ulle:#34d399;
    --person-sasha:#f472b6;
    --person-kita:#a8a29e;
    --person-herting:#60a5fa;
    --person-hesse:#2dd4bf;
    --person-kraft:#d4a373;
    --person-vorrat-0:#eab308;
    --person-vorrat-1:#67e8f9;
    --person-vorrat-2:#a3e635;
    --person-vorrat-3:#22d3ee;
    --person-vorrat-4:#c084fc;
    --person-vorrat-5:#84cc16;
    --person-unbekannt:var(--text3);

    --eingabe-tint:rgba(240,133,122,.18);
    --druck-tint:rgba(255,255,255,.06);
    --abdunkeln:rgba(0,0,0,.6);
    --schatten-klappe:0 8px 24px rgba(0,0,0,.5);
    --schatten-plus:0 4px 14px rgba(0,0,0,.55);
    --staffel-kante:-1px 0 0 rgba(0,0,0,.45);
  }
}

/* ------------------------------------------------------------- Grundlage */
*{box-sizing:border-box}
/* Eine Klassenregel mit display schlaegt sonst das hidden-Attribut, weil beide
   dieselbe Spezifitaet haben und die eigene Regel spaeter kommt. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;height:100%}
/* 1rem statt 16px: wer im Browser die Schrift groesser stellt, bekommt sie
   groesser (WCAG 1.4.4). Alle Masse darunter sind rem oder em. */
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:"DM Sans",system-ui,"Helvetica Neue",Arial,sans-serif;
  font-size:1rem;line-height:1.5;
  overscroll-behavior-y:none}
body.app{display:flex;flex-direction:column;min-height:100svh}

a{color:var(--primary)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.2}

.ikon{width:1.25rem;height:1.25rem;flex:none}
.ikon.klein{width:1rem;height:1rem}

.springen{position:absolute;left:-9999px;top:0;background:var(--card);
  padding:10px 14px;border:1px solid var(--primary);z-index:60}
.springen:focus{left:8px;top:calc(var(--oben) + 8px)}

/* Nur fuer Vorleseprogramme. */
.nurvorleser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0}

/* -------------------------------------------------------------- Kopfleiste */
.leiste{position:sticky;top:0;z-index:30;background:var(--card);
  border-bottom:1px solid var(--border);padding-top:var(--oben)}
/* flex-wrap, damit die Leiste bei 200 Prozent Schrift umbricht statt den
   Titel abzuschneiden (WCAG 1.4.4, gemessen 05.10.2026). */
.leistenzeile{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:0 max(4px,var(--rechts)) 0 max(4px,var(--links))}
.monatstitel{flex:1;min-width:0;margin:0;text-align:center;font-size:1.3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monatstitel.links{text-align:left;padding-left:8px}
/* Der Wochentitel ist laenger als ein Monatsname ("31. August – 6.
   September 2026") und bekommt auf dem Telefon eine Stufe kleiner. */
.blatt-woche .monatstitel{font-size:1.05rem}
.monatstitel span span,.monatstitel>span>span{color:var(--text3)}
.pfeil{display:flex;align-items:center;justify-content:center;flex:none;
  min-width:44px;min-height:48px;font-size:1.6rem;line-height:1;
  color:var(--text2);text-decoration:none}
.pfeil:active{background:var(--bg2)}
.pfeil.aus{color:var(--border);pointer-events:none}

/* Der Weg zurueck auf heute, Muster Google: immer an derselben Stelle.
   36 px sichtbar, 44 px anfassbar ueber ::after. */
.heuteknopf{position:relative;flex:none;display:inline-flex;align-items:center;
  min-height:2.25rem;padding:0 .8rem;border:1px solid var(--border-control);
  border-radius:1.2rem;color:var(--text);background:var(--card);
  font-size:.88rem;font-weight:600;text-decoration:none}
.heuteknopf::after{content:"";position:absolute;inset:-4px 0}
.heuteknopf:active{background:var(--bg2)}

/* "Neu" in der Kopfleiste gibt es erst ab 1024 px, darunter das Pluszeichen. */
.knopf.neuknopf{display:none}

/* Die Monatswahl: der Titel klappt eine Wahl aller Monate auf. */
.monatswahl{flex:1 1 8rem;min-width:0}
.monatswahl>summary{display:flex;align-items:center;justify-content:center;
  min-height:48px;list-style:none;cursor:pointer;border-radius:4px}
.monatswahl>summary::-webkit-details-marker{display:none}
.monatswahl>summary .monatstitel{flex:0 1 auto;display:flex;align-items:center;gap:4px}
.monatswahl>summary .ikon{color:var(--text3);transition:transform .15s ease}
.monatswahl[open]>summary .ikon{transform:rotate(180deg)}
.monatswahl[open]>summary{background:var(--bg2)}
.monatsklappe{position:absolute;left:8px;right:8px;top:100%;z-index:40;
  max-width:26rem;margin:0 auto;max-height:min(70vh,32rem);overflow:auto;
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--schatten-klappe);padding:8px 12px 12px}
.jahrname{margin:8px 0 4px;font-weight:700;font-size:.9rem;color:var(--text2)}
.monatsgitter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.monatsfeld{display:flex;align-items:center;justify-content:center;
  min-height:44px;border:1px solid var(--border-control);color:var(--text);
  text-decoration:none;font-size:.92rem;font-weight:500;background:var(--card)}
.monatsfeld.jetzt{border-color:var(--heute);color:var(--heute);font-weight:700}
.monatsfeld[aria-current="true"]{background:var(--text);border-color:var(--text);
  color:var(--auf-farbe);font-weight:700}
.monatsfeld.aus{border-color:var(--border);color:var(--text3);opacity:.6}
.monatsfeld:active{background:var(--bg2)}

/* Das Menue. Seit dem 05.10.2026 in Alltag, Planung und Verwaltung gegliedert. */
.menue{position:relative;flex:none}
.menue>summary{display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:48px;list-style:none;cursor:pointer}
.menue>summary::-webkit-details-marker{display:none}
.menue .balken{display:block;width:20px;height:2px;background:var(--text);
  box-shadow:0 -6px 0 var(--text),0 6px 0 var(--text)}
.menue[open]>summary{background:var(--bg2)}
.menue .klappe{position:absolute;right:0;top:100%;z-index:40;min-width:16rem;
  max-height:calc(100svh - 70px);overflow:auto;
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--schatten-klappe);display:flex;flex-direction:column;padding-bottom:4px}
.klappentitel{margin:0;padding:12px 16px 4px;font-size:.78rem;font-weight:700;
  color:var(--text3)}
.menue .klappe a,.menue .klappe button{display:flex;align-items:center;
  min-height:44px;padding:0 16px;font-size:.95rem;color:var(--text);
  text-decoration:none;background:none;border:0;width:100%;
  text-align:left;cursor:pointer}
.menue .klappe a:active,.menue .klappe button:active{background:var(--bg2)}
.menue .klappe form{margin:0;border-top:1px solid var(--border-lt);margin-top:4px}
.nurmaus{display:none !important}
@media (hover:hover) and (pointer:fine){ .nurmaus{display:flex !important} }

/* ------------------------------------------------------ Ansichtsleiste

   Monat | Woche | Liste als Segment, rechts der Filter. Eine Zeile von 44 px,
   die vorher zwei Zeilen kostete (Umschaltung und Personenfilter). */
.ansichtsleiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:2px max(8px,var(--rechts)) 6px max(8px,var(--links))}
.segment{flex:0 1 auto;display:grid;grid-template-columns:repeat(3,auto);
  min-width:min(14rem,60vw);border:1px solid var(--border-control);border-radius:8px;
  overflow:hidden;background:var(--card)}
.seg{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:2.25rem;padding:0 .7rem;font-size:.9rem;font-weight:600;
  color:var(--text2);text-decoration:none}
.seg+.seg{border-left:1px solid var(--border-control)}
.seg::after{content:"";position:absolute;inset:-4px 0}
.seg.an{background:var(--text);color:var(--auf-farbe)}
.seg:active{background:var(--bg2)}

.filterwahl{position:relative;margin-left:auto;min-width:0}
.filterwahl>summary{position:relative;display:flex;align-items:center;gap:6px;
  min-height:2.25rem;padding:0 .75rem;border:1px solid var(--border-control);
  border-radius:8px;list-style:none;cursor:pointer;color:var(--text);
  font-size:.88rem;font-weight:600;white-space:nowrap;background:var(--card)}
.filterwahl>summary::after{content:"";position:absolute;inset:-4px 0}
.filterwahl>summary::-webkit-details-marker{display:none}
.filterwahl[open]>summary{background:var(--bg2)}
.filterstand{overflow:hidden;text-overflow:ellipsis;max-width:9rem}
.filterklappe{position:absolute;right:0;top:calc(100% + 6px);z-index:40;
  width:min(22rem,calc(100vw - 16px));background:var(--card);
  border:1px solid var(--border);box-shadow:var(--schatten-klappe);
  padding:12px;display:flex;flex-direction:column;gap:12px}

/* Familie, Arbeit, Alles. Gefuellt ist die aktive Stellung, dunkel und nicht
   rot: Rot gehoert der Aktion. */
.ansichtwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;
  background:var(--border-control);border:1px solid var(--border-control)}
.ansichtknopf{position:relative;min-height:2.5rem;padding:0 8px;border:0;
  background:var(--card);color:var(--text2);font-size:.9rem;font-weight:600;
  cursor:pointer;-webkit-appearance:none;appearance:none}
.ansichtknopf::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
.ansichtknopf:active{background:var(--bg2)}
.ansichtknopf.an{background:var(--text);color:var(--auf-farbe);font-weight:700}
.ansichtknopf.an.a-arbeit{background:var(--arbeit)}
.ansichthinweis{margin:0 0 10px;padding:8px 12px;font-size:.88rem;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text);
  color:var(--text)}
.ansichthinweis.a-arbeit{background:var(--warn-bg);border-color:var(--warn-bd);
  border-left-color:var(--arbeit)}

/* Personenfilter in der Klappe: Marken umbrechen statt waagerecht wischen. */
.personenfilter{display:flex;flex-wrap:wrap;gap:12px 6px}
.pchip{position:relative;flex:none;display:inline-flex;align-items:center;
  min-height:2.1rem;padding:0 12px;border:1px solid var(--border-control);
  border-radius:20px;background:var(--card);color:var(--text);font-size:.88rem;
  font-weight:500;text-decoration:none;white-space:nowrap}
.pchip::before{content:"";width:.6rem;height:.6rem;border-radius:50%;
  background:var(--f,var(--text3));margin-right:6px;flex:none}
.pchip:first-child::before{display:none}
.pchip::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.pchip.an{background:var(--f,var(--text));border-color:var(--f,var(--text));
  color:var(--auf-farbe);font-weight:600}
.pchip.an::before{background:var(--auf-farbe)}

/* Unterleiste des Planungsteils. */
.unterleiste{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
  padding:0 max(8px,var(--rechts)) 0 max(8px,var(--links))}
.unterleiste::-webkit-scrollbar{display:none}
.unterleiste a{display:flex;align-items:center;min-height:44px;padding:0 12px;
  font-size:.92rem;font-weight:500;color:var(--text2);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent}
.unterleiste a[aria-current="page"]{color:var(--text);font-weight:700;
  border-bottom-color:var(--primary)}

/* Unten genug Platz, damit das Pluszeichen nichts verdeckt (S8). */
main{flex:1;width:100%;padding:8px max(8px,var(--links)) calc(96px + var(--unten))
  max(8px,var(--rechts))}

/* --------------------------------------------------------------- Meldungen
   GL-003 Paragraph 2h: Flaeche und Kante tragen die Stufe, der Text bleibt
   --text. */
.meldungen{margin:0 0 10px;padding:0;list-style:none}
.meldung{background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid var(--text);padding:10px 14px;margin-bottom:6px;
  font-size:.92rem;color:var(--text)}
.meldung.ok{border-color:var(--ok-bd);border-left-color:var(--ok);background:var(--ok-bg)}
.meldung.fehler{border-color:var(--fehler-bd);border-left-color:var(--fehler);background:var(--fehler-bg)}
.meldung.warnung{border-color:var(--warn-bd);border-left-color:var(--warn);background:var(--warn-bg)}

/* Was haengt. Erscheint seit dem 05.10.2026 erst, wenn ein Versand nicht
   durchgeht oder kein Netz da ist. */
.stand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  background:var(--warn-bg);border:1px solid var(--warn-bd);border-left:3px solid var(--warn);
  padding:10px 14px;margin:0 0 10px;font-size:.9rem;color:var(--text)}
.stand.ruhig{background:var(--bg2);border-color:var(--border);
  border-left-color:var(--text)}
.stand .text{flex:1;min-width:12rem}

.konflikte{background:var(--fehler-bg);border:1px solid var(--fehler-bd);
  border-left:3px solid var(--fehler);padding:12px 14px;margin:0 0 10px}
.konflikte>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  gap:8px;font-size:.9rem;font-weight:600;color:var(--text);list-style:none}
.konflikte>summary::-webkit-details-marker{display:none}
.konflikte>summary::after{content:"";flex:none;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;transition:transform .12s linear}
.konflikte[open]>summary::after{transform:rotate(180deg)}
.konflikte ul{margin:0;padding-left:18px;font-size:.9rem;color:var(--text)}
.konflikte li{margin-bottom:6px}
.konflikte .wann{font-variant-numeric:tabular-nums;font-weight:600}
.konflikte form{margin-top:10px}
.konflikte .dazu{font-size:.85rem;color:var(--text2);margin:6px 0 0}

/* ------------------------------------------------------------ Monatsraster */
.raster{touch-action:pan-y}
.raster.wechselt{opacity:.35;transition:opacity .12s linear}
.wochentage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  margin-bottom:1px}
/* Wochentagsnamen in normaler Schreibung, nicht mehr in Versalien. */
.wt{padding:3px 2px;text-align:center;font-size:.75rem;font-weight:600;
  line-height:1.2;color:var(--text2)}
.wt.we{color:var(--text3)}

/* Das Gitter ist eine Spalte aus Wochen, die sieben Spalten macht .tage
   innerhalb einer Woche (31.08.2026). Bleiben hier sieben Spalten stehen,
   waehrend im Markup Wochen-Knoten stehen, landet jede Woche in einer eigenen
   Spalte. Wer hier etwas aendert, sieht sich das Bild an. */
.gitter{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--border-lt);border:1px solid var(--border-lt)}

.woche{display:grid;grid-template-columns:minmax(0,1fr)}
.woche > *{grid-area:1/1}
.tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}

/* Auf dem Telefon ist das Tagesfeld eine Belegungskarte: Ziffer, Balken mit
   dem Zeichen der Person, "+N". Was es ist, steht in der Tagesliste darunter
   (05.10.2026, Befund B3). Ab 640 px kommen die Titel zurueck. */
.tag{position:relative;display:flex;flex-direction:column;gap:2px;
  min-width:0;min-height:calc(3.9rem + var(--reihen,0) * var(--bandh));
  padding:3px 2px 4px;background:var(--card);
  color:inherit;text-decoration:none;overflow:hidden}
.tag.we,.wtagfeld.we,.gtfeld.we,.wochenspalte.we{background:var(--tag-we)}
.tag.fremd{background:var(--tag-fremd)}
.tag.fremd .ziffer{color:var(--text3)}
.tag.ferbg,.wtagfeld.ferbg{background:var(--tag-ferien)}
.tag.we.ferbg,.wtagfeld.we.ferbg{background:var(--tag-we-ferien)}
.tag.so,.wtagfeld.so{background:var(--tag-so)}
.tag.ft,.wtagfeld.ft{background:var(--tag-ft)}
/* Sonntag und Feiertag in gedaempften eigenen Toenen, nicht mehr im Rot der
   Aktion (F1, Iris). Der Feiertag ist zusaetzlich fett: Farbe allein
   unterscheidet nicht. */
.tag.so .ziffer,.wtagfeld.so .ziffer{color:var(--sonntag)}
.tag.ft .ziffer,.wtagfeld.ft .ziffer{color:var(--feiertag);font-weight:700}
/* Heute ist nur noch der gefuellte Kreis um die Ziffer, ohne roten
   Zellrahmen (F1). Der gewaehlte Tag bekommt einen Ring in Tinte und eine
   abgesetzte Flaeche. Beide zusammen: Kreis mit Ring. */
.tag.heute .ziffer,.wtagfeld.heute .ziffer{
  background:var(--heute);color:var(--auf-primary);border-radius:50%;font-weight:700}
.tag.gewaehlt{background:var(--bg2)}
.tag.gewaehlt .ziffer{box-shadow:0 0 0 2px var(--text);border-radius:50%}
.tag:active,.wtagfeld:active{background:var(--bg2)}

.tagkopf{position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  gap:2px;min-width:0;min-height:var(--kopfh);
  margin-bottom:calc(var(--reihen,0) * var(--bandh))}
.ziffer{display:inline-flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:600;color:var(--text2);
  width:1.5rem;height:1.5rem;line-height:1;margin:.05rem 0 0 .05rem}

/* Ferienmarken. Auf dem Telefon ein Streifen am oberen Rand des Tages statt
   eines 8-px-Wortes, das niemand lesen konnte; das Wort steht in der
   Tagesliste und im aria-label. Ab 640 px wieder als Marke mit Text. */
.ferleiste{position:absolute;top:-3px;left:-2px;right:-2px;display:flex;gap:1px}
.fer{flex:1;height:3px;font-size:0;font-style:normal;padding:0;border:0;overflow:hidden}
.fer.k-ferien{background:var(--ferien-be-text);color:var(--ferien-be-text)}
.fer.k-ferien.f-BB{background:var(--ferien-bb-text);color:var(--ferien-bb-text)}
.fer.k-frei{background:var(--schulfrei-text);color:var(--schulfrei-text)}
.fer.k-einschulung{background:var(--einschulung-text);color:var(--einschulung-text)}
/* Brandenburg-Sonderfaelle gestrichelt, wie im Druck: Form zusaetzlich zur Farbe. */
.fer.f-BB:not(.k-ferien){background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px)}

.ftname{font-size:.68rem;line-height:1.15;color:var(--feiertag);font-weight:600;
  padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chips{display:flex;flex-direction:column;gap:2px;padding:0 1px;min-width:0}
.chip{display:flex;align-items:center;gap:3px;min-height:1.05rem;
  font-size:.75rem;line-height:1.3;padding:0 3px;border-radius:3px;
  white-space:nowrap;overflow:hidden;
  background:var(--card);color:var(--f,var(--text3));border:1px solid var(--f,var(--text3))}
.chip .zeichen{font-weight:700;font-size:.72rem;flex:none}
.chip u{display:none;text-decoration:none;font-variant-numeric:tabular-nums;
  font-weight:600;flex:none}
.chip i{display:none;font-style:normal;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
/* Die Form der Kante sagt die Art, wie im Druckbogen. */
.chip.t-urlaub{background:var(--f);color:var(--auf-farbe)}
.chip.t-dienstreise{border-style:dashed}
.chip.t-termin,.chip.t-krank,.chip.t-sonstiges{border-style:dotted;border-width:1.5px}
.chip.t-teilzeit{border-color:var(--border-control)}
.chip.t-schliesszeit{background:repeating-linear-gradient(45deg,var(--streifen-a),var(--streifen-a) 3px,var(--streifen-b) 3px,var(--streifen-b) 6px);
  color:var(--text);border-color:var(--border-control)}
.chip.t-frist{border-style:dashed;font-weight:500}
/* Was noch auf Versand wartet, ist als solches erkennbar. */
.chip.wartet{border-style:dashed}
.chip.geht-weg,.band.geht-weg{text-decoration:line-through;opacity:.45}
.mehr{font-size:.72rem;font-weight:700;color:var(--text2);padding:0 3px}

/* Baender: ein mehrtaegiger Eintrag ohne Uhrzeit laeuft als durchgehender
   Balken ueber die Wochenzeile. position/z-index sind Pflicht (04.09.2026):
   ohne sie lag die Ebene unter den Tagesfeldern. pointer-events:none laesst
   den Finger durch auf den Tag darunter. */
.baender{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  column-gap:1px;row-gap:0;grid-auto-rows:var(--bandh);align-content:start;
  padding-top:calc(3px + var(--kopfh) + 2px);pointer-events:none;
  position:relative;z-index:1}
.band{grid-column:var(--spalte) / span var(--weite);grid-row:var(--reihe);
  min-width:0;margin:0 0 2px;padding:0 4px;
  font-size:.7rem;font-weight:600;line-height:calc(var(--bandh) - 4px);
  height:calc(var(--bandh) - 2px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--f);border-radius:3px;background:var(--f);color:var(--auf-farbe)}
.band:not(.beginnt){border-left:none;border-top-left-radius:0;
  border-bottom-left-radius:0;padding-left:3px}
.band:not(.endet){border-right:none;border-top-right-radius:0;
  border-bottom-right-radius:0;padding-right:3px}
.band.t-fortbildung{background:var(--card);color:var(--f)}
.band.t-dienstreise{background:var(--card);color:var(--f);border-style:dashed}
.band.t-termin{background:var(--card);color:var(--f);border-style:dotted}
.band.t-teilzeit{background:var(--card);color:var(--f);border-color:var(--border-control)}
.band.t-schliesszeit{color:var(--text);border-color:var(--border-control);
  background:repeating-linear-gradient(45deg,var(--streifen-a),var(--streifen-a) 3px,var(--streifen-b) 3px,var(--streifen-b) 6px)}
.band.t-krank,.band.t-sonstiges{background:var(--card);color:var(--f)}
.band.t-frist{background:var(--card);color:var(--f);border-style:dashed;font-weight:500}

/* Was die Ansicht wegnimmt: ein kleiner Punkt statt eines gestrichelten
   Strichs in fast jeder Zelle (F2). Der Satz dazu steht unter dem Raster und
   im Tagesblatt, fuer Vorleseprogramme im aria-label. */
.verdeckt{align-self:center;width:5px;height:5px;margin:2px 0 0;padding:0;
  border-radius:50%;background:var(--text3);font-size:0;color:transparent;overflow:hidden}

.verdecktzeile{margin:0 0 12px;padding:8px 12px;font-size:.88rem;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text);
  color:var(--text)}
.verdecktzeile .heutesprung{margin-top:6px}
/* In der Tagesliste unter dem Monat knapper: der Hinweis ist Beiwerk. */
.tagesfeld .verdecktzeile,.blattinhalt .verdecktzeile{display:flex;flex-wrap:wrap;
  align-items:center;gap:4px 10px;font-size:.85rem;padding:6px 10px;color:var(--text2)}
.tagesfeld .verdecktzeile .heutesprung,.blattinhalt .verdecktzeile .heutesprung{margin:0;
  min-height:44px;padding:0 12px;font-size:.85rem}

/* ------------------------------------------- Tagesliste unter dem Monat */
.tagesfeld{margin:12px 0 0;background:var(--card);border:1px solid var(--border);
  padding:12px 12px 4px;transition:opacity .12s linear}
.tagesfeld.laedt{opacity:.5}
.tagesfeld .blattkopf{margin-bottom:8px}

/* ---------------------------------------------- Laufende Zeitraeume */
.laufleiste{margin:12px 0 0;background:var(--card);border:1px solid var(--border)}
.laufleiste>h2{margin:0;padding:8px 12px;font-family:inherit;font-size:.85rem;
  font-weight:700;color:var(--text2);border-bottom:1px solid var(--border-lt)}
.laufleiste ul{list-style:none;margin:0;padding:0}
.lauf+.lauf{border-top:1px solid var(--border-lt)}
.lauf a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
  align-items:baseline;min-height:48px;padding:8px 12px 10px;
  color:inherit;text-decoration:none}
.lauf a:active{background:var(--bg2)}
.laufname{font-size:.92rem;font-weight:600;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.laufwer{font-size:.8rem;font-weight:700;color:var(--f);white-space:nowrap;text-align:right}
.laufzeit{grid-column:1/-1;font-size:.82rem;color:var(--text2);
  font-variant-numeric:tabular-nums}
.laufbalken{grid-column:1/-1;position:relative;height:5px;margin-top:5px;
  background:var(--border-lt)}
.laufbalken::before{content:"";position:absolute;top:0;bottom:0;
  left:var(--von,0%);right:calc(100% - var(--bis,100%));background:var(--f)}
.laufbalken.beginnt::before{border-top-left-radius:3px;border-bottom-left-radius:3px}
.laufbalken.endet::before{border-top-right-radius:3px;border-bottom-right-radius:3px}
.lauf.t-frist .laufname{font-weight:500}
.lauf.t-frist .laufbalken::before{
  background:repeating-linear-gradient(90deg,var(--f) 0 5px,transparent 5px 9px)}

.fusszeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:12px 0 0;font-size:.85rem;color:var(--text2)}
.fusszeile p{margin:0;flex:1 1 14rem}

/* Ein Knopf, der aussieht wie ein Verweis im Kasten: 44 px hoch (F5). */
.heutesprung{display:inline-flex;align-items:center;min-height:44px;
  padding:0 14px;border:1px solid var(--border-control);
  border-radius:22px;background:var(--card);color:var(--text);
  font-size:.88rem;font-weight:600;text-decoration:none}
.heutesprung:active{background:var(--bg2)}

/* ---------------------------------------------------------- Pluszeichen */
.plus{position:fixed;right:calc(16px + var(--rechts));
  bottom:calc(16px + var(--unten));z-index:35;
  width:3.5rem;height:3.5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary-flaeche);color:var(--auf-primary);text-decoration:none;
  box-shadow:var(--schatten-plus)}
.plus .ikon{width:1.6rem;height:1.6rem}
.plus:active{background:var(--primary-h)}

/* ------------------------------------------------------- Hinweisleiste */
.hinweisleiste{position:fixed;z-index:70;left:calc(12px + var(--links));
  right:calc(88px + var(--rechts));bottom:calc(20px + var(--unten));
  display:flex;align-items:center;gap:8px;min-height:3rem;padding:6px 6px 6px 14px;
  background:var(--text);color:var(--bg);border-radius:8px;
  box-shadow:var(--schatten-plus);opacity:0;transform:translateY(8px);
  transition:opacity .15s ease,transform .15s ease}
.hinweisleiste.zeigt{opacity:1;transform:none}
.hinweistext{flex:1;margin:0;font-size:.92rem;line-height:1.35}
.hinweisknopf{min-height:44px;padding:0 12px;border:0;background:transparent;
  color:var(--bg);font-weight:700;font-size:.92rem;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;border-radius:4px}
.hinweisknopf:focus-visible{outline-color:var(--bg)}

/* ---------------------------------------------------------------- Blaetter */
.blatt-dialog{width:100%;max-width:34rem;margin:auto auto 0;padding:0;
  border:0;border-top:1px solid var(--border);background:var(--card);color:var(--text);
  max-height:92svh;overflow:hidden;border-radius:12px 12px 0 0}
.blatt-dialog::backdrop{background:var(--abdunkeln)}
.blattinhalt,.eingabe{max-height:92svh;overflow-y:auto;
  padding:14px 16px calc(20px + var(--unten))}
.eingabe{padding-top:0}
.blattkopf{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.blattkopf h2{margin:0;font-size:1.2rem}
/* Der Kopf des Eingabeblatts bleibt beim Scrollen stehen: Abbrechen links,
   Sichern rechts (Muster iOS und Google). */
.festkopf{position:sticky;top:0;z-index:3;background:var(--card);
  margin:0 -16px 12px;padding:8px 8px 8px;border-bottom:1px solid var(--border)}
.festkopf h2{flex:1;text-align:center;font-size:1.1rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.festkopf .knopf{min-height:44px}

.verwerfenfrage{margin:0 0 12px;padding:12px;background:var(--warn-bg);
  border:1px solid var(--warn-bd);border-left:3px solid var(--warn);color:var(--text)}
.verwerfenfrage p{margin:0 0 8px;font-weight:600}

.wahl-dialog{width:min(26rem,calc(100vw - 32px));padding:0;border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:12px}
.wahl-dialog::backdrop{background:var(--abdunkeln)}
.wahlinhalt{padding:18px 18px 14px}
.wahlinhalt h2{margin:0 0 6px;font-size:1.2rem}
.wahlinhalt p{margin:0 0 14px;color:var(--text2)}
.wahlknoepfe{display:flex;flex-direction:column;gap:8px}
.wahlknoepfe .knopf{width:100%}
.kuerzelliste{margin:0 0 14px;display:grid;gap:6px}
.kuerzelliste div{display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--border-lt)}
.kuerzelliste dt,.kuerzelliste dd{margin:0}
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid var(--border-control);
  border-bottom-width:2px;border-radius:4px;font:600 .85rem/1.4 "DM Sans",system-ui,sans-serif;
  text-align:center;background:var(--bg2);color:var(--text)}

.untergrund{list-style:none;margin:0 0 12px;padding:0;font-size:.9rem}
.untergrund li{padding:6px 10px;margin-bottom:4px;border-left:3px solid var(--border)}
.untergrund .feiertag{background:var(--tag-ft);border-left-color:var(--feiertag);color:var(--text)}
.untergrund .ferien.f-BE{background:var(--ferien-be-bg);border-left-color:var(--ferien-be-text);color:var(--text)}
.untergrund .ferien.f-BB{background:var(--ferien-bb-bg);border-left-color:var(--ferien-bb-text);color:var(--text)}

.tagesliste{list-style:none;margin:0 0 14px;padding:0}
.tagesliste .posten{background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--f,var(--text3));padding:10px 12px;
  margin-bottom:8px}
.posten.wartet{border-style:dashed}
.posten.geht-weg,.zeitposten.geht-weg,.lposten.geht-weg{display:none}
.posten .oben{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin-bottom:4px}
.posten .wer{font-size:.82rem;font-weight:700;color:var(--f)}
.posten .was{font-weight:600;margin:0}
.posten .wann{font-variant-numeric:tabular-nums;color:var(--text2);
  font-size:.92rem;margin:2px 0 0}
.posten .rand{font-size:.9rem;color:var(--text2);margin:4px 0 0;overflow-wrap:anywhere}
.posten .herkunft{font-size:.82rem;color:var(--text3);margin:4px 0 0}
.posten .taten{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.posten .taten form{margin:0}
.art{display:inline-block;font-size:.78rem;padding:1px 8px;border-radius:20px;
  border:1px solid var(--f,var(--border));color:var(--f,var(--text2));background:var(--card)}
.art.gefuellt{background:var(--f);color:var(--auf-farbe)}
.art.neutral{border-color:var(--border);color:var(--text2);background:var(--bg2)}

.leer{color:var(--text2);margin:0 0 14px}

/* --------------------------------------------------------------- Formular */
.feld{margin-bottom:14px}
/* Normale Schreibung, kein Versal mit Sperrung mehr (F4). Die Regel trifft
   nur die Beschriftung des Feldes selbst, nicht die Auswahlkaestchen darin. */
.feld>label,.feldname{display:block;font-size:.88rem;font-weight:600;
  color:var(--text2);margin-bottom:4px}
.hilfe{font-size:.85rem;color:var(--text2);margin:5px 0 0}
input[type=text],input[type=date],input[type=time],input[type=password],
input[type=search],select,textarea{width:100%;
  font-size:1rem;min-height:48px;padding:9px 10px;
  border:1px solid var(--border-control);
  border-radius:0;background:var(--card);color:var(--text)}
textarea{min-height:4.5rem;resize:vertical;line-height:1.4}
input:focus,select:focus,textarea:focus{border-color:var(--primary);
  box-shadow:0 0 0 2px var(--eingabe-tint)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Ohne min-width:0 behaelt ein Datumsfeld seine Eigenbreite und schiebt die
   zweite Spalte ueber den Rand (gemessen 05.10.2026, 390 px). */
.paar>*{min-width:0}
/* Im Planungsteil stehen in einem Paar auch Wochentagswahl und Hilfetexte.
   Auf dem Telefon untereinander, wie vorher in stil.css. */
@media (max-width:639px){ .planung .paar{grid-template-columns:1fr} }
.knopfzeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.fehlerzeile{margin:8px 0 0;font-size:.9rem;color:var(--text);background:var(--fehler-bg);
  border:1px solid var(--fehler-bd);border-left:3px solid var(--fehler);padding:8px 10px}

/* Der Titel ist das erste Feld und das groesste. */
.titelfeld input{font-size:1.1rem;font-weight:500}
.vorschau{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  margin-top:6px;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid var(--primary);font-size:.9rem;color:var(--text)}
.vorschautext{flex:1 1 12rem}
.knopf.klein{min-height:44px;padding:0 6px;font-size:.85rem}

/* Personen als Marken. */
.personenmarken{display:flex;flex-wrap:wrap;gap:8px}
.pmarke{position:relative;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 14px;border:1px solid var(--border-control);
  border-radius:22px;background:var(--card);color:var(--text);
  font-size:.92rem;font-weight:500;cursor:pointer}
.pmarke::before{content:"";width:.6rem;height:.6rem;border-radius:50%;
  background:var(--f,var(--text3));flex:none}
.pmarke.anders::before{display:none}
.pmarke[aria-checked="true"],.pmarke.an{background:var(--f,var(--text));
  border-color:var(--f,var(--text));color:var(--auf-farbe);font-weight:600}
.pmarke[aria-checked="true"]::before{background:var(--auf-farbe)}
.anderefeld{margin-top:8px}

.mehrfelder{margin:4px 0 12px;border-top:1px solid var(--border-lt);padding-top:4px}
.mehrfelder>summary{cursor:pointer;min-height:48px;display:flex;flex-wrap:wrap;
  align-items:center;gap:2px 8px;font-size:.95rem;font-weight:600;color:var(--text);
  list-style:none}
.mehrfelder>summary::-webkit-details-marker{display:none}
.mehrfelder>summary::before{content:"";width:0;height:0;flex:none;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:6px solid currentColor;transition:transform .12s linear}
.mehrfelder[open]>summary::before{transform:rotate(90deg)}
.mehrstand{font-weight:400;font-size:.85rem;color:var(--text2)}
.mehrfelder[open]>summary{margin-bottom:8px}

.blattfuss{justify-content:space-between;border-top:1px solid var(--border-lt);
  padding-top:12px;margin-top:12px}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px 18px;font-size:.95rem;font-weight:600;
  border:1px solid var(--primary);border-radius:0;background:var(--primary);
  color:var(--auf-farbe);text-decoration:none;cursor:pointer}
.knopf:active{background:var(--primary-h);border-color:var(--primary-h)}
.knopf.zweit{background:var(--bg2);color:var(--text);border-color:var(--border-control)}
.knopf.zweit:active{background:var(--bg2-h)}
.knopf.leise{background:transparent;border-color:transparent;color:var(--text2);
  padding:10px 8px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.knopf.gefahr{background:var(--fehler);border-color:var(--fehler);color:var(--auf-farbe)}
.knopf.gefahr-leise{background:transparent;border-color:var(--border-control);color:var(--fehler)}
.knopf.breit{width:100%}
.knopf[disabled]{opacity:.55;pointer-events:none}
@media (hover:hover){
  .knopf:hover{background:var(--primary-h);border-color:var(--primary-h)}
  .knopf.zweit:hover{background:var(--bg2-h);border-color:var(--text2)}
  .knopf.leise:hover{background:transparent;color:var(--text)}
  .knopf.gefahr-leise:hover{background:var(--fehler-bg)}
  .pchip:hover,.pmarke:hover,.heuteknopf:hover,.heutesprung:hover,.monatsfeld:hover{border-color:var(--text2)}
  .menue .klappe a:hover,.menue .klappe button:hover{background:var(--bg2)}
  .tag:hover{background:var(--bg2)}
  .monatswahl>summary:hover{background:var(--bg2)}
}

/* -------------------------------------------------------------- Anmeldung */
.anmeldeseite{display:flex;align-items:center;justify-content:center;
  padding:calc(24px + var(--oben)) max(16px,var(--links))
    calc(32px + var(--unten)) max(16px,var(--rechts))}
.anmeldekasten{width:100%;max-width:26rem;background:var(--card);
  border:1px solid var(--border);padding:20px 18px 24px}
.anmeldekasten h1{font-size:1.6rem;margin:0 0 16px}
.anmeldekasten h1 em{font-style:italic}
.anmeldekasten p{color:var(--text2);font-size:.92rem}
.geraeteanmeldung{margin-bottom:16px}
.passwortweg>summary{display:flex;align-items:center;justify-content:center;
  gap:10px;min-height:44px;cursor:pointer;list-style:none;
  font-size:.88rem;color:var(--text2)}
.passwortweg>summary::-webkit-details-marker{display:none}
.passwortweg[open]>summary{margin-bottom:6px}
.passwortweg[open]>summary::before,.passwortweg[open]>summary::after{
  content:"";flex:1;height:1px;background:var(--border)}
.passwortweg:not([open])>summary{text-decoration:underline;text-underline-offset:3px}
.hinweis{font-size:.88rem;color:var(--text2);margin:14px 0 0}
.anmeldekasten h2{font-size:1.05rem;margin:22px 0 8px;padding-bottom:6px;
  border-bottom:1px solid var(--border)}
.passkeyweg{margin-bottom:4px}
.passkeyweg h2{margin-top:0}
.passkeyweg .knopfzeile{margin-top:14px}
.wechselhelfer{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.wechselhelfer .knopf{flex:1 1 10rem}
.anmeldekasten .netzhinweis{border:1px solid var(--warn-bd);border-left:3px solid var(--warn);
  background:var(--warn-bg);padding:8px 10px;color:var(--text)}
.anmeldekasten .hilfe{font-size:.88rem;color:var(--text2);margin:5px 0 0}
.spaeter{margin-top:22px;border-top:1px solid var(--border);padding-top:6px}
.spaeter .knopf.zweit{width:100%}
.spaeter .knopf.leise{width:100%}

/* ------------------------------------------------------------------ Karten */
.karte{background:var(--card);border:1px solid var(--border);padding:16px;
  margin-bottom:14px}
.karte>h2{font-size:1.2rem;margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--border)}
.karte p{color:var(--text2);font-size:.95rem}
.karte form{margin:0}
.geraeteliste{list-style:none;margin:12px 0 0;padding:0}
.geraeteliste li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  padding:8px 0;border-top:1px solid var(--border-lt)}
.geraeteliste .was{font-weight:600;flex:1;min-width:8rem}
.geraeteliste .wann{font-size:.85rem;color:var(--text3)}
.geraeteliste form{margin:0}
.umbenennen{flex-basis:100%}
.umbenennen>summary{cursor:pointer;min-height:44px;display:flex;
  align-items:center;font-size:.88rem;color:var(--text2)}
.umbenennen>form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 8px}
.umbenennen input[type=text]{flex:1;min-width:10rem;width:auto}

.tagesseite .tagesblatt{background:var(--card);border:1px solid var(--border);
  padding:14px 16px}

/* ------------------------------------------------- Familienkalender-Teile */
.wochentagwahl{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wtag input,.bkasten input,.vorlauf input{position:absolute;opacity:0;width:1px;height:1px}
.wtag span,.bkasten span,.vorlauf span{display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:4px 6px;text-align:center;
  border:1px solid var(--border-control);background:var(--card);color:var(--text);
  font-size:.88rem;font-weight:600;cursor:pointer}
.wtag input:checked+span,.vorlauf input:checked+span{background:var(--primary-flaeche);
  border-color:var(--primary-flaeche);color:var(--auf-primary)}
.bkasten input:checked+span{background:var(--text);border-color:var(--text);
  color:var(--auf-farbe)}
.wtag input:focus-visible+span,.bkasten input:focus-visible+span,
.vorlauf input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}
.bereichwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.bkasten{position:relative}
.vorlauf{position:relative}

.art.bereich{border-style:dashed;background:var(--card)}
.art.bereich.b-arbeit{color:var(--arbeit);border-color:var(--warn-bd)}
.art.bereich.b-beides{color:var(--text2);border-color:var(--border)}
.art.bereich.b-familie{color:var(--ok);border-color:var(--ok-bd)}

.erinnerungsfeld{margin-bottom:14px}
.vorlaufgruppe{margin-bottom:8px}
.gruppenname{margin:0 0 5px;font-size:.85rem;color:var(--text3)}
.vorlaufwahl{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.erinnerungsfeld .frei{margin-bottom:6px}
.erinnerungslage{margin:0 0 10px;padding:9px 11px;font-size:.92rem;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text);
  color:var(--text)}
.erinnerungslage.achtung{background:var(--warn-bg);border-color:var(--warn-bd);
  border-left-color:var(--warn);font-weight:600}
.posten .erinnert{color:var(--text3)}
.wemgilt{margin:0 0 12px;padding:9px 11px;background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid var(--text);font-size:.9rem;color:var(--text)}

.schalter{display:flex;align-items:center;gap:10px;min-height:48px;
  margin:0 0 8px;cursor:pointer;font-size:1rem;color:var(--text)}
.schalter input{width:1.4rem;height:1.4rem;accent-color:var(--primary);flex:none}
.zeitpaar{margin-bottom:4px}
.endehinweis{margin:-4px 0 12px;padding:8px 10px;font-size:.88rem;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text);color:var(--text)}
.endehinweis.achtung{background:var(--warn-bg);border-color:var(--warn-bd);border-left-color:var(--warn)}

/* ----------------------------------------------------------- Stundenraster */
.ganztagsband{margin-bottom:12px}
.stundenraster{position:relative;--zeile:46px;--minute:calc(var(--zeile) / 60);
  border:1px solid var(--border);background:var(--card);margin-bottom:14px}
.stunde{position:relative;height:var(--zeile);border-top:1px solid var(--border-lt)}
.stunde:first-child{border-top:0}
.uhr{position:absolute;left:6px;top:-.62em;font-size:.75rem;font-weight:600;
  color:var(--text3);font-variant-numeric:tabular-nums;
  background:var(--card);padding:0 3px}
.zeitposten{position:absolute;left:3.3rem;right:6px;
  top:calc((var(--start) - var(--erste) * 60) * var(--minute));
  height:calc((var(--ende) - var(--start)) * var(--minute));
  min-height:2.9rem;display:flex;flex-direction:column;gap:1px;
  padding:4px 8px;overflow:hidden;
  /* Weisser Grund, Farbe nur in der Kante: auf einer Toenung reissen die
     schwachen Personenfarben AA (06.09.2026). */
  background:var(--card);
  border:1px solid var(--f);border-left:4px solid var(--f)}
.zeitposten .zeit{font-size:.78rem;font-weight:700;color:var(--f);
  font-variant-numeric:tabular-nums}
.zeitposten .titel{font-size:.92rem;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeitposten .wer{font-size:.78rem;color:var(--text2)}
/* Kurzer Termin: Zeit und Titel in einer Zeile, die Person darunter faellt
   weg (S7). Mindesthoehe 44 px, damit er antippbar bleibt. */
.zeitposten.kurz{flex-direction:row;align-items:center;flex-wrap:wrap;gap:0 8px;
  padding-top:2px;padding-bottom:2px}
.zeitposten.kurz .zeit{flex:none}
.zeitposten.kurz .titel{flex:1;min-width:0}
.zeitposten.kurz .wer{display:none}
.zeitposten .ganz{position:absolute;inset:0}

.ort a{color:var(--primary);text-decoration:underline}

/* -------------------------------------------------------------- Auswertung */
.auswahl{background:var(--card);border:1px solid var(--border);padding:14px 16px;
  margin-bottom:14px}
.auswahl fieldset{border:0;padding:0;margin:0 0 14px}
.auswahl legend{font-size:.88rem;font-weight:600;color:var(--text2);padding:0;margin-bottom:6px}
.personenwahl{display:flex;flex-wrap:wrap;gap:12px 6px}
.pkasten,.zkasten{position:relative}
.pkasten input,.zkasten input{position:absolute;opacity:0;width:1px;height:1px}
.pkasten span,.zkasten span{position:relative}
.pkasten span::after,.zkasten span::after{content:"";position:absolute;
  left:0;right:0;top:-6px;bottom:-6px}
.pkasten span{display:inline-flex;align-items:center;min-height:2.1rem;padding:0 14px;
  border:1px solid var(--border-control);border-radius:20px;background:var(--card);
  color:var(--text);font-size:.9rem;cursor:pointer}
.pkasten input:checked+span{background:var(--f);border-color:var(--f);color:var(--auf-farbe);
  font-weight:600}
.pkasten input:focus-visible+span,.zkasten input:focus-visible+span{
  outline:2px solid var(--focus);outline-offset:2px}
.zeitraumwahl{display:flex;flex-wrap:wrap;gap:12px 6px;margin-bottom:10px}
.zkasten span{display:inline-flex;align-items:center;min-height:2.1rem;padding:0 14px;
  border:1px solid var(--border-control);background:var(--card);color:var(--text);
  font-size:.9rem;cursor:pointer}
.zkasten input:checked+span{background:var(--text);border-color:var(--text);
  color:var(--auf-farbe);font-weight:600}
.zusammenfassung{background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--text);padding:14px 16px;margin-bottom:14px}
.zusammenfassung h2{font-size:1.2rem;margin:0 0 4px}
.zeitfenster{color:var(--text2);font-size:.92rem;margin:0 0 10px}
.typzahlen{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;
  padding:0;font-size:.9rem;color:var(--text2)}
.typzahlen .zahl{font-family:"DM Serif Display",Georgia,serif;font-size:1.25rem;
  color:var(--text);margin-right:4px}
.typzahlen i{font-style:normal;color:var(--text3);font-size:.82rem;margin-left:5px}
.urlaubszahlen{list-style:none;margin:12px 0 0;padding:0;font-size:.92rem;color:var(--text2)}
.urlaubszahlen li{padding:6px 0 6px 10px;border-left:3px solid var(--f)}
.urlaubszahlen b{color:var(--text)}
.ergebnisliste{list-style:none;margin:0;padding:0}
.ergebnisliste .posten{background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--f,var(--text3));padding:10px 12px;margin-bottom:8px}

.ganzertag{margin:0 0 14px}
.ganzertag>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  gap:8px;font-size:.9rem;color:var(--text2);list-style:none}
.ganzertag>summary::-webkit-details-marker{display:none}
.ganzertag>summary::after{content:"";flex:none;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor}
.ganzertag[open]>summary::after{transform:rotate(180deg)}

/* ------------------------------------------------ Wochenblatt (06.09.2026)

   Sieben Tage nebeneinander mit Stundenraster: links die Uhrzeiten, rechts
   die sieben Tage in drei Zeilen. Alle drei teilen dieselbe
   Spaltenaufteilung, sonst stuende ein Band ueber der falschen Spalte. */
.wochenraster{--wzeile:44px;--wminute:calc(var(--wzeile) / 60);--uhrbreite:2.4rem}
.wochengitter{display:grid;grid-template-columns:var(--uhrbreite) minmax(0,1fr);
  column-gap:2px;align-items:start}
.uhrecke{min-height:1px}
.wochentagsleiste{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;background:var(--border-lt);border:1px solid var(--border-lt);margin-bottom:4px}
.wtagfeld{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:1px;min-height:52px;padding:4px 1px;min-width:0;overflow:hidden;
  background:var(--card);color:inherit;text-decoration:none}
.wtagfeld .wt{padding:0}
.wtagfeld .ziffer{margin:0}
.wtagfeld .ferleiste{top:0;left:0;right:0}
.wtagfeld .ftname{max-width:100%;font-size:.62rem}
.ganztagsmarke{font-size:0;color:var(--text3);text-align:right;
  padding:3px 4px 0 0;line-height:1.2;overflow:hidden}
.ganztagsfeld{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:4px;
  background:var(--border-lt);border:1px solid var(--border-lt)}
.ganztagsfeld > *{grid-area:1/1}
.ganztagsfeld .baender{padding-top:0}
.gtfeld{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden;
  padding:1px;min-height:calc(var(--bandh) + 4px);background:var(--card);
  padding-top:calc(1px + var(--reihen,0) * var(--bandh))}
.gtfeld .chip i{display:block}
.uhrleiste{display:grid;grid-auto-rows:var(--wzeile);height:calc(var(--anzahl) * var(--wzeile))}
.uhrzeile{position:relative}
.uhrzeile i{position:absolute;right:3px;top:-.55em;font-style:normal;
  font-size:.7rem;font-weight:600;color:var(--text3);
  font-variant-numeric:tabular-nums;background:var(--bg);padding:0 2px}
.wochenspalten{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;height:calc(var(--anzahl) * var(--wzeile));
  background:var(--border-lt);border:1px solid var(--border-lt)}
.wochenspalte{position:relative;min-width:0;background-color:var(--card);
  background-image:repeating-linear-gradient(to bottom,
    var(--border-lt) 0, var(--border-lt) 1px,
    transparent 1px, transparent var(--wzeile))}
.wochenspalte.we{background-color:var(--tag-we)}
.saeule{position:absolute;inset:0;z-index:0;cursor:copy}
.saeule:active{background:var(--druck-tint)}
.wposten{position:absolute;z-index:1;
  top:calc((var(--start) - var(--erste) * 60) * var(--wminute));
  height:calc((var(--ende) - var(--start)) * var(--wminute));
  left:calc(var(--spur) * 28%);
  width:calc(100% - var(--spur) * 28%);
  z-index:calc(1 + var(--spur));
  min-height:2rem;display:flex;flex-direction:column;overflow:hidden;
  padding:1px 3px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--f);box-shadow:var(--staffel-kante)}
/* Titel zuerst, die Zeit steht ohnehin an der Uhrleiste (S7). */
.wposten i{font-style:normal;font-size:.7rem;font-weight:600;color:var(--text);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wposten u{text-decoration:none;font-size:.66rem;font-weight:700;
  color:var(--f);font-variant-numeric:tabular-nums;line-height:1.25;
  white-space:nowrap;overflow:hidden}
.wposten.wartet{border-style:dashed}
.wposten:active{background:var(--bg2)}

/* ------------------------------------------------------- Liste und Suche */
.suchzeile{position:relative;display:flex;gap:8px;align-items:center;margin:0 0 12px}
.suchzeile .ikon{position:absolute;left:12px;color:var(--text3);pointer-events:none}
.suchzeile input[type=search]{flex:1;padding-left:2.5rem;border-radius:24px;
  -webkit-appearance:none;appearance:none}
.suchknopf{flex:none}
.listenstand{margin:0 0 10px;color:var(--text2)}
.listenblatt.laedt{opacity:.55}
.listentag{margin:0 0 14px}
.listenkopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:0 0 6px;padding:6px 2px 4px;font-family:inherit;font-size:1rem;font-weight:700;
  border-bottom:1px solid var(--border)}
.listenkopf a{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;
  align-items:center;color:var(--text);text-decoration:none}
.listenkopf a span{font-weight:500;color:var(--text2)}
.listentag.heute .listenkopf a{color:var(--heute)}
.lfeiertag{font-size:.85rem;font-weight:600;color:var(--feiertag)}
.listenposten{list-style:none;margin:0;padding:0}
.lposten+.lposten{margin-top:6px}
.lgriff{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:0 10px;
  align-items:baseline;min-height:52px;padding:8px 10px;background:var(--card);
  border:1px solid var(--border);border-left:4px solid var(--f,var(--text3));
  color:var(--text);text-decoration:none}
.lgriff:active{background:var(--bg2)}
.lzeit{grid-row:1/span 2;font-size:.85rem;font-weight:600;color:var(--text2);
  font-variant-numeric:tabular-nums}
.ltitel{font-weight:600;overflow-wrap:anywhere}
.lwer{font-size:.85rem;color:var(--text2)}
.lwer .zeichen{display:inline-flex;align-items:center;justify-content:center;
  min-width:1.3rem;height:1.3rem;padding:0 3px;border-radius:3px;font-size:.72rem;
  background:var(--f);color:var(--auf-farbe);margin-right:2px}
.lposten.t-urlaub .lgriff{background:var(--card)}
.lposten.vorbei .lgriff{background:var(--posten-vorbei);border-left-style:dotted}
.lposten.vorbei .ltitel{font-weight:500}

/* ----------------------------------------------------------- Planungsteil
   Was vorher in stil.css stand und nur der Planungsteil braucht. */
.planung h1{font-size:1.75rem;margin:4px 0 6px}
.planung main>h2{font-size:1.3rem;margin:22px 0 10px}
.hinfuehrung{color:var(--text2);max-width:68ch;margin:0 0 16px}
.lage{display:grid;gap:14px}
.warnliste{list-style:none;margin:0;padding:0}
.warnliste li{padding:8px 0;border-bottom:1px solid var(--border-lt);
  font-size:.95rem;color:var(--text2)}
.warnliste li:last-child{border-bottom:none}
.zeitraum{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
details.mehr{margin-top:8px}
details.mehr summary{cursor:pointer;font-size:.92rem;color:var(--text2);
  padding:8px 0;min-height:44px;display:flex;align-items:center}
.werkzeugzeile{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
/* Der Druckbogen bleibt Papier, auch im dunklen Modus (--papier). */
.rahmenfeld{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--papier);
  border:1px solid var(--border)}
.rahmen{width:900px;height:75vh;min-height:400px;border:0;background:var(--papier);display:block}
.rechnung{border:1px solid var(--border);border-left:3px solid var(--text);
  background:var(--bg2);padding:12px 14px;margin-bottom:14px;color:var(--text)}
.rechnung h3{font-family:inherit;font-size:.88rem;font-weight:700;color:var(--text2);margin:0 0 6px}
.rechnung .zahl{font-family:"DM Serif Display",Georgia,serif;font-size:1.35rem;
  line-height:1.25;color:var(--text);margin:0}
.rechnung .dazu{font-size:.9rem;color:var(--text2);margin:6px 0 0}
.rechnung ul{margin:8px 0 0;padding-left:18px;font-size:.92rem;color:var(--text)}
.rechnung li{margin-bottom:4px}
.rechnung .warnung{color:var(--warn);font-weight:600}
.rechnung.still{background:var(--card);border-left-color:var(--border)}
.jahrmarke{font-size:.88rem;font-weight:700;color:var(--text2);
  margin:22px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.liste{list-style:none;margin:0;padding:0}
.liste .posten{background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--f,var(--text3));padding:12px 14px;margin-bottom:8px;
  display:grid;gap:6px}
.liste .posten.vorbei{background:var(--posten-vorbei);border-left-style:dotted}
.liste .posten .oben{margin:0}
.liste .posten .was{font-weight:600}
.liste .posten .rand{margin:0}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-size:.85rem;font-weight:700;color:var(--text2);
  border-bottom:1px solid var(--border);padding:6px 8px 6px 0}
td{border-bottom:1px solid var(--border-lt);padding:9px 8px 9px 0;
  vertical-align:top;color:var(--text2)}
td.wichtig{color:var(--text)}
td:last-child,th:last-child{padding-right:0;text-align:right;white-space:nowrap}
form.inline{display:inline}
.tabellenrahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------ Grosser Bildschirm */
@media (min-width:26rem){
  .vorlaufwahl{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:640px){
  main{padding:12px max(16px,var(--links)) calc(96px + var(--unten))
    max(16px,var(--rechts));max-width:60rem;margin:0 auto}
  .leistenzeile,.ansichtsleiste,.unterleiste{max-width:60rem;margin:0 auto;
    padding-left:12px;padding-right:12px}
  .monatstitel{font-size:1.6rem}
  .tag{min-height:calc(6.4rem + var(--reihen,0) * var(--bandh))}
  /* Ab hier ist Platz fuer Titel. Das Zeichen der Person tritt zurueck,
     die Farbe der Kante und der Titel tragen. */
  .chip{font-size:.78rem}
  .chip .zeichen{display:none}
  .chip u{display:inline}
  .chip i{display:block}
  .ferleiste{position:static;flex-direction:row;gap:2px;padding-top:2px;flex-wrap:wrap;
    justify-content:flex-end}
  .fer{flex:none;height:auto;font-size:.68rem;font-weight:700;padding:0 4px;
    border-radius:3px;line-height:1.45;border:1px solid}
  .fer.k-ferien{background:var(--ferien-be-bg);color:var(--ferien-be-text);border-color:var(--ferien-be-bd)}
  .fer.k-ferien.f-BB{background:var(--ferien-bb-bg);color:var(--ferien-bb-text);border-color:var(--ferien-bb-bd)}
  .fer.k-frei{background:var(--schulfrei-bg);color:var(--schulfrei-text);border-color:var(--schulfrei-bd)}
  .fer.k-einschulung{background:var(--einschulung-bg);color:var(--einschulung-text);border-color:var(--einschulung-bd)}
  .fer.f-BB:not(.k-ferien){border-style:dashed}
  .tagkopf{flex-wrap:wrap}
  .stundenraster{--zeile:54px}
  .zeitposten{left:3.8rem}
  .wochenraster{--wzeile:54px;--uhrbreite:3.1rem}
  .ganztagsmarke{font-size:.68rem}
  .wtagfeld{min-height:60px}
  .wposten i{font-size:.8rem}
  .wposten u{font-size:.72rem}
  .gtfeld .chip{font-size:.72rem}
  .lage{grid-template-columns:1fr 1fr;align-items:start}
  .planung h1{font-size:2.1rem}
  .liste .posten{grid-template-columns:1fr auto;align-items:start}
  .liste .posten .taten{grid-column:2;grid-row:1/span 3;justify-content:flex-end}
  .hinweisleiste{left:50%;right:auto;transform:translate(-50%,8px);width:min(34rem,calc(100vw - 32px))}
  .hinweisleiste.zeigt{transform:translate(-50%,0)}
}

@media (min-width:940px){
  .rahmen{width:100%}
}

/* Rechner: eigenes breites Layout (S9). Monat links, die Liste des gewaehlten
   Tages als Seitenleiste rechts, "Neu" oben statt des Pluszeichens, das
   Eingabeblatt als zentrierter Dialog. */
@media (min-width:1024px){
  main{max-width:90rem;padding:16px 24px 48px}
  .leistenzeile,.ansichtsleiste,.unterleiste{max-width:90rem;padding-left:20px;padding-right:20px}
  .leistenzeile{gap:10px}
  .monatswahl{flex:0 1 auto}
  .monatswahl>summary{justify-content:flex-start;padding:0 8px}
  .leistenzeile .monatstitel{flex:0 1 auto;text-align:left}
  #zurueck{order:-2}
  #vor{order:-1}
  .heuteknopf{order:-3;margin-right:6px}
  .knopf.neuknopf{display:inline-flex;gap:6px;margin-left:auto;min-height:2.5rem;padding:0 16px}
  .neuknopf .ikon{width:1.1rem;height:1.1rem}
  .menue{margin-left:0}
  .plus{display:none}
  .monatsklappe{left:20px;right:auto;width:26rem}
  /* Der Filter steht offen in der Leiste, ohne Klappe. */
  .filterwahl.fest>summary{display:none}
  .filterwahl.fest .filterklappe{position:static;width:auto;border:0;box-shadow:none;
    padding:0;flex-direction:row;align-items:center;gap:16px;background:transparent}
  .filterwahl.fest .ansichtwahl{flex:none}
  .filterwahl.fest .ansichtknopf{padding:0 14px;min-height:2.25rem}
  .filterwahl.fest .personenfilter{flex-wrap:nowrap;overflow-x:auto;padding:6px 0;scrollbar-width:none}

  .raster:not(.wochenraster){display:grid;grid-template-columns:minmax(0,1fr) 23rem;
    column-gap:20px;align-items:start}
  .raster:not(.wochenraster)>*{grid-column:1}
  .raster:not(.wochenraster)>.tagesfeld{grid-column:2;grid-row:1 / span 5;margin:0;
    position:sticky;top:7.5rem;max-height:calc(100vh - 8.5rem);overflow:auto}
  .tag{min-height:calc(7.4rem + var(--reihen,0) * var(--bandh))}
  .chip{font-size:.82rem;min-height:1.3rem}
  .band{font-size:.78rem}
  :root{--bandh:1.25rem}

  .blatt-dialog{margin:auto;max-width:38rem;border:1px solid var(--border);border-radius:12px;
    max-height:min(90vh,52rem)}
  .blattinhalt,.eingabe{max-height:min(90vh,52rem);padding-bottom:20px}
  .festkopf{margin:0 -16px 14px}
  .hinweisleiste{bottom:24px}
}

@media (prefers-reduced-motion:reduce){
  .raster.wechselt,.tagesfeld,.hinweisleiste,.monatswahl>summary .ikon{transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

@media print{
  .leiste,.plus,.stand,.konflikte,.fusszeile,.ansichtsleiste,.ansichthinweis,
  .verdecktzeile,.saeule,.hinweisleiste,.tagesfeld,.unterleiste,.werkzeugzeile,
  form,.taten{display:none}
  body{background:#fff;color:#000}
  .rahmen{height:auto;border:none}
}

/* ===================================================== Kompakte Kopfzeile
   (05.10.2026, zweiter Zug, Chris: "das obere Drittel ... ist zu viel, der
   Kalender muss im Vordergrund stehen.")

   Telefon: eine Zeile von 48 px. Titel links (Tipp = Monatswahl), rechts
   Heute, Ansicht, Filter, Menue als Symbolknoepfe mit 44 px. Keine Pfeile,
   kein Segment, kein Filtertext. Gemessen vorher 95 px Kopf (12,2 % bei
   844 px Hoehe), Ziel unter 10 %.

   Ab 640 px bricht dieselbe Flexzeile nach dem Menue um, und darunter
   stehen Segment und Filter wie vorher. Die Reihenfolge macht `order`, im
   Markup steht jedes Element einmal (templates/app.html). Diese Regeln
   stehen am Ende der Datei und uebersteuern damit die Kopfregeln weiter
   oben. */
/* flex-wrap bleibt an: bei 200 Prozent Schrift rutschen die Symbolknoepfe in
   eine zweite Zeile, statt den Monatsnamen abzuschneiden (WCAG 1.4.4). Bei
   normaler Schrift passt alles in eine Zeile, weil der Titel mit 9 rem
   Grundbreite plus vier Knoepfe unter 360 px bleibt. */
.leistenzeile{flex-wrap:wrap;min-height:48px;gap:0;justify-content:flex-end;
  padding:0 max(2px,var(--rechts)) 0 max(12px,var(--links))}
.leistenzeile #zurueck,.leistenzeile #vor{display:none}
.leistenzeile>.monatswahl,.leistenzeile>.monatstitel{order:1;flex:1 1 9rem;min-width:0}
.monatswahl{position:static}
.monatswahl>summary{justify-content:flex-start;min-height:44px;padding:0 4px 0 0}
.monatstitel,.monatswahl>summary .monatstitel{font-size:1.2rem;text-align:left}
.leistenzeile>.monatstitel{padding-left:0}
.blatt-woche .monatstitel{font-size:1rem}
.monatsklappe{left:8px;right:8px}

/* Symbolknoepfe: 44 px Trefferflaeche, ohne Rahmen. */
.heuteknopf,.ansichtklappe>summary,.filterwahl>summary,.menue>summary{
  min-width:44px;min-height:44px;width:auto;height:auto;padding:0;border:0;
  border-radius:8px;background:transparent;display:flex;align-items:center;
  justify-content:center;color:var(--text);list-style:none;cursor:pointer}
.heuteknopf{order:2;flex:none}
.heuteknopf::after{display:none}
.heutebild{position:relative;display:inline-flex;width:1.5rem;height:1.5rem}
.heutebild .ikon{width:1.5rem;height:1.5rem}
.heutebild b{position:absolute;left:0;right:0;bottom:.12rem;text-align:center;
  font-size:.62rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.heutetext{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.ansichtklappe{order:3;flex:none}
.ansichtklappe>summary::-webkit-details-marker{display:none}
.ansichtklappe[open]>summary,.filterwahl[open]>summary,.menue[open]>summary{background:var(--bg2)}
.ansichtliste{position:absolute;right:8px;top:100%;z-index:40;width:12rem;
  display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);
  border-radius:8px;background:var(--card);box-shadow:var(--schatten-klappe);overflow:hidden}
.ansichtliste .seg{justify-content:flex-start;gap:10px;min-height:48px;padding:0 14px;
  border-left:0}
.ansichtliste .seg+.seg{border-left:0;border-top:1px solid var(--border-lt)}
.ansichtliste .seg::after{display:none}

.filterwahl{order:4;flex:none;margin-left:0;position:static}
.filterwahl>summary::after{display:none}
.filterwahl .filterstand{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.filterwahl>summary{position:relative}
/* Ein Punkt am Filter, sobald etwas ausgeblendet wird (Arbeit, Alles oder
   eine Personenauswahl). Form zusaetzlich zur Farbe: ein gefuellter Kreis
   mit Rand in der Kartenfarbe. */
.filterpunkt{position:absolute;top:9px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--primary-flaeche);box-shadow:0 0 0 2px var(--card)}
.filterklappe{right:8px;top:100%}

.menue{order:5;flex:none}
.leistenzeile>.knopf.neuknopf{order:5}
.umbruch,.breitsegment{display:none}

/* Planung, Konto, Auswertung: der Zurueck-Pfeil bleibt sichtbar. */
.leistenzeile>.pfeil:not(#zurueck):not(#vor){order:0;min-width:40px;margin-left:-8px}

/* Der Hinweis auf eine andere Ansicht als Familie steht knapp in einer Zeile. */
.ansichthinweis{margin:0 0 6px;padding:5px 10px;font-size:.82rem}

main{padding-top:4px}

/* Monat: die gewonnene Hoehe geht an das Raster, aber nur so viel, dass der
   Anfang der Tagesliste ohne Scrollen sichtbar bleibt. */
.wt{padding:2px 2px}
.tag{min-height:calc(4.2rem + var(--reihen,0) * var(--bandh))}

/* Woche auf dem Telefon: schmale Uhrspalte (28 px), nur die Stundenzahl,
   kompakte Tagekoepfe. */
.wochenraster{--uhrbreite:1.75rem}
.wochengitter{column-gap:1px}
.uhrzeile i{right:2px;font-size:.62rem;font-weight:600;padding:0 1px}
.wtagfeld{min-height:44px;padding:2px 0;gap:0}
.wtagfeld .wt{font-size:.68rem;line-height:1.1}
.wtagfeld .ziffer{width:1.4rem;height:1.4rem;font-size:.8rem}
.wtagfeld .ftname{display:none}
.gtfeld{min-height:calc(var(--bandh) + 2px)}

/* Stundenraster im Tagesblatt und in der Tagesliste: dieselbe schmale
   Uhrspalte. */
.uhr{left:3px;font-size:.66rem;padding:0 2px}
.zeitposten{left:2.1rem;right:4px}

@media (min-width:640px){
  .leistenzeile{flex-wrap:wrap;row-gap:2px;padding:0 12px 6px}
  .leistenzeile #zurueck,.leistenzeile #vor{display:flex}
  .leistenzeile #zurueck{order:1}
  .leistenzeile>.monatswahl,.leistenzeile>.monatstitel{order:2}
  .leistenzeile #vor{order:3}
  .monatswahl>summary{justify-content:center}
  .monatstitel,.monatswahl>summary .monatstitel{font-size:1.5rem;text-align:center}
  .blatt-woche .monatstitel{font-size:1.25rem}
  .heuteknopf{order:4;width:auto;height:auto;min-height:2.25rem;padding:0 .8rem;
    border:1px solid var(--border-control);border-radius:1.2rem;background:var(--card);
    font-size:.88rem;font-weight:600;margin:0 4px}
  .heutebild{display:none}
  .heutetext{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .ansichtklappe{display:none}
  .menue{order:6}
  .leistenzeile>.knopf.neuknopf{order:5}
  .umbruch{display:block;order:7;flex-basis:100%;height:0}
  .breitsegment{display:grid;order:8}
  .filterwahl{order:9;margin-left:auto;position:relative}
  .filterwahl>summary{width:auto;padding:0 .75rem;min-height:2.25rem;height:auto;
    border:1px solid var(--border-control);border-radius:8px;background:var(--card);gap:6px;
    font-size:.88rem;font-weight:600}
  .filterwahl .filterstand{position:static;width:auto;height:auto;overflow:hidden;
    clip-path:none;text-overflow:ellipsis;max-width:9rem}
  .filterpunkt{display:none}
  .filterklappe{right:0;top:calc(100% + 6px)}
  .tag{min-height:calc(6.4rem + var(--reihen,0) * var(--bandh))}
  /* Ab 640 px wieder die alte Breite: dort steht auch "ganztägig" in der
     Spalte, und Platz ist genug (Desktop darf nicht schlechter werden). */
  .wochenraster{--uhrbreite:3.1rem}
  .uhrzeile i{font-size:.7rem}
  .wtagfeld{min-height:58px}
  .wtagfeld .ftname{display:block}
  .uhr{left:6px;font-size:.75rem}
  .zeitposten{left:3.2rem;right:6px}
}

@media (min-width:1024px){
  .leistenzeile{padding:0 20px 6px}
  .heuteknopf{order:1;margin:0 6px 0 0}
  .leistenzeile #zurueck{order:2}
  .leistenzeile #vor{order:3}
  .leistenzeile>.monatswahl,.leistenzeile>.monatstitel{order:4;flex:0 1 auto}
  .monatswahl>summary{justify-content:flex-start}
  .monatstitel,.monatswahl>summary .monatstitel{font-size:1.6rem;text-align:left}
  .leistenzeile>.knopf.neuknopf{order:5;margin-left:auto}
  .menue{order:6}
  .monatsklappe{left:20px;right:auto}
  .tag{min-height:calc(7.4rem + var(--reihen,0) * var(--bandh))}
}

/* ============================================== Stundenraster fuellt den Schirm
   (05.10.2026, zweiter Zug, Larry fuer Chris.) Die Woche zeigt mindestens 7
   bis 21 Uhr (kalender.py, RASTER_VON/RASTER_BIS). Uhrspalte und Tagesspalten
   liegen in einem Rollkasten, der bis zum unteren Bildschirmrand reicht;
   kalender.js setzt Hoehe und Stundenhoehe (mindestens 40 px) und springt auf
   die aktuelle Uhrzeit oder den ersten Termin. Tagekoepfe und Ganztaegiges
   bleiben oben stehen. Ohne JavaScript steht das Raster in voller Laenge da. */
.stundenkasten{grid-column:1 / -1;display:grid;
  grid-template-columns:var(--uhrbreite) minmax(0,1fr);column-gap:1px;
  align-items:start;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-top:.55rem;
  /* Platz unter der letzten Stunde, damit das Pluszeichen sie nicht
     dauerhaft verdeckt: sie laesst sich darueber hinaus scrollen. */
  padding-bottom:calc(76px + var(--unten))}
.stundenkasten:focus-visible{outline-offset:-2px}
.wochenraster .fusszeile{margin-top:16px}

/* Die Linie "jetzt" am heutigen Tag, in Woche und Tagesblatt. Rot ist hier
   die Bedeutung Heute (--heute), dazu ein Punkt am Anfang: Form statt nur
   Farbe. */
.jetztlinie{position:absolute;left:0;right:0;height:2px;z-index:6;pointer-events:none;
  background:var(--heute);
  top:calc((var(--jetzt) - var(--erste) * 60) * var(--wminute))}
.jetztlinie::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--heute)}
.stundenraster .jetztlinie{left:2.1rem;
  top:calc((var(--jetzt) - var(--erste) * 60) * var(--minute))}

/* Im Tagesblatt und in der Tagesliste ein eigener, begrenzter Rollkasten. */
.rasterkasten{max-height:min(60vh,32rem);overflow-y:auto;overscroll-behavior:contain;
  margin-bottom:14px;padding-top:.6rem;border:1px solid var(--border)}
.rasterkasten .stundenraster{margin-bottom:0;border:0}

@media (min-width:640px){
  .stundenkasten{column-gap:2px}
  .stundenraster .jetztlinie{left:3.2rem}
}
@media (min-width:1024px){
  .stundenkasten{padding-bottom:8px}
}

/* ======================================== Dritter Zug: Kopf nie umbrechen,
   Titel immer lesbar (05.10.2026, Chris vom echten Telefon: "das Hamburger
   Menue ist jetzt als einziges in 3. Zeile" und "Bei Kalendereintraegen immer
   sagen, worum es geht").

   Ursache der umgebrochenen Zeile (nachgestellt, Foto im Bericht): Die Zeile
   durfte seit dem zweiten Zug umbrechen, und der Titel hatte eine
   Grundbreite von 9 rem. Bei 115 bis 130 Prozent Schrift (Android
   Schriftgroesse, Safari-Seitenzoom) oder 320 px Breite passte das Menue
   nicht mehr und rutschte allein in eine neue Zeile.

   Jetzt: auf dem Telefon nie umbrechen. Der Titel schrumpft (Grundbreite 0),
   steht in Zahlen ("10.2026"), bei Platznot knapper ("10.26"), und erst wenn
   auch das nicht passt, wandern Ansicht und Filter ins Menue (Klasse "eng",
   kalender.js). Die Knoepfe haben feste 44 px, ihre Symbole feste 24 px,
   damit sie mit der Schrift nicht wachsen. */
@media (max-width:639px){
  .leistenzeile{flex-wrap:nowrap}
  .leistenzeile>.monatswahl,.leistenzeile>.monatstitel{flex:1 1 0;min-width:0}
  .monatswahl>summary{min-width:0;overflow:hidden}
  .monatswahl>summary .monatstitel{min-width:0;overflow:hidden;white-space:nowrap}
  .monatstitel{overflow:hidden;text-overflow:clip;white-space:nowrap}
  #monatstitel{font-variant-numeric:tabular-nums}
  #monatstitel span{color:inherit}
  .heuteknopf,.ansichtklappe>summary,.filterwahl>summary,.menue>summary{
    flex:none;width:44px;height:44px;min-width:44px;min-height:44px}
  .leistenzeile .ikon,.heutebild,.heutebild .ikon{width:24px;height:24px}
  .heutebild b{font-size:10px;bottom:2px}
  .menue .balken{width:20px}
  #monatstitel .t-lang{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  #monatstitel .t-zahl{display:inline}
  #monatstitel .t-knapp{display:none}
  .leiste.knapp #monatstitel .t-zahl{display:none}
  .leiste.knapp #monatstitel .t-knapp{display:inline}
  .leiste.eng .ansichtklappe,.leiste.eng .filterwahl>summary{display:none}
  .leiste.eng .menue .nureng{display:flex}
}
.t-zahl,.t-knapp{display:none}
.menue .nureng{display:none}

/* Monat auf dem Telefon: jeder Eintrag zeigt seinen Titel, nie nur einen
   Buchstaben. 11 px, fett genug, Text in --text auf abgesetzter Flaeche
   (AA in hell und dunkel), die Person als Streifen links. Urlaub bleibt
   gefuellt. Uhrzeit weg, sie steht in der Tagesliste. Beschnitten wird ohne
   "...", das kostet in 50 px Breite sonst zwei von acht Zeichen. Steht nur
   ein Eintrag im Tag, bekommt er drei Zeilen, bei zweien je zwei, bei drei
   je eine. Getrennt wird an jeder Stelle (word-break) und nicht nach Silben:
   in 50 px zeigt "Kinder|chor" sechs Zeichen je Zeile, "Kin-|der-" nur drei. */
@media (max-width:639px){
  .gitter .chip{display:block;min-height:0;padding:1px 2px 1px 3px;border:0;
    border-left:3px solid var(--f,var(--text3));border-radius:2px;
    background:var(--bg2);color:var(--text);font-size:.69rem;line-height:1.2;
    font-weight:600;white-space:normal;overflow:hidden;max-height:calc(1.2em + 2px);
    word-break:break-all;overflow-wrap:anywhere}
  .gitter .chips.n1 .chip{max-height:calc(3.6em + 2px)}
  .gitter .chips.n2 .chip{max-height:calc(2.4em + 2px)}
  .gitter .chip .zeichen,.gitter .chip u{display:none}
  .gitter .chip i{display:block;overflow:visible;text-overflow:clip;white-space:normal}
  .gitter .chip.t-urlaub{background:var(--f);color:var(--auf-farbe)}
  .gitter .chip.t-schliesszeit{border-left-color:var(--text3)}
  .gitter .chip.t-frist{border-left-style:dashed}
  .gitter .chip.wartet{outline:1px dashed var(--text3);outline-offset:-1px}
  .tag{min-height:calc(4.6rem + var(--reihen,0) * var(--bandh))}

  /* Woche: Ganztaegiges bis zwei Zeilen, Termine im Raster mit Titel statt
     Uhrzeit (die Uhrzeit steht an der Uhrleiste). */
  .gtfeld .chip{display:block;font-size:.66rem;line-height:1.2;padding:1px 2px;
    white-space:normal;max-height:calc(2.4em + 2px);overflow:hidden;
    word-break:break-all;overflow-wrap:anywhere;
    border-left:3px solid var(--f);background:var(--bg2);color:var(--text)}
  .gtfeld .chip i{white-space:normal;text-overflow:clip;overflow:visible}
  .gtfeld .chip.t-urlaub{background:var(--f);color:var(--auf-farbe)}
  .wposten u{display:none}
  .wposten i{white-space:normal;text-overflow:clip;font-size:.66rem;line-height:1.2;
    word-break:break-all;overflow-wrap:anywhere}
}

/* Stundenraster 4 bis 24 Uhr, sichtbar 6 bis 18 Uhr (kalender.js). Die Kaesten
   enden oberhalb des Pluszeichens, deshalb nur noch wenig Polster innen. */
.stundenkasten{padding-bottom:8px}
.rasterkasten{max-height:none}

/* Der Titel eines Termins im Stundenraster schrumpft nie (gefunden im
   dritten Zug, 05.10.2026): in einem 60-Minuten-Kasten mit 58 px blieben
   Zeit und Person stehen, und der Titel bekam als einziges Element mit
   overflow:hidden die Hoehe 0. Jetzt geben Person und Zeit zuerst nach. */
.zeitposten .titel{flex:none;order:1}
.zeitposten .zeit{flex:none;order:0}
.zeitposten .wer{order:2;min-height:0;overflow:hidden;flex:0 1 auto}
.zeitposten.kurz .titel{flex:1 1 0}
/* Das Pluszeichen waechst nicht mit der Schrift: bei 200 Prozent bedeckte es
   sonst ein Viertel der Breite. 56 px bleiben ueber der 44-px-Grenze. */
.plus{width:56px;height:56px}
.plus .ikon{width:26px;height:26px}
/* Der Titel steht in Tinte, nicht im grauen Ton der alten Jahreszahl. */
#monatstitel .t-lang,#monatstitel .t-zahl,#monatstitel .t-knapp{color:var(--text)}

/* ======================================================= Design-Review Runde 1
   (05.10.2026, Befunde in belege/2026-10-05-design-review-runde-1.md).
   Diese Regeln stehen am Ende und uebersteuern die frueheren Zuege. */

/* P1-1, P2-3: ein Eintragsstil auf allen Breiten. Flaeche --bg2, Streifen in
   der Personenfarbe links, Schrift --text, Uhrzeit in --text2. Urlaub bleibt
   gefuellt. Gestrichelt ist nur noch "wartet auf Versand". Auf dem Telefon
   eine Zeile je Eintrag, 12 px, abgeschnitten ohne "..." und nie mitten im
   Wort. Nur ein einzelner Eintrag am Tag darf zwei Zeilen nutzen, getrennt an
   Wortgrenzen und nach Silben (lang="de"). */
/* Flaeche, Toenung und Schrift der Eintraege legt Iris fest (Block
   "Iris-Festlegungen" am Ende, GL-003 §4d). Hier steht nur der Umbruch. */
@media (max-width:639px){
  .gitter .chip{display:block;font-size:.75rem;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:clip;word-break:normal;
    overflow-wrap:normal;max-height:calc(1.25em + 2px)}
  .gitter .chip i{display:inline;white-space:nowrap;overflow:visible;text-overflow:clip}
  .gitter .chips.n1 .chip,.gitter .chips.n2 .chip{max-height:calc(1.25em + 2px)}
  .gitter .chips.n1:not(.voll) .chip{white-space:normal;max-height:calc(2.5em + 2px);
    overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  .gitter .chips.n1:not(.voll) .chip i{white-space:normal}
  /* Woche: Ganztaegiges zwei Zeilen an Wortgrenzen, Termine im Raster ebenso. */
  .gtfeld .chip,.wposten i{word-break:normal;overflow-wrap:break-word;
    -webkit-hyphens:auto;hyphens:auto}
  .gtfeld .chip{font-size:.72rem}
  .wposten i{font-size:.7rem}
}

/* P1-3: Ferienlinie auf dem Telefon heller und schmaler, und gar nicht, wenn
   ein eigener Eintrag mit "Ferien" im Titel denselben Tag deckt. */
@media (max-width:639px){
  .fer{height:2px}
  .fer.k-ferien{background:var(--ferien-be-bd)}
  .fer.k-ferien.f-BB{background:var(--ferien-bb-bd)}
  .tag.fergedeckt .ferleiste{display:none}
}
/* P2-2: auf dem Tablet die Ferienmarke nur am ersten Tag und am Montag. */
@media (min-width:640px){
  .tag.ferfolge .fer{display:none}
}

/* P1-5: Pfeile auf dem Telefon ab 375 px, "Heute" mit Wort, solange es passt.
   Die Stufen setzt kalender.js (kopfAnpassen). */
@media (min-width:375px) and (max-width:639px){
  .leistenzeile #zurueck,.leistenzeile #vor{display:flex;flex:none;width:44px;
    min-width:44px;height:44px;min-height:44px;font-size:1.4rem}
  .leistenzeile #zurueck{order:0;margin-left:-10px}
  .leistenzeile #vor{order:1}
  .leiste.ohnepfeile #zurueck,.leiste.ohnepfeile #vor{display:none}
}
@media (max-width:639px){
  .leistenzeile>.heuteknopf{width:auto;padding:0 8px 0 4px;gap:4px}
  .heuteknopf .heutetext{position:static;width:auto;height:auto;overflow:visible;
    clip-path:none;font-size:14px;font-weight:600}
  .leiste.ohnetext .leistenzeile>.heuteknopf{width:44px;padding:0}
  .leiste.ohnetext .heuteknopf .heutetext{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%)}
  .monatswahl>summary .ikon.klein{display:none}
}

/* P2-4: Auf dem Telefon zeigt das Tagesblatt jeden Termin einmal, als Karte,
   die Uhrzeit fett vorn. Das Stundenraster bleibt ab 640 px. */
@media (max-width:639px){
  .tagesblatt .rasterkasten{display:none}
}
.posten .uhrzeit{font-weight:700;color:var(--text)}

/* P2-5: Fusszeile frei vom Pluszeichen, leise. */
.fusszeile.leise{color:var(--text3);font-size:.85rem}
@media (max-width:639px){ .fusszeile{padding-right:84px} }

/* P2-6: Die Tagesliste rueckt unter die Kopfleiste. */
#tagesfeld{scroll-margin-top:56px}

/* P1-4: die Zahl ausgeblendeter Termine als leise Zeile. */
.tagesblatt .verdecktzeile{display:block;margin:4px 0 12px;padding:0;background:none;
  border:0;font-size:.875rem;color:var(--text3)}
.tagesblatt .verdecktzeile a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--text2);font-weight:600}

/* P2-7: ein Fokusrahmen, nicht zwei. Der Rahmen des Feldes bleibt ruhig, der
   Ring aus :focus-visible zeigt den Fokus. */
input:focus,select:focus,textarea:focus{border-color:var(--border-control);box-shadow:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);
  outline-offset:2px}
.oderzeile{display:flex;align-items:center;gap:10px;margin:14px 0 6px;color:var(--text2);
  font-size:.88rem}
.oderzeile::before,.oderzeile::after{content:"";flex:1;height:1px;background:var(--border)}
.passwortweg[open]>summary{display:none}

/* P2-8: der Fehler steht am Feld. */
.feldfehler{margin:6px 0 0;font-size:.88rem;font-weight:600;color:var(--fehler)}
[aria-invalid="true"]{border:2px solid var(--fehler) !important}

/* P2-9: Unterpunkt im Menue. */
.unterklappe{border-top:1px solid var(--border-lt);margin-top:4px}
.unterklappe>summary{display:flex;align-items:center;justify-content:space-between;
  min-height:44px;padding:0 16px;cursor:pointer;font-size:.95rem;color:var(--text);
  list-style:none}
.unterklappe>summary::-webkit-details-marker{display:none}
.unterklappe>summary::after{content:"";width:0;height:0;border-left:5px solid transparent;
  border-right:5px solid transparent;border-top:6px solid currentColor}
.unterklappe[open]>summary::after{transform:rotate(180deg)}
.unterklappe a,.unterklappe button{padding-left:28px !important}

/* P2-10: die grosse Maske als Aufklapper. */
.planmaske>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center}
.planmaske>summary::-webkit-details-marker{display:none}
.planmaske>summary h2{margin:0;padding:0;border:0;font-size:1.15rem}
.planmaske[open]>summary{margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}

/* P3-1: drei Titelstufen. Seite 28 px, Blatt und Karte 20 px. */
.planung h1{font-size:1.75rem}
@media (min-width:640px){ .planung h1{font-size:1.75rem} }
.blattkopf h2{font-size:1.25rem}

/* P3-2: Monate ausserhalb des Kalenders nicht als graue Felder zeigen; der
   gewaehlte Monat in Rot wie der Heute-Kreis. */
.monatsfeld.aus{visibility:hidden}
.monatsfeld[aria-current="true"]{background:var(--primary-flaeche);border-color:var(--primary-flaeche);
  color:var(--auf-primary)}

/* P3-3: Heute nur als gefuellter Kreis, auch wenn der Tag gewaehlt ist. */
.tag.heute.gewaehlt .ziffer{box-shadow:none}

/* P3-6: Duplizieren und Loeschen als Textknoepfe in einer Zeile. */
.blattfuss .knopf{background:transparent;border-color:transparent;
  padding:0 10px;color:var(--primary)}
.blattfuss .knopf.gefahr-leise{color:var(--fehler)}

/* P3-7: die Liste nicht ueber 1 400 px Breite ziehen. */
@media (min-width:1000px){
  .listenblatt,.suchzeile{max-width:760px;margin-left:auto;margin-right:auto}
}

/* P3-8: Tablet hoch und quer gleich: Heute links, "Neu" rechts. */
@media (min-width:640px){
  .heuteknopf{order:1;margin:0 6px 0 0}
  .leistenzeile #zurueck{order:2}
  .leistenzeile #vor{order:3}
  .leistenzeile>.monatswahl,.leistenzeile>.monatstitel{order:4;flex:0 1 auto}
  .monatswahl>summary{justify-content:flex-start}
  .monatstitel,.monatswahl>summary .monatstitel{text-align:left}
  .leistenzeile>.knopf.neuknopf{display:inline-flex;gap:6px;order:5;margin-left:auto;
    min-height:2.5rem;padding:0 16px}
  .menue{order:6}
  .plus{display:none}
}

/* P3-10: Hinweisleiste laesst das Pluszeichen frei. */
@media (max-width:639px){
  .hinweisleiste{right:auto;width:min(calc(100% - 100px),360px)}
}

/* Vex N-02: lange Woerter in der Karte brechen statt ueberzulaufen. */
.posten .was{overflow-wrap:anywhere}

/* P1-2: Marken am Rand des Stundenfensters. */
.wochengitter,.tagesblatt{position:relative}
.randmarken{position:static}
.randmarke{position:absolute;z-index:7;height:22px;padding:0 4px;border:0;
  border-left:3px solid var(--f,var(--text3));border-radius:3px;
  background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18);
  font:600 11px/22px "DM Sans",system-ui,sans-serif;text-align:left;
  white-space:nowrap;overflow:hidden;cursor:pointer}
.randmarke::after{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
.randverlauf{position:absolute;z-index:6;height:28px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--card))}

/* Nachbesserung nach dem ersten Foto (05.10.2026): Silbentrennung zeigte in
   50 px "Kin-/der-", also weniger als eine abgeschnittene Zeile. Jetzt bricht
   der Text nur an Leerzeichen um, und jede Zeile wird am Rand abgeschnitten.
   So beginnt jede Zeile mit einem ganzen Wortanfang: "Hausarzt / Dr. Weber",
   "Geburtst / Oma Inge". Mitten im Wort getrennt wird nie. */
@media (max-width:639px){
  .gitter .chips.n1:not(.voll) .chip,
  .gitter .chips.n1:not(.voll) .chip i,
  .gtfeld .chip,.gtfeld .chip i,.wposten i{
    -webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal;word-break:normal}
  .gitter .chips.n1:not(.voll) .chip i{display:block;overflow:hidden}
}
.menue .klappe .nureng{display:none !important}
@media (max-width:639px){ .leiste.eng .menue .klappe .nureng{display:flex !important} }


/* ======================================================= Iris-Festlegungen
   Runde 1 (05.10.2026), unveraendert uebernommen aus scratchpad/iris-runde1.css.
   SSOT ist GL-003 §2j, §3a, §4d. Kontrast: iris-runde1-kontrast.py, 0 Risse. */


/* ---------------------------------------------------------------------
   1. Token - in den bestehenden :root-Block (hell) ergaenzen
   --------------------------------------------------------------------- */
:root{
  /* Radius: vier Stufen, keine weiteren Werte */
  --r-s:4px;          /* Eintraege im Raster, Balken, Ferienmarken, .art, kbd */
  --r-m:10px;         /* Knoepfe, Segmente, Eingabefelder, Filterknopf, Posten-Karten, Hinweisleiste */
  --r-l:14px;         /* Blaetter, Dialoge, Klappen */
  --r-voll:999px;     /* NUR Personen-Chips und -Marken (.pchip, .pmarke) */
  /* Kreise (Plus, Heute, Punkte) bleiben border-radius:50% - Form, kein Radius-Token */

  /* Typo: drei Ueberschriften, Fliesstext, klein. --fs-raster ist Rasterschrift, kein Lesegrad */
  --fs-h1:1.75rem;     /* 28 px Serif: Seitentitel, Monatstitel ab 640 px */
  --fs-h2:1.25rem;     /* 20 px Serif: Blatt-, Sheet-, Dialogtitel, Tagesblattkopf, Monatstitel Telefon */
  --fs-h3:1.0625rem;   /* 17 px Sans 600: Abschnitt im Blatt, Eintragstitel in Karten, Tageskopf Liste */
  --fs-text:1rem;      /* 16 px: Fliesstext, Felder, Knoepfe */
  --fs-klein:.875rem;  /* 14 px: Meta, Hilfe, Feldbeschriftung, Segmente, kompakte Knoepfe, .art */
  --fs-raster:.75rem;  /* 12 px Telefon; ab 640 px .8125rem (13 px). Nur Monats-/Wochenraster */
  --lh-titel:1.2;
  --lh-text:1.45;

  /* Knoepfe */
  --knopf-h:44px;           /* sichtbar = Trefferhoehe */
  --knopf-h-kompakt:36px;   /* nur in Kopf- und Ansichtsleiste, ::after holt 44 (GL-003 §4c) */
  --knopf-px:18px;

  /* Rot nach Rolle (hell: alle drei gleich #c0392b) */
  --primary-flaeche:#c0392b; /* gefuellte Aktion: Primaerknopf, Plus, gewaehlter Wochentag */
  --auf-primary:#ffffff;     /* Schrift auf --primary-flaeche und --heute */
  /* --primary (#c0392b) bleibt: Aktion als Text, Link, Textknopf, Rahmen */
  /* --primary-h (#a93226) bleibt: Flaeche hover/aktiv */

  /* Toenung der Eintraege und Balken: Anteil der Personenfarbe in --card */
  --tint:12%;
  --tint-stark:22%;
}
@media (min-width:640px){ :root{ --fs-raster:.8125rem } }

/* ---------------------------------------------------------------------
   2. Token dunkel - in den bestehenden prefers-color-scheme:dark-Block
   --------------------------------------------------------------------- */
@media screen and (prefers-color-scheme:dark){
  :root{
    --primary:#f0584b;          /* war #f0857a (Lachs). Text/Link: 5,03 auf --card, 5,48 auf --bg */
    --primary-flaeche:#cc4136;  /* gefuellte Aktion, Weiss darauf 4,80 */
    --primary-h:#b8382e;        /* war #e86f63. Weiss darauf 5,76 */
    --auf-primary:#ffffff;      /* NICHT --auf-farbe: die bleibt #141312 fuer helle Personenflaechen */
    --heute:#cc4136;            /* war #f0857a. Kreis 3,55 auf --card, Ziffer weiss 4,80 */
    --tint:24%;
    --tint-stark:40%;
  }
}

/* ---------------------------------------------------------------------
   3. Knoepfe - genau drei Stile: primaer, sekundaer, Text
   --------------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--knopf-h);padding:0 var(--knopf-px);
  font:600 var(--fs-text)/1.2 "DM Sans",system-ui,sans-serif;
  border:1px solid transparent;border-radius:var(--r-m);
  background:var(--primary-flaeche);color:var(--auf-primary);
  text-decoration:none;cursor:pointer}
.knopf:active{background:var(--primary-h)}
.knopf:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.knopf[disabled],.knopf[aria-disabled="true"]{background:var(--bg2);color:var(--text3);
  border-color:transparent;cursor:default;pointer-events:none}   /* keine opacity */

/* sekundaer: umrandet, ohne Fuellung */
.knopf.zweit{background:transparent;color:var(--text);border-color:var(--border-control)}
.knopf.zweit:active{background:var(--bg2-h)}
.knopf.zweit[disabled]{background:transparent;color:var(--text3);border-color:var(--border)}

/* Text: ohne Rahmen, ohne Flaeche, Aktionsrot, nicht unterstrichen */
.knopf.leise{background:transparent;color:var(--primary);padding:0 10px}
.knopf.leise:active{background:var(--bg2)}
.knopf.leise.gefahr{color:var(--fehler)}            /* Loeschen, Verwerfen */
.knopf.leise.gefahr:active{background:var(--fehler-bg)}
.knopf.leise[disabled]{background:transparent;color:var(--text3)}

/* Groesse, kein vierter Stil: nur Kopf- und Ansichtsleiste */
.knopf.kompakt{position:relative;min-height:var(--knopf-h-kompakt);padding:0 14px;font-size:var(--fs-klein)}
.knopf.kompakt::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px} /* (44-36)/2+1 */

@media (hover:hover){
  .knopf:hover{background:var(--primary-h)}
  .knopf.zweit:hover{background:var(--bg2);border-color:var(--text2)}
  .knopf.leise:hover{background:var(--bg2)}
  .knopf.leise.gefahr:hover{background:var(--fehler-bg)}
}

/* ---------------------------------------------------------------------
   4. Segment-Umschalter: Monat|Woche|Liste, Familie|Arbeit|Alles, Bereichwahl
   --------------------------------------------------------------------- */
.segment,.ansichtwahl,.bereichwahl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:2px;padding:2px;margin:0;border:0;border-radius:var(--r-m);background:var(--bg2)}
.seg,.ansichtknopf,.bkasten span{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:calc(var(--knopf-h-kompakt) - 4px);padding:0 12px;
  border:1px solid transparent;border-radius:calc(var(--r-m) - 2px);
  background:transparent;color:var(--text2);
  font:600 var(--fs-klein)/1.2 "DM Sans",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.seg::after,.ansichtknopf::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px} /* (44-32)/2+1 */
.seg.an,.ansichtknopf.an,.bkasten input:checked+span{background:var(--card);color:var(--text);
  border-color:var(--border-control);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ansichtknopf.an.a-arbeit{color:var(--arbeit);border-color:var(--arbeit);background:var(--card)}
.seg:focus-visible,.ansichtknopf:focus-visible,.bkasten input:focus-visible+span{
  outline:2px solid var(--focus);outline-offset:2px}
/* In Klappen und Formularen 44 px statt 36 */
.filterklappe .ansichtknopf,.bereichwahl .bkasten span{min-height:calc(var(--knopf-h) - 4px)}
.filterklappe .ansichtknopf::after{top:-3px;bottom:-3px} /* (44-40)/2+1 */
/* Wochenposten im Stundenraster: dieselbe Toenung wie .chip (GL-003 §2j (b)) */
.wposten{border:0;border-left:3px solid var(--f);border-radius:var(--r-s);
  background:color-mix(in srgb,var(--f) var(--tint),var(--card));color:var(--text)}
.wposten i,.wposten u{color:var(--text)}
@media (hover:hover){
  .seg:not(.an):hover,.ansichtknopf:not(.an):hover,.bkasten input:not(:checked)+span:hover{
    background:var(--bg2-h);color:var(--text)}
}

/* ---------------------------------------------------------------------
   5. Eintraege im Raster und Ganztagsbalken - Telefon und Tablet gleich
   --------------------------------------------------------------------- */
.gitter .chip,.gtfeld .chip{display:flex;align-items:center;gap:4px;min-height:0;
  padding:1px 4px 1px 5px;border:0;border-left:3px solid var(--f,var(--text3));
  border-radius:var(--r-s);
  background:color-mix(in srgb,var(--f,var(--text3)) var(--tint),var(--card));
  color:var(--text);font-size:var(--fs-raster);line-height:1.25;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:clip}
.gitter .chip u,.gtfeld .chip u{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.chip.t-urlaub{background:color-mix(in srgb,var(--f) var(--tint-stark),var(--card));color:var(--text)}
.chip.t-teilzeit{background:var(--bg2);border-left-color:var(--border-control)}
.chip.t-frist{background:var(--card);border:1px solid var(--f);border-left-width:3px}
/* Schliesszeit behaelt die Schraffur (GL-003 §2i (c) Regel 3), Schrift --text */

.band{border:0;border-radius:var(--r-s);
  background:color-mix(in srgb,var(--f) var(--tint),var(--card));
  color:var(--text);font-weight:600;font-size:var(--fs-raster)}
.band.beginnt{border-left:3px solid var(--f)}
.band.t-urlaub{background:color-mix(in srgb,var(--f) var(--tint-stark),var(--card))}
.band.t-teilzeit{background:var(--bg2)}
.band.t-teilzeit.beginnt{border-left-color:var(--border-control)}
.band.t-frist{background:var(--card);border:1px solid var(--f)}
/* Alle Formvarianten der Kante (dotted, dashed) entfallen hier. */

/* Gestrichelt gibt es nur noch fuer "wartet auf Versand" */
.chip.wartet,.band.wartet,.wposten.wartet,.posten.wartet{
  outline:1.5px dashed var(--warn);outline-offset:-1.5px}


/* Integration (Lena): auf dem Telefon bleibt der Eintrag ein Block, damit
   ein einzelner Eintrag zwei Zeilen an Wortgrenzen nutzen kann (P1-1). */
@media (max-width:639px){
  .gitter .chip{display:block}
  .gitter .chip i{display:inline}
  .gitter .chips.n1:not(.voll) .chip i{display:block}
}

/* Integration (Lena), nach dem Foto: Iris' Segmentregel setzt display:grid
   und holte den Ansichtsumschalter auf dem Telefon in die Kopfzeile zurueck.
   Dort steht die Ansicht als Klappe; das Segment bleibt ab 640 px. Die
   Ganztagszeile der Woche bekommt den Block zurueck, sonst wurde der Text
   senkrecht mittig abgeschnitten. */
@media (max-width:639px){
  .leistenzeile .breitsegment{display:none}
  .gtfeld .chip{display:block;white-space:normal;line-height:1.25;
    max-height:calc(2.5em + 2px);overflow:hidden}
  .gtfeld .chip i{display:inline;white-space:normal}
}
.randmarke{max-width:none}
/* "+N" stand als eigene Zeile unter dem dritten Eintrag und fiel bei
   gestreckten Zeilen aus der Zelle. Jetzt steht es oben rechts neben der
   Tagesziffer, wo es immer Platz hat (Telefon). */
@media (max-width:639px){
  .gitter .tag{position:relative}
  .gitter .mehr{position:absolute;top:6px;right:2px;padding:0 3px;border-radius:var(--r-s);
    background:var(--bg2);color:var(--text);line-height:1.4}
}

/* ======================================================= Design-Review Runde 2
   (05.10.2026, belege/2026-10-05-design-review-runde-2.md). Steht hinter
   Iris' Festlegungen und nimmt deren Token (GL-003 §2j, §3a, §4d). */

/* N2, N16: Woche auf dem Telefon als 7-Tage-Agenda. Ab 640 px bleibt das
   Stundenraster, die Agenda ist dort aus. */
.wochenagenda{display:none}
@media (max-width:639px){
  .wochenraster .wochengitter{display:none}
  .wochenagenda{display:block;list-style:none;margin:0 0 12px;padding:0;
    border-top:1px solid var(--border-lt)}
  .atag{display:grid;grid-template-columns:44px 1fr;align-items:start;
    border-bottom:1px solid var(--border-lt);padding:4px 0}
  .atag.we,.atag.frei{background:color-mix(in srgb,var(--bg2) 45%,transparent)}
  .atagkopf{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    min-height:44px;padding-top:4px;text-decoration:none;color:var(--text)}
  .atagkopf .wt{font-size:var(--fs-raster);line-height:1.2;color:var(--text3);font-weight:600}
  .atagkopf .ziffer{display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;font-size:1.0625rem;font-weight:600;
    font-variant-numeric:tabular-nums}
  .atag.heute .atagkopf .ziffer{background:var(--heute);color:var(--auf-primary);font-weight:700}
  .atag.heute .atagkopf .wt{color:var(--text)}
  .aliste{min-width:0;display:flex;flex-direction:column;gap:3px;padding:2px 8px 2px 0}
  .aposten{display:grid;grid-template-columns:72px 1fr;align-items:center;column-gap:8px;
    min-height:44px;padding:4px 8px;border-left:3px solid var(--f,var(--text3));
    border-radius:var(--r-s);text-decoration:none;color:var(--text);
    background:color-mix(in srgb,var(--f,var(--text3)) var(--tint),var(--card))}
  .aposten.t-urlaub{background:color-mix(in srgb,var(--f) var(--tint-stark),var(--card))}
  .aposten.t-teilzeit{background:var(--bg2);border-left-color:var(--border-control)}
  .aposten.wartet{outline:1.5px dashed var(--warn);outline-offset:-1.5px}
  .azeit{font-size:var(--fs-klein);font-weight:700;font-variant-numeric:tabular-nums;
    color:var(--text);white-space:nowrap}
  .atitel{font-size:.9375rem;font-weight:500;line-height:1.3;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .awer{grid-column:2;font-size:.75rem;line-height:1.2;color:var(--text2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .aposten:active{filter:brightness(.96)}
  .afrei{margin:0;min-height:32px;display:flex;align-items:center;
    font-size:var(--fs-klein);color:var(--text3)}
  .atag.leer{padding:0}
  .atag.leer .atagkopf{min-height:36px;flex-direction:row;gap:6px;padding:0 0 0 4px;
    justify-content:flex-start}
  .atag.leer .atagkopf .ziffer{width:auto;height:auto;font-size:var(--fs-klein)}
  .atag.leer.heute .atagkopf .ziffer{width:24px;height:24px}
  .atag.leer{grid-template-columns:72px 1fr}
  .afeiertag{margin:0;min-height:28px;display:flex;align-items:center;
    font-size:var(--fs-klein);font-weight:600;color:var(--feiertag)}
  .aposten:focus-visible,.atagkopf:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
}

/* N3: im Monatsraster auf dem Telefon blendet das Titelende weich aus,
   statt mitten durch den Buchstaben zu schneiden. Der Streifen bleibt. */
@media (max-width:639px){
  .gitter .chip i{display:block;white-space:nowrap;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent)}
  .gitter .chips.n1:not(.voll) .chip i{white-space:normal;max-height:2.5em}
}

/* N4: keine Klammerstriche mehr im Segment. Ein feiner Trenner nur
   zwischen zwei inaktiven Feldern. */
.segment .seg+.seg,.ansichtwahl .ansichtknopf+.ansichtknopf{border-left-color:transparent}
.segment .seg:not(.an)+.seg:not(.an)::before{content:"";position:absolute;left:-2px;
  top:25%;bottom:25%;width:1px;background:var(--border)}

/* N5: Monatswahl als Auswahlliste. */
.monatsklappe{max-height:calc(100dvh - 72px);overflow-y:auto;padding-bottom:12px;
  border-radius:var(--r-l);box-shadow:var(--schatten-klappe)}
.monatsfeld{border:1px solid var(--border);border-radius:var(--r-m);min-height:44px}
.monatsfeld.jetzt{border-color:var(--heute)}

/* N6: Termine im Stundenraster der Tagesansicht in derselben Bauform wie
   im Monat und in der Woche (GL-003 §2j). Ab 640 px stehen die Termine mit
   Uhrzeit nur im Raster, nicht noch einmal als Karten darunter. */
.zeitposten{border:0;border-left:4px solid var(--f);border-radius:var(--r-s);
  background:color-mix(in srgb,var(--f) var(--tint),var(--card))}
.zeitposten .zeit{color:var(--text)}
@media (min-width:640px){
  .tagesblatt .tagesliste.zeitkarten.mitraster{display:none}
}

/* N7: Personenfilter sichtbar, Klappe beschriftet. */
.filterzeile{display:flex;padding:6px 0 4px}
.filterchip{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  padding:0 6px 0 12px;border-radius:var(--r-voll);background:var(--bg2);
  color:var(--text);font-size:var(--fs-klein);font-weight:600;text-decoration:none;
  position:relative}
.filterchip::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.filterchip .kreuz{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--card);font-size:.75rem;
  color:var(--text2)}
.filterchip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (min-width:640px){ .filterzeile{display:none} }
.klappenkopf{margin:4px 0 6px;font-size:var(--fs-klein);font-weight:700;color:var(--text2)}
.klappenkopf+.ansichtwahl{margin-bottom:12px}

/* N9: im Fehlerzustand ein Ring in einer Farbe. */
[aria-invalid="true"]:focus,[aria-invalid="true"]:focus-visible{
  outline:2px solid var(--fehler);outline-offset:2px;border-color:var(--fehler)}

/* N10: Karten im Tagesblatt kompakt, die ganze Karte oeffnet den Eintrag.
   Aendern und Loeschen stehen im geoeffneten Eintrag. */
.tagesliste .posten{position:relative;border:0;border-left:4px solid var(--f,var(--text3));
  border-radius:var(--r-m);background:color-mix(in srgb,var(--f,var(--text3)) var(--tint),var(--card));
  padding:10px 36px 10px 14px;margin-bottom:8px}
.tagesliste .posten .oben{margin-bottom:2px;gap:4px 8px}
.tagesliste .posten .wer{font-size:.8125rem}
.tagesliste .posten .was{font-size:var(--fs-h3);font-weight:600;line-height:1.3;color:var(--text)}
.tagesliste .posten .wann{font-size:.9375rem;margin:2px 0 0;color:var(--text)}
.tagesliste .posten .uhrzeit{font-weight:700}
.tagesliste .posten .rand,.tagesliste .posten .herkunft{font-size:var(--fs-klein);
  color:var(--text);margin-top:2px}
.tagesliste .posten .herkunft{color:var(--text2)}
.kartentipp .tagesliste .posten[data-person]{cursor:pointer}
.kartentipp .tagesliste .posten .taten{display:none}
.kartentipp .tagesliste .posten[data-person]::after{content:"›";position:absolute;right:14px;
  top:50%;transform:translateY(-50%);font-size:1.5rem;line-height:1;color:var(--text3)}
.kartentipp .tagesliste .posten[data-person]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover){
  .kartentipp .tagesliste .posten[data-person]:hover{
    background:color-mix(in srgb,var(--f,var(--text3)) calc(var(--tint) + 6%),var(--card))}
}
.tagesliste .posten .art{font-size:.75rem}

/* N13: der Zustandssatz entfaellt, wenn die Kurzfassung steht. */
#erinnerungslage[data-still]{display:none}
.erinnerungskurz{margin:12px 0 0;color:var(--text)}

/* N14: Seite "Alle Eintraege" ohne gepunktete und gestrichelte Kanten.
   Gestrichelt bleibt allein "wartet auf Versand". */
.liste .posten.vorbei{border-left-style:solid}
.art.bereich{border-style:solid;border-color:var(--border)}
.lposten.vorbei .lgriff{border-left-style:solid}

/* N12: die ausgeschriebene Ferienmarke ("Ferien Berlin") passt auf dem
   Tablet in die Kopfzeile des Tages. */
.fer{white-space:nowrap}
/* N10: Bemerkungen in der Karte hoechstens zwei Zeilen, der ganze Text
   steht im geoeffneten Eintrag. */
.kartentipp .tagesliste .posten .rand:not(.ort){display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
/* Ueberschriften in der Filterklappe nur in der Klappe, nicht in der festen
   Leiste auf dem Tablet quer, und nie ohne Inhalt darunter. */
.filterwahl.fest .klappenkopf,.filterklappe>.klappenkopf:last-child{display:none}
/* Agenda: Zeitspalte waechst mit der Schrift (bei 130 % lief "ganztägig"
   in den Titel). */
@media (max-width:639px){
  .aposten{grid-template-columns:4.9rem 1fr}
  .atag.leer{grid-template-columns:4.9rem 1fr}
}
/* Agenda: lange Titel duerfen zwei Zeilen nutzen, statt nach 20 Zeichen
   mit "…" zu enden. */
@media (max-width:639px){
  .atitel{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow-wrap:break-word}
}

/* ======================================================= Ansichtsklappe Telefon
   (05.10.2026, Chris am echten Telefon: "Tag Woche Liste ... horizontal und
   über Bildschirmrand hinausgehend"). Ursache: Iris' Segmentregel
   (.segment{display:grid;grid-auto-flow:column}) steht spaeter in dieser
   Datei und gilt auch fuer die Klappe, die die Klassen "segment
   ansichtliste" traegt. Die Klappe wurde damit eine waagerechte Leiste,
   die drei Felder liefen ueber ihre 12rem hinaus und in Safari ueber den
   Bildschirmrand. Jetzt senkrecht, rechts buendig, nie breiter als der
   Bildschirm, 44 px je Zeile, die laufende Ansicht mit Haken. */
.ansichtklappe .segment.ansichtliste{display:flex;flex-direction:column;grid-auto-flow:row;
  gap:0;padding:4px 0;right:8px;left:auto;width:12rem;max-width:calc(100vw - 16px);
  border-radius:var(--r-l);background:var(--card);overflow:hidden}
.ansichtklappe .ansichtliste .seg{justify-content:flex-start;gap:12px;min-height:44px;
  height:auto;padding:0 16px;border:0;border-radius:0;background:transparent;
  color:var(--text);font-size:var(--fs-text);font-weight:500;box-shadow:none;width:100%}
.ansichtklappe .ansichtliste .seg+.seg{border-top:1px solid var(--border-lt)}
.ansichtklappe .ansichtliste .seg::before{display:none}
.ansichtklappe .ansichtliste .seg.an{font-weight:700;background:var(--bg2)}
.ansichtklappe .ansichtliste .seg.an::after{content:"✓";display:block;position:static;
  margin-left:auto;color:var(--primary);font-weight:700}
/* Alle Klappen bleiben im Bildschirm, auch bei 320 px und 130 % Schrift. */
.filterklappe,.menue .klappe,.monatsklappe{max-width:calc(100vw - 16px)}
/* min-width 16rem schlug max-width: bei 320 px und 130 % ragte das Menue
   15 px links aus dem Bild. */
.menue .klappe{min-width:min(16rem,calc(100vw - 16px))}
.menue .klappe a,.menue .klappe button{overflow-wrap:anywhere}