/* =========================================================================
   lixe · Public Website (lixe.de)
   Farben & Typo = LIVE aus dem lixe-Backend  (/api/theme, Build 2026.07.27-354)
   Electric-Blue / Arctic · Font: Sora
   ========================================================================= */

/* ---- Sora (selbst gehostet, kein Google-Fonts-Hotlink → DSGVO-sauber) ---- */
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/sora-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/sora-700.woff2') format('woff2');
}

:root {
  /* Farben (kanonisch = Brand-Guide / Backend /api/theme) */
  --bg:            #05070A;   /* charcoal   */
  --surface:       #0D1522;   /* slate      */
  --card:          #0E1726;   /* card       */
  --surface-2:     #0E1726;
  --text:          #F5F7FA;   /* arctic white */
  --muted:         #A1AAB6;
  --disabled:      #68727F;
  --border:        rgba(245, 247, 250, 0.08);
  --border-strong: rgba(245, 247, 250, 0.15);

  /* Akzent = deep blue (Brand) */
  --accent:        #1561E6;
  --accent-rgb:    21, 97, 230;
  --accent-light:  #3E7DF0;
  --ice:           #57C8FF;
  --accent-dark:   #0F4CB8;
  --nebula-lavender: #9E90F2;  /* Backend design_frontend_accent (Lila) */

  /* Button (solid, aus Backend) */
  --btn-bg:        #1561E6;
  --btn-hover:     #2E74F0;
  --btn-press:     #0F4CB8;
  --btn-text:      #FFFFFF;

  /* Layout / Radien (aus Backend) */
  --col:           460px;
  --pad:           26px;
  --radius:        18px;   /* Felder/Buttons */
  --radius-card:   24px;   /* Karten         */

  --font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  justify-content: center;
}

/* ---- Vertikale Spalte (wirkt wie ein hochkant gehaltenes Smartphone) ----- */
.shell {
  width: 100%;
  max-width: var(--col);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  /* Gletscher-Schwaden ueber die ganze Seitenhoehe (scrollt mit, immer wieder mal) */
  background:
    radial-gradient(66% 11% at 16% 7%,   rgba(84, 144, 247, 0.22), transparent 66%),
    radial-gradient(60% 10% at 86% 18%,  rgba(48, 110, 228, 0.18), transparent 66%),
    radial-gradient(68% 12% at 10% 31%,  rgba(92, 152, 250, 0.22), transparent 66%),
    radial-gradient(58% 10% at 92% 45%,  rgba(48, 110, 228, 0.18), transparent 66%),
    radial-gradient(68% 12% at 14% 59%,  rgba(84, 144, 247, 0.22), transparent 66%),
    radial-gradient(58% 10% at 88% 71%,  rgba(52, 114, 230, 0.18), transparent 66%),
    radial-gradient(68% 12% at 12% 83%,  rgba(92, 152, 250, 0.21), transparent 66%),
    radial-gradient(60% 10% at 86% 95%,  rgba(52, 114, 230, 0.18), transparent 66%);
}
/* Kein Handyrahmen: der Eis-Hintergrund laeuft ueber die gesamte Seite,
   der Inhalt sitzt als zentrierte, lesbare Spalte darauf. */

/* ---- Hintergrund: blaues Eis / klarer Gletscher (dominant), Kino-Farbe kommt aus Postern -- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% -6%,  rgba(36, 108, 236, 0.24), transparent 60%),   /* Eis-Blau oben */
    radial-gradient(52% 34% at 6% 30%,   rgba(74, 138, 246, 0.16), transparent 62%),   /* Gletscher links */
    radial-gradient(50% 32% at 96% 55%,  rgba(90, 128, 244, 0.14), transparent 62%),   /* kuehl rechts */
    radial-gradient(40% 24% at 82% 20%,  rgba(150, 110, 255, 0.08), transparent 60%),   /* zarter Violett-Hauch */
    radial-gradient(64% 32% at 50% 110%, rgba(36, 108, 236, 0.14), transparent 62%);    /* Eis-Blau Fuss */
}
body::after {   /* wandernder klarer Eis-Schein */
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  left: 50%; top: 40%;
  width: 160vw; height: 160vw; max-width: 820px; max-height: 820px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 152, 248, 0.14), rgba(74, 138, 246, 0) 62%);
  filter: blur(28px); will-change: transform;
  animation: ambient 24s ease-in-out infinite;
}
@keyframes ambient {
  0%, 100% { transform: translate(-70%, -62%) scale(1); }
  50%      { transform: translate(-32%, -22%) scale(1.16); }
}

