/* ════════════════════════════════════════════════════════════════════════
   WARMHOME — Theme & Komponenten · Fassung 2026-09-02
   Basis:    Voltkern-Build vom 31.08.2026 (Braun/Gold/Creme, aus dem Logo gesampelt)
   Kontrakt: GENERATOR_V1 §2.1 (shadcn-Token, alle Farben als HSL-Tripel)
   Profil:   live (Kundenseite, Multi-Page) — kein Demo-Banner, echte URLs

   ÄNDERUNGEN DIESER FASSUNG (aus den freigegebenen Vorlagen
   „warmhome-startseite Design update.html" und „warmhome-leistungen Design
   update.html" übernommen; das CSS beider Dateien ist identisch):
   · Radien-Hierarchie (Bilder/Karten 14 px, Buttons 8 px, Chips rund) statt 4 px überall
   · Einzugsgebiet als geo-projizierte Radiuskarte (50/100/150 km) — das Signature-Element
   · Mobile: Leistungskarten als Wisch-Carousel, Ablauf als Zeitleiste, 3-spaltige Kennzahlen
   · Referenzraster ohne Lücke (Big + 2 Small + 3 Wide)
   · Buttons und Eyebrows in Satzschrift statt Versalien, Kapitel-Nummern entfernt
   · Motion nur an drei Stellen: Hero-Einstieg, Karte, Zahlen (reduced-motion respektiert)

   FARBHERKUNFT — NACHGEMESSEN AM ECHTEN LOGO (2026-08-18, unverändert gültig)
   Erste Messung lief am Praesentations-Mockup (texturierter Hintergrund, Schlagschatten).
   Seit das freigestellte Original vorliegt (assets/brand/logo-original.webp, 44 365
   deckende Pixel), ist neu gemessen worden:
     gesaettigtstes Gold im Funktionsbereich  hsl(40 62% 38%)  #9D7525
     Median der Goldfamilie                   hsl(44 39% 54%)  #B79E5B
     Median Dunkelbraun (Tropfeninneres)      hsl(33 40% 30%)  #6C502E
     helles Gold (P90)                        hsl(48 61% 69%)  #E0CD7F

   Ergebnis der Pruefung:
   • --accent hsl(41 54% 48%) liegt INNERHALB der gemessenen Goldspanne (Farbton 40–44,
     Saettigung 39–62, Helligkeit 38–54) und bleibt unveraendert — die Ableitung aus dem
     Mockup war richtig.
   • --gold-300 lag mit Farbton 42 zu orange; die hellen Logotoene liegen bei 47–48.
     KORRIGIERT auf 47.
   • Die Braun-Toene bleiben bei den Briefing-Werten und folgen NICHT dem Tropfeninneren
     (#6C502E): Header und Footer tragen das Logo, und ein Grund im selben Braun wuerde
     das Tropfeninnere verschlucken. Der dunklere Grund laesst die Marke stehen.

   Aufbau der Datei:
     1. Theme der Fassung 2026-09-02 (aus den Vorlagen, 1:1)
     2. Bestandskomponenten der übrigen elf Seiten, auf diese Fassung gezogen
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Self-hosted Fonts (DSGVO: kein Google-Fonts-CDN). In den Vorlagen liegen
       dieselben Schnitte als data:-URI eingebettet, weil das Einzeldateien sind. ─── */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/fraunces-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;src:url(/assets/fonts/fraunces-latin-wght-italic.woff2) format("woff2-variations")}

:root{
  --background:38 52% 96%;
  --foreground:28 28% 13%;
  --card:40 50% 99%;
  --secondary:36 30% 89%;
  --muted:38 34% 92%;
  --muted-foreground:28 14% 38%;
  --accent:41 54% 48%;
  --accent-hover:41 54% 40%;
  --accent-foreground:28 28% 13%;
  --border:34 24% 85%;
  --ring:41 54% 48%;

  --brown-900:27 28% 19%;
  --brown-800:28 29% 24%;
  --brown-700:28 29% 28%;
  --gold-300:47 61% 71%;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --pill:999px;

  --img-tint:.12;

  --font-heading:"Inter",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-serif-accent:"Fraunces",Georgia,"Times New Roman",serif;

  --shadow-soft:0 2px 20px -4px hsl(28 28% 13% / .08),0 4px 8px -4px hsl(28 28% 13% / .05);
  --shadow-card:0 1px 2px hsl(28 28% 13% / .04),0 18px 40px -22px hsl(28 28% 13% / .22);
  --shadow-accent:0 8px 30px -8px hsl(41 54% 48% / .38);

  --drop:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5C12 1.5 3.1 8.4 3.1 13.6a8.9 8.9 0 0 0 17.8 0C20.9 8.4 12 1.5 12 1.5Z'/></svg>");
  --check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid hsl(var(--border))}
