/* Marlow · Website-Stil November 2026
   Ein Stylesheet für alle Seiten. Alles baut auf den Tokens unten auf:
   keine freien Pixelwerte für Abstände, Schriftgrößen, Zeilenhöhen oder Radien.

   ABSTÄNDE   8er-Raster: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128
   SEKTIONEN  Abstand zwischen Sektionen: 128 (Desktop) · 96 (Tablet) · 64 (Handy)
   TYPO       Größe / Zeilenhöhe (Zeilenhöhen immer Vielfache von 4)
              Display 72/76 · 56/60 · 40/44
              H2      48/52 · 40/44 · 32/36
              H3      32/40 · 28/36 · 24/32
              H4      24/32
              Titel   20/28
              Lead    20/32 · 18/28
              Text    17/28 · 16/24
              Klein   14/20
              Mini    12/16
   RADIUS     6 (Etiketten) · 10 (Buttons) · 16 (Karten) · 24 (Flächen)
   KACHELN    Bildfläche 320 (Desktop) / 288 (Handy) hoch
   KARTEN     Innenabstand 32 (Desktop) / 24 (Handy), Abstand im Raster 24 / 16
   FARBE      Orange nur für Aktionen und Akzente, Grün nur für gesparte Euro. */

:root {
  /* Farben */
  --bg: #FBF9F5;
  --surface: #FFFFFF;
  --sand: #F3EEE5;
  --sand-2: #EAE3D7;
  --line: #E4DCCF;
  --ink: #1B1813;
  --ink-2: #3D372F;
  --muted: #6B6358;
  --orange: #B25A26;
  --orange-ink: #973F12;
  --orange-soft: #F6E7DB;
  --green: #2A7350;
  --green-soft: #E3F0E8;

  /* Abstände */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: var(--s-10);
  --gutter: var(--s-6);
  --card-pad: var(--s-6);
  --grid-gap: var(--s-5);
  --split-gap: var(--s-9);

  /* Typo */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: 72px; --lh-display: 76px;
  --fs-h2: 48px;      --lh-h2: 52px;
  --fs-h3: 32px;      --lh-h3: 40px;
  --fs-h4: 24px;      --lh-h4: 32px;
  --fs-title: 20px;   --lh-title: 28px;
  --fs-lead: 20px;    --lh-lead: 32px;
  --fs-body: 17px;    --lh-body: 28px;
  --fs-small: 14px;   --lh-small: 20px;
  --fs-mini: 12px;    --lh-mini: 16px;

  /* Radien */
  --r-tag: 6px;
  --r-btn: 10px;
  --r-card: 16px;
  --r-panel: 24px;

  --wrap: 1200px;
  --shadow-card: 0 24px 48px -24px rgba(27, 24, 19, .28);
}
@media (max-width: 960px) {
  :root {
    --section: var(--s-9);
    --split-gap: var(--s-7);
    --fs-display: 56px; --lh-display: 60px;
    --fs-h2: 40px;      --lh-h2: 44px;
    --fs-h3: 28px;      --lh-h3: 36px;
  }
}
@media (max-width: 600px) {
  :root {
    --section: var(--s-8);
    --gutter: var(--s-5);
    --card-pad: var(--s-5);
    --grid-gap: var(--s-4);
    --fs-display: 40px; --lh-display: 44px;
    --fs-h2: 32px;      --lh-h2: 36px;
    --fs-h3: 24px;      --lh-h3: 32px;
    --fs-lead: 18px;    --lh-lead: 28px;
    --fs-body: 16px;    --lh-body: 24px;
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-body) / var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
sup { font-size: .6em; line-height: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-3); top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: var(--s-2) var(--s-4); border-radius: var(--r-btn); text-decoration: none; }
.skip-link:focus { top: var(--s-3); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(800px + 2 * var(--gutter)); }

/* ---------- Typo ---------- */
.kicker { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--orange); margin-bottom: var(--s-4); }
.h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.025em; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.02em; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: -0.015em; }
.title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.01em; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); max-width: 34em; }
.small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.muted { color: var(--muted); }
.euro-green { color: var(--green); }
.h1 + .lead, .h2 + .lead, .h3 + .lead { margin-top: var(--s-5); }

