/* Kalender (29./30.09.2026): Seite, Erinnerung, Menuezahl, Streifen im Dialer.
   Farben nur aus den Tokens (styles.css), hell und dunkel ueber body.dark; Termin in Gold,
   Rueckruf in Navy (Entwurf 3.2). 1rem = 12px, deshalb px. */
/* Warnfarbe: --amber (#d97706) hat auf Weiss nur 3,2:1 — hell ein dunkleres Bernstein (4,9:1), dunkel
   das helle aus den Tokens. */
:root { --kal-warn: #b45309; }
body.dark { --kal-warn: #f59e0b; }
.kal-seite { max-width: 860px; padding: 4px 4px 24px; }
.kal-neu-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.kal-suche { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--border2); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: var(--bg2); color: var(--text); margin-bottom: 10px; }
.kal-suche:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kal-treffer:empty { display: none; }
.kal-treffer { margin-bottom: 12px; }
/* --red-text statt --red (08.10.2026, Paket Farben, W2): Rot als Schrift auf --red-bg hatte 3,61:1 (styles.css :root). */
.kal-fehler { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--red-bg); color: var(--red-text); font-size: 13px; margin-bottom: 10px; }
/* Kleine Grauschrift traegt --text2, nicht --text3: #7c8496 auf Weiss sind 3,8:1, zu wenig fuer 12–13 px
   (axe auf der Demo, 30.09.2026: color-contrast auf der Kalenderseite hell). --text2 #5a6490 = 5,9:1.
   Dieselbe Familie wie „Gold auf Weiss" (#b8933d 2,9:1 → #8a6d22). */
.kal-leer { padding: 22px; text-align: center; color: var(--text2); font-size: 13px; border: 1.5px dashed var(--border2); border-radius: var(--radius); }

