/* ============================================================
   Reward Rangers — Marketing-Webseite
   Design-System „Ranger-Abenteuerwelt" — 1:1 aus der App portiert
   (src/style.css + tailwind.config.js + usePageTheme.js)
   Light = „Sonnentag" (warmes Creme) · Dark = „Nachtlager" (Nachtblau)
   ============================================================ */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Flächen (Sonnentag) */
  --surface-primary: #ffffff;
  --surface-secondary: #fbf6ec;
  --surface-tertiary: #f3ecdd;
  --surface-elevated: #ffffff;
  --surface-overlay: #eae1ce;
  --text-primary: #3d3a33;
  --text-secondary: #6b6558;
  --text-tertiary: #8c857a;
  --border-primary: #ede4d3;
  --border-secondary: #dcd2bd;
  --border-light: #f5efe2;
  --shadow-color: rgba(93, 64, 20, 0.08);
  --shadow-hover-color: rgba(93, 64, 20, 0.14);
  --btn-secondary-bg: #f3ecdd;
  --btn-secondary-text: #6b6558;
  --focus-ring: #6d28d9;
  --device-frame: #1c2440;

  /* Akzente */
  --star-gold: #ffc93c;
  --star-gold-deep: #f5a623;
  --star-gold-soft: #fff3d1;
  --rr-success: #22c55e;
  --rr-success-soft: #e5f8ec;
  --rr-pending: #f9a825;
  --rr-pending-soft: #fff4dc;
  --rr-danger: #f45b5b;
  --rr-danger-soft: #feecec;
  --rr-info: #38bdf8;
  --rr-info-soft: #e3f5fe;

  /* Marke (= Missionen-Gruen) */
  --brand: #10b981;
  --brand-strong: #059669;
  --brand-deep: #047857;
  --brand-soft: #e7f8f0;

  /* Welt-Farben (usePageTheme.js) — Default: Missionen */
  --page-primary: #10b981;
  --page-primary-hover: #059669;
  --page-primary-active: #047857;
  --page-primary-soft: #e7f8f0;
  --page-primary-shadow: rgba(16, 185, 129, 0.25);
  --page-grad-from: #10b981;
  --page-grad-to: #059669;

  /* Form & Layout */
  --radius: 1.25rem;      /* rounded-rr */
  --radius-lg: 1.75rem;   /* rounded-rr-lg */
  --radius-pill: 9999px;
  --container: 1120px;
  --nav-h: 72px;
  --font-display: 'Baloo 2 Variable', 'Baloo 2', system-ui, sans-serif;
  --font-sans: 'Nunito Variable', 'Nunito', system-ui, -apple-system, sans-serif;
}

/* Nachtlager (explizit per Klasse — wie in der App html.dark) */
html.dark {
  --surface-primary: #1c2440;
  --surface-secondary: #131a2e;
  --surface-tertiary: #232c4c;
  --surface-elevated: #2a3457;
  --surface-overlay: #0b1022;
  --text-primary: #f4f0e4;
  --text-secondary: #c6cce0;
  --text-tertiary: #97a0bc;
  --border-primary: #2c3557;
  --border-secondary: #3b4570;
  --border-light: #232c4c;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-hover-color: rgba(0, 0, 0, 0.55);
  --btn-secondary-bg: #232c4c;
  --btn-secondary-text: #c6cce0;
  --focus-ring: #fbbf24;
  --device-frame: #0b1022;

  --star-gold-soft: rgba(255, 201, 60, 0.16);
  --rr-success-soft: rgba(34, 197, 94, 0.16);
  --rr-pending-soft: rgba(249, 168, 37, 0.16);
  --rr-danger-soft: rgba(244, 91, 91, 0.16);
  --rr-info-soft: rgba(56, 189, 248, 0.16);

  --brand: #34d399;
  --brand-soft: rgba(16, 185, 129, 0.15);

  --page-primary: #34d399;
  --page-primary-soft: rgba(16, 185, 129, 0.15);
}

/* Ohne JS: Systempraeferenz respektieren */
@media (prefers-color-scheme: dark) {
  html.no-js {
    --surface-primary: #1c2440;
    --surface-secondary: #131a2e;
    --surface-tertiary: #232c4c;
    --surface-elevated: #2a3457;
    --surface-overlay: #0b1022;
    --text-primary: #f4f0e4;
    --text-secondary: #c6cce0;
    --text-tertiary: #97a0bc;
    --border-primary: #2c3557;
    --border-secondary: #3b4570;
    --border-light: #232c4c;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-hover-color: rgba(0, 0, 0, 0.55);
    --btn-secondary-bg: #232c4c;
    --btn-secondary-text: #c6cce0;
    --focus-ring: #fbbf24;
    --device-frame: #0b1022;
    --star-gold-soft: rgba(255, 201, 60, 0.16);
    --rr-success-soft: rgba(34, 197, 94, 0.16);
    --rr-pending-soft: rgba(249, 168, 37, 0.16);
    --rr-danger-soft: rgba(244, 91, 91, 0.16);
    --rr-info-soft: rgba(56, 189, 248, 0.16);
    --brand: #34d399;
    --brand-soft: rgba(16, 185, 129, 0.15);
    --page-primary: #34d399;
    --page-primary-soft: rgba(16, 185, 129, 0.15);
  }
}

