/* GENERIERT von scripts/build-web.mjs — nicht hier bearbeiten.
   Quelle: web-src/css/*.css  ·  Bauen: npm run web:build */

/* ═══════════════════════════════════════════════════════════════════════════
   freimo Web — Design Tokens
   ───────────────────────────────────────────────────────────────────────────
   GENERIERT nach web/styles.css. Quelle: web-src/css/tokens.css.
   Nicht in web/ bearbeiten — `npm run web:build`.

   Zuordnung zur App (lib/theme.ts, aktives Theme "brassMoss"), damit beide
   Systeme nachvollziehbar bleiben, wenn das App-Theme sich bewegt:

     --canvas-base   = T.bgBase        #10201A
     --surface       = T.card          #1B2E26
     --surface-2     = T.cardAlt       #2C4438
     --surface-sunken= T.sand/bgAlt    #182A22
     --surface-creme = T.cremeSurface  #EEE6D4
     --line          = T.brassBd       rgba(242,246,243,.09)
     --line-hi       = T.borderHi      rgba(242,246,243,.18)
     --brass         = T.brass         #D9A42B
     --brass-lt      = T.brassLt       #E8BE62
     --on-brass      = T.fgOnBrass     #16221A
     --fg / -sub / -mut = T.fg/fgSub/fgMuted
     --sig-*         = T.heat*         (Ampel-Heatmap)

   Der Canvas-Verlauf ist NICHT der heutige App-Chrome (der ist flach #10201A),
   sondern der Moos-Verlauf der Zusage-Feier (T.momentTop/Mid/Bottom) — die
   stärkste Marken-Geste. Entscheidung 2026-09-03.
   Kompatibel zu mockups/marken-erlebnis/index.html:11-37.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Canvas ─────────────────────────────────────────────────────────── */
  --moss-top: #2e7d5b;
  --moss-mid: #1b3a2e;
  --moss-deep: #0d2416;
  --canvas: radial-gradient(
    140% 90% at 50% -8%,
    var(--moss-top) 0%,
    var(--moss-mid) 42%,
    var(--moss-deep) 100%
  );
  --canvas-base: #10201a;

  /* ── Flächen ────────────────────────────────────────────────────────── */
  --surface: #1b2e26;
  --surface-2: #2c4438;
  --surface-sunken: #182a22;
  --surface-glass: rgba(242, 246, 243, 0.05);
  --surface-creme: #eee6d4;

  /* ── Linien ─────────────────────────────────────────────────────────── */
  --line: rgba(242, 246, 243, 0.09);
  --line-soft: rgba(242, 246, 243, 0.06);
  --line-hi: rgba(242, 246, 243, 0.18);
  /* Auf der Creme-Bande kehrt sich der Kontrast um — helle Linien
     verschwinden dort. */
  --line-on-creme: rgba(20, 35, 28, 0.12);

  /* ── Messing-Akzent. Kante, Eyebrow, primärer CTA — nie Textfläche. ─── */
  --brass: #d9a42b;
  --brass-lt: #e8be62;
  --brass-bg: rgba(217, 164, 43, 0.14);
  --brass-line: rgba(217, 164, 43, 0.34);
  --on-brass: #16221a;

  /* ── Text ───────────────────────────────────────────────────────────── */
  --fg: #f2f6f3;
  --fg-sub: #a9bcb2;
  --fg-mut: #8ca398;
  --fg-on-creme: #14231c;
  --fg-on-creme-sub: #5c5f5a;

  /* ── Signal (Ampel-Heatmap, 1:1 aus der App) ────────────────────────── */
  --sig-best: #63c097;
  --sig-best-bg: rgba(99, 192, 151, 0.14);
  /* Auf der Creme-Bande kehrt sich alles um: Das helle Grün der dunklen
     Flächen ist dort fast unlesbar. Eigene Werte statt Opazitätstricks. */
  --sig-best-on-creme: #1f5c43;
  --sig-best-bg-creme: rgba(53, 151, 110, 0.16);
  --brass-on-creme: #7a5200;
  --brass-bg-creme: rgba(217, 164, 43, 0.22);
  --sig-match: #35976e;
  --sig-amber: #f2c14e;
  --sig-red: #e89a93;

  /* ── Warme Zweitfarben (marken-erlebnis). Sparsam, nie als CTA. ─────── */
  --honey: #e0a430;
  --terra: #c56a47;
  --apricot: #eeb980;
  --sage: #cbd9cc;
  --petrol: #3e6b7a;
  --berry: #8e4b63;

  /* ── Radien ─────────────────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-3xl: 36px;
  --r-full: 9999px;

  /* ── Schatten ───────────────────────────────────────────────────────── */
  --shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, 0.5);
  --shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 44px 96px -40px rgba(0, 0, 0, 0.75);
  --glow-brass: 0 0 0 1px rgba(217, 164, 43, 0.28),
    0 18px 40px -22px rgba(217, 164, 43, 0.4);

  /* ── Raum (4px-Basis wie SPACING in lib/constants.ts) ───────────────── */
  --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-y: clamp(72px, 10vw, 160px);
  --gutter: clamp(20px, 5vw, 40px);
  --w-page: 1180px;
  --w-narrow: 760px;
  --measure: 62ch;

  /* ── Typografie (Inter Tight variable, selbst gehostet) ─────────────── */
  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --t-display: clamp(44px, 8.2vw, 104px);
  --t-h1: clamp(36px, 6vw, 68px);
  --t-h2: clamp(28px, 4.2vw, 46px);
  --t-h3: clamp(20px, 2.4vw, 26px);
  --t-lead: clamp(17px, 1.6vw, 21px);
  --t-body: 17px;
  --t-sm: 15px;
  --t-xs: 13px;
  --t-eyebrow: 12px;
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.55;
  --ls-display: -0.035em;
  --ls-h: -0.02em;
  --ls-eyebrow: 0.18em;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 420ms;
  --dur-3: 720ms;
}

