/*
 * site.css — Schlüsseldienst Köln
 * Design language: Lokal-Klassik recoloured for Schlüsseldienst (steel-blue × emergency-red)
 * Every page links this file UNEDITED. Per-page <style> covers layout-only.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── 1. TOKENS ──────────────────────────────────────────────────────────────── */
:root{
  /* Primary — deep steel-blue (Schlüsseldienst trust) */
  --brand:#1A3A5C;         /* primary brand colour */
  --brand-700:#102945;     /* darker variant for header/footer */
  --brand-900:#081B30;     /* deepest — topbar, footer bottom */
  --brand-subtle:#EEF4FB;  /* light tint for subtle backgrounds */

  /* CTA — emergency red (phone/call action ONLY) */
  --accent:#C62828;        /* ≥4.5:1 on white (ratio ≈5.53:1) */
  --accent-700:#A01F1F;    /* hover */
  --on-accent:#FFFFFF;     /* white on red ≥4.5:1 */

  /* Surfaces & text */
  --bg:#FAFBFD;            /* page bg — near-white, slight blue cast */
  --soft:#F0F4FA;          /* alternating section band */
  --soft2:#E4EBF7;         /* card/badge tint */
  --line:#D6E0F0;          /* borders / hairlines */
  --ink:#13243F;           /* headings — darkest navy */
  --text:#1C2E4A;          /* body text — ≥4.5:1 on bg and surface */
  --muted:#445268;         /* secondary text — still ≥4.5:1 on white */

  /* Status */
  --success:#1B7A42; --success-bg:#E6F6EE;
  --danger:#B71C1C;  --danger-bg:#FDECEA;
  --warning:#8B5A00; --warning-bg:#FFF8E1;

  /* Focus — distinct from brand, ≥3:1 */
  --focus:#005FCC;

  /* Spacing scale (4n) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:28px; --s8:32px; --s9:36px; --s10:40px; --s11:48px; --s12:64px;

  /* Radius — moderate, professional */
  --r:10px; --r-lg:16px; --pill:999px;

  /* Shadow — ONE restrained elevation system */
  --sh-sm:0 1px 3px rgba(10,28,46,.08);
  --sh:0 8px 24px rgba(10,28,46,.12);
  --sh-lg:0 20px 48px rgba(10,28,46,.20);

  /* Layout */
  --c:1240px;        /* container max-width */
  --measure:68ch;    /* readable line length */
  --tap:44px;        /* minimum tap target */

  /* Motion — calm */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.12s; --dur:.3s; --dur-slow:.5s;

  /* Typography */
  --f:'Segoe UI',system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;
}

/* ── 2. RESET & BASE ────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:18px/1.6 var(--f);color:var(--text);background:var(--bg);
     -webkit-font-smoothing:antialiased;hyphens:auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--f);font-weight:800;line-height:1.15;
                color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(28px,4.2vw,48px)}
h2{font-size:clamp(24px,3.2vw,36px)}
h3{font-size:clamp(20px,2.4vw,26px)}
h4{font-size:1.1rem;font-weight:700}
p+p{margin-top:.75em}
strong{font-weight:700}
.eyebrow{display:inline-flex;gap:var(--s2);align-items:center;
  font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:#FDECEA;border:1px solid #F5C6C6;
  padding:5px 12px;border-radius:var(--pill)}
.lead{color:var(--muted);font-size:1.1rem;max-width:50ch;line-height:1.55}
.measure{max-width:var(--measure)}
.muted{color:var(--muted)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ── 4. LAYOUT UTILITIES ────────────────────────────────────────────────────── */
.wrap{max-width:var(--c);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-999px;top:auto;background:var(--accent);
  color:#fff;padding:10px 16px;z-index:500;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}
.section{padding:72px 0}
.section--tint{background:var(--soft)}
.section--dark{background:var(--brand-700);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .eyebrow{color:#F4A4A4;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.section--dark .muted{color:#99B4CC}
.section--accent{background:var(--accent);color:#fff}
.section--accent h2,.section--accent h3{color:#fff}
.section--accent .eyebrow{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.section-head{max-width:62ch;margin-bottom:var(--s11)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-top:var(--s3)}
.section-head .lead{margin-top:var(--s3)}

/* Grid system */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ── 5. INTERACTIVE PRIMITIVES ─────────────────────────────────────────────── */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-weight:800;font-size:1rem;padding:14px 24px;border-radius:var(--pill);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),
              background var(--dur-fast) var(--ease);
  min-height:var(--tap);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-accent{background:var(--accent);color:var(--on-accent);
  box-shadow:0 6px 20px rgba(198,40,40,.30)}
.btn-accent:hover{background:var(--accent-700);box-shadow:0 8px 24px rgba(198,40,40,.40)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-700)}
.btn-outline{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand-subtle)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{font-size:.9rem;padding:10px 18px}

/* Inline link */
.lnk{color:var(--accent);font-weight:700;text-decoration:underline;
  text-decoration-color:rgba(198,40,40,.3);text-underline-offset:3px;
  transition:text-decoration-color var(--dur-fast)}
.lnk:hover{text-decoration-color:var(--accent)}

/* ── 6. REVEAL ANIMATION ─────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}

/* ── 7. CHROME — TOPBAR ─────────────────────────────────────────────────────── */
.topbar{background:var(--brand-900);color:#9DB8D2;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s3);padding-block:7px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:700;text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar-phone{display:flex;align-items:center;gap:var(--s2);color:#fff;font-weight:800}
.topbar-phone svg{width:15px;height:15px;color:var(--accent)}

/* ── 8. CHROME — STICKY HEADER ──────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:200;background:var(--brand);color:#fff;
  box-shadow:var(--sh-sm);transition:box-shadow var(--dur)}
header.scrolled{box-shadow:var(--sh)}
.nav{display:flex;align-items:center;gap:var(--s4);height:68px}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:800;font-size:1.08rem;
  color:#fff;flex:none;text-decoration:none}
.brand-mark{width:40px;height:40px;border-radius:var(--r);background:var(--accent);
  display:grid;place-items:center;flex:none}
.brand-mark svg{width:22px;height:22px}

/* Primary nav */
.nav-menu{display:flex;align-items:center;gap:2px;margin-left:var(--s3)}
.nav-menu a,.nav-menu button{padding:9px 12px;border-radius:8px;font-weight:600;
  font-size:.93rem;color:#CAD9EC;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  transition:background var(--dur-fast),color var(--dur-fast);min-height:var(--tap)}
.nav-menu a:hover,.nav-menu button:hover,
.nav-menu a[aria-current="page"],.nav-menu button[aria-expanded="true"]{
  background:rgba(255,255,255,.12);color:#fff}
.nav-menu .chevron{width:14px;height:14px;transition:transform var(--dur-fast)}
.nav-menu button[aria-expanded="true"] .chevron{transform:rotate(180deg)}

/* Dropdown */
.dd-wrap{position:relative}
.dd{position:absolute;top:calc(100% + 4px);left:0;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  min-width:220px;padding:var(--s2) 0;z-index:300;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.dd.open{opacity:1;pointer-events:auto;transform:none}
.dd a{display:block;padding:10px var(--s6);font-size:.93rem;font-weight:600;
  color:var(--text);transition:background var(--dur-fast)}
.dd a:hover,.dd a[aria-current="page"]{background:var(--soft);color:var(--brand)}
.dd .dd-sep{height:1px;background:var(--line);margin:var(--s2) 0}
.dd.dd-wide{min-width:520px;display:grid;grid-template-columns:1fr 1fr;gap:0}
.dd.dd-wide .dd-col-head{padding:10px var(--s6) 6px;font-size:.73rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);grid-column:1/-1}

/* Nav right: phone */
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3);flex:none}
.nav-phone-block{text-align:right;line-height:1.15}
.nav-phone-block strong{display:block;font-size:1.06rem;color:#fff}
.nav-phone-block span{font-size:.72rem;color:#7EC8A4;font-weight:700}

/* Burger */
.burger{display:none;width:44px;height:44px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.25);background:transparent;cursor:pointer;
  align-items:center;justify-content:center}
.burger svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none}

/* ── 9. CHROME — MOBILE DRAWER ───────────────────────────────────────────────── */
.drawer-overlay{position:fixed;inset:0;background:rgba(8,20,40,.55);
  opacity:0;pointer-events:none;transition:opacity var(--dur);z-index:250;overflow:hidden}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer-panel{position:absolute;inset:0 0 0 auto;width:min(340px,88vw);
  background:#fff;padding:var(--s5);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease);
  z-index:260;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.drawer-overlay.open .drawer-panel{transform:none}
.drawer-close{align-self:flex-end;border:none;background:none;font-size:1.6rem;
  cursor:pointer;color:var(--muted);width:44px;height:44px;display:grid;place-items:center}
.drawer a{padding:13px var(--s3);border-radius:var(--r);font-weight:600;
  color:var(--ink);display:block;transition:background var(--dur-fast)}
.drawer a:hover{background:var(--soft)}
.drawer-section{margin-top:var(--s3)}
.drawer-section-label{font-size:.75rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);padding:var(--s2) var(--s3);display:block}
.drawer-sub{padding-left:var(--s4)}
.drawer-sub a{padding:10px var(--s3);font-size:.93rem}
.drawer-call{margin-top:var(--s5)}

/* ── 10. CHROME — STICKY MOBILE CALL BAR ──────────────────────────────────── */
.callbar{position:fixed;inset:auto 0 0;z-index:220;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(10,28,46,.12);
  padding:var(--s3) var(--s4);display:none}
.callbar .btn-accent{width:100%;font-size:1.05rem}

/* ── 11. CHROME — SCROLL-TO-TOP ─────────────────────────────────────────────── */
.to-top{position:fixed;right:20px;bottom:20px;z-index:180;width:48px;height:48px;
  border-radius:50%;background:var(--brand);color:#fff;border:none;
  display:grid;place-items:center;cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  box-shadow:var(--sh)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--brand-700)}
.to-top svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none}

/* ── 12. CHROME — FOOTER ─────────────────────────────────────────────────────── */
footer{background:var(--brand-700);color:#99B4CC;padding:56px 0 20px;font-size:.91rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px}
footer h4,.foot-col-head{color:#fff;margin-bottom:var(--s4);font-size:.9rem;
  text-transform:uppercase;letter-spacing:.07em;font-weight:800;
  display:block;margin-top:0}
footer a{display:block;padding:4px 0;color:#99B4CC;transition:color var(--dur-fast)}
footer a:hover{color:#fff}
.foot-brand{display:flex;gap:var(--s3);align-items:center;color:#fff;
  font-weight:800;font-size:1.06rem;margin-bottom:var(--s4)}
.foot-brand-mark{width:36px;height:36px;border-radius:9px;background:var(--accent);
  display:grid;place-items:center;flex:none}
.foot-brand-mark svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none}
.foot-phone{color:#fff;font-weight:800;font-size:1.1rem}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);margin-top:var(--s11);
  padding-top:var(--s5);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s3);color:#5B7A96;font-size:.82rem}

/* ── 13. HERO ────────────────────────────────────────────────────────────────── */
.hero{position:relative;color:#fff;overflow:hidden;min-height:520px;
  display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,25,48,.94) 0%,rgba(10,25,48,.80) 48%,rgba(10,25,48,.35) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:80px}
.hero-inner{max-width:640px}
.hero-eyebrow{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);
  margin-bottom:var(--s4)}
.hero h1{color:#fff;margin-bottom:var(--s4)}
.hero .lead{color:#C4D6EC;margin-bottom:var(--s6)}
.hero-ctas{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero-badges{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.hbadge{display:flex;align-items:center;gap:var(--s2);
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);
  border-radius:var(--r);padding:9px 14px;font-weight:700;font-size:.88rem;color:#fff}
.hbadge svg{width:18px;height:18px;color:#9ECBF8;flex:none}

/* Emergency-bar hero variant */
.hero--emergency{background:var(--brand-700);min-height:auto;display:block}
.hero--emergency .hero-scrim{display:none}
.hero--emergency .wrap{padding-block:var(--s12)}
.emergency-number{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;color:#fff;
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;line-height:1.1}
.emergency-number svg{width:40px;height:40px;color:var(--accent);flex:none}

/* Split hero variant */
.hero--split .hero-split-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:520px}
.hero--split .hero-split-text{
  background:var(--brand);padding:80px 48px 80px 22px;
  display:flex;flex-direction:column;justify-content:center}
.hero--split .hero-split-img{position:relative;overflow:hidden}
.hero--split .hero-split-img img{width:100%;height:100%;object-fit:cover}

/* ── 14. TRUST STRIP ────────────────────────────────────────────────────────── */
.trust-strip{background:#fff;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.trust-strip .wrap{padding-block:18px}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:10px 30px}
.tb{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:.92rem;
  color:var(--ink)}
.tb svg{width:22px;height:22px;color:var(--accent);flex:none}

/* ── 15. PHONE PROMINENCE BAND ──────────────────────────────────────────────── */
.phone-band{background:var(--brand)}
.phone-band .wrap{padding-block:var(--s10)}
.phone-band-inner{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s6);flex-wrap:wrap}
.phone-band-text strong{display:block;font-size:1.3rem;color:#fff;margin-bottom:4px}
.phone-band-text p{color:#99B4CC}
.phone-big{display:flex;align-items:center;gap:var(--s3);
  font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:#fff;
  text-decoration:none;white-space:nowrap}
.phone-big svg{width:32px;height:32px;color:var(--accent);flex:none}
.phone-big:hover{color:#CAD9EC}

/* Accent call band */
.call-band{background:var(--accent)}
.call-band .wrap{padding-block:var(--s9)}
.call-band-inner{display:flex;justify-content:space-between;align-items:center;
  gap:var(--s6);flex-wrap:wrap}
.call-band strong{display:block;font-size:1.25rem;color:#fff;margin-bottom:4px}
.call-band p{color:#FDDADA}
.call-band .phone-big{color:#fff}
.call-band .phone-big svg{color:rgba(255,255,255,.6)}
.call-band .phone-big:hover{color:#FDDADA}

/* Boxed callrow inside section */
.callrow{background:var(--brand);border-radius:var(--r-lg);padding:28px var(--s9);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s6);
  flex-wrap:wrap}
.callrow-accent{background:var(--accent)}
.callrow strong{color:#fff;font-size:1.3rem;display:block;margin-bottom:4px}
.callrow p{color:#99B4CC;font-size:.95rem}
.callrow-accent p{color:#FDDADA}

/* ── 16. SERVICE / PHOTO CARDS ───────────────────────────────────────────────── */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.pcard-img{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--soft2)}
.pcard-body{padding:20px 22px;flex:1;display:flex;flex-direction:column}
.pcard-body h3{font-size:1.08rem;margin-bottom:6px;position:relative;padding-bottom:8px}
.pcard-body h3::after{content:'';position:absolute;left:0;bottom:0;
  width:34px;height:3px;background:var(--accent);border-radius:3px}
.pcard-body p{color:var(--muted);font-size:.94rem;flex:1;margin-top:var(--s3)}
.pcard-more{display:inline-flex;gap:5px;align-items:center;margin-top:var(--s4);
  color:var(--accent);font-weight:700;font-size:.88rem}
.pcard-more svg{width:14px;height:14px;transition:transform var(--dur-fast)}
.pcard:hover .pcard-more svg{transform:translateX(3px)}

/* ── 17. ICON LIST ───────────────────────────────────────────────────────────── */
.icon-list{display:flex;flex-direction:column;gap:var(--s4)}
.il-item{display:flex;gap:var(--s4);align-items:flex-start}
.il-icon{width:44px;height:44px;border-radius:var(--r);background:var(--brand-subtle);
  display:grid;place-items:center;flex:none;margin-top:2px}
.il-icon svg{width:22px;height:22px;color:var(--brand)}
.il-item.il-check .il-icon{background:#E6F6EE}
.il-item.il-check .il-icon svg{color:var(--success)}
.il-item.il-accent .il-icon{background:#FDECEA}
.il-item.il-accent .il-icon svg{color:var(--accent)}
.il-body strong{display:block;margin-bottom:3px;font-size:1rem;color:var(--ink)}
.il-body p{color:var(--muted);font-size:.95rem}

/* ── 18. PROCESS STEPS ───────────────────────────────────────────────────────── */
.steps{display:grid;gap:var(--s5)}
.steps-h{grid-template-columns:repeat(4,1fr);position:relative}
.steps-h::before{content:'';position:absolute;top:22px;left:calc(12.5% + 22px);
  right:calc(12.5% + 22px);height:2px;background:var(--line);z-index:0}
.step{text-align:center;position:relative;z-index:1}
.step-num{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;
  font-weight:800;font-size:1.06rem;display:grid;place-items:center;
  margin:0 auto var(--s4);box-shadow:0 0 0 4px var(--bg)}
.step h3{font-size:1rem;margin-bottom:5px}
.step p{color:var(--muted);font-size:.9rem}

/* Vertical steps variant */
.steps-v{display:flex;flex-direction:column;gap:0}
.step-v{display:flex;gap:var(--s5);padding-bottom:var(--s8);position:relative}
.step-v:last-child{padding-bottom:0}
.step-v-track{display:flex;flex-direction:column;align-items:center;flex:none}
.step-v-num{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;
  font-weight:800;display:grid;place-items:center;flex:none}
.step-v-line{width:2px;background:var(--line);flex:1;min-height:var(--s8)}
.step-v:last-child .step-v-line{display:none}
.step-v-body{padding-top:var(--s2)}
.step-v-body strong{display:block;font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.step-v-body p{color:var(--muted);font-size:.93rem}

/* ── 19. NOTICE CALLOUTS ─────────────────────────────────────────────────────── */
.notice{display:flex;gap:var(--s4);padding:var(--s5) var(--s6);
  border-radius:var(--r);border-left:4px solid;background:var(--warning-bg);
  border-color:var(--warning)}
.notice svg{width:24px;height:24px;flex:none;color:var(--warning);margin-top:2px}
.notice--danger{background:var(--danger-bg);border-color:var(--danger)}
.notice--danger svg{color:var(--danger)}
.notice--success{background:var(--success-bg);border-color:var(--success)}
.notice--success svg{color:var(--success)}
.notice-body strong{display:block;font-size:1rem;font-weight:700;
  color:var(--ink);margin-bottom:4px}
.notice-body p{color:var(--muted);font-size:.94rem}

/* ── 20. ACCORDION / FAQ ─────────────────────────────────────────────────────── */
.accordion{max-width:820px}
.acc-item{border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:var(--s3);background:#fff;overflow:hidden}
.acc-trigger{width:100%;text-align:left;padding:18px 22px;font-weight:700;
  font-size:1.02rem;color:var(--ink);background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;gap:var(--s4);align-items:center;
  min-height:var(--tap);transition:background var(--dur-fast)}
.acc-trigger:hover{background:var(--soft)}
.acc-plus{width:22px;height:22px;color:var(--accent);flex:none;
  transition:transform var(--dur-fast)}
.acc-item[aria-expanded="true"] .acc-plus{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease)}
.acc-body p,.acc-body ul,.acc-body ol{padding:0 22px var(--s5);color:var(--muted);font-size:.96rem}
.acc-body ul,.acc-body ol{padding-left:40px;list-style:disc}
.acc-body li{margin-bottom:4px}

/* Centre-aligned accordion */
.accordion.center-acc{margin-inline:auto}

/* ── 21. BEFORE / AFTER ──────────────────────────────────────────────────────── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);max-width:780px}
.ba-fig{margin:0}
.ba-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--soft2)}
.ba-caption{margin-top:var(--s2);font-weight:700;color:var(--muted);
  text-align:center;font-size:.87rem;text-transform:uppercase;letter-spacing:.06em}

/* ── 22. REVIEW CARDS ────────────────────────────────────────────────────────── */
.rev-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rev-stars{display:flex;gap:2px;color:#E8A93A;margin-bottom:var(--s3)}
.rev-stars svg{width:16px;height:16px}
.rev-text{font-size:.97rem;color:var(--text);margin-bottom:var(--s4)}
.rev-who{display:flex;gap:var(--s3);align-items:center}
.rev-av{width:40px;height:40px;border-radius:50%;background:var(--brand);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:.88rem;flex:none}
.rev-who strong{display:block;font-size:.92rem;color:var(--ink)}
.rev-who small{color:var(--muted);font-size:.82rem}

/* ── 23. CHIPS (coverage/Stadtteile) ──────────────────────────────────────────── */
.chip-wrap{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{display:inline-flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--line);border-radius:var(--pill);
  padding:6px 14px;font-size:.88rem;font-weight:600;color:var(--ink);
  text-decoration:none;transition:background var(--dur-fast),border-color var(--dur-fast)}
.chip:hover,.chip.chip-active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip svg{width:13px;height:13px}

/* ── 24. STAT RAIL ───────────────────────────────────────────────────────────── */
.stat-rail{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:center}
.stat{text-align:center}
.stat-num{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--brand);line-height:1}
.stat-label{font-size:.88rem;color:var(--muted);margin-top:4px}
.section--dark .stat-num{color:#7EC8A4}
.section--dark .stat-label{color:#99B4CC}

/* ── 25. BREADCRUMBS ────────────────────────────────────────────────────────── */
.breadcrumb{display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  font-size:.84rem;color:var(--muted);margin-bottom:var(--s6)}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand);text-decoration:underline}
.breadcrumb svg{width:12px;height:12px;color:var(--line)}

/* ── 26. IMAGE PLACEHOLDER ────────────────────────────────────────────────────── */
.imgph{background:var(--soft2);border-radius:var(--r);display:flex;
  align-items:center;justify-content:center;color:var(--muted);
  font-size:.82rem;font-weight:600;text-align:center;padding:var(--s4)}

/* ── 27. SPLIT LAYOUT ─────────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:center}
.split.split-rev{direction:rtl}.split.split-rev>*{direction:ltr}
.split-img{border-radius:var(--r-lg);overflow:hidden}
.split-img img{width:100%;height:100%;object-fit:cover}

/* ── 28. SERVICE NAVIGATOR ─────────────────────────────────────────────────────── */
.service-nav{display:flex;flex-direction:column;gap:0}
.sn-item{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);border-radius:0;text-decoration:none;
  transition:background var(--dur-fast)}
.sn-item:last-child{border-bottom:none}
.sn-item:hover{background:var(--soft)}
.sn-icon{width:44px;height:44px;border-radius:var(--r);background:var(--brand-subtle);
  display:grid;place-items:center;flex:none}
.sn-icon svg{width:22px;height:22px;color:var(--brand)}
.sn-body strong{display:block;font-size:1rem;color:var(--ink);margin-bottom:2px}
.sn-body p{color:var(--muted);font-size:.88rem}
.sn-arrow{margin-left:auto;color:var(--muted);width:18px;height:18px;flex:none}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────────── */
@media(max-width:1020px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .steps-h{grid-template-columns:repeat(2,1fr)}
  .steps-h::before{display:none}
  .dd.dd-wide{min-width:320px;grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split-rev{direction:ltr}
  .hero--split .hero-split-grid{grid-template-columns:1fr}
  .hero--split .hero-split-img{min-height:280px}
}
@media(max-width:760px){
  .nav-menu,.nav-phone-block{display:none}
  .burger{display:flex}
  .callbar{display:block}
  /* compact header so brand + call + burger fit narrow screens (no h-overflow) */
  .nav{gap:var(--s3)}
  .nav-right{gap:var(--s2)}
  .nav-right .btn-sm{font-size:0;width:44px;height:44px;padding:0;border-radius:50%;flex:none}
  .nav-right .btn-sm svg{width:20px;height:20px}
  .to-top{bottom:78px;right:14px}
  .g2,.g3,.g4,.steps-h,.ba-grid,.split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
  .hero .wrap{padding-block:56px}
  .dd-wrap{display:none}
  .phone-big{font-size:1.5rem}
  .phone-band-inner,.call-band-inner,.callrow{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .hero-badges{flex-direction:column;gap:var(--s2)}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{text-align:center}
  .stat-rail{gap:var(--s5)}
  .trust-row{gap:8px 18px}
}
@media(max-width:400px){
  /* shrink brand a touch so it never crowds the call/burger on small phones */
  .brand{font-size:1rem;gap:var(--s2)}
  .brand-mark{width:34px;height:34px}
}