/* ===== Prozeduraler Eis-Hintergrund: lichtdurchflutetes Eis, blaue Schweissnaht ===== */
/* Reine CSS-Verlaeufe statt SVG-Filter (feTurbulence/feDisplacementMap wurden
   von Chrome/Safari je nach Plattform/GPU verschieden gerastert -> in Chrome zu
   hell). CSS-Verlaeufe rendern ueberall identisch. Feine Koernung gegen Banding. */
.icebg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 85% at 30% 18%, #16273F 0%, #0C1118 52%, #05070A 100%), #05070A; }
.ice-sheen { position: absolute; inset: -25%; will-change: transform; transform: translateZ(0);
  background: linear-gradient(122deg,
    rgba(0,0,0,0) 34%, rgba(63,134,184,0.14) 46%, rgba(188,214,234,0.16) 52%,
    rgba(30,76,158,0.13) 59%, rgba(0,0,0,0) 72%);
  filter: blur(26px); animation: iceA 42s ease-in-out infinite; }
.ice-deep  { position: absolute; inset: -25%; will-change: transform; transform: translateZ(0);
  background:
    radial-gradient(60% 45% at 62% 30%, rgba(63,134,184,0.10), rgba(0,0,0,0) 70%),
    radial-gradient(55% 40% at 30% 72%, rgba(30,76,158,0.10), rgba(0,0,0,0) 72%);
  filter: blur(34px); animation: iceB 58s ease-in-out infinite; }
.ice-grain { position: absolute; inset: 0; pointer-events: none;
  background-image: url(ice-grain.png); background-repeat: repeat; background-size: 96px 96px;
  mix-blend-mode: overlay; opacity: .55; }
