/* ===========================================================
   Win & Ride — Design System
   Basis: Coming-Soon-Seite (Kampagnen-Verlauf, HS Mische, Avenir Next)
   =========================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:"HS Mische Display";src:url("/fonts/HS-Mische-Display.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/fonts/AvenirNext-Regular-08-1.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/fonts/AvenirNext-Medium-06-1.ttf") format("truetype");font-weight:500;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/fonts/AvenirNext-DemiBold-03-1.ttf") format("truetype");font-weight:600;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/fonts/AvenirNext-Bold-01-1.ttf") format("truetype");font-weight:700;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/fonts/AvenirNext-Heavy-09-1.ttf") format("truetype");font-weight:900;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --sky:#9ad4df; --dawn:#f5c4bd; --sand:#fae8bd;
  --sun:#ffda71; --sun-deep:#ffc24a;
  --red:#e52629; --red-deep:#cd141d;
  --ink:#101a1f; --ink-soft:#33454d;
  --card:#fffaf0; --paper:#fffdf8;
  --line:#e7ddc7; --line-strong:#d6c9ab;
  --footer:#141b22;
  --stroke:#20303a;
  --wrap:1180px;
  --radius:16px;
  --shadow-sm:0 2px 0 rgba(32,48,58,.10);
  --shadow:0 10px 30px -18px rgba(32,48,58,.5);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  font-family:"Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--sand);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;max-width:100%;
}
/* Sicherheitsnetz gegen horizontalen Überlauf auf schmalen Screens */
.prize-rail{max-width:100%;}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px;}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,40px);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* ---------- Typography ---------- */
.display{font-family:"HS Mische Display",cursive;font-weight:400;line-height:.96;letter-spacing:.005em;text-transform:uppercase;}
h1,h2,h3{text-wrap:balance;}
.eyebrow{font-family:"HS Mische Display",cursive;text-transform:uppercase;letter-spacing:.04em;color:var(--red-deep);font-size:clamp(.85rem,2vw,1rem);}
.lead{font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--ink-soft);font-weight:500;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:800;font-size:1.02rem;letter-spacing:.01em;line-height:1;
  padding:.95em 1.6em;border-radius:999px;border:2.5px solid var(--stroke);
  background:var(--red);color:#fff;cursor:pointer;
  box-shadow:0 5px 0 rgba(32,48,58,.18);transition:transform .12s ease,box-shadow .12s ease,background .15s;}
.btn:hover{background:var(--red-deep);transform:translateY(-1px);box-shadow:0 7px 0 rgba(32,48,58,.18);}
.btn:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(32,48,58,.18);}
.btn--light{background:var(--card);color:var(--ink);}
.btn--light:hover{background:#fff;}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:none;}
.btn--lg{font-size:1.15rem;padding:1.05em 2em;}

/* ---------- Header ---------- */
.site-header{z-index:30;transition:background .25s ease, box-shadow .25s ease;}
/* Bei offenem Menue hebt sich der ganze Header-Stacking-Context ueber das Intro-Logo (z:31) */
body.menu-open .site-header{z-index:60;}
body:not(.is-home) .site-header{position:sticky;top:0;background:var(--sand);}
body.is-home .site-header{position:fixed;top:0;left:0;right:0;background:transparent;}
body.is-home.scrolled .site-header{background:rgba(250,232,189,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 22px -14px rgba(0,0,0,.5);}
body.is-home.js-intro .site-header .brand img{opacity:0;}

/* Intro-Logo (nur Startseite, per JS): startet gross & zentriert, schrumpft an die Header-Position */
.intro-logo{display:none;}
body.is-home.js-intro .intro-logo{display:block;position:fixed;z-index:31;will-change:transform;
  transform-origin:center center;filter:drop-shadow(0 6px 0 rgba(255,255,255,.55));}
body.is-home.js-intro .intro-logo img{width:100%;height:auto;display:block;}
/* Menü-Panel liegt per position:fixed über allem (auch dem Intro-Logo), ohne das Logo zu verdecken */
/* Hero-Text tiefer, damit das grosse Logo oben Platz hat */
body.is-home .hero{padding-top:clamp(200px,38vh,420px);}
/* Scroll-Hinweis (nur Intro, blendet beim Scrollen aus) */
html{scroll-behavior:smooth;}
.scroll-hint{position:absolute;left:50%;bottom:calc(clamp(300px,42vh,520px) + 8px);transform:translateX(-50%);
  z-index:6;color:var(--ink);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(255,251,240,.9);opacity:.75;display:none;cursor:pointer;text-decoration:none;}
.scroll-hint:hover{opacity:1;color:var(--red-deep);}
body.is-home.js-intro .scroll-hint{display:block;animation:hintbob 1.8s ease-in-out infinite;}
body.is-home.scrolled .scroll-hint{opacity:0;transition:opacity .3s;}
.scroll-hint{text-align:center;}
.scroll-hint .sh-arrow{display:block;font-size:1.2rem;margin-top:2px;line-height:1;}
@keyframes hintbob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,5px);}}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:clamp(7px,1.3vw,12px);}
.brand img{width:clamp(142px,15vw,184px);height:auto;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.5));}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,24px);position:relative;}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);}
.nav-links a,.nav-howto{font-weight:700;font-size:.98rem;color:var(--ink);white-space:nowrap;
  background:none;border:none;cursor:pointer;padding:0;font-family:inherit;}
