/* ============================================================
   zeus-redesign — Design-Sprache „Petrol-Licht"
   Weiß ist die Bühne, Petrol ist das Licht.
   Tokens siehe DESIGN.md. Copy ist freigegeben und fest.
   ============================================================ */

/* Schriften: hierher gemergt aus fonts.css (17.07.2026), damit ein
   render-blockierender Request entfällt — fonts.css lud 0,5 KB als eigene
   Datei im kritischen Pfad. Die Datei assets/css/fonts.css ist abgelöst
   und wird nirgends mehr eingebunden. */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}


:root {
  /* Bühnen */
  --bg: #ffffff;
  --bg-tint: #eff6f6;
  --bg-deep: #061719;
  --bg-deep-2: #0a2124;

  /* Petrol-Familie (gemessen, Markenkern) */
  --petrol: #0e5e63;
  --petrol-hell: #14787c;
  --petrol-tief: #0a4548;
  --mint: #46b8b1;
  --mint-hell: #67cdc6;

  /* Tinte */
  --ink: #0b1b1d;
  --ink-soft: #3d5457;
  --ink-leise: #5a7375;
  --dunkel-ink: #e9f4f3;
  --dunkel-soft: #afcfcc;

  /* Linien & Flächen */
  --linie: rgba(14, 94, 99, 0.14);
  --linie-dunkel: rgba(103, 205, 198, 0.18);
  --karte-schatten:
    0 1px 2px rgba(11, 27, 29, 0.05),
    0 8px 24px rgba(11, 27, 29, 0.07),
    0 24px 64px rgba(14, 94, 99, 0.1);

  /* Schimmer: das eine bewegte Licht */
  --shimmer: linear-gradient(110deg,
    var(--petrol) 0%, #2e9e96 30%, var(--mint-hell) 50%,
    #2e9e96 70%, var(--petrol) 100%);

  /* Typo */
  --f-display: 'Clash Display', 'Avenir Next', sans-serif;
  --f-body: 'Switzer', 'Helvetica Neue', sans-serif;
  --fs-hero: clamp(2.9rem, 6.4vw, 5.5rem);
  --fs-h2: clamp(2.1rem, 4vw, 3.4rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-mega: clamp(4.5rem, 12vw, 9rem);
  --fs-body: 1.0625rem;

  /* Z-Skala */
  --z-orb: 0;
  --z-inhalt: 2;
  --z-grain: 60;
  --z-kopf: 100;
  --z-mobilnav: 110;
}

/* ---------- Reset & Grundstimmung ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: clip;
}

/* Korn über allem: nimmt den Flächen die Sterilität */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  transform: translateZ(0); /* eigene Ebene: Korn erzwingt sonst Repaints beim Scrollen */
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* width/height-Attribute dienen nur der Platzreservierung — sobald CSS die
   Breite setzt, muss die Höhe mitwachsen, sonst frisst object-fit das Motiv */
.haus-foto img,
.beweis-foto img,
.kronzeuge-bild img {
  height: auto;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

h1 em, h2 em {
  font-style: normal;
  color: var(--petrol);
}

/* text-wrap: pretty verhindert Waisenwoerter (einzelnes Wort in der letzten
   Zeile). Welle 70 hat den Umbruch aller 20 Seiten in fuenf Breiten gemessen:
   493 solcher Waisen, quer durch Fliesstext, Listen und Bildunterschriften.
   Einzeln zu flicken waere aussichtslos gewesen, jede Copy-Aenderung haette
   neue erzeugt. Progressive Verbesserung: Browser ohne Unterstuetzung
   (Firefox) ignorieren die Zeile und umbrechen wie bisher.
   h1/h2/h3 stehen bereits auf balance, das ist fuer kurze Zeilen die
   bessere Wahl und bleibt deshalb, wie es ist. */
p,
li,
figcaption,
dd,
blockquote {
  text-wrap: pretty;
}

h4 { text-wrap: balance; }

p { margin: 0; }

a { color: inherit; }

.wrap {
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

section { position: relative; }

section[id] { scroll-margin-top: 92px; }

::selection { background: rgba(20, 120, 124, 0.22); }

/* FOUC-Schutz: Der Hero wird per GSAP eingeblendet. Ohne diesen Startzustand
   ist er beim Laden erst voll sichtbar und springt dann für die from()-Animation
   auf unsichtbar zurück — das flackert. Mit aktivem JS (.js, im <head> gesetzt)
   starten die Hero-Bausteine unsichtbar; die Animation blendet sie ein. Läuft
   keine Motion (reduced motion / kein GSAP), nimmt main.js die .js-Klasse wieder
   weg und alles ist sofort sichtbar. */
/* Hero-Auftakt als reines CSS (17.07.2026, vorher GSAP in main.js):
   Die Einblendung startet jetzt mit dem Stylesheet statt erst nach Download
   und Parse von gsap.min.js — auf Slow 4G lag dazwischen mehr als eine
   Sekunde leerer Hero, Googles Speed Index maß 4,6 s. Werte sind 1:1 die
   alten GSAP-Werte (Dauer, Delay, Stagger; power3.out ~ (0.165,0.84,0.44,1),
   power2.out ~ (0.215,0.61,0.355,1)).
   Konstruktion: nur ein from-Keyframe, das Ziel ist der Basiszustand, dazu
   fill-mode backwards. Das erledigt drei Dinge auf einmal: FOUC-Schutz (vor
   Animationsstart gilt from, also unsichtbar), nach dem Ende bleibt KEIN
   transform stehen (die bekannte Hover-Falle, wegen der GSAP clearProps
   brauchte), und opacity statt visibility hält die Inhalte durchgehend im
   Accessibility-Baum. .ist-static (animation:none) zeigt automatisch den
   Endzustand; ohne .js (reduced motion, JS aus) läuft nichts und alles ist
   sofort sichtbar. */
/* Opacity und Bewegung getrennt (Welle 51): Die Bewegung behält ihren
   punchy Ease (0.165, 0.84 …), die Deckkraft fadet aber mit ease-in-out
   (Start bei Tempo 0) sanft ein, statt vom kombinierten Ease fast sofort
   auf 1 gerissen zu werden. Das ist die weiche Hero-Einblendung, die für
   den Webdesign-Hero gewünscht war, jetzt auf ALLEN Heroes. Delays und
   --auftakt-y (Distanz) unverändert -> Choreografie identisch. */
@keyframes auftakt-fade {
  from { opacity: 0; }
}
@keyframes auftakt-move {
  from { transform: translateY(var(--auftakt-y, 24px)); }
}
@keyframes auftakt-blende {
  from { opacity: 0; }
}

html.js .hero-signal { --auftakt-y: 20px; animation: auftakt-fade 1.2s cubic-bezier(0.42, 0, 0.58, 1) backwards, auftakt-move 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) backwards; }
html.js .hero h1 { --auftakt-y: 46px; animation: auftakt-fade 1.45s cubic-bezier(0.42, 0, 0.58, 1) 0.1s backwards, auftakt-move 1.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s backwards; }
html.js .hero-lead { --auftakt-y: 30px; animation: auftakt-fade 1.3s cubic-bezier(0.42, 0, 0.58, 1) 0.26s backwards, auftakt-move 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.26s backwards; }
html.js .hero-ctas { --auftakt-y: 24px; animation: auftakt-fade 1.2s cubic-bezier(0.42, 0, 0.58, 1) 0.42s backwards, auftakt-move 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.42s backwards; }
html.js .hero-garantie { --auftakt-y: 24px; animation: auftakt-fade 1.2s cubic-bezier(0.42, 0, 0.58, 1) 0.52s backwards, auftakt-move 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.52s backwards; }
html.js .beweis-foto { --auftakt-y: 50px; animation: auftakt-fade 1.5s cubic-bezier(0.42, 0, 0.58, 1) 0.4s backwards, auftakt-move 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s backwards; }
html.js .hero .beweis-karte { --auftakt-y: 60px; animation: auftakt-fade 1.4s cubic-bezier(0.42, 0, 0.58, 1) 0.62s backwards, auftakt-move 1.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.62s backwards; }
/* Stagger 0.16s wie im alten GSAP-Aufruf. nth-of-type statt nth-child: auf
   den Unterseiten steht die einzelne Karte hinter dem figure.beweis-foto und
   wäre per nth-child fälschlich „Karte 2" (Delay 0.78 statt 0.62). */
html.js .hero .beweis-karte:nth-of-type(2) { animation-delay: 0.78s; }
html.js .hero .beweis-karte:nth-of-type(3) { animation-delay: 0.94s; }
html.js .hero .beweis-karte:nth-of-type(4) { animation-delay: 1.1s; }
html.js .kino-cue { animation: auftakt-blende 1s cubic-bezier(0.215, 0.61, 0.355, 1) 1.2s backwards; }
html.js .vertrauen .wrap { animation: auftakt-blende 1.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s backwards; }

/* Doppelte Absicherung neben dem .js-Wegnehmen in main.js: auch wenn JS gar
   nicht (oder spät) läuft, bewegt sich bei reduced motion nichts. */
@media (prefers-reduced-motion: reduce) {
  html.js .hero-signal, html.js .hero h1, html.js .hero-lead,
  html.js .hero-ctas, html.js .hero-garantie, html.js .beweis-foto,
  html.js .hero .beweis-karte, html.js .kino-cue,
  html.js .vertrauen .wrap { animation: none; }
}

/* Kein border-radius hier: das würde die eigene Rundung des fokussierten
   Elements (z. B. Pill-Buttons 999px) auf 4px zwingen und einen eckigen,
   versetzten Ring erzeugen. Der Outline folgt automatisch der Element-Rundung. */
:focus-visible {
  outline: 2px solid var(--petrol-hell);
  outline-offset: 3px;
}

/* Skip-Link: erstes fokussierbares Element, überspringt die Nav. Off-screen
   per transform (kein Layout-Thrash), fährt bei Fokus oben links ein. */
.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--petrol);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(14, 94, 99, 0.4);
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus { transform: translateY(0); }

/* Nur für Screenreader: visuell versteckt, aber vorlesbar (Live-Regionen) */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Formular-Absicherung (Welle 22) ---------- */

/* Honeypot: raus aus dem Sichtfeld und aus der Tab-Reihenfolge, aber im DOM
   (Bots füllen es aus, das JS verwirft solche Einsendungen still) */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fehlzustand: Meldung unterm Feld, Feld bekommt eine warme Signalkante.
   Kein Rot-Alarm-Kasten: eine Zeile Klartext reicht. */
.feld-fehler {
  margin: 6px 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #b3261e;
}

input.ist-fehler,
select.ist-fehler,
textarea.ist-fehler {
  border-color: #b3261e !important;
}

.ist-fehler .kal-tage { outline: 1px solid rgba(179, 38, 30, 0.4); border-radius: 8px; }

/* Bestätigung nach dem Absenden: ersetzt den Formular-Inhalt */
.form-danke {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-block: 12px;
}

.form-danke:focus { outline: none; }

.form-danke .danke-titel {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  margin: 0;
}

.form-danke p { margin: 0; color: var(--ink-soft); }

/* Der fest gebuchte Termin ist die Hauptinformation des Danke-Panels und muss
   ohne Lesen erfassbar sein — deshalb Display-Schrift und Petrol statt des
   grauen Fließtexts der übrigen Zeilen. */
.form-danke .danke-termin {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
  color: var(--petrol);
}

.form-danke .danke-alt { font-size: 0.92rem; color: var(--ink-leise); }

.form-danke .danke-alt a { color: var(--petrol); }

/* ---------- Schimmer-Grundlagen ---------- */

@keyframes schimmer-lauf {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, 6%, 0) scale(1.08); }
  to { transform: translate3d(-3%, -4%, 0) scale(0.96); }
}

