/* Gemeinsame Landingpage-Schicht. Vorher stand dieser Block dreimal: inline in
   index.html, inline in preise.html und noch einmal in legal.css — mit bereits
   auseinanderlaufenden Werten (Radius mal als Variable, mal hart 24px).
   Eine Quelle, alle vier Seiten importieren sie.

   Radien: die Landingpage hatte eine eigene, weichere Clay-Sprache (20 / 24) neben
   der des Designsystems (12 / 10 / 8). Zwei Formensprachen in einem Produkt.
   Aufgegeben - es gilt jetzt eine Skala, die aus tokens/spacing.css kommt. Die
   beiden Namen bleiben nur als Alias bestehen, damit vorhandenes Markup und der
   Rundungs-Regler im Tweaks-Panel weiter greifen. */
:root{--r-lp:var(--r);--r-lp-big:var(--r)}

body{margin:0;background:var(--bg)}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase}
h2{font-family:var(--font-display);font-size:clamp(28px,3.4vw,40px);font-weight:var(--fw-display);line-height:var(--lh-tight);margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
h1{text-wrap:balance}
.sub{color:var(--text-2);max-width:58ch;margin:0;text-wrap:pretty}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Eine Regel fuer den primaeren CTA, nicht drei Auspraegungen wie vorher
   (Header tintenschwarz, Hero orange, Final-CTA teal - gleiche Beschriftung,
   drei Erscheinungen). Primaer ist .pill-accent. Einzige Ausnahme ist die dunkle
   Markenflaeche im Hero, dort .pill-warm als Feld-Inverse: Teal auf Teal traegt
   dort nicht. .pill-solid bleibt fuer sekundaere Solid-Faelle. */
/* Klassenname historisch. Die Form ist keine Kapsel mehr, sondern folgt --r-ctl. */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;
  border-radius:var(--r-ctl);font-weight:var(--fw-medium);font-size:var(--fs-body);text-decoration:none;
  white-space:nowrap;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.pill:hover{text-decoration:none}
/* --btn-solid-* dreht mit dem Theme. Vorher: background:var(--text-1);color:#fff —
   im Dark Mode also weiß auf #E9F2F3, 1.14:1. */
.pill-solid{background:var(--btn-solid-bg);color:var(--btn-solid-fg)}
.pill-solid:hover{background:var(--accent-strong);color:var(--on-accent)}
.pill-accent{background:var(--accent);color:var(--on-accent)}
.pill-accent:hover{background:var(--accent-strong);color:var(--on-accent)}
/* Weiß auf --brand-warm erreicht nur 2.93:1. --on-warm ist die dunkle Tinte. */
.pill-warm{background:var(--brand-warm);color:var(--on-warm)}
.pill-warm:hover{background:var(--brand-warm-deep);color:var(--brand-warm-dim)}
.pill-line{background:var(--surface);color:var(--text-1);border:1px solid var(--line-strong)}
.pill-line:hover{background:var(--surface-2);color:var(--text-1)}
.pill:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface)}
.arrow{font-family:var(--font-mono)}

.card24{background:var(--surface);border-radius:var(--lp-r-big,var(--r-lp-big));box-shadow:var(--shadow-card)}

/* Noch offene Ziele. Vorher standen dafür Links auf href="#" — tote Sprungziele,
   die Tastatur und Screenreader ins Leere führen. Gleiche Konvention wie .fill in
   den Rechtstexten: sichtbar markiert statt still kaputt. */
.lp-todo{font-family:var(--font-mono);font-size:var(--fs-sm);background:var(--warn-dim);color:var(--warn);
  border-radius:var(--r-sm);padding:2px 8px;white-space:nowrap}

/* ── Entrance ────────────────────────────────────────────────────────────── */
/* Das DS gibt "Hero komplett < 0,6s" vor. Mit --dur-reveal .7s plus .26s Verzögerung
   waren es 0,96s. Die Landingpage nutzt daher eine eigene, kürzere Reveal-Dauer
   und staffelt in 60ms-Schritten. */
/* Der Startzustand steht im Keyframe, NICHT in der Basisregel. Stand er dort
   (`.reveal{opacity:0}`), war der Inhalt unsichtbar, sobald die Animation nicht
   lief - in einem verborgenen Tab, in Headless-Renderern, in Vorschau-iframes.
   So ist der sichtbare Zustand der Normalfall und die Animation nur Zugabe. */
