/* =========================================================
   Notfalldienst Sanitär – Designsystem
   Schweizer Raster, Helvetica-Linie, Marineblau / Signalrot
   ========================================================= */

:root{
  color-scheme: light only;
  --advice-bg:#f4f7fb;
  --advice-head:#0b1f3a;
  --advice-text:#26364a;
  --navy-900:#08172c;
  --navy-800:#0b2545;
  --navy-700:#13355f;
  --navy-100:#e7edf5;
  --red-600:#c8102e;
  --red-700:#a50d25;
  --red-050:#fdecee;
  --white:#ffffff;
  --grey-050:#f5f6f8;
  --grey-100:#eceef2;
  --grey-300:#c9cfd9;
  --grey-600:#5b6675;
  --ink:#12191f;

  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;

  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem; --s7:4.5rem; --s8:6rem;

  --radius:4px;
  --shadow:0 1px 2px rgba(8,23,44,.08), 0 8px 24px rgba(8,23,44,.06);
  --maxw:1140px;
  --bar-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:#ffffff;
  -webkit-text-size-adjust:100%;
  forced-color-adjust:none;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  padding-bottom:var(--bar-h);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-800)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--red-600);outline-offset:2px;border-radius:2px;
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-weight:700;letter-spacing:-.02em;line-height:1.1;
  color:var(--navy-900);margin:0 0 var(--s3);
  text-wrap:balance;
}
h1{font-size:clamp(2rem,6vw,3.25rem);letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,3.6vw,2.25rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem);letter-spacing:-.01em}
h4{font-size:1.05rem}
p{margin:0 0 var(--s3);max-width:68ch}
ul,ol{margin:0 0 var(--s3);padding-left:1.25rem}
li{margin-bottom:.4rem;max-width:66ch}
.lead{font-size:clamp(1.05rem,2.2vw,1.25rem);color:var(--grey-600);line-height:1.55}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s4)}
.section{padding:var(--s6) 0;background:var(--white)}
.section--tight{padding:var(--s5) 0}
.section--grey{background:var(--grey-050)}
.section--navy{background:var(--navy-800);color:#e9eef6}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy p,.section--navy li{color:#c4d0e2}
.grid{display:grid;gap:var(--s4)}
@media(min-width:700px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:start}}
.skip{position:absolute;left:-9999px;top:0;background:var(--red-600);color:#fff;padding:.75rem 1rem;z-index:200}
.skip:focus{left:0}

/* ---------- Kopfleiste ---------- */
.topbar{background:var(--navy-900);color:#c4d0e2;font-size:.82rem;padding:.45rem 0}
.topbar .wrap{display:flex;gap:var(--s3);align-items:center;justify-content:center;text-align:center}
.pulse{width:8px;height:8px;border-radius:50%;background:#3fd07a;flex:none;box-shadow:0 0 0 0 rgba(63,208,122,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(63,208,122,0)}100%{box-shadow:0 0 0 0 rgba(63,208,122,0)}}

header.site{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--grey-100)}
.head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy-900);flex:none}
.brand .logo-img{height:42px;width:auto}
.brand .badge{background:var(--red-600);color:#fff;font-size:.7rem;font-weight:700;padding:.15rem .35rem;border-radius:2px;letter-spacing:.02em}
nav.main{display:none}
@media(min-width:1050px){
  nav.main{display:flex;gap:1.1rem;align-items:center}
  nav.main a{font-size:.93rem;text-decoration:none;color:var(--navy-800);padding:.4rem 0;border-bottom:2px solid transparent}
  nav.main a:hover,nav.main a[aria-current="page"]{border-bottom-color:var(--red-600)}
}
.head-actions{display:flex;align-items:center;gap:.5rem}
.burger{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem .7rem;background:var(--grey-050);border:1px solid var(--grey-300);border-radius:var(--radius);font:inherit;font-size:.9rem;cursor:pointer}
@media(min-width:1050px){.burger{display:none}}
#mobilenav{display:none;border-top:1px solid var(--grey-100);background:#fff;padding:var(--s3) 0 var(--s4)}
#mobilenav[data-open="true"]{display:block}
#mobilenav ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#mobilenav a{display:block;min-height:44px;padding:.7rem .25rem;text-decoration:none;color:var(--navy-800);border-bottom:1px solid var(--grey-100);font-size:1.02rem}
.mobile-tel{display:block;margin-top:var(--s3);font-weight:700;color:var(--red-700);text-decoration:none;font-size:1.1rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.25rem;border-radius:var(--radius);
  font:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:background-color .15s ease,border-color .15s ease;
}
.btn--call{background:var(--red-600);color:#fff}
.btn--call:hover{background:var(--red-700)}
.btn--ghost{background:transparent;color:var(--navy-800);border-color:var(--navy-800)}
.btn--ghost:hover{background:var(--navy-100)}
.btn--light{background:#fff;color:var(--navy-800);border-color:#fff}
.btn--light:hover{background:var(--navy-100);border-color:var(--navy-100)}
.btn--wa{background:#128c7e;color:#fff}
.btn--wa:hover{background:#0e6f64}
.btn--sm{min-height:44px;font-size:.92rem;padding:.6rem 1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn svg{width:20px;height:20px;flex:none}

/* ---------- Hero ---------- */
.hero{background:var(--navy-800);color:#fff;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto -10% -40% 55%;height:70%;
  background:linear-gradient(180deg,rgba(200,16,46,.16),rgba(200,16,46,0));
  transform:skewY(-8deg);pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;padding-top:var(--s6);padding-bottom:var(--s6)}
.hero h1{color:#fff}
.hero .lead{color:#c8d5e8;max-width:52ch}
.hero-grid{display:grid;gap:var(--s5)}
@media(min-width:960px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:start}}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.85rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;margin-bottom:var(--s3)}
.trustline{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;padding:0;margin:var(--s4) 0 0}
.trustline li{display:flex;align-items:center;gap:.45rem;font-size:.95rem;color:#cfdaea;margin:0}
.trustline svg{width:18px;height:18px;color:#fff;flex:none}

/* Soforthilfe-Karte im Hero */
.firstaid{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);border-top:5px solid var(--red-600);padding:var(--s4)}
.firstaid h2{font-size:1.2rem;margin-bottom:.75rem}
.firstaid ol{margin:0;padding-left:1.15rem}
.firstaid li{font-size:.96rem;color:var(--ink)}
.firstaid .note{font-size:.82rem;color:var(--grey-600);margin:var(--s3) 0 0}

/* ---------- Vertrauensleiste ---------- */
.factbar{background:var(--navy-900);color:#fff;padding:var(--s3) 0}
.factbar ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media(min-width:760px){.factbar ul{grid-template-columns:repeat(4,1fr)}}
.factbar li{margin:0;font-size:.95rem;color:#cfdaea;display:flex;gap:.5rem;align-items:baseline}
.factbar strong{color:#fff;display:block;font-size:1rem}

/* ---------- Karten ---------- */
.card{background:#fff;border:1px solid var(--grey-100);border-left:4px solid var(--navy-800);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow)}
.card--urgent{border-left-color:var(--red-600)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.97rem;color:var(--grey-600);margin-bottom:var(--s2)}
.card a.more{font-weight:700;text-decoration:none;color:var(--red-700);border-bottom:2px solid var(--red-050)}
.card a.more:hover{border-bottom-color:var(--red-600)}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:hover{border-left-color:var(--red-600)}

/* Auswahlraster „Wobei benötigen Sie Hilfe?" */
.chooser{display:grid;gap:var(--s2)}
@media(min-width:640px){.chooser{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.chooser{grid-template-columns:repeat(3,1fr)}}
.chooser a{
  display:flex;align-items:center;gap:.75rem;min-height:64px;padding:.9rem 1rem;
  background:#fff;border:1px solid var(--grey-300);border-radius:var(--radius);
  text-decoration:none;color:var(--navy-900);font-weight:600;
}
.chooser a:hover{border-color:var(--navy-800);background:var(--navy-100)}
.chooser svg{width:26px;height:26px;color:var(--red-600);flex:none}

/* ---------- Ablauf (Sequenz) ---------- */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:var(--s4)}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;margin:0;padding-top:var(--s3);border-top:3px solid var(--navy-800);max-width:none}
.steps li::before{content:counter(s);display:block;font-size:1.6rem;font-weight:700;color:var(--red-600);line-height:1;margin-bottom:.4rem}
.steps h3{font-size:1.05rem;margin-bottom:.35rem}
.steps p{font-size:.94rem;color:var(--grey-600);margin:0}
.section--navy .steps li{border-top-color:rgba(255,255,255,.35)}
.section--navy .steps li::before{color:#ff5a6e}

/* ---------- CTA-Band ---------- */
.ctaband{background:var(--red-600);color:#fff;border-radius:var(--radius);padding:var(--s5)}
.ctaband h2{color:#fff;margin-bottom:.5rem}
.ctaband p{color:#ffe3e7;max-width:60ch}
.ctaband .btn--light{color:var(--red-700)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--grey-300);max-width:820px}
.faq details{border-bottom:1px solid var(--grey-300)}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 2.5rem 1rem 0;position:relative;
  font-weight:700;font-size:1.02rem;color:var(--navy-900);min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.9rem;font-size:1.5rem;font-weight:400;color:var(--red-600);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 1rem;color:var(--grey-600);font-size:.98rem}

/* ---------- Formular ---------- */
.formcard{background:var(--grey-050);border:1px solid var(--grey-100);border-radius:var(--radius);padding:var(--s4)}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.3rem}
.field .hint{font-size:.85rem;color:var(--grey-600);display:block;margin-bottom:.3rem}
input,select,textarea{
  width:100%;font:inherit;font-size:1rem;padding:.7rem .8rem;min-height:48px;
  border:1px solid var(--grey-300);border-radius:var(--radius);background:#fff;color:var(--ink);
}
textarea{min-height:110px;resize:vertical}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--red-600);background:var(--red-050)}
.err{display:none;color:var(--red-700);font-size:.88rem;font-weight:600;margin-top:.3rem}
.err[data-show="true"]{display:block}
.check{display:flex;gap:.6rem;align-items:flex-start}
.check input{width:22px;height:22px;min-height:22px;margin-top:.2rem;flex:none}
.check label{font-weight:400;font-size:.9rem;color:var(--grey-600)}
.hp{position:absolute;left:-9999px}
.formnote{font-size:.85rem;color:var(--grey-600);margin-top:var(--s2)}

/* ---------- Einsatzgebiet ---------- */
.areas{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.areas{grid-template-columns:repeat(4,1fr)}}
.areas li{margin:0}
.areas a{
  display:flex;align-items:center;gap:.5rem;min-height:48px;
  padding:.6rem .8rem;background:#fff;border:1px solid var(--grey-300);
  border-radius:var(--radius);color:var(--navy-900);font-weight:600;
  font-size:.95rem;text-decoration:none;line-height:1.25;
}
.areas a:hover{border-color:var(--red-600);background:var(--red-050);color:var(--red-700)}
.areas a svg{width:17px;height:17px;flex:none;color:var(--red-600)}
.areas a:hover svg{color:var(--red-700)}

/* ---------- Hinweisbox ---------- */
.notice{border-left:4px solid var(--red-600);background:var(--red-050);padding:var(--s3) var(--s4);border-radius:0 var(--radius) var(--radius) 0}
.notice p:last-child{margin-bottom:0}
.notice--info{border-left-color:var(--navy-800);background:var(--navy-100)}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.85rem;color:var(--grey-600);padding:var(--s3) 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;padding:0;margin:0}
.crumbs li{margin:0}
.crumbs li+li::before{content:"/";margin-right:.35rem;color:var(--grey-300)}
.crumbs a{color:var(--grey-600)}

/* ---------- Footer ---------- */
footer.site{background:var(--navy-900);color:#a9b8cd;padding:var(--s6) 0 var(--s4);font-size:.94rem}
footer.site h3{color:#fff;font-size:1rem;margin-bottom:.75rem}
footer.site a{color:#d5dfec;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:.45rem}
.foot-grid{display:grid;gap:var(--s5)}
@media(min-width:820px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-brand .logo-img{height:54px;width:auto;margin-bottom:var(--s2)}
.logo-img--chip{background:#fff;border-radius:var(--radius);padding:.5rem .7rem}
.foot-tel{display:block;font-size:1.35rem;font-weight:700;color:#fff !important;text-decoration:none;letter-spacing:-.01em}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s5);padding-top:var(--s3);display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.85rem}

/* ---------- Mobile Aktionsleiste ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:grid;grid-template-columns:1.6fr 1fr;gap:1px;
  background:var(--navy-900);padding:.4rem;
  box-shadow:0 -2px 12px rgba(8,23,44,.25);
}
.actionbar a{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:52px;border-radius:var(--radius);font-weight:700;text-decoration:none;font-size:1rem;
}
.actionbar .call{background:var(--red-600);color:#fff}
.actionbar .cb{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}
.actionbar svg{width:20px;height:20px}
@media(min-width:1050px){.actionbar{display:none}}
@media(max-width:1049px){body{--bar-h:68px}}

/* ---------- Diverses ---------- */
.tel-inline{font-weight:700;color:var(--red-700);text-decoration:none;white-space:nowrap}
.tel-inline:hover{text-decoration:underline}
.rel-links{display:flex;flex-wrap:wrap;gap:.5rem}
.rel-links a{font-size:.92rem;padding:.45rem .8rem;background:var(--grey-050);border:1px solid var(--grey-300);border-radius:999px;text-decoration:none;color:var(--navy-800);min-height:36px;display:inline-flex;align-items:center}
.rel-links a:hover{background:var(--navy-100);border-color:var(--navy-800)}
.prose h2{margin-top:var(--s5)}
.prose h3{margin-top:var(--s4)}
.prose h2:first-child{margin-top:0}
.big404{font-size:clamp(4rem,18vw,9rem);line-height:.85;color:var(--navy-100);font-weight:700;letter-spacing:-.05em;margin:0 0 var(--s3)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* ---------- Ratgeberabschnitt ----------
   Eigene, explizit gesetzte Farben. Ohne diese Angaben färben mobile Browser
   im automatischen Dunkelmodus den Hintergrund um und die dunkle Schrift
   verschwindet. */
.section--advice{
  background:var(--advice-bg);
  padding:var(--s6) 0;
}
.section--advice .prose{background:transparent}
.section--advice h2{color:var(--advice-head)}
.section--advice h3{color:var(--advice-head)}
.section--advice p,
.section--advice li{color:var(--advice-text);font-size:1.0625rem;line-height:1.65}
.section--advice a{color:#0b2545;text-decoration:underline;text-underline-offset:2px}
.advice-card{
  background:#ffffff;
  border:1px solid #dde5ef;
  border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(11,31,58,.06), 0 6px 18px rgba(11,31,58,.05);
  padding:var(--s4);
  margin-bottom:var(--s3);
}
.advice-card h3{margin-top:0;font-size:1.15rem}
.advice-card p:last-child{margin-bottom:0}
.advice-card--alert{border-left:4px solid var(--red-600)}
@media(min-width:700px){.advice-card{padding:var(--s4) var(--s5)}}
@media(max-width:420px){
  .section--advice{padding:var(--s5) 0}
  .advice-card{padding:1.1rem}
  .section--advice p,.section--advice li{font-size:1rem}
}

.logo-img{display:block;object-fit:contain}
@media(max-width:420px){.brand .logo-img{height:34px}}


/* ---------- Farbdisziplin ----------
   Marineblau, Signalrot und Weiss tragen die Gestaltung. Grün kommt nur an
   einer Stelle vor: am pulsierenden Punkt, der die Erreichbarkeit anzeigt.
   Auf dunklem Grund erscheinen Häkchen weiss, auf hellem Grund rot. */
.section--grey .trustline svg,
.card .more svg{color:var(--red-600)}
.btn--wa{font-weight:700}
.section--navy .btn--wa{color:#fff}
.hero .btn--wa svg{color:#fff}

/* ---------- Livegang-Anpassungen ---------- */
/* Logo im Kopf: vorher 42 px hoch und damit auf dem Handy kaum lesbar. */
.brand .logo-img{height:56px}
.head{min-height:72px}
/* Kopfleiste: Regionenliste nur ab Tablet. Auf dem Handy wandert die Zeile
   als Statuszeile unter den Anruf-Knopf der Anrufleiste. */
@media(max-width:600px){.topbar-regionen{display:none}}
@media(max-width:1049px){.topbar{display:none}}
/* Hero auf dem Handy: Knöpfe in voller Breite, Vertrauenspunkte zweispaltig. */
@media(max-width:599px){
  .hero .btn-row .btn{width:100%}
  .trustline{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .75rem}
  .trustline li{font-size:.9rem}
}
/* Verlinkte Karten: Der Link «Region ansehen» ist ein span und hatte keine
   eigene Gestaltung. Im dunklen Abschnitt erbten Titel und Link das Weiss des
   Abschnitts und standen weiss auf weisser Karte. Karte als Spalte, Link
   immer unten, damit die vier Karten gleich ausgerichtet sind. */
.card-link{display:flex;flex-direction:column}
.card-link h3{color:var(--navy-900)}
.card-link p{color:var(--grey-600)}
.card .more{display:inline-block;align-self:flex-start;margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--red-700);border-bottom:2px solid var(--red-050)}
.card-link:hover .more{border-bottom-color:var(--red-600)}
/* Textspalte ohne Formular daneben: Lesebreite begrenzen statt halbe Seite. */
.split--voll{display:block;max-width:72ch}
/* Anrufleiste: ein Knopf in voller Breite, darunter die Statuszeile.
   Erscheint erst beim Scrollen nach unten; gleichzeitig weicht der Kopf. */
.actionbar .status{display:flex;align-items:center;justify-content:center;gap:.45rem;margin:.4rem 0 0;font-size:.82rem;color:#c4d0e2}
@media(max-width:1049px){
  body{--bar-h:96px}
  .actionbar{display:block;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));transition:transform .25s ease}
  .actionbar[data-sichtbar="nein"]{transform:translateY(100%)}
  header.site{transition:transform .25s ease}
  header.site[data-versteckt="ja"]{transform:translateY(-100%)}
  html[data-leiste="nein"] #consent-banner{bottom:1rem}
}
@media(prefers-reduced-motion:reduce){.actionbar,header.site{transition:none}}
/* Fusszeile: Marke der Zentrale klein, auf weissem Chip, damit das Marineblau
   auf dem dunklen Grund lesbar bleibt. */
.foot-partner{margin-top:.75rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.foot-partner a{display:inline-flex;background:#fff;border-radius:var(--radius);padding:.3rem .5rem}
.foot-partner img{display:block;height:14px;width:auto}
/* Einwilligungsbanner */
#consent-banner{position:fixed;left:0;right:0;bottom:calc(var(--bar-h) + .5rem);z-index:120;background:#fff;border-top:1px solid var(--grey-100);box-shadow:0 -6px 24px rgba(8,23,44,.18);padding:1rem}
#consent-banner h2{font-size:1rem;margin:0 0 .4rem}
#consent-banner p{font-size:.9rem;color:var(--grey-600);margin:0 0 .75rem}
.consent-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap}
.consent-knoepfe button{min-height:44px;padding:.6rem 1rem;font:inherit;font-weight:700;border-radius:var(--radius);cursor:pointer;flex:1}
#consent-ja{background:var(--navy-800);color:#fff;border:2px solid var(--navy-800)}
#consent-nein{background:#fff;color:var(--navy-800);border:2px solid var(--grey-300)}
#consent-banner a{display:inline-block;margin-top:.6rem;font-size:.85rem;color:var(--grey-600)}
@media(min-width:1050px){#consent-banner{left:auto;right:1rem;bottom:1rem;max-width:26rem;border:1px solid var(--grey-100);border-radius:var(--radius)}}

/* ---------- Handy-Härtung (17. September 2026) ----------
   Rückmeldung aus der Zürich-Kampagne (iPhone 15): Nummer im Kopf auf zwei
   Zeilen, Kopf gequetscht, Seite seitlich verschiebbar. Das passiert, sobald
   der Satzspiegel schmaler als rund 300 px wird (Safari-Seitenzoom «AA»,
   Anzeigezoom «Grösserer Text», grosse Systemschrift auf Android): Logo und
   Anruf-Knopf waren beide starr, der Knopftext brach um, der Kopf lief über
   den rechten Rand, und iOS lässt die Seite dann trotz overflow-x:hidden auf
   body seitlich wischen.
   Regeln: Der Anruf-Knopf bleibt einzeilig und hat Vorrang, das Logo gibt
   nach. Sehr schmale Breiten bekommen engere Ränder und kleinere Knöpfe.
   Kopf, Inhalt und Fuss schneiden seitlichen Überlauf hart ab, ohne einen
   Scrollbereich zu erzeugen (clip statt hidden, sonst klebt der Kopf nicht
   mehr). */
header.site,main,footer.site,.topbar{overflow-x:clip}
.brand{flex:0 1 auto;min-width:0}
.brand .logo-img{width:auto;height:auto;max-height:56px;max-width:100%}
.head-actions{flex:none}
.head .btn{white-space:nowrap}
.actionbar .call{white-space:nowrap;font-size:clamp(.85rem,4.4vw,1rem)}
@media(max-width:359px){
  .wrap{padding-left:1rem;padding-right:1rem}
  .head{gap:.6rem}
  .head-actions{gap:.4rem}
  .head .btn--sm{padding:.55rem .75rem;font-size:.88rem}
  .burger{padding:.5rem .55rem}
}
@media(max-width:329px){
  .burger-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}