.kal-abschnitt { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.kal-abschnitt > summary { padding: 11px 14px; font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.kal-abschnitt > summary::-webkit-details-marker { display: none; }
.kal-abschnitt > summary::before { content: '▸'; color: var(--text3); transition: transform var(--dur-fast); }
.kal-abschnitt[open] > summary::before { transform: rotate(90deg); }
.kal-abschnitt[data-abschnitt="ueberfaellig"] > summary { color: var(--kal-warn); }
.kal-anzahl { font-size: 11px; font-weight: 700; color: var(--text2); background: var(--bg3); border-radius: 20px; padding: 1px 8px; }

.kal-zeile { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
.kal-zeit { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.kal-inhalt { min-width: 0; }
.kal-wer { font-size: 13.5px; font-weight: 600; color: var(--text); }
.kal-notiz { font-size: 12px; color: var(--text2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.kal-art { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 20px; }
.kal-art-termin { background: #fdf6e3; color: #7c5a0a; }
.kal-art-rueckruf { background: var(--accent-light); color: var(--accent); }
body.dark .kal-art-termin { background: rgba(200,164,77,.18); color: #e9cf8a; }
body.dark .kal-art-rueckruf { background: rgba(120,160,220,.18); color: #cfe0ff; }
.kal-ueberfaellig .kal-zeit { color: var(--kal-warn); }
/* Ueberfaellig von einem frueheren Tag (17.10.2026): oben der Tag („Gestern", „Mo 12.10."), darunter die Uhrzeit. */
.kal-zeit-tag, .kal-zeit-uhr { display: block; }
.kal-zeit-uhr { font-weight: 600; }
/* Erledigt: blasser ueber die FARBE, nicht ueber opacity — eine Deckkraft von .7 drueckt jede Schrift
   darin unter 4,5:1. */
.kal-erledigt .kal-zeit, .kal-erledigt .kal-wer { color: var(--text2); }
.kal-erledigt .kal-wer { text-decoration: line-through; }
.kal-aktion { display: flex; gap: 6px; align-items: center; }
.kal-knopf { min-height: 36px; padding: 6px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border2); background: var(--bg); color: var(--text);
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer; }
.kal-knopf:hover { border-color: var(--text3); }
.kal-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kal-anrufen { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.kal-menue { min-width: 36px; padding: 6px 8px; }
/* Unterwegs (01.10.2026): die Zeile zeigt sofort, dass der Klick angekommen ist — bis der Server geantwortet
   hat. Hier ist opacity richtig: die Zeile ist fuer diesen Moment nicht bedienbar (Knoepfe disabled). */
.kal-zeile.kal-wartet { opacity: .5; }
.kal-knopf:disabled { cursor: progress; }
/* Platzhalter, solange es noch keinen Stand gibt (erstes Oeffnen, bevor das Vorladen fertig ist): drei
   Zeilen in der Hoehe echter Zeilen — die Liste springt nicht, wenn sie kommt. Kein Text, also kein Kontrast. */
.kal-laedt .kal-zeile:first-child { border-top: 0; }
.kal-platz { min-height: 36px; }
/* Farbe und Puls kommen aus dem einen Satz Lade-Bausteine (styles.css, „LADEN“, 14.10.2026). */
.kal-platz span { display: block; height: 12px; border-radius: 6px; background: var(--lade-flaeche, var(--bg3)); animation: ladePuls 1.2s ease-in-out infinite; }
.kal-platz .kal-zeit span { width: 44px; }
.kal-platz .kal-inhalt span { width: min(260px, 70%); }
#kal-blatt .btn[aria-busy="true"] { cursor: progress; opacity: .75; }

/* Blatt „Aendern"/„Neu" (iqModal) */
#kal-blatt .kal-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin: 12px 0 6px; }
#kal-blatt .kal-reihe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#kal-blatt .kal-wahl { min-height: 36px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--border2); background: var(--bg); color: var(--text);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
#kal-blatt .kal-wahl.an { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
#kal-blatt input, #kal-blatt textarea { padding: 8px 10px; border: 1.5px solid var(--border2); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  background: var(--bg); color: var(--text); box-sizing: border-box; }
/* Ein Feld leuchtet nur, wenn SEIN Wert gilt (ein Tag / eine Uhrzeit ohne eigenen Knopf) — sonst
   leuchtet der Knopf und das Feld ist leer: je Reihe genau eine sichtbare Auswahl (01.10.2026). */
#kal-blatt input.an { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
/* „oder" und sein Feld brechen nur GEMEINSAM um — ein „oder" allein am Zeilenende liest sich wie ein Fehler. */
#kal-blatt .kal-oder { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; color: var(--text2); padding: 0 2px; }
#kal-blatt .kal-art-satz { font-size: 12.5px; line-height: 1.45; margin: 0 0 2px; overflow: visible; }
#kal-blatt textarea { width: 100%; resize: vertical; }
/* .kal-stapel (08.10.2026): die drei beschrifteten Felder in „Neuer Kontakt" — dieselbe Regel wie zuvor fuer die
   Felder im aufklappbaren „Neuer Einzelkontakt", nur mit neuem Namen; keine neue Groesse. */
#kal-blatt details input, #kal-blatt .kal-stapel input { display: block; width: 100%; margin: 6px 0; }
#kal-blatt .kal-stapel label { display: block; }
#kal-blatt details summary { cursor: pointer; font-size: 13px; font-weight: 700; margin-top: 12px; }
#kal-blatt .kal-titel { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--text); }
#kal-blatt .kal-fuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
#kal-blatt .kal-haken { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0 10px; }
#kal-blatt .kal-wege-satz { margin: 0 0 10px; }   /* was immer mitgeht und wohin (17.10.2026) */
#kal-blatt input[type="search"] { width: 100%; }
.kal-leise { font-weight: 400; color: var(--text2); text-transform: none; letter-spacing: 0; }
.kal-hinweis { font-size: 12.5px; color: var(--kal-warn); min-height: 16px; margin-top: 8px; }
.kal-hinweis:empty { display: none; }
/* Hinweise im Blatt (01.10.2026): „es gibt schon einen Eintrag" oben, Doppelbelegung ueber den Knoepfen.
   Warnfarbe als TEXT auf hellem Grund (--kal-warn 4,9:1 auf Weiss); im Dunklen heller Text auf dunklem Grund. */
.kal-schon, .kal-konflikt { font-size: 12.5px; line-height: 1.45; color: var(--kal-warn); background: #fff7e6; border: 1px solid #f1d9a8; border-radius: var(--radius-sm); padding: 8px 10px; }
.kal-schon { margin: 0 0 10px; }
.kal-konflikt { margin-top: 10px; }
.kal-konflikt:empty { display: none; }
body.dark .kal-schon, body.dark .kal-konflikt { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
#buchung-status .bu-konflikt { font-weight: 600; color: var(--kal-warn); margin-top: 4px; }
.kal-menue-liste { display: flex; flex-direction: column; gap: 8px; }
/* Menue „⋯" (07.10.2026, K7): „Erledigt" und „Ändern" nebeneinander, die uebrigen darunter; jeder Knopf traegt
   sein Wort und darunter in einer Zeile, was er tut. Die Unterzeile erbt die Farbe des Knopfs (Tinte auf Gold
   7,3:1, --text2 auf Weiss 5,7:1) — kein opacity, das drueckte sie unter 4,5:1. */
.kal-menue-haupt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#kal-blatt .kal-menue-liste { margin-top: 12px; }
#kal-blatt .kal-menue-knopf { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 52px; padding: 8px 14px; }
.kal-mk-wort { font-size: 14px; font-weight: 700; }
.kal-mk-satz { font-size: 12px; font-weight: 400; line-height: 1.35; }
#kal-blatt .btn-ghost.kal-menue-knopf .kal-mk-wort { color: var(--text); }
/* Am Handy ist die ganze offene Zeile das Ziel fuer das Menue (kalender.js, kalZeileEl). */
@media (max-width: 768px) { .kal-zeile-offen { cursor: pointer; } }
/* „Abbrechen" unter den Aktionen des Menues „⋯", abgesetzt wie in jedem Aktionsblatt (02.10.2026, V7b). */
#kal-blatt .kal-menue-abbrechen { display: block; width: 100%; min-height: 44px; margin-top: 16px; }
.kal-treffer-zeile { display: block; width: 100%; text-align: left; padding: 9px 10px; margin-top: 6px; border-radius: var(--radius-sm); border: 1px solid var(--border2);
  background: var(--bg2); color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; }

/* Menuezahl in der Seitenleiste und am Handy-Tab */
.nav-zahl { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 20px; background: #C8A44D; color: #051C2C; font-size: 11px; font-weight: 800; text-align: center; }
.mtab-btn { position: relative; }
.mtab-zahl { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 16px; padding: 0 4px; border-radius: 10px; background: #C8A44D; color: #051C2C; font-size: 10px; font-weight: 800; line-height: 16px; }

/* Streifen im Einrichtungsbereich des Dialers */
.kal-streifen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--radius-sm);
  background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 700; }
body.dark .kal-streifen { background: rgba(120,160,220,.14); color: #cfe0ff; }

/* Erinnerung: die schwebende Mitteilung (09.10.2026, Wunsch des Betreibers: „Apple hat das doch immer schwebend …
   Mach es genauso wie Apple an der Stelle wo es kommt und genau mit dem Design"). Was sie tut und warum, steht in
   kalender.js ab „Die Erinnerung als MITTEILUNG wie bei Apple"; hier steht, wie sie aussieht.
   · ORT: #kal-erinnerung ist fest (position: fixed) — am PC oben rechts, 12 px vom Rand, 360 px breit; am Handy
     oben, 8 px, ueber die ganze Breite. Sie steht in keinem Fluss: nichts verschiebt sich.
   · ZUSTAENDE (kalender.js kalMitteilungenMalen; als data-form am Element), auf jeder Seite dieselben: in RUHE der
     MINI-KNOPF (.kal-er-mini: Symbol mit Zahl) ganz in der Ecke. Fuer Neues zeigt sich einige Sekunden lang die
     SCHMALE Tafel (.kal-er-klein: Titel, Name, „Mehr anzeigen", keine Knoepfe; bei mehreren mit Stapelkanten,
     .kal-er-hinten). AUFGEKLAPPT (.kal-er-offen, auf Knopfdruck) stehen alle einzeln untereinander, je mit ihren
     drei Knoepfen; die Liste rollt in sich. Am PC traegt die schmale Tafel und die aufgeklappte Liste am linken
     Rand den GRIFF (.kal-er-griff), der sie wieder klein macht.
   · MATERIAL „Glas" nach dem Vorbild der Mitteilungen in macOS 26 / iOS 26 (Richtwerte, nicht an einem Geraet
     gemessen): hell rgba(245,245,247,.78), dazu Unschaerfe 40 px und Saettigung 180 %, feiner Rand, innen ein
     heller Haarstrich, Schatten 0 8px 28px. DUNKEL ist das Material dichter als der Richtwert (.82 statt .72):
     ueber einer hellen Flaeche im dunklen Thema (der gelbe Knopf „Termin vereinbart!") reichte die Zweitfarbe
     sonst nicht fuer 4,5:1 — Lesbarkeit geht vor Durchsicht. Hell/dunkel folgt dem Thema der APP (body.dark),
     nicht dem Geraet; in allen drei Designs dasselbe — es ist eine Mitteilung, kein Teil des Designs. Darum
     eigene Farben (--er-…) statt der Tokens der App: die Tokens gelten fuer deckende Flaechen.
   · SCHICHTUNG: z-index 240 — ueber Seite und Seitenleiste (100), unter Tab-Leiste (250), Buchungsblatt (260; in
     Glas liegt es als Teil von #page-dialer darunter — die aufgeklappte Liste endet am Handy ueber ihm),
     Menue-Blatt (290/300), Lampe (850), Tour (900), Fenster (1000), Meldung oben (10000).
   · Klassen kal-er-…: -schwebt (Farben; auch am Abbild beim Hinausgleiten), -offen (aufgeklappt), -klein (die
     schmale Tafel), -mini (der Knopf in der Ecke), -griff (der Pfeil am linken Rand), -kommt (die schmale Tafel
     faehrt gerade herein), -still (nur eingeblendet: der Mini-Knopf, das Auf- und Zuklappen), -geist (das Abbild,
     das hinausgleitet; -geist-klein: die Tafel zieht sich in die Ecke zurueck). An <html> steht kal-er-da, solange
     eine Mitteilung steht (kalender.js kalKarteHoeheMelden) — daran haengt der freigehaltene Platz fuer den
     Mini-Knopf. */
.kal-er-schwebt {
  --er-glas: rgba(245,245,247,.78); --er-dicht: #f5f5f7; --er-rand: rgba(0,0,0,.08); --er-strich: rgba(255,255,255,.65);
  --er-text: #1d1d1f; --er-text2: #3c3c43; --er-knopf: rgba(120,120,128,.16); --er-knopf-an: rgba(120,120,128,.28);
  --er-fokus: #051C2C; --er-radius: 22px;
  box-sizing: border-box; margin: 0; padding: 0; color: var(--er-text); font-family: inherit; font-size: 13px; line-height: 1.3; text-align: left;
}
body.dark .kal-er-schwebt {
  --er-glas: rgba(40,40,42,.82); --er-dicht: #28282a; --er-rand: rgba(255,255,255,.12); --er-strich: rgba(255,255,255,.10);
  --er-text: #f5f5f7; --er-text2: #d1d1d6; --er-knopf: rgba(120,120,128,.32); --er-knopf-an: rgba(120,120,128,.46);
  --er-fokus: #E4C878;
}
/* --kal-er-unter: Unterkante eines Streifens ueber die ganze Breite + 8 px (kalender.js kalKarteOrt), sonst 0.
   --kal-er-frei: was unten fest steht (Tab-Leiste, Leiste der Sitzung, Lampe) und der Platz fuer die Meldung. */
#kal-erinnerung {
  --er-oben: max(calc(12px + env(safe-area-inset-top, 0px)), var(--kal-er-unter, 0px));
  position: fixed; z-index: 240; top: var(--er-oben); right: calc(12px + env(safe-area-inset-right, 0px)); width: 360px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;   /* nur Tafeln und Knoepfe nehmen Klicks an */
}
.kal-er-liste { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.kal-er-liste[data-hinten="1"] { padding-bottom: 8px; }
.kal-er-liste[data-hinten="2"] { padding-bottom: 16px; }
/* Die Tafel (aufgeklappt). Raster: Symbol | Titel+Text; darunter ueber die ganze Breite die drei Knoepfe. Die Flaeche
   selbst tut nichts — gehandelt wird ueber die Knoepfe. */
.kal-er-tafel {
  position: relative; z-index: 2; flex: 0 0 auto; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; align-items: start;
  min-height: 68px; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--er-rand); border-radius: var(--er-radius);
  background: var(--er-glas); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--er-strich), 0 8px 28px rgba(0,0,0,.18); pointer-events: auto;
}
.kal-er-symbol { display: block; width: 36px; height: 36px; border-radius: 9px; }
.kal-er-flaeche { min-width: 0; }
.kal-er-zeile1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kal-er-titel { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-er-zeit { flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--er-text2); white-space: nowrap; }
.kal-er-zeit:empty { display: none; }
.kal-er-wer, .kal-er-notiz { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-er-notiz { color: var(--er-text2); }
/* Die drei Knoepfe stehen sichtbar da (Massstab: ohne Erklaerung verstaendlich). Anrufen vorn und betont: Anruf-Gruen
   #14804F mit Weiss (4,9:1) — deckend, also unabhaengig von dem, was unter dem Glas liegt. */
.kal-er-knoepfe { grid-column: 1 / -1; display: flex; gap: 6px; min-width: 0; }
.kal-er-knopf { flex: 0 1 auto; min-width: 44px; min-height: 28px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--er-knopf); color: var(--er-text); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.kal-er-knopf:hover { background: var(--er-knopf-an); }
.kal-er-schwebt .kal-er-ruf { flex: 1 1 auto; background: #14804F; color: #fff; }
.kal-er-schwebt .kal-er-ruf:hover { background: #0f6b41; }
.kal-er-schwebt button:focus-visible { outline: 2px solid var(--er-fokus); outline-offset: 2px; }
/* Der GRIFF (nur am PC): 28 × 28 px, rund, dasselbe Glas — halb ueber dem linken Rand der Mitteilung, auf Hoehe der
   Kopfzeile der obersten Tafel (an der schmalen Tafel 8 px, aufgeklappt unter „Weniger anzeigen" 46 px von oben).
   Der Pfeil nach rechts ist aus zwei Kanten in der Schriftfarbe gezeichnet (kein Bild, kein Schriftzeichen). Er
   haengt an #kal-erinnerung, nicht in der Liste: so rollt er nicht mit und wird nicht abgeschnitten. Faehrt die
   Tafel herein, erscheint er an ihrem Ende (sonst stuende er 0,4 s allein da). */
.kal-er-griff { position: absolute; z-index: 3; left: -14px; top: 8px; width: 28px; height: 28px; box-sizing: border-box; margin: 0; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--er-rand); border-radius: 50%; background: var(--er-glas); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--er-strich), 0 2px 8px rgba(0,0,0,.18); color: var(--er-text); font: inherit; cursor: pointer; pointer-events: auto; }
.kal-er-griff::before { content: ''; width: 7px; height: 7px; margin-left: -3px; box-sizing: border-box; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.kal-er-griff:hover { background: var(--er-dicht); }
#kal-erinnerung[data-form="aufgeklappt"] .kal-er-griff { top: 46px; }
/* Der MINI-KNOPF (die Ruhe, auf jeder Seite): ein runder Glas-Knopf, 40 × 40 px (Handy 44), darin das Rufon-Symbol
   (24 px, Handy 28) und an seiner Ecke die Zahl der faelligen: dunkles Rot #a81e3a mit Weiss (gerechnet 7,2:1),
   12 px fett. Die Zahl liegt IM Knopf (nichts ragt ueber seine 40 × 40 px hinaus) und gehoert zu seiner Flaeche.
   HARTE REGEL (Betreiber, 09.10.2026: „Hauptsache es verdeckt nichts"): unter dem Mini-Knopf liegt kein Knopf, kein
   Text, keine Anzeige. Darum steht er ganz in der Ecke — 2 px vom oberen und vom rechten Rand, am PC links neben dem
   Rollbalken der Seite (--kal-er-balken) —, und wo eine Seite dort trotzdem etwas hat, rueckt dieses, solange eine
   Mitteilung steht, ein Stueck nach links (unten: „PLATZ FUER DEN MINI-KNOPF"). */
#kal-erinnerung[data-form="mini"] { top: max(calc(2px + env(safe-area-inset-top, 0px)), calc(var(--kal-er-unter, 0px) - 6px));
  right: calc(2px + var(--kal-er-balken, 0px) + env(safe-area-inset-right, 0px)); left: auto; width: auto; }
.kal-er-mini { position: relative; z-index: 2; align-self: flex-end; flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box;
  margin: 0; padding: 0; border: 1px solid var(--er-rand); border-radius: 50%; background: var(--er-glas);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--er-strich), 0 1px 4px rgba(0,0,0,.16); color: var(--er-text); font: inherit; cursor: pointer; pointer-events: auto; }
.kal-er-mini .kal-er-symbol { width: 24px; height: 24px; border-radius: 6px; }
.kal-er-zahl { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 4px; border-radius: 9px;
  background: #a81e3a; color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
/* Die SCHMALE Tafel (einige Sekunden fuer Neues, auf jeder Seite): so klein, wie es lesbar geht. Die ganze Tafel ist EIN Knopf;
   darin Symbol | Zeile 1: Titel und rechts das Wort „Mehr anzeigen" · Zeile 2: wer ueber die ganze Breite (der Name
   wird erst am Rand der Tafel gekuerzt). Keine Zeit, keine Notiz, keine Knoepfe zum Handeln. */
.kal-er-klein { display: block; min-height: 0; padding: 0; }
.kal-er-klein > .kal-er-flaeche { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "symbol titel mehr" "symbol wer wer";
  column-gap: 10px; row-gap: 4px; align-items: center; width: 100%; box-sizing: border-box; margin: 0; padding: 10px 14px; border: 0; border-radius: inherit;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kal-er-klein .kal-er-symbol { grid-area: symbol; align-self: center; }
.kal-er-klein .kal-er-titel { grid-area: titel; }
.kal-er-klein .kal-er-wer { grid-area: wer; min-width: 0; }
.kal-er-mehr-wort { grid-area: mehr; justify-self: end; display: inline-flex; align-items: center; min-height: 24px; box-sizing: border-box; padding: 0 10px; border-radius: 999px;
  background: var(--er-knopf); color: var(--er-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.kal-er-klein > .kal-er-flaeche:hover .kal-er-mehr-wort { background: var(--er-knopf-an); }
.kal-er-klein > .kal-er-flaeche:focus-visible { outline-offset: -3px; }
/* Der Stapel: hinter der obersten schauen bis zu zwei Tafeln hervor — je 8 px tiefer, je 10 px schmaler an beiden
   Seiten, blasser. Sie gehoeren zur Mitteilung und sind kein Loch zur Seite darunter (Klicks gehen nicht hindurch). */
.kal-er-hinten { position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 1; height: 44px; box-sizing: border-box; border: 1px solid var(--er-rand);
  border-radius: var(--er-radius); background: var(--er-glas); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 6px 18px rgba(0,0,0,.12); opacity: .78; pointer-events: auto; }
.kal-er-hinten + .kal-er-hinten { left: 20px; right: 20px; bottom: 0; z-index: 0; opacity: .55; }
.kal-er-liste[data-hinten="1"] .kal-er-hinten { bottom: 0; }
/* Aufgeklappt: alle einzeln untereinander; hoeher als das Fenster, rollt die Liste IN sich — die Seite rollt nicht
   mit (overscroll-behavior). Die Raender der Liste (6/8/12 px) lassen den Schatten Platz. */
/* Der Kopf traegt nur „Weniger anzeigen" — ueber die ganze Breite, damit es IMMER dort liegt, wo eben der Mini-Knopf
   und der Kopf der schmalen Tafel standen (ein zweiter Klick an derselben Stelle klappt wieder zu). Der Sammelknopf
   „Alle OK" steht als letzte Zeile UNTER der letzten Tafel (.kal-er-fuss, nur bei mehreren) und rollt mit der
   Liste: an keiner Stelle, an der vorher Mini-Knopf oder schmale Tafel lagen, liegt ein Knopf, der etwas bestaetigt
   oder waehlt (kalender.js kalMitteilungenMalen). */
.kal-er-kopf { flex: 0 0 auto; display: flex; gap: 8px; }
.kal-er-weniger { flex: 1 1 auto; }
.kal-er-fuss { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.kal-er-kopfknopf { min-height: 32px; box-sizing: border-box; margin: 0; padding: 0 14px; border: 1px solid var(--er-rand); border-radius: 999px; background: var(--er-glas);
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); box-shadow: 0 4px 14px rgba(0,0,0,.14);
  color: var(--er-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; pointer-events: auto; }
.kal-er-kopfknopf:focus-visible { outline-offset: -4px; }
/* Der Hinweis „Auch erinnert werden, wenn Rufon im Hintergrund ist?" (14.10.2026, kalender.js kalSysHinweis): letzte
   Zeile der aufgeklappten Liste, dasselbe Glas wie eine Tafel, aber ohne Symbol — ein Satz und zwei gleichrangige
   Knoepfe. Nur am PC (am Handy gibt es ihn nicht) und nur, bis einmal gewaehlt wurde. */
.kal-er-sys { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--er-rand); border-radius: var(--er-radius); background: var(--er-glas); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--er-strich), 0 3px 10px rgba(0,0,0,.14); pointer-events: auto; }
.kal-er-sys-satz { font-size: 13px; line-height: 1.35; color: var(--er-text); }
#kal-erinnerung.kal-er-offen { max-height: calc(100vh - var(--er-oben) - 12px - var(--kal-er-frei, 0px)); max-height: calc(100dvh - var(--er-oben) - 12px - var(--kal-er-frei, 0px)); }
#kal-erinnerung.kal-er-offen .kal-er-liste { flex: 0 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; pointer-events: auto;
  margin: -6px -8px -12px; padding: 6px 8px 12px; }
#kal-erinnerung.kal-er-offen .kal-er-tafel { box-shadow: inset 0 1px 0 var(--er-strich), 0 3px 10px rgba(0,0,0,.14); }
/* Kommen und Gehen: am PC von rechts herein, am Handy von oben (0,45 s, weich); hinaus kuerzer. Bewegt wird die
   LISTE bzw. das Abbild, nie #kal-erinnerung selbst — dessen Lage wird gemessen (kalKarteOrt), auch mitten im
   Hereinfahren. Nur transform: Deckkraft an einem Vorfahren naehme dem Glas den Blick auf die Seite.
   Herein faehrt nur die schmale Tafel; der Mini-Knopf und das Auf- und Zuklappen werden weich eingeblendet
   (.kal-er-still). */
@keyframes kalErKommtRechts { from { transform: translateX(calc(100% + 28px)); } to { transform: translateX(0); } }
@keyframes kalErKommtOben { from { transform: translateY(calc(-100% - 28px)); } to { transform: translateY(0); } }
@keyframes kalErGehtRechts { to { transform: translateX(calc(100% + 28px)); } }
@keyframes kalErGehtOben { to { transform: translateY(calc(-100% - 28px)); } }
@keyframes kalErEin { from { opacity: 0; } }
@keyframes kalErAus { to { opacity: 0; } }
#kal-erinnerung.kal-er-kommt .kal-er-liste { animation: kalErKommtRechts .45s cubic-bezier(.2, .9, .25, 1) both; }
#kal-erinnerung.kal-er-kommt .kal-er-griff { animation: kalErEin .2s ease .35s both; }
#kal-erinnerung.kal-er-still :is(.kal-er-tafel, .kal-er-hinten, .kal-er-mini, .kal-er-griff, .kal-er-kopfknopf) { animation: kalErEin .3s ease both; }
.kal-er-geist { position: fixed; z-index: 240; pointer-events: none; animation: kalErGehtRechts .22s ease-in both; }
.kal-er-geist * { pointer-events: none !important; }
.kal-er-geist > .kal-er-liste { max-height: 100%; overflow: hidden; }
/* Die von selbst erschienene Tafel zieht sich nach ihren Sekunden in den Mini-Knopf zurueck: zur Ecke oben rechts hin
   kleiner und blasser (0,3 s) — sie gleitet nicht hinaus, sie bleibt ja als Knopf da. */
@keyframes kalErZurEcke { to { transform: scale(.12); opacity: 0; } }
.kal-er-geist.kal-er-geist-klein { transform-origin: calc(100% - 10px) 10px; animation: kalErZurEcke .3s ease-in both; }
/* Die Ansage fuer den Vorleser (kalender.js kalAnsagen): im Dokument, aber nicht im Bild. */
.kal-er-ansage { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* PLATZ FUER DEN MINI-KNOPF. Solange eine Mitteilung steht, bleibt in der Kopfzeile der Seite die Ecke oben rechts
   frei — nur dort, nichts darunter rueckt, keine Zeile bricht um (gemessen 09.10.2026 auf jeder Seite, in drei
   Designs, 1024–1920 px und am Handy 390 und 360 px):
   · am PC ruecken die Kopfzeile (.topbar) und der Kopf der Sitzung rechts 8 px ein — aber NUR dort, wo der Knopf
     sonst etwas beruehrte (html.kal-er-eng, gesetzt von kalender.js kalKartePlatz): der Knopf ist mit seinen 2 px
     Abstand 42 px breit, der Rand der Seite 36 px — ohne den Platz lag er 6 px tief auf „+ Neuer Eintrag",
     „+ Leitfaden", „+ Benutzer anlegen" (unter 1228 px), „Zur Übersicht" und „Spielregeln · neu" (Klassik bei
     1024 px). Wo rechts ohnehin Rand ist, bewegt sich nichts;
   · am Handy (Rand der Seite 12 px, Knopf 46 px) lag er auf „+ Neuer Eintrag" im Kalender und auf dem Ende der
     ERSTEN Zeile der Unterzeilen („Dein Profil, dein Passwort …"). Der Knopf des Kalenders rueckt 38 px nach
     links; die erste Zeile einer Unterzeile endet 36 px frueher (ein leerer Schwimmer von der Hoehe einer halben
     Zeile — die Zeilen darunter laufen wieder ueber die ganze Breite). Die ganze Kopfzeile einzuruecken ging
     nicht: der Kopf der Sitzung und „Bericht der Sitzung" brachen dann bei 360 px um.
     Im Bericht der Sitzung steht die Unterzeile 7 px tiefer (ihr Kasten beginnt bei 43 px, der Knopf endet bei
     46 px); dort rueckt sie — und mit ihr die Seite darunter — um 4 px nach unten, statt bei 360 px in eine zweite
     Zeile zu brechen (19 px). Das ist die EINE Stelle, an der sich unter der Kopfzeile etwas bewegt.
   Gesetzt wird das in dem Augenblick, in dem die Mitteilung ERSCHEINT (unter der Tafel, die dort hereinfaehrt). */
@media (min-width: 769px) {
  html.kal-er-eng .main .topbar, html.kal-er-eng #dialer-active > div:first-child { margin-right: 8px; }
}
@media (max-width: 768px) {
  html.kal-er-da .main .topbar .kal-neu-knoepfe { margin-right: 38px; }
  html.kal-er-da .main .topbar-left > p::before { content: ''; float: right; width: 36px; height: 10px; }
  html.kal-er-da .main #dialer-done .topbar-left > p::before { content: none; }
  html.kal-er-da .main #dialer-done .topbar-left > p { margin-top: 7px; }
}
@media (max-width: 768px) {
  .kal-er-schwebt { --er-radius: 26px; font-size: 15px; }
  #kal-erinnerung { --er-oben: max(calc(8px + env(safe-area-inset-top, 0px)), var(--kal-er-unter, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); width: auto; max-width: none; }
  .kal-er-tafel { row-gap: 10px; padding: 14px; }
  .kal-er-titel, .kal-er-wer, .kal-er-notiz { font-size: 15px; }
  .kal-er-zeit { font-size: 13px; }
  /* Fingerziele: jeder Knopf mindestens 44 px hoch; die schmale Tafel ist als Ganzes das Ziel. Den Griff am linken
     Rand gibt es hier nicht: die Mitteilung reicht von Rand zu Rand. */
  .kal-er-griff { display: none; }
  .kal-er-knopf { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .kal-er-kopfknopf { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .kal-er-klein { padding: 0; }
  .kal-er-klein > .kal-er-flaeche { row-gap: 2px; padding: 12px 14px; }
  .kal-er-mehr-wort { min-height: 26px; padding: 0 9px; }
  .kal-er-mini { width: 44px; height: 44px; }
  .kal-er-mini .kal-er-symbol { width: 28px; height: 28px; border-radius: 7px; }
  #kal-erinnerung.kal-er-kommt .kal-er-liste { animation-name: kalErKommtOben; }
  .kal-er-geist { animation-name: kalErGehtOben; }
  .kal-er-geist.kal-er-geist-klein { transform-origin: calc(100% - 16px) 16px; animation-name: kalErZurEcke; }
}
/* Schmale Handys (360 px): drei Knoepfe nebeneinander passen nur mit 14 px Schrift und schmalerem Polster — und
   „Mehr anzeigen · N weitere" passt nicht mehr neben den Titel: dort steht das Wort in einer eigenen Zeile. */
@media (max-width: 379px) {
  .kal-er-knopf { padding: 0 10px; font-size: 14px; }
  .kal-er-klein-lang > .kal-er-flaeche { grid-template-areas: "symbol titel titel" "symbol wer wer" "mehr mehr mehr"; }
  .kal-er-klein-lang .kal-er-mehr-wort { justify-self: start; margin-top: 4px; }
  /* Mit der eigenen Zeile ist die schmale Tafel hier 26 px hoeher als bei 390 px — ihre Flaeche reichte (mit zwei
     Stapelkanten, also ab drei faelligen) bis 123 px, und aufgeklappt begannen „Anrufen", „In 5 Minuten" und „OK" der
     ersten Tafel bei 124 px: 1 px darunter (Gegenpruefung 09.10.2026, N3; bei 390 px sind es 26 px, am PC 14).
     Getroffen hat ein zweiter Klick dort nichts, aber es war keine Reserve. Aufgeklappt beginnt die Liste hier
     12 px tiefer: 13 px Abstand, bei jeder Zahl faelliger (gemessen: pruef-erinnerung-banner.js D9 und V). */
  #kal-erinnerung.kal-er-offen .kal-er-kopf { margin-bottom: 12px; }
}
/* Weniger Bewegung: nur ein- und ausblenden — an den Tafeln selbst, damit das Glas die Seite weiter sieht. */
@media (prefers-reduced-motion: reduce) {
  #kal-erinnerung.kal-er-kommt .kal-er-liste { animation: none; }
  #kal-erinnerung.kal-er-kommt :is(.kal-er-tafel, .kal-er-hinten) { animation: kalErEin .2s ease both; }
  .kal-er-geist, .kal-er-geist.kal-er-geist-klein { animation: kalErAus .15s ease both; }
}
/* Weniger Durchsicht / mehr Kontrast: undurchsichtig mit klarem Rand in der Schriftfarbe (wie die App es sonst haelt,
   styles.css „KONTRAST ERHOEHEN" / „TRANSPARENZ REDUZIEREN"; Safari kennt nur „mehr Kontrast", darum beide zusammen).
   Bei „mehr Kontrast" tragen auch die Nebentexte (Zeit, Notiz) die volle Schriftfarbe. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .kal-er-tafel, .kal-er-hinten, .kal-er-kopfknopf, .kal-er-mini, .kal-er-griff, .kal-er-sys { background: var(--er-dicht); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--er-text); }
  .kal-er-hinten { opacity: 1; }
  .kal-er-knopf:not(.kal-er-ruf), .kal-er-mehr-wort { border: 1px solid var(--er-text); }
}
@media (prefers-contrast: more) { .kal-er-schwebt, body.dark .kal-er-schwebt { --er-text2: var(--er-text); } }
/* #dialer-callcard bleibt Bezugsrahmen (die Zeile „⏰ N fällig — nach dem Gespräch" hing daran; seit 09.10.2026 gibt es sie nicht mehr). */
#dialer-callcard { position: relative; }

@media (max-width: 768px) {
  .kal-zeile { grid-template-columns: 72px 1fr; }
  .kal-aktion { grid-column: 1 / -1; justify-content: flex-end; }
  .kal-suche, #kal-blatt input, #kal-blatt textarea { font-size: 16px; }   /* sonst zoomt das iPhone */
}
@media (prefers-reduced-motion: reduce) { .kal-abschnitt > summary::before { transition: none; } .kal-platz span { animation: none; } }

/* ── HANDY-FEINSCHLIFF (08.10.2026, Welle 2) — eigener Block am Ende; Begruendung und Messwerte stehen am
   gleichnamigen Block in styles.css. Fingerziele am Handy ≥ 44 px (gemessen 390×844: „Im Dialer öffnen" /
   „Anrufen" 36 hoch, „⋯" 36×36, „Zum Kalender" 37, Art/Tag/Uhrzeit im Blatt 36, die Felder dort 40–42,
   „+1" der Erinnerung 40×28). */
@media (max-width: 768px) {
  .kal-knopf { min-height: 44px; }
  .kal-menue { min-width: 44px; }
  #kal-blatt .kal-wahl { min-height: 44px; min-width: 44px; }   /* die Stunden „08" … waren 37 breit */
  #kal-blatt input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; box-sizing: border-box; }
}