/* Designs und Saisonthemen (Wunsch Andi vom 02.11.2026).
   Grunddesign (data-design, je Gerät gewählt) ändert die Hauptfarbe von Kopfzeile und Knöpfen; hell/dunkel bleibt davon unabhängig.
   Saisonthema (data-saison, Zeitraum vom Leiter in den Einstellungen) ergänzt das Grunddesign aller: Farbe, Schmuckband und Gruß.
   Alle Farben mit weißer Schrift halten mindestens 4,5:1 Kontrast. Keine Animationen. */

.kopf { --band: none; --muster: none; background-image: var(--muster); }
.kopf::after { content: ""; display: block; height: 0; background: var(--band); }
:root[data-saison] .kopf::after, :root[data-design="signal"] .kopf::after, :root[data-design="jugend"] .kopf::after { height: 5px; }

/* ---------- Grunddesigns ---------- */
:root[data-design="leitstelle"] { --feuer-600: #1d4ed8; --feuer-700: #1e40af; --feuer-800: #1e3a8a; }
:root[data-design="wald"] { --feuer-600: #15803d; --feuer-700: #166534; --feuer-800: #14532d; }
:root[data-design="signal"] { --feuer-600: #1f2937; --feuer-700: #111827; --feuer-800: #000000; }
:root[data-design="signal"] .kopf { --band: #facc15; }
:root[data-design="signal"] .knopf.haupt { box-shadow: inset 0 -3px 0 #facc15; }
:root[data-design="schlauch"] { --feuer-600: #4b5563; --feuer-700: #374151; --feuer-800: #1f2937; }
:root[data-design="jugend"] { --feuer-600: #7c3aed; --feuer-700: #6d28d9; --feuer-800: #5b21b6; }
:root[data-design="jugend"] .kopf { --band: #f97316; }

/* Links im hellen Modus in der Designfarbe (im dunklen Modus bleibt die helle Linkfarbe für den Kontrast) */
@media screen and (prefers-color-scheme: light) {
    :root[data-design]:not([data-design=""]):not([data-farbschema="dunkel"]) { --link: var(--feuer-700); }
}
:root[data-design]:not([data-design=""])[data-farbschema="hell"] { --link: var(--feuer-700); }

/* ---------- Saisonthemen ---------- */
:root[data-saison="weihnachten"] { --feuer-600: #b91c1c; --feuer-700: #166534; --feuer-800: #14532d; }
:root[data-saison="weihnachten"] .kopf {
    --muster: radial-gradient(rgb(255 255 255 / .35) 1.5px, transparent 1.6px);
    --band: repeating-linear-gradient(90deg, #dc2626 0 14px, #fff 14px 20px, #facc15 20px 26px, #fff 26px 32px);
    background-size: 22px 22px;
}
:root[data-saison="silvester"] { --feuer-600: #4338ca; --feuer-700: #1e1b4b; --feuer-800: #312e81; }
:root[data-saison="silvester"] .kopf {
    --muster: radial-gradient(#fde68a 1px, transparent 1.4px), radial-gradient(rgb(255 255 255 / .5) 1px, transparent 1.4px);
    --band: linear-gradient(90deg, #f59e0b, #fde68a, #f59e0b);
    background-size: 30px 30px, 17px 17px; background-position: 0 0, 8px 11px;
}
:root[data-saison="halloween"] { --feuer-600: #c2410c; --feuer-700: #1c1917; --feuer-800: #44403c; }
:root[data-saison="halloween"] .kopf { --band: repeating-linear-gradient(135deg, #f97316 0 12px, #1c1917 12px 24px); }
:root[data-saison="ostern"] { --feuer-600: #0f766e; --feuer-700: #115e59; --feuer-800: #134e4a; }
:root[data-saison="ostern"] .kopf {
    --muster: radial-gradient(ellipse 3px 4px, rgb(253 224 71 / .45) 98%, transparent), radial-gradient(ellipse 3px 4px, rgb(244 114 182 / .45) 98%, transparent);
    --band: repeating-linear-gradient(90deg, #fde047 0 20px, #f9a8d4 20px 40px, #93c5fd 40px 60px, #86efac 60px 80px);
    background-size: 40px 40px, 40px 40px; background-position: 0 0, 20px 20px;
}
:root[data-saison="fasching"] { --feuer-600: #be185d; --feuer-700: #9d174d; --feuer-800: #831843; }
:root[data-saison="fasching"] .kopf {
    --muster: radial-gradient(#facc15 2px, transparent 2.4px), radial-gradient(#22d3ee 2px, transparent 2.4px), radial-gradient(#a3e635 2px, transparent 2.4px);
    --band: linear-gradient(90deg, #ef4444, #f59e0b, #facc15, #22c55e, #06b6d4, #6366f1, #d946ef);
    background-size: 37px 29px, 23px 41px, 31px 19px; background-position: 0 0, 11px 7px, 19px 13px;
}
:root[data-saison="florian"] .kopf { --band: linear-gradient(90deg, #facc15, #f97316, #dc2626, #f97316, #facc15); }
:root[data-saison="sommer"] { --feuer-600: #0369a1; --feuer-700: #075985; --feuer-800: #0c4a6e; }
:root[data-saison="sommer"] .kopf { --band: linear-gradient(90deg, #fde047, #fb923c); }

/* Gruß unter der Kopfzeile */
.saison-gruss { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 16px; font-size: 14px;
    background: var(--flaeche-2); border-bottom: 1px solid var(--linie); color: var(--text-2); }
.saison-gruss .symbol { font-size: 18px; }
.saison-gruss button { background: none; border: 0; color: var(--leise); cursor: pointer; font: inherit; padding: 2px 6px; border-radius: 4px; }
.saison-gruss button:hover { background: var(--flaeche-hover); }

/* Design-Auswahl */
.design-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.design-wahl button { text-align: left; border: 2px solid var(--linie-2); border-radius: 8px; background: var(--flaeche); color: var(--text); padding: 0; cursor: pointer; overflow: hidden; font: inherit; }
.design-wahl button[aria-pressed="true"] { border-color: var(--fokus); box-shadow: 0 0 0 2px var(--fokus); }
.design-wahl .probe { height: 36px; display: flex; align-items: center; padding: 0 10px; color: #fff; font-weight: 700; }
.design-wahl .text { padding: 8px 10px; font-size: 14px; }

@media print { .saison-gruss, .kopf::after { display: none; } .kopf { background-image: none; } }