/* =========================================================================
   Taunus Car Care
   Mobile-first ab 375 px. Farbwelt aus der Bestandsseite uebernommen:
   Aqua #78d8ca als einziger Akzent auf dunklem Gruen und Anthrazit.
   Wichtig: Aqua erreicht auf Weiss kein AA-Kontrastverhaeltnis. Es wird
   deshalb nur als Flaeche mit dunkler Schrift oder als Text auf dunklem
   Grund verwendet - nie als aqua Text auf hellem Grund.
   ========================================================================= */

/* font-display: optional statt swap. Mit swap zeichnet der Browser zuerst die
   Ersatzschrift und tauscht sie dann aus; dabei bricht die Ueberschrift neu um und
   alles darunter springt (gemessene Layoutverschiebung 0,106). Mit optional
   entfaellt der Austausch. Da beide Schriften vorgeladen werden, von derselben
   Domain kommen und zusammen nur 73 KB gross sind, stehen sie praktisch immer
   rechtzeitig bereit; andernfalls greift die metrisch angepasste Ersatzschrift
   und die Schrift kommt beim naechsten Aufruf aus dem Zwischenspeicher. */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

/* Metrisch angepasste Ersatzschriften.
   Gemessen im Browser: Manrope 800 ist 88,5 % und Inter 400 ist 90,9 % so breit
   wie die Systemschrift. Ohne Ausgleich bricht die Ueberschrift vor dem Laden
   anders um, und der Text darunter springt beim Einwechseln (Layoutverschiebung
   0,138). Mit size-adjust belegt die Ersatzschrift denselben Platz. */
@font-face {
  font-family: 'Manrope Ersatz';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Roboto'), local('Arial');
  size-adjust: 88.5%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Ersatz';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Roboto'), local('Arial');
  size-adjust: 90.9%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* Farben */
  --tief:        #071513;
  --dunkel:      #0b201e;
  --tinte:       #111817;
  --schiefer:    #31514c;
  --aqua:        #78d8ca;
  --aqua-hell:   #9ce6db;
  --aqua-dunkel: #206b63;
  --papier:      #f2f1ec;
  --weiss:       #ffffff;
  --nebel:       #f6f8f6;
  --weich:       #dce5e1;
  --gedaempft:   #61706c;
  --linie:       #11181729;
  --warn:        #b4531a;
  --warn-grund:  #fdf3ea;

  /* Typografie */
  --schrift-titel: 'Manrope', 'Manrope Ersatz', 'Segoe UI', system-ui, sans-serif;
  --schrift-text:  'Inter', 'Inter Ersatz', 'Segoe UI', system-ui, sans-serif;

  /* Raster */
  --rand: 20px;
  --breit: 1180px;
  --eng: 720px;

  /* Bewegung */
  --weich-kurve: cubic-bezier(.22,.68,.36,1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinte);
  background: var(--papier);
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--aqua-dunkel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 8.2vw, 4.2rem); }
h2 { font-size: clamp(1.65rem, 5.6vw, 2.8rem); }
h3 { font-size: clamp(1.18rem, 3.4vw, 1.5rem); font-weight: 700; }
p  { margin: 0 0 1em; text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--aqua-dunkel);
  outline-offset: 3px;
  border-radius: 4px;
}

.nur-lesegeraet {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.springmarke {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--aqua); color: var(--tinte); padding: 12px 20px;
  font-weight: 700; border-radius: 0 0 10px 0;
}
.springmarke:focus { left: 0; }

/* ---------------------------------------------------------------- Bausteine */