*{-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{background:hsl(var(--background));color:hsl(var(--foreground));font-family:var(--font-body);font-size:17px;line-height:1.65;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px}
::selection{background:hsl(var(--accent)/.25)}
[id]{scroll-margin-top:96px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:hsl(var(--accent));color:hsl(var(--accent-foreground));padding:.75rem 1.25rem;font-size:.85rem;font-weight:600}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─── Typografie ─── */
h1,h2,h3{font-family:var(--font-heading);letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,5.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.02}
h2{font-size:clamp(1.9rem,4vw,3.25rem);font-weight:450;letter-spacing:-.025em;line-height:1.06}
h3{font-size:clamp(1.2rem,1.8vw,1.45rem);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.lead{font-size:1.075rem;color:hsl(var(--muted-foreground));line-height:1.7;text-wrap:pretty}
.accent-italic{font-family:var(--font-serif-accent);font-style:italic;font-weight:400;color:hsl(var(--accent))}
h1,h2,h3,blockquote,figcaption,.accent-italic{overflow-wrap:break-word}
blockquote{-webkit-hyphens:auto;hyphens:auto}
.accent-italic,blockquote{padding-inline-end:.12em}
@media(max-width:767px){h1,h2,.lead{-webkit-hyphens:auto;hyphens:auto}}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.02em;color:hsl(var(--accent));display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:hsl(var(--accent));flex:none}
p{text-wrap:pretty}

/* ─── Layout ─── */
.wrap{max-width:1440px;margin-inline:auto;padding-inline:1.25rem}
@media(min-width:768px){.wrap{padding-inline:2rem}}
@media(min-width:1024px){.wrap{padding-inline:3rem}}
section{padding-block:3.75rem}
@media(min-width:768px){section{padding-block:5.5rem}}
@media(min-width:1024px){section{padding-block:6.5rem}}
.sec-head{max-width:62ch;margin-bottom:2.25rem}
@media(min-width:768px){.sec-head{margin-bottom:3rem}}
.sec-head .eyebrow{margin-bottom:1rem}
.sec-head .lead{margin-top:1rem}
.sec-foot{margin-top:2rem}
@media(min-width:768px){.sec-foot{margin-top:2.75rem}}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1.5rem;min-height:50px;font-size:15px;font-weight:600;letter-spacing:-.005em;border-radius:var(--radius-sm);transition:transform .15s cubic-bezier(.4,0,.2,1),background-color .15s,border-color .15s,box-shadow .15s;cursor:pointer;white-space:nowrap}
.btn-accent{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.btn-accent:hover{transform:translateY(-2px);background:hsl(var(--accent-hover));box-shadow:var(--shadow-accent)}
.btn-outline{border:1.5px solid hsl(var(--foreground)/.22);color:hsl(var(--foreground))}
.btn-outline:hover{transform:translateY(-2px);border-color:hsl(var(--foreground));background:hsl(var(--foreground)/.03)}
.btn-light{border:1.5px solid hsl(0 0% 100% / .4);color:#fff}
.btn-light:hover{transform:translateY(-2px);background:hsl(0 0% 100% / .12);border-color:#fff}
.btn .ico{width:18px;height:18px;flex:none}
.link-more{font-size:.92rem;font-weight:600;color:hsl(var(--accent));display:inline-flex;gap:.3rem;align-items:center}
.link-more::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transition:transform .2s}
.link-more:hover::after{transform:translateX(3px)}

/* ─── Signature: Grain ─── */
.grain::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");opacity:.08;mix-blend-mode:overlay}
body::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");opacity:.04;mix-blend-mode:multiply}

/* ─── Signature: Licht-Sweep (warmes Gold) ─── */
.light-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 0%,transparent 35%,hsl(42 60% 62% / .10) 48%,hsl(44 70% 70% / .20) 50%,hsl(42 60% 62% / .10) 52%,transparent 65%,transparent 100%);background-size:280% 280%;animation:sweep 9s cubic-bezier(.22,1,.36,1) infinite}
@keyframes sweep{0%{background-position:-50% -50%}50%{background-position:110% 110%}100%{background-position:-50% -50%}}
@media (prefers-reduced-motion:reduce){.light-sweep{animation:none;opacity:0}}