/* Welt-Scopes: Sektionen/Karten faerben sich wie die App-Slides */
.theme-missions { --page-primary: #10b981; --page-primary-hover: #059669; --page-primary-active: #047857; --page-primary-soft: #e7f8f0; --page-primary-shadow: rgba(16,185,129,.25); --page-grad-from: #10b981; --page-grad-to: #059669; }
.theme-rewards  { --page-primary: #f59e0b; --page-primary-hover: #d97706; --page-primary-active: #b45309; --page-primary-soft: #fff6e5; --page-primary-shadow: rgba(245,158,11,.25); --page-grad-from: #fbbf24; --page-grad-to: #f59e0b; }
.theme-honor    { --page-primary: #8b5cf6; --page-primary-hover: #7c3aed; --page-primary-active: #6d28d9; --page-primary-soft: #f2edfe; --page-primary-shadow: rgba(139,92,246,.25); --page-grad-from: #a78bfa; --page-grad-to: #7c3aed; }
.theme-plan     { --page-primary: #0ea5e9; --page-primary-hover: #0284c7; --page-primary-active: #0369a1; --page-primary-soft: #e3f5fe; --page-primary-shadow: rgba(14,165,233,.25); --page-grad-from: #38bdf8; --page-grad-to: #0284c7; }
.theme-chat     { --page-primary: #ec4899; --page-primary-hover: #db2777; --page-primary-active: #be185d; --page-primary-soft: #fce7f3; --page-primary-shadow: rgba(236,72,153,.25); --page-grad-from: #f472b6; --page-grad-to: #db2777; }
.theme-camp     { --page-primary: #14b8a6; --page-primary-hover: #0d9488; --page-primary-active: #0f766e; --page-primary-soft: #e4f7f4; --page-primary-shadow: rgba(20,184,166,.25); --page-grad-from: #2dd4bf; --page-grad-to: #0d9488; }
html.dark .theme-missions { --page-primary: #34d399; --page-primary-soft: rgba(16,185,129,.15); }
html.dark .theme-rewards  { --page-primary: #fbbf24; --page-primary-soft: rgba(245,158,11,.15); }
html.dark .theme-honor    { --page-primary: #a78bfa; --page-primary-soft: rgba(139,92,246,.15); }
html.dark .theme-plan     { --page-primary: #38bdf8; --page-primary-soft: rgba(14,165,233,.15); }
html.dark .theme-chat     { --page-primary: #f472b6; --page-primary-soft: rgba(236,72,153,.15); }
html.dark .theme-camp     { --page-primary: #2dd4bf; --page-primary-soft: rgba(20,184,166,.15); }
@media (prefers-color-scheme: dark) {
  html.no-js .theme-missions { --page-primary: #34d399; --page-primary-soft: rgba(16,185,129,.15); }
  html.no-js .theme-rewards  { --page-primary: #fbbf24; --page-primary-soft: rgba(245,158,11,.15); }
  html.no-js .theme-honor    { --page-primary: #a78bfa; --page-primary-soft: rgba(139,92,246,.15); }
  html.no-js .theme-plan     { --page-primary: #38bdf8; --page-primary-soft: rgba(14,165,233,.15); }
  html.no-js .theme-chat     { --page-primary: #f472b6; --page-primary-soft: rgba(236,72,153,.15); }
  html.no-js .theme-camp     { --page-primary: #2dd4bf; --page-primary-soft: rgba(20,184,166,.15); }
}

/* ---------- 2. Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--surface-secondary);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--page-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 7px #111827;
}
::selection { background: var(--star-gold-soft); color: var(--text-primary); }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text-primary);
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.35rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

.muted { color: var(--text-secondary); }
.tiny { font-size: 0.85rem; color: var(--text-secondary); }
.center { text-align: center; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--surface-primary); color: var(--text-primary);
  padding: 10px 18px; border-radius: var(--radius-pill); border: 2px solid var(--border-primary);
}
.skip-link:focus { left: 8px; }

/* ---------- 3. Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(40px, 6vw, 72px); }
.section-tight { padding-block: clamp(36px, 6vw, 64px); }
.section-head { max-width: 720px; margin: 0 auto clamp(28px, 5vw, 52px); text-align: center; }
.section-head p { color: var(--text-secondary); font-size: 1.06rem; }

.grid { display: grid; gap: clamp(16px, 2.6vw, 26px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split > .split-media { order: 2; }
.split.flip > .split-media { order: -1; }

/* ---------- 3b. Sektions-Rhythmus: Baender (PetiForm-Muster mit RR-Tokens) ---------- */
/* Baender heben Sektionen auf --surface-primary und trennen sie mit Hairlines;
   Karten/Chips/Accordions invertieren darin auf --surface-secondary, damit der
   Karte/Flaeche-Kontrast erhalten bleibt. Regel: nie zwei Baender direkt
   hintereinander (Rhythmus bg -> band -> bg). .band-tint toent die Flaeche
   zart in der Welt-Farbe der Sektion (nutzt die theme-*-Variablen). */
.band {
  background: var(--surface-primary);
  border-block: 2px solid var(--border-light);
}
.band-tint {
  background: var(--surface-primary);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--page-primary) 8%, var(--surface-primary)),
    var(--surface-primary)
  );
  border-block: 2px solid color-mix(in srgb, var(--page-primary) 22%, transparent);
}
html.dark .band-tint {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--page-primary) 13%, var(--surface-primary)),
    var(--surface-primary)
  );
}
.band .card, .band-tint .card { background: var(--surface-secondary); }
.band .chip, .band-tint .chip { background: var(--surface-secondary); }
.band details.qa, .band-tint details.qa { background: var(--surface-secondary); }

/* Anker-Spruenge duerfen nicht unter dem Sticky-Header landen */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* Fliesstext-Links immer unterstreichen (Farbe allein reicht nicht, WCAG 1.4.1) */
main p a:not(.btn):not(.store-badge), main li a:not(.btn):not(.store-badge) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 4. Typo-Extras ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  color: var(--page-primary-active);
  background: var(--page-primary-soft);
  padding: 6px 16px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
html.dark .eyebrow { color: var(--page-primary); }
.rr-icon {
  display: inline-block; width: 1.25em; height: 1.25em; flex: none;
  object-fit: contain; vertical-align: -0.24em; pointer-events: none;
}
.eyebrow .rr-icon, .chip .rr-icon, summary .rr-icon {
  width: 1.35em; height: 1.35em;
}
/* Piktogramm im Knopf DOPPELT so gross (1.35em -> 2.7em), ohne dass der Knopf
   waechst: die negative Blockmarge zieht die AEUSSERE Hoehe auf die frueheren
   1.35em zurueck (2.7 - 2 x 0.675), das Bild selbst ragt nur in die Innenkante.
   Es bleibt dabei INNERHALB des Knopfes - der Ueberstand von 0.675em liegt
   unter der kleinsten senkrechten Innenkante (.btn 0.7rem = 0.7em, .btn-lg
   0.95rem = 0.85em bei 1.12rem Schrift). Muster wie details.qa summary
   .rr-icon.
   Betroffen sind sechs Knoepfe der ganzen Webseite: zwei auf der
   Android-Test-Seite, drei auf der Kontaktseite, einer in der FAQ. */
.btn .rr-icon {
  width: 2.7em; height: 2.7em; margin-block: -0.675em;
}
.lead { font-size: clamp(1.05rem, 1.9vw, 1.22rem); color: var(--text-secondary); max-width: 56ch; }
.center .lead { margin-inline: auto; }

/* Hervorgehobenes Wort (Markenfarbe wie der Header-Schriftzug, --brand ist dark-aware) */
.hl { color: var(--brand-deep); }
html.dark .hl { color: var(--brand); }

/* ---------- 5. Buttons (Chunky = Interaktions-Signature der App) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  padding: 0.7rem 1.5rem; text-decoration: none !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
}
.btn-chunky {
  /* eine Stufe dunkler als --page-primary: weisser Button-Text erreicht so
     die 3:1-Grenze fuer grossen/fetten Text (WCAG AA) */
  background: var(--page-primary-hover); color: #ffffff !important;
  box-shadow: 0 4px 0 var(--page-primary-active), 0 8px 20px -6px var(--page-primary-shadow);
}
.btn-chunky:hover { background: var(--page-primary-active); }
.btn-chunky:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--page-primary-active), 0 4px 10px -4px var(--page-primary-shadow); }
/* Amber bleibt auch dunkler zu hell fuer Weiss -> Gold-Button mit dunkler
   Schrift (wie die Schritt-Nummern der App) */
.theme-rewards .btn-chunky { color: #3d3a33 !important; }
.btn-chunky-secondary {
  background: var(--btn-secondary-bg); color: var(--btn-secondary-text) !important;
  box-shadow: 0 4px 0 var(--border-secondary);
}
.btn-chunky-secondary:hover { filter: brightness(1.02); }
.btn-chunky-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border-secondary); }
.btn-lg { padding: 0.95rem 2rem; font-size: 1.12rem; }
.btn-sm { padding: 0.45rem 1.05rem; font-size: 0.92rem; }
/* Halbe Innenkante LINKS, sobald ein Piktogramm vorne steht. Die Kante ist auf
   Schrift bemessen; ein doppelt so grosses Bild daneben laesst sie wie ein Loch
   aussehen, und der Knopf wirkt vorne ausgefranst. Halbiert stimmt das
   Verhaeltnis wieder - und der Knopf wird dabei sogar wieder schmaler, statt
   durch das groessere Bild zu wachsen.
   Nur mit Bild (:has), denn ohne Bild saesse die Schrift aus der Mitte.
   Die Werte sind die Haelfte der jeweiligen Regel darueber: 1,5 -> 0,75rem
   und 2 -> 1rem. Die Reihenfolge muss so bleiben: beide Regeln wiegen gleich
   schwer, es entscheidet die spaetere.
   Fuer .btn-sm steht hier bewusst NICHTS: kein kleiner Knopf der Webseite
   traegt ein Piktogramm. Die Zeile waere heute wirkungslos - und damit eine
   Behauptung ueber einen Fall, den niemand gemessen hat. */
.btn:has(.rr-icon) { padding-inline-start: 0.75rem; }
.btn-lg:has(.rr-icon) { padding-inline-start: 1rem; }

/* Store-Badges: URLs werden zentral in config/stores.php freigeschaltet */
.store-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: #1c2440; color: #ffffff !important; text-decoration: none !important;
  border-radius: 16px; padding: 10px 20px 10px 16px;
  box-shadow: 0 4px 0 #0b1022, 0 8px 20px -6px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: 2px solid rgba(255, 255, 255, 0.12);
  min-height: 64px; font: inherit; text-align: initial;
}
.store-badge[href]:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #0b1022, 0 12px 24px -8px rgba(0, 0, 0, 0.42); }
.store-badge:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b1022; }
.store-badge .sb-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; }
.store-badge .sb-icon .rr-icon { width: 34px; height: 34px; }
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge .sb-small { font-size: 0.68rem; opacity: 0.85; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.store-badge .sb-big { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; }
.store-badge.soon { position: relative; opacity: 0.9; cursor: not-allowed; user-select: none; }
.store-badge.soon::before {
  content: ""; position: absolute; z-index: 2; left: 10px; right: 10px; top: 50%; height: 4px;
  border: 1px solid rgba(74, 51, 13, 0.45); border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #f5a623, var(--star-gold), #f5a623);
  box-shadow: 0 2px 0 rgba(11, 16, 34, 0.62); transform: rotate(-6deg);
}
.store-badge .store-status {
  position: absolute; top: -10px; right: -8px;
  background: var(--star-gold); color: #3d3a33;
  font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
  padding: 2px 10px; border-radius: var(--radius-pill);
  z-index: 3; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transform: rotate(3deg);
  white-space: nowrap;
}
.store-badge.soon:active { transform: none; box-shadow: 0 4px 0 #0b1022, 0 8px 20px -6px rgba(0, 0, 0, 0.35); }
.store-availability-note {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin: 18px auto 0 !important; padding: 8px 13px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(8, 30, 25, 0.2);
  color: #ffffff; font-size: 0.86rem; font-weight: 800;
}
.store-availability-note .rr-icon { width: 24px; height: 24px; }
html.dark .store-badge { background: #2a3457; }

/* Offizielle Store-Grafiken im Block "Zur App"
   (templates/partials/store-picker.php). Sie bringen ihre eigene Gestalt mit -
   schwarzes Feld, heller Rand, runde Ecken - und stehen deshalb FREI und nicht
   in der dunklen Kachel von .store-badge; die gilt weiter fuer die Schalter der
   Auth-Seite. Die Grafiken selbst werden nie eingefaerbt oder beschnitten, das
   verlangen beide Stores. */
.store-badges-art { align-items: flex-start; gap: 16px 22px; }
.store-art {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: #ffffff; text-decoration: none !important;
  cursor: pointer; transition: transform 0.1s ease;
}
/* Die sichtbare Groesse macht die HOEHE, nicht die Breite: die zwoelf
   Sprachfassungen sind zwischen 328 und 390 Punkte breit, ueber die Breite
   gesteuert stuenden die beiden Schalter unterschiedlich hoch nebeneinander. */
.store-art-img {
  display: block; height: 58px; width: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.34));
}
.store-art[href]:hover { transform: translateY(-2px); }
.store-art[href]:active { transform: translateY(2px); }
.store-art-note {
  display: inline-block; max-width: 15rem;
  background: var(--star-gold); color: #3d3a33;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  line-height: 1.25; text-align: center; text-wrap: balance;
  padding: 4px 12px; border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.store-art.soon { cursor: not-allowed; }
.store-art.soon .store-art-img { filter: grayscale(1); opacity: 0.62; }
/* Der gesperrte Schalter traegt den ruhigen Hinweis (gleiche Machart wie
   .store-availability-note), damit das Gold allein dem Schalter gehoert, der
   wirklich etwas tut. */
.store-art.soon .store-art-note {
  background: rgba(8, 30, 25, 0.2); color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32); box-shadow: none;
}

/* ---------- 6. Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface-primary);
  background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--border-light);
}
.nav { display: flex; align-items: center; gap: 14px; min-height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; margin-right: auto; }
.brand-icon { width: 38px; height: 38px; border-radius: 12px; }
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1;
  color: var(--brand-deep); white-space: nowrap;
}
html.dark .brand-name { color: var(--brand); }
.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-menu a:not(.btn) {
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
  color: var(--text-secondary); text-decoration: none !important;
  padding: 8px 14px; border-radius: var(--radius-pill);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-menu a:not(.btn):hover { color: var(--page-primary); background: var(--page-primary-soft); }
.nav-menu a.active { color: var(--page-primary); background: var(--page-primary-soft); }
.nav-menu .btn { margin-left: 8px; }

.nav-toggle {
  display: none; background: var(--surface-tertiary); border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 14px; color: var(--text-primary);
  align-items: center; justify-content: center;
}
.nav-toggle .icon { width: 27px; height: 27px; object-fit: contain; }
.nav-toggle .icon-close { display: none; }
.site-header.open .nav-toggle .icon-menu { display: none; }
.site-header.open .nav-toggle .icon-close { display: block; }
.nav-toggle, .theme-toggle, .language-switch { flex: 0 0 auto; }

/* Theme-Toggle (auto → hell → dunkel) */
.theme-toggle {
  display: none; background: var(--surface-tertiary); border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 14px; color: var(--text-primary);
  align-items: center; justify-content: center; position: relative;
}
html.js .theme-toggle { display: inline-flex; }
.theme-toggle .ti { width: 27px; height: 27px; object-fit: contain; display: none; }
.theme-toggle[data-state='auto'] .ti-auto { display: block; }
.theme-toggle[data-state='light'] .ti-light { display: block; }
.theme-toggle[data-state='dark'] .ti-dark { display: block; }

/* Sprachumschalter */
.language-switch { position: relative; }
.language-switch summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding-inline: 12px;
  background: var(--surface-tertiary); border-radius: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--text-primary);
}
.language-switch summary::-webkit-details-marker { display: none; }
.language-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  background: var(--surface-elevated); border: 2px solid var(--border-primary);
  border-radius: 16px; box-shadow: 0 8px 24px var(--shadow-hover-color);
  padding: 6px; min-width: 150px; display: flex; flex-direction: column;
}
.language-menu a, .language-menu__disabled {
  padding: 9px 14px; border-radius: 10px; font-weight: 700; font-size: 0.95rem;
  color: var(--text-primary); text-decoration: none !important;
}
.language-menu a:hover { background: var(--page-primary-soft); color: var(--page-primary); }
.language-menu__disabled { color: var(--text-tertiary); }

/* ---------- 7. Hero ---------- */
/* Unterer Innenabstand bewusst kleiner als der obere: zusammen mit dem oberen
   Innenabstand des folgenden .section-tight ergab sich sonst eine Luecke von
   rund 152px (1280px Breite). Jetzt rund 106px = etwa 30 % weniger. Gilt
   einheitlich fuer alle Seitenkoepfe (home/features/pricing/safety). */
.hero { position: relative; padding-block: clamp(40px, 7vw, 96px) clamp(28px, 3.3vw, 42px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.hero h1 { margin-bottom: 0.4em; }
.hero .lead { margin-bottom: 1.5em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 22px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px; }

.hero-media { position: relative; }
.hero-scene {
  border-radius: var(--radius-lg); border: 2px solid var(--border-primary);
  box-shadow: 0 8px 24px var(--shadow-hover-color); overflow: hidden;
  background: var(--surface-primary);
}
.hero-scene img { width: 100%; }
.hero-erik {
  position: absolute; right: -18px; bottom: -14px; width: clamp(110px, 16vw, 170px);
  filter: drop-shadow(0 10px 18px var(--shadow-hover-color));
  pointer-events: none;
}

/* Tag/Nacht-Bildwechsel */
.only-dark { display: none !important; }
html.dark .only-dark { display: block !important; }
html.dark .only-light { display: none !important; }
@media (prefers-color-scheme: dark) {
  html.no-js .only-dark { display: block !important; }
  html.no-js .only-light { display: none !important; }
}

/* Schwebende Deko-Sterne */
.floaties { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.floaty { position: absolute; font-size: clamp(1.2rem, 2.4vw, 2rem); opacity: 0.85; animation: float 3s ease-in-out infinite; }
.floaty.sparkly { animation: sparkle 2s ease-in-out infinite; }
.floaty .rr-icon { display: block; width: 1em; height: 1em; }

/* ---------- 8. Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-primary); border: 2px solid var(--border-primary);
  color: var(--text-secondary); border-radius: var(--radius-pill);
  padding: 6px 14px; font-weight: 700; font-size: 0.9rem;
}
.chip.gold { background: var(--star-gold-soft); border-color: transparent; color: #8a6d1a; }
html.dark .chip.gold { color: var(--star-gold); }
/* Chip-Textfarben: Light-Mode nutzt dunkle Toene (WCAG-AA auf den Soft-
   Flaechen), Dark-Mode die hellen Akzente wie gehabt. */
.chip.soft { background: var(--page-primary-soft); border-color: transparent; color: var(--page-primary-active); }
.chip.success { background: var(--rr-success-soft); border-color: transparent; color: #15803d; }
.chip.pending { background: var(--rr-pending-soft); border-color: transparent; color: #b45309; }
.chip.danger { background: var(--rr-danger-soft); border-color: transparent; color: #b91c1c; }
html.dark .chip.soft { color: var(--page-primary); }
html.dark .chip.success { color: var(--rr-success); }
html.dark .chip.pending { color: var(--rr-pending); }
html.dark .chip.danger { color: var(--rr-danger); }

/* ---------- 9. Karten ---------- */
.card {
  background: var(--surface-primary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: 0 2px 10px var(--shadow-color);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
a.card { text-decoration: none !important; color: inherit; display: block; }
@media (hover: hover) {
  a.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shadow-hover-color); }
}
.card h3 { display: flex; align-items: center; gap: 10px; }
.card p:last-child { margin-bottom: 0; }

/* Symbol-Kachel: ohne Hintergrund, Symbol 61px (die frueheren 38px plus 60 %).
   Diese Werte galten schon in den Icon-Gittern von Preise-, Sicherheits- und
   Funktionsseite sowie in der .trust-card; sie sind hier zusammengefasst, die
   frueheren Sonderregeln dafuer entfallen ersatzlos. Ohne Hintergrund hat auch
   der frueher gesetzte Eckradius keine Wirkung mehr. */
.icon-tile {
  width: 61px; height: 61px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.72rem; line-height: 1;
  background: transparent;
  margin-bottom: 14px;
}
.icon-tile .rr-icon { width: 61px; height: 61px; }

/* Welt-Karte (5 Welten) */
.world-card { position: relative; overflow: hidden; }
.world-card-visual {
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--border-light);
  background: var(--page-primary-soft);
  margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.world-card-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.world-card .world-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.world-card .world-crest {
  width: 56px; height: 56px; border-radius: 18px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
  background: linear-gradient(135deg, var(--page-grad-from), var(--page-grad-to));
  box-shadow: 0 4px 12px var(--page-primary-shadow);
}
.world-card h3 { margin: 0; }
.world-card .world-sub { font-size: 0.88rem; color: var(--page-primary-active); font-weight: 800; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
html.dark .world-card .world-sub { color: var(--page-primary); }
.world-card ul { list-style: none; padding: 0; margin: 0; }
.world-card li { padding-left: 26px; position: relative; margin-bottom: 7px; color: var(--text-secondary); }
.world-card li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 16px; height: 16px;
  background: url('/assets/img/icons/star.webp?v=20260802-3') center / contain no-repeat;
}

/* Bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.6vw, 24px); }
.bento .span-2 { grid-column: span 2; }

/* ---------- 10. Schritte (So funktioniert's) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 24px); counter-reset: step; }
.step { position: relative; text-align: center; padding: 26px 18px 22px; }
.step-num {
  width: 58px; height: 58px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--star-gold), var(--star-gold-deep));
  color: #3d3a33;
  border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  box-shadow: 0 4px 0 #d98f10, 0 8px 20px -6px rgba(245, 166, 35, 0.45);
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--text-secondary); font-size: 0.96rem; margin: 0; }
.step .step-emoji { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ---------- 11. Gold-Fortschrittsbalken (App-Signature) ---------- */
.rr-progress { height: 0.75rem; border-radius: var(--radius-pill); background: var(--surface-tertiary); overflow: hidden; }
.rr-progress-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--star-gold), var(--star-gold-deep));
  position: relative; transition: width 1s ease-out; width: 0;
}
.rr-progress-fill::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 55%);
}

/* ---------- 12. Statband ---------- */
.statband {
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--page-primary-hover), var(--page-primary-active));
  color: #ffffff; padding: clamp(28px, 4.5vw, 44px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  box-shadow: 0 8px 24px var(--page-primary-shadow);
  position: relative; overflow: hidden;
}
.statband::before, .statband::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12);
}
.statband::before { width: 220px; height: 220px; top: -80px; right: -60px; }
.statband::after { width: 140px; height: 140px; bottom: -60px; left: 8%; }
.stat { text-align: center; position: relative; z-index: 1; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; }
/* Nur das Label (direktes Kind) — der data-count-Span im <b> erbt dessen Groesse */
.stat > span { font-size: 0.95rem; opacity: 0.92; font-weight: 700; }

