.hidden{display:none !important}.flex{display:flex}.opacity-100{opacity:1}
/* --- custom --- */
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/sofia-sans.woff2) format("woff2"); }
@font-face { font-family: "Sofia Sans Extra Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/sofia-sans-extra-condensed-800.woff2) format("woff2"); }
:root {
  --kalk: #EDF0EE;
  --tinte: #0A1E24;
  --petrol: #0B6470;
  --nebel: #DCE7E5;
  --schiefer: #46595D;
  --gischt: #7FD3C7;
  --grau: #9DB3B4;
  --wa: #25D366;
  --wa-hover: #1EBE5A;
  --linie: rgba(10, 30, 36, .16);
  --linie-hell: rgba(157, 179, 180, .3);
  --r: 6px;
  --vn-r: 6px;
  --rand: 64px;
  --abstand: 128px;
  --kopf: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Sofia Sans", system-ui, sans-serif;
  --aus: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
  accent-color: var(--petrol);
  scrollbar-color: var(--schiefer) var(--nebel);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kalk); color: var(--tinte); font: 400 18px/1.55 var(--text); font-family: var(--text); caret-color: var(--petrol); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
::selection { background: var(--petrol); color: var(--kalk); }
.dunkel ::selection { background: var(--gischt); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; border-radius: 3px; }
.dunkel :focus-visible { outline-color: var(--gischt); }
.num { font-variant-numeric: tabular-nums; }
a.num, .num a { white-space: nowrap; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[id] { scroll-margin-top: 104px; }

.wrap { width: min(100%, 1312px); margin-inline: auto; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.i-voll { fill: currentColor; }

/* Schrift */
.h1 { font: 800 96px/.95 var(--kopf); font-family: var(--kopf); text-transform: uppercase; letter-spacing: 0; padding-top: .06em; }
.h1 span { display: block; }
.h1 .akzent { color: var(--petrol); }
.h2 { font: 800 64px/.95 var(--kopf); font-family: var(--kopf); text-transform: uppercase; letter-spacing: 0; text-wrap: balance; padding-top: .05em; }
.h3 { font: 700 22px/1.25 var(--text); }
.gruppe-h { font: 700 17px/1.3 var(--text); }
.fliess { max-width: 62ch; }
.fliess + .fliess { margin-top: 16px; }
.leise { color: var(--schiefer); }
.dunkel .leise { color: var(--grau); }
.meta { font-size: 14px; line-height: 1.45; color: var(--schiefer); }
.dunkel .meta { color: var(--grau); }
/* Zeilen, die aus einer Maske steigen: unten hart beschnitten, oben Luft für Umlautpunkte */
.zeile { display: block; clip-path: inset(-.3em -.1em 0 -.1em); }
.zeile > span { display: block; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r); border: 0; font: 700 17px/1.1 var(--text); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, transform .25s var(--aus), box-shadow .25s var(--aus); }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(10, 30, 36, .55); }
.knopf:active { transform: translateY(0); box-shadow: none; transition-duration: .08s; }
.knopf-gross { min-height: 56px; padding: 0 26px; }
.knopf-wa { background: var(--wa); color: var(--tinte); }
.knopf-wa:hover { background: var(--wa-hover); }
.knopf-tel { background: var(--tinte); color: var(--kalk); }
.knopf-tel .i { color: var(--gischt); }
.knopf-tel:hover { background: var(--petrol); }
.knopf-tel:hover .i { color: var(--kalk); }
.dunkel .knopf-tel { background: var(--kalk); color: var(--tinte); }
.dunkel .knopf-tel .i { color: var(--petrol); }
.dunkel .knopf-tel:hover { background: var(--gischt); }
.dunkel .knopf-tel:hover .i { color: var(--tinte); }
.knopf-nr { padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(237, 240, 238, .28); font-weight: 600; }
.dunkel .knopf-nr { border-left-color: rgba(10, 30, 36, .25); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.pfeil-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--petrol); text-decoration: underline; text-decoration-color: rgba(11, 100, 112, .35); }
.pfeil-link:hover { text-decoration-color: currentColor; }
.pfeil-link .i { transition: transform .25s var(--aus); }
.pfeil-link:hover .i { transform: translateX(4px); }
.cta-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }

/* Sterne */
.sterne { display: inline-flex; gap: 2px; color: var(--petrol); }
.sterne .i { width: 16px; height: 16px; }
.dunkel .sterne { color: var(--gischt); }

