/* ============================================================================
   LIVINGEN — Design-System
   Richtung: „Pine & Sand" — warme Sandflächen als Ruhe, tiefes Kiefergrün als
   Marken-Anker, ein einziger Akzent (Emerald) für Aktionen.
   Aufbau: 1 Tokens · 2 Basis · 3 Bausteine · 4 Abschnitte · 5 Seiten · 6 Responsive
   ========================================================================= */

/* ---------- 0 Schriften (selbst gehostet) ------------------------------
   Die Schriften liegen in `static/fonts/` und werden NICHT von Google geladen.
   Das ist kein Geschmacksurteil: die Remote-Einbindung überträgt die IP-Adresse
   jedes Besuchers an Google in die USA, und genau dafür hat das LG München I
   (3 O 17493/20, Januar 2022) Schadensersatz zugesprochen. Selbst gehostet
   braucht die Seite keinen Drittanbieter und damit auch keine Einwilligung.

   Nur die tatsächlich benutzten Schnitte: DM Sans 400/500 und Fraunces 600.
   Fraunces 500 lag ungenutzt herum und wäre 124 KB Ladezeit für nichts gewesen —
   jede `--font-display`-Regel setzt 600. Wer das ändert, holt den Schnitt nach
   (Skript-Vorlage steht in `docs/STAND.md`).

   `latin-ext` lädt nur, wenn ein Zeichen daraus vorkommt (`unicode-range`) —
   deutsche Umlaute stecken schon in `latin`, aber ein Anzeigentitel mit
   polnischem oder tschechischem Namen soll nicht in einer Ersatzschrift stehen. */
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/dm-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/dm-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/fraunces-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/fraunces-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1 Tokens ---------------------------------------------------- */
:root {
  /* Flächen: drei Töne, damit beim Scrollen Kapitel erkennbar sind. */
  --surface:        #ffffff;
  --sand:           #f6f2e9;
  --sand-strong:    #efe9db;
  --pine:           #0e1b16;
  --pine-soft:      #142521;

  /* Text */
  --ink:            #14201b;
  --ink-soft:       #57685f;
  --ink-faint:      #84948b;
  --on-pine:        #f2efe7;
  --on-pine-soft:   #a8b8af;

  /* Akzent — auf Weiß kontraststark (5.1:1), auf Dunkel eigene Stufe. */
  --accent:         #0b7d59;
  --accent-hover:   #096448;
  --accent-tint:    #e7f3ed;
  --accent-on-pine: #58dfa4;

  /* Discord-Blurple. Die eine bewusste Ausnahme vom Ein-Akzent-Prinzip: Grün ist
     die Marke (Eyebrows, Preise, Links), Blurple ist ausschließlich die Tür zum
     Server. Dieselbe Logik wie bei „Mit Google anmelden" — die Plattformfarbe
     sagt in einem Blick, wohin der Klick führt, und das ist hier die eine
     Entscheidung, um die es auf der ganzen Seite geht. */
  --discord:        #5865f2;
  --discord-hover:  #4752c4;

  /* Linien & Tiefe: eine Haarlinie, ein weicher Schattenstapel — kein Glow. */
  --line:           #e4ddcc;
  --line-soft:      #efe9dd;
  --line-pine:      rgba(242, 239, 231, .14);
  --shadow-sm:      0 1px 2px rgba(20, 32, 27, .05), 0 2px 6px rgba(20, 32, 27, .04);
  --shadow-md:      0 2px 4px rgba(20, 32, 27, .05), 0 12px 28px -8px rgba(20, 32, 27, .12);
  --shadow-lg:      0 4px 8px rgba(20, 32, 27, .06), 0 28px 60px -18px rgba(20, 32, 27, .22);

  /* Radien & Raster */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* Spacing-Skala — nur diese Werte verwenden. Die beiden großen Stufen sind
     bewusst kleiner als üblich: die Seite soll dicht und belegt wirken, nicht
     wie eine Diaschau, durch die man sich scrollt. */
  /* Die Skala ist am 30.07.2026 in den oberen Stufen enger geworden: 88px
     Abstand zwischen zwei Abschnitten sind auf einem Laptop fast ein Drittel
     Bildhöhe, und die Seite soll in den ersten Sekunden zeigen, was sie tut,
     statt Weißraum. Die unteren Stufen (Text, Karten, Knöpfe) bleiben
     unverändert — dort ist Luft Lesbarkeit, nicht Leere. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 40px; --s8: 52px; --s9: 72px; --s10: 104px;

  --wrap: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 2 Basis ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` muss verlässlich verstecken. Die Browser-Vorgabe `[hidden]{display:none}`
   verliert gegen JEDE eigene display-Regel — `.kar__ort { display: flex }` etwa
   zeigte ein leeres Ortsfeld samt Nadel-Symbol an, obwohl das Attribut gesetzt war.
   Im Karussell hängt daran mehr als Kosmetik: die Folien sind die Vorlage, aus der
   das Skript nachgeladene Wohnungen klont, und leere Felder bleiben dort bewusst
   im Markup stehen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.01em; }
p  { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* height:auto ist Pflicht, weil die Bilder width/height-Attribute tragen (gegen
   Layout-Sprünge). Ohne das gilt die Attribut-Höhe als gesetzt und jede
   aspect-ratio-Regel wird ignoriert. */
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.band :focus-visible, .cta-band :focus-visible { outline-color: var(--accent-on-pine); }

.skip {
  position: absolute; left: -9999px; top: var(--s3);
  background: var(--surface); color: var(--ink);
  padding: var(--s3) var(--s4); border-radius: var(--r); z-index: 200;
  box-shadow: var(--shadow-md); font-weight: 500;
}
.skip:focus { left: var(--s3); }

/* Warnbalken über der Seite, solange die Rechtstexte Platzhalter enthalten.
   Bewusst unübersehbar und bewusst nicht schließbar: er soll stören, bis das
   Impressum steht. Er verschwindet automatisch (siehe base.html). */
.warnbalken {
  background: #7a2f22; color: #ffe9e2;
  font-size: .88rem; padding: 10px 0;
  text-align: center;
}
.warnbalken strong { color: #fff; }
.warnbalken a { color: #ffd9cd; text-decoration: underline; margin-left: var(--s2); }
.warnbalken a:hover { color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

/* Abschnitts-Rhythmus: drei Flächen, nicht stumpf abwechselnd. */
.sec        { padding: var(--s9) 0; }
.sec--tight { padding: var(--s8) 0; }
.sec--sand  { background: var(--sand); }
.sec--sand2 { background: var(--sand-strong); }

/* Weicher Übergang statt harter Kante zwischen zwei Volltonflächen. */
.sec--sand + .sec, .sec--sand2 + .sec { border-top: 1px solid var(--line-soft); }

.band {
  background: var(--pine);
  color: var(--on-pine);
  position: relative;
  overflow: hidden;
}
/* Sehr dezenter Lichtschein — Opazität bewusst unter 6 %. */
.band::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 18% 0%, rgba(88, 223, 164, .055), transparent 62%);
  pointer-events: none;
}
.band > * { position: relative; }
.band h1, .band h2, .band h3 { color: var(--on-pine); }

/* ---------- 3 Bausteine ------------------------------------------------ */

/* Kopf-Einheit: Eyebrow mit Akzentlinie + Titel + Sub. Überall gleich. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s4);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px;
}
.band .eyebrow { color: var(--accent-on-pine); }
.band .eyebrow::before { background: var(--accent-on-pine); }

.lead { font-size: clamp(1.02rem, 1.3vw, 1.14rem); color: var(--ink-soft); max-width: 60ch; }
.band .lead { color: var(--on-pine-soft); }
.head { max-width: 44rem; margin-bottom: var(--s6); }
.head .lead { margin-top: var(--s4); }

/* Knöpfe */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s6);
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 500; font-size: 1rem; letter-spacing: -.01em;
  cursor: pointer; text-align: center;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { flex: none; }
.btn--primary {
  background: var(--accent); color: #fff; box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-hover); color: #fff;
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
/* Die eine Aktion, um die es auf dieser Seite geht — sie darf deutlich größer sein
   als alles andere. Der Schimmer läuft nur beim Überfahren durch, nicht dauernd. */
.btn--xl {
  min-height: 62px; padding: 0 var(--s7);
  font-size: 1.06rem; letter-spacing: -.015em;
  box-shadow: var(--shadow-md);
  position: relative;
}
.btn--xl svg { width: 21px; height: 21px; }
.btn--xl::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
  /* clip-path statt overflow:hidden am Knopf: so bleibt der Schimmer im Knopf,
     der Puls-Ring des Discord-Knopfs darf aber nach außen wachsen. */
  clip-path: inset(0 round 999px);
}
.btn--xl:hover::after { transition: transform .7s var(--ease); transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .btn--xl::after { display: none; } }

/* ---- Der Discord-Knopf: die eine Aktion der Seite --------------------------
   Plattformfarbe, gefärbter Schatten statt grauem, und im Hero ein ruhiger
   Puls-Ring. Der Ring läuft über transform/opacity (compositor-freundlich) und
   liegt auf ::before — nicht als animierter box-shadow, der bei jedem Durchlauf
   neu gezeichnet werden müsste. */
.btn--discord {
  background: var(--discord); color: #fff; border-color: transparent;
  box-shadow: 0 2px 6px rgba(88, 101, 242, .3), 0 14px 30px -12px rgba(88, 101, 242, .6);
}
.btn--discord:hover {
  background: var(--discord-hover); color: #fff; transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(88, 101, 242, .34), 0 20px 44px -14px rgba(88, 101, 242, .7);
}
.btn--discord:active { transform: translateY(0); }
/* Auf dunklem Grund darf der Schatten nicht ins Leere leuchten. */
.band .btn--discord, .cta-band .btn--discord, .wo--cta .btn--discord {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28), 0 16px 34px -14px rgba(88, 101, 242, .85);
}
/* Das Icon macht beim Überfahren einen kleinen Satz — ein einzelnes Signal,
   kein Dauerzappeln. */