.ice-spark { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.ice-spark.s1 { width:4px; height:4px; left:34%; top:30%; background: radial-gradient(circle,#F5F7FA,rgba(245,247,250,0) 70%); animation: iceSpark 22s ease-in-out infinite; }
.ice-spark.s2 { width:3px; height:3px; left:72%; top:52%; background: radial-gradient(circle,#D9E6F2,rgba(217,230,242,0) 70%); animation: iceSpark 27s ease-in-out infinite 4s; }
.ice-spark.s3 { width:5px; height:5px; left:56%; top:18%; background: radial-gradient(circle,#F5F7FA,rgba(245,247,250,0) 70%); animation: iceSpark 31s ease-in-out infinite 9s; }
.ice-scrim { position: absolute; inset: 0; background: rgba(5,7,10,.30); }
.ice-vignette { position: absolute; inset: 0; background: radial-gradient(130% 100% at 50% 40%, transparent 46%, rgba(5,7,10,.72) 100%); }
@keyframes iceA { 0%{transform:translate3d(0,0,0) scale(1.04)} 50%{transform:translate3d(-2%,1.2%,0) scale(1.09)} 100%{transform:translate3d(0,0,0) scale(1.04)} }
@keyframes iceB { 0%{transform:translate3d(0,0,0) scale(1.1)}  50%{transform:translate3d(2.4%,-1.4%,0) scale(1.03)} 100%{transform:translate3d(0,0,0) scale(1.1)} }
@keyframes iceSpark { 0%,100%{opacity:.10} 48%{opacity:.7} }

/* Das Eis liefert jetzt die Atmosphaere: Shell-Scroll-Glows aus, Farbwaesche daempfen */
.shell { background: transparent; }
body::before { opacity: .5; }
body::after  { opacity: .55; }
@media (prefers-reduced-motion: reduce) { .ice-sheen, .ice-deep, .ice-spark { animation: none; } }

/* ===== Galaxie-Hintergrund (Canvas): wummernder Nebel + weiche Sternenlichter ===== */
.icebg { display: none; }
body::before, body::after { display: none; }
.bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #04060B; }
.bgfx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hero-actions { margin-top: 24px; }

/* ---- Typografie ---------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.16; }
h2 { font-size: 27px; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.008em; }
p  { margin: 0; color: var(--muted); }
a  { color: var(--accent-light); text-decoration: none; }

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--accent-light);
  font-weight: 600;
  margin-bottom: 13px;
  display: block;
}
.lead  { color: #DCE1E8; font-size: 18px; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; line-height: 1.55; }

/* ---- Sektionen ----------------------------------------------------------- */
section { padding: 58px var(--pad); }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 22px; }

/* ---- Laser-Kapiteltrenner (horizontale Lichtlinie mit wanderndem Glow) ---- */
.section-line { position: relative; border-top: none; }
.section-line::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(88%, 680px); height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(124,191,255,0) 0%, rgba(150,205,255,.16) 14%,
    rgba(214,236,255,.42) 50%, rgba(150,205,255,.16) 86%, rgba(124,191,255,0) 100%);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px var(--pad) 34px;
  position: relative;
}
.hero-loop { width: min(80%, 320px); aspect-ratio: 1.74 / 1; display: block; margin: 0 auto 6px; }
/* Logo kommt fertig aus dem Backend (/brand/logo): kein Invert, kein Blend, kein Glow-Kasten. */
.hero-signet { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }

/* Logo-Reveal wie die App-Splashpage: aus dem Schwarz auftauchen, groesser werden und
   aus 20deg in die Ruhelage gleiten (Schwerelosigkeit). Einmalig beim Laden.
   backwards-Fill: kein Flash vorher, nach dem Lauf wieder ohne Transform (Screen-Blend aktiv). */
@keyframes lx-loop-reveal {
  0%   { opacity: 0; transform: scale(.60) rotate(20deg); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.hero-loop { animation: lx-loop-reveal 4.8s cubic-bezier(.22,.68,.24,1) .12s backwards; }
@media (prefers-reduced-motion: reduce) { .hero-loop { animation: none; } }

.wordmark {
  font-size: 42px; font-weight: 600;
  letter-spacing: 0.24em; padding-left: 0.24em; /* tracking_logo = Backend-Wert 0.24em */
  color: var(--text); line-height: 1; margin-top: 6px;
}
.hero-tagline { margin-top: 22px; font-size: 18.5px; color: #DCE1E8; max-width: 22em; }
.hero-sub { margin-top: 12px; font-size: 14.5px; color: var(--muted); max-width: 24em; }

.scroll-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 12.5px; letter-spacing: 0.06em;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: cueFloat 2.6s ease-in-out infinite;
}
.scroll-cue span.arrow { font-size: 15px; }
@keyframes cueFloat { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,6px);} }

/* =========================================================================
   KARTEN
   ========================================================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 22px 24px;
}
.card h3 { margin-bottom: 8px; }
.card .role-k {
  font-size: 13px; letter-spacing: 0.01em; color: var(--accent-light);
  font-weight: 600; margin-bottom: 11px; display: block;
}
.cards { display: grid; gap: 14px; }

.feature { display: flex; gap: 13px; align-items: flex-start; }
.feature .dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 9px; background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}
.feature .ft { flex: 1; }
.feature .ft b { color: var(--text); font-weight: 600; }
.feature .ft p { margin-top: 2px; font-size: 15px; }

.split { display: grid; gap: 14px; }
.split .path {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  display: flex; align-items: center; gap: 15px; color: var(--text);
  transition: border-color .2s ease, background .2s ease;
}
.split .path:hover { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.05); }
.split .path .idx {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--border-strong);
  color: var(--accent-light); font-weight: 600; font-size: 17px;
}
.split .path .pt b { display: block; font-weight: 600; font-size: 16px; }
.split .path .pt span { font-size: 14px; color: var(--muted); }
.split .path .chev { margin-left: auto; color: var(--muted); }

/* =========================================================================
   MEDIATHEK POSTER-REIHE (laufende Marquee, Kino-Look)
   ========================================================================= */
.rail-section { padding: 50px 0 54px; overflow: hidden; }
.rail-head { padding: 0 var(--pad); }
.rail { margin-top: 20px; position: relative;
  /* Randabblendung bg-unabhaengig: Cover laufen nach transparent aus (kein schwarzer Rand) */
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
}
.rail-track {
  display: flex; gap: 14px; width: max-content;
  padding: 6px var(--pad);
  animation: marquee 44s linear infinite;
}
.rail:hover .rail-track { animation-play-state: paused; }
.poster {
  flex: 0 0 auto; width: 158px; aspect-ratio: 2 / 3;
  border-radius: 16px; overflow: hidden; position: relative;
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 50px rgba(3, 8, 20, 0.40);
}
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster::after {   /* leichter Glanz oben, Kino-Anmutung */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 30%, transparent 78%, rgba(0,0,0,0.35));
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================================
   SZENARIEN  (prominent: nummeriert, groesser, erhaben)
   ========================================================================= */
.scenarios { display: grid; gap: 14px; margin-top: 6px; }
.scenario {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px 20px 22px;
  transition: border-color .2s ease, background .2s ease;
}
.scenario:hover { border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.04); }
.scenario-n {
  flex: 0 0 auto; min-width: 24px; padding-top: 3px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent);
}
.scenario-b b { display: block; color: var(--text); font-weight: 600; font-size: 18px; line-height: 1.25; margin-bottom: 6px; }
.scenario-b p { font-size: 15.5px; line-height: 1.55; }

/* =========================================================================
   SÄULEN ("Die App für ...") — vier große Karten
   ========================================================================= */
.pillars { display: grid; gap: 14px; margin-top: 6px; }
.pillar {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), var(--surface) 46%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 22px 24px;
  transition: border-color .2s ease;
}
.pillar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--ice), var(--accent) 55%, transparent);
  opacity: .75;
}
.pillar:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.pillar-k {
  display: block; font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-light); margin-bottom: 10px;
}
.pillar h3 {
  color: var(--text); font-size: 21px; line-height: 1.22;
  letter-spacing: -0.012em; margin-bottom: 9px;
}
.pillar p { font-size: 15.5px; line-height: 1.58; }