/* ---------- 13. Split-Media / Erik-Figuren ---------- */
.split-media { position: relative; }
.media-card {
  border-radius: var(--radius-lg); border: 2px solid var(--border-primary);
  background: var(--surface-primary); box-shadow: 0 2px 10px var(--shadow-color);
  padding: clamp(18px, 3vw, 30px); overflow: hidden; position: relative;
}
.media-blob {
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 42%, var(--page-primary-soft) 0%, transparent 72%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 2vw, 22px);
}
.media-blob img { max-height: 340px; width: auto; }
.media-blob.scene-blob { padding: clamp(8px, 1.6vw, 16px); }
.media-blob.scene-blob img,
.section-scene-img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  max-height: none;
  border-radius: var(--radius);
  border: 2px solid var(--border-primary);
  box-shadow: 0 16px 34px -18px var(--shadow-hover-color);
}
.section-scene-img { margin-inline: auto; }
.erik-img { filter: drop-shadow(0 12px 22px var(--shadow-hover-color)); }

/* ---------- 14. Telefon-Mockup (CSS-Mini-UI als Screenshot-Platzhalter) ---------- */
.phone {
  width: min(300px, 78vw); margin: 0 auto;
  background: var(--surface-secondary);
  border: 10px solid #1c2440; border-radius: 42px;
  box-shadow: 0 18px 40px -12px var(--shadow-hover-color);
  overflow: hidden; position: relative;
}
html.dark .phone { border-color: #0b1022; }
.phone::before {
  content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; background: #1c2440; border-radius: var(--radius-pill); z-index: 3;
}
html.dark .phone::before { background: #0b1022; }
.phone-screen { padding: 44px 14px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 480px; }
.phone-header {
  border-radius: 18px; padding: 14px;
  background: linear-gradient(135deg, var(--page-grad-from), var(--page-grad-to));
  color: #fff; font-family: var(--font-display); font-weight: 800;
  display: flex; align-items: center; justify-content: space-between; font-size: 1rem;
}
.phone-header .ph-pts { background: rgba(255,255,255,0.22); padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.85rem; }
.phone-card {
  background: var(--surface-primary); border: 2px solid var(--border-primary);
  border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 10px;
}
.phone-card .pc-emoji {
  width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--page-primary-soft);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.phone-card .pc-body { flex: 1; min-width: 0; }
.phone-card .pc-title { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; line-height: 1.25; }
.phone-card .pc-sub { font-size: 0.76rem; color: var(--text-tertiary); font-weight: 700; }
.phone-card .pc-check {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--border-secondary); display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: #fff;
}
.phone-card .pc-check.done { background: var(--rr-success); border-color: var(--rr-success); }
.phone-progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 800; color: var(--text-secondary); font-family: var(--font-display); }
.phone-cta { margin-top: auto; }
.phone-cta .btn { width: 100%; font-size: 0.95rem; }