/* ---------- Buttons und Links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 48px; padding: 0 var(--s-5); border-radius: var(--r-btn);
  font: 600 16px/1 var(--font); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background-color .2s, border-color .2s, color .2s;
}
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-ink); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.text-link { display: inline-flex; gap: var(--s-1); align-items: center; font-weight: 600; color: var(--orange); text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.store-badges { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.store-badges a { display: block; border-radius: var(--r-btn); }
.store-badges img { height: 48px; width: auto; }
@media (max-width: 600px) { .store-badges { gap: var(--s-2); } .store-badges img { height: 40px; } }

.tag { display: inline-block; font-size: var(--fs-mini); line-height: var(--lh-mini); font-weight: 600; padding: var(--s-1) var(--s-2); border-radius: var(--r-tag); white-space: nowrap; }
.tag--orange { color: var(--orange); background: var(--orange-soft); }
.tag--green { color: var(--green); background: var(--green-soft); }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(251, 249, 245, .9); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: var(--s-6); height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 600; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: var(--r-tag); }
.nav__links { display: flex; gap: var(--s-6); margin-left: auto; }
.nav__links a { text-decoration: none; font-size: 15px; line-height: var(--lh-small); font-weight: 500; color: var(--ink-2); }
.nav__links a:hover { color: var(--orange); }
.nav .btn { height: 40px; padding: 0 var(--s-4); font-size: 15px; }
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .nav__inner { height: 64px; }
}

/* ---------- Sektionen ----------
   Jede Sektion bringt nur ihren Abstand nach oben mit. So ist der Abstand
   zwischen zwei Sektionen überall gleich groß. */
