/* ═══════════════════════════════════════════════════════════════════
   KAPITALSTEIN „Klartext" — Designsystem 2026 (Stand 05.09.2026)
   Leitplanken: docs/brand/brandkit.md · Vorbild-Messung: docs/brand/vorbilder-messung.md

   Grundsätze
   - Monochrome Basis (Weiß, Sand, Tinte, Nacht) + EINE Akzentfarbe (Kapital-Blau).
   - Display-Grotesk „Geist" 500 mit enger Sperrung und Zeilenhöhe 1,0;
     Lauftext „Inter" 400/500. Beide selbst gehostet (klartext-schriften.css).
   - Pillen-Buttons 42 px, Karten mit 20 px Radius, Slides mit großem Bild,
     Chips als Tabs, ehrliches Kleingedrucktes direkt unter dem Versprechen.
   - Eigener Namensraum: kollidiert nicht mit styles.css / stil.css / neu.css.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Farben (Rohwerte) ── */
  --weiss:#FFFFFF;
  --sand:#F5F2EC;      /* warme Fläche, „Stein" */
  --sand-2:#ECE7DD;    /* Chips, Ränder auf Sand */
  --sand-3:#DED7C8;
  --tinte:#111214;     /* Text */
  --tinte-2:#3D3E44;   /* Zweittext */
  --tinte-3:#6F7078;   /* Eyebrows, Kleingedrucktes (4,9:1 auf Weiß) */
  --linie:#E4E1DA;     /* Rahmen auf Hell */
  --nacht:#0B0C0F;     /* dunkle Sektionen, Footer */
  --nacht-2:#17181D;   /* Karten auf Nacht */
  --nacht-3:#24262C;
  --nacht-linie:rgba(255,255,255,.12);
  --akzent:#2D4EF5;    /* Kapital-Blau: Flächen, Buttons, große Ziffern */
  --akzent-dunkel:#1E38C8; /* Akzent als Kleintext auf Weiß (≥ 4,5:1) */
  --akzent-hell:#E9EDFE;   /* Tinte 10 % */
  --akzent-nacht:#8AA0FF;  /* Akzent auf Nacht */
  --gruen:#1B8A5A; --gruen-hell:#E4F4EC;
  --gruen-dunkel:#187C51;  /* Grün als Fläche unter weißem Text: 5,20:1. --gruen selbst käme nur auf 4,35 */
  --rot:#C0392B;   --rot-hell:#FBE9E7;

  /* ── Rollen (werden je Thema umgeschaltet) ── */
  --bg:var(--weiss); --fg:var(--tinte); --fg-2:var(--tinte-2); --fg-3:var(--tinte-3);
  --rand:var(--linie); --karte:var(--weiss); --karte-2:var(--sand);
  --link:var(--akzent-dunkel);

  /* ── Schrift ── */
  --display:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --t-display-1:clamp(2.75rem, 1.4rem + 5.4vw, 5.5rem);
  --t-display-2:clamp(2rem, 1.15rem + 3.2vw, 3.5rem);
  --t-display-3:clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --t-heading:1.25rem;
  --t-lead:clamp(1.125rem, 1rem + .45vw, 1.3125rem);
  --t-body:1rem; --t-small:.875rem; --t-micro:.75rem;

  /* ── Radien ── */
  --r-8:8px; --r-12:12px; --r-16:16px; --r-20:20px; --r-24:24px; --r-32:32px; --r-pille:9999px;

  /* ── Abstände ── */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-32:32px;
  --s-40:40px; --s-48:48px; --s-64:64px; --s-80:80px; --s-96:96px; --s-128:128px;
  --sektion:clamp(64px, 4vw + 40px, 112px);
  --inhalt:1120px; --inhalt-schmal:760px; --inhalt-breit:1280px;
  --rand-x:clamp(20px, 4vw, 48px);
  --nav-h:72px;

  /* ── Motion ── */
  --d-xs:100ms; --d-sm:200ms; --d-md:300ms; --d-lg:450ms; --d-xl:900ms;
  --ease:cubic-bezier(.15,.5,.5,1);
  --ease-aus:cubic-bezier(.2,.7,.2,1);

  /* ── Schatten ── */
  --schatten-1:0 1px 2px rgba(17,18,20,.05), 0 4px 16px rgba(17,18,20,.06);
  --schatten-2:0 2px 6px rgba(17,18,20,.08), 0 20px 56px rgba(17,18,20,.14);

  color-scheme:light;
}

/* ═══ Themen (Rollen-Umschaltung je Sektion) ═══ */
.thema-sand{ --bg:var(--sand); --karte:var(--weiss); --karte-2:var(--sand-2); --rand:var(--sand-3); --fg-3:#64656D; /* Tinte-3 misst auf Sand nur 4,4:1, #64656D 5,2:1 */ }
.thema-nacht{
  --bg:var(--nacht); --fg:var(--weiss); --fg-2:rgba(255,255,255,.78); --fg-3:rgba(255,255,255,.58);
  --rand:var(--nacht-linie); --karte:var(--nacht-2); --karte-2:var(--nacht-3); --link:var(--akzent-nacht);
  color-scheme:dark;
}
.thema-akzent{
  --bg:var(--akzent); --fg:var(--weiss); --fg-2:rgba(255,255,255,.92); --fg-3:rgba(255,255,255,.88); /* 88 % Weiß auf Akzent = 4,95:1, gemessen 06.09.2026 */
  --rand:rgba(255,255,255,.22); --karte:rgba(255,255,255,.12); --karte-2:rgba(255,255,255,.18); --link:var(--weiss);
  color-scheme:dark;
}
.thema-sand,.thema-nacht,.thema-akzent{ background:var(--bg); color:var(--fg); }

/* ═══ Basis ═══ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--text); font-size:var(--t-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:clip;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
p a,li a,.fliess a{ color:var(--link); text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px; }
p a:hover,li a:hover{ text-decoration-thickness:2px; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--akzent); outline-offset:3px; border-radius:4px; }
[hidden]{ display:none !important; }
::selection{ background:var(--akzent-hell); color:var(--tinte); }
.thema-nacht ::selection,.thema-akzent ::selection{ background:rgba(255,255,255,.25); color:var(--weiss); }
[id]{ scroll-margin-top:calc(var(--nav-h) + 16px); }

/* ═══ Typografie ═══ */
h1,h2,h3,h4,.display-1,.display-2,.display-3{
  font-family:var(--display); font-weight:500; margin:0; color:var(--fg);
  text-wrap:balance; overflow-wrap:anywhere;
}
h1,.display-1{ font-size:var(--t-display-1); line-height:1; letter-spacing:-.03em; }
h2,.display-2{ font-size:var(--t-display-2); line-height:1.02; letter-spacing:-.025em; }
h3,.display-3{ font-size:var(--t-display-3); line-height:1.1; letter-spacing:-.02em; }
h4,.heading{ font-family:var(--display); font-size:var(--t-heading); font-weight:600; line-height:1.3; letter-spacing:-.01em; }
p{ margin:0; }
p + p{ margin-top:var(--s-16); }
.lead{ font-size:var(--t-lead); line-height:1.45; color:var(--fg-2); }
.klein{ font-size:var(--t-small); line-height:1.5; color:var(--fg-2); }
.micro{ font-size:var(--t-micro); line-height:1.5; color:var(--fg-3); }
.eyebrow{
  font-family:var(--text); font-size:.8125rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 var(--s-16);
}
.eyebrow.akzent{ color:var(--link); }
.zahlwert{ font-family:var(--display); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1; }
strong,b{ font-weight:600; }
em{ font-style:normal; color:var(--link); }
.thema-nacht em{ color:var(--akzent-nacht); }
.thema-akzent em{ color:var(--weiss); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.08em; }
hr{ border:0; border-top:1px solid var(--rand); margin:var(--s-32) 0; }
.mass{ max-width:var(--inhalt-schmal); }
.mitte{ text-align:center; margin-left:auto; margin-right:auto; }
.fliess{ font-size:1.0625rem; line-height:1.65; color:var(--fg-2); }
.fliess h2{ margin-top:var(--s-48); margin-bottom:var(--s-16); font-size:var(--t-display-3); }
.fliess h3{ margin-top:var(--s-32); margin-bottom:var(--s-12); font-size:var(--t-heading); font-weight:600; }
.fliess ul,.fliess ol{ padding-left:1.25em; margin:var(--s-16) 0; }
.fliess li + li{ margin-top:var(--s-8); }
.fliess table{ width:100%; border-collapse:collapse; margin:var(--s-24) 0; font-size:var(--t-small); }
.fliess th,.fliess td{ text-align:left; padding:var(--s-12) var(--s-8); border-bottom:1px solid var(--rand); vertical-align:top; }
.fliess th{ font-weight:600; color:var(--fg); }

/* ═══ Layout ═══ */
.innen{ width:100%; max-width:var(--inhalt); margin:0 auto; padding-left:var(--rand-x); padding-right:var(--rand-x); }
.innen.schmal{ max-width:calc(var(--inhalt-schmal) + 2 * var(--rand-x)); }
.innen.breit{ max-width:var(--inhalt-breit); }
.sektion{ padding-top:var(--sektion); padding-bottom:var(--sektion); position:relative; }
.sektion.eng{ padding-top:var(--s-64); padding-bottom:var(--s-64); }
.sektion-kopf{ max-width:820px; margin-bottom:clamp(40px, 4vw, 64px); }
.sektion-kopf.mitte{ margin-left:auto; margin-right:auto; text-align:center; }
.sektion-kopf .lead{ margin-top:var(--s-20); max-width:640px; }
.sektion-kopf.mitte .lead{ margin-left:auto; margin-right:auto; }
.raster{ display:grid; gap:var(--s-20); }
.raster-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.raster-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.raster-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:900px){ .raster-3,.raster-4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .raster-2,.raster-3,.raster-4{ grid-template-columns:1fr; } }
.reihe{ display:flex; flex-wrap:wrap; gap:var(--s-12); align-items:center; }
.abstand-oben{ margin-top:var(--s-32); }

/* ═══ Ankündigungsleiste ═══ */
.leiste{
  background:var(--akzent); color:var(--weiss); font-size:.8125rem; font-weight:500;
  text-align:center; padding:10px var(--rand-x); line-height:1.4;
}
.leiste a{ color:inherit; text-decoration:underline; text-underline-offset:.15em; margin-left:.35em; white-space:nowrap; }

/* ═══ Kopfleiste ═══ */
.kopf{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--d-md) var(--ease), background var(--d-md) var(--ease);
}
.kopf.fest{ border-bottom-color:var(--linie); }
.kopf-innen{ height:100%; display:flex; align-items:center; gap:var(--s-32); }
.marke{ display:inline-flex; align-items:center; gap:10px; color:var(--tinte); flex:0 0 auto; }
.marke svg{ width:26px; height:auto; fill:currentColor; }
.marke .wort{ font-family:var(--display); font-weight:600; font-size:1.25rem; letter-spacing:-.02em; line-height:1; }
.kopf-nav{ display:flex; gap:var(--s-4); margin-left:var(--s-8); }
.kopf-nav a{
  font-family:var(--text); font-size:.9375rem; font-weight:500; color:var(--tinte-2); white-space:nowrap;
  padding:8px 12px; border-radius:var(--r-pille); transition:background var(--d-sm) var(--ease), color var(--d-sm) var(--ease);
}
.kopf-nav a:hover,.kopf-nav a[aria-current="page"]{ color:var(--tinte); background:var(--sand); }
/* Sammelpunkt „Immobilien" (07.09.2026): drei Produkte unter einem Eintrag, damit die
   Leiste bei vier Punkten bleibt statt auf sechs zu wachsen. Der Knopf sieht aus wie ein
   Navigationslink, ist aber ein <button> — „Immobilien" ist keine Seite.
   Aufgeklappt wird per Klick (Touch kennt kein Hover); :focus-within haelt die Klappe
   waehrend der Tastaturbedienung offen, auch wenn das Skript nicht laeuft. */
.nav-gruppe{ position:relative; display:flex; }
.nav-auf{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--text); font-size:.9375rem; font-weight:500; color:var(--tinte-2); white-space:nowrap;
  padding:8px 12px; border-radius:var(--r-pille); cursor:pointer;
  transition:background var(--d-sm) var(--ease), color var(--d-sm) var(--ease);
}
.nav-auf:hover,.nav-auf[aria-expanded="true"],.nav-auf[aria-current="page"]{ color:var(--tinte); background:var(--sand); }
.nav-pfeil{ width:15px; height:15px; transition:transform var(--d-sm) var(--ease); }
.nav-auf[aria-expanded="true"] .nav-pfeil{ transform:rotate(180deg); }
.nav-klapp{
  position:absolute; top:calc(100% + 8px); left:0; z-index:61; min-width:220px;
  display:flex; flex-direction:column; gap:2px; padding:8px;
  background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r-karte);
  box-shadow:0 12px 32px rgba(17,17,17,.10);
}
/* [hidden] setzt display:none — ohne diese Zeile schlaegt das display:flex oben es platt
   und die Klappe stuende dauerhaft offen. Gemessen: Spezifitaet gleich, Reihenfolge
   entscheidet, deshalb steht die Regel HINTER der Grundregel. */
.nav-klapp[hidden]{ display:none; }
.nav-klapp a{ padding:9px 12px; border-radius:10px; }
/* Sammelpunkt „Unternehmen" (11.09.2026) nach dem Vorbild von revolut.com: ein breites
   Panel statt einer schmalen Spalte, oben eine eigene Übersichtszeile mit Pfeil, darunter
   Rubriken nebeneinander. Struktur 1:1 von dort, Farben und Radien aus unserem Klartext-CI.
   Es erbt alles von .nav-klapp und überschreibt nur, was breit statt schmal sein muss —
   sonst liefen zwei Klappmuster nebeneinander auseinander. */
.nav-breit{ min-width:min(560px, calc(100vw - var(--s-8) * 2)); padding:16px; gap:0; }
/* Das Panel öffnet links am Knopf. Bei „Unternehmen" als letztem Punkt der Leiste liefe es
   sonst über den rechten Rand hinaus — deshalb rechtsbündig ausrichten. */
.nav-breit{ left:auto; right:0; }
.nav-uebersicht{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  font-weight:600; color:var(--tinte); padding:10px 12px; border-radius:10px;
  border-bottom:1px solid var(--linie); border-bottom-left-radius:0; border-bottom-right-radius:0;
}
.nav-uebersicht svg{ width:18px; height:18px; flex:none; transition:transform var(--d-sm) var(--ease); }
.nav-uebersicht:hover svg{ transform:translateX(3px); }
.nav-spalten{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px; }
/* Die beiden Rubriken sitzen als eigene Flächen auf dem weissen Panel (11.09.2026,
   auf Jeffs Wunsch). --sand ist die warme Fläche des CI, hier bewusst dezent:
   die Trennung soll die Gruppen zeigen, nicht das Menü in Kacheln zerlegen. */
.nav-spalte{
  display:flex; flex-direction:column; gap:2px;
  background:var(--sand); border-radius:12px; padding:8px 4px 10px;
}
/* Der Link-Hover der Kopfleiste ist selbst --sand. Auf sandfarbenem Grund wäre er
   unsichtbar — der Menüpunkt sähe tot aus, obwohl er reagiert. Innerhalb der
   Spalten hebt deshalb --sand-2 ab, die nächste Stufe derselben Reihe. */
.nav-spalte a:hover,.nav-spalte a[aria-current="page"]{ background:var(--sand-2); }
/* Die Rubrik ist eine Überschrift, kein Link: kein Hover, kein Ziel. 13px bleibt über der
   CI-Untergrenze von 12px, und ohne Versalien — die sind der Eyebrow-Zeile vorbehalten.
   KEIN opacity: eine gedämpfte Farbe zusätzlich durchscheinend zu machen kostete hier
   den Kontrast. Gemessen waren es 2,77:1 gegen das weisse Panel, also unter WCAG AA
   selbst für grossen Text. Wer dämpfen will, nimmt eine hellere Farbe und misst sie. */
