/* Babaganoush Funnel — gemeinsames Aussehen.
   Mobile zuerst: der ganze Traffic kommt aus Reels und Stories.
   Monochrom wie die Marke: Schwarz, Weiß, fette Versalien. Kein Gelb, das kommt nur aus
   den Text-Overlays der Reels und ist keine Markenfarbe. Rot bleibt als einziges Signal
   und ausschließlich für das ablaufende Trostpreis-Fenster und für Fehlermeldungen. */

:root{
  --ink:#0B0B0C;
  --surface:#141416;
  --surface-2:#1C1C1F;
  --line:#2B2B30;
  --paper:#EFEDE6;
  --muted:#96938A;
  --muted-2:#8A8880;   /* war #6E6C65, das ergab auf dem dunklen Grund nur 3,5 zu 1. Jetzt 5,2 */
  --akzent:#FFFFFF;
  --akzent-weich:rgba(255,255,255,.07);
  --red:#E0554C;
  --green:#8FBF9A;
  --tap:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);color:var(--paper);
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column;
}
h1,h2,.pov{font-family:"Anton","Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;margin:0;line-height:1.16}
/* Mehr Durchschuss als bei h2: sobald eine h1 mit .mark-Hervorhebung umbricht, malt der
   gelbe Kasten der oberen Zeile sonst in die untere hinein. Bei 1.16 passierte genau das. */
h1{font-size:clamp(2rem,7.5vw,2.9rem);line-height:1.42}
h2{font-size:clamp(1.4rem,5vw,1.9rem)}
p{margin:0}
a{color:var(--akzent)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

.huelle{width:100%;max-width:560px;margin:0 auto;padding:0 20px;flex:1;display:flex;flex-direction:column}

/* Kopf mit Fortschritt */
.kopf{padding:18px 0 6px;display:flex;align-items:center;gap:14px}
.marke{font-family:"Anton",sans-serif;text-transform:lowercase;font-size:1.15rem;letter-spacing:.02em}
.fortschritt{flex:1;height:3px;background:var(--line);position:relative;overflow:hidden}
.fortschritt i{position:absolute;inset:0 auto 0 0;background:var(--akzent);width:0;transition:width .35s ease}
@media (prefers-reduced-motion:reduce){.fortschritt i{transition:none}}

/* Schritte */
.schritt{display:none;padding:26px 0 8px;flex:1;flex-direction:column}
.schritt.aktiv{display:flex;animation:rein .28s ease}
@keyframes rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.schritt.aktiv{animation:none}}

.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Die Hervorhebung soll den Text markieren, nicht ihn einrahmen. Deshalb kaum Luft nach
   oben und unten und eine leicht negative vertikale Korrektur, sonst wirken die Kästen
   wie Blöcke und die Überschrift wird unruhig. */
.mark{
  background:var(--akzent);color:#000;padding:0 .1em;margin:0 -.02em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.lede{color:#D6D3CA;margin-top:14px}
.klein{font-size:.85rem;color:var(--muted)}
.mini{font-size:.75rem;color:var(--muted-2);line-height:1.45}

/* Vorteile */
.vorteile{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.vorteile li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.vorteile li::before{content:"";width:12px;height:12px;background:var(--akzent);margin-top:6px}
.vorteile b{font-weight:600}

/* Auswahl-Karten */
.wahl{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.wahl button{
  min-height:var(--tap);width:100%;text-align:left;
  background:var(--surface);color:var(--paper);border:1px solid var(--line);
  padding:15px 18px;font:inherit;font-weight:500;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.wahl button:hover,.wahl button:focus-visible{border-color:var(--akzent);outline:none}
.wahl button::after{content:"→";color:var(--muted);font-size:1.1rem}
.wahl button:hover::after,.wahl button:focus-visible::after{color:var(--akzent)}

/* Formular */
.feld{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.feld label{font-size:.85rem;color:var(--muted)}
.feld input,.feld textarea,.feld select{
  min-height:var(--tap);background:var(--surface);color:var(--paper);
  border:1px solid var(--line);padding:14px 16px;font:inherit;width:100%;border-radius:0;
}
.feld textarea{min-height:96px;resize:vertical}
.feld input:focus,.feld textarea:focus{border-color:var(--akzent);outline:none}
.zustimmung{display:grid;grid-template-columns:24px 1fr;gap:12px;margin-top:20px;align-items:start}
.zustimmung input{width:24px;height:24px;min-height:0;margin-top:2px;accent-color:var(--akzent)}
.zustimmung span{font-size:.82rem;color:var(--muted);line-height:1.45}

.cta{
  display:block;width:100%;min-height:var(--tap);margin-top:24px;
  background:var(--akzent);color:#000;border:0;cursor:pointer;
  font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em;
  padding:16px;text-align:center;text-decoration:none;
}
.cta[disabled]{opacity:.45;cursor:not-allowed}
.cta.geist{background:transparent;color:var(--muted);border:1px solid var(--line);font-size:.95rem}
.zurueck{background:none;border:0;color:var(--muted);font:inherit;font-size:.85rem;padding:14px 0;cursor:pointer;text-align:left}

.fehler{margin-top:14px;border-left:3px solid var(--red);background:rgba(224,85,76,.10);padding:10px 14px;font-size:.88rem;color:#F5CFCB}
.fehler:empty{display:none}

/* Kasten, Countdown, Termine */
.kasten{border:1px solid var(--line);background:var(--surface);padding:18px;margin-top:22px}
.kasten.betont{border-color:var(--akzent);background:var(--akzent-weich)}
.uhr{
  border:1px solid var(--red);background:rgba(224,85,76,.10);padding:14px 16px;margin-top:18px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.uhr b{font-family:"JetBrains Mono",monospace;font-size:1.7rem;color:var(--red);font-weight:700}
.uhr span{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.termine{display:flex;flex-direction:column;gap:8px;margin-top:18px;max-height:52vh;overflow-y:auto}
.termin{
  min-height:var(--tap);display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);padding:13px 16px;cursor:pointer;font:inherit;color:var(--paper);text-align:left;
}
.termin:hover,.termin:focus-visible{border-color:var(--akzent);outline:none}
.termin.gewaehlt{border-color:var(--akzent);background:var(--akzent-weich)}
.termin .tag{font-weight:600}
.termin .wer{font-size:.82rem;color:var(--muted)}

.stapel{list-style:none;margin:16px 0 0;padding:0}
.stapel li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.stapel li:last-child{border-bottom:0}
.stapel .v{font-family:"JetBrains Mono",monospace;color:var(--muted);white-space:nowrap}
.stapel .summe{border-top:1px solid var(--akzent);border-bottom:0;margin-top:8px;padding-top:12px;font-weight:600}
.stapel .summe .v{color:var(--akzent);font-weight:700}
.durch{text-decoration:line-through;color:var(--muted-2)}

/* Cookie-Banner: das Pixel lädt erst nach Zustimmung */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface-2);
  border-top:1px solid var(--line);padding:16px 20px;
}
.cookie .inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.cookie p{font-size:.8rem;color:var(--muted)}
.cookie .knoepfe{display:flex;gap:10px}
.cookie button{flex:1;min-height:46px;font:inherit;font-weight:600;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--paper)}
.cookie button.ja{background:var(--akzent);color:#000;border-color:var(--akzent)}

footer{padding:28px 0 34px;color:var(--muted-2);font-size:.75rem;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
footer a{color:var(--muted)}

/* Rechtstexte und Danke-Seiten lesen sich als Fließtext */
.text{max-width:640px;margin:0 auto;padding:32px 20px 60px}
.text h1{margin-bottom:18px}
.text h2{font-size:1.15rem;margin:28px 0 8px}
.text p,.text li{color:#CFCCC3;font-size:.95rem;margin-bottom:10px}
.text ul{padding-left:20px}

/* ---------- Artist-Auswahl ----------
   Solange keine freigegebenen Fotos vorliegen, rendert die Karte ein Monogramm aus den
   Initialen. Das ist Absicht: fremde Instagram-Bilder dürfen wir hier nicht einbinden. */
/* Waagerecht zum Durchwischen statt Liste: man sieht das Gesicht groß, wischt durch und
   tippt an. Auf dem Handy ist das die Geste, die jeder kennt. Scroll-Snap rastet jede Karte
   sauber ein. Am Desktop wird daraus ein Raster, weil dort niemand wischt. */
.artists{
  display:flex;gap:12px;margin-top:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;
  scrollbar-width:none;
}
.artists::-webkit-scrollbar{display:none}
.artist{
  flex:0 0 54%;max-width:190px;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:0;
  background:var(--surface);border:1px solid var(--line);padding:0;cursor:pointer;
  font:inherit;color:var(--paper);text-align:left;overflow:hidden;
}
.artist:hover{border-color:var(--muted-2)}
.artist.gewaehlt{border-color:var(--akzent)}
.artist.gewaehlt .wer{background:var(--akzent-weich)}
.artist .portrait{
  width:100%;aspect-ratio:1;flex:0 0 auto;overflow:hidden;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
}
@media (min-width:700px){
  .artists{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:18px 0 0;padding:0}
  .artist{flex:initial;max-width:none}
}
.artist .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.artist .monogramm{
  font-family:Anton,system-ui,sans-serif;font-size:44px;letter-spacing:2px;color:var(--muted-2);
  background:
    repeating-linear-gradient(135deg,rgba(239,237,230,.03) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,var(--surface-2),var(--surface));
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.artist .wer{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px 14px}
.artist .wer b{font-size:17px}
.artist .rolle{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);
}
.artist .stile{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist .motive{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.artist .motive span{aspect-ratio:1;background:var(--surface-2);display:block;overflow:hidden}
.artist .motive img{width:100%;height:100%;object-fit:cover;display:block}
.artist.egal .monogramm{font-size:40px;color:var(--muted-2)}
/* Hinweis unter der Reihe, dass man wischen kann. Verschwindet am Desktop. */
.wischhinweis{
  margin-top:6px;text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}
@media (min-width:700px){ .wischhinweis{display:none} }

/* ---------- Arbeitsproben als Karten-Deck ----------
   Drei Karten, gefächert um einen Drehpunkt unten, wie ein aufgeklapptes Kartenspiel.
   Übernommen vom Hero der dayseven-Seite, hier auf das dunkle Studio-Bild umgesetzt.
   Ohne Dateien in /assets/pieces rendert der Leerzustand: gestaltete Karten mit Kontur
   statt kaputter Bilder. */
.deck{position:relative;margin:24px auto 38px;width:min(160px,40%);aspect-ratio:4/5}
.deck .karte{
  position:absolute;inset:0;transform-origin:bottom center;overflow:hidden;border-radius:18px;
  border:1px solid rgba(239,237,230,.16);background:var(--surface-2);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
/* Die äußeren Karten liegen hinten, sind leicht kleiner und ragen bewusst über den Container
   hinaus. Der Drehpunkt unten lässt den Fächer aufgeklappt wirken statt nur schief. */
.deck .karte:nth-child(1){transform:rotate(-10deg) translate(-42%,2%) scale(.9);z-index:1}
.deck .karte:nth-child(2){transform:rotate(2deg) translate(0,-2%);z-index:3}
.deck .karte:nth-child(3){transform:rotate(11deg) translate(42%,3%) scale(.9);z-index:2}
.deck img,.deck video{width:100%;height:100%;object-fit:cover;display:block}
.deck .leer{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:
    repeating-linear-gradient(135deg,rgba(239,237,230,.035) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,var(--surface-2),var(--surface));
  color:var(--muted-2);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:14px;
}
.deck .leer b{font-family:Anton,system-ui,sans-serif;font-size:26px;letter-spacing:1px;color:var(--muted-2)}
@media (min-width:760px){ .deck{width:180px;margin-bottom:44px} }

/* ---------- Vertrauens-Kacheln ----------
   Eigener Name statt „beleg", weil aktion.html diese Klasse schon für einen Abschnitt nutzt. */
.trustreihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.trustkachel{flex:1 1 150px;background:var(--surface);border:1px solid var(--line);padding:14px 16px}
.trustkachel b{display:block;font-family:Anton,system-ui,sans-serif;font-size:24px;line-height:1.1}
.trustkachel span{display:block;margin-top:4px;font-size:12px;color:var(--muted);line-height:1.35}

/* ---------- Zähler ----------
   Lag vorher nur im <style> von aktion.html. Seit die Gewinnspiel-Seite denselben Zähler
   zeigt, gehört die Klasse hierher, sonst driften die beiden Seiten auseinander. */
.zaehler{
  margin-top:16px;border:1px solid var(--akzent);background:var(--akzent-weich);padding:12px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.zaehler b{font-family:Anton,system-ui,sans-serif;font-size:1.5rem;color:var(--akzent);line-height:1}
.zaehler span{font-size:.8rem;color:#CFCCC3}

/* ---------- Kalender ----------
   Statt einer endlosen Liste ein Monatsraster: man sieht sofort, wie viel frei ist, und
   tippt einen Tag an. Erst dann erscheinen die Uhrzeiten. Zwei Entscheidungen statt einer
   langen Liste, aber jede davon ist leichter. */
.kal{margin-top:18px}
.kal .kopfzeile{
  display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;
}
.kal .monat{font-family:Anton,system-ui,sans-serif;font-size:1.05rem;letter-spacing:.02em}
.kal .blaettern{display:flex;gap:6px}
.kal .blaettern button{
  width:34px;height:34px;background:var(--surface);border:1px solid var(--line);color:var(--paper);
  font:inherit;cursor:pointer;line-height:1;
}
.kal .blaettern button:disabled{opacity:.3;cursor:default}
.kal .wochentage{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.06em;
  color:var(--muted-2);text-align:center;text-transform:uppercase;
}
.kal .raster{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kal .tag{
  aspect-ratio:1;background:var(--surface);border:1px solid var(--line);color:var(--paper);
  font:inherit;font-size:.9rem;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:0;
}
.kal .tag .punkt{width:4px;height:4px;border-radius:50%;background:var(--green)}
.kal .tag.leer{background:transparent;border-color:transparent;cursor:default}
.kal .tag.zu{color:var(--muted-2);background:transparent;border-color:var(--line);cursor:default}
.kal .tag.zu .punkt{display:none}
.kal .tag.frei:hover{border-color:var(--muted-2)}
.kal .tag.gewaehlt{background:var(--akzent);color:var(--ink);border-color:var(--akzent)}
.kal .tag.gewaehlt .punkt{background:var(--ink)}
.kal .zeiten{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.kal .zeit{
  min-height:var(--tap);flex:1 1 calc(50% - 4px);background:var(--surface);border:1px solid var(--line);
  color:var(--paper);font:inherit;cursor:pointer;padding:12px 14px;text-align:left;
  display:flex;flex-direction:column;gap:2px;
}
.kal .zeit:hover{border-color:var(--muted-2)}
.kal .zeit.gewaehlt{border-color:var(--akzent);background:var(--akzent-weich)}
.kal .zeit b{font-family:Anton,system-ui,sans-serif;font-size:1.15rem;line-height:1}
.kal .zeit span{font-size:.72rem;color:var(--muted)}
.kal .hinweis{margin-top:14px;font-size:.8rem;color:var(--muted)}

/* ---------- Gewinn-Paket ----------
   Der Gewinn ist mehr als eine Zahl: Sitzung, Hotel, Abholung, Videodreh. Als vier Kacheln
   sieht man das auf einen Blick, statt es aus einem Fließtext herauslesen zu müssen.
   Die Wertzeile oben trägt die Zahl, die Kacheln tragen das Erlebnis. */
.gewinn{border:1px solid var(--akzent);margin-top:22px}
.gewinn .wert{
  background:var(--akzent);color:var(--ink);padding:14px 18px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.gewinn .wert b{font-family:Anton,system-ui,sans-serif;font-size:1.7rem;line-height:1}
.gewinn .wert span{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;
}
.gewinn .teile{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.gewinn .teile div{background:var(--surface);padding:14px 14px 15px}
.gewinn .teile .nr{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;letter-spacing:.1em;color:var(--muted-2);
}
.gewinn .teile b{display:block;margin-top:6px;font-size:.95rem}
.gewinn .teile p{margin-top:3px;font-size:.78rem;color:var(--muted);line-height:1.35}

/* ---------- Zwei Wege ----------
   Kostenlos mitmachen oder gleich buchen. Beide sichtbar, aber nicht gleich laut:
   der bezahlte Weg trägt die Umrandung, der kostenlose steht daneben und ist nie versteckt. */
.wege{display:grid;gap:10px;margin-top:24px}
.weg{
  border:1px solid var(--line);background:var(--surface);padding:16px 16px 18px;
  display:flex;flex-direction:column;gap:8px;
}
.weg.stark{border-color:var(--akzent);background:var(--akzent-weich)}
.weg .titel{font-family:Anton,system-ui,sans-serif;font-size:1.15rem;line-height:1.1}
.weg .satz{font-size:.85rem;color:var(--muted);line-height:1.4}
.weg ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}
.weg li{position:relative;padding-left:16px;font-size:.83rem;color:#D6D3CA}
.weg li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--akzent)}
.weg .cta,.weg .zweit{margin-top:10px}
.weg .zweit{
  background:transparent;border:1px solid var(--line);color:var(--paper);
  min-height:var(--tap);font:inherit;cursor:pointer;padding:12px 16px;
}
.weg .zweit:hover{border-color:var(--muted-2)}

/* Das Angebot ist der einzige helle Block auf der Seite. Das ist Absicht: auf dunklem Grund
   zieht eine helle Fläche den Blick zuerst an, und genau dorthin gehört er. Gleichzeitig
   bricht es die Dunkelheit auf, ohne dass die ganze Seite ihren Charakter verliert. */
.angebot{
  margin-top:34px;background:var(--paper);color:var(--ink);padding:24px 22px 22px;
}
.angebot .kicker{
  font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:#5F5D57;
}
.angebot h2{font-size:clamp(1.7rem,7vw,2.2rem);margin-top:8px;line-height:1.02;color:var(--ink)}
.angebot .wer{margin-top:8px;font-size:.9rem;color:#4A4843}
.angebot .preise{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#D9D6CE;margin-top:20px}
.angebot .preise div{background:var(--paper);padding:14px 4px 14px 0}
.angebot .preise div + div{padding-left:16px}
.angebot .art{
  display:block;font-family:"JetBrains Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:#5F5D57;
}
.angebot .neu{display:block;font-family:"Anton",sans-serif;font-size:2.4rem;line-height:1;margin-top:8px}
.angebot .alt{display:block;margin-top:4px;font-size:.82rem;color:#5F5D57;text-decoration:line-through}
.angebot .spar{
  display:inline-block;margin-top:9px;font-family:"JetBrains Mono",monospace;font-size:.66rem;
  letter-spacing:.04em;background:var(--ink);color:var(--paper);padding:3px 7px;
}
.angebot .drin{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:7px}
.angebot .drin li{position:relative;padding-left:20px;font-size:.88rem;color:#2A2A2A}
.angebot .drin li::before{
  content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);
}
.angebot .fuss{margin-top:14px;font-size:.78rem;color:#5F5D57}

/* Symbole im Gewinn-Paket. Selbst gezeichnet, keine fremden Bildrechte. */
.gewinn .teile .sym{display:block;width:26px;height:26px;color:var(--akzent)}
.gewinn .teile .sym svg{width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Doppelte Chance ----------
   Der wichtigste Block der Seite, deshalb der einzige mit heller Kontur und eigenem Rhythmus.
   Er steht direkt unter dem Gewinn: wer gerade gesehen hat, was es zu holen gibt, ist genau
   hier am ehesten bereit, seine Chance zu verdoppeln. */
.doppelt{
  margin-top:26px;border:2px solid var(--akzent);background:var(--surface);
  padding:16px 16px 18px;
}
.doppelt .kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.doppelt .badge{
  background:var(--akzent);color:var(--ink);font-family:Anton,system-ui,sans-serif;
  font-size:.82rem;letter-spacing:.04em;padding:4px 9px;
}
.doppelt .rest{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);
}
.doppelt h2{font-size:clamp(1.25rem,5.4vw,1.55rem);line-height:1.12;margin-top:14px}
.doppelt .einstieg{margin-top:10px;font-size:.9rem;color:#D6D3CA;line-height:1.5}
/* Preise im selben Block: klein und nüchtern, sie sind Beleg, nicht Schlagzeile. */
.doppelt .preise{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:16px}
.doppelt .preise div{background:var(--surface-2);padding:12px 13px}
.doppelt .preise .art{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}
.doppelt .preise .neu{display:block;font-family:Anton,system-ui,sans-serif;font-size:1.7rem;line-height:1;margin-top:6px}
.doppelt .preise .alt{display:block;margin-top:3px;font-size:.75rem;color:var(--muted-2);text-decoration:line-through}
.doppelt ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.doppelt li{position:relative;padding-left:22px;font-size:.88rem;color:#D6D3CA;line-height:1.4}
.doppelt li::before{
  content:"";position:absolute;left:0;top:.34em;width:11px;height:6px;
  border-left:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(-45deg);
}
.doppelt li b{color:var(--paper)}
.doppelt .cta{margin-top:16px}
.doppelt .fein{margin-top:10px;font-size:.76rem;color:var(--muted);text-align:center}

/* Der kostenlose Weg bleibt sichtbar, tritt aber optisch zurück. Versteckt wird er nie:
   die Teilnahme muss ohne Kauf möglich bleiben, sonst kippt das Gewinnspiel rechtlich. */
.oder{
  margin:18px 0 14px;text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.cta.schlicht{
  background:transparent;color:var(--paper);border:1px solid var(--line);
}
.cta.schlicht:hover{border-color:var(--muted-2)}

/* Gewinn als Stichpunkte direkt unter der Ueberschrift. Der Superlativ oben braucht
   im naechsten Blick seine Belege, sonst bleibt er eine blosse Behauptung. */
.gewinnliste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.gewinnliste li{position:relative;padding-left:28px;font-size:1.05rem;line-height:1.45}
.gewinnliste li::before{
  content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;
  border-left:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:rotate(-45deg);
}
@media (max-width:520px){ .gewinnliste li{font-size:1rem} }


/* Die Zeitauswahl als Frage, nicht als Fahrplan. */
.zeitfrage{margin:18px 0 10px;font-size:1.1rem;font-weight:600;line-height:1.35}