/* Topbar */
.oben { background: var(--tinte); color: var(--kalk); font-size: 14px; line-height: 1.3; padding: 9px var(--rand); }
.oben .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 18px; }
.oben-gruppe { display: flex; align-items: center; gap: 28px; }
.oben-punkt { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.oben-punkt .i { width: 15px; height: 15px; color: var(--gischt); }
.oben .sterne { color: var(--gischt); }
.oben .sterne .i { width: 13px; height: 13px; color: inherit; }
.oben-sek { color: var(--grau); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--grau); }
.erreichbar .punkt { background: var(--wa); }
.erreichbar .status { color: var(--kalk); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--kalk); border-bottom: 1px solid var(--linie); padding: 10px var(--rand); transition: box-shadow .35s var(--aus), border-color .35s; }
.kopf.haftet { border-bottom-color: transparent; box-shadow: 0 14px 30px -22px rgba(10, 30, 36, .55); }
.kopf .wrap { display: flex; align-items: center; gap: 32px; min-height: 62px; }
.marke { display: block; flex: none; }
.marke img { height: 62px; width: auto; }
.nav { display: flex; gap: 30px; margin-inline: auto; }
.nav a { font: 600 16px/1 var(--text); text-decoration: none; padding: 10px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--aus), color .2s; }
.nav a:hover { color: var(--petrol); background-size: 100% 1.5px; }
.nav-extra { display: none; }
.kopf-rechts { display: flex; align-items: center; gap: 12px; }
.anruf { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 7px 20px 7px 8px; border-radius: var(--r); background: var(--tinte); color: var(--kalk); text-decoration: none; transition: background-color .2s, transform .25s var(--aus), box-shadow .25s var(--aus); }
.anruf:hover { background: var(--petrol); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(10, 30, 36, .55); }
.anruf:active { transform: translateY(0); box-shadow: none; }
.anruf-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: var(--petrol); transition: background-color .2s; }
.anruf:hover .anruf-icon { background: var(--tinte); }
.anruf-icon .i { width: 19px; height: 19px; }
.erreichbar .anruf-icon::after { content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--wa); border: 2px solid var(--tinte); }
.anruf-text { display: grid; line-height: 1; }
.anruf small { margin-bottom: 5px; font: 600 13px/1 var(--text); color: var(--gischt); }
.anruf:hover small { color: var(--kalk); }
.anruf strong { font: 700 21px/1 var(--text); }
.menue-knopf { display: none; width: 48px; height: 48px; margin-right: -8px; border: 0; background: none; cursor: pointer; place-items: center; border-radius: var(--r); }
.menue-knopf .i { width: 24px; height: 24px; }
.menue-knopf .zu { display: none; }
.kopf.offen .menue-knopf .auf { display: none; }
.kopf.offen .menue-knopf .zu { display: block; }

/* Hero */
.hero { padding: 34px var(--rand) 0; }
.hero-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: 30px; }
.hero-bild { grid-column: 1 / 7; position: relative; overflow: hidden; border-radius: var(--r); background: var(--nebel); }
.hero-bild img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; object-position: 62% 50%; }
.schild { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); background: var(--tinte); color: var(--kalk); padding: 12px 16px; border-radius: var(--r); font-size: 15px; line-height: 1.35; }
.schild strong { font-weight: 700; }
.schild small { display: block; margin-top: 2px; font-size: 13px; color: var(--grau); }
.hero-text { grid-column: 7 / 13; display: flex; flex-direction: column; padding-left: 24px; }
.lead { font: 400 22px/1.45 var(--text); max-width: 46ch; }
.checks { margin-top: 24px; border-top: 1px solid var(--linie); }
.checks li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linie); font-weight: 600; }
.checks .i { color: var(--petrol); width: 22px; height: 22px; }
.hero .knoepfe { margin-top: 28px; }
.hero .knoepfe .knopf { flex: 1 1 auto; }
.bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 20px; font-size: 15px; color: var(--schiefer); }
.bewertung strong { color: var(--tinte); }

/* Abschnitte */
.abschnitt { padding: var(--abstand) var(--rand); }
.dunkel { background: var(--tinte); color: var(--kalk); }
.nebel { background: var(--nebel); }
.zwei { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }

/* Intro mit Vorher/Nachher */
.intro .zwei { align-items: center; }
.intro-text { grid-column: 1 / 6; }
.satz-h { font: 600 38px/1.15 var(--text); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 24px; }
.vergleich { grid-column: 7 / 13; }
.vn { --pos: 50%; position: relative; aspect-ratio: 4 / 3; border-radius: var(--vn-r); overflow: hidden; background: var(--nebel); user-select: none; }
.vn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vn .vor { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vn .griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--kalk); pointer-events: none; }
.vn .griff span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--kalk); color: var(--tinte); transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(10, 30, 36, .28); }
.vn.gleitet .vor { transition: clip-path 2s var(--aus); }
.vn.gleitet .griff { transition: left 2s var(--aus); }
.vn input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.vn input:focus-visible ~ .griff span { outline: 2px solid var(--petrol); outline-offset: 3px; }
.vn .etikett { position: absolute; top: 14px; padding: 6px 10px; border-radius: var(--r); background: var(--tinte); color: var(--kalk); font: 700 13px/1 var(--text); letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.vn .e-vor { left: 14px; }
.vn .e-nach { right: 14px; }
.vergleich figcaption { margin-top: 10px; }

/* WhatsApp-Band */
.wa-band .zwei { align-items: center; row-gap: 56px; }
.wa-links { grid-column: 1 / 7; }
.wa-rechts { grid-column: 8 / 13; }
.wa-band .h2 { margin-bottom: 20px; }
.wa-band .fliess { color: var(--grau); max-width: 48ch; }
.wa { margin-top: 36px; }
.wa-frage { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 700 20px/1.3 var(--text); margin-bottom: 16px; }
.wa-frage .schritt-nr { font: 600 14px/1.3 var(--text); color: var(--schiefer); white-space: nowrap; }
.dunkel .wa-frage .schritt-nr { color: var(--grau); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips button { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; background: var(--nebel); color: var(--tinte); font: 600 16px/1.2 var(--text); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--aus); }
.chips button:hover { border-color: var(--petrol); }
.chips button:active { transform: scale(.97); }
.chips button[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--kalk); }
.dunkel .chips button { background: rgba(237, 240, 238, .07); border-color: var(--linie-hell); color: var(--kalk); }
.dunkel .chips button:hover { border-color: var(--gischt); }
.dunkel .chips button[aria-pressed="true"] { background: var(--gischt); border-color: var(--gischt); color: var(--tinte); }
.wa-zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--schiefer); font: 600 15px/1 var(--text); text-decoration: underline; cursor: pointer; }
.wa-zurueck .i { width: 16px; height: 16px; }
.dunkel .wa-zurueck { color: var(--grau); }
.wa-hilfe { font-size: 16px; line-height: 1.5; color: var(--schiefer); }
.wa-hilfe a { color: var(--petrol); font-weight: 700; }
.wa-band .wa { padding: 32px; border-radius: var(--r); border-top: 4px solid var(--wa); background: var(--kalk); color: var(--tinte); box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .7); }
.wa-band .wa .chips button { background: var(--nebel); border-color: transparent; color: var(--tinte); }
.wa-band .wa .chips button:hover { border-color: var(--petrol); }
.wa-band .wa .chips button[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--kalk); }
.wa-band .wa .schritt-nr, .wa-band .wa .wa-zurueck { color: var(--schiefer); }
.direkt { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie-hell); }
.wa-nummer { display: inline-block; margin-top: 6px; font: 800 60px/1 var(--kopf); color: var(--wa); text-decoration: none; font-variant-numeric: tabular-nums; }
.wa-nummer:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.telefon { width: min(100%, 340px); margin-inline: auto; padding: 11px; border-radius: 40px; background: #13292F; border: 1px solid var(--linie-hell); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7); }
.telefon-innen { border-radius: 30px; overflow: hidden; background: var(--nebel); color: var(--tinte); }
.chat-kopf { display: flex; align-items: center; gap: 12px; padding: 30px 16px 14px; background: var(--petrol); color: var(--kalk); }
.mono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding-top: 2px; border-radius: 50%; background: var(--kalk); color: var(--petrol); font: 800 19px/1 var(--kopf); letter-spacing: .03em; }
.chat-kopf strong { display: block; font: 700 16px/1.2 var(--text); }
.chat-kopf span { font-size: 13px; opacity: .85; }
.chat-verlauf { position: relative; min-height: 300px; padding: 22px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.chat-tag { align-self: center; padding: 4px 10px; border-radius: var(--r); background: rgba(237, 240, 238, .85); font-size: 12px; color: var(--schiefer); }
.blase { align-self: flex-end; max-width: 88%; padding: 10px 12px 8px; border-radius: 10px 10px 2px 10px; background: #D6F5DF; font-size: 15px; line-height: 1.45; transform-origin: 100% 100%; }
.blase .luecke { color: var(--petrol); font-weight: 700; text-decoration: underline dotted; text-underline-offset: .2em; }
.blase .gewaehlt { display: inline-block; font-weight: 700; }
.blase small { display: block; margin-top: 4px; text-align: right; font-size: 11px; color: var(--schiefer); }
.tippt { position: absolute; right: 14px; bottom: 22px; display: none; gap: 4px; padding: 13px 14px; border-radius: 10px 10px 2px 10px; background: #D6F5DF; }
.tippt i { width: 7px; height: 7px; border-radius: 50%; background: var(--schiefer); }
.chat-eingabe { display: flex; align-items: center; gap: 8px; padding: 10px 12px 18px; }
.chat-feld { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--schiefer); font-size: 14px; }
.chat-feld .i { width: 17px; height: 17px; }
.chat-senden { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--wa); color: var(--tinte); }
.chat-senden .i { width: 18px; height: 18px; }
.wa-hinweis { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: var(--grau); font-size: 15px; }
.wa-hinweis .i { width: 17px; height: 17px; color: var(--gischt); }

/* Leistungen */
.kopfzeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: end; margin-bottom: 56px; }
.kopfzeile .h2 { grid-column: 1 / 8; }
.kopfzeile p { grid-column: 8 / 13; }
.reihe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; align-items: center; padding: 48px 0; border-top: 1px solid var(--linie); }
.reihe .foto { grid-column: 1 / 7; }
.reihe .txt { grid-column: 8 / 13; }
.reihe.gedreht .foto { grid-column: 7 / 13; grid-row: 1; }
.reihe.gedreht .txt { grid-column: 1 / 6; grid-row: 1; }
.foto { position: relative; overflow: hidden; border-radius: var(--r); background: var(--nebel); }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.txt .h3 { margin-bottom: 12px; }
.txt .knoepfe, .txt .pfeil-link { margin-top: 22px; }
.panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 20px; margin: 16px 0 0; padding: 56px 0; background: var(--nebel); border-radius: var(--r); }
.panel-links { grid-column: 1 / 7; padding-left: 48px; }
.panel-rechts { grid-column: 8 / 13; padding-right: 48px; }
.panel .panel-h { font: 800 56px/.95 var(--kopf); text-transform: uppercase; color: var(--petrol); padding-top: .05em; }
.panel .statement { margin-top: 14px; font: 600 24px/1.3 var(--text); text-wrap: balance; }
.panel .knoepfe { margin-top: 24px; }
.ausserdem { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 16px; }
.ausserdem ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ausserdem li { position: relative; padding-left: 14px; }
.ausserdem li::before { content: ""; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--petrol); }

