/*
 * immovend — Verkaufsseite. Brand-Board 1.0 (September 2026, brand/BRAND.md):
 * ruhig, hell, transluzente Layer mit weicher Tiefe und viel Weissraum.
 * Eine Akzentfarbe (Immo-Blau), eine Schrift (Geist, Geist Mono für Zahlen).
 * Fonts self-hosted — CSP erlaubt nur font-src 'self'.
 */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("schrift/geist-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: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("schrift/geist-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: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("schrift/geist-mono-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: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("schrift/geist-mono-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;
}

:root {
  /* Farben = Brand-Board «Light Mode»-Swatches, nichts erfunden. */
  --bg: #f7f8fb;           /* Grund (Branding 09/2026) */
  --ink: #1b2430;          /* Tinte — Überschriften, Wortmarke */
  --text: #3A4557;         /* Fliesstext: zwischen Ink und Ink 2, ≥ 9:1 auf Canvas */
  --muted: #5b6675;        /* Grau — Nebentext, 6.1:1 auf Grund (WCAG AA) */
  --tile: #dcebf7;         /* Himmel */
  --tile-2: #FFFFFF;       /* Surface */
  --line: #e1e6ee;
  /* Begrenzung von Bedienelementen: --line erreicht nur ~1.4:1 gegen
     Weiss. Fuer Felder und Umriss-Schaltflaechen verlangt WCAG 1.4.11
     mindestens 3:1 — dieser Ton erreicht 3.6:1. */
  --line-ctl: #8A96AA;

  --accent: #1f6fb2;       /* Seeblau — die Farbe des Dachs */
  --accent-hi: #164e80;    /* Tiefblau */
  --accent-soft: #dcebf7;  /* Himmel */
  --accent-contrast: #ffffff;
  /* Bernstein — nur das Licht im Zeichen, nie Text (Kontrast reicht nicht). */
  --licht: #f2a93b;
  /* Primärknopf-Verlauf: Seeblau, oben eine Spur heller (Branding 09/2026) */
  --accent-verlauf: linear-gradient(180deg, #2f86cf, #1f6fb2);
  --accent-verlauf-hi: linear-gradient(180deg, #1f6fb2, #164e80);

  --ok: #2E9E6B;
  --danger-text: #D9483E;
  --danger-soft: #FBE7E5;
  --ok-text: #1F7A50;
  --ok-soft: #E1F3EA;

  --r-tile: 24px;
  --r-card: 18px;
  --r-ctl: 11px;
  --r-pill: 999px;

  --schatten: 0 20px 60px -24px rgba(20, 40, 90, 0.22);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Type Scale: manuelle Methode (Filipiuk, S. 66–67) ---------------
     Body-Base zuerst (S. 63: Body/Input ≥ 16pt, sonst leidet die Lesbarkeit
     stark), von dort in ±2pt-Schritten, danach in 4pt-Schritten je Stufe —
     keine Ratio-Skala wie Golden Ratio: die erzeugt zu grosse Lücken
     zwischen den Grössen (S. 63–65). Jede Rolle ein Name statt eines
     Einzelwerts im Selektor — Eyebrow, Body, Lead, H3, H2, H1. */
  --fs-eyebrow: 13px;
  --fs-body: 17px;
  --fs-lead: 19px;
  --fs-h3: 22px;
  --fs-h2: clamp(30px, 3.6vw, 42px);
  --fs-h1: clamp(36px, 5vw, 60px);
  /* H1 neben einem Bild in der 2-Spalten-Hero (Spalte ~475px, wächst ab
     der 1140px-Schale nicht mehr): gilt nur dort, siehe .hero-raster h1. */
  --fs-h1-eng: clamp(40px, 4.2vw, 48px);

  /* ---- Spacing Scale: 4pt-Basis, Vielfache von 4 (S. 50–52) ------------
     Jeder Abstand kommt aus dieser Skala statt frei geraten zu sein —
     ersetzt u. a. die 14px/22px/32px im Hero. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  --shell: 1140px;
  --gutter: clamp(20px, 5vw, 40px);
  --kopf-h: 68px;

  color-scheme: light;
}

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

/* Hintergrund auch auf html: beim Overscroll (iOS Rubber-Band, Pull-to-Refresh)
   wäre sonst reines Weiss sichtbar, weil die Canvas-Farbe nur .flecken trägt. */
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* clip statt hidden: erzeugt keinen Scroll-Container, position: sticky bleibt
   intakt — und scrollWidth wächst nicht mehr, iOS kann nicht seitlich pannen. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

img, svg, canvas { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.schale { width: 100%; max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 12px 18px; border-radius: var(--r-ctl);
}
.sprung:focus { left: 16px; top: 16px; }

/* ---------- Navigation ---------- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.kopf-innen { display: flex; align-items: center; gap: 28px; height: var(--kopf-h); }

.marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  color: var(--ink); text-decoration: none;
}
/* Bildzeichen (Branding 09/2026): das Dach in Seeblau, darunter das Licht
   in Bernstein. Es steht frei — kein Kasten, kein Verlauf, kein Radius; der
   Schutzraum ist ein Punktdurchmesser. Die Wortmarke setzt «.ch» in
   Gewicht 300 und Seeblau — Herkunft als leiser Teil des Namens. */
.marke-zeichen { width: 30px; height: 30px; flex: none; display: block; color: var(--accent); }
.marke-ch { font-weight: 300; color: var(--accent); }

.kopf nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.kopf nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 7px 10px; border-radius: var(--r-ctl); }
.kopf nav a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
/* Aktiver Eintrag: weisses Glasplättchen, leicht angehoben (Board «Navigation»). */
.kopf nav a[aria-current]:not(.knopf) { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(20, 40, 90, 0.08); }
.kopf .knopf { padding: 10px 18px; }
.kopf .knopf .kurz { display: none; }

/* Burger (nur mobil sichtbar): erbt über .knopf das Toolbar-Glas des Kopfs;
   drei Striche — der mittlere verschwindet, die äusseren kippen zum Kreuz. */
.kopf .kopf-burger { display: none; width: 44px; height: 44px; padding: 0; flex: none; }
.kopf-burger svg { width: 24px; height: 24px; }
.kopf-burger path { transform-origin: 12px 8px; transition: transform 200ms var(--ease), opacity 150ms var(--ease); }
.kopf-burger path:nth-child(3) { transform-origin: 12px 16px; }
.kopf.menue-offen .kopf-burger path:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.kopf.menue-offen .kopf-burger path:nth-child(2) { opacity: 0; }
.kopf.menue-offen .kopf-burger path:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 960px) {
  .kopf nav a:not(.knopf) { display: none; }
  .kopf .knopf .lang { display: none; }
  .kopf .knopf .kurz { display: inline; }
  .kopf .kopf-burger { display: inline-flex; }
  /* Platz-Arithmetik bei 390px: Marke + Pille + Burger + Gutter müssen in
     die Leiste passen; Marke bekommt 44px Tap-Fläche ohne optische Änderung. */
  .kopf-innen { gap: var(--sp-4); }
  .kopf nav { gap: var(--sp-3); }
  .kopf .knopf { padding: 10px 14px; min-height: 44px; }
  .marke { padding-block: var(--sp-2); margin-block: calc(-1 * var(--sp-2)); }
}
/* iPhone SE/mini und Android 360: Pille passt nicht mehr neben den Burger —
   der CTA bleibt im Menü und im Hero erreichbar. */
@media (max-width: 380px) { .kopf nav .knopf:not(.kopf-burger) { display: none; } }

/* ---------- Knöpfe ---------- */

/* Knöpfe laut Brand-Board «UI-Komponenten»: Radius 11, Primär im
   Blau-Verlauf mit weisser Innenkante und blauem Schatten, Sekundär als
   Glasplättchen — keine Pillen mehr, kein Vollton. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--r-ctl); border: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--accent-verlauf); color: #fff;
  font-family: var(--font); font-size: 15px; font-weight: 500; text-decoration: none;
  /* Eigene Zeilenhoehe: ohne sie erbt <a> die Fliesstext-Zeilenhoehe und
     misst 5 px hoeher als ein <button> mit derselben Klasse. */
  line-height: 1.25;
  white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 20px rgba(46, 107, 230, 0.3);
  transition: background 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.knopf svg { width: 16px; height: 16px; }
.knopf:hover, .knopf:focus-visible { background: var(--accent-verlauf-hi); color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 26px rgba(46, 107, 230, 0.36); }
.knopf-still {
  background: rgba(255, 255, 255, 0.6); color: var(--ink); border-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(20, 40, 90, 0.06);
}
.knopf-still:hover, .knopf-still:focus-visible { background: rgba(255, 255, 255, 0.85); color: var(--accent-hi); border-color: rgba(255, 255, 255, 1); box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(20, 40, 90, 0.10); }
.knopf-gross { padding: 15px 28px; font-size: 16px; }
.knopf[disabled] { opacity: 0.6; cursor: progress; }
/* Gedrueckt: der Knopf setzt sich auf die Flaeche zurueck. Nach den
   Hover-Regeln notiert, damit er bei gleicher Spezifitaet gewinnt. */
.knopf:active, .knopf-still:active { transform: translateY(0); box-shadow: none; }
/* Rang 5.4: im Formular fluchtet die Schaltflaeche mit den Feldern. */
form .knopf { width: 100%; }

/* ---------- Typografie ---------- */
/* Type Scale als Rollen-Tokens (--fs-*, siehe :root) statt Einzelwerte
   je Selektor — Eyebrow/Body/Lead/H3/H2/H1 sind an einer Stelle definiert. */

h1, h2, h3 {
  margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12;
  /* Kontrollierte Zeilenumbrüche statt zufälliger Rags (S. 74): der Browser
     verteilt die Zeilen gleichmässig, statt ein einzelnes kurzes Wort auf
     der letzten Zeile stehen zu lassen. Bewusst KEINE automatische
     Silbentrennung in Überschriften: «Mak-lersoftware» oder ein getrenntes
     Akzentwort («schlüssel-fertig») wirkt in einer Headline billig — lieber
     eine Zeile mehr, ausgewogen verteilt. Progressive Enhancement — ohne
     Support bleibt der normale Umbruch von vorher. */
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

.blei { font-size: var(--fs-lead); line-height: 1.6; color: var(--text); max-width: 54ch; }

.auge {
  display: inline-block; margin-bottom: var(--sp-3);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}

section { padding: clamp(64px, 8vw, 112px) 0; }

.kopfzeile { text-align: center; max-width: 64ch; margin: 0 auto clamp(36px, 4vw, 56px); }
.kopfzeile p { margin: 16px auto 0; font-size: 18px; color: var(--text); max-width: 56ch; }
.kopfzeile--links { text-align: left; margin-left: 0; }
.kopfzeile--links p { margin-left: 0; }

/* ---------- Hero ---------- */

.hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(var(--sp-7), 5vw, var(--sp-16));
  align-items: center;
}
@media (max-width: 900px) { .hero-raster { grid-template-columns: 1fr; } }

/* Bildzeichen-Animation im Hero (assets/logo-szene.js): das V stürzt zum
   Dach, der Punkt fällt als Licht darunter — läuft einmal beim Laden, Klick
   startet neu. Das Zeichen steht frei: kein Radius, kein Kasten, nur ein
   weicher Schatten in Seeblau. */
.hero-logo {
  width: 112px; height: 112px; margin-bottom: var(--sp-5);
  cursor: pointer; outline-offset: 6px; color: var(--accent);
  filter: drop-shadow(0 18px 36px rgba(31, 111, 178, 0.28));
}
.hero-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Schatten proportional zum 96px-Zeichen (96/112 ≈ .86 → 16/32 auf der 4pt-Skala). */
@media (max-width: 900px) { .hero-logo { width: 96px; height: 96px; margin-bottom: var(--sp-5); filter: drop-shadow(0 16px 32px rgba(31, 111, 178, 0.28)); } }
.hero h1 { margin: 0; }
.hero h1 .zeigt { color: var(--accent); }
/* Diese H1 steht neben dem Bildschirmbild in der 2-Spalten-Grid — ihre
   Spalte bleibt ab ~900px bei knapp der Hälfte der (auf 1140px gedeckelten)
   Schale und wächst mit dem Viewport praktisch nicht mehr mit. Die
   generische --fs-h1-Stufe (bis 60px) würde dort in fast jeder Zeile eine
   erzwungene Worttrennung brauchen; 48px ist die grösste Stufe, die ohne
   das auskommt. Nur im 2-Spalten-Bereich gatten: darunter ist die Grid
   einspaltig (volle Breite), dort gilt die generische Stufe — sonst wäre
   die H1 bei 700–899px grundlos auf den Floor gedrückt. Untere Klammer 40px,
   damit der Wechsel bei 900/901px kein 7px-Ruckler ist. */
@media (min-width: 901px) {
  .hero-raster h1 { font-size: var(--fs-h1-eng); }
}

/* Vertikaler Rhythmus im Hero: eine bewusste Stufenfolge auf der
   Spacing-Scale statt geratener Einzelwerte (8pt-/4pt-Grid, S. 50–52). Auge
   und H1 gehören eng zusammen (Proximity, S. 33) — kleinster Abstand. Vor
   der primären Aktion steht der grösste Abstand (Hierarchie, S. 30). */
.hero .blei { margin: var(--sp-6) 0 0; }
.hero-tat { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero-fuss {
  margin: var(--sp-6) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  font-size: 15px; color: var(--muted);
}
.hero-fuss li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.hero-fuss svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 3px; }
@media (max-width: 560px) { .hero-tat .knopf { width: 100%; } }

/* Bühne: 3D-Grundriss in heller Kachel */
.buehne {
  position: relative; height: clamp(360px, 46vw, 520px);
  border-radius: var(--r-tile); background: var(--tile); overflow: hidden;
  animation: auftritt-ein 700ms var(--ease) 120ms both;
}
.buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.buehne-etikett {
  position: absolute; left: 18px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px;
  border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.buehne-etikett b { color: var(--accent-hi); font-weight: 700; }
.buehne-etikett .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Der Auftritt laeuft rein ueber CSS und nicht ueber eine Klasse aus dem
   Modul: sonst steht der Hero so lange leer, bis seite.js ausgefuehrt ist —
   auf einer langsamen Leitung sekundenlang, weil Schrift, Bilder und die
   3D-Bibliothek um dieselbe Leitung konkurrieren. Der erste Eindruck einer
   Verkaufsseite darf nicht am Skript haengen. */
@keyframes auftritt-ein {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.auftritt > * { animation: auftritt-ein 600ms var(--ease) both; }
.auftritt > :nth-child(2) { animation-delay: 70ms; }
.auftritt > :nth-child(3) { animation-delay: 140ms; }
.auftritt > :nth-child(4) { animation-delay: 210ms; }
.auftritt > :nth-child(5) { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .auftritt > *, .buehne { animation: none; }
}

/* ---------- Trust-Leiste (nur Belegtes) ---------- */

.vertrauen { background: var(--tile-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.vertrauen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.vertrauen li { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.vertrauen li svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.vertrauen li b { font-weight: 700; color: var(--accent-hi); }

/* ---------- Angebots-Kacheln ---------- */

.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kacheln { grid-template-columns: 1fr; } }

.kachel {
  background: var(--tile); border-radius: var(--r-tile); padding: 26px 24px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.kachel-bild { height: 120px; display: grid; place-items: center; }
.kachel-bild svg { width: 110px; height: 110px; color: var(--accent-hi); }
.kachel h3 { font-size: 22px; }
.kachel p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }

.kachel-tat { display: flex; justify-content: center; margin-top: 36px; }

/* «Ausserdem drin» — das Komplettsystem in einer Leiste */
.komplett {
  margin-top: 28px; padding: 22px 26px; border-radius: var(--r-card);
  border: 1.5px dashed var(--accent-soft); background: #fff;
  display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; align-items: start;
}
@media (max-width: 760px) { .komplett { grid-template-columns: 1fr; } }
.komplett-titel { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 6px; white-space: nowrap; }
.komplett ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.komplett li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--tile); color: var(--ink); font-size: 14px; font-weight: 600;
}
.komplett li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- Erklärzeilen (Bild / Text + Häkchen) ---------- */

.erklaer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.erklaer + .erklaer { margin-top: clamp(56px, 8vw, 112px); }
.erklaer--gespiegelt .erklaer-bild { order: 2; }
@media (max-width: 900px) {
  .erklaer { grid-template-columns: 1fr; }
  .erklaer--gespiegelt .erklaer-bild { order: 0; }
}

.erklaer-bild {
  position: relative; border-radius: var(--r-tile); background: var(--tile-2);
  min-height: 380px; display: grid; place-items: center; overflow: hidden;
}
.erklaer-bild::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0, 98, 92, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 98, 92, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
}
.erklaer-bild svg { position: relative; width: min(72%, 320px); height: auto; color: var(--accent-hi); }

.erklaer h2, .erklaer h3 { font-size: 32px; line-height: 1.12; max-width: 18ch; }
.erklaer p { margin: 16px 0 0; font-size: 17px; color: var(--text); max-width: 52ch; }

.haken { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.haken li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 16px; color: var(--ink); font-weight: 500; }
.haken li span.kreis {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; margin-top: 2px;
}
.haken li span.kreis svg { width: 13px; height: 13px; }

.erklaer .knopf { margin-top: 26px; }

/* ---------- Schritte 1-2-3 ---------- */

.schritte {
  background: var(--tile); border-radius: var(--r-tile); padding: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 800px) { .schritte { grid-template-columns: 1fr; } }
.schritt-nr { font-size: 48px; font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -0.03em; }
.schritt h3 { margin-top: 10px; font-size: 20px; }
.schritt p { margin: 8px 0 0; font-size: 15px; color: var(--text); }

/* ---------- Kaufen statt mieten ---------- */

.vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 800px) { .vergleich { grid-template-columns: 1fr; } }

.vergleich-karte { border-radius: var(--r-tile); padding: clamp(24px, 3vw, 36px); background: var(--tile-2); border: 2px solid transparent; }
.vergleich-karte--wir { background: #fff; border-color: var(--accent); box-shadow: var(--schatten); position: relative; }
.vergleich-karte--wir .band {
  position: absolute; top: -14px; left: 28px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.vergleich-karte h3 { font-size: 22px; }
.vergleich-karte .unter { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.vergleich-karte ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.vergleich-karte li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16px; color: var(--ink); }
.vergleich-karte li svg { width: 22px; height: 22px; margin-top: 1px; }
.vergleich-karte--miete li { color: var(--text); }
.vergleich-karte--miete li svg { color: var(--muted); }
.vergleich-karte--wir li svg { color: var(--ok); }

/* ---------- Geprüfte Zahlen ---------- */

.zahlen-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .zahlen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahl { background: var(--tile); border-radius: var(--r-card); padding: 26px 24px; text-align: center; }
.zahl-wert { font-size: clamp(40px, 4.4vw, 56px); font-weight: 700; color: var(--accent-hi); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.zahl-name { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.zahl-sub { margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.zahlen-quelle { margin: 22px auto 0; max-width: 64ch; text-align: center; font-size: 14px; color: var(--muted); }

/* ---------- Erzeugnisse (Was Sie in der Hand halten) ---------- */

/* Abstand zur Quellenzeile daruber; die Beschriftung traegt ihn,
   damit die Liste selbst dicht an ihrem Titel bleibt. */
.auge-belege { margin-top: 34px; }
.belege {
  margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* minmax(0, 1fr) statt 1fr: die Min-Content-Breite der Karte (Name + nowrap-Pille)
   darf bei 320px nicht über den Rand drücken. */
@media (max-width: 760px) { .belege { grid-template-columns: minmax(0, 1fr); } }
.beleg {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--line);
}
.beleg-symbol { width: 44px; height: 44px; border-radius: 12px; background: var(--tile); display: grid; place-items: center; color: var(--accent-hi); }
.beleg-symbol svg { width: 22px; height: 22px; }
.beleg-name { font-weight: 700; color: var(--ink); font-size: 16px; }
.beleg-was { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.beleg-mass { font-size: 13px; font-weight: 700; color: var(--accent-hi); background: var(--accent-soft); padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }

/* ---------- CTA-Block + Formular ---------- */

.cta-block {
  background: var(--accent-hi); color: #fff; border-radius: var(--r-tile);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px) clamp(120px, 14vw, 180px);
  text-align: center;
}
.cta-block h2 { color: #fff; max-width: 22ch; margin: 0 auto; }
.cta-block p { margin: 14px auto 0; max-width: 52ch; font-size: 18px; color: rgba(255, 255, 255, 0.86); }

.anfrage-karte {
  background: #fff; border-radius: var(--r-tile); box-shadow: var(--schatten); border: 1px solid var(--line);
  margin: -100px auto 0; max-width: 980px; padding: clamp(24px, 4vw, 44px);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px);
  position: relative; z-index: 2;
}
@media (max-width: 900px) { .anfrage-karte { grid-template-columns: 1fr; margin-top: -80px; } }
.anfrage-karte h3 { font-size: 26px; }
.anfrage-karte .blei { font-size: 16px; margin-top: 10px; }
.anfrage-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.anfrage-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; color: var(--text); line-height: 1.5; }
.anfrage-liste svg { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }

form { display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld label, .feld-legende { font-size: 14px; font-weight: 700; color: var(--ink); }
.feld .hinweis { font-weight: 500; color: var(--muted); }
.feld-gruppe { border: 0; padding: 0; margin: 0; }
.feld-legende { padding: 0; margin-bottom: 6px; }

input, textarea {
  width: 100%; padding: 13px 15px; border-radius: var(--r-ctl);
  border: 1.5px solid var(--line-ctl); background: #fff; color: var(--ink);
  font: inherit; font-size: 16px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }

.feld.fehler input, .feld.fehler textarea { border-color: var(--danger-text); }
.feld-fehler { display: none; margin: 0; font-size: 14px; color: var(--danger-text); }
.feld.fehler .feld-fehler { display: block; }

.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pillen label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.pillen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pillen input:checked + label { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }
.pillen input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }

.zustimmung { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--text); line-height: 1.5; }
.zustimmung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { display: none; padding: 14px 16px; border-radius: var(--r-ctl); font-size: 15px; line-height: 1.5; }
.meldung[data-art="ok"] { display: block; background: var(--ok-soft); color: var(--ok-text); border: 1px solid #bde0cd; }
.meldung[data-art="fehler"] { display: block; background: var(--danger-soft); color: var(--danger-text); border: 1px solid #eec4c4; }

/* ---------- Fuss ---------- */

.fuss { border-top: 1px solid var(--line); padding: 40px 0; font-size: 14px; color: var(--muted); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.fuss nav { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
.fuss a { color: var(--muted); text-decoration: none; padding-block: 12px; }
.fuss a:hover { color: var(--ink); }

/* ---------- Reveals ---------- */

[data-auf] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
[data-auf].sichtbar { opacity: 1; transform: none; }
[data-auf="2"] { transition-delay: 80ms; }
[data-auf="3"] { transition-delay: 160ms; }
[data-auf="4"] { transition-delay: 240ms; }
/* Fuenf und sechs fuer die Einwand-Karten — sonst laufen die letzten
   beiden ohne Versatz und die Welle bricht am Ende ab. */
[data-auf="5"] { transition-delay: 320ms; }
[data-auf="6"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-auf], [data-auf-mobil], .auftritt > *, .buehne { opacity: 1 !important; transform: none !important; transition: none !important; }
  .knopf, .kachel, .pillen label, .kopf nav a { transition: none !important; }
  .knopf:hover, .kachel:hover { transform: none; }
  .kopf-menue, .kopf-burger path { transition: none !important; }
  /* Nur die Transitions: kein opacity-Override, sonst springt .flow path von .9 auf 1. */
  .win, .flow path, .flow circle, .win-head::after, .system-fazit { transition: none !important; }
}

/* ---------- Rechtstexte ---------- */

.rechtstext { max-width: 74ch; }
.rechtstext h1 { font-size: clamp(32px, 4.2vw, 46px); margin-top: 14px; }
.rechtstext h1 + .blei { margin-top: 18px; }
.rechtstext h2 { font-size: 24px; margin-top: 40px; }
.rechtstext p, .rechtstext li { color: var(--text); font-size: 16px; }
.rechtstext ul { padding-left: 20px; }
.rechtstext .zurueck { margin-top: 40px; }

/* ====================================================== Angebot in Zahlen
 * Der Preis ist das Argument, nicht die Fussnote: drei Karten nebeneinander,
 * die Zahl gross, darunter was sie umfasst. Die einmalige Karte ist die
 * Hauptaussage und darum petrol abgesetzt.
 */
.preis-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
/* Drei gleichwertige Karten nach dem Videte-Preismuster: weisse Fläche, feiner
   Rand, zentrierter Kopf (Etikett / Wert / Einheit), darunter die Leistungen.
   Keine hervorgehobene Hauptkarte — der Kauf ist kein Tarif unter mehreren. */
.preis-karte {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              border-color 0.5s var(--ease), background-color 0.5s var(--ease);
}
@media (hover: hover) {
  .preis-karte:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 98, 92, 0.15);
    border-color: var(--accent);
    background: var(--accent-soft);
  }
}
.preis-kopf {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preis-etikett {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.preis-wert {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.preis-einheit {
  font-size: 13px;
  color: var(--muted);
}
.preis-unter {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
}
.preis-liste {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}
.preis-liste li {
  position: relative;
  padding-left: 22px;
}
/* Haken als reines CSS — kein zusätzliches SVG je Zeile. */
.preis-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--accent);
  border-width: 0 2.4px 2.4px 0;
  transform: rotate(45deg);
}

.angebot-verweis { margin: 14px auto 0; font-size: 16px; }
.angebot-verweis a { font-weight: 600; }

/* ---------- Unterseite Funktionsumfang (funktionen.html) ----------
   Nachschlagewerk statt Werbeflaeche: drei Spalten je Bereich, damit die
   Grenze gleich neben der Faehigkeit steht und nicht im Kleingedruckten. */
.fu-kopf { padding-block: clamp(48px, 7vw, 88px) 0; }
.fu-kopf h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 18px; max-width: 20ch; }
.fu-kopf .blei { max-width: 62ch; }
.fu-zahlen { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 26px 0 28px; }
.fu-zahlen div { display: grid; gap: 2px; }
.fu-zahlen b { font-size: 30px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fu-zahlen span { font-size: 13px; font-weight: 600; color: var(--muted); }

.fu-uebersicht { padding-block: clamp(40px, 5vw, 64px) 0; }
.fu-klein { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.fu-liste { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 860px) { .fu-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fu-zeile {
  display: grid; grid-template-columns: minmax(0, 16ch) 1fr; gap: 14px;
  align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: var(--text); font-size: 15px; line-height: 1.45;
}
.fu-zeile b { font-weight: 600; color: var(--ink); }
.fu-zeile:hover { color: var(--ink); }
.fu-zeile:hover b { color: var(--accent); }

.fu-gruppe { padding-block: clamp(44px, 6vw, 76px) 0; }
.fu-bereich { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); scroll-margin-top: 84px; }
.fu-bereich:last-of-type { border-bottom: none; margin-bottom: 0; }
.fu-bereich-kopf { margin-bottom: 20px; }
.fu-bereich-kopf h3 { margin: 0 0 6px; font-size: clamp(21px, 2.4vw, 27px); color: var(--ink); }
.fu-bereich-kopf p { margin: 0; font-size: 17px; color: var(--muted); max-width: 62ch; }

.fu-spalten { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 860px) { .fu-spalten { grid-template-columns: 1.45fr 1fr; gap: 38px; } }
.fu-neben { display: grid; gap: 18px; align-content: start; }
.fu-block h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fu-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fu-punkte li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.55; color: var(--text); }
.fu-punkte li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 7px; height: 7px; border-radius: 2px; border: 1.6px solid var(--accent);
}
.fu-punkte--selbst li { font-size: 15px; color: var(--muted); }
.fu-punkte--selbst li::before { border: none; border-radius: 50%; background: var(--ok, #1E9E6A); width: 6px; height: 6px; left: 4px; top: 10px; }
.fu-grenze { background: var(--tile-2); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 16px 18px; }
.fu-punkte--grenze li { font-size: 15px; color: var(--ink); }
.fu-punkte--grenze li::before { border: none; border-radius: 50%; background: var(--line-ctl); width: 6px; height: 6px; left: 4px; top: 10px; }

.fu-zusatz { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .fu-zusatz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fu-zusatz-karte { background: var(--tile-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px 26px; display: grid; gap: 10px; align-content: start; }
.fu-zusatz-karte h3 { margin: 0; font-size: 20px; color: var(--ink); }
.fu-zusatz-karte p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.fu-ehrlich { color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }

.fu-schluss { padding-block: clamp(44px, 6vw, 76px); }
.fu-schluss-karte {
  background: var(--accent-soft); border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 44px); text-align: center; display: grid; gap: 14px; justify-items: center;
}
.fu-schluss-karte h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); color: var(--ink); }
.fu-schluss-karte p { margin: 0; max-width: 60ch; font-size: 17px; color: var(--text); }

/* ---------- Agenda der Vorfuehrung ----------
   Wer 30 Minuten hergibt, will vorher wissen, wofuer. Die Agenda steht darum
   neben dem Formular und nicht erst in der Terminmail. */
.agenda { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 22px; }
.agenda h4 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.agenda-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.agenda-liste li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.agenda-liste span {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-hi);
  font-size: 14px; font-weight: 700;
}
.agenda-liste div { font-size: 15px; line-height: 1.55; color: var(--text); }
.agenda-liste strong { color: var(--ink); font-weight: 600; }
.agenda-danach { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: var(--text); }

/* ---------- Fortbestand ----------
   Der teuerste Einwand beim Kauf bei einem kleinen Anbieter bekommt einen
   eigenen Abschnitt statt einer FAQ-Zeile: vier Zusicherungen, jede eine
   Eigenschaft der ausgelieferten Software — keine Absichtserklaerung. */
.fort-raster { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .fort-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fort-karte {
  background: var(--tile-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 28px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.fort-nr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.fort-karte h3 { margin: 0; font-size: 21px; color: var(--ink); }
.fort-karte p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.fort-schluss {
  margin: 26px auto 0;
  max-width: 72ch;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- Mietkosten-Rechner ----------
   Der Kaufpreis steht bewusst nicht auf der Seite. Damit ein Besucher
   trotzdem eine Groessenordnung im Kopf hat, rechnet er hier seine EIGENEN
   Mietkosten aus — die Zahl, gegen die unser Betrag im Gespraech antritt.
   Rein im Browser, es geht nichts an den Server. */
.rechner {
  margin-top: 26px;
  background: var(--tile-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px;
  display: grid;
  gap: 22px;
}
.rechner-kopf h3 { margin: 0 0 8px; font-size: 22px; color: var(--ink); }
.rechner-kopf p { margin: 0; font-size: 15px; color: var(--muted); max-width: 62ch; }

.rechner-felder { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rechner-felder { grid-template-columns: 200px 260px; } }

.rechner-feld { display: grid; gap: 7px; }
.rechner-feld > span:first-child { font-size: 14px; font-weight: 600; color: var(--ink); }
.rechner-feld input {
  width: 100%;
  font: inherit;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-ctl);
  border-radius: var(--r-ctl);
  padding: 11px 14px;
  min-height: 46px;
}
.rechner-eingabe { position: relative; display: block; }
.rechner-eingabe .rechner-waehrung {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; font-weight: 600; color: var(--muted); pointer-events: none;
}
.rechner-eingabe input { padding-left: 54px; }

.rechner-ergebnis {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--line);
}
@media (min-width: 620px) { .rechner-ergebnis { grid-template-columns: repeat(3, 1fr); } }
.rechner-zelle { background: var(--bg); padding: 18px 20px; display: grid; gap: 4px; }
.rechner-zelle span { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.rechner-zelle b {
  font-size: 26px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.rechner-zelle--stark { background: var(--accent-soft); }
.rechner-zelle--stark b { color: var(--accent-hi); }

.rechner-fuss { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); max-width: 70ch; }

/* Der eine Satz, der den Unterschied zum Abo ausmacht — abgesetzt, damit er
 * nicht zwischen den Karten untergeht. */
/* Der Fortbestand ohne Betreuung ist die Antwort auf die teuerste Frage
   eines Kaufs — sie bekommt darum einen eigenen Titel und Luft, nicht eine
   Fussnote unter den Karten. */
.preis-merksatz {
  margin-top: 26px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-card);
  padding: 26px 28px 28px;
}
.preis-merksatz h3 {
  margin: 0 0 12px;
  font-size: 22px;
  color: var(--ink);
}
.preis-merksatz p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 66ch;
}
.preis-merksatz p:last-child { margin-bottom: 0; }
/* Der Schlusssatz zieht den Vergleich zur Miete — abgesetzt, damit er nicht
   im Fliesstext verschwindet. */
.merksatz-schluss {
  padding-top: 12px;
  border-top: 1px solid var(--accent);
  color: var(--accent-hi);
}
.preis-fuss {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.preis-klein {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================== Einwaende */
.fragen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.frage {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 22px 24px 24px;
}
.frage h3 {
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink);
}
.frage p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

/* ======================================================= Wer dahintersteht */
.person-block {
  display: grid;
  /* Einspaltig, seit die Zahlenkarten weg sind: eine zweite Spalte
     ohne Inhalt ist keine Gestaltung, sondern ein Loch. */
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  background: var(--tile);
  border-radius: var(--r-tile);
  padding: 40px 38px;
}
@media (max-width: 800px) {
  .person-block { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; }
}
.person-text h2 { margin: 0 0 6px; }
.person-name {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-hi);
}
.person-text p {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}

/* ======================================================= Seite «So einfach ist es» (alltag.html)
   Erklärt drei Abläufe mit echten Bildschirmbildern. Baut auf .erklaer,
   .haken, .kacheln, .fragen-raster auf — nur das Neue steht hier. */

.hero--text { padding-bottom: clamp(24px, 3vw, 40px); }
.einstieg { max-width: 62ch; }
.einstieg h1 { margin: 0; }
.einstieg h1 .zeigt { color: var(--accent); }

.kopfzeile .auge { display: inline-block; margin-bottom: 10px; }

/* Bildschirmbild im Rahmen: ruhiger Grund, Bild unverändert, Unterschrift */
.bildkarte {
  margin: 0; padding: 14px; border-radius: var(--r-tile); background: var(--tile-2);
  border: 1px solid var(--line);
}
.bildkarte img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(20, 40, 90,0.35); }
.bildkarte figcaption { margin: 12px 4px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.erklaer .bildkarte { align-self: center; }
.erklaer--klein { align-items: center; }
.erklaer--klein .bildkarte { padding: 12px; }

.erklaer h3 { font-size: 22px; line-height: 1.2; margin: 0; }
.erklaer h3 + h3, .erklaer ul + h3, .erklaer ol + h3 { margin-top: 28px; }
.erklaer-hinweis { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent-soft); font-size: 15px; color: var(--text); }
.erklaer code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; background: var(--tile); padding: 1px 6px; border-radius: 6px; color: var(--ink); }

/* Nummerierte Schritte: Punkt links, Text rechts, 44 px Zeile */
.schrittliste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.schrittliste li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; font-size: 16px; line-height: 1.55; color: var(--text); }
.schrittliste strong { color: var(--ink); }
.schritt-punkt {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-top: 1px;
}

/* Zustände des Objektknopfs: Marke links, Erklärung rechts */
.zustaende { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.zustaende li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--text); }
.zustaende strong { color: var(--ink); }
.zustand-marke {
  display: inline-block; margin-top: 2px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--tile); color: var(--accent-hi); font-size: 13px; font-weight: 700; white-space: nowrap; text-align: center;
}
@media (max-width: 560px) {
  .zustaende li { grid-template-columns: 1fr; gap: 6px; }
  .zustand-marke { justify-self: start; }
  /* Eyebrow bricht hier auf zwei Zeilen: enger und ausgeglichen, nah an der H1. */
  .hero .auge { line-height: 1.35; text-wrap: balance; }
}

/* «In einem Satz»: der eine Satz, den man behalten soll */
.klartext {
  margin-top: clamp(32px, 4vw, 48px); padding: 22px 26px; border-radius: var(--r-card);
  background: var(--tile); display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; align-items: start;
}
@media (max-width: 760px) { .klartext { grid-template-columns: 1fr; } }
.klartext-titel { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 4px; white-space: nowrap; }
.klartext p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 500; max-width: 60ch; }

.kacheln--vier .kachel-bild { height: 96px; }
.kacheln--vier .kachel-bild svg { width: 88px; height: 88px; }
.kacheln--vier .kachel h3 { font-size: 20px; }

.cta-block--flach { text-align: center; }
.hero-tat--mitte { justify-content: center; }
.cta-block--flach { padding-bottom: clamp(40px, 6vw, 80px); }
.cta-block--flach .hero-tat { margin-top: 28px; }
.cta-block--flach .knopf { background: #fff; color: var(--accent-hi); border-color: #fff; }
.cta-block--flach .knopf:hover { background: var(--tile); }
.cta-block--flach .knopf-still { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.cta-block--flach .knopf-still:hover { background: rgba(255, 255, 255, 0.12); }
/* Gestapelt: Bildschirmbild in voller Breite, darunter der Text in zwei Spalten —
   ein 1100 px breites Programmfenster bleibt so lesbar. */
.erklaer--stapel { grid-template-columns: 1fr; gap: 28px; }
.erklaer--stapel .bildkarte { width: 100%; }
.stapel-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .stapel-text { grid-template-columns: 1fr; } }
.stapel-text > div > h3:first-child { margin-top: 0; }
.stapel-text .haken { margin-top: 16px; }
.erklaer-hinweis--oben { margin-top: 0; }
/* Review-Runde 1: Lesbarkeit für Laien, Umbrüche, Kopfzeile der Zustandsliste */
.alltag .frage p, .alltag .kachel p, .alltag .zustaende li, .alltag .erklaer-hinweis { font-size: 16px; line-height: 1.6; }
.alltag .bildkarte figcaption { font-size: 15px; }
.alltag .stapel-text h3, .alltag .erklaer--klein h3 { max-width: 28ch; }
/* text-wrap: balance ist jetzt Teil der globalen h1/h2/h3-Regel. */
.alltag .kopfzeile p, .alltag .blei { text-wrap: pretty; }
.einstieg .hero-fuss { flex-direction: column; gap: 8px; }
.einstieg .hero-tat { margin-top: 28px; }
.zustaende-kopf { display: grid; grid-template-columns: 112px 1fr; gap: 14px; margin: 16px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .zustaende-kopf { display: none; } }
.zustand-marke--offen { background: var(--danger-soft); color: var(--danger-text); }
.erklaer--stapel .bildkarte--schmal { max-width: 760px; margin-inline: auto; }


/* ======================================================= Liquid Glass
   Apple-Liquid-Glass, diszipliniert: fast durchsichtige Flächen (18–30 %
   Weiss) über weichen Farbflecken, starker Blur, 1-px-Lichtkante oben
   links, leises Glanzlicht. Glas nur für Steuerung, Marke und die
   Funktionsfenster — Fliesstext bleibt auf ruhigem Grund lesbar. */
:root {
  /* Glas laut Brand-Board «Farben»: Weiss 55 %, Blur 24–28 px, 1 px
     Innenkante in Weiss, Schatten 0 20px 60px rgba(20,40,90,.10). */
  --glas-bg: rgba(255, 255, 255, 0.45);
  --glas-bg-stark: rgba(255, 255, 255, 0.58);
  --glas-kante-a: rgba(255, 255, 255, 0.90);
  --glas-kante-b: rgba(255, 255, 255, 0.45);
  --glas-kante-c: rgba(255, 255, 255, 0.80);
  --glas-schatten: 0 20px 60px -24px rgba(20, 40, 90, 0.28);
  /* Farbflecken hinter dem Glas: die drei Blau-Radials des Boards. */
  --fleck-a: #C9DAFC;
  --fleck-b: #D6E3FD;
  --fleck-c: #E4ECFB;
}
.glas {
  position: relative;
  background: var(--glas-bg);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--glas-schatten);
}
.glas::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--glas-kante-a), var(--glas-kante-b) 45%, var(--glas-kante-c));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.glas::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.45), transparent 55%);
  mix-blend-mode: soft-light;
}
.glas > * { position: relative; z-index: 1; }