/* Chat-Bubbles im Mockup */
.phone-bubble {
  max-width: 82%; border-radius: 16px; padding: 9px 13px; font-size: 0.85rem; line-height: 1.4;
  background: var(--surface-primary); border: 2px solid var(--border-primary);
}
.phone-bubble .pb-name { font-size: 0.68rem; font-weight: 800; color: var(--page-primary); display: block; font-family: var(--font-display); }
.phone-bubble.mine {
  margin-left: auto; background: var(--page-primary); border-color: transparent; color: #fff;
}
.phone-bubble.mine .pb-ticks { font-size: 0.68rem; opacity: 0.85; display: block; text-align: right; }
.phone-audio { display: flex; align-items: center; gap: 8px; }
.phone-audio .pa-play {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex: none;
}
.phone-audio .pa-wave { display: flex; align-items: center; gap: 2.5px; height: 20px; }
.phone-audio .pa-wave i { width: 3px; border-radius: 2px; background: rgba(255,255,255,0.85); display: block; }
.phone-emoji-xl { font-size: 2.3rem; line-height: 1.2; }

/* ---------- 15. Preise ---------- */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: clamp(18px, 3vw, 30px); justify-content: center; }
.tier { position: relative; display: flex; flex-direction: column; }
.tier .tier-emoji { font-size: 2.4rem; margin-bottom: 6px; }
.tier .tier-emoji .rr-icon { width: 1.2em; height: 1.2em; }
.tier .price { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1.05; color: var(--text-primary); }
.tier .price small { font-size: 1rem; font-weight: 700; color: var(--text-tertiary); }
.tier ul { list-style: none; padding: 0; margin: 16px 0 22px; flex: 1; }
.tier li { padding-left: 30px; position: relative; margin-bottom: 10px; color: var(--text-secondary); }
.tier li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  background: url('/assets/img/icons/task-completed.webp?v=20260812-1') center / contain no-repeat;
}
.tier li.no::before { background-image: url('/assets/img/icons/minus.webp?v=20260802-3'); }
.tier .btn { width: 100%; }
.tier-featured { border-color: var(--star-gold); border-width: 3px; box-shadow: 0 8px 28px -6px rgba(245, 166, 35, 0.35); }
.tier-flag {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: linear-gradient(135deg, var(--star-gold), var(--star-gold-deep));
  color: #3d3a33; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem;
  padding: 5px 18px; border-radius: var(--radius-pill); box-shadow: 0 4px 10px rgba(245, 166, 35, 0.4);
  white-space: nowrap;
}

/* Vergleichstabelle */
.compare-wrap { overflow-x: auto; border-radius: var(--radius); border: 2px solid var(--border-primary); background: var(--surface-primary); }
table.compare { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.97rem; }
.compare th, .compare td { padding: 13px 18px; text-align: left; border-bottom: 2px solid var(--border-light); }
.compare thead th { font-family: var(--font-display); font-weight: 800; background: var(--surface-tertiary); }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td.yes { color: var(--rr-success); font-weight: 800; }
.compare td.no { color: var(--text-tertiary); }

/* ---------- 16. FAQ ---------- */
.faq-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.faq-filter button {
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  background: var(--surface-primary); color: var(--text-secondary);
  border: 2px solid var(--border-primary); border-radius: var(--radius-pill);
  padding: 8px 18px; cursor: pointer; transition: all 0.15s ease;
}
.faq-filter button:hover, .faq-filter button.active { background: var(--page-primary-soft); border-color: var(--page-primary); color: var(--page-primary); }
.faq-cluster h2 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; margin: 38px 0 16px; }
/* Cluster-Symbol steht frei auf dem Seitenhintergrund: keine Kachel mehr
   (kein Hintergrund, kein Radius, keine feste Kachelgroesse). Die Box waechst
   jetzt mit dem Bild mit. */