.btn--discord:hover svg { animation: dc-hupf .52s var(--ease); }
@keyframes dc-hupf {
  0%, 100% { transform: translateY(0) rotate(0); }
  35%      { transform: translateY(-3px) rotate(-9deg); }
  70%      { transform: translateY(0) rotate(4deg); }
}

/* Puls-Ring NUR am Hero-Knopf. Pulsierte jeder Discord-Knopf, wäre die halbe
   Seite in Bewegung und keiner davon mehr auffällig.

   `position: relative` steht hier ausdrücklich, obwohl `.btn--xl` es schon mitbringt:
   verliert der Hero-Knopf irgendwann die XL-Variante, würde der Ring sonst am
   Dokument kleben und dort Klicks schlucken. Genau dieser Fehler hat den Knopf
   schon einmal unbenutzbar gemacht (siehe .cta-band). */
.hero__cta .btn--discord { position: relative; }
.hero__cta .btn--discord::before {
  content: ""; position: absolute; inset: -2px; border-radius: 999px;
  border: 2px solid var(--discord);
  opacity: 0; pointer-events: none;
  animation: dc-ring 3.4s var(--ease) infinite;
}
@keyframes dc-ring {
  0%        { transform: scale(1); opacity: .6; }
  60%, 100% { transform: scale(1.14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta .btn--discord::before { animation: none; }
  .btn--discord:hover svg { animation: none; }
  .btn--discord:hover { transform: none; }
}

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-soft); }
/* Auf dunklem Grund die helle Akzentstufe: das dunkle Emerald hätte auf Kiefergrün
   zu wenig Kontrast, ein cremeweißer Knopf wäre zwar lesbar, aber farblos — und die
   eine Aktion der Seite soll die Akzentfarbe tragen, nicht das Papier. */
.band .btn--primary, .cta-band .btn--primary {
  background: var(--accent-on-pine); color: var(--pine);
}
.band .btn--primary:hover, .cta-band .btn--primary:hover {
  background: #7cebba; color: var(--pine);
}
/* Der Premium-Knopf. Kein eigener Farbton: auf hellem Grund die Kiefer-Fläche,
   auf dunklem Grund die helle Akzentstufe — dieselbe Umkehrung wie beim
   Hauptknopf. Ein drittes Farbpaar hätte aus zwei Aktionen drei gemacht, und die
   kostenlose bleibt bewusst die auffälligste. */
.btn--premium { background: var(--pine); color: var(--on-pine); border-color: transparent; }
.btn--premium:hover {
  background: var(--pine-soft); color: var(--on-pine);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.plan--dunkel .btn--premium, .band .btn--premium, .cta-band .btn--premium {
  background: var(--accent-on-pine); color: var(--pine);
}
.plan--dunkel .btn--premium:hover, .band .btn--premium:hover, .cta-band .btn--premium:hover {
  background: #7cebba; color: var(--pine);
}

.band .btn--ghost, .cta-band .btn--ghost { color: var(--on-pine); border-color: var(--line-pine); }
.band .btn--ghost:hover, .cta-band .btn--ghost:hover {
  background: rgba(242, 239, 231, .08); color: var(--on-pine); border-color: rgba(242, 239, 231, .34);
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 500; min-height: 44px;
}
.arrow-link svg { transition: transform .2s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
.band .arrow-link { color: var(--accent-on-pine); }

/* Karten — Akzentkante statt eingefärbter Fläche. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Raster-Kinder dürfen schrumpfen. Ohne min-width:0 wächst die Spur auf die
   min-content-Breite des Inhalts — der häufigste Grund für waagerechtes Scrollen. */
.card, .bento__i, .step, .docs__i, .coop__i, .src__i, .money__grid > *, .two > * { min-width: 0; }
.card__t { margin-bottom: var(--s3); }
.card__x { color: var(--ink-soft); }
/* Insel-Karte auf dunklem Band. */
.band .card { background: var(--surface); border-color: transparent; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 14px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  font-size: .84rem; font-weight: 500; letter-spacing: -.005em;
}
.chip--line { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.band .chip { background: rgba(88, 223, 164, .12); color: var(--accent-on-pine); }

/* Häkchen-/Kreuz-Listen */
.ticks li, .crosses li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  /* 'anywhere' statt 'break-word': nur das beeinflusst die min-content-Breite.
     Sonst zieht ein langer Dateiname wie „Bewerbung_Nachname_Strasse12.pdf" die
     ganze Karte über den Bildschirmrand. */
  overflow-wrap: anywhere;
}
.ticks li:last-child, .crosses li:last-child { border-bottom: 0; }
.ticks li::before, .crosses li::before {
  content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: 12px;
}
.ticks li::before {
  background-color: var(--accent-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7d59' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.crosses li::before {
  background-color: #fbecec;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3352f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.band .ticks li { color: var(--on-pine-soft); border-bottom-color: var(--line-pine); }
.band .ticks li::before { background-color: rgba(88, 223, 164, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358dfa4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* Eintritts-Animation: nur opacity + translateY, gestaffelt. */
.rv { opacity: 0; transform: translateY(14px); }
.rv--in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .rv--in { transition: none; }
}

/* ---------- 4 Navigation & Fuß ---------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav--stuck { border-bottom-color: var(--line-soft); box-shadow: var(--shadow-sm); }
.nav__in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 74px;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.025em; color: var(--ink); margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand__mark { flex: none; border-radius: 9px; }
.brand__sub {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: -3px;
  /* Zweizeilig schob der Zusatz die ganze Kopfzeile auseinander. Er ist kurz genug,
     dass er auch auf 320px neben Logo und Burger in eine Zeile passt. */
  white-space: nowrap;
}
.nav__links { display: flex; align-items: center; gap: var(--s2); }
/* Nur die direkten Navigationslinks — der CTA liegt in .nav__cta und behält
   seine Button-Farben. Ohne den Kindselektor gewinnt diese Regel gegen .btn. */
.nav__links > a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3);
  color: var(--ink-soft); font-size: .95rem; font-weight: 500; border-radius: var(--r-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
  /* Ein Menüpunkt bricht nie um. Ohne diese Zeile zerfiel „Wie es funktioniert"
     knapp über dem Umschaltpunkt in zwei Zeilen und riss die ganze Leiste auseinander
     — in sechs Sprachen mit unterschiedlich langen Wörtern ist das sonst Zufall. */
  white-space: nowrap;
}
.nav__links > a:hover { color: var(--ink); background: var(--sand); }
.nav__links > a[aria-current="page"] { color: var(--ink); }
.nav__links > a[aria-current="page"]::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-left: 7px;
}
.nav__cta { margin-left: var(--s3); }
.nav__cta .btn { min-height: 46px; padding: 0 var(--s5); font-size: .95rem; white-space: nowrap; }

.burger {
  display: none; width: 46px; height: 46px; margin-left: auto;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}

.foot { background: var(--pine); color: var(--on-pine-soft); padding: var(--s8) 0 var(--s6); }
.foot a { color: var(--on-pine-soft); }
.foot a:hover { color: var(--on-pine); }
/* Vier Spalten seit der Sprachumschalter dazugekommen ist: Marke breit,
   daneben Seiten, Rechtliches, Sprache. */
.foot__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr .8fr; gap: var(--s6);
  padding-bottom: var(--s7); border-bottom: 1px solid var(--line-pine);
}
.foot .brand, .foot .brand:hover { color: var(--on-pine); }
.foot .brand__sub { color: var(--on-pine-soft); }
.foot__x { margin-top: var(--s4); font-size: .92rem; max-width: 40ch; }
.foot__h {
  font-family: var(--font-body); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-pine);
  margin-bottom: var(--s4);
}
.foot__list li { margin-bottom: var(--s2); font-size: .95rem; }
.foot__bar {
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  padding-top: var(--s5); font-size: .86rem;
}