@keyframes marquee-lauf {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes sheen-zug {
  from { transform: translateX(-120%) skewX(-18deg); }
  to { transform: translateX(240%) skewX(-18deg); }
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  /* border:0 PFLICHT: als <button> erbt .btn sonst den 2px-outset-Default des
     Browsers — ein 3D-Rahmen (hell oben-links, dunkel unten-rechts), der auf
     dem Petrol-Knopf wie ein weißer Rand + grauer Schatten wirkt. */
  border: 0;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--petrol-hell), var(--petrol) 55%, var(--petrol-tief));
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 10px 28px rgba(14, 94, 99, 0.35);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn::after {
  /* Lichtzug über den Knopf */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-120%) skewX(-18deg);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 16px 40px rgba(14, 94, 99, 0.45);
}

.btn:hover::after { animation: sheen-zug 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

.btn svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover svg { transform: translateX(4px); }

.btn-gross { padding: 17px 32px; font-size: 1.06rem; }

/* Mobil zeigt der Hero-CTA den Kurztext (bleibt einzeilig) */
.btn-kurz { display: none; }

@media (max-width: 720px) {
  .btn-lang { display: none; }
  .btn-kurz { display: inline; }
}

.btn-leise {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--petrol);
  font-weight: 600;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(14, 94, 99, 0.35);
  background: transparent;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-leise::after {
  content: '→';
  font-weight: 500;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-leise:hover {
  border-color: var(--petrol);
  background: rgba(14, 94, 99, 0.06);
  transform: translateY(-1px);
}

.btn-leise:hover::after { transform: translateX(4px); }

.btn-umriss {
  background: transparent;
  color: var(--petrol);
  box-shadow: inset 0 0 0 1.5px var(--petrol);
}

.btn-umriss:hover { box-shadow: inset 0 0 0 1.5px var(--petrol), 0 12px 30px rgba(14, 94, 99, 0.18); }

/* ---------- Kopf: schwebende Kommando-Pille ---------- */

.kopf {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: var(--z-kopf);
  transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.kopf.ist-fest { top: 10px; }

.kopf-zeile {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 12px 0;
  border-radius: 999px;
  border: 1px solid transparent;
  /* Der Filter steht hier bewusst schon im RUHEZUSTAND, als wirkungslose
     Identitaet (blur 0, saturate 1). Grund ist kein Aussehen, sondern das
     Zeichnen: Wird backdrop-filter beim Zustandswechsel ganz an- und
     abgeschaltet, legt der Browser die Compositing-Ebene jedes Mal neu an und
     wirft sie weg. Der Navigationstext liegt auf dieser Ebene und kann dabei
     einen Frame verlieren — Jonas am 28.07.2026: „an den schlag verschwindet
     kurz das wort baustein beim hochziehen". So bleibt die Ebene bestehen und
     nur ihr Wert aendert sich. */
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
  transition:
    background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease,
    padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease;
}

.kopf.ist-fest .kopf-zeile {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-color: rgba(14, 94, 99, 0.16);
  box-shadow: 0 2px 6px rgba(11, 27, 29, 0.05), 0 22px 56px rgba(11, 27, 29, 0.14);
  padding: 8px 10px 8px 22px;
}

.marke {
  display: inline-flex;
  /* Transparenter Grund-Rahmen, damit der Wechsel zur Chip-Pille beim Scrollen
     (mobil: der Kopf teilt sich in Marke- + Burger-Chip) weich einfadet statt
     hart aufzupoppen — background/border/shadow animieren sauber (anders als
     backdrop-filter, das auf iOS nicht transitioniert). */
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.marke img { width: 128px; height: auto; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.kopf.ist-fest .marke img { width: 106px; }

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--ink-soft);
  transition: color 0.25s ease, background 0.25s ease;
}

.nav-link:hover,
.nav-gruppe:hover > .nav-link {
  color: var(--petrol);
  background: rgba(14, 94, 99, 0.08);
}

.nav-link[aria-current="page"] {
  color: var(--petrol);
  background: rgba(14, 94, 99, 0.1);
  font-weight: 600;
}

.nav-pfeil { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-gruppe:hover .nav-pfeil { transform: rotate(180deg); }

/* Dropdown: Karten mit Kennzahl, öffnet auf Hover/Fokus */
.nav-gruppe { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  min-width: 380px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(14, 94, 99, 0.14);
  box-shadow: 0 3px 8px rgba(11, 27, 29, 0.06), 0 30px 70px rgba(11, 27, 29, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
}

.nav-gruppe:hover .dropdown,
.nav-gruppe:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Escape hat das Panel geschlossen: übersteuert :focus-within, solange der
   Fokus noch auf dem Trigger sitzt (JS entfernt dd-zu bei erneutem Hover/Fokus) */
.nav-gruppe.dd-zu .dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.dd-karte {
  position: relative;
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

/* Dezenter Hover: Petrol-Hauch, kleiner Schub, Titel färbt sich */
.dd-karte::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 100% 200%;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.dd-karte:hover {
  background: rgba(14, 94, 99, 0.08);
  transform: translateX(3px);
}

.dd-karte:hover::before { opacity: 1; }
.dd-karte:hover .dd-inhalt strong { color: var(--petrol); }

.dd-inhalt { display: flex; flex-direction: column; gap: 2px; }
.dd-inhalt strong { font-size: 0.99rem; color: var(--ink); transition: color 0.25s ease; }
.dd-inhalt span { font-size: 0.86rem; color: var(--ink-leise); line-height: 1.45; }

.dropdown-schmal { min-width: 230px; }

.dd-zeile {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ink-soft);
  transition: background 0.25s ease, color 0.25s ease;
}

.dd-zeile:hover { background: rgba(14, 94, 99, 0.08); color: var(--petrol); }

/* Bausteine als eigenes Chip-Raster (2 Spalten) unter den Hauptpunkten, mit
   kleinem Label — hebt die Unter-Navigation vom Fließtext ab. */
.mobilnav-neben {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid var(--linie);
}

.mobilnav-neben::before {
  content: "Bausteine";
  grid-column: 1 / -1;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-leise);
  margin-bottom: 2px;
}

.mobilnav-neben a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  padding: 12px 14px !important;
  border-radius: 12px;
  border: 1px solid var(--linie);
  background: rgba(14, 94, 99, 0.03);
  text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.mobilnav-neben a:hover,
.mobilnav-neben a:active {
  background: rgba(14, 94, 99, 0.08);
  border-color: rgba(14, 94, 99, 0.25);
  color: var(--petrol) !important;
}

/* CTA-Puls im Kopf-Button */
.cta-puls {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint-hell);
  box-shadow: 0 0 0 0 rgba(103, 205, 198, 0.7);
  animation: cta-puls 2.2s ease-out infinite;
}

@keyframes cta-puls {
  from { box-shadow: 0 0 0 0 rgba(103, 205, 198, 0.7); }
  to { box-shadow: 0 0 0 10px rgba(103, 205, 198, 0); }
}

/* Scroll-Fortschritt: Schimmer-Linie am oberen Rand */
.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-kopf) + 2);
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 6s linear infinite;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.kopf-recht {
  display: flex;
  align-items: center;
  gap: 20px;
}

.kopf-tel {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.kopf-tel:hover { color: var(--petrol); }

.btn-kopf { padding: 11px 22px; font-size: 0.95rem; }

/* CTA-Label: lang auf Desktop, kurz auf kompaktem Kopf (ab 1024px) */
.cta-kurz { display: none; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition:
    background 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.burger span {
  width: 18px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s ease;
}

.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobilnav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px clamp(20px, 4vw, 48px) 28px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linie);
}

.mobilnav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.15rem;
  padding: 10px 0;
  color: var(--ink);
}

.mobilnav .btn { justify-content: center; margin-top: 12px; color: #fff; }

.mobilnav-tel { color: var(--ink-soft) !important; font-size: 1rem !important; }

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

.hero {
  padding-top: clamp(130px, 16vh, 190px);
  overflow: clip;
}

.hero-licht {
  position: absolute;
  inset: 0;
  z-index: var(--z-orb);
  pointer-events: none;
}

/* Vertikale Lichtspalten: das Zitat an die Referenz */
.licht-panels {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(100% / 7 - 1px),
      rgba(14, 94, 99, 0.055) calc(100% / 7 - 1px) calc(100% / 7));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
  animation: orb-drift 26s ease-in-out infinite alternate;
}

.orb-a {
  width: 620px;
  height: 620px;
  top: -260px;
  right: -140px;
  background: radial-gradient(circle at 35% 35%,
    rgba(103, 205, 198, 0.4), rgba(20, 120, 124, 0.22) 45%, transparent 70%);
}

.orb-b {
  width: 480px;
  height: 480px;
  bottom: -180px;
  left: -160px;
  background: radial-gradient(circle at 60% 40%,
    rgba(14, 94, 99, 0.18), rgba(103, 205, 198, 0.12) 50%, transparent 72%);
  animation-delay: -12s;
}

.hero-grid {
  position: relative;
  z-index: var(--z-inhalt);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero-signal {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 26px;
  width: fit-content;
}

.hero h1 {
  font-size: var(--fs-hero);
  margin-bottom: 26px;
}

.hero h1 em {
  position: relative;
  white-space: nowrap;
}

/* Die Petrol-Linie unterm Kernwort: gezeichnet, schimmernd */
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 1%;
  right: 4%;
  bottom: 0.02em;
  height: 0.08em;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 5s linear infinite;
  opacity: 0.9;
}

