/*
 * Praxiskalender (kalender.kinderarzt.net). Ergänzt site.css, das Formulare,
 * Knöpfe und Meldungen liefert. Die Kalenderfarben (Outlook-Farben) kommen mit
 * dem Kalender selbst; sie gelten nur hier, nicht auf der Website.
 */
* { box-sizing: border-box; }

body.kalender-seite { margin: 0; background: var(--bg-soft); color: var(--ink); font-family: var(--font); }

.kal-kopf { background: var(--lila-dunkel); color: #fff; }
.kal-kopf-innen {
    margin: 0 auto; padding: 10px 16px;   /* volle Breite wie der Kalender darunter */
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
}
.kal-marke { color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; }
.kal-marke:hover, .kal-marke:focus { color: var(--lila-flaeche); }
.kal-abmelden { display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0; }
.kal-konto { overflow-wrap: anywhere; font-size: .95rem; }
.kal-kopf .btn-outline { color: #fff; border-color: var(--lila-hell); }
.kal-kopf .btn-outline:hover, .kal-kopf .btn-outline:focus { background: #fff; color: var(--lila-dunkel); }

.kal-haupt { padding-bottom: 32px; }
/* Ohne das Gerüst von layouts/base fehlte .container der Seitenrand: Am Handy
   klebte der Text an den Kanten (Anmeldung, Zweitfaktor, Konten; 16.10.2026). */
.kalender-seite .container { padding-left: 16px; padding-right: 16px; }
.kal-hinweis { color: var(--muted); font-size: .9rem; }

/* ---------- Hauptkalender (KIN-31) ----------
   Ein Platz im Raster ist --kal-zeile hoch. Einträge liegen absolut darüber,
   gesteuert über --ab (erste Zeile), --zeilen (Länge), --spalte/--spalten
   (nebeneinander). Die Variablen setzt templates/kalender/index.php. */
/* Die Seite ist eine Spalte, das Raster füllt die übrige Fensterhöhe – wie hoch
   die Leisten darüber auch werden (eine feste Höhe ließ es aus dem Bild ragen,
   sobald die Leiste mit Monat und Suche dazukam). 56px = Kopfzeile. */
.kal-wrap {
    --kal-zeile: 36px; --kal-kopf: 2.6rem; --kal-frei: 28px; margin: 0; padding: 12px 16px 0;   /* ganze Bildschirmbreite */
    display: flex; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px);
}
.kal-wrap > .kal-hinweis { margin: 6px 0 0; }
/* Am Handy brechen Kopf und Leisten um: dort keine feste Höhe, das Raster
   bekommt drei Viertel des Bildschirms und die Seite scrollt normal. */
@media (max-width: 767px) {
    .kal-wrap { height: auto; }
    .kal-raster-rahmen { flex: none; height: 75vh; height: 75dvh; }
}

/* Outlook-Farben der Ordination – nur im Kalender, außerhalb der Lila-Skala der Website. Auch im Dialog:
   Er liegt außerhalb von .kal-wrap, „Abgesagt“ und „Nicht erschienen“ waren dort farblos (17.10.2026). */
.kal-wrap, .kal-dialog {
    --kal-hellblau: #b9dcf7; --kal-hellblau-rand: #4f97d1;
    --kal-gelb: #fbe68b;     --kal-gelb-rand: #c9a516;
    --kal-petrol: #8fd0c8;   --kal-petrol-rand: #1f7f75;
    --kal-rot: #f5a9a6;      --kal-rot-rand: #c9302c;
    --kal-violett: #d4bff0;  --kal-violett-rand: #7d4fc0;
    --kal-orange: #fcc88a;   --kal-orange-rand: #d97a0b;
    --kal-gruen: #b3e3ad;    --kal-gruen-rand: #3f9437;
}

.kal-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.kal-blaettern, .kal-ansicht { display: flex; gap: 6px; }
.kal-blaettern .btn, .kal-ansicht .btn { min-width: 2.75rem; text-align: center; }
.kal-titel { font-size: 1.25rem; margin: 0; flex: 1 1 14rem; }

/* Das Raster scrollt in seinem Rahmen, nicht die Seite: Nur so bleiben die
   Tagesköpfe (sticky) stehen – ein Rahmen mit overflow-x scrollt sonst nie
   senkrecht, und die Köpfe wanderten mit der Seite aus dem Bild. */
.kal-raster-rahmen {
    overflow: auto; flex: 1 1 auto; min-height: 300px;
    background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px;
}
.kal-zeitspalte { position: sticky; left: 0; z-index: 3; background: #fff; }
.kal-zeitspalte .kal-tag-kopf { z-index: 4; }
.kal-raster { display: grid; grid-template-columns: 3.4rem repeat(var(--tage), minmax(0, 1fr)); }
/* In der Woche braucht jeder Tag Platz für Hauptkalender und Akut-Spalte */
.kal-raster-woche { grid-template-columns: 3.4rem repeat(var(--tage), minmax(190px, 1fr)); }

.kal-tag-kopf {
    height: var(--kal-kopf); margin: 0; padding: 0 8px; font-size: .95rem; font-weight: 600;
    display: flex; align-items: center; border-bottom: 1px solid var(--line, #ddd);
    position: sticky; top: 0; background: #fff; z-index: 2;
}
.kal-heute .kal-tag-kopf { color: var(--lila-dunkel); background: var(--lila-flaeche, #f5eefa); }

/* ---------- Akut-Spalte neben dem Hauptkalender (KIN-36) ----------
   Kopf und Flächen teilen dieselbe Aufteilung: links der Hauptkalender,
   rechts schmal der Akut-Kalender. */
.kal-wrap { --kal-akut-breite: minmax(64px, 24%); }
.kal-tag .kal-tag-kopf { display: grid; grid-template-columns: minmax(0, 1fr) var(--kal-akut-breite); padding: 0; gap: 0; }
.kal-tag-titel { margin: 0; padding: 0 8px; font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-akut-kopf {
    height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 4px;
    font-size: .78rem; font-weight: 700; color: #8a1f1b; border-left: 1px dashed #e3a3a0; white-space: nowrap;
    background-image: repeating-linear-gradient(135deg, rgba(245, 169, 166, .35) 0 6px, transparent 6px 12px);
}
.kal-akut-voll { color: #fff; background-color: #c9302c; }
.kal-tag-spalten { display: grid; grid-template-columns: minmax(0, 1fr) var(--kal-akut-breite); }
.kal-flaeche-akut { border-left: 1px dashed #e3a3a0; background: #fffafa; }
.kal-flaeche-akut .kal-platz:hover, .kal-flaeche-akut .kal-platz:focus-visible { background-color: #fde7e6; }
/* Akuttermine brauchen keinen freien Streifen: ein Kind je Startzeit */
.kal-flaeche-akut .kal-eintrag {
    left: calc(var(--spalte) * (100% - 4px) / var(--spalten) + 2px);
    width: calc((100% - 4px) / var(--spalten) - 2px);
    font-size: .74rem; padding: 0 3px;
}
.kal-akut-start {
    position: absolute; left: 2px; right: 2px; z-index: 1; margin: 0; padding: 0 3px;
    top: calc(var(--ab) * var(--kal-zeile) + 1px); height: calc(var(--zeilen) * var(--kal-zeile) - 2px);
    border: 1px dashed #d9534f; border-radius: 4px; background: rgba(255, 255, 255, .7);
    color: #a94442; font-size: .7rem; line-height: 1.2; text-align: left; cursor: pointer; overflow: hidden;
}
.kal-akut-start:hover, .kal-akut-start:focus-visible { background: #fde7e6; outline: none; border-style: solid; }
.kal-akut-vorbei { opacity: .45; pointer-events: none; cursor: default; }
/* Freie Akutplätze verschieben (KIN-103): verschobene mit Pfeil, gezogene halb durchsichtig, Geist zeigt das Ziel */
.kal-akut-start:not(.kal-akut-vorbei) { touch-action: pan-y; }
.kal-akut-verschoben { border-style: solid; background: #fff7f6; }
.kal-akut-verschoben::after { content: " ↕"; }
.kal-akut-start.kal-wird-gezogen { opacity: .35; }
.kal-akut-start.kal-geist { z-index: 6; opacity: .9; border-style: solid; background: #fde7e6; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.kal-tag { border-left: 1px solid var(--line, #ddd); min-width: 0; }

.kal-flaeche { position: relative; display: grid; grid-template-rows: repeat(var(--zeilen), var(--kal-zeile)); }
.kal-zeitspalte .kal-flaeche { font-size: .75rem; color: var(--muted); }
.kal-stunde { position: absolute; top: calc(var(--ab) * var(--kal-zeile)); right: 6px; transform: translateY(-.1em); }

.kal-platz {
    display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
    /* Drei Stärken (Wunsch des Betreibers 16.10.2026): 5 Minuten schwach, 15 Minuten mittel, volle Stunde kräftig */
    border-top: 1px solid rgba(0, 0, 0, .14); background-color: transparent; cursor: pointer;
    background-image: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05)), linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
    background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 33.333%, 0 66.667%;
}
.kal-platz.kal-volle-stunde { border-top-color: rgba(0, 0, 0, .34); }
.kal-platz.kal-zu { background-color: #f4f4f4; }
/* Gelbe Markierung (20.10.2026): leerer Platz zur vollen oder halben Stunde – nur Orientierung. Farbe wie KalenderController::GELB */
.kal-platz.kal-gelb { background-color: #fcfa90; }
.kal-platz:hover, .kal-platz:focus-visible { background-color: #eaf3fb; outline: none; }
/* Akut läuft im 15-Minuten-Raster: keine 5-Minuten-Linien */
.kal-flaeche-akut .kal-platz { background-image: none; }

.kal-eintrag {
    position: absolute; z-index: 1; overflow: hidden; cursor: pointer;
    top: calc(var(--ab) * var(--kal-zeile) + 1px);
    height: calc(var(--zeilen) * var(--kal-zeile) - 2px);
    /* Rechts bleibt ein Streifen frei: Dort lässt sich in einen belegten
       Platz noch eine zweite Person eintragen, wie in Outlook. */
    left: calc(var(--spalte) * (100% - var(--kal-frei)) / var(--spalten) + 2px);
    width: calc((100% - var(--kal-frei)) / var(--spalten) - 2px);
    padding: 1px 5px; border-radius: 4px; border-left: 4px solid;
    font-size: .8rem; line-height: 1.25; color: #1b1b1b;
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 6px;
    user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.kal-eintrag:focus-visible { outline: 2px solid var(--lila-dunkel); outline-offset: 1px; }
.kal-eintrag-zeit { font-weight: 600; }
.kal-eintrag-name, .kal-eintrag-notiz { overflow-wrap: anywhere; }
.kal-eintrag-notiz { color: #444; flex-basis: 100%; }
/* 10-Minuten-Termine: eine Zeile, sonst rutscht der Name in der Woche unsichtbar nach unten */
.kal-einzeilig { flex-wrap: nowrap; white-space: nowrap; }
.kal-einzeilig .kal-eintrag-name { overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; min-width: 0; }
.kal-einzeilig .kal-eintrag-notiz { display: none; }
/* Kürzer als eine Zeile (5 Minuten): kleine Schrift, kein Rand, damit es in die Höhe passt */
.kal-winzig { padding-top: 0; padding-bottom: 0; font-size: .68rem; line-height: 1; align-content: center; }

.kal-farbe-hellblau { background: var(--kal-hellblau); border-color: var(--kal-hellblau-rand); }
.kal-farbe-gelb     { background: var(--kal-gelb);     border-color: var(--kal-gelb-rand); }
.kal-farbe-petrol   { background: var(--kal-petrol);   border-color: var(--kal-petrol-rand); }
.kal-farbe-rot      { background: var(--kal-rot);      border-color: var(--kal-rot-rand); }
.kal-farbe-violett  { background: var(--kal-violett);  border-color: var(--kal-violett-rand); }
.kal-farbe-orange   { background: var(--kal-orange);   border-color: var(--kal-orange-rand); }
.kal-farbe-gruen    { background: var(--kal-gruen);    border-color: var(--kal-gruen-rand); }
/* Akut: rot gestreift; behält die Streifen auch in der Farbe seines Status */
.kal-gestreift {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 6px, transparent 6px 12px);
}


/* ---------- Dialog Termin anlegen/ändern ---------- */
/* .btn und .alert setzen display und hoben damit das hidden-Attribut auf: Der
   Knopf „Löschen“ stand auch beim Anlegen eines neuen Termins da. */
.kal-dialog [hidden] { display: none !important; }
.kal-dialog {
    width: min(40rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
    border: 0; border-radius: 10px; padding: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.kal-dialog::backdrop { background: rgba(20, 10, 30, .45); }
.kal-form { padding: 0 20px 20px; }
.kal-form h2 { margin: 0 0 10px; font-size: 1.2rem; }
/* Kopf in der Farbe des Eintrags (KIN-63): Hintergrund und Schrift wie im Raster, Kategorie als Rand links */
.kal-dialog-kopf {
    margin: 0 -20px 14px; padding: 16px 20px 0 16px;
    border-left: 6px solid var(--rand, #999);
}
.kal-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.kal-tabs [role="tab"] {
    border: 0; border-radius: 6px 6px 0 0; padding: 7px 14px; font: inherit; font-size: .95rem; cursor: pointer;
    background: rgba(255, 255, 255, .45); color: #1b1b1b;
}
.kal-tabs [role="tab"][aria-selected="true"] { background: #fff; font-weight: 600; }
.kal-tabs [role="tab"]:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: -2px; }
/* Gesetzter Status: eingedrückt, mit Haken */
.kal-status-knoepfe [aria-pressed="true"] { box-shadow: inset 0 0 0 2px #1b1b1b; font-weight: 700; }
.kal-status-knoepfe [aria-pressed="true"]::before { content: "✓ "; }
/* Hinweisstreifen zum Kind (KIN-64, KIN-65): rot 3× nicht erschienen · orange offene Rechnung · gelb Vermerk · grau */
.kal-streifen { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.kal-streifen li { padding: 6px 10px; border-radius: 6px; border-left: 5px solid; font-size: .92rem; overflow-wrap: anywhere; }
.kal-streifen li .btn { margin-left: 4px; padding: 1px 8px; }
.kal-streifen .kal-streifen-rot    { background: #fbe0df; border-color: #c9302c; color: #7a1714; font-weight: 600; }
.kal-streifen .kal-streifen-orange { background: #fde6c8; border-color: #d97a0b; color: #6b3b00; font-weight: 600; }
.kal-streifen .kal-streifen-gelb   { background: #fdf4c4; border-color: #c9a516; color: #4d3f00; white-space: pre-line; }
.kal-streifen .kal-streifen-grau   { background: #f0f0f0; border-color: #9a9a9a; color: #333; }
/* KIN-66: Nachfrage „dasselbe Kind?“ */
.kal-streifen .kal-streifen-frage  { background: #e3eefc; border-color: #4f97d1; color: #12385c; font-weight: 600; }
.kal-kind-antworten { margin: 4px 0 10px; padding-left: 18px; font-size: .9rem; }
.kal-kind-antworten li { margin: 2px 0; overflow-wrap: anywhere; }
.kal-kind-antworten .btn { margin-left: 4px; padding: 1px 8px; }
/* Tab „Kind“ */
.kal-kind-name { margin: 0; font-size: 1.1rem; }
.kal-kind-zahlen { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 10px 0; }
.kal-kind-zahlen dt { color: var(--muted, #666); }
.kal-kind-zahlen dd { margin: 0; overflow-wrap: anywhere; }
.kal-kind-notiz { background: #f7f7f7; border-radius: 6px; padding: 6px 10px; white-space: pre-line; overflow-wrap: anywhere; }
.kal-kind-vermerke { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 12px 10px; margin: 12px 0; min-width: 0; }
.kal-kind-vermerke legend { font-weight: 600; padding: 0 4px; }
.kal-kind-vermerke label { display: block; font-size: .9rem; margin-bottom: 4px; }
.kal-kind-vermerke textarea { width: 100%; box-sizing: border-box; }
.kal-kind-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.kal-kind-letzte { margin: 4px 0 0; padding-left: 18px; font-size: .9rem; }
.kal-kind-letzte li { margin: 2px 0; overflow-wrap: anywhere; }
.kal-kind-status-nicht_erschienen { color: #8a1c19; }
.kal-kind-status-abgesagt { color: #8a4b00; }
@media (max-width: 560px) { .kal-kind-zahlen { grid-template-columns: minmax(0, 1fr); } .kal-kind-zahlen dd { margin-bottom: 4px; } }
.kal-zeile3, .kal-zeile2 { display: grid; gap: 0 12px; }
.kal-zeile3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.kal-zeile2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kal-frei { font-weight: 400; color: var(--muted); font-size: .85em; }
.kal-status { margin: -4px 0 10px; color: var(--muted); }
.kal-feldfehler { color: #c9302c; font-size: .85rem; margin: 2px 0 0; }
.kal-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kal-knoepfe .kal-loeschen { margin-left: auto; }
.kal-loeschen.kal-wirklich { background: #c9302c; border-color: #c9302c; color: #fff; }
.kal-meldung .btn { margin-top: 8px; }

@media (max-width: 560px) {
    .kal-zeile3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .kal-zeile3 .form-row:first-child { grid-column: 1 / -1; }
    .kal-zeile2 { grid-template-columns: minmax(0, 1fr); }
    .kal-raster:not(.kal-raster-woche) { grid-template-columns: 3rem minmax(0, 1fr); }
}

/* Kompakter Dialog (18.10.2026): Bei 125 % Zoom auf Full HD musste man scrollen. Breiter,
   Kategorie neben Datum/Beginn/Dauer, Status und Herkunft sowie Folgetermin und „Ist da“
   je in einer Zeile, weniger Abstand. Schrift in Feldern bleibt 1rem (sonst zoomt Safari). */
.kal-dialog:not(.kal-dialog-klein) { width: min(58rem, calc(100vw - 32px)); }
.kal-dialog-kopf { margin-bottom: 10px; padding-top: 12px; }
.kal-form h2 { margin-bottom: 8px; }
.kal-form .form-row { margin-bottom: 10px; }
.kal-form .form-row label { margin-bottom: 3px; }
.kal-form .form-row input, .kal-form .form-row select, .kal-form .form-row textarea { padding: 7px 10px; line-height: 1.5; }
.kal-form .form-row input[type="date"] { min-height: calc(1.5em + 16px); }
.kal-form .form-row .kal-haken { margin-bottom: 0; }
.kal-streifen { margin-bottom: 8px; gap: 3px; }
.kal-streifen li { padding: 4px 10px; }
.kal-zeile4 { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.7fr); }
.kal-statuszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kal-statuszeile > * { margin: 0 0 10px; }
.kal-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.kal-unten > * { margin: 0 0 10px; }
/* Fensterknöpfe oben rechts: Speichern, Vergrößern / normale Größe, Schließen */
.kal-dialog-kopf { position: relative; }
.kal-dialog-kopf h2 { padding-right: 12rem; }
.kal-fenster { position: absolute; top: 8px; right: 10px; display: flex; gap: 2px; }
.kal-fenster button {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: inherit; cursor: pointer;
}
.kal-fenster button:hover { background: rgba(255, 255, 255, .5); }
/* „?“ führt zum Abschnitt der Hilfeseite (20.10.2026) */
.kal-fenster .kal-fenster-hilfe {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px;
    color: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.kal-fenster .kal-fenster-hilfe:hover { background: rgba(255, 255, 255, .5); }
.kal-fenster .kal-fenster-hilfe:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: -2px; }
.kal-fenster button:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: -2px; }
.kal-dialog.kal-gross { width: calc(100vw - 16px); max-width: none; height: calc(100vh - 16px); height: calc(100dvh - 16px); max-height: none; }
.kal-gross .kal-form textarea { min-height: 8rem; }
@media (max-width: 800px) {
    .kal-zeile4 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
    .kal-zeile4 .kal-art-zeile { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .kal-zeile4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Zweitfaktor und Konten (KIN-32) ---------- */
.kal-schritte { padding-left: 1.3em; }
.kal-qr { width: min(240px, 100%); margin: 8px 0 12px; }
.kal-qr svg { display: block; width: 100%; height: auto; }
.kal-schluessel code { overflow-wrap: anywhere; font-size: 1rem; letter-spacing: .04em; }
.kal-konten { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.kal-konten th, .kal-konten td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line, #ddd); vertical-align: top; }
.kal-konten-rahmen { overflow-x: auto; position: relative; }
.kal-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.kal-aktionen form { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kal-aktionen input[type="password"] { width: 11rem; max-width: 100%; padding: .45em .6em; }
.kal-abschnitt { background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.kal-abschnitt h2 { margin-top: 0; font-size: 1.15rem; }
.kal-marke-gesperrt { color: #c9302c; font-weight: 600; }
.kal-kopf-link { color: #fff; text-decoration: none; font-size: .95rem; }
.kal-kopf-link:hover, .kal-kopf-link:focus { text-decoration: underline; color: #fff; }
/* Wechseln am gemeinsamen PC (KIN-101): große Namenskacheln zum Antippen */
.kal-kacheln { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 10px; }
.kal-kachel {
    display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 4.5rem; padding: 12px; text-align: center;
    border: 2px solid var(--lila, #8e4baf); border-radius: 12px; background: #fff; color: var(--lila-dunkel, #6e3a8a); font-weight: 700; text-decoration: none;
}
.kal-kachel:hover, .kal-kachel:focus-visible { background: var(--lila-flaeche, #f5eefa); outline: none; }
.kal-kachel[aria-current="true"] { background: var(--lila, #8e4baf); color: #fff; }
.kal-kachel-gesperrt { border-color: #ccc; color: #777; }
.kal-kachel-hinweis { font-size: .8rem; font-weight: 400; }
.kal-pin-form input[name="pin"] { font-size: 1.6rem; letter-spacing: .4em; max-width: 9rem; text-align: center; }

/* ---------- Ziehen und Größe ändern (KIN-34) ----------
   Am Touchgerät zieht erst ein kurzes Halten (kalender.js); ein Wisch über
   einen Termin scrollt wie überall. Kein Kontextmenü beim Halten (iOS). */
.kal-eintrag[data-ziehbar="1"] { cursor: grab; -webkit-touch-callout: none; }
.kal-bereit { outline: 2px solid var(--lila-dunkel); outline-offset: 1px; }
/* Griff zum Vergrößern: unten am Termin, als kurzer Strich sichtbar (vorher unsichtbar, 16.10.2026) */
.kal-griff { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.kal-griff::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 2px; background: rgba(0, 0, 0, .3);
}
.kal-eintrag:hover .kal-griff::after, .kal-griff:hover::after { background: rgba(0, 0, 0, .6); width: 40px; margin-left: -20px; }
.kal-eintrag-wohin { font-style: italic; }
/* Am Touchgerät breiter – aber nicht bei 10-Minuten-Terminen: Dort hätte der
   Griff mehr als die Hälfte bedeckt, und wer verschieben wollte, änderte die
   Dauer (iPad, 16.10.2026). Deren Dauer ändert der Dialog. */
@media (pointer: coarse) { .kal-griff { height: 12px; } }
.kal-einzeilig .kal-griff { height: 5px; }
.kal-wird-gezogen { opacity: .35; }
.kal-geist {
    pointer-events: none; z-index: 5; opacity: .9; cursor: grabbing;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25); outline: 2px dashed var(--lila-dunkel);
}
body.kal-zieht, body.kal-zieht * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.kal-dialog-klein { width: min(28rem, calc(100vw - 32px)); }
.kal-verweis { margin: -4px 0 10px; }
.kal-verweis .btn { margin-left: 6px; }

/* ---------- Status und Sperren (KIN-33) ---------- */
.kal-status-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.kal-status-abgesagt { background: var(--kal-orange); border-color: var(--kal-orange-rand); color: #1b1b1b; }
.kal-status-nicht { background: var(--kal-gruen); border-color: var(--kal-gruen-rand); color: #1b1b1b; }
.kal-eintrag-akut { font-size: .75em; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kal-haken { display: flex; align-items: center; gap: 8px; font-weight: 600; }
/* Gründe im Akut-Dialog (KIN-99): dieselbe Liste wie online, zwei Spalten */
.kal-gruende { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.kal-gruende legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.kal-gruende-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 2px 12px; }
.kal-grund-haken { display: flex; align-items: center; gap: 6px; min-height: 32px; font-weight: 400; cursor: pointer; }
.kal-grund-haken input { width: auto; margin: 0; flex: none; }
.kal-haken input { width: auto; margin: 0; }

/* ---------- Suche, Monat, Uhrzeit, Tagesliste (KIN-35) ---------- */
.kal-leiste-zwei { margin-top: -4px; }
.kal-suche { display: flex; gap: 6px; align-items: center; margin: 0; flex: 1 1 16rem; max-width: 28rem; }
.kal-suche input { flex: 1 1 auto; min-width: 0; padding: .45em .7em; border: 1px solid var(--line, #ccc); border-radius: 6px; font-size: 1rem; }
.kal-suche-gross { max-width: 40rem; margin-bottom: 16px; flex-wrap: wrap; }

.kal-monat { position: relative; }
.kal-monat summary { list-style: none; cursor: pointer; }
.kal-monat summary::-webkit-details-marker { display: none; }
.kal-monat-tafel {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 18rem; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.kal-monat-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.kal-monat-kopf a { padding: 2px 10px; text-decoration: none; font-size: 1.2rem; }
.kal-monat-tabelle { width: 100%; border-collapse: collapse; text-align: center; font-size: .9rem; }
.kal-monat-tabelle th { color: var(--muted); font-weight: 600; padding: 2px 0; }
.kal-monat-tabelle a { display: block; position: relative; padding: 5px 0; border-radius: 4px; text-decoration: none; color: inherit; }
.kal-monat-tabelle a:hover, .kal-monat-tabelle a:focus-visible { background: #eaf3fb; }
.kal-monat-fremd { color: var(--muted) !important; opacity: .6; }
.kal-monat-heute { font-weight: 700; color: var(--lila-dunkel) !important; }
.kal-monat-gewaehlt { background: var(--lila-flaeche, #f5eefa); outline: 1px solid var(--lila-hell); }
.kal-monat-zahl { position: absolute; top: 1px; right: 3px; font-size: .62rem; color: var(--muted); }

/* Hervorgehoben aus der Suche */
.kal-markiert { outline: 3px solid var(--lila-dunkel); outline-offset: 1px; z-index: 3; animation: kal-blinken 1.2s ease-in-out 2; }
@keyframes kal-blinken { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .kal-markiert { animation: none; } }

/* Linie der aktuellen Uhrzeit (kalender.js setzt --jetzt in Rasterzeilen) */
.kal-jetzt { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #c9302c; z-index: 4; pointer-events: none;
    top: calc(var(--jetzt) * var(--kal-zeile)); }
.kal-jetzt::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #c9302c; }

.kal-treffer { list-style: none; padding: 0; margin: 0; }
.kal-treffer-zeile a { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line, #ddd); text-decoration: none; color: inherit; }
.kal-treffer-zeile a:hover, .kal-treffer-zeile a:focus-visible { background: #f6f3fa; }
.kal-treffer-zeit { font-weight: 600; min-width: 13rem; }
.kal-treffer-name { padding: 1px 8px; border-radius: 4px; border-left: 4px solid; }
.kal-treffer-mehr { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }

.kal-liste-knoepfe { display: flex; gap: 8px; margin-bottom: 12px; }
.kal-liste-tag h1 { font-size: 1.3rem; margin: 18px 0 2px; }
.kal-liste-stand { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.kal-liste-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.kal-liste-tabelle th, .kal-liste-tabelle td { border: 1px solid #ccc; padding: 4px 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.kal-liste-frei td { color: #777; text-decoration: line-through; }

@media print {
    .kal-kopf, .kal-liste-knoepfe, .kal-hinweis { display: none !important; }
    body.kalender-seite { background: #fff; }
    .kal-liste { max-width: none; padding: 0; }
    .kal-liste-tag { break-after: page; page-break-after: always; }
    .kal-liste-tag:last-child { break-after: auto; page-break-after: auto; }
    .kal-liste-tag h1 { margin-top: 0; }
    .kal-liste-tabelle { font-size: 10.5pt; }
    .kal-liste-tabelle tr { break-inside: avoid; }
}

/* ---------- Akutzeiten einstellen (KIN-36) ---------- */
.kal-vorlage-tag { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 12px 4px; margin: 0 0 12px; min-width: 0; }
.kal-vorlage-tag legend { font-weight: 700; padding: 0 4px; }
.kal-vorlage-max, .kal-fenster { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.kal-vorlage-max input { width: 5rem; }
.kal-fenster input[type="time"] { width: 7.5rem; }
.kal-vorlage input, .kal-vorlage select, .kal-fenster input, .kal-fenster select {
    padding: .4em .5em; border: 1px solid var(--line, #ccc); border-radius: 6px; font-size: 1rem; max-width: 100%; min-width: 0;
}
.kal-ausnahmen { list-style: none; padding: 0; margin: 0 0 16px; }
.kal-ausnahmen li { padding: 8px 0; border-bottom: 1px solid var(--line, #ddd); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.kal-inline { display: inline; margin: 0 0 0 auto; }

/* ---------- Öffnungszeiten einstellen (KIN-86) ---------- */
.kal-oeffnung-tag { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kal-oeffnung-tag legend { font-weight: 700; padding: 0 4px; }
.kal-oeffnung-tag select { padding: .4em .5em; border: 1px solid var(--line, #ccc); border-radius: 6px; font-size: 1rem; min-width: 0; max-width: 100%; background: #fff; }
.kal-oeffnung-zu { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.kal-oeffnung-warnung { background: #fff6e0; color: #6b4a00; border: 1px solid #f0d58c; }
.kal-oeffnung-warnung p { margin: 0 0 6px; }
.kal-oeffnung-warnung ul { margin: 0; padding-left: 1.2em; }

/* Wartezimmer (KIN-52): Häkchen mit Uhrzeit am Eintrag; Farbe des Termins bleibt */
.kal-da { font-weight: 700; color: #1d6b32; white-space: nowrap; }
.kal-ankunft-zeile { margin: 0 0 10px; }
.kal-ankunft.kal-ist-da { background: #e3f4e7; border-color: #1d6b32; color: #1d6b32; }
.kal-liste-da { color: #1d6b32; white-space: nowrap; }

/* Verlauf (KIN-49): zugeklappt unter den Feldern */
.kal-verlauf { margin: 4px 0 12px; font-size: .9rem; }
.kal-verlauf-liste { margin: 6px 0 0; padding-left: 18px; max-height: 50vh; overflow-y: auto; }
.kal-verlauf-liste li { margin: 2px 0; }
.kal-verlauf-wann { color: var(--muted, #666); }

/* Rückgängig (KIN-48): Leiste unten, einige Sekunden nach dem Speichern */
.kal-rueck {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20;
    display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px);
    padding: 8px 12px; border-radius: 8px; background: #2b2b2b; color: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.kal-rueck[hidden] { display: none; }
.kal-rueck .btn { color: #fff; border-color: #fff; background: transparent; }
@media print { .kal-rueck { display: none; } }

/* Vergrößern und verkleinern (KIN-56) */
.kal-zoom { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.kal-zoom .btn { min-width: 2.25rem; font-size: 1.1rem; line-height: 1; padding-left: 0; padding-right: 0; }
.kal-zoom-stufe { min-width: 3.2em; text-align: center; font-size: .85rem; color: var(--muted, #666); }
@media print { .kal-zoom { display: none; } }

/* Folgetermin (KIN-46) */
.kal-folge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.kal-folge-text { font-size: .85rem; color: var(--muted, #666); }

/* Kind wiedererkennen (KIN-47): Vorschläge unter dem Namensfeld */
.kal-name-zeile { position: relative; }
.kal-vorschlaege {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 2px 0 0; padding: 4px 0; list-style: none;
    background: #fff; border: 1px solid var(--line, #ddd); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    max-height: 240px; overflow-y: auto;
}
.kal-vorschlaege[hidden] { display: none; }
.kal-vorschlaege button {
    display: block; width: 100%; padding: 8px 10px; border: 0; background: none; text-align: left; cursor: pointer;
    font: inherit; font-size: .9rem; color: inherit;
}
.kal-vorschlaege button:hover, .kal-vorschlaege button:focus-visible { background: #f1e8f6; outline: none; }

/* Feiertag (KIN-51) im Tageskopf */
.kal-feiertag { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #fdecea; color: #a12b25; font-size: .78rem; font-weight: 600; }

/* Serien (KIN-45) */
.kal-serie { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--line, #ddd); border-radius: 6px; }
.kal-serie legend { padding: 0 4px; font-size: .85rem; color: var(--muted, #666); }
.kal-serie .kal-haken { display: block; margin: 2px 0; }
.kal-nur-sperre .btn { margin: 4px 8px 0 0; }

/* Monatsblatt (KIN-58): Auslastung Vormittag | Nachmittag als zwei schmale Balken je Tag – einfarbig, keine Ampel */
.kal-monat-tafel { width: 20rem; }
.kal-monat-last { display: flex; gap: 2px; justify-content: center; margin: 2px auto 0; width: 70%; }
.kal-monat-last i {
    flex: 1; height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--lila-dunkel, #6e3a8a) var(--last), #e6dcef var(--last));
}
.kal-monat-last i.kal-last-zu { background: repeating-linear-gradient(90deg, #ddd 0 2px, transparent 2px 4px); }
.kal-monat-feiertag { color: #a12b25 !important; }
.kal-monat-legende { margin: 6px 0 0; font-size: .72rem; color: var(--muted, #666); display: flex; align-items: center; gap: 6px; }
.kal-monat-legende .kal-monat-last { width: 2.2rem; margin: 0; }

/* Freier Platz (KIN-50): Klappblatt wie das Monatsblatt */
.kal-platzsuche { position: relative; }
.kal-platzsuche summary { list-style: none; cursor: pointer; }
.kal-platzsuche summary::-webkit-details-marker { display: none; }
.kal-platzsuche-tafel {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 18rem; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.kal-platzsuche-felder { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; font-size: .85rem; }
.kal-platzsuche-felder label { display: flex; flex-direction: column; gap: 2px; }
.kal-platzsuche-felder select, .kal-platzsuche-felder input { padding: 4px 6px; }
.kal-platzsuche-liste { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; }
.kal-platzsuche-liste li { margin: 3px 0; }
/* Schmale Bildschirme: Das Blatt hängt an der Leiste, nicht am Knopf – sonst ragt es rechts hinaus (iPhone SE) */
.kal-leiste-zwei { position: relative; }
@media (max-width: 600px) {
    .kal-platzsuche, .kal-monat { position: static; }
    .kal-platzsuche-tafel, .kal-monat-tafel { left: 0; }
}

/* Auswertung (KIN-53) */
.kal-auswertung-monat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.kal-auswertung-monat input { padding: 4px 6px; }
.kal-tabelle-rahmen { overflow-x: auto; }

/* Iconleiste (KIN-59): quadratische Symbolknöpfe mit Hinweistext; die Beschriftung lesen nur Screenreader */
.kal-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kal-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; padding: 0; border: 1.5px solid var(--lila-hell, #c9a6dc); border-radius: 8px;
    background: #fff; color: var(--lila-dunkel, #6e3a8a); cursor: pointer; list-style: none; text-decoration: none;
}
.kal-icon:hover, .kal-icon:focus-visible { background: var(--lila-flaeche, #f5eefa); outline: none; border-color: var(--lila-dunkel, #6e3a8a); }
.kal-icon::-webkit-details-marker { display: none; }
.kal-icon[disabled] { opacity: .5; cursor: progress; }
.kal-icon-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kal-icon-15 { width: auto; padding: 0 8px 0 6px; gap: 2px; background: var(--lila-dunkel, #6e3a8a); color: #fff; border-color: var(--lila-dunkel, #6e3a8a); }
.kal-icon-15:hover, .kal-icon-15:focus-visible { background: #5a2e72; }
.kal-icon-zahl { font-weight: 700; font-size: .95rem; }
.kal-monat[open] > .kal-icon, .kal-platzsuche[open] > .kal-icon { background: var(--lila-flaeche, #f5eefa); border-color: var(--lila-dunkel, #6e3a8a); }
@media print { .kal-icons { display: none; } }

/* Kopf in einer Zeile (KIN-60) */
.kal-leiste { position: relative; gap: 8px 12px; }
.kal-leiste .kal-suche { flex: 1 1 12rem; }
.kal-leiste .kal-zoom { margin-left: 0; }
.kal-titel-knopf {
    display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer; list-style: none;
    padding: 2px 6px; border-radius: 6px; border-bottom: 2px dashed var(--lila-hell, #c9a6dc);
}
.kal-titel-knopf::-webkit-details-marker { display: none; }
.kal-titel-knopf:hover, .kal-titel-knopf:focus-visible, .kal-monat[open] > .kal-titel-knopf { background: var(--lila-flaeche, #f5eefa); outline: none; }
.kal-titel-knopf .kal-titel { margin: 0; }
.kal-titel-pfeil { color: var(--lila-dunkel, #6e3a8a); font-size: .9rem; }
.kal-monat-kopf { flex-wrap: wrap; gap: 4px; }
.kal-monat-wahl { display: flex; gap: 4px; width: 100%; justify-content: center; order: 3; }
.kal-monat-wahl select { padding: 2px 4px; font-size: .85rem; }
.kal-blatt-wahl { display: none; }

/* Menü Einstellungen (KIN-60) */
.kal-einstellungen { position: relative; }
.kal-menue {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 15rem; margin: 0; padding: 6px 0; list-style: none;
    background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.kal-menue a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: inherit; text-decoration: none; }
.kal-menue a:hover, .kal-menue a:focus-visible { background: var(--lila-flaeche, #f5eefa); outline: none; }
.kal-menue .kal-icon-bild { color: var(--lila-dunkel, #6e3a8a); flex: none; }
.kal-einstellungen[open] > .kal-icon { background: var(--lila-flaeche, #f5eefa); border-color: var(--lila-dunkel, #6e3a8a); }
@media (max-width: 600px) {
    .kal-einstellungen { position: static; }
    .kal-menue { left: 0; }
}

/* Gefundener freier Platz (KIN-60): pulsiert langsam heller und dunkler */
.kal-frei-markierung {
    position: absolute; z-index: 3; left: 2px; right: 2px;
    top: calc(var(--ab) * var(--kal-zeile) + 1px); height: calc(var(--zeilen) * var(--kal-zeile) - 2px); min-height: 18px;
    border: 2px solid var(--lila-dunkel, #6e3a8a); border-radius: 6px; padding: 0 6px; text-align: left;
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--lila-dunkel, #6e3a8a); cursor: pointer;
    background: rgba(142, 75, 175, .18); animation: kal-pulsieren 2.4s ease-in-out infinite;
}
@keyframes kal-pulsieren { 0%, 100% { background: rgba(142, 75, 175, .12); } 50% { background: rgba(142, 75, 175, .45); } }
@media (prefers-reduced-motion: reduce) { .kal-frei-markierung { animation: none; background: rgba(142, 75, 175, .3); } }
/* Pfeil auf den gefundenen Platz, 2 Sekunden (kalender.js freiPfeil): von oben, in der ersten Zeile von unten */
.kal-frei-pfeil {
    position: absolute; z-index: 4; left: 50%; pointer-events: none;
    top: calc(var(--ab) * var(--kal-zeile) - 40px); transform: translateX(-50%);
    font-size: 34px; line-height: 1; color: var(--lila-dunkel, #6e3a8a);
    text-shadow: 0 0 3px #fff, 0 0 6px #fff; animation: kal-pfeil-huepfen .45s ease-in-out infinite alternate;
}
.kal-frei-pfeil-unten { top: calc((var(--ab) + var(--zeilen)) * var(--kal-zeile) + 6px); animation-name: kal-pfeil-huepfen-unten; }
@keyframes kal-pfeil-huepfen { from { margin-top: -8px; } to { margin-top: 0; } }
@keyframes kal-pfeil-huepfen-unten { from { margin-top: 8px; } to { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .kal-frei-pfeil { animation: none; } }

/* Ins Bild geschoben werden die Klappblätter per JavaScript beim Öffnen (kalender.js) */

/* Bedienung im Menü Einstellungen (KIN-61) */
.kal-bedienung summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; }
.kal-bedienung summary::-webkit-details-marker { display: none; }
.kal-bedienung summary:hover, .kal-bedienung summary:focus-visible { background: var(--lila-flaeche, #f5eefa); outline: none; }
.kal-bedienung summary .kal-icon-bild { color: var(--lila-dunkel, #6e3a8a); }
.kal-bedienung ul { margin: 0 12px 8px 36px; padding: 0; font-size: .85rem; color: #444; max-width: 20rem; }
.kal-bedienung li { margin: 4px 0; }

/* Kategorien und Farben (KIN-62): Hintergrund und Muster aus Kategorie bzw. Status, Rand immer von der Kategorie,
   Schrift schwarz oder weiß nach Lesbarkeit (Kategorien::schrift). Gilt auch für die Suchtreffer. */
.kal-eintrag, .kal-treffer-name, .kal-kat-vorschau, .kal-dialog-kopf, .kal-farbprobe {
    --muster-farbe: rgba(255, 255, 255, .55);
    background-color: var(--farbe, #dddddd); border-left-color: var(--rand, #888888); color: var(--schrift, #1b1b1b);
}
.kal-eintrag.kal-dunkel, .kal-treffer-name.kal-dunkel, .kal-kat-vorschau.kal-dunkel, .kal-dialog-kopf.kal-dunkel, .kal-farbprobe.kal-dunkel { --muster-farbe: rgba(0, 0, 0, .25); }
.kal-muster-schraeg { background-image: repeating-linear-gradient(135deg, var(--muster-farbe) 0 6px, transparent 6px 12px); }
.kal-muster-waagrecht { background-image: repeating-linear-gradient(0deg, var(--muster-farbe) 0 3px, transparent 3px 8px); }
.kal-muster-kariert {
    background-image: linear-gradient(var(--muster-farbe) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--muster-farbe) 1.5px, transparent 1.5px);
    background-size: 9px 9px;
}
.kal-muster-punkte { background-image: radial-gradient(var(--muster-farbe) 1.8px, transparent 2px); background-size: 9px 9px; }
.kal-eintrag .kal-eintrag-notiz { color: inherit; opacity: .85; }

/* Seite Kategorien und Farben (KIN-62) */
.kal-kat { border: 1px solid var(--line, #ddd); border-radius: 8px; margin: 0 0 8px; background: #fff; }
.kal-kat > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; }
.kal-kat[data-aus] > summary { opacity: .6; }
.kal-kat-form { padding: 4px 12px 12px; }
.kal-kat-aktionen { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.kal-kat-aktionen form { margin: 0; }
.kal-kat-vorschau { display: inline-block; padding: 3px 10px; border-radius: 4px; border-left: 4px solid; font-weight: 600; min-width: 9rem; }
.kal-kat-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.kal-label { display: block; font-weight: 600; margin-bottom: 4px; }
.kal-farbwahl { display: flex; flex-wrap: wrap; gap: 4px; border: 0; padding: 0; margin: 0; }
.kal-farbfeld { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 6px; background: var(--farbe); border: 1px solid rgba(0, 0, 0, .2); cursor: pointer; vertical-align: middle; }
.kal-farbfeld input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kal-farbfeld:has(input:checked) { outline: 3px solid var(--lila-dunkel, #6e3a8a); outline-offset: 1px; }
.kal-farbfeld:has(input:focus-visible) { outline: 3px dashed var(--lila-dunkel, #6e3a8a); outline-offset: 1px; }
.kal-farbliste { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.kal-farbliste li { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.kal-farbliste form { margin: 0; }
.kal-link-knopf { border: 0; background: none; padding: 0; color: var(--lila-dunkel, #6e3a8a); text-decoration: underline; cursor: pointer; font: inherit; }
.kal-farbe-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kal-farbe-neu input[type="color"] { width: 3rem; height: 2.2rem; padding: 0; border: 1px solid var(--line, #ccc); border-radius: 6px; }


/* Akut heute (KIN-40): in der obersten Zeile – neue Online-Termine, Warnung, Online-Stopp, Zusatz; kurz, Einzelheiten im Hinweis */
.kal-akut-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; }
.kal-neu-zaehler { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #fff4d6; color: #6b4a00; border: 1px solid #e0b84a; font-weight: 600; text-decoration: none; }
.kal-neu-zaehler:hover, .kal-neu-zaehler:focus { background: #ffe9a8; color: #4a3300; }
.kal-neu-zahl { min-width: 1.5em; padding: 0 5px; border-radius: 999px; background: #c98a00; color: #fff; text-align: center; }
.kal-akut-warnung { padding: 3px 10px; border-radius: 4px; background: #c9302c; color: #fff; }
.kal-akut-gestoppt { padding: 3px 10px; border-radius: 4px; background: #fde7e6; color: #8a1f1b; font-weight: 600; }
.kal-akut-heute { position: relative; }
.kal-akut-heute > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 2.5rem; padding: 0 10px 0 8px;
    border: 1.5px dashed #e3a3a0; border-radius: 8px; color: #8a1f1b; font-weight: 700; list-style: none; white-space: nowrap;
    background-image: repeating-linear-gradient(135deg, rgba(245, 169, 166, .35) 0 6px, transparent 6px 12px); }
.kal-akut-heute > summary:hover, .kal-akut-heute > summary:focus-visible, .kal-akut-heute[open] > summary { border-color: #8a1f1b; outline: none; }
.kal-akut-heute-zahl { font-variant-numeric: tabular-nums; }
.kal-akut-heute > summary::-webkit-details-marker { display: none; }
.kal-akut-heute-tafel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: min(34rem, calc(100vw - 32px)); padding: 12px;
    background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); display: grid; gap: 10px; }
.kal-akut-heute-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kal-akut-heute-zeile input[type="number"] { width: 4.5em; }
.kal-akut-heute-zeile input[type="time"] { width: 7em; }
.kal-akut-heute-hilfe { color: #666; font-size: .82rem; }
.kal-akut-heute-liste, .kal-akut-protokoll { margin: 0; padding-left: 1.2em; font-size: .85rem; }
.kal-akut-heute-liste form { display: inline; margin-left: 6px; }
.kal-akut-heute-titel { margin: 0; font-size: .85rem; }
.kal-akut-protokoll time { font-variant-numeric: tabular-nums; font-weight: 600; }
.kal-akut-wer { color: #666; }
/* Neu online gebucht, bis jemand den Termin öffnet */
.kal-eintrag.kal-neu-online { box-shadow: 0 0 0 2px #c98a00, 0 0 8px rgba(201, 138, 0, .6); }
.kal-neu-marke { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px; background: #c98a00; color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.3; vertical-align: middle; }
/* „Akut heute“ steht in der obersten Zeile weit links: unter 1200 px hängt die Tafel links an der Kopfzeile (.kal-leiste) statt rechts am Symbol, sonst ragt sie links hinaus */
@media (max-width: 1199px) {
    .kal-akut-heute { position: static; }
    .kal-akut-heute-tafel { left: 0; right: auto; }
}
@media (max-width: 560px) {
    .kal-akut-heute { margin-left: 0; }
    .kal-akut-heute-tafel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
}

/* Farben und Hilfe (20.10.2026): Klappblatt „?“ in der Iconleiste, dieselbe Liste auf der Hilfeseite */
.kal-farben { position: relative; }
.kal-farben[open] > .kal-icon { background: var(--lila-flaeche, #f5eefa); border-color: var(--lila-dunkel, #6e3a8a); }
.kal-farben-tafel {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 24rem; max-width: calc(100vw - 32px);
    max-height: 70vh; overflow-y: auto;
    background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.kal-farben-mehr { margin: 8px 0 0; font-size: .9rem; }
@media (max-width: 600px) {
    .kal-farben { position: static; }
    .kal-farben-tafel { left: 0; }
}
.kal-farbliste-hilfe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kal-farbliste-hilfe li { display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr; gap: 8px; align-items: start; font-size: .85rem; }
.kal-farbprobe {
    display: block; padding: 3px 8px; border-radius: 4px; border-left: 4px solid; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* Gelb und geschlossen sind Plätze, keine Einträge: ohne Rand, mit Linie wie im Raster */
.kal-farbprobe-gelb, .kal-farbprobe-zu { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .14); font-weight: 400; }
.kal-farbtext { color: #444; }
.kal-gelb-muster { background: #fcfa90; padding: 0 4px; border-radius: 3px; }
.kal-hilfe-link {
    display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: 6px; vertical-align: middle;
    border: 1.5px solid var(--lila-hell, #c9a6dc); border-radius: 50%; font-size: .95rem; text-decoration: none; color: var(--lila-dunkel, #6e3a8a);
}
.kal-hilfe-link:hover, .kal-hilfe-link:focus-visible { background: var(--lila-flaeche, #f5eefa); }
.kal-gelb-tage { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 0 0 12px; }
.kal-gelb-tage legend { width: 100%; margin-bottom: 4px; font-weight: 600; }
.kal-hilfe-seite section { scroll-margin-top: 12px; }
.kal-hilfe-seite ul { padding-left: 1.2em; }
.kal-hilfe-seite li { margin: 4px 0; }
.kal-hilfe-inhalt ol { columns: 2 14rem; margin: 0 0 16px; }
@media (max-width: 420px) {
    .kal-farbliste-hilfe li { grid-template-columns: 1fr; gap: 2px; }
}

/* Kategorie schnell ändern (20.10.2026): Rechtsklick bzw. langes Drücken auf einen Termin.
   Die Knöpfe sind Farbproben – Farbe, Muster und Rand wie im Raster; die aktuelle trägt ein Häkchen. */
.kal-kat-menue {
    position: fixed; z-index: 60; display: grid; gap: 4px; width: max-content; min-width: 13rem; max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px); overflow-y: auto; padding: 8px; margin: 0;
    background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.kal-kat-menue-titel { margin: 0 2px 2px; font-size: .8rem; font-weight: 600; color: #555; }
.kal-kat-menue button { font: inherit; font-size: .9rem; text-align: left; cursor: pointer; border-top: 0; border-right: 0; border-bottom: 0; }
.kal-kat-menue .kal-farbprobe { padding: 7px 28px 7px 10px; position: relative; }
.kal-kat-menue .kal-farbprobe:hover, .kal-kat-menue .kal-farbprobe:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: 1px; }
.kal-kat-menue .kal-farbprobe[aria-checked="true"]::after { content: "✓"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-weight: 700; }
/* Status im Schnellmenü (22.10.2026): Farben wie die Umschalter im Dialog */
.kal-kat-menue .kal-kat-menue-status { padding: 7px 28px 7px 10px; position: relative; border-radius: 6px; border-left: 4px solid transparent; }
.kal-kat-menue .kal-kat-menue-status:hover, .kal-kat-menue .kal-kat-menue-status:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: 1px; }
.kal-kat-menue .kal-kat-menue-status[aria-checked="true"]::after { content: "✓"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-weight: 700; }
.kal-kat-menue-oeffnen {
    margin-top: 4px; padding: 7px 10px; border: 0; border-top: 1px solid var(--line, #ddd); border-radius: 0 0 4px 4px;
    background: none; color: var(--lila-dunkel, #6e3a8a);
}
.kal-kat-menue-oeffnen:hover, .kal-kat-menue-oeffnen:focus-visible { background: var(--lila-flaeche, #f5eefa); outline: none; }

/* Monatsleiste links wie in Outlook (KIN-90 bis KIN-92): nur am PC. Darunter ist .kal-mitte eine Spalte
   wie bisher .kal-wrap, damit das Raster die übrige Höhe füllt bzw. am Handy 75 % hoch bleibt. */
.kal-mitte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.kal-ml, .kal-ml-auf { display: none; }
.kal-titel-leser { display: none; }   /* nur am PC mit offener Monatsleiste, siehe unten */
@media (min-width: 1200px) {
    .kal-mitte { flex-direction: row; gap: 12px; }
    .kal-mitte > .kal-raster-rahmen { min-width: 0; }
    .kal-ml {
        display: block; flex: 0 0 15.5rem; overflow-y: auto; padding: 6px 8px 8px; font-size: .78rem;
        background: #fff; border: 1px solid var(--line, #ddd); border-radius: 8px;
    }
    .kal-mitte.kal-ml-eingeklappt > .kal-ml { display: none; }
    /* Die Monatsleiste ersetzt den Titel samt Monatsblatt; eingeklappt kommt er zurück */
    .kal-wrap:has(> .kal-mitte:not(.kal-ml-eingeklappt)) .kal-monat { display: none; }
    .kal-wrap:has(> .kal-mitte:not(.kal-ml-eingeklappt)) .kal-titel-leser { display: block; }
    .kal-mitte.kal-ml-eingeklappt > .kal-ml-auf {
        display: block; flex: 0 0 auto; align-self: flex-start; padding: 6px 8px; font: inherit; font-size: 1rem; cursor: pointer;
        background: #fff; color: var(--lila-dunkel, #6e3a8a); border: 1px solid var(--line, #ddd); border-radius: 8px;
    }
}
.kal-ml-kopf { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.kal-ml-pfeil { padding: 2px 8px; text-decoration: none; font-size: 1.1rem; color: var(--lila-dunkel, #6e3a8a); border-radius: 4px; }
.kal-ml-titel { flex: 1; font: inherit; font-weight: 700; font-size: .85rem; background: none; border: 0; padding: 3px 4px; border-radius: 4px; cursor: pointer; color: inherit; }
.kal-ml-zu { font: inherit; background: none; border: 0; padding: 2px 6px; color: var(--muted, #666); cursor: pointer; border-radius: 4px; }
.kal-ml-pfeil:hover, .kal-ml-titel:hover, .kal-ml-zu:hover, .kal-ml-kopf :focus-visible { background: var(--lila-flaeche, #f5eefa); outline: none; }
.kal-ml-wahl { display: flex; gap: 4px; justify-content: center; margin: 0 0 6px; }
.kal-ml-wahl[hidden] { display: none; }
.kal-ml-wahl select { padding: 2px 4px; font-size: .8rem; }
.kal-ml-name { margin: 10px 0 2px; font-size: .85rem; text-align: center; }
.kal-ml-tabelle { width: 100%; border-collapse: collapse; text-align: center; table-layout: fixed; }
.kal-ml-tabelle th { color: var(--muted, #666); font-weight: 600; padding: 1px 0; }
.kal-ml-kw-kopf, .kal-ml-kw { width: 1.7rem; }
.kal-ml-kw a { display: block; color: var(--muted, #666); font-weight: 400; font-size: .7rem; text-decoration: none; border-radius: 3px; padding: 4px 0; }
.kal-ml-tabelle td a { display: block; padding: 4px 0; border-radius: 4px; text-decoration: none; color: inherit; }
.kal-ml-tabelle a:hover, .kal-ml-tabelle a:focus-visible { background: #eaf3fb; outline: none; }
.kal-ml-fremd { color: var(--muted, #666) !important; opacity: .5; }
.kal-ml-geschlossen { color: #9a9a9a !important; background: #f4f4f4; }
.kal-ml-feiertag { color: #a12b25 !important; }
.kal-ml-woche { background: var(--lila-flaeche, #f5eefa); border-radius: 0 !important; }
.kal-ml-gewaehlt { background: var(--lila-flaeche, #f5eefa); outline: 1px solid var(--lila-hell, #c9a6dc); }
.kal-ml-heute { font-weight: 700; color: #fff !important; background: var(--lila-dunkel, #6e3a8a) !important; }

/* ---------- Aufgabenliste (KIN-108) ----------
   Seite /aufgaben/: offene Aufgaben mit Haken-Knopf, erledigte zugeklappt.
   Knöpfe mindestens 44 px hoch (Antippen am Handy), lange Texte brechen um,
   damit bei 375 px nichts seitlich scrollt. Farben aus der Lila-Skala (site.css). */
.kal-aufgaben-seite { max-width: 900px; }
.kal-aufgabe-neu .form-row { margin-bottom: 12px; }
.kal-aufgabe-neu .btn { min-height: 44px; }
.kal-aufgaben-zahl { color: var(--muted, #666); font-weight: 400; font-size: .95rem; }
.kal-aufgaben { list-style: none; margin: 0; padding: 0; }
.kal-aufgabe {
    display: flex; align-items: flex-start; gap: 12px; padding: 10px 0;
    border-top: 1px solid var(--lila-linie, #ddc9e7); min-width: 0;
}
.kal-aufgabe:first-child { border-top: 0; }
.kal-aufgabe-form { margin: 0; flex: 0 0 auto; }
.kal-aufgabe-form .btn { min-height: 44px; min-width: 44px; padding: .45em .9em; font-size: .95rem; white-space: nowrap; }
.kal-aufgabe-inhalt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kal-aufgabe-text { margin: 0 0 2px; font-weight: 600; color: var(--ink, #2e2a33); }
.kal-aufgabe-info { margin: 0; font-size: .88rem; color: var(--muted, #666); display: flex; flex-wrap: wrap; gap: 2px 12px; }
.kal-aufgabe-haken { color: var(--lila-dunkel, #6f3a8c); border-color: var(--lila, #8e4baf); }
.kal-aufgabe-loeschen { color: #a12b25; border-color: #d9a3a0; }
.kal-aufgabe-loeschen:hover { background: #a12b25; border-color: #a12b25; color: #fff; }
/* Überfällig: Streifen links und Fälligkeit fett in Rot */
.kal-aufgabe-ueberfaellig { background: #fdf3f2; box-shadow: inset 4px 0 0 var(--kal-rot-rand, #c9302c); padding-left: 10px; border-radius: 4px; }
.kal-aufgabe-ueberfaellig .kal-aufgabe-faellig { color: #a12b25; font-weight: 700; }
.kal-aufgabe-fertig .kal-aufgabe-text { font-weight: 400; color: var(--muted, #666); text-decoration: line-through; }
.kal-aufgaben-erledigt > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; list-style: none; }
.kal-aufgaben-erledigt > summary::-webkit-details-marker { display: none; }
.kal-aufgaben-erledigt > summary::before { content: "▸"; color: var(--lila, #8e4baf); }
.kal-aufgaben-erledigt[open] > summary::before { content: "▾"; }
.kal-aufgaben-erledigt > summary h2 { margin: 0; }
.kal-aufgaben-erledigt[open] > summary { margin-bottom: 8px; }
@media (max-width: 560px) {
    /* Handy: Knöpfe unter den Text, Haken bleibt links neben dem Text */
    .kal-aufgabe { flex-wrap: wrap; }
    .kal-aufgabe-inhalt { flex-basis: calc(100% - 140px); }
    .kal-aufgabe-fertig .kal-aufgabe-inhalt { flex-basis: 100%; }
}
@media print { .kal-aufgabe-form, .kal-aufgabe-neu { display: none; } }

/* ---------- Kalender zur Online-Buchung (KIN-110) ----------
   Aufgaben-Symbol in der obersten Zeile: gleich groß wie die anderen Symbole (2.5rem), die Zahl sitzt
   als Marke auf der Ecke und macht die Zeile weder breiter noch höher (Regression 56 px durch einen .btn).
   Im Termin-Fenster die Angaben der Online-Buchung: SVNR mit „Kopieren“, Hinweise darunter. */
.kal-icon-aufgaben { overflow: visible; }
.kal-aufgaben-marke {
    position: absolute; top: -6px; right: -6px; min-width: 1.2rem; height: 1.2rem; padding: 0 4px; box-sizing: border-box;
    border-radius: 999px; background: var(--lila-dunkel, #6e3a8a); color: #fff; border: 1.5px solid #fff;
    font-size: .72rem; font-weight: 700; line-height: calc(1.2rem - 3px); text-align: center; pointer-events: none;
}
.kal-aufgaben-marke[hidden] { display: none; }
.kal-online-angaben { margin: 4px 0 0; font-size: .9rem; min-width: 0; }
.kal-online-angaben p { margin: 2px 0; }
.kal-svnr-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kal-svnr-feld {
    width: 8.5em; max-width: 100%; min-width: 0; padding: 2px 6px; font: inherit; font-variant-numeric: tabular-nums; font-weight: 600;
    border: 1px solid var(--line, #ddd); border-radius: 4px; background: #fff; color: inherit;
}
.kal-svnr-kopiert { color: #1d6b32; font-weight: 600; }
.kal-svnr-anders { color: #6b4a00; }
.kal-spaet-abgesagt { display: inline-block; padding: 1px 8px; border-radius: 4px; background: #fff4d6; color: #6b4a00; border: 1px solid #e0b84a; font-weight: 600; }
.kal-kind-svnr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; }
.kal-kind-svnr input { width: 9.5em; max-width: 100%; min-width: 0; padding: 4px 6px; font: inherit; border: 1px solid var(--line, #ccc); border-radius: 6px; background: #fff; }

/* ---------- Aufgaben mit Symbol, Uhrzeit und Dauer (24.10.2026) ----------
   Im Raster steht von einer Aufgabe nur das Symbol: ein schmaler Knopf rechts im
   freien Streifen (--kal-frei), oben bei der Uhrzeit, so hoch wie die Dauer, aber
   mindestens 28 px zum Antippen. Ohne Uhrzeit steht es im Tageskopf neben „Akut“.
   Farben: wichtig rot/orange, Geld grün, sonst Lila. Fenster „Aufgabe“ und
   „Aufgaben“: Tippflächen mindestens 44 px, bei 375 px nichts seitlich. */
.kal-sym { display: block; flex: none; width: 20px; height: 20px; color: var(--lila, #8e4baf); }
.kal-sym-wichtig { color: #d9480f; }
.kal-sym-geld { color: #2b8a3e; }
.kal-aufgabe-sym {
    position: absolute; z-index: 1; right: 0; width: var(--kal-frei, 28px); min-height: 28px; margin: 0; padding: 3px 0 0;
    top: calc(var(--ab) * var(--kal-zeile) + 1px); height: calc(var(--zeilen) * var(--kal-zeile) - 2px);
    display: flex; justify-content: center; align-items: flex-start; overflow: hidden; box-sizing: border-box;
    border: 1px solid var(--lila-linie, #ddc9e7); border-radius: 4px; background: rgba(255, 255, 255, .94);
    color: inherit; cursor: pointer; touch-action: manipulation;
}
.kal-aufgabe-sym[data-nr="1"] { right: 28px; }
.kal-aufgabe-sym[data-nr="2"] { right: 56px; }
.kal-aufgabe-sym[data-nr="3"] { right: 84px; }
.kal-aufgabe-sym:hover { background: var(--lila-flaeche, #f5eefa); }
.kal-aufgabe-sym:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: 1px; z-index: 2; }
/* Tageskopf: dritte Spalte zwischen Titel und Akut, die Akut-Spalte bleibt gleich breit wie darunter */
.kal-tag .kal-tag-kopf { grid-template-columns: minmax(0, 1fr) auto var(--kal-akut-breite); }
.kal-tag .kal-tag-kopf .kal-akut-kopf { grid-column: 3; }
.kal-aufgaben-tag { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 2px; padding: 0 3px; min-width: 0; }
.kal-aufgabe-sym.kal-aufgabe-sym-tag { position: static; width: 28px; height: 28px; padding: 0; align-items: center; }

/* Fenster: auch ohne JavaScript (offen gerendert) über der Seite statt mitten im Text */
.kal-aufgabe-dialog[open], .kal-aufgaben-dialog[open] { position: fixed; inset: 0; margin: auto; z-index: 50; overflow: auto; }
.kal-dialog.kal-aufgabe-dialog { width: min(34rem, calc(100vw - 32px)); }
.kal-dialog.kal-aufgaben-dialog { width: min(44rem, calc(100vw - 32px)); }
.kal-aufgabe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; margin-bottom: 6px; }
.kal-aufgabe-kopf h2 { margin: 0 !important; min-width: 0; overflow-wrap: anywhere; }
.kal-aufgabe-zu {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -12px; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer;
}
.kal-aufgabe-zu:hover { background: var(--lila-flaeche, #f5eefa); }
.kal-aufgabe-zu:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: -2px; }
.kal-aufgabe-auto, .kal-aufgabe-status, .kal-aufgabe-tipp { margin: 0 0 10px; }
.kal-aufgabe-symbole { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.kal-aufgabe-symbole legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.kal-aufgabe-symbolwahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 560px) { .kal-aufgabe-symbolwahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kal-aufgabe-symbolknopf { position: relative; display: block; margin: 0; min-width: 0; cursor: pointer; font-weight: 400 !important; }
.kal-aufgabe-symbolknopf input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.kal-aufgabe-symbolfeld {
    display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; box-sizing: border-box;
    border: 1px solid var(--line, #ccc); border-radius: 8px; background: #fff; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere;
}
.kal-aufgabe-symbolfeld .kal-sym { width: 22px; height: 22px; }
.kal-aufgabe-symbolknopf:hover .kal-aufgabe-symbolfeld { background: var(--lila-flaeche, #f5eefa); }
.kal-aufgabe-symbolknopf input:checked + .kal-aufgabe-symbolfeld {
    border-color: var(--lila, #8e4baf); background: var(--lila-flaeche, #f5eefa); box-shadow: inset 0 0 0 1px var(--lila, #8e4baf); font-weight: 600;
}
.kal-aufgabe-symbolknopf input:focus-visible + .kal-aufgabe-symbolfeld { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: 1px; }
.kal-aufgabe-wann { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
.kal-form .form-row input[type="time"] { min-height: calc(1.5em + 16px); }
.kal-aufgabe-dialog .kal-knoepfe .btn { min-height: 44px; }
.kal-aufgabe-dialog .kal-knoepfe .kal-aufgabe-haken { margin-left: auto; }
@media (max-width: 480px) {
    .kal-aufgabe-wann { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .kal-aufgabe-wann .form-row:first-child { grid-column: 1 / -1; }
    .kal-aufgabe-dialog .kal-knoepfe .kal-aufgabe-haken { margin-left: 0; }
}
/* Liste: Zeile mit Symbol vorne, Text und Angaben sind ein Link aufs Fenster */
.kal-aufgaben-neu-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; }
.kal-aufgaben-neu-zeile .btn { min-height: 44px; display: inline-flex; align-items: center; }
.kal-aufgabe-link { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 2px 4px; border-radius: 6px; color: inherit; text-decoration: none; }
.kal-aufgabe-link:hover { background: var(--lila-flaeche, #f5eefa); }
.kal-aufgabe-link:hover .kal-aufgabe-text { text-decoration: underline; }
.kal-aufgabe-link:focus-visible { outline: 2px solid var(--lila-dunkel, #6e3a8a); outline-offset: 1px; }
.kal-aufgabe-symbol { flex: none; padding-top: 1px; }
.kal-aufgabe-symbol .kal-sym { width: 24px; height: 24px; }
.kal-aufgabe-rumpf { display: block; flex: 1 1 auto; min-width: 0; }
.kal-aufgabe-link .kal-aufgabe-text { display: block; }
.kal-aufgaben-dialog .kal-abschnitt { padding: 12px; margin-bottom: 12px; }
.kal-aufgaben-dialog .kal-abschnitt h2 { font-size: 1.05rem; }
@media print { .kal-aufgabe-sym, .kal-aufgaben-tag { display: none; } }