.nav-rubrik{
  font-family:var(--text); font-size:.8125rem; font-weight:600; color:var(--tinte-2);
  padding:4px 12px 6px; margin:0;
}
.kopf-aktionen{ margin-left:auto; display:flex; align-items:center; gap:var(--s-8); }
.kopf-aktionen .leise{ font-size:.9375rem; font-weight:500; color:var(--tinte-2); padding:8px 12px; }
.kopf-aktionen .leise:hover{ color:var(--tinte); }
.burger{ display:none; width:42px; height:42px; border-radius:var(--r-pille); align-items:center; justify-content:center; color:var(--tinte); }
.burger:hover{ background:var(--sand); }
.burger svg{ width:22px; height:22px; }
.burger .zu{ display:none; }
.burger[aria-expanded="true"] .auf{ display:none; }
.burger[aria-expanded="true"] .zu{ display:block; }
@media (max-width:900px){
  .kopf-nav{ display:none; }
  .kopf-aktionen .leise{ display:none; }
  /* Mobil (Jeff 06.09.): kein Burger rechts, das Logo ist das Menü. Die vier Balken der Marke werden zum X,
     der Stein winkt alle 7 s als Hinweis, dass die Marke tippbar ist. */
  .burger{ display:none !important; }
  .kopf .marke[aria-controls]{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .kopf .marke svg rect{ transform-box:fill-box; transform-origin:center; transition:transform var(--d-lg) var(--ease-aus), opacity var(--d-md) var(--ease); }
  .kopf .marke .stein{ animation:stein-wink 7s var(--ease) 2s infinite; }
  body.menue-offen .kopf .marke .stein{ animation:none; }
  body.menue-offen .kopf .marke svg rect:nth-of-type(1){ transform:translateY(19px) rotate(45deg); }
  body.menue-offen .kopf .marke svg rect:nth-of-type(5){ transform:translateY(-19px) rotate(-45deg); }
  body.menue-offen .kopf .marke svg rect:nth-of-type(2),body.menue-offen .kopf .marke svg rect:nth-of-type(3),body.menue-offen .kopf .marke svg rect:nth-of-type(4){ opacity:0; transform:scaleX(.2); }
  .kopf-innen{ gap:var(--s-16); }
}
/* Mobil-Menü */
.menue{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:59; background:var(--weiss);
  padding:var(--s-24) var(--rand-x) var(--s-48); overflow:auto;
  transform:translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity var(--d-md) var(--ease), transform var(--d-md) var(--ease), visibility 0s linear var(--d-md);
}
.menue.offen{ transform:none; opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s; }
.menue a.gross{ display:block; font-family:var(--display); font-weight:500; font-size:2rem; letter-spacing:-.02em; padding:14px 0; border-bottom:1px solid var(--linie); color:var(--tinte); }
/* Gruppe „Immobilien" im Mobil-Menue: Ueberschrift statt Klappknopf. Platz ist hier
   keine Mangelware, und ein zweiter Klick vor dem Ziel kostet nur. Die Produktlinks
   bleiben a.gross, damit Groesse und Trennlinie zum Rest passen. */
.menue .menue-gruppe{ margin:var(--s-16) 0 0; }
.menue .menue-kopf{
  font-family:var(--text); font-size:.8125rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinte-3, var(--tinte-2)); padding-bottom:6px;
}
.menue .menue-gruppe a.gross{ font-size:1.75rem; }
.menue .menue-fuss{ margin-top:var(--s-24); display:flex; flex-direction:column; gap:var(--s-12); }
body.menue-offen{ overflow:hidden; }

/* ═══ Buttons ═══ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 24px; border-radius:var(--r-pille);
  font-family:var(--display); font-size:1rem; font-weight:500; letter-spacing:-.005em; line-height:1;
  white-space:nowrap; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:transform var(--d-sm) var(--ease), background var(--d-sm) var(--ease), color var(--d-sm) var(--ease), border-color var(--d-sm) var(--ease), box-shadow var(--d-sm) var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; }
.btn-dunkel{ background:var(--tinte); color:var(--weiss); }
.btn-dunkel:hover{ background:#000; }
.btn-hell{ background:var(--weiss); color:var(--tinte); }
.btn-hell:hover{ background:var(--sand); }
.btn-akzent{ background:var(--akzent); color:var(--weiss); }
.btn-akzent:hover{ background:var(--akzent-dunkel); }
.btn-linie{ background:transparent; color:var(--fg); border-color:var(--rand); }
.btn-linie:hover{ border-color:var(--fg); }
.thema-nacht .btn-linie{ border-color:rgba(255,255,255,.28); }
.thema-nacht .btn-linie:hover{ border-color:var(--weiss); }
.btn-glas{ background:rgba(255,255,255,.12); color:var(--weiss); }
.btn-glas:hover{ background:rgba(255,255,255,.2); }
.btn-gross{ height:52px; padding:0 30px; font-size:1.0625rem; }
.btn-klein{ height:36px; padding:0 16px; font-size:.9375rem; }
.btn-breit{ width:100%; }
.pfeil{ display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:500; color:var(--link); }
.pfeil::after{ content:"→"; transition:transform var(--d-sm) var(--ease); }
.pfeil:hover::after{ transform:translateX(3px); }

/* ═══ Chips (Tabs, Filter) ═══ */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; height:36px; padding:0 16px; border-radius:var(--r-pille);
  font-family:var(--display); font-size:.9375rem; font-weight:500; color:var(--fg);
  background:var(--karte-2); border:1px solid transparent; cursor:pointer;
  transition:background var(--d-sm) var(--ease), color var(--d-sm) var(--ease), border-color var(--d-sm) var(--ease);
}
.chip:hover{ border-color:var(--fg-3); }
.chip[aria-selected="true"],.chip.aktiv{ background:var(--fg); color:var(--bg); }
.thema-nacht .chip{ background:rgba(255,255,255,.1); color:var(--weiss); }
.thema-nacht .chip[aria-selected="true"],.thema-nacht .chip.aktiv{ background:var(--weiss); color:var(--tinte); }
.chip.stumm{ cursor:default; }
.chip.stumm:hover{ border-color:transparent; }
/* Vorher/Nachher der Anlagewohnung tragen ihr Vorzeichen (Jeff, 08.09.2026: die Knöpfe
   sollen dem Besucher ins Auge springen). Das bricht die Ein-Akzent-Regel nicht: „vorher"
   IST das Minus und „nachher" das Plus — dieselbe Vorzeichenfläche, die die Zeichnung
   darunter zeigt. Alle vier Zustände gerechnet, nicht geschätzt:
   Weiß auf --rot 5,44 · --rot auf --rot-hell 4,64 · Weiß auf --gruen-dunkel 5,20 ·
   --gruen-dunkel auf --gruen-hell 4,57. Weiß auf --gruen wären nur 4,35 gewesen,
   deshalb der dunklere Ton — dieselbe Rolle, die --akzent-dunkel für den Akzent hat. */
.chip[data-zustand="vorher"]{ background:var(--rot-hell); color:var(--rot); }
.chip[data-zustand="nachher"]{ background:var(--gruen-hell); color:var(--gruen-dunkel); }
.chip[data-zustand="vorher"][aria-selected="true"]{ background:var(--rot); color:var(--weiss); }
.chip[data-zustand="nachher"][aria-selected="true"]{ background:var(--gruen-dunkel); color:var(--weiss); }
.chip[data-zustand]:hover{ border-color:currentColor; }
/* Der ruhende Knopf ist der, den der Besucher als Nächstes drücken soll. Ein feiner Ring
   zeigt ihn als Angebot, ohne mit dem gewählten zu konkurrieren. */
.chip[data-zustand]:not([aria-selected="true"]){ border-color:color-mix(in srgb, currentColor 35%, transparent); }
.tab-panel[hidden]{ display:none; }

/* ═══ Karten ═══ */
.karte{
  background:var(--karte); color:var(--fg); border-radius:var(--r-20); padding:clamp(20px, 2.5vw, 32px);
  border:1px solid var(--rand); position:relative;
}
.karte.ohne-rand{ border-color:transparent; }
.karte.schatten{ box-shadow:var(--schatten-1); border-color:transparent; }
.karte.nacht{ background:var(--nacht); color:var(--weiss); border-color:transparent; --fg:var(--weiss); --fg-2:rgba(255,255,255,.78); --fg-3:rgba(255,255,255,.58); --rand:var(--nacht-linie); --link:var(--akzent-nacht); --karte-2:var(--nacht-3); }
.karte.nacht .chip{ background:rgba(255,255,255,.12); color:var(--weiss); }
.karte.akzent{ background:var(--akzent); color:var(--weiss); border-color:transparent; --fg:var(--weiss); --fg-2:rgba(255,255,255,.86); --fg-3:rgba(255,255,255,.7); --link:var(--weiss); }
.karte.sand{ background:var(--sand); border-color:transparent; }
.karte h3{ margin-bottom:var(--s-12); }
.karte .eyebrow{ margin-bottom:var(--s-12); }
.karte > .klein,.karte > p{ color:var(--fg-2); }
.karte.klick{ transition:transform var(--d-md) var(--ease), box-shadow var(--d-md) var(--ease), border-color var(--d-md) var(--ease); }
.karte.klick:hover{ transform:translateY(-3px); box-shadow:var(--schatten-2); border-color:transparent; }
.karte-fuss,.karte .karte-fuss{ margin-top:auto; padding-top:var(--s-20); }
.karten-hoch .karte{ display:flex; flex-direction:column; }
.karte-nr{ font-family:var(--display); font-weight:500; font-size:var(--t-small); color:var(--fg-3); letter-spacing:.04em; margin-bottom:var(--s-24); }
.karte-icon{ width:44px; height:44px; border-radius:var(--r-12); background:var(--akzent-hell); color:var(--akzent-dunkel); display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--s-20); }
.karte-icon svg{ width:22px; height:22px; }
.thema-nacht .karte-icon,.karte.nacht .karte-icon{ background:rgba(255,255,255,.1); color:var(--akzent-nacht); }

/* ═══ Zahlen (Kennzahlen-Band) ═══ */
.zahlen{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-20); }
@media (max-width:900px){ .zahlen{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.zahl .wert{ font-family:var(--display); font-weight:500; font-size:clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--fg); }
.zahl .wert small{ font-size:.55em; letter-spacing:-.01em; margin-left:.1em; }
.zahl .label{ margin-top:var(--s-12); font-size:var(--t-small); color:var(--fg-2); }
.zahl .beleg{ margin-top:var(--s-8); font-size:var(--t-micro); color:var(--fg-3); }

/* ═══ Slides (Bild + Text, Revolut-Muster) ═══ */
.slide{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px, 5vw, 80px); align-items:center; min-height:min(640px, 80vh); }
.slide.umgekehrt{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
.slide.umgekehrt > .slide-text{ order:2; }
.slide-text > .eyebrow{ margin-bottom:var(--s-20); }
.slide-text > .lead{ margin-top:var(--s-20); }
.slide-text > .reihe{ margin-top:var(--s-32); }
.slide-text > .chips{ margin-top:var(--s-24); }
.slide-text .hinweis-klein{ margin-top:var(--s-20); }
.slide-bild{ position:relative; }
.slide-bild img{ width:100%; height:auto; border-radius:var(--r-24); object-fit:cover; aspect-ratio:16/10; }
.slide-bild .marker{ position:absolute; left:16px; top:16px; background:rgba(17,18,20,.72); color:var(--weiss); font-size:var(--t-micro); font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border-radius:var(--r-pille); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@media (max-width:900px){
  .slide,.slide.umgekehrt{ grid-template-columns:1fr; min-height:0; }
  .slide.umgekehrt > .slide-text{ order:0; }
}

/* ═══ Objekt-Visuals (statt Fotos: Produktkarten im eigenen Stil) ═══ */
.visual{ border-radius:var(--r-24); padding:clamp(20px, 3vw, 40px); display:flex; align-items:center; justify-content:center; min-height:380px; }
.visual-sand{ background:var(--sand); }
.visual-nacht{ background:var(--nacht); }
.visual-akzent{ background:var(--akzent-hell); }
.objekt-karte{ width:100%; max-width:460px; background:var(--weiss); color:var(--tinte); border-radius:var(--r-20); padding:clamp(18px, 2.2vw, 26px); box-shadow:var(--schatten-2); --fg:var(--tinte); --fg-2:var(--tinte-2); --fg-3:var(--tinte-3); --rand:var(--linie); }
.objekt-karte .ok-kopf{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-12); }
.objekt-karte .ok-kopf .eyebrow{ margin:0; }
.objekt-karte .ok-titel{ font-family:var(--display); font-weight:500; font-size:1.375rem; letter-spacing:-.02em; line-height:1.15; margin-top:var(--s-16); }
.objekt-karte .ok-sub{ font-size:var(--t-small); color:var(--tinte-2); margin-top:4px; }
.objekt-karte .ok-bild{ margin:var(--s-20) 0; border-radius:var(--r-12); background:var(--sand); padding:var(--s-16); }
.objekt-karte .ok-bild svg{ width:100%; height:auto; display:block; }
.objekt-karte .ok-zeilen{ border-top:1px solid var(--linie); }
.objekt-karte .ok-zeilen div{ display:flex; justify-content:space-between; gap:var(--s-16); padding:10px 0; border-bottom:1px solid var(--linie); font-size:var(--t-small); }
.objekt-karte .ok-zeilen span:first-child{ color:var(--tinte-2); }
.objekt-karte .ok-zeilen span:last-child{ font-family:var(--display); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; }
.objekt-karte .ok-zeilen .plus{ color:var(--gruen); }
.objekt-karte .ok-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-16); }
.objekt-karte .badge{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px 0 8px; border-radius:var(--r-pille); background:var(--gruen-hell); color:var(--gruen); font-size:var(--t-micro); font-weight:500; }
.objekt-karte .badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.objekt-karte .badge.blau{ background:var(--akzent-hell); color:var(--akzent-dunkel); }
.objekt-karte .badge.grau{ background:var(--sand-2); color:var(--tinte-2); }
/* Zustandsumschalter: Elemente mit data-nur="vorher|nachher" */
[data-zustand-karte] [data-nur]{ display:none; }
[data-zustand-karte="vorher"] [data-nur="vorher"],[data-zustand-karte="nachher"] [data-nur="nachher"]{ display:inline-flex; }
[data-zustand-karte="vorher"] span[data-nur="vorher"],[data-zustand-karte="nachher"] span[data-nur="nachher"]{ display:inline; }
.grundriss .raum{ fill:var(--weiss); stroke:var(--tinte); stroke-width:1.5; }
.grundriss .wand{ fill:none; stroke:var(--tinte); stroke-width:2; }
.grundriss .balkon{ fill:none; stroke:var(--tinte-3); stroke-width:1.5; stroke-dasharray:4 3; }
.grundriss .mass{ font-family:var(--text); font-size:10px; fill:var(--tinte-3); }
.grundriss .masslinie{ stroke:var(--tinte-3); stroke-width:1; }
[data-zustand-karte="nachher"] .grundriss .raum{ fill:var(--akzent-hell); stroke:var(--akzent); }
[data-zustand-karte="nachher"] .grundriss .wand{ stroke:var(--akzent); }
.zeitstrahl{ margin:var(--s-20) 0; }
.zeitstrahl .spur{ position:relative; height:12px; border-radius:var(--r-pille); background:var(--sand-2); overflow:hidden; }
.zeitstrahl .balken{ position:absolute; left:0; top:0; bottom:0; width:72%; background:var(--akzent); border-radius:var(--r-pille); }
.zeitstrahl .option{ position:absolute; left:72%; top:0; bottom:0; right:0; background:repeating-linear-gradient(135deg, var(--akzent-hell) 0 4px, transparent 4px 8px); }
.zeitstrahl .skala{ display:flex; justify-content:space-between; margin-top:8px; font-size:var(--t-micro); color:var(--tinte-3); }
.zeitstrahl .skala b{ color:var(--tinte); font-weight:500; }