.section { padding-top: var(--section); }
.section-head { max-width: 800px; margin-bottom: var(--s-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
@media (max-width: 600px) { .section-head { margin-bottom: var(--s-7); } }

/* ---------- Medien ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--sand-2); }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
/* Video liegt über dem Standbild und wird erst sichtbar, wenn es wirklich läuft.
   Startet es nicht (iOS-Stromsparmodus, reduzierte Bewegung, kein JS), bleibt das Foto stehen. */
.media > video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.media > video.is-playing { opacity: 1; }
.media > video::-webkit-media-controls,
.media > video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.media[data-ratio="4/5"] { aspect-ratio: 4 / 5; }
.media[data-ratio="1/1"] { aspect-ratio: 1 / 1; }
.media.fill { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
/* Platzhalter, bis ein Gemini-Bild im Ordner liegt (GEMINI_PROMPTS.md). */
.ph { background: repeating-linear-gradient(135deg, var(--sand-2) 0 14px, #E3DACB 14px 15px); }
.ph__label { position: absolute; left: var(--s-4); bottom: var(--s-4); max-width: calc(100% - 2 * var(--s-4)); font: 500 var(--fs-mini) / var(--lh-mini) ui-monospace, Menlo, monospace; color: var(--muted); background: rgba(255, 255, 255, .85); border-radius: var(--r-tag); padding: var(--s-2) var(--s-3); }
/* Kennzeichnung KI-erzeugter Fotos und Videos (EU AI Act Art. 50 Abs. 4). */
.ai-label { position: absolute; z-index: 1; left: var(--s-3); bottom: var(--s-3); font-size: var(--fs-mini); line-height: var(--lh-mini); font-weight: 600; color: #fff; background: rgba(27, 24, 19, .62); padding: var(--s-1) var(--s-2); border-radius: var(--r-tag); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- App-Screen ----------
   Kein Gerät drumherum: der echte Screen mit Display-Rundung, feiner Kante und weichem Schatten. */
.phone { position: relative; }
.phone img {
  width: 100%; border-radius: 13% / 6%; background: #F1ECE1;
  box-shadow: 0 0 0 1px rgba(27, 24, 19, .08), 0 2px 4px rgba(27, 24, 19, .06), 0 32px 64px -24px rgba(27, 24, 19, .38);
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--s-4); }
.hero__panel { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r-panel); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; }
.hero__copy { padding: var(--s-9) var(--s-8); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.hero__copy .h1 { max-width: 11ch; }
.hero__copy .lead { color: var(--ink-2); }
.hero__copy .store-badges { margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); }
.hero__media { position: relative; }
.hero__media .fill > img, .hero__media .fill > video { object-position: 50% 0%; }
.hero__media .ai-label, .hero__media .ph__label { left: auto; right: var(--s-3); }
.phone.hero__phone { position: absolute; z-index: 3; left: calc(-1 * var(--s-8)); bottom: var(--s-7); width: 216px; }
.hero__chip { position: absolute; z-index: 4; right: var(--s-6); top: var(--s-6); background: var(--surface); border-radius: var(--r-card); padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-card); }
.hero__chip .small { display: block; }
.hero__chip .chip-value { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--green); }
@media (max-width: 960px) {
  .hero__panel { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: var(--s-8) var(--s-6) var(--s-7); }
  .hero__media { aspect-ratio: 4 / 5; }
  .phone.hero__phone { left: var(--s-4); bottom: var(--s-4); width: 136px; }
  .hero__chip { right: var(--s-4); top: auto; bottom: var(--s-8); padding: var(--s-3) var(--s-4); }
  .hero__chip .chip-value { font-size: 24px; line-height: 32px; }
}
@media (max-width: 600px) { .hero__copy { padding: var(--s-7) var(--s-4) var(--s-6); } }

/* ---------- Presse ---------- */
.press { padding-top: var(--s-8); }
.press__label { text-align: center; margin-bottom: var(--s-5); }
.press__marks { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-4) var(--s-6); }
/* Echte Wortmarken, grau wie bei Finanzguru; Farbe erst beim Hover. Höhen je Logo von Hand
   austariert, weil die Proportionen von fast quadratisch (NDR) bis 9:1 (Südwest Presse) reichen. */
.press__mark { display: block; line-height: 0; filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
a.press__mark:hover { filter: none; opacity: 1; }
.press__mark img { display: block; width: auto; max-width: none; height: 22px; }
.press__mark--faz img { height: 24px; }
.press__mark--ndr img { height: 40px; }
.press__mark--ha img { height: 20px; }
.press__mark--swp img { height: 16px; }
.press__mark--nn img { height: 30px; }
.press__mark--nk img { height: 22px; }
.press__caption { text-align: center; margin-top: var(--s-5); }
/* Handy: kleinere Höhen und engere Abstände, damit die sechs Logos in zwei Reihen à drei passen
   (Reihe 1 ≈ 307 px, Reihe 2 ≈ 294 px; reicht bis 360 px Bildschirmbreite). */
@media (max-width: 600px) {
  .press { padding-top: var(--s-7); }
  .press__label { margin-bottom: var(--s-4); }
  .press__marks { gap: var(--s-4) var(--s-3); }
  .press__caption { margin-top: var(--s-4); }
  .press__mark--faz img { height: 17px; }
  .press__mark--ndr img { height: 29px; }
  .press__mark--ha img { height: 14px; }
  .press__mark--swp img { height: 12px; }
  .press__mark--nn img { height: 22px; }
  .press__mark--nk img { height: 16px; }
}

/* ---------- Karten ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--card-pad); display: flex; flex-direction: column; }

/* ---------- Funktions-Kacheln (wie Finanzguru: Titel, ein Satz, Bild) ---------- */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--grid-gap); }
.tile { grid-column: span 2; background: var(--sand); border-radius: var(--r-panel); overflow: hidden; display: flex; flex-direction: column; }
.tile--wide { grid-column: span 3; }
.tile__copy { padding: var(--card-pad) var(--card-pad) 0; flex: 1; }
/* Text oben, Bild immer unten bündig: so stehen die Bilder einer Reihe auf gleicher Höhe. */
.tile__copy p { margin-top: var(--s-2); color: var(--muted); }
.tile__visual { --visual-h: 320px; position: relative; height: var(--visual-h); margin-top: var(--s-6); display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.tile__visual .media.fill { inset: 0; }
/* App-Screen schaut von unten in die Kachel, die Unterkante ist bewusst angeschnitten. */
.tile__visual .phone { position: relative; z-index: 2; width: 220px; }
.tile__visual--photo .phone { margin-top: var(--s-6); }
.tile__visual--center { align-items: center; }
.tile .ai-label { z-index: 4; left: auto; bottom: auto; top: var(--s-3); right: var(--s-3); }
.tile__visual--center .ai-label { top: auto; bottom: var(--s-3); }
@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--wide { grid-column: span 1; }
  .tile:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr; }
  .tile:last-child { grid-column: auto; }
  .tile__visual { --visual-h: 288px; }
  .tile__visual .phone { width: 200px; }
}

