/* Saison-Deko der Brandings (Admin → Branding → Saison-Deko, season.js): App (index.php, nur mit Effekt oder Deko)
   und Live Display (Symlink live/season.css). Kopfzeilen mit Deko tragen die Klasse season-bar. */
/* Effekt: hinter dem Inhalt (z-index -1: über dem Seitenhintergrund von body, unter allem anderen, nur in Lücken
   sichtbar) oder dezent davor (unter Hinweisen und Dialogen; Live Display: --season-front-z unter seinen Überlagerungen) */
.season-effect {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: -1;
}
.season-effect.season-front { z-index: var(--season-front-z, 45); opacity: 0.55; }
#intro .intro-season { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Kopfzeile: Lichterkette bzw. Wimpelkette am oberen Rand, Spinnennetz in der rechten Ecke mit Spinne am Faden.
   Nur Bilder (SVG), keine Bedienung: pointer-events none. Netz und Spinne als Maske, damit sie die Textfarbe annehmen. */
html[data-decor] .season-bar { position: relative; }
html[data-decor="lights"] .season-bar::before, html[data-decor="lights"] .season-bar::after,
html[data-decor="bunting"] .season-bar::before, html[data-decor="web"] .season-bar::before, html[data-decor="web"] .season-bar::after {
   content: "";
   position: absolute;
   top: 0;
   pointer-events: none;
   z-index: 2;
}
html[data-decor="lights"] .season-bar::before, html[data-decor="lights"] .season-bar::after, html[data-decor="bunting"] .season-bar::before {
   left: 0;
   right: 0;
   height: max(16px, 0.9em);   /* Live Display auf großen TVs: wächst mit der Schrift der Kopfzeile */
   background-repeat: repeat-x;
   background-size: auto 100%;
}
html[data-decor="lights"] .season-bar::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16'%3E%3Cpath d='M0 3Q24 11 48 3T96 3' fill='none' stroke='%235b6472' stroke-width='1.2'/%3E%3Crect x='10.4' y='5.5' width='3.2' height='2.6' rx='.6' fill='%235b6472'/%3E%3Cellipse cx='12' cy='10.6' rx='2.7' ry='3.5' fill='%23e53935'/%3E%3Cellipse cx='11.2' cy='9.4' rx='.8' ry='1.2' fill='%23fff' opacity='.6'/%3E%3Crect x='34.4' y='5.5' width='3.2' height='2.6' rx='.6' fill='%235b6472'/%3E%3Cellipse cx='36' cy='10.6' rx='2.7' ry='3.5' fill='%23fbc02d'/%3E%3Cellipse cx='35.2' cy='9.4' rx='.8' ry='1.2' fill='%23fff' opacity='.6'/%3E%3Crect x='58.4' y='5.5' width='3.2' height='2.6' rx='.6' fill='%235b6472'/%3E%3Cellipse cx='60' cy='10.6' rx='2.7' ry='3.5' fill='%2343a047'/%3E%3Cellipse cx='59.2' cy='9.4' rx='.8' ry='1.2' fill='%23fff' opacity='.6'/%3E%3Crect x='82.4' y='5.5' width='3.2' height='2.6' rx='.6' fill='%235b6472'/%3E%3Cellipse cx='84' cy='10.6' rx='2.7' ry='3.5' fill='%231e88e5'/%3E%3Cellipse cx='83.2' cy='9.4' rx='.8' ry='1.2' fill='%23fff' opacity='.6'/%3E%3C/svg%3E"); }
html[data-decor="lights"] .season-bar::after {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16'%3E%3Ccircle cx='12' cy='10.6' r='7' fill='%23e53935' opacity='.22'/%3E%3Ccircle cx='12' cy='10.6' r='4.5' fill='%23e53935' opacity='.35'/%3E%3Ccircle cx='60' cy='10.6' r='7' fill='%2343a047' opacity='.22'/%3E%3Ccircle cx='60' cy='10.6' r='4.5' fill='%2343a047' opacity='.35'/%3E%3C/svg%3E");
   animation: seasonTwinkle 1.6s ease-in-out infinite alternate;
}
html[data-decor="bunting"] .season-bar::before { height: max(18px, 1em); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='18'%3E%3Cpath d='M0 2Q45 7 90 2' fill='none' stroke='%235b6472' stroke-width='1'/%3E%3Cpath d='M4 2.4L26 4.1L15.0 14.4Z' fill='%23f9a8d4'/%3E%3Cpath d='M34 4.4L56 4.4L45.0 15.5Z' fill='%23fcd34d'/%3E%3Cpath d='M64 4.1L86 2.4L75.0 14.4Z' fill='%2386d6b0'/%3E%3C/svg%3E"); }
html[data-decor="web"] .season-bar::before, html[data-decor="web"] .season-bar::after {
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: contain;
   mask-size: contain;
}
html[data-decor="web"] .season-bar::before {
   right: 0;
   width: 70px;
   height: 70px;
   background: var(--muted);
   opacity: 0.5;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M130 0L2.0 0.0'/%3E%3Cpath d='M130 0L12.2 50.0'/%3E%3Cpath d='M130 0L41.1 92.1'/%3E%3Cpath d='M130 0L84.1 119.5'/%3E%3Cpath d='M130 0L130.0 128.0'/%3E%3Cpath d='M108.0 0.0Q111.4 3.8 109.7 8.6Q114.4 10.7 114.7 15.8Q119.8 16.0 122.1 20.5Q126.5 18.7 130.0 22.0'/%3E%3Cpath d='M86.0 0.0Q92.8 7.6 89.5 17.2Q98.7 21.5 99.4 31.7Q109.6 32.0 114.2 41.1Q123.1 37.4 130.0 44.0'/%3E%3Cpath d='M62.0 0.0Q72.5 11.7 67.4 26.6Q81.7 33.2 82.8 48.9Q98.5 49.5 105.6 63.5Q119.3 57.9 130.0 68.0'/%3E%3Cpath d='M36.0 0.0Q50.6 16.2 43.5 36.7Q63.2 45.9 64.7 67.6Q86.4 68.4 96.3 87.8Q115.2 80.0 130.0 94.0'/%3E%3Cpath d='M10.0 0.0Q28.6 20.6 19.5 46.9Q44.7 58.6 46.6 86.3Q74.4 87.3 87.0 112.0Q111.1 102.1 130.0 120.0'/%3E%3C/g%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M130 0L2.0 0.0'/%3E%3Cpath d='M130 0L12.2 50.0'/%3E%3Cpath d='M130 0L41.1 92.1'/%3E%3Cpath d='M130 0L84.1 119.5'/%3E%3Cpath d='M130 0L130.0 128.0'/%3E%3Cpath d='M108.0 0.0Q111.4 3.8 109.7 8.6Q114.4 10.7 114.7 15.8Q119.8 16.0 122.1 20.5Q126.5 18.7 130.0 22.0'/%3E%3Cpath d='M86.0 0.0Q92.8 7.6 89.5 17.2Q98.7 21.5 99.4 31.7Q109.6 32.0 114.2 41.1Q123.1 37.4 130.0 44.0'/%3E%3Cpath d='M62.0 0.0Q72.5 11.7 67.4 26.6Q81.7 33.2 82.8 48.9Q98.5 49.5 105.6 63.5Q119.3 57.9 130.0 68.0'/%3E%3Cpath d='M36.0 0.0Q50.6 16.2 43.5 36.7Q63.2 45.9 64.7 67.6Q86.4 68.4 96.3 87.8Q115.2 80.0 130.0 94.0'/%3E%3Cpath d='M10.0 0.0Q28.6 20.6 19.5 46.9Q44.7 58.6 46.6 86.3Q74.4 87.3 87.0 112.0Q111.1 102.1 130.0 120.0'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-decor="web"] .season-bar::after {
   right: 58px;
   width: 18px;
   height: 44px;
   background: var(--text);
   opacity: 0.75;
   transform-origin: 50% 0;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='64'%3E%3Cpath d='M13 0V40' stroke='%23000' stroke-width='1'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='13' cy='50' rx='6' ry='7'/%3E%3Ccircle cx='13' cy='41.5' r='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 44L2.0 41.1L0.5 46.1'/%3E%3Cpath d='M9 47L2.0 46.2L0.5 51.2'/%3E%3Cpath d='M9 50L2.0 51.2L0.5 56.2'/%3E%3Cpath d='M9 53L2.0 56.3L0.5 61.3'/%3E%3Cpath d='M17 44L24.0 41.1L25.5 46.1'/%3E%3Cpath d='M17 47L24.0 46.2L25.5 51.2'/%3E%3Cpath d='M17 50L24.0 51.2L25.5 56.2'/%3E%3Cpath d='M17 53L24.0 56.3L25.5 61.3'/%3E%3C/g%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='64'%3E%3Cpath d='M13 0V40' stroke='%23000' stroke-width='1'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='13' cy='50' rx='6' ry='7'/%3E%3Ccircle cx='13' cy='41.5' r='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 44L2.0 41.1L0.5 46.1'/%3E%3Cpath d='M9 47L2.0 46.2L0.5 51.2'/%3E%3Cpath d='M9 50L2.0 51.2L0.5 56.2'/%3E%3Cpath d='M9 53L2.0 56.3L0.5 61.3'/%3E%3Cpath d='M17 44L24.0 41.1L25.5 46.1'/%3E%3Cpath d='M17 47L24.0 46.2L25.5 51.2'/%3E%3Cpath d='M17 50L24.0 51.2L25.5 56.2'/%3E%3Cpath d='M17 53L24.0 56.3L25.5 61.3'/%3E%3C/g%3E%3C/svg%3E");
   animation: seasonSpider 5s ease-in-out infinite;
}
@keyframes seasonTwinkle {
   from { opacity: 0.15; }
   to { opacity: 1; }
}
@keyframes seasonSpider {
   0%, 100% { transform: translateY(-8px) rotate(0deg); }
   50% { transform: translateY(4px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
   html[data-decor] .season-bar::after { animation: none; }
}