/* ============================================================
   carproof Website — gemeinsames Design (Task #94, 11.08.2026)
   Farben und Schrift wie die Apps: Orange-Verlauf + Poppins.
   ============================================================ */

/* ------------------------------------------------------------
   Schriftart Poppins — vom EIGENEN Server (16.08.2026)
   WARUM selbst ausliefern: Wurde die Schrift von Google geladen,
   ging die IP-Adresse jedes Besuchers ohne Einwilligung an Google.
   Das LG Muenchen I (3 O 17493/20) hat das als Rechtsverstoss
   gewertet — solche Einbindungen sind abmahnfaehig. Jetzt liegen
   die Dateien im Ordner "schriften" neben dieser CSS-Datei, es
   geht keine Verbindung mehr nach draussen.
   WARUM der Pfad ohne fuehrenden Schraegstrich: url() rechnet ab
   dem Ort DIESER Datei. stil.css liegt im selben Ordner wie die
   HTML-Seiten, also zeigt "schriften/..." korrekt in den Unterordner.
   WARUM font-display: swap: Der Text erscheint sofort in einer
   Ersatzschrift und wird nachtraeglich ausgetauscht — die Seite
   bleibt also nie leer, waehrend die Schrift laedt.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/Poppins-400Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/Poppins-500Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/Poppins-600SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('schriften/Poppins-700Bold.ttf') format('truetype');
}

/* ---------- Ionicons — DIESELBE Symbolschrift wie in den Apps ----------
   Vorher standen hier Emoji. Das war der Grund, warum die Website „irgendwie
   anders" aussah als die Apps: Emoji zeichnet JEDES Betriebssystem selbst
   (Apple, Android und Windows sehen völlig verschieden aus), und mit den
   Symbolen unserer Apps hatten sie ohnehin nichts zu tun.

   Diese Datei ist Zeichen für Zeichen dieselbe, die auch die App lädt
   (@expo/vector-icons). Damit zeigt die Website nicht ähnliche, sondern
   IDENTISCHE Symbole. Sie liegt auf unserem eigenen Server — wie Poppins,
   und aus demselben Grund (kein fremder Server beim Seitenaufruf).

   font-display: block ist hier absichtlich (nicht swap): Bei einer
   Symbolschrift würde swap für einen Moment leere Kästchen zeigen. */
@font-face {
  font-family: 'Ionicons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('schriften/Ionicons.ttf') format('truetype');
}
.ico {
  font-family: 'Ionicons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* Farbwerte 1:1 aus der App (carproof-app/src/theme/index.ts) —
     am 16.08.2026 angeglichen. Vorher wich die Website leicht ab
     (Orange #ff6a3d statt primary #FF5A3C, warmer Grund #faf8f6 statt
     App-Hintergrund #F6F7FA) — genau die Art „sieht irgendwie anders
     aus", die der Nutzer gemeldet hat. */
  --orange: #ff5a3c;        /* = colors.primary */
  --orange-hell: #ff8a4b;   /* = colors.primaryLight */
  --peach: #fff1e9;         /* = colors.peach */
  --tinte: #1c2333;         /* = colors.text (NUR fuer Text — als grosse
                               Flaeche kippt der Ton sichtbar ins Blaue,
                               Nutzer-Befund 16.08.2026) */
  --dunkel: #211e1b;        /* dunkle FLAECHEN: warmes Anthrazit statt
                               Blaugrau — passt zum Orange der Marke */
  --text: #2a3142;
  --text-2: #6c7280;        /* = colors.textSecondary */
  --linie: #eef0f3;         /* = colors.border */
  /* 14.09.2026: Seitengrund weiss statt Blaugrau (#f6f7fa) — der Sprung von
     Peach-Verlaeufen auf graue Flaechen war dem Betreiber zu hart. Formularfelder
     behalten den alten Grauton bewusst (siehe --feld), sonst verschwinden sie
     auf weissen Karten. */
  --grund: #ffffff;         /* = colors.background */
  --feld: #f6f7fa;          /* Eingabefelder, ehemals --grund */
  --karte: #ffffff;
  --gruen: #2fa35c;
  --gruen-bg: #e3f5ea;
  --radius: 18px;
  --schatten: 0 10px 30px rgba(28, 35, 51, 0.08);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--grund);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--orange); text-decoration: none; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 20px; max-width: 1120px; margin: 0 auto;
}
.logo { font-weight: 700; font-size: 1.35rem; color: var(--tinte); letter-spacing: -0.5px; }
.logo b { color: var(--orange); }
/* 16.08.2026: Das Logo ist jetzt die ECHTE Bilddatei aus der App
   (medien/carproof-logo.png = carproof-wordmark.png) statt nachgebautem
   Text — der sah je nach Geraet „komisch" aus (Nutzer-Befund). Die
   Textregeln oben bleiben als Rueckfall, falls das Bild nicht laedt. */
/* 19.08.2026: von 24px auf 34px vergroessert (Nutzer-Wunsch) — die
   Kopfzeile waechst dadurch nur minimal, weil das Padding gleich bleibt. */
.logo img { height: 34px; width: auto; display: block; }
/* In der dunklen Fusszeile waere das schwarze „car" unsichtbar — dort
   wird das Logo komplett weiss eingefaerbt (uebliche Ein-Farb-Variante
   auf dunklem Grund). */
.fuss .logo img { filter: brightness(0) invert(1); opacity: 0.92; height: 22px; }
.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--text); font-weight: 500; font-size: 0.95rem; }
.nav a:hover { color: var(--orange); }

/* ---------- Burger-Menü für Handys (16.08.2026) ----------
   WARUM: Unter 620 px passen sieben Links nicht nebeneinander. Früher
   wurden sie dort einfach ausgeblendet (.nur-gross) — Ratgeber,
   Kostenübernahme, Unsere Apps und die Gutachten-Software waren am
   Handy damit gar nicht mehr erreichbar. Dieser Knopf holt sie zurück.

   WARUM vor jeder Regel ".js-menue" steht: Diese Klasse hängt menue.js
   an das <html>-Element, sobald JavaScript läuft. Ohne JavaScript wird
   sie nie gesetzt, keine einzige Versteck-Regel greift — dann stehen
   alle Links untereinander sichtbar da. Verstecken darf nur, wer auch
   wieder aufklappen kann.

   WARUM hier über 620 px nichts passiert: Der Knopf steht auf
   display: none, und alle Umbau-Regeln stecken in der @media-Abfrage
   weiter unten. Am Schreibtisch sieht die Kopfzeile aus wie immer.
   --------------------------------------------------------- */
.menue-knopf {
  display: none;                /* Am Schreibtisch gibt es ihn nicht */
  width: 44px; height: 44px;    /* Mindest-Tippfläche, sonst trifft man ihn am Handy nicht */
  flex: 0 0 auto;               /* darf nicht schrumpfen, sonst wird er zu klein */
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  padding: 0; cursor: pointer; color: var(--tinte);
}
.menue-knopf:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Die drei Striche: ein <span> ist der mittlere, ::before und ::after
   sind der obere und der untere. So braucht es kein Bild und keine
   Icon-Schrift. */
.menue-striche { position: relative; display: block; }
.menue-striche,
.menue-striche::before,
.menue-striche::after {
  width: 20px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
/* Offener Zustand: aus den drei Strichen wird ein X. Gesteuert über
   aria-expanded, damit Aussehen und Vorlesetext gar nicht erst
   auseinanderlaufen können. */
.menue-knopf[aria-expanded="true"] .menue-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 620px) {
  .js-menue .menue-knopf { display: inline-flex; }
  /* Enger zusammenrücken: Logo, „Schaden melden" und Burger müssen
     zusammen in eine Zeile passen — auch auf einem schmalen Handy. */
  .js-menue .kopf-innen { gap: 12px; }

  /* Zugeklappt: oben bleibt nur der orangene Knopf „Schaden melden"
     stehen — die wichtigste Handlung nach einem Unfall. */
  .js-menue .nav:not(.offen) a:not(.knopf) { display: none; }
  .js-menue .nav:not(.offen) a.knopf { padding: 12px 18px; }

  /* Aufgeklappt: Tafel über die volle Breite unter der Kopfzeile.
     WARUM position: absolute: .kopf klebt oben (position: sticky) und
     ist damit der Bezugspunkt. Die Tafel legt sich über den Inhalt,
     statt die ganze Seite nach unten zu schieben. */
  .js-menue .nav.offen {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
    padding: 6px 20px 18px;
    max-height: calc(100vh - 70px); overflow-y: auto; /* quer liegendes Handy */
  }
  .js-menue .nav.offen a {
    display: block; width: 100%;
    padding: 13px 2px;            /* ergibt gut 44 px Zeilenhöhe zum Tippen */
    font-size: 1rem;
    border-bottom: 1px solid var(--linie);
  }
  .js-menue .nav.offen a.knopf {
    display: flex; justify-content: center;
    margin-top: 14px; padding: 13px 24px; border-bottom: none;
  }

  /* Notfall-Fall: JavaScript ist aus. Dann stehen alle sieben Links
     untereinander — die Kopfzeile wird hoch. Sie darf dann nicht mehr
     oben kleben, sonst deckt sie am Handy den halben Bildschirm zu. */
  html:not(.js-menue) .kopf { position: static; }
}
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* Verlauf wie der GradientButton der App: hell -> dunkel, von links nach
     rechts (ui.tsx: start x0 -> end x1 mit colors.gradient). Vorher lief er
     genau andersherum. */
  background: linear-gradient(90deg, var(--orange-hell), var(--orange));
  color: #fff !important; font-family: inherit; font-weight: 600; font-size: 0.95rem;
  padding: 12px 24px; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(255, 90, 60, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.knopf:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255, 90, 60, 0.45); }
.knopf.hell {
  background: #fff; color: var(--orange) !important;
  border: 1.5px solid var(--orange); box-shadow: none;
}
.knopf.dunkel { background: var(--dunkel); box-shadow: 0 6px 18px rgba(33,30,27,0.3); }
/* Hinweis: Die graue Optik für gesperrte Knöpfe (.knopf:disabled) steht weiter
   unten im Formular-Abschnitt — sie muss nach .hell/.dunkel kommen, damit Grau
   gewinnt. */

/* ---------- Knopf-Zeile: zwei Knöpfe nebeneinander ----------
   16.08.2026, Nutzer-Befund: Am Handy lagen die Knopf-Paare (z. B.
   „Live-Demo vereinbaren" + „Rückruf anfordern") INEINANDER. Ursache:
   Die Knöpfe standen als Fließtext nebeneinander — bricht die Zeile um,
   rechnet der Browser die Zeilenhöhe nur nach der Schrift, nicht nach
   der Knopf-Polsterung, und die zweite Zeile schiebt sich in die erste.
   Ein Flex-Behälter mit gap kennt die echte Knopfhöhe; beim Umbruch
   stehen die Knöpfe sauber untereinander. „mittig" für zentrierte
   Abschluss-Blöcke. */
.knopf-zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.knopf-zeile.mittig { justify-content: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--peach) 0%, var(--grund) 100%);
  padding: 72px 0 56px;
  min-height: 720px;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 150px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 247, 250, 0), var(--grund));
}
.hero-gitter { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.vorzeile {
  display: inline-block; background: #fff; border: 1px solid var(--linie);
  color: var(--orange); font-weight: 600; font-size: 0.8rem;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.15; color: var(--tinte); font-weight: 700; letter-spacing: -1px; }
h1 .betont { color: var(--orange); }
.hero p.gross { font-size: 1.1rem; color: var(--text-2); margin: 18px 0 26px; max-width: 34rem; }
.hero-punkte { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.hero-punkt { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text); font-weight: 500; }
.haken { color: var(--gruen); font-weight: 700; }
.hero-hintergrund-animation {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-hintergrund-animation::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Gleiche Toenung ueber die ganze Breite: Dadurch behalten beide Autos
     exakt denselben Lackeindruck. Nur nach unten wird weich ausgeblendet. */
  background: linear-gradient(180deg,
    rgba(255, 241, 233, 0.16) 0%,
    rgba(255, 241, 233, 0.06) 58%,
    rgba(246, 247, 250, 0.08) 76%,
    rgba(246, 247, 250, 0.72) 100%);
}
.hero-animation-video,
.hero-animation-standbild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero-animation-standbild { display: none; }

/* Wenn der Roboter nach der Kollision landet, weichen Text und Formular
   lange genug zur Seite, damit Landung, Winken und Zeigegeste frei sichtbar
   sind. Das Formular wird dabei kleiner und bleibt das klare Ziel der Geste. */
@keyframes hero-weicht-links {
  0%, 26% { transform: translateX(0) rotate(0) scale(1); }
  34%, 72% { transform: translateX(-190px) rotate(-5deg) scale(0.94); }
  96%, 100% { transform: translateX(0) rotate(0) scale(1); }
}
@keyframes hero-weicht-rechts {
  0%, 30% { transform: translateX(0) scale(1); }
  38%, 100% { transform: translateX(150px) rotate(5deg) scale(0.82); }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero.hero-szene-laeuft .hero-inhalt {
    animation: hero-weicht-links 12s cubic-bezier(0.22, 0.8, 0.2, 1) both;
    transform-origin: right center;
  }
  .hero.hero-szene-laeuft .formular-karte {
    animation: hero-weicht-rechts 12s cubic-bezier(0.22, 0.8, 0.2, 1) both;
    transform-origin: left center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-hintergrund-animation { opacity: 0.18; }
  .hero-animation-video { display: none; }
  .hero-animation-standbild { display: block; }
}

/* ---------- Cineastischer App-Hero (12.09.2026) ----------
   Drei Scroll-Akte: Aussage, App-Buehne, Download-Aufruf. Die Umsetzung ist
   bewusst nativ, damit die statische Website keine fremde Laufzeit braucht. */
.kino-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 88px 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 138, 75, 0.13), transparent 34%),
    linear-gradient(180deg, #fff 0%, var(--grund) 100%);
}
.kino-sticky { position: relative; z-index: 1; }
.kino-raster {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.46;
  background-image:
    linear-gradient(rgba(28, 35, 51, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 35, 51, 0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}
.kino-intro,
.kino-cta {
  position: relative;
  z-index: 2;
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
}
.kino-intro { padding: 54px 0 70px; }
.kino-intro h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -4px;
  text-wrap: balance;
  text-shadow: 0 18px 40px rgba(28, 35, 51, 0.14);
}
.kino-intro h1 span,
.kino-cta h2 span,
.kino-karte-text h2 span { color: var(--orange); }
.kino-intro p,
.kino-cta > p {
  max-width: 680px;
  margin: 26px auto 30px;
  color: var(--text-2);
  font-size: 1.08rem;
  line-height: 1.75;
}
.kino-karte-rahmen {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1500px;
}
.kino-karte {
  --kino-maus-x: 50%;
  --kino-maus-y: 50%;
  position: relative;
  width: min(1180px, calc(100% - 40px));
  min-height: 700px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 42px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 35%, rgba(255, 90, 60, 0.18), transparent 30%),
    linear-gradient(145deg, #3d302a 0%, #211e1b 46%, #12100f 100%);
  box-shadow:
    0 45px 110px -28px rgba(33, 30, 27, 0.72),
    0 22px 48px -24px rgba(0, 0, 0, 0.78),
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    inset 0 -2px 5px rgba(0, 0, 0, 0.7);
  will-change: width, height, border-radius, transform;
}
.kino-karte::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.9;
  background: radial-gradient(760px circle at var(--kino-maus-x) var(--kino-maus-y), rgba(255,255,255,0.09), transparent 42%);
  mix-blend-mode: screen;
}
.kino-schein {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: 0.34;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.08) 44%, transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(255, 90, 60, 0.15), transparent 36%);
  transform: rotate(-8deg);
}
.kino-karte-inhalt {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  height: 100%;
  min-height: inherit;
  margin: 0 auto;
  padding: 58px clamp(30px, 5vw, 76px);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 350px) minmax(190px, 0.78fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  will-change: opacity, transform;
}
.kino-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--orange-hell);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kino-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}
.kino-karte-text h2 {
  color: #fff;
  font-size: clamp(2rem, 3.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -2px;
}
.kino-karte-text > p {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.67);
  font-size: 1rem;
  line-height: 1.78;
}
.kino-merkmale { margin-top: 26px; list-style: none; }
.kino-merkmale li {
  position: relative;
  padding: 7px 0 7px 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
}
.kino-merkmale li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--orange-hell);
  font-weight: 700;
}
.kino-telefon-zone {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}
.kino-telefon {
  position: relative;
  z-index: 2;
  width: min(280px, 100%);
  aspect-ratio: 620 / 1102;
  padding: 8px;
  border-radius: 42px;
  background: linear-gradient(145deg, #454545, #050505 32%, #1b1b1b 72%, #050505);
  box-shadow:
    inset 0 0 0 2px #656565,
    inset 0 0 0 7px #050505,
    0 42px 78px -20px rgba(0, 0, 0, 0.86),
    0 14px 28px -12px rgba(0, 0, 0, 0.9);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.kino-telefon-bild {
  position: absolute;
  inset: 8px;
  overflow: hidden;
  border-radius: 34px;
  background: #fff;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}
.kino-telefon-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,0.16), transparent 36%);
}
.kino-telefon-bild img { width: 100%; height: 100%; object-fit: cover; }
.kino-insel {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 50%;
  width: 86px;
  height: 23px;
  border-radius: 999px;
  background: #080808;
  transform: translateX(-50%);
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.12);
}
.kino-telefon-knopf {
  position: absolute;
  z-index: 0;
  left: -3px;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #1a1a1a, #555);
}
.kino-telefon-knopf-eins { top: 108px; height: 30px; }
.kino-telefon-knopf-zwei { top: 151px; height: 52px; }
.kino-telefon-knopf-rechts { left: auto; right: -3px; top: 148px; height: 70px; border-radius: 0 3px 3px 0; }
.kino-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 206px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045));
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 24px 48px -15px rgba(0,0,0,0.72), inset 0 1px 1px rgba(255,255,255,0.16);
}
.kino-badge-termin { top: 82px; left: -86px; }
.kino-badge-pdf { right: -82px; bottom: 82px; }
.kino-badge-symbol {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  box-shadow: 0 8px 20px rgba(255, 90, 60, 0.3);
}
.kino-badge-symbol svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kino-badge strong,
.kino-badge small { display: block; }
.kino-badge strong { color: #fff; font-size: 0.82rem; line-height: 1.35; }
.kino-badge small { margin-top: 2px; color: rgba(255,255,255,0.5); font-size: 0.68rem; }
.kino-marke { justify-self: end; text-align: right; }
.kino-wortmarke {
  color: #fff;
  font-size: clamp(3.2rem, 5vw, 6.8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -5px;
  text-shadow: 0 18px 34px rgba(0,0,0,0.58);
}
.kino-wortmarke b { color: var(--orange); font-weight: inherit; }
.kino-marke p {
  margin-top: 22px;
  color: rgba(255,255,255,0.47);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kino-cta { padding: 80px 0; }
.kino-cta h2 {
  color: var(--tinte);
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: 1;
  letter-spacing: -4px;
}
.kino-store-zeile {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0 24px;
}
.kino-google-play,
.kino-apple-store {
  height: 58px;
}
.kino-google-play,
.kino-apple-store {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}
.kino-google-play:hover,
.kino-apple-store:hover { transform: translateY(-3px); }
.kino-google-play img,
.kino-apple-store img {
  display: block;
  width: 174px;
  height: 58px;
  filter: drop-shadow(0 14px 14px rgba(28, 35, 51, 0.16));
}
.kino-scroll-hinweis { display: none; }

/* Erst JavaScript macht aus der statischen Darstellung die lange Buehne. */
.kino-hero.kino-bereit {
  height: 520svh;
  min-height: 3900px;
  padding: 0;
}
.kino-bereit .kino-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
}
.kino-bereit .kino-raster { position: absolute; z-index: 0; }
.kino-bereit .kino-intro,
.kino-bereit .kino-karte-rahmen,
.kino-bereit .kino-cta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.kino-bereit .kino-intro,
.kino-bereit .kino-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 86px 22px 48px;
  will-change: opacity, transform, filter;
}
.kino-bereit .kino-karte { width: 86vw; max-width: none; min-height: 0; height: 84svh; }
.kino-bereit .kino-karte-inhalt { opacity: 0; }
.kino-bereit .kino-cta { z-index: 1; opacity: 0; pointer-events: none; }
.kino-bereit .kino-scroll-hinweis {
  position: absolute;
  z-index: 8;
  bottom: 28px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.kino-scroll-hinweis span {
  position: relative;
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(28,35,51,0.25);
  border-radius: 999px;
}
.kino-scroll-hinweis span::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: var(--orange);
  transform: translateX(-50%);
  animation: kino-scrollpunkt 1.7s ease-in-out infinite;
}
@keyframes kino-scrollpunkt {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* Formular bleibt der direkte Arbeitsbereich nach der Erzaehlung. */
.schadenformular-sektion {
  position: relative;
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 138, 75, 0.12), transparent 30%),
    #fff;
  border-top: 1px solid var(--linie);
}
.schadenformular-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(480px, 1.22fr);
  gap: clamp(38px, 6vw, 78px);
  align-items: start;
}
.schadenformular-einleitung { padding-top: 28px; }
.schadenformular-einleitung > p { margin-top: 16px; color: var(--text-2); font-size: 1rem; line-height: 1.75; }
.schadenformular-punkte { display: grid; gap: 14px; margin-top: 28px; }
.schadenformular-punkte span { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 0.9rem; font-weight: 500; }
.schadenformular-punkte i { margin-top: 4px; color: var(--gruen); }

