/* KickScope - Halloween-Edition (nur 31.10.2026, eingebunden ueber v21/halloween.php).
   Alles haengt an html.ks-halloween: entfernt v21-halloween.js die Klasse
   (01.11. 00:00), greift keine Regel mehr - auch wenn das Stylesheet noch im
   Cache liegt. Bilder (img/halloween/*.svg) und die Schrift stehen nur in
   Regeln unter .ks-halloween, werden also nur an diesem Tag geladen.
   Animationen nur ueber transform/opacity, Deko ohne Pointer-Events.
   Das Layout bleibt unangetastet - Ausnahme: Hero und Tagesausgabe bekommen
   auf breiten Bildschirmen Platz fuer die Szenen am Rand. */

@font-face{font-family:"KS Grusel";src:url("/fonts/creepster-regular.ttf") format("truetype");font-weight:400;font-display:swap}

/* ---------- Farben: dunkel (Standard) ---------- */
:root.ks-halloween{
  --gold:#ff7a1a;
  --gold-muted:#b4541c;
  --gold-a:#ffa149;
  --gold-b:#e8481c;
  --gold-ink:#1c0a02;
  --champagne:#ffb26b;
  --line:rgba(255,122,26,.26);
  --hw-orange:#ff7a1a;
  --hw-rot:#e8341c;
  --hw-rand:rgba(255,106,26,.34);
  --hw-web:rgba(230,220,240,.30);
  --hw-bat:#050203;
}
:root.ks-halloween:not([data-theme="light"]){
  color-scheme:dark;
  --background:#090305;
  --surface:#120609;
  --surface-elevated:#1a090c;
  --panel:#13070a;
  --panel-hover:#220d10;
  --panel-2:#0e0507;
  --deep-navy:#0f0507;
  --secondary-navy:#231012;
  --text-secondary:#c2aeaa;
  --text-muted:#8a726e;
  --border:rgba(255,120,60,.14);
}
:root.ks-halloween:not([data-theme="light"]) body{
  background:
    radial-gradient(ellipse 70% 480px at 50% -120px,rgba(232,72,28,.20),transparent 70%),
    radial-gradient(ellipse 50% 600px at 0% 100%,rgba(160,30,10,.14),transparent 70%),
    var(--background);
}

/* Kopf + Navigation: Nachthimmel mit Blutmond, Schloss und Baeumen.
   background-attachment:fixed haelt beide Leisten als EIN Bild zusammen,
   auch wenn der Kopf beim Scrollen kleben bleibt. */
:root.ks-halloween:not([data-theme="light"]) .topbar,
:root.ks-halloween:not([data-theme="light"]) .mainnav{
  background:linear-gradient(rgba(8,2,4,.12),rgba(8,2,4,.12)),
             url("/img/halloween/himmel.svg?v=2") center top/100% 132px no-repeat fixed,#0a0306;
}
:root.ks-halloween:not([data-theme="light"]) .topbar{border-bottom-color:rgba(255,106,26,.22)}
:root.ks-halloween:not([data-theme="light"]) .mainnav{border-bottom-color:rgba(255,106,26,.28)}
:root.ks-halloween:not([data-theme="light"]) .search>input,
:root.ks-halloween:not([data-theme="light"]) .account-button{background:rgba(12,3,5,.78)}
:root.ks-halloween:not([data-theme="light"]) .mainnav a{text-shadow:0 1px 6px rgba(0,0,0,.8)}
:root.ks-halloween:not([data-theme="light"]) .footer{background:rgba(10,3,5,.92)}
:root.ks-halloween:not([data-theme="light"]) .panel{background:linear-gradient(155deg,rgba(28,10,13,.97),rgba(12,4,6,.97))}