/* ═══ Modellkacheln der Anlagewelten (08.09.2026) ═══
   Vier Modellbeispiele der Startseite (neubau · wohnung vorher/nachher · pflege)
   zeigen ihren Mechanismus als Zeichnung, die sich einmal aufbaut.

   DIE TRAGENDE ENTSCHEIDUNG: Der Endzustand IST der Grundzustand. Nirgends steht
   opacity:0 oder scale(0) in einer Grundregel des Aufbaus; der Startzustand lebt
   ausschließlich im Keyframe, jeder Keyframe hat nur from{} und der Füllmodus ist
   backwards. Fehlt die Klasse .zeigt, ist keine animation gesetzt und die Zeichnung
   steht fertig da — ohne JS, im alten Browser, unter reduzierter Bewegung. Ein
   leeres oder halbes Bild ist damit baulich unmöglich statt per Ausnahme verhindert.
   NIE forwards oder both: dann bliebe der Startzustand stehen.

   Zwei Ebenen, die sich nie dieselbe Eigenschaft teilen: Der Aufbau bewegt nur
   opacity, transform und stroke-dashoffset auf Hüllen; der Vorher/Nachher-Zustand
   ändert fill, stroke und transform auf den Kindern darin.

   Farbwahl gemessen, nicht geschätzt (Kontrast gegen --sand #F5F2EC, dem Grund der
   .ok-bild): --tinte 16,8 · --tinte-2 9,5 · --akzent-dunkel 7,7 · --akzent 5,3 ·
   --rot 4,9 · --tinte-3 4,4 · --gruen 3,9. Gesperrt als Linie oder Fläche auf Sand:
   --sand-3 1,28 · --linie 1,17 · --sand-2 1,10 · --akzent-hell 1,04. --akzent-hell
   bleibt allein als Raumfüllung MIT Akzentrand erlaubt, dort trägt der Rand die Kante. */
/* Der Container ist die Karte, nicht das Fenster. Gemessen am 08.09.2026: dieselbe
   Zeichnung ist auf der Startseite 370 px breit, auf den Produktseiten nur 239 px —
   die Karte dort misst 323 statt 454 px. Eine Umschaltung an der FENSTERbreite
   greift deshalb an der falschen Stelle: bei 1280 px ist das Fenster weit und die
   Beschriftung trotzdem zu eng, „zum Förderzins" bricht um. */
.mk-blatt{ margin:0; container-type:inline-size; }
.mk{ width:100%; height:auto; display:block; }

/* Beschriftung ist immer HTML, nie <text> im SVG. Gemessen: bei 360 px Fensterbreite
   rendert das SVG mit Faktor 0,53, ein 12-Einheiten-Text landet dort bei 6,4 px.
   Die Einrückung 4,05 % entspricht den 15 viewBox-Einheiten Rand des Zeichenfelds. */
.mk-kopf{ font-size:var(--t-micro); color:var(--tinte-2); text-align:right; margin:0 0 var(--s-8); padding-inline:4.05%; }
.mk-skala,.mk-jahre,.mk-legende{ display:flex; gap:var(--s-12); font-size:var(--t-micro); color:var(--tinte-2); margin:var(--s-8) 0 0; }
.mk-skala,.mk-jahre{ padding-inline:4.05%; }
.mk-skala > span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mk-skala .rechts{ text-align:right; align-items:flex-end; }
.mk-skala b{ font-family:var(--display); font-weight:500; font-variant-numeric:tabular-nums; color:var(--tinte); }
.mk-skala b.hebel{ color:var(--akzent-dunkel); }
.mk-jahre{ gap:10px; } .mk-jahre > span{ flex:60 1 0; text-align:center; }
.mk-legende{ flex-direction:column; gap:4px; }
.mk-legende > span{ display:flex; align-items:baseline; gap:8px; }
/* Die zustandsabhängige Legendenzeile braucht eine eigene, spezifischere Regel.
   Sonst gewinnt die allgemeine Zeile [data-zustand-karte="vorher"] span[data-nur="vorher"]
   mit display:inline; als Flex-Kind wird daraus block, das <i> bleibt inline und der
   Farbpunkt rendert mit Breite 0. Gemessen am 08.09.2026: b 0, h 15. */
.mk-legende > span[data-nur]{ display:none; }
[data-zustand-karte="vorher"]  .mk-legende > span[data-nur="vorher"],
[data-zustand-karte="nachher"] .mk-legende > span[data-nur="nachher"]{ display:flex; }
.mk-legende .pkt{ flex:none; width:6px; height:6px; border-radius:50%; transform:translateY(-1px); }
.mk-legende .pkt.akzent{ background:var(--akzent); } .mk-legende .pkt.still{ background:var(--tinte-3); }
.mk-legende .pkt.rot{ background:var(--rot); } .mk-legende .pkt.gruen{ background:var(--gruen); }
.mk-legende .pkt.strich{ width:8px; height:8px; border-radius:2px; border:1.5px dashed var(--tinte-3); }

/* Farbrollen, überall gleich belegt: --tinte = Umriss und Wand · --tinte-3 = das
   Übliche, das es ohnehin gibt · --akzent = der Hebel, der dazukommt · gestrichelt
   = Obergrenze oder offenes Ende · --rot/--gruen nur als Vorzeichenfläche.
   Farbe steht ausschließlich im CSS: fill="var(--akzent)" als Präsentationsattribut
   ist ungültig, fällt still auf Schwarz und sieht auf Sand fast richtig aus. */
.mk-klammer,.mk-fuehrung{ fill:none; stroke:var(--tinte-3); stroke-width:1; }
.mk-null{ fill:none; stroke:var(--tinte-3); stroke-width:1.5; }
.mk-preis,.mk-beleg{ fill:var(--tinte-3); }
.mk-kfw,.mk-jahr,.mk-pacht,.mk-opt{ fill:var(--akzent); }
.mk-o1{ opacity:.55; } .mk-o2{ opacity:.4; } .mk-o3{ opacity:.28; } .mk-o4{ opacity:.18; }
.mk-grenze{ stroke:var(--akzent-dunkel); stroke-width:1.5; stroke-dasharray:4 3; }
.mk-rest,.mk-leer{ fill:none; stroke:var(--tinte-3); stroke-width:1.5; stroke-dasharray:4 3; }
.mk-marke{ stroke:var(--tinte-3); stroke-width:1.5; }
.mk-raum{ fill:var(--weiss); stroke:var(--tinte); stroke-width:1.5; }
.mk-wand{ fill:none; stroke:var(--tinte); stroke-width:2; }

/* Transformachsen. Hülle: view-box mit ausgeschriebenem Ursprung in viewBox-Einheiten.
   Kind: fill-box. fill-box auf der Hülle degeneriert, sobald ein Kind auf scaleY(0)
   steht — die Bounding-Box wird null und der Ursprung wandert. */
.mk-preis,.mk-kfw,.mk-jahr,.mk-pacht,.mk-beleg{ transform-box:fill-box; transform-origin:left center; }
.mk-bil-g{ transform-box:view-box; transform-origin:285px 110px; }

/* Fünf Keyframes, alle ohne to{}: der Browser bildet das fehlende Ende aus dem
   berechneten Wert, und das ist der Endzustand aus den Grundregeln oben. */
@keyframes mk-strich{ from{ stroke-dashoffset:100; } }
@keyframes mk-breit { from{ transform:scaleX(0); } }
@keyframes mk-hoch  { from{ transform:scaleY(0); } }
@keyframes mk-auf   { from{ opacity:0; } }
@keyframes mk-ein   { from{ opacity:0; transform:translateY(8px); } }

/* ── Blog-Grafiken (11.09.2026) ──
   Balkenbilder für Beiträge. Sie nutzen dieselben Keyframes wie die
   Modellkacheln, weil dieselbe Regel gilt: die Keyframes tragen NUR ein
   from{}, der Endzustand ist der Grundzustand. Läuft die Animation nicht —
   reduzierte Bewegung, verdeckter Tab, altes Gerät —, steht die Grafik
   trotzdem fertig da. Eine Grafik, die ohne Animation leer bleibt, ist in
   der Hälfte der Fälle keine Grafik.

   Die Staffelung läuft über --v (Zeilennummer) statt über eine Klasse je
   Zeile: bei sechzehn Bundesländern wären das sechzehn Regeln. */
.bl-figur{ margin:var(--s-8) 0; }
.bl-figur svg{ width:100%; height:auto; display:block; }
.bl-figur figcaption{ font-size:.875rem; color:var(--tinte-2); margin-top:10px; }
.bl-achse{ stroke:var(--linie); stroke-width:1; }
.bl-land{ font-family:var(--text); font-size:12px; fill:var(--tinte-2); text-anchor:end; }
.bl-wert{ font-family:var(--text); font-size:12px; font-weight:600; fill:var(--tinte); }
.bl-balken{ fill:var(--kapital, var(--tinte)); transform-origin:left center; transform-box:fill-box; }
.mk.zeigt .bl-balken{ animation:mk-breit var(--d-lg) var(--ease) calc(var(--v) * 45ms) backwards; }
.mk.zeigt .bl-wert  { animation:mk-auf   var(--d-md) var(--ease) calc(var(--v) * 45ms + 260ms) backwards; }

.bl-quellen{
  margin:var(--s-8) 0 0; padding:var(--s-6) var(--s-6) 2px;
  background:var(--sand); border-radius:var(--r-karte);
}
/* ── Bildflächen auf „Arbeit bei Kapitalstein" (11.09.2026) ──
   Sechs gezeichnete Motive statt Fotos: sie tragen die CI-Farben der Seite,
   skalieren verlustfrei, laden nichts nach und sagen etwas, was ein Stockfoto
   nicht kann. Sie hängen an denselben Keyframes wie die Modellkacheln — also
   auch hier: NUR from{}, der Endzustand ist der Grundzustand. Bleibt die
   Animation aus, steht das Bild fertig da. */
.ab-karte{ padding-top:0; overflow:hidden; }
.ab-bild{ display:block; width:calc(100% + 2px); height:auto; margin:0 -1px var(--s-20); background:var(--sand); border-radius:var(--r-12) var(--r-12) 0 0; }
.ab-karte > h3{ margin-top:0; }

