/* ==========================================================================
   Kalender
   --------------------------------------------------------------------------
   Monatsraster und Wochenansicht – beide seit dem 22.08.2026 in derselben
   flachen Fassung wie der Rest des Hauses, jeweils EINE Fläche mit
   Haarlinien darin.

   WIE DER KALENDER SEINE HOEHE VOM BILDSCHIRM BEKOMMT, steht NICHT hier,
   sondern am Ende von 04-arbeitsflaechen.css („DER KALENDER ALS
   ARBEITSFLAECHE"). Es muss dort stehen: Die Grundregel des Bausteins,
   `.af-main > .ml-page > *`, gibt jedem Kind der Seite seine eigene Höhe
   und ist gleich spezifisch wie `.af-main .cal-layout` - stünde die
   Ausnahme in dieser Datei, gewänne die Grundregel allein durch die
   Reihenfolge der Blätter, und der Zweispalter bekäme keine Höhe.

   TEIL 3 VON 9 von assets/css/style.css.

   ACHTUNG, REIHENFOLGE: CSS ist kaskadierend. Diese Dateien werden in
   includes/header.php in genau dieser Nummerierung eingebunden, und die
   Nummer im Dateinamen IST die Reihenfolge. Wer eine Datei dazwischen
   schiebt oder die Einbindung umsortiert, ändert stillschweigend, welche
   Regel bei gleicher Spezifität gewinnt.
   ========================================================================== */

/* ==========================================================================
   Monatsraster – EINE FLÄCHE, KEINE 42 (seit 22.08.2026)
   --------------------------------------------------------------------------
   Bis dahin stand hier „Entwurf C (Atelier)": jeder Tag eine schwebende
   Karte mit eigener Rundung, weichem Schatten und 6px Fuge dazwischen, dazu
   ein gestaffelter Auftritt beim Laden. Das war die LETZTE Fläche des Hauses
   in einer eigenen Optik. Die Wochenansicht hat diesen Sonderweg schon am
   11.08.2026 verlassen (siehe das Kapitel weiter unten), das Aufgaben-Board
   am 10.08.2026, Postfach/Nachrichten/Telefon am 22.08.2026 – der Monat war
   der Rest, und weil er die Einstiegsansicht des Kalenders ist, war es
   ausgerechnet der sichtbarste.

   JETZT DIESELBE FASSUNG WIE ÜBERALL: ein Rahmen aus 1px --brand-border,
   --r-card, --sh-1 – und INNEN trennen Haarlinien statt Fugen. Der Rahmen
   sitzt am Scroller (.cal-gridwrap), damit er stehen bleibt, während das
   Raster in ihm rollt; die Wochentagszeile klebt darin oben fest und trägt
   --card-header-bg wie jeder Kartenkopf.

   DIE HÖHE KOMMT VOM BILDSCHIRM, NICHT VON EINER ZAHL: Der Kalender ist
   seit dem 22.08.2026 eine Arbeitsfläche (04-arbeitsflaechen.css) – die
   Kopfzone steht, das Raster bekommt den Rest. Die Zeilen teilen ihn unter
   sich auf (1fr), fallen aber nie unter --zeile-min; darunter rollt das
   Raster in seinem Rahmen. Wie viele Termine in eine Zelle passen, MISST
   assets/js/kalender-monat.js an der gezeichneten Höhe.

   Wer hier wieder Schatten unter die Tage legt, holt die alte Sonderrolle
   zurück.
   ========================================================================== */
.cal-gridwrap {
    /* Der Rahmen des Hauses. `overflow: hidden auto` schneidet die Ecken der
       ersten und letzten Zeile sauber an der Rundung ab – ohne das schöbe
       sich die Zelle oben links über die runde Kante. */
    overflow: hidden auto;
    overscroll-behavior: contain;
    background: var(--cal-paper);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
}
.cal-grid {
    /* Die Untergrenze einer Wochenzeile – NICHT ihre Höhe: Auf einem hohen
       Schirm teilen sich die Zeilen die Fläche und werden von selbst höher.
       82px sind das Maß, in das Tagesziffer und ZWEI Termine passen; darunter
       zeigte eine Zelle einen Termin und ein „+3 weitere" und sagte damit
       nichts mehr. Auf einem flachen Fenster (1280x720) rollt das Raster
       dann in seinem Rahmen – lieber das als sechs Wochen, in denen nichts
       mehr steht. */
    --zeile-min: 82px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* Erste Zeile: die Wochentage. Danach je Woche eine Zeile, die sich den
       Platz teilt und dabei --zeile-min nicht unterschreitet. */
    grid-template-rows: auto repeat(var(--zeilen, 6), minmax(var(--zeile-min), 1fr));
    /* HÖHE, NICHT MINDESTHÖHE – die Falle, die eine halbe Stunde gekostet hat:
       Mit `min-height: 100%` bleibt die Höhe des Rasters unbestimmt, und in
       einem Raster unbestimmter Höhe verhält sich `1fr` wie `auto`: Alle
       Zeilen werden so hoch wie die INHALTSREICHSTE. Eine Woche mit vier
       Terminen an einem Tag machte damit alle sechs Zeilen 132 statt 102
       Pixel hoch, das Raster ragte unten heraus und die leeren Wochen standen
       als große leere Flächen da. Mit `height: 100%` ist die Höhe bestimmt,
       und `1fr` teilt sie auf. Auf dem Handy (die Seite rollt wieder, der
       Rahmen hat keine eigene Höhe) rechnet sich `100%` zu `auto` zurück –
       dort wächst das Raster wie vorher mit seinem Inhalt. */
    height: 100%;
}
/* Wochentagszeile: derselbe Kopf wie an jeder Karte und wie in der Woche
   (.cal-week-head). Sie bleibt beim Rollen stehen – ein Raster, dessen
   Spaltenbeschriftung nach oben wegläuft, ist ab der dritten Woche ein Feld
   aus Zahlen ohne Bedeutung. */
.cal-weekday {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 7px 9px;
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--brand-border);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}
.cal-weekday + .cal-weekday { border-left: 1px solid var(--cal-line); }
.cal-weekday.is-wochenende { color: var(--brand-faint); }

/* Die Tageszelle. Kante an Kante, getrennt durch Haarlinien – die Fuge, die
   hier bis zum 22.08.2026 lag, hat das Raster in 42 Einzelteile zerlegt. */