/* ── Reset + Grundlagen ─────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* Sticky-Nav ist 64px hoch — Ankerziele dürfen nicht darunter rutschen. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  /* Der Verlauf sitzt fix hinter dem Inhalt: eine einzige Lichtquelle für die
     ganze Seite, statt sich pro Sektion zu wiederholen. */
  background: var(--canvas-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Der Marken-Canvas. `fixed` + `-1` statt background-attachment: der Verlauf
   bleibt beim Scrollen stehen, wodurch die Seite wie EIN Raum wirkt und nicht
   wie gestapelte Kacheln. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--canvas);
  background-repeat: no-repeat;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--brass);
  color: var(--on-brass);
}

/* ── Typo-Bausteine ─────────────────────────────────────────────────────── */

.display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 700;
  text-wrap: balance;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: var(--ls-h);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
}
h2 {
  font-size: var(--t-h2);
}
h3 {
  font-size: var(--t-h3);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lead);
  color: var(--fg-sub);
  max-width: var(--measure);
}

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass);
}

.muted {
  color: var(--fg-mut);
}

/* Screenreader-only — für Kontext, den Sehende aus dem Layout ablesen. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Seitenraster ───────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: var(--w-narrow);
}

section {
  position: relative;
  padding-block: var(--section-y);
}

/* Vollbreites Band. Hebt eine Sektion aus dem Canvas heraus, ohne sie in eine
   Karte zu sperren — dadurch bekommt die Seite einen Puls. */
.band {
  background: var(--surface-sunken);
  border-block: 1px solid var(--line-soft);
}

.band--creme {
  background: var(--surface-creme);
  color: var(--fg-on-creme);
  border-block-color: rgba(20, 35, 28, 0.1);
}

.band--creme .lead,
.band--creme p {
  color: var(--fg-on-creme-sub);
}

.band--creme .eyebrow {
  color: #8a6a1c; /* Messing ist auf Creme zu hell — abgedunkelt, 4.6:1 */
}

/* ── Zweispalter Text | Bild. Ab .split--flip kippt die Bildseite. ─────── */
.split {
  display: grid;
  gap: clamp(var(--s-6), 6vw, var(--s-9));
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
  .split--flip .split__text {
    order: 2;
  }
  /* Die Textspalte bleibt stehen, während die Bildspalte weiterscrollt.
     Das ist der „luma"-Effekt — reine CSS-Lösung, kein JS. */
  .split__text {
    position: sticky;
    top: 112px;
  }
}

.split__text > * + * {
  margin-top: var(--s-4);
}