/* ---------- Farben: hell (Nutzerwahl bleibt erhalten, nur Akzente) ---------- */
:root.ks-halloween[data-theme="light"]{
  --gold:#c2410c;          /* 5,2:1 auf Weiss - Gold-Ton waere als Schrift zu blass */
  --gold-muted:#9a3412;
  --gold-a:#fb923c;
  --gold-b:#ea580c;
  --gold-ink:#fff;
  --line:rgba(194,65,12,.24);
  --hw-rand:rgba(194,65,12,.3);
  --hw-web:rgba(60,40,80,.22);
  --hw-bat:#2a1d36;
}
:root.ks-halloween[data-theme="light"] body{background:radial-gradient(ellipse 70% 360px at 50% -140px,rgba(234,88,12,.12),transparent 70%),#f6f0ee}

/* ---------- Startseite (v21-home3.css: eigene Token unter .k3, wird NACH dieser Datei geladen) ---------- */
:root.ks-halloween:not([data-theme="light"]) .k3{
  --k3-gold-1:#ffa149;
  --k3-gold-2:#e8481c;
  --k3-card:linear-gradient(180deg,rgba(30,11,14,.93),rgba(13,4,7,.97));
  --k3-line:rgba(255,106,26,.24);
  --k3-line-gold:rgba(255,122,26,.5);
  --k3-shadow:0 18px 40px rgba(0,0,0,.45);
}
:root.ks-halloween[data-theme="light"] .k3{
  --k3-gold-1:#ea580c;
  --k3-gold-2:#c2410c;
  --k3-line-gold:rgba(194,65,12,.35);
}

/* Hero: Bild warm eingefaerbt, Friedhof, Kuerbisse, Kerzen, Laternen. */
:root.ks-halloween .k3-hero{
  background:#0d0406;border-color:rgba(255,106,26,.45);
  box-shadow:0 0 0 1px rgba(255,90,20,.10),0 0 40px rgba(232,72,28,.18),0 18px 50px rgba(0,0,0,.5);
}
:root.ks-halloween .k3-hero-img{filter:sepia(.42) saturate(1.5) hue-rotate(-20deg) brightness(.8) contrast(1.08)}
:root.ks-halloween .k3-hero::before{
  background:
    radial-gradient(55% 75% at 88% 8%,rgba(255,80,20,.30),transparent 60%),
    linear-gradient(90deg,rgba(12,3,5,.96) 0%,rgba(14,4,6,.84) 32%,rgba(40,8,4,.18) 58%,rgba(30,6,4,.28) 82%,rgba(12,3,5,.8) 100%),
    linear-gradient(0deg,rgba(10,3,4,.9) 0%,transparent 42%);
}
:root.ks-halloween .k3-hero h1{
  font-family:"KS Grusel","Segoe UI Black",Impact,sans-serif;font-weight:400;
  font-size:clamp(40px,4.3vw,72px);line-height:1.04;letter-spacing:.01em;
  text-shadow:0 0 18px rgba(255,80,20,.25),0 6px 26px rgba(0,0,0,.6);
}
:root.ks-halloween .k3-hero h1 em{
  background-image:linear-gradient(180deg,#ff9a3c 5%,#ff5a1a 55%,#c41d0c 100%);
  filter:drop-shadow(0 0 14px rgba(255,70,20,.45));
}
:root.ks-halloween .k3-hero .k3-btn.ghost{border-color:rgba(255,140,60,.75);background:rgba(18,5,7,.55)}

.ks-hw-hero,.ks-hw-daily,.ks-hw-gruss{display:none}
:root.ks-halloween .ks-hw-hero{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none}
.ks-hw-hero i{position:absolute;display:block;background:center bottom/contain no-repeat}
.ks-hw-hero .fh{left:0;right:0;bottom:0;height:46%;background:url("/img/halloween/friedhof.svg?v=2") center bottom/cover no-repeat;opacity:.9}
.ks-hw-hero .k1{left:4px;bottom:4px;width:150px;height:136px;background-image:url("/img/halloween/kuerbis.svg?v=2")}
.ks-hw-hero .k2{left:196px;bottom:2px;width:74px;height:68px;background-image:url("/img/halloween/kuerbis.svg?v=2")}
.ks-hw-hero .kz{left:262px;bottom:0;width:96px;height:72px;background-image:url("/img/halloween/kerzen.svg?v=2")}
.ks-hw-hero .l1{left:136px;bottom:0;width:60px;height:120px;background-image:url("/img/halloween/laterne.svg?v=2")}
.ks-hw-hero .bt{left:34%;top:6%;width:30%;height:34%;color:#0a0204;filter:drop-shadow(0 0 6px rgba(255,90,20,.5))}
.ks-hw-hero .bt svg{position:absolute;width:44px;animation:ks-hw-schweben 4.5s ease-in-out infinite alternate}
.ks-hw-hero .bt svg:nth-child(1){left:0;top:30%}
.ks-hw-hero .bt svg:nth-child(2){left:40%;top:0;width:58px;animation-delay:-1.6s}
.ks-hw-hero .bt svg:nth-child(3){left:78%;top:46%;width:32px;animation-delay:-3s}
@keyframes ks-hw-schweben{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-10px) rotate(4deg)}}
.ks-hw-hero .l2{right:26px;bottom:8px;width:48px;height:96px;background-image:url("/img/halloween/laterne.svg?v=2")}
.ks-hw-hero .n1{left:0;top:0;width:150px;height:150px;background:url("/img/halloween/netz.svg?v=2") left top/contain no-repeat}
@media(min-width:1101px){
  /* Platz fuer Laterne/Kuerbisse links neben dem Text. */
  :root.ks-halloween .k3-hero{padding-left:150px}
}
@media(min-width:1280px){
  /* Suchfeld schmaler, damit Blutmond und Schloss im Kopf zu sehen sind. */
  :root.ks-halloween:not([data-theme="light"]) .search{max-width:560px;width:100%}
  :root.ks-halloween .k3-hero-sports{
    padding:10px 6px;border:1px solid rgba(255,106,26,.38);border-radius:14px;
    background:rgba(14,4,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:0 0 24px rgba(232,72,28,.15);
  }
}
@media(max-width:1100px){
  .ks-hw-hero .k2,.ks-hw-hero .kz,.ks-hw-hero .l1,.ks-hw-hero .bt{display:none}
  .ks-hw-hero .k1{left:auto;right:8px;width:96px;height:88px}
  .ks-hw-hero .l2{right:104px;width:36px;height:72px}
}
@media(max-width:600px){
  .ks-hw-hero .l2,.ks-hw-hero .n1{display:none}
  .ks-hw-hero .k1{width:72px;height:66px}
  .ks-hw-hero .fh{height:30%}
}

/* Kennzahlen: Glutrand, Balken in Feuerfarben. */
:root.ks-halloween:not([data-theme="light"]) .k3-kpis{background:rgba(16,5,7,.75);border-color:rgba(255,106,26,.22)}
:root.ks-halloween .k3-kpi{border-color:var(--hw-rand)}
:root.ks-halloween:not([data-theme="light"]) .k3-kpi{box-shadow:inset 0 0 28px rgba(255,80,20,.07),0 0 16px rgba(232,72,28,.08)}
:root.ks-halloween .k3-kpi-ic.gold{color:var(--hw-orange)}
:root.ks-halloween .k3-bars i{background:linear-gradient(180deg,#ff9a3c,#e8341c)}
:root.ks-halloween .k3-bars i.now{background:#ffd27a;box-shadow:0 0 10px rgba(255,160,60,.7)}

/* Karten: orangefarbener Rand, Spinnweben in den oberen Ecken. */
:root.ks-halloween .k3-card{border-color:var(--hw-rand)}
:root.ks-halloween:not([data-theme="light"]) .k3-card{
  background:url("/img/halloween/netz.svg?v=2") left top/86px no-repeat,
             url("/img/halloween/netz-r.svg?v=2") right top/86px no-repeat,var(--k3-card);
}
:root.ks-halloween .k3-lc{border-color:rgba(255,106,26,.3)}
:root.ks-halloween:not([data-theme="light"]) .k3-lc{background:rgba(255,80,20,.035)}
:root.ks-halloween .k3-lc.is-live{border-color:rgba(255,61,90,.5)}
:root.ks-halloween .k3-lc:hover{box-shadow:0 0 18px rgba(255,90,20,.18)}

/* Tagesausgabe: mittig, links Kuerbisse + Kerzen, rechts Friedhof + Hand + Laterne. */
:root.ks-halloween .k3-card.k3-daily-plan{position:relative;isolation:isolate;overflow:hidden;border-color:rgba(255,106,26,.5)}
:root.ks-halloween:not([data-theme="light"]) .k3-card.k3-daily-plan{
  background:radial-gradient(55% 130% at 50% 0%,rgba(255,90,20,.16),transparent 62%),linear-gradient(115deg,#1d080b,#0c0406);
}
:root.ks-halloween .ks-hw-gruss{
  display:inline-flex;align-items:center;gap:10px;margin:12px 0 0;
  font:400 clamp(22px,2.2vw,30px)/1.1 "KS Grusel",Impact,sans-serif;letter-spacing:.04em;
  color:var(--hw-orange);text-shadow:0 0 14px rgba(255,90,20,.45);
}
:root.ks-halloween .ks-hw-gruss::before,:root.ks-halloween .ks-hw-gruss::after{
  content:"";width:28px;height:25px;flex:none;background:url("/img/halloween/kuerbis.svg?v=2") center/contain no-repeat;
}
@media(min-width:1101px){
  :root.ks-halloween .k3-card.k3-daily-plan{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px;
    min-height:220px;padding:24px 25%;
  }
  :root.ks-halloween .k3-daily-plan .k3-daily-action{justify-items:center;justify-content:center}
  :root.ks-halloween .k3-daily-plan .k3-daily-copy{justify-content:center}
  :root.ks-halloween .k3-daily-plan .k3-daily-status{text-align:center}
  :root.ks-halloween .ks-hw-daily{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none}
  .ks-hw-daily i{position:absolute;bottom:0;height:100%;width:24%}
  .ks-hw-daily .links{left:0;background:
      url("/img/halloween/kuerbis.svg?v=2") 22% 100%/150px no-repeat,
      url("/img/halloween/kuerbis.svg?v=2") 88% 100%/86px no-repeat,
      url("/img/halloween/kerzen.svg?v=2") 0 100%/96px no-repeat}
  .ks-hw-daily .rechts{right:0;background:
      url("/img/halloween/zombiehand.svg?v=2") 26% 100%/60px no-repeat,
      url("/img/halloween/laterne.svg?v=2") 90% 96%/50px no-repeat,
      url("/img/halloween/friedhof.svg?v=2") right bottom/auto 92% no-repeat}
  .ks-hw-daily .rechts{-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
  :root.ks-halloween[data-theme="light"] .ks-hw-daily .rechts{background:
      url("/img/halloween/zombiehand.svg?v=2") 26% 100%/60px no-repeat,
      url("/img/halloween/laterne.svg?v=2") 90% 96%/50px no-repeat;-webkit-mask-image:none;mask-image:none}
}

/* Unterseiten: Kopfbereich des Spielplans mit Friedhof und Grusel-Ueberschrift. */
:root.ks-halloween:not([data-theme="light"]) .sp-hero{
  border-color:rgba(255,106,26,.4);
  background:url("/img/halloween/friedhof.svg?v=2") center bottom/100% 70% no-repeat,
             radial-gradient(500px 220px at 82% -40%,rgba(255,90,20,.24),transparent 60%),
             linear-gradient(135deg,#240a0d,#0c0406);
}
:root.ks-halloween .sp-hero h1{font-family:"KS Grusel",Impact,sans-serif;font-weight:400;letter-spacing:.03em;color:#fff;text-shadow:0 0 14px rgba(255,80,20,.35)}

/* ---------- Akzente ---------- */
:root.ks-halloween .mainnav a.active{box-shadow:inset 0 -2px 0 var(--hw-rot)}
:root.ks-halloween .btn-gold,:root.ks-halloween .k3-btn.gold{box-shadow:0 0 0 1px rgba(255,140,60,.35),0 6px 22px rgba(232,72,28,.4)}
:root.ks-halloween ::selection{background:rgba(255,122,26,.35)}

/* Kuerbis am Logo */
.ks-hw-badge{display:none}
:root.ks-halloween .ks-hw-badge{
  display:block;flex:none;align-self:center;width:44px;height:40px;margin-left:-2px;
  background:url("/img/halloween/kuerbis.svg?v=2") center/contain no-repeat;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(255,110,20,.5));
}
@media(max-width:600px){:root.ks-halloween .ks-hw-badge{width:30px;height:27px}}

/* ---------- Deko-Ebene (ganzes Fenster) ---------- */
.ks-hw-deko{display:none}
:root.ks-halloween .ks-hw-deko{
  display:block;position:fixed;inset:0;z-index:61;   /* knapp ueber .topbar (60), damit die Spinnweben in den Ecken sichtbar sind; klickdurchlaessig */
  pointer-events:none;overflow:hidden;contain:strict;
  animation:ks-hw-ein .9s ease-out both;
}
.ks-hw-web{position:absolute;top:0;width:clamp(110px,12vw,180px);color:var(--hw-web)}
.ks-hw-web svg{display:block;width:100%;height:auto}
.ks-hw-web--l{left:0}
.ks-hw-web--r{right:0;transform:scaleX(-1)}

.ks-hw-spider{position:absolute;top:0;right:clamp(54px,6.4vw,92px);width:22px;color:var(--hw-bat);
  transform-origin:50% 0;animation:ks-hw-spinne 9s ease-in-out infinite}
.ks-hw-spider i{display:block;width:1px;height:96px;margin:0 auto;background:var(--hw-web)}
.ks-hw-spider svg{display:block;width:22px;height:22px;margin-top:-2px;filter:drop-shadow(0 0 4px rgba(255,122,26,.45))}

.ks-hw-bat{position:absolute;left:0;top:0;width:44px;color:var(--hw-bat);opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 0 6px rgba(255,100,26,.5))}
.ks-hw-bat b{display:block;animation:ks-hw-flattern .32s ease-in-out infinite alternate;transform-origin:50% 60%}
.ks-hw-bat svg{display:block;width:100%;height:auto}
.ks-hw-bat--1{top:18vh;animation:ks-hw-flug-a 26s linear 2s infinite}
.ks-hw-bat--2{top:34vh;width:30px;animation:ks-hw-flug-b 34s linear 11s infinite}
.ks-hw-bat--3{top:62vh;width:36px;animation:ks-hw-flug-a 41s linear 23s infinite}

.ks-hw-nebel{position:absolute;left:-10%;right:-10%;bottom:-40px;height:180px;
  background:radial-gradient(ellipse 40% 60% at 25% 70%,rgba(200,170,190,.08),transparent 70%),
             radial-gradient(ellipse 45% 55% at 75% 80%,rgba(255,90,26,.08),transparent 70%);
  animation:ks-hw-nebel 22s ease-in-out infinite alternate}
:root.ks-halloween[data-theme="light"] .ks-hw-nebel{display:none}

/* Fledermaeuse fliegen nur in einem Teil der Zeit - der Rest ist Pause. */
@keyframes ks-hw-flug-a{
  0%{transform:translate3d(-8vw,0,0);opacity:0}
  2%{opacity:.9}
  10%{transform:translate3d(30vw,-4vh,0)}
  20%{transform:translate3d(70vw,3vh,0)}
  28%{transform:translate3d(108vw,-6vh,0);opacity:.9}
  29%,100%{transform:translate3d(110vw,-6vh,0);opacity:0}
}
@keyframes ks-hw-flug-b{
  0%{transform:translate3d(108vw,0,0) scaleX(-1);opacity:0}
  2%{opacity:.75}
  12%{transform:translate3d(64vw,5vh,0) scaleX(-1)}
  22%{transform:translate3d(24vw,-3vh,0) scaleX(-1)}
  30%{transform:translate3d(-10vw,2vh,0) scaleX(-1);opacity:.75}
  31%,100%{transform:translate3d(-12vw,2vh,0) scaleX(-1);opacity:0}
}
@keyframes ks-hw-flattern{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes ks-hw-spinne{0%,100%{transform:translateY(-34px)}50%{transform:translateY(0)}}
@keyframes ks-hw-nebel{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes ks-hw-ein{from{opacity:0}to{opacity:1}}

/* Schmale Bildschirme: weniger Deko, Inhalt hat Vorrang. */
@media(max-width:600px){
  .ks-hw-web{width:86px}
  .ks-hw-bat--3,.ks-hw-spider{display:none}
  :root.ks-halloween:not([data-theme="light"]) .k3-card{background:var(--k3-card)}
}
/* Bewegung reduziert: nur stehende Deko, keine Fledermaeuse. (Flammen/Glut in
   den SVG-Dateien beachten die Einstellung selbst.) */
@media(prefers-reduced-motion:reduce){
  :root.ks-halloween .ks-hw-deko,.ks-hw-spider,.ks-hw-nebel,.ks-hw-hero .bt svg{animation:none}
  .ks-hw-bat{display:none}
  .ks-hw-spider{transform:none}
}
@media print{.ks-hw-deko,.ks-hw-badge,.ks-hw-hero,.ks-hw-daily,.ks-hw-gruss{display:none!important}}