.faq-cluster h2 .cluster-emoji {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
/* Piktogramm 60 % groesser (31px -> 50px). Die negative Blockmarge haelt die
   Aussenhoehe bei den frueheren 44px, damit die Ueberschriftenzeile durch das
   groessere Bild nicht waechst (Muster wie details.qa summary .rr-icon). */
.faq-cluster h2 .cluster-emoji .rr-icon { width: 50px; height: 50px; margin-block: -3px; }
details.qa {
  background: var(--surface-primary); border: 2px solid var(--border-primary);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
  transition: box-shadow 0.15s ease;
}
details.qa[open] { box-shadow: 0 4px 16px var(--shadow-color); }
details.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
details.qa summary::-webkit-details-marker { display: none; }
/* Zeilen-Piktogramm 60 % groesser als der Standard (1.35em). Die negative
   Blockmarge haelt die Aussenhoehe unter der 30px-Aufklappflaeche, damit die
   Zeile dadurch nicht waechst. */
details.qa summary .rr-icon { width: 2.16em; height: 2.16em; margin-block: -0.2em; }
details.qa summary::after {
  /* Alt-Text-Syntax ('+' / '') haelt das Zeichen rein dekorativ —
     Screenreader wuerden sonst 'plus'/'minus' zusaetzlich zum nativen
     details-Zustand vorlesen */
  content: '' / ''; margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background-color: var(--page-primary-soft);
  background-image: url('/assets/img/icons/control-arrow-down.webp?v=20260802-3');
  background-position: center; background-repeat: no-repeat; background-size: 20px 20px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
details.qa[open] summary::after { content: '' / ''; transform: rotate(180deg); }
details.qa .qa-body { padding: 0 20px 18px; color: var(--text-secondary); }
details.qa .qa-body p:last-child { margin-bottom: 0; }

/* ---------- 17. Statement- & CTA-Baender ---------- */
/* Statement-Band: sparsames Konfetti liegt HINTER dem Text (z-index 0),
   der Inhalt bleibt darueber lesbar. Das Canvas legt das Skript selbst an. */
.statement-band { position: relative; overflow: hidden; }
.statement-band > .container { position: relative; z-index: 1; }
.statement-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.statement {
  text-align: center; max-width: 800px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem); line-height: 1.4; color: var(--text-primary);
}
.cta-band {
  border-radius: var(--radius-lg); text-align: center;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 48px);
  background: linear-gradient(135deg, var(--page-grad-from), var(--page-grad-to));
  color: #ffffff; position: relative; overflow: hidden;
  box-shadow: 0 8px 24px var(--page-primary-shadow);
}
.cta-band h2 { color: #ffffff; }
.cta-band p { color: rgba(255, 255, 255, 0.92); max-width: 52ch; margin-inline: auto; }
.cta-band .btn-chunky { background: #ffffff; color: var(--page-primary-active) !important; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22), 0 8px 20px -6px rgba(0, 0, 0, 0.3); }
.cta-band .btn-chunky:hover { background: #fdf8ec; }
/* Sekundaer-Button im CTA-Band: transparente Ghost-Variante, damit die
   Button-Hierarchie erhalten bleibt (Primaer = weiss, Sekundaer = Outline) */
.cta-band .btn-ghost {
  background: transparent; color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: none;
}
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.cta-band .btn-ghost:active { transform: translateY(2px); }
.cta-band .floaty { z-index: 0; }
.cta-band > * { position: relative; z-index: 1; }
.cta-erik { width: clamp(120px, 16vw, 180px); margin: -8px auto 10px; }
/* Store-Block: eigener, um rund 30 % kleinerer Innenabstand als .section
   (Kundenwunsch: weniger Leerraum vor und nach dem gruenen Kasten).
   Die allgemeine .section-Regel bleibt unangetastet — hier gewinnt die
   spaeter notierte, gleich spezifische Klasse.
   OBEN kleiner als UNTEN: der FAQ-Teaser darueber (.section-tight) bringt
   seinen eigenen unteren Innenabstand mit, der sich zum sichtbaren Abstand
   addiert. Unten steht nur der schmale Footer-Aussenabstand dagegen. */
.app-store-section { padding-block: clamp(17px, 2.6vw, 31px) clamp(28px, 4.2vw, 50px); }

/* ---------- 18. Footer ---------- */
.site-footer {
  /* Abstand zum Block darueber um rund 30 % verkleinert (siehe .app-store-section). */
  margin-top: clamp(14px, 2.1vw, 25px);
  background: var(--surface-primary);
  border-top: 2px solid var(--border-light);
  padding: clamp(36px, 6vw, 64px) 0 28px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 44px); margin-bottom: 34px; }
.site-footer h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-tertiary); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer ul a { color: var(--text-secondary); font-weight: 700; text-decoration: none !important; }
.site-footer ul a:hover { color: var(--page-primary); }
.footer-bottom {
  border-top: 2px solid var(--border-light); padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  color: var(--text-tertiary); font-size: 0.92rem; font-weight: 600;
}

/* ---------- 19. Prosa / Rechtsseiten ---------- */
.doc-hub { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 26px; }
.doc-hub a {
  font-family: var(--font-display); font-weight: 700; font-size: 0.92rem;
  background: var(--surface-primary); border: 2px solid var(--border-primary);
  color: var(--text-secondary); border-radius: var(--radius-pill); padding: 7px 16px;
  text-decoration: none !important;
}
.doc-hub a.active, .doc-hub a:hover { background: var(--page-primary-soft); border-color: var(--page-primary); color: var(--page-primary); }
.doc-hub .doc-date { margin-left: auto; }

.prose { max-width: 70ch; }
.prose h1 { overflow-wrap: anywhere; hyphens: auto; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { font-size: 1.18rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--text-secondary); }
.prose strong { color: var(--text-primary); }
.prose address { font-style: normal; color: var(--text-secondary); }
.prose .card { margin-block: 1.2em; }

/* Drittlizenzen: Metadaten und Paketlisten bleiben auch mit langen
   Paketnamen, Hashes und Lizenzzeilen auf kleinen Telefonen lesbar. */
.licenses-meta { display: grid; gap: 14px; }
.licenses-meta div { min-width: 0; }
.licenses-meta dt {
  color: var(--text-tertiary); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.licenses-meta dd { margin: 3px 0 0; color: var(--text-primary); font-weight: 700; overflow-wrap: anywhere; }
.licenses-meta code { font-size: 0.78rem; word-break: break-all; }
.licenses-scope h2 { margin-top: 0; }
.licenses-scope p:last-child { margin-bottom: 0; }
.licenses-components { display: grid; gap: 14px; }
.license-component { margin-block: 0 !important; }
.license-component-heading { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.license-component-heading h3 { flex: 1 1 16rem; margin: 0; overflow-wrap: anywhere; }
.license-component p { margin-bottom: 0; overflow-wrap: anywhere; }
.license-review { color: var(--rr-danger, #b42318) !important; }
.license-source { font-weight: 700; }
.licenses-texts { display: grid; gap: 12px; }
.license-text {
  overflow: hidden; border: 2px solid var(--border-primary); border-radius: var(--radius);
  background: var(--surface-primary); box-shadow: 0 2px 10px var(--shadow-color);
}
.license-text summary {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 16px 18px; cursor: pointer; color: var(--text-primary);
  font-family: var(--font-display); font-weight: 800;
}
.license-text summary::-webkit-details-marker { display: none; }
.license-text summary code { color: var(--text-tertiary); font-family: var(--font-sans); font-size: 0.78rem; }
.license-text-body { padding: 0 18px 18px; }
.license-text-body pre {
  max-height: 34rem; overflow: auto; margin: 12px 0 0; padding: 14px;
  border: 1px solid var(--border-primary); border-radius: 12px;
  background: var(--surface-secondary); color: var(--text-secondary);
  font: 0.78rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.licenses-unavailable h2 { margin-top: 0; }
.licenses-unavailable p:last-child { margin-bottom: 0; }

details.toc {
  background: var(--surface-primary); border: 2px solid var(--border-primary);
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 30px; max-width: 70ch;
}
details.toc summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; list-style: none; }
details.toc summary::-webkit-details-marker { display: none; }
details.toc ol { margin: 12px 0 4px; columns: 2; column-gap: 30px; font-size: 0.95rem; }
details.toc a { color: var(--text-secondary); }

/* ---------- 20. Bild-Platzhalter (EmptyState-Mechanik der App) ---------- */
.img-placeholder {
  border-radius: var(--radius-lg); border: 3px dashed var(--border-secondary);
  background: var(--surface-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 36px 22px; min-height: 240px;
}
.img-placeholder .blob {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--page-primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; animation: float 3s ease-in-out infinite;
}
.img-placeholder b { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-primary); }
.img-placeholder span { font-size: 0.9rem; color: var(--text-tertiary); max-width: 300px; }
.screenshot-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.app-screenshot-img {
  width: min(100%, 270px);
  height: auto; /* intrinsisches 390:844 — nicht per aspect-ratio erzwingen,
                   der 8px-Rahmen (border-box) wuerde den Inhalt sonst beschneiden */
  display: block;
  border: 8px solid #1c2440;
  border-radius: 34px;
  background: #1c2440;
  box-shadow: 0 18px 40px -16px var(--shadow-hover-color);
}
html.dark .app-screenshot-img { border-color: #0b1022; background: #0b1022; }
/* Screenshots OHNE Dark-Pendant (nur -light vorhanden) im Nachtlager etwas
   abdunkeln, bis die echten Dark-Aufnahmen existieren (bilder.md §1.1) */
html.dark .app-screenshot-img:not(.only-light):not(.only-dark) {
  filter: brightness(0.84) saturate(0.92);
}
/* Text-Karte neben einem hohen Phone-Frame: Inhalt vertikal zentrieren,
   statt eine grosse Leerflaeche unter dem Text zu lassen */
.grid:has(> .screenshot-frame) > .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wide-scene {
  max-width: 900px;
  margin: 0 auto clamp(24px, 4vw, 38px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid var(--border-primary);
  background: var(--surface-primary);
  box-shadow: 0 16px 38px -24px var(--shadow-hover-color);
}
.wide-scene img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 20b. Startseite: fokussierter Produkt-Auftritt ---------- */
.home-hero {
  padding-block: clamp(42px, 5vw, 72px) clamp(34px, 4vw, 54px);
  background: var(--surface-secondary);
  background:
    radial-gradient(circle at 78% 22%, var(--page-primary-soft), transparent 31rem),
    linear-gradient(180deg, var(--surface-secondary), color-mix(in srgb, var(--surface-primary) 70%, var(--surface-secondary)));
  border-bottom: 2px solid var(--border-light);
}
.home-hero-grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(460px, 0.97fr);
  align-items: center;
  gap: clamp(34px, 5vw, 68px);
}
.home-hero .hero-copy { position: relative; z-index: 2; }
.home-hero h1 { font-size: clamp(2.55rem, 4.3vw, 3.75rem); max-width: none; }
.home-hero .lead { max-width: 50ch; }
.hero-product-stage {
  /* Versatz in Prozent der Buehnenbreite: Familienbild nach links, Telefon nach rechts,
     damit sich beide weniger ueberlappen (der Vater rechts im Bild bleibt sichtbar).
     Die Groessen aendern sich dabei nicht, nur die Position. */
  --hero-art-shift: 4.5%;
  --hero-phone-shift: 4%;
  position: relative; min-height: 510px; isolation: isolate;
  filter: drop-shadow(0 22px 34px var(--shadow-color));
}
.hero-artwork {
  /* Breite bleibt konstant: was links dazukommt, kommt rechts dazu. */
  position: absolute;
  inset: 34px calc(74px + var(--hero-art-shift)) 72px calc(-1 * var(--hero-art-shift));
  border-radius: var(--radius-lg); overflow: hidden;
  border: 2px solid var(--border-primary); background: var(--surface-primary);
  box-shadow: 0 18px 34px -20px var(--shadow-hover-color);
  transform: rotate(-1.5deg);
}
.hero-artwork img { width: 100%; height: 100%; object-fit: cover; }
.hero-phone-preview {
  position: absolute; right: calc(-1 * var(--hero-phone-shift)); bottom: 0; z-index: 2;
  width: min(41%, 206px); overflow: hidden;
  border: 6px solid var(--device-frame); border-radius: 30px;
  background: var(--device-frame);
  box-shadow: 0 24px 44px -18px var(--shadow-hover-color);
  transform: rotate(2.2deg);
}
.hero-phone-preview img { width: 100%; }
.hero-float-card {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 2px solid var(--border-primary); border-radius: var(--radius-pill);
  background: var(--surface-elevated); color: var(--text-primary);
  box-shadow: 0 10px 24px -14px var(--shadow-hover-color);
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; line-height: 1;
}
/* Die Kaertchen haengen an der Buehne, gehoeren aber optisch zum Familienbild:
   deshalb wandern sie um denselben Betrag mit nach links. */
.hero-float-card-mission { top: 12px; right: calc(28px + var(--hero-art-shift)); }
.hero-float-card-stars { left: calc(14px - var(--hero-art-shift)); bottom: 42px; }

.hero-proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: clamp(28px, 4vw, 46px); overflow: hidden;
  border: 2px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--surface-primary); box-shadow: 0 10px 26px -20px var(--shadow-hover-color);
}
.hero-proof-item {
  display: flex; align-items: center; gap: 13px; min-width: 0;
  padding: 18px clamp(16px, 2.4vw, 28px);
}
.hero-proof-item + .hero-proof-item { border-left: 2px solid var(--border-light); }
.proof-icon {
  display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px;
  background: transparent; font-size: 2.15rem;
}
.proof-icon .rr-icon { width: 51px; height: 51px; }
.hero-proof-item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hero-proof-item strong { font-family: var(--font-display); font-size: 0.98rem; line-height: 1.25; }
.hero-proof-item small { color: var(--text-tertiary); font-size: 0.78rem; font-weight: 700; }

.benefit-card { position: relative; min-height: 232px; overflow: hidden; }
.benefit-card::after {
  content: ''; position: absolute; width: 120px; height: 120px; right: -44px; bottom: -52px;
  border-radius: 50%; background: var(--page-primary-soft); opacity: 0.72;
}
.benefit-icon {
  display: grid; place-items: center; width: 64px; height: 64px;
  margin-bottom: 18px; background: transparent; font-size: 2.72rem;
}
.benefit-icon .rr-icon { width: 64px; height: 64px; }
.benefit-index {
  position: absolute; top: 22px; right: 24px;
  color: var(--page-primary-active); font-family: var(--font-display); font-weight: 800; font-size: 0.86rem;
  letter-spacing: 0.08em;
}
html.dark .benefit-index { color: var(--page-primary); }
.benefit-card p { position: relative; z-index: 1; margin: 0; color: var(--text-secondary); }

/* ---------- Schritt-Kacheln: Wappen-Plakette ---------- */
/* Gilt fuer BEIDE Vorkommen: die vier Schritte der Startseite (.steps) und
   die drei Genehmigungs-Karten der Sicherheitsseite (.grid.cols-3).
   Alle Farben aus vorhandenen Tokens. Die einzigen festen Werte (#d98f10 und
   das zugehoerige rgba) sind woertlich aus der bestehenden .step-num-Regel
   uebernommen und gehoeren zum Goldkreis. */

.step-tiles {
  --plaque: 80px;         /* Kantenlaenge der Plakette */
  --plaque-rise: 26px;    /* Ueberstand nach oben */
  --plaque-shift: 8px;    /* Ueberstand nach links */
  --badge: 36px;          /* goldener Nummernkreis */
  /* Deckkraft des Wasserzeichens. Bewusst zurueckgenommen (vorher 0.055 hell
     und 0.1 dunkel), weil das warme Gold unten rechts zu praesent wirkte. Das
     Verhaeltnis dunkel zu hell bleibt bei rund 1,8, damit das Motiv auf dem
     Nachtlager-Blau genauso weit traegt wie auf dem hellen Creme. */
  --step-deco: 0.038;
  /* Warmes Titelgold. h3 laeuft hier mit 19,2px/700, zaehlt also als GROSSER
     Text (AA ab 3:1); erreicht werden 4,9:1 hell und 11,4:1 dunkel. */
  --step-title: color-mix(in srgb, var(--star-gold-deep) 40%, var(--text-primary));
}
html.dark .step-tiles { --step-title: var(--star-gold); --step-deco: 0.069; }
@media (prefers-color-scheme: dark) {
  html.no-js .step-tiles { --step-title: var(--star-gold); --step-deco: 0.069; }
}

/* Der Raster-Container reserviert den Ueberstand SELBST. Dadurch bleibt der
   Abstand zum Sektionskopf exakt der heutige, und in der zweizeiligen Ansicht
   (Startseite 561-1020px) laeuft keine Plakette in die Karte darueber.
   Die +4px sind die Reserve fuer die leichte Neigung der Plakette. */
.step-tiles .steps,
.step-tiles .grid.cols-3 {
  padding-top: calc(var(--plaque-rise) + 4px);
  column-gap: clamp(22px, 2.6vw, 28px);
  row-gap: clamp(38px, 4.2vw, 44px);
}

.step-tiles .step {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  /* oben Reserve fuer Plakette und Nummer, seitlich und unten bewusst knapp */
  padding: 66px 18px 20px;
  text-align: left;
  overflow: visible;    /* ausdruecklich: die Plakette darf herausragen */
  isolation: isolate;   /* haelt Deko-, Text- und Plaketten-Ebene beisammen */
}

/* Deko 1: warmer Lichtschein aus der Plaketten-Ecke, Gegenlicht unten rechts */
.step-tiles .step::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: calc(var(--radius) - 2px);
  background:
    radial-gradient(circle at 4% -4%, var(--page-primary-soft), transparent 54%),
    radial-gradient(circle at 106% 112%, var(--star-gold-soft), transparent 48%);
}

/* Deko 2: Wasserzeichen unten rechts. Diese Regel setzt nur Lage, Groesse und
   Deckkraft; das MOTIV kommt je Karte aus den nth-child-Regeln darunter. Der
   Kompass bleibt als Rueckfall stehen, falls eine Karte einmal keine eigene
   Zuordnung hat. Er wird von keiner der sieben Karten benutzt, die Datei wird
   also nur geladen, wenn dieser Rueckfall wirklich greift. */
.step-tiles .step::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  right: 12px; bottom: 10px; width: 92px; height: 92px;
  background: url('/assets/img/icons/compass.webp?v=20260802-3') center / contain no-repeat;
  opacity: var(--step-deco);
}

/* Motive je Karte. Gesteuert ueber nth-child, damit das Markup unangetastet
   bleibt: beide Container enthalten ausschliesslich .step-Karten in fester
   Reihenfolge, ein Zaehlen ist hier also eindeutig. Gewaehlt sind nur
   formstarke Silhouetten, die bei so geringer Deckkraft noch lesbar sind,
   und nie das Piktogramm der Plakette derselben Karte. */

/* Startseite, vier Schritte: Karte -> Schluessel -> Ziel -> Schatz.
   1 Mission planen: die Schatzkarte ist der Weg, den man vorher auslegt.
   2 Verbindungscode: der Schluessel oeffnet dem Kind seine eigene Ansicht.
   3 Erledigung bestaetigen: das Ziel ist getroffen und wird abgenommen.
   4 Belohnung abschliessen: die Truhe ist der gemeinsam gehobene Schatz. */
.step-tiles .steps .step:nth-child(1)::after { background-image: url('/assets/img/icons/map.webp?v=20260802-3'); }
.step-tiles .steps .step:nth-child(2)::after { background-image: url('/assets/img/icons/key.webp?v=20260802-3'); }
.step-tiles .steps .step:nth-child(3)::after { background-image: url('/assets/img/icons/target.webp?v=20260802-3'); }
.step-tiles .steps .step:nth-child(4)::after { background-image: url('/assets/img/icons/chest.webp?v=20260802-3'); }

/* Sicherheitsseite, drei Genehmigungs-Karten. Eigener Satz statt der ersten
   drei Motive der Startseite, weil die Karten etwas anderes erzaehlen.
   1 Kind hakt ab: der Gipfel ist erklommen, die Abnahme steht noch aus.
   2 Ihr schaut nach: die Laterne bringt Licht auf die offenen Anfragen.
   3 Ihr entscheidet: die Krone steht fuer das letzte Wort der Eltern. */
.step-tiles .grid.cols-3 .step:nth-child(1)::after { background-image: url('/assets/img/icons/mountain.webp?v=20260802-3'); }
.step-tiles .grid.cols-3 .step:nth-child(2)::after { background-image: url('/assets/img/icons/lantern.webp?v=20260802-3'); }
.step-tiles .grid.cols-3 .step:nth-child(3)::after { background-image: url('/assets/img/icons/crown.webp?v=20260802-3'); }

/* Android-Testphase, drei Anmelde-Karten. Sie liegen ebenfalls in einem
   .grid.cols-3 und erbten deshalb die Motive der Sicherheitsseite - Berg,
   Laterne und Krone erzaehlen dort die Genehmigungs-Geschichte und bedeuten
   bei "Adresse eintragen / Wir schalten frei / Einladung kommt" nichts. Der
   eigene Satz steht bewusst HINTER dem der Sicherheitsseite: gleiche
   Spezifitaet, also gewinnt die spaetere Regel.
   1 Adresse eintragen: getippt wird auf dem Handy, um das es geht.
   2 Wir schalten frei: der Schluessel oeffnet den Zugang.
   3 Einladung kommt: mit ihr geht es los. */
.step-tiles--beta .grid.cols-3 .step:nth-child(1)::after { background-image: url('/assets/img/icons/smartphone.webp?v=20260802-3'); }
.step-tiles--beta .grid.cols-3 .step:nth-child(2)::after { background-image: url('/assets/img/icons/key.webp?v=20260802-3'); }
.step-tiles--beta .grid.cols-3 .step:nth-child(3)::after { background-image: url('/assets/img/icons/rocket.webp?v=20260802-3'); }

/* Der Marker ist nur noch Huelle und nimmt keinen Platz im Textfluss ein. */
.step-tiles .step-marker { position: static; width: auto; height: 0; margin: 0; }

/* Wappen-Plakette: Ring in der Weltfarbe, helle Platte fuer den Kontrast der
   freigestellten Piktogramme, chunky Unterkante nach dem .btn-chunky-Rezept */
.step-tiles .step .step-emoji {
  position: absolute; z-index: 2;
  top: calc(-1 * var(--plaque-rise));
  left: calc(-1 * var(--plaque-shift));
  display: grid; place-items: center;
  width: var(--plaque); height: var(--plaque); margin: 0;
  border: 3px solid var(--page-primary);
  border-radius: 24px;
  background-color: var(--surface-primary);
  background-image: radial-gradient(circle at 50% 34%, var(--page-primary-soft), transparent 74%);
  box-shadow:
    0 5px 0 var(--page-primary-active),
    0 14px 24px -12px var(--page-primary-shadow);
  font-size: 2.05rem;
  transform: rotate(-3deg);
  transition: transform 0.18s ease;
}
.step-tiles .step .step-emoji .rr-icon { width: 56px; height: 56px; }
@media (hover: hover) {
  /* Bewusst NUR die Plakette, nicht die Karte: .step ist ein <article> ohne
     Link, ein Karten-Lift wuerde eine Klickbarkeit versprechen, die es nicht gibt. */
  .step-tiles .step:hover .step-emoji { transform: rotate(0deg) scale(1.04); }
}

/* Schrittnummer: goldener Kreis in der oberen rechten Kartenecke.
   Gold-Rezept, Schriftfarbe und Kantenwerte unveraendert aus dem Bestand. */
.step-tiles .step-num {
  position: absolute; z-index: 2;
  top: 12px; right: 12px; bottom: auto; left: auto;
  width: var(--badge); height: var(--badge); margin: 0;
  font-size: 1.02rem;
  box-shadow: 0 3px 0 #d98f10, 0 7px 14px -8px rgba(245, 166, 35, 0.45);
}

/* Ueberschrift und Absatz bleiben als Block zusammen, sitzen vertikal mittig
   in der Kachel und liegen ueber den Deko-Ebenen. */
.step-tiles .step-copy {
  position: relative; z-index: 1;
  display: flex; flex: 1; flex-direction: column; justify-content: center;
}
.step-tiles .step h3 {
  display: block;   /* .card h3 ist flex; block ist fuer Umbrueche robuster */
  margin-bottom: 6px;
  color: var(--step-title);
  font-size: 1.2rem;
  hyphens: auto; overflow-wrap: break-word;
}
/* Sicherheitsnetz: ohne color-mix lieber normale Textfarbe als Zufallswert. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .step-tiles .step h3 { color: var(--text-primary); }
}
.step-tiles .step-copy p { max-width: 52ch; }
.section-action { margin: clamp(26px, 4vw, 38px) 0 0; }

.app-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.8vw, 28px); }
.showcase-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(18px, 2.5vw, 26px); overflow: hidden;
}
.showcase-device {
  width: min(100%, 214px); margin: 0 auto 22px; overflow: hidden;
  border: 6px solid var(--device-frame); border-radius: 30px; background: var(--device-frame);
  box-shadow: 0 22px 40px -22px var(--shadow-hover-color);
}
.showcase-device img { width: 100%; }
.showcase-kicker, .audience-label, .card-kicker {
  display: block; margin-bottom: 4px; color: var(--page-primary-active);
  font-family: var(--font-display); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
html.dark .showcase-kicker, html.dark .audience-label, html.dark .card-kicker { color: var(--page-primary); }
.showcase-card h3 { margin-bottom: 6px; }
.showcase-card p { margin: 0; color: var(--text-secondary); font-size: 0.93rem; }
.swipe-hint { display: none; }

.audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 30px); }
.audience-card {
  display: grid; grid-template-columns: 150px 1fr; gap: clamp(18px, 2.8vw, 30px);
  align-items: center; overflow: hidden;
}
.audience-portrait {
  display: grid; place-items: end center; align-self: stretch; overflow: hidden;
  min-height: 220px; margin: -28px 0 -28px -28px; padding: 18px 8px 0;
  background: radial-gradient(circle at 50% 58%, var(--page-primary-soft), transparent 70%);
}
.audience-portrait img { width: 100%; max-height: 240px; object-fit: contain; object-position: bottom; }
.check-list { list-style: none; margin: 16px 0 0; padding: 0; }
.check-list li { position: relative; margin: 9px 0; padding-left: 26px; color: var(--text-secondary); font-size: 0.95rem; }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: url('/assets/img/icons/task-completed.webp?v=20260812-1') center / contain no-repeat;
}

.world-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.3vw, 22px); }
.world-link {
  display: flex !important; align-items: center; gap: 16px; min-height: 108px;
  padding: 18px 20px; color: var(--text-primary) !important;
  --world-ink: var(--page-primary-active);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.world-link-icon {
  display: grid; place-items: center; flex: 0 0 61px; width: 61px; height: 61px;
  background: var(--page-primary-soft); border-radius: 18px; font-size: 2.48rem;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--world-ink) 80%, var(--surface-primary));
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.world-link-icon .rr-icon { width: 61px; height: 61px; }
.world-link > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.world-link strong { font-family: var(--font-display); font-size: 1.04rem; line-height: 1.22; color: var(--world-ink); }
.world-link small { margin-top: 3px; color: var(--text-tertiary); font-size: 0.79rem; font-weight: 700; line-height: 1.35; }

/* Welt-Farbe auf den sechs Bereichs-Karten.
   Die theme-*-Klassen setzen die Variablen bereits im Markup; hier werden sie
   erstmals ausgewertet — ausschliesslich unter .world-link, weil dieselben
   theme-Klassen auch auf anderen Karten und auf ganzen Sektionen sitzen.
   Traeger der Farbe sind nur Piktogramm-Kachel und Titel. Flaeche und Rahmen
   bleiben im Ruhezustand neutral, damit die sechs Karten weiter als EINE
   ruhige Reihe lesen und nicht als bunte Kachelwand.
   --world-ink ist die schreibfaehige Fassung der Bereichsfarbe: hell die
   abgedunkelte Variante (--page-primary-active), weil Bernstein und Tuerkis
   in der hellen Grundfarbe auf Creme zu blass fuer Text waeren; dunkel die
   aufgehellte (--page-primary). Damit gilt 4,5:1 in beiden Modi.
   Der Grundwert steht oben in .world-link, hier folgen die Dunkel-Faelle. */
html.dark .world-link { --world-ink: var(--page-primary); }
@media (prefers-color-scheme: dark) {
  html.no-js .world-link { --world-ink: var(--page-primary); }
}

@media (hover: hover) {
  /* Antwort auf den Mauszeiger: Rahmen und Schatten nehmen die Bereichsfarbe
     an, die Piktogramm-Kachel wird satter. Den neutralen Schatten aus
     a.card:hover ersetzt die erste Regel bewusst. */
  a.card.world-link:hover { border-color: var(--world-ink); box-shadow: 0 10px 26px var(--page-primary-shadow); }
  a.card.world-link:hover .world-link-icon { background: color-mix(in srgb, var(--page-primary) 22%, var(--surface-primary)); }
}

/* Der globale Fokus-Ring arbeitet mit box-shadow und wuerde von den
   Karten-Hover-Regeln ueberschrieben. Hier unveraendert wiederholt, damit er
   sichtbar bleibt und neutral gegen jede Bereichsfarbe absticht. */
a.card.world-link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px #111827;
}

.trust-card { display: grid !important; grid-template-columns: auto 1fr; column-gap: 16px; align-content: start; }
/* Groesse, Hintergrund und Symbolmass kommen aus .icon-tile; hier bleiben nur
   die echten Abweichungen des zweispaltigen Karten-Rasters. */
.trust-card .icon-tile { grid-row: 1; margin: 0; }
.trust-card > p, .trust-card > ul, .trust-card > .text-link { grid-column: 1 / -1; }
.trust-card > p { margin-top: 16px; color: var(--text-secondary); }
.trust-card h3 { margin: 0; }
.fact-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 20px; padding: 0; }
.fact-list li {
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--page-primary-soft); color: var(--page-primary-active);
  font-size: 0.78rem; font-weight: 800;
}
html.dark .fact-list li { color: var(--page-primary); }
.text-link { margin-top: auto; color: var(--page-primary-active); font-family: var(--font-display); font-weight: 800; }
html.dark .text-link { color: var(--page-primary); }
.faq-teaser-container { max-width: 860px; }