.split__text .eyebrow + h2 {
  margin-top: var(--s-3);
}

/* ── Kartenraster ───────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.stack > * + * {
  margin-top: var(--s-4);
}

.center {
  text-align: center;
}

.center .lead {
  margin-inline: auto;
}

/* ── Abstands-Utilities. Bewusst knapp gehalten: sie ersetzen Inline-Styles
      im Template, damit kein Wert am Token-Layer vorbeiläuft. ──────────── */
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

/* Bildspalte einer .split — zentriert das Gerät in seiner Spalte. */
.shotcol {
  display: flex;
  justify-content: center;
}

/* ── Wordmark ───────────────────────────────────────────────────────────── */
/* Ein Inline-SVG, skaliert allein über width. Ersetzt die drei handgetunten
   HTML+CSS-Varianten (Nav 24/6px, Hero 88/21px, Footer 20/5px), bei denen der
   Goldpunkt pro Größe nachjustiert werden musste. */
.wordmark {
  display: block;
  height: auto;
  color: var(--fg);
}

.wordmark .dot {
  fill: var(--brass);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 26px;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

/* Primär = volle Messingfläche mit dunklem Label. Dieselbe Regel wie in der
   App: Messing trägt den CTA, nie eine Textfläche. */
.btn--primary {
  background: var(--brass);
  color: var(--on-brass);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-brass);
}

/* Sekundär = transparent mit Messingkante. */
.btn--ghost {
  border: 1px solid var(--line-hi);
  color: var(--fg);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
  color: var(--brass-lt);
}

.btn--sm {
  padding: 10px 18px;
  font-size: var(--t-xs);
}

/* ── Store-Badges ───────────────────────────────────────────────────────── */
/* Zentriert als VORGABE, nicht als Sonderfall.
   `text-align: center` der umgebenden Sektion zentriert keine Flex-Items — die
   Badges brauchen ihr eigenes justify-content. Vorher stand das nur auf
   `.center .stores` und `.hero .stores`; jede neue Fläche mit Badges fiel
   damit stillschweigend auf linksbündig zurück, und ein Blick auf die Seite
   verrät nicht, warum. Alle heutigen Vorkommen sind zentriert, also gehört
   das hierher. Wer links will, setzt .stores--start. */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  align-items: center;
}

.stores--start {
  justify-content: flex-start;
}

.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 10px;
  transition: transform var(--dur-1) var(--ease-out);
}

.store-badge:hover {
  transform: translateY(-2px);
}

/* ── Karte ──────────────────────────────────────────────────────────────── */
/* Dunkle Fläche mit 1px-Kante, kein Schatten — die Karten-Regel der App. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-5);
}

.card h3 {
  font-size: var(--t-h3);
}

.card p {
  color: var(--fg-sub);
  font-size: var(--t-sm);
  margin-top: var(--s-2);
}

.card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--brass-bg);
  border: 1px solid var(--line);
  margin-bottom: var(--s-4);
}

.card__icon svg {
  width: 34px;
  height: 34px;
}

/* ── Geräte-Rahmen ──────────────────────────────────────────────────────── */
/* Der Rahmen lebt in CSS, das PNG enthält nur App-Pixel. Ein Asset bedient
   jede Größe, und ein Screen lässt sich neu schießen, ohne die Blende neu zu
   rendern. */
.device {
  position: relative;
  border: 8px solid #0a1510;
  border-radius: 44px;
  background: #0a1510;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-hi);
  overflow: hidden;
  max-width: 340px;
}

.device img {
  border-radius: 36px;
  width: 100%;
}

/* Dynamic Island */
.device::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 22px;
  border-radius: var(--r-full);
  background: #0a1510;
  pointer-events: none;
}

.device--bleed {
  max-width: 320px;
}

/* ── Platzhalter, solange die Screenshots fehlen ────────────────────────── */
/* Hält das finale Seitenverhältnis (1206×2622), damit das Layout beim
   Einsetzen der echten Bilder nicht springt. */
.shot-placeholder {
  aspect-ratio: 1206 / 2622;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--fg-mut);
  background: repeating-linear-gradient(
    -45deg,
    var(--surface),
    var(--surface) 12px,
    var(--surface-2) 12px,
    var(--surface-2) 24px
  );
  border-radius: 36px;
}

