/* =====================================================================
   Bespoke identity: Sanitaer Brunner (Luzern)
   Character: clean, technical, precise. Sharp corners, a fine blueprint
   grid in the hero, engineered type. Reads like a trade that measures
   to the millimetre. Built on the Lokaldigital engine.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

:root{
  --brand:#0E8F9E;
  --brand-2:#0A4651;
  --brand-ink:#ffffff;
  --brand-tint:#e7f5f6;
  --signal:#2ED3C4;            /* bright water highlight */
  --font-display:"Manrope", system-ui, sans-serif;
  --radius:8px;                /* crisp, clinical corners */
  --shadow:0 1px 2px rgba(10,70,81,.07), 0 22px 44px -26px rgba(10,70,81,.5);
}

h1,h2,h3,h4{font-weight:800;letter-spacing:-.025em}
.eyebrow{letter-spacing:.22em;font-weight:800}

/* squared, precise corners throughout (sharp, blueprint feel) */
.btn{border-radius:6px}
.qt,.form-card{border-radius:var(--radius)}
.logo .mark{border-radius:6px}

/* a measured tick-rule under every section heading */
.sec-h h2::after{
  content:"";display:block;width:88px;height:0;margin-top:.85rem;
  border-bottom:3px solid var(--signal)}
.sec-h.center h2::after{margin-left:auto;margin-right:auto}

/* ====================================================================
   TOP EMERGENCY BAR  (full-width brand strip above the header)
   ==================================================================== */
.emergencybar{background:var(--brand-2);color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px;
  border-bottom:2px solid var(--signal)}
.eb-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:42px;padding-top:.4rem;padding-bottom:.4rem}
.eb-tag{display:inline-flex;align-items:center;gap:.55em;font-weight:800;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.eb-dot{width:9px;height:9px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 0 rgba(46,211,196,.7);animation:ebpulse 1.8s infinite}
@keyframes ebpulse{0%{box-shadow:0 0 0 0 rgba(46,211,196,.6)}70%{box-shadow:0 0 0 7px rgba(46,211,196,0)}100%{box-shadow:0 0 0 0 rgba(46,211,196,0)}}
.eb-num{display:inline-flex;align-items:center;gap:.45em;font-weight:800;
  font-size:1rem;color:#fff;font-family:var(--font-display)}
.eb-num svg{width:1em;height:1em;color:var(--signal)}
.eb-num:hover{color:var(--signal)}

/* ====================================================================
   HERO  (two-track choice + sharp blueprint Soforthilfe panel)
   ==================================================================== */
.hero::after{opacity:.6;background:
  linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0/34px 34px,
  linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0/34px 34px,
  radial-gradient(680px 380px at 86% -10%, rgba(46,211,196,.20), transparent 60%),
  radial-gradient(520px 340px at -4% 112%, rgba(0,0,0,.30), transparent 55%)}
.hero-grid{grid-template-columns:1.05fr .95fr;align-items:stretch}
.hero-left{display:flex;flex-direction:column;justify-content:center}
.hero .badge{border-radius:4px}

/* two prominent track buttons */
.track-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.9rem}
.track{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;
  border-radius:6px;transition:transform .16s,box-shadow .16s,background .16s}
.track-ic{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;
  border-radius:6px}
.track-ic svg{width:22px;height:22px}
.track-t{display:flex;flex-direction:column;line-height:1.2}
.track-t b{font-size:1.02rem}
.track-t small{font-size:.78rem;opacity:.85;margin-top:.15rem}
.track-call{background:var(--signal);color:var(--brand-2);
  box-shadow:0 14px 30px -16px rgba(46,211,196,.9)}
.track-call .track-ic{background:rgba(10,70,81,.16)}
.track-call:hover{transform:translateY(-3px)}
.track-quote{background:rgba(255,255,255,.07);color:#fff;
  border:1.5px solid rgba(255,255,255,.4)}
.track-quote .track-ic{background:rgba(255,255,255,.12);color:var(--signal)}
.track-quote:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}

/* sharp Soforthilfe checklist panel on blueprint grid */
.rescue{align-self:center;background:var(--paper);color:var(--ink);
  border-radius:4px;border:1px solid var(--line);box-shadow:var(--shadow);
  padding:1.4rem 1.4rem 1.5rem;position:relative;overflow:hidden}