/* Gebaute Grafik: beste Tankzeit */
.timecard { position: relative; z-index: 2; width: calc(100% - 2 * var(--card-pad)); max-width: 360px; background: var(--surface); border-radius: var(--r-card); padding: var(--s-5); box-shadow: var(--shadow-card); }
.timecard__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.timecard__bars { display: grid; grid-template-columns: repeat(18, 1fr); align-items: end; gap: var(--s-1); height: 96px; margin-top: var(--s-4); }
.timecard__bars span { display: block; background: var(--sand-2); border-radius: 3px 3px 0 0; }
.timecard__bars span.is-best { background: var(--orange); }
.b30 { height: 30%; } .b32 { height: 32%; } .b34 { height: 34%; } .b46 { height: 46%; } .b52 { height: 52%; } .b58 { height: 58%; }
.b62 { height: 62%; } .b64 { height: 64%; } .b66 { height: 66%; } .b68 { height: 68%; } .b70 { height: 70%; } .b72 { height: 72%; }
.b74 { height: 74%; } .b78 { height: 78%; } .b80 { height: 80%; } .b86 { height: 86%; } .b88 { height: 88%; } .b92 { height: 92%; }
.timecard__foot { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-small); }
.timecard__note { margin-top: var(--s-2); font-size: var(--fs-mini); line-height: var(--lh-mini); color: var(--muted); }
@media (max-width: 600px) { .timecard { padding: var(--s-4); } .timecard__bars { gap: 3px; } }

/* ---------- Zahlenband ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.stat { border-top: 2px solid var(--ink); padding-top: var(--s-5); display: flex; flex-direction: column; }
.stat--green { border-top-color: var(--green); }
.stat__value { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.stat--green .stat__value { color: var(--green); }
.stat__label { margin-top: var(--s-3); color: var(--muted); }
.stats__note { margin-top: var(--s-6); max-width: 60em; }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-7); } }
@media (max-width: 600px) { .stats { row-gap: var(--s-6); } .stat { padding-top: var(--s-4); } .stat__value { font-size: var(--fs-h4); line-height: var(--lh-h4); white-space: normal; } .stat__label { margin-top: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); } }

/* ---------- Preise ---------- */
.plan__head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--muted); }
.plan__price { margin-top: var(--s-4); font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.03em; }
.plan__per { margin-top: var(--s-2); }
.plan__list { list-style: none; padding: var(--s-5) 0 0; margin: var(--s-5) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-3); }
.plan__list li { position: relative; padding-left: var(--s-6); }
.plan__list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 14px; height: 8px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
.card--featured { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.plans__foot { margin-top: var(--s-6); text-align: center; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Gründer ---------- */
.founders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--split-gap); align-items: center; }
.founders img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-panel); }
.founders .lead + .lead { margin-top: var(--s-4); }
.founders__sig { margin-top: var(--s-6); font-weight: 600; }
@media (max-width: 860px) { .founders { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange); }
.faq__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: transform .25s ease; }
.faq details[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 var(--s-7) var(--s-5) 0; color: var(--muted); }
.faq__a p + p { margin-top: var(--s-3); }
.faq__a a { color: var(--orange); }
.faq__more { margin-top: var(--s-6); }
@media (max-width: 600px) { .faq summary { font-size: 18px; line-height: 24px; } .faq__a { padding-right: 0; } }