/* ── Pills / Chips ──────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-glass);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fg-sub);
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sig-best);
}

/* ── FAQ (native details, kein JS) ──────────────────────────────────────── */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: var(--ls-h);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 26px;
  font-weight: 400;
  color: var(--brass);
  transition: transform var(--dur-1) var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > p {
  color: var(--fg-sub);
  max-width: var(--measure);
  padding-bottom: var(--s-5);
}

/* Ghost-Button auf der Creme-Fläche. Die hellen Kanten-/Textfarben des
   Dunkel-Themes wären dort unsichtbar. */
.btn--on-creme {
  border-color: rgba(20, 35, 28, 0.25);
  color: var(--fg-on-creme);
}

.btn--on-creme:hover {
  border-color: var(--fg-on-creme);
  color: var(--fg-on-creme);
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(16, 32, 26, 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--t-sm);
  color: var(--fg-sub);
}

.nav__links a:hover {
  color: var(--fg);
}

/* Die aktuelle Seite trägt eine Umrandung, nicht nur eine andere Textfarbe.
   Bei drei Punkten reichte der Sprung von --fg-sub auf --fg; bei sieben sieht
   man ihn nicht mehr — auf der for-business-Seite war „for business" aktiv und
   niemand konnte es erkennen (Nico, 2026-09-12).

   Messing als Kante und Fläche, nie als Schrift: die Regel aus dem
   Token-Blatt bleibt gewahrt. Das negative margin hält die Leiste auf ihren
   64px — ohne es wüchse die ganze Navigation um 10px. */
.nav__links a[aria-current="page"] {
  color: var(--fg);
  padding: 5px 13px;
  margin-block: -5px;
  border: 1px solid var(--brass-line);
  border-radius: var(--r-full);
  background: var(--brass-bg);
}

/* Unter 1100px bleiben Wordmark, Sprachumschalter und CTA. Ein Burger-Menü wäre
   ein zweites JS-Widget für sieben Links — der Footer trägt die vollständige
   Navigation. Der Sprachwechsel bleibt aber sichtbar: er ist auf einer
   zweisprachigen Seite eine Orientierungshilfe, kein Menüpunkt.

   Die Schwelle war 820px und passte zu fünf Punkten. Mit „Reservieren" misst
   die Leiste 750px; zusammen mit Wortmarke und Gutter braucht sie ~950px.
   Bei 900px blieben nur noch 24px Luft zur Wortmarke — gemessen, nicht
   geschätzt. Wer hier einen Menüpunkt ergänzt, misst bitte nach.

   🔴 2026-09-12 — „for business" kam dazu, und niemand hat nachgemessen. Die
   Leiste ist damit 7 Punkte lang, und dieselben 24px Restluft treten jetzt
   schon bei 1000px auf statt bei 900px. Zwischen 980 und ~1080px stand die
   Wortmarke also fast an den Links geklebt — genau die Stelle, die im Header
   „nicht schön" aussah. Nachgemessen (Luft Wortmarke→Links):

       1180px  182px      1024px   26px  ← zu eng
       1100px  102px      1000px   24px  ← zu eng
                           980px   Links klappen weg

   Neue Schwelle: 1100px. Dort bleiben 102px Luft, und darunter übernimmt der
   Footer. Wer den nächsten Punkt ergänzt, misst bitte WIEDER nach. */
@media (max-width: 1100px) {
  .nav__links a:not(.btn):not(.nav__lang) {
    display: none;
  }
}

/* Sprachumschalter — als Kürzel gesetzt (DE/EN), mit Trennlinie abgesetzt. */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--fg-mut);
}

.nav__lang:hover {
  color: var(--brass-lt);
}

/* 🔴 Dieselbe Schwelle wie oben, sonst bliebe zwischen 980 und 1100px ein
   Trennstrich stehen, vor dem gar nichts mehr steht — ein senkrechter Strich
   im Nichts, der wie ein Zeichenfehler aussieht. Die zwei Regeln gehören
   zusammen; wer eine verschiebt, verschiebt beide. */
@media (max-width: 1100px) {
  .nav__lang {
    padding-left: 0;
    border-left: 0;
  }
}