/* Warum */
.warum-kopf { grid-column: 1 / 5; }
.warum-kopf .fliess { margin-top: 20px; }
.warum-kopf .knoepfe { margin-top: 28px; }
.warum-liste { grid-column: 6 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.warum-liste li { padding-top: 18px; border-top: 1px solid rgba(10, 30, 36, .22); }
.warum-liste .h3 { margin-bottom: 8px; }
.warum-liste p { color: var(--schiefer); }

/* Ablauf */
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.schritte li { position: relative; padding-top: 22px; }
.schritte li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--linie); }
.schritte li::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: var(--petrol); transform-origin: 0 50%; }
.schritte .n { display: block; margin-bottom: 18px; font: 800 88px/.9 var(--kopf); color: var(--petrol); font-variant-numeric: tabular-nums; }
.schritte .h3 { margin-bottom: 8px; }
.schritte p { color: var(--schiefer); max-width: 40ch; }

/* Preis */
.preis .zwei { align-items: start; }
.preis-links { grid-column: 1 / 6; position: sticky; top: 124px; }
.preis-links .fliess { margin-top: 24px; }
.preis-links .knoepfe { margin-top: 28px; }
.preis-rechts { grid-column: 7 / 13; }
.preis-rechts .h3 { margin-bottom: 8px; }
.faktoren li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.faktoren .zeichen { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linie); color: var(--petrol); }
.faktoren strong { display: block; font-size: 19px; }
.faktoren p { color: var(--schiefer); }
.faktoren .minus { border-bottom: 0; }
.faktoren .minus .zeichen { background: var(--petrol); border-color: var(--petrol); color: var(--kalk); }
.faktoren .minus p { color: var(--tinte); }
.ergebnis { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-weight: 700; font-size: 19px; }
.ergebnis .i { color: var(--petrol); width: 24px; height: 24px; }