/* Nur in den Übersetzungen sichtbar: „maßgeblich ist die deutsche Fassung".
   Zurückhaltend gesetzt — es ist eine Fußnote, keine Warnung. */
.legal__lang {
  margin-bottom: var(--s6); padding-left: var(--s4);
  border-left: 2px solid var(--line);
  color: var(--ink-faint); font-size: .88rem;
}

/* ---------- 4b Sprachumschalter ---------------------------------------- */
/* Gebaut als <details>, nicht als Skript-Menü: die CSP erlaubt kein Inline-JS
   (siehe liv/middleware.py), und ein Umschalter, der ohne JavaScript zubleibt,
   wäre für einen Teil der Besucher eine Sackgasse. app.js ergänzt nur Komfort.

   Der Knopf trägt bewusst NICHT die Akzentfarbe: Grün gehört den Eyebrows und
   Preisen, Blurple gehört der Tür zum Server. Die Sprache ist eine
   Nebenentscheidung und sieht deshalb aus wie ein Navigationslink mit Rahmen. */
.lang { position: relative; }
.lang__knopf {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: .92rem; font-weight: 500;
  cursor: pointer; list-style: none; white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease);
}
/* Das Standard-Dreieck von <summary> abschalten — wir zeichnen einen eigenen
   Pfeil, der zur Strichlogik der übrigen Symbole passt. */
.lang__knopf::-webkit-details-marker { display: none; }
.lang__knopf::marker { content: ""; }
.lang__knopf:hover { color: var(--ink); background: var(--sand); border-color: var(--line); }
.lang__globus { flex: none; opacity: .75; }
.lang__kuerzel { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.lang__pfeil { flex: none; opacity: .6; transition: transform .2s var(--ease); }
.lang[open] .lang__knopf { color: var(--ink); background: var(--sand); }
.lang[open] .lang__pfeil { transform: rotate(180deg); }

.lang__liste {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 11.5rem; padding: var(--s2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-md);
  animation: langAuf .18s var(--ease);
}
@keyframes langAuf { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .lang__liste { animation: none; }
  .lang__pfeil { transition: none; }
}
.lang__opt {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 42px; padding: 0 var(--s3); border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: .95rem;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.lang__opt:hover { color: var(--ink); background: var(--sand); }
.lang__opt.is-active { color: var(--ink); font-weight: 500; }
/* Der Haken belegt seinen Platz auch bei den inaktiven Sprachen, damit die
   Namen bündig untereinander stehen statt beim Umschalten zu springen. */
.lang__haken { flex: none; color: var(--accent); visibility: hidden; }
.lang__opt.is-active .lang__haken { visibility: visible; }

/* Im Fußbereich eine flache Liste statt eines nach oben aufklappenden Menüs:
   dort ist Platz, und ein Dropdown direkt über der Seitenkante ist auf dem
   Handy fummelig. */
.lang-fuss a.is-active { color: var(--on-pine); font-weight: 500; }

/* ---------- 5 Startseite ---------------------------------------------- */

/* Hero: links Text auf Kiefergrün, rechts das Foto — kein Text über Bild,
   damit die Lesbarkeit nicht vom Bildinhalt abhängt. */
/* Der Hero ist bewusst knapp gehalten: der grüne Knopf muss auf einem normalen
   Laptop ohne Scrollen sichtbar sein. Alles, was ihn nach unten drückt, kostet
   Anmeldungen. */
.hero { padding: var(--s7) 0 0; }
.hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--s7);
  align-items: center;
}
.hero h1 { margin-bottom: var(--s4); }
.hero h1 span { display: block; }
.hero h1 span + span { color: var(--accent-on-pine); }
.hero__sub { max-width: 33rem; }
.hero__cta { margin-top: var(--s6); }

/* Die Zeile unter dem Knopf nimmt die einzige offene Frage vorweg: was passiert,
   wenn ich klicke. Genau dafür steht sie direkt darunter und nicht im Fließtext. */
.hero__hint {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4); font-size: .87rem; color: var(--on-pine-soft);
}
.hero__hint svg { flex: none; color: var(--accent-on-pine); }

.hero__chips {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line-pine);
}
.hero__chips li {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .86rem; color: var(--on-pine-soft);
}
.hero__chips svg { flex: none; color: var(--accent-on-pine); }

.hero__media { position: relative; }
.hero__media picture { display: block; }
/* Das Motiv ist quadratisch aufgenommen — mit 1/1 wird auf dem Desktop gar nichts
   weggeschnitten. Erst auf schmalen Bildschirmen (16/11, siehe Responsive) greift
   ein Beschnitt, und der nimmt oben die Decke und unten den Teppichrand weg. */
.hero__photo {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* Feed-Karte: echte Produktansicht statt Deko. */
.feed {
  position: absolute; left: calc(-1 * var(--s6)); bottom: calc(-1 * var(--s7));
  width: min(330px, 78%);
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); padding: var(--s4);
  box-shadow: var(--shadow-lg);
}
.feed__h {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0 var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s2);
}
.feed__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.feed__row { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line-soft); }
.feed__row:last-of-type { border-bottom: 0; }
.feed__top { display: flex; align-items: baseline; gap: var(--s2); }
.feed__ort { font-weight: 500; font-size: .95rem; letter-spacing: -.01em; }
.feed__preis { margin-left: auto; font-weight: 500; color: var(--accent); font-size: .95rem; }
.feed__meta {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  font-size: .78rem; color: var(--ink-soft); margin-top: 3px;
}
.feed__bl { display: inline-flex; align-items: center; gap: 5px; }
.feed__bl::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.feed__note {
  font-size: .72rem; color: var(--ink-soft); text-align: center;
  padding-top: var(--s3); margin-top: var(--s2); border-top: 1px solid var(--line-soft);
}