/* ─── Tropfen-Listen (Logo-Formsprache, sparsam) ─── */
.drop-list{display:grid;gap:.75rem}
.drop-list li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;color:hsl(var(--muted-foreground));line-height:1.55}
.drop-list li::before{content:"";flex:none;width:14px;height:14px;margin-top:.3rem;background:hsl(var(--accent));-webkit-mask:var(--drop) center/contain no-repeat;mask:var(--drop) center/contain no-repeat}
.check-list{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.check-list li{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500}
.check-list li i{flex:none;width:18px;height:18px;border-radius:50%;background:hsl(var(--gold-300)/.22);display:grid;place-items:center}
.check-list li i::before{content:"";width:12px;height:12px;background:hsl(var(--gold-300));-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}

/* ─── Navigation ─── */
.nav{position:sticky;top:0;z-index:50;background:hsl(var(--brown-900)/.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid hsl(var(--gold-300)/.16);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 10px 30px -18px hsl(27 30% 8% / .7)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:80px}
.brand{display:flex;align-items:center;gap:.7rem;line-height:1}
.brand img{height:40px;width:auto;flex:none}
@media(max-width:1023px){.brand img{height:34px}}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand b{font-family:var(--font-serif-accent);font-weight:500;font-size:1.4rem;letter-spacing:.14em;color:hsl(38 40% 92%);text-transform:uppercase}
.brand b em{font-style:normal;color:hsl(var(--gold-300))}
.brand small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:hsl(38 25% 70%);margin-top:6px}
.nav-links{display:flex;gap:1.75rem;font-size:.9rem;font-weight:500}
@media(min-width:1200px){.nav-links{gap:2.1rem}}
.nav-links a{color:hsl(38 30% 84%);transition:color .15s;padding-block:.5rem;white-space:nowrap;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:hsl(var(--gold-300));transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:hsl(var(--gold-300))}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.nav-tel{font-size:.9rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:hsl(38 35% 90%)}
.nav-tel:hover{color:hsl(var(--gold-300))}
.nav-right .btn{min-width:0;padding:.7rem 1.2rem;min-height:44px;font-size:14px}

/* Mobile Navigation — CSS-only. Reihenfolge: input.nav-toggle → nav.nav → label.nav-scrim → div.nav-overlay */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:hsl(0 0% 100% / .08);align-items:center}
.nav-burger span{display:block;height:2px;width:22px;background:hsl(38 40% 92%);border-radius:2px;transition:transform .25s ease,opacity .18s ease}
.nav-toggle:focus-visible+.nav .nav-burger{outline:2px solid hsl(var(--gold-300));outline-offset:3px;border-radius:var(--radius-sm)}
.nav-toggle:checked+.nav .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked+.nav .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked+.nav .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{display:none;position:fixed;inset:0;z-index:60;background:hsl(var(--brown-900)/.55)}
.nav-overlay{display:none;position:fixed;inset:60px 0 0;z-index:61;background:hsl(var(--brown-900));padding:1.25rem 1.25rem 2.5rem;overflow-y:auto;overscroll-behavior:contain}
.nav-overlay ul{display:flex;flex-direction:column}
.nav-overlay li a{display:flex;align-items:center;justify-content:space-between;padding:1rem .25rem;font-size:1.25rem;font-weight:600;color:hsl(38 35% 90%);border-bottom:1px solid hsl(var(--gold-300)/.14)}
.nav-overlay li a::after{content:"";width:18px;height:18px;background:hsl(var(--gold-300)/.6);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.nav-overlay li a[aria-current="page"]{color:hsl(var(--gold-300))}
.nav-overlay-foot{margin-top:1.5rem;display:grid;gap:.75rem}
.nav-overlay-foot .tel{font-size:1.05rem;font-weight:600;color:hsl(38 25% 78%);font-variant-numeric:tabular-nums}
.nav-overlay-foot .hours{font-size:.85rem;color:hsl(38 16% 64%)}
.nav-overlay .btn{width:100%}
@media(max-width:1023px){
  .nav-links,.nav-tel{display:none}
  .nav-in{height:60px}
  .nav-burger{display:flex}
  .nav-toggle:checked~.nav-scrim,.nav-toggle:checked~.nav-overlay{display:block}
  .nav-toggle:checked~.nav{position:fixed;top:0;left:0;right:0;z-index:70}
  body:has(.nav-toggle:checked){overflow:hidden}
}
@media(min-width:1024px){.nav-overlay,.nav-scrim,.nav-burger{display:none!important}}
@media(max-width:560px){.nav-right .btn{display:none}}

/* ─── Hero (Startseite) ─── */
/* HERO-FIT-INVARIANTE (GENERATOR_V1 §2.5, QA-pflichtig: hero-fit-praesenz):
   Mindesthoehe, KEINE feste Hoehe — sonst wird der Inhalt bei 1280–1536 px beschnitten.
   ABWEICHUNG VON DER VORLAGE, bewusst: die Einzeldatei setzt `max(640px,82vh)`.
   Der Wert `max(680px,85vh)` ist der Goldstandard, den das Gate namentlich prueft;
   der Unterschied betraegt 40 px Mindesthoehe und ist auf keinem Schirm sichtbar,
   ein rotes design_qc-Gate dagegen sperrt den Deploy. */
.hero{position:relative;min-height:60vh;overflow:hidden;display:flex;align-items:flex-end}
@media(min-width:768px){.hero{min-height:max(680px,85vh)}}
.hero-media{position:absolute;inset:0;z-index:0;background:hsl(var(--brown-900))}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,hsl(27 30% 10% / .96) 0%,hsl(27 30% 10% / .88) 55%,hsl(27 30% 10% / .40) 80%,hsl(27 30% 10% / .06) 100%)}
@media(min-width:1280px){.hero-veil{background:linear-gradient(to right,hsl(27 30% 10% / .95) 0%,hsl(27 30% 10% / .88) 44%,hsl(27 30% 10% / .50) 60%,hsl(27 30% 10% / .12) 76%,hsl(27 30% 10% / .03) 100%)}}
.hero-in{position:relative;z-index:4;width:100%;padding-block:3rem}
@media(min-width:768px){.hero-in{padding-block:4.5rem}}
.hero .eyebrow{color:hsl(var(--gold-300));margin-bottom:1.25rem}
.hero .eyebrow::before{background:hsl(var(--gold-300))}
.hero h1{color:hsl(38 45% 97%);max-width:16ch;margin-bottom:1.25rem}
.hero .accent-italic{color:hsl(var(--gold-300))}
.hero .lead{color:hsl(38 25% 88%);margin-bottom:2rem;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.hero-trust{margin-top:2rem;color:hsl(38 25% 84%)}
.hero-trust li{font-weight:500}
.hero-badge{display:inline-flex;align-items:center;gap:.8rem;border:1px solid hsl(var(--gold-300)/.28);background:hsl(27 30% 10% / .38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.5rem 1rem;border-radius:var(--pill);font-size:.82rem;color:hsl(38 30% 90%);margin-bottom:1.75rem}
.hero-badge b{font-weight:700;color:hsl(var(--gold-300))}
/* Trennpunkt zwischen den beiden Mengenangaben. Die frueher danebenstehende
   Radius-Pille (.hero-badge .pill) ist am 07.09. entfallen. */
.hero-badge .dot{width:4px;height:4px;border-radius:50%;background:hsl(var(--gold-300)/.6)}

/* Hero-Einstieg: die einzige Ladeanimation der Seite */
.js .hero-in>.wrap>*{animation:rise .7s cubic-bezier(.22,1,.36,1) both}
.js .hero-in>.wrap>:nth-child(1){animation-delay:.05s}
.js .hero-in>.wrap>:nth-child(2){animation-delay:.15s}
.js .hero-in>.wrap>:nth-child(3){animation-delay:.25s}
.js .hero-in>.wrap>:nth-child(4){animation-delay:.35s}
.js .hero-in>.wrap>:nth-child(5){animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Badge oben, Headline unten (Desktop) */
@media(min-width:768px){
  .hero{align-items:stretch}
  .hero-in{display:flex;flex-direction:column;justify-content:flex-end}
  .hero-in>.wrap{display:flex;flex-direction:column;flex:1;width:100%}
  .hero-badge{align-self:flex-start;margin-bottom:auto}
  .hero h1{margin-top:1.75rem}
}
@media(min-width:1024px){
  .hero .eyebrow,.hero .hero-badge,.hero h1,.hero .hero-cta{max-width:720px}
  .hero h1{font-size:clamp(3.4rem,5.2vw,4.4rem)}
}
@media(min-width:1920px){.hero-in{padding-block:6rem}.hero .lead{font-size:1.2rem}}
@media(min-width:2560px){.hero .eyebrow,.hero .hero-badge,.hero h1,.hero .hero-cta{max-width:860px}.hero h1{font-size:5.25rem}}

/* Mobile Hero (< 768) */
@media(max-width:767px){
  .hero{min-height:min(88svh,720px,calc(100svh - 104px - env(safe-area-inset-bottom)))}
  .hero-media img{object-position:82% center}
  .hero-in{padding-block:2rem min(6.5rem,12svh)}
  .hero h1{font-size:clamp(2rem,9vw,2.4rem);line-height:1.02;margin-bottom:1rem}
  .hero .lead{font-size:1rem;line-height:1.55;margin-bottom:1.4rem}
  .hero-badge{display:none}
  .hero-cta .btn-light{display:none}
  .hero-cta .btn{width:100%}
  .hero-trust{margin-top:1.4rem}
  .hero-trust li{font-size:.85rem}
  .ab-sm{display:none}
  .nur-mobil{display:inline}
}
@media(min-width:768px){.nur-mobil{display:none}}

/* ─── Sub-Hero (Unterseiten) ─── */
.subhero{position:relative;overflow:hidden;background:linear-gradient(150deg,hsl(var(--brown-800)),hsl(var(--brown-900)) 62%,hsl(30 30% 15%));padding-block:2.75rem 3rem}
@media(min-width:768px){.subhero{padding-block:3.5rem 4.5rem}}
@media(min-width:1024px){.subhero{padding-block:4rem 5.5rem}}
.subhero-grid{position:relative;z-index:4;display:grid;gap:2rem;align-items:center}
@media(min-width:1024px){.subhero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:4rem}}
.subhero .eyebrow{color:hsl(var(--gold-300));margin-bottom:1.25rem}
.subhero .eyebrow::before{background:hsl(var(--gold-300))}
.subhero h1{color:hsl(38 45% 97%);font-size:clamp(2.1rem,4.6vw,3.9rem);max-width:18ch}
.subhero .accent-italic{color:hsl(var(--gold-300))}
.subhero .lead{color:hsl(38 22% 86%);margin-top:1.25rem;max-width:52ch}
.subhero-links{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.5rem}
.subhero-links a{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.45rem .95rem;border-radius:var(--pill);border:1px solid hsl(var(--gold-300)/.28);color:hsl(38 30% 88%);font-size:.85rem;font-weight:500;transition:border-color .15s,color .15s,background-color .15s}
.subhero-links a:hover{border-color:hsl(var(--gold-300));color:hsl(var(--gold-300));background:hsl(var(--gold-300)/.08)}
.subhero-links a b{color:hsl(var(--gold-300));font-weight:600;font-variant-numeric:tabular-nums;font-size:.75rem}
.subhero-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -30px hsl(27 30% 5% / .8);background:hsl(var(--brown-800))}
.subhero-media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.subhero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,hsl(27 30% 10% / .55),transparent 55%)}
.subhero-media figcaption{position:absolute;left:1.1rem;bottom:1rem;z-index:2;color:hsl(38 35% 92%);font-size:.82rem;font-weight:500;background:hsl(27 30% 10% / .45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.4rem .8rem;border-radius:var(--pill);border:1px solid hsl(var(--gold-300)/.22)}
@media(max-width:1023px){.subhero-media{aspect-ratio:16/10}}
.crumb{position:relative;z-index:4;font-size:13px;color:hsl(38 18% 68%);margin-bottom:1.75rem;display:flex;align-items:center;gap:.5rem}
.crumb a:hover{color:hsl(var(--gold-300))}
.crumb span[aria-current]{color:hsl(38 30% 84%)}
.crumb i{width:14px;height:14px;background:hsl(38 18% 55%);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}

/* ─── Kennzahlen-Band (Gold auf Braun) ─── */
.kpi{background:hsl(var(--brown-900));position:relative;overflow:hidden;padding-block:0!important}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);position:relative;z-index:4}
.kpi-cell{padding:1.6rem .5rem;border-right:1px solid hsl(var(--gold-300)/.16);text-align:center}
.kpi-cell:last-child{border-right:0}
@media(min-width:768px){.kpi-cell{padding:3rem 2rem;text-align:left}}
.kpi-num{font-family:var(--font-heading);font-weight:500;font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1;letter-spacing:-.03em;color:hsl(var(--gold-300));font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi-num small{font-size:.55em;font-weight:500;letter-spacing:0;margin-left:.1em}
.kpi-lbl{font-size:.78rem;color:hsl(38 20% 76%);margin-top:.55rem;line-height:1.4}
@media(min-width:768px){.kpi-lbl{font-size:.92rem;margin-top:.8rem}}

/* ─── Leistungs-Teaser (Startseite) ─── */
.svc-teasers{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.svc-teasers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.svc-teasers{grid-template-columns:repeat(4,1fr);gap:1.4rem}}
.tcard{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);position:relative}
.tcard-img{aspect-ratio:4/3;overflow:hidden;background:hsl(var(--secondary));position:relative}
.tcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(0,0,.2,1)}
.tcard:hover .tcard-img img{transform:scale(1.05)}
.tcard-no{position:absolute;z-index:3;top:.85rem;left:.85rem;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;padding-inline:.6rem;border-radius:var(--pill);background:hsl(27 30% 10% / .5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:hsl(var(--gold-300));font-size:.76rem;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;border:1px solid hsl(var(--gold-300)/.25)}
.tcard-body{padding:1.35rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tcard-body h3{font-size:1.25rem}
.tcard-body p{font-size:.92rem;color:hsl(var(--muted-foreground));flex:1;line-height:1.55}
.tcard .link-more{margin-top:.6rem}
.tcard .link-more::before{content:"";position:absolute;inset:0}
.swipe-hint{display:none}
@media(max-width:639px){
  .svc-teasers{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.25rem 1.25rem 1rem;margin-inline:-1.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .svc-teasers::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 min(82vw,340px);scroll-snap-align:start}
  .swipe-hint{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:hsl(var(--muted-foreground));margin-top:.25rem}
  .swipe-hint::after{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
}

/* ─── Bild-Tint: palettenfarbenes Overlay über jedem Bild-Slot ─── */
.tcard-img::after,.svc-media::after,.grid-proof figure::after,.story-img::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,hsl(var(--brown-900)/var(--img-tint)),hsl(var(--accent)/calc(var(--img-tint) * .5)))}

/* ─── Ablauf „Alles aus einer Hand" — Zeitleiste ─── */
.chain{background:hsl(var(--muted)/.55);border-block:1px solid hsl(var(--border))}
.steps{display:grid;grid-template-columns:1fr;gap:0;position:relative}
.step{position:relative;display:flex;gap:1.1rem;padding-block:0 1.9rem}
.step:last-child{padding-bottom:0}
.step-no{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid hsl(var(--accent));background:hsl(var(--background));color:hsl(var(--accent));display:grid;place-items:center;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;position:relative;z-index:1;box-shadow:0 0 0 6px hsl(var(--muted)/.55)}
.step:not(:last-child)::before{content:"";position:absolute;left:19.5px;top:40px;bottom:0;width:1.5px;background:linear-gradient(to bottom,hsl(var(--accent)/.55),hsl(var(--accent)/.2))}
.step-body{display:grid;gap:.35rem;padding-top:.45rem}
.step b{font-weight:600;font-size:1.02rem;line-height:1.3}
.step p{font-size:.9rem;color:hsl(var(--muted-foreground));line-height:1.55;max-width:38ch}
@media(min-width:768px){
  .steps{grid-template-columns:repeat(3,1fr);gap:2.5rem 1.5rem}
  .step{flex-direction:column;gap:1rem;padding-block:0}
  .step:not(:last-child)::before{left:40px;top:19.5px;right:-1.5rem;bottom:auto;width:auto;height:1.5px;background:linear-gradient(to right,hsl(var(--accent)/.55),hsl(var(--accent)/.2))}
  .step:nth-child(3n)::before{display:none}
  .step-body{padding-top:0}
}
@media(min-width:1100px){
  .steps{grid-template-columns:repeat(6,1fr);gap:1.25rem}
  .step:nth-child(3n)::before{display:block}
  .step:last-child::before{display:none}
  .step:not(:last-child)::before{right:-1.25rem}
}

/* ─── Referenzen (Bento ohne Lücke) ─── */
.proof{background:hsl(var(--muted)/.55);border-block:1px solid hsl(var(--border))}
.proof-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.25rem}
@media(min-width:768px){.proof-head{margin-bottom:3rem}}
.proof-note{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:hsl(var(--muted-foreground));font-weight:500;padding:.5rem .95rem;border:1px solid hsl(var(--border));border-radius:var(--pill);background:hsl(var(--card))}
.proof-note::before{content:"";width:12px;height:12px;background:hsl(var(--accent));-webkit-mask:var(--drop) center/contain no-repeat;mask:var(--drop) center/contain no-repeat}
.grid-proof{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(130px,38vw,190px);gap:.6rem}
@media(min-width:900px){.grid-proof{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(170px,15.5vw,240px);gap:.9rem}}
.grid-proof figure{overflow:hidden;position:relative;border-radius:var(--radius);background:hsl(var(--secondary))}
.grid-proof img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(0,0,.2,1)}
.grid-proof figure:hover img{transform:scale(1.04)}
.p-big{grid-column:span 2;grid-row:span 2}
.p-wide{grid-column:span 2}
.grid-proof figcaption{position:absolute;left:.7rem;bottom:.7rem;z-index:2;padding:.38rem .75rem;font-size:12px;color:hsl(38 35% 94%);font-weight:500;background:hsl(27 30% 10% / .5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--pill);border:1px solid hsl(0 0% 100% / .12);max-width:calc(100% - 1.4rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:899px){.grid-proof figcaption{font-size:11px;padding:.3rem .6rem}}

/* ─── Leistungs-Blöcke (Unterseite) ─── */
.svc-block{display:grid;gap:clamp(1.5rem,4vw,4.5rem);align-items:center;grid-template-columns:1fr;padding-block:2.75rem;border-bottom:1px solid hsl(var(--border))}
@media(min-width:768px){.svc-block{padding-block:4rem}}
.svc-block:first-of-type{padding-top:0}
.svc-block:last-of-type{border-bottom:0;padding-bottom:0}
@media(min-width:900px){.svc-block{grid-template-columns:1fr 1fr}.svc-block.reverse .svc-media{order:2}}
.svc-media{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:hsl(var(--secondary));box-shadow:var(--shadow-card)}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(0,0,.2,1)}
.svc-block:hover .svc-media img{transform:scale(1.03)}
.svc-media .tcard-no{top:1rem;left:1rem}
.svc-copy h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin-block:.6rem 1rem}
.svc-copy .lead{margin-bottom:1.35rem}
.svc-copy .drop-list{margin-bottom:1.75rem}
.svc-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.35rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:var(--pill);font-size:.76rem;font-weight:600;letter-spacing:.01em;background:hsl(var(--accent)/.12);color:hsl(28 40% 30%);border:1px solid hsl(var(--accent)/.25)}
.svc-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ─── Eignung: Fräsen vs. Tacker ─── */
.fit-grid{display:grid;gap:1px;background:hsl(var(--border));border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;grid-template-columns:1fr;box-shadow:var(--shadow-card)}
@media(min-width:768px){.fit-grid{grid-template-columns:repeat(2,1fr)}}
.fit-cell{background:hsl(var(--card));padding:1.6rem 1.4rem}
@media(min-width:768px){.fit-cell{padding:2rem 2.25rem}}
.fit-cell .tag{margin-bottom:.9rem}
.fit-cell h3{margin-bottom:.5rem}
.fit-cell p{font-size:.95rem;color:hsl(var(--muted-foreground));line-height:1.6}
.fit-cell .drop-list{margin-top:1rem}
.fit-cell .drop-list li{font-size:.9rem}

