/* ═══════════════════════════════════════════════════════════════
   calendar.css — Vollständige Kalender-App für iPlanLane
   ═══════════════════════════════════════════════════════════════ */

#calendar-view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    animation: calFadeIn 0.25s ease-out;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.55);
	margin-bottom: 12px;
}

[data-theme="dark"] #calendar-view {
    background: rgba(28,35,51,0.85);
    border-color: rgba(255,255,255,0.06); 
}
#calendar-view.active {
    display: flex;
}
@media (max-width: 600px) {
    #calendar-view { border-radius: 12px; }
}
:root { --cal-hour-height: 60px; }
#cal-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    /* Horizontale Gesten gehören dem Swipe-Handler (JS),
       vertikale Gesten bleiben natives, flüssiges Scrollen. */
    touch-action: pan-y;
}
#calendar-view {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Verhindert Textauswahl-Konflikte beim Wischen mit der Maus auf Desktops */
#cal-content * {
    user-select: none;
    -webkit-user-select: none;
}

/* GPU-Optimierung für den dynamisch erstellten Swipe-Wrapper */
#cal-swipe-wrapper {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Jedes Panel ist eine vollständige Ansicht; die Ansicht (cal-day/week/month)
   füllt das Panel via flex:1 vollständig aus. */
.cal-swipe-panel {
    display: flex;
    flex-direction: column;
}
.cal-swipe-panel > .cal-month,
.cal-swipe-panel > .cal-week,
.cal-swipe-panel > .cal-day {
    flex: 1;
    min-height: 0;
}
/* ─── Mobile Swipe: Frozen Layout ─────────────────────────────────
   Während eines aktiven Mobile-Swipes wechselt das Layout temporär in
   einen Desktop-ähnlichen Modus mit innerem Scroll-Container. So bleiben
   Toolbar, Wochen-/Tageskopf, Ganztägig-Zeile und der Scrollpunkt der
   aktuellen Uhrzeit während des Swipes stabil sichtbar – wie bei Google
   Kalender. Beim Verlassen rechnet der JS-Code die innere Scroll-Position
   zurück in window.scrollY, sodass die gleiche Stunde sichtbar bleibt.
   Wird ausschließlich auf Mobilgeräten aktiv (siehe @media unten). */
html.cal-swipe-active body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    position: fixed !important;
    top: var(--cal-swipe-body-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}
html.cal-swipe-active #calendar-view {
    position: fixed !important;
    top: var(--cal-swipe-view-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--cal-swipe-view-bottom, 0px) !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    overflow: hidden !important;
    z-index: 50;
    border-radius: 0 !important;
}
html.cal-swipe-active #cal-content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: auto !important;
}
/* Innere Scroll-Container wieder aktivieren (wie auf Desktop) */
html.cal-swipe-active .cal-week-body,
html.cal-swipe-active .cal-day-body {
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}
html.cal-swipe-active .cal-month-grid {
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}
/* Im Frozen-Layout darf `.cal-month-week` NICHT in den verfügbaren Platz
   expandieren – sonst sind die Monatszellen während des Swipes größer als
   im Page-Scroll-Modus (`#calendar-view` ist im Frozen-Modus position:fixed
   und der dadurch verfügbare Platz weicht typischerweise vom Page-Scroll-
   Modus ab). Stattdessen erzwingen wir die EXAKT vorher gemessene Höhe
   einer Wochenzeile (JS setzt --cal-month-week-h in _enterFrozenLayout aus
   `.cal-month-week.offsetHeight` und räumt sie in _exitFrozenLayout wieder
   auf). Fallback 90px, falls die Variable nicht gesetzt wurde. */
html.cal-swipe-active .cal-month-week {
    flex: 0 0 var(--cal-month-week-h, 90px) !important;
}
/* Während Frozen-Layout: Köpfe im Flow (Flex-Layout des inneren
   Containers) – kein sticky am Viewport mehr. */
html.cal-swipe-active .cal-toolbar,
html.cal-swipe-active .cal-month-headers,
html.cal-swipe-active .cal-week-header,
html.cal-swipe-active .cal-day-header,
html.cal-swipe-active .cal-allday-row,
html.cal-swipe-active .cal-allday-expander {
    position: static !important;
    top: auto !important;
}
/* Mobile-Bottom-Nav bleibt während des Swipes sichtbar – das Kalender-View
   ist im Frozen-Modus per CSS-Variable --cal-swipe-view-bottom auf genau der
   Höhe der Nav abgesetzt, sodass sie nicht überlagert wird. */
html.cal-swipe-active .mob-nav {
    z-index: 60; /* über dem fixierten Kalender-View (z-index:50) */
}
.cal-month, .cal-week, .cal-day { animation: none; }
@keyframes calFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    flex-wrap: wrap;
    flex-shrink: 0;
    z-index: 10;
}
[data-theme="dark"] .cal-toolbar { border-bottom-color: rgba(255,255,255,0.06); }
.cal-nav-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cal-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: transparent;
    color: rgba(26,26,46,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.cal-nav-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #1a1a2e;
}
.cal-today-btn {
    padding: 7px 14px;
    border-radius: 9px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: transparent;
    color: rgba(26,26,46,0.7);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.cal-today-btn:hover {
    background: rgba(0,0,0,0.05);
}
.cal-title {
    font-size: 18px;
    font-weight: 900;
    color: #1a1a2e;
    letter-spacing: -0.3px;
    flex: 1;
    min-width: 0;
}
.cal-view-switcher {
    display: flex;
    gap: 2px;
    background: rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 3px;
}
.cal-view-btn {
    padding: 6px 13px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: rgba(26,26,46,0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.cal-view-btn.active {
    background: white;
    color: #1a1a2e;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.cal-new-event-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s;
    white-space: nowrap;
}
.cal-new-event-btn:hover {
    transform: translateY(-1px);
}
.cal-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: rgba(26,26,46,0.65);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.cal-export-btn:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.18);
}

/* Zahnrad-Button (Kalender-Einstellungen) */
.cal-settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: transparent;
    border-radius: 9px;
    color: rgba(26,26,46,0.6);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.4s;
    flex-shrink: 0;
}
.cal-settings-btn:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.18);
    transform: rotate(45deg);
}
[data-theme="dark"] .cal-settings-btn {
    border-color: rgba(255,255,255,0.12);
    color: rgba(232,234,240,0.6);
}
[data-theme="dark"] .cal-settings-btn:hover { background: rgba(255,255,255,0.06); }