/* =========================================================================
   FAQ / Skeptiker-Fragen
   ========================================================================= */
.faq { display: grid; gap: 0; margin-top: 6px; }
.qa { border-top: 1px solid var(--border); padding: 17px 0; }
.qa:last-child { border-bottom: 1px solid var(--border); }
.qa h3 { color: var(--text); font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 7px; }
.qa p { font-size: 15.5px; line-height: 1.6; }

/* =========================================================================
   SCREENSHOT-KARUSSELL
   ========================================================================= */
.carousel { margin-top: 10px; }
.carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 76%;
  scroll-snap-align: center;
  margin: 0;
}
.slide:first-child { margin-left: 12%; }   /* erlaubt Zentrieren der ersten */
.slide:last-child  { margin-right: 12%; }
.slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 26px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 52px rgba(3, 8, 20, 0.40);
  background: transparent;
}
.dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.dots button {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--border-strong); cursor: pointer;
  transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.dots button.active { background: var(--accent); width: 20px; border-radius: 4px; }

/* =========================================================================
   BUTTONS  ·  solid electric blue (Backend) + Lichtschein-Glow
   ========================================================================= */
.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.actions.row { flex-direction: row; flex-wrap: wrap; justify-content: center; }

/* Primaerbutton "Partner werden": Milchglas in Marken-Blau, kein wandernder Schein */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.30);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
          backdrop-filter: blur(16px) saturate(1.5);
  color: var(--btn-text);
  font: inherit; font-weight: 600; font-size: 16px; letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 30px rgba(var(--accent-rgb), 0.26);
  transition: background .2s ease, box-shadow .25s ease, transform .12s ease;
}
.btn:hover { background: rgba(var(--accent-rgb), 0.42); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 36px rgba(var(--accent-rgb), 0.36); }
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