/* Farbflecken hinter der ganzen Seite — das, was das Glas bricht. */
.flecken {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); pointer-events: none;
}
.flecken span { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.9; }
.flecken span:nth-child(1) { background: radial-gradient(closest-side, var(--fleck-a), transparent 72%); top: -28vmax; left: -22vmax; }
.flecken span:nth-child(2) { background: radial-gradient(closest-side, var(--fleck-b), transparent 72%); top: 30vh; right: -26vmax; }
.flecken span:nth-child(3) { background: radial-gradient(closest-side, var(--fleck-c), transparent 74%); bottom: -30vmax; left: 20vw; }
body { background: transparent; }

/* Kopfleiste als Toolbar-Material (macOS-Unified-Toolbar als Vorbild):
   ruhiger als das Basis-.glas — niedrige Sättigung, kein Glanzlicht,
   Trennlinie erst beim Scrollen. Der Rand ist eine dünne, gleichmässige
   Linie statt des Eckenglanz-Verlaufs der Kacheln (der passt auf eine
   1140px-Kachel, nicht auf volle Breite). */
.kopf.glas {
  /* .glas setzt position:relative (für die Randverlauf-Pseudoelemente) und
     überschreibt sonst in der Kaskade das position:sticky von .kopf, weil
     .glas später im File steht — Kopfleiste war dadurch NIE wirklich
     sticky, unabhängig von diesem Umbau. Hier fest verankert. */
  position: sticky;
  top: 0;
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: box-shadow 220ms var(--ease);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
}
.kopf.glas::before { background: rgba(255, 255, 255, 0.13); }
/* Eine Werkzeugleiste hat Typografie und eine Trennlinie, kein Glanzlicht. */
.kopf.glas::after { content: none; }
.kopf.glas.kopf--fest {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(20, 40, 90,0.08),
    0 1px 2px rgba(20, 40, 90,0.05);
}

