/* 64 Vintage Studio — Website v3 (3.35)
 * Nico 20.10.: „viel krasser, ansprechender und überzeugender, alles billiger". Noir/Chrom, das Logo trägt die Farbe
 * (Gelb/Orange/Pink wie die drei Rennstreifen; eBay-Farben nur am eBay-Emblem). Für die Website darf mehr Bewegung
 * sein als in der App (Feedback 11.10.), aber immer mit Ausstieg bei reduzierter Bewegung.
 * Referenzen: Chrom-Monochrom-Landing ref-124, Preis-Headline hinter Karten ref-121, Ticket mit Abriss ref-048,
 * Prozess-Leitung ref-107, Lichtstrahl ref-104, Vorher/Nachher + Split-Flap aus Website v2 (ref-099). */
:root {
  --bg: #060607; --s1: #0d0d10; --s2: #131317; --s3: #1b1b20; --s4: #24242a;
  --linie: rgba(255,255,255,.085); --linie2: rgba(255,255,255,.17);
  --text: rgba(255,255,255,.94); --muted: rgba(255,255,255,.6); --faint: rgba(255,255,255,.4);
  --gelb: #FFB23E; --orange: #FF6A3D; --pink: #E8336B; --ok: #34C77B;
  --schrift: ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 26px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.55 var(--schrift); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
::selection { background: var(--orange); color: #000; }

/* Licht: gerichteter Strahl + zwei warme Wolken (fest hinter allem; iOS kann background-attachment: fixed nicht) */
.licht { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 640px at 8% -10%, rgba(220,224,232,.16), transparent 62%),
    radial-gradient(700px 520px at 100% 12%, rgba(255,106,61,.10), transparent 70%),
    radial-gradient(800px 600px at 50% 120%, rgba(232,51,107,.08), transparent 70%); }
.licht::after { content: ''; position: absolute; top: -30%; left: 4%; width: 40vw; height: 160%; transform: rotate(-24deg); transform-origin: top left;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.045) 45%, transparent); }