.cta-status {
  display: inline-flex; margin: 0 auto 14px; padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.48); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12); color: #ffffff;
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 800;
}
@media (max-width: 1060px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero .hero-copy { max-width: 720px; }
  .home-hero h1 { max-width: 14ch; }
  /* Gestapeltes Layout: die Buehne nutzt fast die volle Breite, deshalb kleinerer Versatz,
     damit weder Bild noch Telefon an den Bildschirmrand stossen. */
  .hero-product-stage {
    --hero-art-shift: 2.5%;
    --hero-phone-shift: 2%;
    width: min(100%, 680px); min-height: 500px; margin-inline: auto;
  }
  .audience-grid { grid-template-columns: 1fr; }
  .audience-card { grid-template-columns: 180px 1fr; }
}

@media (max-width: 820px) {
  .hero-proof-grid { grid-template-columns: 1fr; }
  .hero-proof-item + .hero-proof-item { border-left: 0; border-top: 2px solid var(--border-light); }
  .app-gallery {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(clamp(20px, 5vw, 40px) * -1); padding: 8px clamp(20px, 5vw, 40px) 18px;
    scrollbar-width: thin; scrollbar-color: var(--border-secondary) transparent;
  }
  .showcase-card { flex: 0 0 min(76vw, 320px); scroll-snap-align: center; }
  .swipe-hint { display: block; margin: 8px 0 0; text-align: center; color: var(--text-tertiary); font-size: 0.82rem; font-weight: 700; }
  .world-link-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .home-hero { padding-block: 34px 36px; }
  .home-hero-grid { gap: 20px; }
  .home-hero h1 { max-width: none; font-size: clamp(2.2rem, 10vw, 2.5rem); }
  .home-hero .hero-cta { gap: 10px; }
  .home-hero .hero-cta .btn { width: 100%; }
  .home-hero .hero-cta .btn-chunky-secondary {
    width: auto; margin-inline: auto; padding: 0.42rem 0.9rem;
    background: transparent; box-shadow: none; text-decoration: underline !important; text-underline-offset: 3px;
  }
  /* Smartphone: nur noch ein sehr kleiner Versatz, der Rand ist hier knapp. */
  .hero-product-stage { --hero-art-shift: 2%; --hero-phone-shift: 1.5%; min-height: 365px; margin-top: 4px; }
  .hero-artwork { inset: 30px calc(46px + var(--hero-art-shift)) 66px calc(-1 * var(--hero-art-shift)); }
  .hero-phone-preview { width: min(40%, 132px); border-width: 4px; border-radius: 21px; }
  .hero-float-card { padding: 7px 10px; font-size: 0.72rem; }
  .hero-float-card-mission { top: 6px; right: calc(10px + var(--hero-art-shift)); }
  .hero-float-card-stars { left: calc(6px - var(--hero-art-shift)); bottom: 38px; }
  .hero-proof-item { padding: 14px 16px; }
  .proof-icon { flex-basis: 47px; width: 47px; height: 47px; }
  .proof-icon .rr-icon { width: 46px; height: 46px; }
  .benefit-card { min-height: 0; }
  /* Smartphone: die Plakette ragt seitlich statt nach oben heraus, die Nummer
     sitzt wieder in ihrer Ecke. Ein Nummernkreis in der Kartenecke wuerde hier
     bei zweizeiligen Titeln kollidieren, weil die Karte nur noch eine Spalte hat. */
  .step-tiles { --plaque: 60px; --plaque-shift: 12px; --badge: 26px; }
  .step-tiles .steps,
  .step-tiles .grid.cols-3 { padding-top: 0; row-gap: 14px; }
  .step-tiles .step { padding: 16px 18px 16px 58px; }
  .step-tiles .step-marker {
    position: absolute; top: 50%;
    left: calc(-1 * var(--plaque-shift));
    width: var(--plaque); height: var(--plaque); margin: 0;
    transform: translateY(-50%);
  }
  .step-tiles .step .step-emoji {
    inset: 0;
    border-width: 2px; border-radius: 19px; font-size: 1.5rem;
    box-shadow:
      0 4px 0 var(--page-primary-active),
      0 10px 18px -12px var(--page-primary-shadow);
  }
  .step-tiles .step .step-emoji .rr-icon { width: 42px; height: 42px; }
  .step-tiles .step-num {
    top: auto; left: auto; right: -5px; bottom: -5px;
    font-size: 0.76rem;
    box-shadow: 0 2px 0 #d98f10, 0 6px 12px -8px rgba(245, 166, 35, 0.45);
  }
  .step-tiles .step::after { right: 10px; bottom: 8px; width: 72px; height: 72px; }
  .step-tiles .step h3 { margin-bottom: 4px; font-size: 1.12rem; }
  .showcase-card { flex-basis: min(82vw, 304px); }
  .showcase-device { width: min(100%, 198px); }
  .audience-card { grid-template-columns: 84px 1fr; padding: 18px; gap: 14px; }
  .audience-portrait { min-height: 150px; margin: -18px 0 -18px -18px; padding: 12px 4px 0; }
  .audience-card h3 { font-size: 1.1rem; }
  .check-list li { padding-left: 22px; font-size: 0.88rem; }
  .world-link-grid { grid-template-columns: 1fr; gap: 12px; }
  .world-link { min-height: 86px; padding: 14px 16px; }
  .world-link-icon { flex-basis: 54px; width: 54px; height: 54px; }
  .world-link-icon .rr-icon { width: 54px; height: 54px; }
}