.nav-links a:hover,.nav-howto:hover{color:var(--red-deep);}
.langswitch{display:inline-flex;gap:2px;background:rgba(255,250,240,.72);
  border:2px solid var(--stroke);border-radius:999px;padding:3px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:var(--shadow-sm);}
.langswitch a{font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);padding:.5em .72em;border-radius:999px;transition:background .15s,color .15s;}
.langswitch a[aria-current="true"]{background:var(--red-deep);color:#fff;}
.langswitch a:hover:not([aria-current="true"]){background:rgba(32,48,58,.1);}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;
  background:rgba(255,250,240,.72);border:2px solid var(--stroke);border-radius:12px;cursor:pointer;padding:0 10px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:var(--shadow-sm);}
.nav-toggle span{display:block;height:2.5px;width:100%;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* "So funktioniert's" Modal-Schritte */
.howto-steps{display:flex;flex-direction:column;gap:16px;margin-top:1.3em;}
.howto-step{display:flex;gap:16px;align-items:flex-start;}
.howto-step .n{font-family:"HS Mische Display",cursive;font-size:1.9rem;color:var(--red);line-height:1;min-width:1.5ch;}
.howto-step h4{margin:0 0 .2em;font-size:1.08rem;color:var(--ink);}
.howto-step p{margin:0;color:var(--ink-soft);font-size:.95rem;}

/* ---------- Sky / hero backdrop ---------- */
.sky{position:relative;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky) 3%,var(--dawn) 32%,var(--sand) 59%,var(--sand) 100%);}
.scenery-band{position:absolute;left:0;bottom:0;width:100%;height:clamp(300px,42vh,520px);z-index:1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%);}
.scenery-band img{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:100%;min-width:1120px;}
.balloon{position:absolute;top:9%;right:6%;width:clamp(70px,9vw,120px);z-index:3;
  filter:drop-shadow(0 10px 14px rgba(32,48,58,.16));
  animation:drift 9s ease-in-out infinite;}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-1.5deg);}50%{transform:translateY(-16px) rotate(2deg);}}

/* ---------- Hero ---------- */
.hero{position:relative;z-index:5;text-align:center;padding-block:clamp(24px,4vh,52px) clamp(230px,34vh,430px);}
.hero::before{content:"";position:absolute;z-index:-1;left:50%;top:1%;transform:translateX(-50%);
  width:min(122%,1020px);height:97%;pointer-events:none;filter:blur(10px);
  background:radial-gradient(ellipse 58% 56% at 50% 40%, rgba(255,251,240,.5), rgba(255,251,240,.22) 55%, transparent 78%);}
.hero .headline{font-size:clamp(2.5rem,7.4vw,5rem);color:var(--ink);text-shadow:0 2px 16px rgba(255,255,255,.92),0 1px 2px rgba(255,255,255,.95),0 3px 0 rgba(255,255,255,.5);margin-top:.3em;}
.hero .lead{max-width:40ch;margin:1rem auto 0;
  text-shadow:0 1px 2px rgba(255,251,240,.95),0 0 16px rgba(255,251,240,.8);}