.hero-lead {
  max-width: 34rem;
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 34px;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.hero-garantie {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.garantie-siegel {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--petrol);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--shimmer) border-box;
  background-size: auto, 200% 100%;
  border: 1.5px solid transparent;
  animation: schimmer-lauf 5s linear infinite;
}

/* Beweis-Cluster rechts: Foto + zwei schwebende Zahlenkarten */
.hero-beweis {
  position: relative;
  min-height: 460px;
}

.schwebt { will-change: transform; }

.beweis-foto {
  position: absolute;
  top: 0;
  right: 0;
  width: min(88%, 430px);
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--karte-schatten);
}

.beweis-foto img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.beweis-foto figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(6, 23, 25, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
}

.beweis-karte {
  position: absolute;
  padding: 22px 26px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--karte-schatten);
}

/* Schimmer-Hairline oben auf jeder Beweis-Karte */
.beweis-karte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 6s linear infinite;
}

.karte-a { left: 0; top: 44%; z-index: 2; }
.karte-b { right: 6%; bottom: 0; z-index: 2; }

.karte-zahl {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1;
  color: var(--petrol);
  font-variant-numeric: tabular-nums;
}

.karte-label {
  font-weight: 600;
  font-size: 0.98rem;
  margin-top: 6px;
}

.karte-quelle {
  font-size: 0.85rem;
  color: var(--ink-leise);
  margin-top: 2px;
}

/* Odometer: Ziffern-Säulen, 1em hoch */
.odo {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  line-height: 1;
}

.odo .stelle { display: block; height: 1em; }

.odo .rolle {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.odo .rolle span {
  display: block;
  height: 1em;
  line-height: 1;
}

/* ---------- Vertrauens-Leiste (Logos) ---------- */

.vertrauen {
  margin-top: clamp(48px, 7vh, 84px);
  padding-bottom: clamp(40px, 6vh, 64px);
  position: relative;
  z-index: var(--z-inhalt);
}

.vertrauen-wert {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.vertrauen-wert strong { color: var(--ink); }

.vertrauen-wert .odo-klein,
.vertrauen-plus {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--petrol);
  font-size: 1.7rem;
}

.logo-band {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-spur {
  display: flex;
  width: max-content;
  padding-block: 6px;
  animation: marquee-lauf 38s linear infinite;
}

/* Gap lebt als padding im Satz: so ist -50% eine exakt nahtlose Schleife */
.logo-satz {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding-right: clamp(40px, 5vw, 72px);
}

.logo-spur img {
  height: clamp(36px, 3.4vw, 48px);
  width: auto;
  /* Helles Band (kundenband): schwarze Logo-Silhouetten. multiply lässt den
     weißen PNG-Grund auf der hellen Bühne verschwinden. */
  filter: grayscale(1) brightness(0);
  mix-blend-mode: multiply;
  opacity: 0.68;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Helles Band, Maus drüber: alle Logos treten voll hervor. */
.logo-band:hover .logo-spur img { opacity: 1; }

/* Dunkles Band: Logos in Weiß, jedes leuchtet reihum auf */
section.vertrauen.band-dunkel {
  background: linear-gradient(180deg, #081a1c, #0b2124);
}

.band-dunkel .vertrauen-wert { color: var(--dunkel-soft); }
.band-dunkel .vertrauen-wert strong { color: #ffffff; }
.band-dunkel .vertrauen-wert .odo-klein,
.band-dunkel .vertrauen-plus { color: var(--mint-hell); }

/* Weiß-Technik: grayscale+invert macht dunkle Marken hell, screen-Blend
   lässt weiße PNG-Hintergründe auf der dunklen Bühne verschwinden */
.band-dunkel .logo-spur img {
  height: clamp(48px, 5vw, 64px);
  filter: grayscale(1) invert(1) brightness(1.4);
  mix-blend-mode: screen;
  opacity: 0.55;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Dunkles Band, Maus drüber: alle Logos leuchten gleichmäßig weiß auf.
   Kein Einzel-Logo-Hervorheben (das war der „Kasten"-Effekt), nur ein
   sanftes Aufleuchten des ganzen Bandes. */
.band-dunkel .logo-band:hover .logo-spur img {
  opacity: 0.95;
  filter: grayscale(1) invert(1) brightness(2.1);
}

/* ---------- Nähte: Bühnenwechsel mit Schimmer-Linie + Label ---------- */

.naht {
  position: relative;
  height: 0;
  z-index: 3;
}

.naht-linie {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 7s linear infinite;
  opacity: 0.85;
}

/* Naht-Labels abgeschafft (Feedback 14.07.): die Schimmer-Linie allein
   trägt den Bühnenwechsel, Headlines tragen die Bedeutung. */

/* ---------- Referenzen (getönte Bühne) ---------- */

.stimmen {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(103, 205, 198, 0.14), transparent 65%),
    var(--bg-tint);
  padding-block: clamp(56px, 8vh, 100px);
}

.stimmen-kopf {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: clamp(36px, 5vh, 60px);
}

.vid-schild {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--karte-schatten);
  background: #0d282b;
  text-decoration: none;
}

.vid-schild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  opacity: 0.92;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.vid-schild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(6, 23, 25, 0.08) 45%, rgba(6, 23, 25, 0.58));
  pointer-events: none;
}

.vid-schild:hover img { transform: scale(1.045); opacity: 1; }

.vid-spiel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 6s linear infinite;
  box-shadow: 0 14px 34px rgba(14, 94, 99, 0.4);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.vid-schild:hover .vid-spiel { transform: translate(-50%, -50%) scale(1.08); }

.vid-titel {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 1;
}

/* Play-Button folgt dem Zeiger (JS setzt .spiel-folgt nur bei Maus-Geräten):
   der Button IST der Cursor, deshalb nativer Zeiger aus */
.spiel-folgt { cursor: none; }

/* Kein left/top-Nachziehen: der Button klebt direkt am Zeiger (rAF im JS) */
.spiel-folgt .vid-spiel,
.spiel-folgt .vid-mini-spiel {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, top;
}

/* ---------- Fallstudien-Schaufenster (gemeinsamer Baustein) ----------
   Genutzt von der Startseite (helle Bühne, Klick-Wechsel) und referenzen.html
   (dunkle Bühne, zusätzlich Scroll-Wechsel). Neuer Fall = ein weiteres
   article.sf-fall im Markup, Streifen/Zähler/Balken bauen sich selbst. */

.sf-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

/* Alle Fälle liegen übereinander in derselben Grid-Zelle: die Bühne ist
   immer so hoch wie der höchste Fall, nichts springt beim Wechsel */
.sf-faelle { display: grid; }

/* Alle Fälle liegen übereinander; der Wechsel ist ein weicher Crossfade
   (opacity + leichter Versatz), nicht ein harter Tausch. visibility wird beim
   Ausblenden erst nach dem Fade hidden (transition-delay), damit die
   versteckten Fälle aus der Tab-Reihenfolge fallen. */
.sf-fall {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: stretch;
  visibility: hidden;
  opacity: 0;
  transform: translateX(28px) scale(0.992);
  pointer-events: none;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.55s;
}

.sf-fall.ist-aktiv {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.sf-medien { display: flex; }

.sf-medien .vid-schild,
.sf-foto {
  flex: 1;
  min-height: 0;
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #0d282b;
}

.sf-medien .vid-schild img,
.sf-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-medien .video-buehne { flex: 1; aspect-ratio: auto; border-radius: 22px; }

.sf-karte {
  background: #ffffff;
  border-radius: 22px;
  padding: clamp(26px, 3.2vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.sf-karte h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--ink);
  line-height: 1.1;
}

.sf-branche {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--petrol);
}

.sf-text {
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.65;
}

.sf-zitat { margin: 0; }

.sf-zitat p {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--ink);
}

.sf-zitat-gross p { font-size: clamp(1.3rem, 2vw, 1.7rem); }

.sf-zitat footer {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sf-zitat footer strong { font-size: 0.94rem; color: var(--ink); }
.sf-zitat footer span { font-size: 0.84rem; color: var(--ink-leise); }

.sf-zahlen {
  margin-top: auto;
  border-top: 1px solid rgba(11, 27, 29, 0.1);
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
}

.sf-vorher,
.sf-nachher {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-vorher { color: var(--ink-leise); font-size: 0.95rem; }
.sf-nachher { color: var(--petrol); font-weight: 600; font-size: 1rem; }

.sf-nachher strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  line-height: 1;
}

.sf-vorher small,
.sf-nachher small {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-leise);
}

.sf-pfeil { color: var(--petrol); flex: none; }

/* Die übrigen Fälle als vertikale Streifen */
.sf-streifen { display: flex; gap: 10px; }

.sf-streif {
  position: relative;
  width: clamp(58px, 6vw, 84px);
  border: 0;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #0d282b;
}

.sf-streif img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(0.75);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-streif::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 23, 25, 0) 40%, rgba(6, 23, 25, 0.75));
}

.sf-streif:hover img { opacity: 0.9; filter: grayscale(0); transform: scale(1.04); }

.sf-streif span {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
  white-space: nowrap;
  max-height: calc(100% - 24px);
  overflow: hidden;
  z-index: 1;
}

.sf-fuss {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(24px, 4vh, 40px);
}

.sf-zaehler {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--dunkel-soft);
  min-width: 44px;
}

.sf-balken {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.sf-balken span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--mint);
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sf-weiter {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linie-dunkel);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.sf-weiter:hover {
  border-color: var(--mint);
  background: rgba(103, 205, 198, 0.12);
  color: var(--mint-hell);
}

@media (max-width: 1024px) {
  .sf-buehne { grid-template-columns: minmax(0, 1fr); }

  .sf-fall { grid-template-columns: minmax(0, 1fr); }

  .sf-medien .vid-schild,
  .sf-foto { aspect-ratio: 16 / 9; flex: none; width: 100%; }

  .sf-medien .vid-schild img,
  .sf-foto img { height: 100%; }

  .sf-medien .video-buehne { aspect-ratio: 16 / 9; flex: none; width: 100%; }

  /* Streifen rutschen unter die Bühne und werden liegende Chips */
  .sf-streifen { flex-direction: column; gap: 8px; }

  .sf-streif {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
  }

  .sf-streif span {
    position: static;
    transform: none;
    writing-mode: horizontal-tb;
    padding-left: 14px;
  }
}

/* Kennzahl-Panel: Fälle ohne Foto (z. B. uniVersa) zeigen die Zahl selbst
   als Bühne — ehrlicher als ein Foto, das nicht zum Kunden gehört */