/* ── Bühne ──────────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(48px, 9vw, 104px) 0;
  text-align: center;
  overflow: hidden;
}

.hero__eyebrow {
  margin-bottom: var(--s-4);
}

.hero .lead {
  margin-inline: auto;
  margin-top: var(--s-5);
}

/* Zentriert wird in components.css (.stores) — hier nur der Abstand. */
.hero .stores {
  margin-top: var(--s-7);
}

.hero__note {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  color: var(--fg-mut);
}

/* Der gefächerte Screenshot-Auftritt. Die äußeren beiden laufen unten aus der
   Sektion — kein harter Schnitt, die Bühne wirkt tiefer als sie ist. */
.fan {
  margin-top: clamp(40px, 6vw, 72px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Unterer Rand wird weich ausgeblendet statt abgeschnitten. */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.fan > * {
  flex: none;
}

.fan__side {
  width: min(30vw, 240px);
  opacity: 0.86;
}

.fan__side--l {
  transform: rotate(-8deg) translateY(28px);
  margin-right: -3%;
}

.fan__side--r {
  transform: rotate(8deg) translateY(28px);
  margin-left: -3%;
}

.fan__center {
  width: min(38vw, 306px);
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .fan__side {
    display: none;
  }
  .fan__center {
    width: min(72vw, 300px);
  }
}

/* Scroll-gekoppelte Parallaxe. Rein deklarativ; wo die API fehlt, passiert
   schlicht nichts. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fan__center {
      animation: fan-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
    }
    .fan__side--l {
      animation: fan-l linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }
    .fan__side--r {
      animation: fan-r linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }
  }
}

@keyframes fan-rise {
  from {
    transform: translateY(40px);
  }
  to {
    transform: translateY(-10px);
  }
}
@keyframes fan-l {
  from {
    transform: rotate(-11deg) translateY(60px);
  }
  to {
    transform: rotate(-7deg) translateY(14px);
  }
}
@keyframes fan-r {
  from {
    transform: rotate(11deg) translateY(60px);
  }
  to {
    transform: rotate(7deg) translateY(14px);
  }
}

/* ── Trust-Streifen ─────────────────────────────────────────────────────── */
.trust {
  padding-block: var(--s-6);
}

.trust__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4) var(--s-7);
}

.trust__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--fg-sub);
}

.trust__item svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brass);
}

/* ── Toter Chat (CSS-Fragment, kein Screenshot) ─────────────────────────── */
.deadchat {
  /* min() statt fixer Breite: bei 390px Viewport bleiben nach dem Gutter nur
     ~350px — eine harte 420px-Karte hätte das ganze Dokument breiter gemacht
     als den Viewport und JEDE Sektion rechts abgeschnitten. */
  max-width: min(420px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.deadchat__b {
  max-width: 76%;
  padding: 12px 16px;
  border-radius: var(--r-xl);
  font-size: var(--t-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg-sub);
}

.deadchat__b--me {
  align-self: flex-end;
  background: var(--surface-creme);
  border-color: var(--brass);
  color: var(--fg-on-creme);
}

/* Der Faden verliert nach unten an Präsenz — die Aussage der Sektion. */
.deadchat__b:nth-child(3) {
  opacity: 0.72;
}
.deadchat__b:nth-child(4) {
  opacity: 0.5;
}

.deadchat__meta {
  align-self: flex-end;
  font-size: var(--t-xs);
  color: var(--fg-mut);
  opacity: 0.6;
}

/* ── Fakten unter einer Feature-Sektion ─────────────────────────────────── */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* ── Aktivitäts-Icon-Reihe ──────────────────────────────────────────────── */
.iconrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.iconrow svg {
  width: 44px;
  height: 44px;
}

/* ── Wochen-Zeitstrahl ──────────────────────────────────────────────────── */
.timeline {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  position: relative;
}

.timeline__step h3 {
  margin-top: var(--s-4);
  font-size: var(--t-h3);
}

.timeline__step p {
  margin-top: var(--s-2);
  color: var(--fg-sub);
  font-size: var(--t-sm);
}

.timeline__day {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--brass-bg);
  border: 1px solid var(--line);
  color: var(--brass-lt);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Werte-Block ────────────────────────────────────────────────────────── */
.values {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin-top: var(--s-7);
}

.values h3 {
  font-size: var(--t-body);
}

.values p {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-6);
  background: var(--surface-sunken);
}

.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

/* Die Spaltentitel sind h2, nicht h4: der letzte Abschnitt der Seite endet auf
   h2, und ein Sprung auf h4 lässt einen Screenreader zwei Ebenen vermissen.
   Die Größe macht die Klasse, nicht die Ebene — Semantik und Optik sind zwei
   verschiedene Dinge. */
.footer__h {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-mut);
  margin-bottom: var(--s-4);
}