/* ─── Bewertungen ─── */
.reviews{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:900px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-card)}
.review-stars{color:hsl(var(--accent));letter-spacing:.12em;font-size:.95rem}
.review p{font-size:.95rem;color:hsl(var(--muted-foreground));line-height:1.65;flex:1}
/* Zwei Zeilen: Vorname fett, Ort/Rolle darunter leiser. `display:grid` statt
   <br>, damit der Zeilenfall zur Auszeichnung gehört und nicht zum Text.
   font-style:normal, weil <cite> im Browser sonst kursiv kommt — die Kursive
   ist hier dem Serif-Bruch vorbehalten. */
.review cite{font-style:normal;font-size:.85rem;font-weight:600;display:grid;gap:.1rem}
.review cite span{font-weight:400;font-size:.82rem;color:hsl(var(--muted-foreground))}

/* ─── Platzhalter-Markierung (Kunde liefert Inhalt nach) ─── */
.ph{border:1px dashed hsl(var(--accent)/.55);background:hsl(var(--accent)/.06);border-radius:var(--radius-sm);padding:1.1rem 1.2rem;font-size:.85rem;color:hsl(var(--muted-foreground));flex:1}
.ph b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--accent));font-weight:600;margin-bottom:.4rem}
.ph-inline{background:hsl(var(--accent)/.14);border-bottom:1px dashed hsl(var(--accent)/.6);padding:0 .2em;font-variant-numeric:tabular-nums}

/* ─── FAQ ─── */
.faq{max-width:900px}
.faq details{border-bottom:1px solid hsl(var(--border))}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;font-family:var(--font-heading);font-weight:500;font-size:clamp(1.02rem,1.7vw,1.3rem);letter-spacing:-.01em;line-height:1.35;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:32px;height:32px;border-radius:50%;border:1px solid hsl(var(--border));background:hsl(var(--card)) var(--chev) center/16px no-repeat;transform:translateY(-50%) rotate(90deg);transition:transform .25s,background-color .15s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(-90deg)}
.faq summary:hover{color:hsl(var(--accent))}
.faq details>div{padding:0 3rem 1.6rem 0;color:hsl(var(--muted-foreground));font-size:.975rem;max-width:68ch}
.faq details>div p+p{margin-top:.75rem}

/* ─── CTA-Band ─── */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(135deg,hsl(var(--brown-800)),hsl(var(--brown-900)));color:hsl(38 30% 90%);padding-block:3.5rem!important}
@media(min-width:768px){.cta-band{padding-block:5rem!important}}
.cta-band .wrap{position:relative;z-index:4;display:grid;gap:2rem;align-items:center}
@media(min-width:1024px){.cta-band .wrap{grid-template-columns:1.2fr .8fr;gap:4rem}}
.cta-band h2{color:hsl(38 45% 97%);max-width:18ch}
.cta-band .accent-italic{color:hsl(var(--gold-300))}
.cta-band p{color:hsl(38 22% 84%);margin-block:1rem 1.75rem;max-width:52ch}
.cta-band .eyebrow{color:hsl(var(--gold-300));margin-bottom:1.25rem}
.cta-band .eyebrow::before{background:hsl(var(--gold-300))}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.cta-card{background:hsl(27 30% 10% / .35);border:1px solid hsl(var(--gold-300)/.2);border-radius:var(--radius-lg);padding:1.75rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta-card .label{font-size:.8rem;color:hsl(38 20% 72%);margin-bottom:.35rem}
.cta-tel{font-family:var(--font-heading);font-weight:500;font-size:clamp(1.6rem,2.8vw,2.3rem);letter-spacing:-.02em;color:hsl(38 45% 97%);font-variant-numeric:tabular-nums;display:inline-block}
.cta-tel:hover{color:hsl(var(--gold-300))}
.cta-card .hours{margin-top:.4rem;font-size:.85rem;color:hsl(38 20% 72%)}
.cta-card .check-list{margin-top:1.25rem;color:hsl(38 30% 88%)}
.cta-card .check-list li{font-size:.85rem}

/* ─── Einzugsgebiet: Radiuskarte (Signature) ─── */
.area{position:relative;overflow:hidden}
.area-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:1024px){.area-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:4.5rem}}
.area-copy .eyebrow{margin-bottom:1rem}
.area-copy .lead{margin-top:1rem;max-width:56ch}
.area-copy .lead b{color:hsl(var(--foreground));font-weight:600}
.area-facts{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;margin-top:1.5rem}
.area-facts li{display:grid;gap:.05rem}
.area-facts b{font-family:var(--font-heading);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:hsl(var(--foreground))}
.area-facts span{font-size:.8rem;color:hsl(var(--muted-foreground))}
.area-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem}
.area-list li span,.area-list li a{display:inline-flex;align-items:center;min-height:40px;padding:.45rem .95rem;border:1px solid hsl(var(--border));border-radius:var(--pill);font-size:.86rem;font-weight:500;background:hsl(var(--card));color:hsl(var(--foreground));transition:border-color .15s,color .15s,background-color .15s}
.area-list li a:hover{border-color:hsl(var(--accent));color:hsl(var(--accent))}
.area-list li.more span{border-style:dashed;color:hsl(var(--muted-foreground));background:transparent}
.area-note{margin-top:1.25rem;font-size:.9rem;color:hsl(var(--muted-foreground))}
.area-note a{color:hsl(var(--accent));font-weight:600}
.map-panel{position:relative;border-radius:var(--radius-lg);background:radial-gradient(120% 100% at 50% 40%,hsl(40 50% 99%),hsl(var(--muted)) 85%);border:1px solid hsl(var(--border));box-shadow:var(--shadow-card);padding:clamp(.75rem,2.5vw,1.75rem);overflow:hidden}
.map-panel .map-legend{position:absolute;z-index:3;left:1rem;bottom:1rem;display:flex;gap:.45rem;flex-wrap:wrap}
.map-legend span{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:500;color:hsl(var(--muted-foreground));background:hsl(var(--card)/.85);border:1px solid hsl(var(--border));border-radius:var(--pill);padding:.3rem .65rem;backdrop-filter:blur(6px)}
.map-legend i{width:8px;height:8px;border-radius:50%;background:hsl(var(--brown-700))}
.map-legend i.home{background:hsl(var(--accent));box-shadow:0 0 0 3px hsl(var(--accent)/.25)}
.map{width:100%;height:auto;aspect-ratio:1;display:block;font-family:var(--font-body)}
.map-ring{fill:none;stroke:hsl(var(--brown-900)/.38);stroke-width:1.2;stroke-dasharray:2.5 5;stroke-linecap:round}
.map-ringlbl{font-size:11px;fill:hsl(var(--muted-foreground));font-weight:500;letter-spacing:.04em}
.map-axis{stroke:hsl(var(--brown-900)/.07);stroke-width:1}
.map-city circle{fill:hsl(var(--brown-700));stroke:hsl(var(--background));stroke-width:2}
.map-city text{font-size:12.5px;font-weight:500;fill:hsl(var(--foreground));paint-order:stroke;stroke:hsl(var(--background));stroke-width:3px;stroke-linejoin:round}
.map-home-dot{fill:hsl(var(--accent))}
.map-home-ring{fill:none;stroke:hsl(var(--accent));stroke-width:1.5}
.map-home-lbl{font-size:14px;font-weight:700;fill:hsl(var(--foreground));paint-order:stroke;stroke:hsl(var(--background));stroke-width:3px}
.map-pulse{fill:hsl(var(--accent)/.28);transform-origin:center;transform-box:fill-box;animation:pulse 3s cubic-bezier(.2,.6,.3,1) infinite}
.map-pulse-2{animation-delay:1.5s}
@keyframes pulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
/* Einblendung der Karte, sobald sie ins Bild kommt (nur mit JS) */
.js .map .map-ring,.js .map .map-ringlbl{opacity:0;transform:scale(.7);transform-origin:center;transform-box:fill-box;transition:opacity .9s ease,transform 1.3s cubic-bezier(.22,1,.36,1)}
.js .map .map-city{opacity:0;transition:opacity .6s ease}
.js .map.in .map-ring,.js .map.in .map-ringlbl{opacity:1;transform:scale(1)}
.js .map.in .map-city{opacity:1}
.js .map.in .map-ring:nth-of-type(2),.js .map.in .map-ringlbl:nth-of-type(2){transition-delay:.15s}
.js .map.in .map-ring:nth-of-type(3),.js .map.in .map-ringlbl:nth-of-type(3){transition-delay:.3s}
.js .map.in .map-city{transition-delay:.55s}
@media (prefers-reduced-motion:reduce){.js .map .map-ring,.js .map .map-ringlbl,.js .map .map-city{opacity:1;transform:none}}
@media(max-width:1023px){.area-grid .map-panel{order:1}.area-grid .area-copy{order:0}.area-grid .area-chips{order:2}}
@media(min-width:1024px){
  .area-grid{align-items:start}
  .area-copy{grid-column:1;grid-row:1}
  .area-chips{grid-column:1;grid-row:2;align-self:start}
  .map-panel{grid-column:2;grid-row:1 / span 2}
  .area-list{margin-top:1rem}
}
@media(max-width:639px){
  .map-city.minor{display:none}
  .map-city text{font-size:22px;stroke-width:5px}
  .map-city circle{r:6;stroke-width:3px}
  .map-ringlbl{font-size:19px}
  .map-home-lbl{font-size:25px;stroke-width:5px}
  .map-home-dot{r:7}.map-home-ring{r:14}
  .map-panel{padding:.5rem}
  .map-panel .map-legend{position:static;padding:.5rem .35rem 0;justify-content:center}
}


@media(min-width:1024px) and (max-width:1279px){
  .map-city.minor{display:none}
  .map-city text{font-size:17px;stroke-width:4px}
  .map-city circle{r:4.5}
  .map-ringlbl{font-size:14px}
  .map-home-lbl{font-size:19px}
  .map-home-dot{r:5}.map-home-ring{r:11}
}
/* ─── Kontakt ─── */
.contact-grid{display:grid;gap:clamp(2.5rem,4vw,4.5rem);grid-template-columns:1fr}
@media(min-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
.field{margin-bottom:1rem}
.field label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:.5rem;font-weight:600}
.field input,.field textarea,.field select{width:100%;background:hsl(var(--card));border:1px solid hsl(var(--border));color:hsl(var(--foreground));padding:.85rem 1rem;font-family:var(--font-body);font-size:.95rem;border-radius:var(--radius-sm);transition:border-color .15s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:hsl(var(--accent));outline:none}

/* ─── Footer ─── */
footer{background:hsl(var(--brown-900));color:hsl(38 18% 74%);padding-top:4rem}
@media(min-width:768px){footer{padding-top:5rem}}
.f-grid{display:grid;gap:2.25rem;grid-template-columns:1fr}
@media(min-width:640px){.f-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.f-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.f-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--gold-300));margin-bottom:1rem;font-weight:600}
.f-list{display:grid;gap:.55rem;font-size:.9rem}
.f-list a{color:hsl(38 16% 76%);transition:color .15s}
.f-list a:hover{color:hsl(var(--gold-300))}
.f-brand{display:flex;flex-direction:column}
.f-brand img{align-self:flex-start;width:auto;max-width:100%;height:104px}
@media(max-width:639px){.f-brand img{height:88px}}
.f-brand p{font-size:.9rem;color:hsl(38 14% 68%);max-width:32ch;margin-top:1rem;line-height:1.7}
.f-brand .btn{align-self:flex-start;margin-top:1.25rem}
.f-tel{font-size:1.05rem;font-weight:600;color:hsl(38 35% 90%);font-variant-numeric:tabular-nums}
.f-tel:hover{color:hsl(var(--gold-300))}
.seo-text{margin-top:3.5rem;padding-top:2.25rem;border-top:1px solid hsl(var(--gold-300)/.12);color:hsl(38 12% 62%);font-size:.82rem;line-height:1.75}
.seo-text h2{font-family:var(--font-body);font-size:.88rem;font-weight:600;color:hsl(38 16% 72%);margin-block:1.1rem .35rem;letter-spacing:0;line-height:1.5}
.seo-text p{max-width:78ch}
.f-bottom{margin-top:2.25rem;padding-block:1.4rem;border-top:1px solid hsl(var(--gold-300)/.12);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:hsl(38 12% 58%)}
.f-bottom a:hover{color:hsl(var(--gold-300))}
@media(max-width:767px){
  .f-list a{display:inline-block;padding-block:.55rem}
  .f-list li{margin:0}
}