.huelle { width: 100%; max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.huelle--eng { max-width: var(--eng); }

.block { padding: 64px 0; }
.block--eng { max-width: var(--eng); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.block--dunkel { background: var(--dunkel); color: var(--weiss); }
.block--dunkel h2, .block--dunkel h3 { color: var(--weiss); }
.block--tief { background: var(--tief); color: var(--weiss); }
.block--nebel { background: var(--nebel); }
.block--weiss { background: var(--weiss); }

.ueberschrift { margin-bottom: 36px; }
.augenbraue {
  font-size: .78rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--aqua-dunkel); margin: 0 0 12px;
}
.block--dunkel .augenbraue, .block--tief .augenbraue { color: var(--aqua); }
.fuehrung { font-size: 1.12rem; color: var(--gedaempft); max-width: 62ch; }
.block--dunkel .fuehrung, .block--tief .fuehrung { color: #b8c9c4; }
.klein { font-size: .875rem; color: var(--gedaempft); line-height: 1.6; }
.block--dunkel .klein, .block--tief .klein { color: #93a6a1; }
/* Fusszeile und Hero sind dunkel, tragen aber keine .block--dunkel-Klasse.
   Ohne diese Regel erbte .klein dort das Grau fuer helle Flaechen (3,59:1). */
.fuss .klein, .hero .klein, .leiste .klein { color: #9db2ad; }
.nummer { font-variant-numeric: tabular-nums; }

/* Knoepfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 12px; border: 0;
  font-family: var(--schrift-text); font-size: 1.02rem; font-weight: 700;
  text-decoration: none; cursor: pointer; text-align: center;
  background: var(--aqua); color: var(--tinte);
  transition: transform .18s var(--weich-kurve), background .18s, box-shadow .18s;
  min-height: 52px;
}
.knopf:hover { background: var(--aqua-hell); color: var(--tinte); transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  background: var(--weich); color: var(--gedaempft); cursor: not-allowed; transform: none;
}
.knopf--gross { padding: 18px 32px; font-size: 1.1rem; width: 100%; }
.knopf--zweit { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 2px var(--linie); }
.knopf--zweit:hover { background: var(--weiss); box-shadow: inset 0 0 0 2px var(--tinte); }
.block--dunkel .knopf--zweit, .block--tief .knopf--zweit {
  color: var(--weiss); box-shadow: inset 0 0 0 2px #ffffff44;
}
.block--dunkel .knopf--zweit:hover, .block--tief .knopf--zweit:hover {
  background: #ffffff14; box-shadow: inset 0 0 0 2px var(--aqua); color: var(--weiss);
}
.knopf--wa { background: #25d366; color: #05270f; }
.knopf--wa:hover { background: #47e483; color: #05270f; }
.knopf--klein { padding: 8px 14px; font-size: .84rem; min-height: 38px; border-radius: 9px; }
.knopf--warn { background: var(--warn-grund); color: var(--warn); box-shadow: inset 0 0 0 1px #d9a07a; }
.knopf--warn:hover { background: #fbe7d4; color: var(--warn); }
.knopf--gefahr { background: #fdecea; color: #a32014; box-shadow: inset 0 0 0 1px #e6a49c; }
.knopf--gefahr:hover { background: #fad9d4; color: #a32014; }

.knopfreihe { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) {
  .knopfreihe { flex-direction: row; flex-wrap: wrap; }
  .knopf--gross { width: auto; }
}

.marke {
  display: inline-block; background: var(--aqua); color: var(--tinte);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 6px; vertical-align: 2px; white-space: nowrap;
}
.marke--offen { background: var(--warn-grund); color: var(--warn); box-shadow: inset 0 0 0 1px #dfae8c; }

/* ---------------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,32,30,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid #ffffff17;
}
.kopf__innen {
  max-width: var(--breit); margin: 0 auto; padding: 12px var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Wort-Bild-Marke 885 x 300 (2,95:1), Bildmarke 280 x 280 (1:1).
   Massgeblich ist die Hoehe: 44 px mobil, 56 px auf dem Desktop. */
.kopf__marke {
  display: flex; align-items: center; flex-shrink: 0;
  line-height: 0; text-decoration: none;
}
.kopf__logo   { height: 44px; width: auto; }
.kopf__zeichen { height: 44px; width: auto; display: none; }

/* Kompakter Kopf: sobald gescrollt wird, tritt die Bildmarke an die Stelle
   der Wort-Bild-Marke und die Leiste wird flacher. */
.kopf--kompakt { padding-block: 0; }
.kopf--kompakt .kopf__innen { padding-top: 7px; padding-bottom: 7px; }
.kopf--kompakt .kopf__logo   { display: none; }
.kopf--kompakt .kopf__zeichen { display: block; height: 38px; }

.kopf__menue { display: none; }
.kopf__aktion { display: none; }

.kopf--schlicht { position: static; background: var(--dunkel); padding: 16px var(--rand); }
.kopf--schlicht .kopf__logo { height: 48px; }

@media (min-width: 900px) {
  .kopf__logo, .kopf__zeichen { height: 56px; }
  .kopf--kompakt .kopf__zeichen { height: 44px; }
  .kopf--schlicht .kopf__logo { height: 56px; }

  .kopf__menue {
    display: flex; gap: 26px; list-style: none; margin: 0; padding: 0;
    font-size: .95rem; font-weight: 500;
  }
  .kopf__menue a { color: #cfe0db; text-decoration: none; padding: 6px 0; position: relative; }
  .kopf__menue a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
    background: var(--aqua); transition: right .24s var(--weich-kurve);
  }
  .kopf__menue a:hover { color: var(--weiss); }
  .kopf__menue a:hover::after { right: 0; }
  .kopf__aktion { display: inline-flex; }
}

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

/* Mobil ist das Bild ein eigenes Band unter dem Textblock, nicht mehr der
   Hintergrund des gesamten Hero.
   Vorher lag es hinter allem: "cover" musste den 760x695-Ausschnitt auf 814 px
   Hoehe strecken und schnitt dafuer ein Drittel der Breite weg. Das Heck stand
   angeschnitten und stark abgedunkelt hinter dem Text, die Einfahrt war eine
   dunkle Flaeche.
   Jetzt entspricht die Bandhoehe 91,5vw genau dem Seitenverhaeltnis des
   Ausschnitts (760/695 = 1,094). Das Bild wird also nirgends beschnitten, und
   unter den vier Vorteilspunkten steht die vollstaendige Szene: Heck, Pflaster
   der Einfahrt, Hecke und der beleuchtete Hauseingang.
   Der Textblock darueber liegt auf glattem --tief statt auf einem abgedunkelten
   Foto - der Kontrast ist damit hoeher als zuvor und nicht mehr vom Bildinhalt
   abhaengig. */
.hero {
  position: relative; background: var(--tief); color: var(--weiss);
  padding: 30px 0 calc(91.5vw + 18px); overflow: hidden;
}
@media (min-width: 700px) { .hero { padding: 64px 0 72px; } }
.hero__bild { position: absolute; inset: auto 0 0 0; height: 91.5vw; z-index: 0; }
.hero__bild picture { display: block; width: 100%; height: 100%; }
/* Der Fokus sitzt unten: bleibt einmal weniger Platz als vorgesehen (etwa wenn
   ein Fensterbalken 100vw und die tatsaechliche Breite auseinanderfallen),
   verliert das Bild oben Himmel und nie unten die Einfahrt. */
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

/* Mobil dunkelt nur noch die Oberkante des Bandes ab - sie blendet das Foto
   weich aus der Hero-Farbe heraus, damit dort keine sichtbare Kante entsteht.
   Ab etwa der halben Bandhoehe ist keine Abdunklung mehr vorhanden: unter den
   Vorteilspunkten sieht man Pflaster, Hecke und Hauslicht in voller Staerke.
   Ueber dem Band liegt kein Foto mehr, deshalb braucht es auch keine Unterlage
   hinter dem Text. */
.hero__bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--tief)          0%,
    rgba(7,21,19,.84)    7%,
    rgba(7,21,19,.44)   16%,
    rgba(7,21,19,.15)   27%,
    rgba(7,21,19,.04)   39%,
    rgba(7,21,19,0)     50%);
}
.hero__innen { position: relative; z-index: 1; max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }

/* Der Hero ist eine dunkle Flaeche, traegt aber weder .block--dunkel noch
   .block--tief. Ohne diese Regeln erbten Augenbraue und zweiter Knopf die Farben
   fuer helle Flaechen - der Knopf stand mit dunklem Text auf dunklem Grund
   (gemessen 1,67:1). */
.hero .augenbraue { color: var(--aqua); }
.hero .knopf--zweit {
  color: var(--weiss);
  box-shadow: inset 0 0 0 2px #ffffff66;
  background: rgba(7, 21, 19, .45);
}
.hero .knopf--zweit:hover {
  background: rgba(7, 21, 19, .72);
  box-shadow: inset 0 0 0 2px var(--aqua);
  color: var(--weiss);
}
.hero h1 { color: var(--weiss); margin-bottom: 16px; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--aqua); }
.hero__fuehrung { font-size: 1.05rem; color: #c3d5d0; max-width: 46ch; margin-bottom: 22px; }
.hero .knopfreihe { margin-bottom: 22px; }
/* Auf schmalen Geraeten eine Spur kleiner, damit der Textblock kuerzer wird und
   das Fahrzeug im ersten Bildschirm sichtbar bleibt. */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(1.95rem, 8vw, 2.6rem); }
  .hero .augenbraue { margin-bottom: 8px; }
}