.footer li + li {
  margin-top: var(--s-2);
}

.footer a {
  font-size: var(--t-sm);
  color: var(--fg-sub);
}

.footer a:hover {
  color: var(--brass-lt);
}

.footer__tag {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--fg-mut);
  max-width: 26ch;
}

.footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-xs);
  color: var(--fg-mut);
}

/* ── Reveal beim Scrollen ───────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

[data-reveal][data-reveal-delay="1"] {
  transition-delay: 90ms;
}
[data-reveal][data-reveal-delay="2"] {
  transition-delay: 180ms;
}

.no-motion [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Unterseiten ────────────────────────────────────────────────────────── */
/* Die Bühne einer Unterseite ist ruhiger als die der Startseite: kein
   Gerätefächer, weniger Höhe, Text und Bild nebeneinander. */
.hero--sub {
  padding-block: clamp(40px, 6vw, 88px) var(--section-y);
  text-align: left;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--fg-mut);
  margin-bottom: var(--s-4);
}

.crumbs a:hover {
  color: var(--brass-lt);
}

/* ── Nummerierte Schritte („So funktioniert es") ────────────────────────── */
.steps {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  list-style: none;
  counter-reset: none;
}

.steps__item h3 {
  margin-top: var(--s-3);
  font-size: var(--t-h3);
}

.steps__item p {
  margin-top: var(--s-2);
  color: var(--fg-sub);
  font-size: var(--t-sm);
}

.steps__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--on-brass);
  font-weight: 700;
  font-size: var(--t-sm);
}

/* ── Grenz-Block („Was freimo hier nicht macht") ────────────────────────── */
/* Bewusst als Liste mit Messingkante links — sie liest sich als Zusage, nicht
   als Kleingedrucktes. */
.limits {
  display: grid;
  gap: var(--s-4);
}

.limits li {
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--brass);
  background: var(--surface-glass);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  color: var(--fg-sub);
  font-size: var(--t-sm);
}

.limits strong {
  color: var(--fg);
  font-weight: 700;
}