/* Nav-Links dünner als der Knopf (500 statt 600), damit die Pille das
   einzige fette Element der Leiste bleibt — Hierarchie über Gewicht, nicht
   über zusätzliches Material. */
.kopf nav a { transition: color 160ms var(--ease); }
.kopf nav a:not(.knopf) { font-weight: 500; letter-spacing: -0.01em; }

/* Kopf-Knopf als getöntes Glas-Pill (Muaz: «nicht knallfarbig, helles
   Glas-Pill»): leichte Markenwäsche aus --accent-soft statt reinem Weiss,
   dunkler --ink-Text. Kontrast: --ink auf den drei --fleck-Tönen ≥ 11:1,
   Hover --accent-hi ≥ 7.8:1 — weit über WCAG AA, weil die Leiste nie über
   einem Foto schwebt. Kein Hover-Lift und kein Marketing-Schatten:
   Toolbar-Controls tönen sich nur ein; transform/box-shadow werden
   explizit gesetzt, sonst leckt die globale .knopf:hover-Regel durch — das
   fixt auch das Reduced-Motion-Leck der früheren Variante. */
.kopf.glas .knopf {
  background: rgba(255, 255, 255, 0.5);
  background: color-mix(in srgb, var(--accent-soft) 55%, rgba(255, 255, 255, 0.45));
  color: var(--ink);
  border: 1px solid rgba(20, 40, 90,0.12);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.kopf.glas .knopf:hover, .kopf.glas .knopf:focus-visible {
  background: rgba(255, 255, 255, 0.62);
  background: color-mix(in srgb, var(--accent-soft) 80%, rgba(255, 255, 255, 0.25));
  color: var(--accent-hi);
  border-color: rgba(0, 98, 92, 0.3);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.kopf.glas .knopf:active { transform: none; box-shadow: inset 0 1px 2px rgba(20, 40, 90,0.1); }

/* Kacheln und Fragen leicht glasig, damit die Seite ein Material spricht. */
.kachel, .frage, .vergleich-karte, .anfrage-karte, .schritte, .person-block, .klartext, .bildkarte {
  background: var(--glas-bg-stark);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 20px 50px -30px rgba(20, 40, 90,0.22);
}
.vergleich-karte--wir { border-color: var(--accent); }
.vertrauen { background: var(--glas-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

@supports not (backdrop-filter: blur(1px)) {
  .glas, .kachel, .frage, .vergleich-karte, .anfrage-karte, .schritte, .person-block, .klartext, .bildkarte, .vertrauen {
    background: color-mix(in srgb, #fff 94%, transparent);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glas, .kachel, .frage, .vergleich-karte, .anfrage-karte, .schritte, .person-block, .klartext, .bildkarte, .vertrauen {
    background: color-mix(in srgb, #fff 96%, transparent);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ======================================================= Szene «Die Komplettlösung»
   Marke zoomt heraus (--z 1 → .36), acht Fenster fliegen ein (--p 0 → 1),
   Fäden zeichnen sich (--wN), Ankünfte leuchten (--aN), Fazit erscheint
   (--fazit). BASIS = ENDZUSTAND. */
.system {
  --z: .36; --p: 1; --fazit: 1;
  --w0: 1; --w1: 1; --w2: 1; --w3: 1; --w4: 1; --w5: 1; --w6: 1; --w7: 1; --w8: 1;
  --a0: 1; --a1: 1; --a2: 1; --a3: 1; --a4: 1; --a5: 1; --a6: 1; --a7: 1;
  position: relative;
  padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px);
}
html.system-motion .system { min-height: 320vh; padding-block: 0; }
.system-stage { display: flex; flex-direction: column; gap: 20px; }
html.system-motion .system-stage {
  position: sticky; top: 68px; height: calc(100vh - 68px);
  justify-content: center; overflow: hidden;
}
.system-head { text-align: center; max-width: 60ch; margin: 0 auto; z-index: 6; flex: none; }
.system-head .auge { display: inline-block; margin-bottom: 10px; }
.system-head p { margin: 12px auto 0; font-size: 18px; color: var(--text); text-wrap: pretty; }

.scene {
  position: relative; width: min(1040px, 94vw); height: 700px; margin: 0 auto; flex: none;
  display: grid; place-items: center;
}


/* Die Marken-Karte: bei --z 1 füllt sie die Bühne, bei .36 ist sie die Marke in der Mitte. */
.marke-karte {
  position: relative; z-index: 3; width: min(720px, 80vw);
  border-radius: 28px; padding: 64px 56px; text-align: center;
  transform: scale(var(--z)); transform-origin: center; will-change: transform;
}
.marke-karte .mk-logo {
  display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: 44px; letter-spacing: -0.035em; color: var(--ink);
}
.marke-karte .mk-logo i { width: 60px; height: 60px; display: block; flex: none; color: var(--accent); }
.marke-karte .mk-logo i svg { width: 60px; height: 60px; display: block; }
.marke-karte h2 { margin: 22px 0 0; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; }
.marke-karte p { margin: 14px auto 0; max-width: 46ch; font-size: 18px; color: var(--text); }
.marke-karte .mk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.marke-karte .mk-chips span { padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); font-size: 14px; font-weight: 600; color: var(--ink); }
/* Beim Zoom verschwinden die Details — zurück bleibt die Marke. */
.marke-karte h2, .marke-karte p, .marke-karte .mk-chips { opacity: clamp(0, calc((var(--z) - .62) * 5), 1); }

/* Die Fäden: von der Marke zu jedem Fenster. */
.flow { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--wp, 1)); opacity: .9; }
.flow circle { fill: var(--accent); opacity: var(--ap, 1); }
.flow path:nth-of-type(1) { --wp: var(--w0); } .flow circle:nth-of-type(1) { --ap: var(--a0); }
.flow path:nth-of-type(2) { --wp: var(--w1); } .flow circle:nth-of-type(2) { --ap: var(--a1); }
.flow path:nth-of-type(3) { --wp: var(--w2); } .flow circle:nth-of-type(3) { --ap: var(--a2); }
.flow path:nth-of-type(4) { --wp: var(--w3); } .flow circle:nth-of-type(4) { --ap: var(--a3); }
.flow path:nth-of-type(5) { --wp: var(--w4); } .flow circle:nth-of-type(5) { --ap: var(--a4); }
.flow path:nth-of-type(6) { --wp: var(--w5); } .flow circle:nth-of-type(6) { --ap: var(--a5); }
.flow path:nth-of-type(7) { --wp: var(--w6); } .flow circle:nth-of-type(7) { --ap: var(--a6); }
.flow path:nth-of-type(8) { --wp: var(--w7); } .flow circle:nth-of-type(8) { --ap: var(--a7); }
/* Rückgrat (nur mobil): die senkrechte Linie in der Mittelfuge, wächst mit dem Scroll. */
.flow .flow-rueckgrat { --wp: var(--w8); }

/* Die Funktionsfenster: fast durchsichtiges Glas. --fx/--fy = Startversatz. */
.win {
  position: relative; z-index: 2; width: 250px; border-radius: 16px; overflow: hidden;
  font-size: 12.5px; line-height: 1.45; color: var(--ink);
  transform: translate(calc(var(--fx) * (1 - var(--p))), calc(var(--fy) * (1 - var(--p))));
  opacity: var(--p); will-change: transform, opacity;
}
.win-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-weight: 700; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.6); }
.win-head svg { width: 15px; height: 15px; color: var(--accent-hi); flex: none; }
.win-head b { margin-left: auto; font-weight: 600; color: var(--muted); font-size: 11px; }
.win-body { padding: 10px 12px 12px; display: grid; gap: 6px; }
.win-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.win-row span { color: var(--text); }
.win-row b { font-weight: 600; font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hi); white-space: nowrap; }
.win-row b.ok { background: var(--ok-soft); color: var(--ok-text); }
.win-row b.warn { background: #f9eeda; color: #7d5200; }
.win-foot { margin: 0; font-size: 11px; color: var(--muted); }
/* Ankunft des Fadens: die Kopfzeile leuchtet kurz in Petrol. */
.win-head::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 34px; background: var(--accent-soft); opacity: calc(var(--ap, 1) * .55); pointer-events: none; z-index: -1; }
.win--objekte  { --ap: var(--a0); } .win--portale  { --ap: var(--a1); } .win--postfach { --ap: var(--a2); } .win--anfragen { --ap: var(--a3); }
.win--kalender { --ap: var(--a4); } .win--website  { --ap: var(--a5); } .win--vertraege{ --ap: var(--a6); } .win--rechnung { --ap: var(--a7); }

/* Spalten und Reihe mit festen ABSTÄNDEN statt fester Koordinaten: die
   Fenster können sich nie mehr überlappen, egal wie hoch ihr Inhalt wird
   (vorher 195px-Raster bei bis zu 249px Höhe → Fuss verdeckt). Die Fäden
   liest system.js zur Laufzeit aus genau dieser Geometrie. */
.scene-col {
  position: absolute; top: 0; bottom: 0; width: 250px; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6);
}
.scene-col--links { left: 0; }
.scene-col--rechts { right: 0; }
/* Reihe unter der Marke: Kartenunterkante liegt bei 50% + 72px (400px × .36 / 2),
   dazu 72px Laufweg für den Faden. */