/* ---------- 21. Animationen (Tailwind-Keyframes der App) ---------- */
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sparkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } }
@keyframes bounce-in { 0% { transform: translateY(16px) scale(0.95); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.animate-pop { animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.animate-wiggle { animation: wiggle 0.5s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-sparkle { animation: sparkle 2s ease-in-out infinite; }

/* Reveal-on-Scroll (JS-gated: ohne JS sofort sichtbar) */
html.js .reveal { opacity: 0; transform: translateY(18px) scale(0.98); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- 22. To-Top + Scroll-Fortschritt ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 140; pointer-events: none; }
.scroll-progress-bar {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--star-gold), var(--star-gold-deep));
}
.to-top {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--page-primary); color: #ffffff;
  box-shadow: 0 4px 0 var(--page-primary-active), 0 8px 20px -6px var(--page-primary-shadow);
  display: none; align-items: center; justify-content: center;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.to-top.visible { display: flex; }
.to-top:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--page-primary-active); }
.to-top .icon { width: 30px; height: 30px; object-fit: contain; }

/* Konfetti-Canvas */
.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 150; }

/* Bild-Lightbox (Content-Bilder klickbar zum Zoomen, JS-gated via .zoomable) */
img.zoomable { cursor: zoom-in; }
/* Der Rahmen des Hero-Familienbildes schneidet mit overflow:hidden alles ab, was
   ausserhalb des Bildes liegt -- der globale Fokusring waere dort unsichtbar.
   Rueckfall (Browser ohne :has): Ring nach innen ziehen. */
.hero-artwork img.zoomable:focus-visible { outline-offset: -6px; box-shadow: none; }
/* Besser: der Ring wandert auf den Rahmen selbst, dort schneidet ihn nichts ab
   und er sieht aus wie ueberall sonst (weiss auf dunkler Unterlegung). */