/* Bewertungen */
.stimmen-oben { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; margin-top: 56px; align-items: center; }
.gross-zitat { grid-column: 1 / 9; padding-right: 32px; border-right: 1px solid var(--linie); }
.gross-zitat blockquote { margin-top: 16px; font: 600 30px/1.35 var(--text); letter-spacing: -.01em; text-wrap: pretty; }
.gross-zitat figcaption { margin-top: 20px; font-size: 15px; color: var(--schiefer); }
.gross-zitat figcaption strong { color: var(--tinte); }
.schnitt { grid-column: 10 / 13; }
.schnitt .zahl { display: block; font: 800 96px/.9 var(--kopf); font-variant-numeric: tabular-nums; }
.schnitt .sterne { margin: 14px 0 8px; }
.schnitt p { font-size: 16px; color: var(--schiefer); max-width: 22ch; }
.drei-zitate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.drei-zitate figure { padding-top: 20px; border-top: 1px solid var(--linie); }
.drei-zitate blockquote { margin-top: 12px; font-size: 17px; }
.drei-zitate figcaption { margin-top: 12px; font-size: 14px; color: var(--schiefer); }
.drei-zitate figcaption strong { color: var(--tinte); }

/* Einsatzgebiet */
.gebiet .fliess { margin-top: 20px; color: var(--grau); }
.gebiet-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; margin-top: 48px; }
.gebiet-raster > div:first-child { grid-column: 1 / 7; }
.gebiet-raster > div:last-child { grid-column: 8 / 13; }
.gebiet .gruppe-h { margin-bottom: 16px; color: var(--kalk); }
.pillen { display: flex; flex-wrap: wrap; gap: 10px; }
.pillen li { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--linie-hell); border-radius: 999px; font-size: 16px; font-weight: 600; }
.pillen .hervor { border-color: var(--gischt); color: var(--gischt); }
.sitz { display: flex; align-items: center; gap: 10px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linie-hell); }
.sitz .i { color: var(--gischt); }

/* Fragen */
.faq .wrap { max-width: 860px; }
.faq-liste { margin-top: 48px; }
.faq-liste details { border-top: 1px solid var(--linie); }
.faq-liste details:last-child { border-bottom: 1px solid var(--linie); }
.faq-liste summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 48px; padding: 22px 0; font: 700 20px/1.3 var(--text); cursor: pointer; list-style: none; transition: color .2s; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary:hover { color: var(--petrol); }
.faq-liste summary .i { width: 22px; height: 22px; color: var(--petrol); transition: transform .4s var(--aus); }
.faq-liste details[open] summary .i { transform: rotate(45deg); }
.faq-liste details p { max-width: 65ch; padding: 0 48px 26px 0; }

/* Schluss */
.schluss { padding: 144px var(--rand); }
.schluss .h2 { font-size: 96px; }
.schluss .h2 .akzent { color: var(--gischt); }
.schluss .fliess { margin-top: 28px; color: var(--grau); }
.schluss .cta-zeile { margin-top: 40px; }
.zeiten { display: inline-flex; align-items: center; gap: 8px; color: var(--grau); font-size: 15px; }
.zeiten .i { width: 17px; height: 17px; color: var(--gischt); }

/* Fuß */
.fuss { padding: 72px var(--rand) 40px; border-top: 1px solid var(--linie-hell); font-size: 16px; }
.fuss-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; }
.fuss-marke { grid-column: 1 / 5; }
.fuss-marke .marke img { height: 76px; }
.fuss-marke p { margin-top: 18px; color: var(--grau); max-width: 36ch; }
.fuss-kontakt { grid-column: 6 / 10; }
.fuss-seiten { grid-column: 10 / 13; }
.fuss .gruppe-h { margin-bottom: 14px; color: var(--kalk); }
.fuss li + li { margin-top: 8px; }
.fuss a { text-decoration-color: rgba(237, 240, 238, .35); }
.fuss a:hover { color: var(--gischt); }
.fuss .leise { color: var(--grau); }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linie-hell); font-size: 14px; color: var(--grau); }
.fuss-unten ul { display: flex; gap: 24px; }
.fuss-unten li + li { margin-top: 0; }