.sf-panel {
  flex: 1;
  min-height: 0;
  border-radius: 22px;
  padding: clamp(26px, 3.2vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(103, 205, 198, 0.2), transparent 62%),
    linear-gradient(160deg, var(--petrol-tief), var(--bg-deep));
}

.sf-panel-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dunkel-soft);
}

.sf-panel-wert {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--mint-hell);
}

.sf-panel-sub {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  color: var(--dunkel-ink);
}

/* Streifen ohne Foto: Petrol-Fläche statt Bild */
.sf-streif-panel {
  background:
    radial-gradient(140% 80% at 30% 0%, rgba(103, 205, 198, 0.24), transparent 65%),
    linear-gradient(170deg, var(--petrol-tief), var(--bg-deep));
}

/* Helle Bühne (Startseite): Zähler, Balken und Pfeil auf Tinte statt Weiß.
   Clip wie auf der dunklen Bühne (.oton), sonst ragen die versteckten,
   per translateX versetzten Fälle mobil über den Viewport hinaus */
.stimmen:has(> .wrap[data-schaufenster]) { overflow: clip; }

.stimmen .sf-karte {
  border: 1px solid var(--linie);
  box-shadow: var(--karte-schatten);
}

.stimmen .sf-zaehler { color: var(--ink-leise); }

.stimmen .sf-balken { background: rgba(11, 27, 29, 0.12); }

.stimmen .sf-weiter {
  border-color: var(--linie);
  background: #ffffff;
  color: var(--ink);
}

.stimmen .sf-weiter:hover {
  border-color: var(--petrol);
  background: rgba(14, 94, 99, 0.08);
  color: var(--petrol);
}

.stimmen-mehr { margin-top: clamp(24px, 4vh, 40px); }

/* ---------- Das Problem (dunkler Akt) ---------- */

.problem {
  position: relative;
  background: var(--bg-deep);
  color: var(--dunkel-ink);
  padding-block: clamp(60px, 8.5vh, 108px);
  overflow: clip;
}

.problem-aurora {
  position: absolute;
  inset: -10% -20%;
  z-index: var(--z-orb);
  background:
    radial-gradient(760px 420px at 15% 8%, rgba(20, 120, 124, 0.34), transparent 65%),
    radial-gradient(920px 520px at 90% 80%, rgba(103, 205, 198, 0.14), transparent 60%),
    radial-gradient(600px 380px at 70% 20%, rgba(70, 184, 177, 0.12), transparent 60%);
  will-change: transform;
  animation: orb-drift 30s ease-in-out infinite alternate;
}

.problem .wrap { position: relative; z-index: var(--z-inhalt); }

/* Cursor-Spotlight über die ganze Sektionsfläche (JS setzt --mx/--my via
   data-spot) — der weiche Petrol-Schein der Karten, nur groß und sektionsweit.
   Liegt über Aurora/Textur, unter dem Inhalt. */
.problem::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(600px 600px at var(--mx, 50%) var(--my, 50%),
    rgba(103, 205, 198, 0.1), transparent 68%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.problem:hover::after { opacity: 1; }

/* Feine Kachel-Textur auf den dunklen Bühnen (Problem-Akt) */
.problem::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 110px);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.problem-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(48px, 7vh, 84px);
}

.problem-kopf h2 { font-size: var(--fs-h2); color: #ffffff; }

.problem-kopf h2 em { color: var(--mint-hell); }

.problem-kopf p {
  color: var(--dunkel-soft);
  font-size: 1.08rem;
  max-width: 42ch;
}

.gegner {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 64px);
}

.gegner-fall {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(30px, 3.4vw, 48px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--linie-dunkel);
  transition: border-color 0.35s ease, background 0.35s ease;
}

.gegner-fall:hover { border-color: rgba(103, 205, 198, 0.35); }

.gegner-fall.ist-nachher { border-color: rgba(103, 205, 198, 0.5); }

/* Spotlight folgt dem Zeiger (dezent), wie bei den Motor-Karten */
.gegner-fall::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(300px 300px at var(--mx, 50%) var(--my, 50%),
    rgba(103, 205, 198, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.gegner-fall:hover::after { opacity: 1; }

.fall-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.fall-kopf h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  color: #ffffff;
  line-height: 1.15;
}

/* Ein Text zur Zeit: Vorher und Nachher liegen übereinander, der Kipper
   tauscht sie aus. Die Zelle ist so hoch wie der längere der beiden. */
.fall-koerper { display: grid; }

.fall-text {
  grid-area: 1 / 1;
  margin: 0;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fall-text-vorher {
  color: var(--dunkel-soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

.fall-text-nachher {
  color: var(--mint-hell);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  align-self: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.gegner-fall.ist-nachher .fall-text-vorher {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.gegner-fall.ist-nachher .fall-text-nachher {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.gegner-beleg { margin-top: auto; }

.gegner-beleg {
  margin-top: 12px;
  font-size: 0.85rem !important;
  color: rgba(175, 207, 204, 0.75) !important;
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 12px;
}

.gegner-beleg strong {
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--mint-hell);
}

.problem-fazit {
  margin-top: clamp(48px, 7vh, 84px);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.25;
  text-align: center;
  color: var(--dunkel-soft);
}

.problem-fazit em {
  font-style: normal;
  color: var(--mint-hell);
}

/* ---------- Die Lösung ---------- */

.system {
  background: var(--bg);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.system-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}

.system-kopf h2 { font-size: var(--fs-h2); }

.system-kopf p {
  color: var(--ink-soft);
  max-width: 52ch;
}

.system-motoren {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}

.motor {
  position: relative;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 24px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(150deg, rgba(14, 94, 99, 0.35), rgba(103, 205, 198, 0.5), rgba(14, 94, 99, 0.2)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 6px rgba(11, 27, 29, 0.04), 0 18px 48px rgba(14, 94, 99, 0.08);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.motor:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(11, 27, 29, 0.05), 0 30px 70px rgba(14, 94, 99, 0.16);
}

.motor h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 14px;
}

.motor p { color: var(--ink-soft); max-width: 52ch; }

.motor-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--petrol);
  font-weight: 600;
  text-decoration: none;
}

.motor-link svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.motor-link:hover svg { transform: translateX(5px); }

/* ---------- Garantie (Voll-Petrol-Höhepunkt) ---------- */

.garantie {
  background:
    radial-gradient(1100px 500px at 20% 0%, rgba(103, 205, 198, 0.25), transparent 60%),
    linear-gradient(165deg, var(--petrol-hell) 0%, var(--petrol) 45%, var(--petrol-tief) 100%);
  color: #ffffff;
  padding-block: clamp(68px, 9.5vh, 120px);
  overflow: clip;
  text-align: center;
}

.garantie-schimmer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 320px at 78% 82%, rgba(103, 205, 198, 0.22), transparent 65%);
  animation: orb-drift 24s ease-in-out infinite alternate;
}

.garantie-inhalt {
  position: relative;
  z-index: var(--z-inhalt);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.garantie-monument {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-mega);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 0 80px rgba(103, 205, 198, 0.55);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

.garantie-monument span {
  font-size: 0.32em;
  font-weight: 500;
  color: var(--mint-hell);
  letter-spacing: 0;
  vertical-align: 0.32em;
  padding-inline: 0.15em;
}

.garantie h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  margin-bottom: 24px;
}

.garantie-text {
  max-width: 62ch;
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.94);
}

.garantie-text strong { color: #ffffff; }

.garantie-einordnung {
  margin-top: 26px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #cfe9e7;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 10px 22px;
}

/* ---------- Rechnung (getönte Bühne) ---------- */

.rechnung {
  background: var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.rechnung h2 {
  font-size: var(--fs-h2);
  margin-bottom: clamp(36px, 5vh, 60px);
  max-width: 20ch;
}

.rechnung-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}

.posten {
  border-radius: 24px;
  padding: clamp(28px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
}

.posten-fremd {
  background: #ffffff;
  border: 1px solid var(--linie);
  color: var(--ink);
}

.posten-zeus {
  background: linear-gradient(160deg, var(--petrol-hell), var(--petrol) 55%, var(--petrol-tief));
  color: #ffffff;
  box-shadow: 0 24px 64px rgba(14, 94, 99, 0.35);
  position: relative;
  overflow: hidden;
}

.posten-zeus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 6s linear infinite;
}

.posten-art {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.posten-fremd .posten-art { color: var(--ink-leise); }
.posten-zeus .posten-art { color: var(--mint-hell); }

.posten-summe {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  margin-bottom: 22px;
}

.posten-summe span {
  display: block;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 1rem;
  margin-top: 8px;
}

.posten-fremd .posten-summe span { color: var(--ink-soft); }
.posten-zeus .posten-summe span { color: rgba(255, 255, 255, 0.85); }

.posten ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.posten li {
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  line-height: 1.6;
}

.posten-fremd li { color: var(--ink-soft); }

.posten-zeus li {
  border-top-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}

.rechnung-abbinder {
  margin-top: clamp(28px, 4vh, 44px);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- Ablauf ---------- */

.ablauf {
  background: var(--bg);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.ablauf h2 {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-bottom: clamp(44px, 6vh, 72px);
}

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  position: relative;
}

/* Verbindungslinie hinter den Schritten; zeichnet sich per Scroll (--zieh) */
.schritte::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 2px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 8s linear infinite;
  opacity: 0.5;
  transform: scaleX(var(--zieh, 1));
  transform-origin: left;
}

.schritt { position: relative; }

.schritt-nr {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #ffffff;
  border: 1.5px solid var(--petrol);
  color: var(--petrol);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: 0 10px 26px rgba(14, 94, 99, 0.16);
  margin-bottom: 20px;
}

.schritt h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.schritt p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ---------- Für wen nicht (eingelassene dunkle Karte) ---------- */

.antipitch {
  background: var(--bg);
  padding-block: clamp(20px, 4vh, 48px) clamp(60px, 8.5vh, 108px);
}

.anti-karte {
  background:
    radial-gradient(720px 380px at 90% 0%, rgba(20, 120, 124, 0.3), transparent 60%),
    var(--bg-deep);
  color: var(--dunkel-ink);
  border-radius: 28px;
  padding: clamp(32px, 4.5vw, 64px);
  box-shadow: 0 32px 90px rgba(6, 23, 25, 0.35);
}

.anti-karte header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 28px;
  margin-bottom: clamp(28px, 4vh, 44px);
}

.anti-karte h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  color: #ffffff;
}

.anti-karte h2 em {
  color: var(--mint-hell);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: rgba(103, 205, 198, 0.75);
}

.anti-karte header p { color: var(--dunkel-soft); }

.anti-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.anti-liste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 32px;
  align-items: center;
  padding-block: 22px;
  border-top: 1px solid var(--linie-dunkel);
}

