/* ============================================================
   FREEZE — Stylesheet
   Neon Cyan / Dark
   ============================================================ */

:root {
  /* Schwarz + Cyan, keine Blau-/Violettstiche */
  --bg:            #000000;
  --bg-2:          #050607;
  --surface:       rgba(255, 255, 255, .026);
  --surface-2:     rgba(255, 255, 255, .05);

  /* Deckende Flächen für Karten und Panels. Mit den halbtransparenten
     Werten oben schien der Hintergrund durch und der Text wurde
     unleserlich — die sind nur noch für Buttons und Pillen gedacht. */
  --card:          #0a0d10;
  --card-2:        #10151a;
  --line:          rgba(255, 255, 255, .07);
  --line-2:        rgba(34, 233, 255, .26);

  --cyan:          #22e9ff;
  --cyan-soft:     #7ef3ff;
  --cyan-deep:     #0891a8;
  /* Zweiter Farbton der Verläufe — tiefes Cyan statt Violett */
  --violet:        #0a94b4;

  --text:          #f0f6f8;
  --muted:         #8d9599;
  --muted-2:       #5b6367;

  --glow-sm:  0 0 12px rgba(34, 233, 255, .35);
  --glow-md:  0 0 28px rgba(34, 233, 255, .28);
  --glow-lg:  0 0 70px rgba(34, 233, 255, .22);
  /* Deutlich kräftiger, für Hover-Zustände */
  --glow-xl:  0 0 40px rgba(34, 233, 255, .45), 0 0 90px rgba(34, 233, 255, .2);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  --max: 1200px;
  --header-h: 72px;

  /* ---- Abstandsrhythmus ----
     Alles baut auf 4px auf. Vorher standen ueberall krumme
     Einzelwerte, das laesst eine Seite unruhig wirken. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---- Typo-Skala ----
     Eine Stufe pro Groesse statt beliebiger clamp()-Werte. */
  --t-xs:  .74rem;
  --t-sm:  .84rem;
  --t-md:  .92rem;
  --t-lg:  1.02rem;
  --t-h3:  1.12rem;
  --t-h2:  clamp(1.9rem, 3.4vw, 2.6rem);
  --t-h1:  clamp(2.6rem, 5.4vw, 5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .24s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Muss vor allen Layout-Regeln stehen und !important tragen:
   jede eigene display-Angabe auf einer Klasse (etwa
   .hero-screen { display: flex }) schlägt sonst das eingebaute
   [hidden] { display: none } des Browsers — die Seiten würden
   dann zwar wechseln, aber nichts ausblenden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

body.locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
svg { width: 20px; height: 20px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--cyan); color: #02121a; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(34,233,255,.22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,233,255,.4); }

/* ---------- Hintergrund ---------- */
/* Das Quadratraster ist raus — es lag unter den Waben und die
   beiden Muster haben sich gegenseitig unruhig gemacht. */
.bg-grid { display: none; }

/* ---------- Eigener Mauszeiger ----------
   Zwei Ebenen: der Punkt sitzt exakt auf der Position, der Schein
   läuft gedämpft hinterher. Nur auf Geräten mit echtem Zeiger —
   auf Touch gäbe es nichts zu folgen. */
.cursor-dot,
.cursor-glow {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.cursor-dot {
  z-index: 9999;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.9);
  transition: opacity .3s var(--ease), transform .12s var(--ease);
}

.cursor-glow {
  z-index: 9998;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,233,255,.6), rgba(34,233,255,.14) 55%, transparent 72%);
  filter: blur(4px);
  transition: opacity .3s var(--ease), width .22s var(--ease),
              height .22s var(--ease), margin .22s var(--ease);
}

body.has-cursor .cursor-dot,
body.has-cursor .cursor-glow { opacity: 1; }

/* Über anklickbaren Elementen wächst der Schein und der Punkt */
body.cursor-active .cursor-glow {
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
}
body.cursor-active .cursor-dot { transform: scale(1.6); }

/* Systemzeiger nur ausblenden, wenn der eigene wirklich läuft —
   sonst stünde man ganz ohne Zeiger da. */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor,
  body.has-cursor * { cursor: none !important; }
}

/* ---------- Wabenmuster ----------
   Zwei Ebenen desselben Musters: unten dauerhaft schwach sichtbar,
   darüber eine kräftige Kopie, die per Maske nur dort erscheint,
   wo der Mauszeiger steht. Dadurch leuchtet das Raster mit. */
.bg-hex,
.bg-hex-glow {
  position: fixed; inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 84px 150px;
}

.bg-hex {
  z-index: -3;
  opacity: .7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%2322e9ff' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  /* Zum Seitenrand hin ausblenden, sonst wirkt es wie Tapete */
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 25%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 25%, transparent 85%);
}

.bg-hex-glow {
  z-index: -2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%2322e9ff' stroke-opacity='1' stroke-width='1.4'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(34, 233, 255, .85));
  opacity: 0;
  transition: opacity .35s var(--ease);
  /* Folgt dem Cursor — die Werte setzt app.js */
  -webkit-mask-image: radial-gradient(190px circle at var(--mx, -999px) var(--my, -999px),
                      #000 0%, rgba(0,0,0,.4) 42%, transparent 70%);
          mask-image: radial-gradient(190px circle at var(--mx, -999px) var(--my, -999px),
                      #000 0%, rgba(0,0,0,.4) 42%, transparent 70%);
}
.bg-hex-glow.on { opacity: .75; }

.bg-orb {
  position: fixed; z-index: -2; pointer-events: none;
  border-radius: 50%;
  filter: blur(150px);
  opacity: .45;
}
/* Die festen Orbs sind raus — den Farbverlauf übernimmt jetzt
   .page-atmo, das mit der Seite mitscrollt. Zwei sich
   überlagernde Systeme wurden zu unruhig. */
.orb-1, .orb-2, .orb-3 { display: none; }

/* Vignette: dunkelt die Ränder ab und bündelt den Blick zur Mitte */
.bg-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Schwächer als vorher — der seitenweite Schein liegt jetzt
     darüber und würde sonst an den Rändern abgewürgt. */
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0,0,0,.6) 100%);
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 70px) scale(1.12); }
}


/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap-narrow { max-width: 820px; }
.section { padding-block: var(--sp-9); position: relative; }
.mb-lg { margin-bottom: var(--sp-7); }

/* Ueberschriften einheitlich in der breiten Grotesk — vorher nutzten
   nur Hero und Karten Archivo, der Rest Inter. Das las sich wie zwei
   verschiedene Seiten. */
h1, h2, h3 {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-variation-settings: 'wdth' 106;
  line-height: 1.12;
  letter-spacing: -.026em;
  font-weight: 800;
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -.014em; }

.eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--sp-3);
  text-shadow: var(--glow-sm);
}

/* Sichtbarer Fokus fuer Tastaturbedienung — vorher gab es keinen */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.grad {
  background: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-soft) 42%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Ankündigungsbanner ----------
   Sitzt über dem Header. Der Header rückt per Klassenschalter
   nach, statt vom Banner verdeckt zu werden. */
.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: block;
  padding: 9px 24px;
  text-align: center;
  font-size: .84rem; font-weight: 500;
  color: #02121a;
  background: var(--cyan);
}
.announce[href] { cursor: pointer; }
.announce[href]:hover { filter: brightness(1.08); }
.announce.tone-warn  { background: #ffb347; }
.announce.tone-alert { background: #ff7a90; }

/* Der Versatz kommt aus der gemessenen Bannerhöhe — bei
   umbrechendem Text reicht ein fester Wert nicht. */
body.has-announce .header { top: calc(var(--announce-h, 40px) + 12px); }
body.has-announce .hero { padding-top: calc(var(--header-h) + var(--announce-h, 40px) + var(--sp-5)); }

/* ---------- Header: freischwebende Capsule ---------- */
.header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center;
}
.header > .wrap { max-width: 1360px; }

.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 10px 10px 10px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(3, 4, 5, .6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.header.scrolled .header-bar {
  background: rgba(3, 4, 5, .88);
  border-color: var(--line-2);
}

.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark {
  width: auto; height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(34, 233, 255, .45));
}
.logo-text {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-variation-settings: 'wdth' 112;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .18em;
}

.nav { display: flex; gap: 4px; }
.nav a {
  padding: 8px 14px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color .2s, background .2s;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.on { color: var(--cyan); background: rgba(34, 233, 255, .08); }

/* ---------- Kopfbereich der Unterseiten ---------- */
.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-6);
  text-align: center;
}
.page-head::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.page-head h1 {
  font-variation-settings: 'wdth' 110;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.page-head .sec-text { max-width: 560px; margin-inline: auto; }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- Sprachumschalter ---------- */
.lang { position: relative; }

.lang-btn {
  display: flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 999px;
  transition: all .2s var(--ease);
}
.lang-btn svg { width: 16px; height: 16px; }
.lang-btn:hover { color: var(--text); }
.lang.open .lang-btn { color: var(--cyan); }

.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 168px;
  padding: 6px;
  background: rgba(7, 8, 9, .97);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 70;
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }

.lang-opt {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background .18s, color .18s;
}
.lang-opt:hover { background: var(--surface-2); color: var(--text); }
.lang-opt.on { color: var(--cyan); background: rgba(34,233,255,.08); }
.lang-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  min-width: 22px;
}
.lang-name { font-size: .86rem; }

.icon-pill {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  transition: all .22s var(--ease);
}
.icon-pill svg { width: 18px; height: 18px; }
.icon-pill:hover { background: var(--cyan); color: #02121a; }

.cart-count {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: none; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 700;
  background: rgba(0, 0, 0, .28);
  border-radius: 99px;
}
.cart-count.on { display: grid; }

.burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-md); }
.burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s var(--ease); }
.burger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Hero und Ticker füllen zusammen genau den ersten Bildschirm.
   Der Ticker wird per margin-top:auto an die Unterkante gedrückt,
   sitzt dadurch immer bündig am Faltrand — unabhängig davon, wie
   hoch das Fenster ist. */
.hero-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;   /* clippt die Atmosphäre, nicht der Hero allein */
}

.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--sp-5));
  padding-bottom: var(--sp-5);
}
.hero > .wrap { width: 100%; }

/* Kennzahlen und Ticker sitzen als Block an der Unterkante */
.hero-screen > .stats-band { margin-top: auto; }

/* ---------- Seitenweiter Schein ----------
   Spannt sich über die volle Höhe von <main>. Der Hero-Glow allein
   endet an dessen Unterkante — darunter wäre alles wieder schwarz. */
main { position: relative; }

.page-atmo {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  /* KEIN overflow: hidden — das hat die weichgezeichneten Ränder
     abgeschnitten, dadurch blieb von den seitlichen Blobs kaum
     etwas übrig. body hat bereits overflow-x: hidden. */
}
.pa {
  position: absolute; display: block;
  border-radius: 50%;
  filter: blur(90px);
}
/* Abwechselnd rechts und links, damit der Blick der Seite folgt.
   Die Mittelpunkte liegen jetzt am Rand statt weit dahinter —
   sonst landet der sichtbare Teil außerhalb des Bildes. */
.a1 { top:   4%; right: -6%; width: 820px; height: 700px;
      background: radial-gradient(circle, rgba(34,233,255,.26), transparent 66%); }
.a2 { top:  25%; left:  -8%; width: 700px; height: 640px;
      background: radial-gradient(circle, rgba(34,233,255,.20), transparent 68%); }
.a3 { top:  46%; right: -4%; width: 760px; height: 660px;
      background: radial-gradient(circle, rgba(34,233,255,.21), transparent 68%); }
.a4 { top:  67%; left:  -6%; width: 700px; height: 640px;
      background: radial-gradient(circle, rgba(34,233,255,.18), transparent 70%); }
.a5 { bottom: 2%; left: 30%; width: 800px; height: 560px;
      background: radial-gradient(circle, rgba(34,233,255,.16), transparent 70%); }

/* Inhalt muss darüber liegen. Alle direkten Kinder ausser der
   Schein-Ebene selbst — sonst rutscht ein neu ergaenzter Block
   irgendwann dahinter. */
main > *:not(.page-atmo) { position: relative; z-index: 1; }

/* ---------- Hero-Atmosphäre ----------
   Ohne das steht das Modell in einer schwarzen Leere. Ein
   großflächiger Schein plus Lichtstrahlen füllen den Raum, so wie
   ein Hintergrundbild es täte — nur ohne Bilddatei. */
.hero-atmo {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-atmo > * { position: absolute; display: block; }

/* Großer Kern hinter dem Modell. Reicht bis unter die Kennzahlen,
   damit der Verlauf nicht auf halber Höhe in Schwarz abbricht. */
.atmo-core {
  top: -10%; right: -6%;
  width: 72%; height: 125%;
  background:
    radial-gradient(ellipse 44% 40% at 52% 38%, rgba(34,233,255,.32), transparent 62%),
    radial-gradient(ellipse 72% 62% at 55% 50%, rgba(34,233,255,.15), transparent 74%);
  filter: blur(46px);
  animation: atmoPulse 9s ease-in-out infinite;
}
@keyframes atmoPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* Schräge Lichtstrahlen — geben der Fläche Struktur */
.atmo-ray {
  top: -30%;
  width: 340px; height: 160%;
  background: linear-gradient(to bottom, transparent, rgba(34,233,255,.16), transparent);
  filter: blur(38px);
  transform: rotate(18deg);
}
.atmo-ray.r1 { right: 34%; animation: rayDrift 14s ease-in-out infinite; }
.atmo-ray.r2 { right: 12%; width: 220px; opacity: .7;
               animation: rayDrift 18s ease-in-out infinite reverse; }
.atmo-ray.r3 { right: 54%; width: 160px; opacity: .45;
               animation: rayDrift 22s ease-in-out infinite; }
@keyframes rayDrift {
  0%, 100% { transform: rotate(18deg) translateX(0); }
  50%      { transform: rotate(15deg) translateX(-40px); }
}

/* Lichtteppich unter dem Modell. Sitzt tief genug, dass er auch
   hinter Kennzahlen und Ticker noch Farbe trägt. */
.atmo-floor {
  left: 34%; right: -12%; bottom: -12%;
  height: 380px;
  background: radial-gradient(ellipse 55% 100% at 52% 100%, rgba(34,233,255,.26), transparent 72%);
  filter: blur(55px);
}

/* Inhalt muss über der Atmosphäre liegen */
.hero-grid, .hero-copy, .hero-bot { position: relative; z-index: 1; }

/* Der Hero darf breiter sein als der Rest der Seite — das ist der
   wirksamste Hebel für ein großes Modell: mehr Canvas-Fläche, ohne
   dass die Kamera näher ran muss (näher = Arme werden abgeschnitten). */
.hero > .wrap { max-width: 1600px; }

.hero-grid {
  display: grid;
  /* Textspalte breiter, Modellspalte enger — vorher klaffte in der
     Mitte eine tote Fläche zwischen beidem. */
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr);
  align-items: center;
  gap: var(--sp-5);
  margin-bottom: 0;
}
.hero-copy { max-width: 640px; }

/* Eyebrow mit vorangestelltem Strich */
.eyebrow-line {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow-line .dash {
  width: 34px; height: 1px;
  background: var(--cyan);
  box-shadow: var(--glow-sm);
}

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Headline: breite Grotesk, zweite Zeile als Outline */
.hero-title {
  font-variation-settings: 'wdth' 112;
  font-size: var(--t-h1);
  line-height: .96;
  letter-spacing: -.022em;
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}
.hl-solid {
  color: var(--text);
  text-shadow: 0 0 40px rgba(255, 255, 255, .18);
}
.hl-outline {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--cyan);
  paint-order: stroke fill;
  /* Kräftiger — die Outline-Zeile ist der Blickfang der Seite */
  filter: drop-shadow(0 0 14px rgba(34, 233, 255, .6))
          drop-shadow(0 0 40px rgba(34, 233, 255, .3));
}

/* Badge unter der Headline */
.hero-badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan-soft);
  background: rgba(34, 233, 255, .07);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--glow-sm), inset 0 0 20px rgba(34, 233, 255, .06);
}

.hero-sub {
  max-width: 500px; margin-bottom: var(--sp-6);
  font-size: var(--t-lg);
  color: var(--muted);
  text-wrap: pretty;
}

.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }

/* Social Proof */
.vouches {
  display: flex; align-items: center; gap: 12px;
  font-size: .86rem; color: var(--muted);
}
.avatars { display: flex; }
.av {
  /* Ohne overflow ragt das quadratische Bild ueber den runden
     Rahmen hinaus — der border-radius allein schneidet nichts ab. */
  position: relative;
  overflow: hidden;
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -9px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  opacity: calc(1 - var(--i) * .18);
  /* Der erste liegt oben, sonst deckt jeder folgende den vorigen zu */
  z-index: calc(10 - var(--i));
}
.av:first-child { margin-left: 0; }

.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Echte Gesichter sollen nicht ausgeblichen werden — die
   Staffelung war nur fuer die leeren Platzhalterkreise gedacht. */
.av.pic { opacity: 1; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 9px #3ddc84;
  animation: pulse 2s ease-in-out infinite;
}