.hero-artwork:has(img.zoomable:focus-visible) > img { outline: none; }
.hero-artwork:has(img.zoomable:focus-visible) {
  outline: 3px solid #ffffff; outline-offset: 2px;
  box-shadow: 0 0 0 7px #111827, 0 18px 34px -20px var(--shadow-hover-color);
}
html.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  /* Backdrop bewusst theme-unabhaengig dunkel (Nachtlager-Navy) */
  background: rgba(11, 16, 34, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-figure {
  margin: 0; min-height: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-img {
  max-width: min(1100px, 100%); max-height: 80vh; width: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-caption {
  color: #e7ebf6; font-size: 0.95rem; font-weight: 600;
  text-align: center; max-width: 720px;
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-close img { width: 30px; height: 30px; object-fit: contain; }

/* ---------- 23. 404 ---------- */
.page-404 { text-align: center; padding-block: clamp(40px, 8vw, 90px); }
.page-404 .erik-404 { width: min(300px, 62vw); margin: 0 auto 20px; }

/* ---------- 23b. Auth-Einmal-Links ---------- */
.page-auth { --auth-card-width: 660px; }
.auth-page-main {
  position: relative; isolation: isolate; min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h)); overflow: hidden;
  padding: clamp(30px, 6vw, 76px) clamp(16px, 4vw, 32px);
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--page-primary) 18%, transparent) 0 11rem, transparent 11.2rem),
    radial-gradient(circle at 90% 82%, color-mix(in srgb, var(--star-gold) 18%, transparent) 0 14rem, transparent 14.2rem),
    var(--surface-secondary);
}
.auth-page-glow {
  position: absolute; z-index: -1; inset: 12% 50% auto auto;
  width: 420px; height: 420px; border-radius: 50%;
  translate: 50% 0; filter: blur(90px); opacity: 0.18;
  background: var(--page-primary); pointer-events: none;
}
.auth-shell { width: min(100%, var(--auth-card-width)); margin-inline: auto; }
.auth-card {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(24px, 5vw, 46px); border-radius: clamp(24px, 5vw, 36px);
  background: var(--surface-primary); border: 2px solid var(--border-primary);
  box-shadow: 0 9px 0 color-mix(in srgb, var(--page-primary) 36%, var(--border-secondary)),
              0 24px 60px -28px var(--shadow-hover-color);
}
.auth-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 8px;
  background: linear-gradient(90deg, var(--page-grad-from), var(--star-gold), var(--page-grad-to));
}
.auth-brand {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: clamp(14px, 3vw, 24px); color: var(--brand-strong);
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 800;
}
.auth-brand-icon { width: 36px; height: 36px; }
.auth-state[hidden] { display: none !important; }
.auth-state.is-active { animation: bounce-in 0.34s ease-out both; }
.auth-state .eyebrow { margin-inline: auto; }
.auth-eyebrow-success { color: var(--rr-success); background: var(--rr-success-soft); }
.auth-eyebrow-error { color: var(--rr-danger); background: var(--rr-danger-soft); }
.auth-art {
  width: min(225px, 58vw); height: 210px; margin: 4px auto 8px;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 14px 16px rgba(23, 29, 52, 0.16));
}
.auth-art-compact { height: 165px; width: min(190px, 52vw); }
.auth-card h1 { font-size: clamp(1.9rem, 6vw, 2.75rem); margin-bottom: 0.32em; }
.auth-card h2 { font-size: clamp(1.35rem, 4vw, 1.72rem); }
.auth-lead {
  max-width: 520px; margin: 0 auto clamp(20px, 4vw, 30px);
  color: var(--text-secondary); font-size: clamp(1rem, 2.5vw, 1.08rem);
}
.auth-action-form, .auth-password-form { display: grid; gap: 16px; }
.auth-action-form .btn, .auth-password-form .btn { justify-self: center; min-width: min(100%, 285px); }
.auth-security-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 18px 0 0; color: var(--text-tertiary); font-size: 0.86rem;
}
.auth-security-note .rr-icon { width: 23px; height: 23px; flex: 0 0 23px; }
.auth-field { display: grid; gap: 7px; text-align: left; font-weight: 800; }
.auth-field input {
  width: 100%; min-height: 52px; border: 2px solid var(--border-secondary);
  border-radius: 15px; padding: 11px 14px; font: inherit; color: var(--text-primary);
  background: var(--surface-secondary); outline: none;
}
.auth-field input:focus { border-color: var(--page-primary); box-shadow: 0 0 0 4px var(--page-primary-soft); }

/* Ankreuz- und Auswahlfelder im Nachtlager.
   accent-color faerbt nur den ANGEHAKTEN Zustand. Solange nichts angehakt ist,
   zeichnet der Browser sein Standardkaestchen - und das ist ohne Zusage ueber
   das Farbschema IMMER hell: ein reinweisses Quadrat und damit das hellste
   Element auf einer dunklen Seite. Die Zusage steht hier nur an den Feldern
   selbst und nicht an :root, damit sich sonst nichts am Aussehen aendert.
   Zwei Regeln, weil der Nachtmodus auf zwei Wegen entsteht: per Klasse (mit
   JavaScript umgeschaltet) und ueber die Systemeinstellung (ohne). */
html.dark input[type="checkbox"],
html.dark input[type="radio"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html.no-js input[type="checkbox"],
  html.no-js input[type="radio"] { color-scheme: dark; }
}
.auth-alert {
  display: flex; align-items: center; gap: 9px; text-align: left;
  margin: 0 0 18px; padding: 12px 14px; border-radius: 15px; font-weight: 700;
}
.auth-alert .rr-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.auth-alert-error { color: var(--rr-danger); background: var(--rr-danger-soft); }
/* "Zur App": erste Hilfe im Erfolgs- und im Abgelaufen-Zustand. Bis die
   Plattform-Erkennung greift, traegt der Block hidden - deshalb hier kein
   eigenes display, sonst gewaenne es gegen hidden. */
.auth-open-app { display: grid; gap: 10px; justify-items: center; margin-bottom: 14px; }
.auth-open-app[hidden] { display: none; }
.auth-open-app > .btn { min-width: min(100%, 285px); justify-content: center; }
.auth-open-app-hint {
  max-width: 420px; margin: 0; color: var(--text-tertiary); font-size: 0.86rem;
}
.auth-open-app-hint[hidden] { display: none; }
.auth-store-picker {
  margin-top: clamp(24px, 5vw, 36px); padding-top: clamp(22px, 4vw, 30px);
  border-top: 2px solid var(--border-light);
}
.auth-store-picker > p { max-width: 500px; margin-inline: auto; color: var(--text-secondary); }
.auth-store-detected {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; margin-bottom: 10px !important; padding: 6px 12px;
  color: var(--page-primary-active) !important; background: var(--page-primary-soft);
  border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* Die Auth-Seiten tragen seit 2026-08-18 dieselben OFFIZIELLEN Store-Grafiken
   wie die Startseite (.store-art). Zwei Unterschiede bleiben, weil sie auf
   einer HELLEN Karte stehen und nicht im dunklen CTA-Band:
     1. der Hinweis "in Kuerze" braucht dunkle Schrift, sonst steht Weiss
        auf Weiss;
     2. die Hervorhebung des erkannten Geraets darf keinen Rahmen setzen —
        die Grafiken duerfen laut beiden Stores nicht beschnitten oder
        ueberlagert werden, deshalb ein Schein AUSSEN herum. */
.auth-store-art {
  opacity: 0.72; border-radius: 12px;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.auth-store-art.is-recommended {
  opacity: 1; transform: translateY(-3px);
  box-shadow: 0 0 0 4px var(--star-gold-soft), 0 0 0 6px var(--star-gold);
}
.auth-store-art.soon.is-recommended { transform: none; }
.auth-store-art .store-art-note {
  background: var(--surface-tertiary); color: var(--text-secondary);
  border: 1px solid var(--border-primary); box-shadow: none;
}
.auth-card > .auth-state > .btn { min-width: min(100%, 285px); justify-content: center; }
.auth-state form[aria-busy='true'] .btn { opacity: 0.72; cursor: wait; }

@media (max-width: 560px) {
  .auth-page-main { padding: 18px 12px 38px; }
  .auth-card { padding: 24px 18px 30px; border-radius: 26px; }
  .auth-art { height: 170px; width: min(190px, 56vw); }
  .auth-art-compact { height: 140px; }
  .auth-action-form .btn, .auth-password-form .btn, .auth-card > .auth-state > .btn { width: 100%; }
  .auth-open-app { justify-items: stretch; }
  .auth-open-app > .btn { width: 100%; }
  .auth-store-picker .store-badges { align-items: stretch; }
  .auth-store-badge { width: 100%; }
}

/* ---------- 24. Responsive ---------- */
@media (max-width: 1020px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .split > .split-media, .split.flip > .split-media { order: 0; }
  .hero-erik { right: 2px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .span-2 { grid-column: span 2; }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface-primary); border-bottom: 2px solid var(--border-light);
    box-shadow: 0 18px 30px -12px var(--shadow-hover-color);
    flex-direction: column; align-items: stretch; padding: 14px clamp(20px, 5vw, 40px) 20px; gap: 4px;
  }
  .site-header.open .nav-menu { display: flex; }
  .nav-menu a:not(.btn) { padding: 12px 16px; font-size: 1.08rem; }
  .nav-menu .btn { margin: 10px 0 0; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .tiers { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento .span-2 { grid-column: span 1; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  details.toc ol { columns: 1; }
  .hero-erik { width: 104px; bottom: -10px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr 1fr; padding: 24px 18px; }
  .doc-hub .doc-date { margin-left: 0; width: 100%; }
  .hero-cta .btn { flex: 1 1 auto; }
  .store-badge { flex: 1 1 46%; justify-content: center; }
  .nav { gap: 8px; }
  .brand-name { font-size: 1.12rem; }
  .brand-icon { width: 32px; height: 32px; }
  /* Deko-Sterne stoeren auf kleinen Screens den Textfluss */
  .hero > .floaties { display: none; }
  .to-top { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 46px; height: 46px; }
}
@media (max-width: 440px) {
  .store-badges { flex-direction: column; align-items: center; }
  .store-badge { flex: 0 1 auto; width: min(100%, 270px); }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
  .home-hero { padding-top: 24px; }
  .home-hero .lead { font-size: 1rem; line-height: 1.55; }
}
@media (max-width: 360px) {
  .to-top { display: none !important; }
}

/* ---------- 25. Reduced Motion (wie in der App) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-float, .animate-sparkle, .animate-wiggle, .floaty, .img-placeholder .blob { animation: none !important; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .rr-progress-fill { transition: none; }
  .lightbox, .lightbox-img { transition: none; }
  .step-tiles .step .step-emoji { transition: none; }
  .step-tiles .step:hover .step-emoji { transform: rotate(-3deg); }
}

/* ---------- 26. Print ---------- */
@media print {
  .site-header, .site-footer, .to-top, .scroll-progress, .hero-cta, .cta-band { display: none !important; }
}

/* ---------- 27. no-js-Fallbacks ---------- */
/* Ohne JavaScript sind Kopier-Button und FAQ-Filter funktionslos -> ausblenden */
html.no-js [data-copy],
html.no-js .faq-filter { display: none !important; }

/* ---------- 28. Klartext-Liste auf der Sicherheitsseite ---------- */
/* Die Punkte tragen dieselben BILDER wie die App (icon-check / icon-cross).
   Mit Flex bleibt eine umgebrochene Zeile am Text ausgerichtet statt unter das
   Symbol zu rutschen - bei den Emoji vorher lief die zweite Zeile bis an den
   linken Rand und die Liste zerfiel optisch. */
.klartext-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .45rem;
}
.klartext-icon {
  flex: 0 0 auto;
  margin-top: .15em;
}