/* Handy-Leiste */
.leiste { display: none; }

/* Dialog */
#wa-dialog { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: var(--r); background: var(--kalk); color: var(--tinte); box-shadow: 0 30px 80px -20px rgba(10, 30, 36, .55); }
#wa-dialog::backdrop { background: rgba(10, 30, 36, .62); }
.dlg { position: relative; padding: 28px; }
.dlg-kopf { display: flex; align-items: center; gap: 14px; padding-right: 48px; margin-bottom: 24px; }
.dlg-kopf .mono { width: 52px; height: 52px; font-size: 24px; background: var(--petrol); color: var(--kalk); }
.dlg-kopf h2 { font: 700 22px/1.2 var(--text); }
.dlg-kopf p { font-size: 15px; color: var(--schiefer); }
.dialog-zu { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--nebel); cursor: pointer; transition: background-color .2s, transform .3s var(--aus); }
.dialog-zu:hover { background: #cddcd9; transform: rotate(90deg); }
#wa-dialog .wa { margin-top: 0; }
.dlg-fuss { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--schiefer); }

/* Bewegung. Grundzustand ist immer der fertige, sichtbare Zustand.
   .auftakt setzt das Kopfskript nur bei sichtbarem Tab ohne reduzierte Bewegung,
   .anim und .ist-da setzt wa.js (mit 1,2-s-Rückfall für ruhende Beobachter). */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }

  /* Auftakt: Titel steigt aus der Maske, das Foto deckt sich auf, der Rest folgt */
  .auftakt .hero .zeile > span { animation: steigen 1.1s var(--aus) both; }
  .auftakt .hero .zeile + .zeile > span { animation-delay: .1s; }
  .auftakt .hero-bild { animation: aufdecken 1.3s var(--aus) .15s both; }
  .auftakt .hero-bild img { animation: setzen 1.9s var(--aus) .15s both; }
  .auftakt .schild { animation: hoch .8s var(--aus) 1s both; }
  .auftakt .hero-text > * { animation: hoch .9s var(--aus) both; }
  .auftakt .hero-text > :nth-child(1) { animation-delay: .3s; }
  .auftakt .hero-text > :nth-child(2) { animation-delay: .4s; }
  .auftakt .hero-text > :nth-child(3) { animation-delay: .5s; }
  .auftakt .hero-text > :nth-child(4) { animation-delay: .6s; }
  .anruf-icon.klingelt .i, .anruf:hover .anruf-icon .i, .knopf-tel:hover .i { animation: klingeln .7s ease-in-out; }
  .erreichbar .punkt { animation: atmen 2.4s ease-out infinite; }

  /* Leistungsfotos: Fenster öffnet sich, Bild setzt sich */
  .anim .foto[data-rein] { clip-path: inset(0 round var(--r)); transition: clip-path 1.3s var(--aus); }
  .anim .foto[data-rein] img { transition: transform 1.7s var(--aus); }
  .anim .foto[data-rein]:not(.ist-da) { clip-path: inset(10% 7% round var(--r)); }
  .anim .foto[data-rein]:not(.ist-da) img { transform: scale(1.12); }

  /* Ablauf: die Petrol-Linie läuft von Schritt zu Schritt */
  .anim .schritte li::after { transition: transform .9s var(--aus); }
  .anim .schritte .n { transition: opacity .8s var(--aus), transform .8s var(--aus); }
  .anim .schritte li:nth-child(2)::after, .anim .schritte li:nth-child(2) .n { transition-delay: .25s; }
  .anim .schritte li:nth-child(3)::after, .anim .schritte li:nth-child(3) .n { transition-delay: .5s; }
  .anim .schritte:not(.ist-da) li::after { transform: scaleX(0); }
  .anim .schritte:not(.ist-da) .n { opacity: 0; transform: translateY(28px); }

  /* Telefon: erst tippt es, dann steht die Nachricht da */
  .anim .telefon[data-rein] .tippt { display: flex; visibility: hidden; }
  .anim .telefon[data-rein].ist-da .tippt { animation: tippen-kurz 1.2s both; }
  .anim .telefon[data-rein] .tippt i { animation: tippen .9s ease-in-out infinite; }
  .anim .telefon[data-rein] .tippt i:nth-child(2) { animation-delay: .15s; }
  .anim .telefon[data-rein] .tippt i:nth-child(3) { animation-delay: .3s; }
  .anim .telefon[data-rein] .blase { transition: opacity .45s var(--aus) 1.1s, transform .6s var(--aus) 1.1s; }
  .anim .telefon[data-rein]:not(.ist-da) .blase { opacity: 0; transform: translateY(10px) scale(.94); }

  /* Schluss: dieselbe Maske wie der Titel oben, als Klammer */
  .anim .schluss [data-rein] .zeile > span { transition: transform 1.1s var(--aus); }
  .anim .schluss [data-rein] .zeile + .zeile > span { transition-delay: .1s; }
  .anim .schluss [data-rein]:not(.ist-da) .zeile > span { transform: translateY(110%); }

  /* Rückmeldung */
  [data-schritt]:not([hidden]) { animation: rueber .45s var(--aus); }
  .faq-liste details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--aus), content-visibility .5s allow-discrete; }
  .faq-liste details[open]::details-content { block-size: auto; }
  #wa-dialog[open] { animation: dialog-rein .45s var(--aus); }
  #wa-dialog[open]::backdrop { animation: abdunkeln .3s ease-out; }
}
@keyframes steigen { from { transform: translateY(105%); } }
@keyframes aufdecken { from { clip-path: inset(9% 7% round var(--r)); } to { clip-path: inset(0 round var(--vn-r)); } }
@keyframes setzen { from { transform: scale(1.14); } }
@keyframes hoch { from { opacity: 0; transform: translateY(18px); } }
@keyframes rueber { from { opacity: 0; transform: translateX(14px); } }
@keyframes klingeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(13deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(7deg); } 75% { transform: rotate(-3deg); } }
@keyframes atmen { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); } 70%, 100% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); } }
@keyframes tippen { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes tippen-kurz { 0% { visibility: visible; opacity: 0; } 12%, 78% { visibility: visible; opacity: 1; } 100% { visibility: hidden; opacity: 0; } }
@keyframes dialog-rein { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes abdunkeln { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Breiten */
@media (max-width: 1239px) {
  :root { --rand: 40px; }
  .nav { gap: 22px; }
  .h1 { font-size: 84px; }
  .oben-breit { display: none; }
}
@media (max-width: 1099px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--rand) 24px; background: var(--kalk); border-bottom: 1px solid var(--linie); box-shadow: 0 24px 40px -24px rgba(10, 30, 36, .35); }
  .nav a { display: flex; align-items: center; min-height: 52px; font-size: 18px; background: none; border-bottom: 1px solid var(--linie); }
  .kopf.offen .nav { display: flex; }
  .kopf-rechts { margin-left: auto; }
  .menue-knopf { display: grid; }
  .h2 { font-size: 56px; }
}
@media (max-width: 959px) {
  :root { --abstand: 96px; }
  .h1 { font-size: 72px; }
  .hero-raster, .zwei, .kopfzeile, .reihe, .panel, .stimmen-oben, .gebiet-raster, .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .hero-bild, .hero-text, .intro-text, .vergleich, .wa-links, .wa-rechts, .kopfzeile .h2, .kopfzeile p,
  .reihe .foto, .reihe .txt, .reihe.gedreht .foto, .reihe.gedreht .txt, .panel-links, .panel-rechts,
  .warum-kopf, .warum-liste, .preis-links, .preis-rechts, .gross-zitat, .schnitt,
  .gebiet-raster > div:first-child, .gebiet-raster > div:last-child, .fuss-marke, .fuss-kontakt, .fuss-seiten { grid-column: 1 / -1; grid-row: auto; }
  .hero-bild img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .hero-text { margin-top: 32px; padding-left: 0; }
  .lead { max-width: 44ch; }
  .intro .zwei { row-gap: 48px; }
  .kopfzeile { row-gap: 16px; }
  .panel { padding: 40px 32px; }
  .panel-links, .panel-rechts { padding-inline: 0; }
  .warum-liste { margin-top: 40px; }
  .schritte { grid-template-columns: 1fr; gap: 40px; }
  .preis-links { position: static; }
  .preis-rechts { margin-top: 48px; }
  .gross-zitat { padding-right: 0; border-right: 0; padding-bottom: 32px; border-bottom: 1px solid var(--linie); }
  .schnitt { margin-top: 32px; }
  .schluss .h2 { font-size: 72px; }
}
@media (max-width: 767px) {
  :root { --rand: 16px; --abstand: 72px; --vn-r: 0px; }
  body { font-size: 17px; }
  [id] { scroll-margin-top: 16px; }
  .h1 { font-size: min(60px, 17.5vw); }
  .h2 { font-size: 46px; }
  .wa-band .wa { padding: 24px 18px; }
  .h3 { font-size: 20px; }
  .oben { padding: 8px var(--rand); }
  .oben .wrap { font-size: 13px; gap: 12px; }
  .oben-weg { display: none; }
  .status { display: none; }
  .erreichbar .status { display: inline-flex; }
  .erreichbar .oben .sterne { display: none; }
  .kopf { position: relative; padding: 8px var(--rand); }
  .kopf .wrap { min-height: 48px; gap: 10px; }
  .marke img { height: 42px; }
  .kopf-rechts { gap: 4px; }
  .anruf { min-height: 46px; gap: 9px; padding: 6px 14px 6px 6px; }
  .anruf-icon { width: 34px; height: 34px; }
  .anruf-icon .i { width: 17px; height: 17px; }
  .anruf small { margin: 0; font: 700 15px/1 var(--text); color: var(--kalk); }
  .anruf strong { display: none; }
  .kopf-wa { display: none; }
  .nav-extra { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .nav-extra .knopf { width: 100%; }
  .hero { padding-top: 22px; }
  .hero-raster { margin-top: 20px; }
  .hero-bild { margin-inline: calc(-1 * var(--rand)); border-radius: 0; }
  .hero-bild img { aspect-ratio: 3 / 2; object-position: 50% 40%; }
  .schild { left: 12px; bottom: 12px; padding: 8px 12px; font-size: 14px; }
  .schild small { font-size: 12px; }
  .hero-text { margin-top: 18px; }
  .bewertung { order: -1; margin: 0 0 12px; font-size: 14px; }
  .checks { margin-top: 20px; }
  .checks li { padding: 12px 0; font-size: 16px; }
  .hero .knoepfe { margin-top: 24px; }
  .lead { font-size: 19px; }
  .knoepfe .knopf, .cta-zeile .knopf { width: 100%; }
  .knopf-tel span { white-space: nowrap; }
  .chat-verlauf { min-height: 190px; }
  .satz-h { font-size: 29px; }
  .vergleich { margin-inline: calc(-1 * var(--rand)); }
  .vergleich figcaption { padding-inline: var(--rand); }
  .wa-nummer { font-size: 46px; }
  .wa-frage { font-size: 18px; }
  .chips button { font-size: 15px; padding: 0 16px; }
  .reihe { padding: 36px 0; }
  .panel { padding: 32px 20px; }
  .panel .panel-h { font-size: 44px; }
  .panel .statement { font-size: 21px; }
  .ausserdem { grid-template-columns: 1fr; }
  .ausserdem ul { flex-direction: column; gap: 8px; }
  .warum-liste { grid-template-columns: 1fr; gap: 28px; }
  .schritte { gap: 28px; margin-top: 40px; }
  .schritte li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; }
  .schritte .n { grid-row: span 2; font-size: 64px; margin: 0; }
  .gross-zitat blockquote { font-size: 23px; }
  .schnitt .zahl { font-size: 80px; }
  .drei-zitate { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .faq-liste summary { font-size: 18px; padding: 18px 0; }
  .faq-liste details p { padding-right: 0; }
  .schluss { padding: 88px var(--rand); }
  .schluss .h2 { font-size: 60px; }
  .zeiten { width: 100%; }
  .fuss { padding-top: 56px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .fuss-unten { flex-direction: column; }
  .leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); background: var(--tinte); box-shadow: 0 -8px 24px -12px rgba(10, 30, 36, .5); }
  .leiste a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; font: 700 17px/1 var(--text); text-decoration: none; }
  .leiste .l-tel { color: var(--kalk); }
  .leiste .l-tel .i { color: var(--gischt); }
  .leiste .l-wa { background: var(--wa); color: var(--tinte); }
  .dlg { padding: 22px 18px; }
  .dlg-kopf .mono { width: 44px; height: 44px; font-size: 21px; }
  .dlg-kopf h2 { font-size: 19px; }
}
@media (max-width: 374px) {
  .marke img { height: 36px; }
  .anruf { padding-right: 10px; }
  .anruf small { font-size: 14px; }
  .knopf-gross { padding: 0 16px; font-size: 16px; }
}

/* OAW-Bearbeitungsleiste: Kopf klebt unter der Leiste statt dahinter */
@media (min-width: 768px) { html.oaw-top-on .kopf { top: var(--oaw-topH, 52px); } }