.anti-liste p {
  color: var(--dunkel-soft);
  line-height: 1.6;
  max-width: 68ch;
}

.anti-chip {
  justify-self: end;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint-hell);
  border: 1px solid rgba(103, 205, 198, 0.4);
  border-radius: 999px;
  padding: 9px 18px;
}

/* ---------- Aus einem Haus ---------- */

.haus {
  background:
    radial-gradient(800px 400px at 10% 110%, rgba(103, 205, 198, 0.14), transparent 60%),
    var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.haus-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(28px, 5vh, 48px);
}

/* Volles Teamfoto (16:9, alle vier) mit sanftem Zoom beim Überfahren */
.haus-foto {
  margin: 0;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--karte-schatten);
}

.haus-foto img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.haus-foto:hover img { transform: scale(1.03); }

.haus-foto figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(6, 23, 25, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 500;
}

.haus-kopf h2 {
  font-size: var(--fs-h2);
  max-width: 16ch;
}

.haus-text p {
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 26px;
}

/* ---------- FAQ ---------- */

.faq {
  background: var(--bg);
  padding-block: clamp(60px, 8.5vh, 108px);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.faq-links { position: sticky; top: 120px; }

.faq-links h2 {
  font-size: var(--fs-h2);
  margin-bottom: 20px;
}

.faq-links > p {
  color: var(--ink-soft);
  max-width: 38ch;
}

.faq-rest {
  margin-top: 18px !important;
  font-weight: 500;
  color: var(--ink) !important;
}

.faq-links .btn-leise { margin-top: 10px; }

.faq-liste {
  display: flex;
  flex-direction: column;
}

.frage {
  border-top: 1px solid var(--linie);
}

.frage:last-child { border-bottom: 1px solid var(--linie); }

.frage summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

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

.frage summary::after {
  content: '';
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--linie);
  background:
    linear-gradient(var(--petrol), var(--petrol)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) center / 1.5px 12px no-repeat;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.frage[open] summary { color: var(--petrol); }

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

.antwort {
  overflow: hidden;
}

.antwort p {
  padding: 0 4px 26px;
  color: var(--ink-soft);
  max-width: 62ch;
  line-height: 1.7;
}

/* ---------- Finale + Fuß (dunkler Schlussakt) ---------- */

.finale {
  background: var(--bg-deep);
  color: var(--dunkel-ink);
  padding-top: clamp(72px, 10vh, 128px);
  overflow: clip;
}

.finale-aurora {
  position: absolute;
  inset: -10% -20% auto;
  height: 80%;
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(20, 120, 124, 0.4), transparent 65%),
    radial-gradient(700px 380px at 12% 40%, rgba(103, 205, 198, 0.16), transparent 60%),
    radial-gradient(720px 400px at 88% 30%, rgba(70, 184, 177, 0.14), transparent 60%);
  will-change: transform;
  animation: orb-drift 28s ease-in-out infinite alternate;
}

.finale-inhalt {
  position: relative;
  z-index: var(--z-inhalt);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.finale h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  color: #ffffff;
  max-width: 18ch;
  margin-bottom: 24px;
}

.finale h2 em { color: var(--mint-hell); }

.finale-lead {
  max-width: 52ch;
  color: var(--dunkel-soft);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 38px;
}

.finale-ctas {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

/* Auf dunkler Bühne: heller Knopf mit dunkler Schrift (Kontrast-Regel) */
.btn-finale {
  background: linear-gradient(160deg, var(--mint-hell), var(--mint) 60%, #35a49d);
  color: #0b1b1d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 40px rgba(70, 184, 177, 0.35);
}

.btn-leise-dunkel {
  color: var(--mint-hell);
  background: linear-gradient(var(--mint-hell), var(--mint-hell)) left bottom / 0% 2px no-repeat;
}

/* Die ganze background-Kurzschreibweise wiederholen, nicht nur background-size:
   .btn-leise:hover setzt `background` als Shorthand und ist spezifischer (0,2,0)
   als .btn-leise-dunkel (0,1,0). Es warf damit im Hover Bild und Position auf
   initial zurück — die Linie fuhr quer durch den Text nach oben, statt unten
   aufzuziehen. */
.btn-leise-dunkel:hover {
  background: linear-gradient(var(--mint-hell), var(--mint-hell)) left bottom / 100% 2px no-repeat;
}

.finale-mikro {
  font-size: 0.9rem;
  color: rgba(175, 207, 204, 0.8);
  margin-bottom: clamp(48px, 7vh, 80px);
}

.finale-beweis {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 64px);
  justify-content: center;
  align-items: stretch;
  padding-bottom: clamp(64px, 9vh, 110px);
}

.finale-siegel,
.finale-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.finale-siegel strong,
.finale-stat strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--mint-hell);
  line-height: 1;
}

.finale-siegel span,
.finale-stat span {
  font-size: 0.88rem;
  color: var(--dunkel-soft);
  max-width: 26ch;
  line-height: 1.5;
}

/* Fuß */

.fuss {
  border-top: 1px solid var(--linie-dunkel);
  /* Solider dunkler Grund statt halbtransparentem Overlay: auf der Startseite
     liegt der Footer in der dunklen Finale-Sektion, auf den Rechtsseiten aber
     auf weißem Body — dort machte das Overlay den Footer hellgrau und die
     hellen Links unlesbar. Solider --bg-deep trägt die hellen Texte überall. */
  background: var(--bg-deep);
}

.fuss-grid {
  display: grid;
  /* Marke + vier Link-Spalten (Motoren, Bausteine, Unternehmen, Kontakt) in
     einer Reihe — sonst bricht die fünfte Spalte um und reißt Leerraum auf */
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(48px, 7vh, 72px);
}

.fuss-marke img { width: 128px; height: auto; margin-bottom: 16px; }

.fuss-marke p {
  color: var(--dunkel-soft);
  font-weight: 500;
}

.fuss-spalte {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fuss-spalte > p {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mint-hell);
  margin-bottom: 6px;
}

.fuss-spalte a,
.fuss-spalte span {
  color: var(--dunkel-soft);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.6;
}

.fuss-spalte a:hover { color: #ffffff; }

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  justify-content: space-between;
  padding-block: 22px;
  border-top: 1px solid var(--linie-dunkel);
}

.fuss-zeile p,
.fuss-recht a {
  color: rgba(175, 207, 204, 0.65);
  font-size: 0.88rem;
  text-decoration: none;
}

.fuss-recht { display: flex; gap: 24px; }

.fuss-recht a:hover { color: #ffffff; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .kopf-nav, .kopf-tel { display: none; }
  .burger { display: flex; }
  .mobilnav.ist-offen { display: flex; }

  /* Conversion-CTA bleibt sichtbar als kompakter Chip neben dem Burger,
     statt im Hamburger vergraben zu sein (F1/A4). Kurz-Label. */
  .kopf-recht { gap: 12px; }
  .btn-kopf { padding: 9px 15px; font-size: 0.88rem; }
  .btn-kopf .cta-voll { display: none; }
  .btn-kopf .cta-kurz { display: inline; }

  /* Footer auf Tablet dreispaltig: fünf Spalten würden die langen Links quetschen */
  .fuss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }

  .hero-beweis {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }

  .beweis-foto {
    position: relative;
    inset: auto;
    width: 100%;
    grid-column: 1 / -1;
  }

  .beweis-karte { position: relative; inset: auto; }

  .system-kopf, .system-motoren, .haus-kopf, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-links { position: static; }

  .problem-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte::before { display: none; }
}