/* Störer (Preis-Sticker) */
.stoerer{position:absolute;z-index:6;top:clamp(70px,14vh,150px);left:clamp(8px,6vw,90px);
  width:clamp(122px,15.5vw,184px);filter:drop-shadow(0 8px 12px rgba(32,48,58,.22));transform:rotate(-6deg);}
.stoerer .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;line-height:1.05;transform:rotate(0);padding:0 11%;}
.stoerer .t1{font-family:"HS Mische Display",cursive;font-size:clamp(.8rem,2vw,1.08rem);line-height:1.02;}
.stoerer .t2{font-family:"HS Mische Display",cursive;font-size:clamp(1.02rem,2.5vw,1.46rem);line-height:1.05;margin:.06em 0;white-space:nowrap;}
.stoerer .t3{font-family:"HS Mische Display",cursive;font-size:clamp(.8rem,2vw,1.08rem);line-height:1.02;}

/* ---------- Code-Eingabe ---------- */
.codebox{max-width:560px;margin:clamp(20px,4vh,36px) auto 0;position:relative;z-index:6;}
.codebox form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.code-input{flex:1 1 240px;min-width:0;font-family:"HS Mische Display",cursive;font-size:1.5rem;
  text-align:center;text-transform:uppercase;letter-spacing:.14em;
  padding:.7em .8em;border-radius:14px;border:2.5px solid var(--stroke);background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-sm);}
.code-input::placeholder{color:#b7a988;letter-spacing:.08em;}
.code-hint{margin-top:.9em;font-size:.9rem;color:var(--ink);font-weight:500;
  display:inline-block;background:rgba(255,251,240,.72);padding:.4em .9em;border-radius:999px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-shadow:none;}

/* Hero bekommt mehr Raum (Grafik prominent); volle Szene mit Schiff/Fluss */
.sky--hero{min-height:100svh;display:flex;flex-direction:column;}
/* Volle Szene als Ebenen: Hintergrund (ohne Zug) + fahrender Zug + Kanten-Verdecker + Wasser */
.scenery-band--full{height:clamp(500px,90vh,1000px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%);}
.scenery-band--full .scene-layer{position:absolute;inset:0;left:0;bottom:0;width:100%;height:100%;min-width:0;
  object-fit:cover;object-position:44% center;transform:none;}
/* Kanten-Verdecker: identische Szene, nur an den Rändern sichtbar → Zug fährt hinter die Bäume */
/* scene-fg ist die echte Vordergrund-Ebene (Baeume, Bruecke, Turm, Kuehe, Schiff) – der Zug faehrt DAHINTER */
/* Zug faehrt auf den Schienen hinter den Baeumen durch, zwischen den Baeumen sichtbar; Pause, dann wieder von links */
.scenery-band--full .scene-train{will-change:transform;animation:trainride 20s linear infinite;}
@keyframes trainride{
  0%{transform:translateX(-95%);}    /* versteckt links (hinter dem grossen Baum) */
  4%{transform:translateX(-95%);}    /* kurzer Halt */
  72%{transform:translateX(72%);}    /* rueber, hinter die rechten Tannen */
  100%{transform:translateX(72%);}   /* kurze Pause (~5.5s), dann wieder von links */
}
@media (prefers-reduced-motion: reduce){
  .scenery-band--full .scene-train{animation:none;transform:translateX(0);}
}
.sky--hero .scroll-hint{bottom:clamp(46px,9vh,90px);}

/* Code-Eingabe vereint in der Hauptpreis-Spalte */
.code-label{display:block;font-weight:800;color:var(--ink);margin:0 0 .55em;font-size:1.05rem;}
.codebox--inline{max-width:480px;margin:1.5em 0 0;position:static;}
.codebox--inline form{justify-content:flex-start;}
.codebox--inline .code-input{flex:1 1 200px;}
.codebox--inline .code-hint{margin-top:.7em;background:transparent;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  color:var(--ink-soft);font-weight:400;text-shadow:none;display:block;}
.mainprize-body .price{margin-top:.5em;}
.mainprize-lead{margin-top:.7em;color:var(--ink-soft);}
.mainprize-more{margin-top:1.1em;}
.link-more{display:inline-flex;align-items:center;gap:.4em;padding:0;border:none;background:none;cursor:pointer;
  font:inherit;font-weight:700;color:var(--red-deep);text-decoration:underline;text-underline-offset:3px;box-shadow:none;}
.link-more span{transition:transform .15s ease;}
.link-more:hover{color:var(--ink);}
.link-more:hover span{transform:translateX(3px);}

/* ---------- Sections ---------- */
.section{padding-block:clamp(48px,8vw,88px);}
.section--paper{background:var(--paper);}
.section-head{text-align:center;max-width:52ch;margin-inline:auto;margin-bottom:clamp(26px,4vw,44px);}
.section-head h2{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3rem);line-height:1;color:var(--ink);}
.section-head p{margin-top:.7em;color:var(--ink-soft);font-size:1.08rem;}