/* ---------- Roboter (Cursor-Tracking) ---------- */
.hero-bot {
  position: relative;
  display: grid;
  place-items: center;
  /* Hoch genug für den großen Ausschnitt, aber so, dass Hero,
     Kennzahlen und Ticker zusammen in einen Bildschirm passen */
  min-height: 480px;
  height: 64vh;
  /* Oben darf der Kopf über das Raster hinausragen, unten übernimmt
     die Maske. Seitlich KEIN Überhang: alles was über den Viewport
     ragt, wird vom Browser hart abgeschnitten — dann fehlt der Arm,
     egal wie die Kamera steht. */
  overflow: visible;
  margin-right: 0;
  margin-top: 0;
  cursor: crosshair;
}

.bot-glow {
  position: absolute;
  width: 100%; height: 92%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,233,255,.30), rgba(34,233,255,.12) 48%, transparent 74%);
  filter: blur(70px);
  animation: botBreathe 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes botBreathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* --- 3D-Canvas --- */
/* Canvas und alle Container darüber müssen komplett hintergrundfrei
   sein, sonst steht ein Kasten hinter dem freigestellten Modell. */
.hero-bot,
.hero-bot > *,
#botCanvas {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Ausnahme: der weiche Glow hinter dem Modell darf sein Gradient behalten */
.hero-bot > .bot-glow {
  background: radial-gradient(circle, rgba(34,233,255,.30), rgba(34,233,255,.12) 48%, transparent 74%) !important;
}

#botCanvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);

  /* Unten sanft ausblenden, damit der angeschnittene Oberkörper
     nicht als harte Kante endet. Oben und Mitte bleiben voll deckend. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,.6) 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0,0,0,.6) 95%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.hero-bot.has-3d #botCanvas { opacity: 1; }
.hero-bot.no-webgl #botCanvas { display: none; }

/* --- SVG-Fallback ---
   Standardmäßig AUS. Sonst blitzt beim Neuladen kurz der alte
   Roboter auf, bis das GLB fertig geladen ist. Er erscheint nur,
   wenn WebGL fehlt oder das Modell nicht geladen werden kann. */
.bot-svg { display: none; }
.hero-bot.no-webgl .bot-svg {
  display: block;
  position: absolute;
  width: min(100%, 380px);
  height: auto;
  max-height: 500px;
  animation: botIdle 5.5s ease-in-out infinite;
}
@keyframes botIdle {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

/* Ebenen fuer den Parallax-Effekt */
.bot-head, .bot-torso, .bot-arms, .bot-legs, .bot-eyes, .bot-shadow {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.bot-head  { transform-origin: 50% 100%; }

.bot-core, .bot-core-in { animation: coreGlow 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes coreGlow {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
.bot-antenna { animation: pulse 1.8s ease-in-out infinite; }


/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--t-md); font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(120deg, var(--cyan), var(--cyan-soft));
  color: #02121a;
  box-shadow: 0 6px 26px rgba(34, 233, 255, .3);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 38px rgba(34, 233, 255, .48);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--line-2); box-shadow: var(--glow-sm); }

.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: .86rem; border-radius: 999px; }
.btn .arrow { font-size: 1.05em; line-height: 1; }
.btn-primary, .btn-ghost { border-radius: 999px; }

.btn-spinner { display: none; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading .btn-spinner { display: block; }
.btn.loading { pointer-events: none; opacity: .75; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: color .2s, background .2s;
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }

/* ---------- Lauftext ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: var(--sp-3) 0;
  border-block: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
  /* Ränder ausblenden, damit die Wörter nicht hart abgeschnitten wirken */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  /* Der Inhalt liegt 4× vor. Um genau 25 % zu verschieben heißt:
     um exakt eine Wiederholung — dadurch ist die Schleife nahtlos. */
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-25%, 0, 0); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.mq-item {
  display: flex; align-items: center; gap: 13px;
  padding-right: 46px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.mq-dot {
  width: 5px; height: 5px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* ---------- Kennzahlen ---------- */
.stats-band {
  position: relative;
  /* Kompakter als eine eigene Sektion — sitzt jetzt mit im ersten
     Bildschirm und darf den Hero nicht erdrücken. */
  padding-block: var(--sp-5);
  border-top: 1px solid var(--line);
}
/* Schimmer über der Trennkante */
.stats-band::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.stat {
  position: relative;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.stat:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--glow-md);
}
.stat-icon {
  width: 22px; height: 22px;
  margin: 0 auto var(--sp-2);
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(34, 233, 255, .55));
}
.stat-value {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-variation-settings: 'wdth' 106;
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cyan);
  text-shadow: var(--glow-md);
  line-height: 1.1;
}
.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
  margin-top: var(--sp-2);
}

@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Sektionskopf + Filter ---------- */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-7);
}
.filters {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  /* Steht seit dem Umbau allein über dem Raster und braucht
     deshalb eigenen Abstand — vorher kam der vom .sec-head. */
  margin-bottom: var(--sp-5);
}
.sec-head .filters { margin-bottom: 0; }
.filter {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  transition: all var(--dur) var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--line-2); }
.filter.on {
  color: #02121a;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: var(--glow-sm);
}

/* ---------- Produktraster ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5);
}
.skeleton { height: 340px; }

.skeleton {
  height: 400px;
  border-radius: var(--r-xl);
  background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ============ Kategorie-Kacheln ============ */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.tile {
  position: relative;
  display: block;
  /* Hochformat statt schmaler Streifen — die Kachel ist der
     Haupteinstieg der Startseite und darf Platz beanspruchen.
     4:5 entspricht dem Zuschnitt der Kategoriekarten, so wird
     an den Raendern nichts Wichtiges abgeschnitten. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-5px);
  border-color: var(--line-2);
  box-shadow: 0 22px 55px rgba(0,0,0,.55), var(--glow-xl);
}

.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.62);
  transition: transform .5s var(--ease), filter var(--dur) var(--ease);
}
.tile:hover img { transform: scale(1.07); filter: saturate(1) brightness(.85); }

/* Karten mit eingebautem Schriftzug duerfen kaum abgedunkelt
   werden — sonst verschwindet genau die Beschriftung, wegen der
   die eigene Textzeile ausgeblendet wurde. */
.tile.titled img { filter: saturate(.95) brightness(.86); }
.tile.titled:hover img { filter: saturate(1.05) brightness(1); }
.tile.no-img img { display: none; }
.tile.no-img {
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(34,233,255,.16), transparent 70%), var(--card);
}

.tile-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2,4,6,.96) 20%, rgba(2,4,6,.45) 58%, transparent 88%);
  pointer-events: none;
}
/* Hier traegt nur noch die Produktzahl auf dem Verlauf — der
   kraeftige Schleier von oben wuerde die Karte unnoetig zudecken. */
.tile.titled .tile-shade {
  background: linear-gradient(to top, rgba(2,4,6,.9) 6%, transparent 34%);
}
/* Cyan-Schleier beim Hover */
.tile::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 55%, rgba(34,233,255,.24), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.tile:hover::after { opacity: 1; }

.tile-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-5);
}
.tile-name {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-variation-settings: 'wdth' 108;
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.tile-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2);
}
.tile:hover .tile-count { color: var(--cyan); }

/* Ohne Namenszeile darueber reicht deutlich weniger Polster */
.tile.titled .tile-body { padding: var(--sp-3) var(--sp-4); }
.tile.titled .tile-count { color: var(--muted); }

.tile-go {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: .9rem;
  color: var(--muted);
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  transition: all var(--dur) var(--ease);
}
.tile:hover .tile-go { color: #02121a; background: var(--cyan); border-color: var(--cyan); }

/* ============ Produktkarten ============ */
.pcard {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(175deg, #101419, var(--card));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  animation: rise .5s var(--ease) both;
}
.pcard:hover, .pcard:focus-visible {
  transform: translateY(-6px);
  border-color: var(--line-2);
  box-shadow: 0 26px 70px rgba(0,0,0,.6), var(--glow-xl);
  outline: none;
}
.pcard.sold { opacity: .5; }
.pcard.sold:hover { transform: none; box-shadow: none; }

/* Leuchtender Rand. Liegt als Maske auf dem Rahmen, damit der
   Verlauf nur die Kante trifft und nicht die Fläche einfärbt. */
.pcard::before {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(34,233,255,.8), transparent 40%,
                              transparent 60%, rgba(34,233,255,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.pcard:hover::before, .pcard:focus-visible::before { opacity: 1; }
.pcard.sold::before { display: none; }

/* --- Bildbereich --- */
/* Die Box-Art ist im Breitformat — sie fuellt den oberen Kartenrand
   randlos aus, statt klein und zentriert im Nichts zu schweben. */
.pcard-media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 62%, rgba(34,233,255,.12), transparent 70%);
}
/* Cyan-Schleier legt sich beim Hover über das Artwork */
.pcard-media::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(34,233,255,.28), transparent 68%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.pcard:hover .pcard-media::before { opacity: 1; }
.pcard-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.pcard:hover .pcard-img { transform: scale(1.06); }

/* Weicher Uebergang ins Textfeld */
.pcard-media::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 45%; z-index: 2;
  background: linear-gradient(to top, rgba(4,6,8,.92), transparent);
  pointer-events: none;
}
/* Leuchtende Kante zwischen Bild und Text */
.pcard-body::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.pcard:hover .pcard-body::before { opacity: .7; }
.pcard-media.no-img::after { display: none; }

/* Fällt nur ein, wenn kein Bild gesetzt ist oder es nicht lädt */
.pcard-fallback { display: none; }
.pcard-media.no-img .pcard-img { display: none; }
.pcard-media.no-img .pcard-fallback { display: grid; place-items: center; padding: 20px; }

.fb-box {
  display: grid; place-items: center; gap: 12px;
  width: 132px; height: 176px;
  border-radius: 8px;
  background: linear-gradient(150deg, #0e1418, #05080a);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .4s var(--ease);
}
.pcard:hover .fb-box { transform: translateY(-6px) scale(1.04); }
.fb-logo { width: 38px; opacity: .9; filter: drop-shadow(0 0 10px rgba(34,233,255,.5)); }
.fb-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); text-align: center; padding: 0 10px;
}

