/* Ein Baustein für alles, was man im Kalender öffnen kann (Johanns Wahl „C · Reiter“, 05.10.2026,
   entwuerfe/einheitlich-vier.html). Diese eine Datei laden beide Seiten: der Kalender-Rahmen
   (app/index.html) und die App-Hülle (oberflaeche/app/layout.tsx, als /kalender/blatt.css).
   Darum stehen hier nur Werte aus Code\Design (--inhalt, --grau, --pille …), die beide kennen.

   Aufbau jeder Karte: Kopfzeile mit Symbolen rechts (Schließen immer ganz rechts), Kopf mit
   Farbpunkt, Titel und Zeit, Reiter, Zeilen mit Symbol, Pillen. Am Handy von unten, am Laptop mittig. */

/* ---- Farben im Dunkeln wie Entwurf C (05.10.2026): Akzent #8AB4F8 statt #1A73E8 (Reiter, Kreis, Schalter waren zu
   dunkel, Reitertext 3,6:1), Hauptknopf #2B4A6E statt der hellen Fläche #A8C7FA. Nur in Karten und in den beiden
   Menüs mit Reitern (Stufe 4), nicht auf :root. ---- */
[data-theme="dark"] :is(.jt-tafel, .kal-karte, .kal-terminkarte, .kal-filter-inhalt, .kal-mehr-tafel) { --kal-akzent: #8AB4F8; --kal-voll: #2B4A6E; --kal-voll-schrift: #E3EEFF; }

/* ---- Rahmen der Karte ---- */
.jt-tafel.kal-terminkarte, .jt-tafel.kal-karte { width: min(440px, 100%); padding: 10px 20px 20px 22px; }
.jt-schleier.kal-im-rahmen { position: absolute; z-index: 40; }
.kal-im-rahmen .jt-tafel { max-height: calc(100% - 32px); }
@media (max-width: 760px) {
  .jt-schleier { padding: 0; align-items: end; }
  .jt-tafel { width: 100%; border-radius: var(--r-kasten) var(--r-kasten) 0 0; max-height: 92vh; }
  .jt-tafel.kal-terminkarte, .jt-tafel.kal-karte { width: 100%; }
  .kal-im-rahmen .jt-tafel { max-height: 92%; }
}

/* ---- Symbole ---- */
.kal-terminkarte svg, .kal-karte svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Linien-Symbole auch im Abgleich-Zettel, im Infofenster und in der Abgleich-Leiste (statt Emoji) */
.kal-kfeld-reihe svg, .kal-ktipp svg, .kal-tl-zu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--grau); justify-self: center; margin-top: 1px; }
.kal-tl-zu svg { width: 20px; height: 20px; margin: 0; }

/* ---- Kopfzeile: Titel links (wenn es einen gibt), Symbole rechts ---- */
.kal-tk-oben { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin: 0 -10px 2px 0; min-height: 40px; }
.kal-tk-oben .kal-tk-titel { margin-right: auto; font-size: var(--s-kopf); font-weight: 500; }
.kal-tk-oben .kal-tk-leise { margin-right: auto; font-size: var(--s-klein); color: var(--grau); }
.kal-tk-ikon { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--grau); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.kal-tk-ikon:hover, .kal-tk-ikon:focus-visible { background: var(--zeile); }
.kal-tk-ikon:disabled { opacity: .35; cursor: default; background: transparent; }
.kal-tk-ikon.rot { color: var(--rot); }