.cal-cell {
    position: relative;
    min-height: 0;
    /* Enger als die 7px von früher: Jeder Pixel Polster kostet in einer
       Zelle von rund 100px Höhe knapp einen halben Termin. */
    padding: 5px 6px 6px;
    border-left: 1px solid var(--cal-line);
    border-top: 1px solid var(--cal-line);
    background: var(--cal-paper);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    cursor: pointer;   /* die freie Fläche legt einen Termin an */
    transition: background-color var(--t-fast) var(--ease-out);
}
/* Die äußere Kante trägt schon der Rahmen des Scrollers. */
.cal-cell:nth-child(7n + 1) { border-left: 0; }
/* Unter der Wochentagszeile steht deren eigener Trennstrich. */
.cal-cell:nth-child(-n + 14):nth-child(n + 8) { border-top: 0; }
@media (hover: hover) {
    /* Der Wasch des Hauses statt Anheben. --blau-hell und NICHT der leisere
       --blau-hauch: Seit der Wochenendton selbst blaustichig ist
       (--cal-weekend = --brand-row, 22.08.2026), liegen Hauch und Wochenende
       keine 2 ΔE auseinander – das Überfahren einer Samstagszelle antwortete
       damit sichtbar gar nicht. Die Tönung ist dieselbe, die im Haus überall
       „hier steht der Finger" heißt; verwechseln kann man sie im Raster mit
       nichts, denn ausgewählt ist hier nie eine Zelle. */
    .cal-cell:hover { background: var(--blau-hell); }
}
.cal-cell.cal-weekend { background: var(--cal-weekend); }
/* Tage aus dem Vor- und Folgemonat: dieselbe Zelle, nur zurückgenommen. Sie
   waren vorher durchsichtig und damit die einzigen Löcher in einer Fläche
   aus Karten – auf einer durchgehenden Fläche wäre ein Loch ein Fehler. */
.cal-cell-muted { background: var(--brand-bg); }
@media (hover: hover) {
    .cal-cell-muted:hover { background: var(--blau-hell); }
}
.cal-cell-muted .cal-daynum { color: var(--brand-faint); }
.cal-cell-muted .cal-event { opacity: 0.72; }
.cal-daynum {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-5);
    font-weight: 700;
    color: var(--cal-quiet);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--r-pill);
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
a.cal-daynum:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
a.cal-daynum:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; }
/* HEUTE: der einzige Akzentton im Raster (Signatur) – die Zelle leise
   getönt, die Ziffer gefüllt. „Rot" stand hier bis zum 14.08.2026, und zwar
   zweimal: als Wort und als fester Wert `rgba(240, 60, 30, …)` im Schatten.
   Seit die Gesellschaft einstellbar ist, ist der Akzent nicht mehr
   zwangsläufig rot – die Ziffer lief über `--cal-today` mit, der Ring
   darunter blieb rot stehen. Deshalb kommt beides jetzt aus derselben
   Quelle. Der schwebende Ring von damals ist entfallen: Auf einer
   durchgehenden Fläche liegt er zur Hälfte in den Nachbartagen. */
.cal-cell-today {
    background: color-mix(in srgb, var(--brand-accent) 6%, var(--cal-paper));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand-accent) 30%, transparent);
}
@media (hover: hover) {
    .cal-cell-today:hover { background: color-mix(in srgb, var(--brand-accent) 10%, var(--cal-paper)); }
}
.cal-cell-today .cal-daynum {
    color: var(--auf-marke);
    background: var(--cal-today);
}
.cal-cell-today a.cal-daynum:hover { background: var(--brand-accent-dark); color: var(--auf-marke); }

/* Termin: vollflächig in der Kalenderfarbe, Schrift kontrastreich */
.cal-event {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border-radius: var(--r-sm);
    background: var(--ev, var(--blau-hell));
    color: var(--ev-ink, var(--cal-ink));
    font-size: var(--fs-3);
    line-height: 1.35;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    /* Die Haarlinie innen trennt zwei gleichfarbige Termine, die in derselben
       Zelle aufeinanderfolgen – dieselbe Fassung wie am Block der Woche. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    transition: filter var(--t-fast) var(--ease-out);
}
/* Kein Verschieben und kein Schatten beim Überfahren: Das Raster ist seit dem
   22.08.2026 flach, und ein Block, der zur Seite rutscht, wäre die einzige
   Bewegung darauf. Die Aufhellung genügt – wie in der Woche (.cal-ev:hover). */
@media (hover: hover) {
    .cal-event:hover {
        color: var(--ev-ink, var(--cal-ink));
        filter: brightness(0.95);
    }
}
a.cal-event:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; }
.cal-event-time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    opacity: 0.72;
    flex: 0 0 auto;
}
.cal-event-title { overflow: hidden; text-overflow: ellipsis; }
/* Das Zeichen am Termin (termine.emoji). Es steht VOR dem Titel und schrumpft
   nie (flex-shrink 0) – wäre es Teil des Titeltextes, fiele es bei einem langen
   Titel mit dem Rest weg, und gerade an einem vollen Tag ist es die einzige
   Auskunft, die ein zwei Zentimeter breiter Block noch geben kann.
   Die Emoji-Schriften des Systems ausdrücklich zuerst: Sonst zeichnet manche
   Textschrift ein leeres Kästchen. */