/* --- Overlays auf dem Bild --- */
.pstatus {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  font-size: .72rem; font-weight: 500;
  color: var(--muted);
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.pstatus i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3ddc84; box-shadow: 0 0 7px #3ddc84;
}
/* Farbe je Status */
.pstatus.st-updating i { background: #ffb347; box-shadow: 0 0 7px #ffb347; }
.pstatus.st-down i     { background: #ff7a90; box-shadow: 0 0 7px #ff7a90; }
.pstatus.st-soldout i  { background: var(--muted-2); box-shadow: none; }
.pstatus.st-updating { color: #ffcf8f; }
.pstatus.st-down     { color: #ffb3bf; }

.pbadge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  padding: 4px 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34,233,255,.12);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  white-space: nowrap;
}

.pcard-go {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: .95rem;
  color: var(--muted);
  background: rgba(0,0,0,.45);
  border: 1px solid var(--line);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  transition: all .22s var(--ease);
}
.pcard:hover .pcard-go { color: #02121a; background: var(--cyan); border-color: var(--cyan); }

/* --- Text --- */
.pcard-body { position: relative; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.pcard-body h3 {
  font-size: 1.26rem;
  margin-bottom: var(--sp-2);
}
.pcard-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.pcard-sub { font-size: var(--t-sm); color: var(--muted); }
.pcard-price {
  font-size: var(--t-md); font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
  text-shadow: var(--glow-sm);
}

/* ============ Produkt-Detail ============
   Zwei Spalten: links Bild, Beschreibung und Leistungen, rechts
   der Kaufbereich. Vorher stapelte sich alles in einer schmalen
   Saeule — der Kaufknopf lag dadurch weit unter dem Anschlag. */
/* Doppelter Klassenname mit Absicht: .modal-panel steht weiter
   unten in dieser Datei und hat dieselbe Spezifitaet — mit nur
   ".pd-panel" gewinnt dessen width von 520px und das Fenster
   bleibt schmal, egal was hier steht. */
.modal-panel.pd-panel { width: min(1240px, 96vw); }
.pd-body { max-height: 92vh; overflow: hidden auto; }

/* Beide Spalten auf gleiche Hoehe (Vorgabe von grid), damit der
   Kaufbereich seine Flaeche bis nach unten behaelt. */
.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
}

/* ---------- Linke Spalte ---------- */
.pd-media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(34,233,255,.14), transparent 70%);
}
.pd-media .pcard-img { width: 100%; height: 100%; object-fit: cover; }
.pd-media.no-img .pcard-img { display: none; }
.pd-media .pcard-fallback { display: none; }
.pd-media.no-img .pcard-fallback { display: grid; place-items: center; }
/* Weicher Auslauf nach unten, damit die Kante nicht abgeschnitten wirkt */
.pd-media::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, var(--card), transparent);
  pointer-events: none;
}
/* Links, nicht rechts — dort sitzt der Schliessen-Knopf */
.pd-badge { top: 16px; left: 16px; right: auto; transform: none; }

.pd-text { padding: var(--sp-2) var(--sp-6) var(--sp-6); }
.pd-desc {
  font-size: var(--t-md); line-height: 1.7;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  text-wrap: pretty;
}
.pd-feats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--sp-5);
}

.pd-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}

/* ---------- Rechte Spalte: Kaufbereich ---------- */
.pd-buy {
  display: flex; flex-direction: column;
  /* Rechts oben sitzt der Schliessen-Knopf — deshalb mehr Luft */
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  padding-top: 52px;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(34,233,255,.05), transparent 240px), var(--card-2);
}

.pd-buy .pstatus { position: static; align-self: flex-start; margin-bottom: var(--sp-3); }
.pd-buy h2 {
  font-size: 1.5rem; line-height: 1.2;
  letter-spacing: -.02em;
}
.pd-sub { margin-top: 6px; font-size: var(--t-sm); color: var(--muted); }

.pd-buy .pd-label { margin-top: var(--sp-5); }
.pd-buy .variants { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pd-buy .variant { padding: 9px 15px; font-size: .87rem; }

.pd-price {
  margin: var(--sp-5) 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.price-line .price { font-size: 1.9rem; }
.price-line .price-old { text-decoration: line-through; }
.save-tag {
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  color: #3ddc84;
  background: rgba(61,220,132,.13);
  border-radius: 999px;
}
.pd-price .stock-line { display: block; margin-top: 6px; }

.pd-buy .btn { padding: 14px 24px; }

/* Kurze Zusicherungen unter dem Knopf */
.pd-trust {
  margin-top: auto;
  padding-top: var(--sp-5);
  display: grid; gap: 9px;
  list-style: none;
}
.pd-trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-xs); color: var(--muted-2);
}
.pd-trust svg { width: 14px; height: 14px; flex: none; color: var(--cyan); opacity: .8; }