/* ─── Mobile Sticky-Bar ─── */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.6rem;background:hsl(var(--background)/.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid hsl(var(--border));padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom))}
.sticky-bar .btn{flex:1;padding:.8rem .5rem;min-width:0;min-height:48px}
@media(max-width:767px){.sticky-bar{display:flex}body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}}

/* ════════════════════════════════════════════════════════════════════════
   BESTANDSKOMPONENTEN — auf die Fassung 2026-09-02 gezogen

   Die zwei Vorlagen (Startseite, Leistungen) tragen nur die Komponenten, die
   auf DIESEN beiden Seiten vorkommen. Der Live-Build hat elf weitere Seiten;
   was die brauchen, steht hier — nicht als Rest des alten Themes, sondern in
   derselben Sprache: Radien-Hierarchie statt 4 px, Satzschrift statt
   Versalien, --shadow-card statt --shadow-soft.

   ERSATZLOS ENTFALLEN, weil die Fassung sie abgelöst hat:
     .chapter      → Kapitel-Nummern sind raus, die Eyebrow trägt das Thema
     .svc-no       → .tcard-no (Pille auf dem Bild statt Zeile im Text)
     .svc-link     → .link-more (Chevron statt Pfeil-Glyphe)
     .kpi-mobil    → das Kennzahlen-Band ist jetzt auch mobil dreispaltig
     .owner .badges .badge  → auf keiner gebauten Seite in Gebrauch
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Vorteile (Leistungsseiten, Über uns) ─── */
.adv{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:768px){.adv{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.adv-item{display:flex;flex-direction:column;gap:.6rem}
.adv-ico{width:30px;height:30px;flex:none;background:hsl(var(--accent));-webkit-mask:var(--drop) center/contain no-repeat;mask:var(--drop) center/contain no-repeat}
.adv-item b{font-weight:600;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em}
.adv-item p{font-size:.92rem;color:hsl(var(--muted-foreground));line-height:1.6}

/* ─── Projektbeispiel ─── */
.case{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1fr;box-shadow:var(--shadow-card)}
@media(min-width:900px){.case{grid-template-columns:1.1fr .9fr}}
.case-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:hsl(var(--secondary))}
.case-media img{width:100%;height:100%;object-fit:cover}
.case-body{padding:clamp(1.6rem,4vw,2.75rem);display:flex;flex-direction:column;justify-content:center;gap:.85rem}
.case-body p{color:hsl(var(--muted-foreground));font-size:.96rem}
/* .ph traegt in den Vorlagen flex:1, damit die Bewertungskarte bis zur Zeile
   mit dem Namen durchlaeuft. In der Fallstudie ist der Block kein Fueller,
   sondern ein Absatz — dort waechst er nicht mit. */
.case-body .ph{flex:0 0 auto}

/* ─── Story (Über uns) ─── */
.story{display:grid;gap:clamp(2rem,4vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.story{grid-template-columns:1.05fr .95fr}}
.story-img{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:hsl(var(--secondary));box-shadow:var(--shadow-card)}
.story-img img{width:100%;height:100%;object-fit:cover}

/* ─── Zeitleiste (Über uns) ───
   Dieselbe Formsprache wie .steps auf der Startseite: Punkt auf der Linie,
   Verlauf nach unten ausbleichend. */
.timeline{display:grid;gap:0;margin-top:2rem;border-left:1.5px solid;border-image:linear-gradient(to bottom,hsl(var(--accent)/.55),hsl(var(--accent)/.2)) 1}
.tl-item{padding:0 0 1.75rem 1.75rem;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-6px;top:.45rem;width:10px;height:10px;border-radius:50%;background:hsl(var(--accent));box-shadow:0 0 0 4px hsl(var(--background))}
.tl-item b{display:block;font-weight:600;font-size:1rem;line-height:1.35}
.tl-item span{font-size:.88rem;color:hsl(var(--muted-foreground));line-height:1.6}
.tl-year{font-size:12px;font-weight:600;letter-spacing:.02em;color:hsl(var(--accent));font-variant-numeric:tabular-nums;display:block;margin-bottom:.25rem}

/* ─── Kontakt: Anrufkasten und Datenzeilen ─── */
.call-box{border:1px solid hsl(var(--accent)/.45);border-radius:var(--radius);padding:1.6rem;margin-bottom:1.75rem;background:hsl(var(--card));box-shadow:var(--shadow-card)}
.call-box .eyebrow{margin-bottom:.75rem}
.call-num{font-family:var(--font-heading);font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-block;margin-bottom:.25rem}
.call-num:hover{color:hsl(var(--accent))}
.call-box small{display:block;color:hsl(var(--muted-foreground));font-size:.82rem}
.info-row{display:flex;gap:1rem;padding:.95rem 0;border-bottom:1px solid hsl(var(--border));font-size:.95rem}
.info-row b{font-size:12px;letter-spacing:.02em;color:hsl(var(--muted-foreground));min-width:110px;padding-top:.2rem;font-weight:600;flex:none}
.info-row a{color:hsl(var(--accent));font-weight:500}

/* ─── Formular (die Basis steht im Theme, hier nur, was dort fehlt) ─── */
.field label .req{color:hsl(var(--accent))}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:.75rem;align-items:flex-start;margin-block:1.25rem;font-size:.85rem;color:hsl(var(--muted-foreground));line-height:1.55}
.consent input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:hsl(var(--accent))}
.consent a{color:hsl(var(--accent));font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.promise{background:hsl(var(--secondary)/.6);border-left:2px solid hsl(var(--accent));border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1rem 1.25rem;font-size:.9rem;color:hsl(var(--muted-foreground));margin-bottom:1.75rem}
.promise b{color:hsl(var(--foreground))}

/* ─── Rechtsseiten ─── */
.legal{max-width:820px}
.legal h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:500;margin-block:2.5rem .75rem}
.legal h3{margin-block:1.75rem .5rem}
.legal p,.legal li{font-size:.95rem;color:hsl(var(--muted-foreground));max-width:72ch;line-height:1.7}
.legal p+p{margin-top:.75rem}
.legal a{color:hsl(var(--accent));font-weight:500}
.legal ul{margin-block:.75rem;display:grid;gap:.4rem;padding-left:1.25rem;list-style:disc}
.legal-ph{border:1px dashed hsl(var(--accent)/.55);border-radius:var(--radius-sm);background:hsl(var(--accent)/.06);padding:1.1rem 1.2rem;font-size:.85rem;color:hsl(var(--muted-foreground));margin-block:1rem;line-height:1.6}
.legal-ph b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--accent));font-weight:600;margin-bottom:.4rem}

/* ─── Tap-Ziele mobil >= 44 px — AUSSCHLIESSLICH ueber padding, damit
       Schriftgroessen, Farben und Layout unberuehrt bleiben (§2.2).
       .f-list liegt bereits im Theme. ─── */
@media(max-width:767px){
  .cta-tel{display:inline-flex;align-items:center;min-height:44px}
  .field label{padding-block:.35rem}
  .info-row{flex-direction:column;gap:.3rem}
  .info-row b{padding-top:0}
}