.rescue::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(rgba(14,143,158,.07) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, rgba(14,143,158,.07) 1px, transparent 1px) 0 0/22px 22px}
.rescue>*{position:relative;z-index:1}
.rescue-head{border-bottom:2px solid var(--signal);padding-bottom:.7rem;margin-bottom:1rem}
.rescue-eb{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand);background:var(--brand-tint);
  padding:.25em .7em;border-radius:4px;margin-bottom:.55rem}
.rescue-head h3{font-size:1.28rem}
.rescue-list{list-style:none;display:grid;gap:.85rem;margin-bottom:1.2rem}
.rescue-list li{display:flex;gap:.8rem;align-items:flex-start}
.rx-no{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:4px;background:var(--brand-2);color:#fff;font-family:var(--font-display);
  font-weight:800;font-size:.86rem}
.rescue-list b{display:block;font-size:.98rem;color:var(--ink)}
.rescue-list span{display:block;color:var(--ink-2);font-size:.86rem;line-height:1.4}
.rescue-cta{width:100%;justify-content:center;font-size:1.05rem}

/* ====================================================================
   NOTFALL-ABLAUF  horizontal stepper bar (numbered nodes + progress line)
   ==================================================================== */
.ablauf-band{background:var(--paper-2);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.stepper{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.4rem;position:relative;counter-reset:none}
.stepper::before{content:"";position:absolute;left:0;right:0;top:21px;height:3px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.stepper::after{content:"";position:absolute;left:0;top:21px;height:3px;width:62%;
  background:linear-gradient(90deg,var(--brand),var(--signal))}
.node{position:relative;padding-top:0}
.node-dot{position:relative;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;border-radius:4px;background:var(--brand-2);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  border:3px solid var(--paper-2);box-shadow:0 0 0 1px var(--line);margin-bottom:.9rem}
.node h4{font-size:1.08rem;margin-bottom:.3rem}
.node p{color:var(--ink-2);font-size:.93rem;line-height:1.45}

/* ====================================================================
   LEISTUNGEN  dense spec-style grid (compact tiles + checkmark badge)
   ==================================================================== */
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.spec{display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.1rem;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  border-left:3px solid var(--brand);transition:border-color .16s,box-shadow .16s,transform .16s}
.spec:hover{border-left-color:var(--signal);box-shadow:var(--shadow);transform:translateX(2px)}
.spec-ic{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border-radius:4px;background:var(--brand-tint);color:var(--brand);
  border:1px solid rgba(14,143,158,.25)}
.spec-ic svg{width:20px;height:20px}
.spec-t{flex:1}
.spec-t h3{font-size:1.04rem;margin-bottom:.18rem}
.spec-t p{color:var(--ink-2);font-size:.88rem;line-height:1.45}
.spec-chk{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;
  border-radius:4px;background:var(--signal);color:var(--brand-2);margin-top:.15rem}
.spec-chk svg{width:15px;height:15px}

/* ====================================================================
   WARUM  compact 2-column with square checkmarks
   ==================================================================== */
.why2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 2.4rem}
.why2 .item{display:flex;gap:.9rem;align-items:flex-start}
.sqchk{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:4px;background:var(--brand);color:#fff}
.sqchk svg{width:18px;height:18px}
.why2 h4{font-size:1.08rem;margin-bottom:.15rem}
.why2 p{color:var(--ink-2);font-size:.93rem}

/* ====================================================================
   EINZUGSGEBIET  dense PLZ / Orte directory grid (technical feel)
   ==================================================================== */
.plz-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.plz{display:flex;flex-direction:column;gap:.1rem;padding:.8rem .9rem;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  transition:border-color .16s,background .16s,transform .16s}
.plz:hover{border-color:var(--brand);background:var(--brand-tint);transform:translateY(-2px)}
.plz-no{font-family:var(--font-display);font-weight:800;font-size:.8rem;
  letter-spacing:.06em;color:var(--brand)}
.plz-ort{font-weight:700;font-size:.98rem;color:var(--ink)}

/* ====================================================================
   TESTIMONIALS + tiles leftovers
   ==================================================================== */
.qt{border-left:3px solid var(--signal)}
.qt .stars{color:var(--signal)}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .rescue{align-self:auto}
  .stepper{grid-template-columns:repeat(2,1fr);row-gap:1.6rem}
  .stepper::before,.stepper::after{display:none}
  .plz-grid{grid-template-columns:repeat(3,1fr)}
  .why2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .eb-tag{font-size:.74rem;letter-spacing:.06em}
  .track-row{grid-template-columns:1fr}
  .stepper{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:1fr}
  .plz-grid{grid-template-columns:repeat(2,1fr)}
}