/* ---------- Schmal ---------- */
@media (max-width: 860px) {
  .modal-panel.pd-panel { width: min(560px, 96vw); }
  /* Kaufbereich nach oben, direkt unters Bild — auf dem Handy
     soll der Preis nicht hinter der Merkmalsliste liegen. */
  .pd-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-main { display: contents; }
  .pd-media { order: 1; }
  .pd-buy {
    order: 2;
    padding: var(--sp-5);
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .pd-text { order: 3; padding: var(--sp-5); }
  .pd-feats { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Alte Karte (nicht mehr im Markup) ============ */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px;
  background: linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  animation: rise .5s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(34,233,255,.55), transparent 45%, transparent 60%, rgba(34,233,255,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 22px 60px rgba(0,0,0,.5), var(--glow-lg); }
.card:hover::before { opacity: 1; }

.card.sold { opacity: .55; }
.card.sold:hover { transform: none; box-shadow: none; }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

.badge {
  padding: 4px 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34,233,255,.1);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  white-space: nowrap;
}
.badge.sold-badge { color: #ff7a90; background: rgba(255,90,120,.1); border-color: rgba(255,90,120,.3); }

.card-desc { font-size: .9rem; color: var(--muted); margin-bottom: 20px; }

.card-feats { list-style: none; display: grid; gap: 9px; margin-bottom: 22px; padding: 0; }
.card-feats li { display: flex; align-items: flex-start; gap: 9px; font-size: .87rem; color: var(--muted); }
.card-feats svg { width: 15px; height: 15px; color: var(--cyan); flex-shrink: 0; margin-top: 4px; }

.variants { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.variant {
  padding: 7px 13px;
  font-size: .82rem; font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: all .2s var(--ease);
}
.variant:hover { color: var(--text); border-color: var(--line-2); }
.variant.on {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(34,233,255,.09);
  box-shadow: var(--glow-sm);
}

.card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }

.price-block { display: flex; flex-direction: column; }
.price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.55rem; font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}
.price-old { font-size: .85rem; color: var(--muted-2); text-decoration: line-through; }
.stock-line { font-size: .74rem; color: var(--muted-2); margin-top: 3px; }
.stock-line.low { color: #ffb347; }
.stock-line.out { color: #ff7a90; }

/* ---------- Feature-Raster ---------- */
/* Bento-Raster: die erste Kachel läuft über zwei Spalten. Sechs
   gleich große Kästen wirken schematisch — ein gebrochener Rhythmus
   liest sich wertiger. */
/* Vier Spalten, erste und letzte Kachel doppelt breit — ergibt zwei
   saubere Reihen mit gebrochenem Rhythmus. Mit drei Spalten bliebe
   am Ende eine einzelne Kachel allein stehen. */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.feat-grid > .feat:first-child,
.feat-grid > .feat:last-child { grid-column: span 2; }

.feat {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background:
    radial-gradient(ellipse 80% 60% at 12% 0%, rgba(34,233,255,.07), transparent 62%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Glaskante oben — der schmale helle Strich, der Flächen plastisch
   wirken lässt */
.feat::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 22%,
                              rgba(34,233,255,.5) 50%, rgba(255,255,255,.18) 78%, transparent);
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.feat:hover::before { opacity: 1; }

/* Schein, der beim Hover aus der Ecke wächst */
.feat::after {
  content: '';
  position: absolute; top: -40%; left: -10%;
  width: 60%; height: 120%;
  background: radial-gradient(ellipse at center, rgba(34,233,255,.16), transparent 68%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.feat:hover::after { opacity: 1; }

.feat:hover {
  border-color: var(--line-2);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), var(--glow-md);
}

.feat > * { position: relative; z-index: 1; }

.feat-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  margin-bottom: var(--sp-4);
  color: var(--cyan);
  background: linear-gradient(150deg, rgba(34,233,255,.18), rgba(34,233,255,.04));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255,255,255,.12);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feat-icon svg { width: 22px; height: 22px; }
.feat:hover .feat-icon {
  box-shadow: var(--glow-xl), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-2px);
}

.feat h3 { font-size: 1.12rem; margin-bottom: var(--sp-2); }
.feat p { font-size: var(--t-sm); color: var(--muted); line-height: 1.7; max-width: 46ch; }

@media (max-width: 900px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid > .feat:first-child,
  .feat-grid > .feat:last-child { grid-column: span 2; }
}
@media (max-width: 620px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-grid > .feat:first-child,
  .feat-grid > .feat:last-child { grid-column: auto; }
}

/* ============ Animierte Icons ============
   Die Uhr läuft dauerhaft, alles andere reagiert erst beim Hover —
   sechs gleichzeitig zappelnde Symbole wären reiner Lärm. */
.feat-icon .ico { width: 24px; height: 24px; overflow: visible; }

/* --- Uhr: Zeiger drehen sich --- */
.ico-clock .hand-h,
.ico-clock .hand-m { transform-origin: 12px 12px; }
.ico-clock .hand-m { animation: clockSpin 4s linear infinite; }
.ico-clock .hand-h { animation: clockSpin 48s linear infinite; }
@keyframes clockSpin { to { transform: rotate(360deg); } }
.feat:hover .ico-clock .hand-m { animation-duration: 1s; }
.feat:hover .ico-clock .hand-h { animation-duration: 12s; }

/* --- Blitz: schlägt ein --- */
.ico-bolt { transform-origin: 12px 12px; }
.feat:hover .ico-bolt { animation: boltStrike .55s var(--ease); }
@keyframes boltStrike {
  0%   { transform: scale(1)    rotate(0);    filter: none; }
  35%  { transform: scale(1.18) rotate(-7deg);
         filter: drop-shadow(0 0 8px rgba(34,233,255,.9)); }
  60%  { transform: scale(.96)  rotate(3deg); }
  100% { transform: scale(1)    rotate(0);    filter: none; }
}

/* --- Schloss: Bügel rastet ein --- */
.ico-lock .shackle {
  transform-origin: 12px 10px;
  transition: transform .32s var(--ease);
}
.feat:hover .ico-lock .shackle { transform: translateY(-2.5px) scaleY(1.25); }

/* --- Schild: Haken wird gezeichnet --- */
.ico-shield .tick {
  stroke-dasharray: 11;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s var(--ease);
}
.feat:hover .ico-shield .tick {
  stroke-dashoffset: 11;
  animation: tickDraw .5s var(--ease) .06s forwards;
}
@keyframes tickDraw { from { stroke-dashoffset: 11; } to { stroke-dashoffset: 0; } }

/* --- Aktualisieren: dreht eine Runde --- */
.ico-sync { transform-origin: 12px 12px; transition: transform .6s var(--ease); }
.feat:hover .ico-sync { transform: rotate(360deg); }

/* --- Community: Figuren treten nacheinander hervor --- */
.ico-users .u1,
.ico-users .u2 { transition: transform .35s var(--ease), opacity .35s var(--ease); }
.ico-users .u2 { opacity: .55; }
.feat:hover .ico-users .u1 { transform: translateX(-1.5px); }
.feat:hover .ico-users .u2 { transform: translateX(1.5px); opacity: 1; }

/* ---------- Zentrierter Sektionskopf ---------- */
.sec-center { text-align: center; max-width: 620px; margin: 0 auto var(--sp-7); }
.sec-center h2 { margin-bottom: var(--sp-3); }
.sec-text { color: var(--muted); font-size: var(--t-md); text-wrap: pretty; }

/* ---------- Status-Seite ---------- */
.status-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-7);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.status-block { margin-bottom: var(--sp-7); }
.status-block:last-child { margin-bottom: 0; }

.block-label {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
  text-shadow: var(--glow-sm);
}

/* --- Anti-Cheats: kompakte Zeile --- */
.ac-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.ac-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ac-card:hover { border-color: var(--line-2); box-shadow: var(--glow-md); }

.ac-logo {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  font-family: 'Archivo', sans-serif;
  font-size: .88rem; font-weight: 800;
  color: var(--cyan);
  background: rgba(34,233,255,.1);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  overflow: hidden;
}
.ac-logo img { width: 100%; height: 100%; object-fit: cover; }
.ac-name { flex: 1; font-size: var(--t-sm); font-weight: 600; }

/* --- Software: Karten mit Bild --- */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
}
.sw-card {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.sw-card:hover, .sw-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), var(--glow-md);
  outline: none;
}

.sw-media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(34,233,255,.12), transparent 70%);
}
.sw-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease); }
.sw-card:hover .sw-media img { transform: scale(1.05); }
.sw-fallback { display: none; }
.sw-media.no-img > img { display: none; }
.sw-media.no-img .sw-fallback { display: grid; place-items: center; }
.sw-media.no-img .sw-fallback img {
  width: 44px; height: auto; opacity: .8;
  filter: drop-shadow(0 0 10px rgba(34,233,255,.5));
}

.sw-body { padding: var(--sp-4) var(--sp-5); }
.sw-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.sw-top h3 { font-size: 1.06rem; }
.sw-top .pstatus { position: static; flex-shrink: 0; }

@media (max-width: 780px) { .ac-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .ac-row { grid-template-columns: minmax(0, 1fr); } }
.status-summary { display: flex; align-items: center; gap: 10px; font-size: .93rem; }
.status-summary.ok strong { color: #3ddc84; }
.status-summary.warn strong { color: var(--cyan-soft); }
.live-dot.amber { background: #ffb347; box-shadow: 0 0 9px #ffb347; }
.status-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; color: var(--muted-2);
}

/* Status-Pillen auf der Status-Seite stehen im Fluss, nicht auf
   einem Bild — deshalb ohne absolute Position und Blur. */
.ac-card .pstatus,
.sw-top .pstatus {
  position: static;
  background: var(--surface-2);
  backdrop-filter: none;
  white-space: nowrap;
}

/* ---------- Ablauf ---------- */
/* Ablauf als Zeitstrahl: eine durchgehende Linie verbindet die
   Stationen. Vier lose Kästen lesen sich nicht als Reihenfolge —
   die Linie macht daraus einen Weg. */
.steps {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

/* Die Linie läuft auf Höhe der Knotenmitte, um jeweils ein halbes
   Feld eingerückt, damit sie nicht ins Leere ragt. */
.steps::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 12.5%; right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(34,233,255,.15), rgba(34,233,255,.55) 20%,
    rgba(34,233,255,.55) 80%, rgba(34,233,255,.15));
}
/* Lichtpunkt, der die Linie entlangwandert */
.steps::after {
  content: '';
  position: absolute;
  top: 24px; left: 12.5%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
  animation: stepTravel 6s var(--ease) infinite;
}
@keyframes stepTravel {
  0%       { left: 12.5%; opacity: 0; }
  10%      { opacity: 1; }
  90%      { opacity: 1; }
  100%     { left: 87.5%; opacity: 0; }
}
.step {
  position: relative;
  text-align: center;
  padding-top: 0;
}

/* Station auf der Linie. Der deckende Hintergrund unterbricht die
   Linie sauber, statt sie durch den Kreis scheinen zu lassen. */
.step-node {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  color: var(--cyan);
  background:
    linear-gradient(150deg, rgba(34,233,255,.16), rgba(34,233,255,.03)),
    var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step-node svg { width: 22px; height: 22px; }
.step:hover .step-node {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--glow-xl), inset 0 1px 0 rgba(255,255,255,.2);
}

.step-n {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .2em;
  color: var(--muted-2);
  margin-bottom: var(--sp-2);
  transition: color var(--dur) var(--ease);
}
.step:hover .step-n { color: var(--cyan); }

.step h3 { font-size: 1.08rem; margin-bottom: var(--sp-2); }
.step p {
  font-size: var(--t-sm); color: var(--muted); line-height: 1.7;
  max-width: 30ch; margin-inline: auto;
}

