/* KaTaGo e.V. Custom Styles — Light Mode */

/* Tailwind Custom Configuration - Injected via CDN Script */

:root {
    --primary: #E96B1E;
    --primary-dark: #C85A14;
    --secondary: #F2A81E;
    --secondary-dark: #D98E0A;
    /* Markenorange für Text und Buttons mit weißer Schrift (WCAG AA 4,5:1);
       --primary bleibt für Flächen, Rahmen und große Schrift. */
    --primary-text: #B24E12;
    --primary-button: #C2560F;
    --primary-button-hover: #A5480C;
    /* Warnhinweise (z. B. wenige Plätze): eigene Farbe, nicht die Buttonfarbe. */
    --warn-text: #B45309;
    --accent-red: #E1432E;
    --accent-teal: #059669;
    --accent-purple: #7c3aed;
    --dark-navy: #f8fafc;
    --dark-surface: #ffffff;
    --dark-card: #ffffff;
    --text-light: #1e293b;
    --text-muted: #64748b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Benutzerverwaltung: Überblick-Chips, Sortierköpfe, Zeilen-Buttons ────
   Theme-unabhängig gesetzt, weil das Admin-Light-Theme einzelne Tailwind-Farben
   überschreibt. */
.stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .5rem .85rem;
    border-radius: .5rem;
    border: 1px solid #dbe1ea;
    background-color: #ffffff;
    color: #4a5565;
    font-size: .8125rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.stat-chip:hover { border-color: #e96b1e; color: #1e2939; }
.stat-chip-zahl { font-size: 1.05rem; font-weight: 700; color: #1e2939; }
.stat-chip.is-active {
    border-color: #e96b1e;
    background-color: rgba(233, 107, 30, .08);
    color: #1e2939;
}
.stat-chip.is-active .stat-chip-zahl { color: #c2560f; }

/* Sortierbare Spaltenüberschrift */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #6a7282;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}
.th-sort:hover { color: #1e2939; }
.th-arrow::after { content: ''; opacity: .45; font-size: .7rem; }
.th-sort[data-dir="asc"] .th-arrow::after  { content: '▲'; opacity: 1; }
.th-sort[data-dir="desc"] .th-arrow::after { content: '▼'; opacity: 1; }
.th-sort[data-dir] { color: #c2560f; }

/* Aktions-Button in der Zeile: beschriftet statt nur Icon */
.btn-zeile {
    display: inline-block;
    padding: .35rem .7rem;
    border-radius: .4rem;
    border: 1px solid #dbe1ea;
    background-color: #ffffff;
    color: #364153;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.btn-zeile + .btn-zeile { margin-left: .4rem; }
.btn-zeile:hover { border-color: #e96b1e; color: #c2560f; }
.btn-zeile-warn:hover { border-color: #dc2626; color: #dc2626; background-color: #fef2f2; }

html.dark .stat-chip { background-color: #2a3040; border-color: #414855; color: #cfd4dc; }
html.dark .stat-chip-zahl { color: #ffffff; }
html.dark .stat-chip.is-active { border-color: #f0863c; background-color: rgba(240, 134, 60, .16); }
html.dark .btn-zeile { background-color: #2a3040; border-color: #414855; color: #cfd4dc; }

/* ── Admin-Schalter (Toggle) ──────────────────────────────────────────────
   Theme-unabhängige Klassen mit bewusst starken Kontrasten: die "AUS"-Spur muss
   sich auch auf einem weißen Panel klar abheben, damit AN/AUS unterscheidbar
   bleibt. Deshalb keine bg-dark-*-Utilities verwenden. */
.switch-track {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: #cbd5e1;            /* AUS: klar sichtbares Grau */
    border: 1px solid #94a3b8;
    transition: background-color .2s ease, border-color .2s ease;
}
.switch-knob {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #94a3b8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .2s ease, border-color .2s ease;
}
/* AN-Zustand: Markenorange + verschobener Knopf */
.peer:checked ~ .switch-track {
    background-color: #e96b1e;
    border-color: #b8500f;
}
.peer:checked ~ .switch-knob {
    transform: translateX(1.25rem);
    border-color: #b8500f;
}
/* Tastatur-Fokus sichtbar machen */
.peer:focus-visible ~ .switch-track {
    box-shadow: 0 0 0 3px rgba(233, 107, 30, .40);
}
/* Dark-Mode: dunklere AUS-Spur für den Kontrast. Der AN-Zustand braucht
   dieselbe Spezifität wie die AUS-Regel. */
html.dark .switch-track { background-color: #414855; border-color: #656e7e; }
html.dark .switch-knob { background: #e7eaef; border-color: #656e7e; }
html.dark .peer:checked ~ .switch-track { background-color: #f0863c; border-color: #c2560f; }
html.dark .peer:checked ~ .switch-knob { background: #ffffff; border-color: #c2560f; }

/* "clip" verhindert horizontales Scrollen durch das Off-canvas-Menue
   (right:-100%) und Sub-Pixel-Ueberlaeufe, ohne einen Scroll-Container zu
   bilden - Sticky-Header und Menue-Slide-in bleiben intakt. */
html {
    overflow-x: clip;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-navy);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

/* Weiche Uebergaenge nur auf Elementen, die ihren Zustand wechseln - ein
   Stern-Selektor liesse den Browser den ganzen Baum mitrechnen. */
a, a svg, button, button svg, summary, label,
input, select, textarea,
.card, .btn, .badge, .switch-track, .switch-knob,
[role="button"], [data-modal] {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Respektiere die System-Einstellung "Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Custom Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Einblenden beim Scrollen. Der Ausgangszustand steht hier, nicht im Skript;
   die Klasse js-anim wird nur gesetzt, wenn die Einblendung stattfinden kann. */
html.js-anim .animate-on-scroll {
    opacity: 0;
    transform: translateY(14px);
}
html.js-anim .animate-on-scroll.ist-sichtbar {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease-out, transform .45s ease-out;
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out forwards;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background-color: #ffffff;
    z-index: 1000;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transition: right 0.3s ease;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* System Tags */
.system-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Werte synchron mit getCategoryColor() in includes/helpers.php (kanonische Hex-Map). */
.system-magic {
    background-color: rgba(2, 132, 199, 0.1); /* #0284c7 */
    color: #0284c7;
}

.system-yugioh {
    background-color: rgba(180, 83, 9, 0.1); /* #b45309 */
    color: #b45309;
}

.system-warhammer {
    background-color: rgba(124, 58, 237, 0.1); /* #7c3aed */
    color: #7c3aed;
}

.system-brettspiele {
    background-color: rgba(5, 150, 105, 0.1); /* #059669 */
    color: #059669;
}

.system-ageofsigmar {
    background-color: rgba(124, 58, 237, 0.1); /* #7c3aed */
    color: #7c3aed;
}

.system-pokemon {
    background-color: rgba(234, 88, 12, 0.1); /* #ea580c */
    color: #ea580c;
}

/* Cards */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--primary-button);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-button-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 107, 30, 0.35);
}

.btn-secondary {
    background-color: var(--secondary);
    color: #1e293b;
}

.btn-secondary:hover {
    background-color: var(--secondary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 168, 30, 0.35);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary-text);
}

.btn-outline:hover {
    background-color: var(--primary);
    color: white;
}

/* Subtle button: light background, primary on hover */
.btn-subtle {
    background-color: #f1f5f9;
    color: var(--text-light);
}

.btn-subtle:hover {
    background-color: var(--primary);
    color: #ffffff;
}

/* Flat card: cancels the hover lift */
.card-flat {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-flat:hover {
    transform: none;
}

/* Sponsoren Logos */
.sponsor-logo {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.sponsor-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    position: relative;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
}

/* Masonry Grid for Showcase */
.masonry-grid {
    column-count: 1;
    column-gap: 1.5rem;
}

@media (min-width: 640px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 3;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* Calendar Styles */
.calendar-day{min-height:64px;background:#fff;border:1px solid #eef2f6;border-radius:10px;padding:.375rem .375rem .3rem;display:flex;flex-direction:column;gap:.25rem;cursor:default;}
@media(min-width:768px){.calendar-day{min-height:132px;}}
.calendar-day.has-events{border-color:#e2e8f0;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.calendar-day.is-weekend:not(.other-month){background:#f8fafc;}
.calendar-day.cursor-pointer{cursor:pointer;}
.calendar-day.cursor-pointer:hover,.calendar-day.cursor-pointer:focus-visible{border-color:#cbd5e1;box-shadow:0 2px 6px rgba(15,23,42,.08);}
.calendar-day.is-selected{box-shadow:inset 0 0 0 2px var(--primary);}
.calendar-day.today{border-color:var(--primary);}
.cal-day-head{display:flex;align-items:center;justify-content:space-between;}
.calendar-day .calendar-daynum{display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:#1e293b;line-height:1;}
.calendar-day.today .calendar-daynum{width:1.5rem;height:1.5rem;border-radius:9999px;background:var(--primary);color:#fff;font-weight:700;}
@media(max-width:767px){.calendar-day.today .calendar-daynum{width:1.4rem;height:1.4rem;}}
.cal-day-count{font-size:.625rem;font-weight:700;line-height:1;color:var(--text-muted);background:#f1f5f9;border-radius:9999px;padding:2px 6px;min-width:1.25rem;text-align:center;}
.calendar-day.other-month{background:#fff;border-color:#f1f5f9;min-height:64px;}
.calendar-pills{display:none;flex-direction:column;gap:2px;margin-top:.15rem;width:100%;}
.calendar-pill{display:flex;align-items:baseline;gap:5px;min-width:0;font-size:.72rem;line-height:1.25;padding:2px 6px;border-radius:6px;background:color-mix(in srgb,var(--pill,var(--primary)) 18%,white);color:color-mix(in srgb,var(--pill,var(--primary)) 78%,#0f172a);border-left:3px solid var(--pill,var(--primary));white-space:nowrap;overflow:hidden;transition:background-color .15s;}
.calendar-day.cursor-pointer:hover .calendar-pill{background:color-mix(in srgb,var(--pill,var(--primary)) 26%,white);}
.calendar-pill .calendar-pill-time{font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums;opacity:.85;}
.calendar-pill .calendar-pill-title{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;}
.calendar-pill-abgesagt .calendar-pill-title{text-decoration:line-through;}
.calendar-pill-more{font-size:.66rem;font-weight:600;color:var(--primary);padding:1px 4px;cursor:pointer;}
.calendar-pill-more:hover{text-decoration:underline;}
@media(min-width:768px){.calendar-pills{display:flex;}}
@media(min-width:768px){.cal-day-block:not(.is-open){display:none;}}
.cal-detail-empty{color:var(--text-muted);font-size:.875rem;padding:.5rem 0;}

/* Kategorie-Legende */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.calendar-legend-swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* visibility nimmt den geschlossenen Dialog aus Tab-Reihenfolge und
       Vorleseprogrammen. Die Verzoegerung laesst das Ausblenden zu Ende
       laufen, bevor er verschwindet. */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.modal-content {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    color: #475569;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.modal-close:hover {
    color: #1e293b;
    background: #ffffff;
}
.modal-close:focus-visible {
    outline: 2px solid #E96B1E;
    outline-offset: 2px;
}

/* Event-Wizard: Der sticky Footer (#wizard-footer, bottom:0) klebt sonst 2rem
   über dem echten Boden, weil .modal-content padding-bottom:2rem hat – dadurch
   scrollt Formularinhalt unter dem Footer hervor (Ansichtsfehler). Bodenabstand
   daher vom Container in den Footer verlagern, damit der Footer bündig sitzt und
   darunterscrollenden Inhalt deckt. */
#modal-event-wizard .modal-content { padding-bottom: 0; }
#modal-event-wizard #wizard-footer { padding-bottom: 1.5rem; }

/* ── Verlustsicherheit auf dem Handy ──────────────────────────────────────
   .modal-content ist ein eigener Scrollbereich (overflow-y:auto). Steht er oben
   und wischt man weiter nach unten, gibt der Browser die Geste an die SEITE
   weiter – auf Android/iOS loest das "Pull-to-Refresh" aus, die Seite laedt neu
   und Eingaben sind verloren. overscroll-behavior:contain haelt die Geste im
   Container. */
.modal-content {
    overscroll-behavior: contain;
}

/* Solange ein Dialog offen ist, darf auch die Seite selbst nicht ueberrollen. */
body.modal-open {
    overscroll-behavior-y: none;
}

/* Auf Handybreite ist der Assistent eine VOLLBILD-Ebene statt eines Dialogs:
   kein Overlay-Rand, kein verschachteltes Scrollen, Kopf- und Fusszeile fest.
   Der Dialog belegte vorher 90 % der Hoehe bei 1.956 px Inhalt. */
@media (max-width: 767px) {
    #modal-event-wizard {
        align-items: stretch;
        justify-content: stretch;
        background-color: #ffffff;   /* kein durchscheinender Hintergrund mehr */
    }
    #modal-event-wizard .modal-content {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
    }
    /* Eigene Kopfzeile uebernimmt Titel + Zurueck; das schwebende ✕ entfaellt. */
    #modal-event-wizard .modal-close { display: none; }
    #modal-event-wizard #wizard-mobile-head {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 -1rem;
        padding: .5rem .5rem .5rem .25rem;
        background-color: #ffffff;
        border-bottom: 1px solid #e2e8f0;
    }
    /* Ueberschrift/Untertitel des Desktop-Kopfes doppeln sich dann -> ausblenden. */
    #modal-event-wizard #wizard-title,
    #modal-event-wizard #wizard-subtitle { display: none; }
    #modal-event-wizard #wizard-footer {
        margin: 0 -1rem;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid #e2e8f0;
    }
}

/* Kontrast (WCAG AA): Markenfarben Gelb/Teal sind als Text auf hellem Grund zu
   blass. Im hellen Modus dunklere, AA-konforme Textvarianten erzwingen – Flächen
   (bg-secondary/bg-accent-teal, Buttons) bleiben unverändert. Im dunklen Theme
   bleiben die hellen Töne (dort gut lesbar). */
html:not(.dark) .text-secondary { color: #b45309; }
html:not(.dark) .text-accent-teal { color: #047857; }
html:not(.dark) .text-primary,
html:not(.dark) .hover\:text-primary:hover,
html:not(.dark) .group:hover .group-hover\:text-primary { color: var(--primary-text); }
.text-warn { color: var(--warn-text); }
html.dark .text-warn { color: #fbbf24; }

/* iOS-Safari zoomt bei Fokus auf Felder < 16px – auf Mobil 16px erzwingen. */
@media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]), textarea, select {
        font-size: 16px;
    }
}

/* Forms */
input, textarea, select {
    width: 100%;
    padding: 0.75rem;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}

/* Checkboxen/Radios NICHT full-width strecken (sonst stehen Kästchen und
   Label weit auseinander). Kompakt, mit Marken-Akzentfarbe. */
input[type="checkbox"], input[type="radio"] {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border-radius: 0;
    flex: none;
    accent-color: var(--primary);
    cursor: pointer;
}

input::placeholder, textarea::placeholder {
    color: #94a3b8;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(233, 107, 30, 0.15);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: none;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #334155;
}

/* Gerendertes Rich-Text-/WYSIWYG-HTML (Tailwind-Preflight setzt Listen/Headings zurück). */
/* Sicherheitsnetz gegen ueberlaufenden Text: Passt ein "Wort" nicht in die Zeile
   (lange URL, versehentlich mit geschuetzten Leerzeichen zusammengeklebter Satz),
   wird es umgebrochen statt rechts abgeschnitten. Die Ursache wird beim Speichern
   behoben (normalisiereLeerzeichen), das hier faengt Altbestand und Sonderfaelle. */
.rich-content { line-height: 1.7; overflow-wrap: break-word; }
.rich-content a { word-break: break-word; }
.rich-content > :first-child { margin-top: 0; }
.rich-content p { margin: 0 0 0.85rem; }
.rich-content h2 { font-family: 'Raleway', sans-serif; font-size: 1.4rem; font-weight: 700; color: #0f172a; margin: 1.4rem 0 0.6rem; }
.rich-content h3 { font-family: 'Raleway', sans-serif; font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 1.1rem 0 0.5rem; }
.rich-content h4 { font-weight: 700; margin: 1rem 0 0.4rem; }
.rich-content ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 0.85rem; }
.rich-content ol { list-style: decimal; padding-left: 1.4rem; margin: 0 0 0.85rem; }
.rich-content li { margin: 0.2rem 0; }
.rich-content a { color: var(--primary-text); text-decoration: underline; }
.rich-content strong, .rich-content b { font-weight: 700; }
.rich-content em, .rich-content i { font-style: italic; }
.rich-content blockquote { border-left: 3px solid var(--primary); padding-left: 1rem; margin: 0 0 0.85rem; color: #475569; font-style: italic; }
.rich-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5rem 0; }
.rich-content pre { background: #f1f5f9; padding: 0.75rem; border-radius: 8px; overflow: auto; }
.rich-content code { background: #f1f5f9; padding: 0.1rem 0.3rem; border-radius: 4px; }
.rich-content hr { border: 0; border-top: 1px solid #e2e8f0; margin: 1.5rem 0; }
/* Ausrichtung (Quill ql-align-* Klassen) */
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }
.rich-content img.ql-align-center { display: block; margin-left: auto; margin-right: auto; }
.rich-content img.ql-align-right { display: block; margin-left: auto; }
.rich-content img.ql-align-left { display: block; margin-right: auto; }
/* Bilder sind durch Tailwind Blockelemente, deshalb greift text-align bei ihnen
   nicht. Die Ausrichtung des Absatzes wird darum in Aussenabstaende uebersetzt. */
.rich-content .ql-align-center > img,
.ql-editor .ql-align-center > img { display: block; margin-left: auto; margin-right: auto; }
.rich-content .ql-align-right > img,
.ql-editor .ql-align-right > img { display: block; margin-left: auto; margin-right: 0; }
/* Einzug (Quill ql-indent-* Klassen) */
/* Bilderreihe: mehrere Bilder nebeneinander, auf dem Handy untereinander.
   Einheitliches Seitenverhaeltnis, damit die Reihe auch bei gemischten
   Bildformaten buendig bleibt. */
.rich-content .rt-galerie,
.ql-editor .rt-galerie {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin: 1rem 0;
}
.rich-content .rt-galerie img,
.ql-editor .rt-galerie img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    margin: 0;
}
@media (min-width: 640px) {
    .rich-content .rt-galerie-2, .ql-editor .rt-galerie-2 { grid-template-columns: repeat(2, 1fr); }
    .rich-content .rt-galerie-3, .ql-editor .rt-galerie-3 { grid-template-columns: repeat(3, 1fr); }
    .rich-content .rt-galerie-4, .ql-editor .rt-galerie-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .rich-content .rt-galerie-4, .ql-editor .rt-galerie-4 { grid-template-columns: repeat(4, 1fr); }
}
.ql-editor .rt-galerie {
    outline: 1px dashed #cbd5e1;
    outline-offset: 4px;
}

.rich-content .ql-indent-1 { padding-left: 3em; }
.rich-content .ql-indent-2 { padding-left: 6em; }
.rich-content .ql-indent-3 { padding-left: 9em; }
.rich-content .ql-indent-4 { padding-left: 12em; }
.rich-content .ql-indent-5 { padding-left: 15em; }
.rich-content .ql-indent-6 { padding-left: 18em; }
.rich-content .ql-indent-7 { padding-left: 21em; }
.rich-content .ql-indent-8 { padding-left: 24em; }
html.dark .rich-content hr { border-top-color: var(--border); }
html.dark .rich-content h2, html.dark .rich-content h3, html.dark .rich-content h4 { color: var(--text); }
html.dark .rich-content blockquote { color: var(--text-muted); border-left-color: var(--primary); }
html.dark .rich-content pre, html.dark .rich-content code { background: #262b33; }

/* WYSIWYG-Editor (Quill) im Admin */
.rich-editor-wrap { margin-bottom: 0.5rem; }
.rich-editor-wrap .ql-container { min-height: 8rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; font-family: 'Inter', sans-serif; }
.rich-editor-wrap .ql-toolbar { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.rich-editor-wrap .ql-editor { min-height: 8rem; font-size: 0.95rem; }
.rich-editor-wrap .ql-editor img { max-width: 100%; height: auto; }
/* Eigener Trennlinien-Button (Quill rendert ihn ohne Icon) */
.rich-editor-wrap .ql-toolbar button.ql-hr { width: 28px; }
.rich-editor-wrap .ql-toolbar button.ql-hr::after { content: "―"; font-size: 1rem; line-height: 1; }
/* Eigener Textbaustein-Button */
.rich-editor-wrap .ql-toolbar button.ql-snippet { width: 30px; }
.rich-editor-wrap .ql-toolbar button.ql-snippet::after { content: "Tb"; font-size: 0.72rem; font-weight: 700; line-height: 1; }
/* Eigener Bilderreihen-Button */
.rich-editor-wrap .ql-toolbar button.ql-galerie { width: 30px; }
.rich-editor-wrap .ql-toolbar button.ql-galerie::after { content: "▥"; font-size: 1rem; line-height: 1; }
/* Footer: Zähler + Vollbild */
.rich-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.1rem 0; font-size: 0.78rem; color: #64748b; }
.rich-editor-count { white-space: nowrap; }
.rich-editor-fs { border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer; font-size: 0.78rem; }
.rich-editor-fs:hover { background: #f1f5f9; }
html.dark .rich-editor-footer { color: var(--text-muted); }
html.dark .rich-editor-fs { border-color: var(--border); background: var(--card); color: var(--text-muted); }
/* Vollbild-Modus */
body.rich-fs-open { overflow: hidden; }
.rich-editor-wrap.rich-fullscreen { position: fixed; inset: 0; z-index: 100000; margin: 0; background: #fff; padding: 1rem; display: flex; flex-direction: column; overflow: auto; }
.rich-editor-wrap.rich-fullscreen .ql-container { flex: 1; min-height: 60vh; }
.rich-editor-wrap.rich-fullscreen .ql-editor { min-height: 60vh; }
html.dark .rich-editor-wrap.rich-fullscreen { background: var(--surface); }
/* Resize-Overlay über Quill-Toolbar/Modal halten */
.ql-resize-overlay, .ql-resize-toolbar { z-index: 100002 !important; }
@media (max-width: 640px) {
    .rich-editor-wrap .ql-toolbar.ql-snow { padding: 4px; }
    .rich-editor-wrap .ql-toolbar .ql-formats { margin-right: 6px; }
}

/* Rollen-Auswahl-Karten (Benutzerverwaltung) */
.role-card { margin-bottom: 0; }
.role-card.is-active {
    border-color: var(--primary) !important;
    background: rgba(233, 107, 30, 0.06);
}

/* Badge */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary {
    background-color: rgba(233, 107, 30, 0.1);
    color: var(--primary-text);
}

.badge-secondary {
    background-color: rgba(242, 168, 30, 0.12);
    color: var(--warn-text);
}

.badge-success {
    background-color: rgba(5, 150, 105, 0.1);
    color: var(--accent-teal);
}

.badge-warning {
    background-color: rgba(242, 168, 30, 0.12);
    color: var(--warn-text);
}

.badge-danger {
    background-color: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

/* Admin Sidebar (dark for contrast) */
.admin-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100vh;
    height: 100dvh;          /* Handy: ohne die Browserleiste rechnen */
    background-color: #1e293b;
    border-right: 1px solid #334155;
    z-index: 100;
    transition: transform 0.3s ease;
    /* Bei 18 Menuepunkten passte die Liste auf kleinen Bildschirmen nicht mehr
       hinein: die letzten Eintraege lagen unter dem fest positionierten
       "Zur Website" und waren nicht erreichbar. Jetzt scrollt das Menue, und
       der Link zur Website sitzt als letztes Element im Fluss. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-sidebar > nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Der Fussbereich war absolut positioniert und ueberdeckte die letzten
   Menuepunkte - er gehoert in den Fluss. */
.admin-sidebar > div.absolute {
    position: static !important;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .admin-sidebar {
        transform: translateX(-100%);
    }

    .admin-sidebar.active {
        transform: translateX(0);
    }
}

.admin-content {
    margin-left: 260px;
    padding: 2rem;
}

@media (max-width: 768px) {
    .admin-content {
        margin-left: 0;
    }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-gradient {
    background: linear-gradient(135deg, rgba(233, 107, 30, 0.08), rgba(242, 168, 30, 0.08));
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* FAQ Accordion */
details summary::-webkit-details-marker {
    display: none;
}

details summary {
    list-style: none;
}

details[open] summary {
    margin-bottom: 0;
}

/* Event List Card - no hover lift */
a.block .card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

a.block .card:hover {
    transform: none;
}

/* ============================================================
   Accessibility: sichtbarer Fokus-Ring (Keyboard-Navigation)
   ============================================================ */
.btn:focus-visible,
nav a:focus-visible,
.card a:focus-visible,
a.card:focus-visible,
.calendar-day:focus-visible,
[role="button"]:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Formularfelder haben bereits einen Box-Shadow-Ring beim Fokus;
   für Keyboard zusätzlich das deutliche Outline. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow: 0 0 0 3px rgba(233, 107, 30, 0.15);
}

/* Skip-/Sicht-Hilfsklasse */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   DARK MODE — nur öffentliche Seiten (class-based via html.dark)
   ------------------------------------------------------------
   Strategie: Override-Layer. Die öffentlichen Seiten verwenden viele
   hartkodierte helle Utility-Klassen (bg-white, text-slate-*, …) sowie
   die Token-Klassen (bg-dark-navy, text-text-light, …). Wir überschreiben
   beide Ebenen unter html.dark mit einer WARMEN dunklen Palette.
   Der Admin-Bereich (body.admin-light, ohne html.dark) bleibt unberührt.
   Marken-Akzente (orange/gold) bleiben kräftig und werden NICHT überschrieben.
   ============================================================ */
html.dark {
    --bg: #121317;          /* Seitenhintergrund (sauberes Graphit) */
    --surface: #1b1d23;     /* erhöhte Fläche (Header/Footer/bg-white) */
    --card: #21242b;        /* Karten */
    --card-hover: #272a32;  /* leichte Aufhellung für Hover/Chips */
    --border: #31353f;      /* Ränder */
    --text: #eceef2;        /* Standardtext */
    --text-muted: #9aa1ad;  /* gedämpfter Text */

    /* Token-Variablen umdefinieren, damit alle var()-Verbraucher mitgehen */
    --dark-navy: var(--bg);
    --dark-surface: var(--surface);
    --dark-card: var(--card);
    --text-light: var(--text);
}

/* ── Seite / Body ── */
html.dark body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* ── Hero-/Section-Verläufe: im Light enden sie auf hellem slate-50.
   Im Dark würde das einen grellen weißen Glow erzeugen -> auf einen
   dezenten Marken-Verlauf ins Dunkle umstellen. ── */
html.dark .bg-gradient-to-br.to-slate-50 {
    background-image: linear-gradient(to bottom right,
        rgba(233, 107, 30, 0.16),
        rgba(124, 58, 237, 0.12),
        var(--bg) 72%) !important;
}

/* Halbtransparente weiße Flächen (z.B. Hero-Event-Box bg-white/70) abdunkeln. */
html.dark .bg-white\/70,
html.dark .bg-white\/80,
html.dark .bg-white\/90 {
    background-color: rgba(33, 36, 43, 0.72) !important;
    border-color: var(--border) !important;
}

/* ── Header ── */
html.dark header.bg-white\/95 {
    background-color: rgba(27, 29, 35, 0.93) !important;
    border-bottom-color: var(--border) !important;
}
html.dark header .text-slate-900 {
    color: var(--text) !important;
}

/* ── Footer ── */
html.dark footer.bg-slate-50 {
    background-color: var(--surface) !important;
    border-top-color: var(--border) !important;
}

/* ── Navigation / Links ── */
html.dark .text-text-light {
    color: var(--text) !important;
}
html.dark .text-text-muted {
    color: var(--text-muted) !important;
}
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: var(--text) !important;
}
html.dark .text-slate-500,
html.dark .text-slate-400 {
    color: var(--text-muted) !important;
}
/* Marken-Hover bleibt orange (var(--primary) ist bereits korrekt) */

/* ── Flächen-Utilities ── */
html.dark .bg-white,
html.dark .bg-dark-surface,
html.dark .bg-dark-card {
    background-color: var(--surface) !important;
}
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
    background-color: var(--card) !important;
}
html.dark .bg-dark-navy {
    background-color: var(--bg) !important;
}

/* ── Ränder-Utilities ── */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
    border-color: var(--border) !important;
}

/* ── Karten ── */
html.dark .card {
    background-color: var(--card) !important;
    border-color: var(--border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
html.dark .card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55) !important;
}

/* ── Subtle Button / Modal / Mobile-Menü ── */
html.dark .btn-subtle {
    background-color: var(--card-hover) !important;
    color: var(--text) !important;
}
html.dark .btn-subtle:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}
html.dark .mobile-menu {
    background-color: var(--surface) !important;
}
html.dark .modal-content {
    background-color: var(--card) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
}
html.dark .modal-close {
    color: var(--text) !important;
    background: rgba(33, 36, 43, 0.92) !important;
    border-color: var(--border) !important;
}
html.dark .modal-close:hover {
    color: #ffffff !important;
    background: var(--card-hover) !important;
}

/* ── Formulare ── */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-muted) !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(233, 107, 30, 0.25) !important;
}
html.dark label {
    color: var(--text) !important;
}

/* ── „main .text-white" Light-Absicherung im Dark-Mode aufheben ── */
html.dark main .text-white,
html.dark footer .text-white {
    color: var(--text) !important;
}
/* Weiß bleibt weiß auf Marken-/Farbflächen */
html.dark .bg-primary .text-white,
html.dark .bg-primary.text-white,
html.dark .bg-secondary .text-white,
html.dark .bg-secondary.text-white,
html.dark .bg-accent-teal .text-white,
html.dark .bg-accent-teal.text-white,
html.dark .bg-accent-purple .text-white,
html.dark .bg-accent-purple.text-white,
html.dark [style*="background"] .text-white,
html.dark [style*="background"].text-white,
html.dark .lightbox .text-white,
html.dark #lightbox-caption {
    color: #ffffff !important;
}

/* ── Footer Social-Buttons (bg-slate-100 → dunkel) ── */
html.dark footer .bg-slate-100 {
    background-color: var(--card-hover) !important;
}
html.dark footer .text-slate-600 {
    color: var(--text-muted) !important;
}

/* ── Kalender ── */
html.dark .calendar-day {
    background: var(--card) !important;
    border-color: var(--border) !important;
}
html.dark .calendar-day.other-month {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html.dark .calendar-day.is-weekend:not(.other-month) {
    background: #181a20 !important;
}
html.dark .calendar-day .calendar-daynum {
    color: var(--text) !important;
}
html.dark .calendar-day.today {
    border-color: var(--primary) !important;
}
html.dark .calendar-day.today .calendar-daynum {
    background: var(--primary) !important;
    color: #fff !important;
}
html.dark .cal-day-count {
    color: var(--text-muted) !important;
    background: var(--card-hover) !important;
}
html.dark .calendar-pill {
    background: color-mix(in srgb, var(--pill, var(--primary)) 26%, var(--surface)) !important;
    color: color-mix(in srgb, var(--pill, var(--primary)) 62%, var(--text)) !important;
}
html.dark .calendar-day.cursor-pointer:hover,
html.dark .calendar-day.cursor-pointer:focus-visible {
    border-color: var(--primary) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* ── Badges: gedämpfte Hintergründe auf Dunkel anheben ── */
html.dark .badge-primary {
    background-color: rgba(233, 107, 30, 0.2) !important;
    color: #f7a865 !important;
}
html.dark .badge-secondary,
html.dark .badge-warning {
    background-color: rgba(242, 168, 30, 0.2) !important;
    color: #f6c456 !important;
}
html.dark .badge-success {
    background-color: rgba(5, 150, 105, 0.22) !important;
    color: #34d399 !important;
}
html.dark .badge-danger {
    background-color: rgba(220, 38, 38, 0.22) !important;
    color: #f87171 !important;
}

/* ── Hero-Gradient für Dunkel abdunkeln ── */
html.dark .hero-gradient {
    background: linear-gradient(135deg, rgba(233, 107, 30, 0.16), rgba(36, 31, 26, 0.6) 70%, var(--surface)) !important;
}

/* ── Verläufe von Weiß-Enden zu Surface (Tailwind to-white / from-white) ── */
html.dark .to-white,
html.dark .from-white,
html.dark .via-white {
    --tw-gradient-to: var(--surface) !important;
}

/* ── Theme-Toggle: Icon-Wechsel ── */
html.dark .theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: inline-block; }

/* ── Osterei: Raptor rennt bei "jurassic" durchs Bild ────────────────────────
   Der Behaelter steht in footer.php und ist leer, bis das Skript ihn fuellt. */
.raptor-container {
    position: fixed;
    bottom: -200px;
    left: -300px;
    z-index: 9999;
    pointer-events: none;
    transition: none;
}
.raptor-container.active {
    animation: raptor-run 3s ease-in forwards;
}
@keyframes raptor-run {
    0%   { bottom: -200px; left: -300px; }
    20%  { bottom: 0;      left: -200px; }
    50%  { bottom: 0;      left: 40%; }
    70%  { bottom: 0;      left: 40%; }
    100% { bottom: 0;      left: 110%; }
}
.raptor-container img {
    height: 300px;
    width: auto;
    transform: scaleX(-1);
}
@media (max-width: 640px) {
    /* Kleinere Darstellung auf schmalen Bildschirmen. */
    .raptor-container img { height: 190px; }
}

/* ── Osterei: T-Rex naehert sich ("trex" tippen) ─────────────────────────────
   Beben der ganzen Seite plus ein Wasserglas mit Ringen. Das Glas ist bewusst
   komplett aus CSS gebaut - kein Bild, kein fremdes Material. */
html.bebt body {
    animation: trex-beben .3s ease-in-out;
}
@keyframes trex-beben {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20%      { transform: translate3d(calc(var(--beben, 3px) * -1), calc(var(--beben, 3px) * .4), 0); }
    45%      { transform: translate3d(var(--beben, 3px), calc(var(--beben, 3px) * -.3), 0); }
    70%      { transform: translate3d(calc(var(--beben, 3px) * -.5), 0, 0); }
}

.trex-glas {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 9998;
    width: 66px;
    height: 86px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s ease;
}
.trex-glas.sichtbar {
    opacity: 1;
    transform: none;
}
/* Glaskoerper: unten etwas schmaler, wie ein Trinkglas */
.trex-glas .trex-becher {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(100, 116, 139, .55);
    border-top-color: rgba(100, 116, 139, .35);
    border-radius: 4px 4px 12px 12px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .35), rgba(226, 232, 240, .3));
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .5), 0 6px 14px rgba(15, 23, 42, .18);
    overflow: hidden;
}
/* Wasserstand */
.trex-glas .trex-wasser {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(to bottom, rgba(56, 189, 248, .55), rgba(2, 132, 199, .45));
    border-top: 1px solid rgba(255, 255, 255, .75);
    overflow: hidden;
}
/* Ringwelle bei jedem Schritt */
.trex-ring {
    position: absolute;
    left: 50%;
    top: 4px;
    width: 6px;
    height: 3px;
    margin-left: -3px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    animation: trex-ring 1s ease-out forwards;
}
@keyframes trex-ring {
    0%   { width: 6px;  margin-left: -3px;  opacity: .95; }
    100% { width: 62px; margin-left: -31px; opacity: 0; }
}
html.dark .trex-glas .trex-becher { border-color: rgba(148, 163, 184, .5); }

/* ── Einwilligungsfenster: an das Erscheinungsbild der Seite angepasst ──── */
#cc-main {
    --cc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cc-bg: #ffffff;
    --cc-primary-color: #1e293b;
    --cc-secondary-color: #64748b;
    --cc-link-color: #E96B1E;

    --cc-btn-border-radius: .5rem;
    --cc-modal-border-radius: .875rem;

    --cc-btn-primary-bg: #C2560F;
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: #C2560F;
    --cc-btn-primary-hover-bg: #A5480C;
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: #A5480C;

    --cc-btn-secondary-bg: #f1f5f9;
    --cc-btn-secondary-color: #334155;
    --cc-btn-secondary-border-color: #e2e8f0;
    --cc-btn-secondary-hover-bg: #e2e8f0;
    --cc-btn-secondary-hover-color: #1e293b;
    --cc-btn-secondary-hover-border-color: #cbd5e1;

    --cc-separator-border-color: #e2e8f0;
    --cc-toggle-on-bg: #E96B1E;
    --cc-toggle-off-bg: #94a3b8;
    --cc-toggle-readonly-bg: #cbd5e1;

    --cc-cookie-category-block-bg: #f8fafc;
    --cc-cookie-category-block-border: #e2e8f0;
    --cc-cookie-category-block-hover-bg: #f1f5f9;
    --cc-cookie-category-block-hover-border: #cbd5e1;

    --cc-footer-bg: #f8fafc;
    --cc-footer-color: #64748b;
    --cc-footer-border-color: #e2e8f0;
    --cc-overlay-bg: rgba(15, 23, 42, .5);
}
#cc-main .cm__title,
#cc-main .pm__title { font-family: 'Raleway', sans-serif; font-weight: 700; }

html.dark {
    --primary-text: #F0863C;
    --warn-text: #FBBF24;
}

html.dark #cc-main {
    --cc-bg: #1e293b;
    --cc-primary-color: #f1f5f9;
    --cc-secondary-color: #94a3b8;
    --cc-btn-secondary-bg: #334155;
    --cc-btn-secondary-color: #e2e8f0;
    --cc-btn-secondary-border-color: #475569;
    --cc-btn-secondary-hover-bg: #475569;
    --cc-btn-secondary-hover-color: #ffffff;
    --cc-cookie-category-block-bg: #273449;
    --cc-cookie-category-block-border: #475569;
    --cc-cookie-category-block-hover-bg: #334155;
    --cc-footer-bg: #273449;
    --cc-footer-color: #94a3b8;
    --cc-footer-border-color: #475569;
    --cc-separator-border-color: #475569;
}

/* ── Kopfbild der Event-Detailseite ──────────────────────────────────────
   Feste Bühne: das Bild wird vollständig gezeigt (contain), die Ränder
   füllt ein unscharfes Duplikat. Die Höhe steht fest, damit der Titel
   darunter unabhängig vom Seitenverhältnis des Bildes an derselben
   Stelle beginnt. */
.event-hero-stage {
    position: relative;
    width: 100%;
    height: 202px;
    overflow: hidden;
    isolation: isolate;
}
.event-hero-blur,
.event-hero-img {
    position: absolute;
    inset: 0;
    margin: auto;
    display: block;
}
.event-hero-blur {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.25);
    filter: blur(40px) brightness(.55);
    z-index: 0;
}
.event-hero-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

@media (min-width: 768px) {
    .event-hero-stage { height: 252px; }
    .event-hero-img { box-shadow: 0 12px 45px rgba(0, 0, 0, .55); }
}

/* Ohne unscharfen Rand wäre auf schmalen Geräten nur ein grauer Balken zu
   sehen; dort füllt das Bild die Breite und der Hintergrund bleibt verdeckt. */
@media (max-width: 767px) {
    .event-hero-blur { display: none; }
    .event-hero-img { width: 100%; height: auto; object-fit: cover; }
    .event-hero-stage { height: auto; aspect-ratio: 16 / 9; }
}