/* ===========================================================================
Rohrreinigung Baumgart — Design System, ausgeliefert als eine Datei.
Reihenfolge: Schriften · Tokens · Dunkelmodus · Grundlagen · Komponenten ·
Abschnitte · Bewegung · Druck.
Keine externen Aufrufe. Keine Bibliothek. Keine Cookies.
=========================================================================== */
/* --- 1. Schriften — lokal, nicht von Google ------------------------------- */
@font-face{font-family:Saira;src:url(/assets/fonts/saira-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Saira;src:url(/assets/fonts/saira-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Saira;src:url(/assets/fonts/saira-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(/assets/fonts/barlow-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Semi Condensed";src:url(/assets/fonts/barlow-sc-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* --- 2. Tokens ------------------------------------------------------------ */
:root{
/* Markenblau, aus dem Logo abgenommen: #0090BC */
--blue-50:#ECF8FC;--blue-100:#D2EEF6;--blue-200:#A5DCEC;--blue-300:#6AC5DE;--blue-400:#2BA8CC;
--blue-500:#0090BC;--blue-600:#007A9F;--blue-700:#016281;--blue-800:#084F67;--blue-900:#0D4054;
/* Fahrzeug-Türkis */
--teal-100:#DFF6FA;--teal-200:#B9EBF3;--teal-300:#8AE0EE;--teal-400:#6ED3E6;--teal-500:#45BCD3;--teal-600:#2A9CC0;
/* Anthrazit, aus der Wortmarke: #262626 */
--ink-950:#131313;--ink-900:#1C1C1C;--ink-800:#262626;--ink-700:#3A3A3A;--ink-600:#525252;
--ink-500:#6E6E6E;--ink-400:#8F8F8F;--ink-300:#B5B5B5;--ink-200:#D6D6D6;--ink-100:#E9E9E9;--ink-50:#F5F5F5;
--white:#fff;
--red-600:#C8362B;--red-50:#FCEDEB;--green-600:#2E7D5B;--green-50:#EAF5F0;--amber-600:#B8760A;--amber-50:#FDF4E5;
--brand:var(--blue-500); /* Identität: Regeln, Symbole, Akzente */
--brand-solid:var(--blue-600); /* gefüllte Flächen mit weißer Schrift */
--brand-hover:var(--blue-700);
--brand-press:var(--blue-800);
--brand-subtle:var(--blue-50);
--brand-border:var(--blue-200);
--on-brand:var(--white);
--accent:var(--teal-400);
--accent-subtle:var(--teal-100);
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);
--text-inverse:var(--white);--text-inverse-muted:rgb(255 255 255/.72);
--text-link:var(--blue-600);--text-link-hover:var(--blue-700);
--surface-page:var(--white);--surface-subtle:var(--ink-50);--surface-card:var(--white);
/* Abschnittsbaender (.band--subtle): im Hellmodus mittleres Grau statt des
fast weissen Untergrunds, gedaempfter Text darauf eine Stufe dunkler
(Philipp, 06.09.2026). Im Dunkelmodus unveraendert, siehe Abschnitt 3. */
--band-bg:var(--ink-200);--band-border:var(--ink-300);--band-muted:var(--ink-700);
/* Aeusserer Kasten des Preisrechners: im Hellmodus ebenfalls Bandgrau,
im Dunkelmodus ohne eigenen Grund (Philipp, 06.09.2026). */
--calc-bg:var(--ink-200);
/* WhatsApp-Schaltflaeche im Rechner-Ergebnis: die weisse Geisterflaeche ist
im Hellmodus auf dem hellen Kasten unsichtbar — dort weiss mit dunklem
Rand, im Dunkelmodus die normale Geisterflaeche. */
--calc-ghost-bg:#fff;--calc-ghost-fg:var(--text-strong);--calc-ghost-border:var(--ink-400);
--calc-ghost-bg-hover:var(--ink-50);--calc-ghost-border-hover:var(--border-strong);
--surface-dark:var(--ink-800);--surface-darker:var(--ink-950);--surface-brand:var(--blue-600);
--hdr-bg:rgb(255 255 255/.92);
--border-subtle:var(--ink-100);--border-default:var(--ink-200);--border-strong:var(--ink-800);
/* Rahmen der Fallkacheln. Sie stehen auf --surface-dark wie die Seitenspalte;
der Rahmen muss deshalb hell sein. Im Hellmodus grenzt schon die dunkle
Fläche gegen die Seite ab, im Dunkelmodus trägt der Rahmen die Kante. */
--cases-border:var(--ink-500);
--border-on-dark:rgb(255 255 255/.16);
--focus-ring:var(--blue-400);
--danger:var(--red-600);--danger-bg:var(--red-50);
--success:var(--green-600);--success-bg:var(--green-50);
--warn:var(--amber-600);--warn-bg:var(--amber-50);
--font-display:Saira,"Barlow Semi Condensed",system-ui,sans-serif;
--font-body:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
--font-eyebrow:"Barlow Semi Condensed",Barlow,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--fs-display-1:clamp(38px,6vw,68px);--fs-display-2:clamp(30px,4.4vw,50px);
--fs-h1:clamp(30px,4vw,40px);--fs-h2:clamp(25px,3vw,32px);--fs-h3:22px;--fs-h4:19px;
--fs-lead:20px;--fs-body:17px;--fs-body-sm:15px;--fs-caption:13px;--fs-eyebrow:14px;
--lh-tight:1.04;--lh-heading:1.14;--lh-snug:1.35;--lh-body:1.6;
--ls-display:-.02em;--ls-heading:-.01em;--ls-eyebrow:.14em;--ls-button:.04em;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
--section-y:96px;--section-y-tight:64px;--container:1200px;--container-narrow:760px;--gutter:24px;
--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--radius-pill:999px;--rule-accent:4px;
/* Schaltflächen runder als der Rest — Kundenwunsch, bewusste Abweichung. */
--radius-btn:14px;
--control-h-md:44px;--control-h-lg:54px;
--shadow-xs:0 1px 2px rgb(19 19 19/.06);
--shadow-sm:0 1px 3px rgb(19 19 19/.08),0 1px 2px rgb(19 19 19/.04);
--shadow-md:0 4px 12px rgb(19 19 19/.09);
--shadow-lg:0 12px 32px rgb(19 19 19/.12);
--shadow-brand:0 8px 24px rgb(0 144 188/.28);
--overlay-photo-left:linear-gradient(90deg,rgb(19 19 19/.88) 0%,rgb(19 19 19/.58) 55%,rgb(19 19 19/.14) 100%);
--overlay-photo:linear-gradient(180deg,rgb(19 19 19/.70) 0%,rgb(19 19 19/.25) 45%,rgb(19 19 19/.78) 100%);
/* Kachelverlauf: oben fast klar, damit das Foto trägt; unten dicht für den Text. */
--overlay-card:linear-gradient(180deg,rgb(19 19 19/.25) 0%,rgb(19 19 19/0) 30%,rgb(19 19 19/0) 40%,rgb(19 19 19/.86) 100%);
--dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;--ease:cubic-bezier(.2,0,.2,1);
--photo-filter:none;
}
/* --- 3. Dunkelmodus — folgt der Systemeinstellung ------------------------- */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--brand:var(--blue-400);
--brand-solid:var(--blue-600);--brand-hover:var(--blue-500);--brand-press:var(--blue-400);
--brand-subtle:#0E2C3B;--brand-border:#1B4759;
--text-strong:#F2F4F5;--text-body:var(--ink-200);--text-muted:var(--ink-400);
--text-link:var(--blue-300);--text-link-hover:var(--blue-200);
--band-bg:var(--surface-subtle);--band-border:var(--border-subtle);--band-muted:var(--text-muted);
--calc-bg:transparent;
--calc-ghost-bg:rgb(255 255 255/.28);--calc-ghost-fg:#fff;--calc-ghost-border:transparent;
--calc-ghost-bg-hover:rgb(255 255 255/.4);--calc-ghost-border-hover:transparent;
--surface-page:var(--ink-950);--surface-subtle:#181818;--surface-card:var(--ink-900);
--surface-dark:#202020;--surface-darker:#0C0C0C;--surface-brand:var(--blue-700);
--hdr-bg:rgb(19 19 19/.92);
--border-subtle:#2A2A2A;--border-default:#383838;--border-strong:#4A4A4A;
--danger:#E8695C;--danger-bg:#2C1614;--success:#63C994;--success-bg:#122D22;
--warn:#D9A44E;--warn-bg:#2C2211;
--shadow-sm:0 1px 3px rgb(0 0 0/.5);--shadow-md:0 4px 12px rgb(0 0 0/.55);
--shadow-lg:0 12px 32px rgb(0 0 0/.6);--shadow-brand:0 8px 24px rgb(0 122 159/.4);
/* Sonnige Aufnahmen blenden auf dunklem Grund — leicht abdunkeln. */
--photo-filter:brightness(.86) saturate(.94);
}
/* --border-default ist hier fast so dunkel wie der Grund (Kontrast rund
1,5:1) — als Schaltflaechenrand kaum zu sehen. Ein Rand aus
Weiss-Transparenz bleibt auf jeder dunklen Flaeche (Seite, Sanftband,
dunkle Karte) bei rund 3,2:1, weil er sich am jeweiligen Grund misst. */
:root:not([data-theme="light"]) .btn--secondary{background:rgb(255 255 255/.08);border-color:rgb(255 255 255/.35)}
}
@media (hover:hover) and (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .btn--secondary:hover{background:rgb(255 255 255/.16);border-color:rgb(255 255 255/.5)}
}
/* --- 4. Grundlagen -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);
font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;text-wrap:pretty;padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-strong);font-weight:700;
line-height:var(--lh-heading);letter-spacing:var(--ls-heading);margin:0 0 var(--sp-4);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid rgb(0 122 159/.35);
transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
img{max-width:100%;display:block}
picture{display:block}
strong{color:var(--text-strong);font-weight:600}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ic{flex:none;display:block}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%}
.narrow{max-width:var(--container-narrow)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand-solid);color:#fff;
padding:var(--sp-3) var(--sp-5);border:0}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}
/* --- 5. Kopf -------------------------------------------------------------- */
/* Notfall-Leiste — dunkles Band über der Kopfzeile, scrollt mit weg. */
.ebar{background:var(--surface-darker);color:rgb(255 255 255/.82);
font-size:var(--fs-caption);line-height:1}
.ebar__in{display:flex;align-items:center;gap:var(--sp-4);
min-height:40px;flex-wrap:wrap;justify-content:center}
.ebar a,.ebar__hours{display:inline-flex;align-items:center;gap:var(--sp-2);border:0}
.ebar a{color:#fff;font-weight:600}
.ebar .ic{color:var(--accent);flex:none}
.ebar__tel span{font-family:var(--font-mono)}
.ebar__sep{color:rgb(255 255 255/.35)}
@media (max-width:560px){.ebar__sep{display:none}.ebar__in{gap:var(--sp-3);padding-block:var(--sp-2)}}
.hdr{position:sticky;top:0;z-index:60;background:var(--hdr-bg);
backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--border-subtle)}
.hdr__in{display:flex;align-items:center;gap:var(--sp-6);height:78px}
.hdr__logo{border:0;flex:none;display:flex}
.logo{height:44px;width:auto}
.logo--hell{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo--dunkel{display:none}:root:not([data-theme="light"]) .logo--hell{display:block}}
.nav{display:flex;gap:var(--sp-6);margin-left:auto}
.nav__link{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--text-strong);
border:0;padding:var(--sp-2) 0;position:relative}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);
transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease)}
/* Die aktive Seite bleibt markiert — unabhaengig vom Zeigegeraet. */
.nav__link.is-active{color:var(--brand)}
.nav__link.is-active::after{transform:scaleX(1)}
.hdr__tel{display:inline-flex;align-items:center;gap:var(--sp-2);border:0;flex:none;
font-family:var(--font-mono);font-weight:600;font-size:16px;color:var(--text-strong);
background:var(--brand-subtle);border:1px solid var(--brand-border);
padding:0 var(--sp-4);height:var(--control-h-md);border-radius:var(--radius-sm)}
.hdr__tel .ic{color:var(--brand)}
.hdr__burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;
margin-left:auto;background:none;border:1px solid var(--border-default);border-radius:var(--radius-sm);
color:var(--text-strong);cursor:pointer}
.hdr__burger .ic-close{display:none}
.hdr__burger[aria-expanded=true] .ic-menu{display:none}
.hdr__burger[aria-expanded=true] .ic-close{display:block}
.menu{display:none;flex-direction:column;border-top:1px solid var(--border-subtle);background:var(--surface-page)}
.menu.is-open{display:flex}
.menu a{border:0;border-bottom:1px solid var(--border-subtle);padding:var(--sp-4) var(--gutter);
font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--text-strong)}
.menu__tel{display:flex;align-items:center;gap:var(--sp-2);color:var(--brand)!important;font-family:var(--font-mono)}
/* --- 6. Augenbraue, Abschnittsköpfe -------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-eyebrow);
font-weight:600;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--brand);margin:0 0 var(--sp-4)}
/* Kein Strich vor der Augenbraue — Augenbrauen sind reiner Text in Markenblau. */
.sh{max-width:760px}
.sh--center{margin:0 auto;text-align:center}
.sh--center .eyebrow{justify-content:center}
.sh__title{margin:0 0 var(--sp-4);font-size:var(--fs-h2)}
.sh__lead{font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--text-muted);margin:0}
.sh--dark .sh__title{color:var(--white)}
.sh--dark .sh__lead{color:var(--text-inverse-muted)}
.sh--dark .eyebrow{color:var(--accent)}
/* --- 7. Schaltflächen ----------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
font-family:var(--font-display);font-weight:600;letter-spacing:var(--ls-button);
border-radius:var(--radius-btn);border:1px solid transparent;cursor:pointer;
text-decoration:none;white-space:nowrap;
transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease)}
.btn--md{height:var(--control-h-md);padding:0 var(--sp-5);font-size:16px}
.btn--lg{height:var(--control-h-lg);padding:0 var(--sp-6);font-size:18px}
/* Schmale Handys: lange Beschriftungen umbrechen statt über den Rand zu ragen */
@media (max-width:480px){
.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
.btn--md{height:auto;min-height:var(--control-h-md);padding-block:var(--sp-2)}
.btn--lg{height:auto;min-height:var(--control-h-lg);padding-block:var(--sp-2)}
}
/* Unter 390 px Seitenüberschriften etwas kleiner, damit „Verstopfungsbeseitigung" in eine Zeile passt */
@media (max-width:389px){:root{--fs-h1:min(30px,calc((100vw - 40px) / 11.6))}}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand-solid);color:#fff}
.btn--primary:active{background:var(--brand-press)}
/* Eine reine Kontur liest sich zu leicht als Text statt als Schaltflaeche —
deshalb zusaetzlich eine leichte Flaeche. Der dunkle Rand aus
--border-default reicht auf hellem Grund; auf sehr dunklem Grund verliert
er fast seinen Kontrast, das regelt der Dunkelmodus-Block unten. */
.btn--secondary{background:rgb(0 0 0/.045);color:var(--text-strong);border-color:var(--border-default)}
/* Auf den grauen Baendern (Hellmodus) verschwindet der Rand im Bandgrau —
deshalb dort weisser Grund und dunklerer Rand. Der Dunkelmodus hat eigene,
spezifischere Regeln in Abschnitt 3 und bleibt unberuehrt. */
.band--subtle .btn--secondary{background:#fff;border-color:var(--ink-400)}
.btn--inverse{background:#fff;color:var(--ink-900)}
/* Bewusst kraeftiger als --border-on-dark: Der Haarstrich der Marke reicht
fuer ruhige Flaechen, aber eine Schaltflaeche muss man als Schaltflaeche
erkennen. Das macht hier allein die helle Flaeche, ohne Kontur. Der Rand
aus .btn bleibt 1 px breit und durchsichtig, damit der Button exakt so hoch
und breit baut wie der gefuellte daneben. Grau bleibt es, damit der blaue
Hauptbutton daneben die erste Wahl bleibt. */
.btn--ghost-inverse{background:rgb(255 255 255/.28);color:#fff}
.calc .btn--ghost-inverse{background:var(--calc-ghost-bg);color:var(--calc-ghost-fg);border-color:var(--calc-ghost-border)}
.btn--ghost{background:transparent;color:var(--text-strong);border-color:transparent}
.btn--glow{box-shadow:var(--shadow-brand)}
a.btn{border-bottom:1px solid transparent}
/* Mehrere Knoepfe nebeneinander; am Handy rutschen sie untereinander. */
.btnrow{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
/* --- 8. Abzeichen --------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-2);border-radius:var(--radius-pill);
font-family:var(--font-eyebrow);font-weight:600;font-size:var(--fs-caption);
letter-spacing:.08em;text-transform:uppercase;padding:5px var(--sp-3);border:1px solid transparent}
.badge--brand{background:var(--brand-subtle);color:var(--blue-700);border-color:var(--brand-border)}
.badge--onDark{background:rgb(255 255 255/.12);color:#fff;border-color:var(--border-on-dark)}
.badge--muted{background:var(--surface-subtle);color:var(--text-muted);border-color:var(--border-default)}
.badge--success{background:var(--success-bg);color:var(--success);border-color:currentColor}
.badge__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge--brand{color:var(--blue-200)}}
/* --- 9. Karten ------------------------------------------------------------ */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);
border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-6);position:relative}
.card--accent::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
height:var(--rule-accent);background:var(--brand);border-radius:var(--radius-md) var(--radius-md) 0 0}
.card--accent{padding-top:calc(var(--sp-6) + var(--rule-accent))}
.card--brand{background:var(--surface-brand);border-color:transparent;color:#fff}
.card--brand h3,.card--brand h2{color:#fff}
.card--dark{background:var(--surface-dark);border-color:var(--border-on-dark);color:var(--text-inverse-muted)}
/* --- 9b. Bewertungskarte ----------------------------------------------------
Dunkel wie die Ortskacheln (.place) — dieselbe Flaeche, derselbe Rahmen,
kein Akzentbalken oben mehr. Grund: Beide Karten wechseln sich jetzt mit
hellen Abschnitten ab; eine helle Karte auf hellem Grund war kaum vom
Hintergrund zu unterscheiden. */
.bewertung{display:flex;flex-direction:column;height:100%;overflow:hidden;
background:var(--surface-dark);border-color:var(--cases-border);
border-radius:var(--radius-lg);
transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.bewertung__quote{position:absolute;top:var(--sp-2);right:var(--sp-5);
font-family:var(--font-display);font-size:64px;line-height:1;
color:rgb(255 255 255/.08);pointer-events:none;user-select:none}
.bewertung .rating__stars{display:flex;margin:0 0 var(--sp-3)}
.bewertung__text{position:relative;margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-inverse-muted)}
.bewertung__wer{display:flex;flex-direction:column;gap:2px;margin-top:auto;
padding-top:var(--sp-4);border-top:1px solid var(--border-on-dark)}
.bewertung__wer strong{color:var(--text-inverse)}
.bewertung__wer span{font-size:var(--fs-caption);color:var(--text-inverse-muted)}
/* --- 10. Leistungskachel — ganze Karte ist die Schaltfläche --------------- */
/* Leistungskachel: vollflächiges Foto, Schutzverlauf, Text unten aufsitzend.
Die festen Höhen halten Symbol und „Mehr erfahren“ über alle Kacheln bündig. */
.svc{position:relative;display:block;height:400px;overflow:hidden;
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
color:inherit;border-bottom:0;isolation:isolate;
transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.svc picture{position:absolute;inset:0;height:100%}
.svc__img{width:100%;height:100%;object-fit:cover;object-position:var(--kachel-lage,50% 50%);filter:var(--photo-filter)}
.svc__veil{position:absolute;inset:0;background:var(--overlay-card)}
.svc__body{position:absolute;left:var(--sp-5);right:var(--sp-5);bottom:var(--sp-5);
display:flex;flex-direction:column;gap:var(--sp-3)}
.svc__head{display:flex;align-items:center;gap:var(--sp-3);min-height:52px}
.svc__tile{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
background:var(--brand-solid);border-radius:var(--radius-sm);color:#fff}
.svc__title{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:700;
line-height:var(--lh-heading);color:#fff}
.svc__text{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body);
color:rgb(255 255 255/.72);min-height:48px}
.svc__more{display:flex;align-items:center;gap:6px;font-size:var(--fs-body-sm);
font-weight:600;color:var(--accent)}
/* Kachel ohne Foto: Markenfläche mit großem Symbol statt eines Bildes,
das etwas anderes zeigt. Fällt weg, sobald ein Foto vorliegt. */
@media (max-width:700px){.svc{height:320px}.svc__text{min-height:0}}
/* --- 11. Kennzahlen ------------------------------------------------------- */
.stat__value{font-family:var(--font-display);font-weight:700;font-size:26px;
color:var(--text-strong);line-height:1.2}
.stat__label{font-size:var(--fs-body-sm);color:var(--text-muted)}
/* Die Sterne stehen in der Kleinzeile, nicht ueber der Zahl — sonst saesse
dieser Posten tiefer als die drei daneben. */
.stat__label--bew{display:flex;align-items:center;gap:var(--sp-2)}
/* --- 12. Bewertungszeile -------------------------------------------------- */
.rating{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-body-sm);
color:var(--text-muted);flex-wrap:wrap;margin:0}
.rating__stars{display:inline-flex;gap:2px;color:#E8A800}
.rating--dark{color:var(--text-inverse-muted)}
/* --- 13. Abschnitte und Bänder ------------------------------------------- */
.sec{padding:var(--section-y) 0}
.sec--tight{padding:var(--section-y-tight) 0}
.band--subtle{background:var(--band-bg);border-top:1px solid var(--band-border);
border-bottom:1px solid var(--band-border)}
.band--subtle .stat__label,.band--subtle .sh__lead{color:var(--band-muted)}
.band--dark{background:var(--surface-dark);color:var(--text-inverse-muted)}
.band--dark h2,.band--dark h3{color:#fff}
/* Fettungen erben sonst das dunkle --text-strong und verschwinden im hellen Modus */
.band--dark strong,.band--brand strong{color:var(--text-inverse)}
.band--brand{background:var(--surface-brand);color:#fff}
/* CTA-Band traegt das Symbolmuster — weiss auf Blau in beiden Modi, wie die Vorlage. */
.band--brand.muster{--muster-farbe:#fff}
.grid{display:grid;gap:var(--sp-5)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center}
.split--wide{grid-template-columns:1fr 1.15fr}
/* Zwei Spalten, deren Zeilen parallel laufen: Zwischentitel, Ueberschrift,
Vorspann und Liste stehen links wie rechts auf derselben Hoehe. Die
Spalten-Hüllen und der Kopf loesen sich per display:contents auf, die
vier Kinder je Spalte landen in vier gemeinsamen Zeilen. */
.split--reihen{grid-auto-flow:column;grid-template-rows:repeat(4,auto);align-items:start;row-gap:0}
.split--reihen>div,.split--reihen .sh{display:contents}
.split--reihen ul{margin-top:var(--sp-8)}
.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}.mt-10{margin-top:var(--sp-10)}
/* --- 14. Aufmacher -------------------------------------------------------- */
.hero{position:relative;isolation:isolate}
.hero__bg{position:absolute;inset:0;overflow:hidden;z-index:-1}
.hero__bg picture{width:100%;height:100%}
/* Der Kopf im Foto sitzt bei 6 % der Bildhoehe. Der Prozentwert bezieht sich
auf den ueberstehenden Teil, und der waechst mit der Fensterbreite — bei
22 % rutschte der Kopf auf breiten Bildschirmen aus dem Ausschnitt. 4 %
laesst ihm bis hinauf zu sehr breiten Fenstern Luft. */
/* 12 %: Philipps Haare stehen bei 1280 bis 1920 px Breite knapp unter der
Oberkante des Fotos (abgestimmt am 13.09.2026). */
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:var(--photo-filter)}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--overlay-photo-left)}
/* padding-block, damit der Seitenrand aus .wrap erhalten bleibt */
/* Die Hoehe bestimmt den Bildausschnitt: Das Foto ist 4:3 und fuellt die
Breite, oben und unten wird abgeschnitten. Bei 540 px waren nur 54 % der
Bildhoehe zu sehen, bei 680 px sind es 66 % — genug, dass der Kollege ganz
im Bild steht und Schacht und Kegel unten mit drauf sind. */
.hero__in{display:flex;align-items:center;min-height:680px;padding-block:var(--sp-16)}
.hero__copy{max-width:680px}
.hero h1{color:#fff;font-size:var(--fs-display-1);line-height:var(--lh-tight);
letter-spacing:var(--ls-display);margin:var(--sp-5) 0 var(--sp-4);font-weight:800}
.hero__lead{font-size:var(--fs-lead);line-height:var(--lh-snug);color:rgb(255 255 255/.86);max-width:560px}
.hero__actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
/* Kleinerer Aufmacher für Unterseiten */
/* Aufmacher mit Foto — nur auf den Leistungsseiten. Der Verlauf läuft von
links, damit die Überschrift auf ruhigem Grund sitzt und das Bild rechts
noch zu sehen ist. */
.phero--foto{position:relative;isolation:isolate;background:var(--ink-950)}
.phero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero__bg picture{height:100%}
.phero__img{width:100%;height:100%;object-fit:cover;object-position:50% var(--hero-lage,50%)}
.phero--foto::after{content:"";position:absolute;inset:0;z-index:-1;
background:var(--overlay-photo-left)}
.phero--foto .phero__in{min-height:300px;display:flex;flex-direction:column;justify-content:center}
.phero--foto .phero__lead{max-width:520px}
@media (max-width:700px){
.phero--foto::after{background:linear-gradient(180deg,rgb(19 19 19/.55) 0%,rgb(19 19 19/.88) 70%)}
.phero--foto .phero__in{min-height:220px}
}
.phero{background:var(--surface-dark);padding:var(--sp-16) 0 var(--sp-12)}
.phero h1{color:#fff;font-size:var(--fs-h1);margin:0 0 var(--sp-4)}
.phero__lead{font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--text-inverse-muted);max-width:640px;margin:0}
.phero .eyebrow{color:var(--accent)}
.crumbs{font-size:var(--fs-caption);color:rgb(255 255 255/.55);margin:0 0 var(--sp-5)}
.crumbs a{color:rgb(255 255 255/.75);border-bottom-color:rgb(255 255 255/.25)}
/* Stil „Halb-Halb" (Name von Philipp): Seitenkopf mit ganzem Foto rechts und
dem Symbolmuster des Preisrechners links — abgestimmt mit Philipp am 13.09.2026, zuerst fuer die
Leistungsuebersicht. Nur ab 701 px; am Handy bleibt der normale
Foto-Aufmacher mit Verlauf. Heller Modus: hellgrauer Grund, dunkle Schrift;
dunkler Modus: dunkler Grund, weisse Schrift — beides wie der Preisrechner.
Links am Foto ein weicher Uebergang in die Grundfarbe, ueber dem Foto
liegen keine Symbole (das Foto deckt das Muster ab).
Anwendung: class="phero phero--foto phero--halbhalb muster". */
@media (min-width:701px){
.phero--halbhalb{--hero-grund:var(--calc-bg);background:var(--hero-grund)}
.phero--halbhalb::after{display:none}
/* --halbhalb-format: Seitenverhaeltnis des Fotorahmens. 1.7 schneidet bei
4:3-Fotos oben und unten etwas ab; 4/3 zeigt das Foto ganz (heroFormat
in ui.mjs, je Foto). */
.phero--halbhalb .phero__bg{left:auto;right:0;width:auto;height:100%;aspect-ratio:var(--halbhalb-format,1.7/1);max-width:52%;z-index:0}
.phero--halbhalb .phero__bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--hero-grund) 0%,transparent 25%)}
.phero--halbhalb .phero__img{object-position:50% var(--hero-lage,45%)}
.phero--halbhalb .phero__in{position:relative;z-index:1}
.phero--halbhalb .phero__in > *{max-width:min(620px,48%)}
.phero--halbhalb h1,.phero--halbhalb .crumbs,.phero--halbhalb .crumbs a{color:var(--text-strong)}
.phero--halbhalb .crumbs a{border-bottom-color:var(--border-default)}
.phero--halbhalb .phero__lead{color:var(--text-body)}
.phero--halbhalb .eyebrow{color:var(--brand)}
/* WhatsApp-Knopf (Ortsseiten, Kontakt): weiss auf hellgrau waere unsichtbar,
deshalb die Knopffarben des Preisrechners — die wechseln hell/dunkel mit. */
.phero--halbhalb .btn--ghost-inverse{background:var(--calc-ghost-bg);color:var(--calc-ghost-fg);border-color:var(--calc-ghost-border)}
}
@media (hover:hover) and (min-width:701px){
.phero--halbhalb .btn--ghost-inverse:hover{background:var(--calc-ghost-bg-hover);color:var(--calc-ghost-fg);border-color:var(--calc-ghost-border-hover)}
}
@media (max-width:700px){
.phero--halbhalb.muster::before{display:none}
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .phero--halbhalb{--hero-grund:var(--ink-950)}
:root:not([data-theme="light"]) .phero--halbhalb h1{color:#fff}
:root:not([data-theme="light"]) .phero--halbhalb .phero__lead{color:var(--text-inverse-muted)}
:root:not([data-theme="light"]) .phero--halbhalb .eyebrow{color:var(--accent)}
:root:not([data-theme="light"]) .phero--halbhalb .crumbs{color:rgb(255 255 255/.55)}
:root:not([data-theme="light"]) .phero--halbhalb .crumbs a{color:rgb(255 255 255/.75);border-bottom-color:rgb(255 255 255/.25)}
}
/* --- 15. Beweisleiste ----------------------------------------------------- */
/* Vier Spalten ueber dieselbe Breite wie das Leistungsraster darunter — als
Flex-Reihe blieb rechts ungenutzter Platz, weil die Abstaende fest waren
statt die volle Breite zu fuellen. Nicht exakt gleich breit: bei vier
gleichen Vierteln ist "★★★★★ 21 Bewertungen bei Google" ein paar Pixel zu
lang und bricht als einziger Text um. Die erste Spalte ("Mo – Sa") braucht
am wenigsten Platz und gibt ihn an die Bewertungs-Spalte ab; Aussenkanten
und Gesamtbreite bleiben dabei unveraendert. */
.proof{display:grid;grid-template-columns:2fr 3fr 3fr 3fr;gap:var(--sp-10);padding-block:var(--sp-10)}
/* --- 16. Ablauf in Schritten --------------------------------------------- */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;
grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.steps li{border-top:var(--rule-accent) solid var(--brand);padding-top:var(--sp-4)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--brand);display:block;margin-bottom:var(--sp-2)}
.steps h3{font-size:var(--fs-h4);margin:0 0 var(--sp-2)}
.steps p{font-size:var(--fs-body-sm);color:var(--text-muted);margin:0}
/* --- 17. Tabellen --------------------------------------------------------- */
table{border-collapse:collapse;width:100%;font-size:var(--fs-body-sm);min-width:520px}
th,td{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle);vertical-align:top}
thead th{font-family:var(--font-eyebrow);font-size:var(--fs-caption);letter-spacing:.08em;
text-transform:uppercase;color:var(--text-muted);font-weight:600;
border-bottom:1px solid var(--border-default);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;
color:var(--text-strong);font-weight:500}
/* --- 18. Listen ----------------------------------------------------------- */
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}
/* Abstandsklassen wirken sonst nicht, weil .checks selbst margin:0 setzt
und im Stilblatt weiter unten steht als die mt-Klassen. */
.checks.mt-6{margin-top:var(--sp-6)}
.checks.mt-8{margin-top:var(--sp-8)}
.checks.mt-10{margin-top:var(--sp-10)}
.checks li{display:flex;gap:var(--sp-3);align-items:flex-start}
.checks .ic{color:var(--brand);margin-top:4px}
.band--dark .checks .ic{color:var(--accent)}
.crosses{list-style:none;padding:0;margin:0;columns:2;column-gap:var(--sp-8)}
.crosses li{break-inside:avoid;padding:var(--sp-2) 0 var(--sp-2) var(--sp-6);position:relative;
font-size:var(--fs-body-sm);color:var(--text-muted)}
.crosses li::before{content:"×";position:absolute;left:0;top:var(--sp-2);
font-family:var(--font-mono);color:var(--text-muted)}
/* --- Leistungs-Detailseite: Textspalte mit mitlaufender Seitenspalte ------
Der Inhalt läuft als zusammenhängender Text, rechts steht der Anruf und
bleibt beim Scrollen stehen. Unter 1000 px fällt die Spalte unter den
Text — dort trägt die Kopfleiste die Telefonnummer.
------------------------------------------------------------------------- */
.ldet{display:grid;grid-template-columns:minmax(0,1fr) 340px;
gap:var(--sp-16);padding-block:var(--sp-20)}
.ldet__main > *:first-child{margin-top:0}
.ldet__main h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:700;
line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--text-strong);
margin:var(--sp-16) 0 var(--sp-6);padding-top:var(--sp-6);
border-top:var(--rule-accent) solid var(--brand)}
.ldet__main h2:first-of-type{margin-top:var(--sp-12)}
.ldet__main p{color:var(--text-body);line-height:var(--lh-body)}
.ldet__side{position:relative}
.ldet__side-in{position:sticky;top:96px;display:grid;gap:var(--sp-4)}
/* Karten der Seitenspalte — die obere trägt den Anruf, die untere die Fakten.
Beide stehen dunkel, damit die Spalte als ein Block neben dem hellen Text
liegt. Alles darin rechnet deshalb mit hellem Text auf dunklem Grund. */
.skarte{border:1px solid transparent;border-radius:var(--radius-lg);
background:var(--surface-dark);color:var(--text-inverse-muted);
padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.skarte--ruf{text-align:center}
/* Anruf-Karte mit Symbolmuster: kleinere Kachel, weil die Karte schmal ist. */
.skarte--ruf.muster{--muster-farbe:#fff;--muster-groesse:420px}
.skarte--ruf .skarte__k{display:block;font-family:var(--font-eyebrow);font-size:var(--fs-eyebrow);
font-weight:600;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent)}
.skarte--ruf p{margin:var(--sp-4) 0 var(--sp-6);line-height:var(--lh-snug);color:rgb(255 255 255/.82)}
.skarte .btn{width:100%;justify-content:center}
/* Telefon und WhatsApp stehen untereinander, beide über die volle Breite. */
.skarte .btn + .btn{margin-top:var(--sp-3)}
.skarte__bew{display:flex;flex-direction:column;gap:7px;text-align:center;
padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);border-bottom:1px solid var(--border-on-dark)}
.skarte__sterne{display:flex;gap:2px;justify-content:center;color:#E8A800}
.skarte__bewtx{font-size:var(--fs-body-sm)}
.skarte__bewtx b{color:#fff}
.fakt{display:flex;gap:var(--sp-3);align-items:flex-start;
font-size:var(--fs-body-sm);line-height:var(--lh-snug)}
.fakt+.fakt{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border-on-dark)}
/* Auf Dunkel trägt das Markenblau zu wenig — hier führt der helle Akzent. */
.fakt .ic{color:var(--accent);flex:none;margin-top:1px}
.fakt b{display:block;color:#fff;font-weight:600}
@media (max-width:1000px){
.ldet{grid-template-columns:1fr;gap:var(--sp-12);padding-block:var(--sp-12)}
.ldet__side-in{position:static}
}
/* Anwendungsfälle in zwei Spalten. Seit dem 30.08.2026 als abgesetzte
Kacheln statt als Liste mit Trennstrich: auf dunklem Grund war die feine
Linie kaum zu sehen, die Posten verschwammen zu einem Block. Jede Kachel
hat jetzt eigene Fläche und Rahmen. */
.cases{list-style:none;padding:0;margin:var(--sp-6) 0 0;
display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-4);
/* 1fr statt auto: alle Zeilen so hoch wie die hoechste, damit die Kacheln
gleich gross sind — sonst schrumpft jede auf ihre eigene Textlaenge. */
grid-auto-rows:1fr}
/* Normal laeuft die Liste zeilenweise. Wo zwei Themen nebeneinander stehen
sollen (--spalten), fuellt sie stattdessen erst die linke Spalte von oben
nach unten. Die Zeilenzahl gibt die Seite als --cases-zeilen mit. */
.cases--spalten{grid-auto-flow:column;grid-template-rows:repeat(var(--cases-zeilen,3),1fr)}
/* Dunkle Kacheln, dieselbe Fläche wie die Anrufkarte in der Seitenspalte.
Alles darin rechnet mit hellem Text auf dunklem Grund. */
.cases li{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);
background:var(--surface-dark);border:1px solid var(--cases-border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.cases__ic{flex:none;color:var(--accent);margin-top:3px;display:flex}
.cases__tx{min-width:0}
.cases b{display:block;font-weight:600;line-height:1.3;color:var(--text-inverse)}
/* Nur der Beschreibungstext, nicht jedes span in der Kachel: als `.cases span`
war die Regel spezifischer als `.cases__ic` und hat Haken und Pfeil
mitgefaerbt — deren eigene Farbregeln liefen dadurch ins Leere. */
.cases .cases__tx span{display:block;color:var(--text-inverse-muted);font-size:var(--fs-body-sm);
line-height:var(--lh-snug);margin-top:3px}
/* Faelle mit eigener Seite werden zum Verweis — der Pfeil zeigt das an. */
.cases li:has(> a){padding:0}
.cases a{display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;height:100%;
padding:var(--sp-4);margin-inline:0;
border:0;border-radius:inherit;text-decoration:none}
.cases__pf{flex:none;margin-left:auto;color:var(--text-inverse-muted);opacity:.7;display:flex;align-self:center}
@media (max-width:700px){.cases{grid-template-columns:1fr}
.cases--spalten{grid-auto-flow:row;grid-template-rows:none}}
/* Die anderen Faelle am Fuss einer Fallseite. */
.fallliste{list-style:none;padding:0;margin:var(--sp-6) 0 0;
display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.fallliste a{display:block;padding:var(--sp-4) var(--sp-5);border:1px solid var(--border-default);
border-radius:var(--radius-md);background:var(--surface-card);text-decoration:none}
.fallliste b{display:block;font-weight:600;color:var(--text-strong)}
.fallliste span{display:block;margin-top:3px;font-size:var(--fs-body-sm);
line-height:var(--lh-snug);color:var(--text-muted)}
/* Alle Karten gleich hoch: jede Zeile nimmt die Hoehe der hoechsten Karte. */
.fallliste{grid-auto-rows:1fr}.fallliste li{display:grid}
@media (max-width:700px){.fallliste{grid-template-columns:1fr}}
/* --- Ablauf in drei Schritten, je Leistungsseite --------------------------
Untereinander an einer Linie statt nebeneinander in Kästen: die Schritte
folgen aufeinander, also soll man sie auch so lesen.
------------------------------------------------------------------------- */
.ablauf{list-style:none;margin:var(--sp-8) 0 0;padding:0 0 0 var(--sp-12);
border-left:2px solid var(--border-default)}
.ablauf li{position:relative;padding-bottom:var(--sp-10)}
.ablauf li:last-child{padding-bottom:0}
.ablauf__nr{position:absolute;left:calc(-1 * var(--sp-12) - 19px);top:-2px;
width:36px;height:36px;border-radius:var(--radius-pill);background:var(--brand-solid);
color:#fff;display:grid;place-items:center;
font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1}
.ablauf__titel{margin:0 0 var(--sp-2);font-size:var(--fs-h4)}
.ablauf__text{margin:0;line-height:var(--lh-body);color:var(--text-body)}
/* --- 19. Hinweiskästen ---------------------------------------------------- */
.note{border-left:var(--rule-accent) solid var(--brand);background:var(--brand-subtle);
padding:var(--sp-4) var(--sp-5);border-radius:0 var(--radius-md) var(--radius-md) 0;margin:var(--sp-6) 0}
.note p{margin:0}.note p+p{margin-top:var(--sp-3)}
.note__label{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-eyebrow);
font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);
margin-bottom:var(--sp-2);font-weight:600}
/* --- 20. Preisrahmen ------------------------------------------------------ */
/* ---------- Kostenrechner — Preise-Seite ----------------------------------
Jede Frage klappt erst auf, nachdem die vorherige beantwortet ist (siehe
site.js). Der Rahmen um den ganzen Block grenzt das Werkzeug sichtbar
vom Fliesstext davor und danach ab. */
/* Feste Mindesthoehe, damit der Rahmen beim Wechsel zwischen den kurzen
Fragen und dem laengeren Ergebnis nicht staendig springt — .calc__body
zentriert den jeweils sichtbaren Schritt in dieser festen Flaeche. */
/* ---------- Symbolmuster als Hintergrund — fuer jeden Abschnitt ----------
Nahtlos kachelbare Vektor-Kachel (static/img/symbolmuster.svg, 596 x 484 px),
aus Bilder/Hintergrund Preisrechner.svg abgeleitet: dieselben zehn Symbole
in derselben Reihenfolge und mit denselben Abstaenden, jede Reihe um ein
Feld versetzt. Die Kachel dient als Maske, eingefaerbt wird per CSS —
deshalb folgt die Symbolfarbe automatisch dem Modus: im Hellmodus dunkel,
im Dunkelmodus weiss (--text-strong), ohne zweite Bilddatei.
Anwendung: class="muster" an den Abschnitt haengen, fertig.
Feinjustierung ohne neue Datei ueber drei Variablen:
--muster-farbe Symbolfarbe (Standard: --text-strong)
--muster-groesse Kachelbreite (Standard 596px = Originalgroesse,
z. B. 400px fuer kleinere Symbole)
--muster-deckkraft Deckkraft (Standard .14 = rund 10 %, weil die Kachel
selbst schon auf 69 % steht) */
.muster{position:relative;isolation:isolate;--muster-farbe:var(--text-strong)}
.muster::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
background:var(--muster-farbe);opacity:var(--muster-deckkraft,.14);
-webkit-mask:url("/assets/img/symbolmuster.svg") repeat 0 0/var(--muster-groesse,596px) auto;
mask:url("/assets/img/symbolmuster.svg") repeat 0 0/var(--muster-groesse,596px) auto}
/* Symbolmuster im Hintergrund ueber .muster (siehe oben), Standardstaerke —
im Dunkelmodus weiss auf dem dunklen Kasten, im Hellmodus dunkel auf hell. */
.calc{max-width:var(--container-narrow);margin:var(--sp-8) auto 0;border:2px solid var(--border-default);background:var(--calc-bg);
border-radius:var(--radius-lg);padding:var(--sp-8) var(--sp-6);
min-height:520px;display:flex;flex-direction:column}
.calc__body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.calc__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);text-align:center;margin:0 0 var(--sp-6)}
/* Nur ein Schritt ist je sichtbar — beide teilen sich deshalb denselben
Kasten wie das Ergebnis, statt sich per Reihenfolge zu stapeln. Im Hellmodus
Weiss zu 70 % deckend auf dem grauen Rechnerkasten, damit er sich abhebt und
das Symbolmuster dahinter schwach durchscheint — wie im Dunkelmodus
(Philipp, 06.09.2026). */
.calc__step,.calc__result{text-align:center;background:rgb(255 255 255/.93);border-radius:var(--radius-lg);
padding:var(--sp-8) var(--sp-6)}
/* Dunkelmodus: innerer Kasten fast deckend — das Muster laeuft aussen weiter. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .calc__step,:root:not([data-theme="light"]) .calc__result{background:rgb(24 24 24/.93)}
:root:not([data-theme="light"]) .formkasten__in{background:rgb(24 24 24/.93)}
}
.calc__q{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);margin:0 0 var(--sp-4);text-align:center}
.calc__opts{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
/* Leistung hat genau vier Optionen — als 2x2-Raster statt im Fliesstext
umbrechend, damit alle vier Kaestchen gleich gross sind. */
[data-step="leistung"] .calc__opts{display:grid;grid-template-columns:repeat(2,1fr);max-width:520px;margin:0 auto}
[data-step="leistung"] .calc__opt{height:100%}
/* Breite richtet sich nach den Auswahlfeldern selbst (width:max-content) —
der Hinweistext darunter wird dadurch nie breiter als die Buttons. */
.calc__choice{width:max-content;max-width:100%;margin:0 auto}
.calc__hint{font-size:14px;line-height:1.55;color:var(--text-muted);text-align:center;margin:var(--sp-3) 0 0}
.calc__opt{font-family:var(--font-body);font-size:16px;font-weight:600;color:#fff;
background:var(--brand-solid);border:1px solid transparent;border-radius:var(--radius-btn);
padding:var(--sp-4) var(--sp-5);cursor:pointer;text-align:center;line-height:1.4}
.calc__opt span{display:block;font-weight:400;color:rgb(255 255 255/.95);font-size:14px;margin-top:3px}
.calc__opt[aria-pressed="true"]{background:var(--brand-press);border-color:#fff}
@media (hover:hover){.calc__opt:hover{background:var(--brand-hover)}}
/* Dauer-Schritt: Zeitleiste. Links der feste Block der ersten Stunde (blau),
rechts sechs Bausteine zu je 30 Minuten, die sich beim Antippen fuellen.
Entwurf A vom 06.09.2026, von Philipp gewaehlt. */
.calc__dauer{max-width:560px;margin:0 auto var(--sp-5)}
.calc__zeit{display:flex;gap:4px;align-items:stretch}
.calc__zeit-fest{flex:0 0 38%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
padding:var(--sp-3) var(--sp-2);border-radius:var(--radius-btn) 4px 4px var(--radius-btn);
background:var(--brand-solid);color:#fff;font-size:var(--fs-body-sm);line-height:1.2}
.calc__zeit-fest b{font-weight:700}
.calc__zeit-fest span{font-size:var(--fs-caption);color:rgb(255 255 255/.8)}
.calc__zeit-fest .ic{color:#fff;margin-bottom:2px}
.calc__zeit-seg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
border:1px solid var(--border-default);background:var(--surface-card);color:var(--text-muted);cursor:pointer;
border-radius:4px;padding:var(--sp-2) 0;font-family:var(--font-body);line-height:1.1}
.calc__zeit-seg b{font-weight:600;font-size:var(--fs-body-sm)}
.calc__zeit-seg span{font-size:11px}
.calc__zeit-seg:last-child{border-radius:4px var(--radius-btn) var(--radius-btn) 4px}
.calc__zeit-seg[aria-pressed="true"]{background:var(--brand-solid);border-color:var(--brand-solid);color:#fff}
@media (hover:hover){.calc__zeit-seg:hover{border-color:var(--brand)}}
.calc__zeit-summe{margin:var(--sp-4) 0 0;font-size:var(--fs-body)}
.calc__zeit-summe b{color:var(--text-strong)}
.calc__zeit-summe span{color:var(--text-muted)}
@media (max-width:640px){.calc__zeit-fest{flex-basis:32%}.calc__zeit-seg span{display:none}}
.calc__num-label{font-family:var(--font-eyebrow);font-weight:600;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--text-muted);margin:0 0 var(--sp-2)}
.calc__num{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);color:var(--text-strong)}
.calc__hinweis{color:var(--text-muted);font-size:var(--fs-body-sm);margin:var(--sp-2) 0 0}
.calc__note{color:var(--text-body);font-size:14px;line-height:1.6;max-width:52ch;margin:var(--sp-4) auto var(--sp-6)}
.calc__actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
/* Schmale Bildschirme: die vier Leistungs-Kaestchen passen nebeneinander
nicht mehr ("Verstopfungsbeseitigung" laesst sich nicht umbrechen) und
liefen ueber den Rahmen — deshalb untereinander. Der Kasten selbst bekommt
weniger Innenabstand, damit den Fragen mehr Breite bleibt. */
@media (max-width:640px){
.calc{padding:var(--sp-6) var(--sp-4)}
.calc__step,.calc__result{padding:var(--sp-6) var(--sp-4)}
[data-step="leistung"] .calc__opts{grid-template-columns:1fr;max-width:none}
.calc__opt{min-width:0}
}
/* --- 20b. Häufige Fragen ------------------------------------------------- */
/* details/summary ohne JavaScript. Der Pfeil dreht sich beim Aufklappen,
der Standard-Marker des Browsers wird ausgeblendet. */
.faq__list{display:flex;flex-direction:column;gap:var(--sp-3)}
.faq__item{border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);cursor:pointer;list-style:none;
padding:var(--sp-4) var(--sp-5);font-family:var(--font-display);font-weight:600;font-size:var(--fs-h4);
line-height:var(--lh-snug);color:var(--text-strong)}
.faq__q::-webkit-details-marker{display:none}
.faq__q .ic{flex:none;color:var(--brand);transition:transform var(--dur-base) var(--ease)}
.faq__item[open] .faq__q .ic{transform:rotate(180deg)}
@media (hover:hover){.faq__q:hover{color:var(--brand)}}
.faq__a{padding:0 var(--sp-5) var(--sp-5);color:var(--text-body)}
.faq__a p{margin:0}.faq__a p+p{margin-top:var(--sp-3)}
.faq__alle{margin:var(--sp-5) 0 0}
.faq__alle a{display:inline-flex;align-items:center;gap:4px;font-weight:600}
/* Auf /fragen/ tragen die Gruppen eine eigene Ueberschrift; in der Textspalte
der Leistungsseite ist es ein normales h2 wie bei den Nachbarabschnitten. */
.faq__gruppe{font-size:var(--fs-h3);margin:var(--sp-10) 0 var(--sp-5)}
.faq:first-child .faq__gruppe{margin-top:0}
.faq > h2,.faq > .sh{margin-bottom:var(--sp-5)}
.ldet__main .faq{margin-top:var(--sp-10)}
/* --- 21. Öffnungszeiten --------------------------------------------------- */
.hours__row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
padding:var(--sp-3) 0;border-bottom:1px solid var(--border-subtle)}
.hours__row .mono{font-weight:600;color:var(--text-strong)}
.hours__note{margin:var(--sp-4) 0 0;font-size:var(--fs-body-sm);color:var(--text-muted)}
/* --- 22. Bilder ----------------------------------------------------------- */
figure{margin:0}
.media{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-subtle)}
.media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:var(--photo-filter)}
/* Das traegt height="900" — ohne height:auto greift aspect-ratio nicht
und der Rahmen wird 900 px hoch (hochkant). media--ganz zeigt das Foto im
echten 4:3-Rahmen, also ganz: Laderaum-Foto auf Über uns, 13.09.2026. */
.media--ganz img{height:auto}
figcaption{font-size:var(--fs-caption);color:var(--text-muted);margin-top:var(--sp-2)}
/* --- 21b. Zielgruppen — Karten mit Icon-Kachel oben links ------------------ */
/* Dunkel wie die Ortskacheln (.place): gleiche Flaeche, gleicher Rahmen,
gleiches Verhalten beim Ueberfahren — beides sind Verweiskacheln. */
.zg2{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-10)}
.zg2__card{display:block;background:var(--surface-dark);border:1px solid var(--cases-border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--sp-6);
color:inherit;text-decoration:none;transition:border-color var(--dur-base) var(--ease),background-color var(--dur-base) var(--ease)}
.zg2__ic{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--brand-solid);
color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4)}
.zg2__t{margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-h4);
font-weight:700;color:var(--text-inverse)}
.zg2__d{margin:0;font-size:var(--fs-body-sm);color:var(--text-inverse-muted);line-height:var(--lh-body)}
@media (max-width:1000px){.zg2{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.zg2{grid-template-columns:1fr}}
/* --- 22b. Einsatz-Video ----------------------------------------------------- */
.vidplatz{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;
background:var(--surface-dark);box-shadow:var(--shadow-sm)}
.vidplatz video{display:block;width:100%;height:100%;object-fit:cover;background:var(--surface-dark)}
/* --- 22c. Vorher/Nachher-Vergleich -----------------------------------------
Zwei deckungsgleiche Fotos, das "vorher"-Bild per clip-path bis --pos
freigegeben. Der eigentliche Regler ist ein unsichtbares über der ganzen Fläche — Maus, Touch und Tastatur laufen
damit über den nativen Regler, ohne eigene Zieh-Logik in JS.
Der Knopf muss dabei schmal bleiben: ein Knopf so breit wie die Bahn hat
keinen Weg, den er zurücklegen könnte — der Regler bliebe stehen.
------------------------------------------------------------------------- */
.vergleich{margin:var(--sp-8) 0}
.vergleich__rahmen{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);
overflow:hidden;background:var(--surface-dark);box-shadow:var(--shadow-sm);--pos:50%}
/* Querformat fuer Zeichnungen, die in 16:9 angelegt sind */
.vergleich__rahmen--breit{aspect-ratio:16/9}
.vergleich__bild{position:absolute;inset:0;display:block;z-index:0}
.vergleich__bild img{width:100%;height:100%;object-fit:cover;display:block;
filter:var(--photo-filter);-webkit-user-drag:none;user-select:none}
.vergleich__bild--vorher{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vergleich__regler{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;
opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.vergleich__regler::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:0}
.vergleich__regler::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:100%;
background:transparent;border:0}
.vergleich__regler::-moz-range-thumb{width:2px;height:100%;opacity:0;border:0}
.vergleich__regler::-moz-range-track{width:100%;height:100%;background:transparent;border:0}
.vergleich__griff{position:absolute;top:0;bottom:0;left:var(--pos);z-index:1;
width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgb(19 19 19/.2);pointer-events:none}
.vergleich__griff-kn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:var(--radius-pill);background:#fff;box-shadow:var(--shadow-md);
display:flex;align-items:center;justify-content:center;color:var(--ink-700)}
.vergleich__pf--l{transform:rotate(180deg)}
.vergleich__regler:focus-visible ~ .vergleich__griff .vergleich__griff-kn{
outline:2px solid var(--focus-ring);outline-offset:2px}
.vergleich__etikett{position:absolute;top:var(--sp-3);z-index:1;padding:6px 12px;
border-radius:var(--radius-pill);font-family:var(--font-eyebrow);font-size:var(--fs-caption);
font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:rgb(19 19 19/.72);
color:#fff;pointer-events:none}
.vergleich__etikett--vorher{left:var(--sp-3)}
.vergleich__etikett--nachher{right:var(--sp-3)}
.vergleich figcaption{margin-top:var(--sp-3)}
/* --- 23. Ortsliste -------------------------------------------------------- */
/* Gleiche Kachel wie die Fallliste (.cases), nur mit Standortnadel statt
Haken. grid-auto-rows:1fr haelt alle Kacheln einer Zeile gleich hoch —
dadurch braucht es keine abgeschnittenen Textzeilen mehr. */
.places{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3) var(--sp-4);
grid-auto-rows:1fr}
.place{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);
background:var(--surface-dark);border:1px solid var(--cases-border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:inherit;text-decoration:none}
.place__ic{flex:none;color:var(--accent);margin-top:3px;display:flex}
.place__tx{min-width:0}
.place b{display:block;font-weight:600;line-height:1.3;color:var(--text-inverse)}
.place__tx span{display:block;color:var(--text-inverse-muted);font-size:var(--fs-body-sm);
line-height:var(--lh-snug);margin-top:3px}
.place__pf{flex:none;margin-left:auto;color:var(--text-inverse-muted);opacity:.7;
display:flex;align-self:center}
.passing{font-size:var(--fs-body-sm);color:var(--text-muted)}
/* --- 24. Formular --------------------------------------------------------- */
/* Kasten um das Kontaktformular — derselbe Aufbau wie der Preisrechner:
aussen Rahmen mit Symbolmuster, innen eine fast deckende Flaeche, damit
das Muster die Beschriftungen nicht stoert. */
.formkasten{margin-top:var(--sp-8);border:2px solid var(--border-default);background:var(--calc-bg);
border-radius:var(--radius-lg);padding:var(--sp-6) var(--sp-5)}
.formkasten__in{background:rgb(255 255 255/.93);border-radius:var(--radius-lg);padding:var(--sp-8) var(--sp-6)}
@media (max-width:640px){
.formkasten{padding:var(--sp-4) var(--sp-3)}
.formkasten__in{padding:var(--sp-6) var(--sp-4)}
}
.feldpaar{display:grid;grid-template-columns:minmax(165px,.5fr) 1fr;gap:var(--sp-5)}
@media (max-width:640px){.feldpaar{grid-template-columns:1fr;gap:var(--sp-4)}}
.form{display:flex;flex-direction:column;gap:var(--sp-5)}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--fs-body-sm);
color:var(--text-strong);margin-bottom:var(--sp-2)}
.field input,.field textarea,.field select{width:100%;font-family:inherit;font-size:var(--fs-body);
color:var(--text-strong);background:var(--surface-page);border:1px solid var(--border-default);
border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.field input,.field select{height:var(--control-h-md)}
.field select{color-scheme:light dark;cursor:pointer}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--brand);
box-shadow:0 0 0 3px rgb(0 144 188/.18)}
/* Im Windows-Kontrastmodus zeichnet der Browser weder box-shadow noch die
eigene Rahmenfarbe — mit `outline:0` bliebe gar kein Hinweis uebrig. Dort
fuehrt deshalb ein echter Rahmen in der Systemfarbe. */
@media (forced-colors: active){
.field input:focus,.field textarea:focus{outline:2px solid Highlight;outline-offset:2px}
}
.field__hint{font-size:var(--fs-caption);color:var(--text-muted);margin:var(--sp-2) 0 0}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-body-sm)}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand-solid)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* --- 25. Abschluss-Band --------------------------------------------------- */
.cta{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;padding-block:var(--sp-12)}
.cta__title{color:#fff;margin:0;font-size:var(--fs-h2)}
.cta__text{margin:var(--sp-2) 0 0;color:rgb(255 255 255/.84);max-width:52ch;white-space:pre-line}
.cta__actions{margin-left:auto;display:flex;gap:var(--sp-3);flex-wrap:wrap}
/* --- 26. Fuß -------------------------------------------------------------- */
.ftr{background:var(--surface-darker);color:rgb(255 255 255/.66);margin-top:0;
padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.ftr__in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-10);padding-top:var(--sp-20);
padding-bottom:var(--sp-12)}
/* Der Slogan-Text unter dem Logo ist raus; den Abstand zur Adresse traegt
jetzt das Logo selbst, statt auf den (jetzt fehlenden) Absatz zu warten. */
.ftr .logo{height:46px;margin-bottom:var(--sp-6)}
.ftr__h{font-family:var(--font-eyebrow);font-size:var(--fs-caption);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:#fff;font-weight:600;margin:0 0 var(--sp-4)}
.ftr__col{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-body-sm)}
.ftr a{color:rgb(255 255 255/.72);border-bottom-color:transparent}
/* Adresse und Kontaktzeilen teilen sich Icon-Groesse (18px) und Abstand
(--sp-3), damit der Text in beiden Bloecken auf derselben Flucht beginnt. */
.adr{display:flex;gap:var(--sp-3);font-style:normal;font-size:var(--fs-body-sm);line-height:1.55;
margin-top:var(--sp-5)}
.adr strong{color:#fff}
.adr__pin{color:rgb(255 255 255/.72);flex:none;margin-top:2px}
.ftr__contact{display:flex;flex-direction:column;gap:var(--sp-2);margin:0;font-size:var(--fs-body-sm)}
.ftr__contact a{display:inline-flex;align-items:center;gap:var(--sp-3)}
.ftr__hours{display:block;margin-bottom:var(--sp-2)}
.ftr__hours .mono{color:#fff}
.ftr__small{font-size:var(--fs-caption);color:rgb(255 255 255/.5);margin:var(--sp-3) 0 0}
.ftr__more{margin-top:var(--sp-2)}
.ftr__legal{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
border-top:1px solid rgb(255 255 255/.12);padding-top:var(--sp-5);padding-bottom:var(--sp-8);
font-size:var(--fs-caption);color:rgb(255 255 255/.5)}
.ftr__legal nav{display:flex;gap:var(--sp-5)}
/* --- 27. Anruf-Leiste am Handy ------------------------------------------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
background:var(--surface-darker);border-top:1px solid rgb(255 255 255/.14);
padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
/* 12 statt 8 px: die beiden Schaltflaechen sind die wichtigste Handlung der
Seite, ein Fehlgriff darf nicht am Abstand liegen. */
gap:var(--sp-3)}
.callbar__btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
/* min-height statt height: bei groesserer Schrift darf die Schaltflaeche
mitwachsen, statt den Text abzuschneiden. */
min-height:48px;border-radius:var(--radius-btn);font-family:var(--font-display);font-weight:600;
font-size:16px;border:0;text-decoration:none}
.callbar__btn--tel{background:var(--brand-solid);color:#fff}
.callbar__btn--wa{background:transparent;color:#fff;border:1px solid rgb(255 255 255/.28)}
/* --- 28. Rechtstexte ------------------------------------------------------ */
.legal{max-width:var(--container-narrow)}
.legal h2{font-size:var(--fs-h3);margin-top:var(--sp-10)}
.legal h3{font-size:var(--fs-h4);margin-top:var(--sp-6)}
.legal ul,.legal ol{padding-left:var(--sp-5);margin:0 0 var(--sp-4)}
.legal li{margin-bottom:var(--sp-2)}
.legal p{overflow-wrap:anywhere} /* Unterstrich-Linien im Widerrufsformular */
/* --- 28b. Zeigergeräte --------------------------------------------------
Alle Hover-Zustände stehen gesammelt hier statt bei ihren Bausteinen.
Grund: Auf einem Touchscreen gibt es kein Zeigen. Der Browser setzt
:hover beim Antippen trotzdem und lässt ihn stehen, bis woanders getippt
wird — die angetippte Kachel bliebe also angehoben zurück. `hover: hover`
trifft nur Geräte mit echtem Zeiger.
------------------------------------------------------------------------- */
@media (hover: hover){
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
.ebar a:hover{color:var(--accent)}
.nav__link:hover{color:var(--brand)}
.nav__link:hover::after{transform:scaleX(1)}
.hdr__tel:hover{background:var(--brand-border);color:var(--text-strong)}
.btn--primary:hover{background:var(--brand-hover);color:#fff}
.btn--secondary:hover{background:rgb(0 0 0/.08);color:var(--text-strong);border-color:var(--border-strong)}
.band--subtle .btn--secondary:hover{background:var(--ink-50);border-color:var(--border-strong)}
.btn--inverse:hover{background:var(--ink-100);color:var(--ink-900)}
.btn--ghost-inverse:hover{background:rgb(255 255 255/.4);color:#fff}
.calc .btn--ghost-inverse:hover{background:var(--calc-ghost-bg-hover);color:var(--calc-ghost-fg);border-color:var(--calc-ghost-border-hover)}
.btn--ghost:hover{background:var(--surface-subtle)}
.bewertung:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:inherit}
.svc:hover .svc__more{gap:10px}
.crumbs a:hover{color:#fff}
.cases li:has(> a:hover){border-color:var(--accent);background:var(--ink-700)}
.cases a:hover{background:transparent}
.cases a:hover b{color:var(--accent)}
.cases a:hover .cases__pf{color:var(--accent);opacity:1}
.fallliste a:hover{border-color:var(--brand);background:var(--surface-subtle)}
.zg2__card:hover{border-color:var(--accent);background:var(--ink-700);color:inherit}
.zg2__card:hover .zg2__t{color:var(--accent)}
.place:hover{border-color:var(--accent);background:var(--ink-700);color:inherit}
.place:hover b{color:var(--accent)}
.place:hover .place__pf{color:var(--accent);opacity:1}
.ftr a:hover{color:var(--accent);border-bottom-color:currentColor}
}
/* --- 29. Bewegung — sparsam, und abschaltbar ----------------------------- */
.reveal{opacity:0;transform:translateY(10px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
.btn:active{transform:none}
.svc:hover,.place:hover{transform:none}
}
/* --- 29c. Kennzahlen-Band, eigener Umbruchpunkt --------------------------
Unterhalb von rund 1150px wird die schmalste Spalte ("★★★★★ 22
Bewertungen bei Google") vor dem allgemeinen 1000px-Umbruch schon zu eng
und bricht um — deshalb wechselt .proof schon hier auf zwei Spalten,
waehrend die anderen Raster noch bei drei bzw. vier Spalten bleiben. */
@media (max-width:1150px){
.proof{grid-template-columns:repeat(2,1fr);gap:var(--sp-8)}
}
/* --- 30. Schmale Bildschirme --------------------------------------------- */
@media (max-width:1000px){
:root{--section-y:72px;--section-y-tight:52px;--gutter:20px}
.split,.split--wide{grid-template-columns:1fr;gap:var(--sp-10)}
.split--reihen{grid-auto-flow:row;grid-template-rows:none;row-gap:0}
.split--reihen .crosses{margin-bottom:0}
.split--reihen>div+div .eyebrow{margin-top:var(--sp-10)}
.grid--3,.grid--4,.steps,.places{grid-template-columns:repeat(2,1fr)}
.ftr__in{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
}
@media (max-width:820px){
.nav,.hdr__tel{display:none}
.hdr__burger{display:flex}
.hdr__in{height:66px;gap:var(--sp-4)}
.logo{height:38px}
.callbar{display:flex}
.hero__in{min-height:440px;padding-block:var(--sp-12)}
.hero__bg::after{background:linear-gradient(180deg,rgb(19 19 19/.72) 0%,rgb(19 19 19/.78) 100%)}
}
@media (max-width:640px){
:root{--fs-lead:18px;--section-y:56px;--section-y-tight:44px}
.grid--3,.grid--4,.grid--2,.steps,.places,.proof{grid-template-columns:1fr}
.crosses{columns:1}
.cta__actions{margin-left:0;width:100%}
.cta__actions .btn{flex:1}
.ftr__in{grid-template-columns:1fr;gap:var(--sp-8);padding-top:var(--sp-12)}
.proof{gap:var(--sp-5)}
}
/* Ortsliste unten auf den Leistungsseiten: alle Orte auf einmal. Am Handy
zweispaltig und ohne Symbole, sonst wird der Abschnitt laenger als die
Seite darueber. Steht hinter den .places-Regeln, damit sie greift. */
@media (max-width:640px){
.places--kompakt{grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.places--kompakt .place{padding:var(--sp-3)}
.places--kompakt .place__ic,.places--kompakt .place__pf{display:none}
}
/* --- 31. Druck ------------------------------------------------------------ */
@media print{
.hdr,.callbar,.cta,.skip{display:none!important}
body{color:#000;background:#fff}
a{color:#000;border:0}
.ftr{background:#fff;color:#000}
}