/* =========================================================================
   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 */

.hero {
  position: relative; background: var(--tief); color: var(--weiss);
  padding: 48px 0 56px; overflow: hidden;
}
.hero__bild {
  position: absolute; inset: 0; z-index: 0;
}
.hero__bild img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero__bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(178deg, rgba(7,21,19,.72) 0%, rgba(7,21,19,.9) 58%, var(--tief) 100%);
}
.hero__innen { position: relative; z-index: 1; max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.hero h1 { color: var(--weiss); margin-bottom: 20px; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--aqua); }
.hero__fuehrung { font-size: 1.1rem; color: #c3d5d0; max-width: 46ch; margin-bottom: 28px; }
.hero .knopfreihe { margin-bottom: 30px; }

.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;
}

@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 {
  --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__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; }