/* ============================================================
   themes.css — Saison-Deko-Effekte (Schnee, Konfetti, Blätter, Sparkles)
   Wird nur aktiv wenn das Theme die jeweilige body-Klasse setzt.
   ============================================================ */

/* ============ Dark-Mode (Mode: dark) ============ */
body.mode-dark {
    color-scheme: dark;
}

/* ============ Schnee (Weihnachten/Winter) ============ */
body.deko-snow::before,
body.deko-snow::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 5;
    background:
        radial-gradient(2.5px 2.5px at 20% 30%,  rgba(255,255,255,0.95), transparent),
        radial-gradient(2px 2px   at 70% 60%,  rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 45% 20%, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.5px 1.5px at 85% 85%, rgba(255,255,255,0.90), transparent),
        radial-gradient(2.5px 2.5px at 15% 75%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 60% 40%, rgba(255,255,255,0.90), transparent),
        radial-gradient(2px 2px   at 35% 90%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 95% 15%, rgba(255,255,255,0.90), transparent);
    background-size: 100vw 100vh;
    animation: snow-fall 18s linear infinite;
    opacity: 0.85;
}
body.deko-snow::after {
    animation-duration: 11s;
    background-position: -20vw -10vh;
    opacity: 0.55;
}
@keyframes snow-fall {
    0%   { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

/* ============ Konfetti (Neujahr, Geburtstag) ============ */
body.deko-confetti::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 5;
    background:
        radial-gradient(4px 8px at 10% 5%,  #ec4899, transparent),
        radial-gradient(3px 6px at 30% 10%, #fcd34d, transparent),
        radial-gradient(4px 8px at 55% 15%, #06b6d4, transparent),
        radial-gradient(3px 6px at 75% 8%,  #16a34a, transparent),
        radial-gradient(4px 8px at 90% 12%, #f59e0b, transparent),
        radial-gradient(3px 6px at 20% 20%, #a855f7, transparent),
        radial-gradient(4px 8px at 45% 25%, #dc2626, transparent),
        radial-gradient(3px 6px at 65% 22%, #0ea5e9, transparent);
    background-size: 100vw 50vh;
    animation: confetti-fall 8s linear infinite;
    opacity: 0.85;
}
@keyframes confetti-fall {
    0%   { transform: translateY(-50vh) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(360deg); }
}

/* ============ Blätter (Herbst) ============ */
body.deko-leaves::before {
    content: '🍁 🍂 🍁 🍂 🍁 🍂 🍁 🍂';
    position: fixed; top: 0; left: 0; right: 0; pointer-events: none; z-index: 5;
    font-size: 22px;
    letter-spacing: 32vw;
    line-height: 1;
    animation: leaves-fall 22s linear infinite;
    opacity: 0.75;
}
@keyframes leaves-fall {
    0%   { transform: translateY(-10vh) rotate(0deg); }
    50%  { transform: translateY(50vh)  rotate(180deg); }
    100% { transform: translateY(110vh) rotate(360deg); }
}

/* ============ Sparkles (allgemein festlich) ============ */
body.deko-sparkles::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 5;
    background:
        radial-gradient(3px 3px at 15% 25%, #fcd34d, transparent 60%),
        radial-gradient(2px 2px at 65% 45%, #fde68a, transparent 60%),
        radial-gradient(3px 3px at 85% 75%, #f59e0b, transparent 60%),
        radial-gradient(2px 2px at 25% 85%, #fcd34d, transparent 60%);
    background-size: 100vw 100vh;
    animation: sparkles-twinkle 3s ease-in-out infinite;
}
@keyframes sparkles-twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ============ Theme-Tokens-Bindings (wenn Tokens gesetzt, nutzen wir sie) ============ */
/* Die Tokens vom Theme-Loader greifen automatisch via CSS-Variable-Inheritance.
   Wir mappen bestehende style.css-Variablen auf die neuen Token-Namen damit
   alte Klassen weiter funktionieren. */

/* ====== Themen-Sidebar: 5-Limit + Aufklapper ====== */
.topic-side .topic-item.is-overflow { display: none; }
.topic-side.is-expanded .topic-item.is-overflow { display: flex; }
.topic-more-btn {
    background: transparent;
    color: #94a3b8;
    border: 0; border-top: 1px solid #f1f5f9;
    padding: 9px 12px;
    font-weight: 600; font-size: 12px; cursor: pointer;
    width: 100%; margin: 6px 0 0; font-family: inherit;
    text-align: center; letter-spacing: 0.3px;
    transition: color .15s, background .15s;
}
.topic-more-btn:hover { color: #0891b2; background: #f8fafc; }

/* ====== Such-Box ueber den Rubriken ====== */
.ts-search { display: flex; gap: 4px; margin: 0 0 10px; }
.ts-search input { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff; }
.ts-search input:focus { outline: 2px solid #0891b2; border-color: transparent; }
.ts-search button { background: #0891b2; color: #fff; border: 0; padding: 6px 10px; border-radius: 8px; font-weight: 800; font-size: 14px; cursor: pointer; line-height: 1; min-width: 32px; }
.ts-search button:hover { background: #0e7490; }

:root {
    /* Bestehende Variablen aus style.css mappen — falls Theme neue Werte hat, fallen sie hier ein */
    --bg:           var(--c-bg,           #fafbfc);
    --surface:      var(--c-surface,      #ffffff);
    --border:       var(--c-border,       #e2e8f0);
    --border-soft:  var(--c-border-soft,  #f1f5f9);
    --text:         var(--c-text,         #0f172a);
    --text-soft:    var(--c-text-soft,    #475569);
    --text-mute:    var(--c-text-mute,    #94a3b8);
}

/* ============================================================
   .home-3col / .gem-3col — dynamisch reduzieren wenn Sidebars ausgeblendet sind
   Nutzt :has() — funktioniert in allen modernen Browsern (2023+).
   Reihenfolge wichtig: spezifischere Selektoren ZULETZT damit sie gewinnen.
   ============================================================ */
@media (min-width: 1101px) {
    /* Nur Feed (beide Sidebars weg) */
    .home-3col:not(:has(> .topic-side)):not(:has(> .home-right)) {
        grid-template-columns: 1fr !important;
        max-width: 760px;
        margin-left: auto; margin-right: auto;
    }
    /* Feed + Rechte Sidebar (topic-side weg) */
    .home-3col:not(:has(> .topic-side)):has(> .home-right) {
        grid-template-columns: 1fr 300px !important;
    }
    /* Feed + Themen-Sidebar (home-right weg) */
    .home-3col:has(> .topic-side):not(:has(> .home-right)) {
        grid-template-columns: 240px 1fr !important;
    }

    /* Gleiches Spiel fuer .gem-3col auf der Gemeinde-Seite */
    .gem-3col:not(:has(> .gem-topic-side)):not(:has(> .gem-side:not(.gem-topic-side))) {
        grid-template-columns: 1fr !important;
        max-width: 760px;
    }
    .gem-3col:not(:has(> .gem-topic-side)):has(> .gem-side:not(.gem-topic-side)) {
        grid-template-columns: 1fr 300px !important;
    }
    .gem-3col:has(> .gem-topic-side):not(:has(> .gem-side:not(.gem-topic-side))) {
        grid-template-columns: 240px 1fr !important;
    }
}