/* ---------- "So funktioniert's" steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,28px);}
.step{background:var(--card);border:2.5px solid var(--stroke);border-radius:var(--radius);
  padding:clamp(20px,3vw,30px);text-align:center;box-shadow:0 6px 0 rgba(32,48,58,.10);}
.step .n{font-family:"HS Mische Display",cursive;font-size:2.4rem;color:var(--red);line-height:1;}
.step h3{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;font-size:1.2rem;margin:.4em 0 .3em;}
.step p{color:var(--ink-soft);font-size:.98rem;}

/* ---------- Sofortpreis-Slider / Wand ---------- */
.prize-rail{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;}
.prize-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
.prize{scroll-snap-align:start;flex:0 0 auto;width:clamp(150px,40vw,190px);
  background:var(--card);border:2px solid var(--line-strong);border-radius:14px;padding:16px;text-align:center;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.prize .ph{aspect-ratio:1;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#fff,var(--sand));}
.prize .ph img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain;}
.prize .ph .mono{width:58%;aspect-ratio:1;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-family:"HS Mische Display",cursive;font-size:1.7rem;line-height:1;
  box-shadow:0 4px 0 rgba(32,48,58,.14);}
.prize .name{font-weight:700;font-size:.92rem;margin-top:.6em;color:var(--ink);line-height:1.2;min-height:2.4em;
  display:flex;align-items:center;justify-content:center;text-transform:uppercase;}
.prize .logo{height:22px;margin:.4em auto 0;width:auto;}
/* Kachel: Produktbild oben, Name Mitte, Markenlogo unten */
.prize .brand-bottom{height:70px;display:flex;align-items:center;justify-content:center;margin-top:auto;padding-top:.4em;flex:0 0 auto;}
.prize .brand-bottom img{max-height:100%;width:auto;max-width:100%;object-fit:contain;}
.prize .brand-bottom--text{font-size:.72rem;color:var(--ink-soft);opacity:.72;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}

/* Sofortpreis-Slider: horizontal, ohne Scrollbar, verspielt rotierte Kacheln + Pfeile */
.slider{position:relative;}
.prize-rail--slider{display:flex;gap:clamp(16px,2vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:16px 6px 22px;scrollbar-width:none;-ms-overflow-style:none;}
.prize-rail--slider::-webkit-scrollbar{display:none;}
.prize-rail--slider .prize{flex:0 0 auto;width:clamp(158px,42vw,196px);scroll-snap-align:center;
  transition:transform .18s ease, box-shadow .18s ease;box-shadow:0 6px 0 rgba(32,48,58,.10);}
.prize-rail--slider .prize:nth-child(4n+1){transform:rotate(-2.2deg);}
.prize-rail--slider .prize:nth-child(4n+2){transform:rotate(1.6deg);}
.prize-rail--slider .prize:nth-child(4n+3){transform:rotate(-1deg);}
.prize-rail--slider .prize:nth-child(4n){transform:rotate(2deg);}
.prize-rail--slider .prize:hover,.prize-rail--slider .prize:focus-within{transform:rotate(0) translateY(-4px);box-shadow:0 14px 28px -14px rgba(32,48,58,.5);}
.slider-arrow{position:absolute;top:calc(50% - 4px);transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;
  background:var(--card);border:2.5px solid var(--stroke);cursor:pointer;font-size:1.7rem;line-height:1;color:var(--ink);
  box-shadow:0 5px 0 rgba(32,48,58,.14);display:flex;align-items:center;justify-content:center;padding-bottom:3px;transition:background .15s;}
.slider-prev{left:-12px;} .slider-next{right:-12px;}
.slider-arrow:hover{background:#fff;}
@media (max-width:640px){
  .slider-arrow{width:40px;height:40px;font-size:1.4rem;}
  .slider-prev{left:-4px;} .slider-next{right:-4px;}
}

/* ---------- Hauptpreis (zentriert, ohne Bild – Keyvisual ist oben) ---------- */
.mainprize-center{max-width:720px;margin-inline:auto;text-align:center;}
.mainprize-title{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,3.2rem);line-height:1;color:var(--ink);margin-top:.15em;}
.mainprize-center .price{display:inline-block;margin-top:.6em;font-weight:800;color:var(--red-deep);font-size:1.05rem;}
.mainprize-center .mainprize-lead{max-width:52ch;margin:.8em auto 0;color:var(--ink-soft);}
.mainprize-center .mainprize-more{margin-top:1.4em;}

/* Code-Eingabe als auffällige Karte, volle Breite */
.codebox--hero{max-width:620px;margin:clamp(26px,4vw,42px) auto 0;position:relative;
  background:var(--card);border:2.5px solid var(--stroke);border-radius:24px;
  padding:clamp(26px,4vw,40px);box-shadow:0 12px 0 rgba(32,48,58,.09);overflow:hidden;}
.codebox--hero::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:linear-gradient(90deg,var(--sky),#f5c4bd,var(--sand));}
.codebox--hero .code-label{display:block;font-family:"HS Mische Display",cursive;font-weight:400;
  text-transform:uppercase;font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--ink);margin:0 0 .7em;letter-spacing:.01em;}
.codebox--hero form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.codebox--hero .code-input{flex:1 1 300px;min-width:0;font-family:"HS Mische Display",cursive;
  font-size:clamp(1.6rem,4vw,2.1rem);text-align:center;text-transform:uppercase;letter-spacing:.18em;
  padding:.55em .6em;border-radius:14px;border:2.5px solid var(--stroke);background:#fff;color:var(--ink);
  box-shadow:inset 0 2px 6px rgba(32,48,58,.06);transition:border-color .15s, box-shadow .15s;}
.codebox--hero .code-input::placeholder{color:#c3b592;letter-spacing:.1em;}
.codebox--hero .code-input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(229,38,41,.14);}
.codebox--hero .btn--lg{flex:0 0 auto;}
.codebox--hero .code-hint{margin:.9em 0 0;font-size:.9rem;color:var(--ink-soft);}

/* ---------- Accordion (FAQ) ---------- */
.accordion{max-width:800px;margin-inline:auto;display:flex;flex-direction:column;gap:10px;}
.acc-item{background:var(--card);border:2px solid var(--line-strong);border-radius:12px;overflow:hidden;transition:box-shadow .2s ease;}
.acc-item:not(.collapsed){box-shadow:0 8px 22px -14px rgba(32,48,58,.45);}
.acc-head{width:100%;text-align:left;cursor:pointer;background:none;border:0;font:inherit;font-weight:700;color:var(--ink);
  padding:16px 20px;display:flex;justify-content:space-between;gap:14px;align-items:center;line-height:1.3;}
.acc-head:hover{color:var(--red-deep);}
/* Plus-/Minus-Icon, animiert (Plus dreht sich zu Minus) */
.acc-icon{position:relative;width:20px;height:20px;flex:0 0 auto;transition:transform .32s cubic-bezier(.4,0,.2,1);}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;background:var(--red);border-radius:2px;transition:transform .32s cubic-bezier(.4,0,.2,1);}
.acc-icon::before{top:8.75px;left:2px;right:2px;height:2.5px;}
.acc-icon::after{left:8.75px;top:2px;bottom:2px;width:2.5px;}
.acc-item:not(.collapsed) .acc-icon{transform:rotate(180deg);}
.acc-item:not(.collapsed) .acc-icon::after{transform:scaleY(0);}
/* Panel-Animation via grid-template-rows (0fr → 1fr) */
.acc-panel{display:grid;grid-template-rows:1fr;}
.acc-inner{overflow:hidden;min-height:0;opacity:1;}
.acc--ready .acc-panel{transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1);}
.acc--ready .acc-inner{transition:opacity .28s ease .04s;}
.acc-item.collapsed .acc-panel{grid-template-rows:0fr;}
.acc-item.collapsed .acc-inner{opacity:0;}
.acc-body{padding:2px 20px 18px;color:var(--ink-soft);}
.acc-body p{margin:.5em 0;}
.acc-body p:first-child{margin-top:0;}
@media (prefers-reduced-motion: reduce){
  .acc--ready .acc-panel,.acc--ready .acc-inner,.acc-icon,.acc-icon::before,.acc-icon::after{transition:none;}
}