.cal-emoji {
    flex: 0 0 auto;
    font-size: 0.95em;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.cal-ev-title .cal-emoji,
.cal-agenda-title .cal-emoji,
.kg-termin-titel .cal-emoji { margin-right: 3px; }
/* DIE ZWEI MARKEN AM TERMIN – „gehört zu einer Serie" (Pfeilkreis) und
   „noch nicht freigegeben" (Uhr). Ein Zeichen, kein Wort: Im Raster ist jeder
   Buchstabe Platz, der dem Titel fehlt.

   SEIT DEM 22.08.2026 GEZEICHNET STATT GETIPPT. Vorher standen dort die
   Textzeichen ↻ und ? – die letzten Marken der Anwendung, die keine
   Strichsymbole waren, mitten in einem Block, in dem daneben ein Emoji steht
   und darüber eine ganze Leiste aus Lucide-Strichen. Sie trugen die
   Schriftgröße des Titels mit, sprangen je nach Zeichensatz und ließen sich
   in ihrer Stärke nicht anfassen.

   Die Größe hängt an `em`, nicht an einer Pixelzahl: Derselbe Baustein steht
   im Monatsraster (--fs-3), in der Wochenansicht (--fs-3, in schmalen
   Spalten --fs-2) und in der Tagesliste der Seitenleiste (--fs-5). Er
   schrumpft nie weg (flex-shrink 0), sonst verschwände als Erstes genau der
   Hinweis. */
.cal-marke {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    opacity: 0.62;
}
.cal-marke svg {
    width: 1.05em;
    height: 1.05em;
    /* Kräftiger als die 1,8 der großen Symbole: Auf einer Kantenlänge von
       elf Pixeln verschwindet ein feiner Strich im Untergrund. */
    stroke-width: 2.6;
}
/* Eine noch nicht freigegebene Terminanfrage. Gestrichelt statt in einer
   eigenen Farbe: Die Farbe gehört dem Kalender „Onlinetermine", und zwei
   Bedeutungen auf derselben Eigenschaft wären eine zu viel. `outline` statt
   `border`, weil ein Rand den Block um zwei Pixel verschieben würde – und ein
   Raster, in dem angefragte Termine anders sitzen als bestätigte, liest sich
   schlechter als eines ohne jede Markierung. */
.cal-event.ist-anfrage,
.cal-ev.ist-anfrage {
    outline: 1px dashed currentColor;
    outline-offset: -1px;
    opacity: 0.88;
}
.cal-anfrage-marke { opacity: 0.78; }
/* Die Glocke einer Erinnerung. Kräftiger als die übrigen Marken: Sie sagt
   nicht eine Nebensache über den Eintrag („wiederholt sich"), sondern was er
   IST – im Raster steht sie neben ganztägigen Terminen, die sonst genauso
   aussehen. Ist die Erinnerung abgehakt, wird aus der Glocke ein Haken und
   der Block tritt zurück: Er gehört weiter an seinen Tag, mahnt aber nicht
   mehr. */
.cal-erinnerung { opacity: 0.85; }
.cal-erinnerung.ist-erledigt { opacity: 0.5; }
/* Überlauf-Hinweis, wenn ein Tag mehr Termine hat als angezeigt */
.cal-more {
    display: block;
    margin-top: 1px;
    padding: 1px 7px;
    font-size: var(--fs-2);
    font-weight: 700;
    color: var(--brand-faint);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.cal-more:hover { color: var(--btn-leucht-tief); background: var(--blau-hell); }

/* ==========================================================================
   Wochenansicht als Zeitraster: links die Stundenskala, rechts sieben Tage.
   Ein Termin ist so hoch, wie er dauert – die Länge liest man ab, statt sie
   zu rechnen.

   Der gezeigte Ausschnitt steckt in drei Variablen am Raster:
     --von / --bis  erste und letzte gezeigte Stunde
     --hh           Höhe einer Stunde
   Position und Höhe jedes Termins leiten sich per calc() daraus ab. Deshalb
   genügt der Seitenleiste das Setzen dieser drei Werte – ohne Neuladen.

   EINE FLÄCHE, KEINE ACHT (seit 11.08.2026). Vorher schwebte jeder Tag als
   eigene Karte mit Rundung, Schatten und 6px Fuge – die Wochenansicht war
   damit die einzige Arbeitsfläche des Hauses, die nicht wie Postfach,
   Mailings, WhatsApp und Telefon aussah. Die tragen alle dasselbe: ein
   Rahmen aus 1px --brand-border, --r-card, --sh-1, und innen trennen
   Haarlinien statt Fugen (.ml-list-pane/.ml-read-pane in
   04-arbeitsflaechen.css).

   Genau das ist die Woche jetzt: Der Rahmen sitzt am Scroller
   (.cal-weekwrap), damit er beim seitlichen Schieben auf schmalen Schirmen
   stehen bleibt; die Spalten trennen 1px-Kanten; die Kopfzeile trägt
   --card-header-bg wie jeder Kartenkopf. Wer hier wieder Schatten unter die
   Tage legt, holt die alte Sonderrolle zurück.
   ========================================================================== */
.cal-weekwrap {
    overflow-x: auto;
    background: var(--cal-paper);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    box-shadow: var(--sh-1);
}
.cal-week {
    --von: 6;
    --bis: 20;
    --hh: 46px;
    /* Die Spalte links muss ihre eigene Beschriftung tragen: „GANZTÄGIG" in
       Versalien mit Sperrung ist breiter als das frühere „Ganztägig" und wurde
       bei 68px links abgeschnitten. */
    --gutter: 80px;
    /* Linienfarben des Rasters: volle Stunde kräftiger als die halbe */
    --cal-stunde: var(--cal-line);
    /* Die halbe Stunde ist dieselbe Linie wie die volle, nur halb so laut.
       Sie stand bis zum 22.08.2026 als rgba(27, 36, 49, .04) da – ein
       NEUTRALER Tuscheschleier, während jede andere Linie der Anwendung den
       Blaustich des Hauses trägt und mit der Gesellschaft mitfärbt. Aus
       derselben Quelle gemischt läuft sie jetzt von selbst mit. */
    --cal-halbe: color-mix(in srgb, var(--cal-line) 55%, transparent);
    display: grid;
    grid-template-columns: var(--gutter) repeat(7, minmax(0, 1fr));
    align-items: stretch;
}

/* Kopfzeile: Wochentag und Datum – derselbe Kopf wie an jeder Karte */
.cal-week-corner,
.cal-week-head {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--brand-border);
}
/* Die Kalenderwoche in der Ecke (seit 24.08.2026). RECHTSBÜNDIG, nicht
   zentriert: Unter ihr steht „GANZTÄGIG" (.cal-allday-label) und darunter die
   Stundenskala (.cal-axis-h) – beide ziehen ihre Schrift an die rechte Kante
   der Rinne, weil sie zu dem gehören, was rechts daneben steht. Eine mittig
   gesetzte Woche stünde als Einzige aus der Flucht.
   Dieselbe Fassung wie „GANZTÄGIG" darunter: dasselbe Mikrolabel, damit die
   Rinne von oben bis unten eine Sprache spricht. */
.cal-week-corner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 7px 7px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--brand-quiet);
    white-space: nowrap;
}
.cal-week-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 10px;
    border-left: 1px solid var(--cal-line);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-5);
    font-weight: 700;
    color: var(--cal-ink);
}
/* Mikrolabel wie .section-label – dieselbe Schrift wie über den Kennzahlen */
.cal-week-head .cal-wd {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-quiet);
}
.cal-week-head.is-wochenende .cal-dd { color: var(--cal-quiet); }
/* HEUTE: der eine Akzent in der Kopfzeile – dieselbe Tönung, die auch die
   Tageszelle des Monatsrasters trägt (.cal-cell-today).
   AUS DEM AKZENT GEMISCHT, NICHT AUS DER ROT-FAMILIE: Hier standen bis zum
   22.08.2026 --btn-red-bg-light und --btn-red-border-light, also festes Rosa.
   Solange die Gesellschaft rot ist, fällt das nicht auf – bei einem blauen
   oder gelben Haus stand die Spalte von heute rosa da, während die Ziffer
   darin, die Zelle im Monat und die Jetzt-Linie die Hausfarbe trugen. Vier
   Marken für denselben Tag in zwei Farben. */
.cal-week-head.is-heute {
    background: color-mix(in srgb, var(--cal-today) 9%, var(--card-header-bg));
    border-bottom-color: color-mix(in srgb, var(--cal-today) 30%, var(--brand-border));
}
.cal-week-head.is-heute,
.cal-week-head.is-heute .cal-wd,
.cal-week-head.is-heute .cal-dd { color: var(--cal-today); }

/* Ganztägige Termine stehen über dem Raster – sie haben keine Uhrzeit */
.cal-week-gutter { position: relative; }
.cal-allday-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 7px;
    border-bottom: 1px solid var(--brand-border);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-faint);
    white-space: nowrap;
}
.cal-allday {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 30px;
    padding: 5px 4px;
    border-left: 1px solid var(--cal-line);
    border-bottom: 1px solid var(--brand-border);
    background-color: var(--cal-paper);
}
/* --cal-weekend statt --brand-row: derselbe Ton, aber die Gesellschaftsfarbe
   färbt ihn mit (includes/gesellschaft.php) – und das Monatsraster nimmt
   dieselbe Marke. */