/* ---------- Logos (Chrom + Streifen, animiert) ---------- */
.marke { display: block; flex: none; overflow: visible; border-radius: 26%; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.marke .st { transform-box: fill-box; transform-origin: left center; animation: st-rein .6s cubic-bezier(.16, 1, .3, 1) backwards; }
.marke .s2 { animation-delay: .07s; } .marke .s3 { animation-delay: .14s; } .marke .s4 { animation-delay: .21s; }
@keyframes st-rein { from { transform: scaleX(0); } }
.marke .haken { transform-box: view-box; transform-origin: 206px 132px; animation: schwingen .9s cubic-bezier(.3, 1.4, .5, 1) .15s backwards; }
@keyframes schwingen { 0% { transform: rotate(-26deg); } 45% { transform: rotate(12deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
.marke .zug { stroke-dasharray: 1; animation: zeichnen 1s cubic-bezier(.6, 0, .25, 1) .05s both; }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.marke .glanz { transform-box: view-box; animation: glanz 1.15s cubic-bezier(.45, 0, .2, 1) .5s both; }
.marke.me .glanz { animation-delay: 1s; }
@keyframes glanz { from { translate: -40px 0; } to { translate: 880px 0; } }
.marke .funkeln { transform-box: fill-box; transform-origin: center; opacity: 0; animation: funkeln .75s cubic-bezier(.3, 1.5, .5, 1) 1.35s both; }
.marke.me .funkeln { animation-delay: 1.9s; }
@keyframes funkeln { 0% { opacity: 0; scale: 0; rotate: -45deg; } 45% { opacity: 1; scale: 1; rotate: 0deg; } 100% { opacity: 0; scale: .2; rotate: 30deg; } }
.marke:hover .glanz, a:hover > .marke .glanz { animation: glanz2 .95s cubic-bezier(.45, 0, .2, 1) both; }
.marke:hover .funkeln, a:hover > .marke .funkeln { animation: funkeln2 .7s cubic-bezier(.3, 1.5, .5, 1) .55s both; }
.marke:hover .haken { animation: schwingen .8s cubic-bezier(.3, 1.4, .5, 1); }
.marke:hover .zug { animation: zeichnen2 .8s cubic-bezier(.6, 0, .25, 1) both; }
@keyframes glanz2 { from { translate: -40px 0; } to { translate: 880px 0; } }
@keyframes funkeln2 { 0% { opacity: 0; scale: 0; rotate: -45deg; } 45% { opacity: 1; scale: 1; rotate: 0deg; } 100% { opacity: 0; scale: .2; rotate: 30deg; } }
@keyframes zeichnen2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Lebendig: Glanz + Funkeln kehren alle ~6 s zurück (läuft nur, solange sichtbar — app.js setzt .pausiert) */
.marke.lebendig .glanz { animation: glanz-takt 6s cubic-bezier(.45, 0, .2, 1) .5s infinite both; }
.marke.lebendig .funkeln { animation: funkeln-takt 6s ease-out 1.35s infinite both; }
.marke.lebendig.me .glanz { animation-delay: 3.2s; } .marke.lebendig.me .funkeln { animation-delay: 4.05s; }
@keyframes glanz-takt { 0% { translate: -40px 0; } 18%, 100% { translate: 880px 0; } }
@keyframes funkeln-takt { 0% { opacity: 0; scale: 0; rotate: -45deg; } 5% { opacity: 1; scale: 1; rotate: 0deg; } 12%, 100% { opacity: 0; scale: .2; rotate: 30deg; } }
.pausiert, .pausiert * { animation-play-state: paused !important; }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 22px; background: var(--bg); transition: opacity .5s ease, visibility .5s; }
.intro-logo { animation: intro-pop .55s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes intro-pop { from { opacity: 0; transform: scale(.7) rotate(-6deg); } }
.intro-streifen { display: grid; gap: 4px; width: 140px; transform: skewX(-22deg); }
.intro-streifen i { height: 5px; border-radius: 3px; transform-origin: left; animation: st-rein .7s cubic-bezier(.16, 1, .3, 1) both; }
.intro-streifen i:nth-child(1) { background: var(--gelb); animation-delay: .3s; } .intro-streifen i:nth-child(2) { background: var(--orange); width: 82%; animation-delay: .38s; } .intro-streifen i:nth-child(3) { background: var(--pink); width: 64%; animation-delay: .46s; }
.intro.weg { opacity: 0; visibility: hidden; }
body.ohne-intro .intro { display: none; }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 14px; left: 50%; z-index: 50; translate: -50% 0; display: flex; align-items: center; gap: 18px; width: min(1120px, calc(100% - 24px));
  padding: 8px 8px 8px 12px; border-radius: 999px; border: 1px solid var(--linie); background: rgba(13,13,16,.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background .3s ease, border-color .3s ease; }
.nav.gescrollt { background: rgba(13,13,16,.9); border-color: var(--linie2); }
.nav-marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.nav-marke .marke { box-shadow: none; border-radius: 28%; }
.nav nav { display: flex; gap: 4px; margin: 0 auto; }
.nav nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 600; transition: color .2s, background .2s; }
.nav nav a:hover { color: var(--text); background: rgba(255,255,255,.06); }

/* ---------- Knöpfe ---------- */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 0;
  font: inherit; font-weight: 800; font-size: .98rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), background .25s, box-shadow .25s; }
.knopf.klein { min-height: 40px; padding: 0 16px; font-size: .86rem; }
.knopf.weiss { background: #fff; color: #0b0b0d; box-shadow: 0 12px 34px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.5); }
.knopf.weiss:hover { box-shadow: 0 14px 44px rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.5); }
.knopf.schwarz { background: #0b0b0d; color: #fff; }
.knopf.rand { background: rgba(255,255,255,.03); color: var(--text); border: 1px solid var(--linie2); }
.knopf.rand:hover { border-color: rgba(255,255,255,.4); }
.knopf:active { transform: scale(.96); }
.knopf:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.knopf-laed { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: drehen .7s linear infinite; }
.laeuft .knopf-laed { display: inline-block; } .laeuft .knopf-text { opacity: .55; }
@keyframes drehen { to { rotate: 360deg; } }

/* ---------- Typo ---------- */
.eyebrow { margin: 0 0 14px; color: var(--faint); font-size: .74rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; letter-spacing: -.035em; }
h2 { font-size: clamp(2.1rem, 5.4vw, 4.2rem); line-height: 1; font-weight: 850; }
h2 .grau { color: var(--faint); }
.chrom-text > span { background: linear-gradient(100deg, #fff 0%, #cfd2d9 30%, #7c808a 46%, #f4f5f7 54%, #bfc3cb 70%, #fff 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: chrom-lauf 5s ease-in-out infinite; }
@keyframes chrom-lauf { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 40px; width: min(1180px, calc(100% - 40px)); min-height: 100svh; margin: 0 auto; padding: 120px 0 60px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--linie2); background: rgba(255,255,255,.04); color: var(--muted); font-size: .84rem; text-decoration: none; }
.chip b { padding: 3px 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gelb), var(--orange), var(--pink)); color: #140600; font-size: .72rem; }
.chip:hover { color: var(--text); }
.hero-titel { margin: 22px 0 18px; font-size: clamp(3rem, 8.4vw, 6.6rem); line-height: .93; font-weight: 900; letter-spacing: -.055em; }
.hero-titel .zeile { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.08em; }
.hero-titel .zeile > span { display: inline-block; animation: zeile-rein .9s cubic-bezier(.16, 1, .3, 1) both; }
.hero-titel .zeile:nth-child(2) > span { animation-delay: .12s, 0s; animation-name: zeile-rein, chrom-lauf; animation-duration: .9s, 5s; animation-iteration-count: 1, infinite; animation-timing-function: cubic-bezier(.16, 1, .3, 1), ease-in-out; }
@keyframes zeile-rein { from { transform: translateY(105%) rotate(4deg); } }
.hero-sub { max-width: 560px; margin: 0 0 28px; color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.hero-sub strong { color: var(--text); font-weight: 700; }
.hero-fakten { display: flex; gap: 28px; flex-wrap: wrap; margin: 34px 0 0; padding: 0; list-style: none; }
.hero-fakten li { display: grid; gap: 2px; }
.hero-fakten strong { font-size: 1.7rem; font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero-fakten span { color: var(--faint); font-size: .8rem; }

/* Code-Formular */
.code-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; max-width: 540px; padding: 6px; border-radius: 999px; border: 1px solid var(--linie2); background: rgba(13,13,16,.8);
  transition: border-color .25s, box-shadow .25s, opacity .3s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.code-form:focus-within { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 6px rgba(255,255,255,.05); }
.code-form input { min-width: 0; min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; }
.code-form input::placeholder { color: var(--faint); }
.code-form .form-hinweis { grid-column: 1 / -1; margin: 4px 16px 2px; color: var(--faint); font-size: .8rem; }
.code-form .form-hinweis.fehler { color: #FF9A9A; }
.code-form.gross { grid-template-columns: minmax(0, 1fr); border-radius: 26px; padding: 10px; gap: 10px; }
.code-form.gross input { border: 1px solid var(--linie); background: var(--s2); border-radius: 16px; }
.code-form.gross input:focus { border-color: rgba(255,255,255,.4); }
.code-form.weg { opacity: 0; transform: translateY(-10px) scale(.98); pointer-events: none; }
.code-form.ausgeblendet { display: none; }
.code-form.wackeln { animation: wackeln .4s ease; }
@keyframes wackeln { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

/* Ticket mit Abriss (ref-048): erscheint, Code klappt Buchstabe für Buchstabe auf */
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16px 110px; max-width: 560px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, var(--s3), var(--s1)); border: 1px solid var(--linie2); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,178,62,.08);
  animation: ticket-rein .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.ticket::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px 200px at 0% 0%, rgba(255,178,62,.12), transparent 60%), radial-gradient(400px 200px at 100% 100%, rgba(232,51,107,.10), transparent 60%); }
@keyframes ticket-rein { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg) scale(.96); } }
.ticket-haupt { position: relative; display: grid; gap: 10px; padding: 18px 18px 18px 20px; min-width: 0; container-type: inline-size; }
.ticket-haupt > small { color: var(--faint); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.ticket-code { display: flex; flex-wrap: nowrap; gap: 2.5px; font-family: var(--mono); font-weight: 800; font-size: clamp(.9rem, 6.4cqi, 1.9rem); }
.ticket-code .z { display: inline-grid; place-items: center; width: 1.2em; height: 1.55em; flex: none; border-radius: 7px; background: #0a0a0c; border: 1px solid var(--linie2); box-shadow: inset 0 -10px 0 rgba(255,255,255,.03);
  transform-origin: 50% 0; animation: klappen .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.ticket-code .strich { display: inline-grid; place-items: center; width: .5em; flex: none; color: var(--faint); }
@keyframes klappen { 0% { transform: rotateX(-90deg); opacity: 0; } 60% { transform: rotateX(12deg); opacity: 1; } 100% { transform: rotateX(0); } }
.ticket-hinweis { margin: 0; color: var(--faint); font-size: .78rem; }
.ticket-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.ticket-knoepfe .knopf { min-height: 46px; }
.ticket-knoepfe .knopf.fertig { background: var(--ok); color: #06150D; border-color: var(--ok); }
.ticket-abriss { position: relative; background:
  radial-gradient(circle at 50% 0, var(--bg) 10px, transparent 11px) top / 16px 22px no-repeat,
  radial-gradient(circle at 50% 100%, var(--bg) 10px, transparent 11px) bottom / 16px 22px no-repeat; }
.ticket-abriss::after { content: ''; position: absolute; inset: 16px 7px; border-left: 2px dashed rgba(255,255,255,.16); }
.ticket-seite { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 12px; background: linear-gradient(180deg, rgba(255,178,62,.12), rgba(232,51,107,.08)); }
.ticket-seite span { color: var(--muted); font-family: var(--mono); font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-align: center; line-height: 1.3; }
.code-ticket-platz:empty { display: none; }
.code-ticket-platz { margin-top: 4px; }
.konfetti { position: fixed; z-index: 90; width: 8px; height: 14px; border-radius: 2px; pointer-events: none; animation: konfetti 1.1s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes konfetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); opacity: 0; } }

/* Bühne: Handy + Duo-Logos + Toasts */
.hero-buehne { position: relative; height: 640px; display: grid; place-items: center; perspective: 1200px; }
.handy { position: relative; width: 300px; height: 600px; transform-style: preserve-3d; transform: rotateY(-10deg) rotateX(6deg); transition: transform .4s cubic-bezier(.2, .8, .2, 1); animation: handy-rein 1.1s cubic-bezier(.16, 1, .3, 1) .2s both; }
@keyframes handy-rein { from { opacity: 0; transform: translateY(40px) rotateY(-24deg) rotateX(12deg); } }
.handy-rahmen { position: absolute; inset: 0; border-radius: 46px; padding: 16px 12px; background: #0a0a0c; border: 1px solid rgba(255,255,255,.14); overflow: hidden;
  box-shadow: inset 0 0 0 6px #17171b, 0 50px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04); }
.handy-insel { width: 96px; height: 28px; margin: 0 auto 14px; border-radius: 999px; background: #000; }
.handy-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; font-weight: 850; font-size: 1.2rem; letter-spacing: -.02em; }
.handy-kopf em { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(52,199,123,.14); color: #6FE3A6; font-style: normal; font-size: .7rem; }
.handy-kopf em i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(52,199,123,.25); }
.handy-kanal { display: flex; justify-content: space-between; margin: 0 4px 10px; padding: 8px 10px; border-radius: 12px; background: var(--s2); color: var(--muted); font-size: .72rem; font-family: var(--mono); }
.handy-kanal b { color: var(--text); }
.feed { display: grid; gap: 8px; }
.deal { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--s2); border: 1px solid var(--linie); animation: deal-rein .55s cubic-bezier(.2, 1.3, .4, 1) both; }
.deal.neu { border-color: rgba(52,199,123,.45); box-shadow: 0 0 0 3px rgba(52,199,123,.08); }
@keyframes deal-rein { from { opacity: 0; transform: translateY(-20px) scale(.95); } }
.deal-bild { width: 46px; height: 46px; border-radius: 10px; background: var(--s4) center / cover; }
.deal b { display: block; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal small { color: var(--faint); font-size: .66rem; }
.deal .plus { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; background: rgba(52,199,123,.15); color: #6FE3A6; font-size: .64rem; font-weight: 800; font-style: normal; }
.deal strong { font-size: .82rem; font-variant-numeric: tabular-nums; }
.glanzlicht { position: absolute; inset: 0; border-radius: 46px; pointer-events: none; background: radial-gradient(260px 220px at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.14), transparent 70%); mix-blend-mode: screen; }
.schwebe { position: absolute; display: grid; gap: 1px; padding: 12px 14px; border-radius: 16px; background: rgba(19,19,23,.92); border: 1px solid var(--linie2); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.schwebe small { color: var(--faint); font-size: .7rem; }
.schwebe strong { color: #6FE3A6; font-size: 1.4rem; font-weight: 850; letter-spacing: -.02em; }
.schwebe em { color: var(--muted); font-style: normal; font-size: .72rem; }
.s-profit { top: 90px; right: -6px; animation: schweben 5s ease-in-out infinite; }
@keyframes schweben { 50% { transform: translateY(-12px); } }
.duo { position: absolute; left: -10px; bottom: 120px; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 26px; background: rgba(13,13,16,.88); border: 1px solid var(--linie2); box-shadow: 0 24px 60px rgba(0,0,0,.55); animation: schweben 6s ease-in-out -2s infinite; }
.duo-linie { position: relative; width: 70px; height: 2px; background: var(--linie2); overflow: hidden; }
.duo-linie i { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: impuls 1.8s ease-in-out infinite; }
@keyframes impuls { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.toast-stapel { position: absolute; right: -20px; bottom: 40px; display: grid; gap: 8px; width: 270px; }
.toast { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(19,19,23,.95); border: 1px solid var(--linie2);
  box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: toast-rein .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.toast.raus { animation: toast-raus .4s ease-in forwards; }
@keyframes toast-rein { from { opacity: 0; transform: translateX(30px) scale(.94); } }
@keyframes toast-raus { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
.toast b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
.toast b.gruen { background: rgba(52,199,123,.18); color: #6FE3A6; } .toast b.gelb { background: rgba(255,178,62,.18); color: var(--gelb); } .toast b.blau { background: rgba(0,100,210,.25); color: #8DB9FF; }
.toast span { font-size: .8rem; font-weight: 700; } .toast small { display: block; color: var(--faint); font-size: .7rem; font-weight: 500; }

/* Laufband */
.laufband { overflow: hidden; padding: 18px 0; border-block: 1px solid var(--linie); background: rgba(255,255,255,.015); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.laufband-spur { display: flex; gap: 46px; width: max-content; animation: laufen 38s linear infinite; }
.laufband span { color: var(--faint); font-size: 1.35rem; font-weight: 850; letter-spacing: -.02em; white-space: nowrap; }
.laufband span:nth-child(3n+1) { color: var(--muted); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Abschnitte */
.abschnitt { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 130px 0 0; }
.zeigen { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--verz, 0s); }
.zeigen.da { opacity: 1; transform: none; }

/* Ohne / Mit */
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.seite { padding: 26px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--s1); }
.seite h3 { margin-bottom: 16px; font-size: 1.2rem; }
.seite ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.seite li { position: relative; padding-left: 30px; }
.seite li::before { position: absolute; left: 0; top: .05em; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; font-weight: 900; }
.ohne li { color: var(--faint); }
.ohne li::before { content: '✕'; background: rgba(255,107,107,.12); color: #FF9A9A; }
.ohne.da li { text-decoration: line-through; text-decoration-color: rgba(255,107,107,.0); animation: streichen .6s ease forwards; animation-delay: calc(var(--i, 0) * .12s + .5s); }
@keyframes streichen { to { text-decoration-color: rgba(255,107,107,.55); } }
.mit { background: linear-gradient(160deg, var(--s3), var(--s1)); border-color: var(--linie2); }
.mit li::before { content: '✓'; background: rgba(52,199,123,.16); color: #6FE3A6; }
.mit em { font-style: normal; color: var(--gelb); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.kachel { position: relative; display: grid; align-content: space-between; gap: 22px; min-height: 340px; padding: 24px; border-radius: var(--radius); border: 1px solid var(--linie); border-top-color: var(--linie2);
  background: linear-gradient(165deg, var(--s2), var(--s1) 70%); overflow: hidden; isolation: isolate; }
.licht-folgt::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(420px 320px at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.07), transparent 70%); }
.licht-folgt:hover::before { opacity: 1; }
.k-snipes { grid-column: span 3; } .k-ebay { grid-column: span 3; } .k-studio { grid-column: span 2; } .k-inbox { grid-column: span 2; } .k-relist { grid-column: span 2; } .k-geld { grid-column: span 6; min-height: 260px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: end; }
.k-nr { display: inline-block; margin-bottom: 12px; color: var(--faint); font-family: var(--mono); font-size: .76rem; }
.kachel h3 { font-size: 1.45rem; margin-bottom: 8px; }
.kachel p { margin: 0; color: var(--muted); font-size: .94rem; }
.kachel p strong { color: var(--text); }
.mini-feed { display: grid; gap: 8px; }
.mini-feed .deal { background: var(--s3); }
/* Kreuz-Abgleich */
.kreuz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.kreuz-ende { display: grid; justify-items: center; gap: 6px; }
.kreuz-ende small { color: var(--faint); font-size: .72rem; font-weight: 700; }
.kreuz-weg { position: relative; height: 54px; }
.kreuz-weg > i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--linie2); }
.kreuz-teil { position: absolute; top: 50%; left: 50%; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; translate: -50% -50%; background: #fff; color: #0b0b0d; font-size: .72rem; font-weight: 800; white-space: nowrap;
  transition: left .9s cubic-bezier(.6, 0, .2, 1), opacity .4s, background .3s; }
.kreuz-teil b { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.kreuz.links .kreuz-teil { left: 12%; } .kreuz.rechts .kreuz-teil { left: 88%; }
.kreuz.verkauft .kreuz-teil { background: var(--gelb); }
.kreuz-status { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; color: var(--muted); font-size: .84rem; font-weight: 700; }
.kreuz-status .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(52,199,123,.18); }
/* Vorher/Nachher */
.vorher-nachher { position: relative; aspect-ratio: 4 / 3.4; border-radius: 18px; overflow: hidden; background: var(--s3); }
.vorher-nachher img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vorher-nachher .nachher { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.vorher-nachher input { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vn-griff { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 2px; background: #fff; translate: -1px 0; }
.vn-griff::after { content: '⟷'; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; translate: -50% -50%; background: #fff; color: #0b0b0d; font-weight: 900; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.vn-label { position: absolute; bottom: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.6); font-size: .7rem; font-weight: 800; }
.vn-label.l { left: 10px; } .vn-label.r { right: 10px; }
/* Chat */
.chat { display: grid; gap: 8px; align-content: end; min-height: 150px; }
.blase { max-width: 85%; padding: 9px 12px; border-radius: 16px; font-size: .82rem; animation: deal-rein .45s cubic-bezier(.2, 1.3, .4, 1) both; }
.blase.k { justify-self: start; background: var(--s4); border-bottom-left-radius: 5px; }
.blase.a { justify-self: end; background: #fff; color: #0b0b0d; border-bottom-right-radius: 5px; }
.blase.a small { display: block; color: #6a6a72; font-size: .66rem; font-weight: 700; }
.tippt { justify-self: end; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.85); }
.tippt i { width: 6px; height: 6px; border-radius: 50%; background: #0b0b0d; animation: tippen 1s ease-in-out infinite; }
.tippt i:nth-child(2) { animation-delay: .15s; } .tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippen { 50% { transform: translateY(-4px); opacity: .5; } }
/* Uhr */
.uhr { position: relative; justify-self: center; display: grid; place-content: center; justify-items: center; width: 170px; height: 170px; border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(255,178,62,.0), rgba(255,178,62,.35) 18%, rgba(255,106,61,.0) 22%, transparent 100%), var(--s3); border: 1px solid var(--linie2); }
.uhr::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--s1); border: 1px dashed var(--linie2); }
.uhr .zeiger { position: absolute; top: 50%; left: 50%; width: 3px; height: 64px; border-radius: 2px; background: #fff; transform-origin: 50% 0; rotate: 180deg; translate: -50% 0; animation: zeiger 6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes zeiger { 0% { rotate: 120deg; } 60%, 100% { rotate: 222deg; } }
.uhr span { position: relative; font-family: var(--mono); font-size: 1.5rem; font-weight: 800; }
.uhr small { position: relative; color: var(--gelb); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* Kurve */
.kurve { display: grid; gap: 4px; }
.kurve strong { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.kurve small { color: var(--faint); }
.kurve svg { width: 100%; height: 110px; margin-top: 10px; overflow: visible; }
.kurve-linie { fill: none; stroke: url(#w-chrom); stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 6px 14px rgba(255,178,62,.35)); }
.da .kurve-linie { animation: zeichnen 1.8s cubic-bezier(.6, 0, .2, 1) .3s forwards; }

/* Rechner */
.rechner-karte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 20px; margin-top: 44px; padding: 26px; border-radius: var(--radius); border: 1px solid var(--linie2); background: linear-gradient(160deg, var(--s2), var(--s1)); }
.regler { display: grid; gap: 10px; align-content: start; }
.regler label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--muted); font-size: .92rem; font-weight: 600; }
.regler output { color: var(--text); font-family: var(--mono); font-size: 1.1rem; font-weight: 800; }
.regler input[type="range"] { width: 100%; height: 34px; margin: 0 0 12px; accent-color: #fff; }
.schalter-zeile { justify-content: flex-start !important; gap: 12px !important; cursor: pointer; }
.schalter-zeile input { position: absolute; opacity: 0; }
.schalter-zeile span { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--s4); border: 1px solid var(--linie2); transition: background .2s; }
.schalter-zeile span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.schalter-zeile input:checked + span { background: var(--ok); border-color: var(--ok); }
.schalter-zeile input:checked + span::after { transform: translateX(18px); }
.schalter-zeile input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.ergebnis { display: grid; align-content: center; gap: 6px; padding: 24px; border-radius: 22px; background: #0a0a0c; border: 1px solid var(--linie); text-align: center; }
.ergebnis > small:first-child { color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; }
.ergebnis strong { font-size: clamp(3.4rem, 8vw, 5.4rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--gelb), var(--orange) 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ergebnis strong em { font-size: .4em; font-style: normal; }
.ergebnis p { margin: 4px 0; color: var(--muted); }
.ergebnis .fein { color: var(--faint); font-size: .72rem; line-height: 1.4; }

/* Schritte mit Leitung (ref-107) */
.schritte { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 44px 0 0; padding: 0; list-style: none; }
.schritte::before { content: ''; position: absolute; top: 46px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--gelb), var(--orange), var(--pink)); opacity: .5; }
.schritte li { position: relative; padding: 24px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--s1); }
.schritte b { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 14px; background: #fff; color: #0b0b0d; font-size: 1.2rem; font-weight: 900; box-shadow: 0 0 0 6px var(--bg); }
.schritte h3 { font-size: 1.25rem; margin-bottom: 6px; }
.schritte p { margin: 0; color: var(--muted); }

/* Preise: Riesen-Wort hinter den Karten (ref-121) */
.preise-abschnitt { position: relative; text-align: center; }
.preise-kopf { font-size: clamp(5rem, 19vw, 15rem); font-weight: 900; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 80%); -webkit-background-clip: text; background-clip: text; user-select: none; }
.preise-unter { position: relative; z-index: 1; margin: -1.4em 0 34px; color: var(--muted); font-size: 1.05rem; }
.minus { display: inline-block; margin-right: 8px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--gelb), var(--orange), var(--pink)); color: #140600; font-weight: 900; }
.preise { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.preis { position: relative; display: grid; align-content: start; gap: 8px; padding: 26px; border-radius: var(--radius); border: 1px solid var(--linie2); background: rgba(19,19,23,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.preis > small { color: var(--muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .76rem; }
.betrag { margin: 4px 0 0; font-size: 3.2rem; font-weight: 900; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.betrag span { font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--faint); }
.vorher { min-height: 1.3em; margin: 0; color: #FF9A9A; font-size: .86rem; font-weight: 700; text-decoration: line-through; text-decoration-thickness: 2px; }
.preis ul { display: grid; gap: 10px; margin: 12px 0 18px; padding: 0; list-style: none; color: var(--muted); }
.preis li { position: relative; padding-left: 26px; }
.preis li::before { content: '✓'; position: absolute; left: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--text); font-size: .66rem; font-weight: 900; top: .2em; }
.preis .knopf { margin-top: auto; width: 100%; }
.preis.hell { background: #f4f4f6; color: #0b0b0d; border-color: #fff; box-shadow: 0 40px 90px rgba(255,255,255,.08); transform: translateY(-10px); }
.preis.hell > small, .preis.hell .betrag span, .preis.hell ul { color: #55555d; }
.preis.hell li::before { background: #0b0b0d; color: #fff; }
.preis.hell .vorher { color: #D6355F; }
.beliebt { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gelb), var(--orange), var(--pink)); color: #140600; font-size: .7rem; font-weight: 900; }
.coins { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; color: var(--muted); }
.coins-titel b { color: var(--text); }
.coin { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--linie2); background: var(--s1); }
.coin b { color: var(--text); } .coin em { color: var(--text); font-style: normal; font-weight: 800; } .coin s { color: var(--faint); font-size: .8rem; }
.coin.beliebt { position: static; border-color: rgba(255,178,62,.5); background: rgba(255,178,62,.08); color: var(--muted); padding: 10px 14px; font-size: inherit; font-weight: inherit; }

/* Code-Abschnitt */
.code-karte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 34px; border: 1px solid var(--linie2);
  background: radial-gradient(700px 400px at 0% 0%, rgba(255,178,62,.10), transparent 60%), radial-gradient(600px 400px at 100% 100%, rgba(232,51,107,.10), transparent 60%), linear-gradient(160deg, var(--s2), var(--s1)); overflow: hidden; position: relative; isolation: isolate; }
.code-text p { color: var(--muted); font-size: 1.05rem; }
.code-text strong { color: var(--text); }

/* Fragen */
.fragen { display: grid; gap: 10px; max-width: 860px; margin-top: 40px; }
.fragen details { border-radius: 20px; border: 1px solid var(--linie); background: var(--s1); transition: border-color .2s, background .2s; }
.fragen details[open] { border-color: var(--linie2); background: var(--s2); }
.fragen summary { position: relative; padding: 20px 56px 20px 22px; font-weight: 750; font-size: 1.05rem; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; position: absolute; right: 18px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; translate: 0 -50%; background: rgba(255,255,255,.06); font-size: 1.2rem; transition: rotate .25s; }
.fragen details[open] summary::after { rotate: 45deg; }
.fragen p { margin: 0; padding: 0 22px 20px; color: var(--muted); }

/* Fuß */
.fuss { margin-top: 140px; padding: 0 20px 110px; overflow: hidden; }
.fuss-wort { font-size: clamp(4rem, 17vw, 15rem); font-weight: 900; letter-spacing: -.07em; line-height: .85; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, #fff 0%, #a8acb5 45%, #3a3c42 52%, #c9ccd3 60%, rgba(255,255,255,.1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; width: min(1180px, 100%); margin: 30px auto 0; color: var(--faint); font-size: .86rem; }
.fuss-zeile nav { display: flex; gap: 18px; }
.fuss-zeile a { text-decoration: none; } .fuss-zeile a:hover { color: var(--text); }

.handy-cta { display: none; }

/* ---------- Mobil ---------- */
@media (max-width: 960px) {
  .nav nav { display: none; }
  .nav .knopf { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 110px; min-height: 0; gap: 10px; }
  .hero-buehne { height: 560px; transform: scale(.92); margin: -10px 0 -30px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .kachel, .k-snipes, .k-ebay, .k-studio, .k-inbox, .k-relist, .k-geld { grid-column: auto; min-height: 0; }
  .k-geld { grid-template-columns: minmax(0, 1fr); }
  .gegenueber, .rechner-karte, .code-karte, .preise, .schritte { grid-template-columns: minmax(0, 1fr); }
  .schritte::before { display: none; }
  .preis.hell { transform: none; }
  .abschnitt { padding-top: 96px; }
  .handy-cta { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; display: flex; transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
  .handy-cta.versteckt { transform: translateY(140%); opacity: 0; }
}
@media (max-width: 560px) {
  .code-form { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .code-form .knopf { width: 100%; }
  .hero-buehne { height: 520px; transform: scale(.84); margin: -30px -20px -50px; }
  .toast-stapel { right: -10px; width: 240px; }
  .ticket { grid-template-columns: minmax(0, 1fr) 14px 74px; }
  .ticket-seite .marke { width: 40px; height: 40px; }
  .hero-fakten { gap: 18px; }
  .fuss-zeile { justify-content: center; text-align: center; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .zeigen { opacity: 1; transform: none; }
  .intro { display: none; }
  .marke .glanz, .marke .funkeln { display: none; }
}

/* Unterseiten (Impressum, Datenschutz) */
.unterseite .nav { position: sticky; translate: none; left: auto; margin: 14px auto 0; }
.text-seite { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 120px; }
.text-seite h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 900; margin-bottom: 18px; }
.text-seite h2 { font-size: 1.3rem; margin: 34px 0 10px; letter-spacing: -.02em; }
.text-seite p, .text-seite li { color: var(--muted); }
.platzhalter { color: var(--gelb); }