/* ── Month View ───────────────────────────────────────────────── */
.cal-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.cal-month-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.cal-month-day-header {
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(26,26,46,0.45);
}
.cal-month-day-header.weekend {
    color: rgba(26,26,46,0.3);
}
.cal-month-grid {
    flex: 1;
    min-height: 0;          /* erlaubt Schrumpfen unter Inhaltshöhe → Scroll */
    display: flex;
    flex-direction: column;
    gap: 1px;               /* horizontale Trennlinien zwischen den Wochen */
    background: rgba(0,0,0,0.06);
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
/* Eine Wochen-Zeile: Zellen-Schicht + darüberliegende Balken-Schicht */
.cal-month-week {
    position: relative;
    flex: 1 1 0;
    display: flex;
    min-height: 90px;
}
.cal-month-week-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    gap: 1px;               /* erzeugt die vertikalen Gitterlinien */
    background: rgba(0,0,0,0.06);
}
/* Balken-Overlay: liegt ÜBER den Zellen/Linien, daher keine Linie über Balken */
.cal-month-week-events {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
.cal-month-bar {
    position: absolute;
    /* Höhe + Padding leicht erhöht für bessere Klickbarkeit auf Touch.
       Pastellfarben aus dem Swatch tragen dunkle Schrift jetzt einheitlich
       (war vorher weiß und auf Hellblau/Pastell schlecht lesbar). */
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(26,26,46,0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
    transition: filter 0.12s;
}
.cal-month-bar:hover { filter: brightness(0.92); }
.cal-month-bar.task-event {
    background: var(--task-color, #a8d4f4);
    color: rgba(26,26,46,0.85);
}
.cal-month-cell {
    --cell-px: 8px;
    background: #ffffffa3;
    padding: 4px var(--cell-px);
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    overflow: hidden;
}

[data-theme="white"] .cal-month-cell { background: #ffffff; }

.cal-month-cell:hover {
    background: rgba(0,122,255,0.03);
}
.cal-month-cell.other-month {
    background: rgba(255,255,255,0.5);
}
.cal-month-cell.other-month .cal-cell-day-num {
    opacity: 0.3;
}
.cal-month-cell.today {
    background: rgba(0,122,255,0.04);
}
.cal-cell-day-num {
    font-size: 13px;
    font-weight: 700;
    color: rgba(26,26,46,0.75);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
}
.cal-month-cell.today .cal-cell-day-num {
    background: var(--accent-blue);
    color: white;
}
.cal-month-event {
    display: block;
    /* Höher + klickbarer: 5px statt 2px Top/Bottom → ~22px Gesamt-Höhe statt
       ~16px. Mobile Touch-Targets ≥ 24px werden so leichter erreicht.
       Trotzdem schlank genug, dass mehrere Termine pro Tag sichtbar bleiben. */
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(26,26,46,0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: filter 0.12s;
    flex-shrink: 0;
}
.cal-month-event:hover {
    filter: brightness(0.9);
}
.cal-month-event.task-event {
    background: var(--task-color, #a8d4f4);
    color: rgba(26,26,46,0.85);
    border-radius: 5px;
}
.cal-month-more {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 10px;
    color: rgba(26,26,46,0.5);
    font-weight: 700;
    cursor: pointer;
    z-index: 6;
}


/* ── Week View ────────────────────────────────────────────────── */
.cal-week {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.cal-week-header {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.cal-week-header-time { }
.cal-week-day-header {
    text-align: center;
    padding: 8px 4px;
    border-left: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
}
.cal-week-day-name {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(26,26,46,0.4);
}
.cal-week-day-num {
    font-size: 20px;
    font-weight: 900;
    color: rgba(26,26,46,0.75);
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin: 2px auto 0;
    transition: background 0.12s;
}
.cal-week-day-header.today .cal-week-day-num {
    background: var(--accent-blue);
    color: white;
}
.cal-week-day-header:hover .cal-week-day-num {
    background: rgba(0,0,0,0.06);
}
.cal-week-day-header.today:hover .cal-week-day-num {
    background: var(--accent-blue);
}
.cal-week-body {
    flex: 1;
    min-height: 0;          /* erlaubt Schrumpfen unter Inhaltshöhe → Scroll */
    overflow-y: auto;
    position: relative;
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.cal-week-time-col {
    position: sticky;
    left: 0;
    background: white;
    border-right: 1px solid rgba(0,0,0,0.07);
    z-index: 2;
}
.cal-week-time-label {
    height: var(--cal-hour-height, 60px);
    transition: height 0.18s ease-out;
    position: relative;
    padding: 0 6px;
    font-size: 13px;
    color: rgba(26,26,46,0.4);
    font-weight: 600;
    text-align: right;
    overflow: visible;
    white-space: nowrap;
    flex-shrink: 0;
}
.cal-week-time-label .cal-tl-hour {
    position: absolute;
    top: 0;
    right: 6px;
    transform: translateY(-50%);
}
.cal-week-day-col {
    border-left: 1px solid rgba(0,0,0,0.05);
    position: relative;
    background: white;
}
.cal-week-hour-line {
    height: var(--cal-hour-height, 60px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative;
    transition: height 0.18s ease-out;
}
.cal-week-hour-line::after { content: none; }
.cal-week-hour-line::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(0,0,0,0.06);
    pointer-events: none;
}
[data-theme="dark"] .cal-week-hour-line { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cal-week-hour-line::before { background: rgba(255,255,255,0.05); }

/* ── Day View ─────────────────────────────────────────────────── */
.cal-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.cal-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    padding: 12px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
}
.cal-day-name-big {
    font-size: 28px;
    font-weight: 900;
    color: #1a1a2e;
    letter-spacing: -1px;
}
.cal-day-date-sub {
    font-size: 14px;
    color: rgba(26,26,46,0.45);
    font-weight: 500;
}
.cal-day-body {
    flex: 1;
    min-height: 0;          /* erlaubt Schrumpfen unter Inhaltshöhe → Scroll */
    overflow-y: auto;
    display: grid;
    grid-template-columns: 56px 1fr;
    background: #f0eef5;
    position: relative;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.cal-day-time-col {
    background: white;
    border-right: 1px solid rgba(0,0,0,0.07);
    position: sticky;
    left: 0;
    z-index: 2;
}
.cal-day-time-label {
    height: var(--cal-hour-height, 60px);
    transition: height 0.18s ease-out;
    position: relative;
    padding: 0 6px;
    font-size: 13px;
    color: rgba(26,26,46,0.4);
    font-weight: 600;
    text-align: right;
    overflow: visible;
    white-space: nowrap;
}
.cal-day-time-label .cal-tl-hour {
    position: absolute;
    top: 0;                      /* Zellen-Oberkante = Stundenlinie */
    right: 6px;
    transform: translateY(-50%); /* vertikal auf der Linie zentriert */
}
.cal-day-time-label .cal-tl-half,
.cal-week-time-label .cal-tl-half {
    display: none;
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    opacity: 0.55;
}
/* Halbe Stunden nur einblenden, wenn genug Platz da ist (Pinch-Zoom) */
.cal-zoomed-half .cal-day-time-label .cal-tl-half,
.cal-zoomed-half .cal-week-time-label .cal-tl-half {
    display: block;
}
/* Während eines aktiven Pinch-Zooms keine Transitions (sonst träge/ruckelig)
   und kein smooth-scroll, da wir scrollTop live nachführen. */
.cal-pinching .cal-day-time-label,
.cal-pinching .cal-week-time-label,
.cal-pinching .cal-day-hour-line,
.cal-pinching .cal-week-hour-line,
.cal-pinching .cal-event,
.cal-pinching .cal-today-line {
    transition: none !important;
}

/* Wird vom Drag-Handler beim Drop kurz auf das Termin-Element gesetzt,
   um die CSS-Transition (transform 0.12s) zu deaktivieren — sonst sieht
   man beim Loslassen, wie das Element zur neuen Position "schwebt".
   !important nötig, weil iOS Safari inline-style transition gelegentlich
   nicht zuverlässig respektiert. */
.cal-event.cal-event-dragging,
.cal-event.cal-event-no-transition {
    transition: none !important;
}
.cal-pinching .cal-day-body,
.cal-pinching .cal-week-body {
    scroll-behavior: auto !important;
}
html.cal-pinching, .cal-pinching body {
    scroll-behavior: auto !important;
}
.cal-day-events-col {
    position: relative;
    background: white;
}
.cal-day-hour-line {
    height: var(--cal-hour-height, 60px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
    transition: background 0.1s, height 0.18s ease-out;
}
.cal-day-hour-line:hover {
    background: rgba(0,122,255,0.03);
}
.cal-day-hour-line::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 0; right: 0;
    height: 1px;
    background: rgba(0,0,0,0.06);
    pointer-events: none;
}
.cal-day-hour-line::after { content: none; }
[data-theme="dark"] .cal-day-hour-line { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cal-day-hour-line::before { background: rgba(255,255,255,0.05); }

/* ── Calendar Events ──────────────────────────────────────────── */
.cal-event {
    position: absolute;
    left: 4px;
    right: 4px;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
    z-index: 5;
    overflow: hidden;
    transition: filter 0.12s, transform 0.12s, box-shadow 0.12s;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-height: 14px;
    /* Container Query: erlaubt Sub-Elementen, auf die EVENT-Höhe zu reagieren
       (z. B. Zeit ausblenden, wenn der Termin durch Rauszoomen zu klein wird). */
    container-type: size;
}
/* Bei sehr kleinen Events (Rauszoom) blende die Zeit aus – sie würde sonst
   den Titel verdrängen. Schwelle so gewählt, dass der Titel mit einer Zeile
   immer Vorrang hat. */
@container (max-height: 30px) {
    .cal-event-time { display: none; }
}
@container (max-height: 18px) {
    .cal-event-title {
        font-size: 10px;
        line-height: 1.1;
    }
}
.cal-event:hover {
    filter: brightness(0.93);
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10;
}
/* Alle Termin-Farben (auch die selbst angelegten) sind Pastellfarben aus
   der Swatch-Palette (#a8d4f4, #f4a8b0, …). Daher dunkle Schrift wie bei
   den task-events — eigenes Weiß auf Pastell war schlecht lesbar. */
.cal-event-title {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(26,26,46,0.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.cal-event-time {
    font-size: 10px;
    color: rgba(26,26,46,0.6);
    white-space: nowrap;
}
.cal-event.all-day {
    position: relative;
    left: auto; right: auto;
    display: block;
    margin: 2px 4px;
    border-radius: 5px;
}
.cal-event.task-event {
    background: var(--task-color, #a8d4f4) !important;
    border-radius: 8px;
}
.cal-event.task-event .cal-event-title {
    color: rgba(26,26,46,0.85);
}
.cal-event.task-event .cal-event-time {
    color: rgba(26,26,46,0.55);
}

/* Today line */
.cal-today-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--accent-red, #ff3b30);
    z-index: 8;
    pointer-events: none;
}
.cal-today-line::before {
    content: '';
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-red, #ff3b30);
}

/* ── Aktuelle Stunde hervorheben (Tag & Woche) ────────────────── */
.cal-day-hour-line.current-hour,
.cal-week-hour-line.current-hour {
    background: rgba(255,59,48,0.07);
}
.cal-day-time-label.current-hour,
.cal-week-time-label.current-hour {
    color: var(--accent-red, #ff3b30);
    font-weight: 800;
}
.cal-day-time-label.current-hour .cal-tl-hour,
.cal-week-time-label.current-hour .cal-tl-hour {
    color: var(--accent-red, #ff3b30);
}
[data-theme="dark"] .cal-day-hour-line.current-hour,
[data-theme="dark"] .cal-week-hour-line.current-hour {
    background: rgba(255,69,58,0.14);
}

/* ── All-Day Row ──────────────────────────────────────────────── */
.cal-allday-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    min-height: 34px;
    flex-shrink: 0;
    /* Höhe kappen: max. ~2 Zeilen ganztägige Einträge sichtbar.
       Mit der neuen 22px-Bar-Höhe + Lane-Padding ergibt 72px exakt 2 Lanes. */
    max-height: 72px;
    overflow: hidden;
    transition: max-height 0.22s ease;
}
.cal-allday-row.expanded {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
    /* Mobile: höhere Bars brauchen mehr Row-Höhe — zwei Lanes bleiben sichtbar */
    .cal-allday-row { min-height: 40px; max-height: 84px; }
}

/* Tagesansicht: Ganztägig-Leiste (Flex statt Grid) */
.cal-allday-daybar {
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    max-height: 72px;
    overflow: hidden;
    transition: max-height 0.22s ease;
}
@media (max-width: 600px) {
    .cal-allday-daybar { max-height: 84px; padding: 8px; gap: 6px; }
}
.cal-allday-daybar.expanded {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cal-allday-daybar-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(26,26,46,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
    white-space: nowrap;
}

/* Ausklapp-/Einklapp-Button (Pfeil) für die Ganztägig-Leiste */
.cal-allday-expander {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 20px;
    cursor: pointer;
    background: #f4f2f8;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    color: rgba(26,26,46,0.55);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    padding: 0 10px;
}
.cal-allday-expander:hover {
    background: #ece9f2;
    color: rgba(26,26,46,0.8);
}
/* "Griff"-Balken: signalisiert Ziehbarkeit (wie ein Sheet-Handle) */
.cal-allday-grabber {
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: rgba(26,26,46,0.22);
    transition: background 0.15s, width 0.15s;
}
.cal-allday-expander:hover .cal-allday-grabber { background: rgba(26,26,46,0.32); }
/* Zähler: "+N" der nicht sichtbaren ganztägigen Einträge */
.cal-allday-expander-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(26,26,46,0.6);
    letter-spacing: 0.2px;
    line-height: 1;
}
.cal-allday-expander:hover .cal-allday-expander-count {
    color: rgba(26,26,46,0.85);
}
.cal-allday-chevron {
    transition: transform 0.24s cubic-bezier(0.22,0.61,0.36,1);
    opacity: 0.7;
}
.cal-allday-expander.expanded .cal-allday-chevron {
    transform: rotate(180deg);
}
[data-theme="dark"] .cal-allday-daybar { background: #1c2333; }
[data-theme="dark"] .cal-allday-expander {
    background: #232b3d;
    color: rgba(232,234,240,0.6);
    border-bottom-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .cal-allday-expander:hover { background: #2a3346; }
[data-theme="dark"] .cal-allday-grabber { background: rgba(255,255,255,0.28); }
.cal-allday-label {
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(26,26,46,0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.cal-allday-cell {
    border-left: 1px solid rgba(0,0,0,0.05);
    padding: 2px 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Tagesansicht: Ganztägig-Einträge in eigener Spalte rechts neben dem
   "ganztägig"-Label (das so breit ist wie die Uhrzeitspalte). */
.cal-allday-row--day .cal-allday-day-events {
    border-left: 1px solid rgba(0,0,0,0.05);
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}
[data-theme="dark"] .cal-allday-row--day .cal-allday-day-events {
    border-left-color: rgba(255,255,255,0.07);
}

/* Durchgehende Mehrtages-Balken-Schicht der Wochenansicht. Die Balken liegen
   als absolute Overlay-Schicht über der 7-Tage-Breite, sodass mehrtägige
   Einträge genau einmal von Start bis Ende durchlaufen (keine Tages-Doppelung). */
.cal-allday-bars {
    position: relative;
    min-height: 24px;
    margin: 2px 0;
}
/* Höhe orientiert sich an Google Kalender (~22px Desktop, ~20px Mobile),
   damit die ganztägigen Termine bequem antippbar sind. Synchron mit
   AD_LANE_H in calendar.js — Änderungen müssen dort mitziehen. */
.cal-allday-bar {
    position: absolute;
    height: 22px;
    line-height: 22px;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(26,26,46,0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    cursor: pointer;
    transition: filter 0.12s;
}
.cal-allday-bar:hover { filter: brightness(0.92); }
.cal-allday-bar.task-event {
    background: var(--task-color, #a8d4f4);
    color: rgba(26,26,46,0.85);
}
@media (max-width: 600px) {
    /* Mobile: Daumen-tauglich (≥ 26px Touch-Target, wie Google Kalender App).
       Synchron mit AD_LANE_H im JS — wenn hier geändert, dort mitziehen. */
    .cal-allday-bar {
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        padding: 0 8px;
        border-radius: 6px;
    }
}

/* ── Event Modal ──────────────────────────────────────────────── */
.cal-event-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
}
/* Einblenden wie in der Projektplanung: Der Grauschleier BLENDET nur
   über, die Karte darüber kommt leicht heran.

   Vorher lag die Bewegung auf dem Overlay selbst (calModalIn: Deckkraft
   UND scale/translate). Damit skalierte der Schleier mit — der ganze
   Bildschirm schien kurz heranzuzoomen, während sich das Fenster
   „Neue Aufgabe" mit ruhig überblendendem Hintergrund öffnet. Die
   Bewegung gehört auf die Karte, nicht auf die Fläche dahinter. */
.cal-event-overlay.open {
    display: flex;
    animation: calSchleierEin 0.25s ease;
}
@keyframes calSchleierEin {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cal-event-overlay.open .cal-event-modal {
    animation: calKarteEin 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes calKarteEin {
    from { transform: scale(0.96) translateY(8px); }
    to   { transform: scale(1) translateY(0); }
}
/* Im Seitenblatt fährt die Hülle von rechts herein (calSheetIn weiter
   unten) — die Karte darf dann nicht zusätzlich zappeln. */
.cal-event-overlay.as-sheet.open .cal-event-modal { animation: none; }
.cal-event-modal {
    /* Dieselbe Fläche wie das Fenster „Neue Aufgabe" in der
       Projektplanung (task_dialogs.css). Vorher stand hier
       #ffffffbd — Weiss mit 74 % Deckkraft. Im Glass-Modus schien
       dadurch der Kalender durch das Fenster hindurch, während das
       Aufgabenfenster daneben undurchsichtig war. Hell- und
       Dunkelmodus sahen richtig aus, weil sie weiter unten eigene
       Regeln hatten — nur der Standardfall nicht.

       Über die Variable gibt es die Fläche jetzt an EINER Stelle,
       und ein Themenwechsel läuft ohne Zusatzregeln mit. */
    background: var(--td-surface, #ffffff);
    border-radius: 20px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}

/* ── Side-Sheet-Modus (Desktop + Tablet Landscape) ─────────────
   Beim Klick in einen Wochen-/Tagesansicht-Slot fährt das Modal von
   rechts rein, ohne den Kalender zu verdecken. Der angeklickte Tag
   bleibt links sichtbar — User behält Kontext.
   Aktivierung: .cal-event-overlay.as-sheet (gesetzt aus JS, nur wenn
   currentView ∈ {week, day} und window.innerWidth ≥ 900). */
.cal-event-overlay.as-sheet {
    /* Sheet beginnt erst UNTER dem Top-Header — die Navigation oben bleibt
       sichtbar und voll bedienbar. Die exakten Werte (--cal-sheet-top und
       --cal-sheet-bottom) werden in JS aus #calendar-view.getBoundingClientRect()
       berechnet, damit Resize/Scroll mitgehen. */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Overlay nur der rechte Streifen — Rest des Bildschirms bedienbar */
    pointer-events: none;
    inset: var(--cal-sheet-top, 80px) 16px var(--cal-sheet-bottom, 16px) auto;
    width: var(--cal-sheet-width, 420px);
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
}
.cal-event-overlay.as-sheet.open {
    /* Eigene Slide-In-Animation — die Scale-Animation oben würde rumpeln */
    animation: calSheetIn 0.28s cubic-bezier(0.32, 0.72, 0.0, 1);
}
@keyframes calSheetIn {
    from { transform: translateX(100%); opacity: 0.7; }
    to   { transform: translateX(0);    opacity: 1;   }
}
.cal-event-overlay.as-sheet .cal-event-modal {
    /* Sheet streckt sich vertikal voll, klickbar ist nur das Modal.
       Optisch wirkt es wie eine Verlängerung der Kalender-Karte:
       gleicher Hintergrund, Border-Radius matched, sanfter Schatten. */
    pointer-events: auto;
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0px 14px 14px 0px;
    display: flex;
    flex-direction: column;
    /* Sanfter Schatten — wirkt wie schwebende Karte, nicht wie Fremdkörper */
    box-shadow: 0 4px 24px rgba(30, 60, 120, 0.10), 0 1px 0 rgba(255,255,255,0.7) inset;
    border: 1px solid rgba(255,255,255,0.55);
}
.cal-event-overlay.as-sheet .cal-event-modal-body {
    flex: 1;
    max-height: none;
}

/* Kalender-Container schmaler ziehen, wenn der Sheet offen ist.
   .cal-split-mode wird beim Öffnen vom JS auf #calendar-view gesetzt. */
#calendar-view.cal-split-mode {
    /* Padding-right = Sheet-Breite + 16px Lückenpuffer */
    padding-right: calc(var(--cal-sheet-width, 405px) + 16px);
    transition: padding-right 0.28s cubic-bezier(0.32, 0.72, 0.0, 1);
}
#calendar-view {
    transition: padding-right 0.28s cubic-bezier(0.32, 0.72, 0.0, 1);
}

/* Toolbar einzeilig halten, wenn Sheet schmal macht. Auf iPad Landscape
   bleibt sonst nicht genug Platz und die Zeile bricht zweizeilig um. */
#calendar-view.cal-split-mode .cal-toolbar {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
    padding: 10px 12px;
}
#calendar-view.cal-split-mode .cal-title {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#calendar-view.cal-split-mode .cal-today-btn {
    padding: 6px 10px;
    font-size: 11px;
}
#calendar-view.cal-split-mode .cal-nav-btn {
    width: 30px;
    height: 30px;
    font-size: 14px;
}
#calendar-view.cal-split-mode .cal-view-btn {
    padding: 5px 9px;
    font-size: 11px;
}

@media (max-width: 900px) {
    /* Auf Schmalformat IMMER zentrales Modal — kein Sheet-Modus */
    .cal-event-overlay.as-sheet {
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        pointer-events: auto;
        inset: 0;
        width: auto;
        padding: 20px;
        align-items: center;
        justify-content: center;
    }
    .cal-event-overlay.as-sheet .cal-event-modal {
        max-width: 460px;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 40px);
        border-radius: 20px;
        box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    }
    #calendar-view.cal-split-mode { padding-right: 0; }
}

/* ── Date-Range-Picker (Flugbuchungs-Style) ────────────────────
   Custom-Picker, der bei Klick auf die Start/End-Date-Inputs auf
   Desktop (>= 900px) statt des nativen OS-Pickers erscheint. Lässt
   den User einen zusammenhängenden Zeitraum wählen mit visueller
   Range-Markierung. Auf Mobile bleibt der native Picker aktiv. */
/* Mobile-Backdrop hinter dem Picker — fängt Outside-Klicks und verdunkelt
   den Hintergrund leicht. Wird nur auf Mobile (max-width: 600px) sichtbar. */
.cal-rangepicker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100099;
    background: rgba(0,0,0,0.4);
    display: none;
}
.cal-rangepicker-backdrop.open { display: block; }
@media (min-width: 601px) {
    /* Auf Desktop kein Backdrop — Picker ist Popover unter dem Input */
    .cal-rangepicker-backdrop.open { display: none; }
}

.cal-rangepicker {
    position: absolute;
    /* z-index muss ÜBER Gantt-Edit-Modal (100001) und Editor-Overlay liegen,
       sonst öffnet er sich „unsichtbar" hinter dem Modal. */
    z-index: 100100;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 14px;
    width: 300px;
    font-family: inherit;
    display: none;
}

/* Mobile: Picker ist zentriert, deutlich größer, mit X-Knopf zum Schließen.
   Größeres Touch-Target für die Tage (~40px statt 36px). */
@media (max-width: 600px) {
    .cal-rangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100vw - 32px));
        padding: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }
    .cal-rangepicker .cal-rp-day {
        height: 42px;
        font-size: 14px;
    }
    .cal-rangepicker .cal-rp-nav {
        width: 36px;
        height: 36px;
        font-size: 19px;
    }
    .cal-rangepicker .cal-rp-month {
        font-size: 15px;
    }
    .cal-rangepicker .cal-rp-weekdays {
        font-size: 11px;
    }
}

/* Schließen-Knopf — nur auf Mobile sichtbar, auf Desktop schließt Outside-Click */
.cal-rp-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    color: rgba(26,26,46,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.15s;
}
.cal-rp-close:hover { background: rgba(0,0,0,0.06); }
@media (max-width: 600px) {
    .cal-rp-close { display: flex; }
}
[data-theme="dark"] .cal-rp-close { color: #E8EAF0; }
[data-theme="dark"] .cal-rp-close:hover { background: rgba(255,255,255,0.06); }
.cal-rangepicker.open { display: block; }
.cal-rp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 10px;
}
.cal-rp-month {
    font-weight: 700;
    font-size: 14px;
    color: #1a1a2e;
    flex: 1;
    text-align: center;
}
.cal-rp-nav {
    background: none;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 17px;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.15s;
}
.cal-rp-nav:hover { background: rgba(0,0,0,0.06); }
.cal-rp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(26,26,46,0.45);
    letter-spacing: 0.4px;
}
.cal-rp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-rp-day {
    background: none;
    border: none;
    width: 100%;
    height: 36px;
    border-radius: 50%;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a2e;
    cursor: pointer;
    transition: background 0.12s;
    padding: 0;
}
.cal-rp-day:hover:not(.is-start):not(.is-end) {
    background: rgba(0,0,0,0.06);
}
.cal-rp-day.is-outside-month {
    color: rgba(26,26,46,0.28);
    pointer-events: none;
}
.cal-rp-day.is-today {
    box-shadow: inset 0 0 0 1.5px var(--accent-blue);
}
.cal-rp-day.is-in-range {
    background: rgba(0,122,255,0.14);
    border-radius: 0;
}
.cal-rp-day.is-start,
.cal-rp-day.is-end {
    background: var(--accent-blue);
    color: white;
    font-weight: 700;
}
/* Pill-Übergang am Range-Rand: Start links abgerundet, Ende rechts */
.cal-rp-day.is-start { border-radius: 50% 0 0 50%; }
.cal-rp-day.is-end   { border-radius: 0 50% 50% 0; }
.cal-rp-day.is-start.is-end { border-radius: 50%; }
.cal-rp-hint {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 11px;
    color: rgba(26,26,46,0.6);
    text-align: center;
}

/* Dark-Mode */
[data-theme="dark"] .cal-rangepicker {
    background: #1C2333;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
[data-theme="dark"] .cal-rp-month,
[data-theme="dark"] .cal-rp-nav,
[data-theme="dark"] .cal-rp-day {
    color: #E8EAF0;
}
[data-theme="dark"] .cal-rp-day.is-outside-month { color: rgba(205,213,224,0.28); }
[data-theme="dark"] .cal-rp-day:hover:not(.is-start):not(.is-end) {
    background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .cal-rp-weekdays,
[data-theme="dark"] .cal-rp-hint { color: rgba(205,213,224,0.55); }
[data-theme="dark"] .cal-rp-header,
[data-theme="dark"] .cal-rp-hint { border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cal-rp-nav:hover { background: rgba(255,255,255,0.06); }

.cal-event-modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cal-event-modal-title {
    font-size: 18px;
    font-weight: 900;
    color: #1a1a2e;
    letter-spacing: -0.3px;
}
.cal-event-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,0.06);
    color: rgba(26,26,46,0.6);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.cal-event-modal-close:hover {
    background: rgba(0,0,0,0.1);
    color: #1a1a2e;
}
.cal-event-modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(90vh - 140px);
    overflow-y: auto;
}
.cal-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cal-field-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(26,26,46,0.55);
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.cal-field-input {
    padding: 10px 14px;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a2e;
    background: white;
    transition: border-color 0.15s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.cal-field-input:focus {
    border-color: var(--accent-blue);
}
.cal-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cal-field-row.triple {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Date/Time-Inputs müssen volle Breite haben — sonst staucht
   Safari iOS sie auf Default-Breite und sie wirken "leer". */
.cal-field-row .cal-field-input,
.cal-field-row .cal-field-group {
    width: 100%;
    min-width: 0;
}
.cal-field-input[type="date"],
.cal-field-input[type="time"],
.cal-field-input[type="datetime-local"] {
    width: 100%;
    min-height: 44px;          /* sonst sind sie auf iOS niedriger als text-inputs */
    line-height: 1.2;
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
}

/* Tablet & schmale Viewports: Datum + Uhrzeit untereinander stapeln,
   damit nichts eingequetscht wirkt. */
@media (max-width: 640px) {
    .cal-field-row,
    .cal-field-row.triple {
        grid-template-columns: 1fr;
    }
}
/* iPad-Hochformat: Datum bleibt zweispaltig, Triple wird zwei +eins */
@media (min-width: 641px) and (max-width: 900px) {
    .cal-field-row.triple {
        grid-template-columns: 1fr 1fr;
    }
}
.cal-color-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cal-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: transform 0.12s, border-color 0.12s;
}
.cal-color-swatch:hover {
    transform: scale(1.15);
}
.cal-color-swatch.selected {
    border-color: #1a1a2e;
    transform: scale(1.1);
}
.cal-allday-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.cal-allday-toggle input { accent-color: var(--accent-blue); }
.cal-allday-toggle span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(26,26,46,0.7);
}
.cal-event-modal-footer {
    padding: 16px 24px;
    display: flex;
    gap: 10px;
    border-top: 1px solid rgba(0,0,0,0.07);
}
.cal-modal-btn {
    flex: 1;
    padding: 11px 16px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s;
}
.cal-modal-btn-save {
    background: var(--accent-blue);
    color: white;
}
.cal-modal-btn-save:hover {
    transform: translateY(-1px);
}
.cal-modal-btn-cancel {
    background: rgba(0,0,0,0.06);
    color: rgba(26,26,46,0.7);
}
.cal-modal-btn-cancel:hover {
    background: rgba(0,0,0,0.1);
}
.cal-modal-btn-delete {
    background: rgba(255,59,48,0.08);
    color: var(--accent-red, #ff3b30);
    flex: 0;
    padding: 11px 14px;
}
.cal-modal-btn-delete:hover {
    background: rgba(255,59,48,0.15);
}

/* ── Recurrence section ───────────────────────────────────────── */
.cal-recurrence-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cal-recurrence-weekdays {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.cal-weekday-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.12);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    color: rgba(26,26,46,0.6);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cal-weekday-btn.selected {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

/* ── Event Detail Popup ───────────────────────────────────────── */
.cal-event-detail-popup {
    position: fixed;
    z-index: 4000;
    background: white;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    min-width: 240px;
    max-width: 300px;
    overflow: hidden;
    animation: popupIn 0.2s ease-out;
}
@keyframes popupIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.cal-detail-color-bar {
    height: 4px;
    background: var(--event-color, var(--accent-blue));
}
.cal-detail-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cal-detail-title {
    font-size: 15px;
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -0.2px;
}
.cal-detail-time {
    font-size: 12px;
    color: rgba(26,26,46,0.5);
    display: flex;
    align-items: center;
    gap: 5px;
}
.cal-detail-desc {
    font-size: 12.5px;
    color: rgba(26,26,46,0.65);
    line-height: 1.5;
}
.cal-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.cal-detail-action-btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 8px;
    border: none;
    font-size: 11.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s;
}
.cal-detail-action-btn.edit {
    background: rgba(0,122,255,0.08);
    color: var(--accent-blue);
}
.cal-detail-action-btn.edit:hover {
    background: rgba(0,122,255,0.14);
}
.cal-detail-action-btn.delete {
    background: rgba(255,59,48,0.08);
    color: var(--accent-red, #ff3b30);
}
.cal-detail-action-btn.delete:hover {
    background: rgba(255,59,48,0.14);
}

/* ── Dark Mode ────────────────────────────────────────────────── */
[data-theme="dark"] #calendar-view {
    background: #1a1f2e;
}
[data-theme="dark"] .cal-toolbar {
    background: #1c2333;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme="dark"] .cal-title,
[data-theme="dark"] .cal-day-name-big {
    color: #e8eaf0;
}
[data-theme="dark"] .cal-nav-btn,
[data-theme="dark"] .cal-today-btn,
[data-theme="dark"] .cal-export-btn {
    border-color: rgba(255,255,255,0.1);
    color: rgba(232,234,240,0.65);
}
[data-theme="dark"] .cal-nav-btn:hover,
[data-theme="dark"] .cal-today-btn:hover {
    background: rgba(255,255,255,0.07);
}
[data-theme="dark"] .cal-view-switcher {
    background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .cal-view-btn.active {
    background: rgba(255,255,255,0.12);
    color: #e8eaf0;
}
[data-theme="dark"] .cal-month-headers,
[data-theme="dark"] .cal-week-header,
[data-theme="dark"] .cal-week-time-col,
[data-theme="dark"] .cal-week-day-col,
[data-theme="dark"] .cal-allday-row,
[data-theme="dark"] .cal-day-time-col,
[data-theme="dark"] .cal-day-events-col,
[data-theme="dark"] .cal-month-cell,
[data-theme="dark"] .cal-day-header {
    background: #1c2333;
}
[data-theme="dark"] .cal-month-cell.other-month {
    background: rgba(28,35,51,0.6);
}
[data-theme="dark"] .cal-month-cell.today {
    background: rgba(0,122,255,0.08);
}
[data-theme="dark"] .cal-month-grid,
[data-theme="dark"] .cal-month-week-cells {
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .cal-cell-day-num,
[data-theme="dark"] .cal-week-day-num {
    color: rgba(232,234,240,0.7);
}
[data-theme="dark"] .cal-day-time-label,
[data-theme="dark"] .cal-week-time-label {
    color: rgb(232 234 240);
}
/* Das Terminfenster steht hier bewusst NICHT mehr mit einer eigenen
   Hintergrundfarbe: Es holt sie über --td-surface, das für beide
   Themen bereits die passenden Werte führt. Drei Stellen für eine
   Fläche liefen sonst früher oder später auseinander. Das
   Detail-Sprechfenster hat keine solche Variable und behält seine. */
[data-theme="dark"] .cal-event-modal,
[data-theme="dark"] .cal-event-detail-popup {
	border: none !important;
	box-shadow: none! important;
}
[data-theme="dark"] .cal-event-detail-popup { background: #1c2333; }

[data-theme="white"] .cal-event-detail-popup {
    background: white !important;
}

[data-theme="dark"] .cal-event-modal-title,
[data-theme="dark"] .cal-detail-title {
    color: #e8eaf0;
}
[data-theme="dark"] .cal-event-modal-header,
[data-theme="dark"] .cal-event-modal-footer {
    border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .cal-field-input {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
    color: #e8eaf0;
}
[data-theme="dark"] .cal-field-label { color: rgba(232,234,240,0.4); }
[data-theme="dark"] .cal-event-modal-close {
    background: rgba(255,255,255,0.07);
    color: rgba(232,234,240,0.5);
}
[data-theme="dark"] .cal-month-day-header {
    color: rgba(232,234,240,0.35);
}
[data-theme="dark"] .cal-detail-time,
[data-theme="dark"] .cal-detail-desc,
[data-theme="dark"] .cal-day-date-sub {
    color: rgba(232,234,240,0.4);
}
[data-theme="dark"] .cal-month-event.task-event {
    background: var(--task-color, #a8d4f4);
    color: rgba(26,26,46,0.85);
}
[data-theme="dark"] .cal-modal-btn-cancel {
    background: rgba(255,255,255,0.07);
    color: rgba(232,234,240,0.65);
}
[data-theme="dark"] .cal-weekday-btn {
    border-color: rgba(255,255,255,0.1);
    color: rgba(232,234,240,0.5);
}



/* ── Responsive ───────────────────────────────────────────────── */
/* Breakpoint exakt auf den der App-Hülle (dashboard.css, 600px) und der
   Mobile-Bottom-Nav abgestimmt. Sonst entsteht im Band 601–760px ein
   Mismatch: "Seite-scrollt"-Layout ohne passende Hülle → Inhalt wird
   am Viewport-Rand abgeschnitten. */
@media (max-width: 600px) {
    .cal-toolbar {
        padding: 10px 14px;
        gap: 8px;
    }
    .cal-title {
        font-size: 15px;
    }
    .cal-view-btn {
        padding: 5px 8px;
        font-size: 11px;
    }
    .cal-new-event-btn span:last-child {
        display: none;
    }
    .cal-export-btn span {
        display: none;
    }
    .cal-week-body,
    .cal-week-header {
        grid-template-columns: 44px repeat(7, 1fr);
    }
    .cal-day-body {
        grid-template-columns: 44px 1fr;
    }
    .cal-allday-row {
        grid-template-columns: 44px 1fr;
    }
    /* Zeitbeschriftungen links für schmale Spalte anpassen */
    .cal-day-time-label,
    .cal-week-time-label {
        font-size: 12px;
        padding: 0 3px;
    }
    .cal-day-time-label .cal-tl-hour,
    .cal-week-time-label .cal-tl-hour { right: 3px; }
    .cal-day-time-label .cal-tl-half,
    .cal-week-time-label .cal-tl-half { font-size: 12px; right: 3px; }
    .cal-week-day-num {
        font-size: 15px;
        width: 28px;
        height: 28px;
    }
    .cal-month-grid {
        grid-auto-rows: minmax(58px, 1fr);
    }
    .cal-month-cell {
        --cell-px: 4px;
        min-height: 58px;
        padding: 4px;
    }
    .cal-cell-day-num {
        font-size: 11px;
        width: 22px;
        height: 22px;
    }

    .cal-field-row { grid-template-columns: 1fr; }
    .cal-field-row.triple { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    /* Tag/Woche/Monat-Umschalter bleibt in der Toolbar sichtbar
       (die Bottom-Nav ist jetzt einheitlich und enthält ihn nicht mehr).
       Er rückt in eine eigene volle Zeile, damit es nicht eng wird. */
    .cal-view-switcher {
        display: flex;
        order: 5;
        flex: 1 0 100%;
        justify-content: center;
        margin-top: 2px;
    }
    .cal-view-btn { flex: 1; text-align: center; }
}

/* ── Mobile: NATIVES Seiten-Scrollen (wie Dashboard) ──────────────
   Statt fester Höhe + innerem Scroll wächst der Kalender auf Mobile
   einfach mit seinem Inhalt und die GANZE SEITE scrollt nativ. Nur so
   kann Chrome (Android) die URL-Leiste beim Scrollen ein-/ausblenden
   und das Seitenende ist immer erreichbar (nichts wird abgeschnitten). */
@media (max-width: 600px) {
    #calendar-view {
        height: auto !important;
        max-height: none !important;
        flex: none !important;
        overflow: visible;
    }
    #cal-content {
        overflow: visible !important; /* übersteuert Inline-Style aus calendar_view.php */
    }
    .cal-month, .cal-week, .cal-day {
        overflow: visible;
        min-height: 0;
    }
    /* Innere Scroll-Container aufheben → Inhalt bestimmt Höhe, Seite scrollt.
       touch-action: pan-y bleibt erhalten: vertikal scrollt die Seite nativ,
       horizontale Geste übernimmt weiterhin der Swipe-Handler. */
    .cal-month-grid,
    .cal-week-body,
    .cal-day-body {
        overflow: visible !important;
        min-height: 0;
    }
    /* Toolbar bleibt beim Seiten-Scroll oben erreichbar */
    .cal-toolbar {
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    [data-theme="dark"] .cal-toolbar {
        background: rgba(28,35,51,0.97);
    }
    /* Wochen-/Tages-Kopf + Ganztägig-Zeile bleiben unter der Toolbar kleben,
       damit Tagesnamen/Spaltenzuordnung beim Scrollen sichtbar bleiben. */
    .cal-month-headers,
    .cal-week-header,
    .cal-day-header {
        position: sticky;
        top: var(--cal-toolbar-h, 56px);
        z-index: 15;
    }
    /* Ganztägig-Zeile bleibt unter dem Wochen-/Tageskopf kleben, damit die
       ganztägigen Einträge beim vertikalen Scrollen sichtbar bleiben.
       --cal-head-h = Höhe von Toolbar + Kopf (per JS gesetzt). */
    .cal-allday-row {
        position: sticky;
        top: var(--cal-head-h, 92px);
        z-index: 14;
    }
    /* Ausklapp-Button klebt direkt unter der Ganztägig-Zeile (deren aktuelle
       Höhe in --cal-allday-h steckt), bleibt also beim Scrollen erreichbar. */
    .cal-allday-expander {
        position: sticky;
        top: calc(var(--cal-head-h, 92px) + var(--cal-allday-h, 64px));
        z-index: 13;
        /* Schmal halten – aber deckend (nicht transparent), damit
           darunterliegende Stundenzeilen nicht durchscheinen. */
        height: 22px;
        background: #f1eef7;
    }
    .cal-allday-expander .cal-allday-grabber {
        width: 32px;
        height: 4px;
    }
    .cal-allday-expander-count {
        font-size: 10.5px;
    }
    [data-theme="dark"] .cal-allday-expander {
        background: #222a3b;
    }
    /* Unten Platz für die fixe Mobile-Bottom-Nav freihalten, sonst
       verdeckt sie im Page-Scroll-Modell die letzten Stunden (≈ ab 22 Uhr).
       Höhe der Nav (~58px) + sichere Bereiche; großzügig bemessen. */
	.cal-week-body,
    .cal-day-body {
        padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)) !important;
    }

.cal-month-grid {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Balken in der Monatsansicht für schmale Spalten kompakter — aber nicht so
       extrem klein wie vorher (war 12px, mit dunkler Schrift nicht mehr lesbar) */
    .cal-month-bar {
        height: 16px;
        line-height: 16px;
        font-size: 10.5px;
        padding: 0 6px;
        border-radius: 4px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Arbeitszeiten-Schattierung (Tag/Woche): Stunden außerhalb der
   eingestellten Arbeitszeit werden dezent abgedunkelt.
   ═══════════════════════════════════════════════════════════════ */
.cal-week-hour-line.off-hours,
.cal-day-hour-line.off-hours {
    background: rgba(0,0,0,0.035);
}
[data-theme="dark"] .cal-week-hour-line.off-hours,
[data-theme="dark"] .cal-day-hour-line.off-hours {
    background: rgba(255,255,255,0.035);
}
.cal-week-time-label.off-hours,
.cal-day-time-label.off-hours {
    opacity: 0.45;
}

/* ═══════════════════════════════════════════════════════════════
   Kalender-Einstellungen (Zahnrad-Modal)
   ═══════════════════════════════════════════════════════════════ */
.cal-settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
}
.cal-settings-overlay.open {
    display: flex;
    animation: calModalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cal-settings-modal {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}
[data-theme="dark"] .cal-settings-modal { background: #1c2333; color: #e8eaf0; }
.cal-settings-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
[data-theme="dark"] .cal-settings-header { border-bottom-color: rgba(255,255,255,0.08); }
.cal-settings-title { font-size: 17px; font-weight: 800; color: #1a1a2e; }
[data-theme="dark"] .cal-settings-title { color: #e8eaf0; }
.cal-set-close {
    width: 32px; height: 32px;
    border: none; background: rgba(0,0,0,0.05);
    border-radius: 8px; cursor: pointer;
    color: rgba(26,26,46,0.6);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.cal-set-close:hover { background: rgba(0,0,0,0.1); }
[data-theme="dark"] .cal-set-close { background: rgba(255,255,255,0.06); color: rgba(232,234,240,0.7); }
.cal-settings-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 22px; }
.cal-set-group { display: flex; flex-direction: column; gap: 6px; }
.cal-set-label { font-size: 13.5px; font-weight: 700; color: #1a1a2e; }
[data-theme="dark"] .cal-set-label { color: #e8eaf0; }
.cal-set-hint { font-size: 11.5px; color: rgba(26,26,46,0.5); line-height: 1.4; margin-bottom: 4px; }
[data-theme="dark"] .cal-set-hint { color: rgba(232,234,240,0.5); }
.cal-set-time-row { display: flex; gap: 12px; }
.cal-set-time-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cal-set-time-field label { font-size: 11px; font-weight: 600; color: rgba(26,26,46,0.5); }
[data-theme="dark"] .cal-set-time-field label { color: rgba(232,234,240,0.5); }
.cal-set-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; color: rgba(26,26,46,0.75);
    cursor: pointer; margin-top: 8px;
}
[data-theme="dark"] .cal-set-check { color: rgba(232,234,240,0.75); }
.cal-set-check input { width: 16px; height: 16px; accent-color: var(--accent-blue); }

/* Projekt-Liste in den Kalender-Einstellungen */
.cal-set-plans-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 4px;
    background: rgba(255,255,255,0.5);
}
[data-theme="dark"] .cal-set-plans-list {
    border-color: rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
}
.cal-set-plan-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}
.cal-set-plan-row:hover {
    background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .cal-set-plan-row:hover {
    background: rgba(255,255,255,0.05);
}
.cal-set-plan-row + .cal-set-plan-row {
    border-top: 1px solid rgba(0,0,0,0.04);
}
[data-theme="dark"] .cal-set-plan-row + .cal-set-plan-row {
    border-top-color: rgba(255,255,255,0.04);
}
.cal-set-plan-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}
.cal-set-plan-name {
    flex: 1 1 auto;
    font-size: 13.5px;
    color: rgba(26,26,46,0.85);
    word-break: break-word;
    line-height: 1.35;
}
[data-theme="dark"] .cal-set-plan-name { color: rgba(232,234,240,0.85); }
.cal-set-plans-loading,
.cal-set-plans-empty {
    padding: 12px 10px;
    font-size: 12.5px;
    color: rgba(26,26,46,0.5);
    text-align: center;
}
[data-theme="dark"] .cal-set-plans-loading,
[data-theme="dark"] .cal-set-plans-empty { color: rgba(232,234,240,0.5); }

.cal-set-plans-error { color: #c0392b; }
[data-theme="dark"] .cal-set-plans-error { color: #ff7060; }

/* Untergruppen-Trennlinie + Badge für „geteilte Projekte" in der
   Kalender-Einstellungen-Liste. Optisch zurückhaltend, gleiche Karte. */
.cal-set-plans-divider {
    margin: 8px 4px 4px;
    padding: 8px 6px 4px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(26,26,46,0.45);
}
[data-theme="dark"] .cal-set-plans-divider {
    border-top-color: rgba(255,255,255,0.08);
    color: rgba(232,234,240,0.45);
}
.cal-set-plans-divider + .cal-set-plan-row {
    border-top: none;
}
.cal-set-plan-badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(107,92,255,0.10);
    color: #5346d6;
    border: 1px solid rgba(107,92,255,0.18);
}
[data-theme="dark"] .cal-set-plan-badge {
    background: rgba(107,92,255,0.20);
    color: #c4b5fd;
    border-color: rgba(107,92,255,0.32);
}

.cal-settings-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(0,0,0,0.07);
    display: flex; justify-content: flex-end; gap: 10px;
}
[data-theme="dark"] .cal-settings-footer { border-top-color: rgba(255,255,255,0.08); }

/* Zahnrad ersetzt auf dem Smartphone den (dort redundanten) Termin-Button:
   Neue Termine legt man mobil über das zentrale + der unteren Leiste an. */
@media (max-width: 600px) {
    .cal-new-event-btn { display: none !important; }
}