.reveal{animation:rv .42s var(--ease) both}
.reveal-1{animation-delay:.06s}.reveal-2{animation-delay:.12s}.reveal-3{animation-delay:.18s}
@keyframes rv{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* Vorher gestapelt: Bildband mit max-height:56vh oben, Text darunter. Auf einem
   Laptop mit rund 900px Höhe blieb von der H1 die Hälfte übrig, beide CTAs und
   die Kostenlos-Zeile lagen unter der Falz. Jetzt teilen sich Text und Bild die
   Falz. Der Anforderungskatalog verlangt genau ein Visual oberhalb der Falz -
   das ist weiter erfüllt, es steht nur nicht mehr im Weg. */
/* Vollbreites Band über dem Text, wie ursprünglich - aber mit zwei Korrekturen.
   Vorher: `max-height:56vh` ergab auf einem 850px-Laptop 476px Bildband, damit
   lagen H1-Rest und beide CTAs unter der Falz. Jetzt gedeckelt auf 360px.
   Und `object-position:50% 0%` verankert oben: beschnitten wird ausschliesslich
   unten. Das Motiv muss sein Gewicht deshalb im oberen Teil tragen, das untere
   Drittel ist Opfermasse (siehe guidelines/asset-prompts.md). */
/* Verankerung und Bodenhöhe sind am echten Bild ausgemessen, nicht geschätzt.
   `hero-intro.webp` (1344x576, 21:9) trägt Inhalt zwischen y=119 und y=382, also
   20,7% bis 66,3%; darüber und darunter ruhiges Papier. Die dunkle Haarpartie
   beginnt bei y=125 - das ist die Grenze, die nicht angeschnitten werden darf.

   `object-position` rechnet prozentual gegen den Überhang, nicht gegen das Bild.
   Derselbe Prozentwert verhält sich deshalb bei kurzem Band ganz anders als bei
   hohem. Gemessen bei 1512px Breite: mit 200px Band schneidet bereits 36% den
   Kopf an, mit 289px Band wäre 38% ideal. Auflösung: Boden auf 240px anheben,
   dann sind 32% über die gesamte Spanne sicher - bei 240px bleiben 9px Luft über
   dem Haar, bei 380px ist die Illustration vollständig sichtbar.

   Unterhalb von rund 674px Breite ist die Quelle niedriger als das Band. `cover`
   skaliert dann über die Höhe, die Vertikale ist komplett sichtbar und stattdessen
   fallen rund 12% der Breite weg. */
.hero-band{display:block;width:100%;height:clamp(240px,34vh,380px);
  object-fit:cover;object-position:50% 32%}
/* Die Beleg-Karte ragt bewusst in die Markenfläche hinein. Der Betrag steht als
   Variable an genau einer Stelle, und die Hero-Polsterung reserviert ihn zusätzlich
   zum eigenen Abstand. Vorher trug die Karte ein hart kodiertes `margin-top:-48px`,
   das auf eine frühere Polsterung von 88px ausgelegt war - nach der Umstellung
   verdeckte sie die letzte Zeile der Überschrift und die Kostenlos-Zeile. */
:root{--hero-overlap:56px}
.hero-copy{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,48px);
  align-items:end;padding-top:clamp(26px,3.5vh,42px);
  padding-bottom:calc(clamp(34px,5vh,64px) + var(--hero-overlap))}
.hero-proof{position:relative;z-index:2;margin-top:calc(var(--hero-overlap) * -1)}
.hero-copy h1{font-size:clamp(34px,4.4vw,58px);line-height:1.04;margin:0;color:var(--on-field);
  font-family:var(--font-display);font-weight:var(--fw-display);letter-spacing:-.015em}
.hero-lead{color:var(--on-field-2);font-size:var(--fs-h3);line-height:1.55;margin:0}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.hero-note{margin:14px 0 0;font-size:var(--fs-sm);color:var(--on-field-3)}
/* Einmalige Entrance, nur transform und opacity, unter 0,6s inklusive Verzoegerung. */
.hero-band{animation:heroBand .46s var(--ease) both}
@keyframes heroBand{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-band{animation:none}}
@media (max-width:900px){
  .hero-copy{grid-template-columns:1fr;gap:18px;align-items:start}
}

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
/* Die Leiste bleibt undurchsichtig - das Designsystem untersagt Transparenz
   und Weichzeichner ausdruecklich (readme.md: "Transparenz/Blur: keine").
   Statt durchscheinen zu lassen, setzt sie sich beim Scrollen ueber den
   Schatten vom Inhalt ab: derselbe optische Zweck, mit erlaubten Mitteln.
   Die Klasse setzt lp-motion.js; ohne JS bleibt die Leiste schlicht flach. */
