/* ═══════════════════════════════════════════════════════════════════════════
   Google-Kalender (EXT:me_google_calendar / FullCalendar 3) im Gewand des
   Designsystems.

   Warum eine eigene Datei und nicht liesborn.css: Die CSS der Extension wird
   NACH liesborn.css geladen — nachprüfbar an der Reihenfolge der <link>-Tags
   im Quelltext der Kalenderseite. Gegen ihre Regeln käme dort nur ein
   Spezifitätswettlauf an. Diese Datei hängt im Altbestand-Set hinter dem
   @import der Extension und gewinnt damit durch die Ladereihenfolge.

   Angefasst wird ausschließlich die Bedienleiste — Schaltflächen, Monatstitel
   und Pfeile. Das Kalenderblatt selbst und die Farben der Termine bleiben, wie
   die Extension sie liefert; an ihnen hängt die Legende auf der Seite.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bedienleiste ───────────────────────────────────────────────────────── */

.fc .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
/* Die drei Abschnitte der Leiste (links, Mitte, rechts) werden selbst zu
   Flex-Zeilen. Damit steht zwischen Pfeilgruppe und „Heute“ wieder Luft —
   FullCalendar setzte dort einen Rand, den die Zeile darunter entfernt, weil
   er sonst auch innerhalb der Knopfgruppe säße. Über gap statt margin, dann
   gilt derselbe Abstand für jedes künftige Nachbarpaar. */
.fc .fc-toolbar > * {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.fc .fc-toolbar > * > * { margin: 0; float: none; }
/* Der Clearfix der Leiste ist im Flex-Layout überflüssig und nähme als
   leeres Element eine Spalte der Verteilung ein. */
.fc .fc-toolbar .fc-clear { display: none; }

/* Der Monatstitel ist die Überschrift des Blattes und bekommt die
   Serifenschrift des Hauses. */
.fc .fc-toolbar h2 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ── Schaltflächen ──────────────────────────────────────────────────────── */

/* Grundzustand = die helle Fassung des Designsystems (.btn--ghost):
   durchsichtig, dunkler Rahmen, dunkle Schrift. FullCalendar bringt für
   diese Knöpfe Farbverläufe, abgerundete Ecken und einen Innenschatten aus
   der Bootstrap-2-Zeit mit — das alles wird hier zurückgesetzt. */
.fc button,
.fc .fc-state-default {
    height: auto;
    padding: 11px 18px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: none;
    background: transparent;
    background-image: none;
    border: 2.5px solid var(--ink);
    color: var(--ink);
    border-radius: 0;
    box-shadow: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Die Gruppe rückt zusammen: gemeinsame Kante statt doppelter Rahmen,
   und die Ecken bleiben eckig, auch die des ersten und letzten Knopfes. */
.fc .fc-button-group { display: inline-flex; }
.fc .fc-button-group > * { margin: 0; float: none; }
.fc .fc-button-group > * + * { margin-left: -2.5px; }
.fc .fc-state-default.fc-corner-left,
.fc .fc-state-default.fc-corner-right { border-radius: 0; }

.fc button:hover,
.fc .fc-state-hover,
.fc .fc-state-down {
    background: var(--ink);
    background-image: none;
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: none;
}

/* Die aktive Ansicht ist gefüllt — dieselbe Umkehrung wie bei .btn. Sie steht
   nach der Hover-Regel, damit der aktive Knopf beim Überfahren nicht wieder
   hell wird. */
.fc .fc-state-active,
.fc .fc-state-active:hover {
    background: var(--ink);
    background-image: none;
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: none;
}

.fc .fc-state-disabled {
    opacity: .35;
    box-shadow: none;
}

/* „Heute“ ist der Sonderfall unter den Schaltflächen.

   FullCalendar gibt ihm keine aktive Klasse. Stattdessen SPERRT es ihn,
   sobald das Blatt den heutigen Tag ohnehin schon zeigt (Toolbar.disableButton
   in fullcalendar.js, Zeile 14636) — das ist hier also die Bedeutung von
   „aktiv“: Der Knopf ist am Ziel, es gibt nichts mehr zu springen.

   Ausgeblasst wie eine wirklich gesperrte Schaltfläche sieht das aus wie ein
   Fehler. Deshalb steht er in diesem Zustand gefüllt da, genau wie die aktive
   Ansicht daneben. Nur der Zeiger verrät, dass es nichts zu klicken gibt. */
.fc .fc-today-button.fc-state-disabled,
.fc .fc-today-button.fc-state-disabled:hover {
    opacity: 1;
    background: var(--ink);
    background-image: none;
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: none;
    cursor: default;
}

/* Der Fokusrahmen der Website statt des Browser-Standards — nach BITV
   Pflicht, und FullCalendar entfernt ihn an dieser Stelle ausdrücklich. */
.fc button:focus-visible {
    outline: 3px solid var(--gold-deep);
    outline-offset: 2px;
}
.fc button:focus:not(:focus-visible) { outline: none; }

/* Die Pfeile für „vor“ und „zurück“ sind Zeichen einer Icon-Schrift und
   sitzen ohne Korrektur zu hoch. */
.fc button .fc-icon { top: 0; margin: 0; }

/* ── Kopfzeile des Kalenderblatts ───────────────────────────────────────── */

/* Die Wochentage (Mo, Di, Mi …) sind Beschriftungen, keine Überschriften —
   und bekommen deshalb dieselbe Behandlung wie Eyebrow, Meta-Zeile und
   Brotkrume: Grotesk, klein, in Versalien und gesperrt.

   Die drei Werte gehören zusammen: Versalien allein bauen zu hoch, ohne
   Sperrung kleben sie aneinander. Der Innenabstand ist nötig, weil
   FullCalendar allen Zellen padding: 0 gibt — der Text säße sonst an der
   Linie. */
.fc .fc-day-header {
    padding: 12px 6px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
/* In der Wochen- und Tagesansicht steckt die Beschriftung in einem span,
   bei eingeschalteten Sprunglinks in einem a. */
.fc .fc-day-header > span,
.fc .fc-day-header > a {
    color: inherit;
    text-decoration: none;
}

/* ── Schmale Bildschirme ────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .fc button,
    .fc .fc-state-default { padding: 10px 14px; font-size: 12px; }
}