/* Senkrecht auf schmalen Schirmen */
@media (max-width: 780px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .steps::before {
    top: 28px; bottom: 28px; left: 27px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg,
      rgba(34,233,255,.15), rgba(34,233,255,.55) 12%,
      rgba(34,233,255,.55) 88%, rgba(34,233,255,.15));
  }
  .steps::after { display: none; }
  .step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: var(--sp-4);
    text-align: left;
  }
  .step-node { grid-row: 1 / span 3; margin: 0; }
  .step p { max-width: none; margin-inline: 0; }
}

/* ---------- Bewertungen: scrollende Spalten ---------- */
.vouch-wall {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  height: 560px;
  overflow: hidden;
  padding-inline: 24px;
  max-width: var(--max);
  margin-inline: auto;
  /* Oben und unten ausblenden, sonst schneiden die Karten hart ab */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.vouch-col { overflow: hidden; }
.vouch-track {
  display: grid; gap: 18px;
  animation: vouchScroll var(--dur, 40s) linear infinite var(--dir, normal);
  will-change: transform;
}
.vouch-half { display: grid; gap: 18px; }
@keyframes vouchScroll {
  from { transform: translate3d(0, 0, 0); }
  /* -50% minus die halbe Lücke: der Abstand zwischen den beiden
     Hälften gehört sonst nicht zur Wiederholung und das Band
     ruckt bei jedem Durchlauf. */
  to   { transform: translate3d(0, calc(-50% - 9px), 0); }
}
.vouch-wall:hover .vouch-track { animation-play-state: paused; }

.review {
  padding: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.review:hover { border-color: var(--line-2); background: var(--card-2); }
.review p { font-size: var(--t-sm); }
.review-product {
  display: inline-block;
  margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
  padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(34, 233, 255, .08);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.stars { display: flex; gap: 3px; margin-bottom: 12px; color: var(--cyan); }
.stars svg { width: 15px; height: 15px; }
.stars .off { color: var(--muted-2); }
.review p { font-size: .91rem; color: var(--muted); margin-bottom: 16px; }
.review-name { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 600; }
.avatar {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  color: #02121a;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  border-radius: 50%;
  flex-shrink: 0;
}
.avatar-img { object-fit: cover; background: var(--surface-2); }
.verified { font-size: .72rem; color: var(--cyan); font-weight: 500; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-item:hover { background: var(--card-2); }
.faq-item.open { border-color: var(--line-2); background: var(--card-2); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-md); font-weight: 600; text-align: left;
}
.faq-q svg { width: 17px; height: 17px; color: var(--cyan); flex-shrink: 0; transition: transform .3s var(--ease); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a p { padding: 0 22px 20px; font-size: .9rem; color: var(--muted); }

/* ---------- Bewertung schreiben ---------- */
.vouch-box {
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  display: grid; gap: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.vouch-box h3 { font-size: 1.15rem; }
.vouch-box p { font-size: var(--t-sm); color: var(--muted); }
.vouch-box .btn { justify-self: start; }

.vouch-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.vouch-who {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-sm); color: var(--muted);
}
.vouch-who img { width: 24px; height: 24px; border-radius: 50%; }
.vouch-who a { color: var(--muted-2); text-decoration: underline; }
.vouch-who a:hover { color: var(--cyan); }

.vouch-box .field { display: grid; gap: 7px; }
.vouch-box label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
}
.vouch-box input,
.vouch-box textarea {
  width: 100%; padding: 11px 14px;
  font: inherit; font-size: var(--t-sm);
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--dur) var(--ease);
  resize: vertical;
}
.vouch-box input:focus,
.vouch-box textarea:focus { border-color: var(--cyan); box-shadow: var(--glow-sm); }
.vouch-box .hint { font-size: .76rem; color: var(--muted-2); }


/* ============ Eigenes Dropdown ============
   Ein natives <select> laesst seine Optionsliste nicht gestalten —
   die zeichnet das Betriebssystem, weiss auf grau, mitten im
   dunklen Layout. Deshalb hier ein eigener Aufbau aus Knopf und
   Liste. */
.cselect { position: relative; }

.cselect-btn {
  width: 100%;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 14px;
  font: inherit; font-size: var(--t-sm); text-align: left;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cselect-btn:hover { border-color: var(--line-2); }
.cselect-btn:focus-visible,
.cselect.is-open .cselect-btn { border-color: var(--cyan); box-shadow: var(--glow-sm); }

/* Leere Auswahl gedaempft, damit sie wie ein Platzhalter wirkt */
.cselect-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect[data-value=""] .cselect-label { color: var(--muted); }

.cselect-caret {
  width: 11px; height: 11px; flex: none;
  color: var(--muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cselect.is-open .cselect-caret { transform: rotate(180deg); color: var(--cyan); }

/* ---- Liste ---- */
.cselect-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 20;
  max-height: 244px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-1);
  list-style: none;
  background: var(--card-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .72), var(--glow-sm);

  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 233, 255, .3) transparent;
}
.cselect-list::-webkit-scrollbar       { width: 6px; }
.cselect-list::-webkit-scrollbar-thumb { background: rgba(34, 233, 255, .25); border-radius: 99px; }

/* Kein Platz nach unten: nach oben aufklappen */
.cselect.is-up .cselect-list { top: auto; bottom: calc(100% + 6px); transform: translateY(6px); }

.cselect.is-open .cselect-list {
  opacity: 1; visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.cselect-opt {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: var(--t-sm);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Tastatur- und Maus-Hervorhebung teilen sich einen Zustand */
.cselect-opt.is-active { background: rgba(34, 233, 255, .1); color: var(--text); }

.cselect-opt[aria-selected="true"] {
  color: var(--cyan);
  background: rgba(34, 233, 255, .13);
  box-shadow: inset 2px 0 0 var(--cyan);
}

/* Sternauswahl */
.star-pick { display: flex; gap: 4px; }
.star-pick button {
  font-size: 1.6rem; line-height: 1;
  color: var(--muted-2);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.star-pick button:hover { transform: scale(1.15); }
.star-pick button.on { color: var(--cyan); text-shadow: var(--glow-sm); }

.vouch-foot { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.vouch-msg { font-size: var(--t-sm); }
.vouch-msg.ok  { color: #3ddc84; }
.vouch-msg.err { color: #ff7a90; }

/* ---------- Community ---------- */
.community-box {
  position: relative;
  overflow: hidden;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
}
.community-glow {
  position: absolute; inset: -40% 20% auto 20%;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(34,233,255,.22), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}
/* Der Glow muss ausgenommen bleiben — ein pauschales
   "position: relative" auf alle Kinder würde ihn aus der absoluten
   Positionierung holen und als 320 px hohen Block in den Textfluss
   stellen. Genau das schob den Inhalt nach unten. */
.community-box > *:not(.community-glow) { position: relative; }
.community-box h2 { margin-bottom: 14px; }
.community-box p { max-width: 520px; margin: 0 auto 28px; color: var(--muted); }
.community-note {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px;
  font-size: .82rem; color: var(--muted-2);
}

/* ---------- CTA ---------- */
.cta-box {
  position: relative;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: radial-gradient(ellipse 70% 130% at 50% 0%, rgba(34,233,255,.13), transparent 70%), var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--glow-lg);
}
.cta-box h2 { margin-bottom: 12px; }
.cta-box p { max-width: 470px; margin: 0 auto 26px; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: var(--sp-8); padding-bottom: var(--sp-6); }
.footer-inner {
  display: grid; grid-template-columns: 1.4fr 2.4fr;
  gap: 48px; margin-bottom: 44px;
}
.footer-note { font-size: .87rem; color: var(--muted-2); margin-top: 12px; max-width: 300px; }

.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 3px;
}
.footer-col a { font-size: .89rem; color: var(--muted); transition: color .2s; cursor: pointer; }
.footer-col a:hover { color: var(--cyan); }

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.footer-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--muted-2);
}

/* ---------- Warenkorb-Drawer ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .76);
  backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.drawer-backdrop.on { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(410px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border-left: 1px solid var(--line-2);
  box-shadow: -24px 0 70px rgba(0,0,0,.6);
  transform: translateX(102%);
  transition: transform .38s var(--ease);
}
.drawer.on { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 { font-size: var(--t-h3); }

.drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }

.empty { text-align: center; padding: 60px 12px; color: var(--muted-2); }
.empty svg { width: 42px; height: 42px; margin: 0 auto 14px; opacity: .35; }
.empty p { font-size: .9rem; }

.line-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.line-item:last-child { border-bottom: 0; }
.li-main { flex: 1; min-width: 0; }
.li-name { font-size: .92rem; font-weight: 600; }
.li-variant { font-size: .78rem; color: var(--muted-2); margin-top: 1px; }
.li-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: .92rem; font-weight: 700; color: var(--cyan);
  margin-top: 7px;
}
.qty { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.qty button {
  width: 27px; height: 27px;
  display: grid; place-items: center;
  font-size: 1rem; color: var(--muted);
  transition: color .2s, background .2s;
}
.qty button:hover { color: var(--cyan); background: var(--surface-2); }
.qty span { min-width: 24px; text-align: center; font-size: .84rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.drawer-foot { padding: 20px 22px; border-top: 1px solid var(--line); background: rgba(0,0,0,.5); }

.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: .78rem; color: var(--muted-2); margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 11px 14px;
  font-size: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--muted-2); }
.field input:focus { border-color: var(--cyan); box-shadow: var(--glow-sm); }

.total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.total-row span { font-size: .88rem; color: var(--muted); }
.total-row strong { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; color: var(--cyan); text-shadow: var(--glow-sm); }
.total-note { font-size: .73rem; color: var(--muted-2); margin-bottom: 16px; }

.drawer-error { font-size: .82rem; color: #ff7a90; margin-top: 10px; min-height: 1em; }

/* ---------- Checkout-Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 16px; }
.modal.on { display: grid; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(7px); }
.modal-panel {
  position: relative;
  width: min(520px, 98vw);
  max-height: 92vh;
  background: #070809;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), var(--glow-lg);
  animation: pop .3s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(12px); } }
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  backdrop-filter: blur(8px);
}
.modal-close:hover { background: rgba(0,0,0,.75); color: var(--cyan); }
.modal-panel iframe { width: 100%; height: min(52rem, 88vh); border: 0; display: block; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 120;
  transform: translate(-50%, 130%);
  padding: 12px 22px;
  font-size: .88rem; font-weight: 500;
  background: rgba(7, 8, 9, .96);
  border: 1px solid var(--line-2);
  border-radius: 99px;
  box-shadow: var(--glow-md);
  pointer-events: none;
  white-space: nowrap;

  /* Nur zu verschieben reicht nicht: bei leerem Text ist der Toast so
     flach, dass 130 % seiner Höhe ihn nicht aus dem Bild tragen — ein
     Rest blieb als dunkler Balken am unteren Rand stehen. */
  opacity: 0;
  visibility: hidden;
  transition: transform .35s var(--ease), opacity .25s var(--ease), visibility .25s;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero > .wrap { max-width: var(--max); }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { margin-inline: auto; }
  .hero-sub { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  /* Auf schmalen Schirmen passt beides nicht in einen Bildschirm —
     lieber natürlich fließen lassen als quetschen. */
  .hero-screen { min-height: auto; }
  .hero-bot {
    min-height: 380px; height: 44vh;
    margin-right: 0; margin-top: 0;
    order: -1;
  }
  .bot-svg { width: min(72%, 300px); }
  .boot-hud { left: 50%; transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vouch-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 480px; }
  .header-bar { padding-left: 18px; position: relative; }
  .icon-pill { display: none; }
  .hero-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }

  /* Absolut statt fixed: die Capsule hat backdrop-filter und ist damit
     Containing Block für fixed-Kinder — top/left würden sonst gegen die
     Capsule statt gegen den Viewport rechnen. Die negativen Insets
     heben das Innenpadding der Capsule wieder auf. */
  .nav {
    position: absolute; top: calc(100% + 12px); left: -18px; right: -10px;
    flex-direction: column; gap: 0;
    padding: 12px 24px 20px;
    background: rgba(3,4,5,.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-130%);
    transition: transform .32s var(--ease);
    z-index: -1;
  }
  .nav.on { transform: translateY(0); }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .burger { display: flex; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: 74px; }
}

@media (max-width: 560px) {
  .cat-tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { aspect-ratio: 16 / 10; }
  .tile-name { font-size: 1.3rem; }
  .vouch-wall { grid-template-columns: minmax(0, 1fr); height: 420px; padding-inline: 18px; }
  .community-box { padding: 44px 22px; }
  .wrap { padding-inline: 18px; }
  .hero { padding-top: calc(var(--header-h) + 56px); }
  body.has-announce .hero { padding-top: calc(var(--header-h) + var(--announce-h, 40px) + 56px); }
  .grid { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .cta-box { padding: 44px 22px; }
  .footer-legal { flex-direction: column; gap: 6px; }
  .drawer { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  /* Laufende Bänder ganz anhalten statt in Millisekunden durchzurauschen */
  .marquee-track, .vouch-track { animation: none !important; }
  .bg-hex-glow { display: none; }
  .atmo-core, .atmo-ray { animation: none !important; }
  .cursor-dot, .cursor-glow { display: none; }
  .steps::after { display: none; }
  .pa { animation: none !important; }
  .ico-clock .hand-h, .ico-clock .hand-m { animation: none !important; }
  .vouch-wall { height: auto; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  /* Ohne Bewegung ist die zweite Hälfte nur eine Dopplung */
  .vouch-half + .vouch-half { display: none; }
  .asst-panel { transition: none !important; }
  .asst-launch::after { animation: none !important; }
  .promo-panel { transition: none !important; }
}


/* ============================================================
   RABATT-AKTION
   ============================================================ */

/* Nur ein Traeger fuers gemeinsame Ein- und Ausblenden — Knopf
   und Modal positionieren sich selbst. */
.promo { display: contents; }

/* ---------- Knopf unten links ---------- */
.promo-launch {
  position: fixed;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 75;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 11px var(--sp-4) 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(34, 233, 255, .17), rgba(10, 148, 180, .1)), #05080a;
  color: var(--text);
  font-size: var(--t-sm); font-weight: 500;
  cursor: pointer;
  box-shadow: var(--glow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.promo-launch svg { width: 18px; height: 18px; flex: none; color: var(--cyan); }
.promo-launch:hover  { transform: translateY(-2px); box-shadow: var(--glow-xl); }
.promo-launch:active { transform: translateY(0) scale(.97); }

/* ---------- Modal ---------- */
.promo-modal {
  position: fixed; inset: 0;
  /* Ueber dem Warenkorb (90), aber UNTER dem Checkout (100):
     ein Rabattfenster darf sich nie ueber einen laufenden
     Bezahlvorgang legen. */
  z-index: 95;
  display: grid; place-items: center;
  padding: var(--sp-4);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.promo.is-open .promo-modal { opacity: 1; visibility: visible; transition-delay: 0s; }

.promo-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .84);
  backdrop-filter: blur(6px);
}

.promo-panel {
  position: relative;
  width: min(740px, 100%);
  max-height: 92vh;
  /* Das Poster ist hochkant. Ohne Mindesthoehe wuerde die
     Bildspalte auf die Hoehe des Formulars zusammengedrueckt und
     vom Motiv bliebe ein Streifen. */
  min-height: min(470px, 88vh);
  overflow: hidden auto;
  display: grid;
  grid-template-columns: 270px 1fr;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8), var(--glow-md);
  transform: translateY(14px) scale(.97);
  transition: transform var(--dur) var(--ease);
}
.promo.is-open .promo-panel { transform: none; }

.promo-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  color: var(--muted);
  cursor: pointer;
  transition: var(--dur) var(--ease);
}
.promo-x svg { width: 15px; height: 15px; }
.promo-x:hover { color: var(--cyan); border-color: var(--line-2); }

/* ---------- Bildseite ---------- */
.promo-art {
  position: relative;
  overflow: hidden;
  background: #05080a;
}
.promo-art > img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
/* Nur eine schmale Kante zur Textseite. Das Poster bringt seinen
   eigenen Rahmen mit — ein breiter Verlauf wuerde ihn zumatschen. */
.promo-art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 82%, rgba(10, 13, 16, .7));
  pointer-events: none;
}

.promo-badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: rgba(5, 8, 10, .8);
  backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan);
}