/* Kennzahlen-Streifen: schließt das Hero-Band ab. */
.stats { margin-top: var(--s7); border-top: 1px solid var(--line-pine); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__i { padding: var(--s5) var(--s5); border-right: 1px solid var(--line-pine); }
.stats__i:first-child { padding-left: 0; }
.stats__i:last-child { border-right: 0; }
.stats__z {
  font-family: var(--font-display); font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 600; letter-spacing: -.03em; color: var(--accent-on-pine); line-height: 1;
}
.stats__l { margin-top: var(--s3); font-weight: 500; color: var(--on-pine); font-size: .98rem; }
.stats__h { margin-top: 3px; font-size: .84rem; color: var(--on-pine-soft); }

/* ---- Karussell: die fünf stärksten Treffer -------------------------------
   Gewischt wird über natives scroll-snap — das kostet kein Skript, fühlt sich
   auf Touch und Trackpad genau so an, wie das Gerät es sonst tut, und die Folien
   stehen auch dann richtig, wenn JavaScript scheitert. Das Skript ergänzt nur
   Pfeile, Punkte und Maus-Ziehen. */
/* Karussell und Live-Raster sind zwei Blicke auf dieselbe Sache — sie stehen
   deshalb dichter beieinander als zwei echte Kapitel. Zwischen ihnen lagen sonst
   100 px Leere, die aussah wie ein vergessener Abschnitt. */
.top { padding-bottom: var(--s6); }
.top + .live { padding-top: var(--s6); }
.kar { position: relative; }
.kar__spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: var(--s5);
  /* `overflow: auto hidden` und nicht nur `overflow-x: auto`: sobald eine Achse
     nicht `visible` ist, wird die andere von `visible` zu `auto`. Die Spur wäre
     damit auch senkrecht ein Scrollcontainer, obwohl es dort nichts zu scrollen
     gibt — ein unnötiger zweiter Scrollbereich mitten in der Seite. */
  overflow: auto hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Die Bildlaufleiste ist hier reines Rauschen — gescrollt wird gewischt. */
  scrollbar-width: none;
  padding-bottom: 2px;      /* Platz für den Fokus-Rahmen */
}
.kar__spur::-webkit-scrollbar { display: none; }
.kar__spur:focus-visible { outline-offset: 4px; }

.kar__i {
  scroll-snap-align: start;
  display: grid; grid-template-columns: 1.22fr .98fr;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.kar__bild { position: relative; background: var(--sand-strong); }
/* Ohne Foto keine kaputte Kachel: eine ruhige Sandfläche mit einem Hauch
   Struktur. Die Angaben daneben stimmen ja weiterhin. */
.kar__bild--leer {
  min-height: 260px;
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(20, 32, 27, .022) 12px 24px),
    var(--sand-strong);
}
.kar__bild img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Bundesland als Glas-Plakette auf dem Foto: sagt in einem Blick, wo die Wohnung
   liegt, ohne eine Zeile der Infospalte zu kosten. */
.kar__marke {
  position: absolute; top: var(--s4); left: var(--s4);
  padding: 6px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(150%) blur(8px);
  font-size: .78rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
  box-shadow: 0 2px 10px rgba(20, 32, 27, .18);
}

.kar__info {
  display: flex; flex-direction: column; min-width: 0;
  padding: var(--s6);
}
.kar__zeit {
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s3);
}
.kar__t {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.25; margin-bottom: var(--s3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.kar__ort {
  display: flex; align-items: center; gap: 7px;
  font-size: .95rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kar__ort svg { flex: none; color: var(--ink-faint); }

/* Die drei Zahlen, wegen derer jemand überhaupt weiterliest — als echte
   Beschreibungsliste, damit ein Screenreader „Miete: 890 €" vorliest. */
.kar__fakten {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  margin: var(--s5) 0; padding: var(--s4) 0;
  border-block: 1px solid var(--line-soft);
}
.kar__fakten dt {
  font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 2px;
}
.kar__fakten dd {
  margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink);
}
.kar__fakten .kar__preis { color: var(--accent); font-size: 1.32rem; }

.kar__btn { margin-top: auto; width: 100%; }
.kar__hint { margin-top: var(--s3); font-size: .8rem; color: var(--ink-soft); }
.kar__quelle { margin-top: var(--s2); font-size: .74rem; color: var(--ink-faint); }

/* Fuß: Punkte links, Herkunftshinweis in der Mitte, Pfeile rechts. */
.kar__fuss {
  display: flex; align-items: center; gap: var(--s4);
  margin-top: var(--s5);
}
.kar__punkte { display: flex; align-items: center; gap: var(--s2); }
.kar__punkt {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line); cursor: pointer;
  transition: width .28s var(--ease), background .28s var(--ease);
}
.kar__punkt[aria-current="true"] { width: 26px; background: var(--accent); }
.kar__foto { margin-right: auto; font-size: .76rem; color: var(--ink-faint); }
.kar__pfeile { display: flex; gap: var(--s2); }
.kar__nav {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.kar__nav:hover:not(:disabled) {
  border-color: var(--accent); color: var(--accent);
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.kar__nav:disabled { opacity: .35; cursor: default; }

/* Während gezogen wird, darf das Bild nicht als Bild-Drag losfliegen. */
.kar--zieht .kar__spur { cursor: grabbing; scroll-snap-type: none; }
.kar--zieht img, .kar--zieht a { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .kar__punkt { transition: none; }
  .kar__nav:hover:not(:disabled) { transform: none; }
}

/* Live-Sektion: echte Kanal-Einträge. Das ist der Beweis für alles, was der Hero
   behauptet — deshalb steht sie direkt darunter und nicht irgendwo weiter hinten. */
.live { padding-top: var(--s8); }
.live__head {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s7);
  align-items: end; margin-bottom: var(--s6);
}
.live__head .lead { padding-bottom: 4px; }

/* Punkt statt Akzentlinie, und er pulst — die einzige Dauerbewegung der Seite,
   weil sie eine echte Aussage trägt: hier kommt gerade etwas rein. */
.eyebrow--live::before {
  width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-tint);
  animation: puls 2.4s var(--ease) infinite;
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-tint); opacity: 1; }
  50%      { box-shadow: 0 0 0 7px rgba(11, 125, 89, .07); opacity: .72; }
}
@media (prefers-reduced-motion: reduce) { .eyebrow--live::before { animation: none; } }

.live__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
}
.wo {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.wo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-soft); }
.wo__kopf {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3);
}
/* Bewusst gemischte Schreibweise statt Versalien: „Baden-Württemberg" in
   Großbuchstaben ist rund ein Fünftel breiter und passte neben der Zeitangabe
   nicht mehr in die Karte — abgeschnittene Bundesländer sahen billig aus.
   Gemessen für den längsten Fall („Meckl.-Vorpommern" + „gerade eben"). */
.wo__bl {
  font-size: .74rem; font-weight: 500;
  color: var(--accent); background: var(--accent-tint);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wo__zeit { margin-left: auto; font-size: .74rem; color: var(--ink-faint); white-space: nowrap; }
.wo__t {
  font-size: 1.02rem; line-height: 1.32; margin-bottom: var(--s2);
  /* Zwei Zeilen, dann Schluss — sonst bestimmt der längste Anzeigentitel die
     Höhe der ganzen Reihe. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.wo__o {
  display: flex; align-items: center; gap: 6px;
  font-size: .88rem; color: var(--ink-soft); margin-bottom: var(--s4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wo__o svg { flex: none; color: var(--ink-faint); }
.wo__fakten {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line-soft);
  font-size: .86rem; color: var(--ink-soft);
}
.wo__preis {
  font-family: var(--font-display); font-size: 1.16rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink); margin-right: auto;
}
.wo__quelle { margin-top: var(--s2); font-size: .74rem; color: var(--ink-faint); }

/* Die Karte, die den Handel benennt: Daten hier, Link im Kanal. */
.wo--cta {
  background: var(--pine); border-color: var(--pine); color: var(--on-pine);
  justify-content: center; gap: var(--s3);
}
.wo--cta:hover { transform: none; box-shadow: var(--shadow-lg); }
.wo__ctaT {
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.25;
}
.wo__ctaX { font-size: .88rem; color: var(--on-pine-soft); }
/* Nur Layout — die Farbe kommt von .btn--discord, damit die eine Aktion überall
   gleich aussieht. */
.wo--cta .btn { margin-top: var(--s2); width: 100%; }

/* Ein Eintrag, der beim Aktualisieren neu dazukommt, blitzt einmal auf. */
.wo--neu { animation: neu 1.6s var(--ease); }
@keyframes neu {
  0%   { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
  100% { border-color: var(--line); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .wo--neu { animation: none; } }

/* Quellen-Laufband: belegt „26 Portale" in einer Zeile, ohne einen Abschnitt zu
   kosten. Reine transform-Animation, hält bei Überfahren an. */
.ticker {
  background: var(--sand); border-block: 1px solid var(--line-soft);
  padding: var(--s5) 0; overflow: hidden;
}
.ticker__h {
  text-align: center; font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: var(--s4);
}
.ticker__spur { display: flex; width: max-content; animation: lauf 46s linear infinite; }
.ticker:hover .ticker__spur { animation-play-state: paused; }
.ticker__satz { display: flex; align-items: center; gap: var(--s6); padding-right: var(--s6); }
.ticker__satz span {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink-soft); white-space: nowrap;
}
@keyframes lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__spur { animation: none; }
  .ticker { overflow-x: auto; }
}

/* Schritte: Akzentkante links, Nummer als Detail. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s6); position: relative; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .22; transition: opacity .25s var(--ease);
  pointer-events: none;      /* Deko nimmt keine Klicks — die Karte kann einen Link tragen */
}
.step:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.step:hover::before { opacity: 1; }
.step__nr {
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  color: var(--accent); letter-spacing: .04em; display: block; margin-bottom: var(--s4);
}
.step h3 { margin-bottom: var(--s3); }
.step p { color: var(--ink-soft); font-size: .97rem; }
/* Der Knopf steht direkt unter der Erklärung — genau dort, wo die Frage
   „und wie komme ich jetzt rein?" entsteht. */
.steps__cta { margin-top: var(--s6); align-items: center; }
.steps__hint { font-size: .87rem; color: var(--ink-soft); }

/* Bento: ein dominantes Element, die übrigen kleiner. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.bento__i {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s6); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bento__i:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.bento__i h3 { margin-bottom: var(--s3); }
.bento__i p { color: var(--ink-soft); font-size: .97rem; }
.bento__i--big {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.bento__i--big img {
  width: 100%; height: 100%; min-height: 220px; flex: 1; object-fit: cover;
}
.bento__i--big > div { padding: var(--s6); }
.bento__i--big h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }

/* Bundesländer — bewusst kein eigener Abschnitt mehr, sondern ein kompakter
   Block am Fuß der Vorteile. 16 große Karten waren viel Fläche für eine Liste. */
.bl {
  display: grid; grid-template-columns: 15rem 1fr; gap: var(--s7);
  align-items: start;
  margin-top: var(--s6); padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.bl__t h3 { margin-bottom: var(--s2); }
.bl__t p { color: var(--ink-soft); font-size: .93rem; }
.bl__grid { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bl__grid li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px var(--s4); font-size: .88rem; font-weight: 500; letter-spacing: -.01em;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.bl__grid li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: .45; flex: none;
  transition: opacity .2s var(--ease);
}
.bl__grid li:hover { border-color: var(--accent); transform: translateY(-1px); }
.bl__grid li:hover::before { opacity: 1; }

/* Geld-Band: weiße Inseln auf Kiefergrün. */
.money__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.money__grid .card__t { color: var(--ink); }

/* FAQ */
.faq { max-width: 50rem; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: var(--s4);
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.13rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink);
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ""; flex: none; width: 18px; height: 18px; margin-left: auto; margin-top: 4px;
  background: no-repeat center/18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7d59' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); margin-top: var(--s4); max-width: 62ch; }

/* Abschluss-Band */
/* `position: relative` ist hier keine Kosmetik, sondern Pflicht: ohne einen
   positionierten Vorfahren richtet sich das ::before am Dokument aus statt am
   Band. Es lag dann unsichtbar über den obersten ~550 px der Startseite und hat
   dort jeden Klick geschluckt — unter anderem den Hero-Knopf, also genau die
   eine Aktion, um die es auf der Seite geht. `pointer-events: none` ist der
   zweite Riegel: Deko darf nie klickbar sein. */
.cta-band {
  background: var(--pine); color: var(--on-pine); padding: var(--s9) 0;
  text-align: center; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 50% 100%, rgba(88, 223, 164, .07), transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--on-pine); max-width: 30rem; margin: 0 auto var(--s5); }
.cta-band p { color: var(--on-pine-soft); max-width: 42ch; margin: 0 auto var(--s7); }
.cta-band .btn-row { justify-content: center; }
.cta-band__hint { margin-top: var(--s5); font-size: .86rem; color: var(--on-pine-soft); }

/* ---------- 6 Unterseiten --------------------------------------------- */

/* Seiten-Hero: kompakter als der Start-Hero, Foto als breites Band darunter. */
.phero { background: var(--pine); color: var(--on-pine); padding: var(--s8) 0 var(--s9); }
.phero h1 { max-width: 30rem; margin-bottom: var(--s5); }
/* Der Untertitel bekommt die helle Stufe. `.lead` trägt sonst `--ink-soft`, und
   das ergibt auf Kiefergrün rund 2,6:1 — unter der WCAG-Grenze von 4,5:1 für
   Fließtext. Aufgefallen beim Bau der Premium-Seite; betrifft alle Seitenköpfe
   und ist dort derselbe Fehler gewesen. */
.phero .lead { max-width: 46rem; color: var(--on-pine-soft); }
/* Ohne Foto darunter braucht der Kopf die tiefe Polsterung nicht: sie ist dort
   Platz für das Bild, das mit negativem Rand hineinragt. Fehlt es, stünde unter
   dem Untertitel eine handbreit leere grüne Fläche. */
.phero--solo { padding-bottom: var(--s7); }
.phero__img {
  margin-top: calc(-1 * var(--s8));
  width: 100%; aspect-ratio: 21 / 7; object-fit: cover;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  position: relative; z-index: 2;
}
.phero__lift { padding-bottom: var(--s7); }

.crumb {
  display: flex; align-items: center; gap: var(--s2);
  font-size: .84rem; color: var(--on-pine-soft); margin-bottom: var(--s5);
}
.crumb a { color: var(--on-pine-soft); }
.crumb a:hover { color: var(--on-pine); }

/* Zeitleiste */
.tl { display: grid; gap: 0; max-width: 54rem; }
.tl__i {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--s6);
  padding: var(--s6) 0; border-top: 1px solid var(--line);
  position: relative;
}
.tl__i:last-child { border-bottom: 1px solid var(--line); }
.tl__z {
  font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); padding-top: 4px;
}
.tl__i h3 { margin-bottom: var(--s3); }
.tl__i p { color: var(--ink-soft); }

/* Quellen-Gruppen */
.src { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.src__i { display: flex; flex-direction: column; }
.src__x { color: var(--ink-soft); font-size: .97rem; margin-bottom: var(--s5); }
.src__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; }

/* Schlüssel/Wert-Liste */
.kv li {
  display: grid; grid-template-columns: 170px 1fr; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.kv li:first-child { border-top: 1px solid var(--line); }
.kv b { font-weight: 500; letter-spacing: -.01em; }
.kv span { color: var(--ink-soft); }
.band .kv li { border-color: var(--line-pine); }
.band .kv b { color: var(--on-pine); }
.band .kv span { color: var(--on-pine-soft); }

/* Checkliste Unterlagen */
.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.docs__i { display: flex; flex-direction: column; gap: var(--s3); }
.docs__tag {
  align-self: flex-start; font-size: .74rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-tint);
  padding: 4px 10px; border-radius: 999px;
}
.docs__i h3 { font-size: 1.08rem; hyphens: auto; }
.docs__i p { color: var(--ink-soft); font-size: .95rem; }

/* Kopierbare Vorlage */
.copy { display: grid; grid-template-columns: 1fr; gap: var(--s5); max-width: 56rem; }
.copy__box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.copy__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  border-bottom: 1px solid var(--line-soft); background: var(--sand);
}
.copy__bar span {
  font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin-right: auto;
}
.copy__btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4);
  background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: background .2s var(--ease);
}
.copy__btn:hover { background: var(--accent-hover); }
.copy__btn[data-ok="1"] { background: var(--pine); }
.copy__txt {
  margin: 0; padding: var(--s6);
  font-family: var(--font-body); font-size: .95rem; line-height: 1.75;
  color: var(--ink); white-space: pre-wrap; word-break: break-word;
}

/* Gut/Schlecht zweispaltig */
.two { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.two__h {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  margin-bottom: var(--s4);
}

/* Warnblock */
.warn {
  background: #fdf6ec; border: 1px solid #efdcbe; border-left: 3px solid #c9862a;
  border-radius: var(--r-lg); padding: var(--s6);
}
.warn__h {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: #7a5313; margin-bottom: var(--s4);
}
.warn__h svg { flex: none; color: #c9862a; }
.warn li {
  display: grid; grid-template-columns: 8px 1fr; gap: var(--s4);
  padding: var(--s3) 0; color: #5f4a2c; font-size: .97rem;
}
.warn li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; margin-top: 11px;
  background: #c9862a;
}

/* Kooperations-Karten: eine dominiert. */
.coop { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.coop__i { display: flex; flex-direction: column; }
.coop__i--big { grid-row: span 2; }
.coop__tag {
  align-self: flex-start; margin-bottom: var(--s4);
  font-size: .74rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-tint); padding: 5px 12px; border-radius: 999px;
}
.coop__i p { color: var(--ink-soft); }
.coop__i .ticks { margin: var(--s5) 0; }
.coop__i .arrow-link { margin-top: auto; }

/* Prinzipien */
.princ { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.princ__i {
  padding: var(--s6); border-top: 1px solid var(--line-pine);
  border-right: 1px solid var(--line-pine);
}
.princ__i:nth-child(2n) { border-right: 0; }
.princ__nr {
  font-family: var(--font-display); font-size: .95rem; font-weight: 600;
  color: var(--accent-on-pine); display: block; margin-bottom: var(--s4);
}
.princ__i h3 { margin-bottom: var(--s3); }
.princ__i p { color: var(--on-pine-soft); font-size: .97rem; }

/* Erzähltext */
.story { max-width: 40rem; display: grid; gap: var(--s5); }
.story p { color: var(--ink-soft); font-size: 1.06rem; }
.story p:first-child::first-letter {
  font-family: var(--font-display); font-size: 3.4rem; font-weight: 600;
  float: left; line-height: .82; padding: 6px var(--s3) 0 0; color: var(--ink);
}

/* Person */
.person { display: grid; grid-template-columns: 84px 1fr; gap: var(--s5); align-items: start; }
.person__av {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
}
.person__n { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.person__r { font-size: .88rem; color: var(--accent); margin-bottom: var(--s3); }
.person__x { color: var(--ink-soft); }

/* Zwei-Spalten-Layout mit Randnotiz */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s8); align-items: start; }
.split--rev { grid-template-columns: 1.1fr .9fr; }

/* Rechtstexte */
.legal { max-width: 46rem; }
.legal__b { padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.legal__b:first-of-type { border-top: 1px solid var(--line); }
.legal__b h2 { font-size: 1.2rem; margin-bottom: var(--s3); }
.legal__b p { color: var(--ink-soft); white-space: pre-line; }
.notice {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s4);
  background: #fdf6ec; border: 1px solid #efdcbe; border-radius: var(--r);
  padding: var(--s5); margin-bottom: var(--s7); color: #6b4f22; font-size: .95rem;
}
.notice svg { color: #c9862a; margin-top: 2px; }

/* Discord-Hinweisseite */
.soon { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: var(--s9) 0; }
.soon .lead { margin: var(--s5) auto var(--s7); }

/* ---------- 6a Bewerbungs-Generator ------------------------------------ */
/* Angaben links, Ergebnis rechts — und rechts klebt es, solange gescrollt wird.
   Wer unten ein Häkchen ändert, soll oben sehen, was sich am Text ändert; ohne
   `sticky` wäre der Text dann aus dem Bild. */
.gen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.gen__form {
  display: grid; gap: var(--s5); min-width: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s6);
}
.gen__kopf h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: var(--s2); }
.gen__kopf p { color: var(--ink-soft); font-size: .93rem; }
/* „Ab wann" und „Wie lange" stehen untereinander, nicht nebeneinander:
   nebeneinander bleiben je 250px, und darin bricht jeder zweite Chip um.
   Untereinander stehen sie in einer Zeile — kompakter statt gedrängt. */
.gen__zwei { display: grid; gap: var(--s5); }
.gen__aus { display: grid; gap: var(--s5); position: sticky; top: var(--s5); min-width: 0; }

.feld { display: grid; gap: var(--s3); border: 0; padding: 0; margin: 0; min-width: 0; }
.feld > label, .feld legend {
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); padding: 0;
}
.feld input[type="text"], .feld input[type="email"], .unlock input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: .97rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.feld input::placeholder, .unlock input::placeholder { color: var(--ink-faint); }
.feld input:focus, .unlock input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Chips sind echte Radios/Checkboxen. Das Eingabefeld selbst wird versteckt,
   aber NICHT mit display:none — sonst fiele es aus der Tabulator-Reihenfolge und
   die Auswahl wäre ohne Maus nicht mehr bedienbar. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-w { position: relative; display: inline-flex; }
.chip-w input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.chip-w span {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .88rem; color: var(--ink-soft);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip-w:hover span { border-color: var(--ink-faint); color: var(--ink); }
.chip-w input:checked + span {
  background: var(--accent-tint); border-color: var(--accent); color: var(--accent-hover);
  font-weight: 500;
}
.chip-w input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Freischaltkasten */
.unlock {
  background: var(--pine); color: var(--on-pine);
  border-radius: var(--r-xl); padding: var(--s6);
  display: grid; gap: var(--s3); box-shadow: var(--shadow-lg);
}
.unlock h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.unlock__x { color: var(--on-pine-soft); font-size: .93rem; }
.unlock__l { font-size: .82rem; font-weight: 600; margin-top: var(--s2); }
.unlock input {
  background: rgba(242, 239, 231, .06);
  border-color: var(--line-pine); color: var(--on-pine);
}
.unlock input::placeholder { color: rgba(168, 184, 175, .7); }
.unlock input:focus {
  border-color: var(--accent-on-pine);
  box-shadow: 0 0 0 3px rgba(88, 223, 164, .18);
}
.check {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s3);
  align-items: start; font-size: .86rem; color: var(--on-pine-soft);
  cursor: pointer; margin-top: var(--s2);
}
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent-on-pine); }
.unlock__btn { width: 100%; justify-content: center; margin-top: var(--s3); }
.unlock__fehler {
  font-size: .86rem; color: #ffb4ab;
  background: rgba(255, 180, 171, .1); border-radius: var(--r-sm);
  padding: 8px 12px;
}
.unlock__klein { font-size: .78rem; color: var(--on-pine-soft); opacity: .85; line-height: 1.5; }
.unlock__klein a { color: var(--accent-on-pine); text-decoration: underline; }

/* Der Honeypot. `display:none` würde von manchen Bots erkannt und von manchen
   Browsern beim Autofill übersprungen — aus dem Bild schieben ist verlässlicher.
   `aria-hidden` im Markup hält ihn zusätzlich aus dem Screenreader heraus. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Das Ergebnis */
.brief {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s6); display: grid; gap: var(--s4);
  box-shadow: var(--shadow-md);
}
.brief__kopf { display: flex; align-items: start; justify-content: space-between; gap: var(--s4); }
.brief__kopf h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.brief__kopf p { color: var(--ink-soft); font-size: .9rem; margin-top: var(--s1); }
.brief__neu { white-space: nowrap; padding: 9px 16px; font-size: .85rem; }
.brief__text {
  background: var(--sand); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: var(--s5); margin: 0;
  font: inherit; font-size: .95rem; line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 26rem; overflow-y: auto;
}
.brief__fuss {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  font-size: .8rem; color: var(--ink-faint);
}
.brief__fuss span { flex: 1 1 12rem; min-width: 0; }

/* Die Brücke zum Produkt */
.next {
  background: var(--sand); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s6); display: grid; gap: var(--s3);
}
.next h3 { font-size: 1.1rem; }
.next p { color: var(--ink-soft); font-size: .93rem; }
.next__btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.next__fuss { font-size: .8rem; color: var(--ink-faint); }

/* ---------- 6b Tarife: Basic und Premium ------------------------------- */
/* Zwei Säulen nebeneinander, weil der Vergleich die Aussage ist — untereinander
   müsste man ihn sich merken statt ihn zu sehen.

   Premium ist die DUNKLE Karte, kein zweiter Akzentton. Die Seite hat genau eine
   Akzentfarbe (Emerald, auf dunklem Grund die helle Stufe) plus Discord-Blau für
   die eine Aktion; ein drittes Gold oder Violett hätte beide entwertet und die
   Startseite in ein Farbmuster verwandelt. Die Kiefer-Fläche ist ohnehin schon
   die „wichtig"-Fläche dieser Seite (Hero, Marken-Band, Abschluss). */