/* ── Verweis-Karten ─────────────────────────────────────────────────────── */
.card--link {
  display: block;
  transition: transform var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.card--link:hover {
  transform: translateY(-2px);
  border-color: var(--brass);
}

.card--link h3 {
  color: var(--brass-lt);
}

/* ── freimo für Gastgeber (/fuer-gastgeber/) ──────────────────────────────
   Bausteine, die es nur auf der Betriebs-Seite gibt: Funktionsübersicht mit
   Stand je Zeile, ein Preis-Block mit zwei Karten, und die Illustration des
   Reservierungsbuchs. */

/* Eine Liste statt einer Tabelle — auf dem Telefon ist eine dreispaltige
   Tabelle unlesbar, und die Reihenfolge trägt die Aussage ohne Spaltenkopf. */
.funktionen {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.funktion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.funktion__name {
  flex: 1 1 220px;
  font-weight: 600;
  color: var(--fg);
}
.funktion__was {
  flex: 2 1 320px;
  color: var(--fg-sub);
  font-size: 15px;
  line-height: 1.55;
}
/* 🔴 Der Stand steht an JEDER Zeile, auch bei den kostenlosen. „kostenlos"
   neben einer Funktion, die es gibt, und „in Arbeit" neben einer, die es
   nicht gibt, sind der ganze Unterschied zwischen einem Versprechen und
   einer Auskunft. */
.funktion__stand {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.stand--frei { background: var(--sig-best-bg); color: var(--sig-best); }
.stand--probe { background: var(--brass-bg); color: var(--brass-lt); }
.stand--bald { background: var(--surface-glass); color: var(--fg-mut); }
.band--creme .funktionen,
.band--creme .funktion { border-color: var(--line-on-creme); }
.band--creme .funktion__name { color: var(--fg-on-creme); }
.band--creme .funktion__was { color: var(--fg-on-creme-sub); }
/* 🔴 Der Stand ist die Aussage der Zeile — auf Creme muss er genauso gut
   lesbar sein wie auf Dunkel. Mit den dunklen Werten war „kostenlos" dort
   ein heller Fleck. */
.band--creme .stand--frei {
  background: var(--sig-best-bg-creme);
  color: var(--sig-best-on-creme);
}
.band--creme .stand--probe {
  background: var(--brass-bg-creme);
  color: var(--brass-on-creme);
}
.band--creme .stand--bald {
  background: rgba(20, 35, 28, 0.08);
  color: var(--fg-on-creme-sub);
}

/* Zwei Karten, nicht drei Tarifspalten: Ein Wirt, der von Papier kommt,
   vergleicht keine Matrix — er will wissen, ob es ihn etwas kostet. */
.preis {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 820px) {
  .preis { grid-template-columns: repeat(2, 1fr); }
}
.preis__karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}
.preis__karte--jetzt {
  border-color: var(--brass-line);
  box-shadow: var(--glow-brass);
}
.preis__zahl {
  font-size: clamp(38px, 6vw, 54px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
}
.preis__karte--jetzt .preis__zahl { color: var(--brass-lt); }
.preis__wofuer {
  margin-top: var(--s-3);
  font-weight: 600;
  color: var(--fg);
}
.preis__karte p { margin-top: var(--s-2); margin-bottom: 0; }

/* 🔴 Eine Zeichnung, kein Bildschirmfoto. Die Oberfläche ändert sich, und ein
   veraltetes Foto verspricht etwas, das der Wirt nach dem Anmelden nicht
   wiederfindet. */
.buchbild {
  background: var(--surface);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow);
  max-width: 460px;
}
.buchbild__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.buchbild__tag { font-weight: 700; font-size: 18px; color: var(--fg); }
.buchbild__zahl { font-size: 13px; color: var(--fg-mut); }
.buchbild__woche {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 44px;
  margin-bottom: var(--s-4);
}
.buchbild__saeule {
  flex: 1;
  background: var(--sig-match);
  border-radius: 3px;
  opacity: 0.45;
}
.buchbild__saeule--an { background: var(--brass); opacity: 1; }
.buchbild__zeile {
  display: flex;
  gap: var(--s-3);
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
}
.buchbild__zeit {
  flex: 0 0 46px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.buchbild__gast { color: var(--fg-sub); }
.buchbild__marke {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--brass-bg);
  color: var(--brass-lt);
  margin-left: 6px;
}

/* ── Rechtstexte ─────────────────────────────────────────────────────────
   Impressum, AGB und Datenschutzerklärung. Die Textkörper sind unverändert
   aus den alten Seiten übernommen (web-src/content/legal/*.html) — dieses
   Stylesheet bedient genau die Klassen, die dort vorkommen:
   .meta .toc .section .card .callout .clause-num .table-wrap

   Warum überhaupt dunkel: eine weiße Seite unter der dunklen Nav wirkt wie ein
   Fehler. Für den Ausdruck kehrt @media print am Ende wieder um — juristische
   Texte werden real ausgedruckt und abgeheftet.

   Die Zeilenlänge ist mit --measure (62ch) enger als das Seitenraster: das ist
   der Unterschied zwischen „lesbar" und „Textwüste" bei 19.000 Zeichen AGB. */

.prose {
  padding: var(--s-9) 0 var(--s-10);
}

.prose__inner {
  max-width: var(--measure);
  margin: 0 auto;
}

.prose h1 {
  font-size: var(--t-h1);
  letter-spacing: var(--ls-h);
  margin-bottom: var(--s-4);
}

.prose h2 {
  font-size: var(--t-h3);
  letter-spacing: var(--ls-h);
  margin: var(--s-8) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

/* .section markiert im Quelltext die Paragraphen-Überschriften. Die erste
   braucht die Trennlinie nicht — darüber steht nur die Meta-Zeile. */
.prose h2:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.prose h3 {
  font-size: var(--t-lead);
  margin: var(--s-6) 0 var(--s-3);
  color: var(--fg);
}

.prose p,
.prose li {
  color: var(--fg-sub);
  line-height: 1.7;
}

.prose p {
  margin-bottom: var(--s-4);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.prose li::marker {
  color: var(--fg-mut);
}

.prose strong {
  color: var(--fg);
  font-weight: 700;
}

.prose a {
  color: var(--brass-lt);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Lange URLs und E-Mail-Adressen dürfen die schmale Textspalte nicht
     sprengen — in Rechtstexten stehen viele davon. */
  overflow-wrap: anywhere;
}

.prose a:hover {
  color: var(--brass);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.12em 0.4em;
}

/* Datum/Fassung direkt unter der H1. */
.prose .meta {
  color: var(--fg-mut);
  font-size: var(--t-sm);
  margin-bottom: var(--s-7);
}

/* Inhaltsverzeichnis der AGB/Datenschutzerklärung. */
.prose .toc {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-8);
}

.prose .toc a {
  text-decoration: none;
}

.prose .toc a:hover {
  text-decoration: underline;
}

/* Hervorgehobene Blöcke: .card = Anbieterangaben, .callout = Hinweis. */
.prose .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-5);
}

.prose .card p:last-child,
.prose .callout p:last-child {
  margin-bottom: 0;
}

.prose .callout {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}

.prose .clause-num {
  color: var(--brass);
  font-weight: 700;
  margin-right: 0.4em;
}

/* Die Datenschutzerklärung enthält breite Tabellen (Empfänger, Speicherdauer).
   Sie scrollen in ihrem eigenen Container — der Seitenkörper darf nie
   horizontal scrollen. */
.prose .table-wrap {
  overflow-x: auto;
  margin-bottom: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: var(--t-sm);
}

.prose th,
.prose td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  color: var(--fg-sub);
  vertical-align: top;
}