header.top{position:sticky;top:0;background:var(--surface);z-index:9;border-bottom:1px solid var(--line);transition:box-shadow var(--dur-fast) var(--ease)}
header.top.is-scrolled{box-shadow:var(--shadow-card)}
@media (prefers-reduced-motion:reduce){header.top{transition:none}}
.lp-hd{display:flex;align-items:center;gap:28px;min-height:64px;max-width:1280px;flex-wrap:nowrap}
.lp-brand{display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.lp-brand strong{font-family:var(--font-display);font-size:var(--fs-sm);line-height:1.1;color:var(--text-1)}
.lp-brand em{display:block;font-style:normal;font-weight:var(--fw-regular);font-size:var(--fs-micro);color:var(--text-3)}
.lp-nav{display:flex;gap:22px;font-size:var(--fs-sm)}
.lp-nav a{color:var(--text-1);padding:4px 0}
.lp-nav a[aria-current="page"]{color:var(--accent-strong);font-weight:var(--fw-semibold)}
.lp-act{margin-left:auto;display:flex;align-items:center;gap:14px}
.lp-act>a:not(.pill){color:var(--text-1);font-size:var(--fs-sm);padding:10px 0}

/* Menü für schmale Viewports — <details>, damit es ohne JavaScript funktioniert
   und die Tastaturbedienung vom Browser kommt. Vorher wurden Navigation und CTA
   unterhalb von 1120px bzw. 540px ersatzlos ausgeblendet. */
.lp-burger{display:none;position:relative}
.lp-burger>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--surface);color:var(--text-1);cursor:pointer}
.lp-burger>summary::-webkit-details-marker{display:none}
.lp-burger>summary:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface)}
.lp-burger[open]>summary{background:var(--surface-2)}
.lp-burger-panel{position:absolute;right:0;top:52px;min-width:240px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop);padding:8px;
  display:flex;flex-direction:column;z-index:10}
.lp-burger-panel a{display:block;padding:12px 12px;min-height:44px;box-sizing:border-box;
  border-radius:var(--r-sm);color:var(--text-1);font-size:var(--fs-body);text-decoration:none}
.lp-burger-panel a:hover{background:var(--surface-2);text-decoration:none}
.lp-burger-panel a:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface)}
.lp-burger-panel hr{border:none;border-top:1px solid var(--line);margin:6px 4px}

/* ── Warteliste ──────────────────────────────────────────────────────────── */
/* Ein Feld. Jedes weitere Feld kostet Abschlüsse, und für einen Einladungscode
   ist mehr als die Adresse auch nicht nötig. */
.lp-waitlist{margin:24px 0 0}
.lp-waitlist>label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-1);margin-bottom:6px}
.lp-waitlist-row{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.lp-waitlist-row .ds-field{flex:1 1 240px;min-width:0;min-height:44px;padding:0 14px;
  border-radius:var(--r-ctl);border:1px solid var(--line-strong);background:var(--surface);
  color:var(--text-1);font-family:var(--font-sans);font-size:var(--fs-body);outline:none}
.lp-waitlist-row .pill{flex:none}
.lp-waitlist>p{margin:10px 0 0;font-size:var(--fs-sm);color:var(--text-2)}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
details.faq{border-bottom:1px solid var(--line)}
details.faq:last-of-type{border-bottom:none}
details.faq>summary{cursor:pointer;padding:20px 0;font-weight:var(--fw-semibold);font-size:var(--fs-h3);
  color:var(--text-1);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface);border-radius:var(--r-sm)}
details.faq>summary::after{content:"";width:10px;height:10px;flex:none;border-right:2px solid var(--text-2);
  border-bottom:2px solid var(--text-2);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease);margin-right:4px}
details.faq[open]>summary::after{transform:rotate(-135deg)}
details.faq p{margin:0 0 20px;color:var(--text-2);max-width:70ch;text-wrap:pretty}

/* ── Fußzeile ────────────────────────────────────────────────────────────── */
footer a{color:var(--text-2);display:block;padding:10px 0;font-size:var(--fs-sm)}
footer a:hover{color:var(--accent-strong)}
footer a:focus-visible{outline:none;box-shadow:var(--focus-ring-on-surface);border-radius:var(--r-sm)}
.gfoot h2,.gfoot h3{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  color:var(--text-1);margin:0 0 2px;line-height:1.4}

/* ── Umbrüche ────────────────────────────────────────────────────────────── */
@media (max-width:1120px){
  .lp-nav{display:none}
  .lp-burger{display:block}
  .pill-hd2{display:none}
}
@media (max-width:860px){
  .g3,.g2,.gfx,.gfoot{grid-template-columns:1fr !important}
  .gfoot{gap:8px !important}
}
/* Unterhalb von 680px passt neben Wortmarke und Burger kein Pill mehr in die
   Kopfzeile. Anders als vorher geht dabei nichts verloren: das Burger-Menü führt
   dieselben Ziele inklusive "Zugang anfragen". */
@media (max-width:680px){
  .lp-act>a{display:none}
  .lp-act{flex:none}
  .lp-hd{gap:12px}
  .lp-brand{flex:1 1 auto;overflow:hidden}
  .lp-brand strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:540px){
  .card24{padding-left:20px;padding-right:20px}
}