.hero__punkte {
  display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0;
  font-size: .87rem; color: #a9bfba;
}
.hero__punkte li { display: flex; align-items: center; gap: 7px; }
.hero__punkte li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); flex-shrink: 0;
}

/* Ab hier steht der Text links neben dem Wagen. Das Bild fuellt wieder den
   ganzen Hero, und der Verlauf dreht sich mit. */
@media (min-width: 700px) {
  .hero__bild { inset: 0; height: auto; }
  .hero__bild img { object-position: 50% 50%; }
  .hero__bild::after {
    background:
      linear-gradient(93deg,
        rgba(7,21,19,.97) 0%,
        rgba(7,21,19,.96) 38%,
        rgba(7,21,19,.88) 52%,
        rgba(7,21,19,.46) 68%,
        rgba(7,21,19,.18) 100%),
      linear-gradient(180deg,
        rgba(7,21,19,.55) 0%,
        rgba(7,21,19,0) 22%,
        rgba(7,21,19,0) 74%,
        rgba(7,21,19,.7) 92%,
        var(--tief) 100%);
  }
}

@media (min-width: 900px) {
  .hero { padding: 84px 0 92px; }
  .hero__fuehrung { font-size: 1.22rem; }
}

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

.schritte { display: grid; gap: 20px; counter-reset: schritt; }
@media (min-width: 800px) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

.schritt {
  background: var(--weiss); border-radius: 16px; padding: 26px 24px 28px;
  box-shadow: 0 1px 0 var(--linie); position: relative;
}
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--dunkel); color: var(--aqua);
  font-family: var(--schrift-titel); font-weight: 800; font-size: 1.1rem;
  margin-bottom: 16px;
}
.schritt h3 { margin-bottom: 8px; }
.schritt p { margin: 0; color: var(--gedaempft); font-size: .97rem; }

/* ---------------------------------------------------------------- Pakete */

.pakete { display: grid; gap: 20px; }
@media (min-width: 860px) { .pakete { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.paket {
  background: var(--weiss); border-radius: 18px; padding: 28px 24px;
  box-shadow: 0 1px 0 var(--linie); display: flex; flex-direction: column;
  position: relative; transition: transform .22s var(--weich-kurve), box-shadow .22s;
}
.paket:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -12px #11181733; }
.paket--betont {
  background: var(--dunkel); color: var(--weiss);
  box-shadow: 0 14px 40px -18px #0b201e88;
}
.paket--betont h3 { color: var(--weiss); }
.paket__marke { position: absolute; top: -11px; left: 24px; }
.paket__unter { font-size: .9rem; color: var(--gedaempft); margin: -4px 0 18px; }
.paket--betont .paket__unter { color: var(--aqua); }
.paket__preis {
  font-family: var(--schrift-titel); font-size: 2.3rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; margin-bottom: 4px;
}
.paket__dauer { font-size: .86rem; color: var(--gedaempft); margin-bottom: 20px; }
.paket--betont .paket__dauer { color: #93aca7; }
.paket__liste { list-style: none; margin: 0 0 24px; padding: 0; flex-grow: 1; font-size: .96rem; }
.paket__liste li { display: flex; gap: 10px; padding: 6px 0; align-items: flex-start; }
.paket__liste li::before {
  content: ''; flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px;
  background: currentColor; opacity: .85;
  -webkit-mask: var(--haken) center/contain no-repeat;
  mask: var(--haken) center/contain no-repeat;
  color: var(--aqua-dunkel);
}
.paket--betont .paket__liste li::before { color: var(--aqua); }
.paket__anwendung {
  font-size: .86rem; color: var(--gedaempft); background: var(--nebel);
  padding: 10px 14px; border-radius: 9px; margin: 0 0 20px;
}
.paket--betont .paket__anwendung { background: #ffffff12; color: #b8c9c4; }

:root {
  /* Weisses Haekchen fuer dunkle Flaechen. Steht hier und nicht im Konfigurator,
     weil die Verwaltung es ebenfalls braucht und dessen Stylesheet nicht laedt. */
  --haken-weiss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3E%3Cpath d='M7.6 14.3 3.8 10.5l1.3-1.3 2.5 2.5 7.3-7.3 1.3 1.3z'/%3E%3C/svg%3E");
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 14.3 3.8 10.5l1.3-1.3 2.5 2.5 7.3-7.3 1.3 1.3z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Preislogik */

.preislogik { display: grid; gap: 18px; }
@media (min-width: 760px) { .preislogik { grid-template-columns: repeat(2, 1fr); } }

.preiskarte {
  background: var(--weiss); border-radius: 14px; padding: 22px 22px 18px;
  box-shadow: 0 1px 0 var(--linie);
}
.preiskarte h3 { font-size: 1.05rem; margin-bottom: 4px; }
.preiskarte > p { font-size: .9rem; color: var(--gedaempft); margin-bottom: 14px; }
.preiszeile {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--linie); font-size: .95rem;
}
.preiszeile:first-of-type { border-top: 0; }
.preiszeile__wert { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preiszeile__hinweis { display: block; font-size: .82rem; color: var(--gedaempft); font-weight: 400; }

/* ---------------------------------------------------------------- Zeitgewinn */

.zeitgewinn { display: grid; gap: 28px; align-items: center; }
.zeitgewinn__bild { margin: 0; }
.zeitgewinn__bild img { border-radius: 16px; width: 100%; }
.zeitgewinn__bild figcaption { margin-top: 10px; }

@media (min-width: 900px) {
  /* Bild links ueber beide Zeilen, Text und Liste rechts darueber und darunter */
  .zeitgewinn { grid-template-columns: 1fr 1fr; gap: 24px 56px; }
  .zeitgewinn__bild { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .zeitgewinn__text { grid-column: 2; grid-row: 1; }
  .zeitgewinn .zeitliste { grid-column: 2; grid-row: 2; }
}

.zeitliste { list-style: none; margin: 0; padding: 0; }
.zeitliste li {
  display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #ffffff1f; align-items: flex-start;
}
.zeitliste li:last-child { border-bottom: 0; }
.zeitliste__weg { text-decoration: line-through; color: #7d938e; flex-shrink: 0; min-width: 8.5em; }
.zeitliste__statt { color: var(--weiss); }

/* ---------------------------------------------------------------- Inhaber */

.inhaber { display: grid; gap: 26px; align-items: start; }
@media (min-width: 800px) { .inhaber { grid-template-columns: 300px 1fr; gap: 44px; } }

.inhaber__text p { font-size: 1.02rem; color: var(--tinte); }
/* Die erste Zeile ist die Zwischenueberschrift des Abschnitts. */
.inhaber__ueber {
  font-size: clamp(1.25rem, 3.4vw, 1.6rem); margin-bottom: 16px; color: var(--tinte);
}
/* Der Wendepunkt der Geschichte steht allein und darf das auch zeigen. */
.inhaber__wende {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: 1.18rem; color: var(--aqua-dunkel); margin: 22px 0;
}
.inhaber__schluss { font-weight: 600; }
.inhaber__name {
  font-family: var(--schrift-titel); font-weight: 700; font-size: .95rem;
  color: var(--gedaempft); margin-top: 22px;
}
.inhaber__name::before {
  content: ''; display: block; width: 44px; height: 2px;
  background: var(--aqua-dunkel); margin-bottom: 10px;
}

.inhaber__bild { margin: 0; }
.inhaber__bild img {
  width: 100%; border-radius: 16px; aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: 0 14px 34px -22px #11181766;
}
@media (max-width: 799px) { .inhaber__bild { max-width: 280px; } }

.platzhalter {
  border: 2px dashed #b9c6c2; border-radius: 16px; background: var(--nebel);
  padding: 28px 22px; text-align: center; color: var(--gedaempft);
}
.platzhalter__marke {
  display: inline-block; background: var(--warn-grund); color: var(--warn);
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px; margin-bottom: 12px;
}
.platzhalter--bild { aspect-ratio: 4 / 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.platzhalter p { font-size: .88rem; margin: 0; }

/* ---------------------------------------------------------------- Ergebnisse */

.beispiele { display: grid; gap: 22px; }
@media (min-width: 760px) { .beispiele { grid-template-columns: repeat(2, 1fr); } }

.vergleich {
  position: relative; border-radius: 16px; overflow: hidden; background: var(--dunkel);
  aspect-ratio: 4 / 3; touch-action: pan-y; user-select: none; cursor: ew-resize;
}
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich__nachher { clip-path: inset(0 0 0 var(--teiler, 50%)); }
.vergleich__griff {
  position: absolute; top: 0; bottom: 0; left: var(--teiler, 50%);
  width: 3px; background: var(--weiss); transform: translateX(-1.5px); pointer-events: none;
  box-shadow: 0 0 0 1px #00000022;
}
.vergleich__griff::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: var(--weiss); box-shadow: 0 3px 12px #00000044;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111817'%3E%3Cpath d='M9.5 7 5 12l4.5 5V7zm5 0v10l4.5-5-4.5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 26px;
}
.vergleich input[type=range] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.vergleich__schild {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(7,21,19,.82); color: var(--weiss); backdrop-filter: blur(3px);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 6px;
}
.vergleich__seite {
  position: absolute; bottom: 12px; z-index: 2; font-size: .75rem; font-weight: 700;
  background: rgba(7,21,19,.72); color: #dbe8e4; padding: 4px 9px; border-radius: 5px;
}
.vergleich__seite--links { left: 12px; }
.vergleich__seite--rechts { right: 12px; }
.beispiel__bild { border-radius: 16px; overflow: hidden; position: relative; }
.beispiel__bild img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ---------------------------------------------------------------- Gebiet */

.gebiet { display: grid; gap: 26px; }
@media (min-width: 820px) { .gebiet { grid-template-columns: 1fr 1fr; gap: 48px; } }
.orte { columns: 2; column-gap: 24px; list-style: none; margin: 0; padding: 0; font-size: .98rem; }
.orte li { padding: 5px 0; break-inside: avoid; display: flex; gap: 9px; align-items: center; }
.orte li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua-dunkel); }

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

.faq { max-width: var(--eng); margin: 0 auto; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  cursor: pointer; padding: 18px 40px 18px 0; position: relative; list-style: none;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05rem; line-height: 1.35;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px;
  margin-top: -7px; transition: transform .24s var(--weich-kurve);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v6h6v2H9v6H7V9H1V7h6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v6h6v2H9v6H7V9H1V7h6z'/%3E%3C/svg%3E") center/contain no-repeat;
  color: var(--aqua-dunkel);
}
.frage[open] summary::after { transform: rotate(135deg); }
.frage__inhalt { padding: 0 0 20px; color: var(--gedaempft); }
.frage__inhalt p:last-child { margin-bottom: 0; }
.frage[open] .frage__inhalt { animation: aufblenden .3s var(--weich-kurve); }
@keyframes aufblenden { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Fusszeile */

.fuss { background: var(--tief); color: #9db2ad; padding: 48px 0 100px; font-size: .93rem; }
.fuss__innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.fuss__logo { height: 52px; width: auto; margin-bottom: 30px; }
@media (min-width: 720px) { .fuss__logo { height: 60px; } }
.fuss__spalten { display: grid; gap: 28px; margin-bottom: 32px; }
@media (min-width: 720px) { .fuss__spalten { grid-template-columns: repeat(3, 1fr); } }
.fuss h3 {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--aqua); margin-bottom: 10px; font-weight: 700;
}
.fuss a { color: #cfe0db; }
.fuss a:hover { color: var(--aqua); }
.fuss__recht { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 22px; border-top: 1px solid #ffffff1a; }
.fuss--schlicht { padding: 32px 0 40px; text-align: center; }
.fuss--schlicht .fuss__recht { justify-content: center; margin-top: 14px; }

/* ---------------------------------------------------------------- Sticky mobil */

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; gap: 10px; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
  background: rgba(11,32,30,.96); backdrop-filter: blur(10px);
  border-top: 1px solid #ffffff1f;
  transform: translateY(110%); transition: transform .3s var(--weich-kurve);
}
.leiste.sichtbar { transform: none; }
.leiste .knopf { flex: 1; padding: 13px 14px; font-size: .96rem; min-height: 48px; }
.leiste__wa { flex: 0 0 auto !important; width: 52px; padding: 0 !important; }
@media (min-width: 900px) { .leiste { display: none; } }

/* ---------------------------------------------------------------- Seite schmal */

.seite-schmal { background: var(--papier); }
.seite-schmal main { min-height: 60vh; }

/* ---------------------------------------------------------------- Kasten */

.kasten {
  background: var(--weiss); border: 1px solid var(--weich); border-radius: 16px;
  padding: 22px; margin: 26px 0;
}
.kasten__titel { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gedaempft); margin-bottom: 14px; font-family: var(--schrift-text); font-weight: 700; }
.daten { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.daten dt { font-size: .8rem; color: var(--gedaempft); padding-top: 12px; }
.daten dd { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.daten dd:last-of-type { border-bottom: 0; }
@media (min-width: 560px) {
  .daten { grid-template-columns: 9rem 1fr; }
  .daten dt { padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .daten dd { padding: 12px 0; }
  .daten dt:last-of-type { border-bottom: 0; }
}
.kasten__preis {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px 0 0; padding-top: 16px; border-top: 2px solid var(--tinte);
  font-family: var(--schrift-titel);
}
.kasten__preis strong { font-size: 1.65rem; font-weight: 800; }
.kasten__fuss { margin: 6px 0 0; }
code { background: var(--nebel); padding: 2px 7px; border-radius: 5px; font-size: .9em; }

/* Bestaetigungsseite */
.bestaetigung { padding-top: 44px; }
.haken { color: var(--aqua-dunkel); margin: 0 0 14px; }
.wa-aufruf {
  background: var(--dunkel); color: var(--weiss); border-radius: 16px;
  padding: 24px 22px; margin: 28px 0;
}
.wa-aufruf__text { color: #c3d5d0; font-size: .98rem; }
.wa-aufruf .knopf { margin-bottom: 12px; }
.wa-aufruf .klein { color: #8fa5a0; margin: 0; }
.schritte-liste { padding-left: 1.2em; color: var(--gedaempft); }
.schritte-liste li { margin-bottom: 8px; }
.haken-liste { list-style: none; padding: 0; margin: 0 0 1em; }
.haken-liste li { display: flex; gap: 10px; padding: 5px 0; color: var(--gedaempft); }
.haken-liste li::before {
  content: ''; flex-shrink: 0; width: 17px; height: 17px; margin-top: 5px;
  background: var(--aqua-dunkel);
  -webkit-mask: var(--haken) center/contain no-repeat; mask: var(--haken) center/contain no-repeat;
}

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

.recht { max-width: var(--eng); margin: 0 auto; padding: 40px var(--rand) 72px; }
.recht h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin-bottom: 10px; }
.recht h2 { font-size: 1.28rem; margin: 38px 0 10px; }
.recht h3 { font-size: 1.05rem; margin: 24px 0 6px; }
.recht p, .recht li { font-size: 1rem; }
.recht ul, .recht ol { padding-left: 1.3em; }
.recht li { margin-bottom: 7px; }
.recht address { font-style: normal; }
.entwurf {
  background: var(--warn-grund); border-left: 4px solid var(--warn);
  padding: 14px 18px; border-radius: 0 10px 10px 0; margin: 0 0 30px;
  font-size: .93rem; color: #6d3a12;
}
.entwurf strong { color: var(--warn); }
.stand { font-size: .85rem; color: var(--gedaempft); margin-bottom: 30px; }
.formularkasten {
  border: 1px solid var(--weich); border-radius: 12px; padding: 20px;
  background: var(--weiss); margin: 20px 0;
}

/* ---------------------------------------------------------------- Einblenden */

.einblenden { opacity: 0; transform: translateY(16px); }
.einblenden.sichtbar {
  opacity: 1; transform: none;
  transition: opacity .55s var(--weich-kurve), transform .55s var(--weich-kurve);
}
@media (prefers-reduced-motion: reduce) {
  .einblenden { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Hilfsklassen
   Ersetzen inline style-Attribute, damit die Content-Security-Policy ohne
   'unsafe-inline' auskommt. */

.mitte           { text-align: center; }
.mitte .fuehrung { margin-inline: auto; }
.knopfreihe--mitte { justify-content: center; }
.abstand-oben    { margin-top: 20px; }
.abstand-oben-s  { margin-top: 14px; }
.abstand-oben-m  { margin-top: 16px; }
.ohne-abstand    { margin: 0; }
.polster         { padding: 26px; }
.links           { text-align: left; }
.faq-abschluss   { padding: 34px 0 0; text-align: center; }
.schild-fest     { position: absolute; }
.linie-unten     { border-bottom: 1px solid var(--weich); padding-bottom: 22px; }
.enger-oben      { margin-bottom: 0; }
.enger-unten     { margin: 8px 0 0; }