/* Sekundaerbuttons als Milchglas; bei zwei nebeneinander invertiert (dunkel + hell), zueinander passend */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--radius);
  background: rgba(13, 21, 34, 0.42);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(3,8,20,0.35);
  color: var(--text); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
  text-align: center;
}
.btn-ghost small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-top: 1px; }
/* Zweiter Button im Paar: helles Milchglas (invertiert) */
.actions.row .btn-ghost:nth-child(even) {
  background: rgba(245, 247, 250, 0.82);
  border-color: rgba(255,255,255,0.65);
  color: #0D1522;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 24px rgba(3,8,20,0.30);
}
.actions.row .btn-ghost:nth-child(even) small { color: rgba(13,21,34,0.62); }
.btn-ghost:hover { background: rgba(var(--accent-rgb), 0.16); border-color: rgba(255,255,255,0.30); }
.actions.row .btn-ghost:nth-child(even):hover { background: rgba(245, 247, 250, 0.92); }
.btn-ghost:active { transform: scale(0.985); }
.btn-ghost:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

.link-accent { color: var(--accent-light); font-weight: 600; }
.link-accent:hover { text-decoration: underline; }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer { padding: 40px var(--pad) 46px; border-top: 1px solid var(--border); text-align: center; }
.footmark { font-size: 20px; font-weight: 600; letter-spacing: 0.24em; padding-left: 0.24em; margin-bottom: 6px; }
.footlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0 18px; }
.footlinks a { color: var(--text); opacity: 0.72; font-size: 14px; font-weight: 500; }
.footlinks a:hover { opacity: 1; }
.version { font-size: 12.5px; color: var(--muted); }
.copyright { font-size: 12.5px; color: var(--disabled); margin-top: 6px; }

/* =========================================================================
   LEGAL-SEITEN
   ========================================================================= */
.legal { padding: 40px var(--pad) 64px; }
.legal .back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.legal .back:hover { color: var(--text); }
.legal h1 { font-size: 30px; margin-bottom: 8px; }
.legal h2 { font-size: 19px; margin: 30px 0 10px; font-weight: 600; }
.legal p, .legal li { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.legal p + p { margin-top: 10px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal li { margin: 4px 0; }
.legal .updated { color: var(--disabled); font-size: 13px; margin-top: 4px; }

/* =========================================================================
   GROSSE ZAHL / STAT
   ========================================================================= */
.bignum {
  font-size: 92px; font-weight: 700; line-height: 0.86; letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--accent-light), var(--accent-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =========================================================================
   MONEY-PANEL  (Bock auf Geld verdienen)
   ========================================================================= */
.money-panel {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), var(--surface) 42%);
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-radius: var(--radius-card);
  padding: 24px 20px 26px;
  box-shadow: 0 22px 60px rgba(var(--accent-rgb), 0.16);
}
.money-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.money-icon {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; font-size: 27px; font-weight: 700; color: #fff;
  background: linear-gradient(160deg, var(--accent-light), var(--accent-dark));
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.5);
}
.money-head h3 { font-size: 20px; }

/* =========================================================================
   VERTRAUEN
   ========================================================================= */