/* ---- Kopf: Farbpunkt, Titel, Zeit ---- */
.kal-tk-kopf { display: flex; gap: 14px; align-items: flex-start; }
.kal-tk-punkt { width: 14px; height: 14px; border-radius: 4px; background: var(--p, var(--grau)); flex: 0 0 auto; margin-top: 7px; }
.kal-tk-punkt.kal-kandidat-punkt { border-radius: 50%; background: var(--kal-ampel); }
.kal-terminkarte h2, .kal-karte h2 { margin: 0; font-size: var(--s-kopf); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.kal-tk-wann { color: var(--grau); font-size: var(--s-klein); margin-top: 4px; white-space: pre-line; }

/* ---- Reiter ---- */
/* „A · Gerade Linie“ (Johanns Wahl, 05.10.2026, entwuerfe/reiter-vier.html; vorher Johann zum Strich, der die runden
   Ecken des Knopfs erbte und zur Schale wurde: „Das sieht scheiße aus.“): ein gerader blauer Strich nur unter dem Wort,
   3 px hoch, oben 3 px gerundet, unten gerade, auf der 1-px-Linie der Leiste. Der Strich ist ein eigenes ::before und
   hängt nicht am Rand des Knopfs; der Knopf selbst ist eckig und ohne Rand, auch wo Grundregeln (.kal-steuer button,
   Hüllen-Knöpfe) Rundung, Rahmen oder Höhe mitbringen. Die graue Linie ist ein Schatten innen statt border-bottom, weil
   overflow-x: auto alles außerhalb des Innenraums abschneidet — so liegt der blaue Strich genau auf ihr.
   --kal-reiter-polster ist das seitliche Textpolster; der Strich rückt genauso weit ein. */
.kal-reiter { display: flex; gap: 4px; margin: 16px -20px 0 -22px; padding: 0 14px; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--rand); overflow-x: auto; scrollbar-width: none; }
.kal-reiter button { --kal-reiter-polster: 10px; position: relative; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 10px var(--kal-reiter-polster) 14px; font: inherit; font-size: var(--s-text); color: var(--grau); cursor: pointer; white-space: nowrap; }
.kal-reiter button:hover { background: transparent; }
.kal-reiter button[aria-pressed="true"] { color: var(--kal-akzent, var(--marke)); font-weight: 600; }
.kal-reiter button[aria-pressed="true"]::before { content: ""; position: absolute; left: var(--kal-reiter-polster); right: var(--kal-reiter-polster); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--kal-akzent, var(--marke)); pointer-events: none; }
/* Fokusrahmen nur an nicht gewählten Reitern. Die Karten legen den Fokus beim Öffnen auf den gewählten Reiter; dort lag
   der runde Rahmen (6 px) über dem Strich und ergab mit ihm die Schale, die Johann am 05.10.2026 sah. Den gewählten
   Reiter zeigen Farbe und Strich. */
.kal-reiter button:focus-visible:not([aria-pressed="true"]) { outline: 2px solid var(--marke); outline-offset: -2px; border-radius: 6px; }
.kal-reiter button[aria-pressed="true"]:focus-visible { outline: none; }
/* Der gewählte Reiter ist kräftiger (600) — ohne Vorsorge wurde er dabei breiter und schob die Nachbarn (gemessen 05.10.2026,
   Johann: „komische Sprünge … Unregelmäßigkeiten“). Eine unsichtbare Abschrift in 600 (data-text) hält die Breite fest. */
.kal-reiter button[data-text]::after { content: attr(data-text); content: attr(data-text) / ""; display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; user-select: none; }
/* Wo eine Leiste Knöpfe zur Zeile macht (Laptop-Menü in .kal-steuer), steht die Abschrift unter dem Text, nicht daneben. */
.kal-reiter button[data-text] { flex-direction: column; justify-content: center; }
@media (max-width: 400px) { .kal-reiter button[data-kurz]::after { content: attr(data-kurz); content: attr(data-kurz) / ""; } }
/* Reiter „Termin | To-do“ im neuen Termin (05.10.2026): direkt unter dem Kopf, der Abstand kommt vom Fenster (gap). */
.kal-formular .kal-reiter.kal-freiter { margin-top: -4px; flex-shrink: 0; }

/* ---- Ruhe beim Reiterwechsel (05.10.2026, Johann: „Wenn ich zwischen Reitern hin- und herwechsle, dann sind da noch
   so komische Sprünge drin, so Flackern“). Gemessen sprang die Karte je Reiter in der Höhe (Einstellungen am Handy
   315→772 px); weil sie am Handy unten anliegt (am Laptop mittig), rutschten Kopf und Reiter um bis zu 457 px. Jetzt hat
   jede Karte mit Reitern eine feste Höhe: Kopf und Reiter stehen, nur der Inhalt darunter (.kal-reiter-inhalt) rollt.
   Die Terminkarte ist im Rahmen und in der Hülle gleich hoch (beide laden diese Datei). ---- */