.cal-allday.is-wochenende { background-color: var(--cal-weekend); }

/* Stundenskala links */
.cal-axis {
    height: calc((var(--bis) - var(--von)) * var(--hh));
    overflow: hidden;
}
.cal-axis-h {
    position: absolute;
    right: 9px;
    top: calc((var(--h) - var(--von)) * var(--hh) + 3px);
    font-size: var(--fs-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--brand-faint);
    white-space: nowrap;
}

/* Tagesspalte: Fläche mit eingezeichnetem Stundenraster, links die Kante */
.cal-day {
    position: relative;
    height: calc((var(--bis) - var(--von)) * var(--hh));
    border-left: 1px solid var(--cal-line);
    background-color: var(--cal-paper);
    overflow: hidden;
    cursor: cell;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--cal-stunde) 0, var(--cal-stunde) 1px,
        transparent 1px, transparent calc(var(--hh) / 2),
        var(--cal-halbe) calc(var(--hh) / 2), var(--cal-halbe) calc(var(--hh) / 2 + 1px),
        transparent calc(var(--hh) / 2 + 1px), transparent var(--hh)
    );
}
.cal-day.is-wochenende { background-color: var(--cal-weekend); }
/* HEUTE trägt allein die Kopfzeile in Rot – kein Ring um die Spalte. */

/* Termin im Raster: oben = Beginn, Höhe = Dauer, Breite geteilt bei Überschneidung */
.cal-ev {
    position: absolute;
    top: calc((var(--s) - var(--von) * 60) * var(--hh) / 60);
    height: calc((var(--e) - var(--s)) * var(--hh) / 60);
    left: calc(var(--sp) * (100% - 6px) / var(--spalten) + 3px);
    width: calc((100% - 6px) / var(--spalten) - 2px);
    min-height: 14px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    border-radius: var(--r-sm);
    background: var(--ev, var(--blau-hell));
    color: var(--ev-ink, var(--cal-ink));
    /* Die Haarlinie trennt zwei gleichfarbige Termine, die aneinanderstoßen.
       Sie liegt innen, damit der Block seine gerechnete Höhe behält – ein
       Rand außen verschöbe jede Uhrzeit um zwei Pixel. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    font-size: var(--fs-3);
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
    /* Damit die Endzeit weichen kann, wenn die Spalte zu schmal wird */
    container-type: inline-size;
    transition: filter var(--t-fast) var(--ease-out);
}
@container (max-width: 92px) {
    .cal-ev-bis { display: none; }
}
/* Kein Anheben beim Überfahren: Die Fläche ringsum ist flach, ein Block, der
   sich hebt, wäre der einzige Schatten auf der Seite. Die Aufhellung genügt. */
@media (hover: hover) {
    .cal-ev:hover {
        color: var(--ev-ink, var(--cal-ink));
        filter: brightness(0.95);
        z-index: 3;
    }
}
a.cal-ev:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; z-index: 3; }
.cal-ev-time {
    font-size: var(--fs-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    white-space: nowrap;
}
.cal-ev-title { font-weight: 600; overflow: hidden; }
/* Unter anderthalb Stunden hat der Ort keine Zeile mehr. Er steht trotzdem im
   HTML (renderWeekEvent()), damit er beim Aufziehen der unteren Kante sofort
   da ist – siehe die Klassen in assets/js/kalender-ziehen.js. */
.cal-ev.is-eng .cal-ev-ort { display: none; }
.cal-ev-ort {
    font-size: var(--fs-2);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Kurze Termine: Zeit und Titel nebeneinander, sonst passt nichts hinein */
.cal-ev.is-kurz {
    flex-direction: row;
    align-items: baseline;
    gap: 5px;
    padding: 1px 6px;
}
.cal-ev.is-kurz .cal-ev-title { white-space: nowrap; text-overflow: ellipsis; }
.cal-ev.is-winzig { font-size: var(--fs-2); padding: 0 5px; }
.cal-ev.is-winzig .cal-ev-time { display: none; }

/* „Jetzt" – die Uhrzeit als Linie in der Spalte von heute */
.cal-now {
    position: absolute;
    left: 0;
    right: 0;
    top: calc((var(--jetzt, -600) - var(--von) * 60) * var(--hh) / 60);
    height: 0;
    border-top: 1.5px solid var(--cal-today);
    z-index: 4;
    pointer-events: none;
}
.cal-now::before {
    content: '';
    position: absolute;
    left: 0;
    top: -3.5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cal-today);
}
.cal-now::after {
    content: attr(data-uhr);
    position: absolute;
    right: 3px;
    top: -8px;
    padding: 1px 5px;
    border-radius: var(--r-pill);
    background: var(--cal-today);
    color: var(--auf-marke);
    font-size: var(--fs-1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Termine außerhalb des Ausschnitts melden sich am Rand ihres Tages */
.cal-ausserhalb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 1px 8px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-pill);
    background: var(--brand-surface);
    box-shadow: var(--sh-1);
    color: var(--brand-quiet);
    font-size: var(--fs-1);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-ausserhalb[hidden] { display: none; }
/* Wie die Sammelknöpfe im Postfach (.ml-pick-btn) */
.cal-ausserhalb:hover {
    border-color: var(--blau-rand);
    background: var(--blau-hell);
    color: var(--btn-leucht-tief);
}
.cal-ausserhalb.is-oben { top: 4px; }
.cal-ausserhalb.is-unten { bottom: 4px; }

/* ==========================================================================
   Termine mit der Maus verschieben und dehnen (assets/js/kalender-ziehen.js)

   Der Griff ist der Termin selbst: Was data-ziehbar trägt, zeigt die offene
   Hand. Importierte Termine und Onlinetermine tragen es nicht und behalten
   den Zeigefinger – die Oberfläche sagt damit vorher, was geht.

   Im Zeitraster kommen zwei schmale Kanten hinzu (.cal-ev-kante): An der
   oberen ändert sich der Beginn, an der unteren das Ende. Sie liegen im
   Block und zeigen den Doppelpfeil – wer die Mitte fasst, verschiebt weiter.
   ========================================================================== */
[data-ziehbar="1"] { cursor: grab; }
body.cal-zieht { cursor: grabbing; user-select: none; }
body.cal-zieht [data-ziehbar="1"] { cursor: grabbing; }

/* Die beiden Kanten des Blocks im Zeitraster: oben der Beginn, unten das Ende.

   WARUM DER STREIFEN MITWÄCHST: Feste 8 Pixel wären bei einer Viertelstunde
   (bei enger Zeilenhöhe keine 12 Pixel hoch) der ganze Termin – zum
   Verschieben bliebe nichts übrig. Deshalb ein Anteil der Höhe, nach unten
   und oben begrenzt: immer greifbar, nie der ganze Block. */
.cal-ev-kante {
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(3px, 22%, 8px);
    cursor: ns-resize;
    z-index: 2;
}
.cal-ev-kante.is-oben { top: 0; }
.cal-ev-kante.is-unten { bottom: 0; }

/* Beim Überfahren zeigt sich die Kante als Strich in der Schriftfarbe des
   Blocks – die ist auf jedem der acht Haustöne lesbar, ein eigener Farbwert
   hier wäre auf der Hälfte davon unsichtbar. */
@media (hover: hover) {
    .cal-ev-kante::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        opacity: 0;
        transition: opacity var(--t-fast) var(--ease-out);
    }
    .cal-ev-kante.is-oben::after { top: 1px; }
    .cal-ev-kante.is-unten::after { bottom: 1px; }
    .cal-ev-kante:hover::after { opacity: 0.55; }
}

/* Während an der Kante gezogen wird, gilt der Doppelpfeil auf der ganzen
   Seite: Der Zeiger verlässt den schmalen Streifen sofort. */
body.cal-dehnt { cursor: ns-resize; user-select: none; }
body.cal-dehnt .cal-ev,
body.cal-dehnt .cal-ev-kante,
body.cal-dehnt [data-ziehbar="1"] { cursor: ns-resize; }
body.cal-dehnt .cal-ev-kante::after { opacity: 0; }

/* Der Block in der Hand: hebt sich ab, folgt aber ohne Nachlauf */
.cal-ev.is-zieht,
.cal-ev.is-dehnt,
.cal-event.is-zieht {
    z-index: 6;
    opacity: 0.94;
    transform: none;
    transition: none;
    box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255, 255, 255, .45);
}

