/* Lokal eingebundene Schriften, kein Aufruf an Google. Outfit und Inter, SIL Open Font License 1.1.
   Hier statt in index.php, damit auch alle Unterseiten die Schriften bekommen. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/outfit.woff2') format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter.woff2') format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
:root{
  color-scheme:light;
  --navy:#0d2540;
  --navy-deep:#071627;
  --blue:#1c6bb0;
  --blue-dark:#155a95;
  --sky:#e6f0f9;
  --sky-soft:#f3f7fb;
  --red:#c8171d;
  --ink:#16202b;
  --ink-soft:#3a4654;
  --ink-muted:#7a8794;
  --line:#d7e1ea;
  --paper:#ffffff;
  --bg:#ffffff;
  --card:#ffffff;
  --heading:var(--navy);
  --radius:6px;
  --shadow:0 18px 50px -20px rgba(13,37,64,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:430;
  font-size:1rem;line-height:1.5;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Outfit,Inter,system-ui,sans-serif;color:var(--heading);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(1.6rem,1rem + 2.6vw,2.75rem);text-transform:uppercase;letter-spacing:0;line-height:1.12}
h2{font-weight:800;font-size:clamp(1.45rem,1rem + 2vw,2.25rem);text-transform:uppercase;letter-spacing:0;line-height:1.15}
h3{font-weight:700;font-size:clamp(1.15rem,1rem + .6vw,1.4rem)}
p{max-width:64ch}
a{color:var(--blue)}
img,svg{max-width:100%;display:block}
:focus-visible{outline:3px solid #ffb800;outline-offset:3px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding-block:clamp(3.5rem,3rem + 3vw,6rem)}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--ink-soft)}
.sub{color:var(--ink-soft);margin-top:.9rem}
ul.plain{list-style:none}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:Outfit,Inter,sans-serif;font-weight:700;font-size:.94rem;letter-spacing:.005em;
  padding:.68rem 1.15rem;border-radius:var(--radius);text-decoration:none;
  border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  min-height:44px;line-height:1.25;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-dark{background:var(--navy);color:#5db0f0}
.btn-dark svg{color:#5db0f0}
.btn-dark:hover{background:var(--blue-dark);color:#fff}
.btn-dark:hover svg{color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#a9121a}
.btn-block{width:100%}

/* topbar */
.alert{background:var(--red);color:#fff;text-align:center;font-size:.85rem;font-weight:600;padding:.45rem 1rem}
.alert a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.alert .long{display:inline}
.alert .short{display:none}
@media (max-width:760px){
  .alert{font-size:.78rem;padding:.3rem .75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .alert .long{display:none}
  .alert .short{display:inline}
}
header.nav{
  position:sticky;top:0;z-index:40;
  /* Der Farbton bleibt das Marineblau. Das Bild dahinter wird abgedunkelt und
     weichgezeichnet, dadurch scheint nur die Struktur durch. */
  background:rgba(11,30,52,.92);
  backdrop-filter:blur(14px) brightness(.35) saturate(.8);
  -webkit-backdrop-filter:blur(14px) brightness(.35) saturate(.8);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Ohne Weichzeichnung bleibt die Leiste deckend, sonst leidet die Lesbarkeit */
@supports not (backdrop-filter:blur(2px)){header.nav{background:rgba(13,37,64,.96)}}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1rem}
.logo{font-family:Outfit,sans-serif;font-weight:800;font-size:1.45rem;letter-spacing:.06em;color:#fff;text-decoration:none}
.nav ul{display:flex;gap:1.6rem;list-style:none}
.nav ul a{color:#dbe6f1;text-decoration:none;font-size:.92rem;font-weight:500;transition:color .15s}
.nav ul a:hover,.nav ul a:focus-visible{color:#7FC4FF}
.nav li.hat-unter:hover > a,.nav li.hat-unter:focus-within > a{color:#7FC4FF}
/* Telefonnummer in der Kopfzeile: weiß, ohne Knopf, beim Überfahren nur leicht heller */
.nav-call{display:inline-flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-family:Outfit,sans-serif;font-weight:600;background:transparent;padding:.55rem .95rem;border-radius:var(--radius);font-size:clamp(.95rem,.85rem + .3vw,1.1rem);white-space:nowrap;transition:opacity .18s}
.nav-call:hover,.nav-call:focus-visible{background:transparent;color:#7FC4FF;opacity:1}
.nav-call svg{width:17px;height:17px;color:#fff;transition:color .18s}
.nav-call:hover svg,.nav-call:focus-visible svg{color:#7FC4FF}
.nav-right{display:flex;align-items:center;gap:.9rem}
.langs{display:flex;align-items:center;gap:.4rem}
.lang{display:inline-flex;align-items:center;justify-content:center;padding:.35rem;border-radius:3px;line-height:0;text-decoration:none}
.lang .flag{display:block;width:24px;height:16px;overflow:hidden}
.lang svg{display:block;width:100%;height:100%}
.lang{opacity:.45;transition:opacity .15s}
.lang:hover,.lang:focus-visible{opacity:1}
.lang.is-active{opacity:1}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:420px){.nav-right{gap:.5rem}.lang .flag{width:21px;height:14px}}
/* Handymenü: Hamburger-Knopf, Menü klappt als Liste unter der Kopfzeile auf */
.nav-burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;
  border-radius:8px;color:#fff;flex:none}
.nav-burger:hover,.nav-burger:focus-visible{background:rgba(255,255,255,.08)}
.nav-burger-linien{display:flex;flex-direction:column;gap:5px;width:22px;margin:0 auto}
.nav-burger-linien i{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.menue-offen .nav-burger-linien i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-offen .nav-burger-linien i:nth-child(2){opacity:0}
.menue-offen .nav-burger-linien i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .nav-burger{display:block}
  .nav{position:relative}
  /* Das Menü füllt den Platz zwischen Kopfzeile und unterem Rand und lässt sich
     scrollen. Unten bleibt Luft für die grüne Anruf-Leiste, damit auch der
     letzte Eintrag erreichbar ist. */
  .nav nav.hauptmenue{display:none;position:absolute;left:0;right:0;top:100%;
    height:calc(100dvh - var(--nav-unten,66px));
    background:var(--navy);border-top:1px solid rgba(255,255,255,.12);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:70;
    padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .nav.menue-offen nav.hauptmenue{display:block}
  .nav ul{display:flex;flex-direction:column;gap:0;padding:.5rem 0}
  .nav nav ul > li > a,.nav nav li.hat-unter > a{display:flex;align-items:center;justify-content:space-between;
    padding:.85rem 1.25rem;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav nav li.hat-unter > a svg{display:none}
  .nav nav li.hat-unter{position:static}
  /* Untermenüs immer offen und eingerückt, ohne Aufklappen */
  .nav nav ul.untermenue,.nav nav li.hat-unter:hover > ul.untermenue{display:block;position:static;min-width:0;
    background:rgba(255,255,255,.04);border:0;border-radius:0;box-shadow:none;padding:.2rem 0 .4rem;margin:0}
  .nav nav li.hat-unter::after{display:none}
  .nav nav ul.untermenue a{display:block;padding:.55rem 1.25rem .55rem 2.2rem;white-space:normal;border:0;
    border-radius:0;font-size:.95rem}
  .nav nav ul.untermenue .untertitel{padding:.6rem 1.25rem .2rem 2.2rem;margin:0;border:0}
  /* Telefonnummer nur als Hörersymbol, damit Flaggen, Schalter und Knopf Platz haben */
  .nav-call{padding:.5rem;font-size:0;gap:0}
  .nav-call svg{width:20px;height:20px}
  body.menue-offen{overflow:hidden}
}
@media (max-width:420px){
  .nav-call{display:none}
  .langs{gap:.3rem}
}

/* hero */
.hero{
  position:relative;color:#fff;padding-block:clamp(2.1rem,1.4rem + 3.4vw,4.8rem) clamp(2.1rem,1.4rem + 3.4vw,3.9rem);
  background:
    radial-gradient(1000px 560px at 80% 6%,rgba(93,176,240,.55),transparent 62%),
    radial-gradient(700px 420px at 92% 30%,rgba(45,130,205,.45),transparent 65%),
    radial-gradient(760px 440px at 8% 92%,rgba(45,130,205,.3),transparent 62%),
    linear-gradient(160deg,#0d2c4a 0%,#12385c 45%,#1a5182 100%);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23ffffff' stroke-opacity='.12' stroke-width='1'><path d='M20 0v90M20 90l14 18M34 108v60M34 168l-9 14'/><path d='M150 30v70M150 100l-12 16M138 116v80'/><path d='M260 0v140M260 140l10 12M270 152v60'/><path d='M90 220v80M210 200v100'/></g></svg>");
  background-size:300px 300px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
}
/* Hintergrundvideo im Hero: stumm in Schleife hinter Text und Karte. Das Video
   ist selbst blau, deshalb nur ein leichter Schleier, links etwas dichter für
   die Überschrift, rechts offen, damit die Tropfen sichtbar bleiben */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}
.hero-schleier{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,36,62,.62) 0%,rgba(11,36,62,.38) 48%,rgba(11,36,62,.14) 100%)}
.hero.hat-video::before{opacity:.12}
/* Handy: Ausschnitt mit den Tropfen zeigen und den Schleier leichter halten,
   sonst ist vom Video im Hochformat kaum etwas zu erkennen */
@media (max-width:860px){
  .hero-video{object-position:50% 0%}
  .hero-schleier{background:linear-gradient(180deg,rgba(11,36,62,.42) 0%,rgba(11,36,62,.30) 55%,rgba(11,36,62,.55) 100%)}
  .hero.hat-video::before{opacity:0}
}
.hero.hat-video{isolation:isolate}
.hero.hat-video > .wrap{position:relative;z-index:2}
/* Bei reduzierter Bewegung bleibt das Video als Standbild stehen (siehe Skript), es wird nicht ausgeblendet */
.hero:not(.hat-video) .hero-video,.hero:not(.hat-video) .hero-schleier{display:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.hero h1{color:#fff;margin-bottom:1.1rem;max-width:none;text-wrap:nowrap}
/* Unterseiten: die Überschrift kommt aus dem Editor und darf umbrechen */
.hero h1#lp-h1{text-wrap:balance;max-width:30ch;
  font-size:clamp(1.4rem,.95rem + 1.75vw,2.05rem)}
.hero h1 .brk{display:block}
.hero .lead{color:#c9d8e7;max-width:58ch;font-size:clamp(.86rem,.82rem + .18vw,.95rem);line-height:1.38}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
/* Unterseiten: Hauptknopf im Kopfbereich dunkel, damit er sich vom blauen Hintergrund abhebt */
/* Unterseiten: kompakterer Kopfbereich, die Überschrift kommt aus dem Editor und ist oft lang */
.hero-seite{padding-block:clamp(1.6rem,1.1rem + 2.4vw,3.2rem) clamp(1.6rem,1.1rem + 2.4vw,2.8rem)}
.hero-seite .hero-actions{margin-top:1.3rem}
.hero-seite .trust{margin-top:1.5rem;padding-top:1.1rem}
.hero-seite .hero-actions .btn-primary{background:#0D2540;color:#fff;border:1px solid rgba(255,255,255,.14)}
.hero-seite .hero-actions .btn-primary:hover,.hero-seite .hero-actions .btn-primary:focus-visible{background:#081a30;color:#fff}
.trust{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:1rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.trust li{display:flex;align-items:center;gap:.5rem;font-size:clamp(.78rem,.62rem + .4vw,.9rem);color:#dbe6f1;line-height:1.3}
/* Handy: ohne Trennlinie, näher an den Knöpfen, die drei Punkte enger */
@media (max-width:860px){.hero .trust{border-top:0;padding-top:0;margin-top:1.1rem}}
@media (max-width:640px){.trust{flex-wrap:wrap;justify-content:flex-start;gap:.4rem 1.4rem}.trust li{font-size:.85rem}}
.trust svg{width:18px;height:18px;flex:none;color:#7fc4ff}

/* Logos unter der Check-Karte, klein und mittig mit Abstand */
.check-spalte{min-width:0}
.hero-logos{display:flex;justify-content:center;align-items:center;gap:2.4rem;margin-top:1.4rem}
.hero-logos img{height:38px;width:auto;opacity:.9}
@media (max-width:420px){.hero-logos{gap:1.6rem}.hero-logos img{height:32px}}

/* check card */
.check{background:var(--card);color:var(--ink);border-radius:10px;padding:1.6rem;box-shadow:var(--shadow)}
.check h2{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);margin-bottom:.4rem;line-height:1.15}
.check-titel{display:flex;align-items:center;gap:.7rem}
.check-titel-text{color:var(--red)}
:root[data-theme="dark"] .check-titel-text{color:#ff6b6f}
.check-uhr{flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  background:var(--sky);color:var(--blue)}
/* neues Icon als Maske, damit die Farbe per CSS steuerbar ist */
.check-uhr::before{content:"";width:2.05rem;height:2.05rem;display:block;background:var(--red);
  -webkit-mask:url('/assets/img/check-icon.svg') center/contain no-repeat;
  mask:url('/assets/img/check-icon.svg') center/contain no-repeat}
:root[data-theme="dark"] .check-uhr{background:#173453}
:root[data-theme="dark"] .check-uhr::before{background:#ff6b6f}
@media (max-width:420px){.check-uhr{width:2.7rem;height:2.7rem}.check-uhr::before{width:1.85rem;height:1.85rem}}
.check .small{font-size:.86rem;color:var(--ink-soft)}
.check .step{margin-top:1.2rem}
.check .q{font-family:Outfit,sans-serif;font-weight:700;font-size:1.08rem;color:var(--heading);margin-bottom:.8rem;line-height:1.3}
.opts{display:grid;gap:.6rem}
.opt{
  display:flex;align-items:center;gap:.8rem;text-align:left;width:100%;
  background:var(--paper);border:2px solid var(--blue);border-radius:var(--radius);padding:.85rem 1rem;
  font:inherit;font-weight:600;color:var(--navy);cursor:pointer;min-height:52px;
  box-shadow:0 2px 0 rgba(13,36,64,.14),0 4px 12px rgba(13,36,64,.08);
  transition:transform .12s ease,box-shadow .12s ease,background .15s,border-color .15s;
}
.opt:hover{background:var(--sky);border-color:var(--blue-dark);transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(13,36,64,.16),0 8px 18px rgba(13,36,64,.12)}
.opt:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(13,36,64,.16),0 2px 6px rgba(13,36,64,.1)}
.opt:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
/* kleiner Hinweispfeil rechts, macht klar dass es weitergeht */
.opt::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);opacity:.7}
.opt:hover::after{opacity:1}
.opt .ico{width:34px;height:34px;flex:none;border-radius:50%;background:var(--sky);display:grid;place-items:center;color:var(--blue);border:1px solid var(--blue)}
.opt .ico svg{width:18px;height:18px}
.progress{display:flex;gap:4px;margin-top:1.1rem}
.progress i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.progress i.done{background:var(--blue)}
.check .urgent{margin-top:1.1rem;font-size:.86rem;color:var(--ink-soft)}
.check .urgent a{font-weight:600}
.result{display:none}
.result.show{display:block}
.result .tag{display:inline-block;font-size:.8rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:var(--sky);color:var(--blue-dark);margin-bottom:.7rem}
.result .tag.hot{background:#fde7e8;color:var(--red)}
.result p{font-size:.95rem;margin-bottom:1rem}
.result .btn{margin-top:.2rem}
.ohne-bilder{text-align:right;margin-top:.55rem}
.ohne-bilder a{font-size:.85rem;color:var(--ink-soft);text-decoration:underline}
.result .again{margin-top:.8rem;font-size:.85rem;background:none;border:0;color:var(--ink-soft);text-decoration:underline;cursor:pointer;font:inherit;font-size:.85rem}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  /* Überschrift nutzt die volle Breite: keine ausgeglichenen Zeilen, etwas
     enger gesetzt und eine Spur kleiner */
  .hero h1{text-wrap:wrap;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.35rem,.7rem + 4.1vw,1.85rem)}
  .hero h1 .brk{display:inline}
  .check{margin-top:.5rem}
  /* Startseite: Hauptknopf im Kopfbereich dunkel, damit er sich vom Blau abhebt */
  .hero:not(.hero-seite) .hero-actions .btn-primary{background:#112337;color:#fff;border:1px solid rgba(255,255,255,.14)}
  .hero:not(.hero-seite) .hero-actions .btn-primary:hover{background:#0b1a2b}
}

/* intro */
.intro .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.intro p+p{margin-top:1rem}
.intro h2{margin-bottom:1.2rem}
.methods{background:var(--sky-soft);border-radius:10px;padding:1.6rem;border:1px solid var(--line)}
.methods h3{margin-bottom:1rem}
.methods li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;padding:.9rem 0;border-top:1px solid var(--line);align-items:start}
.methods li:first-of-type{border-top:0;padding-top:0}
.methods .m-ico{width:40px;height:40px;border-radius:8px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--blue)}
.methods .m-ico svg{width:22px;height:22px}
.methods strong{font-family:Outfit,sans-serif;font-weight:700;color:var(--heading);display:block;margin-bottom:.15rem}
.methods span{font-size:.92rem;color:var(--ink-soft)}
@media (max-width:860px){.intro .wrap{grid-template-columns:1fr}}

/* warning band */
.warn{background:var(--navy);color:#fff;padding-block:clamp(2.5rem,2rem + 2vw,3.5rem)}

.warn .wrap{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:center}
.warn h2{color:#fff;font-size:clamp(1.4rem,1rem + 1.6vw,2rem);max-width:30ch}
.warn p{color:#c9d8e7;margin-top:.6rem;max-width:60ch}
@media (max-width:860px){.warn .wrap{grid-template-columns:1fr}}

/* services */
.services h2{text-align:center;margin-inline:auto;max-width:40ch}
.services .sub{max-width:74ch}
.services .sub{text-align:center;margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
.svc{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);display:flex;flex-direction:column}
.svc-vis{aspect-ratio:16/9;background:var(--sky);position:relative;overflow:hidden}
.svc-vis svg{position:absolute;inset:0;width:100%;height:100%}
.svc-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-body{padding:1.3rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column;background:#f6f9fc}

.svc h3{margin-bottom:.5rem}
.svc p{font-size:.95rem;color:var(--ink-soft);flex:1}
.svc a{margin-top:1rem;font-weight:600;text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;gap:.4rem}
.svc a:hover{text-decoration:underline}
.svc a svg{width:16px;height:16px}

@media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr);gap:1.1rem}}
@media (max-width:680px){.grid{grid-template-columns:1fr}}

/* schimmel */
.mold{background:var(--sky-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mold .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.mold p+p{margin-top:1rem}
.mold h2{margin-bottom:1.2rem}
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0;padding-top:0}
.steps li::before{content:counter(s);font-family:Outfit,sans-serif;font-weight:800;font-size:1.3rem;color:var(--blue);width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center}
.steps strong{font-family:Outfit,sans-serif;font-weight:700;color:var(--heading);display:block;margin-bottom:.2rem}
.steps span{font-size:.95rem;color:var(--ink-soft)}
.mold .btn{margin-top:1.6rem}
@media (max-width:860px){.mold .wrap{grid-template-columns:1fr}}

/* local */
.local{text-align:center}
.local .wrap{width:min(1280px,100% - 2.5rem)}
.local h2{max-width:36ch;margin:0 auto 1.3rem}
.local p{max-width:80ch;margin-inline:auto}
.local p+p{margin-top:1rem}
.bezirke{margin:2.4rem auto 0;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;max-width:1040px}
.bezirke li{font-size:.95rem;font-weight:700;border:2px solid var(--line);border-radius:999px;
  color:var(--ink-soft);background:var(--card);transition:border-color .15s,background .15s,color .15s}
.bezirke li{padding:.62rem 1.15rem}
.local .btn{margin-top:2rem}

/* person */
.person{position:relative;background:var(--navy);color:#fff}
.person .wrap{position:relative;z-index:1}

.person .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.person h2{color:#fff;margin-bottom:1rem}
.person p{color:#c9d8e7}
.person p+p{margin-top:1rem}
.portrait{width:clamp(180px,26vw,260px);aspect-ratio:4/5;border-radius:10px;background:linear-gradient(160deg,#1c6bb0,#0a1f36);display:grid;place-items:center;color:#7fc4ff;position:relative;overflow:hidden}
.portrait svg{width:60%;height:60%;opacity:.9}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait{margin:0}
.portrait em{position:absolute;bottom:.8rem;left:.9rem;right:.9rem;font-style:normal;font-size:.8rem;color:#c9d8e7;font-weight:500}
.sig{margin-top:1.4rem;font-family:Outfit,sans-serif;font-weight:700;color:#fff}
.sig small{display:block;font-family:Inter,sans-serif;font-weight:400;color:#9fb5cb;font-size:.85rem}
/* Freigestelltes Foto: steht ohne Rahmen auf dem Balken und ragt oben heraus */
.person.hat-portrait{overflow:visible;padding-block:clamp(2rem,1.5rem + 1.5vw,3.2rem)}
.person.hat-portrait .wrap{align-items:end;grid-template-columns:clamp(238px,28vw,374px) 1fr}
.portrait.foto{background:none;border-radius:0;overflow:visible;aspect-ratio:auto;width:100%;align-self:end;place-items:end}
.portrait.foto img{width:100%;height:auto;object-fit:contain;display:block;
  margin-top:clamp(-10.2rem,-7.6vw,-5.1rem);
  margin-bottom:calc(-1 * clamp(2rem,1.5rem + 1.5vw,3.2rem))}
@media (max-width:860px){.person .wrap{grid-template-columns:1fr}.portrait{width:min(100%,260px)}
  .person.hat-portrait .wrap{grid-template-columns:1fr;justify-items:center;text-align:left}
  .portrait.foto{width:min(74%,290px)}
  .portrait.foto img{margin-top:calc(-1 * clamp(2rem,6vw,4rem));margin-bottom:0}}

/* faq */
.faq h2{text-align:center;margin-inline:auto;max-width:28ch}
.faq .sub{text-align:center;margin-inline:auto}
/* Zwei gleich breite, voneinander unabhängige Spalten. Eine geöffnete Frage
   verändert nur die Höhe ihrer eigenen Spalte, die andere bleibt stehen. */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 3rem;margin-top:2.5rem;align-items:start}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.05rem 0;font-weight:600;font-size:1rem;color:var(--heading)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:Outfit,sans-serif;font-size:1.08rem;font-weight:600;color:var(--heading);line-height:1.35;margin:0}
.faq summary svg{width:22px;height:22px;flex:none;color:var(--blue);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 1.2rem;color:var(--ink-soft);font-size:.95rem}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq summary h3{font-size:1.06rem}}

/* final cta */
.final{text-align:center;position:relative;overflow:hidden;
  padding-block:clamp(1.8rem,1.5rem + 1.5vw,3rem);
  background:linear-gradient(180deg,var(--bg) 0%,var(--sky) 100%)}
/* Auf Unterseiten einfarbig, in der Farbe des Formular-Abschnitts, läuft direkt in die Wasserlinie */
.final-seite{background:var(--card);margin-top:-1px}  /* weißer Hintergrund, deckt die Trennlinie darüber ab */
.final .wrap{width:min(1100px,100% - 2.5rem)}
.final h2{margin-inline:auto;max-width:34ch}
.final p{margin:1.1rem auto 0;max-width:82ch}
/* Auf Unterseiten etwas kleiner und breiter, damit der Text vor den Buttons in zwei Zeilen bleibt */
.final-seite .lead{font-size:clamp(.98rem,.94rem + .25vw,1.08rem);max-width:92ch;line-height:1.55}
.final .actions .btn{min-width:14rem;justify-content:center;text-align:center}
.final .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2rem}
.wave{display:none}
.mapsection{padding-bottom:0}
.map-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.mapsection h2{max-width:20ch}
.mapsection .sub{margin-bottom:0;max-width:52ch}
.map-bild{margin:0}
.map-bild img{width:100%;height:auto;display:block}
@media (max-width:860px){
  .map-intro{grid-template-columns:1fr;gap:1.2rem}
  .map-bild{order:-1}
  .mapsection h2{max-width:26ch}
}
/* Wasserlinie als Übergang über der Karte, ohne dunklen Hintergrund: weiß oben, helles Wasser unten */
.map-welle{
  position:relative;margin-top:clamp(2rem,3vw,3rem);
  --welle-hoehe:clamp(58px,8vw,120px);
  height:calc(var(--welle-hoehe) + 40px);
  background:linear-gradient(180deg,
    var(--bg) 0,
    var(--bg) calc(var(--welle-hoehe) * .45),
    #d6e4f0 var(--welle-hoehe),
    #c8dae8 100%);
}
.map-welle::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:var(--welle-hoehe);
  background-image:var(--welle-bild,url('/assets/img/welle-weich.webp'));
  background-size:100% 100%;background-repeat:no-repeat;background-position:center top;
  pointer-events:none;
}
.mapframe{margin-top:clamp(2rem,3vw,3rem);position:relative;width:100%;height:clamp(280px,42vw,460px);background:var(--sky);border-top:1px solid var(--line)}
.map-welle + .mapframe{margin-top:0;border-top:1px solid rgba(13,37,64,.12)}
.mapframe iframe{
  width:100%;height:100%;border:0;display:block;
  filter:grayscale(.5) saturate(1.5) hue-rotate(-6deg) brightness(1) contrast(1.02);
}
/* Karte über die Google-Schnittstelle, bereits im richtigen Stil, kein Filter nötig */
.mapframe .map-canvas{width:100%;height:100%}
.mapfallback{padding:1.5rem;text-align:center}
.map-consent{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1.5rem;
  background:linear-gradient(160deg,#0d2c4a,#1a5182);color:#fff}
.map-consent h3{color:#fff;margin-bottom:.6rem}
.map-consent p{color:#c9d8e7;font-size:.92rem;max-width:52ch;margin:0 auto 1.1rem}
.map-consent a{color:#7fc4ff}
.map-remember{display:block;margin-top:.9rem;font-size:.85rem;color:#c9d8e7;cursor:pointer}
.map-remember input{width:16px;height:16px;accent-color:#7fc4ff;vertical-align:-2px;margin-right:.35rem}
.map-alt{margin-top:1rem;font-size:.85rem}

/* footer */
footer{background:linear-gradient(180deg,#0d2440 0%,#0a1c31 38%,var(--navy-deep) 100%);
  color:#c9d8e7;padding:3.5rem 0 6rem}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.4rem;align-items:start}
/* Spaltenüberschriften nah am Logo: Großbuchstaben, fett, eine Zeile */
footer h4{color:#fff;font-family:Outfit,sans-serif;font-weight:800;font-size:1.22rem;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;margin:0 0 .9rem;text-align:left}
@media (max-width:1100px){footer h4{font-size:1.08rem;letter-spacing:.03em}}
footer .logo{margin-bottom:1rem;display:inline-block}
footer address{font-style:normal;font-size:.93rem;line-height:1.6;margin:0;text-align:left}
footer address a{color:#c9d8e7;text-decoration:none}
footer address a:hover{color:#fff}
footer ul{list-style:none;display:grid;gap:.45rem;font-size:.93rem;margin:0;padding:0;text-align:left}
footer ul a{color:#c9d8e7;text-decoration:none}
footer ul a:hover{color:#fff}
footer .bottom{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem;color:#7d93a9;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  justify-content:center;text-align:center}
@media (max-width:1024px){footer .cols{grid-template-columns:1fr 1fr;row-gap:2.4rem}}
@media (max-width:860px){footer .cols{grid-template-columns:1fr}}

/* mobile call bar */
.callbar{display:none}
@media (max-width:860px){
  .callbar{
    display:grid;grid-template-columns:1fr;gap:.6rem;position:fixed;bottom:0;left:0;right:0;z-index:50;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)
  }
  .callbar .btn{padding:.9rem .6rem;font-size:1rem}
  /* Ein grüner Knopf über die volle Breite, direkt zum Anruf */
  .callbar .btn-call{background:#007e2e;color:#fff;gap:.55rem}
  .callbar .btn-call:hover,.callbar .btn-call:focus-visible{background:#006a27;color:#fff}
  .callbar .btn-call svg{width:20px;height:20px;flex:none}
}
/* exit popup */
.exit-backdrop{position:fixed;inset:0;z-index:100;background:rgba(7,22,39,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:1.2rem}
.exit-backdrop.open{display:flex}
.exit{
  position:relative;width:min(940px,100%);max-height:92vh;overflow:auto;background:var(--card);
  border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  display:grid;grid-template-columns:.95fr 1.05fr;
}
.exit-left{background:linear-gradient(160deg,#0a1f36,#123b63);color:#fff;padding:1.9rem 1.9rem 0;
  display:flex;flex-direction:column}
/* Foto füllt den freien Platz unten aus und sitzt bündig auf der Kante */
.exit-team{margin:1.6rem -1.9rem 0;display:flex;align-items:flex-end;justify-content:center;flex:1 1 auto;min-height:0}
.exit-team img{width:100%;max-width:408px;height:auto;display:block;margin-bottom:0}
@media (max-width:760px){.exit-team{margin-top:1.2rem}.exit-team img{max-width:300px}}
.exit-left h2{color:#fff;font-size:clamp(1.2rem,1rem + .9vw,1.55rem);margin-bottom:.9rem;text-wrap:balance;line-height:1.2}
.exit-left p{color:#c9d8e7;font-size:.95rem;max-width:40ch}
.exit-left p+p{margin-top:.8rem}
.exit-left ul{list-style:none;margin-top:1.4rem;display:grid;gap:.6rem}
.exit-left li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:#dbe6f1}
.exit-left li svg{width:17px;height:17px;flex:none;margin-top:.22rem;color:#7fc4ff}
.exit-call{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;color:#fff;font-family:Outfit,sans-serif;font-weight:700;font-size:1.05rem;text-decoration:none;border-bottom:2px solid rgba(127,196,255,.6);padding-bottom:.15rem}
.exit-call:hover{border-color:#fff}
.exit-right{padding:1.9rem 1.9rem 2rem}
.exit-right h3{margin-bottom:.3rem}
.exit-right .hint{font-size:.88rem;color:var(--ink-soft);margin-bottom:1rem}
.field{margin-bottom:.7rem}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--heading);margin-bottom:.3rem}
.field input,.field select,.field textarea{
  display:block;box-sizing:border-box;width:100%;
  font-family:inherit;font-size:.95rem;line-height:1.3;color:var(--ink);background:var(--sky-soft);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:.6rem .75rem;height:44px;min-height:0;margin:0
}
.field textarea{height:auto;min-height:76px;padding:.6rem .75rem;resize:vertical}
.field select{appearance:auto;padding-right:.5rem}
.exit :focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.exit .exit-close:focus-visible{outline:2px solid #fff}
.exit[tabindex]:focus{outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:var(--paper);outline:none;box-shadow:0 0 0 3px rgba(28,107,176,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;column-gap:.85rem;row-gap:0;align-items:start}
.field-row .field{margin-bottom:.7rem}
label.consent,.consent{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.72rem;line-height:1.2;color:#888888;margin:.6rem 0 1rem}
.consent span{font-weight:400;color:#888888}
.consent input{width:16px;height:16px;min-height:0;flex:none;margin-top:0;accent-color:var(--blue)}
.consent a{color:inherit;font-weight:400;text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:#666666}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{font-size:.9rem;padding:.7rem .8rem;border-radius:var(--radius);margin-bottom:.8rem}
.form-msg.fehler{background:#fde7e8;color:#a9121a}
.form-msg.ok{background:#e2f5e8;color:#1c6b3a}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.exit-close{
  position:absolute;top:.6rem;right:.6rem;z-index:2;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center
}
.exit-close:hover{background:rgba(255,255,255,.28)}
.exit-close svg{width:18px;height:18px}
.exit-done{display:none;padding:2.2rem 2rem;text-align:center}
.exit-done.show{display:block}
.exit-done h3{margin-bottom:.6rem}
.exit-done p{color:var(--ink-soft);font-size:.95rem;margin-inline:auto}
.exit.sent .exit-right form{display:none}
@media (max-width:860px){
  .exit{grid-template-columns:1fr}
  /* Auf dem Handy nur das Formular, der blaue Teil mit Text und Foto fällt weg */
  .exit-left{display:none}
  .exit-right{padding:1.4rem 1.3rem 1.8rem;padding-top:3.2rem}
  /* Schließen-Kreuz bleibt beim Scrollen oben rechts sichtbar, dunkel auf Weiß */
  .exit-close{position:sticky;top:.6rem;justify-self:end;margin:.6rem .6rem -3rem 0;
    background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  .exit-close:hover{background:#1D6BB0}
  .field-row{grid-template-columns:1fr}
}
/* --- Tablet und Handy: Feinschliff --- */
@media (max-width:1024px){
  .wrap{width:min(1120px,100% - 2rem)}
  .local .wrap{width:min(1280px,100% - 2rem)}
}
@media (max-width:860px){
  /* Platz für die feste Anrufleiste am unteren Rand */
  body{padding-bottom:78px}
  section{padding-block:clamp(2.6rem,2rem + 3vw,4rem)}
  .hero .wrap{gap:1.8rem}
  .check{margin-top:.25rem}
  .exit{max-height:88vh}
  footer{padding-bottom:2.5rem}
}
@media (max-width:560px){
  .wrap{width:min(1120px,100% - 1.5rem)}
  .local .wrap{width:min(1280px,100% - 1.5rem)}
  h1{font-size:clamp(1.5rem,1rem + 4vw,2rem)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .final .actions{flex-direction:column;align-items:stretch}
  .final .actions .btn{width:100%;min-width:0}
  .check{padding:1.15rem}
  .opt{padding:.8rem .85rem;font-size:.95rem}
  .bezirke li{font-size:.88rem;padding:.5rem .95rem}
  .bezirke a{padding:.5rem .95rem}
  .bezirke{gap:.55rem}
  .steps li{grid-template-columns:36px 1fr;gap:.8rem}
  .steps li::before{width:36px;height:36px;font-size:1.1rem}
  .methods{padding:1.2rem}
  .svc-body{padding:1.1rem 1.15rem 1.3rem}
  .mold .btn,.local .btn,.intro .btn{width:100%;justify-content:center}
}
@media (max-width:400px){
  .logo{font-size:1.25rem}
  .nav-call{padding:.5rem .7rem;font-size:.88rem}
  .nav .wrap{gap:.5rem}
}
/* Notfall-Knopf im Check: blinkt durchgehend ruhig, ohne Rahmen und ohne Welle */
.check .btn-red{position:relative;animation:rk-blinken 1.8s ease-in-out infinite}
@keyframes rk-blinken{
  0%{opacity:1}
  50%{opacity:.45}
  100%{opacity:1}
}
.check .btn-red:hover,.check .btn-red:focus-visible{animation-play-state:paused;opacity:1}
@media (prefers-reduced-motion:reduce){
  /* Bei reduzierter Bewegung blinkt nichts */
  .check .btn-red{animation:none;opacity:1}
}
/* --- Dunkelmodus, nur über den Schalter im Kopfbereich --- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1a2b; --paper:#0e2337; --card:#122843;
  --sky:#173453; --sky-soft:#12293f;
  --ink:#e8eef5; --ink-soft:#a9b9c9; --ink-muted:#7f92a6; --line:#26445f;
  --heading:#f2f6fa; --navy:#0a1b2c; --navy-deep:#060f1b;
  --shadow:0 18px 50px -20px rgba(0,0,0,.6);
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4{color:var(--heading)}
:root[data-theme="dark"] .warn{background:#0a1b2c}
:root[data-theme="dark"] .person{background:#0a1b2c}
:root[data-theme="dark"] .mold{background:#102438}
:root[data-theme="dark"] .final{background:linear-gradient(180deg,var(--bg) 0%,#12293f 100%)}
:root[data-theme="dark"] .final-seite{background:var(--card)}
:root[data-theme="dark"] .svc-body{background:#142c46}
:root[data-theme="dark"] .svc-vis{background:#173453}
:root[data-theme="dark"] .callbar{background:rgba(11,26,43,.96)}
:root[data-theme="dark"] .btn-dark{background:#fff;color:var(--blue)}
:root[data-theme="dark"] .btn-dark svg{color:var(--blue)}
:root[data-theme="dark"] .btn-dark:hover{color:var(--navy)}
:root[data-theme="dark"] .btn-dark:hover svg{color:var(--navy)}
:root[data-theme="dark"] .bezirke li{background:var(--card)}
:root[data-theme="dark"] .mapframe iframe{filter:grayscale(.72) saturate(2.4) hue-rotate(-4deg) brightness(.72) contrast(1.1)}
/* Wasserlinie über der Karte bleibt im Dunkelmodus aus, stattdessen ein ruhiger Verlauf */
:root[data-theme="dark"] .map-welle::before{display:none}
:root[data-theme="dark"] .map-welle{height:clamp(2rem,1.6rem + 2vw,3rem);
  background:linear-gradient(180deg,var(--bg) 0,#12293f 100%)}
:root[data-theme="dark"] .sf-check,:root[data-theme="dark"] .sf-check span,:root[data-theme="dark"] .consent,:root[data-theme="dark"] .consent span{color:#8d9cab}
:root[data-theme="dark"] .exit-close{background:rgba(255,255,255,.2)}

/* Schalter für den Dunkelmodus */
.theme-schalter{
  display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;transition:background .15s
}
.theme-schalter:hover,.theme-schalter:focus-visible{background:rgba(255,255,255,.14)}
.theme-schalter svg{width:19px;height:19px}
/* Das Symbol zeigt, wohin man wechselt: bei heller Seite der Mond, bei dunkler die Sonne */
.theme-schalter .sonne{display:none}
.theme-schalter .mond{display:block}
:root[data-theme="dark"] .theme-schalter .sonne{display:block}
:root[data-theme="dark"] .theme-schalter .mond{display:none}
@media (max-width:400px){.theme-schalter{width:32px;height:32px}.theme-schalter svg{width:17px;height:17px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* --- Cookie-Banner --- */
.ck-hinter{position:fixed;inset:0;z-index:120;background:rgba(7,22,39,.6);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;padding:1.2rem}
.ck-hinter.offen{display:flex}
body.ck-offen{overflow:hidden}
.ck{width:min(860px,100%);max-height:88vh;overflow:auto;background:var(--card);color:var(--ink);
  border-radius:12px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);padding:1.7rem 1.8rem 1.5rem}
.ck-kopf h2{font-size:clamp(1.15rem,1rem + .7vw,1.45rem);text-transform:none;margin-bottom:.5rem}
.ck-kopf p{font-size:.95rem;color:var(--ink-soft);max-width:72ch}
.ck-recht{margin-top:.7rem;display:flex;gap:1.2rem;font-size:.88rem}
.ck-details{margin:1.3rem 0 .3rem;border-top:1px solid var(--line);padding-top:1.1rem;display:grid;gap:1rem}
.ck-kat{border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem;background:var(--sky-soft)}
.ck-kat-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.35rem}
.ck-kat strong{font-family:Outfit,sans-serif;font-weight:700;color:var(--heading);font-size:1rem}
.ck-kat p{font-size:.88rem;color:var(--ink-soft);margin:0;max-width:72ch}
.ck-immer{font-size:.8rem;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
.ck-schalter{display:flex;align-items:center;gap:.6rem;cursor:pointer}
.ck-schalter input{width:44px;height:24px;flex:none;appearance:none;-webkit-appearance:none;background:var(--line);
  border-radius:999px;position:relative;cursor:pointer;transition:background .15s;margin:0}
.ck-schalter input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ck-schalter input:checked{background:var(--blue)}
.ck-schalter input:checked::after{transform:translateX(20px)}
.ck-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.ck-knoepfe .btn{flex:1 1 200px;justify-content:center}
.btn.grau-rand{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn.grau-rand:hover{border-color:var(--blue);color:var(--blue)}
@media (max-width:560px){
  .ck-hinter{padding:.7rem}
  .ck{padding:1.2rem 1.1rem 1.3rem;border-radius:10px;max-height:92vh}
  .ck-knoepfe{flex-direction:column}
  .ck-knoepfe .btn{width:100%;flex:none}
  .ck-kat-kopf{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.ck-schalter input,.ck-schalter input::after{transition:none}}

/* --- WhatsApp-Button --- */
.wa-knopf{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;
  width:56px;height:56px;border-radius:50%;
  background:#007e2e;color:#fff;display:grid;place-items:center;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.45);
  transition:transform .15s,box-shadow .15s;
}
.wa-knopf svg{width:32px;height:32px}
.wa-knopf:hover,.wa-knopf:focus-visible{background:#006926;transform:scale(1.06);box-shadow:0 12px 28px -6px rgba(0,0,0,.5)}
.wa-knopf:active{transform:scale(.98)}
@media (max-width:860px){
  /* über der festen Anrufleiste */
  .wa-knopf{width:50px;height:50px;right:.85rem;bottom:calc(78px + env(safe-area-inset-bottom))}
  .wa-knopf svg{width:28px;height:28px}
}
body.ck-offen .wa-knopf,body.ck-offen .hilfe{display:none}
@media (prefers-reduced-motion:reduce){.wa-knopf{transition:none}}
.wa-knopf{border:0;cursor:pointer;font:inherit}

/* --- Hilfe-Sprechblase über dem Button --- */
.hilfe{position:fixed;right:1.1rem;bottom:1.1rem;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.hilfe .wa-knopf{position:static}
.hilfe-blase{position:relative;width:min(300px,calc(100vw - 2rem));background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.1rem 1rem;
  box-shadow:0 16px 40px -12px rgba(7,22,39,.35);animation:hilfe-auf .22s ease-out}
.hilfe-blase::after{content:"";position:absolute;right:20px;bottom:-8px;width:14px;height:14px;background:var(--card);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
@keyframes hilfe-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hilfe-zu{position:absolute;top:.4rem;right:.5rem;width:30px;height:30px;border:0;background:transparent;border-radius:50%;
  color:var(--ink-soft);font-size:1.35rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.hilfe-zu:hover{background:var(--sky-soft);color:var(--ink)}
.hilfe-titel{margin:0 1.6rem .25rem 0;font-family:Outfit,sans-serif;font-weight:700;font-size:1.08rem;color:var(--heading)}
.hilfe-text{margin:0 0 .85rem;font-size:.9rem;color:var(--ink-soft)}
.hilfe-knoepfe{display:flex;flex-direction:column;gap:.45rem}
.hilfe-knoepfe a{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:9px;
  background:var(--sky-soft);color:var(--heading);font-weight:600;font-size:.92rem;text-decoration:none;transition:background .15s,border-color .15s}
.hilfe-knoepfe a:hover{background:var(--sky);border-color:#b8cde0}
.hilfe-knoepfe svg{width:20px;height:20px;flex:none;color:var(--blue)}
.hilfe-knoepfe a.hilfe-wa{background:#007e2e;border-color:#007e2e;color:#fff}
.hilfe-knoepfe a.hilfe-wa:hover{background:#006926}
.hilfe-knoepfe a.hilfe-wa svg{color:#fff}
@media (max-width:860px){
  .hilfe{right:.85rem;bottom:calc(78px + env(safe-area-inset-bottom))}
  .hilfe-blase::after{right:17px}
}
:root[data-theme="dark"] .hilfe-blase{background:#12293f;border-color:#274766}
:root[data-theme="dark"] .hilfe-blase::after{background:#12293f;border-color:#274766}
:root[data-theme="dark"] .hilfe-knoepfe a{background:#173453;border-color:#274766;color:#f2f6fa}
:root[data-theme="dark"] .hilfe-knoepfe a:hover{background:#1c4066}
:root[data-theme="dark"] .hilfe-knoepfe svg{color:#7fc4ff}
@media (prefers-reduced-motion:reduce){.hilfe-blase{animation:none}}

/* Brotkrumen auf Landingpages */
.krumen{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.85rem;color:#a9c0d6;margin-bottom:1rem}
.krumen a{color:#c9d8e7;text-decoration:none}
.krumen a:hover{color:#fff;text-decoration:underline}
.krumen span[aria-hidden]{opacity:.5}

/* Kurze Inhaltsblöcke auf Landingpages */
.kacheln{background:var(--sky-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kacheln h2{text-align:center;margin-inline:auto;max-width:30ch}
.kachel-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-top:1.8rem}
.kachel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.05rem 1.1rem}
.kachel h3{font-size:.98rem;margin-bottom:.4rem;line-height:1.3}
.kachel p{font-size:.89rem;line-height:1.5;color:var(--ink-soft);max-width:none;margin:0}
@media (max-width:1180px){.kachel-raster{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.kachel-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kachel-raster{grid-template-columns:1fr}}

/* Interne Verweise im Fließtext */
a.intern{font-weight:700;text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:.09em;color:var(--blue)}
a.intern:hover,a.intern:focus-visible{color:var(--blue-dark)}
.hero a.intern,.warn a.intern,.person a.intern{color:#9fd0ff}
.hero a.intern:hover,.warn a.intern:hover,.person a.intern:hover{color:#fff}

/* Klickbare Leistungskarten */
.svc-klickbar{transition:box-shadow .15s,transform .15s}
.svc-klickbar:hover{box-shadow:0 12px 30px -16px rgba(13,37,64,.45);transform:translateY(-2px)}
.svc-bildlink{position:absolute;inset:0;z-index:1;display:block}
.svc-body h3 a{color:inherit;text-decoration:none}
.svc-body h3 a:hover,.svc-body h3 a:focus-visible{color:var(--blue);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.svc-klickbar,.svc-klickbar:hover{transition:none;transform:none}}

/* Bezirke als Links */
.bezirke a{color:inherit;text-decoration:none;display:block;margin:0;padding:.62rem 1.15rem;border-radius:999px;font-weight:700}
.bezirke li:has(a){padding:0}
.bezirke li:has(a):hover,.bezirke li:has(a:focus-visible){
  border-color:var(--blue);background:var(--sky);color:var(--navy)}
/* Der erste Bezirk ist leicht hervorgehoben */
.bezirke li.ist-erster{border-color:#9ecbee;background:var(--sky);color:var(--navy)}
.bezirke li.ist-erster:hover{border-color:var(--blue)}
:root[data-theme="dark"] .bezirke li:has(a):hover,
:root[data-theme="dark"] .bezirke li.ist-erster{background:#173453;border-color:#2f6d9f;color:#e8eef5}

/* Klappmenü unter Leistungen.
   Die Auswahl ist bewusst genauer als .nav ul, sonst gewinnt dort display:flex. */
.nav li.hat-unter{position:relative}
.nav li.hat-unter > a{display:inline-flex;align-items:center;gap:.28rem}
.nav li.hat-unter > a svg{width:14px;height:14px;transition:transform .15s}
.nav li.hat-unter:hover > a svg,
.nav li.hat-unter:focus-within > a svg{transform:rotate(180deg)}

.nav ul.untermenue{
  display:none;
  position:absolute;top:calc(100% + .6rem);left:-.9rem;min-width:265px;
  flex-direction:column;gap:0;
  background:var(--navy);border:1px solid rgba(255,255,255,.14);border-radius:10px;
  padding:.5rem;margin:0;list-style:none;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.6);z-index:60;
}
/* Unsichtbare Brücke, damit das Menü beim Hinunterfahren nicht zuklappt */
.nav li.hat-unter::after{content:"";position:absolute;top:100%;left:0;right:0;height:.7rem}
.nav li.hat-unter:hover > ul.untermenue,
.nav li.hat-unter:focus-within > ul.untermenue{display:flex}
.nav ul.untermenue li{margin:0}
.nav ul.untermenue a{display:block;padding:.52rem .8rem;border-radius:6px;white-space:nowrap;
  color:#d6e4f2;text-decoration:none;font-size:.93rem;font-weight:500}
.nav ul.untermenue a:hover,.nav ul.untermenue a:focus-visible{background:#1D6BB0;color:#fff}
.nav ul.untermenue .untertitel{padding:.55rem .8rem .25rem;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8fa8c0}
.nav ul.untermenue .untertitel:not(:first-child){margin-top:.35rem;
  border-top:1px solid rgba(255,255,255,.1);padding-top:.6rem}
:root[data-theme="dark"] .nav ul.untermenue{background:#0a1b2c}

/* Rechtliches als eigene Zeile unter den Spalten */
footer .cols a,footer .cols h4{hyphens:none;overflow-wrap:normal}
.fuss-recht{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.55rem 1.6rem;
  text-align:center;
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
}
.fuss-recht a{color:#c9d8e7;text-decoration:none;font-size:.92rem;white-space:nowrap}
.fuss-recht a:hover,.fuss-recht a:focus-visible{color:#fff;text-decoration:underline}
@media (max-width:560px){
  .fuss-recht{gap:.5rem 1.1rem}
  .fuss-recht a{font-size:.88rem;white-space:normal}
}

/* Wasserlinie über der Fußzeile, im selben Stil wie über der Karte:
   heller Himmel, weiche Welle, helles Wasser, das ruhig in die Tiefe geht */
footer.hat-welle{
  position:relative;
  --welle-hoehe:clamp(58px,8vw,120px);
  padding-top:calc(var(--welle-hoehe) + 5.5rem);
  /* Oberhalb der Welle dieselbe Farbe wie der Abschluss-Abschnitt darüber,
     damit kein weißer Streifen zwischen Abschluss und Wasserlinie entsteht */
  --fuss-oben:var(--bg);
  background:linear-gradient(180deg in oklab,
    var(--fuss-oben) 0,
    var(--fuss-oben) calc(var(--welle-hoehe) * .45),
    #d6e4f0 var(--welle-hoehe),
    #9fbad4 calc(var(--welle-hoehe) + 24px),
    #5f83a8 calc(var(--welle-hoehe) + 60px),
    #2b4a70 calc(var(--welle-hoehe) + 105px),
    #16304f calc(var(--welle-hoehe) + 170px),
    #0e2540 calc(var(--welle-hoehe) + 280px),
    #0a1c31 calc(var(--welle-hoehe) + 420px),
    var(--navy-deep) 100%);
}
footer.hat-welle::before{
  content:"";position:absolute;top:0;left:0;right:0;
  height:var(--welle-hoehe);
  background-image:var(--welle-bild,url('/assets/img/welle-weich.webp'));
  background-size:100% 100%;background-repeat:no-repeat;background-position:center top;
  pointer-events:none;
}
footer.hat-welle > .wrap{position:relative;z-index:1}
/* Die Fläche über der Welle übernimmt die Farbe des letzten Abschnitts
   davor, damit kein Farbstreifen zwischen Abschnitt und Wasserlinie entsteht.
   Weiß bleibt weiß: Abschluss (.final-seite), Kundenstimmen und Textseiten.
   Hellblau nur, wenn wirklich ein hellblauer Abschnitt den Schluss bildet. */
body:has(main > .seitenform:last-child) footer.hat-welle,
body:has(main > .kacheln:last-child) footer.hat-welle,
body:has(main > .check-abschnitt:last-child) footer.hat-welle,
body:has(main > .vergleich:last-child) footer.hat-welle,
body:has(main > .mold:last-child) footer.hat-welle{--fuss-oben:var(--sky-soft)}
body:has(main > .final-seite:last-child) footer.hat-welle,
body:has(main > .wall:last-child) footer.hat-welle{--fuss-oben:var(--card)}

/* Ablauf mit Symbolen auf den Leistungsseiten, dezent wie die Verfahrenskacheln */
.ablauf8{background:var(--bg)}
.ablauf8 .wrap{width:min(1180px,100% - 2.5rem)}
.ablauf8-kopf{text-align:center;margin:0 auto clamp(1.6rem,1.2rem + 1.5vw,2.4rem)}
.ablauf8-kopf h2{margin-inline:auto;max-width:30ch}
.ablauf8-kopf p{margin:.7rem auto 0;max-width:62ch;color:var(--ink-soft)}
.ablauf8-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;list-style:none;margin:0;padding:0}
.ablauf8-schritt{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.3rem 1.2rem 1.35rem;
  display:flex;flex-direction:column;align-items:center;text-align:center}
/* Nur das Symbol, mittig im hellen Kreis, keine Nummer */
.ablauf8-kopfzeile{display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
.ablauf8-nr{display:none}
.ablauf8-symbol{width:56px;height:56px;border-radius:50%;background:var(--sky);color:var(--blue);display:grid;place-items:center}
.ablauf8-symbol svg{width:26px;height:26px}
:root[data-theme="dark"] .ablauf8-symbol{background:#173453}
.ablauf8-schritt h3{font-size:1.02rem;line-height:1.25;margin:0 0 .45rem}
.ablauf8-schritt p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.5}
@media (max-width:900px){.ablauf8-liste{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ablauf8-liste{grid-template-columns:1fr;gap:.75rem}}
:root[data-theme="dark"] .ablauf8-nr{background:#173453;color:#7fc4ff}
:root[data-theme="dark"] .ablauf8-symbol{color:#7fc4ff}

/* Anfrageformular am Ende einer Unterseite */
.seitenform{background:var(--sky-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(2rem,1.6rem + 1.4vw,3rem)}
.seitenform h2{text-align:center;margin-inline:auto;max-width:26ch}
.seitenform .lead{text-align:center;margin:.8rem auto 0;max-width:62ch}
.sf{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem;margin-top:0;align-content:start;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.6rem}
.sf-voll{grid-column:1 / -1}
.sf-zeile{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.sf label{font-size:.9rem;font-weight:600;color:var(--ink)}
.sf input[type=text],.sf input[type=tel],.sf input[type=email],.sf select,.sf textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);
  padding:.6rem .75rem;font:inherit;font-size:.95rem}
.sf input:focus,.sf select:focus,.sf textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.sf input[type=text],.sf input[type=tel],.sf input[type=email],.sf select{height:44px}
.sf textarea{resize:vertical;min-height:80px}
.sf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sf label.sf-check,.sf-check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.72rem;line-height:1.2;color:#888888}
.sf-check span{font-weight:400;color:#888888}
.sf-check input{width:16px;height:16px;flex:none;margin-top:0;accent-color:var(--blue)}
.sf-check a{color:inherit;font-weight:400;text-decoration:underline;text-underline-offset:2px}
.sf-check a:hover{color:#666666}
.sf-aktion{display:flex;flex-direction:row;flex-wrap:wrap;gap:.7rem;
  align-items:center;justify-content:flex-start}
/* Beide Knöpfe gleich breit */
.sf-aktion .btn{min-width:13.5rem;justify-content:center;text-align:center}
@media (max-width:560px){.sf-aktion .btn{flex:1 1 100%;min-width:0}}
.sf-meldung{grid-column:1 / -1;margin:0;font-size:.92rem;min-height:1.2em}
.sf-meldung.ist-ok{color:#1c9b4b;font-weight:600}
.sf-meldung.ist-fehler{color:var(--red);font-weight:600}
@media (max-width:680px){.sf{grid-template-columns:1fr;padding:1.2rem}}

/* Foto im Kopfbereich, darüber ein dunkler Schleier für die Lesbarkeit */
.hero.hat-bild{isolation:isolate;
  padding-block:clamp(2.6rem,1.8rem + 4.2vw,6rem) clamp(2.6rem,1.8rem + 4.2vw,4.9rem);
  background-position:center}
.hero.hat-bild::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    /* dieselben blauen Lichtpunkte wie auf der Startseite */
    radial-gradient(1000px 560px at 80% 6%,rgba(120,195,255,.52),transparent 62%),
    radial-gradient(700px 420px at 92% 30%,rgba(70,155,225,.44),transparent 65%),
    radial-gradient(760px 440px at 8% 92%,rgba(70,155,225,.32),transparent 62%),
    linear-gradient(180deg,
      rgba(8,26,45,calc(var(--hero-schleier,.45) * 1.05)) 0%,
      rgba(8,26,45,calc(var(--hero-schleier,.45) * .82)) 45%,
      rgba(8,26,45,calc(var(--hero-schleier,.45) * 1.15)) 100%),
    var(--hero-bild);
  background-size:cover,cover,cover,cover,cover;
  background-position:center,center,center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
.hero.hat-bild > .wrap{position:relative;z-index:2}
.hero.hat-bild::before{z-index:1;opacity:.35}
@media (max-width:860px){
  /* Auf schmalen Bildschirmen etwas dunkler, die Schrift liegt enger am Bild */
  .hero.hat-bild::after{
    background-image:
      radial-gradient(700px 400px at 85% 8%,rgba(120,195,255,.40),transparent 62%),
      radial-gradient(600px 380px at 10% 92%,rgba(70,155,225,.30),transparent 62%),
      linear-gradient(180deg,
        rgba(8,26,45,calc(var(--hero-schleier,.45) * 1.3)) 0%,
        rgba(8,26,45,calc(var(--hero-schleier,.45) * 1.1)) 50%,
        rgba(8,26,45,calc(var(--hero-schleier,.45) * 1.35)) 100%),
      var(--hero-bild);
    background-size:cover,cover,cover,cover;
    background-position:center,center,center,center;
  }
}

/* Inhaltsblöcke: eigener Text und volle Breite */
.kachel-text > :first-child{margin-top:0}
.kachel-text > :last-child{margin-bottom:0}
.kachel-text p{font-size:.89rem;line-height:1.5;color:var(--ink-soft);max-width:none;margin:0 0 .6rem}
.kachel-text ul,.kachel-text ol{margin:0 0 .6rem 1.1rem;font-size:.89rem;color:var(--ink-soft)}
.kachel-text li{margin-bottom:.3rem}
.kachel-text h3,.kachel-text h4{font-size:.95rem;margin:.2rem 0 .4rem}
.kachel-text a{color:var(--blue);font-weight:600;text-decoration:underline}
.kachel-text img{max-width:100%;height:auto;border-radius:8px;display:block;margin:.4rem 0}
.kachel-text table{width:100%;border-collapse:collapse;font-size:.9rem}
.kachel-text td,.kachel-text th{border:1px solid var(--line);padding:.4rem .55rem;text-align:left}
.kachel-breit{grid-column:1 / -1}

/* Dunkelmodus: derselbe Verlauf, nur tiefer */
:root[data-theme="dark"] footer{
  background:linear-gradient(180deg,#0a1b2c 0%,#081524 40%,var(--navy-deep) 100%);
}
:root[data-theme="dark"] footer.hat-welle{
  /* Im Dunkelmodus wirkt die helle Wasserlinie wie ein Fremdkörper,
     deshalb bleibt hier nur ein ruhiger Verlauf. */
  padding-top:3.5rem;
  background:linear-gradient(180deg in oklab,
    #0f2136 0,
    #0c1b2c 40%,
    var(--navy-deep) 100%);
}
:root[data-theme="dark"] footer.hat-welle::before{display:none}
:root[data-theme="dark"] footer.hat-welle::after{display:none}

/* Formular mit schmalem Kontaktkasten daneben */
.sf-huelle{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(200px,.75fr);
  gap:1.2rem;margin-top:1.6rem;align-items:stretch}
.sf-huelle .sf{margin-top:0}
.sf-karte{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.1rem;
  display:flex;flex-direction:column;height:100%}
/* Das Foto bringt seinen runden Hintergrund selbst mit, deshalb nichts beschneiden */
.sf-foto{width:clamp(130px,62%,185px);height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0;display:block;
  margin:0 auto .9rem;max-height:none}
.sf-foto-leer{width:clamp(130px,62%,185px);aspect-ratio:1/1;border-radius:50%;margin:0 auto .9rem}
.sf-foto-leer{display:grid;place-items:center;background:linear-gradient(160deg,#17456f,#2b7fc4);color:#bcdcfa}
.sf-foto-leer svg{width:38%;height:auto}
/* Karte: ein Text in einer Farbe, nur die Beschriftungen in Blau */
.sf-karte{color:var(--ink)}
.sf-karte h3{font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;
  color:#1D6BB0;margin:0 0 .35rem}
.sf-name{font-weight:700;margin:0;font-size:.98rem;color:inherit}
.sf-rolle{color:inherit;font-size:.85rem;margin:.1rem 0 .8rem;line-height:1.4}
.sf-daten{margin:0 0 .9rem;font-size:.87rem;line-height:1.45;color:inherit}
.sf-karte .sf-wa{margin-top:auto}
.sf-daten dt{font-weight:800;color:#1D6BB0;font-size:.84rem;text-transform:uppercase;
  letter-spacing:.05em;margin-top:.55rem}
.sf-daten dd{margin:.05rem 0 0}
.sf-daten a{color:inherit;text-decoration:none;font-weight:400;word-break:break-word}
.sf-daten a:hover,.sf-daten a:focus-visible{text-decoration:underline;text-underline-offset:2px}
.sf-wa{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;
  background:#007e2e;color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;
  padding:.6rem .7rem;border-radius:8px;text-align:center;line-height:1.25}
.sf-wa:hover,.sf-wa:focus-visible{background:#00692e}
.sf-wa svg{width:18px;height:18px;flex:none}
@media (max-width:920px){
  .sf-huelle{grid-template-columns:1fr;align-items:start}
  /* Auf dem Handy steht die Karte nicht, dort zählt nur das Formular.
     Telefon und WhatsApp sind über die Kopfzeile und den Knopf erreichbar. */
  .sf-karte{display:none}
}

/* Fenster für Rechtstexte */
.recht-hinter{position:fixed;inset:0;z-index:130;background:rgba(7,22,39,.6);
  backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.recht-hinter[hidden]{display:none}
.recht-fenster{width:min(860px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.recht-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line)}
.recht-kopf h2{font-size:1.2rem;margin:0}
.recht-zu{background:none;border:0;font-size:1.8rem;line-height:1;cursor:pointer;color:var(--ink-soft);
  padding:0 .3rem}
.recht-zu:hover{color:var(--ink)}
.recht-inhalt{overflow:auto;padding:1.2rem 1.4rem;font-size:.94rem;line-height:1.55}
.recht-inhalt h1{font-size:1.25rem;margin:0 0 .8rem}
.recht-inhalt h2{font-size:1.05rem;margin:1.4rem 0 .5rem}
.recht-inhalt h3{font-size:.98rem;margin:1.1rem 0 .4rem}
.recht-inhalt p,.recht-inhalt li{max-width:none;color:var(--ink-soft)}
.recht-inhalt ul,.recht-inhalt ol{margin:0 0 1rem 1.2rem}
.recht-inhalt a{color:var(--blue)}
.recht-fuss{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end;
  padding:1rem 1.4rem;border-top:1px solid var(--line);background:var(--sky-soft)}
.recht-fuss .btn{font-size:.92rem}
@media (max-width:560px){
  .recht-hinter{padding:.7rem}
  .recht-fenster{max-height:92vh}
  .recht-fuss{justify-content:stretch}
  .recht-fuss .btn{flex:1 1 100%;text-align:center}
}

/* Einleitung ohne Bild: Text nutzt die volle Breite */
.intro-voll p{max-width:none;line-height:1.5}
.intro-voll h2{max-width:none}

/* Breite Blöcke: eigener Abschnitt auf weißem Grund, zwei Spalten */
.bloecke-weit{background:var(--bg)}
.weit-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem;align-items:start}
.weit h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.7rem);margin:0 0 .8rem}
.weit-text > :first-child{margin-top:0}
.weit-text > :last-child{margin-bottom:0}
.weit-text p{max-width:none;margin:0 0 .85rem;line-height:1.5;color:var(--ink-soft)}
.weit-text ul,.weit-text ol{margin:0 0 .85rem 1.3rem;line-height:1.48;color:var(--ink-soft)}
.weit-text li{margin-bottom:.38rem;padding-left:.15rem}
.weit-text ul{list-style:none;margin-left:0}
.weit-text ul li{position:relative;padding-left:1.7rem}
.weit-text ul li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2.2px solid var(--blue);border-bottom:2.2px solid var(--blue);
  transform:rotate(-45deg);
}
.weit-text ol{counter-reset:schritt;list-style:none;margin-left:0}
.weit-text ol li{position:relative;padding-left:2.1rem;counter-increment:schritt}
.weit-text ol li::before{
  content:counter(schritt);position:absolute;left:0;top:.05em;
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--sky);color:var(--navy);
  display:grid;place-items:center;font-size:.8rem;font-weight:700;
}
.weit-text a{color:var(--blue);font-weight:600}
@media (max-width:860px){.weit-raster{grid-template-columns:1fr;gap:2.2rem}}
.weit-raster.einspaltig{grid-template-columns:minmax(0,1fr)}
.weit-raster > .weit:last-child:nth-child(odd){grid-column:1 / -1}

/* Die ganze Leistungskarte ist klickbar: der untere Link wird unsichtbar
   über die Karte gespannt. Titel-Link bleibt eigenständig fokussierbar. */
.svc{position:relative}
.svc .svc-cta::after{content:"";position:absolute;inset:0;border-radius:inherit}
.svc:has(.svc-cta:hover){box-shadow:0 14px 34px -18px rgba(13,37,64,.35);transform:translateY(-2px)}
.svc{transition:box-shadow .18s,transform .18s}
.svc:has(.svc-cta:focus-visible){outline:2px solid var(--blue,#1c6bb0);outline-offset:2px}

/* Google Translate: eigenes Element und Google-Leiste unsichtbar, Seite bleibt an Ort und Stelle */
#rk-translate{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.goog-te-banner-frame,.skiptranslate iframe,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important;position:static!important}
.goog-text-highlight{background:transparent!important;box-shadow:none!important}
font[style]{background:transparent!important}

/* Grafik rechts neben dem Text im Kopfbereich einer Unterseite.
   Sie sitzt bündig an der Unterkante des Heros und zieht ihn nicht
   in die Höhe: das Bild endet dort, wo der blaue Bereich endet. */
.hero .wrap.hat-grafik{grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);align-items:end}
.hero-grafik{margin:0}
.hero .wrap > .hero-vorteile{grid-column:1/-1;margin-top:-.5rem}
/* Bild sitzt bündig an der Unterkante des gesamten Heros und macht ihn nicht
   höher: Es ist am Hero verankert, sein Platzhalter in der Spalte reserviert
   nur die Breite. */
.hero-seite.hat-grafik-bild{overflow:hidden}
/* Die Grafik ist an ihrer Rasterspalte verankert, nicht mehr am ganzen Hero.
   Sie darf nur so hoch werden wie Überschrift, Text und Knöpfe daneben und
   endet über der Zeile mit den drei Vorteilen, statt sie zu überdecken. */
.hero-grafik{position:relative;align-self:stretch;min-height:260px}
.hero-grafik img{position:absolute;right:0;bottom:0;
  width:auto;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:bottom right;z-index:0;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.35));pointer-events:none}
/* Text, Knöpfe und Aufzählung liegen über dem Foto */
.hero-seite.hat-grafik-bild .wrap > div,
.hero-seite.hat-grafik-bild .hero-vorteile{position:relative;z-index:2}
@media (max-width:1200px){.hero-grafik img{right:.6rem;max-width:92%}}
@media (max-width:900px){
  .hero .wrap.hat-grafik{grid-template-columns:1fr}
  .hero-grafik{min-height:0;align-self:auto;display:flex;justify-content:center;align-items:flex-end}
  .hero-grafik img{position:static;max-width:380px;max-height:none;margin:.5rem auto 0}
  .hero .wrap > .hero-vorteile{order:3}
}
/* Auf dem Handy die Hero-Grafik ausblenden */
@media (max-width:700px){
  .hero-grafik{display:none;min-height:0}
  .hero .wrap.hat-grafik{grid-template-columns:1fr}
}

/* Breite Fassung des Wasserschaden-Checks für Unterseiten */
.check-abschnitt{background:var(--sky-soft)}
.check-abschnitt .check-titel{justify-content:center}
/* Keine weiße Karte: der Check läuft als eigener Abschnitt über die volle Breite */
.check-breit{background:none;box-shadow:none;border-radius:0;padding:0;max-width:none;margin-inline:0}
.check-breit .check-titel{justify-content:center;text-align:left}
.check-breit .small,.check-breit .q,.check-breit .urgent{text-align:center;max-width:none;margin-inline:auto}
.check-breit .q{margin-top:.2rem}
/* Antworten nebeneinander: zwei Möglichkeiten je zur Hälfte, drei oder vier
   nebeneinander, damit die Reihe die Breite füllt */
.check-breit .opts{gap:.7rem}
.check-breit .opts[data-anzahl="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.check-breit .opts[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.check-breit .opts[data-anzahl="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.check-breit .opt{font-size:.95rem}
@media (max-width:860px){.check-breit .opts[data-anzahl]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.check-breit .opt{flex-direction:column;align-items:flex-start;justify-content:center;gap:.5rem;min-height:84px;position:relative;padding-right:2.2rem}
.check-breit .opt::after{position:absolute;right:1rem;top:50%;margin:0;transform:translateY(-50%) rotate(45deg)}
.check-breit .opt:hover::after{transform:translateY(-50%) rotate(45deg)}
.check-breit .result{max-width:720px;margin-inline:auto;text-align:center}
.check-breit .result .btn{margin-inline:auto}
.check-breit .urgent{text-align:center}
@media (max-width:640px){
  .check-breit .opts[data-anzahl]{grid-template-columns:1fr}
  .check-breit .opt{flex-direction:row;align-items:center;min-height:52px}
}

/* Google-Bewertungen, eigenes Design ohne fremde Schriften oder Logos */
.bew{background:var(--sky-soft)}
.bew-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.bew-kopf .sub{margin-top:.5rem}
.bew-schnitt{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.bew-schnitt strong{font-family:Outfit,sans-serif;font-size:2.1rem;line-height:1;color:var(--heading)}
.bew-schnitt small{color:var(--ink-soft);font-size:.85rem;width:100%}
.bew-sterne{display:inline-flex;gap:2px}
.bew-sterne svg{width:17px;height:17px;display:block}
.bew-sterne .voll svg{fill:#f5a524}
.bew-sterne .leer svg{fill:#d8dee5}
.bew-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:2rem}
.bew-karte{margin:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.2rem;
  display:flex;flex-direction:column;gap:.7rem}
.bew-oben{display:flex;align-items:center;gap:.7rem}
.bew-kreis{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--sky);color:var(--blue-dark);font-family:Outfit,sans-serif;font-weight:700}
.bew-oben b{display:block;font-size:.95rem;color:var(--heading)}
.bew-oben small{color:var(--ink-soft);font-size:.8rem}
.bew-karte blockquote{margin:0;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}
.bew-fuss{margin-top:1.4rem;font-size:.88rem;color:var(--ink-soft)}
.bew-fuss a{color:var(--blue);font-weight:600}
@media (max-width:980px){.bew-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bew-liste{grid-template-columns:1fr}}

/* Eingebettete Kundenbewertungen von Feedspace */
.bewertungen-einbettung{margin-top:1.6rem;min-height:120px}
.bewertungen-einbettung .bew-hinweis{background:var(--sky-soft);border:1px solid var(--line);border-radius:10px;padding:1.2rem}
.bewertungen-einbettung .bew-hinweis p{margin:0 0 .9rem;font-size:.93rem;color:var(--ink-soft)}

/* Bild auf der Seite Über uns */
.ueber-bild{margin:1.6rem 0 2rem}
.ueber-bild img{width:100%;max-width:520px;height:auto;display:block;border-radius:10px}

/* Die Sprechblase des Hilfe-Knopfs folgt dem Hell-Dunkel-Schalter der Seite, auch am Handy */

/* Handy: der runde Knopf unten rechts dunkelblau mit weißem Symbol */
@media (max-width:860px){
  .wa-knopf{background:#0D2540;color:#fff;box-shadow:0 8px 24px -6px rgba(0,0,0,.55)}
  .wa-knopf:hover,.wa-knopf:focus-visible{background:#1D6BB0}
}

/* Handy: Popup-Formular kompakter, damit der Absendeknopf ohne Scrollen zu sehen ist */
@media (max-width:860px){
  .exit-right{padding:1rem 1rem 1.2rem;padding-top:2.9rem}
  .exit-right h3{font-size:1.1rem;margin-bottom:.15rem}
  .exit-right .hint{font-size:.8rem;margin-bottom:.6rem}
  .exit-right .field{margin-bottom:.45rem}
  .exit-right .field label{font-size:.78rem;margin-bottom:.15rem}
  .exit-right .field input,.exit-right .field select{height:38px;padding:.4rem .65rem;font-size:.9rem}
  .exit-right .field textarea{min-height:56px;padding:.45rem .65rem;font-size:.9rem}
  .exit-right .consent{font-size:.66rem;line-height:1.15;margin:.4rem 0 .6rem;gap:.45rem}
  .exit-right .consent input{width:16px;height:16px;margin-top:.05rem}
  .exit-right .btn-block{padding:.75rem 1rem}
  .exit-close{width:32px;height:32px;margin:.5rem .5rem -2.6rem 0}
  .exit-close svg{width:15px;height:15px}
}

/* Nachbarbezirke auf Bezirksseiten */
.nachbarn{background:var(--bg);text-align:center}
.nachbarn .sub{max-width:62ch;margin-inline:auto}
.nachbarn .bezirke{justify-content:center;margin-top:1.4rem;padding-left:0}

/* Vergleichstabelle der Verfahren */
.vergleich{background:var(--sky-soft)}
.vergleich .sub{max-width:62ch}
.tabelle-scroll{overflow-x:auto;margin-top:1.6rem;-webkit-overflow-scrolling:touch}
.vergleich-tabelle{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.9rem;line-height:1.45}
.vergleich-tabelle th,.vergleich-tabelle td{padding:.75rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.vergleich-tabelle thead th{background:var(--navy);color:#fff;font-family:Outfit,sans-serif;font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:0}
.vergleich-tabelle tbody th{font-weight:700;color:var(--heading);white-space:nowrap}
.vergleich-tabelle tbody th a{color:var(--blue);text-decoration:none}
.vergleich-tabelle tbody th a:hover{text-decoration:underline}
.vergleich-tabelle tbody tr:last-child th,.vergleich-tabelle tbody tr:last-child td{border-bottom:0}
.vergleich-tabelle tr.ist-aktuell th,.vergleich-tabelle tr.ist-aktuell td{background:#e8f1fa}
.vergleich-tabelle td{color:var(--ink-soft)}
:root[data-theme="dark"] .vergleich-tabelle tr.ist-aktuell th,:root[data-theme="dark"] .vergleich-tabelle tr.ist-aktuell td{background:#173453}

/* Regionen unter der Bezirksliste: drei kräftige Knöpfe */
.regionen{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin:1.6rem auto 1.8rem}
.regionen a{display:inline-block;padding:.7rem 1.3rem;border-radius:999px;background:var(--navy);color:#fff;
  font-weight:700;text-decoration:none;font-family:Outfit,sans-serif}
.regionen a:hover{background:#1D6BB0}
.local .btn{margin-top:0}

/* Feedspace Wall of Love */
/* Bewertungen: schmaler Abstand, höchstens 70 Pixel oben und unten */
.wall{background:var(--card);padding-block:30px}
@media (max-width:860px){.wall{padding-block:22px}}
/* Sichtbarer Abstand rund 60px: die Wall selbst schmal, und die direkt
   angrenzenden Abschnitte geben auf der Wall-Seite ihren Abstand ab. */
section:has(+ .wall){padding-bottom:30px}
.wall + *:not(script):not(template){}
section.wall ~ section:first-of-type{}
@media (max-width:860px){section:has(+ .wall){padding-bottom:22px}}
.wall h2{margin-bottom:1.2rem}
.wall h2{text-align:center}
.wall-einbettung{min-height:60px}
.wall .bew-hinweis{max-width:520px;margin:0 auto;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.4rem}
.wall .bew-hinweis p{color:var(--ink-soft);font-size:.92rem;margin:0 0 1rem}

/* Abschnitt "Seiten zu einzelnen Gebieten" zentriert */
.gebiete-liste{text-align:center}
.gebiete-liste .bezirke{justify-content:center;padding-left:0}

/* Abschluss: rechter Knopf in kräftigem Blau mit weißer Schrift, Start- wie Unterseiten */
.final .actions .btn-dark{background:#0d3f70;color:#fff}
.final .actions .btn-dark:hover,.final .actions .btn-dark:focus-visible{background:#0a3159;color:#fff}
.final .actions .btn-dark svg{color:#fff}

/* Abschnitt direkt nach der Wall (Skripte dazwischen ignoriert) */
.wall ~ section:first-of-type{padding-top:18px}
@media (max-width:860px){.wall ~ section:first-of-type{padding-top:14px}}

/* Feldbezogene Fehlermeldung, z. B. Telefonnummer */
.sf-feldfehler{margin:.35rem 0 0;font-size:.85rem;color:var(--red);font-weight:500}
.sf input.ist-fehler,#exitForm input.ist-fehler{border-color:var(--red);box-shadow:0 0 0 2px rgba(200,23,29,.15)}

/* Zwei Hero-Knöpfe auf den Landingpages: fester Farbwert je Knopf, weiße Schrift */
.hero-actions-zwei .btn-hero-1{background:#0D2540;color:#fff;border:1px solid rgba(255,255,255,.14)}
.hero-actions-zwei .btn-hero-1:hover,.hero-actions-zwei .btn-hero-1:focus-visible{background:#081a30;color:#fff}
.hero-actions-zwei .btn-hero-2{background:#1D6BB0;color:#fff;border:1px solid rgba(255,255,255,.14)}
.hero-actions-zwei .btn-hero-2:hover,.hero-actions-zwei .btn-hero-2:focus-visible{background:#17588f;color:#fff}

/* Kundenbewertungen: Kopf zentriert, das Widget selbst bleibt linksbündig */
.rechtstext-zentriert > .wrap{text-align:center;padding-top:35px;padding-bottom:80px}
.rechtstext-zentriert > .wrap h1{font-family:Outfit,Inter,sans-serif;text-transform:uppercase;
  font-size:clamp(2rem,1.4rem + 2.6vw,3.5rem);line-height:1.1;font-weight:700;letter-spacing:.01em;
  color:var(--navy);margin:12px 0 16px;text-align:center}
.rechtstext-zentriert > .wrap .lead{max-width:1000px;margin:0 auto 45px;font-size:20px;line-height:1.5;text-align:center}
.rechtstext-zentriert > .wrap .zurueck{display:inline-block;margin-bottom:10px}
.rechtstext-zentriert .bewertungen-einbettung{text-align:left}
@media (max-width:768px){
  .rechtstext-zentriert > .wrap{padding-top:22px;padding-bottom:60px}
  .rechtstext-zentriert > .wrap h1{font-size:32px}
  .rechtstext-zentriert > .wrap .lead{font-size:18px;margin-bottom:35px}
}

/* Nur auf der Startseite, nur in der ersten Frage: zweiter Antwortknopf hellblau.
   Der schmale Check der Startseite hat KEINE Klasse check-breit, die
   Bezirksseiten schon. So bleibt es auf die Startseite beschränkt. */
.check:not(.check-breit) .step[data-step="1"] .opts .opt:nth-child(2){background:#E6F0F9}
.check:not(.check-breit) .step[data-step="1"] .opts .opt:nth-child(2):hover{background:#d8e8f6}
:root[data-theme="dark"] .check:not(.check-breit) .step[data-step="1"] .opts .opt:nth-child(2){background:#173453}

/* Bewerten-Knopf unter der Bewertungswand: knapper Abstand, zentriert */
.bewertung-abgeben{margin-top:18px;text-align:center}

/* Autorenzeile unter dem Inhalt der Landingpages */
.autorzeile{padding:0 0 1.2rem}
.autorzeile p{margin:0;font-size:.86rem;color:var(--ink-soft);text-align:center;max-width:none}
.autorzeile a{color:var(--blue);text-decoration:none}
.autorzeile a:hover{text-decoration:underline}

/* Bezirkstabelle auf der Wien-Seite */
.gebiete-liste .tabelle-scroll{margin-top:1.4rem}
.bezirkstabelle td:nth-child(2),.bezirkstabelle td:nth-child(3){white-space:nowrap}