.ab-f      { fill:none; stroke:var(--linie); stroke-width:2; }
.ab-str    { fill:none; stroke:var(--akzent, var(--tinte)); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.ab-nein   { fill:none; stroke:var(--tinte-3); stroke-width:2.5; stroke-linecap:round; }
.ab-bal    { fill:var(--tinte-3); transform-origin:left center; transform-box:fill-box; }
.ab-summe  { fill:var(--akzent, var(--tinte)); transform-origin:left center; transform-box:fill-box; }
.ab-achse  { stroke:var(--linie); stroke-width:1.5; }
.ab-weg    { fill:none; stroke:var(--akzent, var(--tinte)); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:100; }
.ab-punkt  { fill:var(--linie); }
.ab-person { fill:var(--akzent, var(--tinte)); }
.ab-verb   { stroke:var(--linie); stroke-width:1.5; }
.ab-gewerk { fill:var(--weiss); stroke:var(--akzent, var(--tinte)); stroke-width:2; }
.ab-blatt  { fill:var(--weiss); stroke:var(--linie); stroke-width:2; }
.ab-zeile  { stroke:var(--tinte-3); stroke-width:2; stroke-linecap:round; transform-origin:left center; }
.ab-stempel{ fill:var(--akzent-hell, var(--sand-2)); }
.ab-alt    { opacity:.45; }
.ab-zelle  { fill:var(--linie); }
.ab-pfeil  { fill:none; stroke:var(--tinte-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ab-fenster{ fill:var(--weiss); stroke:var(--akzent, var(--tinte)); stroke-width:2; }
.ab-kopf   { stroke:var(--linie); stroke-width:1.5; }
.ab-knopf  { fill:var(--akzent-hell, var(--sand-2)); transform-origin:left center; transform-box:fill-box; }

/* Staffelung: vier Stufen reichen für alle sechs Motive. */
.mk.zeigt .ab-bild .ab-s0{ animation-delay:0ms; }
.mk.zeigt .ab-bild .ab-s1{ animation-delay:90ms; }
.mk.zeigt .ab-bild .ab-s2{ animation-delay:180ms; }
.mk.zeigt .ab-bild .ab-s3{ animation-delay:270ms; }
.ab-bild.zeigt .ab-s0,.ab-bild.zeigt .ab-s1,.ab-bild.zeigt .ab-s2,.ab-bild.zeigt .ab-s3{ animation-delay:inherit; }

.bl-karte{ display:block; text-decoration:none; }
.bl-karte h3{ margin:4px 0 8px; }
.bl-datum{ font-size:.8125rem; color:var(--tinte-2); margin:0; }
.bl-quellen h3{ font-size:1rem; margin:0 0 10px; }
.bl-quellen ul{ margin:0; padding-left:18px; }
.bl-quellen li{ font-size:.9375rem; color:var(--tinte-2); margin-bottom:8px; }
/* Der Hinweis auf § 5 StBerG gehört unter JEDEN Beitrag, der Steuerrecht
   berührt. Er steht hier bewusst nicht kleiner als der Fliesstext daneben. */
.bl-hinweis{ font-size:.875rem; color:var(--tinte-2); border-top:1px solid var(--sand-3); padding-top:12px; }

/* Der Takt, in allen vier Grafiken derselbe:
   B1 Bühne 0 ms · B2 das Übliche 240 ms · B3 der Hebel 600 ms · B4 die Marke 1000 ms.
   Formen stehen nach 1300 ms, Beschriftung nach 1520 ms. Kein Startversatz, kein
   infinite, kein alternate, kein Scroll-Scrub. */
.mk.zeigt .mk-b1{ animation:mk-strich var(--d-md) var(--ease) 0ms backwards; }
.mk.zeigt .mk-b2{ animation:mk-breit  var(--d-md) var(--ease) 240ms backwards; }
.mk.zeigt .mk-b3{ animation:mk-breit  var(--d-lg) var(--ease) 600ms backwards; }
.mk.zeigt .mk-b4{ animation:mk-auf    var(--d-md) var(--ease) 1000ms backwards; }
.mk.zeigt .mk-raum.mk-b2{ animation-name:mk-auf; }   /* Räume blenden auf, sie wachsen nicht */
.mk.zeigt .mk-bil-g.mk-b3{ animation-name:mk-hoch; } /* die Bilanz wächst aus der Nulllinie */
/* Staffelung 60 ms, je Beat ausgeschrieben. Eine Rechnung über eine Custom Property
   wäre kürzer, verbirgt aber, welcher Wert wo entsteht, und bricht still, sobald eine
   Klasse fehlt. nth-of-type ist hier verboten: es zählt alle <rect> im selben
   Elternteil und trifft dadurch fremde Formen. */
.mk.zeigt .mk-b2.mk-s2{ animation-delay:300ms; }
.mk.zeigt .mk-b2.mk-s3{ animation-delay:360ms; }
.mk.zeigt .mk-b2.mk-s4{ animation-delay:420ms; }
.mk.zeigt .mk-b3.mk-s2{ animation-delay:660ms; }
.mk.zeigt .mk-b3.mk-s3{ animation-delay:720ms; }
.mk.zeigt .mk-b3.mk-s4{ animation-delay:780ms; }
.mk-blatt.zeigt-text .mk-t1{ animation:mk-ein var(--d-md) var(--ease) 1100ms backwards; }
.mk-blatt.zeigt-text .mk-t2{ animation:mk-ein var(--d-md) var(--ease) 1160ms backwards; }
.mk-blatt.zeigt-text .mk-t3{ animation:mk-ein var(--d-md) var(--ease) 1220ms backwards; }

/* Vorher/Nachher der Anlagewohnung: eine Blende von 400 ms, kein zweiter Aufbau.
   Der Verzug hängt am ZIELzustand, dadurch stimmt der Rückweg von selbst: die
   abtretende Säule zieht sich in 200 ms in die Linie zurück, die eintretende wächst
   200 ms später heraus. Die Bewegung geht durch die Null, nicht daneben.
   scaleY(0) steht hier absichtlich in der Grundregel — es ist der echte Ruhezustand
   der nicht aktiven Säule, kein Animationsanfang, und damit die andere Ebene. */
.mk-minus{ fill:var(--rot);   transform-box:fill-box; transform-origin:top center;    transform:scaleY(0); transition:transform var(--d-sm) var(--ease); }
.mk-plus { fill:var(--gruen); transform-box:fill-box; transform-origin:bottom center; transform:scaleY(0); transition:transform var(--d-sm) var(--ease); }
[data-zustand-karte="vorher"]  .mk-minus{ transform:none; transition-delay:200ms; }
[data-zustand-karte="nachher"] .mk-plus { transform:none; transition-delay:200ms; }
.mk-raum{ transition:fill var(--d-md) var(--ease), stroke var(--d-md) var(--ease); }
.mk-wand{ transition:stroke var(--d-md) var(--ease); }
.mk-raum.mk-s2{ transition-delay:60ms; } .mk-raum.mk-s3{ transition-delay:120ms; } .mk-raum.mk-s4{ transition-delay:180ms; }
[data-zustand-karte="nachher"] .mk-raum{ fill:var(--akzent-hell); stroke:var(--akzent); }
[data-zustand-karte="nachher"] .mk-wand{ stroke:var(--akzent); }

/* Die Skala stapelt, sobald die ZEICHNUNG schmal wird — nicht, sobald das Fenster es
   ist. Sonst passt „bis zu 150.000 €“ nicht in die 86 px, die 121,43 von 340 Einheiten
   dort ergeben. Die Media-Query darunter ist der Rückfall für Browser ohne
   Container-Abfragen; beide sagen dasselbe. */
@container (max-width:330px){
  .mk-skala{ flex-direction:column; gap:6px; }
  .mk-skala > span{ flex:none !important; flex-direction:row; justify-content:space-between; text-align:left; align-items:baseline; }
  .mk-skala .rechts{ text-align:left; align-items:flex-start; }
  .mk-jahre{ gap:6px; }
}
@supports not (container-type:inline-size){
  @media (max-width:900px){
    .mk-skala{ flex-direction:column; gap:6px; }
    .mk-skala > span{ flex:none !important; flex-direction:row; justify-content:space-between; text-align:left; align-items:baseline; }
    .mk-skala .rechts{ text-align:left; align-items:flex-start; }
    .mk-jahre{ gap:6px; }
  }
}

/* Gürtel neben dem Hosenträger: das Skript setzt .zeigt bei reduzierter Bewegung gar
   nicht erst. Diese Regel fängt ab, wer die Klasse später doch setzt. */
@media (prefers-reduced-motion:reduce){
  .mk .mk-teil,.mk-blatt .mk-t1,.mk-blatt .mk-t2,.mk-blatt .mk-t3{ animation:none !important; }
  .mk-minus,.mk-plus,.mk-raum,.mk-wand{ transition:none !important; }
}

/* ═══ Bild-Rahmen (Produkt-Screens) ═══ */
.rahmen{ border-radius:var(--r-20); overflow:hidden; box-shadow:var(--schatten-2); border:1px solid var(--rand); background:var(--nacht-2); }
.rahmen img{ width:100%; height:auto; display:block; }
.rahmen-kopf{ display:flex; gap:6px; padding:12px 14px; background:var(--nacht-3); }
.rahmen-kopf i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); display:block; }

/* ═══ Schritte / Nummerierte Listen ═══ */
.schritte{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--s-20); counter-reset:schritt; }
@media (max-width:900px){ .schritte{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .schritte{ grid-template-columns:1fr; } }
.schritt{ padding-top:var(--s-20); border-top:2px solid var(--fg); counter-increment:schritt; }
.schritt::before{ content:"0" counter(schritt); font-family:var(--display); font-weight:500; font-size:var(--t-small); letter-spacing:.04em; color:var(--fg-3); display:block; margin-bottom:var(--s-20); }
.schritt h3{ font-size:var(--t-heading); font-weight:600; margin-bottom:var(--s-8); }
.schritt p{ color:var(--fg-2); font-size:var(--t-small); line-height:1.55; }
.liste-nr{ list-style:none; margin:0; padding:0; counter-reset:punkt; }
.liste-nr > li{ counter-increment:punkt; display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--s-20); padding:var(--s-24) 0; border-top:1px solid var(--rand); }
.liste-nr > li:last-child{ border-bottom:1px solid var(--rand); }
.liste-nr > li::before{ content:"0" counter(punkt); font-family:var(--display); font-weight:500; font-size:var(--t-display-3); letter-spacing:-.02em; color:var(--fg-3); line-height:1; }
.liste-nr h3{ font-size:var(--t-heading); font-weight:600; margin-bottom:var(--s-8); }
.liste-nr p{ color:var(--fg-2); }
@media (max-width:600px){ .liste-nr > li{ grid-template-columns:44px minmax(0,1fr); gap:var(--s-12); } }
.haken{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-12); }
.haken li{ position:relative; padding-left:32px; color:var(--fg-2); }
.haken li::before{ content:""; position:absolute; left:0; top:.2em; width:20px; height:20px; border-radius:50%; background:var(--akzent-hell); }
.haken li::after{ content:""; position:absolute; left:6px; top:calc(.2em + 5px); width:8px; height:5px; border-left:2px solid var(--akzent-dunkel); border-bottom:2px solid var(--akzent-dunkel); transform:rotate(-45deg); }
.thema-nacht .haken li::before,.karte.nacht .haken li::before{ background:rgba(255,255,255,.12); }
.thema-nacht .haken li::after,.karte.nacht .haken li::after{ border-color:var(--akzent-nacht); }

/* ═══ Akkordeon (FAQ) ═══ */
.akkordeon{ border-top:1px solid var(--rand); }
.akkordeon details{ border-bottom:1px solid var(--rand); }
.akkordeon summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-24);
  padding:var(--s-20) 0; font-family:var(--display); font-weight:500; font-size:1.125rem; letter-spacing:-.01em; line-height:1.35; color:var(--fg);
}
.akkordeon summary::-webkit-details-marker{ display:none; }
.akkordeon summary .faq-icon,.akkordeon summary::after{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--karte-2); position:relative; margin-top:-2px; }
.akkordeon summary .faq-icon::before,.akkordeon summary .faq-icon::after{ content:""; position:absolute; left:50%; top:50%; background:var(--fg); transform:translate(-50%,-50%); transition:transform var(--d-sm) var(--ease); }
.akkordeon summary .faq-icon::before{ width:12px; height:2px; }
.akkordeon summary .faq-icon::after{ width:2px; height:12px; }
.akkordeon details[open] summary .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.akkordeon summary:not(:has(.faq-icon))::after{ content:"+"; display:inline-flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.25rem; line-height:1; }
.akkordeon details[open] summary:not(:has(.faq-icon))::after{ content:"–"; }
.akkordeon .faq-body{ padding:0 48px var(--s-24) 0; color:var(--fg-2); line-height:1.6; }
.akkordeon .faq-body p + p{ margin-top:var(--s-12); }
.thema-sand .akkordeon summary .faq-icon{ background:var(--sand-2); }

/* ═══ Zitate / Stimmen ═══ */
.zitat{ font-family:var(--display); font-weight:500; font-size:var(--t-display-3); letter-spacing:-.02em; line-height:1.2; color:var(--fg); }
.zitat-wer{ margin-top:var(--s-20); display:flex; flex-direction:column; gap:2px; }
.zitat-wer b{ font-weight:600; font-size:var(--t-small); }
.zitat-wer span{ font-size:var(--t-small); color:var(--fg-3); }
.stimme{ display:flex; flex-direction:column; gap:var(--s-20); }
.stimme .zitat{ font-size:1.25rem; line-height:1.35; }
.sterne{ display:inline-flex; gap:2px; color:var(--akzent); }
.sterne svg{ width:16px; height:16px; fill:currentColor; }

/* ═══ Hinweise (das Kleingedruckte gehört unter das Versprechen) ═══ */
.hinweis-klein{ font-size:var(--t-micro); line-height:1.55; color:var(--fg-3); max-width:60ch; }
.hinweis-box{ padding:var(--s-16) var(--s-20); border-radius:var(--r-12); background:var(--karte-2); font-size:var(--t-small); line-height:1.55; color:var(--fg-2); border-left:3px solid var(--akzent); }
.thema-nacht .hinweis-box{ border-left-color:var(--akzent-nacht); }
.rechtliches{ padding:var(--s-40) 0; }
.rechtliches p{ font-size:var(--t-micro); line-height:1.6; color:var(--fg-3); }
.rechtliches p + p{ margin-top:var(--s-12); }

/* ═══ Formulare ═══ */
.feld{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s-16); }
.feld label,.feld-label{ font-size:var(--t-small); font-weight:500; color:var(--fg); }
.feld .hinweis,.feld .hint{ font-size:var(--t-micro); color:var(--fg-3); }
.feld .meldung{ font-size:var(--t-micro); color:var(--rot); }
.feld-reihe{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-16); }
@media (max-width:600px){ .feld-reihe{ grid-template-columns:1fr; } }
input:not([type]),input[type="number"],input[type="text"],input[type="email"],input[type="tel"],select,textarea{
  font:inherit; font-size:1rem; color:var(--tinte); background:var(--weiss); border:1px solid var(--linie); border-radius:var(--r-12);
  height:46px; padding:0 14px; width:100%; transition:border-color var(--d-sm) var(--ease), box-shadow var(--d-sm) var(--ease);
  -webkit-appearance:none; appearance:none;
}
textarea{ height:auto; padding:12px 14px; min-height:120px; resize:vertical; }
select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23111214' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--tinte); box-shadow:0 0 0 3px var(--akzent-hell); }
input[aria-invalid="true"]{ border-color:var(--rot); }
.thema-nacht input,.thema-nacht select,.thema-nacht textarea{ background:var(--nacht-2); color:var(--weiss); border-color:var(--nacht-linie); }
fieldset{ border:0; padding:0; margin:0; min-width:0; }
legend{ padding:0; }

/* ═══ Info-Punkt mit Erklärbox (Hover, Fokus, Tipp auf Touch; klartext.js schaltet .offen) ═══ */
.feld-kopf{ display:flex; align-items:center; gap:8px; }
.feld-kopf label{ margin:0; }
.info{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--fg-3); color:var(--fg-3); background:transparent; font-family:var(--display); font-weight:600; font-size:11px; line-height:1; cursor:help; flex:0 0 auto;
  transition:background var(--d-sm) var(--ease), color var(--d-sm) var(--ease), border-color var(--d-sm) var(--ease), transform var(--d-sm) var(--ease); }
.info:hover,.info:focus-visible,.info.offen{ background:var(--akzent); border-color:var(--akzent); color:var(--weiss); transform:scale(1.1); }
.info:focus-visible{ outline-offset:2px; }
.info-box{ position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%, 6px); width:290px; padding:12px 14px; border-radius:var(--r-12);
  background:var(--tinte); color:var(--weiss); font-family:var(--text); font-weight:400; font-size:.8125rem; line-height:1.5; text-align:left; letter-spacing:0; cursor:auto;
  box-shadow:var(--schatten-2); opacity:0; visibility:hidden; pointer-events:none; z-index:30;
  transition:opacity var(--d-sm) var(--ease), transform var(--d-sm) var(--ease), visibility 0s linear var(--d-sm); }
.info-box::after{ content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--tinte); }
.info-box b{ display:block; font-family:var(--display); font-weight:600; margin-bottom:4px; color:var(--weiss); }
.info:hover .info-box,.info:focus-visible .info-box,.info.offen .info-box{ opacity:1; visibility:visible; transform:translate(-50%, 0); pointer-events:auto; transition-delay:0s; }
/* Schmale Fenster: Box hängt rechtsbündig am Punkt, damit sie nicht aus dem Bild ragt */
@media (max-width:640px){
  .info-box{ left:auto; right:-6px; transform:translate(0, 6px); width:min(290px, calc(100vw - 48px)); }
  .info-box::after{ left:auto; right:8px; transform:none; }
  .info:hover .info-box,.info:focus-visible .info-box,.info.offen .info-box{ transform:translate(0, 0); }
}
@media (prefers-reduced-motion:reduce){ .info,.info-box{ transition:none; } .info:hover,.info.offen{ transform:none; } }

/* ═══ Tabelle ═══ */
.tabelle{ width:100%; border-collapse:collapse; font-size:var(--t-small); }
.tabelle th,.tabelle td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--rand); vertical-align:top; }
.tabelle th{ font-weight:600; color:var(--fg); font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.05em; }
.tabelle td.z,.tabelle th.z{ text-align:right; font-variant-numeric:tabular-nums; }
.tabelle tr.summe td{ font-weight:600; color:var(--fg); }
.tabelle-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ═══ Vorher/Nachher-Umschalter ═══ */
.wandel{ position:relative; border-radius:var(--r-24); overflow:hidden; aspect-ratio:16/10; background:var(--sand-2); }
.wandel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity var(--d-lg) var(--ease); }
.wandel img[data-zustand="nachher"]{ opacity:0; }
.wandel.nachher img[data-zustand="nachher"]{ opacity:1; }
.wandel .marker{ position:absolute; left:16px; top:16px; z-index:2; }

/* ═══ Klebe-Leiste (Mobil-CTA nach dem ersten Bildschirm) ═══ */
.klebe{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:55;
  display:none; align-items:center; gap:var(--s-12); padding:10px 12px 10px 18px;
  background:rgba(17,18,20,.94); color:var(--weiss); border-radius:var(--r-20); box-shadow:var(--schatten-2);
  transform:translateY(120%); transition:transform var(--d-lg) var(--ease);
}
.klebe.da{ transform:none; }
.klebe .text{ flex:1; font-size:var(--t-small); line-height:1.3; }
.klebe .text b{ display:block; font-weight:600; }
.klebe .btn{ height:42px; padding:0 18px; font-size:1rem; }
@media (max-width:900px){ .klebe{ display:flex; } }

/* ═══ Consent-Banner (consent.js aus dem Bestand, nur neu gekleidet) ═══ */
.consent{
  position:fixed; left:16px; bottom:16px; z-index:70; width:min(420px, calc(100% - 32px));
  background:var(--weiss); color:var(--tinte); border-radius:var(--r-20); box-shadow:var(--schatten-2); border:1px solid var(--linie);
  padding:var(--s-24); transform:translateY(24px); opacity:0; pointer-events:none;
  transition:transform var(--d-lg) var(--ease), opacity var(--d-lg) var(--ease);
}
.consent.open{ transform:none; opacity:1; pointer-events:auto; }
/* Solange das Banner steht, deckt es die untere linke Ecke ab — und damit die Pflichtangaben
   in der Fusszeile. Gemessen 06.09.2026: Am Seitenende lag der Impressum-Link bei y 750–768,
   das Banner bei y 492–784; ein Klick traf .consent statt den Link, bei 560 wie bei 1280 px.
   Weiterscrollen ging nicht, das Impressum war beim Erstbesuch also gar nicht erreichbar.
   Die Fusszeile bekommt deshalb so viel Luft nach unten, dass sie ueber das Banner
   hinausgescrollt werden kann. --consent-h setzt consent.js aus der GEMESSENEN Hoehe,
   damit die Luft mit dem Banner mitwaechst (Umbruch, Schriftgroesse, schmaler Schirm). */