/* ---------- Textseite ---------- */
.promo-body { padding: var(--sp-7) var(--sp-6); text-align: center; }

.promo-pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-2);
}
.promo-big {
  margin: 6px 0 2px;
  font-family: 'Archivo', 'Inter', sans-serif;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--cyan);
  text-shadow: var(--glow-md);
}
.promo-sub {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-size: var(--t-h3); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.promo-sub span:first-child { color: var(--cyan); }

.promo-lead {
  margin: var(--sp-3) auto var(--sp-5);
  max-width: 34ch;
  font-size: var(--t-sm); color: var(--muted);
}

.promo-form { display: grid; gap: var(--sp-3); }
.promo-form input {
  width: 100%; padding: 13px var(--sp-4);
  font: inherit; font-size: var(--t-sm);
  text-align: center;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.promo-form input::placeholder { color: var(--muted-2); }
.promo-form input:focus { border-color: var(--cyan); box-shadow: var(--glow-sm); }

/* Einwilligung: ohne Haken kein Absenden */
.promo-consent {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  text-align: left;
  font-size: .72rem; line-height: 1.5;
  color: var(--muted-2);
  cursor: pointer;
}
.promo-consent input {
  flex: none;
  width: 15px; height: 15px;
  margin-top: 2px;
  accent-color: var(--cyan);
  cursor: pointer;
}
.promo-consent:hover { color: var(--muted); }

.promo-err {
  min-height: 1.2em; margin-top: var(--sp-2);
  font-size: var(--t-xs); color: #ff7a90;
}

.promo-no {
  display: inline-block; margin-top: var(--sp-2);
  font-size: var(--t-sm); color: var(--muted-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.promo-no:hover { color: var(--text); }

.promo-priv { margin-top: var(--sp-4); font-size: .7rem; color: var(--muted-2); }

/* ---------- Ergebnis ---------- */
.promo-check { width: 42px; height: 42px; margin: 0 auto var(--sp-3); color: var(--cyan); }

.promo-done {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-size: var(--t-h3); font-weight: 700;
}

.promo-coderow {
  display: flex; align-items: stretch; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-3);
}
.promo-coderow code {
  flex: 1; min-width: 0;
  display: grid; place-items: center;
  padding: 13px var(--sp-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-lg); font-weight: 700;
  letter-spacing: .1em;
  color: var(--cyan);
  background: rgba(34, 233, 255, .08);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}
.promo-copy {
  flex: none; padding: 0 var(--sp-4);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: var(--dur) var(--ease);
}
.promo-copy:hover { border-color: var(--line-2); color: var(--cyan); }
.promo-copy.ok    { color: var(--cyan); border-color: var(--cyan); }

.promo-hint { font-size: var(--t-xs); color: var(--muted); }

/* ---------- Klein ---------- */
@media (max-width: 720px) {
  /* Das Bild wird zum Kopfbereich, sonst bleibt fuer den Text
     kaum Hoehe uebrig. Der Ausschnitt sitzt weiter oben, damit
     Maske und Schultern im Bild bleiben. */
  .promo-panel { grid-template-columns: 1fr; min-height: 0; }
  .promo-art   { height: 190px; }
  .promo-art > img  { object-position: center 22%; }
  .promo-art::after { background: linear-gradient(180deg, transparent 45%, rgba(10, 13, 16, .92)); }
  .promo-body  { padding: var(--sp-5) var(--sp-4) var(--sp-6); }

  .promo-launch { left: var(--sp-4); bottom: var(--sp-4); padding: 10px 14px 10px 12px; }
  /* Nebeneinander wuerden Rabattknopf und Assistent auf schmalen
     Schirmen kollidieren — hier bleibt nur das Symbol. */
  .promo-launch #promoLaunchText { display: none; }
}


/* ============================================================
   KI-ASSISTENT
   ============================================================ */

.asst {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  /* Ueber Header (60) und Banner (70), aber unter dem Warenkorb-
     Backdrop (80): oeffnet jemand den Warenkorb, wird das Widget
     mitabgedunkelt statt daraufzuliegen. */
  z-index: 75;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);

  /* Der Container ist so hoch wie das Panel. Ohne das hier wuerde
     sein unsichtbarer Kasten alle Klicks in der unteren rechten
     Ecke der Seite schlucken. */
  pointer-events: none;
}
.asst > * { pointer-events: auto; }

/* ---------- Startknopf ---------- */
.asst-launch {
  position: relative;
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #10262c, #05080a 70%);
  box-shadow: var(--glow-md), inset 0 1px 0 rgba(255, 255, 255, .06);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.asst-launch:hover  { transform: translateY(-2px) scale(1.04); box-shadow: var(--glow-xl); }
.asst-launch:active { transform: scale(.96); }

/* Langsam pulsierender Ring — zieht das Auge, ohne zu blinken */
.asst-launch::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(34, 233, 255, .4);
  animation: asstPulse 3.2s var(--ease) infinite;
  pointer-events: none;
}

@keyframes asstPulse {
  0%        { transform: scale(1);    opacity: .55; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

.asst-launch-logo { width: 30px; height: 30px; object-fit: contain; transition: var(--dur) var(--ease); }
.asst-launch-x    { width: 20px; height: 20px; position: absolute; opacity: 0; transform: rotate(-90deg); transition: var(--dur) var(--ease); }

/* Offen: Logo gegen ein X tauschen, Ring aus */
.asst.is-open .asst-launch-logo { opacity: 0; transform: scale(.6); }
.asst.is-open .asst-launch-x    { opacity: 1; transform: rotate(0); }
.asst.is-open .asst-launch::after { animation: none; opacity: 0; }

/* ---------- Panel ---------- */
.asst-panel {
  width: min(384px, calc(100vw - var(--sp-6)));
  height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7), var(--glow-md);

  /* Geschlossen: nicht anklickbar, aber im Baum — sonst ginge
     die Animation verloren und der Verlauf mit ihr. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  transform-origin: 100% 100%;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}

.asst.is-open .asst-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* ---------- Kopfzeile ---------- */
.asst-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(34, 233, 255, .09), transparent);
}

.asst-headtext { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.asst-headtext strong { font-size: var(--t-md); }
.asst-headtext span   { font-size: var(--t-xs); color: var(--muted); }

.asst-x {
  margin-left: auto;
  width: 30px; height: 30px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: var(--dur) var(--ease);
}
.asst-x svg { width: 14px; height: 14px; }
.asst-x:hover { color: var(--text); border-color: var(--line-2); }

/* ---------- Avatare ---------- */
.asst-av {
  width: 26px; height: 26px;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: #05080a;
  overflow: hidden;
}
.asst-av img { width: 15px; height: 15px; object-fit: contain; }
.asst-av-lg  { width: 34px; height: 34px; box-shadow: var(--glow-sm); }
.asst-av-lg img { width: 19px; height: 19px; }

/* ---------- Verlauf ---------- */
.asst-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;      /* kein Weiterscrollen der Seite */
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 233, 255, .3) transparent;
}
.asst-list::-webkit-scrollbar       { width: 6px; }
.asst-list::-webkit-scrollbar-thumb { background: rgba(34, 233, 255, .25); border-radius: 99px; }

.asst-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  animation: asstIn .22s var(--ease);
}
.asst-user { justify-content: flex-end; }