@media (max-width: 1050px) {
  .kino-karte-inhalt { grid-template-columns: minmax(210px, 1fr) minmax(250px, 310px) minmax(150px, 0.7fr); gap: 22px; padding-right: 34px; padding-left: 34px; }
  .kino-badge-termin { left: -50px; }
  .kino-badge-pdf { right: -46px; }
  .kino-wortmarke { font-size: 3.2rem; letter-spacing: -3px; }
}
@media (max-width: 900px) {
  .kino-hero.kino-bereit { height: 470svh; min-height: 3300px; }
  .kino-karte-inhalt {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 6px;
    padding: 26px 20px 22px;
  }
  .kino-marke { order: 1; justify-self: auto; text-align: center; }
  .kino-wortmarke { font-size: 3rem; }
  .kino-marke p { display: none; }
  .kino-telefon-zone { order: 2; width: 100%; min-height: 430px; }
  .kino-telefon { width: min(238px, 56vw); }
  .kino-badge { min-width: 178px; }
  .kino-badge-termin { top: 55px; left: calc(50% - 205px); }
  .kino-badge-pdf { right: calc(50% - 205px); bottom: 55px; }
  .kino-karte-text { order: 3; text-align: center; }
  .kino-kicker,
  .kino-karte-text > p,
  .kino-merkmale { display: none; }
  .kino-karte-text h2 { font-size: 1.85rem; letter-spacing: -1px; }
  .schadenformular-layout { grid-template-columns: 1fr; max-width: 720px; }
  .schadenformular-einleitung { padding-top: 0; text-align: center; }
  .schadenformular-punkte { max-width: 520px; margin-right: auto; margin-left: auto; text-align: left; }
}
@media (max-width: 620px) {
  .kino-hero.kino-bereit { height: 440svh; min-height: 2800px; }
  .kino-intro h1,
  .kino-cta h2 { font-size: clamp(2.55rem, 13vw, 3.5rem); letter-spacing: -2.5px; }
  .kino-intro p,
  .kino-cta > p { margin: 20px auto 24px; font-size: 0.96rem; line-height: 1.65; }
  .kino-bereit .kino-intro,
  .kino-bereit .kino-cta { padding-top: 92px; }
  .kino-bereit .kino-karte { width: 92vw; height: 88svh; border-radius: 32px; }
  .kino-karte-inhalt { padding: 20px 14px 18px; }
  .kino-marke { padding-top: 12px; }
  .kino-wortmarke { font-size: 2.35rem; letter-spacing: -2px; }
  .kino-telefon-zone { min-height: 390px; }
  .kino-telefon { width: min(210px, 61vw); border-radius: 34px; }
  .kino-telefon-bild { border-radius: 27px; }
  .kino-badge { min-width: 142px; gap: 7px; padding: 8px 9px; border-radius: 14px; }
  .kino-badge-symbol { width: 31px; height: 31px; }
  .kino-badge strong { font-size: 0.7rem; }
  .kino-badge small { font-size: 0.58rem; }
  .kino-badge-termin { top: 46px; left: 0; }
  .kino-badge-pdf { right: 0; bottom: 46px; }
  .kino-karte-text h2 { font-size: 1.5rem; }
  .kino-store-zeile { flex-direction: column; align-items: center; margin-top: 24px; }
  .kino-scroll-hinweis { bottom: 18px; }
  .schadenformular-sektion { padding-top: 52px; }
  .schadenformular-layout { gap: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .kino-hero { padding-top: 38px; }
  .kino-intro { padding-top: 28px; }
  .kino-karte { transform: none !important; }
  .kino-karte-inhalt { opacity: 1 !important; transform: none !important; }
  .kino-telefon { transition: none; }
  .kino-scroll-hinweis { display: none !important; }
}

/* ---------- Sektionen ---------- */
.sektion { padding: 64px 0; }
.sektion.getont { background: #fff; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.sektion-kopf { text-align: center; max-width: 44rem; margin: 0 auto 40px; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--tinte); font-weight: 700; letter-spacing: -0.5px; }
.sektion-kopf p { color: var(--text-2); margin-top: 10px; }
h3 { color: var(--tinte); font-weight: 600; font-size: 1.1rem; }

/* ---------- Karten & Gitter ---------- */
.gitter { display: grid; gap: 20px; }
/* Grid-Kinder dürfen schmaler werden als ihr Inhalt — sonst läuft die Seite
   auf schmalen Bildschirmen seitlich über (min-width:auto-Falle) */
.gitter > *, .hero-gitter > * { min-width: 0; }
.gitter.zwei { grid-template-columns: repeat(2, 1fr); }
.gitter.drei { grid-template-columns: repeat(3, 1fr); }
.gitter.vier { grid-template-columns: repeat(4, 1fr); }
.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--schatten);
}
.karte .icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--peach); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 14px;
}
.karte p { color: var(--text-2); font-size: 0.93rem; margin-top: 8px; }

/* Hochwertige Informationskarten auf der Startseite.
   Die SVG-Linienicons bleiben auf Retina-Displays scharf und greifen die
   leuchtenden, orangefarbenen Symbolkacheln der carproof-Bildwelt auf. */
.karten-gitter { gap: 24px; align-items: stretch; }
.karten-gitter .karte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100%;
  padding: 30px;
  border-color: rgba(28, 35, 51, 0.075);
  border-radius: 20px;
  box-shadow:
    0 16px 38px rgba(28, 35, 51, 0.075),
    0 3px 10px rgba(28, 35, 51, 0.035);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}
.karten-gitter .karte::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  top: -90px;
  right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 75, 0.16), rgba(255, 138, 75, 0) 70%);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.24s ease, transform 0.32s ease;
}
.karten-gitter .icon {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  color: #fff;
  box-shadow:
    0 10px 22px rgba(255, 90, 60, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease;
}
.karten-gitter .icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.karten-gitter .karte h3 {
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
.karten-gitter .karte p {
  margin-top: 10px;
  line-height: 1.68;
}
@media (hover: hover) and (pointer: fine) {
  .karten-gitter .karte:hover {
    transform: translateY(-7px);
    border-color: rgba(255, 90, 60, 0.2);
    box-shadow:
      0 26px 52px rgba(28, 35, 51, 0.12),
      0 8px 20px rgba(255, 90, 60, 0.075);
  }
  .karten-gitter .karte:hover::before { opacity: 1; transform: scale(1); }
  .karten-gitter .karte:hover .icon {
    transform: translateY(-2px) scale(1.055) rotate(-2deg);
    box-shadow:
      0 14px 28px rgba(255, 90, 60, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .karten-gitter .karte,
  .karten-gitter .karte::before,
  .karten-gitter .icon { transition: none; }
  .karten-gitter .karte:hover,
  .karten-gitter .karte:hover .icon { transform: none; }
}

/* ---------- Persoenlicher Gutachter ----------
   Die ueberlappende Bild-/Textkarte greift die gelieferte Vorlage auf,
   bleibt aber bewusst im warmen, ruhigen carproof-Design. */
.profil-sektion {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background:
    radial-gradient(circle at 13% 20%, rgba(255, 138, 75, 0.13), transparent 30%),
    linear-gradient(135deg, #fff 0%, #fffaf7 52%, #fff4ed 100%);
}
.profil-sektion::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -210px;
  bottom: -270px;
  border: 1px solid rgba(255, 90, 60, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(255, 90, 60, 0.035), 0 0 0 108px rgba(255, 90, 60, 0.02);
  pointer-events: none;
}
.profil-buehne {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) minmax(500px, 1.18fr);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 0;
}
.profil-portrait {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  width: min(100%, 420px);
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(255, 90, 60, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 37%, rgba(255,255,255,0.95) 0 24%, transparent 56%),
    linear-gradient(145deg, #fff3ea, #ffd8c5);
  box-shadow: 0 22px 54px rgba(28, 35, 51, 0.13);
}
.profil-portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 78%;
  height: 78%;
  top: 9%;
  left: 11%;
  border: 1px solid rgba(255, 90, 60, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, 0.24);
}
.profil-portrait > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 22px rgba(28, 35, 51, 0.13));
}
.profil-portrait-marke {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 24px;
  width: 64px;
  opacity: 0.82;
}
.profil-portrait-marke img {
  width: 100%;
  height: auto;
  display: block;
}
.profil-portrait-status {
  position: absolute;
  z-index: 3;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  color: var(--tinte);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(28, 35, 51, 0.12);
  backdrop-filter: blur(8px);
  font-size: 0.76rem;
  font-weight: 600;
}
.profil-portrait-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gruen);
  animation: profil-status-puls 1.8s ease-out infinite;
}
@keyframes profil-status-puls {
  0% {
    box-shadow: 0 0 0 3px rgba(47, 163, 92, 0.18), 0 0 0 0 rgba(47, 163, 92, 0.38);
  }
  70% {
    box-shadow: 0 0 0 3px rgba(47, 163, 92, 0.18), 0 0 0 8px rgba(47, 163, 92, 0);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(47, 163, 92, 0.18), 0 0 0 8px rgba(47, 163, 92, 0);
  }
}
.profil-karte {
  position: relative;
  z-index: 3;
  margin-left: -48px;
  padding: 44px 46px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(28, 35, 51, 0.08);
  border-radius: 28px;
  box-shadow: 0 28px 68px rgba(28, 35, 51, 0.14), 0 5px 18px rgba(28, 35, 51, 0.055);
}
.profil-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #c0341a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.profil-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-hell));
}
.profil-karte h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.65rem);
  line-height: 1.12;
  letter-spacing: -1.2px;
}
.profil-karte h2 span { color: var(--orange); }
.profil-text {
  max-width: 38rem;
  margin-top: 20px;
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.78;
}
.profil-person {
  display: grid;
  gap: 2px;
  margin-top: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--orange);
}
.profil-person strong { color: var(--tinte); font-size: 1.08rem; }
.profil-person span { color: var(--text-2); font-size: 0.84rem; font-weight: 500; }
.profil-staerken {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.profil-staerken li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}
.profil-staerken li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #fff;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  border-radius: 50%;
  font-size: 0.72rem;
  box-shadow: 0 5px 12px rgba(255, 90, 60, 0.23);
}
.profil-aktionen {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
}
.profil-anruf {
  color: #a92e18;
  font-size: 0.88rem;
  font-weight: 700;
}
.profil-anruf span { display: inline-block; transition: transform 0.18s ease; }
.profil-anruf:hover span { transform: translateX(4px); }
@media (max-width: 860px) {
  .profil-buehne { grid-template-columns: 1fr; max-width: 620px; }
  .profil-portrait { width: min(88%, 390px); margin: 0 auto; }
  .profil-karte { margin: -54px 18px 0; padding: 38px; }
}
@media (max-width: 620px) {
  .profil-sektion { padding: 48px 0; }
  .profil-buehne { padding: 0; }
  .profil-portrait { width: min(88%, 330px); border-radius: 24px; }
  .profil-portrait-marke { top: 16px; left: 18px; width: 56px; }
  .profil-portrait-status { left: 12px; bottom: 12px; padding: 8px 11px; font-size: 0.7rem; }
  .profil-karte { margin: -26px 10px 0; padding: 28px 22px; border-radius: 22px; }
  .profil-karte h2 { font-size: 1.8rem; letter-spacing: -0.8px; }
  .profil-text { margin-top: 16px; font-size: 0.9rem; line-height: 1.7; }
  .profil-staerken { grid-template-columns: 1fr; }
  .profil-aktionen { align-items: stretch; flex-direction: column; gap: 14px; }
  .profil-aktionen .knopf { width: 100%; text-align: center; }
  .profil-anruf { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .profil-anruf span { transition: none; }
  .profil-anruf:hover span { transform: none; }
  .profil-portrait-status i { animation: none; box-shadow: 0 0 0 3px rgba(47, 163, 92, 0.18); }
}

/* ---------- Interaktive Schadensarten im Orbit ---------- */
.schadenarten-orbit-sektion.hintergrundbild::before {
  left: -12%;
  width: 70%;
  opacity: 0.1;
}
.schadenarten-orbit-sektion .sektion-kopf { margin-bottom: 28px; }
.schaden-orbit {
  position: relative;
  max-width: 930px;
  margin: 0 auto;
}
.schaden-orbit-anleitung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: 0.9rem;
  text-align: center;
}
.schaden-orbit-anleitung span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--orange);
  font-size: 1rem;
  font-weight: 700;
}
.schaden-orbit-buehne {
  position: relative;
  isolation: isolate;
  height: 670px;
  overflow: hidden;
  border: 1px solid rgba(28, 35, 51, 0.08);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 90, 60, 0.13), transparent 29%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 242, 0.97));
  box-shadow:
    0 24px 60px rgba(28, 35, 51, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.schaden-orbit-raster {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 90, 60, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 60, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 52%, #000 12%, transparent 72%);
}
.schaden-orbit-ring {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 496px;
  height: 496px;
  border: 1px solid rgba(255, 90, 60, 0.26);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 70px rgba(255, 90, 60, 0.075);
}
.schaden-orbit-ring::before,
.schaden-orbit-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.schaden-orbit-ring::before {
  inset: 62px;
  border: 1px solid rgba(28, 35, 51, 0.055);
}
.schaden-orbit-ring::after {
  inset: -7px;
  border: 1px dashed rgba(255, 90, 60, 0.1);
}
.schaden-orbit-kern {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  padding: 18px 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  color: #fff;
  box-shadow:
    0 20px 45px rgba(255, 90, 60, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.schaden-orbit-kern::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px;
  border: 1px solid rgba(255, 90, 60, 0.16);
  border-radius: 50%;
}
.schaden-orbit-kern-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 12px rgba(126, 35, 21, 0.12);
}
.schaden-orbit-kern-logo img { width: 100%; height: auto; }
.schaden-orbit-kern > span:last-child {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.schaden-orbit.hat-auswahl .schaden-orbit-kern {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.68);
}
.schaden-orbit-knoten {
  position: absolute;
  z-index: 3;
  inset: 0;
}
.schaden-orbit-knopf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 90, 60, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--orange);
  box-shadow:
    0 12px 28px rgba(28, 35, 51, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font: inherit;
  transition:
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  will-change: transform;
}
.schaden-orbit.dreht .schaden-orbit-knopf { transition: none; }
.schaden-orbit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: transform 0.22s ease;
}
.schaden-orbit-icon svg,
.schaden-orbit-detail-icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.schaden-orbit-label {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  min-width: max-content;
  padding: 3px 9px;
  border: 1px solid rgba(28, 35, 51, 0.055);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--tinte);
  box-shadow: 0 5px 14px rgba(28, 35, 51, 0.055);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  transform: translateX(-50%);
  transition: opacity 0.2s ease, color 0.2s ease;
}
.schaden-orbit-knopf:hover {
  border-color: rgba(255, 90, 60, 0.68);
  box-shadow:
    0 17px 35px rgba(28, 35, 51, 0.15),
    0 0 0 7px rgba(255, 90, 60, 0.08);
}
.schaden-orbit-knopf:hover .schaden-orbit-icon { transform: scale(1.08); }
.schaden-orbit-knopf:focus-visible {
  outline: 3px solid rgba(255, 90, 60, 0.34);
  outline-offset: 5px;
}
.schaden-orbit-knopf.aktiv {
  border-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  color: #fff;
  box-shadow:
    0 20px 38px rgba(255, 90, 60, 0.32),
    0 0 0 8px rgba(255, 90, 60, 0.1);
}
.schaden-orbit-knopf.aktiv .schaden-orbit-icon { transform: scale(1.1); }
.schaden-orbit-knopf.aktiv .schaden-orbit-label { color: var(--orange); }
.schaden-orbit.hat-auswahl .schaden-orbit-knopf:not(.aktiv) .schaden-orbit-label {
  opacity: 0.48;
}
.schaden-orbit-detail {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 52%;
  width: min(352px, calc(100% - 360px));
  min-height: 236px;
  padding: 27px 28px 25px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 90, 60, 0.22), transparent 38%),
    linear-gradient(145deg, var(--dunkel), #332921);
  color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 28px 60px rgba(28, 35, 51, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -43%);
  animation: schaden-orbit-karte-ein 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.schaden-orbit-detail[hidden] { display: none; }
.schaden-orbit-schliessen {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
}
.schaden-orbit-schliessen:hover { background: rgba(255, 255, 255, 0.14); }
.schaden-orbit-schliessen:focus-visible,
.schaden-orbit-aktion:focus-visible {
  outline: 3px solid rgba(255, 138, 75, 0.55);
  outline-offset: 3px;
}
.schaden-orbit-detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 17px;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 90, 60, 0.25);
}
.schaden-orbit-detail-kategorie {
  margin: 0 44px 5px 0;
  color: var(--orange-hell);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.9px;
  line-height: 1.4;
  text-transform: uppercase;
}
.schaden-orbit-detail h3 {
  color: #fff;
  font-size: 1.32rem;
  line-height: 1.35;
}
.schaden-orbit-detail-text {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.73);
  font-size: 0.91rem;
  line-height: 1.65;
}
.schaden-orbit-aktion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 19px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}
.schaden-orbit-aktion span {
  color: var(--orange-hell);
  transition: transform 0.18s ease;
}
.schaden-orbit-aktion:hover span { transform: translateX(4px); }
@keyframes schaden-orbit-karte-ein {
  from { opacity: 0; transform: translate(-50%, -38%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -43%) scale(1); }
}

@media (max-width: 820px) and (min-width: 721px) {
  .schaden-orbit-buehne { height: 640px; }
  .schaden-orbit-ring { width: 452px; height: 452px; }
  .schaden-orbit-knopf { width: 64px; height: 64px; }
  .schaden-orbit-detail { width: 330px; padding: 25px; }
}

@media (max-width: 720px) {
  .schadenarten-orbit-sektion.hintergrundbild::before { opacity: 0.055; }
  .schaden-orbit-anleitung {
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.84rem;
  }
  /* Kreis, Ring und Kern bleiben - nur kleiner -, siehe HANDY-REGELN am Ende der Datei. */
}

@media (prefers-reduced-motion: reduce) {
  .schaden-orbit-kern,
  .schaden-orbit-knopf,
  .schaden-orbit-icon,
  .schaden-orbit-label,
  .schaden-orbit-detail,
  .schaden-orbit-aktion span { transition: none; animation: none; }
}

/* ---------- Zahlen-Leiste ---------- */
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.zahl { font-size: 2rem; font-weight: 700; color: var(--orange); }
.zahl-label { color: var(--text-2); font-size: 0.9rem; }

/* ---------- Schritte ---------- */
.schritt { display: flex; gap: 18px; align-items: flex-start; }
.schritt-nr {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-hell));
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Scroll-Kartenstapel auf der Startseite.
   Ohne JavaScript bleibt das bisherige 2x2-Raster vollständig erhalten.
   Erst schritte-scroll.js setzt .schritte-animation und aktiviert die
   klebrige Bühne; so bleibt der Inhalt auch bei Skriptfehlern erreichbar. */
#so-gehts .schritte-status { display: none; }
#so-gehts.schritte-animation {
  height: 285svh;
  min-height: 1900px;
  padding: 0;
  overflow: clip;
}
#so-gehts.schritte-animation .schritte-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 76px 0 28px;
  overflow: hidden;
}
#so-gehts.schritte-animation .schritte-buehne { width: 100%; }
#so-gehts.schritte-animation .sektion-kopf { margin-bottom: 12px; }
#so-gehts.schritte-animation .schritte-stapel {
  position: relative;
  display: block;
  height: clamp(390px, 50svh, 500px);
  perspective: 1100px;
}
#so-gehts.schritte-animation .schritt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100% - 80px));
  min-height: 152px;
  margin: 0;
  padding: 30px 38px;
  align-items: center;
  border-radius: 38px;
  border-color: rgba(28, 35, 51, 0.09);
  box-shadow:
    0 22px 44px rgba(28, 35, 51, 0.14),
    0 5px 12px rgba(28, 35, 51, 0.08);
  will-change: transform, opacity, filter;
  transform: translate3d(-50%, -50%, 0);
}
#so-gehts.schritte-animation .schritt[data-aktiv="true"] {
  border-color: rgba(255, 90, 60, 0.22);
  box-shadow:
    0 28px 58px rgba(28, 35, 51, 0.17),
    0 7px 16px rgba(28, 35, 51, 0.09);
}
#so-gehts.schritte-animation .schritt-nr {
  width: 58px;
  height: 58px;
  font-size: 1.25rem;
  box-shadow: 0 9px 20px rgba(255, 90, 60, 0.25);
}
#so-gehts.schritte-animation .schritt h3 { font-size: 1.2rem; }
#so-gehts.schritte-animation .schritt p { line-height: 1.65; }
#so-gehts.schritte-animation .schritte-status {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -8px;
}
#so-gehts.schritte-animation .schritte-status span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #cfd3da;
  transition: width 0.2s ease, background-color 0.2s ease;
}
#so-gehts.schritte-animation .schritte-status span.aktiv {
  width: 28px;
  background: var(--orange);
}
@media (max-width: 620px) {
  #so-gehts.schritte-animation {
    height: 280svh;
    min-height: 1800px;
  }
  #so-gehts.schritte-animation .schritte-sticky {
    min-height: 560px;
    padding: 70px 0 18px;
  }
  #so-gehts.schritte-animation .sektion-kopf { margin-bottom: 4px; }
  #so-gehts.schritte-animation .sektion-kopf p { font-size: 0.88rem; }
  #so-gehts.schritte-animation .schritte-stapel { height: 58svh; min-height: 390px; }
  #so-gehts.schritte-animation .schritt {
    width: calc(100% - 34px);
    min-height: 190px;
    padding: 24px 22px;
    gap: 14px;
    border-radius: 28px;
  }
  #so-gehts.schritte-animation .schritt-nr {
    width: 46px;
    height: 46px;
    font-size: 1rem;
  }
  #so-gehts.schritte-animation .schritt h3 { font-size: 1.04rem; }
  #so-gehts.schritte-animation .schritt p { font-size: 0.86rem; line-height: 1.55; }
}
@media (prefers-reduced-motion: reduce) {
  #so-gehts.schritte-animation {
    height: auto;
    min-height: 0;
    padding: 64px 0;
    overflow: hidden;
  }
  #so-gehts.schritte-animation .schritte-sticky {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
    padding: 0;
    overflow: visible;
  }
  #so-gehts.schritte-animation .schritte-stapel {
    display: grid;
    height: auto;
  }
  #so-gehts.schritte-animation .schritt {
    position: static;
    width: auto;
    min-height: 0;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  #so-gehts.schritte-animation .schritte-status { display: none; }
}

/* ---------- Formular ---------- */
.formular-karte { background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: 28px; box-shadow: var(--schatten); }
.formular-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.formular-schritt { font-size: 0.78rem; font-weight: 600; color: var(--text-2); letter-spacing: 1px; text-transform: uppercase; }
.formular-frage { font-weight: 600; color: var(--tinte); font-size: 1.05rem; margin: 14px 0 12px; }
.wahl-knoepfe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wahl {
  border: 1.5px solid var(--linie); background: var(--feld); border-radius: 14px;
  padding: 13px 14px; font: inherit; font-size: 0.92rem; font-weight: 500;
  color: var(--text); cursor: pointer; text-align: left; transition: all 0.12s ease;
}
.wahl:hover { border-color: var(--orange); }
.wahl.aktiv { border-color: var(--orange); background: var(--peach); color: var(--orange); font-weight: 600; }
label.feld-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--tinte); margin: 14px 0 6px; }
input[type="text"], input[type="tel"], input[type="date"], input[type="time"], input[type="email"], textarea, select {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--linie); border-radius: 12px;
  font: inherit; font-size: 0.95rem; background: var(--feld); color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orange); }
.formular-fuss { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; }
.klein { font-size: 0.8rem; color: var(--text-2); }
.fehler { color: #d33; font-size: 0.85rem; margin-top: 10px; display: none; }

/* ---------- Hinweis nach dem Abschicken (16.08.2026) ----------
   WARUM es das gibt: Das Schadenformular auf der Startseite öffnet am Ende
   nur das E-Mail-Programm des Besuchers. Öffnet sich dort nichts — sehr
   häufig an einem PC ohne eingerichtetes Mailprogramm —, passierte vorher
   sichtbar gar nichts: Der Kunde tippte auf „Schaden melden" und blieb auf
   einer stummen Seite sitzen.
   WARUM der Kasten bewusst KEINE Erfolgsmeldung ist: Die Meldung liegt erst
   dann bei uns, wenn der Besucher die vorbereitete E-Mail auch wirklich
   abschickt. Ein „Danke, ist angekommen" wäre an dieser Stelle schlicht
   gelogen. Deshalb steht im Kasten, was noch zu tun ist — plus die
   Telefonnummer als Weg, der immer funktioniert. */
.hinweis {
  display: none;
  margin-top: 14px; padding: 14px 16px;
  background: var(--peach); border: 1.5px solid var(--orange);
  border-radius: 14px; font-size: 0.88rem; color: var(--text);
}
.hinweis.an { display: block; }
.hinweis strong { color: var(--tinte); }

/* Grauer Knopf, solange Pflichtfelder fehlen.
   Wichtig: „!important" bei der Farbe, weil .knopf die Schriftfarbe ebenfalls
   mit !important setzt — ohne das bliebe der Text weiß auf Grau. */
.knopf:disabled, .knopf[disabled] {
  background: #cfd3da; color: #ffffff !important;
  box-shadow: none; cursor: not-allowed;
}
.knopf:disabled:hover, .knopf[disabled]:hover { transform: none; box-shadow: none; }

/* Zwei Felder nebeneinander im Formular — auf schmalen Bildschirmen untereinander */
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Haken-Liste (Aufzählung mit grünem ✓) ---------- */
.haken-liste { list-style: none; margin: 12px 0 0; }
.haken-liste li {
  padding: 5px 0 5px 24px; position: relative;
  font-size: 0.92rem; color: var(--text);
}
.haken-liste li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--gruen); font-weight: 700;
}

/* ---------- Fahrplan-Liste (Aufzählung mit orangem Pfeil) ---------- */
.fahrplan-liste { list-style: none; }
.fahrplan-liste li {
  padding: 9px 0 9px 26px; position: relative;
  font-size: 0.93rem; color: var(--text-2);
  border-bottom: 1px solid var(--linie);
}
.fahrplan-liste li:last-child { border-bottom: none; }
.fahrplan-liste li strong { color: var(--tinte); }
.fahrplan-liste li::before {
  content: "→"; position: absolute; left: 0; top: 9px;
  color: var(--orange); font-weight: 700;
}

/* ---------- Vergleichstabelle ----------
   Der Rahmen darf seitlich scrollen, damit die Tabelle auf dem Handy
   nicht die ganze Seite breit macht. */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten); background: var(--karte);
}
table.vergleich { width: 100%; min-width: 680px; border-collapse: collapse; }
.vergleich th, .vergleich td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  font-size: 0.9rem; font-weight: 400; color: var(--text-2);
  border-bottom: 1px solid var(--linie);
}
.vergleich thead th {
  background: var(--grund); color: var(--tinte);
  font-weight: 600; font-size: 0.88rem;
}
.vergleich tbody th[scope="row"] { color: var(--tinte); font-weight: 600; }
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: none; }
/* Die eigene Spalte wird hervorgehoben */
.vergleich .spalte-wir { background: var(--peach); color: var(--text); font-weight: 500; }
.vergleich thead .spalte-wir { background: var(--orange); color: #fff; }

/* ---------- App-Sektion ---------- */
.app-band {
  /* Vorher lief der Verlauf nach #2b3550 — ein sattes Marineblau.
     Jetzt warmes Anthrazit mit leichtem Orange-Schimmer am Ende. */
  background: linear-gradient(135deg, var(--dunkel) 0%, #3a2f27 100%);
  border-radius: 26px; padding: 46px 40px; color: #fff;
}
.app-band h2, .app-band h3 { color: #fff; }
.app-band .app-karte { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 22px; }
.app-band .app-karte p, .app-band li { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
.app-band ul { list-style: none; margin-top: 10px; }
.app-band li { padding: 3px 0 3px 22px; position: relative; }
.app-band li::before { content: "✓"; position: absolute; left: 0; color: var(--orange-hell); font-weight: 700; }
.app-chip { display: inline-block; background: var(--orange); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------- Der digitale carproof-Ablauf ---------- */
.system-karte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 30px;
  padding: 38px 34px 22px;
  border: 1px solid rgba(255, 139, 77, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 229, 214, 0.62), transparent 34%),
    linear-gradient(145deg, #fffaf7 0%, #fff 48%, #fff5ef 100%);
  color: var(--text);
  box-shadow: 0 24px 56px rgba(12, 16, 26, 0.24);
}
.system-karte::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.46;
  background-image:
    linear-gradient(rgba(255, 90, 60, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 90, 60, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 82%, transparent);
}
.system-kopf { max-width: 760px; margin: 0 auto; text-align: center; }
.system-vorzeile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.system-vorzeile::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(255, 90, 60, 0.11);
}
.system-kopf h3 {
  color: var(--tinte);
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.system-kopf p {
  max-width: 660px;
  margin: 12px auto 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
}
.system-buehne {
  position: relative;
  width: min(1120px, 100%);
  height: 520px;
  margin: 12px auto 0;
}
.system-linien { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.system-linien > path {
  fill: none;
  stroke: url(#system-linie-verlauf);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
}
.system-datenpunkte circle { fill: var(--orange); }
.system-knoten,
.system-kern { position: absolute; z-index: 2; }
.system-knoten {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 12px;
  width: 250px;
  min-height: 96px;
  padding: 15px 16px;
  border: 1px solid rgba(28, 35, 51, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 35px rgba(28, 35, 51, 0.1);
  animation: system-knoten-leuchten 7.2s ease-in-out infinite;
}
.system-knoten > span:not(.system-knoten-icon) { min-width: 0; }
.system-knoten strong,
.system-knoten small { display: block; }
.system-knoten strong { color: var(--tinte); font-size: 0.88rem; line-height: 1.35; }
.system-knoten small { margin-top: 3px; color: var(--text-2); font-size: 0.7rem; line-height: 1.35; }
.system-knoten-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  box-shadow: 0 9px 20px rgba(255, 90, 60, 0.23);
}
.system-knoten-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.system-status {
  position: absolute;
  right: 12px;
  bottom: -10px;
  padding: 4px 8px 4px 17px;
  border: 1px solid rgba(31, 157, 103, 0.14);
  border-radius: 999px;
  background: #f1fbf6;
  color: #14784e;
  font-size: 0.59rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 5px 12px rgba(28, 35, 51, 0.07);
}
.system-status::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1f9d67;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(31, 157, 103, 0.12);
}
.system-eingang-meldung { top: 102px; left: 0; animation-delay: 0s; }
.system-eingang-daten { top: 322px; left: 0; animation-delay: -3.6s; }
.system-ausgang { width: 260px; }
.system-ausgang-termin { top: 62px; right: 0; animation-delay: -1.1s; }
.system-ausgang-gutachter { top: 212px; right: 0; animation-delay: -2.4s; }
.system-ausgang-app { top: 362px; right: 0; animation-delay: -4.1s; }
.system-kern {
  --system-kern-position: translateX(-50%);
  top: 158px;
  left: 50%;
  width: 300px;
  min-height: 204px;
  padding: 34px 28px 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 42px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.34), transparent 29%),
    linear-gradient(145deg, #ff9b64 0%, #ff5a3c 60%, #e94331 100%);
  box-shadow:
    0 28px 50px rgba(255, 90, 60, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transform: var(--system-kern-position) scale(1);
  transform-origin: center;
  will-change: transform, box-shadow;
  animation: system-herzschlag 2.55s ease-in-out infinite;
}
.system-kern::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -74px;
  bottom: -92px;
  border: 22px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}
.system-kern-signal {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.14);
  animation: system-signal 2s ease-out infinite;
}
.system-kern-logo { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.06em; }
.system-kern-logo span { color: #3b2b27; }
.system-kern > strong { display: block; margin-top: 15px; font-size: 1.15rem; }
.system-kern p { margin-top: 8px; color: rgba(255, 255, 255, 0.82); font-size: 0.76rem; }
.system-kern-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(67, 35, 27, 0.16);
  font-size: 0.68rem;
  font-weight: 600;
}
.system-kern-status i { width: 6px; height: 6px; border-radius: 50%; background: #d7ffe9; box-shadow: 0 0 0 4px rgba(215, 255, 233, 0.15); }
.system-vertrauen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -2px 0 0;
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}
.system-vertrauen span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: #1f9d67; font-size: 0.7rem; }
@keyframes system-knoten-leuchten {
  0%, 72%, 100% { border-color: rgba(28, 35, 51, 0.08); box-shadow: 0 16px 35px rgba(28, 35, 51, 0.1); transform: translateY(0); }
  82% { border-color: rgba(255, 90, 60, 0.28); box-shadow: 0 20px 42px rgba(255, 90, 60, 0.17); transform: translateY(-4px); }
}
@keyframes system-signal {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.34); }
  72%, 100% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
}
/* Ruhiger Doppelschlag wie bei einem Herzen: zwei kurze Impulse,
   danach eine deutlich laengere Ruhephase. */
@keyframes system-herzschlag {
  0%, 8%, 20%, 100% {
    transform: var(--system-kern-position) scale(1);
    box-shadow:
      0 28px 50px rgba(255, 90, 60, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.32);
  }
  4% {
    transform: var(--system-kern-position) scale(1.027);
    box-shadow:
      0 34px 64px rgba(255, 90, 60, 0.4),
      0 0 0 10px rgba(255, 90, 60, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.38);
  }
  13% {
    transform: var(--system-kern-position) scale(1.018);
    box-shadow:
      0 32px 59px rgba(255, 90, 60, 0.36),
      0 0 0 7px rgba(255, 90, 60, 0.055),
      inset 0 1px 0 rgba(255, 255, 255, 0.36);
  }
}
@media (max-width: 1030px) {
  .system-buehne {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    height: auto;
    margin-top: 32px;
  }
  .system-linien { display: none; }
  .system-knoten,
  .system-kern { position: relative; inset: auto; width: auto; min-height: 104px; transform: none; }
  .system-kern {
    --system-kern-position: translateX(0);
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0;
    border-radius: 26px;
  }
  .system-eingang { grid-row: 1; }
  .system-ausgang { grid-row: 3; }
  .system-ausgang-app { grid-column: 1 / -1; grid-row: 4; width: min(520px, 100%); justify-self: center; }
}
@media (max-width: 650px) {
  .system-karte { padding: 30px 16px 22px; border-radius: 20px; }
  .system-kopf { padding: 0 4px; }
  .system-kopf p { font-size: 0.88rem; }
  .system-buehne { display: flex; flex-direction: column; gap: 13px; }
  .system-knoten,
  .system-kern,
  .system-ausgang-app { width: 100%; }
  .system-kern { order: 2; padding: 28px 20px 23px; }
  .system-eingang { order: 1; }
  .system-ausgang { order: 3; }
  .system-knoten { animation: none; }
  .system-knoten:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: -14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 90, 60, 0.13);
  }
  .system-vertrauen { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .system-datenpunkte { display: none; }
  .system-knoten,
  .system-kern,
  .system-kern-signal { animation: none; }
  .system-kern { transform: var(--system-kern-position) scale(1); }
}