.scene-row {
  position: absolute; left: 0; right: 0; top: calc(50% + 144px); z-index: 2;
  display: flex; justify-content: center; gap: var(--sp-8);
}
/* Zwischen den Spalten bleiben 540px: 2×230 + 32 Mitte + je 24 zu den Spalten. */
@media (min-width: 900px) { .scene-row .win { width: 230px; } }

/* Fazit unter der Szene — erscheint, wenn der letzte Faden angekommen ist. */
.system-fazit {
  text-align: center; max-width: min(64ch, 100%); margin: 0 auto; flex: none; z-index: 6;
  /* Flex-Item darf schrumpfen, sonst drückt der Min-Content bei 320px über den Rand. */
  min-width: 0;
  opacity: var(--fazit); transform: translateY(calc((1 - var(--fazit)) * 12px));
}
.system-fazit p { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.system-fazit p b { color: var(--accent); }
.system-fazit .hero-tat { justify-content: center; margin-top: 20px; }

/* Schmal: keine Sticky-Bühne — Marke oben, Fenster als 2-Spalten-Raster darunter.
   Dieselbe Metapher wie auf Desktop: ein Rückgrat in der Mittelfuge, je Fenster
   ein Ast zur inneren Kante (system.js faedenLegenMobil), Reveals per
   IntersectionObserver (system.js mobilStarten). */
@media (max-width: 899px) {
  .scene { width: 100%; height: auto; display: block; }
  .marke-karte { width: 100%; transform: none; padding: var(--sp-8) var(--sp-5); }
  .marke-karte .mk-logo { font-size: 30px; }
  .marke-karte .mk-logo i { width: 44px; height: 44px; }
  .marke-karte h2 { font-size: 24px; }
  .marke-karte h2, .marke-karte p, .marke-karte .mk-chips { opacity: 1; }
  /* Ohne JS keine Fäden: die Fallback-Koordinaten im HTML sind Desktop-Geometrie. */
  .flow { display: none; }
  html.system-mobil .flow { display: block; }
  /* Mittelfuge 20px = Ast 10px + Punkt; 32px Laufweg, damit das Rückgrat als Stamm lesbar ist. */
  .scene-wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); margin-top: var(--sp-8); }
  /* Spalten-/Reihen-Wrapper lösen sich auf, damit das Raster die acht Fenster direkt sieht. */
  .scene-col, .scene-row { display: contents; }
  /* relative bleibt: z-index 2 muss über .flow (z 1) liegen, Punkte enden unter der Glaskante wie auf Desktop. */
  .win { position: relative; width: auto; transform: none; opacity: 1; }
  /* Kopfzeile bewusst zweizeilig (Angabe unter dem Titel): bei 165px Spalten
     brächen sonst 6 von 8 Köpfe zufällig — der Ast trifft die echte Kopfmitte. */
  .win-head { flex-wrap: wrap; gap: 2px var(--sp-2); }
  .win-head b { flex-basis: 100%; margin-left: 0; padding-left: calc(15px + var(--sp-2)); }
  /* 12px statt 11px: die Miniatur-Fenster werden auf dem Handy in Lesedistanz betrachtet. */
  .win-foot, .win-head b { font-size: 12px; }
  .win-head::after { inset: 0; height: auto; }
  /* Auftritt je Fenster: einblenden, Ast zeichnet nach, Ankunft leuchtet. */
  html.system-mobil .win { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  html.system-mobil .win:not(.dran) { opacity: 0; transform: translateY(16px); }
  html.system-mobil .scene-col--rechts .win, html.system-mobil .scene-row .win:nth-child(2) { transition-delay: 90ms; }
  html.system-mobil .flow path { transition: stroke-dashoffset 400ms var(--ease) 150ms; }
  html.system-mobil .flow .flow-rueckgrat { transition: none; }
  html.system-mobil .flow circle, html.system-mobil .win-head::after { transition: opacity 300ms var(--ease) 400ms; }
  html.system-mobil .system-fazit { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
}
@media (min-width: 900px) { .scene-wins { display: contents; } .flow .flow-rueckgrat { display: none; } }


/* ======================================================= Verkaufsanalyse 2026-09-02
   Schriftskala 13·14·16·18·22·28·42·60, Abstände auf 8-px-Raster, Zeilenlänge. */
body { line-height: 1.6; }
.blei { line-height: 1.5; }
.kachel p, .frage p, .preis-liste, .preis-unter, .hero-fuss, .schritt p, .anfrage-liste li, .vergleich-karte .unter { font-size: 16px; }
.kachel p, .frage p { line-height: 1.5; }
.frage h3, .schritt h3 { font-size: 22px; }
.anfrage-karte h3 { font-size: 22px; }
.kopfzeile p, .cta-block p { font-size: 18px; }
.person-text p, .preis-merksatz p { max-width: 64ch; }
.vertrauen { padding: 16px 0; }
.kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kacheln { grid-template-columns: 1fr; } }
.kachel { padding: 24px; gap: 16px; }
.kachel-tat { margin-top: 32px; }
.komplett { margin-top: 24px; padding: 24px; }
.vergleich, .preis-raster, .zahlen-raster { gap: 24px; }
.fragen-raster { margin-top: 32px; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.frage { padding: 24px; }
.preis-karte { padding: 32px 24px; }
.preis-merksatz { margin-top: 24px; }
.preis-fuss { margin-top: 24px; }
.belege, .beleg, .anfrage-liste { gap: 16px; }
.beleg { padding: 16px; }
.anfrage-liste { margin-top: 24px; }
.kopf nav { gap: 24px; }
.pillen label { border-color: var(--line-ctl); }

/* Übergabe: sechs Glaskarten mit Nummer */
.uebergabe-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .uebergabe-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uebergabe-raster { grid-template-columns: 1fr; } }
.uebergabe-karte { border-radius: var(--r-tile); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.uebergabe-karte .ug-nr { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.uebergabe-karte h3 { margin: 6px 0 0; font-size: 20px; line-height: 1.25; }
.uebergabe-karte p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
#uebergabe .klartext { margin-top: 32px; }

/* Szene: Marke rückt beim Zoom in die Kartenmitte; Bühne skaliert auf den Viewport. */
.marke-karte { height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.marke-karte .mk-logo { transform: translateY(calc((1 - clamp(0, (var(--z) - .36) / .26, 1)) * 96px)); will-change: transform; }
html.system-motion .scene { zoom: var(--s, 1); }
@media (max-width: 899px) { .marke-karte { height: auto; } .marke-karte .mk-logo { transform: none; } }
.system-head p { font-size: 17px; }
/* Kräftigere Flecken, damit das Glas etwas zu brechen hat. */
:root { --fleck-a: #B9D0FB; --fleck-b: #C7D9FC; --fleck-c: #DCE7FA; }

.system-fazit p { font-size: 18px; }
.system-fazit .hero-tat { margin-top: 16px; }
.system-fazit .knopf-gross { padding: 14px 24px; font-size: 15px; }

@media (max-width: 899px) { .win-row { flex-wrap: wrap; } }
/* Hero-Bühne: echtes Bildschirmbild im Glasrahmen statt 3D-Drahtgitter. */
.buehne--bild { height: auto; min-height: 0; padding: 12px; border-radius: var(--r-tile); display: block; margin: 0; }
.buehne--bild img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 36px -20px rgba(20, 40, 90,0.35); }
.buehne--bild .buehne-etikett { position: absolute; left: 24px; bottom: 24px; }
/* Hero: Bild bekommt die grössere Hälfte, Etikett steht unter dem Bild statt darauf. */
.buehne--bild { padding: 10px; }
.buehne--bild .buehne-etikett { position: static; display: inline-flex; margin: 12px 4px 2px; background: rgba(255,255,255,.7); }

/* ======================================================= SEO-Inhalt 2026-09-02 */
.zielgruppen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .zielgruppen { grid-template-columns: 1fr; } }
.zielgruppe { border-radius: var(--r-tile); padding: 24px; }
.zielgruppe h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
.zielgruppe p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.zielgruppen-fuss { text-align: center; margin: 24px 0 0; font-size: 16px; color: var(--text); }
.einordnung { max-width: 68ch; }
.einordnung h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 16px; }
.einordnung h3 { font-size: 20px; margin: 28px 0 8px; }
.einordnung p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); }
/* Wer dahintersteht: Porträt im runden Glasring — ruhig, seriös, nahbar. */
.person-block--mit-bild { grid-template-columns: 232px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 800px) { .person-block--mit-bild { grid-template-columns: 1fr; justify-items: center; text-align: center; } .person-block--mit-bild .person-text { text-align: left; } }
.portraet { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.portraet img {
  width: 200px; height: 200px; border-radius: 50%; display: block; object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--accent-soft), 0 24px 48px -24px rgba(20, 40, 90,0.45);
}
.portraet figcaption { text-align: center; font-weight: 700; color: var(--ink); font-size: 16px; line-height: 1.35; }
.portraet figcaption span { display: block; font-weight: 500; color: var(--muted); font-size: 14px; margin-top: 2px; }
.person-block--mit-bild .person-name { display: none; }

/* ======================================================= Mobil 2026-09-05
   Handy trägt dieselbe Erscheinung wie Desktop: gleiche Materialien, gleiche
   Bausteine, proportionale Abstände. Alles ≤ 960/800/560px — Desktop bleibt
   pixelgleich. Der Block steht bewusst am Dateiende: die Basisregeln der
   Verkaufsanalyse (.preis-karte, .uebergabe-karte, .vergleich) liegen
   ausserhalb von Media Queries und gewinnen sonst bei gleicher Spezifität. */

/* Menü-Panel: Glas unter der Leiste, Geschwister des Kopfs. Muss nach .glas
   stehen, sonst gewinnt dessen position: relative gegen fixed. */
.kopf-menue {
  display: none; position: fixed;
  top: calc(var(--kopf-h) + var(--sp-2)); left: var(--gutter); right: var(--gutter); z-index: 39;
  flex-direction: column; gap: var(--sp-1); padding: var(--sp-3);
  border-radius: var(--r-tile); background: var(--glas-bg-stark);
}
.kopf-menue a:not(.knopf) {
  display: flex; align-items: center; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-ctl); font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--muted); text-decoration: none;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.kopf-menue a:not(.knopf):hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }
/* Aktiver Eintrag = dasselbe Glasplättchen wie in der Desktop-Leiste. */
.kopf-menue a[aria-current] { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(20, 40, 90, 0.08); }
.kopf-menue .knopf { width: 100%; margin-top: var(--sp-2); }
@media (max-width: 960px) {
  .kopf-menue {
    display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
    transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms;
  }
  .kopf-menue.offen { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
}

@media (max-width: 800px) {
  /* Band der immovend-Karte braucht Luft zur Karte darüber und flüchtet mit dem Text. */
  .vergleich { gap: var(--sp-8); }
  .vergleich-karte--wir .band { left: var(--sp-6); }
  /* Kopfzeilen-Marge (36px) reicht — sonst 70px, wo #modell/#uebergabe 36px haben. */
  .preis-raster { margin-top: 0; }
}

@media (max-width: 560px) {
  /* Übergabe: Kreis neben dem Titel statt darüber — gleiche Karte, 50px weniger Leerhöhe. */
  .uebergabe-karte { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-2); align-items: center; padding: var(--sp-5); }
  .uebergabe-karte h3 { margin: 0; }
  .uebergabe-karte p { grid-column: 1 / -1; }
  #uebergabe .klartext { padding: var(--sp-5); }
  /* Reveal je Karte statt für den 1339px-Block: der Block ist sofort da, jede Karte tritt einzeln ein. */
  .uebergabe-raster[data-auf] { opacity: 1; transform: none; transition: none; }
  [data-auf-mobil] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  [data-auf-mobil].sichtbar { opacity: 1; transform: none; }

  /* Hero-Etikett bricht als Fliesstext statt in zwei Flex-Spalten (Textknoten
     und <b> wären getrennte Items); Punkt bleibt auf der ersten Zeile. */
  .buehne--bild .buehne-etikett { display: inline-block; line-height: 1.4; }
  .buehne--bild .buehne-etikett .punkt { display: inline-block; vertical-align: middle; margin: -2px 9px 0 0; }

  /* Preis: Padding auf der Skala, Knopf in voller Breite wie im Hero. */
  .preis-karte { padding: var(--sp-6) var(--sp-5); }
  .preis-merksatz { padding: var(--sp-6) var(--sp-5); }
  .preis-merksatz p { font-size: 16px; line-height: 1.6; }
  .preis-fuss { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .preis-fuss .knopf { width: 100%; }
  .preis-klein { font-size: 15px; max-width: none; }

  /* Anfrage: vier gleiche Pillen-Zellen, Sekundärtext ≥ 15px, Checkbox 24px. */
  .pillen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .pillen > span { display: contents; }
  .pillen label { justify-content: center; }
  .feld label, .feld-legende, .feld-fehler, .zustimmung { font-size: 15px; }
  .zustimmung { grid-template-columns: 24px 1fr; }
  .zustimmung input { width: 24px; height: 24px; margin-top: 0; }

  /* Fuss: zwei bündige Spalten statt ausgefranstem Umbruch. */
  .fuss { padding: var(--sp-8) 0; }
  .fuss-innen { gap: var(--sp-4); }
  .fuss nav { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
}

/* Mobil-Politur (Gegenprüfung 2026-09-05): Etikett-Zusatz nie unter den Punkt
   brechen; 14px-Nebentexte auf dem Handy auf 15px — Desktop unberührt. */
@media (max-width: 560px) {
  .buehne-etikett b { white-space: nowrap; }
  .vertrauen li, .komplett li, .beleg-was, .fuss, .fuss a { font-size: 15px; }
}

/* ======================================================= Integrationen 2026-09-17
   Logo-Schleife ohne Karten: reine Wortmarken in Logo-Grau, zwei gegenläufige
   Bänder, reines CSS (CSP: kein Inline-Script, kein Inline-Stil). Jede Spur
   enthält die Liste zweimal (zweite aria-hidden), die Animation fährt genau
   -50 % — nahtlose Schleife ohne JS. Kein gap zwischen den Listen, jede Liste
   trägt die halbe Lücke als Innenabstand, damit die Naht denselben Abstand
   hat wie zwei Logos. Tempo ≈ 35 px/s. Anhalten: Hover/Fokus und der Schalter
   .verbund-pause (Touch, WCAG 2.2.2) über .verbund--still; reduced-motion
   zeigt die Wortmarken statisch als Zeile mit Umbruch (Duplikat weg).
   Echte Logodateien später: <img> statt <span class="verbund-wort"> im
   selben <li> — Höhe, Grau und Abstand sind unten schon vorbereitet. */
.verbund { overflow: hidden; padding-top: clamp(40px, 5vw, 56px); padding-bottom: clamp(40px, 5vw, 56px); }
.verbund .kopfzeile { margin-bottom: clamp(24px, 3vw, 32px); }
.verbund-titel { margin: 0 0 4px; text-align: center; font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: 0; color: var(--muted); padding: 0 var(--gutter); }
.verbund-band + .verbund-titel { margin-top: 20px; }
.verbund-band {
  position: relative; padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.verbund-spur { display: flex; width: max-content; animation: verbund-lauf 64s linear infinite; will-change: transform; }
.verbund-band--zurueck .verbund-spur { animation-direction: reverse; animation-duration: 80s; }
.verbund-band:hover .verbund-spur, .verbund-band:focus-within .verbund-spur, .verbund--still .verbund-spur { animation-play-state: paused; }
.verbund-liste { list-style: none; margin: 0; padding: 0 32px; display: flex; align-items: center; gap: 64px; flex: none; }
.verbund-stueck { display: flex; align-items: center; height: 40px; white-space: nowrap; }
.verbund-wort {
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink); opacity: 0.58;
}
/* Höhe je Logo: 30 px für alle wäre rechnerisch gleich und optisch schief —
   eine breite Wortmarke wirkt dann doppelt so gross wie ein quadratisches
   Zeichen. Jedes Bild bringt seine Höhe als --h mit, der Wert steht im
   Markup neben width/height (kein Springen beim Laden). */
.verbund-stueck img { height: var(--h, 30px); width: auto; display: block; opacity: 0.7; filter: grayscale(1); }
.verbund-fuss { margin: 20px auto 0; max-width: 64ch; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
.verbund-schalter { margin: 12px 0 0; text-align: center; }
.verbund-pause { min-height: 44px; padding: 10px 18px; font-size: 14px; }
@keyframes verbund-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .verbund-band { -webkit-mask-image: none; mask-image: none; }
  .verbund-spur { animation: none; width: auto; }
  .verbund-liste { flex-wrap: wrap; justify-content: center; gap: 20px 48px; padding: 0 var(--gutter); }
  .verbund-liste[aria-hidden="true"], .verbund-schalter { display: none; }
}
@media (max-width: 560px) {
  .verbund-liste { gap: 40px; padding: 0 20px; }
  .verbund-wort { font-size: 22px; }
  .verbund-stueck img { height: calc(var(--h, 30px) * 0.8); }
  .verbund-fuss, .verbund-titel { font-size: 15px; }
}

/* ======================================================= Kacheln in drei Gruppen 2026-09-17
   Zwölf Kacheln = 3 Gruppen × 4 (nur #angebot; alltag.html behält .kacheln--vier).
   Gruppenzeile ist eine h3 über alle Spalten, die Kacheltitel sind h4 —
   echte Gliederung statt zwölf gleichrangiger h3. Abstände auf dem 8er-Raster:
   Grid-gap 24, Gruppenzeile 8 oben / −8 unten → 32 über, 16 unter der Zeile. */
#angebot .kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { #angebot .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #angebot .kacheln { grid-template-columns: 1fr; } }
.kachel-gruppe {
  grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px;
  margin: 8px 0 -8px; font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-hi);
}
.kachel-gruppe:first-child { margin-top: 0; }
.kachel-gruppe small { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.kachel-gruppe::after { content: ""; flex: 1 1 40px; align-self: center; height: 1px; background: var(--line); }
#angebot .kachel h4 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
#angebot .kachel-bild { height: 100px; }
#angebot .kachel-bild svg { width: 92px; height: 92px; }

/* Akzent-Kleintext: Seeblau erreicht auf Grund 5.0:1 — Tiefblau 8.0:1. */
.auge, .komplett-titel { color: var(--accent-hi); }