@media (max-width: 720px) {
  :root { --fs-body: 1rem; }

  /* Sehr schmale Geräte: nowrap-Kernworte dürfen umbrechen, Held schrumpft */
  .hero h1 em { white-space: normal; }

  /* Handy-Layouts gehören HIERHER (Check-Loop Welle 20/23): die Regeln lagen
     in einem ≤380px-Block und griffen auf echten Geräten (390/414/430) nie —
     zerquetschte Zwei-Spalten-Karten, überlappender Footer, Chip neben
     Ein-Wort-Zeilen. iPhones sind 390px+, der Handy-Breakpoint ist 720. */
  .rechnung-grid, .gegner { grid-template-columns: minmax(0, 1fr); }

  /* Stimmen mobil: Zitat über Video, die zwei weiteren Videos untereinander */

  .hero-ctas .btn-gross { width: 100%; justify-content: center; }

  /* Schritt-Sektionen (Ablauf, Reise, 01–04): statt der generischen
     Boxen-Aufzählung mobil ein Zeitstrahl — Nummer links auf einer
     Lichtlinie, Inhalt rechts. Gleiche Sprache wie .fluss/.tw-stufe. */
  .schritte {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    position: relative;
  }

  .schritte::before {
    content: '';
    display: block;
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 26px;
    width: 2px;
    background: linear-gradient(180deg, var(--petrol), var(--mint-hell) 55%, var(--petrol));
    opacity: 0.3;
  }

  .schritt {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 4px;
    padding-block: 18px;
  }

  .schritt-nr { grid-row: 1 / span 2; align-self: start; }

  .schritt h3 { align-self: center; margin: 0; }

  .schritt p { grid-column: 2; margin: 0; }

  /* Anti-Pitch: Chip als Etikett ÜBER dem Text statt daneben (der
     nowrap-Chip quetschte den Absatz auf Ein-Wort-Zeilen) */
  .anti-liste li { grid-template-columns: minmax(0, 1fr); }
  .anti-chip { justify-self: start; order: -1; }

  /* Footer mobil: Marke voll oben, die vier Link-Spalten als 2x2-Raster
     (einspaltig war endlos lang). Lange Komposita (Mitarbeitergewinnung)
     werden per Silbentrennung umbrochen, damit sie nicht in die Nachbarspalte
     ragen. */
  .fuss-grid { grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 26px; }
  .fuss-marke { grid-column: 1 / -1; }
  .fuss-spalte { min-width: 0; }
  .fuss-spalte a,
  .fuss-spalte span {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .naht-label { left: 20px; font-size: 0.8rem; padding: 7px 16px; }

  .finale-beweis { gap: 28px; }

  /* Performance: schwere Weichzeichner-Deko bleibt Desktop-Sache */
  .orb { display: none; }
  .problem-aurora, .finale-aurora, .garantie-schimmer { animation: none; }
}

@media (max-width: 380px) {
  :root { --fs-hero: clamp(2.2rem, 11vw, 2.9rem); }

  /* Lange deutsche Komposita (Medienproduktion, Mitarbeitergewinnung)
     dürfen auf Schmalst-Geräten sauber trennen statt die Seite zu weiten */
  h1, h2, h3 {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .hero { padding-top: 108px; }
}

/* ---------- Ruhe: reduced motion & ?static-Modus ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* ============================================================
   WELLE 2: Maschine, Karten-Deck, Hover-Verstärkung
   ============================================================ */

/* ---------- Die Maschine (Signature-SVG in der Lösung) ---------- */

.maschine {
  margin-block: clamp(32px, 6vh, 56px);
}

.maschine svg {
  display: block;
  width: 100%;
  height: auto;
}

.m-knoten rect {
  fill: #ffffff;
  stroke: rgba(14, 94, 99, 0.22);
  stroke-width: 1.5;
}

.m-knoten text {
  font-family: var(--f-body);
  font-size: 26px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}

.m-pfade path {
  fill: none;
  stroke: url(#strom);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 12;
  animation: m-fluss 1.4s linear infinite;
}

@keyframes m-fluss {
  to { stroke-dashoffset: -38; }
}

.m-kern rect {
  fill: var(--petrol);
  filter: drop-shadow(0 18px 40px rgba(14, 94, 99, 0.4));
}

.m-kern .m-z {
  font-family: var(--f-display);
  font-size: 46px;
  font-weight: 600;
  fill: #ffffff;
  text-anchor: middle;
}

.m-puls {
  fill: rgba(103, 205, 198, 0.3);
  transform-box: fill-box;
  transform-origin: center;
  animation: m-puls 2.6s ease-in-out infinite;
}

@keyframes m-puls {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.45); opacity: 0.12; }
}

.m-rechts .m-wert {
  font-family: var(--f-display);
  font-size: 46px;
  font-weight: 600;
  fill: var(--petrol);
  text-anchor: middle;
}

.m-rechts .m-einheit {
  font-family: var(--f-body);
  font-size: 22px;
  font-weight: 500;
  fill: var(--ink-soft);
  text-anchor: middle;
}

/* ---------- Vorher/Nachher: jede Karte kippt einzeln ---------- */

.fall-schalter {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
  padding: 4px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Klarere Affordance, dass der Schalter interaktiv ist */
.fall-schalter:hover .schalter {
  border-color: var(--mint-hell);
  background: rgba(255, 255, 255, 0.18);
}

.fall-schalter:hover .schalter-knopf { box-shadow: 0 4px 14px rgba(103, 205, 198, 0.5); }

.fs-wort {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--dunkel-soft);
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.fall-schalter[aria-checked="false"] .fs-vorher { color: #ffffff; }
.fall-schalter[aria-checked="true"] .fs-nachher { color: var(--mint-hell); }

@media (max-width: 720px) {
  .fall-kopf { flex-direction: column; }
  .fall-schalter { align-self: flex-end; }
}

.schalter {
  position: relative;
  flex: none;
  width: 74px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--linie-dunkel);
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.schalter-mini { width: 46px; height: 26px; display: inline-block; }

.schalter-mini .schalter-knopf { width: 18px; height: 18px; }

.fall-schalter[aria-checked="true"] .schalter {
  background: var(--mint);
  border-color: var(--mint-hell);
}

.schalter-knopf {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.fall-schalter[aria-checked="true"] .schalter-knopf { transform: translateX(36px); }

.fall-schalter[aria-checked="true"] .schalter-mini .schalter-knopf { transform: translateX(20px); }

/* Nachher-Zustand: Probleme treten zurück, die Zeus-Antworten leuchten */
/* ---------- Überblendung: Problem-Dunkel läuft ins Lösungs-Weiß ---------- */

.blend {
  pointer-events: none;
}

.blend-dunkel-hell {
  height: clamp(200px, 34vh, 420px);
  margin-top: -1px;
  background:
    radial-gradient(60% 90% at 50% 62%, rgba(103, 205, 198, 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg-deep) 0%, #14484d 42%, #9fc9c6 68%, #eef6f5 86%, var(--bg) 100%);
}

/* Spiegelbild vor dem Finale: das Hell läuft zurück ins Dunkel.
   Liegt als Overlay ÜBER dem Finale-Anfang und fadet auf transparent —
   so scheint die echte Finale-Bühne (samt Aurora) durch und es gibt
   keinen sichtbaren Rand zwischen Blend-Ende und Sektionsfarbe. */
.blend-hell-dunkel {
  position: relative;
  z-index: 3;
  height: clamp(220px, 34vh, 400px);
  margin-bottom: calc(-1 * clamp(220px, 34vh, 400px));
  background: linear-gradient(180deg,
    var(--bg) 0%,
    #eef6f5 16%,
    rgba(159, 201, 198, 0.85) 38%,
    rgba(20, 72, 77, 0.35) 64%,
    rgba(6, 23, 25, 0) 92%);
}

/* Das Finale rückt unter dem Overlay entsprechend tiefer ein */
.blend-hell-dunkel + .finale {
  padding-top: clamp(240px, 38vh, 440px);
}

/* ---------- Schwebende Partikel im Kino-Hero (Canvas, main.js) ---------- */

/* Liegt über Video und Scrim, unter dem Hero-Inhalt (der wrap hat z-inhalt) */
.kino-staub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Grid-Glimmen um den Cursor (Canvas, main.js) ---------- */

/* Fixes Canvas über den Sektionsflächen, unter dem Header. Zellen spawnen
   nur auf freien Flächen (JS prüft), daher verdecken sie nie Inhalt.
   CSS-Größe PFLICHT: ohne sie rendert das Canvas in Gerätepixeln (Retina)
   und die Zellen sitzen neben der Maus. */
#grid-fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* ---------- Schritt-Nummern zünden beim Scrollen (main.js setzt die Klasse) ---------- */

.nr-leuchtet {
  animation: nr-glanz 1.3s ease-out both;
}

@keyframes nr-glanz {
  0% { box-shadow: 0 0 0 0 rgba(103, 205, 198, 0); }
  30% {
    color: #ffffff;
    border-color: var(--mint);
    background-color: rgba(103, 205, 198, 0.22);
    box-shadow: 0 0 0 5px rgba(103, 205, 198, 0.12), 0 0 26px rgba(103, 205, 198, 0.55);
  }
  100% { box-shadow: 0 0 0 0 rgba(103, 205, 198, 0); }
}

/* ---------- Hover-Verstärkung quer durchs System ---------- */

/* Motoren: Spotlight folgt dem Zeiger */
.motor { overflow: hidden; }

.motor::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px 320px at var(--mx, 50%) var(--my, 50%),
    rgba(103, 205, 198, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.motor:hover::after { opacity: 1; }

/* Stimmen: Anheben + Petrol-Kante */
.stimme,
.kronzeuge {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stimme:hover,
.kronzeuge:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(11, 27, 29, 0.05), 0 26px 60px rgba(14, 94, 99, 0.16);
}

.kronzeuge-bild { overflow: hidden; }

.kronzeuge-bild img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

.kronzeuge:hover .kronzeuge-bild img { transform: scale(1.04); }

/* Beweis-Foto im Hero: Zoom + Schimmer-Sweep */
.beweis-foto img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.beweis-foto:hover img { transform: scale(1.04); }

.beweis-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}

.beweis-foto:hover::after { animation: sheen-zug 1s cubic-bezier(0.22, 1, 0.36, 1); }

/* Ablauf: Nummer füllt sich, Schritt hebt an */
.schritt { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.schritt:hover { transform: translateY(-4px); }

.schritt-nr { transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }

.schritt:hover .schritt-nr {
  background: var(--petrol);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(14, 94, 99, 0.35);
}

/* FAQ: Zeilen-Hover */
.frage summary { padding-inline: 14px; border-radius: 14px; transition: color 0.3s ease, background 0.3s ease; }
.frage summary:hover { background: rgba(14, 94, 99, 0.06); color: var(--petrol); }
.antwort p { padding-inline: 14px; }

/* Anti-Pitch-Chips: füllen sich */
.anti-chip { transition: background 0.3s ease, color 0.3s ease; }
.anti-liste li:hover .anti-chip { background: rgba(103, 205, 198, 0.16); color: #ffffff; }

/* Rechnung: Zeus-Slab reagiert */
.posten-zeus { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.posten-zeus:hover { transform: translateY(-4px); box-shadow: 0 30px 80px rgba(14, 94, 99, 0.45); }

/* Fuß-Links: rutschen an */
.fuss-spalte a { transition: color 0.25s ease, transform 0.25s ease; }
.fuss-spalte a:hover { transform: translateX(4px); }

/* ---------- Welle-2 Responsive ---------- */

@media (max-width: 1024px) {
  .kopf { top: 10px; }
  .kopf-zeile {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-color: rgba(14, 94, 99, 0.14);
    box-shadow: 0 12px 36px rgba(11, 27, 29, 0.1);
    padding: 8px 10px 8px 20px;
  }
  .mobilnav { border-radius: 22px; margin-top: 8px; border: 1px solid var(--linie); }

  /* Beim Scrollen teilt sich der Kopf in zwei Chips: Marke links, Menü rechts */
  .kopf.ist-fest .kopf-zeile {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
    padding: 0;
    justify-content: space-between;
  }

  .kopf.ist-fest .marke {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(14, 94, 99, 0.14);
    border-radius: 999px;
    padding: 9px 18px;
    box-shadow: 0 10px 30px rgba(11, 27, 29, 0.12);
  }

  .kopf.ist-fest .burger {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: rgba(14, 94, 99, 0.14);
    box-shadow: 0 10px 30px rgba(11, 27, 29, 0.12);
  }
}

@media (max-width: 720px) {
  .m-knoten text { font-size: 32px; }
  .m-rechts .m-einheit { font-size: 26px; }
}

/* ---------- Kino-Hero (nur Startseite): Cinemagraph als Bühne ---------- */

.kino {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(110px, 13vh, 150px);
  padding-bottom: clamp(96px, 12vh, 150px);
}

.kino-medien {
  position: absolute;
  inset: 0;
  z-index: var(--z-orb);
  overflow: hidden;
}

.kino-video,
.kino-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  transform: scale(1.08);
  animation: kino-zoom 16s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes kino-zoom {
  to { transform: scale(1); }
}

/* Licht-Scrim: links Weiß für die Typo, unten Übergang in die weiße Bühne,
   oben rechts ein Hauch Petrol-Licht */
.kino-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(20, 120, 124, 0.2), transparent 65%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.78) 30%, rgba(255, 255, 255, 0.25) 58%, rgba(255, 255, 255, 0.04) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 18%, transparent 70%, #ffffff 100%);
}

.kino-inhalt {
  position: relative;
  z-index: var(--z-inhalt);
  width: 100%;
}

.kino h1 { font-size: clamp(3.2rem, 6.8vw, 6rem); }

.kino .hero-lead { max-width: 30rem; }

/* Textboxen nur so breit wie ihr Inhalt: Blockelemente spannen sonst über
   die volle Bühne und dimmen den Kästchen-Cursor auch über dem Motiv
   (der „Rücken der Person" lag im leeren Teil der H1-Box). */
.kino h1,
.kino .hero-lead,
.kino .hero-garantie { width: fit-content; }

/* Über dem Video ist die Textzone per weißem Scrim hell, aber die schwächste
   Stelle blendet nur 0.78 Weiß über das Motiv. Petrol-Tief statt Petrol hält
   den Kontrast auch dort über 4.5:1 (rechnerisch 6.3:1 im Worst Case). */
.kino .hero-signal { color: var(--petrol-tief); }

/* Beweis-Karten: dunkles Glas über der Skyline, Mint-Zahlen */
.kino-karten {
  position: absolute;
  right: clamp(16px, 5vw, 72px);
  bottom: clamp(110px, 16vh, 180px);
  z-index: var(--z-inhalt);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

/* Helles, edles Glas wie die Beweis-Karten auf den Unterseiten (statt dunklem
   Block): Petrol-Zahl links, Label + Quelle rechts, feine Haarlinie. Liegt auf
   dem Hero-Foto, das helle Glas + Petrol bleibt auf der Skyline lesbar. */
.kino-karte {
  position: static;
  min-width: 250px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(14, 94, 99, 0.16);
  box-shadow: 0 18px 44px rgba(11, 27, 29, 0.16);
  padding: 18px 26px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: baseline;
}

.kino-karte:nth-child(2) { margin-right: 42px; }

.kino-karte .karte-zahl {
  color: var(--petrol);
  grid-row: span 2;
  font-size: clamp(2.1rem, 2.6vw, 2.7rem);
}
.kino-karte .karte-label { color: var(--ink); margin-top: 0; }
.kino-karte .karte-quelle { color: var(--ink-leise); grid-column: 2; }

/* Scroll-Cue */
.kino-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: var(--z-inhalt);
  width: 30px;
  height: 48px;
  border: 1.5px solid rgba(11, 27, 29, 0.35);
  border-radius: 999px;
}

.kino-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 10px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--petrol);
  animation: cue-fall 1.9s ease-in-out infinite;
}

@keyframes cue-fall {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* Vertrauens-Band als eigene weiße Bühne unterm Kino */
section.vertrauen {
  background: var(--bg);
  margin-top: 0;
  padding-block: clamp(28px, 4vh, 44px) clamp(36px, 5vh, 56px);
}

@media (max-width: 1024px) {
  .kino { min-height: 0; display: block; }

  /* Schmale Viewports: Text liegt über dem Motiv — Scrim wird vertikal */
  .kino-scrim {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.88) 42%,
        rgba(255, 255, 255, 0.55) 62%,
        rgba(255, 255, 255, 0.2) 78%,
        #ffffff 100%);
  }

  .kino-video, .kino-poster { object-position: 76% center; }

  .kino-karten {
    position: relative;
    inset: auto;
    margin-top: 28px;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .kino-karte:nth-child(2) { margin-right: 0; }

  .kino-cue { display: none; }
}

/* Handy: Hero aufgebrochen — erst Text + CTAs (zentriert, auf weißem Grund),
   dann das Motiv als eigener Block, die Beweis-Karten über den unteren
   Bildrand gelegt. Kein Text mehr über dem Foto (verschwamm). */
@media (max-width: 720px) {
  .kino {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: clamp(88px, 15vh, 112px);
    padding-bottom: 0;
    text-align: center;
  }

  .kino-inhalt {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .kino .hero-signal { margin: 0 auto 20px; }
  .kino h1 { font-size: clamp(2.7rem, 12vw, 3.7rem); }
  .kino .hero-lead { margin: 0 auto; max-width: 34rem; }

  .kino .hero-ctas {
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
    align-items: stretch;
  }
  .kino .hero-ctas .btn-gross,
  .kino .hero-ctas .btn-leise { width: 100%; justify-content: center; }

  /* 5/30-Siegel: mehr Luft zwischen Siegel und Text, ruhiger Zeilenfall,
     Block zentriert aber Text linksbündig (zentriert neben dem Kreis wirkte
     gequetscht). Siegel schrumpft nicht mit. */
  .kino .hero-garantie {
    justify-content: center;
    text-align: left;
    gap: 14px;
    line-height: 1.45;
    max-width: 340px;
    margin-inline: auto;
  }
  .kino .hero-garantie .garantie-siegel { flex: none; }

  /* Motiv als eigener Block statt Vollbild-Hintergrund */
  .kino-medien {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(300px, 52vh, 420px);
    margin-top: clamp(30px, 5vh, 44px);
  }
  .kino-scrim { display: none; }
  .kino-video, .kino-poster {
    object-position: 70% center;
    transform: none;
    animation: none;
  }

  /* Beweis-Karten über den unteren Bildrand (Beweis auf dem Motiv) */
  .kino-karten {
    order: 3;
    position: relative;
    inset: auto;
    z-index: var(--z-inhalt);
    width: 100%;
    max-width: 440px;
    margin: -104px auto 0;
    padding-inline: clamp(20px, 5vw, 40px);
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .kino-karte { min-width: 0; }
  .kino-karte:nth-child(2) { margin-right: 0; }

  /* Beweis-Karten mobil: das dunkle Glas wirkte wuchtig, vor allem wo die
     Karten auf den weißen Grund unter dem Foto ragen. Dezenter/edler = helles
     Glas mit Haarlinie und Petrol-Zahl (wie der Rest der hellen Seite), Zahl
     inline neben dem Label statt gestapelt, weicher statt harter Schatten. */
  .kino-karten { max-width: 330px; margin-top: -56px; gap: 10px; }
  .kino-karte.beweis-karte {
    padding: 13px 18px;
    text-align: left;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(14, 94, 99, 0.16);
    box-shadow: 0 10px 30px rgba(11, 27, 29, 0.1);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: baseline;
  }
  .kino-karte .karte-zahl { font-size: 1.7rem; color: var(--petrol); grid-row: span 2; }
  .kino-karte .karte-label { font-size: 0.86rem; color: var(--ink); margin-top: 0; font-weight: 600; }
  .kino-karte .karte-quelle { font-size: 0.76rem; color: var(--ink-leise); grid-column: 2; }
}

/* Schmale Handys: Logo + CTA-Chip + Burger passten sonst nicht in eine Zeile
   (Header lief über). Logo, Chip-Padding und Abstand gestrafft. */
@media (max-width: 430px) {
  .marke img { width: 106px; }
  .kopf.ist-fest .marke img { width: 96px; }
  .kopf-recht { gap: 8px; }
  .btn-kopf { padding: 8px 12px; font-size: 0.81rem; }
}

/* ---------- Video-Bühne: Klick-Fassade lädt YouTube inline ---------- */

.video-buehne {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000000;
}

.video-buehne iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Motoren-Brücke (Baustein-Seiten) ----------
   Zwei Buttons statt zweier Karten (24.07.2026, Jonas: „2 schönere Buttons,
   keine Zahl davor"). Die alten Karten trugen links eine Kachel mit 35 bzw.
   500. Die Zahlen gehören den beiden Motoren und nicht dem Baustein, auf dessen
   Seite sie standen; auf leadmagneten.html stand die 500 direkt über einer
   Sektion, die selbst mit 300 belegt — zwei Kennzahlen ohne Bezug zueinander.
   Ohne Kachel ist die Fläche außerdem frei für das, was der Button leistet:
   Beschriftung und Weg. */

.bruecke-intro {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: clamp(20px, 3vh, 30px);
}

.bruecke .motor-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.motor-btn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 2.8vw, 30px) clamp(22px, 2.8vw, 32px);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(150deg, rgba(14, 94, 99, 0.35), rgba(103, 205, 198, 0.5), rgba(14, 94, 99, 0.2)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 6px rgba(11, 27, 29, 0.04), 0 16px 40px rgba(14, 94, 99, 0.08);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Petrol-Licht wandert beim Hover von links herein. Als eigenes Element unter
   dem Inhalt statt als background-Wechsel: Der Rand ist bereits ein
   Gradient-border-box, ein zweiter Hintergrund würde ihn überschreiben. */
.motor-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Hellster Punkt ist bewusst --petrol und NICHT --petrol-hell (#14787C):
     Gegen #14787C kommt selbst ein sehr helles Mint nur auf 4.39:1, gemessen.
     Mit #0E5E63 als Obergrenze trägt die Unterzeile 5.5:1. */
  background: linear-gradient(115deg, var(--petrol-tief), var(--petrol));
  transform: translateX(-101%);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.motor-btn > * { position: relative; z-index: 1; }

.motor-btn:hover,
.motor-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(11, 27, 29, 0.05), 0 26px 60px rgba(14, 94, 99, 0.18);
}

.motor-btn:hover::before,
.motor-btn:focus-visible::before { transform: translateX(0); }

.mb-text { display: flex; flex-direction: column; gap: 5px; }

.mb-text strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.4s ease;
}

.mb-text span {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-leise);
  transition: color 0.4s ease;
}

/* Auf Petrol: Weiß und ein sehr helles Mint. Im Browser gegen den hellsten Punkt
   des Verlaufs (#0E5E63) gemessen: 7.5:1 für die Beschriftung, 5.5:1 für die
   Unterzeile. --mint-hell (#67CDC6) wäre hier zu dunkel gewesen (3.97:1) — die
   Farbe funktioniert auf dem dunklen Akt, aber nicht auf Petrol. */
.motor-btn:hover .mb-text strong,
.motor-btn:focus-visible .mb-text strong { color: #ffffff; }
.motor-btn:hover .mb-text span,
.motor-btn:focus-visible .mb-text span { color: #b6e6e1; }

.mb-pfeil {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  color: var(--petrol);
  background: rgba(14, 94, 99, 0.08);
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.motor-btn:hover .mb-pfeil,
.motor-btn:focus-visible .mb-pfeil {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translateX(4px);
}

@media (max-width: 860px) {
  .bruecke .motor-links { grid-template-columns: minmax(0, 1fr); }
}

/* Ohne Hover-Gerät (Touch) bleibt die Petrol-Füllung außen vor: Sie würde dort
   nur beim Antippen kurz aufblitzen und die Beschriftung unlesbar machen. */
@media (hover: none) {
  .motor-btn::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motor-btn,
  .motor-btn::before,
  .mb-pfeil { transition: none; }
}

/* .ist-static wird von main.js bei ?static gesetzt: friert die Seite komplett
   ein, damit Browser-Automation (Screenshots) nie auf idle wartet. */
.ist-static *, .ist-static *::before, .ist-static *::after {
  animation: none !important;
  transition: none !important;
}

/* ---------- Einwilligungsfenster (eigenes Tool, Logik in consent.js) ----------
   Erscheint drei Sekunden nach dem Laden, wenn Tracking-IDs eingetragen sind und
   noch keine Entscheidung im localStorage liegt. Sperrt die Seite bis zur
   Entscheidung; Ablehnen und Akzeptieren sind gleichrangig gestaltet (alles
   andere waere ein Dark Pattern und machte die Einwilligung unwirksam). */
.consent {
  position: fixed;
  inset: 0;
  z-index: var(--z-kopf);
  display: grid;
  place-items: center;
  padding: 20px;
}

.consent-dimmer {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 100%,
    rgba(14, 94, 99, 0.55) 0%, rgba(6, 23, 25, 0.72) 55%, rgba(6, 23, 25, 0.82) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: consent-dimmer-auf 0.5s ease both;
}

@keyframes consent-dimmer-auf { from { opacity: 0; } }

.consent-kasten {
  position: relative;
  width: min(600px, 100%);
  /* Deckel gegen langen Text: auf kleinen Geraeten lagen die Knoepfe sonst
     unter dem Bildrand, und die Seite ist bis zur Entscheidung gesperrt */
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(6, 23, 25, 0.45);
  animation: consent-auf 0.62s cubic-bezier(0.165, 0.84, 0.44, 1) both 0.1s;
}

@keyframes consent-auf { from { opacity: 0; transform: translateY(26px) scale(0.985); } }

/* Der eine Schimmer wandert einmal ueber die Oberkante */
.consent-kante { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; }

.consent-kante::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shimmer);
  background-size: 220% 100%;
  animation: consent-schimmer 2.4s cubic-bezier(0.4, 0, 0.2, 1) both 0.5s;
}

@keyframes consent-schimmer {
  from { background-position: 180% 0; }
  to { background-position: -60% 0; }
}

/* Kaestchen-Raster: Grundhaltung nur zu ahnen, unter der Maus leuchtet es auf.
   Deckkraft bewusst niedrig, der Text liegt darueber und muss 4.5:1 halten. */
.consent-raster {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(var(--consent-spalten, 24), 1fr);
  grid-auto-rows: 1fr;
  pointer-events: none;
}

.consent-raster i { background: rgba(14, 94, 99, 0.045); transition: background 0.5s ease; }
.consent-raster i.warm { background: rgba(70, 184, 177, 0.22); transition: background 0.1s ease; }
.consent-raster i.heiss { background: rgba(20, 120, 124, 0.3); transition: background 0.06s ease; }

.consent-inhalt {
  position: relative;
  padding: clamp(26px, 4vw, 38px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.consent-titel {
  font: 600 clamp(1.35rem, 2.4vw, 1.75rem)/1.15 var(--f-display);
  color: var(--ink);
  margin: 0 0 10px;
}

.consent-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 24px;
  /* Reicht der Platz nicht, scrollt der Text und die Knoepfe bleiben stehen */
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.consent-text p { margin: 0 0 0.85em; }
.consent-text p:last-child { margin-bottom: 0; }
.consent-text a { color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; }

.consent-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

.consent-btn {
  padding: 13px 26px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.consent-btn:hover { transform: translateY(-1px); }
.consent-btn:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }

.consent-ablehnen {
  background: #ffffff;
  border: 1px solid var(--linie);
  color: var(--ink);
}

.consent-ablehnen:hover { border-color: var(--petrol); color: var(--petrol); }

.consent-annehmen {
  background: var(--petrol);
  border: 1px solid var(--petrol);
  color: #ffffff;
}

.consent-annehmen:hover { background: var(--petrol-hell); border-color: var(--petrol-hell); }

/* Solange das Fenster offen ist, scrollt die Seite dahinter nicht weg */
.consent-offen { overflow: hidden; }


/* ============================================================================
   FORMULAR-ASSISTENT (gemeinsamer Baustein)

   Die Formular-Karte mit Schrittleiste, Fieldsets, Radio-Karten und Navigation.
   Stand 27.07.2026 genutzt von potenzialanalyse.html (vier Schritte, mit
   Terminkalender) und kontakt.html (drei Schritte, ohne Kalender). Lag bis dahin
   in seite-potenzialanalyse.css; hierher gezogen aus demselben Grund wie
   .vid-schild: zwei Seiten, ein Muster, eine Quelle.

   Der Wizard-Modus haengt an der Klasse .pa-wizard, die das Seiten-JS setzt.
   Ohne JS bleiben ALLE Schritte sichtbar und die Navigation verborgen, das
   Formular ist also auch ohne Skript vollstaendig ausfuellbar.
   ============================================================================ */
/* ---------- Formular-Karte ---------- */

.formular-karte {
  position: relative;
  display: grid;
  gap: clamp(24px, 2.8vw, 34px);
  padding: clamp(28px, 3.2vw, 44px);
  background: #ffffff;
  border: 1px solid var(--linie);
  border-radius: 24px;
  box-shadow: var(--karte-schatten);
}

/* Schimmer-Hairline oben, Muster .beweis-karte::before */
.formular-karte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: schimmer-lauf 6s linear infinite;
}

.formular-karte h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.pa-fieldset {
  display: grid;
  gap: 16px;
  padding: 0;
  margin: 0;
  border: 0;
}

.pa-legende {
  padding: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
}

.pa-hinweis-klein {
  margin-top: -6px;
  font-size: 0.86rem;
  color: var(--ink-leise);
  max-width: 60ch;
}

/* Radio-Karten: Auswahl per reiner CSS :has(), kein JS nötig */
.pa-radio-grid {
  display: grid;
  gap: 10px;
}

.pa-radio-karte {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.pa-radio-karte:hover {
  border-color: var(--petrol-hell);
}

.pa-radio-karte input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pa-radio-karte:has(input:checked) {
  border-color: var(--petrol);
  background: rgba(14, 94, 99, 0.05);
}

.pa-radio-karte:has(input:focus-visible) {
  border-color: var(--petrol-hell);
  box-shadow: 0 0 0 3px rgba(14, 94, 99, 0.14);
}

.pa-radio-txt {
  display: grid;
  gap: 2px;
}

.pa-radio-txt strong {
  font-size: 1rem;
  color: var(--ink);
}

.pa-radio-txt em {
  font-style: normal;
  font-size: 0.84rem;
  color: var(--ink-leise);
}

.pa-radio-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--petrol);
  color: #ffffff;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.pa-radio-karte:has(input:checked) .pa-radio-check {
  opacity: 1;
  transform: scale(1);
}

/* Zeilen & Felder */
.pa-zeile {
  display: grid;
  gap: 16px;
}

.pa-zeile-2 {
  grid-template-columns: 1fr 1fr;
}

.pa-feld-voll {
  grid-column: 1 / -1;
}

.pa-feld {
  display: grid;
  gap: 8px;
}

.pa-feld label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.pa-feld input,
.pa-feld select,
.pa-feld textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.pa-feld input::placeholder,
.pa-feld textarea::placeholder {
  color: var(--ink-leise);
  opacity: 1;
}

.pa-feld input:hover,
.pa-feld select:hover,
.pa-feld textarea:hover {
  border-color: var(--petrol-hell);
}

.pa-feld input:focus-visible,
.pa-feld select:focus-visible,
.pa-feld textarea:focus-visible {
  outline: none;
  border-color: var(--petrol-hell);
  box-shadow: 0 0 0 3px rgba(14, 94, 99, 0.14);
}

.pa-feld select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230e5e63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 38px;
  cursor: pointer;
}

/* textarea gehoert seit kontakt.html (Welle 72) in den geteilten Baustein.
   resize nur vertikal: horizontal wuerde das Kartenraster sprengen. */
.pa-feld textarea {
  resize: vertical;
  min-height: 88px;
}

.pa-absenden {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 4px;
}


/* ---------- Welle 9: Formular als Klick-Wizard ---------- */

/* Schritt-Leiste oben als Zahlenstrahl: 1—2—3—4, verbunden durch Linien,
   die sich beim Durchklicken petrol färben */
.pa-schritte {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  display: flex;
}

.pa-schritte li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-leise);
  cursor: pointer;
  transition: color 0.3s ease;
  text-align: center;
}

/* Verbindungslinie zum nächsten Schritt (liegt auf Höhe der Kreis-Mitte) */
.pa-schritte li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--linie);
  transition: background 0.4s ease;
}

.pa-schritte li span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--linie);
  font-family: var(--f-display);
  font-size: 0.82rem;
  color: var(--ink-leise);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pa-schritte li.ist-aktiv { color: var(--ink); }

.pa-schritte li.ist-aktiv span {
  border-color: var(--petrol);
  color: var(--petrol);
  box-shadow: 0 0 0 4px rgba(14, 94, 99, 0.1);
}

/* Erledigte Schritte: gefüllter Kreis + gefärbte Linie dahinter */
.pa-schritte li.ist-fertig { color: var(--petrol); }

.pa-schritte li.ist-fertig span {
  background: var(--petrol);
  border-color: var(--petrol);
  color: #ffffff;
}

.pa-schritte li.ist-fertig::after { background: var(--petrol); }

@media (max-width: 480px) {
  .pa-schritte li { font-size: 0.72rem; }
}

/* Im Wizard-Modus (JS aktiv) ist genau ein Schritt sichtbar */
.pa-wizard .pa-fieldset { display: none; }

.pa-wizard .pa-fieldset.ist-aktiv {
  display: grid;
  animation: pa-schritt-auftritt 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pa-schritt-auftritt {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

/* Navigation unten; ohne JS unsichtbar (dann sind alle Schritte offen) */
.formular-karte:not(.pa-wizard) .pa-nav { display: none; }

/* [hidden] schlägt das display der Blöcke (Absenden ist display:flex/grid) */
.pa-wizard .pa-absenden[hidden],
.pa-wizard [data-pa-weiter][hidden],
.pa-wizard [data-pa-zurueck][hidden] { display: none; }

.pa-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pa-nav .btn { margin-left: auto; }

.pa-zurueck {
  border: 0;
  background: none;
  padding: 10px 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-leise);
  cursor: pointer;
  transition: color 0.3s ease;
}