.plans__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s5); align-items: stretch;
}
.plan {
  position: relative; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s7);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan--dunkel {
  background: var(--pine); border-color: transparent; color: var(--on-pine);
  box-shadow: var(--shadow-lg);
}
.plan__kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s4);
}
.plan__tag {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.plan--dunkel .plan__tag { color: var(--accent-on-pine); }
/* Kein „Meistgewählt": das wäre eine Zahl, die wir nicht haben. Der Hinweis sagt,
   für wen sich der Zugang lohnt — das lässt sich belegen. */
.plan__badge {
  font-size: .76rem; line-height: 1.25; text-align: right;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(88, 223, 164, .13); color: var(--accent-on-pine);
}
.plan__preis {
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(2.3rem, 4vw, 3.1rem); letter-spacing: -.02em;
}
.plan__preis span {
  display: block; margin-top: var(--s2);
  font-family: var(--font-body); font-weight: 400; font-size: .87rem;
  letter-spacing: 0; color: var(--ink-faint);
}
.plan--dunkel .plan__preis span { color: var(--on-pine-soft); }
.plan__t { margin: var(--s6) 0 var(--s3); font-size: clamp(1.25rem, 2vw, 1.55rem); }
.plan__x { color: var(--ink-soft); font-size: .97rem; margin-bottom: var(--s5); }
.plan--dunkel .plan__x { color: var(--on-pine-soft); }
/* Der Abstand über dem Knopf steht als margin-bottom AN DER LISTE, nicht als
   margin-top am Knopf: der Knopf braucht `margin-top: auto`, damit beide Karten
   ihn unten bündig führen, auch wenn eine Karte zwei Punkte mehr hat. Eine
   spezifischere Regel wie `.plan .ticks + .plan__btn` überschriebe genau das
   Auto — nachgemessen am 30.07.2026: die Knöpfe standen 28px versetzt. */
.plan .ticks { margin-top: var(--s5); margin-bottom: var(--s6); }
.plan__btn { width: 100%; justify-content: center; margin-top: auto; }
/* Die Mindesthöhe hält die beiden Knöpfe auf einer Linie: der Fußtext ist in
   einer Karte einzeilig und in der anderen zweizeilig, und ohne sie schöbe er
   den Knopf darüber um eine Zeile nach oben. */
.plan__fuss {
  margin-top: var(--s4); min-height: 3.2em;
  font-size: .84rem; color: var(--ink-faint);
}
.plan--dunkel .plan__fuss { color: var(--on-pine-soft); opacity: .85; }
.plans__fuss {
  margin-top: var(--s5); text-align: center;
  font-size: .9rem; color: var(--ink-soft);
}

/* Häkchenliste auf dunklem Grund: dieselbe Liste, helle Stufe. */
.ticks--hell li { color: var(--on-pine-soft); border-bottom-color: var(--line-pine); }
.ticks--hell li::before {
  background-color: rgba(88, 223, 164, .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358dfa4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Vergleichstabelle. Eine echte <table>, weil es drei Spalten mit gleicher
   Bedeutung je Zeile sind — ein Kartenraster müsste die Beschriftung neunmal
   wiederholen. Der Bildlauf sitzt am Container: auf schmalen Geräten scrollt die
   Tabelle, nie die Seite. */
.vgl__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vgl {
  width: 100%; min-width: 34rem; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.vgl th, .vgl td {
  text-align: left; vertical-align: top;
  padding: var(--s4) var(--s5); font-size: .95rem;
}
.vgl thead th {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  background: var(--sand); border-bottom: 1px solid var(--line);
}
.vgl tbody th { font-weight: 500; color: var(--ink); }
.vgl tbody td { color: var(--ink-soft); }
/* Nur EINE Haarlinie je Zeilengrenze, nicht oben und unten. */
.vgl tbody tr + tr th, .vgl tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.vgl__stark { background: rgba(14, 27, 22, .035); color: var(--ink); }
.vgl thead .vgl__stark { color: var(--accent); }

/* Was Premium ändert: eine dominante Kachel, drei ruhige. Kein Dreier-Raster
   aus gleichen Karten — die eine Aussage, auf die es ankommt, steht vorn. */
.pv { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.pv__i {
  min-width: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pv__i:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pv__i h3 { margin-bottom: var(--s3); }
.pv__i p { color: var(--ink-soft); font-size: .97rem; }
.pv__i--big { background: var(--pine); border-color: transparent; color: var(--on-pine); }
.pv__i--big h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
.pv__i--big p { color: var(--on-pine-soft); }

/* Vier Schritte statt drei — dieselbe Karte wie auf der Startseite. */
.steps--4 { grid-template-columns: repeat(4, 1fr); }

/* Der Kaufweg endet in einem Kasten, nicht in einem Knopf im Fließtext: es ist
   der Punkt, an dem Geld fließt, und der darf sichtbar abgegrenzt sein. */
.kaufbox {
  margin-top: var(--s6); display: grid; justify-items: start; gap: var(--s4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s6);
}
.kaufbox__t { font-size: 1.05rem; max-width: 60ch; }
.kaufbox__t strong { font-family: var(--font-display); }
.kaufbox__x { font-size: .87rem; color: var(--ink-soft); }

.rechtliste { display: grid; gap: var(--s5); }
.rechtliste li {
  padding-left: var(--s5); border-left: 2px solid var(--line);
  color: var(--ink-soft); font-size: .95rem;
}

/* Nur für Screenreader: der Strich in der Tabelle sagt „nicht enthalten", und
   das muss auch vorgelesen werden. Eine leere Zelle ließe offen, ob die Leistung
   fehlt oder nur die Angabe. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 7 Responsive ---------------------------------------------- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__i--big { grid-column: span 2; grid-row: auto; }
  .live__grid { grid-template-columns: repeat(3, 1fr); }
  .bl { grid-template-columns: 1fr; gap: var(--s5); }
  .docs { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Die Kopfzeile wandert früher ins Menü als der Rest umbricht.
   Gemessen am 28.07.2026: Marke, vier Menüpunkte, Sprachumschalter und CTA
   brauchten in der längsten Sprache 1072px, deshalb stand der Umschaltpunkt bei
   1080px. Zwischen 961 und 1080px stand die Leiste sonst zwar einzeilig da,
   schob den Knopf „Kostenlos beitreten" aber aus dem Bild — waagerechter
   Bildlauf, und die wichtigste Schaltfläche halb abgeschnitten.

   Seit dem 30.07.2026 gibt es einen fünften Menüpunkt („Premium"). Nachgemessen
   über alle sechs Sprachen: die ausgeklappte Leiste braucht auf /premium/ 1231px
   (Deutsch), 1228px (Rumänisch) — also liegt der Punkt bei 1240px. Zwei frühere
   Versuche mit 1180px und 1220px waren beide noch zu knapp und erzeugten genau
   denselben waagerechten Bildlauf wie vorher. Nicht schätzen, messen.
   Wer hier etwas verlängert oder einen Menüpunkt ergänzt, misst nach: es ist die
   Sprache mit den breitesten Wörtern, die den Umschaltpunkt bestimmt. */
@media (max-width: 1240px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: flex; }
  .nav--open .nav__links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: var(--s3) var(--s5) var(--s5); gap: 0; box-shadow: var(--shadow-md);
  }
  .nav--open .nav__links > a { min-height: 52px; padding: 0 var(--s3); font-size: 1.02rem; }
  .nav--open .nav__cta { display: block; margin: var(--s3) 0 0; }
  .nav--open .nav__cta .btn { width: 100%; }

  /* Im aufgeklappten Menü klappt der Umschalter in der Liste auf, statt als
     schwebendes Feld über den Menüpunkten zu liegen — dort ist Platz genug,
     und ein Menü im Menü verfehlt auf dem Handy jeder zweite Daumen. */
  .lang { margin-top: var(--s3); }
  .lang__knopf { justify-content: space-between; min-height: 52px; font-size: 1.02rem; }
  .lang__globus { margin-right: auto; }
  .lang__liste {
    position: static; min-width: 0; margin-top: var(--s2);
    box-shadow: none; background: var(--sand); border-color: var(--line-soft);
  }
  .lang__opt { min-height: 48px; font-size: 1.02rem; }
}

@media (max-width: 960px) {
  :root { --s9: 80px; --s8: 56px; }

  .hero { padding-top: var(--s7); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero__media { margin-bottom: var(--s8); }
  .feed { position: static; width: 100%; margin-top: calc(-1 * var(--s7)); }
  .hero__photo { aspect-ratio: 16 / 11; }
  .stats { margin-top: var(--s7); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__i { padding: var(--s5) var(--s4); border-bottom: 1px solid var(--line-pine); }
  .stats__i:nth-child(2n) { border-right: 0; }
  .stats__i:nth-child(3), .stats__i:nth-child(4) { border-bottom: 0; }
  .stats__i:nth-child(odd) { padding-left: 0; }

  .live__head { grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
  .live__grid { grid-template-columns: repeat(2, 1fr); }
  /* Bild über Text: nebeneinander bliebe für die Angaben eine Spalte von rund
     260 px, in der schon „Baden-Württemberg" umbricht. */
  .kar__i { grid-template-columns: 1fr; }
  .kar__bild img { aspect-ratio: 16 / 10; }
  .steps, .money__grid, .src, .coop, .two, .princ { grid-template-columns: 1fr; }
  .steps__cta { align-items: stretch; }
  .steps__hint { text-align: center; }
  .coop__i--big { grid-row: auto; }
  .princ__i { border-right: 0; }
  .princ__i:last-child { border-bottom: 1px solid var(--line-pine); }
  .split, .split--rev { grid-template-columns: 1fr; gap: var(--s6); }
  .phero__img { aspect-ratio: 16 / 9; }

  /* Der Generator wird einspaltig: Angaben oben, Ergebnis darunter. `sticky`
     muss dabei weg — sonst klebte die Ergebnisbox über den Angaben fest. */
  .gen { grid-template-columns: 1fr; }
  .gen__aus { position: static; }

  /* Zwei Tarife nebeneinander brauchen je rund 300px für Preis und Häkchenliste.
     Darunter stehen sie untereinander — Premium bleibt hinten, damit der
     kostenlose Weg zuerst gelesen wird. */
  .plans__grid, .pv { grid-template-columns: 1fr; }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 var(--s4); }
  .bento, .docs { grid-template-columns: 1fr; }
  /* Ohne diese Zeile spannt die große Karte weiter über 2 Spalten und das Raster
     legt sich stillschweigend eine zweite, implizite Spalte an — die Seite scrollt
     dann waagerecht. */
  .bento__i--big { grid-column: auto; }
  /* Eine Spalte für die Wohnungen: zwei nebeneinander werden auf 390 px zu eng
     für Preis und Fläche in einer Zeile. */
  .live__grid { grid-template-columns: 1fr; }
  .bl__grid li { font-size: .84rem; padding: 6px var(--s3); }
  .ticker__satz { gap: var(--s5); padding-right: var(--s5); }
  .tl__i { grid-template-columns: 1fr; gap: var(--s3); }
  .kv li { grid-template-columns: 1fr; gap: var(--s1); }
  .foot__grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .kar__info { padding: var(--s5); }
  .kar__fakten { gap: var(--s5) var(--s6); }
  /* Der Herkunftshinweis rutscht in eine eigene Zeile — sonst quetschen sich
     Punkte, Text und Pfeile auf 358 px nutzbarer Breite. */
  .kar__fuss { flex-wrap: wrap; }
  .kar__foto { order: 3; width: 100%; margin-right: 0; }
  .kar__pfeile { margin-left: auto; }
  .copy__bar { flex-wrap: wrap; }
  .copy__txt { padding: var(--s5) var(--s4); }
  .story p:first-child::first-letter { font-size: 2.8rem; }
  .person { grid-template-columns: 1fr; }

  .plan { padding: var(--s6); border-radius: var(--r-lg); }
  /* Der Hinweis am Premium-Tarif rutscht unter die Bezeichnung: nebeneinander
     bleiben auf 358px für beides je 12 Zeichen. */
  .plan__kopf { flex-direction: column; align-items: flex-start; }
  .plan__badge { text-align: left; }
  .steps--4 { grid-template-columns: 1fr; }
  .vgl { min-width: 30rem; }

  .gen__zwei { grid-template-columns: 1fr; }
  .gen__form, .unlock, .brief, .next { padding: var(--s5); border-radius: var(--r-lg); }
  /* Auf dem Handy zuerst der Text, dann der Knopf: nebeneinander bleiben für
     „Andere Formulierung" keine 120px. */
  .brief__kopf { flex-direction: column; }
  .brief__neu { width: 100%; }
}