/* 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%; } }

/* ---- 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.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; } }