/* Fläche, in der er landen würde. ÜBERALL INNEN: Seit das Monatsraster eine
   durchgehende Fläche ist (22.08.2026), stoßen auch dort die Tage Kante an
   Kante – ein Ring außen läge zur Hälfte im Nachbartag und würde von ihm
   überdeckt. Die Tönung ist die des Hauses, dieselbe wie unter dem Zeiger,
   nur eine Stufe kräftiger. */
.cal-cell.is-ziel,
.cal-day.is-ziel,
.cal-allday.is-ziel {
    /* ZWEI PIXEL, NICHT ANDERTHALB: Seit der Wasch unter dem Zeiger
       dieselbe Tönung trägt (22.08.2026), ist der Ring der EINZIGE
       Unterschied zwischen „hier steht der Finger" und „hier landet der
       Termin". */
    box-shadow: inset 0 0 0 2px var(--btn-leucht-dark);
    background-color: var(--blau-hell);
}
/* Der Zug hat Vorrang vor dem Wasch unter dem Zeiger. */
@media (hover: hover) {
    .cal-cell.is-ziel:hover { background-color: var(--blau-hell); }
}

/* Seitenleiste: Zeitfenster wählen */
.cal-zeit-presets { display: flex; gap: 4px; margin-bottom: 8px; }
.cal-zeit-presets button {
    flex: 1 1 0;
    height: 28px;
    padding: 0 2px;
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-sm);
    background: var(--cal-paper);
    color: var(--cal-quiet);
    font-size: var(--fs-3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-zeit-presets button:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.cal-zeit-presets button.active {
    background: var(--btn-leucht-dark);
    border-color: var(--btn-leucht-dark);
    color: #fff;
}
.cal-zeit-range {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.cal-zeit-range label { margin: 0; font-size: var(--fs-3); color: var(--cal-quiet); }
.cal-zeit-hoehe { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-zeit-label { font-size: var(--fs-3); color: var(--cal-quiet); }
.cal-seg-sm { height: 28px; }
.cal-seg-sm button {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 0.55rem;
    border: 0;
    background: transparent;
    color: var(--cal-quiet);
    font-size: var(--fs-3);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-seg-sm button + button { border-left: 1px solid var(--cal-line); }
/* Dieselbe Fassung wie der große Schalter (.cal-seg in 02-bausteine.css). */
.cal-seg-sm button:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.cal-seg-sm button.active { background: var(--btn-leucht-dark); color: #fff; }

/* Abo-Zustand in der Kalenderliste */
.cal-abo-stand { margin-top: 5px; text-align: center; font-size: var(--fs-2); color: var(--brand-faint); }
.cal-abo-fehler { padding: 0 4px 7px 22px; font-size: var(--fs-2); color: var(--btn-red-text); }
.cal-iconbtn.is-fehler { color: var(--btn-red-text); }

/* „Nächste Termine" als Agenda mit Datums-Schiene (Signatur) */
.cal-agenda { list-style: none; margin: 0; padding: 0; }
.cal-agenda-item {
    display: flex;
    gap: 10px;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    transition: background-color var(--t-fast) var(--ease-out);
}
.cal-agenda-item:hover { background: var(--blau-hauch); }
.cal-agenda-item + .cal-agenda-item { border-top: 1px solid var(--cal-line); }
.cal-agenda-date {
    flex: 0 0 34px;
    text-align: center;
    padding: 3px 0;
    border-radius: var(--r-sm);
    background: var(--brand-bg);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1;
    transition: background-color var(--t-fast) var(--ease-out);
}
.cal-agenda-item:hover .cal-agenda-date { background: var(--blau-hell); }
.cal-agenda-day { font-variant-numeric: tabular-nums; font-size: var(--fs-8); font-weight: 700; color: var(--cal-ink); }
.cal-agenda-mon { font-size: var(--fs-1); letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-faint); margin-top: 3px; }
/* Die offene Terminanfrage im Termin selbst (termin_form.php): derselbe
   Störer wie beim Videoraum, aber mit zwei Knöpfen – hier wird entschieden,
   nicht nur verlinkt. */
.termin-anfrage {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--brand-accent);
    border-radius: var(--r-card);
    background: var(--brand-chip-bg);
}
.termin-anfrage-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-ctl);
    /* Die Fläche der Karte, nicht Weiß: Im Dunkelmodus (22.08.2026) wäre ein
       festes Weiß hier ein leuchtendes Quadrat auf dunklem Grund. */
    background: var(--brand-surface);
    color: var(--brand-accent);
}
.termin-anfrage-icon svg { width: 17px; height: 17px; stroke-width: 1.9; }
.termin-anfrage-text {
    flex: 1 1 auto;
    font-size: var(--fs-5);
    line-height: 1.5;
    color: var(--brand-quiet);
}
.termin-anfrage-text strong { display: block; font-size: var(--fs-7); color: var(--brand-text); }
.termin-anfrage-knoepfe { flex: 0 0 auto; display: flex; gap: 6px; }
/* Wartet der Vorschlag beim Kunden, ist hier nichts zu tun – der Störer wird
   zum Hinweis. */
.termin-anfrage.ist-vorschlag { border-left-color: var(--brand-faint); }
.termin-anfrage.ist-vorschlag .termin-anfrage-icon { color: var(--brand-quiet); }
@media (max-width: 700px) {
    .termin-anfrage { flex-wrap: wrap; }
    .termin-anfrage-knoepfe { width: 100%; }
    .termin-anfrage-knoepfe .btn { flex: 1 1 0; }
}

/* „Andere Zeit vorschlagen" unter dem Störer (termin_form.php) – zugeklappt,
   weil der schnellste Griff „Freigeben" bleiben soll. */
.termin-vorschlag { margin-top: 8px; }
.termin-vorschlag > summary {
    cursor: pointer;
    font-size: var(--fs-5);
    font-weight: 600;
    color: var(--brand-quiet);
    list-style: none;
}
.termin-vorschlag > summary::-webkit-details-marker { display: none; }
.termin-vorschlag > summary::before { content: '+ '; font-weight: 700; }
.termin-vorschlag[open] > summary::before { content: '– '; }
.termin-vorschlag > summary:hover { color: var(--brand-accent); }
.termin-vorschlag-form {
    display: grid;
    gap: 8px;
    max-width: 520px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-bg);
}
.termin-vorschlag-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.termin-vorschlag-felder label { display: grid; gap: 3px; }
.termin-vorschlag-felder span {
    font-size: var(--fs-3);
    font-weight: 600;
    color: var(--brand-quiet);
}
.termin-vorschlag-form .btn { justify-self: start; }
.termin-vorschlag-note {
    margin: 0;
    font-size: var(--fs-3);
    line-height: 1.45;
    color: var(--brand-quiet);
}

/* Der Störer im Termin selbst (termin_form.php) – gleiche Ausnahme, mehr Platz */
.termin-video {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--brand-accent);
    border-radius: var(--r-card);
    background: var(--brand-chip-bg);
}
.termin-video-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-ctl);
    /* Die Fläche der Karte, nicht Weiß: Im Dunkelmodus (22.08.2026) wäre ein
       festes Weiß hier ein leuchtendes Quadrat auf dunklem Grund. */
    background: var(--brand-surface);
    color: var(--brand-accent);
}
.termin-video-icon svg { width: 17px; height: 17px; stroke-width: 1.9; }
.termin-video-text {
    flex: 1 1 auto;
    font-size: var(--fs-5);
    line-height: 1.5;
    color: var(--brand-quiet);
}
.termin-video-text strong {
    display: block;
    font-size: var(--fs-7);
    color: var(--brand-text);
}
@media (max-width: 600px) {
    .termin-video { flex-wrap: wrap; }
    .termin-video .btn { width: 100%; }
}

/* Videotermine tragen rechts einen Knopf in den Raum. Rot, weil hier wirklich
   etwas passiert – die Ausnahme, die Look B dem Akzent zugesteht. */
.cal-agenda-video {
    flex: 0 0 auto;
    align-self: center;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--r-sm);
    background: var(--brand-chip-bg);
    color: var(--brand-accent);
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-agenda-video svg { width: 15px; height: 15px; stroke-width: 1.9; }
.cal-agenda-video:hover { background: var(--brand-accent); color: var(--auf-marke); }

.cal-agenda-item.is-today .cal-agenda-date,
.cal-agenda-item.is-today:hover .cal-agenda-date { background: var(--brand-chip-bg); }
.cal-agenda-item.is-today .cal-agenda-day { color: var(--cal-today); }
.cal-agenda-body { min-width: 0; }
.cal-agenda-title { font-size: var(--fs-5); font-weight: 600; color: var(--cal-ink); text-decoration: none; }
.cal-agenda-title:hover { color: var(--btn-leucht-tief); }
.cal-agenda-meta { font-size: var(--fs-4); color: var(--cal-quiet); font-variant-numeric: tabular-nums; }
/* Tagesliste: links steht die Uhrzeit statt des Datums – dafür etwas breiter */
.cal-agenda-heute .cal-agenda-date { flex: 0 0 50px; }
.cal-agenda-uhr { font-size: var(--fs-6); letter-spacing: -0.01em; }
.cal-agenda-heute .cal-agenda-mon { text-transform: none; letter-spacing: 0; font-size: var(--fs-1); }
/* Datum neben der Panel-Überschrift („HEUTE · 29.07.2026") */
.cal-panel-datum {
    font-size: var(--fs-2);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}
/* Herkunft einer Zeile: Punkt in der Kalenderfarbe plus Name der Quelle */
.cal-agenda-quelle {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--brand-faint);
}
.cal-agenda-quelle .cal-legend { width: 8px; height: 8px; }
/* Importierte Termine sind schreibgeschützt – der Titel ist deshalb kein Link */
.cal-agenda-item.is-import .cal-agenda-title { font-weight: 500; color: var(--cal-ink); }

/* Legende / Steuerung */
.cal-legend {
    display: inline-block;
    width: 10px; height: 10px;
    /* Ein Viertel der Kantenlänge – dieselbe Rundung im Verhältnis, die
       --r-sm einem Chip gibt. `var(--r-sm)` selbst (6px auf 10px) machte
       daraus fast einen Kreis, und ein Kreis heißt im Haus „Zustand"
       (.badge.ist-stand). Hier steht die Farbe eines Terminblocks – also ein
       Block im Kleinen. */
    border-radius: 2.5px;
    vertical-align: middle;
    flex: 0 0 auto;
}
/* Kalenderquellen: Zeile mit Punkt, Anzahl und Icon-Schaltern */
.cal-src {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 4px;
    border-radius: var(--r-sm);
    transition: background-color var(--t-fast) var(--ease-out);
}
.cal-src:hover { background: var(--blau-hauch); }
.cal-src-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-5);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-src.is-off .cal-src-name { color: var(--brand-faint); }
.cal-src.is-off .cal-legend { opacity: 0.3; }
.cal-src-count {
    font-size: var(--fs-3);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}
.cal-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--h-ctl-sm);
    height: var(--h-ctl-sm);
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--brand-faint);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-iconbtn:hover { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.cal-iconbtn.danger:hover { background: var(--btn-red-bg-light); color: var(--btn-red-text); }
/* --- Offene Terminanfragen (Seitenleiste) --------------------------------
   Eine Karte je Anfrage: wann, wer, worum es geht, und darunter die beiden
   Knöpfe. Sie steht bewusst kräftiger da als die übrigen Panels – hier wartet
   jemand draußen auf eine Antwort. */
.cal-panel-anfragen .cal-panel-head { color: var(--btn-blue-dark); }
.cal-anfragen-zahl {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: var(--r-pill);
    background: var(--brand-accent);
    color: var(--auf-marke);
    font-size: var(--fs-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cal-anfrage {
    padding: 9px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--brand-accent);
    border-radius: var(--r-sm);
    background: var(--brand-surface);
}
.cal-anfrage:last-child { margin-bottom: 0; }
/* Eine Anfrage, deren Zeit vorbei ist: Sie bleibt stehen (entschieden hat
   niemand), tritt aber zurück. */
.cal-anfrage.ist-vorbei { border-left-color: var(--brand-faint); opacity: 0.75; }
.cal-anfrage-kopf { display: flex; align-items: baseline; gap: 6px; }
.cal-anfrage-wann {
    font-size: var(--fs-5);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cal-ink);
}
.cal-anfrage-alt {
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-faint);
}
.cal-anfrage-wer { font-size: var(--fs-5); font-weight: 600; }
.cal-anfrage-meta { font-size: var(--fs-3); color: var(--brand-quiet); overflow-wrap: anywhere; }
.cal-anfrage-meta a { color: inherit; }
.cal-anfrage-anliegen {
    margin-top: 4px;
    font-size: var(--fs-3);
    line-height: 1.45;
    color: var(--brand-quiet);
}
.cal-anfrage-knoepfe { display: grid; gap: 5px; margin-top: 8px; }
/* Ein verschickter Vorschlag: Er wartet auf den Kunden, nicht auf mich, und
   tritt deshalb einen Schritt zurück – dieselbe Karte, nur ohne den Ruf nach
   einer Entscheidung. */
.cal-anfrage.ist-vorschlag { border-left-color: var(--brand-faint); background: var(--brand-bg); }
.cal-anfrage-alt-zeit {
    font-size: var(--fs-3);
    font-variant-numeric: tabular-nums;
    color: var(--brand-faint);
}
/* Der Gegenvorschlag, zugeklappt: zwei Felder für Datum und Uhrzeit, ein Satz
   dazu, ein Knopf. */
.cal-anfrage-vorschlag { margin-top: 6px; }
.cal-anfrage-vorschlag > summary {
    cursor: pointer;
    font-size: var(--fs-3);
    font-weight: 600;
    color: var(--brand-quiet);
    list-style: none;
}
.cal-anfrage-vorschlag > summary::-webkit-details-marker { display: none; }
.cal-anfrage-vorschlag > summary::before { content: '+ '; font-weight: 700; }
.cal-anfrage-vorschlag[open] > summary::before { content: '– '; }
.cal-anfrage-vorschlag > summary:hover { color: var(--brand-accent); }
.cal-anfrage-vorschlag form { display: grid; gap: 5px; margin-top: 6px; }
.cal-anfrage-zeit { display: grid; grid-template-columns: 1fr auto; gap: 5px; }

/* Der Schalter „Termine erst nach Freigabe" im Panel „Terminierung" */
.cal-freigabe-schalter {
    display: flex;
    /* Eine Zeile neben einem Knopf – seit der Erklärsatz weg ist, sitzt beides
       auf derselben Mittellinie. */
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-sm);
    background: var(--brand-bg);
}
.cal-freigabe-schalter .btn { flex: 0 0 auto; }
.cal-freigabe-text { flex: 1 1 auto; font-size: var(--fs-3); line-height: 1.45; color: var(--brand-quiet); }
.cal-freigabe-text strong { display: block; font-size: var(--fs-5); color: var(--cal-ink); }

.cal-swatches { display: flex; gap: 4px; padding: 2px 4px 8px 22px; flex-wrap: wrap; }
.cal-swatch {
    width: 16px; height: 16px;
    border-radius: var(--r-sm);
    /* Der Rand stand auf rgba(0, 0, 0, .1) – reines Schwarz, das im
       Dunkelmodus einen schwarzen Saum um jedes helle Feld zeichnete und
       nirgends sonst im Haus vorkommt. */
    border: 1px solid var(--brand-border);
    cursor: pointer; padding: 0;
    transition: transform var(--t-fast) var(--ease-out);
}
.cal-swatch:hover { transform: scale(1.15); }
/* Das gewählte Feld. Der Ring stand auf --cal-ink, also auf der Schriftfarbe:
   ein schwarzer Reif um ein Pastellfeld, der in einer Reihe aus acht Farben
   wie ein Fehler aussah. Jetzt dieselbe Auswahlfarbe wie überall im Haus. */
.cal-swatch-active { outline: 2px solid var(--btn-leucht-dark); outline-offset: 1px; }

/* Eigene Kalender: dieselbe Zeile wie eine importierte Quelle, nur ist der
   Name hier ein Feld – umbenannt wird an Ort und Stelle. */
/* Vier Schalter in einer schmalen Spalte: Der Name bekommt jeden Pixel, den
   die Zeile übrig hat, deshalb hier weniger Abstand als bei den importierten. */
.cal-eigen { gap: 4px; }
.cal-eigen .cal-iconbtn { width: 24px; }
.cal-eigen-name { flex: 1 1 auto; min-width: 0; margin: 0; }
.cal-eigen-name input {
    width: 100%;
    height: 26px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--fs-5);
    font-weight: 500;
}
.cal-eigen-name input:hover { border-color: var(--brand-line-strong); }
.cal-eigen-name input:focus {
    outline: none;
    border-color: var(--btn-leucht-dark);
    background: var(--cal-paper);
}
.cal-src.is-off .cal-eigen-name input { color: var(--brand-faint); }
/* Die Vorgabe ist kein Knopf, sondern ein Zustand */
.cal-iconbtn.is-vorgabe { color: var(--btn-blue-dark); cursor: default; }
.cal-iconbtn.is-vorgabe:hover { background: transparent; }
/* „Bleibt hier": das Schild trägt Farbe, damit man es in der Reihe sieht */
.cal-iconbtn.is-geheim { color: var(--btn-red-text); }
/* „Onlinetermine": steht bei den eigenen Kalendern, ist aber keiner aus
   `kalender` – von außen gebucht, nicht umbenennbar, nicht löschbar. Die dünne
   Linie darüber trennt ihn von denen, die man selbst anlegt. */
.cal-eigen-fest { margin-top: 6px; border-top: 1px solid var(--cal-line); }

/* Neuen Kalender anlegen */
.cal-neu { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cal-line); }
.cal-swatches-wahl { padding-left: 0; }
.cal-swatches-wahl .cal-swatch {
    position: relative;
    display: inline-flex;
}
.cal-swatches-wahl .cal-swatch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}
/* Die Auswahl steht sofort, ohne Server und ohne JavaScript */
.cal-swatches-wahl .cal-swatch:has(input:checked) {
    outline: 2px solid var(--cal-ink);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Kalender teilen (Panel „Kalender teilen", kalender_geteilt.php)

   Eine Freigabe ist mehr als eine Zeile in einer Liste: Sie hat einen
   Empfänger, einen langen Link und eine Rücknahme. Deshalb ein kleiner
   Kasten je Freigabe statt der 36px-Zeile der Kalenderliste – der Link muss
   ganz sichtbar sein, sonst kopiert man ihn halb.
   -------------------------------------------------------------------------- */
.cal-freigabe-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}
/* Blaugrau statt Systemblau – Look B trägt die Oberfläche in einer Farbe */
.cal-freigabe-check input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--btn-leucht-dark); }
.cal-freigabe-check strong { display: block; font-size: var(--fs-5); font-weight: 600; }
.cal-freigabe-check small { display: block; font-size: var(--fs-3); color: var(--brand-quiet); line-height: 1.35; }

.cal-freigabe {
    padding: 10px 0;
    border-top: 1px solid var(--cal-line);
}

.cal-freigabe-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-freigabe-wer {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-5);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-freigabe-meta {
    margin: 2px 0 6px 20px;   /* auf einer Linie mit dem Namen, hinter dem Farbpunkt */
    font-size: var(--fs-3);
    color: var(--brand-faint);
    line-height: 1.4;
}

/* Ein Link, der zurzeit nichts zeigt – rot, weil es ein Zustand ist, den man
   im Vorbeischauen sehen muss, und nicht erst beim Ausprobieren. */
.cal-freigabe-ruht { color: var(--btn-red-text); font-weight: 600; }

.cal-freigabe-url {
    display: flex;
    gap: 6px;
}
.cal-freigabe-url input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cal-freigabe-url .btn { flex: 0 0 auto; }

@media (max-width: 991.98px) {
    /* Seitenleiste wandert unter das Raster; Umschalter blendet sie weiterhin aus */
    .cal-layout,
    .cal-page.side-collapsed .cal-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-7);
    }
    .cal-page.side-collapsed .cal-layout { gap: 0; }
    .cal-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 575.98px) {
    /* Monatsraster: Punkte statt Pillen – im Zellenformat ist Text unlesbar.
       Tagesziffer führt zur Wochenansicht des Tages. Die Zeilenhöhe steht
       jetzt am Raster (--zeile-min) statt an der Zelle: Auf dem Handy rollt
       die Seite wieder, das Raster wächst also mit seinen Zeilen mit. */
    .cal-grid { --zeile-min: 62px; }
    .cal-cell {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 3px;
        padding: 0.28rem 0.3rem;
    }
    /* Ziffer bleibt kompakt, die Punkte rutschen in die nächste Zeile */
    .cal-daynum { flex: 0 0 auto; margin-right: 100%; }
    .cal-cell .cal-event {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 2px;
        background: var(--ev, var(--btn-blue));
        box-shadow: none;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        flex: 0 0 auto;
    }
    .cal-cell .cal-event-time { display: none; }
    .cal-more { flex: 0 0 100%; font-size: var(--fs-1); padding: 0 0.1rem; white-space: nowrap; }
    .cal-more-word { display: none; }
    .cal-weekday { padding: 5px 6px; }
}
@media (max-width: 767.98px) {
    /* Sieben Tagesspalten samt Skala brauchen Platz – lieber seitlich
       schieben als alles unlesbar quetschen. */
    .cal-week { min-width: 680px; --gutter: 66px; }
    .cal-allday-label { font-size: var(--fs-1); letter-spacing: 0.03em; padding: 6px 5px; }
    .cal-week-corner { font-size: var(--fs-1); letter-spacing: 0.03em; padding: 6px 5px; }
    .cal-axis-h { font-size: var(--fs-1); right: 6px; }
    .cal-ev { font-size: var(--fs-2); padding: 2px 4px; }
    .cal-ev-time { font-size: var(--fs-1); }
}
/* ==========================================================================
   Das Fenster „Neuer Termin" (seit 24.08.2026)
   --------------------------------------------------------------------------
   Der Baustein selbst (.bd-overlay/.bd-dialog) steht in 04-arbeitsflaechen.css
   und trägt hier nur ein paar Maße mehr.

   WARUM `.cal-neu .bd-dialog` UND NICHT `.bd-dialog-neu`: Diese Datei wird VOR
   04-arbeitsflaechen.css eingebunden (die Nummer im Dateinamen ist die
   Reihenfolge). Eine Klasse gegen eine Klasse wäre gleich spezifisch, und bei
   Gleichstand gewinnt das spätere Blatt – die Breite bliebe bei den 860px des
   Kartendialogs. Zwei Klassen schlagen eine, unabhängig von der Reihenfolge.
   ========================================================================== */
.cal-neu .bd-dialog {
    /* Schmaler als der Kartendialog des Boards: Hier stehen vier Felder, keine
       ganze Akte. */
    max-width: 560px;
}
/* Der Tag im Klartext unter der Überschrift. Im Monatsraster ist die
   angeklickte Zelle die einzige Auskunft darüber, welcher Tag gemeint war –
   und die liegt hinter dem Fenster. */
.cal-neu-tag {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-4);
    font-weight: 500;
    color: var(--brand-quiet);
}
.cal-neu-fuss {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
/* Die Knöpfe des Bearbeitens („Erledigt", „Löschen") stehen am anderen Ende
   der Zeile, weg von „Speichern": Was etwas wegnimmt, soll nicht neben dem
   liegen, was man am häufigsten drückt.

   DIE GRUPPE TRÄGT DAS `margin-left: auto`, NICHT DER LINK DAHINTER. Sie ist
   beim Anlegen zwar da, aber leer (die Knöpfe sind `hidden`) und damit null
   Pixel breit – ihr Auto-Abstand schiebt dann den Link ans Ende, genau wie
   vorher. Zwei Auto-Abstände in einer Zeile teilten sich den Rest und
   schöben die Gruppe in die Mitte. */
.cal-neu-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
/* „Alle Einstellungen" ist der Weg zum vollen Formular, kein gleichrangiger
   Knopf – deshalb ein Link, und deshalb steht er am anderen Ende der Zeile.
   `nowrap`, weil er sonst in einer vollen Fußzeile mitten im Wort umbricht –
   umbrechen soll die ZEILE, nicht der Link. */
.cal-neu-mehr {
    white-space: nowrap;
    font-size: var(--fs-4);
    font-weight: 600;
    color: var(--btn-blue);
    text-decoration: none;
}
.cal-neu-mehr:hover { color: var(--btn-blue-dark); text-decoration: underline; }

@media (max-width: 575.98px) {
    /* Auf dem Handy trägt die Fußzeile drei Dinge nebeneinander nicht. Der
       Link rutscht unter die Knöpfe statt sie zu quetschen. */
    .cal-neu-mehr { margin-left: 0; flex: 0 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
    /* Hier bleibt seit dem 22.08.2026 nur noch der Farbwechsel abzuschalten:
       Der gestaffelte Auftritt der Monatskarten, ihr Anheben unter dem Zeiger
       und der wandernde Terminblock sind mit der Umstellung auf die flache
       Fläche entfallen – es bewegt sich nichts mehr, was man anhalten müsste. */
    .cal-cell, .cal-event, .cal-swatch, .cal-nav a, .cal-seg a, .cal-daynum,
    .cal-layout, .cal-side, .cal-side-toggle, .cal-side-toggle svg { transition: none; }
}