:root{
  --bg:#f3f3f1; --surface:#ffffff; --ink:#161616; --muted:#45453f;
  --tomato:#ff5a36; --sun:#ffd02a; --cobalt:#2e5bff; --mint:#3ddc8f;
  --accent:#ffd02a; --accent-ink:#161616; --focus:#161616;
  --f-display:"Bricolage Grotesque",system-ui,sans-serif; --f-text:"Bricolage Grotesque",system-ui,sans-serif; --f-btn:"Bricolage Grotesque",system-ui,sans-serif;
  --w-display:800; --lh-display:.9; --tr-display:-.035em; --tr-mark:-.03em; --case-display:none; --stretch-display:100%;
  --s-small:15px; --s-body:17px; --s-lead:20px; --s-btn:20px; --s-h3:25px; --s-mark:25px;
  --s-h2:clamp(42px,12vw,76px); --s-display:clamp(50px,14.2vw,92px); --s-price:clamp(80px,23vw,140px);
  --m:16px; --sec-gap:68px; --ease:cubic-bezier(.3,1.35,.5,1);
  --r-btn:999px; --r-card:22px; --r-chip:999px; --r-film:20px; --r-num:50%; --r-badge:999px; --badge-rot:rotate(-4deg);
  --offer-bg:#161616; --offer-ink:#ffd02a; --cd-bg:#ffd02a; --cd-ink:#161616;
  --chip-bg:#161616; --chip-ink:#ffffff;
  --btn-bg:#161616; --btn-ink:#ffffff; --btn-hover:#333333;
  --trust-ink:#161616; --trust-icon:#161616;
  --step-bg:#ffffff; --step-ink:#161616; --num-bg:#161616; --num-ink:#ffd02a;
  --pick-bg:#161616; --pick-ink:#ffffff; --pick-border:0; --badge-bg:#ffd02a; --badge-ink:#161616; --price-ink:#ffd02a;
  --note-bg:#ff5a36; --note-ink:#161616; --tick:#3ddc8f; --pick-btn-bg:#ffd02a; --pick-btn-ink:#161616; --pick-btn-hover:#ffe066; --pick-trust:#ececea; --pick-trust-icon:#3ddc8f;
  --req-bg:#2a2a2a; --req-ink:#eeeeec;
  --mini-bg:#ffffff; --mini-ink:#161616; --plus-bg:#ececE8; --plus-ink:#161616; --tick-mini:#2e5bff; --mini-btn-bg:#161616; --mini-btn-ink:#ffffff; --mini-btn-hover:#333333; --seat-bg:#ff5a36; --seat-ink:#161616;
  --faq-bg:#ffffff; --faq-ink:#161616;
  --final-btn-bg:#ffd02a; --final-btn-ink:#161616; --final-btn-hover:#ffe066;
  --bar-bg:#161616; --bar-ink:#ffffff; --bar-btn-bg:#ffd02a; --bar-btn-ink:#161616; --bar-btn-hover:#ffe066;
  --halftone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='4' cy='4' r='2.3' fill='%23161616' fill-opacity='.10'/><circle cx='12' cy='12' r='2.3' fill='%23161616' fill-opacity='.10'/></svg>");
}
@media (min-width:900px){:root{--m:40px; --sec-gap:130px; --s-body:18px; --s-lead:22px; --s-h3:30px; --s-mark:30px; --s-display:clamp(76px,6.9vw,104px); --s-h2:clamp(54px,5.4vw,88px); --s-price:clamp(110px,10vw,160px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-text); font-size:var(--s-body); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,video{display:block; max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,.sheet-h{margin:0; font-family:var(--f-display); font-weight:var(--w-display); line-height:var(--lh-display); letter-spacing:var(--tr-display); text-transform:var(--case-display); font-stretch:var(--stretch-display)}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
::selection{background:var(--accent); color:var(--accent-ink)}
.wrap{padding-inline:var(--m); max-width:640px; margin-inline:auto}
@media (min-width:900px){.wrap{max-width:1240px}}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Angebotsbanner */
.offer{background:var(--offer-bg); color:var(--offer-ink); padding:10px var(--m) 12px; text-align:center}
.offer p{font-size:var(--s-small); line-height:1.35; font-weight:600}
.cd{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:7px; font-size:var(--s-small); font-weight:600}
.cd span{display:inline-flex; align-items:baseline; gap:3px; min-width:52px; justify-content:center; padding:4px 8px; background:var(--cd-bg); color:var(--cd-ink); border-radius:var(--r-chip)}
.cd b{font-size:var(--s-body); font-weight:800; font-variant-numeric:tabular-nums}
.cd-static{display:none}
.no-js .cd{display:none}
.no-js .cd-static{display:block}
.offer-over .offer,.offer-over .intro-only{display:none}

/* Kopfzeile */
.top{display:flex; justify-content:space-between; align-items:center; height:56px}
.mark{font-family:var(--f-display); font-weight:var(--w-display); font-stretch:var(--stretch-display); text-transform:var(--case-display); letter-spacing:var(--tr-mark); font-size:var(--s-mark); text-decoration:none}
.top a.to-shop{font-size:var(--s-small); font-weight:700; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; padding:0 14px; border-radius:var(--r-btn); background:var(--chip-bg); color:var(--chip-ink)}

/* Hero */
.hero{padding-top:8px; padding-bottom:var(--sec-gap); text-align:center}
.hero h1{font-size:var(--s-display)}
.benefit{margin:22px auto 0; max-width:30ch; font-size:var(--s-lead); line-height:1.35}
.film{position:relative; width:min(74vw,330px); aspect-ratio:9/16; margin:14px auto 0}
.film-in{position:absolute; inset:0; overflow:hidden; background:#000; border-radius:var(--r-film)}
.film video{width:100%; height:100%; object-fit:cover}
.sound{position:absolute; z-index:2; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:0; border-radius:var(--r-btn); background:rgba(10,10,10,.78); color:#fff; font:inherit; font-size:var(--s-small); font-weight:700; cursor:pointer; transition:background-color .18s}
.sound:hover{background:#000}
.sound[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.sound svg{width:18px; height:18px}
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:440px; min-height:60px; margin:22px auto 0; padding:0 24px; border:0; border-radius:var(--r-btn); background:var(--btn-bg); color:var(--btn-ink); font-family:var(--f-btn); font-size:var(--s-btn); font-weight:800; text-decoration:none; cursor:pointer; transition:transform .16s var(--ease), background-color .18s}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.97)}
.trust{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:14px; font-size:var(--s-small); font-weight:600; color:var(--trust-ink)}
.trust span{display:inline-flex; align-items:center; gap:6px}
.trust svg{width:16px; height:16px; color:var(--trust-icon)}

/* Abschnitte */
.sec{padding-block:var(--sec-gap)}
.sec h2{font-size:var(--s-h2)}
.steps{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; counter-reset:st}
.steps li{counter-increment:st; display:grid; grid-template-columns:52px 1fr; column-gap:16px; align-items:start; padding:20px; background:var(--step-bg); color:var(--step-ink); border-radius:var(--r-card)}
.steps li::before{content:counter(st); grid-row:1 / span 2; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:var(--r-num); background:var(--num-bg); color:var(--num-ink); font-family:var(--f-display); font-weight:800; font-size:28px; font-stretch:var(--stretch-display)}
.steps h3{font-size:var(--s-h3); line-height:1.05}
.steps p{margin-top:6px; font-size:var(--s-body); line-height:1.45}

/* Pakete */
.pick{position:relative; margin-top:40px; background:var(--pick-bg); color:var(--pick-ink); border:var(--pick-border); border-radius:var(--r-card); padding:34px 22px 24px}
.badge{position:absolute; z-index:2; top:-17px; left:18px; padding:8px 14px; background:var(--badge-bg); color:var(--badge-ink); font-family:var(--f-btn); font-weight:800; font-size:var(--s-small); line-height:1.1; border-radius:var(--r-badge); transform:var(--badge-rot)}
.pick h3{font-size:var(--s-h2)}
.pick .for{margin-top:6px; font-size:var(--s-lead); line-height:1.3}
.price{display:flex; align-items:flex-end; gap:12px; margin-top:20px}
.price b{font-family:var(--f-display); font-weight:800; font-stretch:var(--stretch-display); font-size:var(--s-price); line-height:.82; letter-spacing:var(--tr-display); color:var(--price-ink); white-space:nowrap}
.price span{font-size:var(--s-small); line-height:1.35; padding-bottom:4px}
.intro-note{margin-top:12px; display:inline-block; padding:7px 12px; background:var(--note-bg); color:var(--note-ink); border-radius:var(--r-chip); font-size:var(--s-small); font-weight:700}
.incl{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px}
.incl li{display:grid; grid-template-columns:24px 1fr; gap:10px; font-size:var(--s-body); line-height:1.4}
.incl svg{width:22px; height:22px; color:var(--tick); margin-top:1px}
.pick .btn{max-width:none; margin-top:26px; background:var(--pick-btn-bg); color:var(--pick-btn-ink)}
.pick .btn:hover{background:var(--pick-btn-hover)}
.pick .trust{color:var(--pick-trust)}
.pick .trust svg{color:var(--pick-trust-icon)}
.req{margin-top:20px; padding:14px 16px; background:var(--req-bg); color:var(--req-ink); border-radius:var(--r-chip); font-size:var(--s-small); line-height:1.5}
.req b{font-weight:700}
.others{margin-top:16px; display:grid; gap:10px}
/* drei Pakete nebeneinander (Handy: untereinander), Starter hervorgehoben */
.plans{display:grid; gap:28px; margin-top:40px}
.plan{position:relative; display:flex; flex-direction:column; background:var(--mini-bg); color:var(--mini-ink); border-radius:var(--r-card); padding:30px 22px 22px}
.plan.pick{margin-top:0; background:var(--pick-bg); color:var(--pick-ink)}
.plan h3{font-size:var(--s-h3); font-weight:800; line-height:1.05}
.plan .for{margin-top:6px; font-size:var(--s-body); line-height:1.35}
.plan .price b{font-size:clamp(64px,7vw,96px)}
.plan:not(.pick) .price b{color:var(--mini-ink)}
.plan:not(.pick) .incl svg{color:var(--tick-mini)}
.plan .incl{margin-bottom:22px}
.plan .btn{max-width:none; margin-top:auto; background:var(--mini-btn-bg); color:var(--mini-btn-ink)}
.plan .btn:hover{background:var(--mini-btn-hover)}
.plan.pick .btn{background:var(--pick-btn-bg); color:var(--pick-btn-ink)}
.plan.pick .btn:hover{background:var(--pick-btn-hover)}
.plan .seats{align-self:flex-start; margin-top:12px}
.plan .intro-note{align-self:flex-start}
.plan-note{margin-top:12px; font-size:var(--s-small); line-height:1.4; opacity:.8}
/* 3D-Box des Pakets oben als Bühne, Titel und Satz darunter in voller Breite (Tim 28.10.2026: „gequetscht“, Koffer verdeckte den Titel).
   Feste Höhe, damit die Titel aller Karten auf einer Linie stehen. */
.plan-kopf{display:flex; flex-direction:column}
.plan-box{order:-1; position:relative; z-index:1; display:block; align-self:center; width:auto; max-width:100%; height:clamp(150px,13vw,180px); object-fit:contain; margin:0 0 18px; filter:drop-shadow(0 14px 16px rgba(22,22,22,.3))}
.plan.pick .plan-box{filter:drop-shadow(0 10px 26px rgba(40,140,255,.38))}
.shop > .trust{margin-top:22px}
/* dritte Karte: noch nicht buchbar, ausgegraut */
.plan-bald{background:#e7e6e1; color:#5d5c57}
.plan-bald h3,.plan-bald .price b{color:#5d5c57}
.plan-bald .incl svg{color:#8d8c86}
.plan-bald .btn{background:#cfcec8; color:#5d5c57; cursor:not-allowed; pointer-events:none}
.bald{position:absolute; top:-17px; left:18px; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-badge); background:#5d5c57; color:#fff; font-family:var(--f-btn); font-weight:800; font-size:var(--s-small); line-height:1.1}
.bald svg{width:15px; height:15px}
.mini{background:var(--mini-bg); color:var(--mini-ink); border-radius:var(--r-card)}
.mini summary{list-style:none; display:grid; grid-template-columns:1fr 28px; align-items:center; gap:12px; min-height:72px; padding:14px 18px; cursor:pointer}
.mini summary::-webkit-details-marker{display:none}
.mini summary b{display:block; font-family:var(--f-btn); font-size:var(--s-lead); font-weight:800; line-height:1.1}
.mini summary small{display:block; margin-top:3px; font-size:var(--s-small); line-height:1.35}
.plus{position:relative; width:28px; height:28px; border-radius:50%; background:var(--plus-bg)}
.plus::before,.plus::after{content:""; position:absolute; left:8px; right:8px; top:13px; height:2px; background:var(--plus-ink); transition:transform .2s var(--ease)}
.plus::after{transform:rotate(90deg)}
details[open] > summary .plus::after{transform:rotate(0)}
.mini-body{padding:0 18px 18px}
details:not([open]) > :not(summary){display:none}
.mini-body ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.mini-body li{display:grid; grid-template-columns:24px 1fr; gap:10px; font-size:var(--s-body); line-height:1.4}
.mini-body svg{width:22px; height:22px; color:var(--tick-mini)}
.mini .btn{min-height:54px; margin-top:16px; max-width:none; background:var(--mini-btn-bg); color:var(--mini-btn-ink)}
.mini .btn:hover{background:var(--mini-btn-hover)}
.seats{display:inline-block; margin-top:6px; padding:4px 10px; border-radius:var(--r-chip); background:var(--seat-bg); color:var(--seat-ink); font-size:var(--s-small); font-weight:700}

/* Fragen */
.faq{margin-top:24px; display:grid; gap:10px}
.faq details{background:var(--faq-bg); color:var(--faq-ink); border-radius:var(--r-card)}
.faq summary{list-style:none; display:grid; grid-template-columns:1fr 28px; align-items:center; gap:14px; min-height:64px; padding:14px 18px; cursor:pointer; font-family:var(--f-btn); font-size:var(--s-lead); font-weight:800; line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq details p{padding:0 18px 18px; font-size:var(--s-body); line-height:1.5; max-width:60ch}

/* Abschluss */
.final{text-align:center}
.final h2{font-size:var(--s-h2)}
.final p{margin:12px auto 0; max-width:32ch; font-size:var(--s-lead); line-height:1.35}
.final .btn{background:var(--final-btn-bg); color:var(--final-btn-ink)}
.final .btn:hover{background:var(--final-btn-hover)}

/* Fuß */
footer{padding:32px 0 calc(110px + env(safe-area-inset-bottom)); font-size:var(--s-small)}
footer .wrap{display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:space-between; align-items:center}
footer ul{display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:0; padding:0}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer .mark{font-size:var(--s-h3)}

/* Kaufleiste */
.buybar{position:fixed; z-index:40; left:0; right:0; bottom:0; padding:10px var(--m) calc(10px + env(safe-area-inset-bottom)); background:var(--bar-bg); color:var(--bar-ink); display:flex; align-items:center; justify-content:space-between; gap:14px; transform:translateY(110%); transition:transform .32s var(--ease); box-shadow:0 -8px 24px rgba(0,0,0,.18)} /* taste-skill-ignore: feste Kaufleiste schwebt wirklich */
.buybar.show{transform:none}
.buybar .what b{display:block; font-family:var(--f-btn); font-size:var(--s-lead); font-weight:800; line-height:1.1}
.buybar .what > span{display:block; font-size:var(--s-small); line-height:1.3; opacity:.85}
.buybar .btn{width:auto; margin:0; min-height:52px; padding:0 22px; background:var(--bar-btn-bg); color:var(--bar-btn-ink); white-space:nowrap}
.buybar .btn:hover{background:var(--bar-btn-hover)}

/* Bewegung */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease); transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1; transform:none}
.film-in{transition:clip-path 1.1s var(--ease)}
.js .film-in{clip-path:inset(0 0 100% 0)}
.js .open .film-in,.js .film.open .film-in{clip-path:inset(0 0 0 0)}
.js .film video{transform:scale(1.1); transition:transform 1.3s var(--ease)}
.js .film.open video{transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1; transform:none; transition:none}
  .js .film-in{clip-path:none; transition:none}
  .js .film video{transform:none; transition:none}
  .buybar{transition:none}
  html{scroll-behavior:auto}
}

/* Desktop: sauber mitgezogen */
@media (min-width:900px){
  .hero{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); grid-template-rows:1fr auto auto auto 1fr; column-gap:56px; text-align:left; padding-top:24px; min-height:calc(100svh - 140px)}
  .hero h1{grid-column:1; grid-row:2}
  .hero .benefit{grid-column:1; grid-row:3}
  .hero .btn{grid-column:1; grid-row:4}
  .hero .trust{grid-column:1; grid-row:5; align-self:start}
  .hero .film{grid-column:2; grid-row:1 / span 5; align-self:center; width:auto; height:min(calc(100svh - 190px),760px); margin:0 0 0 auto}
  .benefit{margin-left:0}
  .hero .btn{margin-left:0}
  .hero .trust{justify-content:flex-start}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:40px}
  .steps li{grid-template-columns:1fr; row-gap:16px; padding:28px}
  .steps li::before{grid-row:auto}
  .plans{gap:20px; margin-top:28px}
  .plan{padding:40px 28px 28px}
  .faq-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); column-gap:56px; align-items:start}
  .faq{margin-top:0}
  .buybar{display:none}
  footer{padding-bottom:40px}
}


/* Muster: Rasterpunkte wie Comicdruck, Farbkapitel */
.top,.hero{position:relative; isolation:isolate}
.top{height:64px}
.top::before,.hero::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw; background:var(--tomato) var(--halftone)}
.hero::before{background-position:0 0}
.film{width:min(68vw,320px); transform:rotate(-2.5deg)}
.film-in{inset:0; border:7px solid #fff; border-radius:26px}
.sticker{position:absolute; z-index:3; top:-14px; right:-16px; width:96px; height:96px; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; border-radius:50%; background:var(--sun); color:var(--ink); font-weight:800; font-size:15px; line-height:1.05; transform:rotate(12deg)}
.top a.to-shop{background:#161616; color:#fff}
/* Sprachumschalter DE · EN · FR (Tim, 27.10.2026), aktuelle Sprache dunkel */
.sprachen{display:flex; gap:2px; margin-left:auto; margin-right:10px; padding:3px; border-radius:var(--r-btn); background:rgba(22,22,22,.12)}
.sprachen a{min-width:40px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; border-radius:var(--r-btn); font-size:13px; font-weight:800; letter-spacing:.04em; text-decoration:none; color:#161616}
.sprachen a:hover{background:rgba(22,22,22,.12)}
.sprachen a[aria-current="true"]{background:#161616; color:#fff}
@media (max-width:520px){.top .mark{white-space:nowrap; font-size:21px} .sprachen{margin-right:6px; padding:2px} .sprachen a{min-width:30px; min-height:34px; padding:0 3px; font-size:11.5px} .top a.to-shop{padding:0 10px; font-size:14px}}
.steps-sec{background:var(--sun)}
.steps li{border-radius:22px}
.shop-sec{background:var(--bg)}
.pick h3{color:#fff}
.badge{left:auto; right:18px; top:-20px; padding:10px 16px}
.mini summary small{opacity:1; color:var(--muted)}
.faq-sec{background:var(--mint)}
.final{background:var(--cobalt); color:#fff}
.final .trust{color:#fff}
.final .trust svg{color:var(--sun)}
.hero .trust{color:#161616}
footer{background:#161616; color:#d6d6d2}
footer .mark{color:#fff}
.buybar{box-shadow:0 -10px 30px rgba(0,0,0,.25)} /* taste-skill-ignore: Kaufleiste */
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}

/* ===== Ergänzungen für die echte Seite ===== */
.skip{position:absolute; left:var(--m); top:-80px; z-index:60; padding:12px 18px; background:var(--ink); color:#fff; border-radius:var(--r-btn); font-weight:700; text-decoration:none}
.skip:focus{top:10px}
.req{display:grid; gap:8px; border-radius:16px}
.req p{margin:0}
.mini-note{margin-top:14px; font-size:var(--s-small); line-height:1.45; color:var(--muted)}
.linkish{border:0; background:none; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left}
.linkish:hover{text-decoration:underline}
footer ul{align-items:center}
footer li{display:flex; align-items:center; min-height:44px}

/* Kasse */
.sheet{width:min(100% - 24px, 520px); max-height:calc(100dvh - 24px); margin:auto; padding:0; border:0; border-radius:var(--r-card); background:#fff; color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.35)} /* taste-skill-ignore: Dialog schwebt wirklich */
.sheet::backdrop{background:rgba(22,22,22,.62)}
.sheet-in{position:relative; display:grid; gap:14px; padding:30px 22px 22px}
.sheet .sheet-h{font-size:clamp(34px,9vw,48px); padding-right:48px}
.sheet-sub{font-size:var(--s-body); line-height:1.45}
.sheet-req{padding:12px 14px; background:var(--bg); border-radius:14px; font-size:var(--s-small); line-height:1.45}
.check{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; padding:14px; background:var(--sun); border-radius:14px; font-size:var(--s-small); line-height:1.45; cursor:pointer}
.check input{width:24px; height:24px; margin:0; accent-color:var(--ink)}
.check[hidden]{display:none}
.sheet-legal{font-size:var(--s-small); line-height:1.45; color:var(--muted)}
.sheet .btn{max-width:none; margin:4px 0 0; background:var(--ink); color:#fff}
.sheet .btn:hover{background:#333}
.sheet-x{position:absolute; top:14px; right:14px; width:44px; height:44px; border:0; border-radius:50%; background:var(--bg); cursor:pointer}
.sheet-x span::before,.sheet-x span::after{content:""; position:absolute; left:13px; right:13px; top:21px; height:2px; background:var(--ink); transform:rotate(45deg)}
.sheet-x span::after{transform:rotate(-45deg)}
.sheet-x:hover{background:#e6e6e2}
.sheet[open]{animation:sheetIn .34s var(--ease)}
@keyframes sheetIn{from{opacity:0; transform:translateY(28px)}to{opacity:1; transform:none}}
@media (max-width:640px){
  .sheet{width:100%; max-width:none; margin:auto 0 0; border-radius:var(--r-card) var(--r-card) 0 0; max-height:92dvh}
  .sheet-in{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* Cookie-Hinweis */
.consent{position:fixed; z-index:70; left:12px; right:12px; bottom:12px; display:flex; justify-content:center}
.consent[hidden]{display:none}
.consent-in{width:100%; max-width:560px; padding:18px; background:#161616; color:#f3f3f1; border-radius:var(--r-card); box-shadow:0 18px 50px rgba(0,0,0,.35); font-size:var(--s-small); line-height:1.45} /* taste-skill-ignore: Hinweis schwebt wirklich */
.consent-h{font-family:var(--f-display); font-weight:800; font-size:var(--s-lead); line-height:1.15; margin-bottom:6px; color:#fff}
.consent-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.consent .btn{margin:0; min-height:52px; max-width:none; font-size:var(--s-body); background:var(--sun); color:#161616}
.consent .btn:hover{background:#ffe066}
@media (min-width:900px){.consent{left:auto; right:24px; bottom:24px}}

@media (prefers-reduced-motion:reduce){.sheet[open]{animation:none}}

/* ===== Unterseiten: Rechtliches und Danke ===== */
.doc-top{background:var(--tomato) var(--halftone)}
.doc-top .top{height:64px}
.doc-top .top::before{display:none}
.doc{padding-block:48px 96px}
.doc h1{font-size:clamp(44px,11vw,84px)}
.doc .stand{margin-top:14px; font-size:var(--s-small); color:var(--muted)}
.doc h2{margin-top:44px; font-size:clamp(26px,6.4vw,38px); line-height:1.05}
.doc h3{margin-top:26px; font-family:var(--f-text); font-size:var(--s-lead); font-weight:800; line-height:1.25; letter-spacing:0}
.doc p,.doc li{max-width:68ch}
.doc p{margin-top:12px}
.doc ul,.doc ol{margin:12px 0 0; padding-left:1.2em}
.doc li{margin-top:6px}
.doc a{text-decoration-thickness:2px; text-underline-offset:3px}
.doc .box{margin-top:18px; padding:18px; background:#fff; border-radius:16px; max-width:68ch}
.doc .box p:first-child{margin-top:0}
.ph{background:var(--sun); padding:1px 6px; border-radius:6px; font-weight:700}
.doc-foot{background:#161616; color:#d6d6d2; padding:28px 0 40px; font-size:var(--s-small)}
.doc-foot .wrap{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center}
.doc-foot a{text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.doc-foot a:hover{text-decoration:underline}
.doc-foot .mark{color:#fff; margin-right:auto}
@media (min-width:900px){.doc .wrap{max-width:920px}}
@media (max-width:640px){.consent{left:8px; right:8px; bottom:8px}.consent-in{padding:14px 14px calc(14px + env(safe-area-inset-bottom))}.consent-h{font-size:var(--s-body)}.consent-btns{margin-top:10px}.consent .btn{min-height:48px}}

/* Beispiele: drei echte Videos */
.ex-sec{background:#161616; color:#f3f3f1}
.ex-sub{margin-top:16px; max-width:40ch; font-size:var(--s-lead); line-height:1.35}
.ex-row{list-style:none; margin:28px 0 0; padding:0 0 6px; display:grid; grid-auto-flow:column; grid-auto-columns:min(66vw,260px); gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.ex-row::-webkit-scrollbar{display:none}
.ex{scroll-snap-align:start}
.ex figure{margin:0}
.ex-film{position:relative; aspect-ratio:9/16; overflow:hidden; border-radius:20px; background:#000; border:5px solid #fff}
.ex-film video{width:100%; height:100%; object-fit:cover}
.ex figcaption{margin-top:12px; display:grid; gap:2px; font-size:var(--s-small); line-height:1.35}
.ex figcaption b{font-size:var(--s-lead); font-weight:800; color:var(--sun)}
.ex-note{margin-top:20px; font-size:var(--s-small); color:#d6d6d2}
@media (min-width:900px){
  .ex-row{margin-inline:0; padding:0; grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible}
  .ex-sub{max-width:52ch}
}

/* Fertiges Beispiel direkt unter dem Hero */
.demo-sec{background:var(--bg)}
.demo{display:grid; gap:24px; justify-items:center; text-align:center}
.demo-in{margin-top:16px; font-size:var(--s-lead); line-height:1.4}
.demo-in b{font-weight:800}
.demo-note{margin-top:10px; font-size:var(--s-small); color:var(--muted)}
.demo-film{position:relative; margin:0}
/* Wisch-Karussell: ein Video pro Seite, das nächste lugt hervor */
.demo-wisch{width:min(84vw,360px); display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 8px}
.demo-wisch::-webkit-scrollbar{display:none}
.demo-wisch .demo-film{scroll-snap-align:start}
.demo-nav{margin-top:18px; display:inline-flex; align-items:center; gap:14px}
.demo-pfeil{width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:50%; background:#161616; color:#fff; cursor:pointer}
.demo-pfeil:hover{background:#333}
.demo-pfeil svg{width:22px; height:22px}
.demo-zaehler{min-width:4ch; font-weight:800; font-variant-numeric:tabular-nums}
.ex-film .sound{right:8px; bottom:8px; min-height:40px; padding:0 12px}
.demo-film .ex-film{border-width:7px; border-color:#161616; border-radius:26px}
@media (min-width:900px){
  .demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; justify-items:start; text-align:left}
  .demo-wisch{justify-self:end; width:min(34vw,420px)}
}

/* Studio-Preis: alter Preis dick durchgestrichen (Tim, 26.10.2026), verschwindet ab 16.11. mit .intro-only */
.price{flex-wrap:wrap}
.preis-alt{flex-basis:100%; font-family:var(--f-display); font-weight:800; font-size:clamp(34px,3.6vw,48px); line-height:1; letter-spacing:var(--tr-display); text-decoration:line-through; text-decoration-thickness:.13em; text-decoration-color:var(--tomato); opacity:.8}
.preis-alt-klein{text-decoration:line-through; text-decoration-thickness:.14em; text-decoration-color:var(--tomato); opacity:.75; font-weight:700}
.intro-zeile{margin-top:10px; font-size:var(--s-small); font-weight:600; opacity:.85}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Ruhigere Farben (Tim, 26.10.2026): Orange-Rot, Schwarz, Hell. Gelb nur noch für Knöpfe. */
:root{--offer-ink:#ffffff; --cd-bg:#ffffff; --cd-ink:#161616; --num-ink:#ffffff; --badge-bg:#ff5a36; --badge-ink:#161616;
  --price-ink:#ffffff; --tick:#ff5a36; --tick-mini:#ff5a36; --final-btn-bg:#161616; --final-btn-ink:#ffffff; --final-btn-hover:#333333}
.sticker{background:#161616; color:#ffffff}
.steps-sec{background:var(--surface)}
.steps li{background:var(--bg)}
.faq-sec{background:var(--surface)}
.final{position:relative; isolation:isolate; background:var(--tomato) var(--halftone); color:#161616}
.final .trust{color:#161616}
.final .trust svg{color:#161616}
.ex figcaption b{color:var(--tomato)}

@media (min-width:1200px){.plan{padding:38px 22px 24px} .plan .price b{font-size:clamp(54px,4.6vw,76px)}}
:root{--faq-bg:#f3f3f1}

/* Anfrage-Dialog: eine Frage pro Schritt, Antworten als große Knöpfe */
.schritt-zahl{font-size:var(--s-small); font-weight:700; color:var(--muted)}
.schritt{border:0; margin:0; padding:0; display:grid; gap:12px}
.schritt legend{padding:0; margin-bottom:12px; font-family:var(--f-btn); font-size:var(--s-lead); font-weight:800; line-height:1.25}
.schritt textarea,.feld input,.feld textarea{width:100%; box-sizing:border-box; min-height:52px; padding:12px 14px; border:2px solid var(--ink); border-radius:14px; background:#fff; font:inherit; font-size:16px; color:var(--ink)}
.wahlen{display:grid; gap:10px}
.wahl{position:relative; display:block; cursor:pointer}
.wahl input{position:absolute; opacity:0; inset:0; cursor:pointer}
.wahl span{display:block; padding:14px 16px; border:2px solid var(--ink); border-radius:14px; background:#fff; font-weight:700; line-height:1.3}
.wahl input:checked + span{background:var(--ink); color:#fff}
.wahl input:focus-visible + span{outline:3px solid var(--tomato); outline-offset:2px}
.feld{display:grid; gap:6px; font-size:var(--s-small); font-weight:700}
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.anfrage-fehler{margin:0; padding:10px 14px; border-radius:12px; background:var(--tomato); color:#161616; font-weight:700; font-size:var(--s-small)}
.schritt-knoepfe{display:flex; gap:10px}
.schritt-knoepfe .btn{flex:1}
.sheet .btn-leise{background:var(--bg); color:var(--ink)}
.sheet .btn-leise:hover{background:#e6e6e2}
.plan button.btn{cursor:pointer}

/* ausgeblendet heißt ausgeblendet, auch bei display:grid */
[hidden]{display:none !important}
.price .preis-alt span{font-size:inherit; padding:0; line-height:inherit}

/* Pakete als Wisch-Karussell (Tim, 26.10.2026): eine Karte pro Seite, die nächste lugt hervor; Pfeile blättern endlos */
.plans-kopf{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px}
.plan-nav{margin-top:0}
.plans{grid-auto-flow:column; grid-auto-columns:86%; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:26px 2px 10px; margin-top:16px}
.plans::-webkit-scrollbar{display:none}
.plans:focus-visible{outline:3px solid var(--tomato); outline-offset:4px; border-radius:var(--r-card)}
.plan{scroll-snap-align:start}
@media (min-width:900px){.plans{grid-auto-columns:calc((100% - 40px) / 2.4); gap:20px; margin-top:24px}}
@media (min-width:1200px){.plans{grid-auto-columns:calc((100% - 60px) / 3.25)}}
/* Am Laptop breiter (Tim 28.10.2026: „nur die Hälfte vom Display benutzt“, Karten gequetscht): der Paket-Abschnitt darf über den
   Seitenrahmen hinaus, ab 1700 px stehen alle vier Karten nebeneinander und die Pfeile entfallen */
@media (min-width:1200px){.shop-sec .wrap{max-width:1720px}}
@media (min-width:1700px){.plans{grid-auto-columns:calc((100% - 60px) / 4)} .plan-nav{display:none}}

/* Paket-Clips: kleiner Knopf mit Standbild in der Karte, Abspieler als Dialog */
.plan-clip{display:flex; align-items:center; gap:12px; width:100%; margin-top:16px; padding:8px 14px 8px 8px; border:0; border-radius:16px; background:rgba(22,22,22,.06); color:inherit; font:inherit; text-align:left; cursor:pointer}
.plan-clip:hover{background:rgba(22,22,22,.11)}
.plan.pick .plan-clip{background:rgba(255,255,255,.1)}
.plan.pick .plan-clip:hover{background:rgba(255,255,255,.16)}
.plan-clip img{width:54px; height:96px; flex:none; object-fit:cover; border-radius:10px; background:#161616}
.plan-clip span{flex:1; font-size:var(--s-small); line-height:1.35; opacity:.85}
.plan-clip b{display:block; font-size:var(--s-body); font-weight:800; opacity:1}
.plan-clip svg{width:40px; height:40px; flex:none; padding:10px 9px 10px 11px; border-radius:50%; background:var(--tomato); color:#161616}
.clip-dlg{padding:0; border:0; margin:auto; background:transparent; overflow:visible; max-width:calc(100vw - 24px)}
.clip-dlg::backdrop{background:rgba(10,10,10,.85)}
.clip-dlg video{display:block; height:min(86dvh, 900px); width:auto; max-width:calc(100vw - 24px); aspect-ratio:9/16; border-radius:22px; background:#000}
.clip-dlg .sheet-x{top:-8px; right:-8px; z-index:1; box-shadow:0 4px 16px rgba(0,0,0,.35)}

/* Kasse ruhiger (Tim, 26.10.2026: „muss man des so blöd schreiben?“): Verzicht-Häkchen hell statt gelb, Gelb nur für Knöpfe */
.check{background:var(--bg); box-shadow:inset 0 0 0 2px var(--ink)}

/* Kaufknöpfe auf Orange gelb (Tim, 27.10.2026: schwarz geht unter); Bewertungszeile direkt unter dem Knopf */
.hero .btn, .final .btn{background:var(--sun); color:#161616; box-shadow:0 0 0 2px #161616}
.hero .btn:hover, .final .btn:hover{background:#ffe066}
.bewertung{display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:#161616; font-size:var(--s-small); text-decoration:none}
.bewertung:hover span:last-child{text-decoration:underline}
.bewertung b{font-weight:800}
.sterne{display:inline-flex; gap:2px}
.sterne svg{width:16px; height:16px; color:#161616}
.final .bewertung{justify-content:center}
.fuss-hinweis{flex-basis:100%; margin-top:10px; font-size:12px; line-height:1.4; opacity:.7}
@media (min-width:900px){
  .hero{grid-template-rows:1fr auto auto auto auto auto 1fr}
  .hero .bewertung{grid-column:1; grid-row:5; justify-self:start}
  .hero .trust{grid-row:6}
  .hero .film{grid-row:1 / span 7}
}
@media (max-width:899px){.bewertung{flex-direction:column; gap:4px; text-align:center}}

/* Conversion (Tim, 27.10.2026): Preisanker in der Empfehlung, zweiter Weg im Hero */
.anker{margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--mint); color:#161616; font-size:var(--s-small); line-height:1.4}
.anker b{font-weight:800}
.anker-kosten{margin-top:10px; font-size:var(--s-small); line-height:1.4}
.anker-kosten a{color:inherit; text-decoration-style:dotted; text-underline-offset:3px}
.zweiter-weg{margin-top:12px; font-size:var(--s-small); color:#161616}
.zweiter-weg .linkish{font:inherit; font-weight:800; color:inherit; text-decoration:underline; text-underline-offset:3px; background:none; border:0; padding:0; cursor:pointer}
@media (min-width:900px){
  .hero{grid-template-rows:1fr auto auto auto auto auto auto 1fr}
  .hero .zweiter-weg{grid-column:1; grid-row:7}
  .hero .film{grid-row:1 / span 8}
}

/* Nebenprojekt und „Was realistisch ist“ (Tim, 27.10.2026: Side-Hustle-Zielgruppe, ehrlich ohne Einkommensversprechen) */
.h1-ober{display:block; margin-bottom:12px; font-family:var(--f-body, inherit); font-size:clamp(16px,1.6vw,20px); font-weight:800; letter-spacing:.02em; text-transform:uppercase}
/* Zwei dunkle Abschnitte (Nebenprojekt, Was realistisch ist): fast schwarz, Halftone in Tomato wandert dahinter (Canvas aus shop.js) */
.nacht{position:relative; background:#0d0d0d; color:#f3f3f1}
/* Halter so hoch wie der Block: die klebende Leinwand bleibt darin und ragt nie in den nächsten Abschnitt */
.nacht-halter{position:absolute; inset:0; z-index:0; pointer-events:none}
.nacht-feld{position:sticky; top:0; display:block; width:100%; height:100vh; height:100svh}
.nacht > .sec{position:relative; z-index:1; background:transparent}
.nacht a{color:inherit; text-decoration-thickness:2px; text-underline-offset:3px; transition:color .18s}
.nacht a:hover{color:var(--tomato)}
.nb-sub,.rl-sub{margin-top:18px; max-width:62ch; font-size:var(--s-lead); line-height:1.45}
.nacht-raster{display:grid; gap:40px; margin-top:44px; align-items:center}
.nacht-film{margin:0; width:min(78vw,340px); justify-self:center}
.nacht-film .ex-film{border:7px solid var(--tomato); border-radius:26px; transform:rotate(2deg); transition:transform .5s var(--ease)}
.nacht-raster-links .nacht-film .ex-film{transform:rotate(-2deg)}
.nacht-film:hover .ex-film{transform:rotate(0)}
.nacht-film figcaption{margin-top:16px; font-size:var(--s-small); line-height:1.4; color:#b9b9b2; text-align:center}
.nb-liste{margin:0; padding:0; list-style:none; display:grid; gap:30px}
.nb-liste h3,.rl-block h3{font-size:clamp(28px,3.2vw,40px); font-weight:800; line-height:1.02; color:var(--tomato)}
.nb-liste p,.rl-block p{margin-top:10px; font-size:var(--s-body); line-height:1.5; max-width:52ch}
.rl-liste{display:grid; gap:40px}
.rl-block b{font-weight:800}
.rl-block .rl-zahl{margin-top:16px; font-family:var(--f-display); font-size:clamp(44px,5.2vw,72px); font-weight:800; line-height:.95; letter-spacing:-.035em; font-variant-numeric:tabular-nums; max-width:none}
.rl-block .rl-zahl span{color:var(--tomato)}
.rl-quelle{display:inline-block; margin-top:8px; font-size:var(--s-small) !important; color:#b9b9b2}
.rl-quelle a{color:inherit}
.nacht-raster .nacht-film{order:-1} /* Handy: Video zuerst */
@media (min-width:900px){
  .nacht-raster{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:72px}
  .nacht-raster .nacht-film{order:0}
  .nacht-raster-links{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
  .nacht-film{width:min(100%,370px)}
  .nb-liste{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; row-gap:44px}
}
@media (prefers-reduced-motion:reduce){.nacht-film .ex-film,.nacht-raster-links .nacht-film .ex-film{transform:none; transition:none}}
footer ul{flex-wrap:wrap}

.sg-sub{margin-top:16px; max-width:66ch; font-size:var(--s-lead); line-height:1.45}

/* Countdown-Balken (Tim, 27.10.2026): Preis größer, 149 € rot durchgestrichen, Zeit-Badges zurückhaltender */
.offer .offer-preis{font-size:clamp(17px,2vw,21px); font-weight:700; line-height:1.3}
.offer .offer-preis b{font-weight:800}
.offer-alt{text-decoration:line-through; text-decoration-color:var(--tomato); text-decoration-thickness:.14em; color:var(--tomato); font-weight:800}
.offer-alt span{color:inherit}
.cd{gap:5px; margin-top:6px}
.cd span{min-width:46px; padding:3px 7px; font-size:12px; font-weight:500}
.cd b{font-size:14px; font-weight:700}

/* Ratgeber (public/ratgeber/, gebaut von tools/seo.py) */
.ratgeber .krumen{font-size:var(--s-small); color:var(--muted)}
.ratgeber .krumen a{color:inherit}
.ratgeber .krumen + h1,.ratgeber article h1{margin-top:14px}
.ratgeber h1{font-size:clamp(38px,9.4vw,72px)}
.ratgeber .lead{margin-top:18px; font-size:var(--s-lead); line-height:1.4; max-width:60ch}
.ratgeber .box ul{margin-top:8px}
.ratgeber .klein{font-size:var(--s-small); color:var(--muted)}
.ratgeber .tabelle{margin-top:16px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.ratgeber table{border-collapse:collapse; min-width:560px; width:100%; background:#fff; border-radius:16px; font-size:var(--s-small); line-height:1.4}
.ratgeber th,.ratgeber td{padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid #e6e6e2}
.ratgeber tr:last-child td{border-bottom:0}
.ratgeber th{font-weight:800}
.ratgeber code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:#fff; padding:1px 5px; border-radius:6px}
.ratgeber pre{margin-top:14px; max-width:68ch; overflow-x:auto; padding:16px 18px; background:#161616; color:#f3f3f1; border-radius:16px; font-size:14px; line-height:1.55}
.ratgeber pre code{background:none; padding:0; color:inherit}
.ratgeber .faq{margin-top:16px; max-width:68ch}
.ratgeber .faq details{background:#fff}
.ratgeber .faq details p{margin-top:0}
.ratgeber .quellen{font-size:var(--s-small); line-height:1.45}
.ratgeber .quellen li{overflow-wrap:anywhere}
.ratgeber .cta{margin-top:40px; padding:24px; max-width:68ch; border-radius:16px; background:var(--tomato) var(--halftone); color:#161616}
.ratgeber .cta p{max-width:52ch}
.ratgeber .cta p:first-child{margin-top:0; font-family:var(--f-display); font-size:clamp(24px,5.6vw,32px); line-height:1.05}
.ratgeber .cta .btn{margin:18px 0 0; background:#161616; color:#fff}
.ratgeber .autor{margin-top:48px; padding-top:8px; border-top:2px solid #161616; max-width:68ch}
.ratgeber .autor h2{margin-top:20px}
.ratgeber-liste{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:12px; max-width:68ch}
.doc .ratgeber-liste li{margin:0; max-width:none}
.ratgeber-liste a{display:block; padding:20px 22px; background:#fff; border-radius:16px; color:inherit; text-decoration:none; transition:transform .16s var(--ease)}
.ratgeber-liste a:hover{transform:translateY(-2px)}
.ratgeber-liste b{display:block; font-family:var(--f-display); font-size:clamp(24px,5.6vw,32px); line-height:1.05}
.ratgeber-liste span{display:block; margin-top:8px; color:var(--muted)}
.ratgeber .tabelle.schmal table{min-width:0}
.ratgeber .tabelle.schmal th{width:34%}

/* Kauf-Knopf zwischen den Abschnitten */
.cta-zeile{margin-top:56px; text-align:center}
.cta-zeile .btn{margin:0 auto}
.cta-klein{margin-top:12px; font-size:var(--s-small); color:var(--muted)}
.cta-klein a{color:inherit; font-weight:700}
.nacht .cta-zeile .btn{background:var(--tomato); color:#161616}
.nacht .cta-zeile .btn:hover{background:#ff7a5c}
.nacht .cta-klein{color:#b9b9b2}

/* Vertrauens-Band unter dem Hero: läuft langsam durch, steht bei Hover und ohne Bewegung still */
.vertrauen{background:#161616; color:#f3f3f1; overflow:hidden; padding-block:16px}
.tb-spur{display:flex; width:max-content; animation:tb-lauf 42s linear infinite}
.vertrauen:hover .tb-spur{animation-play-state:paused}
.tb-liste{display:flex; align-items:center; gap:44px; margin:0; padding:0 22px; list-style:none; flex:none}
.tb-liste li{display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:var(--s-small); font-weight:600}
.tb-liste b{font-weight:800}
.tb-logo{display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 8px; background:#fff; border-radius:6px}
.tb-logo svg{display:block; height:18px; width:auto}
.tb-visa svg,.tb-amex svg{width:54px}
.tb-amex{background:#016fd0}
.tb-stripe{color:#9a95ff; font-weight:900; letter-spacing:-.02em}
.tb-sterne{display:inline-flex; gap:2px; color:var(--sun)}
.tb-sterne svg{width:15px; height:15px}
@keyframes tb-lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .tb-spur{width:auto; animation:none}
  .tb-liste[aria-hidden]{display:none}
  .tb-liste{flex-wrap:wrap; justify-content:center; row-gap:12px; margin-inline:auto}
}
.demo > .cta-zeile{grid-column:1 / -1; justify-self:stretch; margin-top:24px}

/* Kurskarte: „Neu“ im gezackten Angebotsstern wie ein Sale-Sticker (Tim, 27.10.2026: „nicht so ein Kreis, sondern so
   dieses Sale-Stern-mäßig“). Schatten am äußeren Element, weil clip-path ihn sonst wegschneidet. Innerhalb der 26 px
   Luft über dem Karussell, sonst wird er abgeschnitten. */
.stern{position:absolute; z-index:2; top:-14px; right:8px; width:80px; height:80px; margin:0; filter:drop-shadow(0 6px 10px rgba(22,22,22,.22)); transform:rotate(12deg); animation:stern-wippen 3.2s ease-in-out infinite}
.stern span{display:grid; place-items:center; width:100%; height:100%; background:var(--badge-bg); color:var(--badge-ink); font-family:var(--f-btn); font-weight:800; font-size:21px; line-height:1; letter-spacing:.02em; text-transform:uppercase; clip-path:polygon(50.0% 0.0%,57.1% 9.6%,67.1% 3.0%,70.5% 14.5%,82.1% 11.7%,81.4% 23.6%,93.3% 25.0%,88.5% 36.0%,99.2% 41.3%,91.0% 50.0%,99.2% 58.7%,88.5% 64.0%,93.3% 75.0%,81.4% 76.4%,82.1% 88.3%,70.5% 85.5%,67.1% 97.0%,57.1% 90.4%,50.0% 100.0%,42.9% 90.4%,32.9% 97.0%,29.5% 85.5%,17.9% 88.3%,18.6% 76.4%,6.7% 75.0%,11.5% 64.0%,0.8% 58.7%,9.0% 50.0%,0.8% 41.3%,11.5% 36.0%,6.7% 25.0%,18.6% 23.6%,17.9% 11.7%,29.5% 14.5%,32.9% 3.0%,42.9% 9.6%)}
:lang(fr) .stern span{font-size:14px; letter-spacing:0}
/* Kursbox rückt nach links, der Stern sitzt wie ein Aufkleber auf ihrer oberen Ecke (Tim, 28.10.2026: Box wie bei den Skills) */
@keyframes stern-wippen{0%,100%{transform:rotate(12deg) scale(1)} 50%{transform:rotate(4deg) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.stern{animation:none}}

/* Kassen-Erinnerung: freiwillig, deshalb leiser als das Pflicht-Häkchen (Tim, 28.10.2026) */
.check.check-leise{background:transparent; box-shadow:none; padding:6px 2px; color:var(--muted, #5b5b55)}
.feld[hidden]{display:none}
/* Angebot nach dem Kauf auf der Danke-Seite */
.angebot{margin-top:22px; padding:26px 22px; border-radius:22px; background:#161616; color:#fff; border:3px solid var(--tomato); box-shadow:0 0 0 5px rgba(255,90,54,.18), 0 14px 44px rgba(255,90,54,.32)} /* Hot Deal (Tim 28.10.) */
.angebot h2{margin:8px 0 6px; font-size:var(--s-h3)}
.angebot-chip{display:inline-block; margin:0; padding:6px 12px; border-radius:999px; background:#ff5a36; color:#161616; font-weight:800; font-size:var(--s-small)}
.angebot-preis{margin:14px 0 2px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.angebot-preis b{font-size:44px; line-height:1; color:#ffd02a}
.angebot-preis s{position:relative; display:inline-block; padding:0 4px; font-weight:800; font-size:31px; letter-spacing:.5px; color:#fff; text-decoration:none; animation:streich-wackeln 3.2s ease-in-out 1s infinite}
.angebot-preis s::after{content:""; position:absolute; left:-2px; right:-2px; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:#ff2e2e; box-shadow:0 0 0 1px #161616; transform:rotate(20deg)} /* schräg von links oben nach rechts unten, Ziffern bleiben lesbar (Tim 28.10.) */
@keyframes streich-wackeln{0%,80%,100%{transform:none} 83%{transform:rotate(-6deg) scale(1.08)} 86%{transform:rotate(5deg) scale(1.08)} 89%{transform:rotate(-4deg) scale(1.05)} 92%{transform:rotate(3deg)} 95%{transform:none}}
@media (prefers-reduced-motion:reduce){.angebot-preis s{animation:none}}
.angebot-bis{margin:0 0 14px; opacity:.85; font-size:var(--s-small)}
.angebot .check{background:#fff; color:#161616}
.angebot .btn{max-width:none; margin-top:14px; background:#ffd02a; color:#161616}