.jt-tafel:is(.kal-terminkarte, .kal-karte):has(> .kal-reiter) { display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.jt-tafel:is(.kal-terminkarte, .kal-karte):has(> .kal-reiter) > * { flex: 0 0 auto; }
.jt-tafel:is(.kal-terminkarte, .kal-karte):has(> .kal-reiter) > .kal-reiter-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -20px; padding-right: 20px; }
.jt-tafel.kal-terminkarte:has(> .kal-reiter) { height: 440px; }
.kal-im-rahmen .jt-tafel.kal-karte { height: calc(100% - 32px); }
@media (max-width: 760px) { .kal-im-rahmen .jt-tafel.kal-karte { height: 92%; } }

/* ---- Terminkarte „D · Zeit-Spalte“ (Johanns Wahl, 14.10.2026, Entwurf termin-fenster-vorschlaege.html): links Tag und
   Uhrzeit groß in der Farbe des Kalenders, rechts der Rumpf mit Titel, Kalender-Pille, Zeilen und unten den Reitern.
   Feste Höhe wie bisher (Ruhe beim Reiterwechsel), aber die Beschreibung ist gekürzt — die Angaben rollen nicht mehr.
   Beide Seiten zeichnen dieselbe Form: app.js (Angaben) und termin-blatt.tsx (Kommentare, Aufgaben, Agenten). ---- */
.jt-tafel.kal-terminkarte.kal-tk-d { display: grid; grid-template-columns: 92px minmax(0, 1fr); width: min(480px, 100%); padding: 0; overflow: hidden; box-sizing: border-box; }
.jt-tafel.kal-terminkarte.kal-tk-d:has(.kal-reiter) { height: 420px; }
.kal-tk-zeit { background: var(--p, var(--grau)); color: var(--ps, #fff); display: flex; flex-direction: column; align-items: center; padding: 22px 6px; text-align: center; }
.kal-tk-zeit-tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; opacity: .9; white-space: nowrap; }
.kal-tk-zeit-nr { font-size: 32px; font-weight: 700; line-height: 1.05; margin-top: 2px; }
.kal-tk-zeit-monat { font-size: var(--s-klein); opacity: .9; }
.kal-tk-zeit-strich { width: 34px; height: 1px; background: currentColor; opacity: .35; margin: 14px 0; }
.kal-tk-zeit-uhr { font-size: var(--s-text); font-weight: 700; line-height: 1.3; }
.kal-tk-zeit-bis { font-size: var(--s-klein); opacity: .85; line-height: 1.35; }
.kal-tk-rumpf { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px 16px 0 20px; }
.kal-tk-rumpf > * { flex: 0 0 auto; }
.kal-tk-d .kal-tk-oben { margin: 0 -8px 0 0; }
.kal-tk-d .kal-tk-kopf { margin-top: -6px; }
.kal-tk-d h2 { font-size: var(--s-gross); font-weight: 700; padding-right: 4px; }
.kal-tk-chip { display: inline-block; margin-top: 8px; font-size: var(--s-klein); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pille); color: color-mix(in srgb, var(--p) 75%, #000); background: color-mix(in srgb, var(--p) 14%, var(--inhalt)); }
[data-theme="dark"] .kal-tk-chip { color: color-mix(in srgb, var(--p) 55%, #fff); background: color-mix(in srgb, var(--p) 28%, var(--inhalt)); }
.kal-tk-d .kal-reiter-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -16px; padding-right: 16px; padding-bottom: 14px; }
.kal-tk-d .kal-tk-zeilen { margin-top: 14px; gap: 12px; }
.kal-tk-d .kal-pillen { margin-top: 14px; }
.kal-tk-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: normal; line-height: 1.45; }
.kal-tk-text.ganz { display: block; -webkit-line-clamp: unset; }
.kal-tk-mehr { display: block; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--s-klein); font-weight: 700; color: var(--link); cursor: pointer; height: auto; min-height: 0; box-shadow: none; }
.kal-tk-mehr[hidden] { display: none; }
/* Reiter unten: Linie oben, der Strich des gewählten Reiters hängt oben an ihr. */
.kal-tk-d .kal-reiter { margin: auto -16px 0 -20px; padding: 0 10px; box-shadow: inset 0 1px 0 var(--rand); }
.kal-tk-d .kal-reiter button { --kal-reiter-polster: 9px; padding: 14px var(--kal-reiter-polster) 12px; }
/* Neben der Spalte heißt der vierte Reiter nur „Agenten“, sonst passen vier Reiter nicht in eine Zeile. */
.kal-tk-d .kal-reiter-lang { display: none; }
.kal-tk-d .kal-reiter button[data-kurz]::after { content: attr(data-kurz); content: attr(data-kurz) / ""; }
.kal-tk-d .kal-reiter button[aria-pressed="true"]::before { top: 0; bottom: auto; border-radius: 0 0 3px 3px; }
/* Am Handy schmalere Spalte und kleinere Reiter, damit auch vier Reiter ganz neben der Spalte stehen (393 px). */
@media (max-width: 760px) {
  .jt-tafel.kal-terminkarte.kal-tk-d { width: 100%; grid-template-columns: 68px minmax(0, 1fr); }
  .kal-tk-zeit { padding: 20px 4px; }
  .kal-tk-zeit-nr { font-size: 26px; }
  /* Am Handy der kurze Wochentag („Do“): „Donnerstag“ passt nicht in die schmale Spalte. */
  .kal-tk-zeit-tag[data-kurz] { font-size: 0; }
  .kal-tk-zeit-tag[data-kurz]::after { content: attr(data-kurz); font-size: 12px; }
  .kal-tk-rumpf { padding: 6px 12px 0 14px; }
  .kal-tk-d .kal-reiter { margin: auto -12px 0 -14px; padding: 0 4px; gap: 0; }
  .kal-tk-d .kal-reiter button { --kal-reiter-polster: 7px; font-size: var(--s-klein); }
  .kal-tk-d .kal-reiter-inhalt { margin-right: -12px; padding-right: 12px; }
}
@media (max-width: 400px) { .kal-tk-d .kal-reiter button { --kal-reiter-polster: 5px; } }

/* ---- Zeilen ---- */
.kal-tk-zeilen { display: grid; gap: 14px; margin-top: 18px; font-size: var(--s-text); }
.kal-tk-zeile { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.kal-tk-zeile svg { color: var(--grau); margin-top: 1px; }
.kal-tk-zeile > span { min-width: 0; overflow-wrap: anywhere; }
.kal-tk-zeile.leise > span { color: var(--grau); }
/* Hinweis statt gelbem Kasten: eine leise Zeile mit Warnsymbol */
.kal-tk-zeile.warn, .kal-tk-zeile.warn svg { color: var(--orange); }
.kal-tk-zeile.warn > span { font-size: var(--s-klein); line-height: 1.4; }
.kal-abschnitt { font-size: var(--s-klein); color: var(--grau); margin: 18px 0 8px; }
.kal-terminkarte a, .kal-karte a { color: var(--link); }

/* ---- Pillen ---- */
.kal-pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; align-items: center; }
.kal-pillen[hidden] { display: none; }
.kal-pillen.rechts { justify-content: flex-end; }
.kal-pille { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pille);
  border: 1px solid var(--rand); background: var(--inhalt); color: var(--text); font: inherit; font-size: var(--s-text); font-weight: 500; cursor: pointer; text-decoration: none; }
