/* ═══════════════════════════════════════════════════════════════════
   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;
  --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; }
.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; }
.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; }

/* ═══ 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 */
.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 und ohne prefers-reduced-motion (Revolut morpht mobil ebenfalls nicht). ═══ */
.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, 320px)); --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 nach der Morph-Strecke (~150 px) direkt unter der Kopfleiste steht: Kopfleiste 72 + Strecke 150 − Leiste 38 + Luft */
  .morph-aktiv .morph-slide{ position:absolute; inset:0; z-index:3; padding:calc(var(--strecke, 320px) + 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-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; } }