/* 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;
    --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 ────
   Die Liste war schwer zu lesen: gleiche rote Badges in fast jeder Zeile, keine
   Sortierung, Aktionen nur als Icons (das Deaktivieren-Symbol sah wie Löschen
   aus). Diese Klassen sind 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, damit der Kontrast erhalten bleibt.
   WICHTIG: Der AN-Zustand braucht hier dieselbe Spezifität, sonst würde die
   dunkle AUS-Farbe das Orange überschreiben (AN und AUS sähen gleich aus). */
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; }

/* Off-canvas Mobile-Menü (right:-100%) und vereinzelte Sub-Pixel-Ueberlaeufe
   erzeugen sonst horizontales Scrollen. "clip" verhindert das, 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;
}

/* Smooth Transitions */
* {
    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;
}

.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);
    color: white;
}

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

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

.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);
}

.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-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;
    transition: opacity 0.3s ease;
}

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

.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; }

/* 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-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; }
/* Einzug (Quill ql-indent-* Klassen) */
.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; }
/* 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);
}

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

.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(--secondary-dark);
}

.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;
    background-color: #1e293b;
    border-right: 1px solid #334155;
    z-index: 100;
    transition: transform 0.3s ease;
}

@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-color"] .text-white,
html.dark [style*="background-color"].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; }