@keyframes asstIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.asst-bubble {
  max-width: 78%;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-2);
  font-size: var(--t-sm);
  line-height: 1.55;
  /* Modelltext kommt mit echten Umbruechen — die sollen bleiben */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.asst-bot  .asst-bubble { border-bottom-left-radius: var(--sp-1); }
.asst-user .asst-bubble {
  border-bottom-right-radius: var(--sp-1);
  border-color: var(--line-2);
  background: linear-gradient(135deg, rgba(34, 233, 255, .16), rgba(34, 233, 255, .06));
  color: var(--text);
}

.asst-fail .asst-bubble { border-color: rgba(255, 122, 144, .4); color: #ffb3c0; }

/* Tippanzeige */
.asst-typing .asst-bubble { display: flex; gap: 4px; padding: 14px var(--sp-3); }
.asst-typing i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: .35;
  animation: asstDot 1.2s var(--ease) infinite;
}
.asst-typing i:nth-child(2) { animation-delay: .16s; }
.asst-typing i:nth-child(3) { animation-delay: .32s; }

@keyframes asstDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

/* ---------- Vorschlaege ---------- */
.asst-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-3);
}
.asst-chips:empty { display: none; }

.asst-chip {
  padding: 6px 11px;
  border: 1px solid var(--line-2);
  border-radius: 99px;
  background: var(--surface);
  color: var(--cyan-soft);
  font-size: var(--t-xs);
  cursor: pointer;
  transition: var(--dur) var(--ease);
}
.asst-chip:hover { background: rgba(34, 233, 255, .12); box-shadow: var(--glow-sm); }

/* ---------- Eingabe ---------- */
.asst-form {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line);
}

.asst-form textarea {
  flex: 1;
  min-width: 0;
  height: 40px;
  max-height: 96px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
  line-height: 1.4;
  resize: none;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.asst-form textarea::placeholder { color: var(--muted-2); }
.asst-form textarea:focus { border-color: var(--line-2); box-shadow: var(--glow-sm); }

.asst-send {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border: none;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: #001015;
  cursor: pointer;
  transition: var(--dur) var(--ease);
}
.asst-send svg { width: 17px; height: 17px; }
.asst-send:hover:not(:disabled) { box-shadow: var(--glow-md); transform: translateY(-1px); }
.asst-send:disabled { opacity: .45; cursor: default; }

/* ---------- Klein ---------- */
@media (max-width: 520px) {
  .asst { right: var(--sp-4); bottom: var(--sp-4); }
  .asst-panel {
    width: calc(100vw - var(--sp-5));
    height: min(70vh, calc(100vh - 130px));
  }
}