/* ---------- Abschluss-CTA ---------- */
.cta { position: relative; overflow: hidden; background: var(--orange); color: #fff; border-radius: var(--r-panel); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cta__copy { padding: var(--s-9) var(--s-8); }
.cta .h2 { max-width: 13ch; }
.cta .lead { color: rgba(255, 255, 255, .88); }
.cta__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; }
.cta__qr { display: flex; gap: var(--s-4); align-items: center; }
.cta__qr img { width: 96px; height: 96px; border-radius: var(--r-btn); background: #fff; padding: var(--s-2); }
.cta__qr p { font-size: var(--fs-small); line-height: var(--lh-small); color: rgba(255, 255, 255, .88); max-width: 14ch; }
.cta__media { position: relative; min-height: 400px; }
@media (max-width: 960px) {
  .cta { grid-template-columns: 1fr; }
  .cta__copy { padding: var(--s-8) var(--s-6); }
  .cta__media { min-height: 0; aspect-ratio: 3 / 2; }
  .cta__qr { display: none; }
}
@media (max-width: 600px) { .cta__copy { padding: var(--s-7) var(--s-5); } }

/* ---------- Footer ---------- */
.footer { margin-top: var(--section); border-top: 1px solid var(--line); padding: var(--s-8) 0 var(--s-6); font-size: 15px; line-height: 24px; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); }
.footer__about p { margin-top: var(--s-4); color: var(--muted); max-width: 30ch; }
.footer h2 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--muted); margin-bottom: var(--s-4); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer a { text-decoration: none; color: var(--ink-2); }
.footer a:hover { color: var(--orange); }
.footer__notes { margin-top: var(--s-7); display: grid; gap: var(--s-1); max-width: 80ch; font-size: var(--fs-mini); line-height: var(--lh-mini); color: var(--muted); }
.footer__meta { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__about { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  .footer__grid > div:last-child { grid-column: 1 / -1; }
}

/* ---------- Unterseiten ---------- */
.page-head { padding-top: var(--s-9); }
.page-head .h1 { max-width: 16ch; }
.back-link, .legal__back { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); text-decoration: none; }
.back-link:hover, .legal__back:hover { color: var(--orange); }
.jump { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); }
.jump a { font-size: 15px; line-height: 24px; font-weight: 500; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.jump a:hover { color: var(--orange); border-color: var(--orange); }

.faqsec { scroll-margin-top: var(--s-8); }
.faqsec:first-of-type { margin-top: var(--s-8); }
.faqcat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--split-gap); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.faqcat__num { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--orange); }
.faqcat__title { margin-top: var(--s-2); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.02em; }
.faqcat__note { margin-top: var(--s-3); max-width: 28ch; color: var(--muted); }
.faqcat .faq { border-top: 0; }
.faqcat .faq details:first-child summary { padding-top: 0; }
@media (min-width: 861px) { .faqcat__aside { position: sticky; top: var(--s-9); align-self: start; } }
@media (max-width: 860px) { .faqcat { grid-template-columns: 1fr; gap: var(--s-5); } }

.support { margin-top: var(--s-8); background: var(--sand); border-radius: var(--r-panel); padding: var(--s-8) var(--card-pad); text-align: center; }
.support .lead { margin-inline: auto; }
.support__row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }

/* Rechtstexte: Inhalt unverändert, nur gesetzt */
.legal { padding-top: var(--s-9); }
.legal__container { max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.legal h1, .legal h2, .legal h3, .legal p, .legal li { overflow-wrap: break-word; hyphens: auto; }
.legal h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.025em; margin-bottom: var(--s-4); hyphens: auto; }
.legal h2 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.01em; margin: var(--s-7) 0 var(--s-3); scroll-margin-top: var(--s-9); }
.legal h3 { font-size: var(--fs-body); line-height: var(--lh-body); margin: var(--s-5) 0 var(--s-2); }
.legal p, .legal li { color: var(--ink-2); }
.legal p + p { margin-top: var(--s-3); }
.legal ul, .legal ol { padding-left: var(--s-5); margin: var(--s-3) 0; }
.legal li + li { margin-top: var(--s-2); }
.legal a { color: var(--orange); text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0; display: block; overflow-x: auto; font-size: 15px; line-height: 24px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); }
.legal th { font-weight: 600; background: var(--sand); }
.legal__sub { color: var(--muted); margin-bottom: var(--s-5); }
.legal__meta { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }

/* Laden-Seite */
.laden { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-7) var(--gutter); }
.laden .brand { margin-bottom: var(--s-6); }
.laden .lead { margin-top: var(--s-4); }
.laden .store-badges { justify-content: center; margin-top: var(--s-6); }
.laden__qr { margin-top: var(--s-6); display: none; }
@media (min-width: 861px) { .laden__qr { display: block; } }
.laden__qr img { width: 168px; height: 168px; margin-inline: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: #fff; padding: var(--s-3); }
.laden__qr p { margin-top: var(--s-3); }
.laden__back { margin-top: var(--s-6); }

/* ---------- Dezente Einblendung (nur mit JS, nie bei reduzierter Bewegung) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }