/* ==========================================================================
   MK Gebäudeservice – Stylesheet
   Keine externen Fonts, keine Frameworks, keine Tracker.
   Google Fonts werden bewusst NICHT geladen (DSGVO / LG München I, 3 O 17493/20).
   ========================================================================== */

:root{
  /* --- Grundfarbe: Dunkelblau -------------------------------------------
     Trägt die großen Flächen (Header, Hero, Fußzeile, CTA-Bänder).
     Steht bei Geschäftskunden für Verlässlichkeit und bleibt auch bei
     weißer Schrift immer gut lesbar. */
  --navy:#0A1E32;
  --navy-light:#16374F;

  /* --- Akzentfarbe: Grün aus dem Logo -----------------------------------
     Für Buttons, Links, Häkchen und Hervorhebungen.
     Bewusst dunkler als das Logo-Grün: Das helle Original hätte mit weißer
     Schrift nur rund 1,9:1 Kontrast – gefordert sind mindestens 4,5:1.
     Diese Abstufung erreicht 4,9:1 und bleibt trotzdem erkennbar dasselbe Grün. */
  --accent:#457F1B;
  --accent-dark:#356513;
  --accent-pale:#EEF6E3;
  --accent-border:#D2E7B8;
  --accent-light:#A8D96A;      /* helles Grün für dunkle Flächen */

  /* Alte Namen bleiben als Verweis bestehen, damit nichts bricht */
  --blue:var(--accent);
  --blue-dark:var(--accent-dark);
  --blue-pale:var(--accent-pale);
  --ink:#101E2B;
  --text:#4C5C6B;
  --muted:#7A8A99;
  --line:#E2E8EE;
  --bg:#FFFFFF;
  --bg-alt:#F6F9FB;
  --star:#F5A623;
  --r:10px;
  --r-lg:18px;
  --shadow:0 1px 2px rgba(16,30,43,.04), 0 8px 24px rgba(16,30,43,.06);
  --shadow-lg:0 2px 4px rgba(16,30,43,.05), 0 18px 48px rgba(16,30,43,.10);
  --wrap:1180px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:130px; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  font-size:17px; line-height:1.7; background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--blue-dark); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{color:var(--ink); font-weight:800; letter-spacing:-.022em; line-height:1.18; margin:0 0 .5em}
h1{font-size:clamp(2.1rem, 1.3rem + 3.2vw, 3.5rem)}
h2{font-size:clamp(1.7rem, 1.15rem + 2.1vw, 2.6rem)}
h3{font-size:1.24rem; letter-spacing:-.012em}
h4{font-size:1.05rem; letter-spacing:-.008em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.section{padding:88px 0}
.section--alt{background:var(--bg-alt); border-block:1px solid var(--line)}
.section--tight{padding:64px 0}

/* Sprungmarke für Screenreader / Tastatur */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

/* Nur für Screenreader: Überschrift, die die Gliederung vollständig macht,
   ohne im Layout sichtbar zu sein. Verhindert Sprünge in der
   Überschriftenebene (WCAG 1.3.1). */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

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

/* ---------- Eyebrow + Sektionskopf ---------- */
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue); margin:0 0 14px;
}
.sec-head{max-width:720px; margin-bottom:52px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head p{font-size:1.08rem; margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:1rem; font-weight:700; letter-spacing:-.005em;
  padding:15px 28px; border-radius:var(--r); border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration:none !important; line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn--primary:hover{background:var(--blue-dark); border-color:var(--blue-dark)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.10)}
.btn--outline{background:#fff; color:var(--navy); border-color:var(--line)}
.btn--outline:hover{border-color:var(--blue); color:var(--blue-dark)}
.btn--lg{padding:18px 36px; font-size:1.06rem}
.btn--block{width:100%}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy); color:#C8D6E2; font-size:.86rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; flex-wrap:wrap}
.topbar a{color:#fff; font-weight:600}
.topbar ul{display:flex; gap:24px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
.topbar li{display:flex; align-items:center; gap:7px}
.topbar svg{width:15px; height:15px; flex:none; opacity:.75}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(16,30,43,.08)}
/* ---------------------------------------------------------------------------
   LOGO
   Header:   assets/mk-logo.png       (804 × 166, grüner Schriftzug)
   Fußzeile: assets/mk-logo-hell.png  (600 × 85, grün, transparent)

   Hinweis für später: Die Datei bestimmt die Breite mit. Die Druckfassung hat
   deutlich mehr Abstand zwischen Kreis und Schriftzug – bei gleicher Höhe wird
   das Logo dadurch 44 % breiter. Beim Austausch also immer die Höhe nachjustieren.

   Größe an genau einer Stelle einstellen: --logo-h
   --------------------------------------------------------------------------- */
.nav{display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:104px}

.logo{
  --logo-h:56px;                    /* <— hier die Logo-Höhe einstellen */
  display:block; flex:none; line-height:0;
}
.logo img{height:var(--logo-h); width:auto; transition:height .2s ease}

/* Beim Scrollen schrumpft es leicht, damit der Header nicht zu viel Platz frisst */
.site-header.is-stuck .logo{--logo-h:42px}
.nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.nav-links > li > a{
  color:var(--ink); font-weight:650; font-size:.98rem; padding:8px 0;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav-links > li > a:hover{color:var(--blue-dark); border-bottom-color:var(--blue); text-decoration:none}
/* --- Aufklappmenü "Leistungen" (wie auf der alten Seite) --- */
.has-sub{position:relative}
.has-sub > a{display:inline-flex; align-items:center; gap:6px}
.has-sub > a svg{width:11px; height:11px; opacity:.7; transition:transform .2s ease}
.has-sub:hover > a svg{transform:rotate(180deg)}
.submenu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-8px);
  min-width:270px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:10px; list-style:none; margin:0; z-index:120;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
/* unsichtbare Brücke, damit der Zeiger die Lücke überqueren kann */
.has-sub::after{content:""; position:absolute; top:100%; left:0; right:0; height:14px}
.submenu li{margin:0}
.submenu a{
  display:block; padding:10px 16px; border-radius:var(--r); font-size:.95rem;
  font-weight:600; color:var(--ink); white-space:nowrap;
}
.submenu a:hover{background:var(--blue-pale); color:var(--blue-dark); text-decoration:none}

/* --- "Mehr erfahren" auf den Leistungs-Kacheln --- */
.svc-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-weight:700; font-size:.92rem; color:var(--blue-dark);
}
.svc-more svg{width:15px; height:15px; transition:transform .2s ease}
.svc:hover .svc-more svg{transform:translateX(4px)}

.nav-cta{display:flex; align-items:center; gap:14px; flex:none}
.nav-phone{
  display:flex; flex-direction:column; line-height:1.25; text-align:right;
  font-size:.78rem; color:var(--muted); text-decoration:none !important;
}
.nav-phone strong{font-size:1.05rem; color:var(--ink); font-weight:800; letter-spacing:-.01em}
.nav-phone:hover strong{color:var(--blue-dark)}

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff;
  border-radius:var(--r); cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:url("objekte/hero.svg");
  background-size:cover; background-position:center; opacity:.26;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--navy) 12%, rgba(10,30,50,.90) 48%, rgba(10,30,50,.62) 100%);
}
.hero .wrap{position:relative; z-index:2; padding-block:96px 88px}
.hero-inner{max-width:750px}
.hero h1{color:#fff; margin-bottom:22px}
.hero h1 em{font-style:normal; color:var(--accent-light)}
.hero-lead{font-size:1.2rem; color:#CFDDE8; max-width:620px; margin-bottom:34px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px}
.hero-badges{display:flex; flex-wrap:wrap; gap:12px 32px; list-style:none; margin:0; padding:0}
.hero-badges li{display:flex; align-items:center; gap:10px; font-size:.95rem; font-weight:600; color:#DCE8F1}
.hero-badges svg{width:20px; height:20px; flex:none; color:var(--accent-light)}

/* ---------- Trustbar ---------- */
.trustbar{background:#fff; border-bottom:1px solid var(--line)}
.trustbar-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.trust-item{padding:32px 26px; border-right:1px solid var(--line)}
.trust-item:last-child{border-right:0}
.trust-item h3{font-size:1.02rem; margin-bottom:5px}
.trust-item p{font-size:.92rem; margin:0; color:var(--muted)}
.trust-item svg{width:26px; height:26px; color:var(--blue); margin-bottom:14px}

/* ---------- Leistungen ---------- */
.card-grid{display:grid; gap:26px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.svc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#CFDCE7; text-decoration:none}
.svc-img{aspect-ratio:3/2; background:var(--bg-alt); overflow:hidden}
.svc-img img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.svc:hover .svc-img img{transform:scale(1.05)}

/* Symbolfeld auf den Leistungskacheln.
   Ersetzt die früheren Stockfotos: Die lagen nur in 300 px Breite vor und
   wurden in den Kacheln auf das Doppelte hochgerechnet – entsprechend weich.
   Ein Symbol ist bei jeder Größe gestochen scharf, lädt sofort und sieht
   nicht aus wie bei jedem Mitbewerber. */
.svc-icon{
  display:flex; align-items:center; justify-content:center;
  height:104px; background:var(--accent-pale);
  border-bottom:1px solid var(--accent-border);
}
.svc-icon svg{
  width:40px; height:40px; color:var(--accent);
  transition:transform .25s ease;
}
.svc:hover .svc-icon svg{transform:scale(1.12)}
.svc-body{padding:22px 24px 26px}
.svc-body h3{margin-bottom:7px; color:var(--ink)}
.svc-body p{font-size:.94rem; margin:0; color:var(--text)}

/* Objekt-Kacheln mit Bildüberlagerung */
.obj{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3;
  display:block; transition:transform .2s ease, box-shadow .2s ease;
}
.obj:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); text-decoration:none}
.obj img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.obj:hover img{transform:scale(1.06)}
.obj-label{
  position:absolute; inset:auto 0 0 0; padding:44px 22px 20px; color:#fff;
  background:linear-gradient(to top, rgba(10,30,50,.92) 20%, rgba(10,30,50,0));
  font-weight:800; font-size:1.12rem; letter-spacing:-.01em;
}

/* ---------- Problem / Lösung ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.pain-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.pain-list li{
  display:flex; gap:14px; align-items:flex-start; background:#fff;
  border:1px solid var(--line); border-left:3px solid #D64545;
  border-radius:var(--r); padding:16px 20px; font-weight:650; color:var(--ink);
}
.pain-list svg{width:20px; height:20px; color:#D64545; flex:none; margin-top:3px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; counter-reset:step}
.step{position:relative; padding-top:14px}
.step-num{
  font-size:3.4rem; font-weight:800; line-height:1; color:var(--blue-pale);
  letter-spacing:-.04em; margin-bottom:6px;
}
.step h3{margin-bottom:8px}
.step p{font-size:.96rem; margin:0}

/* ---------- Vorteile ---------- */
.benefit{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px}
.benefit svg{width:28px; height:28px; color:var(--blue); margin-bottom:16px}
.benefit h3{margin-bottom:8px}
.benefit p{font-size:.95rem; margin:0}

/* ---------- Bewertungen ---------- */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.review{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px}
.stars{display:flex; gap:3px; margin-bottom:16px}
.stars svg{width:19px; height:19px; color:var(--star)}
.review blockquote{margin:0 0 20px; font-size:1rem; color:var(--ink); line-height:1.65}
.review cite{font-style:normal; font-weight:700; color:var(--ink); font-size:.94rem; display:block}
.review span{font-size:.85rem; color:var(--muted)}

/* ---------- Über uns ---------- */
.about-img{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.about-img img{width:100%; aspect-ratio:4/3; object-fit:cover}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto}
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:12px; overflow:hidden;
}
.faq details[open]{border-color:#CFDCE7; box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer; padding:20px 56px 20px 24px; font-weight:700; color:var(--ink);
  font-size:1.04rem; position:relative; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:24px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-body{padding:0 24px 22px; font-size:.98rem}

/* ---------- CTA-Band ---------- */
.cta-band{background:var(--navy); color:#fff; text-align:center; position:relative; overflow:hidden}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1000px 400px at 50% -10%, rgba(69,127,27,.42), transparent 70%);
}
.cta-band .wrap{position:relative; z-index:2}
.cta-band h2{color:#fff; margin-bottom:16px}
.cta-band p{color:#CFDDE8; font-size:1.1rem; max-width:600px; margin:0 auto 32px}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- Formular ---------- */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:38px 36px; box-shadow:var(--shadow);
}
.field{margin-bottom:20px}
.field label{display:block; font-weight:700; color:var(--ink); font-size:.94rem; margin-bottom:7px}
.field .req{color:#D64545}
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(69,127,27,.18);
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:.9rem; margin-bottom:24px}
.consent input{width:19px; height:19px; flex:none; margin-top:3px; accent-color:var(--blue)}
.form-note{font-size:.85rem; color:var(--muted); margin-top:16px; text-align:center}

.contact-side{display:grid; gap:14px; align-content:start}
.contact-item{
  display:flex; gap:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px;
}
.contact-item svg{width:22px; height:22px; color:var(--blue); flex:none; margin-top:3px}
.contact-item strong{display:block; color:var(--ink); font-size:.95rem; margin-bottom:2px}
.contact-item a{font-weight:700}

/* ---------- Rechtstexte ---------- */
.legal{max-width:820px; margin:0 auto}
.legal h2{font-size:1.5rem; margin-top:44px; padding-top:8px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.1rem; margin-top:28px}
.legal p, .legal li{font-size:1rem}
.legal ul{padding-left:22px}
.legal li{margin-bottom:8px}
.legal-meta{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 30px; margin-bottom:40px;
}
.legal-meta p{margin-bottom:.5em}

/* ---------- TODO-Marker (vor Livegang löschen!) ---------- */
.todo{
  background:#FFF6D8; border:2px dashed #E0A800; color:#6B4E00;
  padding:14px 18px; border-radius:var(--r); font-size:.9rem; font-weight:600;
  margin:0 0 20px; line-height:1.55;
}
.todo strong{color:#8A5A00}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy); color:#A9BDCE; padding:72px 0 0; font-size:.95rem}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:52px}
.site-footer h3{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:#A9BDCE}
.site-footer a:hover{color:#fff}
/* Fußzeilen-Logo: Hier kommt die grüne Fassung mit transparentem Hintergrund
   zum Einsatz (mk-logo-hell.png). Der dunkle Schriftzug der Hauptfassung wäre
   auf dem Navy nicht lesbar – das Grün dagegen erreicht dort über 8:1 Kontrast.
   Deshalb braucht es auch kein weißes Feld mehr. */
.footer-logo{
  --logo-h:52px;
  display:inline-block; line-height:0; margin-bottom:24px;
}
.footer-logo img{height:var(--logo-h); width:auto}
.footer-brand p{font-size:.93rem; line-height:1.7; max-width:320px}
.footer-nap{list-style:none; padding:0; margin:0}
.footer-nap li{display:flex; gap:11px; margin-bottom:12px; align-items:flex-start}
.footer-nap svg{width:17px; height:17px; flex:none; margin-top:4px; opacity:.7}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.11); padding:22px 0;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.87rem;
}
.footer-bottom ul{display:flex; gap:24px}
.footer-bottom li{margin:0}

/* ---------- Danke-Seite ---------- */
.thanks{text-align:center; max-width:600px; margin:0 auto; padding:100px 0}
.thanks-icon{
  width:76px; height:76px; border-radius:50%; background:var(--blue-pale);
  display:flex; align-items:center; justify-content:center; margin:0 auto 28px;
}
.thanks-icon svg{width:36px; height:36px; color:var(--blue)}

/* ==========================================================================
   BEWEGUNG UND VERLÄUFE
   --------------------------------------------------------------------------
   Grundregel: Ohne JavaScript ist jeder Inhalt sichtbar. Die Klasse "js"
   setzt ein winziges Skript im Kopf der Seite – erst dann wird überhaupt
   etwas ausgeblendet und eingeblendet. Wer im Betriebssystem "Bewegung
   reduzieren" aktiviert hat, sieht alles sofort und ohne Animation.
   ========================================================================== */

/* --- Einblenden beim Scrollen --- */
html.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,.84,.28,1),
             transform .75s cubic-bezier(.16,.84,.28,1);
}
html.js .reveal.is-in{opacity:1; transform:none}

/* Gestaffelt: Kacheln laufen nacheinander ein, nicht alle gleichzeitig */
html.js .card-grid .reveal:nth-child(2){transition-delay:.06s}
html.js .card-grid .reveal:nth-child(3){transition-delay:.12s}
html.js .card-grid .reveal:nth-child(4){transition-delay:.18s}
html.js .card-grid .reveal:nth-child(5){transition-delay:.06s}
html.js .card-grid .reveal:nth-child(6){transition-delay:.12s}
html.js .steps .reveal:nth-child(2){transition-delay:.10s}
html.js .steps .reveal:nth-child(3){transition-delay:.20s}
html.js .trustbar-grid .reveal:nth-child(2){transition-delay:.08s}
html.js .trustbar-grid .reveal:nth-child(3){transition-delay:.16s}
html.js .trustbar-grid .reveal:nth-child(4){transition-delay:.24s}

/* --- Sanftes Erscheinen des oberen Bereichs beim Laden --- */
html.js .hero-inner > *{
  opacity:0; transform:translateY(20px);
  animation:auftauchen .9s cubic-bezier(.16,.84,.28,1) forwards;
}
html.js .hero-inner > *:nth-child(1){animation-delay:.05s}
html.js .hero-inner > *:nth-child(2){animation-delay:.15s}
html.js .hero-inner > *:nth-child(3){animation-delay:.25s}
html.js .hero-inner > *:nth-child(4){animation-delay:.35s}
@keyframes auftauchen{to{opacity:1; transform:none}}

/* --- Tiefenwirkung: Hintergrundbild oben scrollt langsamer mit --- */
.hero::before{
  transform:translate3d(0, var(--parallax, 0px), 0) scale(1.14);
  will-change:transform;
}

/* --- Verlaufsschrift für ein hervorgehobenes Wort --- */
.grad-text{
  color:var(--accent-light);                     /* Rückfallwert */
  background:linear-gradient(100deg,#B6E27C 0%, #7FD9A8 55%, #6FD3D0 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media (forced-colors:active){
  .grad-text{background:none; -webkit-text-fill-color:currentColor; color:#fff}
}

/* --- Dunkler Abschnitt mit weichen Farbverläufen --- */
.section--dark{
  position:relative; overflow:hidden;
  background:var(--navy); color:#BCCFDD;
}
.section--dark::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(42% 55% at 18% 22%, rgba(105,190,60,.30), transparent 62%),
    radial-gradient(46% 60% at 84% 78%, rgba(30,120,180,.34), transparent 64%),
    radial-gradient(40% 50% at 60% 8%,  rgba(120,220,190,.16), transparent 60%);
  filter:blur(10px);
}
.section--dark > *{position:relative; z-index:1}
.section--dark h2,
.section--dark h3,
.section--dark strong{color:#fff}
.section--dark .eyebrow{color:var(--accent-light)}
.section--dark .check-list li::before{background:rgba(168,217,106,.22)}
.section--dark .check-list li::after{border-color:var(--accent-light)}
.section--dark .btn--outline{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.section--dark .btn--outline:hover{border-color:#fff; background:rgba(255,255,255,.10)}
.section--dark .about-img{box-shadow:0 30px 70px rgba(0,0,0,.45)}

/* Kennzahlen im dunklen Abschnitt */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:36px}
.stat-row div{border-left:2px solid rgba(168,217,106,.45); padding-left:18px}
.stat-row b{
  display:block; font-size:clamp(1.55rem,2.5vw,1.9rem); font-weight:800; color:#fff;
  letter-spacing:-.03em; line-height:1.1; margin-bottom:4px;
}
.stat-row span{font-size:.92rem; color:#A9C0D2}

/* --- Weicher Verlauf im oberen Bereich und im CTA-Band --- */
.hero::after{
  background:
    linear-gradient(105deg, var(--navy) 10%, rgba(10,30,50,.90) 46%, rgba(10,30,50,.60) 100%),
    radial-gradient(38% 48% at 78% 18%, rgba(105,190,60,.22), transparent 65%);
}

/* Alles aus, wenn der Nutzer weniger Bewegung wünscht */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  html.js .hero-inner > *{opacity:1 !important; transform:none !important; animation:none !important}
  .hero::before{transform:none !important}
}

/* ==========================================================================
   Feste Aktionsleiste am unteren Rand – nur auf dem Handy
   Über 60 % der Suchen nach lokalen Handwerkern passieren mobil. Diese Leiste
   sorgt dafür, dass "Anrufen" immer einen Daumen entfernt ist, egal wie weit
   der Besucher gescrollt hat. Bei Handwerksbetrieben ist das erfahrungsgemäß
   der wirksamste einzelne Hebel für mehr Anfragen.
   ========================================================================== */
.mobile-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:150;
  grid-template-columns:1fr 1fr 1fr; gap:8px; padding:10px 10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(16,30,43,.10);
}
.mobile-cta a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 6px; border-radius:var(--r); font-weight:700; font-size:.92rem;
  text-decoration:none !important; line-height:1.2; white-space:nowrap;
}
.mobile-cta svg{width:17px; height:17px; flex:none}
.mobile-cta .call{background:var(--navy); color:#fff}
.mobile-cta .quote{background:var(--accent); color:#fff}
/* Nicht das helle Marken-Grün von WhatsApp: weiße Schrift darauf hat nur
   1,98:1 Kontrast. Dieser dunklere Ton kommt auf 5,21:1 und ist am Symbol
   trotzdem eindeutig als WhatsApp erkennbar. */
.mobile-cta .wa{background:#0E7A6E; color:#fff}
.mobile-cta .wa svg{width:18px; height:18px}

@media (max-width:680px){
  .mobile-cta{display:grid}
  body{padding-bottom:78px}
}

/* ==========================================================================
   INTERAKTIVE BAUSTEINE
   1. Isometrisches Gebäude   2. Angebots-Rechner
   3. Vorher/Nachher-Regler   4. Q-Check-Demo
   ========================================================================== */

.section--showcase{
  background:linear-gradient(180deg, #F4FAEE 0%, #FFFFFF 70%);
  border-block:1px solid var(--line);
}

/* ---------- 1. Isometrisches Gebäude ---------- */
.iso-wrap{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center}
.iso{width:100%; height:auto; overflow:visible}

/* Grundstück und Garten */
.iso-boden{fill:#EDF2E7}
.iso-rasen{fill:#CFE3BC; transition:fill .25s ease}
.iso-gehweg{fill:#DCE3D5; transition:fill .25s ease}
.iso-beet{fill:#B79A7C; transition:fill .25s ease}
.iso-busch{fill:#7FAF5C; transition:fill .25s ease}
.iso-hecke{fill:#6FA24E; transition:fill .25s ease}
.iso-muell{fill:#C9CFC2; transition:fill .25s ease}
.iso-tonne{fill:#5C7C8C; transition:fill .25s ease}
.iso-schatten{fill:rgba(60,80,50,.16)}
.iso-stamm{fill:#7A5A42}
.iso-krone{fill:#6FA750; opacity:.94}
.iso-garten .iso-krone:nth-of-type(odd){fill:#7DB65C}

/* Firmenwagen: erzählt „wir sind gerade hier" – bewusst klein und
   nebensächlich, kein Logo an der Hauswand. */
.iso-kfz{fill:var(--accent)}
.iso-kfz-dach{fill:#5A9A24}
.iso-kfz-front{fill:#3B6D11}
.iso-kfz-glas{fill:#CFEBF7; opacity:.92}
.iso-kfz-stange{fill:#2F3A42}
.iso-kfz-schild{fill:#FFFFFF; opacity:.94}
.iso-kfz-text{
  fill:var(--accent-dark); font-family:var(--font); font-weight:800;
  font-size:17px; letter-spacing:.04em;
}
.iso-rad{fill:#2F3A42}

.iso-hinweis{
  text-align:center; font-size:.85rem; color:var(--muted);
  margin:26px 0 0; font-style:italic;
}

/* Baukörper */
.iso-wand-r{fill:#E8E2D6}
.iso-wand-l{fill:#F3EEE4}
.iso-sockel{fill:#9E8874}
.iso-giebel{fill:#DED7C9}

/* Dach */
.iso-dach{fill:url(#gDach); transition:fill .25s ease}
.iso-traufe{fill:#5A2A22; transition:fill .25s ease}
.iso-rinne{fill:#A9B4BC; transition:fill .25s ease}

/* Treppenhaus, Fenster, Balkone, Eingang */
.iso-turm{fill:rgba(207,235,247,.62); stroke:#8FB8CC; stroke-width:1.2}
.iso-stufe{fill:#F0F9FD}
.iso-fenster{fill:url(#gGlas); transition:fill .25s ease}
.iso-balkon{fill:#D8D2C6; transition:fill .25s ease}
.iso-gelaender{fill:rgba(160,195,215,.55); stroke:#9BB4C4; stroke-width:1; transition:fill .25s ease}
.iso-tuer{fill:#4B6E3C; transition:fill .25s ease}
.iso-vordach{fill:#B9C2C8; transition:fill .25s ease}

/* Anklickbare Bereiche */
.iso-zone{cursor:pointer; outline:none}
.iso-zone polygon{transition:fill .25s ease, opacity .25s ease, transform .3s ease}
/* Außenanlage */
.iso-zone:hover .iso-rasen,  .iso-zone.aktiv .iso-rasen{fill:var(--accent-light)}
.iso-zone:hover .iso-gehweg, .iso-zone.aktiv .iso-gehweg{fill:#EAF5DC}
.iso-zone:hover .iso-hecke,  .iso-zone.aktiv .iso-hecke{fill:var(--accent)}
.iso-zone:hover .iso-busch,  .iso-zone.aktiv .iso-busch{fill:var(--accent)}
.iso-zone:hover .iso-beet,   .iso-zone.aktiv .iso-beet{fill:var(--accent-dark)}
.iso-zone:hover .iso-muell,  .iso-zone.aktiv .iso-muell{fill:#EAF5DC}
.iso-zone:hover .iso-tonne,  .iso-zone.aktiv .iso-tonne{fill:var(--accent-dark)}
/* Dach */
.iso-zone:hover .iso-dach,   .iso-zone.aktiv .iso-dach{fill:var(--accent)}
.iso-zone:hover .iso-traufe, .iso-zone.aktiv .iso-traufe{fill:var(--accent-dark)}
.iso-zone:hover .iso-rinne,  .iso-zone.aktiv .iso-rinne{fill:var(--accent-light)}
/* Treppenhaus */
.iso-zone:hover .iso-turm,   .iso-zone.aktiv .iso-turm{fill:rgba(168,217,106,.62); stroke:var(--accent)}
/* Fenster und Balkone */
.iso-zone:hover .iso-fenster,  .iso-zone.aktiv .iso-fenster{fill:var(--accent-light)}
.iso-zone:hover .iso-balkon,   .iso-zone.aktiv .iso-balkon{fill:var(--accent-light)}
.iso-zone:hover .iso-gelaender,.iso-zone.aktiv .iso-gelaender{fill:rgba(168,217,106,.55); stroke:var(--accent)}
/* Eingang */
.iso-zone:hover .iso-tuer,   .iso-zone.aktiv .iso-tuer{fill:var(--accent)}
.iso-zone:hover .iso-vordach,.iso-zone.aktiv .iso-vordach{fill:var(--accent-light)}

.iso-zone:focus-visible polygon{stroke:var(--ink); stroke-width:2.5}

.iso-legende{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.iso-legende a{
  display:block; padding:13px 16px; border-radius:var(--r);
  border:1px solid var(--line); background:#fff; text-decoration:none !important;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.iso-legende a:hover,
.iso-legende a.aktiv{
  border-color:var(--accent); transform:translateX(4px); box-shadow:var(--shadow);
}
.iso-legende b{display:block; color:var(--ink); font-size:.98rem; margin-bottom:2px}
.iso-legende span{display:block; font-size:.86rem; color:var(--muted)}

/* ---------- 2. Angebots-Rechner ---------- */
.calc{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:#fff; box-shadow:var(--shadow);
}
.calc-felder{padding:34px 36px; display:grid; gap:28px; align-content:start}
.calc-feld label{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-weight:700; color:var(--ink); font-size:.96rem; margin-bottom:12px;
}
.calc-feld output{
  font-weight:800; color:var(--accent-dark); font-size:1.06rem;
  font-variant-numeric:tabular-nums;
}
.calc-feld select{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r); background:#fff;
}
.calc-skala{
  display:flex; justify-content:space-between; font-size:.8rem;
  color:var(--muted); margin-top:6px;
}

/* Schieberegler in Markenfarbe */
.calc input[type=range], .ba input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:99px; background:var(--line); outline:none; margin:0;
}
.calc input[type=range]::-webkit-slider-thumb,
.ba input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--accent); border:3px solid #fff; cursor:grab;
  box-shadow:0 2px 10px rgba(16,30,43,.28);
}
.calc input[type=range]::-moz-range-thumb,
.ba input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--accent);
  border:3px solid #fff; cursor:grab; box-shadow:0 2px 10px rgba(16,30,43,.28);
}
.calc input[type=range]:focus-visible{outline:3px solid var(--accent); outline-offset:4px}

.calc-ergebnis{
  background:var(--navy); color:#BCCFDD; padding:34px 32px;
  display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.calc-ergebnis::before{
  content:""; position:absolute; inset:-30%;
  background:radial-gradient(50% 60% at 30% 20%, rgba(105,190,60,.30), transparent 65%),
             radial-gradient(50% 60% at 80% 85%, rgba(30,120,180,.30), transparent 65%);
}
.calc-ergebnis > *{position:relative; z-index:1}
.calc-label{
  font-size:.78rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-light); margin-bottom:14px;
}
.calc-preis{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:2rem; font-weight:800; color:#fff; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; margin-bottom:16px; line-height:1.15;
}
.calc-preis em{font-style:normal; font-size:.95rem; font-weight:600; color:#9FB6C8}
/* Betrag je Wohneinheit – genau die Zahl, die ein Verwalter für die
   Nebenkostenumlage braucht. Erscheint nur bei Wohnanlagen. */
.calc-je{
  font-size:.94rem; font-weight:700; color:var(--accent-light);
  margin:-6px 0 14px; font-variant-numeric:tabular-nums;
}
.calc-je[hidden]{display:none}
.calc-hinweis{font-size:.88rem; line-height:1.6; margin-bottom:22px}

/* ---------- 3. Vorher / Nachher ---------- */
.ba{
  position:relative; max-width:900px; margin:0 auto; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lg); user-select:none; line-height:0;
}
.ba img{width:100%; display:block; aspect-ratio:16/10; object-fit:cover}
.ba-clip{
  position:absolute; inset:0; overflow:hidden; width:50%;
}
.ba-clip img{width:auto; max-width:none; height:100%}
/* Der "Vorher"-Zustand wird für die Vorschau künstlich gedämpft.
   Sobald ein echtes Vorher-Foto eingesetzt ist, diese Zeile löschen. */
.ba-vorher{filter:grayscale(.55) brightness(.82) contrast(.88) blur(.4px)}
.ba-linie{
  position:absolute; top:0; bottom:0; width:3px; background:#fff;
  transform:translateX(-50%); box-shadow:0 0 14px rgba(0,0,0,.35); pointer-events:none;
}
.ba-griff{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:#fff; color:var(--navy);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.ba-griff svg{width:22px; height:22px}
.ba-tag{
  position:absolute; top:16px; padding:6px 14px; border-radius:99px;
  background:rgba(10,30,50,.72); color:#fff; font-size:.8rem; font-weight:700;
  letter-spacing:.04em; backdrop-filter:blur(6px); line-height:1.4;
}
.ba-tag-l{left:16px} .ba-tag-r{right:16px}
.ba input[type=range]{
  position:absolute; inset:auto 0 0 0; width:100%; height:100%;
  background:transparent; opacity:0; cursor:ew-resize; margin:0;
}
.ba input[type=range]:focus-visible{opacity:.001; outline:3px solid var(--accent); outline-offset:-3px}

/* ---------- 4. Q-Check-Demo ---------- */
.qc{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.qc-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 24px; background:var(--navy); color:#BCCFDD;
}
.qc-kopf b{display:block; color:#fff; font-size:1.02rem; letter-spacing:-.01em}
.qc-kopf span{font-size:.86rem}
.qc-plakette{
  padding:5px 13px; border-radius:99px; font-size:.76rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.14); color:#D7E4EE; white-space:nowrap;
}
.qc-plakette.laeuft{background:rgba(250,199,117,.22); color:#FAC775}
.qc-plakette.fertig{background:rgba(168,217,106,.22); color:var(--accent-light)}

.qc-liste{list-style:none; margin:0; padding:8px 0; max-height:330px; overflow:auto}
.qc-liste li{
  display:flex; align-items:center; gap:14px; padding:11px 24px;
  font-size:.95rem; color:var(--muted); transition:color .3s ease, background .3s ease;
}
.qc-liste li.dran{background:var(--accent-pale); color:var(--ink)}
.qc-liste li.erledigt{color:var(--ink)}
.qc-icon{
  width:20px; height:20px; flex:none; border-radius:50%;
  border:2px solid var(--line); transition:all .3s ease; position:relative;
}
li.dran .qc-icon{border-color:var(--accent); animation:pulsieren 1s ease-in-out infinite}
li.erledigt .qc-icon{border-color:var(--accent); background:var(--accent)}
li.erledigt .qc-icon::after{
  content:""; position:absolute; left:4px; top:6px; width:8px; height:4px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}
li.erledigt[data-status="nachgebessert"] .qc-icon{border-color:#E0A800; background:#E0A800}
.qc-text{flex:1}
.qc-status{font-size:.8rem; font-weight:700; opacity:0; transition:opacity .3s ease}
li.erledigt .qc-status{opacity:1; color:var(--accent-dark)}
li.erledigt[data-status="nachgebessert"] .qc-status{color:#8A5A00}
@keyframes pulsieren{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

.qc-fuss{padding:20px 24px 24px; border-top:1px solid var(--line)}
.qc-meldung{font-size:.86rem; color:var(--muted); margin:14px 0 0; text-align:center; min-height:2.6em}

@media (prefers-reduced-motion:reduce){
  li.dran .qc-icon{animation:none}
  .iso-legende a:hover{transform:none}
}

/* ==========================================================================
   404-Seite
   ========================================================================== */
.notfound{max-width:640px; margin:0 auto; padding:90px 0; text-align:center}
.notfound .code{
  font-size:clamp(4rem, 2rem + 9vw, 7rem); font-weight:800; line-height:1;
  color:var(--blue-pale); letter-spacing:-.05em; margin-bottom:8px;
}
.notfound-links{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:34px;
}
.notfound-links a{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:11px 18px; font-weight:650; font-size:.94rem; color:var(--ink);
}
.notfound-links a:hover{border-color:var(--blue); color:var(--blue-dark); text-decoration:none}

/* ==========================================================================
   Unterseiten (Leistungen)
   ========================================================================== */
.page-hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.page-hero::before{
  content:""; position:absolute; inset:0; opacity:.22;
  background-image:var(--hero-img); background-size:cover; background-position:center;
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--navy) 20%, rgba(10,30,50,.86) 100%);
}
.page-hero .wrap{position:relative; z-index:2; padding-block:56px 64px}
.page-hero h1{color:#fff; max-width:800px; margin-bottom:18px}
.page-hero .lead{color:#CFDDE8; font-size:1.14rem; max-width:660px; margin:0}

.breadcrumb{margin-bottom:22px; font-size:.88rem}
.breadcrumb ol{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; color:#8FA9BE}
.breadcrumb li::after{content:"›"; margin-left:8px; opacity:.6}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:#BFD4E4}
.breadcrumb a:hover{color:#fff}
.breadcrumb [aria-current]{color:#fff; font-weight:600}

.content-layout{display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:60px; align-items:start}
.prose{max-width:none}
.prose h2{font-size:1.72rem; margin-top:48px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.16rem; margin-top:30px}
.prose > p:first-of-type{font-size:1.1rem; color:var(--ink)}
.prose img{border-radius:var(--r-lg); margin:32px 0}

.check-list{list-style:none; margin:0 0 1.4em; padding:0; display:grid; gap:11px}
.check-list li{position:relative; padding-left:34px; line-height:1.6}
.check-list li::before{
  content:""; position:absolute; left:0; top:.45em; width:19px; height:19px; border-radius:50%;
  background:var(--blue-pale);
}
.check-list li::after{
  content:""; position:absolute; left:6px; top:.72em; width:7px; height:4px;
  border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

.callout{
  background:var(--blue-pale); border:1px solid var(--accent-border); border-left:4px solid var(--blue);
  border-radius:var(--r); padding:22px 26px; margin:32px 0;
}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}

.sidebar{position:sticky; top:132px; display:grid; gap:18px}
.sidebar-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; box-shadow:var(--shadow)}
.sidebar-card h3{font-size:1.08rem; margin-bottom:12px}
.sidebar-card p{font-size:.94rem}
.sidebar-card--dark{background:var(--navy); border-color:var(--navy); color:#C3D5E3}
.sidebar-card--dark h3{color:#fff}
.sidebar-card--dark a:not(.btn){color:#fff}
.sidebar-nav{list-style:none; margin:0; padding:0}
.sidebar-nav li{border-bottom:1px solid var(--line)}
.sidebar-nav li:last-child{border-bottom:0}
.sidebar-nav a{display:block; padding:11px 0; font-size:.95rem; font-weight:600; color:var(--ink)}
.sidebar-nav a:hover{color:var(--blue-dark); text-decoration:none; padding-left:5px; transition:padding .15s}
.sidebar-nav a[aria-current]{color:var(--blue-dark)}

.related{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.related a{
  display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; font-weight:700; color:var(--ink); font-size:.97rem;
  transition:border-color .15s, transform .15s;
}
.related a:hover{border-color:var(--blue); color:var(--blue-dark); transform:translateY(-2px); text-decoration:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1040px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:38px}
  .trustbar-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

@media (max-width:900px){
  .stat-row{grid-template-columns:repeat(2,1fr); gap:24px}
  .nav{min-height:86px}
  .logo{--logo-h:46px}
  .site-header.is-stuck .logo{--logo-h:38px}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 20px;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
  }
  .nav-links.is-open{display:flex}
  .nav-links > li > a{display:block; padding:14px 0; border-bottom:1px solid var(--line)}
  /* Untermenü mobil einfach ausklappen statt schweben */
  .has-sub::after{display:none}
  .has-sub > a svg{display:none}
  .submenu{
    position:static; transform:none; opacity:1; visibility:visible; min-width:0;
    border:0; box-shadow:none; padding:4px 0 10px 14px; background:transparent;
    border-bottom:1px solid var(--line); border-radius:0;
  }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu{transform:none}
  .submenu a{padding:9px 0; font-weight:500; color:var(--text); white-space:normal}
  .submenu a:hover{background:transparent}
  .burger{display:flex}
  .nav-phone{display:none}
  .split{grid-template-columns:1fr; gap:40px}
  .steps{grid-template-columns:1fr; gap:28px}
  .iso-wrap{grid-template-columns:1fr; gap:28px}
  .calc{grid-template-columns:1fr}
  .calc-felder{padding:28px 24px}
  .calc-ergebnis{padding:28px 24px}
  .grid-3,.grid-4,.reviews{grid-template-columns:repeat(2,1fr)}
  .content-layout{grid-template-columns:1fr; gap:44px}
  .sidebar{position:static}
  .related{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:680px){
  body{font-size:16px}
  .nav{min-height:72px; gap:12px}
  .logo{--logo-h:34px}
  .site-header.is-stuck .logo{--logo-h:30px}
  .footer-logo{--logo-h:42px; padding:10px 14px}
  .section{padding:56px 0}
  .section--tight{padding:44px 0}
  .hero .wrap{padding-block:64px 56px}
  .hero-actions .btn{width:100%}
  .grid-3,.grid-4,.grid-2,.reviews{grid-template-columns:1fr}
  .trustbar-grid{grid-template-columns:1fr}
  .trust-item{border-right:0; border-bottom:1px solid var(--line); padding:24px}
  .trust-item:last-child{border-bottom:0}
  .field-row{grid-template-columns:1fr; gap:0}
  .form-card{padding:28px 22px}
  .stat-row{grid-template-columns:repeat(2,1fr); gap:20px 18px}
  /* Kein Parallaxe-Effekt auf dem Handy: kostet Rechenleistung und
     ruckelt auf älteren Geräten mehr, als es optisch bringt. */
  .hero::before{transform:scale(1.08) !important}
  .footer-grid{grid-template-columns:1fr; gap:34px}
  .footer-bottom{flex-direction:column; gap:12px}
  .footer-bottom ul{flex-direction:column; gap:8px}
  .sec-head{margin-bottom:36px}
  .topbar ul li:nth-child(n+3){display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

@media print{
  .site-header,.topbar,.cta-band,.site-footer,.btn{display:none}
  body{font-size:12pt; color:#000}
}

/* ============================================================ NOTDIENST
   Auffälliger Balken auf der Rohrreinigungs-Seite. Bewusst warm/rot
   gegen das Navy-Grün des Rests – Notfall soll sich abheben, ohne
   billig zu wirken. Kontrast weiß auf #A32E1E = 7,4:1 (AAA).           */
.notdienst{
  background:linear-gradient(135deg,#A32E1E 0%,#7E2214 100%);
  color:#fff;
}
.notdienst-inner{
  display:flex; align-items:center; gap:40px; flex-wrap:wrap;
  padding-block:32px;
}
.notdienst-text{flex:1 1 380px; position:relative; padding-left:34px}
.notdienst h2{
  color:#fff; font-size:clamp(1.35rem,2.4vw,1.75rem);
  margin:0 0 8px; letter-spacing:-.01em;
}
.notdienst p{margin:0; color:#FBE3DF; max-width:56ch; line-height:1.62}
.notdienst .notdienst-klein{
  margin-top:10px; font-size:.88rem; color:#EFC3BB;
}

/* pulsierender Punkt – signalisiert „jetzt erreichbar" */
.notdienst-puls{
  position:absolute; left:0; top:.55em;
  width:14px; height:14px; border-radius:50%; background:#FFD9D2;
}
.notdienst-puls::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#FFD9D2; animation:notpuls 2.4s ease-out infinite;
}
@keyframes notpuls{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(2.8);opacity:0}
}

.notdienst-tel{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:20px 30px; border-radius:16px;
  background:#fff; color:#8A2416; text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.notdienst-tel:hover,.notdienst-tel:focus-visible{
  transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.3);
}
.notdienst-tel svg{width:26px; height:26px; margin-bottom:4px}
.notdienst-tel span{font-size:.83rem; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.notdienst-tel strong{font-size:1.5rem; letter-spacing:-.01em; white-space:nowrap}

@media (max-width:640px){
  .notdienst-inner{gap:22px}
  .notdienst-tel{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .notdienst-puls::after{animation:none}
  .notdienst-tel{transition:none}
}

/* Unter 420 px passen zwei Kennzahlen nebeneinander nicht mehr sauber. */
@media (max-width:420px){
  .stat-row{grid-template-columns:1fr; gap:16px}
}

/* ================================================== BEWERTUNGEN: VIER KARTEN
   Das Grundraster steht auf drei Spalten. Bei vier echten Bewertungen wirkt
   2x2 ruhiger als 3+1. Die Karten sind unterschiedlich lang – deshalb oben
   ausrichten statt strecken.                                               */
.reviews--vier{grid-template-columns:repeat(2,1fr); align-items:start}
.reviews--vier .review{display:flex; flex-direction:column}
.reviews--vier .review blockquote{flex:1}

@media (max-width:900px){
  .reviews--vier{grid-template-columns:1fr}
}

/* Link zu Google unter den Karten */
.reviews-mehr{margin:32px 0 0; text-align:center}
.reviews-mehr a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent-dark); font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--accent-border); padding-bottom:3px;
  transition:border-color .18s ease;
}
.reviews-mehr a:hover,.reviews-mehr a:focus-visible{border-color:var(--accent-dark)}
.reviews-mehr svg{width:16px; height:16px}

/* ============================================ LOGO AUF KLEINEN GERÄTEN
   Reihenfolge ist wichtig: erst die breitere Abfrage, dann die schmalere.
   Umgekehrt würde die 900er Regel die 680er wieder überschreiben.        */
@media (max-width:900px){
  .logo{--logo-h:54px}
  .site-header.is-stuck .logo{--logo-h:46px}
}
@media (max-width:680px){
  .logo{--logo-h:50px}
  .site-header.is-stuck .logo{--logo-h:42px}
}

/* ================================================ OBJEKTART AUFKLAPPEN
   Drei der sechs Objektkacheln haben keine eigene Leistungsseite. Statt
   eine duenne Seite zu bauen, klappt der Text direkt unter dem Raster auf.
   Ohne JavaScript sind die Texte sichtbar – niemand verliert Inhalt.      */
.objekt-info{
  margin-top:26px; padding:30px 32px;
  background:var(--accent-pale); border:1px solid var(--accent-border);
  border-radius:var(--r-lg);
}
.objekt-info h3{margin:0 0 14px; font-size:1.22rem; color:var(--navy)}
.objekt-info p{margin:0 0 14px; max-width:70ch; line-height:1.7}
.objekt-info p:last-of-type{margin-bottom:22px}
.objekt-info-cta{display:flex; flex-wrap:wrap; gap:16px; align-items:center}

/* Mit JavaScript: eingeklappt, bis jemand auf die Kachel tippt. */
html.js .objekt-info{display:none}
html.js .objekt-info.is-offen{
  display:block; animation:objektauf .26s ease both;
}
@keyframes objektauf{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}

/* Die aufklappbare Kachel bekommt ein Pluszeichen, damit man sie von den
   verlinkenden Kacheln unterscheiden kann. */
.obj--klapp::after{
  content:"+"; position:absolute; top:14px; right:16px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--navy);
  font-size:1.25rem; font-weight:800; line-height:29px; text-align:center;
  box-shadow:0 2px 8px rgba(10,30,50,.2);
  transition:transform .2s ease, background .2s ease;
}
.obj--klapp[aria-expanded="true"]::after{
  content:"–"; background:var(--accent); color:#fff; transform:rotate(180deg);
}

@media (max-width:640px){
  .objekt-info{padding:24px 20px}
  .objekt-info-cta .btn{width:100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html.js .objekt-info.is-offen{animation:none}
  .obj--klapp::after{transition:none}
}

/* ---------------------------------------- Porträt im Über-uns-Bereich
   Das Foto ist hochkant (3:4). Die Grundregel schneidet Bilder auf 4:3
   quer zu - damit waeren Kopf und Klemmbrett weg. Hier also das echte
   Seitenverhaeltnis stehen lassen und nichts beschneiden.               */
.about-img--portraet img{aspect-ratio:3/4; object-fit:cover; object-position:center}
.about-img picture{display:block; line-height:0}

@media (max-width:900px){
  /* Auf schmalen Bildschirmen steht das Bild unter dem Text. Hochkant in
     voller Hoehe waere dort ein Balken - deshalb etwas flacher zuschneiden. */
  .about-img--portraet img{aspect-ratio:4/5}
}


/* ------------------------------------------- WhatsApp auf der Kontaktseite
   Bewusst nur ein Link, kein eingebettetes Widget: Vor dem Klick gehen
   keinerlei Daten an Meta.                                                */
.kontakt-wa{
  display:flex; align-items:center; gap:12px; margin-top:18px;
  padding:14px 16px; border-radius:var(--r);
  background:#E7F4F1; border:1px solid #B9DED7;
  color:#0B5F56; font-weight:700; text-decoration:none;
  transition:background .18s ease;
}
.kontakt-wa:hover,.kontakt-wa:focus-visible{background:#D8EDE8; text-decoration:none}
.kontakt-wa svg{width:24px; height:24px; flex:none; color:#0E7A6E}
.kontakt-wa span{display:block; font-weight:400; font-size:.88rem; color:#41586C}

/* ------------------------------------- SCHWEBENDER WHATSAPP-KNOPF
   Nur am Rechner. Unter 681 px übernimmt die feste Leiste unten – dort
   würde der Knopf sonst die drei Schaltflächen überdecken.
   Farbe wie in der Leiste: #0E7A6E statt des hellen Marken-Grüns,
   weil weiße Schrift darauf nur 1,98:1 Kontrast hätte.               */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:140;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px 14px 16px; border-radius:999px;
  background:#0E7A6E; color:#fff; font-weight:700; font-size:1rem;
  text-decoration:none !important;
  box-shadow:0 8px 26px rgba(10,60,55,.34);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.wa-float svg{width:24px; height:24px; flex:none}
.wa-float:hover,.wa-float:focus-visible{
  background:#0B655B; transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(10,60,55,.42);
}
/* Auf schmalen Fenstern nur der runde Knopf ohne Schrift */
@media (max-width:1024px){
  .wa-float{padding:15px; gap:0}
  .wa-float span{display:none}
}
@media (max-width:680px){
  .wa-float{display:none}      /* dort gibt es die Leiste unten */
}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover{transform:none}
}

/* WhatsApp-Kontaktpunkt auf der Kontaktseite: gleiche Form wie Telefon
   und E-Mail, nur das Symbol in WhatsApp-Grün. */
.contact-item--wa > svg{color:#0E7A6E}