/* ---------- Schwebende App-Vorteile auf der Startseite ---------- */
.app-promo-karte {
  position: relative;
  isolation: isolate;
  min-height: 540px;
  overflow: hidden;
  padding: 54px 28px;
  text-align: center;
  border-color: rgba(255, 90, 60, 0.12);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.98) 0 26%, rgba(255, 255, 255, 0.55) 45%, transparent 67%),
    linear-gradient(145deg, #fff8f4 0%, var(--peach) 52%, #fff9f6 100%);
  box-shadow: 0 22px 54px rgba(60, 39, 29, 0.09);
}
.app-promo-karte::before,
.app-promo-karte::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255, 90, 60, 0.12);
  border-radius: 50%;
  pointer-events: none;
}
.app-promo-karte::before {
  width: 790px;
  height: 300px;
  transform: translate(-50%, -50%) rotate(-8deg);
}
.app-promo-karte::after {
  width: 900px;
  height: 390px;
  transform: translate(-50%, -50%) rotate(8deg);
  border-color: rgba(255, 138, 75, 0.08);
}
.app-promo-inhalt {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  margin: 0 auto;
}
.app-promo-inhalt .sektion-kopf { margin-bottom: 22px; }
.app-promo-inhalt .sektion-kopf p { max-width: 460px; margin-right: auto; margin-left: auto; }
.app-promo-store {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
}
.app-promo-store a {
  display: inline-flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}
.app-promo-store a:hover { transform: translateY(-3px); }
.app-promo-store img {
  display: block;
  width: 169px;
  height: 56px;
  filter: drop-shadow(0 12px 12px rgba(28, 35, 51, 0.14));
}
.app-promo-ohne-app { max-width: 490px; margin: 16px auto 0; }
.app-promo-aktion { margin-top: 18px; }
.app-vorteile { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.app-vorteil {
  --chip-drehung: 0deg;
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 176px;
  padding: 9px 14px 9px 9px;
  border: 1px solid rgba(28, 35, 51, 0.065);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tinte);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  box-shadow:
    0 16px 34px rgba(28, 35, 51, 0.11),
    0 4px 10px rgba(255, 90, 60, 0.07);
  pointer-events: auto;
  animation: app-chip-schweben 5.8s ease-in-out infinite;
  animation-delay: var(--chip-verzug, 0s);
}
.app-vorteil-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  box-shadow: 0 8px 18px rgba(255, 90, 60, 0.24), inset 0 1px 0 rgba(255,255,255,0.38);
  transition: transform 0.2s ease;
}
.app-vorteil-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-vorteil-icon svg text {
  fill: currentColor;
  stroke: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 4.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.app-vorteil:hover .app-vorteil-icon { transform: scale(1.08) rotate(-4deg); }
.app-vorteil-schaden { top: 46px; left: 36px; --chip-drehung: -2deg; --chip-verzug: -0.7s; }
.app-vorteil-scan { top: 46px; right: 36px; --chip-drehung: 2deg; --chip-verzug: -2.6s; }
.app-vorteil-termin { top: 218px; left: 18px; --chip-drehung: 1deg; --chip-verzug: -4.1s; }
.app-vorteil-chat { top: 218px; right: 18px; --chip-drehung: -1deg; --chip-verzug: -1.5s; }
.app-vorteil-pdf { bottom: 42px; left: 52px; --chip-drehung: 2deg; --chip-verzug: -3.3s; }
.app-vorteil-ki { bottom: 42px; right: 52px; --chip-drehung: -2deg; --chip-verzug: -5s; }
@keyframes app-chip-schweben {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--chip-drehung)); }
  50% { transform: translate3d(0, -9px, 0) rotate(var(--chip-drehung)); }
}
@media (max-width: 900px) {
  .app-promo-karte { min-height: 0; }
  .app-promo-karte::before { width: 620px; height: 280px; }
  .app-promo-karte::after { display: none; }
}
@media (max-width: 620px) {
  .app-promo-store { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .app-vorteil { animation: none; }
  .app-vorteil-icon { transition: none; }
}

/* ---------- Warum carproof: interaktive Bild-Lamellen ----------
   Die fokussierte (angetippte) Lamelle oeffnet sich. Seit 17.09.2026 auf
   allen Bildschirmgroessen so (Handy-Masse in den HANDY-REGELN am Ende). */
.warum-akkordeon-sektion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 90, 60, 0.12), transparent 27%),
    radial-gradient(circle at 12% 90%, rgba(255, 138, 75, 0.08), transparent 30%),
    #fff;
}
.warum-akkordeon-sektion::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 7%;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 90, 60, 0.1);
  border-radius: 50%;
  transform: translateY(-58%);
  pointer-events: none;
}
.warum-akkordeon-layout {
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(620px, 1.55fr);
  align-items: center;
  gap: clamp(44px, 6vw, 88px);
}
.warum-akkordeon-intro { max-width: 440px; }
.warum-akkordeon-intro .vorzeile { margin-bottom: 20px; }
.warum-akkordeon-intro h2 {
  max-width: 420px;
  font-size: clamp(2.7rem, 4.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -3px;
  text-wrap: balance;
}
.warum-akkordeon-intro h2 span { white-space: nowrap; }
.warum-akkordeon-intro > p {
  margin: 26px 0 30px;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.75;
}
.warum-akkordeon {
  display: flex;
  gap: 13px;
  width: 100%;
  min-width: 0;
  height: 510px;
}
.warum-panel {
  position: relative;
  flex: 0 0 70px;
  width: 70px;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(28, 35, 51, 0.1);
  border-radius: 22px;
  background: var(--dunkel);
  color: #fff;
  font: inherit;
  text-align: left;
  box-shadow: 0 20px 44px -24px rgba(28, 35, 51, 0.45);
  cursor: pointer;
  isolation: isolate;
  transition:
    flex-basis 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.24s ease,
    box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.warum-panel.ist-aktiv {
  flex-basis: 420px;
  flex-grow: 1;
  width: auto;
  box-shadow: 0 34px 64px -28px rgba(28, 35, 51, 0.58);
}
.warum-panel:not(.ist-aktiv):hover { transform: translateY(-5px); }
.warum-panel:focus-visible {
  outline: 3px solid rgba(255, 90, 60, 0.46);
  outline-offset: 4px;
}
.warum-panel > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.05);
  transform: scale(1.035);
  transition: filter 0.45s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.warum-panel-app > img { object-position: center top; }
.warum-panel.ist-aktiv > img {
  filter: saturate(0.98) contrast(1.02);
  transform: scale(1);
}
.warum-panel-schleier {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 25, 37, 0.16) 0%, rgba(20, 25, 37, 0.22) 38%, rgba(20, 25, 37, 0.94) 100%),
    linear-gradient(120deg, rgba(255, 90, 60, 0.12), transparent 48%);
  transition: background-color 0.4s ease;
}
.warum-panel:not(.ist-aktiv) .warum-panel-schleier {
  background: linear-gradient(180deg, rgba(28, 35, 51, 0.34), rgba(28, 35, 51, 0.9));
}
.warum-panel-nummer {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 50%;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: translateX(-50%);
}
.warum-panel.ist-aktiv .warum-panel-nummer {
  right: 24px;
  left: auto;
  transform: none;
}
.warum-panel-inhalt {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 30px;
}
.warum-panel-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange));
  box-shadow: 0 10px 26px rgba(255, 90, 60, 0.3), inset 0 1px 0 rgba(255,255,255,0.42);
}
.warum-panel-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.warum-panel-text { display: block; min-width: 0; }
.warum-panel-text strong {
  display: block;
  color: #fff;
  font-size: clamp(1.15rem, 1.6vw, 1.48rem);
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.36);
}
.warum-panel-text small {
  display: block;
  max-width: 430px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.6;
}
.warum-panel:not(.ist-aktiv) .warum-panel-inhalt {
  top: 64px;
  right: auto;
  bottom: 24px;
  left: 50%;
  width: 54px;
  padding: 0;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  gap: 15px;
  transform: translateX(-50%);
}
.warum-panel:not(.ist-aktiv) .warum-panel-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}
.warum-panel:not(.ist-aktiv) .warum-panel-icon svg { width: 21px; height: 21px; }
.warum-panel:not(.ist-aktiv) .warum-panel-text strong {
  font-size: 0.84rem;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.warum-panel:not(.ist-aktiv) .warum-panel-text small { display: none; }

@media (max-width: 1100px) {
  .warum-akkordeon-layout { grid-template-columns: 1fr; gap: 42px; }
  .warum-akkordeon-intro { max-width: 650px; text-align: center; margin: 0 auto; }
  .warum-akkordeon-intro h2 { margin-right: auto; margin-left: auto; }
  .warum-akkordeon-intro > p { margin-right: auto; margin-left: auto; }
}
@media (max-width: 900px) {
  .warum-akkordeon-sektion { padding: 82px 0; }
}
@media (max-width: 620px) {
  .warum-akkordeon-sektion { padding: 68px 0; }
  .warum-akkordeon-intro h2 { font-size: 2.65rem; letter-spacing: -2px; }
  .warum-akkordeon-intro > p { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .warum-panel,
  .warum-panel > img { transition: none; }
}

/* ---------- Ratgeber: kreisfoermiges Artikel-Karussell ---------- */
.ratgeber-karussell-sektion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 138, 75, 0.1), transparent 24%),
    var(--grund);
}
.ratgeber-karussell-kopf { max-width: 760px; margin-bottom: 38px; }
.ratgeber-karussell-kopf .vorzeile { margin-bottom: 16px; }
.ratgeber-karussell-kopf h2 {
  font-size: clamp(2.15rem, 4vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -2px;
  text-wrap: balance;
}
.ratgeber-karussell-kopf p { max-width: 680px; margin-right: auto; margin-left: auto; }
.ratgeber-karussell {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  outline: none;
}
.ratgeber-karussell:focus-visible {
  outline: 3px solid rgba(255, 90, 60, 0.34);
  outline-offset: 8px;
  border-radius: 38px;
}
.ratgeber-karussell-buehne {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ratgeber-karussell-karte {
  position: relative;
  min-height: 275px;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: 22px;
  background: #fff;
  color: var(--tinte);
  box-shadow: 0 16px 34px rgba(28, 35, 51, 0.08);
}
.ratgeber-karte-waehlen {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ratgeber-karte-inhalt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  pointer-events: none;
}
.ratgeber-karte-chip {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--peach);
  color: var(--orange);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ratgeber-karussell-karte h3 {
  margin-top: 16px;
  color: inherit;
  font-size: 1.02rem;
  line-height: 1.4;
}
.ratgeber-karussell-karte p {
  display: -webkit-box;
  margin-top: 11px;
  overflow: hidden;
  color: inherit;
  font-size: 0.78rem;
  line-height: 1.58;
  opacity: 0.68;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.ratgeber-karte-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.7rem;
}
.ratgeber-karte-fuss > span { opacity: 0.58; }
.ratgeber-karte-fuss a {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange);
  font-weight: 700;
  pointer-events: auto;
}
.ratgeber-karte-fuss a:hover { color: var(--orange-dunkel); }
.ratgeber-karussell-mitte,
.ratgeber-karussell-steuerung { display: none; }

/* Erst nach erfolgreicher JS-Initialisierung wird aus dem stabilen Raster
   die kreisfoermige Buehne. */
.ratgeber-karussell.ist-aktiv {
  overflow: hidden;
  padding: 16px 22px 24px;
  border: 1px solid rgba(255, 90, 60, 0.15);
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 111, 66, 0.19), transparent 27%),
    radial-gradient(circle at 50% 116%, rgba(255, 138, 75, 0.16), transparent 44%),
    linear-gradient(145deg, #fffaf7 0%, #fff1e9 54%, #fce8de 100%);
  box-shadow:
    0 34px 70px -34px rgba(77, 49, 36, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.ratgeber-karussell.ist-aktiv::before,
.ratgeber-karussell.ist-aktiv::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 57%;
  left: 50%;
  width: 770px;
  height: 255px;
  border: 1px solid rgba(255, 90, 60, 0.11);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ratgeber-karussell.ist-aktiv::after {
  width: 940px;
  height: 345px;
  border-color: rgba(255, 90, 60, 0.075);
}
.ratgeber-karussell-buehne.ist-bereit {
  position: relative;
  z-index: 1;
  display: block;
  height: 535px;
}
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte {
  --ratgeber-x: 0px;
  --ratgeber-y: 0px;
  --ratgeber-skala: 1;
  --ratgeber-drehung: 0deg;
  --ratgeber-deckkraft: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 316px;
  height: 288px;
  min-height: 0;
  border-color: rgba(255, 90, 60, 0.13);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 237, 228, 0.84));
  color: var(--tinte);
  opacity: var(--ratgeber-deckkraft);
  box-shadow: 0 22px 46px -22px rgba(88, 56, 40, 0.34);
  transform:
    translate(-50%, -50%)
    translate3d(var(--ratgeber-x), var(--ratgeber-y), 0)
    rotate(var(--ratgeber-drehung))
    scale(var(--ratgeber-skala));
  transform-origin: center;
  will-change: transform, opacity;
  transition:
    transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte[aria-hidden="true"] { pointer-events: none; }
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte.ist-aktiv {
  border-color: rgba(255, 90, 60, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 138, 75, 0.18), transparent 34%),
    #fff;
  color: var(--tinte);
  box-shadow:
    0 34px 66px -28px rgba(88, 56, 40, 0.38),
    0 13px 26px -18px rgba(255, 90, 60, 0.42);
}
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte:not(.ist-aktiv) .ratgeber-karte-fuss,
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte:not(.ist-aktiv) p {
  visibility: hidden;
  opacity: 0;
}
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte:not(.ist-aktiv) h3 {
  margin-top: 20px;
  color: var(--tinte);
  font-size: 1rem;
}
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte:not(.ist-aktiv) .ratgeber-karte-chip {
  background: rgba(255, 90, 60, 0.1);
  color: var(--orange);
}
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte.entfernung-zwei h3 { font-size: 0.92rem; }
.ratgeber-karussell-buehne.ist-bereit .ratgeber-karte-waehlen:focus-visible {
  outline: 3px solid rgba(255, 117, 72, 0.82);
  outline-offset: -5px;
  border-radius: 19px;
}
.ratgeber-karussell-mitte {
  position: absolute;
  z-index: 2;
  top: 385px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 106px;
  border: 1px solid rgba(255, 90, 60, 0.16);
  border-radius: 50%;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(88, 56, 40, 0.09), inset 0 1px 0 #fff;
  transform: translateX(-50%);
  flex-direction: column;
  backdrop-filter: blur(8px);
}
.ratgeber-karussell-mitte strong {
  color: var(--orange-hell);
  font-size: 2rem;
  line-height: 1;
}
.ratgeber-karussell-mitte span { margin-top: 5px; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ratgeber-karussell-buehne.ist-bereit + .ratgeber-karussell-steuerung {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.ratgeber-karussell-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0 0 3px;
  border: 1px solid rgba(255, 90, 60, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: var(--orange);
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.ratgeber-karussell-pfeil:hover { border-color: rgba(255, 90, 60, 0.42); background: #fff; transform: translateY(-2px); }
.ratgeber-karussell-pfeil:focus-visible,
.ratgeber-karussell-punkt:focus-visible { outline: 3px solid rgba(255, 138, 75, 0.55); outline-offset: 3px; }
.ratgeber-karussell-punkte { display: flex; align-items: center; justify-content: center; gap: 7px; }
.ratgeber-karussell-punkt {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(28, 35, 51, 0.18);
  cursor: pointer;
  transition: width 0.22s ease, background-color 0.22s ease;
}
.ratgeber-karussell-punkt.ist-aktiv { width: 24px; background: var(--orange); }

@media (max-width: 960px) and (min-width: 721px) {
  .ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte { width: 286px; height: 280px; }
  .ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte.entfernung-zwei { opacity: 0 !important; pointer-events: none; }
}
@media (max-width: 720px) {
  .ratgeber-karussell-sektion { padding: 74px 0; }
  .ratgeber-karussell-kopf { margin-bottom: 28px; }
  .ratgeber-karussell-kopf h2 { font-size: 2.45rem; letter-spacing: -1.5px; }
  .ratgeber-karussell.ist-aktiv { padding: 12px 12px 22px; border-radius: 27px; }
  .ratgeber-karussell.ist-aktiv::before,
  .ratgeber-karussell.ist-aktiv::after { display: none; }
  .ratgeber-karussell-buehne.ist-bereit { height: 386px; }
  .ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte,
  .ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte.ist-aktiv {
    width: min(330px, calc(100% - 18px));
    height: 310px;
  }
  .ratgeber-karussell-mitte { display: none; }
  .ratgeber-karte-inhalt { padding: 22px; }
  .ratgeber-karussell-karte h3 { font-size: 1rem; }
  .ratgeber-karussell-karte p { font-size: 0.76rem; -webkit-line-clamp: 4; }
  .ratgeber-karussell-buehne.ist-bereit + .ratgeber-karussell-steuerung { gap: 10px; }
  .ratgeber-karussell-pfeil { width: 43px; height: 43px; }
  .ratgeber-karussell-punkte { gap: 4px; }
  .ratgeber-karussell-punkt { width: 5px; height: 5px; }
  .ratgeber-karussell-punkt.ist-aktiv { width: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .ratgeber-karussell-buehne.ist-bereit .ratgeber-karussell-karte,
  .ratgeber-karussell-pfeil,
  .ratgeber-karussell-punkt { transition: none; }
}

/* ---------- FAQ ---------- */
details {
  background: #fff; border: 1px solid var(--linie); border-radius: 14px;
  padding: 16px 20px; margin-bottom: 10px;
}
summary { cursor: pointer; font-weight: 600; color: var(--tinte); }
details p { color: var(--text-2); margin-top: 10px; font-size: 0.93rem; }

/* FAQ auf der Startseite: breite, weiche Akkordeon-Karten wie in der
   Designvorlage. Die Selektoren sind bewusst auf #faq begrenzt, damit die
   kompakteren Fragen in Preise und Ratgeber unverändert bleiben. */
#faq .faq-liste {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  background: #e9eaec;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
#faq .faq-liste details {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(28, 35, 51, 0.07);
  border-radius: 17px;
  background: #fff;
  box-shadow:
    0 14px 24px rgba(28, 35, 51, 0.16),
    0 4px 8px rgba(28, 35, 51, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#faq .faq-liste details:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px rgba(28, 35, 51, 0.18),
    0 5px 10px rgba(28, 35, 51, 0.09);
}
#faq .faq-liste details[open] {
  box-shadow:
    0 16px 30px rgba(28, 35, 51, 0.17),
    0 5px 11px rgba(28, 35, 51, 0.08);
}
#faq .faq-liste summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 19px 26px;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  user-select: none;
}
#faq .faq-liste summary::-webkit-details-marker { display: none; }
#faq .faq-liste summary::before {
  content: "+";
  flex: 0 0 18px;
  color: var(--orange);
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
#faq .faq-liste details[open] summary::before { content: "\00D7"; }
#faq .faq-liste summary:focus-visible {
  outline: 3px solid rgba(255, 90, 60, 0.35);
  outline-offset: -4px;
  border-radius: 14px;
}
#faq .faq-liste details p {
  margin: 0;
  padding: 0 26px 24px 60px;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
  animation: faq-einblenden 0.22s ease-out;
}
@keyframes faq-einblenden {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 620px) {
  #faq .faq-liste { gap: 12px; padding: 12px; border-radius: 22px; }
  #faq .faq-liste details { border-radius: 15px; }
  #faq .faq-liste summary {
    gap: 12px;
    min-height: 64px;
    padding: 16px 18px;
    font-size: 0.94rem;
  }
  #faq .faq-liste details p { padding: 0 18px 20px 48px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  #faq .faq-liste details { transition: none; }
  #faq .faq-liste details p { animation: none; }
}

/* ---------- Preis-Karten ---------- */
.preis-karte { position: relative; text-align: center; }
.preis-karte.empfohlen { border: 2px solid var(--orange); }
.empfohlen-band {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: #fff; font-size: 0.75rem; font-weight: 600;
  padding: 4px 14px; border-radius: 999px;
}
.preis { font-size: 2.2rem; font-weight: 700; color: var(--tinte); margin: 12px 0 2px; }
.preis small { font-size: 0.95rem; color: var(--text-2); font-weight: 500; }
.preis-liste { list-style: none; text-align: left; margin: 18px 0; }
.preis-liste li { padding: 6px 0 6px 26px; position: relative; font-size: 0.92rem; color: var(--text); }
.preis-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen); font-weight: 700; }

/* ---------- Rechner ---------- */
.regler-zeile { margin: 18px 0; }
.regler-zeile .werte { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-2); font-weight: 500; }
.regler-zeile output { color: var(--orange); font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--orange); }

/* ---------- App-Vorführung: Telefon-Mockups (nur Muster-Daten!) ---------- */
.telefon {
  width: 100%; max-width: 250px; margin: 0 auto;
  aspect-ratio: 9 / 18.5; background: #fff;
  border: 8px solid var(--dunkel); border-radius: 34px;
  position: relative; overflow: hidden; box-shadow: var(--schatten);
}
.telefon::before { /* Notch */
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 16px; background: var(--dunkel); border-radius: 999px; z-index: 5;
}
.t-screen {
  position: absolute; inset: 0; padding: 34px 12px 14px;
  background: var(--grund); opacity: 0; transition: opacity 0.55s ease;
  display: flex; flex-direction: column; gap: 8px; font-size: 11px; line-height: 1.35;
}
.t-screen.aktiv { opacity: 1; }

/* Echte App-Bildschirmfotos (seit 01.09.2026). Sie liegen deckungsgleich
   uebereinander; sichtbar ist immer genau eines.

   Der Rahmen nimmt das Seitenverhaeltnis der Bilder (620x1102). Versuche
   mit echtem iPhone-Format (9:19,5) wurden am 01.09.2026 verworfen: Die
   Screenshots muessten dafuer ergaenzt werden, und dabei rutschte
   entweder die Tab-Leiste in die Bildmitte oder es entstanden sichtbare
   Unterschiede zwischen ergaenzten und nativen Bildern. Lieber ein etwas
   gedrungenes Geraet als ein Bild, das nicht stimmt. */
.telefon:has(.app-bild) {
  aspect-ratio: 620 / 1102;
  border-width: 6px;
  border-radius: 28px;
}
.telefon:has(.app-bild)::before { display: none; }

.app-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 0.6s ease;
}
.app-bild.aktiv { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .app-bild { transition: none; }
}
.t-titel { font-weight: 700; color: var(--tinte); font-size: 13px; }
.t-hallo { font-size: 15px; font-weight: 700; color: var(--tinte); }
.t-karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  padding: 9px 10px; color: var(--text);
}
.t-karte b { color: var(--tinte); font-size: 11.5px; }
.t-karte .grau { color: var(--text-2); font-size: 10px; }
.t-chip {
  display: inline-block; background: var(--peach); color: var(--orange);
  font-weight: 600; font-size: 9px; padding: 2px 8px; border-radius: 999px;
}
.t-chip.gruen { background: var(--gruen-bg); color: var(--gruen); }
.t-knopf {
  background: linear-gradient(90deg, var(--orange-hell), var(--orange)); color: #fff;
  font-weight: 600; font-size: 10.5px; text-align: center;
  padding: 8px; border-radius: 999px;
}
.t-knopf.hell { background: #fff; color: var(--orange); border: 1.2px solid var(--orange); }
.t-zeile { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.t-karte.puls { border: 1.6px solid var(--orange); animation: t-puls 1.6s infinite; }
@keyframes t-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(255, 90, 60, 0); }
}
/* Mini-Karte wie in der App (16.08.2026, Nutzer-Befund "map ist komisch"):
   Vorher gestreifter Verlauf mit einem Emoji-LKW aus dem CSS — der letzte
   Emoji-Rest, den die HTML-Suche nicht sah. Jetzt eine gezeichnete Karte
   mit weissen Strassen und der ORANGENEN Route, wie sie die Kunden-App
   wirklich zeigt (echte Strassenroute, Task #167). Der Wagen faehrt als
   Ionicon-Marker auf dem geraden Routenstueck. */
.t-karte.map { height: 84px; position: relative; padding: 0; overflow: hidden; }
.t-karte.map svg { display: block; width: 100%; height: 100%; }
.map-wagen {
  position: absolute; top: 15px; left: 40%;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--tinte);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; box-shadow: 0 2px 6px rgba(28,35,51,0.3);
  animation: t-fahrt 4s ease-in-out infinite alternate;
}
@keyframes t-fahrt { from { left: 40%; } to { left: 62%; } }
.t-schablone {
  height: 74px; border: 2px dashed var(--orange); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); font-weight: 600; font-size: 10px; background: var(--peach);
}
/* ---------- Tab-Leiste der Vorführung — 1:1 nach FloatingTabBar.tsx ----------
   Maße und Farben stammen aus dem echten App-Baustein:
   weiße Karte (radius 36, Schatten), aktives Symbol mit grauem Kreis
   #EEF0F4 dahinter (NICHT orange — das ist in der App bewusst so),
   inaktive Symbole #6C7280, aktives #1C2333.
   Der Plus-Knopf ist 56 px, trägt den Marken-Verlauf und ragt nach oben
   heraus — genauso wie in der Kunden-App. */
.t-tabbar {
  margin-top: auto; background: #fff; border: none;
  border-radius: 36px; padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 8px 24px rgba(28, 35, 51, 0.10);
}
.t-tabbar span {
  width: 30px; height: 30px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; color: #6C7280;
}
.t-tabbar span.aktiv { background: #EEF0F4; color: #1C2333; }
.t-tabbar span.plus {
  width: 38px; height: 38px; border-radius: 19px;
  margin-top: -14px;
  /* Diagonal wie in der App (FloatingTabBar: start 0,0 -> end 1,1) */
  background: linear-gradient(135deg, #FF8A4B, #FF5A3C);
  color: #fff; font-size: 20px;
  box-shadow: 0 6px 14px rgba(255, 90, 60, 0.38);
}
.t-balken { display: flex; align-items: flex-end; gap: 4px; height: 52px; }
.t-balken span { flex: 1; background: var(--peach); border-radius: 4px 4px 0 0; }
.t-balken span.voll { background: linear-gradient(180deg, var(--orange), var(--orange-hell)); }
.demo-hinweis { text-align: center; font-size: 0.78rem; color: var(--text-2); margin-top: 18px; }

/* ---------- App-Faecher: 16 echte Bildschirme ----------
   Die Referenz arbeitet mit React und GSAP. Hier bleibt die gleiche raeumliche
   Faecher-Idee nativ in CSS/JS, damit die statische Seite schnell bleibt. */
.visuell-versteckt {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.app-fan-sektion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 88px;
  border-top: 1px solid rgba(28, 35, 51, 0.055);
  border-bottom: 1px solid rgba(28, 35, 51, 0.055);
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 127, 74, 0.115), rgba(255, 127, 74, 0) 34%),
    #fff;
}
.app-fan-sektion::before,
.app-fan-sektion::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
}
.app-fan-sektion::before {
  top: -300px;
  left: -170px;
  background: rgba(255, 241, 233, 0.82);
}
.app-fan-sektion::after {
  right: -230px;
  bottom: -330px;
  background: rgba(255, 122, 70, 0.1);
}
.app-fan-container { max-width: 1380px; outline: none; }
.app-fan-container:focus-visible {
  outline: 3px solid rgba(255, 90, 60, 0.28);
  outline-offset: 9px;
  border-radius: 18px;
}
.app-fan-kopf { max-width: 48rem; margin-bottom: 26px; }
.app-fan-kopf .vorzeile { margin-bottom: 15px; }
.app-fan-kopf h2 {
  font-size: clamp(2.25rem, 4.4vw, 4.3rem);
  line-height: 1;
  letter-spacing: -2.6px;
}
.app-fan-kopf p { max-width: 43rem; margin-right: auto; margin-left: auto; font-size: 1rem; line-height: 1.65; }
.app-fan-kategorien {
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 auto 18px;
}
.app-fan-kategorien button {
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid rgba(28, 35, 51, 0.09);
  border-radius: 999px;
  background: rgba(246, 247, 250, 0.88);
  color: var(--text-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.app-fan-kategorien button:hover { color: var(--tinte); transform: translateY(-2px); }
.app-fan-kategorien button.aktiv {
  border-color: transparent;
  background: linear-gradient(90deg, var(--orange-hell), var(--orange));
  color: #fff;
  box-shadow: 0 9px 22px rgba(255, 90, 60, 0.26);
}
.app-fan-buehne {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin: 0 auto;
}
.app-fan-glanz {
  position: absolute;
  z-index: 0;
  top: 15%;
  left: 50%;
  width: min(870px, 78vw);
  height: 370px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 127, 74, 0.18), rgba(255, 127, 74, 0) 69%);
  filter: blur(18px);
  transform: translateX(-50%);
  pointer-events: none;
}
.app-fan-karte {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-fan-telefon {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 620 / 1102;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 40px;
  outline: 6px solid #171717;
  outline-offset: 0;
  background: #fff;
  box-shadow:
    0 34px 56px -28px rgba(28, 35, 51, 0.46),
    0 12px 24px -16px rgba(28, 35, 51, 0.34);
}
.app-fan-telefon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 40px;
  background: #fff;
}
/* Sechs App-Exporte sind hoeher als die uebrigen Screens. Sie werden bewusst
   nur auf das einheitliche Telefonformat skaliert, damit Kopfbereich und
   Bottom-Navigation sichtbar bleiben und der Inhalt zugleich die volle
   Displaybreite nutzt. */
.app-fan-telefon img.app-fan-bild-breit { object-fit: fill; }
.app-fan-karte:focus-visible { outline: none; }
.app-fan-karte:focus-visible .app-fan-telefon {
  box-shadow: 0 0 0 4px rgba(255, 90, 60, 0.32), 0 34px 56px -24px rgba(28,35,51,0.5);
}

/* Wenn JavaScript laeuft, werden die 16 Kacheln zu einem echten Faecher. */
.app-fan-buehne.app-fan-bereit {
  display: block;
  height: 610px;
  touch-action: pan-y;
}
.app-fan-bereit .app-fan-karte {
  --fan-x: 0px;
  --fan-y: 90px;
  --fan-rotation: 0deg;
  --fan-scale: 0.54;
  --fan-lift: 0px;
  position: absolute;
  top: 18px;
  left: 50%;
  width: 278px;
  opacity: 0;
  transform:
    translateX(-50%)
    translate3d(var(--fan-x), calc(var(--fan-y) + var(--fan-lift)), 0)
    rotate(var(--fan-rotation))
    scale(var(--fan-scale));
  transform-origin: 50% 88%;
  will-change: transform, opacity;
  transition:
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s ease,
    filter 0.3s ease;
}
.app-fan-bereit:not(.app-fan-eingeblendet) .app-fan-karte { opacity: 0 !important; }
.app-fan-bereit .app-fan-karte:not(.ist-mitte) { filter: saturate(0.88) brightness(0.96); }
.app-fan-bereit .app-fan-karte.ist-mitte { cursor: default; filter: none; }
.app-fan-bereit .app-fan-karte.ist-mitte .app-fan-telefon {
  box-shadow:
    0 42px 72px -25px rgba(28, 35, 51, 0.54),
    0 15px 28px -16px rgba(255, 90, 60, 0.32);
}
.app-fan-bereit .app-fan-karte.schwebt { --fan-lift: -24px; filter: saturate(1) brightness(1); }
.app-fan-nav {
  position: relative;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
}
.app-fan-ist-aktiv .app-fan-nav { display: flex; }
.app-fan-pfeil {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(28, 35, 51, 0.1);
  border-radius: 50%;
  background: rgba(255,255,255,0.82);
  color: var(--text-2);
  box-shadow: 0 8px 24px rgba(28,35,51,0.09), inset 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.app-fan-pfeil:hover {
  color: var(--orange);
  border-color: rgba(255,90,60,0.28);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28,35,51,0.13);
}
.app-fan-pfeil:focus-visible,
.app-fan-punkt:focus-visible,
.app-fan-kategorien button:focus-visible { outline: 3px solid rgba(255,90,60,0.3); outline-offset: 3px; }
.app-fan-pfeil svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-fan-punkte { display: flex; align-items: center; justify-content: center; gap: 7px; }
.app-fan-punkt {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28,35,51,0.16);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.app-fan-punkt:hover { background: rgba(28,35,51,0.38); transform: scale(1.35); }
.app-fan-punkt.aktiv { width: 22px; border-radius: 999px; background: var(--orange); }
.app-fan-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  line-height: 1.4;
}
.app-fan-status span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--peach);
  color: var(--orange);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app-fan-status strong { color: var(--tinte); font-size: 0.96rem; }
.app-fan-status small { color: var(--text-2); font-size: 0.76rem; }
.app-fan-sektion .demo-hinweis { margin-top: 14px; }

@media (max-width: 1080px) {
  .app-fan-buehne.app-fan-bereit { height: 565px; }
  .app-fan-bereit .app-fan-karte { width: 258px; }
}
@media (max-width: 820px) {
  .app-fan-sektion { padding: 78px 0 70px; }
  .app-fan-kopf h2 { letter-spacing: -1.8px; }
  .app-fan-buehne:not(.app-fan-bereit) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-fan-buehne.app-fan-bereit { height: 520px; }
  .app-fan-bereit .app-fan-karte { width: 246px; }
}
@media (max-width: 620px) {
  .app-fan-sektion { padding: 66px 0 62px; }
  .app-fan-kopf { margin-bottom: 22px; }
  .app-fan-kopf h2 { font-size: 2.55rem; }
  .app-fan-kopf p { font-size: 0.94rem; }
  .app-fan-kategorien { gap: 6px; margin-bottom: 12px; }
  .app-fan-kategorien button { min-height: 38px; padding: 7px 12px; font-size: 0.74rem; }
  .app-fan-buehne:not(.app-fan-bereit) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .app-fan-buehne.app-fan-bereit { height: 475px; }
  .app-fan-bereit .app-fan-karte { top: 12px; width: min(240px, 64vw); }
  .app-fan-telefon { border-radius: 34px; outline-width: 5px; }
  .app-fan-telefon img { border-radius: 34px; }
  .app-fan-nav { gap: 9px; }
  .app-fan-pfeil { width: 43px; height: 43px; }
  .app-fan-punkte { gap: 4px; }
  .app-fan-punkt { width: 5px; height: 5px; }
  .app-fan-punkt.aktiv { width: 16px; }
  .app-fan-status { flex-wrap: wrap; gap: 7px; margin-top: 14px; }
  .app-fan-status span { font-size: 0.68rem; }
  .app-fan-status strong { font-size: 0.88rem; }
}
@media (max-width: 390px) {
  .app-fan-buehne.app-fan-bereit { height: 450px; }
  .app-fan-bereit .app-fan-karte { width: min(224px, 64vw); }
  .app-fan-kategorien button { padding-right: 10px; padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-fan-bereit .app-fan-karte,
  .app-fan-punkt,
  .app-fan-pfeil,
  .app-fan-kategorien button { transition: none; }
  .app-fan-bereit .app-fan-karte.schwebt { --fan-lift: 0px; }
}

/* ---------- Fußzeile ---------- */
.fuss { background: var(--dunkel); color: rgba(255,255,255,0.75); padding: 52px 0 30px; margin-top: 64px; }
.fuss-gitter { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
/* h3 statt h4: Zwischen der letzten h2 einer Sektion und dem Fuss fehlte
   sonst die Ebene h3 - wer mit einem Screenreader von Ueberschrift zu
   Ueberschrift springt, faellt in dieses Loch (WCAG 2.1). */
.fuss h3 { color: #fff; font-size: 0.95rem; margin-bottom: 12px; }
.fuss a { color: rgba(255,255,255,0.75); display: block; padding: 3px 0; font-size: 0.9rem; }
.fuss a:hover { color: #fff; }
.fuss .logo { color: #fff; }
.fuss-unten { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 36px; padding-top: 20px; font-size: 0.82rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
  .hero-gitter, .gitter.drei, .gitter.vier, .fuss-gitter { grid-template-columns: 1fr 1fr; }
  .zahlen { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 620px) {
  .hero-gitter, .gitter.zwei, .gitter.drei, .gitter.vier, .fuss-gitter, .wahl-knoepfe, .feld-paar { grid-template-columns: 1fr; }
  .nav { gap: 14px; }
  /* Hinweis (16.08.2026): Hier stand früher ".nav a.nur-gross { display: none; }".
     Die Regel hat die halbe Navigation am Handy unerreichbar gemacht. Das
     Ausblenden steckt jetzt im Abschnitt „Burger-Menü" weiter oben und
     greift nur noch, wenn es auch einen Knopf zum Aufklappen gibt. */
  .app-band { padding: 30px 22px; }
  .hero { min-height: 0; }
  .hero-hintergrund-animation { opacity: 0.34; }
  .hero-hintergrund-animation::after {
    background: linear-gradient(180deg,
      rgba(255, 241, 233, 0.92) 0%,
      rgba(255, 241, 233, 0.72) 54%,
      rgba(246, 247, 250, 0.35) 100%);
  }
}
/* Sehr schmale Bildschirme: nichts darf seitlich überlaufen */
h1, h2, h3, p, a, .zahl { overflow-wrap: break-word; }
@media (max-width: 430px) {
  h1 { font-size: 1.65rem; letter-spacing: -0.5px; }
  .hero { padding: 44px 0 36px; }
  .zahl { font-size: 1.6rem; }
}

/* Symbolreihe fuer die sozialen Netzwerke im Fuss (04.09.2026, seit
   21.09.2026 fuenf: Facebook, Instagram, LinkedIn, YouTube, TikTok).
   Angelehnt an ".karte .icon": dort ein heller Kreis mit orangenem Symbol,
   hier die dunkle Zwillingsvariante, etwas kleiner.
   WICHTIG: display und padding muessen zurueckgesetzt werden, weil ".fuss a"
   weiter oben display:block und padding setzt - ohne das Zuruecksetzen
   stuenden die Symbole untereinander statt nebeneinander.
   Platz: fuenf Kreise sind 230 px breit. Handy (320 px) hat 280 px, die
   Zwei-Spalten-Stufe ab 621 px rund 270 px. Knapp wird es nur direkt ueber
   900 px (vier Spalten) - dort gibt das Raster der ersten Spalte die paar
   fehlenden Pixel von selbst, WEIL die Reihe nicht umbricht. Deshalb bewusst
   KEIN flex-wrap: damit wuerde TikTok dort allein in eine zweite Zeile
   rutschen. */
.fuss-sozial { display: flex; gap: 10px; margin-top: 16px; }
.fuss .fuss-sozial a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.fuss .fuss-sozial a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.fuss .fuss-sozial a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ---------- Einwilligung fuer Google-Ads-Conversion ---------- */
.cookie-dialog {
  position: fixed;
  z-index: 10000;
  right: 18px;
  bottom: 18px;
  left: 18px;
  max-width: 980px;
  margin: 0 auto;
  color: var(--dunkel);
  background: #fff;
  border: 1px solid rgba(28, 35, 51, 0.14);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(28, 35, 51, 0.22);
}
.cookie-dialog-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: end;
  padding: 24px;
}
.cookie-dialog-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cookie-dialog h2 { margin: 0 0 8px; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.cookie-dialog p { max-width: 700px; margin: 0 0 8px; font-size: 0.9rem; line-height: 1.55; }
.cookie-dialog a { color: var(--dunkel); font-size: 0.86rem; font-weight: 600; text-decoration: underline; }
.cookie-dialog-aktionen { display: flex; gap: 10px; align-items: center; }
.cookie-knopf {
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.cookie-knopf-notwendig { color: var(--orange); background: #fff; }
.cookie-knopf-zustimmen { color: #fff; background: var(--orange); }
.cookie-knopf:hover { transform: translateY(-1px); }
.cookie-knopf:focus-visible,
.cookie-einstellungen:focus-visible { outline: 3px solid rgba(255, 90, 60, 0.35); outline-offset: 2px; }
.fuss .cookie-einstellungen {
  display: inline;
  padding: 0;
  color: rgba(255,255,255,0.75);
  background: none;
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.fuss .cookie-einstellungen:hover { color: #fff; }
@media (max-width: 760px) {
  /* ⚠ bottom NICHT auf 10px lassen: Auf den Anzeigen-Zielseiten sitzt dort
     die feste Anruf-/WhatsApp-Leiste. Der Dialog lag genau darueber, und ein
     bezahlter Besucher konnte weder anrufen noch schreiben noch den Schaden
     melden, bevor er ihn wegklickte - bei 91 % Handy-Anteil traf das fast
     jeden Klick. Der Wert deckt die 78 px der Leiste plus etwas Luft ab;
     auf Seiten ohne Leiste steht der Dialog nur etwas hoeher. */
  .cookie-dialog { right: 10px; bottom: calc(86px + env(safe-area-inset-bottom)); left: 10px; border-radius: 14px; }
  .cookie-dialog-inhalt { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
  .cookie-dialog-aktionen { display: grid; grid-template-columns: 1fr; }
  .cookie-knopf { width: 100%; }
  /* Kompakter, damit der Dialog die Knoepfe im Titelbereich nicht auch noch
     verdeckt. Der Text bleibt vollstaendig - eine Einwilligung muss
     informiert bleiben. */
  .cookie-dialog-kicker { display: none; }
  .cookie-dialog h2 { font-size: 1rem; line-height: 1.3; margin: 0 0 4px; }
  .cookie-dialog p { font-size: 0.82rem; line-height: 1.45; margin: 0 0 6px; }
  .cookie-dialog .cookie-knopf { padding: 10px 14px; font-size: 0.88rem; }
  /* ⚠ Der Textbereich wird begrenzt und scrollbar gemacht, NICHT gekuerzt.
     Gemessen am 13.09.2026 war der Dialog am Handy 353 px hoch und verdeckte
     damit alle drei Knoepfe im Titelbereich. Kuerzen waere der falsche Weg:
     Eine Einwilligung muss informiert bleiben, der Text gehoert vollstaendig
     hin. Mit Begrenzung plus Scrollbereich ist beides erfuellt - kompakt und
     vollstaendig. */
  .cookie-dialog-text { max-height: 88px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-knopf:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   STANDORT-KACHEL  (21st.dev "expand-map", ohne React und ohne framer)
   Zu: 240x140. Auf: volle Spaltenbreite bis 420 px, 300 hoch.
   ⚠ Die echte Google-Karte kommt erst nach dem zweiten Klick — siehe
   karte.js. Die Kachel hier überträgt nichts.
   ══════════════════════════════════════════════════════════════════════ */
.kmap {
  --kmap-grund: #ffffff; --kmap-rand: var(--linie); --kmap-strich: #1c2333;
  --kmap-text: var(--tinte); --kmap-text2: var(--text-2); --kmap-plan: #eef1f6;
  position: relative; width: 240px; max-width: 100%; cursor: pointer;
  user-select: none; outline: none; perspective: 1000px;
  transition: width 450ms cubic-bezier(.2,.9,.3,1.05);
}
.kmap.ist-offen { width: min(100%, 420px); }
.kmap:focus-visible .kmap-karte { outline: 3px solid var(--orange); outline-offset: 3px; }
.kmap-karte {
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--kmap-grund); border: 1px solid var(--kmap-rand);
  height: 140px; --rx: 0deg; --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: height 450ms cubic-bezier(.2,.9,.3,1.05), transform 250ms ease, box-shadow 250ms ease;
  box-shadow: 0 2px 6px rgba(28,35,51,.05), 0 12px 30px rgba(28,35,51,.10);
}
.kmap.ist-offen .kmap-karte { height: 300px; }
.kmap-raster { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--kmap-strich); opacity: .06; transition: opacity 300ms; }
.kmap.ist-offen .kmap-raster { opacity: 0; }
.kmap-plan { position: absolute; inset: 0; background: var(--kmap-plan); opacity: 0; transition: opacity 400ms 100ms; pointer-events: none; }
.kmap.ist-offen .kmap-plan { opacity: 1; }
.kmap-strassen { position: absolute; inset: 0; width: 100%; height: 100%; }
.kmap-strassen line { stroke: var(--kmap-strich); stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 800ms ease; }
.kmap-strassen .s1 { stroke-width: 4; opacity: .25; }
.kmap-strassen .s2 { stroke-width: 3; opacity: .20; transition-delay: 150ms; }
.kmap-strassen .s3 { stroke-width: 1.5; opacity: .10; transition-delay: 300ms; }
.kmap.ist-offen .kmap-strassen line { stroke-dashoffset: 0; }
.kmap-haus { position: absolute; display: block; border-radius: 2px; background: var(--kmap-strich); opacity: 0; transform: scale(.8); transition: opacity 400ms 400ms, transform 400ms 400ms; }
.kmap.ist-offen .kmap-haus { opacity: .14; transform: scale(1); }
.kmap-pin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -30px 0 0 -17px; fill: var(--orange); filter: drop-shadow(0 0 10px rgba(255,90,60,.5)); transform: scale(0) translateY(-20px); transition: transform 450ms cubic-bezier(.2,1.4,.4,1) 300ms; }
.kmap-pin circle { fill: #fff; }
.kmap.ist-offen .kmap-pin { transform: scale(1) translateY(0); }
.kmap-inhalt { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px; }
.kmap-kopf { display: flex; align-items: flex-start; justify-content: space-between; }
.kmap-symbol { width: 18px; height: 18px; color: var(--orange); filter: drop-shadow(0 0 4px rgba(255,90,60,.3)); transition: opacity 300ms, filter 300ms; }
.kmap:hover .kmap-symbol { filter: drop-shadow(0 0 8px rgba(255,90,60,.6)); }
.kmap.ist-offen .kmap-symbol { opacity: 0; }
.kmap-abzeichen { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(28,35,51,.06); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--kmap-text2); }
.kmap-abzeichen i { width: 6px; height: 6px; border-radius: 50%; background: var(--gruen); }
.kmap-fuss { display: flex; flex-direction: column; gap: 4px; }
.kmap-titel { color: var(--kmap-text); font-weight: 600; font-size: .95rem; letter-spacing: -.2px; transition: transform 300ms; }
.kmap:hover .kmap-titel { transform: translateX(4px); }
.kmap-adresse { color: var(--kmap-text2); font-size: .78rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 300ms, opacity 300ms; }
.kmap.ist-offen .kmap-adresse { max-height: 2em; opacity: 1; }
.kmap-linie { display: block; height: 1px; background: linear-gradient(90deg, rgba(255,90,60,.6), rgba(255,138,75,.3), transparent); transform: scaleX(.3); transform-origin: left; transition: transform 400ms ease; }
.kmap:hover .kmap-linie, .kmap.ist-offen .kmap-linie { transform: scaleX(1); }
.kmap-aktionen { display: none; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.kmap.ist-offen .kmap-aktionen { display: flex; }
.kmap-aktionen a, .kmap-aktionen button { font: inherit; font-size: .82rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; cursor: pointer; text-decoration: none; line-height: 1.2; }
/* #c0341a statt var(--orange) fuer den Umriss-Knopf: 5,6:1 auf Weiss. */
.kmap-aktionen a { color: #c0341a; border: 1.5px solid #c0341a; background: transparent; }
.kmap-aktionen button { color: #fff; border: 0; background: linear-gradient(90deg, var(--orange-hell), var(--orange)); }
.kmap-aktionen button:disabled { opacity: .5; cursor: default; }
.kmap-datenschutz { display: none; font-size: .7rem; color: var(--kmap-text2); margin-top: 4px; }
.kmap.ist-offen .kmap-datenschutz { display: block; }
.kmap-rahmen { position: absolute; inset: 0; z-index: 3; display: none; }
.kmap.ist-geladen .kmap-rahmen { display: block; }
.kmap-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.kmap.ist-geladen .kmap-inhalt, .kmap.ist-geladen .kmap-plan, .kmap.ist-geladen .kmap-datenschutz { display: none; }
.kmap-hinweis { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 10px; color: var(--kmap-text2); white-space: nowrap; opacity: 0; transition: opacity 200ms; }
.kmap:hover:not(.ist-offen) .kmap-hinweis { opacity: 1; }
/* Im dunklen Fuß: dunkle Kachel, helle Striche — die Vorlage ist ohnehin
   für dunklen Grund gebaut. */
.fuss .kmap { --kmap-grund: #2a2622; --kmap-rand: rgba(255,255,255,.08); --kmap-strich: #ffffff; --kmap-text: #ffffff; --kmap-text2: rgba(255,255,255,.62); --kmap-plan: #332e29; margin-top: 18px; }
.fuss .kmap-abzeichen { background: rgba(255,255,255,.08); }
.fuss .kmap-aktionen a { color: #ff8a4b; border-color: #ff8a4b; }
.fuss .kmap-karte { box-shadow: 0 12px 30px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) {
  .kmap, .kmap-karte, .kmap-strassen line, .kmap-haus, .kmap-pin, .kmap-titel, .kmap-linie { transition: none; }
}

/* ============================================================
   INSTAGRAM-BEITRÄGE (17.09.2026) — zwei Abschnitte, ein Skript
   (instagram-galerie.js). Nachbau der 21st.dev-Vorlagen „Scroll
   Morph Hero" und „Circular Gallery" ohne React und Tailwind.

   GRUNDZUSTAND = RUHIGES RASTER. Erst wenn das Skript läuft und
   „weniger Bewegung" NICHT eingestellt ist, setzt es .ist-aktiv —
   dann wird aus dem Raster die Bühne. So bleibt die Seite ohne
   JavaScript vollständig benutzbar.

   ⚠ Keine Klassen .knopf oder .hinweis hier drin (Website-CSS-Fallen):
   .knopf erzwingt weiße Schrift, .hinweis ist ausgeblendet.
   ============================================================ */
.ig-morph-sektion {
  padding: 0;
  background: linear-gradient(180deg, var(--grund) 0%, var(--peach) 42%, var(--peach) 70%, var(--grund) 100%);
}
.ig-morph-buehne { padding: 64px 20px; max-width: 1120px; margin: 0 auto; }
.ig-morph-intro { display: none; }
.ig-morph-kopf { text-align: center; max-width: 44rem; margin: 0 auto 32px; }
.ig-morph-kopf h2 span { color: var(--orange); }
.ig-morph-kopf p { color: #5b6170; margin-top: 10px; }
.ig-morph-karten {
  list-style: none;
  display: grid;
  /* 130px: Auf 320px breiten Handys passen so zwei Karten nebeneinander. */
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.ig-karte a { display: block; color: inherit; border-radius: 12px; }
/* Fokusrahmen in Tinte statt Orange: Orange auf Peach erreicht die nötigen
   3:1 Kontrast nicht. Ebenso ist #5b6170 statt --text-2 gewählt — --text-2
   kommt auf Peach nur auf 4,4:1 (nötig 4,5:1). */
.ig-karte a:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.ig-karte-drehen { position: relative; display: block; aspect-ratio: 4 / 5; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ig-karte-vorne,
.ig-karte-hinten {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 8px 22px rgba(28, 35, 51, 0.16);
}
.ig-karte-vorne { background: var(--linie); }
.ig-karte-vorne img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ig-karte-hinten {
  transform: rotateY(180deg);
  background: var(--dunkel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; padding: 6px;
}
.ig-karte-hinten span { color: var(--orange-hell); font-size: 0.55em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ig-karte-hinten b { color: #fff; font-size: 0.8em; font-weight: 600; }
.ig-karte a:hover .ig-karte-drehen,
.ig-karte a:focus-visible .ig-karte-drehen { transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) {
  .ig-karte-drehen { transition: none; }
}

/* ---------- (1) Aktiv: Bühne mit Kreis und Bogen ---------- */
.ig-morph.ist-aktiv { height: 260vh; }
.ig-morph.ist-aktiv .ig-morph-buehne {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  max-width: none; margin: 0; padding: 0;
  overflow: hidden; overflow: clip;
}
.ig-morph.ist-aktiv .ig-morph-intro {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: absolute; inset: 0; z-index: 1; pointer-events: none; text-align: center;
  padding: 0 24px;
}
.ig-morph-intro-titel { font-size: clamp(1.25rem, 2.6vw, 1.9rem); line-height: 1.2; font-weight: 600; color: var(--tinte); letter-spacing: -0.5px; }
.ig-morph-intro-hinweis { margin-top: 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #5b6170; }
.ig-morph.ist-aktiv .ig-morph-kopf {
  position: absolute; left: 50%; top: calc(76px + 3vh); z-index: 3;
  width: min(44rem, calc(100% - 40px)); margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}
.ig-morph.ist-aktiv .ig-morph-kopf .vorzeile { margin-bottom: 12px; }
.ig-morph.ist-aktiv .ig-morph-karten { display: block; position: absolute; inset: 0; z-index: 2; }
.ig-morph.ist-aktiv .ig-karte {
  position: absolute; left: 50%; top: 50%;
  width: 76px; height: 95px; margin: -47.5px 0 0 -38px;
  font-size: 16px;
  opacity: 0;
  will-change: transform, opacity;
  perspective: 1000px;
}
.ig-morph.ist-aktiv .ig-karte a,
.ig-morph.ist-aktiv .ig-karte-drehen { height: 100%; aspect-ratio: auto; }
@media (max-width: 720px) {
  .ig-morph.ist-aktiv { height: 230vh; }
  .ig-morph.ist-aktiv .ig-karte { width: 60px; height: 75px; margin: -37.5px 0 0 -30px; font-size: 13px; }
  .ig-morph.ist-aktiv .ig-morph-kopf { top: calc(70px + 2vh); }
  .ig-morph.ist-aktiv .ig-morph-kopf p { font-size: 0.9rem; }
  /* Zweizeilig: einzeilig stieß der Hinweis an die Karten links und rechts im Kreis. */
  .ig-morph-intro-hinweis { font-size: 0.6rem; letter-spacing: 0.12em; margin-top: 10px; max-width: 17em; text-wrap: balance; }
}

/* ---------- (2) Der 3D-Ring ---------- */
.ig-ring-sektion { height: 240vh; background: var(--grund); }
.ig-ring-buehne {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
}
.ig-ring-kopf { position: relative; z-index: 2; text-align: center; padding: calc(80px + 2vh) 20px 0; }
.ig-ring-kopf p { color: var(--text-2); margin-top: 8px; }
.ig-ring { position: relative; flex: 1; perspective: 2000px; }
.ig-ring-drehung { position: absolute; inset: 0; transform-style: preserve-3d; }
.ig-ring { --ig-ring-h: min(325px, 38vh); }
.ig-ring-karte {
  position: absolute; left: 50%; top: 50%;
  /* Größe folgt der Bildschirmhöhe: Durch die Perspektive wirkt die vorderste
     Karte gut ein Drittel größer — auf niedrigen Bildschirmen stieß sie sonst
     unten an. Der Ringradius im Skript rechnet mit der echten Breite. */
  height: var(--ig-ring-h); width: calc(var(--ig-ring-h) * 0.8);
  margin: calc(var(--ig-ring-h) * -0.5) 0 0 calc(var(--ig-ring-h) * -0.4);
  border-radius: 14px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 40px rgba(28, 35, 51, 0.22);
  background: var(--linie);
  display: block;
}
.ig-ring-karte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ig-ring-karte:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
@media (max-width: 720px) {
  .ig-ring-sektion { height: 200vh; }
  .ig-ring { --ig-ring-h: min(225px, 34vh); }
  .ig-ring-kopf { padding-top: calc(72px + 1vh); }
  .ig-ring-kopf p { font-size: 0.9rem; }
}

/* Drucken: Die Bühnen sind 2–3 Bildschirme hoch und drehen sich — auf
   Papier bleibt davon nur Leerraum. Das Raster mit den 12 Bildern reicht. */
@media print {
  .ig-ring-sektion { display: none !important; }
  .ig-morph.ist-aktiv { height: auto; }
  .ig-morph.ist-aktiv .ig-morph-buehne { position: static; height: auto; overflow: visible; padding: 24px 0; }
  .ig-morph.ist-aktiv .ig-morph-intro { display: none; }
  .ig-morph.ist-aktiv .ig-morph-kopf { position: static; transform: none !important; opacity: 1 !important; width: auto; margin: 0 auto 20px; }
  .ig-morph.ist-aktiv .ig-morph-karten { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ig-morph.ist-aktiv .ig-karte { position: static; width: auto; height: auto; margin: 0; transform: none !important; opacity: 1 !important; }
  .ig-morph.ist-aktiv .ig-karte a,
  .ig-morph.ist-aktiv .ig-karte-drehen { height: auto; aspect-ratio: 4 / 5; }
}

/* ==============================================================
   HANDY-REGELN (17.09.2026, Betreiber-Wunsch "Handy wie am Rechner"):
   Schadensarten-Kreis, "Warum carproof"-Lamellen und die schwebenden
   App-Chips behalten auch auf dem Handy die Desktop-Optik - nur kleiner.
   Vorher wurden sie dort zu Kacheln und Stapeln. Die Regeln stehen am
   Ende der Datei, damit sie die allgemeinen Regeln oben ueberstimmen.
   ============================================================== */

/* ---- (1) Schadensarten: Kreis auch auf dem Handy ---- */
@media (max-width: 720px) {
  /* Der Kreis sitzt fest bei 235 px (Mitte des geschlossenen Kastens). Ist eine
     Schadensart gewaehlt, waechst der Kasten nach unten und die Karte kommt
     UNTER den Kreis - in der Mitte wuerde sie am Handy vier der sechs Kacheln
     verdecken (Pruefer-Fund 17.09.2026). */
  .schaden-orbit-buehne {
    height: 470px;
    padding: 0;
    border-radius: 26px;
    background:
      radial-gradient(circle at 50% 235px, rgba(255, 90, 60, 0.13), transparent 29%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 242, 0.97));
    transition: height 0.3s ease;
  }
  .schaden-orbit.hat-auswahl .schaden-orbit-buehne { height: 690px; }
  .schaden-orbit-raster {
    opacity: 0.5;
    mask-image: radial-gradient(circle at 50% 235px, #000 12%, transparent 72%);
  }
  /* Ringgroesse folgt dem Radius aus dem Skript (--orbit-radius), damit die
     Kacheln auf der Linie bleiben. Der Radius laesst links und rechts Platz
     fuer ein halbes Etikett - sonst schneidet der Kasten beim Drehen die
     Beschriftung bei 3 und 9 Uhr ab. */
  .schaden-orbit-ring {
    display: block;
    top: 235px;
    width: calc(var(--orbit-radius, 121px) * 2);
    height: calc(var(--orbit-radius, 121px) * 2);
  }
  .schaden-orbit-ring::before { inset: 40px; }
  .schaden-orbit-kern {
    display: flex;
    top: 235px;
    width: 96px;
    height: 96px;
    padding: 10px 8px 9px;
    gap: 5px;
  }
  .schaden-orbit-kern::before { inset: -11px; }
  .schaden-orbit-kern-logo { width: 62px; height: 25px; padding: 5px 7px; }
  .schaden-orbit-kern > span:last-child { font-size: 0.58rem; }
  .schaden-orbit-knoten {
    position: absolute;
    inset: 0;
    display: block;
  }
  .schaden-orbit-knopf {
    position: absolute;
    left: 50%;
    top: 235px;
    width: 48px;
    height: 48px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    display: block;
    transform: translate(-50%, -50%);
    transition:
      transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease;
    will-change: transform;
  }
  .schaden-orbit.dreht .schaden-orbit-knopf { transition: none; }
  .schaden-orbit-icon {
    width: 100%;
    height: 100%;
    flex: none;
    background: transparent;
  }
  .schaden-orbit-icon svg { width: 21px; height: 21px; }
  .schaden-orbit-label {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    min-width: max-content;
    padding: 2px 7px;
    border: 1px solid rgba(28, 35, 51, 0.055);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 14px rgba(28, 35, 51, 0.055);
    font-size: 0.64rem;
    line-height: 1.35;
    transform: translateX(-50%);
  }
  .schaden-orbit-knopf.aktiv {
    border-color: rgba(255, 255, 255, 0.8);
    background: linear-gradient(145deg, var(--orange-hell), var(--orange));
    color: #fff;
    box-shadow: 0 16px 30px rgba(255, 90, 60, 0.3), 0 0 0 6px rgba(255, 90, 60, 0.1);
  }
  .schaden-orbit-knopf.aktiv .schaden-orbit-icon { background: transparent; color: #fff; }
  .schaden-orbit.hat-auswahl .schaden-orbit-knopf:not(.aktiv) .schaden-orbit-label { opacity: 0.48; }
  .schaden-orbit-detail {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 14px;
    width: calc(100% - 28px);
    min-height: 0;
    margin: 0;
    padding: 18px 18px 17px;
    border-radius: 20px;
    transform: translateX(-50%);
    animation-name: schaden-orbit-karte-ein-handy;
  }
  @keyframes schaden-orbit-karte-ein-handy {
    from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.96); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }
  .schaden-orbit-schliessen { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 1.15rem; }
  .schaden-orbit-detail-icon { width: 38px; height: 38px; margin-bottom: 10px; border-radius: 12px; }
  .schaden-orbit-detail-icon svg { width: 21px; height: 21px; }
  .schaden-orbit-detail-kategorie { margin-right: 34px; font-size: 0.62rem; }
  .schaden-orbit-detail h3 { font-size: 1.05rem; line-height: 1.3; }
  .schaden-orbit-detail-text { margin-top: 6px; font-size: 0.8rem; line-height: 1.5; }
  .schaden-orbit-aktion { margin-top: 12px; font-size: 0.82rem; }
}

/* ---- (2) Warum carproof: Lamellen auch auf dem Handy ---- */
@media (max-width: 900px) {
  .warum-akkordeon {
    display: flex;
    gap: 6px;
    height: 420px;
  }
  .warum-panel,
  .warum-panel.ist-aktiv {
    flex: 0 0 42px;
    width: 42px;
    height: 100%;
    border-radius: 18px;
    cursor: pointer;
  }
  .warum-panel.ist-aktiv {
    flex-basis: 180px;
    flex-grow: 1;
    width: auto;
  }
  .warum-panel:not(.ist-aktiv) .warum-panel-schleier {
    background: linear-gradient(180deg, rgba(28, 35, 51, 0.34), rgba(28, 35, 51, 0.9));
  }
  .warum-panel .warum-panel-nummer,
  .warum-panel:not(.ist-aktiv) .warum-panel-nummer {
    top: 14px;
    right: auto;
    left: 50%;
    font-size: 0.58rem;
    transform: translateX(-50%);
  }
  .warum-panel.ist-aktiv .warum-panel-nummer {
    right: 16px;
    left: auto;
    transform: none;
  }
  .warum-panel .warum-panel-inhalt,
  .warum-panel.ist-aktiv .warum-panel-inhalt {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 16px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    transform: none;
  }
  .warum-panel:not(.ist-aktiv) .warum-panel-inhalt {
    top: 44px;
    right: auto;
    bottom: 16px;
    left: 50%;
    width: 36px;
    padding: 0;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
  }
  .warum-panel.ist-aktiv .warum-panel-icon { width: 40px; height: 40px; border-radius: 12px; }
  .warum-panel.ist-aktiv .warum-panel-icon svg { width: 20px; height: 20px; }
  .warum-panel:not(.ist-aktiv) .warum-panel-icon { width: 32px; height: 32px; border-radius: 10px; }
  .warum-panel:not(.ist-aktiv) .warum-panel-icon svg { width: 16px; height: 16px; }
  .warum-panel.ist-aktiv .warum-panel-text strong { font-size: 1.02rem; line-height: 1.2; }
  .warum-panel.ist-aktiv .warum-panel-text small {
    display: block;
    margin-top: 6px;
    font-size: 0.74rem;
    line-height: 1.45;
  }
  .warum-panel:not(.ist-aktiv) .warum-panel-text strong {
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
  .warum-panel:not(.ist-aktiv) .warum-panel-text small { display: none; }
}

/* ---- (3) App-Werbung: Chips schweben auch auf dem Handy um den Inhalt ---- */
@media (max-width: 900px) {
  .app-promo-karte { padding: 150px 16px 128px; }
  .app-vorteile {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    max-width: none;
    pointer-events: none;
  }
  .app-vorteil {
    position: absolute;
    width: auto;
    min-width: 0;
    padding: 5px 9px 5px 5px;
    gap: 7px;
    font-size: 0.66rem;
    animation: app-chip-schweben 5.8s ease-in-out infinite;
    animation-delay: var(--chip-verzug, 0s);
  }
  .app-vorteil-icon { width: 28px; height: 28px; }
  .app-vorteil-icon svg { width: 16px; height: 16px; }
  .app-vorteil-schaden { top: 24px; left: 12px; right: auto; bottom: auto; }
  .app-vorteil-scan { top: 24px; right: 12px; left: auto; bottom: auto; }
  .app-vorteil-termin { top: 76px; left: 28px; right: auto; bottom: auto; }
  .app-vorteil-chat { top: 76px; right: 28px; left: auto; bottom: auto; }
  .app-vorteil-pdf { bottom: 34px; left: 14px; top: auto; right: auto; }
  .app-vorteil-ki { bottom: 34px; right: 14px; top: auto; left: auto; }
}
/* Sehr schmale Handys (bis 350 px, z. B. iPhone SE 1): Absolut gesetzte Chips
   brechen nie wegen des Nachbarn um - ohne Deckel ueberlappen sich die zwei
   Chips einer Reihe. Mit Deckel wird der Text zweizeilig, die Chip-Hoehe
   bleibt (Icon 28 px). Ab 351 px aendert sich nichts. */
@media (max-width: 350px) {
  .app-vorteil { max-width: calc(50% - 18px); }
  .app-vorteil-termin { left: 12px; }
  .app-vorteil-chat { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-vorteil { animation: none; }
  .schaden-orbit-knopf,
  .schaden-orbit-buehne,
  .warum-panel { transition: none; }
}

/* ==============================================================
   KOSTENKARTEN „Wer zahlt das Gutachten?" (17.09.2026, kosten-karten.js)
   Nachbau der 21st.dev-Vorlage „spotlight-card": Am Rechner folgt ein
   orangefarbener Leuchtrand der Maus (Position kommt als --spot-x/--spot-y
   in Kartenkoordinaten aus dem Skript, --spot blendet ein/aus). Karten
   bleiben weiss, Rand entsteht nur durch Licht und Schatten (Design-Regel).
   Am Handy: wischbare Reihe (scroll-snap) mit Punkten statt Stapel.
   ============================================================== */
/* --spot als Zahl registriert: So kann der Browser den Wert weich ueberblenden,
   und Ring UND inneres Licht folgen derselben Ein-/Ausblendung (ohne @property
   springt das innere Licht, der Ring blendet - aeltere Browser: nur das). */
@property --spot { syntax: '<number>'; inherits: true; initial-value: 0; }
.kosten-gitter .karte { --spot-x: 50%; --spot-y: 50%; --spot: 0; }
@media (hover: hover) and (pointer: fine) {
  /* Zartes Licht im Inneren der Karte, das mit der Maus wandert. Die
     transition-Liste wiederholt die der .karten-gitter-Karte plus --spot. */
  .kosten-gitter .karte {
    transition:
      transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.24s ease,
      border-color 0.24s ease,
      --spot 0.25s ease;
    background-image: radial-gradient(
      260px 260px at var(--spot-x) var(--spot-y),
      rgba(255, 138, 75, calc(0.16 * var(--spot))),
      rgba(255, 138, 75, 0) 70%
    );
  }
  /* Der Leuchtrand: ein 2 px breiter Ring direkt innen am Kartenrand. Die
     Maske laesst nur den Ring durch (Inhalt ausgestanzt), darum bleibt die
     weisse Karte unberuehrt. overflow: hidden der Karte schneidet den Ring
     sauber an der Rundung ab. */
  .kosten-gitter .karte::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    padding: 2px;
    background: radial-gradient(
      200px 200px at var(--spot-x) var(--spot-y),
      rgba(255, 90, 60, 0.95),
      rgba(255, 138, 75, 0.5) 42%,
      rgba(255, 138, 75, 0) 72%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: var(--spot);
    pointer-events: none;
  }
}
.kosten-punkte { display: none; }
@media (max-width: 720px) {
  /* Wischbare Reihe ueber die volle Breite (die 20 px des Containers werden
     als Rand innen weitergegeben, damit die naechste Karte anschneidet). */
  .kosten-gitter {
    display: flex;
    gap: 14px;
    /* Unten 48 px Luft: Der Scroller schneidet sonst den Kartenschatten
       (16 px Versatz + 38 px Weichzeichnung) hart ab; das negative
       margin-bottom holt die Luft wieder ein, die Punkte bleiben wo sie sind. */
    margin: 0 -20px -32px;
    padding: 10px 20px 48px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kosten-gitter::-webkit-scrollbar { display: none; }
  /* Tastatur: Das Skript macht den Scroller am Handy fokussierbar (tabindex),
     Pfeiltasten wischen dann. */
  .kosten-gitter:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
  .kosten-gitter .karte {
    flex: 0 0 min(84%, 320px);
    min-height: 0;
    scroll-snap-align: center;
  }
  .kosten-punkte {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }
  .kosten-punkte span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #cfd3da;
    transition: width 0.2s ease, background-color 0.2s ease;
  }
  .kosten-punkte span.aktiv { width: 24px; background: var(--orange); }
}
@media (prefers-reduced-motion: reduce) {
  .kosten-gitter .karte,
  .kosten-gitter .karte::after,
  .kosten-punkte span { transition: none; }
}

/* ============================================================
   UNSERE VIDEOS (19.09.2026, video-stapel.js)
   Nachbau der 21st.dev-Vorlage „Music Video Pin Stack" ohne
   React, GSAP und Tailwind.

   GRUNDZUSTAND = RUHIGE LISTE (ohne JavaScript, bei „weniger
   Bewegung", auf sehr niedrigen Bildschirmen): alle Videos
   untereinander, jedes mit Titel darunter.
   .ist-aktiv  → Bühne: große Überschrift, Karte in der Mitte,
                 Titel links, Art und Länge rechts.
   .ist-stapel → ab zwei Videos: Abschnitt wird höher, Bühne
                 klebt, Karten schieben sich übereinander.

   ⚠ Keine Klassen .knopf oder .hinweis hier drin (Website-CSS-
   Fallen): .knopf erzwingt weiße Schrift, .hinweis ist aus.
   ============================================================ */
.video-stapel-sektion {
  background: linear-gradient(180deg, var(--grund) 0%, var(--peach) 16%, var(--peach) 84%, var(--grund) 100%);
}
.video-stapel-buehne { max-width: 960px; margin: 0 auto; padding: 72px 20px; }
.video-stapel-titel {
  position: relative; z-index: 0;
  margin: 0 0 -0.32em;
  font-size: clamp(2.4rem, 8.4vw, 6rem);
  font-weight: 500; line-height: 0.95; letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--dunkel);
  text-wrap: balance;
}
.video-stapel-titel span { color: var(--orange); }
.video-stapel-liste { position: relative; z-index: 1; list-style: none; display: grid; gap: 40px; }
.video-karte-link {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(33, 30, 27, 0.12);
  color: inherit;
}
.video-karte-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.video-karte-link:hover img,
.video-karte-link:focus-visible img { transform: scale(1.04); }
/* Fokusrahmen in Tinte statt Orange: Orange auf Peach erreicht die
   nötigen 3:1 Kontrast nicht (wie bei den Instagram-Karten). */
.video-karte-link:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; }
/* Mit der Tastatur angesprungen: nicht unter der klebenden Kopfzeile
   (bis zu ~100px hoch, wenn „Schaden melden" am Handy umbricht). */
.video-karte-link { scroll-margin-top: 112px; }
.video-karte-knopf {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px 8px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(33, 30, 27, 0.14);
  color: var(--tinte);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  pointer-events: none;
}
.video-karte-knopf .ico { color: var(--orange); font-size: 1.15rem; letter-spacing: 0; }
.video-karte-schleier {
  position: absolute; inset: 0; z-index: 3;
  background: var(--dunkel); opacity: 0; pointer-events: none;
}
.video-karte-text {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; margin-top: 14px;
}
.video-karte-titel { font-size: 1.1rem; font-weight: 600; color: var(--tinte); }
/* #5b6170 statt --text-2: --text-2 kommt auf Peach nur auf 4,4:1. */
.video-karte-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #5b6170; }
.video-stapel-kanal {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: max-content; margin: 36px auto 0;
  color: var(--tinte); font-weight: 600; font-size: 0.95rem;
}
.video-stapel-kanal .ico { color: var(--orange); transition: transform 0.2s ease; }
.video-stapel-kanal:hover .ico { transform: translateX(3px); }
.video-stapel-kanal:hover { text-decoration: underline; text-underline-offset: 4px; }
.video-stapel-kanal:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; border-radius: 6px; }
.video-stapel-seite { display: none; }

/* ---------- Bühne (.ist-aktiv) ---------- */
.video-stapel.ist-aktiv { height: 100vh; height: 100svh; }
.video-stapel.ist-aktiv .video-stapel-buehne {
  /* Höhe der klebenden Kopfzeile: Überschrift und Karte beginnen erst
     unterhalb. */
  --kopfhoehe: 72px;
  /* Kartenbreite wie in der Vorlage, zusätzlich so begrenzt, dass die
     Karte auch auf flachen Bildschirmen ganz unter die Kopfzeile passt. */
  --video-b: min(72vw, calc(100vw - 26rem), 1120px, calc((100vh - var(--kopfhoehe) - 120px) * 16 / 9));
  --video-b: min(72vw, calc(100vw - 26rem), 1120px, calc((100svh - var(--kopfhoehe) - 120px) * 16 / 9));
  --video-mitte: calc(50% + var(--kopfhoehe) / 2);
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  max-width: none; margin: 0; padding: 0;
  overflow: hidden; overflow: clip;
}
.video-stapel.ist-aktiv .video-stapel-titel {
  position: absolute; z-index: 1;
  /* Wie in der Vorlage verdeckt die Karte das untere Drittel der
     Überschrift: Oberkante = Kartenoberkante minus 0,55 Schrifthöhen —
     aber nie unter die Kopfzeile. */
  top: calc(var(--kopfhoehe) + 4px);
  top: max(calc(var(--kopfhoehe) + 4px), calc(var(--video-mitte) - var(--video-b) * 9 / 32 - 0.55em));
  left: clamp(14px, 1.8vw, 28px);
  margin: 0;
  font-size: clamp(2.6rem, min(10.6vw, 19vh), 13rem);
  white-space: nowrap;
  pointer-events: none;
}
.video-stapel.ist-aktiv .video-stapel-liste {
  display: block;
  position: absolute; z-index: 3;
  left: 50%; top: var(--video-mitte);
  width: var(--video-b);
  /* Höhe ausdrücklich (nicht nur per aspect-ratio): Sonst hätte die Karte
     in Browsern ohne aspect-ratio die Höhe 0. */
  height: calc(var(--video-b) * 9 / 16);
  transform: translate(-50%, -50%);
}
.video-stapel.ist-aktiv .video-karte {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
}
/* Schatten bewusst als box-shadow am Link und NICHT als filter:
   drop-shadow() am Kartenrahmen: Der Filter muss bei jedem Bild der
   Bewegung neu gerechnet werden (Messung 19.09.2026: Scrollen viermal
   langsamer). Nebeneffekt, der hier passt: Solange eine Karte noch
   hereinfährt, schneidet ihr Zuschnitt (clip-path) den Schatten weg —
   sichtbar wird er erst, wenn sie vorn liegt. */
.video-stapel.ist-aktiv .video-karte-link { height: 100%; aspect-ratio: auto; box-shadow: 0 6px 18px rgba(33, 30, 27, 0.13); }
/* Klicks nur auf dem sichtbaren Bild annehmen: Der Kartenrahmen (li) ist
   größer als das zugeschnittene Bild einer hereinfahrenden Karte und
   verschluckte sonst Klicks, die dem Video dahinter galten. */
.video-stapel.ist-aktiv .video-karte { pointer-events: none; }
.video-stapel.ist-aktiv .video-karte-link { pointer-events: auto; }
/* Titel, Art und Länge stehen auf der Bühne in den Seitenspalten. An der
   Karte nur OPTISCH verstecken (nicht display:none): Vorleser sollen sie
   weiterhin hören und die Überschrift anspringen können — die Seiten-
   spalten sind für sie ausgeblendet (aria-hidden). */
.video-stapel.ist-aktiv .video-karte-text {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.video-stapel.ist-stapel .video-karte { will-change: transform; }

.video-stapel.ist-aktiv .video-stapel-seite {
  display: grid; align-items: center;
  position: absolute; z-index: 4;
  top: var(--video-mitte); transform: translateY(-50%);
  max-width: 12.5rem;
  pointer-events: none;
}
/* Alle Einträge liegen in derselben Zelle übereinander; sichtbar ist nur
   der des vorderen Videos. */
.video-stapel-eintrag { grid-area: 1 / 1; opacity: 0; }
.video-stapel-eintrag > span { display: block; }
.video-stapel-eintrag.ist-vorn { opacity: 1; animation: video-flackern 0.075s steps(1) 4 both; }
@keyframes video-flackern {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; }
  100% { opacity: 1; }
}
.video-stapel.ist-aktiv .video-stapel-links {
  right: calc(50% + var(--video-b) / 2 + 18px);
  justify-items: end; text-align: right;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem); font-weight: 600; line-height: 1.35;
  color: var(--tinte);
}
.video-stapel.ist-aktiv .video-stapel-rechts {
  left: calc(50% + var(--video-b) / 2 + 18px);
  justify-items: start; text-align: left;
  font-size: clamp(0.72rem, 0.95vw, 0.88rem); line-height: 1.6; letter-spacing: 0.1em; text-transform: uppercase;
  color: #5b6170;
}
.video-stapel.ist-aktiv .video-stapel-kanal {
  /* Unter den Karten (z-index 3): Eine neue Karte schiebt sich darüber. */
  position: absolute; z-index: 2; left: 50%;
  bottom: max(14px, 2.4vh);
  margin: 0; transform: translateX(-50%);
}

/* Tablet und Handy: Titel über der Karte, Art und Länge darunter. */
@media (max-width: 1100px) {
  .video-stapel.ist-aktiv .video-stapel-buehne {
    --kopfhoehe: 64px;
    --video-b: min(88vw, 640px, calc((100vh - var(--kopfhoehe) - 300px) * 16 / 9));
    --video-b: min(88vw, 640px, calc((100svh - var(--kopfhoehe) - 300px) * 16 / 9));
  }
  .video-stapel.ist-aktiv .video-stapel-titel {
    left: 16px; right: 16px; top: calc(var(--kopfhoehe) + 2vh);
    /* „MEDIATHEK" in einer Zeile über die ganze Breite: Das Wort ist
       5,23 Schrifthöhen breit (gemessen 20.09.2026), 16.5vw ergeben
       also rund 86 % der Breite — von 320 bis 1100 px geprüft. Bis
       19.09. stand hier „FILM AB" mit 25vw. 11vh begrenzt die Schrift
       auf flachen Bildschirmen (Tablet quer), sonst stößt sie an den
       Videotitel darunter.
       ⚠ Wird die Überschrift länger, hier neu messen — sonst schneidet
       die Bühne das Wortende ab (nowrap + overflow: clip). Der
       Mindestwert 2.2rem passt noch bei 320 px (184 px breit). */
    font-size: clamp(2.2rem, min(16.5vw, 11vh), 7.5rem);
    white-space: nowrap;
  }
  .video-stapel.ist-aktiv .video-stapel-seite {
    left: 16px; right: 16px; max-width: none;
    transform: none;
    justify-items: center; text-align: center;
  }
  .video-stapel.ist-aktiv .video-stapel-links {
    top: auto;
    bottom: calc(100% - var(--video-mitte) + var(--video-b) * 9 / 32 + 14px);
  }
  .video-stapel.ist-aktiv .video-stapel-rechts {
    top: calc(var(--video-mitte) + var(--video-b) * 9 / 32 + 14px);
    letter-spacing: 0.06em;
  }
}

/* Ruhige Liste am Handy: Die Karte verdeckt weniger von der Überschrift. */
@media (max-width: 600px) {
  .video-stapel-titel { margin-bottom: -0.18em; }
}

/* Sicherheitsnetz: Auch wenn das Skript die Klassen schon gesetzt hat,
   gilt auf sehr niedrigen Bildschirmen die Höhe der ruhigen Liste
   (gleiche Grenze wie im Skript). */
@media (max-height: 559px) {
  .video-stapel.ist-aktiv,
  .video-stapel.ist-stapel { height: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .video-karte-link img,
  .video-stapel-kanal .ico { transition: none; }
  .video-stapel-eintrag.ist-vorn { animation: none; }
}

/* ---------- Video-Fenster: Abspielen direkt auf der Seite ----------
   <dialog> mit showModal(): Esc, Fokus-Falle und „Rest der Seite
   gesperrt" liefert der Browser mit. video-stapel.js füllt den Inhalt. */
html.video-fenster-offen { overflow: hidden; }
/* Browser ohne <dialog> (Safari bis 15.3, Firefox bis 97) kennen diese
   Regel nicht von selbst — sonst stünde der leere Spieler mitten auf der
   Seite. Die Karten öffnen dort einfach YouTube. */
.video-fenster:not([open]) { display: none; }
.video-fenster {
  /* So breit wie möglich, aber so, dass Kopf, Video und Fußzeile auch auf
     flachen Bildschirmen (Handy quer) ganz hineinpassen: 150px = Kopf,
     Fußzeile und Rand. */
  width: min(1120px, calc(100vw - 24px), calc((100vh - 150px) * 16 / 9 + 28px));
  width: min(1120px, calc(100vw - 24px), calc((100svh - 150px) * 16 / 9 + 28px));
  max-width: none; max-height: none;
  margin: auto; padding: 0; border: 0;
  background: transparent; color: #fff;
  overflow: visible;
}
.video-fenster::backdrop {
  background: rgba(20, 17, 15, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.video-fenster[open] { animation: video-fenster-auf 0.22s ease-out; }
@keyframes video-fenster-auf {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.video-fenster-inhalt {
  background: var(--dunkel);
  border-radius: 22px;
  padding: 10px 14px 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.video-fenster-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 0 10px 6px;
}
/* Klasse schlägt die allgemeine h2-Regel (Tinte, große Schrift). */
.video-fenster-titel {
  margin: 0;
  font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: 0;
  color: #fff;
}
.video-fenster-zu {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); color: #fff;
  font-size: 1.45rem; cursor: pointer;
  transition: background-color 0.2s ease;
}
.video-fenster-zu:hover { background: rgba(255, 255, 255, 0.2); }
.video-fenster-zu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.video-fenster-bild {
  aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: #000;
}
.video-fenster-bild video { display: block; width: 100%; height: 100%; background: #000; }
.video-fenster-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 18px; padding: 12px 6px 0;
}
.video-fenster-info { font-size: 0.8rem; letter-spacing: 0.03em; color: #d6cfc8; }
.video-fenster-youtube {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: auto;
  color: #fff; font-weight: 600; font-size: 0.92rem;
}
.video-fenster-youtube .video-fenster-yt { flex: none; width: 26px; height: auto; }
.video-fenster-youtube:hover { text-decoration: underline; text-underline-offset: 4px; }
.video-fenster-youtube:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .video-fenster[open] { animation: none; }
  .video-fenster-zu { transition: none; }
}