/* ---------- Legal / Fliesstext ---------- */
.legal{max-width:820px;}
.legal-content{color:var(--ink-soft);font-size:1.02rem;}
.legal-content h2{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;font-size:1.5rem;color:var(--ink);margin:1.6em 0 .4em;}
.legal-content h3{font-weight:800;color:var(--ink);margin:1.3em 0 .3em;font-size:1.1rem;}
.legal-content p{margin:.7em 0;}
.legal-content ul,.legal-content ol{margin:.6em 0;padding-left:1.3em;}
.legal-content li{margin:.3em 0;}
.legal-content a{color:var(--red-deep);text-decoration:underline;}

/* ---------- Sofortpreise-Uebersicht: verspielte Kacheln (wie Slider) ---------- */
.prize-grid--playful{gap:clamp(18px,2.4vw,28px);padding:8px 2px 4px;}
.prize-grid--playful .prize{transition:transform .18s ease, box-shadow .18s ease;box-shadow:0 6px 0 rgba(32,48,58,.10);width:auto;}
.prize-grid--playful .prize:nth-child(4n+1){transform:rotate(-2.2deg);}
.prize-grid--playful .prize:nth-child(4n+2){transform:rotate(1.6deg);}
.prize-grid--playful .prize:nth-child(4n+3){transform:rotate(-1deg);}
.prize-grid--playful .prize:nth-child(4n){transform:rotate(2deg);}
.prize-grid--playful .prize:hover,.prize-grid--playful .prize:focus-within{transform:rotate(0) translateY(-4px);box-shadow:0 14px 28px -14px rgba(32,48,58,.5);}

/* ---------- Sofortpreise: Einloese-Hinweis ---------- */
.redeem-note{max-width:640px;margin:clamp(34px,5vw,52px) auto 0;text-align:center;background:var(--card);
  border:2px solid var(--line-strong);border-radius:16px;padding:clamp(22px,3vw,32px);box-shadow:0 6px 0 rgba(32,48,58,.10);}
.redeem-note h3{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;font-size:1.3rem;color:var(--ink);margin-bottom:.4em;}
.redeem-note p{color:var(--ink-soft);margin-bottom:1.2em;}

/* ---------- Kontaktformular (FAQ-Seite) ---------- */
.faq-between{max-width:680px;margin:clamp(40px,6vw,64px) auto 0;text-align:center;
  font-family:"HS Mische Display",cursive;font-weight:400;color:var(--ink);
  font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.22;}
.field-hint{display:block;margin-top:5px;font-size:.82rem;color:var(--ink-soft);opacity:.85;}
.file-input{width:100%;font:inherit;font-size:.92rem;color:var(--ink);}
.file-input::file-selector-button{font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;margin-right:12px;
  padding:.55em .9em;border-radius:9px;border:2px solid var(--line-strong);background:var(--sand);color:var(--ink);transition:background .15s;}
.file-input::file-selector-button:hover{background:#fff;}
.contact{max-width:640px;margin:clamp(28px,4vw,40px) auto 0;background:var(--card);border:2px solid var(--line-strong);
  border-radius:16px;padding:clamp(24px,3.4vw,38px);box-shadow:0 6px 0 rgba(32,48,58,.10);}
.contact h3{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;font-size:1.35rem;color:var(--ink);}
.contact-lead{color:var(--ink-soft);margin:.4em 0 1.2em;}
.field textarea{width:100%;padding:.7em .9em;border-radius:10px;border:2px solid var(--line-strong);
  background:#fff;font:inherit;color:var(--ink);resize:vertical;min-height:120px;}
.contact .form-ok{display:none;background:var(--sand);border-radius:10px;padding:14px 16px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer);color:#fff;margin-top:0;}
/* Heller Partner-Balken: Haupt-Partnerkategorien (Logos aus Werbemittel, Labels aus lang/*/site.php) */
.partner-bar{background:#fff;}
.partner-groups{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;
  gap:clamp(22px,4vw,60px);padding-block:clamp(24px,3.4vw,40px);}
.pgroup{flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.pgroup-label{font-size:clamp(.72rem,1.3vw,.85rem);font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.pgroup-logos{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;min-height:48px;}
.pgroup-logos{gap:clamp(10px,2vw,22px);}
/* Partnerlogos (#28): weisse Flächen alle gleich hoch; Logo-Grösse nach Fläche normiert (--h je Logo im Markup),
   damit breite (Stimorol, Nescafé) und runde Logos (Starbucks, Lipton) optisch gleich gross wirken. */
.pgroup-logos .plogo{--s:1;display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;
  height:calc(58px * var(--s));padding:0 calc(16px * var(--s));box-sizing:border-box;}
.pgroup-logos .plogo img{display:block;height:calc(var(--h) * 1px * var(--s));width:auto;max-width:none;}
@media (max-width:600px){ .pgroup-logos .plogo{--s:.82;} }
/* Dunkler Hauptbereich: prominenter SBB + Aktion von + Navigation */
.footer-main{display:grid;grid-template-columns:1.1fr minmax(220px,.9fr);gap:clamp(28px,5vw,72px);
  padding-block:clamp(34px,5vw,54px) clamp(24px,3vw,32px);align-items:start;}
.footer-brandcol{order:1;display:flex;flex-direction:column;align-items:flex-end;gap:clamp(20px,2.6vw,30px);}
.fp-block{display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.fp-label{font-family:"HS Mische Display",cursive;text-transform:uppercase;letter-spacing:.06em;
  font-size:.9rem;color:rgba(255,255,255,.62);text-align:right;}
.fp-chips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;}
.logo-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:9px;
  padding:8px 12px;height:46px;box-sizing:border-box;}
.logo-chip img{display:block;height:26px;width:auto;max-width:130px;object-fit:contain;}
.logo-chip--lead{height:66px;padding:12px 20px;border-radius:12px;}
.logo-chip--lead img{height:38px;max-width:220px;}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);}
/* Partner-Logo-Links (kein Link-Styling, dezenter Hover) */
.pgroup-logos a.plogo{line-height:0;text-decoration:none;transition:opacity .15s ease;}
.pgroup-logos a.plogo:hover{opacity:.72;}
a.logo-chip{text-decoration:none;transition:opacity .15s ease;}
a.logo-chip:hover{opacity:.86;}
.site-footer h4{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.06em;color:rgba(255,255,255,.62);margin-bottom:12px;}
.site-footer a{color:rgba(255,255,255,.86);}
.site-footer a:hover{color:#fff;}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.footer-partners{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap;margin-top:6px;}
.footer-partners img{display:block;width:auto;}
.p-kiosk{height:30px;border-radius:3px;}
.p-pb{height:26px;mix-blend-mode:lighten;}
.p-avec{height:24px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:16px;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;
  color:rgba(255,255,255,.5);font-size:.82rem;}

/* ---------- Modals (Teilnahme / Fehler) ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(16,26,31,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.modal.open{display:flex;}
.modal .panel{background:var(--paper);border-radius:20px;max-width:520px;width:100%;padding:clamp(24px,4vw,40px);
  border:2.5px solid var(--stroke);box-shadow:var(--shadow);text-align:center;position:relative;
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;}
.modal .close{position:absolute;top:12px;right:14px;font-size:1.6rem;line-height:1;background:none;border:0;cursor:pointer;color:var(--ink-soft);}
.modal h3{font-family:"HS Mische Display",cursive;font-weight:400;text-transform:uppercase;font-size:1.6rem;color:var(--ink);margin-bottom:.3em;}
.field{text-align:left;margin:12px 0;}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:4px;}
.field input[type=text],.field input[type=email],.field input[type=tel]{width:100%;padding:.7em .9em;border-radius:10px;
  border:2px solid var(--line-strong);background:#fff;font-size:1rem;color:var(--ink);}
.field .check{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;color:var(--ink-soft);}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .steps{grid-template-columns:1fr;}
  .footer-main{grid-template-columns:1fr;}
  .footer-brandcol,.fp-block{align-items:center;}
  .fp-chips{justify-content:center;}
  .fp-label{text-align:center;}
}
/* Code-Karte: auf Mobile Eingabe + Button gestapelt, Button volle Breite */
@media (max-width:560px){
  .codebox--hero .code-input{flex:1 1 100%;}
  .codebox--hero .btn--lg{flex:1 1 100%;width:100%;}
}
/* Hamburger-Menü auf schmaleren Screens */
@media (max-width:760px){
  .nav-toggle{display:flex;}
  .nav-links{position:fixed;top:clamp(60px,9vh,80px);right:clamp(14px,4vw,40px);left:auto;z-index:50;min-width:220px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border:2px solid var(--stroke);border-radius:14px;overflow:hidden;
    box-shadow:0 16px 30px -16px rgba(0,0,0,.5);padding:6px;display:none;}
  body.menu-open .nav-links{display:flex;}
  .nav-links a,.nav-howto{padding:12px 16px;text-align:left;width:100%;font-size:1.02rem;border-radius:8px;}
  .nav-links a:hover,.nav-howto:hover{background:var(--surface-2,#f4eede);}
}

@media (max-width:640px){
  .footer-nav{grid-template-columns:1fr;}
  /* Störer mittig, UNTER Logo/Headline und knapp über der Szene (kollidiert nicht mit dem grossen Intro-Logo) */
  .stoerer{top:auto;bottom:30vh;left:50%;transform:translateX(-50%) rotate(-6deg);width:clamp(116px,30vw,138px);}
  /* Headline naeher an die Szene ruecken (kompaktere Komposition) */
  .sky--hero .hero{padding-bottom:clamp(210px,30vh,300px);}
  /* Scroll-Hinweis nach rechts (kein Overlap mit Stoerer) und vertikal stehend; blendet beim Scrollen aus */
  .sky--hero .scroll-hint{bottom:auto;top:42vh;left:auto;right:clamp(10px,4vw,20px);transform:none;
    display:flex;flex-direction:column;align-items:center;gap:3px;transition:opacity .3s ease;}
  .sky--hero .scroll-hint .sh-word{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:2px;line-height:1;}
  .sky--hero .scroll-hint .sh-arrow{margin-top:0;}
  body.scrolled .scroll-hint{opacity:0;}
  /* Ballon kleiner, damit er den Sprachumschalter nicht touchiert */
  .balloon{top:11%;right:4%;width:clamp(58px,15vw,78px);}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;}}

@media (max-width:640px){
  /* Mobile: volle Szenenbreite zeigen (sonst schneidet cover die Zug-Nasen ab) */
  .scenery-band--full{height:clamp(480px,84vh,900px);}
  .scenery-band--full .scene-layer{object-fit:contain;object-position:center bottom;}
}

/* ---------- Cookie-Banner (cmp.compresso.ch) ----------
   Fix für einen Fehler im CMP-Widget: das zentrierte Banner wird nach "Akzeptieren/Ablehnen" nur per opacity:0
   ausgeblendet und fängt unsichtbar weiter alle Klicks in der Bildschirmmitte ab (z. B. "Teilnehmen").
   ID-Selektor, damit die zur Laufzeit injizierten Widget-Styles überschrieben werden. */
#cmp-banner:not(.cmp-visible){visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s;}
#cmp-overlay:not(.cmp-visible){pointer-events:none;}

/* ---------- Endscreen (nach Kampagnenende, CAMPAIGN_ENDED=true) ---------- */
.endscreen{min-height:50vh;display:flex;align-items:center;scroll-margin-top:110px;}
.endscreen .wrap{width:100%;}
.endscreen .endscreen-lead{font-weight:700;color:var(--ink);}
.endscreen .endscreen-text{max-width:60ch;margin:1em auto 0;color:var(--ink-soft);}
.endscreen a{color:inherit;text-decoration:underline;text-underline-offset:2px;}