.prose th {
  color: var(--fg);
  font-weight: 700;
  background: var(--surface-sunken);
}

.prose tr:last-child td {
  border-bottom: 0;
}

/* Anker aus dem Inhaltsverzeichnis dürfen nicht unter der Sticky-Nav landen. */
.prose [id] {
  scroll-margin-top: 88px;
}

/* Ausdruck: zurück auf Papier-Kontrast. */
@media print {
  .prose,
  .prose h1,
  .prose h2,
  .prose h3,
  .prose p,
  .prose li,
  .prose th,
  .prose td,
  .prose strong {
    color: #000;
  }

  .prose .card,
  .prose .callout,
  .prose .toc,
  .prose th {
    background: none;
    border-color: #999;
  }

  .prose a {
    color: #000;
  }
}

/* Schlanker Footer der Rechtsseiten — der volle Seiten-Footer trägt einen
   Sprachumschalter, den es hier nicht gibt (die Texte sind DE-only). */
.lfoot {
  border-top: 1px solid var(--line);
  padding: var(--s-6) 0 var(--s-8);
}

.lfoot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-size: var(--t-sm);
  color: var(--fg-mut);
}

.lfoot a {
  color: var(--fg-mut);
}

.lfoot a:hover {
  color: var(--brass-lt);
}

/* Das Inhaltsverzeichnis traegt eine eigene Ueberschrift („Inhalt"). Sie ist
   Teil der Karte, kein Kapitel — also ohne die grossen Kapitel-Abstaende. */
.prose .toc h2 {
  font-size: var(--t-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-mut);
  margin: 0 0 var(--s-4);
  padding-top: 0;
  border-top: 0;
}

.prose .toc ol {
  margin-bottom: 0;
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.nf {
  padding: var(--s-10) 0;
  text-align: center;
}

.nf__inner {
  max-width: 46rem;
  margin: 0 auto;
}

.nf h1 {
  font-size: var(--t-h1);
  letter-spacing: var(--ls-h);
  margin: var(--s-4) 0 var(--s-5);
}

.nf .lead {
  margin-inline: auto;
}

.nf__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

.nf__en {
  margin-top: var(--s-8);
  font-size: var(--t-sm);
  color: var(--fg-mut);
}

.nf__en a {
  color: var(--brass-lt);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Wordmark ── */
.wm{
  font-family:var(--font);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--fg);
  display:inline-block;
}
.wm__o{position:relative;display:inline-block}
.wm__dot{
  position:absolute;
  left:.304em;
  top:.333em;
  width:.2em;
  height:.2em;
  border-radius:50%;
  background:var(--brass);
}