.kal-pille:hover { background: var(--zeile); }
.kal-pille.still { background: var(--feld); border-color: transparent; }
.kal-pille.voll { background: var(--kal-voll, var(--knopf)); color: var(--kal-voll-schrift, var(--knopfschrift)); border-color: transparent; }
.kal-pille.rot { background: var(--rot); color: #fff; border-color: transparent; }
.kal-pille[aria-pressed="true"] { background: var(--pille); border-color: transparent; font-weight: 700; }
.kal-pille:disabled { opacity: .5; cursor: default; }
.kal-pille svg { width: 18px; height: 18px; }

/* ---- Auswahl mit Kreis (Einstellungen) und Schalter ---- */
.kal-wahl { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; }
/* legend schwebt, sonst sitzt sie im Rahmen des fieldset und nimmt keinen Abstand an: mehr Luft darüber als darunter */
.kal-wahl legend { float: left; width: 100%; font-size: var(--s-klein); color: var(--grau); margin: 22px 0 2px; padding: 0; }
.kal-wahl label { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 10px; margin: 0 -10px; border-radius: var(--r-feld); cursor: pointer; font-size: var(--s-text); color: var(--text); }
.kal-wahl label:hover { background: var(--zeile); }
.kal-wahl input[type="radio"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 2px solid var(--grau); display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; }
.kal-wahl input[type="radio"]:checked { border-color: var(--kal-akzent, var(--marke)); }
.kal-wahl input[type="radio"]:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--kal-akzent, var(--marke)); }
.kal-wahl input[type="radio"]:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.kal-schalter { appearance: none; -webkit-appearance: none; margin: 0 0 0 auto; width: 40px; height: 24px; border-radius: 999px; background: var(--rand); position: relative; flex: 0 0 auto; cursor: pointer; transition: background .15s; }
.kal-schalter::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.kal-schalter:checked, .kal-schalter[aria-pressed="true"] { background: var(--kal-akzent, var(--marke)); }
.kal-schalter:checked::after, .kal-schalter[aria-pressed="true"]::after { left: 19px; }

/* In der App-Hülle setzt .jt-tafel jedes label klein, grau und als Block (globals.css) — Auswahl und Schalterzeilen
   in der Karte bleiben Zeilen in Textfarbe (05.10.2026, Einstellungskarte). */
.jt-tafel .kal-wahl label, .jt-tafel label.kal-tk-zeile { display: flex; align-items: center; margin: 0 -10px; font-size: var(--s-text); color: var(--text); }
.jt-tafel label.kal-tk-zeile { margin: 0; }
.kal-schalter-zeile { align-items: center !important; cursor: pointer; }
.kal-schalter-zeile > :last-child { margin-left: auto; }
.kal-schalter-zeile .kal-pille { min-height: 38px; }

/* ---- Inhalt der Karten aus der Hülle: Einstellungen, Anfragen · Aufgaben · Chat (05.10.2026) ---- */
.jt-tafel.kal-karte[data-karte="bereiche"] { width: min(560px, 100%); }
.kal-karte-inhalt { padding-bottom: 4px; }
/* Formulare und Listen der Bereiche (Ortsvorgaben, Anfragen, Aufgaben, Chat) in der Karte wie Entwurf C: keine
   Kästen in der Karte, Felder als ruhige Fläche wie .kal-eingabe, Speichern als Pille, Einträge als Zeilen mit Linie. */
.kal-karte-inhalt .jt-karte { background: transparent; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.kal-karte-inhalt form.jt-karte { display: grid; gap: 10px; }
.kal-karte-inhalt .jt-beschriftung { font-size: var(--s-klein); color: var(--grau); }
.kal-karte-inhalt :is(.jt-feld, input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea) { border: 0; background: var(--feld); border-radius: var(--r-feld); padding: 11px 14px; color: var(--text); }
.kal-karte-inhalt form button[type="submit"] { justify-self: start; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-pille); background: var(--kal-voll, var(--knopf)); color: var(--kal-voll-schrift, var(--knopfschrift)); font-weight: 500; }
.kal-karte-inhalt form:not(.jt-karte) button[type="submit"] { padding: 0; width: 44px; background: transparent; color: var(--kal-akzent, var(--marke)); }
.kal-karte-inhalt article.jt-karte, .kal-karte-inhalt .jt-liste > li { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.kal-karte-inhalt .jt-liste .jt-zeile { padding-left: 0; padding-right: 0; }
.kal-karte-bereich, .kal-karte-orte { margin-top: 18px; }
/* Der Reiter nennt den Bereich schon — Überschrift und Erklärsatz des Bereichs entfallen in der Karte. */
.kal-karte-bereich > section > div:first-child:has(> h2) { display: none; }
.kal-karte-orte > section > div:first-child h2 { font-size: var(--s-klein); color: var(--grau); font-weight: 400; margin: 0 0 4px; }
.kal-karte [data-teil="anmeldeknopf"] { min-height: 44px; display: flex; align-items: center; }

/* ---- Eingabe am Fuß einer Karte (Kommentar, Aufgabe) ---- */
.kal-eingabe { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.kal-eingabe input, .kal-eingabe textarea { flex: 1; min-width: 0; border: 0; background: var(--feld); border-radius: var(--r-feld); padding: 11px 14px; font: inherit; font-size: var(--s-text); color: var(--text); }
.kal-eingabe button { color: var(--marke); }

/* ---- Reiter „Für Agenten“ der Terminkarte (Stufe 5, 05.10.2026): Feld, Pille, darunter die Aufträge mit Stand ---- */
.kal-agenten .kal-eingabe { margin-top: 18px; }
.kal-agenten .kal-pillen { margin-top: 12px; }
.kal-agenten-meldung { margin: 10px 0 0; font-size: var(--s-klein); color: var(--grau); }
.kal-agenten-meldung.fehler { color: var(--rot); }
.kal-agenten-auftrag > span { display: grid; gap: 2px; }
.kal-agenten-satz { color: var(--text); }
.kal-agenten-stand { font-size: var(--s-klein); color: var(--grau); }
.kal-agenten-stand b { font-weight: 700; }
.kal-agenten-stand b.offen { color: var(--kal-akzent, var(--marke)); }
.kal-agenten-antwort { font-size: var(--s-klein); color: var(--text); background: var(--feld); border-radius: var(--r-feld); padding: 6px 10px; margin-top: 4px; }
/* Vier Reiter passen am Handy nur mit etwas weniger Luft nebeneinander; unter 400 px heißt der vierte nur
   „Agenten“ (Vorlesename bleibt „Für Agenten“), damit er bis 340 px ganz im Bild steht. */
@media (max-width: 430px) { .kal-reiter button { --kal-reiter-polster: 7px; } }
@media (max-width: 400px) { .kal-reiter-lang { display: none; } .kal-reiter { gap: 2px; padding: 0 10px; } .kal-reiter button { --kal-reiter-polster: 5px; } }

/* ---- Farbwelle beim Öffnen (kern/termin-effekt.js) ---- */
.kal-tk-welle { position: fixed; width: 20px; height: 20px; border-radius: 50%; z-index: -1; pointer-events: none; } /* über dem Schleier, unter der Karte */

@media (prefers-reduced-motion: reduce) { .kal-schalter, .kal-schalter::after { transition: none; } }
/* Abgleich-Karte „4 · Zwei große Kästen“ (Johanns Wahl, 13.10.2026: „alles in sauberen und ordentlichen Kästen“, eine Schrift,
   eine Größe, kein Link): links Termin und Tinas Satz in zwei Kästen, rechts vier gleich hohe Knöpfe auf demselben Raster. */
.jt-tafel.kal-karte.kal-kandidat-karte { width: min(580px, 100%); }
.kal-kk { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-auto-rows: 52px; gap: 8px; margin-top: 6px; font-size: var(--s-text); line-height: 1.35; }
.kal-kk-kasten { grid-column: 1; grid-row: span 2; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: var(--feld); color: var(--text); min-width: 0; overflow: auto; }
.kal-kk-kasten h2, .kal-karte .kal-kk-kasten h2 { margin: 0; font-size: inherit; font-weight: 600; line-height: inherit; }
.kal-kk-ampel { flex-direction: row; gap: 10px; --kk-ampel: var(--kal-ampel-gelb, #f9ab00); background: color-mix(in srgb, var(--kk-ampel) 14%, var(--inhalt)); }
.kal-kk-ampel[data-kandidat="gruen"] { --kk-ampel: var(--kal-ampel-gruen); }
.kal-kk-ampel[data-kandidat="rot"] { --kk-ampel: var(--kal-ampel-rot); }
.kal-kk-ampel[data-kandidat="unklar"] { --kk-ampel: var(--grau); }
.kal-kk-punkt { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--kk-ampel); }
.kal-kk-knoepfe { grid-column: 2; grid-row: 1 / span 4; display: grid; grid-auto-rows: 52px; gap: 8px; align-content: start; }
.kal-kk-knopf { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  --kk: var(--text); background: color-mix(in srgb, var(--kk) 10%, var(--inhalt)); color: var(--kk); }
.kal-kk-knopf[data-wahl="zusagen"], .kal-kk-knopf[data-nur-zusagen] { --kk: var(--kal-ampel-gruen); }
.kal-kk-knopf[data-wahl="absagen"] { --kk: var(--kal-ampel-rot); }
.kal-kk-knopf[data-sophie-reden], .kal-kk-knopf[data-bescheid] { --kk: #8430CE; }
.kal-kk-knopf[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--kk); }
.kal-kk-knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.kal-kk-breit { grid-column: 1 / -1; grid-row: auto; }
.kal-kk .kal-kandidat-folge { height: auto; gap: 8px; }
.kal-kk-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kal-kk textarea.kal-kk-kasten { height: 112px; resize: none; border: 0; font: inherit; outline: none; }
.kal-kk textarea.kal-kk-kasten:focus { box-shadow: inset 0 0 0 2px var(--kal-akzent, var(--text)); }
.kal-kk [hidden] { display: none !important; }
@media (max-width: 560px) {
  .kal-kk { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .kal-kk-kasten, .kal-kk-knoepfe { grid-column: 1; grid-row: auto; }
  .kal-kk-knoepfe { grid-template-columns: 1fr 1fr; }
}

/* Terminkarte, 14.10.2026 (Johanns Wahl A „Chat unter den Angaben“, Vorschau entwuerfe/terminkarte-chat-a.html):
   Drei-Punkte-Menü mit „In Google Kalender öffnen“, Titel/Kalender/Zeit-Spalte anklickbar, Chat zum Termin unter den Angaben. */
.kal-tk-klick { cursor: pointer; }
button.kal-tk-klick:not(.kal-tk-chip) { border: 0; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; }
h2 > .kal-tk-klick:hover, h2 > .kal-tk-klick:focus-visible { text-decoration: underline dotted; text-underline-offset: 4px; }
button.kal-tk-chip { border: 0; font-family: inherit; line-height: inherit; }
button.kal-tk-chip:hover { background: color-mix(in srgb, var(--p) 24%, var(--inhalt)); }
.kal-tk-zeit.kal-tk-klick:hover { filter: brightness(1.07); }
.kal-tk-zeit.kal-tk-klick:focus-visible { outline: 3px solid var(--marke); outline-offset: -3px; }
.kal-tk-mehrwahl { position: relative; display: inline-flex; }
.kal-tk-menue { position: absolute; top: 42px; right: 0; z-index: 5; min-width: 220px; background: var(--inhalt); border-radius: var(--r-kasten); box-shadow: 0 6px 20px rgb(0 0 0 / 18%); padding: 6px 0; }
.kal-tk-menue[hidden] { display: none; }
.kal-tk-menue a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--text); text-decoration: none; font-size: var(--s-text); white-space: nowrap; }
.kal-tk-menue a:hover, .kal-tk-menue a:focus-visible { background: var(--zeile); }
.kal-tk-menue svg { color: var(--grau); }
.kal-tk-chat { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.kal-tk-chat[hidden] { display: none; }
.kal-tk-chatkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kal-tk-chattitel { border: 0; background: transparent; padding: 0; font: inherit; font-size: var(--s-klein); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--grau); cursor: pointer; }
.kal-tk-chattitel:hover { color: var(--marke); }
.kal-tk-chatlink { border: 0; background: transparent; padding: 4px 0; font: inherit; font-size: var(--s-klein); font-weight: 600; color: var(--link); cursor: pointer; }
.kal-tk-chatlink[hidden] { display: none; }
.kal-tk-chatverlauf { display: flex; flex-direction: column; gap: 6px; max-height: 170px; overflow-y: auto; background: var(--feld); border-radius: var(--r-kasten); padding: 10px; overscroll-behavior: contain; }
.kal-tk-chatleer { margin: 6px auto; color: var(--grau); font-size: var(--s-klein); text-align: center; }
.kal-tk-blase { align-self: flex-start; max-width: 80%; background: var(--inhalt); border-radius: 4px 14px 14px 14px; padding: 6px 10px 4px; font-size: var(--s-text); line-height: 1.35; box-shadow: 0 1px 1px rgb(0 0 0 / 8%); cursor: pointer; overflow-wrap: anywhere; display: grid; }
.kal-tk-blase[data-mein] { align-self: flex-end; background: var(--blau-zart); border-radius: 14px 4px 14px 14px; }
.kal-tk-blase[data-neu] { box-shadow: 0 0 0 1.5px var(--marke); }
.kal-tk-blase small { justify-self: end; font-size: 11px; color: var(--grau); margin-top: 1px; }
.kal-tk-chatfehler { margin: 0; color: var(--rot); font-size: var(--s-klein); }
.kal-tk-chatfehler[hidden] { display: none; }
.kal-tk-chatform { display: flex; gap: 8px; align-items: center; }
.kal-tk-chatform input { flex: 1; min-width: 0; font: inherit; font-size: var(--s-text); color: var(--text); background: var(--inhalt); border: 1px solid var(--rand); border-radius: var(--r-pille); padding: 9px 14px; outline: none; }
.kal-tk-chatform input:focus { border-color: var(--marke); }
.kal-tk-chatsenden { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 0; background: var(--marke); color: var(--marke-schrift, #fff); display: grid; place-items: center; cursor: pointer; }
.kal-tk-chatsenden svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }