/*
 * ============================================================
 *  SCHULKALENDER – Stylesheet (assets/style.css)
 *  Linden-Grundschule Velten | Version 3.0
 *  Design: Lindengrün + Gold, freundlich und klar
 *
 *  DSGVO-konform: Keine externen Font-Requests.
 *  Nunito wird lokal aus assets/fonts/ geladen.
 * ============================================================
 */

/* ── Lokale Schriftart: Nunito ────────────────────────────── */
/* DSGVO: Alle Schriftdateien liegen auf dem eigenen Server.  */
/* Keine Anfragen an externe Server. Alle Dateien lokal.     */
@font-face {
    font-family: 'Nunito';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/nunito-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/nunito-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/nunito-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style:  normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/nunito-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style:  normal;
    font-weight: 900;
    font-display: swap;
    src: url('fonts/nunito-900.woff2') format('woff2');
}

/* ── CSS-Variablen (Design-Token) ─────────────────────────── */
:root {
    /* Primärfarben – Lindengrün */
	--gruen-tief_1: #006600;
    --gruen-tief:   #1b4d1f;
	--gruen-dunkel_1: #2CAF2D;
    --gruen-mittel_1: #74DF00;
    --gruen-dunkel: #2d6a2d;
    --gruen-mittel: #4a8c3f;
    --gruen-hell:   #7cbf5e;
    --gruen-bg:     #f0f7ed;
    --gruen-bg2:    #e3f0de;

    /* Akzent – Lindengold */
    --gold:         #d4861a;
    --gold-hell:    #f5a623;
    --gold-bg:      #fff8e1;

    /* Admin-Rot (Header im Admin-Modus) */
    --admin-rot:        #b71c1c;
    --admin-rot-dunkel: #7f0000;
    --admin-rot-hell:   #ef5350;

    /* Neutrale Töne */
    --weiss:        #ffffff;
    --grau-hell:    #f5f7f5;
    --grau-mittel:  #dde8dd;
    --grau-rand:    #c5d9c5;
    --text-dunkel:  #1a2e1a;
    --text-mittel:  #445544;
    --text-hell:    #6a836a;

    /* Schatten */
    --schatten-s:   0 2px  8px  rgba(45,106,45,.12);
    --schatten-m:   0 4px  16px rgba(45,106,45,.15);
    --schatten-l:   0 8px  32px rgba(45,106,45,.18);

    /* Radien */
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;

    /* Status */
    --rot:      #e53935;
    --rot-hell: #ffebee;
    --orange:   #FF9800;
}

/* ── Reset & Basis ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Nunito', sans-serif;
    background: var(--gruen-bg);
    color: var(--text-dunkel);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ════════════════════════════════════════════════════════════
   KOPFZEILE
════════════════════════════════════════════════════════════ */
.sk-header {
    background: linear-gradient(135deg, var(--gruen-tief_1) 0%, var(--gruen-dunkel_1) 50%, var(--gruen-mittel_1) 100%);
    color: var(--weiss);
    box-shadow: var(--schatten-m);
    position: sticky;
    top: 0;
    z-index: 500;
    transition: background .4s ease;
}

/*
 * ADMIN-MODUS: Header wird rot
 * Wenn .admin-modus am <header> sitzt, greift dieser Block.
 * Die Klasse wird in index.php per PHP gesetzt wenn istAdmin() = true.
 */
.sk-header.admin-modus {
    background: linear-gradient(135deg, var(--admin-rot-dunkel) 0%, var(--admin-rot) 55%, var(--admin-rot-hell) 100%);
}

/* Admin-Banner direkt unter dem Hauptheader */
.sk-admin-banner {
    background: rgba(0,0,0,.25);
    border-bottom: 2px solid rgba(255,255,255,.2);
    padding: .3rem 1.5rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.sk-admin-banner .banner-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff8a80;
    box-shadow: 0 0 0 0 rgba(255,138,128,.5);
    animation: pulseRed 1.5s infinite;
}
@keyframes pulseRed {
    0%   { box-shadow: 0 0 0 0   rgba(255,138,128,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(255,138,128,0); }
    100% { box-shadow: 0 0 0 0   rgba(255,138,128,0); }
}

.sk-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sk-logo-bereich {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}
.sk-logo-bereich:hover { color: inherit; }

.sk-emblem {
    width: 58px; height: 58px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-hell) 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    box-shadow: 0 3px 10px rgba(0,0,0,.25), 0 0 0 3px rgba(255,255,255,.15);
    flex-shrink: 0;
    line-height: 1;
}

/* Im Admin-Modus Emblem weiß umranden für bessere Sichtbarkeit */
.admin-modus .sk-emblem {
    box-shadow: 0 3px 10px rgba(0,0,0,.3), 0 0 0 3px rgba(255,200,200,.3);
}

.sk-schul-info h1 {
    font-size: 1.2rem; font-weight: 900;
    line-height: 1.2; letter-spacing: -.02em;
}
.sk-untertitel {
    font-size: .78rem; opacity: .82;
    font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
}
.sk-header-rechts {
    display: flex; align-items: center;
    gap: .65rem; flex-wrap: wrap;
}
.sk-admin-badge {
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.35);
    color: white; padding: .28rem .8rem;
    border-radius: 20px; font-size: .75rem;
    font-weight: 700; letter-spacing: .02em;
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════ */
.btn-sk, .btn-sk-gold, .btn-sk-gefahr, .btn-sk-grau {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem 1.1rem; border-radius: var(--radius-s);
    border: none; font-family: 'Nunito', sans-serif;
    font-weight: 700; font-size: .85rem; cursor: pointer;
    transition: background .18s, transform .15s, box-shadow .15s;
    text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.btn-sk        { background: var(--gruen-mittel); color: white; }
.btn-sk:hover  { background: var(--gruen-dunkel); color: white;
                 transform: translateY(-1px); box-shadow: var(--schatten-s); }
.btn-sk-gold       { background: var(--gold);   color: white; }
.btn-sk-gold:hover { background: #b8710e;        color: white;
                     transform: translateY(-1px); box-shadow: var(--schatten-s); }
.btn-sk-gefahr       { background: var(--rot);  color: white; }
.btn-sk-gefahr:hover { background: #c62828;      color: white;
                       transform: translateY(-1px); }
.btn-sk-grau       { background: #eee; color: var(--text-mittel); }
.btn-sk-grau:hover { background: #ddd; }
.btn-sk-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,.5);
    color: white; padding: .42rem 1rem;
    border-radius: var(--radius-s); font-family: 'Nunito', sans-serif;
    font-weight: 700; font-size: .82rem; cursor: pointer;
    transition: background .18s, border-color .18s;
    text-decoration: none; white-space: nowrap;
}
.btn-sk-outline:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.8); color: white;
}
.w-100 { width: 100%; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   FILTER-LEISTE
════════════════════════════════════════════════════════════ */
.sk-filter {
    background: var(--weiss);
    border-bottom: 2px solid var(--gruen-bg2);
    padding: .65rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.07);
}
.sk-filter-inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; gap: .45rem;
    flex-wrap: wrap; align-items: center;
}
.sk-filter-label {
    font-size: .72rem; font-weight: 800;
    color: var(--text-hell); text-transform: uppercase;
    letter-spacing: .06em; margin-right: .25rem; white-space: nowrap;
}

/* Zähler-Badge im Filter-Button */
.filter-zaehler {
    display: inline-block; background: rgba(255,255,255,.3);
    border-radius: 10px; padding: 0 .4rem;
    font-size: .68rem; font-weight: 800; min-width: 18px;
    text-align: center; line-height: 1.6;
}
.filter-btn:not(.aktiv) .filter-zaehler {
    background: rgba(0,0,0,.1); color: var(--text-hell);
}

.filter-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .85rem; border-radius: 20px;
    border: 2px solid var(--grau-rand);
    background: var(--grau-hell); color: var(--text-mittel);
    font-family: 'Nunito', sans-serif; font-size: .78rem;
    font-weight: 700; cursor: pointer; transition: all .18s;
    white-space: nowrap;
}
.filter-btn:hover { transform: translateY(-1px); box-shadow: var(--schatten-s); border-color: transparent; }
.filter-btn.aktiv { color: white; border-color: transparent; box-shadow: var(--schatten-s); }

/* ════════════════════════════════════════════════════════════
   HAUPTLAYOUT
════════════════════════════════════════════════════════════ */
.sk-main {
    flex: 1; max-width: 1400px;
    width: 100%; margin: 1.5rem auto; padding: 0 1rem;
}
.sk-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 1.25rem; align-items: start;
}
@media (max-width: 900px) {
    .sk-layout { grid-template-columns: 1fr; }
    .sk-sidebar { display: none; }
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════════════════════ */
.sk-sidebar-card {
    background: var(--weiss);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--schatten-s);
    margin-bottom: 1rem;
}
.sk-sidebar-card h3 {
    font-size: .72rem; font-weight: 800;
    color: var(--text-hell); text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--gruen-bg2);
}
.legende-item {
    display: flex; align-items: center; gap: .55rem;
    font-size: .8rem; font-weight: 600;
    color: var(--text-mittel); padding: .25rem 0;
}
.legende-farbe {
    width: 13px; height: 13px;
    border-radius: 3px; flex-shrink: 0;
}

/* Agenda-Widget */
.agenda-leer {
    font-size: .75rem; color: var(--text-hell);
    text-align: center; padding: .5rem 0; font-style: italic;
}
.agenda-item {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .4rem 0; border-bottom: 1px solid var(--gruen-bg2);
    cursor: pointer; transition: background .15s; border-radius: 5px;
}
.agenda-item:last-child { border-bottom: none; }
.agenda-item:hover { background: var(--gruen-bg); padding-left: .4rem; }
.agenda-farb-streifen {
    width: 4px; min-height: 32px; border-radius: 2px; flex-shrink: 0; margin-top: 2px;
}
.agenda-info { flex: 1; min-width: 0; }
.agenda-titel {
    font-size: .78rem; font-weight: 700; line-height: 1.3;
    color: var(--text-dunkel); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.agenda-datum {
    font-size: .68rem; color: var(--text-hell); font-weight: 600;
    margin-top: .15rem;
}

/* Admin-Sidebar-Karte */
.sk-admin-karte { border-top: 4px solid var(--gold); }

/* ════════════════════════════════════════════════════════════
   KALENDER-WRAPPER
════════════════════════════════════════════════════════════ */
.sk-kalender-wrapper {
    background: var(--weiss);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-m);
    padding: 1.25rem; overflow: hidden;
}

/* Listenansicht (Fallback bei leerem Filter) */
.sk-listenansicht {
    display: none; /* wird per JS eingeblendet */
}
.sk-listenansicht.aktiv { display: block; }
.sk-listenansicht-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem; padding-bottom: .75rem;
    border-bottom: 2px solid var(--gruen-bg2);
}
.sk-listenansicht-header h3 {
    font-size: 1rem; font-weight: 800; color: var(--gruen-dunkel);
}
.sk-liste-tabelle {
    width: 100%; border-collapse: collapse; font-size: .84rem;
}
.sk-liste-tabelle th {
    text-align: left; padding: .5rem .75rem;
    background: var(--gruen-bg); font-weight: 800;
    font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-hell);
    border-bottom: 2px solid var(--gruen-bg2);
}
.sk-liste-tabelle td {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--grau-mittel);
    vertical-align: middle;
}
.sk-liste-tabelle tr:hover td { background: var(--gruen-bg); cursor: pointer; }
.sk-liste-datum { font-weight: 700; color: var(--text-dunkel); white-space: nowrap; }
.sk-liste-tag   { color: var(--text-hell); font-size: .76rem; }
.sk-liste-badge {
    display: inline-block; padding: .18rem .65rem;
    border-radius: 12px; color: white; font-size: .68rem;
    font-weight: 800; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   FULLCALENDAR ÜBERSCHREIBUNGEN
   Option B: Farbstreifen links, heller Hintergrund, voller Titel
════════════════════════════════════════════════════════════ */
.fc { font-family: 'Nunito', sans-serif !important; }

.fc .fc-toolbar-title {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    color: var(--gruen-dunkel) !important;
    letter-spacing: -.02em;
}
.fc .fc-button-primary {
    background-color: var(--gruen-mittel) !important;
    border-color: var(--gruen-mittel) !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    border-radius: var(--radius-s) !important;
    font-size: .82rem !important;
    padding: .38rem .85rem !important;
    /* Jeder Button einzeln → kein Kleben aneinander */
    margin: 0 2px !important;
}
.fc .fc-button-primary:hover {
    background-color: var(--gruen-dunkel) !important;
    border-color: var(--gruen-dunkel) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--gruen-tief) !important;
    border-color: var(--gruen-tief) !important;
}

/* Buttongruppen: border-radius an ALLEN Ecken, nicht nur außen */
.fc .fc-button-group {
    gap: 3px !important;          /* Lücke zwischen gruppierten Buttons */
}
.fc .fc-button-group .fc-button {
    border-radius: var(--radius-s) !important;  /* Jeder Button rund */
    margin: 0 !important;
}
/* Toolbar-Abschnitte mit Abstand zueinander */
.fc .fc-toolbar {
    gap: .5rem !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.fc .fc-toolbar-chunk {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}
.fc .fc-col-header-cell {
    background-color: var(--gruen-bg) !important;
    padding: .4rem 0 !important;
}
.fc .fc-col-header-cell-cushion {
    font-weight: 800 !important;
    color: var(--gruen-dunkel) !important;
    font-size: .82rem !important;
    text-decoration: none !important;
}
.fc .fc-daygrid-day-number {
    font-weight: 700 !important;
    color: var(--text-mittel) !important;
    font-size: .85rem !important;
    text-decoration: none !important;
}
.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--gold-bg) !important;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: var(--gold) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 26px; height: 26px;
    display: flex !important;
    align-items: center; justify-content: center;
    margin: 2px;
}
.fc .fc-day-sun, .fc .fc-day-sat {
    background: rgba(0,0,0,.018) !important;
}

/* ── Option B: Event-Design mit Farbstreifen links ──────── */
/* Volle Sichtbarkeit des Titels durch hellen Hintergrund.   */
/* Die Kategorie-Farbe erscheint als 4px-Streifen links.     */

.fc-event {
    /* Fallback für Browser ohne color-mix (Safari < 16.2) */
    background-color: #f0f7ed !important;
    /* Moderne Browser: leichte Tönung der Kategoriefarbe */
    background-color: color-mix(in srgb, var(--event-color, #4a8c3f) 12%, white) !important;
    /* Farbstreifen links = 4px solid in Kategoriefarbe */
    border: none !important;
    border-left: 4px solid var(--event-color, #4a8c3f) !important;
    border-radius: 0 5px 5px 0 !important;
    cursor: pointer !important;
    /* Kein Abschneiden – Titel umbricht */
    white-space: normal !important;
    overflow: visible !important;
    min-height: 2.2em;
    padding: 2px 5px 2px 6px !important;
    margin-bottom: 2px !important;
    transition: filter .15s, transform .15s;
}
.fc-event:hover {
    filter: brightness(.94) !important;
    transform: translateX(1px);
}

/* Titel: dunkle Schrift auf hellem Hintergrund */
.fc-event .fc-event-title,
.fc-event .fc-event-title-container {
    color: var(--text-dunkel) !important;
    font-weight: 700 !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}
/* Uhrzeit ebenfalls dunkel */
.fc-event .fc-event-time {
    color: var(--text-hell) !important;
    font-weight: 600 !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
}

/* Ganztägige Events: etwas kräftigerer Hintergrund */
.fc-event.fc-daygrid-block-event {
    background-color: color-mix(in srgb, var(--event-color, #4a8c3f) 15%, white) !important;
}

/* ── „+X weitere" Link ──────────────────────────────────── */
.fc .fc-daygrid-more-link {
    font-size: .74rem !important;
    font-weight: 800 !important;
    color: var(--gruen-dunkel) !important;
    background: var(--gruen-bg2) !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}
.fc .fc-daygrid-more-link:hover {
    background: var(--gruen-mittel) !important;
    color: white !important;
}

/* ── Listenansicht (mobile Standardansicht) ──────────────── */
/* "all-day" → "ganztägig" wird per FullCalendar-Option gesetzt */
.fc .fc-list-table {
    font-family: 'Nunito', sans-serif !important;
}
.fc .fc-list-day-cushion {
    background: var(--gruen-bg2) !important;
    padding: .5rem .75rem !important;
}
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
    font-weight: 800 !important;
    color: var(--gruen-dunkel) !important;
    text-decoration: none !important;
    font-size: .88rem !important;
}
/* Listenzeilen: kompakter mit Farbstreifen */
.fc .fc-list-event {
    cursor: pointer !important;
}
.fc .fc-list-event:hover td {
    background: var(--gruen-bg) !important;
}
.fc .fc-list-event-dot {
    /* Farbiger Kreis statt Punkt – Größe erhöht */
    border-width: 8px !important;
    border-radius: 50% !important;
    margin-top: 1px !important;
}
.fc .fc-list-event-title a {
    color: var(--text-dunkel) !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    text-decoration: none !important;
}
.fc .fc-list-event-time {
    color: var(--text-hell) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
/* Kategorie-Badge in der Listenansicht */
.fc-list-event-kategorie {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 800;
    color: white;
    margin-left: .5rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* Zeitachsen-Ansicht (Woche) */
.fc .fc-timegrid-slot-label {
    font-size: .75rem !important;
    color: var(--text-hell) !important;
    font-weight: 600 !important;
}
.fc .fc-timegrid-event {
    border-radius: 0 6px 6px 0 !important;
    border: none !important;
    border-left: 4px solid var(--event-color, #4a8c3f) !important;
    background-color: color-mix(in srgb, var(--event-color, #4a8c3f) 15%, white) !important;
}
.fc .fc-timegrid-event .fc-event-title {
    color: var(--text-dunkel) !important;
    font-weight: 700 !important;
}

/* Admin-Modus: Mauszeiger auf freiem Datum */
.admin-aktiv .fc-daygrid-day:hover {
    background: rgba(74,140,63,.06) !important;
    cursor: cell !important;
}

/* Tooltip für volle Titel bei abgeschnittenen Events */
.sk-event-tooltip {
    position: fixed;
    background: var(--text-dunkel);
    color: white;
    padding: .4rem .75rem;
    border-radius: var(--radius-s);
    font-size: .78rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    z-index: 99998;
    max-width: 280px;
    line-height: 1.4;
    pointer-events: none;
    box-shadow: var(--schatten-m);
    animation: tooltipEin .12s ease;
}
@keyframes tooltipEin {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   EVENT-POPUP
════════════════════════════════════════════════════════════ */
.sk-popup {
    position: fixed; background: var(--weiss);
    border-radius: var(--radius-l); box-shadow: var(--schatten-l);
    padding: 1.2rem 1.3rem 1.1rem; z-index: 9999;
    max-width: 310px; min-width: 250px;
    border-top: 5px solid var(--gruen-mittel);
    animation: popEin .18s ease; pointer-events: auto;
}
@keyframes popEin {
    from { opacity: 0; transform: scale(.92) translateY(4px); }
    to   { opacity: 1; transform: scale(1)  translateY(0);    }
}
.popup-schliessen {
    position: absolute; top: .55rem; right: .75rem;
    background: none; border: none; font-size: 1.25rem;
    cursor: pointer; color: var(--text-hell); line-height: 1; padding: 0;
    transition: color .15s;
}
.popup-schliessen:hover { color: var(--text-dunkel); }
.popup-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .18rem .65rem; border-radius: 12px;
    font-size: .7rem; font-weight: 800; color: white;
    letter-spacing: .03em; margin-bottom: .5rem; text-transform: uppercase;
}
.popup-titel { font-size: .98rem; font-weight: 800; line-height: 1.3;
               color: var(--text-dunkel); margin-bottom: .4rem; }
.popup-datum { font-size: .78rem; color: var(--text-hell); font-weight: 600;
               margin-bottom: .35rem; display: flex; align-items: center; gap: .3rem; }
.popup-beschreibung {
    font-size: .79rem; color: var(--text-mittel); line-height: 1.5;
    margin-bottom: .75rem; border-top: 1px solid var(--grau-mittel);
    padding-top: .5rem;
}
.popup-aktionen { display: flex; gap: .45rem; flex-wrap: wrap; }
.popup-aktionen .btn-sk,
.popup-aktionen .btn-sk-gold,
.popup-aktionen .btn-sk-gefahr { font-size: .78rem; padding: .35rem .8rem; }

/* ════════════════════════════════════════════════════════════
   MODALS
════════════════════════════════════════════════════════════ */
.modal-header {
    background: linear-gradient(135deg, var(--gruen-tief), var(--gruen-mittel)) !important;
    color: white !important;
}
.modal-header.admin-rot-header {
    background: linear-gradient(135deg, var(--admin-rot-dunkel), var(--admin-rot)) !important;
}
.modal-header .btn-close { filter: invert(1) brightness(2); }
.modal-title { font-weight: 800 !important; font-size: 1rem !important; }
.form-label { font-weight: 700; color: var(--text-mittel); font-size: .84rem; margin-bottom: .3rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--gruen-mittel) !important;
    box-shadow: 0 0 0 .2rem rgba(74,140,63,.22) !important;
}

/* ── ICS-Import-Modal ────────────────────────────────────── */
.ics-upload-zone {
    border: 3px dashed var(--grau-rand); border-radius: var(--radius-m);
    padding: 2rem 1.5rem; text-align: center; cursor: pointer;
    transition: all .2s; background: var(--grau-hell);
}
.ics-upload-zone:hover, .ics-upload-zone.dragover {
    border-color: var(--gruen-mittel);
    background: var(--gruen-bg); color: var(--gruen-dunkel);
}
.ics-upload-zone .upload-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.ics-upload-zone p { font-size: .84rem; font-weight: 600; color: var(--text-hell); margin: 0; }

/* Vorschau-Tabelle */
.ics-preview-tabelle {
    width: 100%; border-collapse: collapse; font-size: .81rem; margin-top: .75rem;
}
.ics-preview-tabelle th {
    background: var(--gruen-bg); padding: .45rem .6rem;
    font-weight: 800; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-hell);
    border-bottom: 2px solid var(--gruen-bg2);
}
.ics-preview-tabelle td {
    padding: .45rem .6rem; border-bottom: 1px solid var(--grau-mittel);
    vertical-align: middle;
}
.ics-preview-tabelle tr.duplikat { background: var(--rot-hell); }
.ics-preview-tabelle tr.duplikat td:first-child { border-left: 4px solid var(--rot); }
.ics-preview-tabelle tr.einzel-tag { background: var(--gold-bg); }
.ics-preview-tabelle tr.einzel-tag td:first-child { border-left: 4px solid var(--orange); }

/* Schritte-Anzeige im ICS-Modal */
.ics-schritte {
    display: flex; gap: .5rem; align-items: center;
    margin-bottom: 1.25rem; padding: .75rem 1rem;
    background: var(--gruen-bg); border-radius: var(--radius-s);
}
.ics-schritt {
    display: flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 700; color: var(--text-hell);
}
.ics-schritt.aktiv { color: var(--gruen-dunkel); }
.ics-schritt.fertig { color: var(--gruen-mittel); }
.ics-schritt-nr {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--grau-mittel); color: var(--text-hell);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800;
}
.ics-schritt.aktiv  .ics-schritt-nr { background: var(--gruen-mittel); color: white; }
.ics-schritt.fertig .ics-schritt-nr { background: var(--gruen-hell);   color: white; }
.ics-schritt-trenner { flex: 1; height: 2px; background: var(--grau-mittel); }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container { z-index: 99999 !important; }
.sk-toast { border-radius: var(--radius-m) !important; box-shadow: var(--schatten-m) !important; }

/* ── Ladescreen ─────────────────────────────────────────────── */
.sk-lade {
    position: fixed; inset: 0;
    background: rgba(240,247,237,.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999; backdrop-filter: blur(2px);
}
.sk-spinner {
    width: 46px; height: 46px;
    border: 5px solid var(--gruen-bg2);
    border-top-color: var(--gruen-mittel);
    border-radius: 50%; animation: drehen .75s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* ── Fußzeile ────────────────────────────────────────────────── */
.sk-footer {
    text-align: center; padding: 1.2rem 1rem;
    color: var(--text-hell); font-size: .76rem; font-weight: 600;
    border-top: 2px solid var(--gruen-bg2); margin-top: auto;
}
.sk-footer a { color: var(--gruen-mittel); text-decoration: none; font-weight: 700; }
.sk-footer a:hover { color: var(--gruen-dunkel); }

/* ════════════════════════════════════════════════════════════
   KATEGORIE-VERWALTUNG
════════════════════════════════════════════════════════════ */
.kat-liste-tabelle {
    width: 100%; border-collapse: collapse; font-size: .84rem;
}
.kat-liste-tabelle th {
    background: var(--gruen-bg); padding: .45rem .7rem;
    font-weight: 800; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-hell);
    border-bottom: 2px solid var(--gruen-bg2); text-align: left;
}
.kat-liste-tabelle td {
    padding: .45rem .7rem;
    border-bottom: 1px solid var(--grau-mittel);
    vertical-align: middle;
}
.kat-liste-tabelle tr:hover td { background: var(--gruen-bg); }

/* Eingabefelder in der Kategorie-Tabelle */
.kat-input {
    border: 1.5px solid var(--grau-rand);
    border-radius: 6px;
    padding: .28rem .5rem;
    font-size: .82rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    transition: border-color .15s;
}
.kat-input:focus {
    outline: none;
    border-color: var(--gruen-mittel);
    box-shadow: 0 0 0 .15rem rgba(74,140,63,.2);
}

/* Neuen Kategorie-Block */
.kat-neu-block {
    background: var(--gruen-bg);
    border-radius: var(--radius-m);
    padding: 1rem 1.25rem;
    margin-top: .25rem;
}
.kat-neu-block h6 {
    font-weight: 800;
    color: var(--gruen-dunkel);
    margin-bottom: .75rem;
    font-size: .88rem;
}

/* Farbvorschau-Kästchen */
.kat-farb-vorschau {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.15);
    flex-shrink: 0;
    transition: background .2s;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .sk-schul-info h1 { font-size: 1rem; }
    .sk-emblem { width: 46px; height: 46px; font-size: 1.5rem; }
    .sk-kalender-wrapper { padding: .75rem; border-radius: var(--radius-m); }
    .sk-header-inner { padding: .8rem 1rem; }
    .sk-filter { padding: .5rem .75rem; }
    .sk-popup { max-width: calc(100vw - 2rem); }

    /* Toolbar auf Mobil: untereinander, Titel zentriert */
    .fc .fc-toolbar {
        flex-direction: column !important;
        gap: .5rem !important;
        align-items: center !important;
    }
    .fc .fc-toolbar-title { font-size: 1.05rem !important; }
    .fc .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    /* Buttons auf Mobil etwas kompakter aber weiterhin einzeln */
    .fc .fc-button-primary {
        padding: .35rem .65rem !important;
        font-size: .78rem !important;
        margin: 0 2px !important;
    }
}
@media (max-width: 480px) {
    .sk-main { padding: 0 .5rem; margin-top: 1rem; }
    .sk-admin-banner { padding: .3rem .75rem; }
    /* Sehr kleine Bildschirme: Buttons noch kompakter */
    .fc .fc-button-primary {
        padding: .28rem .5rem !important;
        font-size: .74rem !important;
    }
    /* Ansichts-Buttons (Monat/Woche/Liste) als Symbol-Buttons */
    .fc .fc-dayGridMonth-button::after { content: '📅'; }
    .fc .fc-timeGridWeek-button::after { content: '📋'; }
    .fc .fc-listMonth-button::after    { content: '📃'; }
}