html.consent-offen .fuss{ padding-bottom:calc(var(--s-32) + var(--consent-h, 0px) + var(--s-24)); }
.consent-head{ font-family:var(--display); font-weight:600; font-size:1.0625rem; margin-bottom:var(--s-8); }
.consent-text{ font-size:var(--t-small); line-height:1.5; color:var(--tinte-2); }
.consent-text a{ color:var(--akzent-dunkel); text-decoration:underline; }
.consent-actions{ display:flex; gap:var(--s-8); margin-top:var(--s-16); flex-wrap:wrap; }
.consent-btn{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 18px; border-radius:var(--r-pille); font-family:var(--display); font-weight:500; font-size:.9375rem; border:1px solid transparent; }
.consent-accept{ background:var(--tinte); color:var(--weiss); }
.consent-decline{ background:var(--sand); color:var(--tinte); }
.consent-note{ font-size:var(--t-micro); color:var(--tinte-3); margin-top:var(--s-12); }
.consent-note a{ color:inherit; }

/* ═══ Fußbereich ═══ */
.fuss{ background:var(--nacht); color:var(--weiss); padding:var(--s-80) 0 var(--s-32); --fg:var(--weiss); --fg-2:rgba(255,255,255,.78); --fg-3:rgba(255,255,255,.55); --rand:var(--nacht-linie); --link:var(--akzent-nacht); color-scheme:dark; }
.fuss-raster{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-40); }
@media (max-width:900px){ .fuss-raster{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .fuss-raster{ grid-template-columns:1fr; } }
.fuss .marke{ color:var(--weiss); }
.fuss-claim{ margin-top:var(--s-16); font-size:var(--t-small); color:var(--fg-2); max-width:34ch; line-height:1.55; }
.fuss-kopf{ font-family:var(--display); font-weight:600; font-size:var(--t-small); letter-spacing:.02em; margin-bottom:var(--s-16); color:var(--weiss); }
.fuss-spalte a,.fuss-spalte span{ display:block; font-size:var(--t-small); color:var(--fg-2); padding:5px 0; }
.fuss-spalte a:hover{ color:var(--weiss); }
/* Das Siegel ist ein Bild auf weißem Teller. Die Spaltenregel .fuss-spalte a (display:block, padding 5px 0)
   hat höhere Spezifität als eine einzelne Klasse und zog den Teller über die ganze Spalte, deshalb hier
   mit zwei Klassen und width:auto festgezurrt (gemessen 05.09.2026). */
.pe-siegel, .fuss .pe-siegel, .fuss-spalte .pe-siegel{ display:inline-block; width:auto; margin-top:var(--s-24); background:var(--weiss); padding:8px; border-radius:var(--r-12); line-height:0; }
.pe-siegel img{ display:block; width:130px; height:auto; }
.footer-base{ margin-top:var(--s-64); padding-top:var(--s-24); border-top:1px solid var(--nacht-linie); display:flex; flex-wrap:wrap; gap:var(--s-16) var(--s-32); align-items:center; font-size:var(--t-micro); color:var(--fg-3); }
.footer-base a,.calc-back{ color:var(--fg-3); text-decoration:none; }
.footer-base a:hover,.calc-back:hover{ color:var(--weiss); }
.footer-base > div{ display:flex; flex-wrap:wrap; gap:var(--s-16); }

/* ═══ Reveals ═══ */
.rv{ opacity:0; transform:translateY(12px); transition:opacity var(--d-lg) var(--ease), transform var(--d-lg) var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-v1{ transition-delay:60ms; } .rv-v2{ transition-delay:120ms; } .rv-v3{ transition-delay:180ms; } .rv-v4{ transition-delay:240ms; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .btn,.karte.klick,.chip,.wandel img,.klebe,.consent,.menue{ transition:none; }
}

/* ═══ Bewegung (05.09.2026): Hover mit Zweck, nur transform/opacity, alles unter prefers-reduced-motion aus ═══ */
@keyframes einblenden{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes wachsen{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes schweben{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-4%,6%,0) scale(1.08); } 100%{ transform:translate3d(3%,-4%,0) scale(1); } }

/* Buttons: heben sich, werfen Schatten in ihrer Farbe, drücken sich beim Klick */
.btn-dunkel:hover{ box-shadow:0 10px 24px rgba(17,18,20,.28); }
.btn-akzent:hover{ box-shadow:0 10px 24px rgba(45,78,245,.35); }
.btn-hell:hover{ box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn-linie:hover{ background:var(--karte-2); }
.thema-nacht .btn-linie:hover,.thema-akzent .btn-linie:hover{ background:rgba(255,255,255,.08); }
.btn:active{ transform:scale(.98); box-shadow:none; }
.btn svg{ transition:transform var(--d-sm) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* Textlinks mit Pfeil: Unterstreichung wächst von links, Pfeil rückt nach */
.pfeil{ background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size var(--d-md) var(--ease); padding-bottom:2px; }
.pfeil:hover{ background-size:100% 1px; }

/* Karten: heben sich, Sandkarten werden weiß, Icon-Kachel kippt auf Akzent */
.karte{ transition:transform var(--d-md) var(--ease), box-shadow var(--d-md) var(--ease), border-color var(--d-md) var(--ease), background var(--d-md) var(--ease); }
.raster > .karte:hover,.karten-hoch > .karte:hover,.stimme:hover,.karte.klick:hover{ transform:translateY(-4px); box-shadow:var(--schatten-2); border-color:transparent; }
.karte.sand:hover{ background:var(--weiss); }
.thema-nacht .raster > .karte:hover,.karte.nacht:hover{ background:var(--nacht-3); border-color:rgba(255,255,255,.18); box-shadow:0 20px 56px rgba(0,0,0,.45); }
.karte.akzent:hover{ transform:none; box-shadow:none; }
.karte-icon{ transition:background var(--d-md) var(--ease), color var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.karte:hover .karte-icon{ background:var(--akzent); color:var(--weiss); transform:scale(1.06) rotate(-3deg); }
.thema-nacht .karte:hover .karte-icon,.karte.nacht:hover .karte-icon{ background:var(--akzent-nacht); color:var(--nacht); }
.karte-nr{ transition:color var(--d-md) var(--ease); }
.karte:hover .karte-nr{ color:var(--link); }

/* Kennzahlen: Ziffer färbt sich beim Überfahren */
.zahl .wert{ transition:color var(--d-md) var(--ease); }
.zahl:hover .wert{ color:var(--link); }

/* Schritte und nummerierte Listen: Linie und Nummer springen auf Akzent */
.schritt{ transition:border-color var(--d-md) var(--ease); }
.schritt::before{ transition:color var(--d-md) var(--ease), transform var(--d-md) var(--ease); display:inline-block; }
.schritt:hover{ border-top-color:var(--akzent); }
.schritt:hover::before{ color:var(--link); transform:translateX(4px); }
.liste-nr > li{ transition:background var(--d-md) var(--ease); border-radius:var(--r-12); }
.liste-nr > li::before{ transition:color var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.liste-nr > li:hover::before{ color:var(--akzent); transform:translateX(6px); }
.liste-nr > li h3{ transition:color var(--d-md) var(--ease); }
.liste-nr > li:hover h3{ color:var(--link); }

/* Akkordeon: Frage färbt sich, Plus-Kreis wird Akzent, Inhalt gleitet (Höhe per klartext.js) */
.akkordeon summary{ transition:color var(--d-sm) var(--ease); }
.akkordeon summary:hover{ color:var(--link); }
.akkordeon summary .faq-icon{ transition:background var(--d-sm) var(--ease), transform var(--d-sm) var(--ease); }
.akkordeon summary:hover .faq-icon{ background:var(--akzent); transform:scale(1.08); }
.akkordeon summary:hover .faq-icon::before,.akkordeon summary:hover .faq-icon::after{ background:var(--weiss); }
.akkordeon details[open] summary .faq-icon{ background:var(--fg); }
.akkordeon details[open] summary .faq-icon::before,.akkordeon details[open] summary .faq-icon::after{ background:var(--bg); }
.akkordeon .faq-body{ will-change:height; }

/* Chips: drücken sich, ruhende Chips dunkeln leicht */
.chip:not([aria-selected="true"]):not(.aktiv):not(.stumm):hover{ background:var(--sand-3); border-color:transparent; }
.thema-nacht .chip:not([aria-selected="true"]):not(.aktiv):hover{ background:rgba(255,255,255,.18); }
.chip:active{ transform:scale(.96); }

/* Tab-Wechsel und Vorher/Nachher-Werte blenden ein */
.tab-panel:not([hidden]){ animation:einblenden var(--d-lg) var(--ease) both; }
[data-zustand-karte="vorher"] [data-nur="vorher"],[data-zustand-karte="nachher"] [data-nur="nachher"]{ animation:einblenden 350ms var(--ease) both; }
.grundriss .raum,.grundriss .wand{ transition:fill var(--d-lg) var(--ease), stroke var(--d-lg) var(--ease); }

/* Produktkarten neigen sich zur Maus (klartext.js setzt transform), Screens heben sich */
.visual,.rahmen,.rechnung{ transition:transform var(--d-md) var(--ease), box-shadow var(--d-md) var(--ease); will-change:transform; }
.rahmen:hover{ box-shadow:0 30px 70px rgba(0,0,0,.35); }
.rahmen img{ transition:transform var(--d-xl) var(--ease); }
.rahmen:hover img{ transform:scale(1.02); }
.objekt-karte .badge,.objekt-karte .ok-zeilen div{ transition:transform var(--d-sm) var(--ease); }
.objekt-karte .ok-zeilen div:hover{ transform:translateX(3px); }

/* Zeitstrahl wächst, sobald die Sektion sichtbar wird */
.zeitstrahl .balken{ transform-origin:left center; }
.rv.in .zeitstrahl .balken,.rv.in .zeitstrahl .balken{ animation:wachsen var(--d-xl) var(--ease) both; }

/* Portrait: sanfter Zoom im gerundeten Rahmen */
/* Das Gründerportrait. Diese drei Regeln standen bis zum 11.09.2026 NUR im
   seiteneigenen <style> der Startseite. Als das Profil eine eigene Seite bekam,
   erbte sie zwar das Markup, aber nicht die Regeln: gemessen 522 × 326 statt
   522 × 522, Radius 0 statt 24 px. Ein Bild, das auf zwei Seiten gleich
   aussehen soll, braucht seine Regeln dort, wo beide sie finden. */
.portrait{ border-radius:var(--r-24); overflow:hidden; aspect-ratio:1/1; background:var(--sand); }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.portrait img{ transition:transform 1.2s var(--ease); }
.portrait:hover img{ transform:scale(1.04); }

/* Wortmarke: der Kapitalstein, sinnbildlich ein blauer Ziegelstein. Die zweite Steinlage ist kürzer;
   beim Überfahren gleitet der Ziegel von rechts in die Lücke, dann sind alle vier Lagen gleich lang.
   (Jeffs Storytelling, 05.09.2026; für Kunden nur ein Detail, für die Marke die Erklärung des Signets) */
.marke svg{ overflow:visible; }
.marke .stein{ fill:var(--akzent); opacity:0; transform:translateX(16px); transition:transform var(--d-lg) var(--ease-aus), opacity var(--d-md) var(--ease); }
.marke:hover .stein,.marke:focus-visible .stein{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion:reduce){ .marke .stein{ transition:none; transform:none; animation:none !important; } }
@keyframes stein-wink{ 0%,72%{ opacity:0; transform:translateX(16px); } 80%,94%{ opacity:1; transform:translateX(0); } 100%{ opacity:0; transform:translateX(16px); } }

/* Kopfleiste und Fußbereich: Links rücken minimal nach */
.kopf-nav a{ transition:background var(--d-sm) var(--ease), color var(--d-sm) var(--ease), transform var(--d-sm) var(--ease); }
.kopf-nav a:hover{ transform:translateY(-1px); }
.fuss-spalte a:not(.pe-siegel):not(.marke){ transition:color var(--d-sm) var(--ease), transform var(--d-sm) var(--ease); }
.fuss-spalte a:not(.pe-siegel):not(.marke):hover{ transform:translateX(3px); }
.pe-siegel{ transition:transform var(--d-md) var(--ease), box-shadow var(--d-md) var(--ease); }
.pe-siegel:hover{ transform:translateY(-3px); box-shadow:var(--schatten-2); }

/* Kundenstimmen: Sterne leuchten nacheinander auf */
.sterne svg{ transition:transform var(--d-md) var(--ease); }
.stimme:hover .sterne svg{ transform:scale(1.18); }
.stimme:hover .sterne svg:nth-child(2){ transition-delay:40ms; } .stimme:hover .sterne svg:nth-child(3){ transition-delay:80ms; }
.stimme:hover .sterne svg:nth-child(4){ transition-delay:120ms; } .stimme:hover .sterne svg:nth-child(5){ transition-delay:160ms; }

/* Reveals: Karten in Rastern kommen leicht versetzt von unten (Staffelung per rv-v1..v4 bleibt) */
.rv.rv-links{ transform:translateX(-14px); } .rv.rv-rechts{ transform:translateX(14px); }
.rv.rv-links.in,.rv.rv-rechts.in{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .tab-panel:not([hidden]),[data-zustand-karte] [data-nur],.rv.in .zeitstrahl .balken{ animation:none; }
  .karte,.karte-icon,.schritt,.schritt::before,.liste-nr > li,.liste-nr > li::before,.akkordeon summary,.faq-icon,.visual,.rahmen,.rechnung,.rahmen img,.portrait img,.kopf-nav a,.fuss-spalte a,.pe-siegel,.sterne svg,.pfeil,.zahl .wert{ transition:none !important; animation:none !important; }
  .raster > .karte:hover,.karten-hoch > .karte:hover,.stimme:hover,.pe-siegel:hover,.kopf-nav a:hover,.schritt:hover::before,.liste-nr > li:hover::before{ transform:none; }
}
@media (hover:none){ .visual,.rahmen,.rechnung{ will-change:auto; } }

/* ═══ Hilfsklassen ═══ */
.nur-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.oben-8{ margin-top:var(--s-8); } .oben-16{ margin-top:var(--s-16); } .oben-24{ margin-top:var(--s-24); } .oben-32{ margin-top:var(--s-32); } .oben-48{ margin-top:var(--s-48); } .oben-64{ margin-top:var(--s-64); }
.unten-16{ margin-bottom:var(--s-16); } .unten-24{ margin-bottom:var(--s-24); } .unten-32{ margin-bottom:var(--s-32); }
.nur-mobil{ display:none; } @media (max-width:900px){ .nur-mobil{ display:block; } .nur-desktop{ display:none !important; } }
.rund{ border-radius:var(--r-24); overflow:hidden; }
.breite-100{ width:100%; }

/* ═══ Druck ═══ */
@media print{
  .kopf,.leiste,.klebe,.consent,.menue,.nav-klapp,.burger,.fuss .pe-siegel{ display:none !important; }
  body{ background:#fff; color:#000; }
  .thema-nacht,.thema-akzent,.fuss{ background:#fff !important; color:#000 !important; }
  .rv{ opacity:1 !important; transform:none !important; }
}

/* ═══ Bildbühnen (05.09.2026 spät, Jeffs Auftrag: Revolut-Effekt) ═══
   Eine Bühne = Foto hinten (optional, wird per data-bild nachgeladen), davor ein angedeutetes
   Telefon, in dem ein Konto eine Buchung entgegennimmt: Mieteingang (Hero), Erstattung vom
   Finanzamt, Ausgabe für den Urlaub. klartext.js setzt .gebucht, sobald die Bühne sichtbar
   ist, zählt den Saldo hoch und wiederholt den Takt bei data-wiederholen. Ohne Foto trägt
   der Verlauf die Bühne; das Bild ist eine Ebene, keine Voraussetzung. */
.buehne{ position:relative; overflow:hidden; isolation:isolate; }
.buehne-bild{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.buehne-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--bild-lage, 72% 30%); opacity:0; transition:opacity var(--d-xl) var(--ease); }
.buehne-bild img.geladen{ opacity:1; }
.buehne-bild::after{ content:""; position:absolute; inset:0; background:var(--bild-schleier, none); }
.buehne-innen{ position:relative; z-index:1; }

/* Das Telefon: nur der Rand ist angedeutet, der Inhalt ist echtes HTML */
.telefon{
  position:relative; width:clamp(250px, 25vw, 330px); aspect-ratio:9/19; border-radius:clamp(36px, 3vw, 46px);
  border:3px solid var(--tel-rand, rgba(255,255,255,.9)); padding:clamp(14px, 1.4vw, 20px);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 40px 90px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18);
  overflow:hidden; color:var(--tinte); font-family:var(--text); will-change:transform;
}
.telefon::before{ content:""; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:32%; height:20px; border-radius:var(--r-pille); background:rgba(17,18,20,.88); z-index:2; }
.tel-screen{ display:flex; flex-direction:column; gap:10px; padding-top:44px; height:100%; }
.tel-status{ display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--tel-fg, #fff); padding:0 4px; }
.tel-status span:last-child{ font-weight:500; opacity:.85; }
.tel-karte{ background:var(--weiss); border-radius:18px; padding:14px 16px; box-shadow:0 10px 28px rgba(0,0,0,.14); }
.tel-karte .l{ font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--tinte-3); }
.tel-saldo{ display:block; margin-top:4px; font-family:var(--display); font-weight:500; font-size:clamp(1.5rem, 1.7vw, 1.8rem); letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; color:var(--tinte); white-space:nowrap; }
.tel-karte .u{ margin-top:6px; font-size:11px; color:var(--tinte-3); }
.tel-liste{ list-style:none; margin:0; padding:0; }
.tel-liste > li + li{ margin-top:8px; }
.tel-buchung{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; align-items:center; background:var(--weiss); border-radius:14px; padding:10px 10px; box-shadow:0 6px 18px rgba(0,0,0,.10); }
.tel-text{ min-width:0; text-align:left; }
.tel-buchung{ text-align:left; }
.tel-text b{ display:block; font-weight:600; font-size:12.5px; color:var(--tinte); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tel-text > span:not(.tel-badge){ display:block; margin-top:2px; font-size:11px; color:var(--tinte-3); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tel-icon{ width:30px; height:30px; border-radius:10px; background:var(--akzent-hell); color:var(--akzent-dunkel); display:grid; place-items:center; }
.tel-icon svg{ width:16px; height:16px; }
.tel-icon.gruen{ background:var(--gruen-hell); color:var(--gruen); }
.tel-icon.sand{ background:var(--sand-2); color:var(--tinte-2); }
.tel-betrag{ font-family:var(--display); font-weight:600; font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--tinte); text-align:right; }
.tel-betrag.plus{ color:var(--gruen); }
.tel-text .tel-badge{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; height:18px; padding:0 7px; border-radius:var(--r-pille); background:var(--gruen-hell); color:var(--gruen); font-size:10px; font-weight:600; letter-spacing:.02em; opacity:0; transform:scale(.85); transition:opacity var(--d-md) var(--ease), transform var(--d-md) var(--ease); }
.tel-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
/* Die einlaufende Buchung: erst 0 Zeilen hoch und unsichtbar, dann gleitet sie herein und leuchtet kurz */
.tel-push{ display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(-14px); margin:0 0 0; transition:grid-template-rows .55s var(--ease-aus), opacity .45s var(--ease), transform .55s var(--ease-aus), margin .55s var(--ease-aus); }
.tel-push > .tel-buchung{ min-height:0; overflow:hidden; }
.tel-liste > .tel-push + li{ margin-top:0; transition:margin .55s var(--ease-aus); }
.gebucht .tel-push{ grid-template-rows:1fr; opacity:1; transform:none; }
.gebucht .tel-liste > .tel-push + li{ margin-top:8px; }
.gebucht .tel-push > .tel-buchung{ animation:tel-puls 1.8s var(--ease) both; }
.gebucht .tel-text .tel-badge{ opacity:1; transform:none; transition-delay:1s; }
@keyframes tel-puls{ 0%{ box-shadow:0 0 0 0 rgba(45,78,245,.0), 0 6px 18px rgba(0,0,0,.10); } 25%{ box-shadow:0 0 0 3px rgba(45,78,245,.55), 0 14px 34px rgba(45,78,245,.35); } 100%{ box-shadow:0 0 0 0 rgba(45,78,245,0), 0 6px 18px rgba(0,0,0,.10); } }
.tel-saldo.zaehlt{ color:var(--akzent-dunkel); transition:color var(--d-md) var(--ease); }

/* Kopfleiste über der Hero-Bühne: durchsichtig und weiß, bis der erste Scroll sie festmacht.
   Die Bühne rückt um die Leistenhöhe nach oben, damit die Leiste ÜBER dem Blau liegt (sonst stünde weißer Text auf weißem Grund). */
.buehne-seite .leiste{ background:linear-gradient(90deg, #1227FD 0%, #6FA0FF 100%); color:#fff; }  /* Revoluts Verlauf (gemessen: rgb(18,39,253) → rgb(111,160,255)), Jeff 06.09. */
.buehne-seite .leiste a{ color:#fff; }
.buehne-seite main > .hero-revolut:first-child{ margin-top:calc(-1 * var(--nav-h)); }
.buehne-seite main > .hero-revolut:first-child .hero-text{ padding-top:calc(var(--nav-h) + clamp(40px, 7vh, 96px)); }

.buehne-seite .kopf:not(.fest){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.buehne-seite .kopf:not(.fest) .marke,.buehne-seite .kopf:not(.fest) .kopf-nav a,.buehne-seite .kopf:not(.fest) .nav-auf,.buehne-seite .kopf:not(.fest) .leise,.buehne-seite .kopf:not(.fest) .burger{ color:#fff; }
.buehne-seite .kopf:not(.fest) .nav-klapp a{ color:var(--tinte-2); }
.buehne-seite .kopf:not(.fest) .kopf-nav a:hover,.buehne-seite .kopf:not(.fest) .kopf-nav a[aria-current="page"],.buehne-seite .kopf:not(.fest) .nav-auf:hover,.buehne-seite .kopf:not(.fest) .nav-auf[aria-expanded="true"],.buehne-seite .kopf:not(.fest) .nav-auf[aria-current="page"],.buehne-seite .kopf:not(.fest) .burger:hover{ background:rgba(255,255,255,.14); color:#fff; }
.buehne-seite .kopf:not(.fest) .nav-klapp a:hover{ background:var(--sand); color:var(--tinte); }
.buehne-seite .kopf:not(.fest) .btn-dunkel{ background:#fff; color:var(--tinte); }
.buehne-seite .kopf:not(.fest) .btn-dunkel:hover{ background:var(--sand); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.buehne-seite .kopf:not(.fest) .marke .stein{ fill:#fff; }
.buehne-seite .kopf .marke,.buehne-seite .kopf .kopf-nav a,.buehne-seite .kopf .nav-auf,.buehne-seite .kopf .leise,.buehne-seite .kopf .burger{ transition:color var(--d-md) var(--ease), background var(--d-md) var(--ease); }
.buehne-seite.menue-offen .kopf:not(.fest){ background:rgba(255,255,255,.96); }
.buehne-seite.menue-offen .kopf:not(.fest) .marke,.buehne-seite.menue-offen .kopf:not(.fest) .burger{ color:var(--tinte); }
.buehne-seite.menue-offen .kopf:not(.fest) .btn-dunkel{ background:var(--tinte); color:#fff; }

/* Bilddrift: das Foto wandert beim Scrollen einen Hauch (nur mit Scroll-Timeline, sonst steht es) */
@supports (animation-timeline: view()){
  .buehne-bild img.geladen{ animation:bild-drift linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  @keyframes bild-drift{ from{ transform:translateY(-4%) scale(1.08); } to{ transform:translateY(4%) scale(1.08); } }
}
@media (prefers-reduced-motion:reduce){
  .buehne-bild img.geladen{ animation:none; transform:none; }
  .tel-push,.tel-badge,.tel-saldo{ transition:none; }
  .telefon .tel-push{ grid-template-rows:1fr; opacity:1; transform:none; }
  .telefon .tel-liste > .tel-push + li{ margin-top:8px; }
  .telefon .tel-text .tel-badge{ opacity:1; transform:none; }
  .gebucht .tel-push > .tel-buchung{ animation:none; }
}
@media (hover:none){ .telefon{ will-change:auto; } }

/* ═══ Revolut-Hero (06.09.2026, Jeffs Zuruf „so wie revolut.de“) ═══
   Drei Ebenen wie beim Vorbild: Himmel als Fläche (Foto per background-image auf der Sektion, Verlauf als Rückfall),
   die freigestellte Person rechts unten (angeschnitten), davor die telefonförmige Karte mit Lifestyle-Foto und
   Konto-Overlay. Text links oben, eine Pille. Kopfleiste liegt durchsichtig über dem Blau (siehe .buehne-seite). */
.hero-revolut{
  position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background-color:#2D4EF5; background-image:linear-gradient(160deg, #3554FA 0%, #2D4EF5 45%, #2442D8 100%);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  --fg:#fff; --fg-2:rgba(255,255,255,.96); --fg-3:#fff; --link:#fff; --rand:rgba(255,255,255,.24); --karte-2:rgba(255,255,255,.14);
  --tel-rand:rgba(255,255,255,.92); color-scheme:dark;
}
.hero-revolut .hero-innen{ position:relative; z-index:2; min-height:clamp(620px, 84vh, 800px); display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); pointer-events:none; }
.hero-revolut .hero-text{ pointer-events:auto; align-self:start; padding:clamp(40px, 7vh, 96px) 0 clamp(64px, 9vh, 120px); max-width:none; grid-column:1 / -1; }
.hero-revolut h1{ font-size:clamp(2.5rem, 11.3vw, 3.75rem); line-height:1.06; letter-spacing:-.03em; max-width:none; }  /* Grundwert; die Startseite hebt ihn seit dem Claim „Kapital trifft Stein.“ (06.09.2026) auf clamp(2.75rem, 6.2vw, 5rem) an, weil ein Satz einzeilig steht (Revolut: 84 px einzeilig) */
.hero-revolut .hero-text > .lead{ margin-top:var(--s-16); max-width:312px; font-size:1.125rem; line-height:1.4; }  /* Revolut: 18 px, 400 px breit, drei Zeilen; bei uns 312 px, damit der Text vor dem Rahmen (x 442) umbricht */
.hero-revolut .hero-text > .reihe{ margin-top:var(--s-32); }
.hero-revolut .hero-text .pfeil{ color:#fff; }
.hero-revolut .hero-text .hinweis-klein{ margin-top:var(--s-24); max-width:48ch; }
.hero-revolut em{ color:#fff; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:.08em; text-decoration-color:rgba(255,255,255,.55); }
/* Bühne: Person und Karte hängen an der Sektion, nicht am Textraster, damit sie bei jeder Breite unten anschlagen */
.hero-buehne{ position:absolute; inset:0; z-index:1; pointer-events:none; }
/* Gemessen bei 1280 (06.09.2026): Gesicht der Person liegt bei ~72 % ihrer Bildbreite; die Karte endet links davon, damit das Gesicht frei bleibt (Revolut-Komposition) */
.hero-revolut{ --person-left:35.7%; --person-h:63%; }  /* Kopf knapp unter der H1, Gesicht bei x ≈ 600, Rumpf unter dem Rahmen (Revolut: Gesicht 500–650) */
.hero-person{ position:absolute; left:var(--person-left); right:auto; bottom:0; height:var(--person-h); width:auto; max-width:none; object-fit:contain; object-position:bottom; z-index:1; }  /* kein Schlagschatten: die Szene im Rahmen hat auch keinen, sonst wirkt der Rahmen heller als die Umgebung (gemessen 06.09.2026) */
/* Revolut gemessen (1280×800): Rahmen 397×560 (31 % Breite, 5:7), mittig (x 442–839), Oberkante 37 %, Rand 3 px #C9C9CD, Radius 20;
   die Person steht mittig-rechts, ihr Gesicht über der Rahmenoberkante. Dahinter ein weißes Panel gleicher Größe, das beim Scrollen
   auf Fensterbreite wächst (scaleX 3,3 / scaleY 1,5) und die helle Fläche der Kartenreihe wird. */
/* Rahmen unter dem Gesicht der Person rechts (unsere Frau steht rechts, damit der dreizeilige Claim links frei bleibt; Revolut zentriert Frau und Rahmen) */
.hero-revolut{ --rahmen-b:clamp(300px, 31vw, 400px); --rahmen-anteil:.40; --hero-h:100%; }  /* Rahmen-Oberkante als Anteil der Bühnenhöhe; --hero-h ist im Morph die Fensterhöhe */  /* Revolut: 397 px bei 1280, mittig, Oberkante 37 % (gemessen 06.09.2026 im Pane) */
.hero-buehne .telefon{ position:absolute; left:calc(50% - var(--rahmen-b) / 2); right:auto; top:calc(100% * var(--rahmen-anteil)); transform:none; pointer-events:auto; z-index:2; }  /* über der Person (z 1), sonst verschwindet der Rand hinter Haar und Schulter */  /* Oberkante am Kinn (Gesicht bei 30 % der Personenhöhe, Kinn ~42 %), gemessen 06.09.2026 */
/* Ebenen: Himmel 0 · Panel 1 · Hero-Text 2 · Kartenreihe 3 · Person und Rahmen 4 (Revolut: Panel hinter der Person, Reihe über dem Panel) */
.morph-panel{ position:absolute; left:calc(50% - var(--rahmen-b) / 2); top:calc(var(--hero-h) * var(--rahmen-anteil)); width:var(--rahmen-b); aspect-ratio:5/7; background:#fff; border-radius:20px; z-index:1; opacity:0; pointer-events:none; }  /* deckungsgleich mit dem Rahmen: bei t = 0 hinter dessen opaker Szene unsichtbar, wie bei Revolut */
/* Der durchsichtige Rahmen: kein Hintergrund, kein Blur; innen dieselbe Szene wie draußen, per --sz-* pixelgleich ausgerichtet */
.telefon-rahmen{ padding:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; width:var(--rahmen-b, clamp(300px, 31vw, 400px)); aspect-ratio:5/7; border:3px solid #C9C9CD; border-radius:20px; }
.telefon-rahmen::before{ display:none; }
.telefon-rahmen .tel-innen{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.telefon-rahmen .tel-szene{ position:absolute; left:var(--sz-x, 0px); top:var(--sz-y, 0px); width:var(--sz-w, 100%); height:var(--sz-h, 100%); transform-origin:0 0; }
.telefon-rahmen .tel-himmel{ position:absolute; inset:0; background-size:cover; background-position:center; }
.telefon-rahmen .tel-person{ position:absolute; left:var(--person-left); right:auto; bottom:0; height:var(--person-h); width:auto; max-width:none; object-fit:contain; object-position:bottom; }
/* Die UI-Ebene muss ÜBER der absolut positionierten Szene liegen (sonst deckt .tel-innen sie ab; gemessen 06.09.2026: Rahmen ohne Saldo) */
.telefon-rahmen .tel-innen{ z-index:1; }
.telefon-rahmen .tf-ebene{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(14px, 1.3vw, 18px); color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 100%); }
.telefon-rahmen .tf-mitte{ margin-top:-6%; }  /* Saldo und Pille liegen auf dem dunklen Pullover, nicht am Hals */
.hero-buehne .telefon-rahmen .tf-ebene{ padding-bottom:calc(clamp(14px, 1.3vw, 18px) + (1 - var(--t, 0)) * 120px); }
.hero-buehne .telefon-rahmen .tf-mitte{ margin-top:calc(-6% + (1 - var(--t, 0)) * 60px); }  /* Saldo bleibt auf dem Pullover (y ≈ 580), obwohl die Buchung höher rückt */  /* Mieteingang ohne Scrollen sichtbar (Rahmen ragt unter den Fensterrand), im Endzustand wieder unten */
.tf-foto.tf-blau{ background:linear-gradient(160deg, #3554FA 0%, #2D4EF5 45%, #2442D8 100%); object-fit:cover; object-position:center 18%; filter:none; }
@media (max-width:900px){
  .hero-revolut .hero-innen{ grid-template-columns:1fr; min-height:0; }
  .hero-revolut .hero-text{ padding:clamp(32px, 6vh, 56px) 0 0; max-width:none; }
  .hero-buehne{ position:relative; inset:auto; height:min(calc((100vw - 40px) * 1.4 + 90px), 650px); margin-top:var(--s-16); }  /* Rahmenhöhe (5:7 der Breite) plus Kopfüberstand: bei 430 px lag der Rahmen 42 px unter der Bühne, die weiße Reihe deckte den Mieteingang (Jeff 06.09.) */
  /* 390 px gemessen (06.09.2026): Gesicht bei ~72 % der Personenbreite; Person 10 % nach rechts geschoben und Karte schmaler,
     damit die Karte links vom Gesicht endet (vorher Kartenrand 265 px über Gesicht 251 px) */
  .hero-person{ left:calc(50% - var(--rahmen-b) / 2 + 2vw); right:auto; height:101%; }  /* folgt dem Rahmen: Gesicht (37 % der Bildbreite) über der Rahmenmitte, Kopf ragt darüber, rechter Arm angeschnitten */
  .hero-revolut{ --rahmen-anteil:.10; --rahmen-b:min(calc(100% - 40px), 400px); }  /* Revolut mobil: Rahmen 350 px breit bei 390, Oberkante 536 (Kopf ab ~500) */
  .hero-buehne .telefon{ left:calc(50% - var(--rahmen-b) / 2); right:auto; width:var(--rahmen-b); }  /* 20 px am Handy, mittig auf Tablets (Rahmen dort auf 400 px gedeckelt) */
  .hero-buehne .telefon-rahmen .tf-ebene{ padding:16px; padding-bottom:16px; }
  .hero-buehne .telefon-rahmen .tf-mitte{ margin-top:0; }
  .hero-buehne .telefon-rahmen .tf-status{ font-size:12px; }
  .hero-buehne .telefon-rahmen .tf-mitte .tf-l{ font-size:16px; }
  .hero-buehne .telefon-rahmen .tf-saldo{ font-size:clamp(2.25rem, 11vw, 2.75rem); margin-top:6px; }
  .hero-buehne .telefon-rahmen .tf-pille{ height:42px; padding:0 20px; font-size:1rem; margin-top:12px; }
  .hero-buehne .tf-push .tel-buchung{ grid-template-columns:40px minmax(0,1fr) auto; gap:12px; padding:14px; border-radius:16px; }
  .hero-buehne .tf-push .tel-icon{ width:40px; height:40px; border-radius:13px; } .hero-buehne .tf-push .tel-icon svg{ width:19px; height:19px; }
  .hero-buehne .tf-push .tel-text b,.hero-buehne .tf-push .tel-betrag{ font-size:15px; } .hero-buehne .tf-push .tel-text > span:not(.tel-badge){ font-size:12.5px; }  /* mittig, Unterkante am Bühnenende; Gesicht wie bei Revolut im oberen Rahmenteil */
  .telefon-rahmen .tel-person{ left:17%; right:auto; height:100%; }
}

/* Telefonkarte mit Foto (Revolut-Muster): Foto füllt den Schirm, Konto liegt als weißer Text darüber,
   die Buchung schiebt sich als weiße Karte von unten herein (klartext.js setzt .gebucht, zählt den Saldo) */
.telefon-foto{ padding:0; background:#0B0C0F; width:clamp(240px, 24vw, 310px); border:3px solid #C9C9CD; border-radius:20px; aspect-ratio:5/7; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.telefon-foto::before{ display:none; }
.telefon-foto .tf-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; filter:brightness(.8) saturate(1.05); }
.telefon-foto .tf-ebene{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(14px, 1.3vw, 18px); color:#fff;
  background:radial-gradient(60% 26% at 50% 40%, rgba(0,0,0,.28), rgba(0,0,0,0)), linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.46) 100%); }
.tf-status{ display:flex; justify-content:space-between; font-size:11px; font-weight:600; letter-spacing:.02em; padding-top:6px; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.tf-mitte{ text-align:center; margin-top:-14%; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.tf-mitte .tf-l{ display:block; font-size:12px; font-weight:500; opacity:.92; }
.tf-saldo{ display:block; margin-top:4px; font-family:var(--display); font-weight:500; font-size:clamp(1.75rem, 2.1vw, 2.25rem); letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tf-saldo.zaehlt{ color:#fff; }
.tf-pille{ display:inline-flex; align-items:center; height:34px; padding:0 16px; margin-top:12px; border-radius:var(--r-pille); background:#fff; color:var(--tinte); font-family:var(--display); font-weight:500; font-size:.9375rem; text-shadow:none; }
.tf-push{ transform:translateY(130%); opacity:0; transition:transform .65s var(--ease-aus), opacity .4s var(--ease); }
.gebucht .tf-push{ transform:none; opacity:1; }
.tf-push .tel-buchung{ grid-template-columns:36px minmax(0,1fr) auto; gap:10px; padding:12px 12px; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.tf-push .tel-text b{ font-size:13.5px; } .tf-push .tel-text > span:not(.tel-badge){ font-size:11.5px; } .tf-push .tel-betrag{ font-size:13.5px; }
.tf-push .tel-icon{ width:36px; height:36px; border-radius:12px; }
@media (prefers-reduced-motion:reduce){ .tf-push{ transition:none; transform:none; opacity:1; } }

/* Foto-Kacheln der Slides (Revolut: Foto plus schwebende UI-Karte, kein Telefon) */
.foto-kachel{ position:relative; border-radius:var(--r-24); overflow:hidden; aspect-ratio:4/5; max-height:680px; background:var(--karte-2); isolation:isolate; }
.foto-kachel.quer{ aspect-ratio:4/3; }
.foto-kachel > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; aspect-ratio:auto; border-radius:0; transition:transform 1.4s var(--ease); }
.foto-kachel:hover > img{ transform:scale(1.03); }
.schweb{ position:absolute; left:clamp(12px, 3%, 20px); right:clamp(12px, 3%, 20px); bottom:clamp(12px, 3%, 20px); display:grid; gap:8px; opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .7s var(--ease-aus); transition-delay:.25s; }
.schweb.oben{ bottom:auto; top:clamp(12px, 3%, 20px); }
.rv.in .schweb,.rv.in ~ .schweb,.foto-kachel.in .schweb{ opacity:1; transform:none; }
.schweb .tel-buchung{ grid-template-columns:40px minmax(0,1fr) auto; gap:12px; padding:14px 16px; border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.22); }
.schweb .tel-buchung + .tel-buchung{ transition-delay:.45s; }
.schweb .tel-icon{ width:40px; height:40px; border-radius:13px; } .schweb .tel-icon svg{ width:19px; height:19px; }
.schweb .tel-text b{ font-size:15px; } .schweb .tel-text > span:not(.tel-badge){ font-size:12.5px; } .schweb .tel-betrag{ font-size:15px; }
.schweb .tel-text .tel-badge{ opacity:1; transform:none; }
.schweb .haken-karte{ background:var(--weiss); border-radius:18px; padding:14px 16px; box-shadow:0 16px 40px rgba(0,0,0,.22); color:var(--tinte); }
.schweb .haken-karte b{ display:block; font-weight:600; font-size:14px; margin-bottom:8px; }
.schweb .haken-karte .haken{ gap:6px; } .schweb .haken-karte .haken li{ font-size:12.5px; color:var(--tinte-2); padding-left:26px; } .schweb .haken-karte .haken li::before{ width:16px; height:16px; } .schweb .haken-karte .haken li::after{ left:5px; top:calc(.2em + 4px); width:6px; height:4px; }
.thema-nacht .foto-kachel{ background:var(--nacht-2); }
@media (max-width:900px){ .foto-kachel{ aspect-ratio:4/5; max-height:560px; } .foto-kachel.quer{ aspect-ratio:4/3; } }
@media (prefers-reduced-motion:reduce){ .schweb{ transition:none; opacity:1; transform:none; } .foto-kachel > img{ transition:none; } .foto-kachel:hover > img{ transform:none; } }

/* Vertrauensband (Revolut: „Die Bank, die 2,5 Mio nutzen“ plus Auszeichnungen): grau, klein, faktisch */
.vertrauen-band{ text-align:center; }
.vertrauen-band .band-titel{ font-family:var(--display); font-weight:500; font-size:clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing:-.02em; color:var(--fg-2); }
.vertrauen-band .band-zahlen{ margin-top:var(--s-32); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s-24) clamp(24px, 4vw, 56px); }
.vertrauen-band .band-zahlen .zahl{ text-align:left; } .vertrauen-band .band-zahlen .zahl .wert{ font-size:clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.vertrauen-band .band-zahlen .zahl .label{ margin-top:6px; }
.vertrauen-band .pe-siegel{ margin-top:0; }
.vertrauen-band .band-stimmen{ margin-top:var(--s-40); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-20); text-align:left; }
/* ═══ Laufband: Rezensionen als Endlosschleife (06.09.2026, Jeffs Auftrag) ═══
   Zwei identische Sätze nebeneinander, die Spur wandert um genau die halbe Eigenbreite
   nach links und springt dann zurück — an dieser Stelle steht Satz 2 exakt dort, wo
   Satz 1 begann, also sieht man keinen Sprung. Die Bewegung läuft als CSS-Transform
   auf dem Compositor, nicht per Skript: kein Ruckeln, keine Last, wenn der Tab ruht.
   Der zweite Satz ist aria-hidden, sonst liest ein Screenreader jede Stimme doppelt. */
.laufband{
  position:relative; margin-top:var(--s-40); overflow:hidden;
  /* Weiche Kanten statt harter Abschnitte — das Band soll aus der Fläche kommen und in
     sie zurücklaufen. Die Maske gilt für beide Seiten. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.laufband-spur{
  display:flex; width:max-content;
  animation:laufband var(--laufband-dauer, 200s) linear infinite;
  will-change:transform;
}
.laufband-satz{ display:flex; gap:var(--s-20); padding-right:var(--s-20); }
.laufband .stimme{
  /* Breite bestimmt die Bandhöhe: Die längste Stimme setzt sie für alle. Bei 340 px
     brach sie auf acht Zeilen und das Band wurde 418 px hoch; bei 400 px sind es
     sechs (gemessen 06.09.2026). */
  flex:0 0 clamp(280px, 28vw, 400px); text-align:left;
  background:var(--weiss); border-color:transparent; box-shadow:var(--schatten-1);
}
.laufband .stimme .zitat{ font-size:1rem; line-height:1.45; }
/* Alle Karten sind so hoch wie die längste. Ohne das hier steht jeder Name auf
   einer anderen Höhe und das Band wirkt unruhig, obwohl die Kanten stimmen. */
.laufband .stimme{ justify-content:flex-start; }
.laufband .stimme .zitat-wer{ margin-top:auto; padding-top:var(--s-20); }
/* Anhalten, solange jemand liest oder mit der Tastatur darin steht. Ein Band, das
   unter dem Zeiger weiterläuft, ist nicht lesbar. */
.laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur{ animation-play-state:paused; }
@keyframes laufband{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
/* Ohne Bewegung: keine Animation, dafür von Hand schiebbar. Sonst wären 17 der 20
   Stimmen für jemanden mit reduzierter Bewegung unerreichbar. */
@media (prefers-reduced-motion:reduce){
  .laufband-spur{ animation:none; }
  .laufband{ overflow-x:auto; -webkit-overflow-scrolling:touch; -webkit-mask-image:none; mask-image:none; }
  .laufband-satz[aria-hidden="true"]{ display:none; }
}

@media (max-width:900px){ .vertrauen-band .band-stimmen{ grid-template-columns:1fr; } }
.vertrauen-band .band-stimmen .stimme .zitat{ font-size:1.0625rem; line-height:1.4; }
/* Die Karten einer Zeile sind gleich hoch, die Zitate ungleich lang: ohne das hier
   sitzen die Namen auf drei verschiedenen Höhen (gemessen 06.09.2026). */
.vertrauen-band .band-stimmen .stimme{ justify-content:flex-start; }
.vertrauen-band .band-stimmen .stimme .zitat-wer{ margin-top:auto; padding-top:var(--s-20); }

/* ═══ Revolut-Übergang (06.09.2026, gemessen an revolut.com/de-DE bei 1280×800): innerhalb von ~200 px Scroll morpht
   der Hero in eine Reihe aus drei Foto-Karten. Himmel und Person blenden aus, der Hero-Text wandert nach oben, die
   Telefonkarte schrumpft in den mittleren Slot, zwei Karten schieben sich von den Seiten herein, Überschrift und Pille
   erscheinen. Der Fortschritt steht in --t (0..1, klartext.js setzt ihn aus scrollY), --dx/--dy/--ds sind der Weg
   der Karte zum Slot. Nur ab 900 px (Revolut morpht mobil ebenfalls nicht); unter prefers-reduced-motion läuft er, folgt aber
   dem Scrollen ohne Nachlauf. Seit 07.09.2026 glättet klartext.js --t zeitlich (morphSchritt), Wächter: tools/morph-pruefstand.mjs. ═══ */
.hero-himmel{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; pointer-events:none; }
.hero-revolut{ background:var(--sand); }
.hero-revolut .hero-innen{ position:relative; z-index:2; }
.morph-slide{ position:relative; z-index:3; text-align:center; padding:var(--s-48) 0 var(--s-40); color:var(--tinte); --fg:var(--tinte); --fg-2:var(--tinte-2); --fg-3:var(--tinte-3); --link:var(--akzent-dunkel); color-scheme:light; }
.morph-slide h2{ max-width:22ch; margin:0 auto; font-size:clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem); }
.morph-slide .lead{ max-width:44ch; margin:var(--s-16) auto 0; }
.morph-slide .reihe{ justify-content:center; margin-top:var(--s-24); }
.morph-slide .hinweis-klein{ margin:var(--s-24) auto 0; text-align:center; max-width:64ch; }
.morph-karten{ display:flex; justify-content:center; align-items:flex-start; gap:clamp(16px, 2vw, 28px); margin-top:var(--s-24); }
.morph-karten .telefon-foto{ width:clamp(170px, 16vw, 204px); border-width:2px; }  /* Revolut: Seitenkarten 204×288 */
.morph-karten .tf-saldo{ font-size:clamp(1.25rem, 1.5vw, 1.5rem); }
.morph-karten .tf-pille{ height:28px; padding:0 12px; font-size:.8125rem; margin-top:8px; }
.morph-karten .tf-status{ font-size:10px; }
/* Kleine Karten (Revolut: „Kaffee in London −3,25 £“): eine Zeile, ohne Symbol und Unterzeile, sonst schneidet die Ellipse */
.morph-karten .tf-push .tel-buchung{ grid-template-columns:22px minmax(0,1fr) auto; gap:6px; padding:7px 8px; border-radius:12px; }
.morph-karten .tf-push .tel-icon{ width:22px; height:22px; border-radius:7px; } .morph-karten .tf-push .tel-icon svg{ width:11px; height:11px; stroke-width:2.8; }
.morph-karten .tf-push .tel-text b{ font-size:10px; } .morph-karten .tf-push .tel-text > span:not(.tel-badge){ font-size:8px; margin-top:1px; } .morph-karten .tf-push .tel-betrag{ font-size:10px; }
.morph-karten .telefon-foto .tf-ebene,.morph-karten .tf-ebene{ padding-left:12px; padding-right:12px; }
.morph-karten .tf-push{ transform:none; opacity:1; }
.morph-slot{ width:clamp(190px, 17.7vw, 226px); aspect-ratio:5/7; flex:0 0 auto; }  /* Revolut: Mittelkarte 226×320 */
.morph-slot .telefon-foto{ width:100%; }
.hero-revolut:not(.morph-aktiv) .morph-slot > .telefon-foto{ display:block; }
.morph-aktiv .morph-slot > .telefon-foto{ display:none; }  /* im Morph landet die Hero-Karte im Slot */
@media (min-width:900px){
  .hero-revolut.morph-aktiv{ --hero-h:clamp(680px, 100vh, 900px); height:calc(var(--hero-h) + var(--strecke, 440px)); --t:0; }  /* Strecke kommt aus klartext.js (55 % Fensterhöhe, seit 07.09.2026); Bühne, Himmel und Panel bleiben auf --hero-h */
  .morph-aktiv .hero-buehne,.morph-aktiv .hero-himmel{ bottom:auto; height:var(--hero-h); }
  .morph-aktiv .hero-innen{ min-height:0; height:100%; }
  .morph-aktiv .hero-himmel{ opacity:calc(1 - var(--t) * 1.2); }
  .morph-aktiv .hero-person{ z-index:0; opacity:calc(1.6 - var(--t) * 1.6); transform-origin:var(--po-x, 50%) var(--po-y, 50%); transform:translate(calc(var(--t) * var(--dx, 0px)), calc(var(--t) * var(--dy, 0px))) scale(calc(1 + (var(--ds, .7) - 1) * var(--t))); }  /* gleiche Abbildung wie der Rahmen (Ursprung = Rahmenmitte, aus klartext.js), sonst erscheint die Frau doppelt */
  .morph-aktiv .hero-text{ opacity:calc(1 - var(--t) * 2); transform:translateY(calc(var(--t) * -160px)); }
  .morph-aktiv .hero-buehne{ z-index:auto; }  /* kein eigener Stapel: Person liegt unter dem Panel, der Rahmen darüber */
  .morph-aktiv .hero-buehne .telefon{ z-index:4; }
  .morph-aktiv .hero-buehne .telefon{ transform-origin:center center; transform:translate(calc(var(--t) * var(--dx, 0px)), calc(var(--t) * var(--dy, 0px))) scale(calc(1 + (var(--ds, .7) - 1) * var(--t))); }
  .morph-aktiv .morph-panel{ opacity:1; transform-origin:center center; transform:scale(calc(1 + 2.9 * var(--t)), calc(1 + 1.4 * var(--t))); }  /* 397 px × 3,9 = 1550 px: deckt auch 1440er Fenster */
  /* innere Szene: bei t=0 deckungsgleich mit dem Hero, bei t=1 auf das Gesicht gezogen (--sx/--sy/--s1 aus klartext.js) */
  .morph-aktiv .telefon-rahmen .tel-szene{ transform:translate(calc(var(--t) * var(--sx, 0px)), calc(var(--t) * var(--sy, 0px))) scale(calc(1 + (var(--s1, 1) - 1) * var(--t))); }
  .morph-aktiv .telefon-rahmen{ background:linear-gradient(160deg, #3554FA 0%, #2D4EF5 45%, #2442D8 100%); }
  .morph-aktiv .hero-himmel{ z-index:0; }
  /* Oberkante der Reihe so, dass sie am Ende der Morph-Strecke (--strecke aus klartext.js, 55 % Fensterhöhe) direkt unter der Kopfleiste steht: Kopfleiste 72 + Luft 18 = 90 px unter der Strecke, unabhängig von deren Länge */
  .morph-aktiv .morph-slide{ position:absolute; inset:0; z-index:3; padding:calc(var(--strecke, 440px) + 90px) var(--rand-x) 0;
    opacity:calc((var(--t) - .35) / .65); transform:translateY(calc((1 - var(--t)) * 70px)) scale(calc(.88 + .12 * var(--t))); pointer-events:none; }
  .morph-aktiv.morph-fertig .morph-slide{ pointer-events:auto; }
  .morph-aktiv .morph-karten .karte-links{ transform:translateX(calc((1 - var(--t)) * -90px)) scale(.94); opacity:calc((var(--t) - .45) / .55); }
  .morph-aktiv .morph-karten .karte-rechts{ transform:translateX(calc((1 - var(--t)) * 90px)) scale(.94); opacity:calc((var(--t) - .45) / .55); }
  .morph-aktiv .hero-himmel,.morph-aktiv .hero-person,.morph-aktiv .hero-text,.morph-aktiv .morph-slide,.morph-aktiv .morph-karten > *{ will-change:transform, opacity; }
  .morph-aktiv .hero-text{ pointer-events:auto; }
  .morph-aktiv.morph-text-weg .hero-text{ pointer-events:none; }  /* ab t 0,5 ist der Text unsichtbar (Deckkraft 1 − 2t) und darf keine Klicks mehr fangen; Klasse aus klartext.js (Review 07.09.2026) */
  .morph-aktiv.morph-fertig .hero-text,.morph-aktiv.morph-fertig .hero-buehne .telefon{ pointer-events:none; }
}
@media (max-width:899px){
  /* mobil ein seitlich scrollbares Band (Revolut zeigt die Karten ebenfalls als Reihe) */
  .morph-karten{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px var(--rand-x) 16px; margin:var(--s-24) calc(-1 * var(--rand-x)) 0; scrollbar-width:none; }
  .morph-karten::-webkit-scrollbar{ display:none; }
  .morph-karten > *{ flex:0 0 auto; scroll-snap-align:center; }
  .morph-karten .telefon-foto,.morph-slot{ width:min(67vw, 260px); }  /* innere Karte füllt den 260-px-Slot, sonst bleiben die Buchungstitel abgeschnitten */
}

/* Vollbild-Slide (Revoluts Bergbild): Foto füllt die Sektion, Text zentriert darüber, eine Telefonkarte in der Mitte unten */
.slide-vollbild{ position:relative; overflow:hidden; isolation:isolate; min-height:clamp(640px, 92vh, 860px); display:flex; flex-direction:column; align-items:center; text-align:center;
  color:#fff; --fg:#fff; --fg-2:rgba(255,255,255,.96); --fg-3:#fff; --link:#fff; --tel-rand:rgba(255,255,255,.9); color-scheme:dark; padding:clamp(32px, 5vh, 48px) var(--rand-x) 0; }
.slide-vollbild > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:0; }
@keyframes nur-deckkraft{ from{ opacity:0; } }
.slide-vollbild > img.vb-bild:not([hidden]){ animation:nur-deckkraft .6s var(--ease) both; }  /* kein transform in der Animation, sonst stirbt die Parallaxe */
.slide-vollbild::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,12,15,.55) 0%, rgba(11,12,15,.15) 40%, rgba(11,12,15,.35) 100%); }
.slide-vollbild > *:not(img){ position:relative; z-index:2; }
.slide-vollbild h2{ max-width:18ch; }
.slide-vollbild .lead{ max-width:46ch; margin-top:var(--s-16); }
.slide-vollbild .reihe{ justify-content:center; margin-top:var(--s-24); }
.slide-vollbild .hinweis-klein{ margin-top:var(--s-16); text-align:center; max-width:60ch; }
/* Karte wie bei Revolut vollständig sichtbar, Chips darunter am Sektionsende */
.slide-vollbild .telefon{ margin-top:var(--s-16); margin-bottom:0; width:clamp(240px, 20.5vw, 264px); }
.slide-vollbild > img,.slide-vollbild .tel-szene > .tel-bild{ transform:translateY(var(--py, 0px)); will-change:transform; height:120%; top:-10%; }  /* leichte Parallaxe wie Revoluts Bergbild (~0,15 × Scroll); die innere Kopie bewegt sich gleich */
.slide-vollbild .tel-szene > .tel-bild{ position:absolute; left:0; width:100%; object-fit:cover; object-position:center 35%; }
.slide-vollbild .telefon-rahmen .tf-mitte{ margin-top:-6%; }
.slide-vollbild .telefon-rahmen .tf-pille{ height:28px; padding:0 12px; font-size:.8125rem; margin-top:8px; }
.slide-vollbild .telefon-rahmen .tf-saldo{ font-size:clamp(1.25rem, 1.6vw, 1.625rem); }
.slide-vollbild .telefon-rahmen .tf-status{ font-size:10px; }
.slide-vollbild .tf-push .tel-buchung{ grid-template-columns:24px minmax(0,1fr) auto; gap:7px; padding:9px 10px; border-radius:13px; }
.slide-vollbild .tf-push .tel-buchung + .tel-buchung{ margin-top:6px; }
.slide-vollbild .tf-push .tel-icon{ width:24px; height:24px; border-radius:8px; } .slide-vollbild .tf-push .tel-icon svg{ width:12px; height:12px; stroke-width:2.4; }
.slide-vollbild .tf-push .tel-text b{ font-size:11px; } .slide-vollbild .tf-push .tel-text > span:not(.tel-badge){ font-size:10px; } .slide-vollbild .tf-push .tel-betrag{ font-size:11.5px; }
.slide-vollbild .tf-push.da{ transform:none; opacity:1; }
.slide-vollbild .tel-buchung{ text-align:left; }  /* die Sektion zentriert, die Buchung nicht */
.slide-vollbild .telefon-rahmen.tab-panel:not([hidden]){ animation-name:nur-deckkraft; }  /* die Karte darf beim Chip-Wechsel nicht rutschen, sonst löst sich die innere Szene 450 ms lang vom Foto */
.slide-vollbild .chips{ justify-content:center; margin-top:var(--s-16); padding-bottom:0; }
.slide-vollbild .chips + .hinweis-klein,.slide-vollbild .chips ~ .hinweis-klein{ margin:var(--s-16) 0 var(--s-24); max-width:78ch; font-size:12px; opacity:.85; }
.slide-vollbild .chip{ background:rgba(255,255,255,.14); color:#fff; border-color:transparent; }
.slide-vollbild .chip[aria-selected="true"]{ background:#fff; color:var(--tinte); }
.slide-vollbild .chip:not([aria-selected="true"]):hover{ background:rgba(255,255,255,.24); }
.ziel-nav{ display:none; }  /* nur mobil */
.band-punkte{ display:none; }  /* nur mobil: Revoluts Punkte unter dem Karussell */
.band-punkte button{ width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(17,18,20,.22); cursor:pointer; transition:background var(--d-sm) var(--ease), transform var(--d-sm) var(--ease); }
.band-punkte button.an{ background:var(--tinte); transform:scale(1.25); }
.ziel-pfeil{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; flex:0 0 auto; cursor:pointer; transition:background var(--d-sm) var(--ease); }
.ziel-pfeil:active{ background:rgba(255,255,255,.3); }
.ziel-pfeil svg{ width:20px; height:20px; }
.ziel-mitte{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.ziel-name{ font-family:var(--display); font-weight:600; font-size:1.0625rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ziel-punkte{ display:flex; gap:6px; }
.ziel-punkte i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:background var(--d-sm) var(--ease); }
.ziel-punkte i.an{ background:#fff; }
.slide-vollbild .lead.tab-panel,.slide-vollbild .hinweis-klein.tab-panel{ animation:einblenden .45s var(--ease) both; }
@media (max-width:900px){
  .morph-slide{ padding-inline:var(--rand-x); }  /* Band zieht sich per negativem Rand auf volle Breite, Überschrift, Pille und Kleingedrucktes behalten den Seitenrand (mobil war das Kleingedruckte randlos, gemessen 06.09.) */
  .chip{ min-height:42px; font-size:1rem; padding:0 18px; }  /* Revolut mobil: 42 px, 16 px */
  .slide-vollbild .chips{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:0 var(--rand-x) 8px; margin-inline:calc(-1 * var(--rand-x)); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .slide-vollbild .chips::-webkit-scrollbar{ display:none; }
  .slide-vollbild .chip{ flex:0 0 auto; }
}
@media (max-width:900px){
  .slide-vollbild{ min-height:0; align-items:flex-start; text-align:left; }
  .slide-vollbild h2,.slide-vollbild .lead,.slide-vollbild .hinweis-klein{ text-align:left; max-width:none; }
  .slide-vollbild .telefon{ width:min(280px, 72vw); align-self:center; }
  .slide-vollbild .telefon-rahmen .tf-status{ font-size:12px; }
  .slide-vollbild .telefon-rahmen .tf-mitte .tf-l{ font-size:13px; } .slide-vollbild .telefon-rahmen .tf-saldo{ font-size:1.75rem; } .slide-vollbild .telefon-rahmen .tf-pille{ height:36px; padding:0 16px; font-size:.9375rem; }
  .slide-vollbild .tf-push .tel-buchung{ grid-template-columns:30px minmax(0,1fr) auto; gap:8px; padding:10px; }
  .slide-vollbild .tf-push .tel-icon{ width:30px; height:30px; } .slide-vollbild .tf-push .tel-icon svg{ width:15px; height:15px; stroke-width:2; }
  .slide-vollbild .tf-push .tel-text b,.slide-vollbild .tf-push .tel-betrag{ font-size:12px; } .slide-vollbild .tf-push .tel-text > span:not(.tel-badge){ font-size:11px; }
  .slide-vollbild .chips{ display:none; }  /* mobil ersetzt das Karussell die Chip-Zeile */
  .ziel-nav{ display:flex; align-items:center; gap:12px; margin-top:var(--s-16); align-self:stretch; }
  .slide-vollbild[data-wischen]{ touch-action:pan-y; }
}
@media (max-width:900px){
  /* Übergang Hero → Reihe wie bei Revolut mobil: Himmel endet mit der Bühne, die Reihe steht auf Weiß (gemessen 06.09.) */
  .hero-revolut{ background:#fff; }
  .hero-himmel{ bottom:auto; height:calc(100% - var(--reihe-h, 0px)); background-position:center top; }
  .morph-slide{ position:relative; z-index:2; background:#fff; text-align:left; padding:var(--s-40) var(--rand-x) var(--s-32); }
  .hero-buehne{ margin-bottom:0; }
  h2,.display-2{ font-size:clamp(2rem, 9.2vw, 2.25rem); }  /* Revolut mobil 36 px */
  .morph-slide h2{ margin-bottom:var(--s-12); font-size:clamp(2rem, 9.2vw, 2.25rem); }
  .morph-slide .reihe{ margin-top:var(--s-20); }
  .band-punkte{ display:flex; justify-content:center; gap:10px; margin-top:var(--s-4); padding:8px 0; }
  .morph-slide .hinweis-klein{ margin-top:var(--s-16); }
  .morph-slide h2,.morph-slide .lead{ margin-left:0; margin-right:0; }
  .morph-slide .reihe{ justify-content:flex-start; }
  .morph-slide .hinweis-klein{ text-align:left; margin-left:0; }
  .morph-karten .karte-links,.morph-karten .karte-rechts,.morph-karten .morph-slot{ flex:0 0 auto; width:min(260px, 67vw); transform:none; opacity:1; }  /* Revolut 225 px; unsere Buchungstitel brauchen 35 px mehr Spalte */
  .morph-karten .tf-status{ font-size:12px; }
  .morph-karten .tf-mitte .tf-l{ font-size:12px; } .morph-karten .tf-saldo{ font-size:1.625rem; } .morph-karten .tf-pille{ height:32px; padding:0 14px; font-size:.8125rem; }
  .morph-karten .tf-push .tel-buchung{ grid-template-columns:30px minmax(0,1fr) auto; gap:8px; padding:10px; border-radius:14px; }
  .morph-karten .tf-push .tel-icon{ width:30px; height:30px; border-radius:10px; } .morph-karten .tf-push .tel-icon svg{ width:15px; height:15px; stroke-width:2; }
  .morph-karten .tf-push .tel-text b,.morph-karten .tf-push .tel-betrag{ font-size:12px; } .morph-karten .tf-push .tel-text > span:not(.tel-badge){ font-size:10.5px; }
  .morph-karten .telefon-foto .tf-ebene,.morph-karten .tf-ebene{ padding:14px; }
}
@media (prefers-reduced-motion:reduce){ .morph-aktiv .hero-himmel,.morph-aktiv .hero-person,.morph-aktiv .hero-text,.morph-aktiv .morph-slide,.morph-aktiv .morph-karten > *{ will-change:auto; } }