.trust-cards { display: grid; gap: 14px; margin-top: 6px; }
.trust-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 20px;
  display: flex; gap: 16px; align-items: center;
}
.trust-ic {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.trust-ic svg { width: 24px; height: 24px; }
.trust-card .bignum { flex: 0 0 auto; font-size: 58px; min-width: 62px; text-align: center; }
.trust-card h3 { font-size: 17px; margin-bottom: 5px; }
.trust-card p { font-size: 15px; line-height: 1.5; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.badge {
  font-size: 12.5px; font-weight: 600; color: #C7CCD4;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 13px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.02);
}
.badge svg { width: 13px; height: 13px; color: var(--accent-light); }

/* =========================================================================
   BEISPIEL-FORMATE (Raster mit Poster/Still-Platzhaltern)
   ========================================================================= */
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.format {
  position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-strong);
  background-size: cover; background-position: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.format.wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.format::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.74)); }
.format .format-label { position: absolute; left: 13px; bottom: 12px; z-index: 2; font-weight: 600; font-size: 15px; color: #fff; }

/* =========================================================================
   VERSPRECHEN
   ========================================================================= */
.promise { text-align: center; }
.promise .lead { max-width: 24em; margin-left: auto; margin-right: auto; }

/* =========================================================================
   EISIGE FLAECHE / KASTEN  (Glow wie das Logo: kuehles Silber-Blau)
   ========================================================================= */
.icy {
  position: relative; overflow: hidden;
  padding: 28px 24px 30px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(150, 200, 255, 0.28);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 44%), var(--surface);
  box-shadow: 0 24px 64px rgba(60, 130, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.icy::before {   /* weiches blaues Eislicht unten links, atmet (kein harter Fleck) */
  content: ""; position: absolute; left: -12%; bottom: -35%; z-index: 0; pointer-events: none;
  width: 88%; height: 100%;
  background: radial-gradient(closest-side, rgba(120, 200, 255, 0.32), rgba(90, 165, 255, 0.10) 55%, transparent 76%);
  filter: blur(8px);
  animation: icyBreath 8s ease-in-out infinite;
}
.icy::after {   /* zarter Gletscher-Glanz oben rechts */
  content: ""; position: absolute; right: -10%; top: -30%; z-index: 0; pointer-events: none;
  width: 60%; height: 72%;
  background: radial-gradient(closest-side, rgba(165, 215, 255, 0.14), transparent 72%);
  filter: blur(8px);
}
.icy > * { position: relative; z-index: 1; }
@keyframes icyBreath { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* =========================================================================
   STAGGER-ANIMATION fuer Listen/Karten
   ========================================================================= */
.animate-list > * { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in .animate-list > * { opacity: 1; transform: none; }
.reveal.in .animate-list > *:nth-child(1) { transition-delay: .04s; }
.reveal.in .animate-list > *:nth-child(2) { transition-delay: .12s; }
.reveal.in .animate-list > *:nth-child(3) { transition-delay: .20s; }
.reveal.in .animate-list > *:nth-child(4) { transition-delay: .28s; }
.reveal.in .animate-list > *:nth-child(5) { transition-delay: .36s; }
.reveal.in .animate-list > *:nth-child(6) { transition-delay: .44s; }

/* =========================================================================
   Scroll-Reveal & Reduced Motion
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn::after, .scroll-cue, body::after, .rail-track, .icy::before { animation: none; }
  .reveal, .animate-list > * { opacity: 1; transform: none; transition: none; }
}

/* Wanderndes Licht auf dem Signet (faehrt die liegende Acht ab) */
.hero-loop { position: relative; }
/* Lichttanz: heller Schein wandert ueber die Logo-Form. Maske = Backend-Logo
   (als Data-URL vom Script gesetzt). Bleibt unsichtbar, bis die Maske steht -> kein Kasten. */
.hero-sheen { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; mix-blend-mode:screen;
  -webkit-mask: var(--hero-logo) center/contain no-repeat; mask: var(--hero-logo) center/contain no-repeat;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%);
  background-size: 260% 100%; animation: heroSheen 3.4s ease-in-out infinite; }
.hero-sheen.ready { opacity: 1; }
@keyframes heroSheen { 0% { background-position: 135% 0; } 100% { background-position: -35% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-sheen { display:none; } }