@font-face{font-family:Barlow;font-style:normal;
font-weight:400;font-display:swap;
src:url("../fonts/barlow-400.woff2") format("woff2")}
@font-face{font-family:Barlow;font-style:normal;
font-weight:500;font-display:swap;
src:url("../fonts/barlow-500.woff2") format("woff2")}
@font-face{font-family:Barlow;font-style:normal;
font-weight:600;font-display:swap;
src:url("../fonts/barlow-600.woff2") format("woff2")}
@font-face{font-family:Barlow;font-style:normal;
font-weight:800;font-display:swap;
src:url("../fonts/barlow-800.woff2") format("woff2")}
@font-face{font-family:Barlow;font-style:italic;
font-weight:500;font-display:swap;
src:url("../fonts/barlow-500i.woff2") format("woff2")}
/* --- Hausschrift: Barlow, selbst gehostet. Systemschriften bleiben als
       Rueckfallebene stehen, falls eine Datei fehlt. --- */
body,button,input,textarea,select{font-family:Barlow,-apple-system,
BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3,h4,.btn,.logo{font-family:Barlow,inherit}
h1,h2{letter-spacing:-.018em}

:root{
  --navy:#0F2E4C; --navy-d:#0A2038; --navy-l:#1B4470;
  --orange:#F26722; --orange-d:#D9541A;
  --hell:#F5F8FB; --hell2:#EDF3F8;
  --tinte:#16232F; --grau:#5C6B7A; --linie:#DCE5ED; --weiss:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinte);line-height:1.65;background:#fff;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
@media(max-width:480px){.wrap{padding:0 18px}}
a,p,li,h1,h2,h3{overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}

/* ---------- Topbar ---------- */
.topbar{background:var(--navy-d);color:#9FB4C8;font-size:.86rem}
.tb{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:9px 0;flex-wrap:wrap}
.tb-claim{letter-spacing:.02em}
.tb-tels{display:flex;align-items:center;gap:18px}
.tb-tels a{display:flex;align-items:center;gap:9px;color:#fff;transition:opacity .15s}
.tb-tels a:hover{opacity:.8}
.tb-tels svg{width:17px;height:17px;color:var(--orange);flex-shrink:0}
.tb-tels small{display:block;font-size:.7rem;color:#9FB4C8;line-height:1.2;letter-spacing:.05em;text-transform:uppercase}
.tb-tels b{display:block;font-size:.98rem;line-height:1.25;font-weight:800}
.tb-sep{width:1px;height:26px;background:rgba(255,255,255,.18)}
@media(max-width:820px){.tb-claim{display:none}.tb{justify-content:center}}
@media(max-width:460px){.tb-tels{gap:10px}.tb-tels b{font-size:.86rem}.tb-tels small{font-size:.64rem}
  .tb-tels svg{width:15px;height:15px}.tb{padding:8px 0}}
@media(max-width:340px){.tb-tels{flex-direction:column;gap:8px}.tb-sep{display:none}}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--linie)}
header.navopen .logo,header.navopen .headbtn{opacity:.35}
.logo,.headbtn{transition:opacity .25s}
@media(min-width:981px){header{background:rgba(255,255,255,.98);backdrop-filter:blur(10px)}}
.headin{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.logo{display:flex;align-items:center;gap:13px}
.logo svg{height:48px;width:auto;flex-shrink:0}
header .nav{display:flex;align-items:center;gap:28px}
header .nav a{font-size:.96rem;font-weight:600;color:var(--tinte);padding:6px 0;border-bottom:2px solid transparent}
header .nav a:hover{border-bottom-color:var(--orange)}
.headbtn{flex-shrink:0}
/* Burger */
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.burger span{display:block;width:26px;height:2.6px;background:var(--navy);border-radius:2px;
  transition:transform .25s,opacity .2s}
.burger span+span{margin-top:6px}
.burger.open span:nth-child(1){transform:translateY(8.6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-8.6px) rotate(-45deg)}
@media(max-width:980px){
  /* backdrop-filter/transform am Header würde position:fixed der Navigation brechen */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;filter:none;transform:none}

  /* Burger sichtbar */
  .burger{display:block;position:relative;z-index:110}

  /* Menü-Panel */
  .nav{
    position:fixed;
    top:0; right:0;
    width:min(330px,86vw);
    height:100vh;
    height:100dvh;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:0;
    margin:0;
    z-index:100;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:-10px 0 40px rgba(15,46,76,.22);
    visibility:hidden;
    opacity:0;
    transform:translateX(18px);
    transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s,visibility .3s;
  }
  .nav.open{visibility:visible;opacity:1;transform:translateX(0)}

  /* Kopfzeile */
  .nav::before{
    content:"Menü";
    flex:0 0 auto;
    padding:24px 22px 16px;
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--grau);
    background:var(--hell);
    border-bottom:1px solid var(--linie);
  }

  /* Menüpunkte */
  .nav a{
    flex:0 0 auto;
    display:block;
    width:100%;
    padding:17px 22px;
    border:0;
    border-bottom:1px solid var(--linie);
    font-size:1.04rem;
    font-weight:600;
    color:var(--tinte);
    background:#fff;
    text-align:left;
  }
  .nav a:active{background:var(--hell);color:var(--orange)}

  /* letzter Punkt als Button */
  .nav a:last-child{
    margin:20px 22px 24px;
    width:auto;
    padding:15px 20px;
    background:var(--orange);
    color:#fff;
    border:0;
    border-radius:8px;
    text-align:center;
    font-weight:700;
  }

  .headbtn{display:none !important}
  .headin{padding:12px 0}
  .logo svg{height:42px}

  /* Abdunkelung */
  .navback{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    background:rgba(15,35,55,.55);
    opacity:0;
    pointer-events:none;
    transition:opacity .28s;
    z-index:80;
  }
  .navback.open{opacity:1;pointer-events:auto}
}


.btn{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;
  padding:15px 30px;border-radius:6px;font-weight:700;font-size:1rem;border:0;cursor:pointer;
  transition:transform .14s,background .14s;box-shadow:0 4px 14px rgba(242,103,34,.32)}
.btn:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-o{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:none}
.btn-o:hover{background:rgba(255,255,255,.14)}
.btn-navy{background:var(--navy);box-shadow:0 4px 14px rgba(15,46,76,.25)}
.btn-navy:hover{background:var(--navy-l)}
.btn-sm{padding:11px 22px;font-size:.93rem}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}

.hg{position:relative;z-index:2;padding:76px 0 84px}
.herotext{max-width:720px}
.hero h1{font-size:clamp(2rem,4.4vw,3.15rem);line-height:1.1;font-weight:800;letter-spacing:-.025em;margin-bottom:18px}
.hero h1 span{color:var(--orange)}
.hero .lead{font-size:1.13rem;opacity:.92;margin-bottom:26px;max-width:54ch}
.usp{display:grid;gap:11px;margin-bottom:30px}
.usp li{display:flex;gap:11px;align-items:flex-start;list-style:none;font-size:1rem}
.usp svg{width:21px;height:21px;flex-shrink:0;margin-top:3px;fill:none;stroke:var(--orange);
  stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.hcta{display:flex;flex-wrap:wrap;gap:13px;align-items:center}
/* Panorama-Band unter dem Hero */
.panorama{position:relative;overflow:hidden;background:var(--navy-d);max-width:100%;
  height:clamp(190px,26vw,340px);margin:0}
.panorama img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.panorama::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,46,76,.22),transparent 38%,rgba(15,46,76,.12))}

/* Vertrauensleiste */
.trustbar{background:var(--hell2);border-bottom:1px solid var(--linie)}
.tbg{display:grid;gap:20px;padding:26px 0;text-align:center}
@media(min-width:700px){.tbg{grid-template-columns:repeat(4,1fr)}}
.tbg .n{font-size:1.6rem;font-weight:800;color:var(--navy);line-height:1.15;overflow-wrap:break-word}
@media(max-width:420px){.tbg .n{font-size:1.3rem}}
.tbg .t{font-size:.86rem;color:var(--grau);font-weight:600}

/* ---------- Sektionen ---------- */
section{padding:76px 0}
section.alt{background:var(--hell)}
.center{text-align:center}
.kicker{color:var(--orange);font-weight:800;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:10px}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem);font-weight:800;letter-spacing:-.02em;margin-bottom:14px;line-height:1.2}
.sub{color:var(--grau);font-size:1.05rem;max-width:64ch;margin:0 auto 46px}
h3{font-size:1.16rem;font-weight:700;margin-bottom:8px}

/* Leistungen */
.cards{display:grid;gap:24px}
@media(min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:30px 28px;
  transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:0 14px 40px rgba(15,46,76,.11);transform:translateY(-3px);border-color:#C9D8E6}
.card .ico{width:54px;height:54px;border-radius:11px;background:linear-gradient(135deg,#E8F0F7,#DCE8F3);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .ico svg{width:27px;height:27px;fill:none;stroke:var(--navy);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--grau);font-size:.96rem}

/* Ablauf */
.steps{display:grid;gap:30px;position:relative}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}
 .steps::before{content:"";position:absolute;top:26px;left:12%;right:12%;height:2px;
   background:linear-gradient(90deg,var(--orange),#F9A87A);z-index:0}}
.step{position:relative;z-index:1;text-align:center}
.step .num{width:54px;height:54px;border-radius:50%;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;
  margin:0 auto 16px;border:5px solid var(--hell);box-shadow:0 4px 12px rgba(242,103,34,.3)}
section:not(.alt) .step .num{border-color:#fff}
.step p{color:var(--grau);font-size:.95rem}

/* Split */
.split{display:grid;gap:52px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.splitimg{border-radius:14px;overflow:hidden;box-shadow:0 16px 44px rgba(15,46,76,.14);
  aspect-ratio:1/1;background:var(--hell2)}
.splitimg img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:899px){.splitimg{aspect-ratio:4/3}}
.checks{display:grid;gap:13px;margin:22px 0 28px}
.checks li{display:flex;gap:12px;align-items:flex-start;list-style:none}
.checks svg{width:22px;height:22px;flex-shrink:0;margin-top:2px;fill:none;stroke:var(--orange);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.checks b{display:block;margin-bottom:2px}
.checks span{color:var(--grau);font-size:.95rem}

/* Standorte */
.orte{display:grid;gap:22px}
@media(min-width:640px){.orte{grid-template-columns:repeat(2,1fr)}}
.orte2{max-width:720px;margin:0 auto}
.gebiet{max-width:760px;margin:32px auto 0;text-align:center;color:var(--grau);font-size:1rem}
.gebiet b{color:var(--tinte)}
.ort{background:var(--hell);border:1px solid var(--linie);border-radius:12px;padding:26px;text-align:center;
  transition:border-color .18s,box-shadow .18s}
.ort:hover{border-color:var(--orange);box-shadow:0 10px 30px rgba(242,103,34,.13)}
.ort svg{width:32px;height:32px;margin:0 auto 12px;fill:none;stroke:var(--orange);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ort h3{margin-bottom:5px}
.ort p{font-size:.92rem;color:var(--grau)}
.ort p a{color:var(--navy);font-weight:800}

/* Karten */
.maps{display:grid;gap:26px;margin-top:44px}
@media(min-width:860px){.maps{grid-template-columns:repeat(2,1fr)}}
.mapcard{background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:hidden;
  box-shadow:0 6px 22px rgba(15,46,76,.07)}
.maphead{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--linie)}
.maphead .pin{width:42px;height:42px;border-radius:10px;background:#FDEFE7;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.maphead .pin svg{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.maphead h3{margin-bottom:2px}
.maphead p{font-size:.9rem;color:var(--grau);margin:0}
.maphead a{font-weight:800;color:var(--navy)}
.mapframe{height:300px}
.mapframe iframe{width:100%;height:100%;border:0;display:block}
.mapfoot{padding:15px 24px;background:var(--hell);font-size:.9rem;display:flex;
  justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mapfoot a{color:var(--orange);font-weight:700}

/* Bewertungen */
.stars{color:#FFB020;letter-spacing:.14em}
.rhead{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:42px}
.rhead .stars{font-size:2.1rem}
.reviews{display:grid;gap:24px}
@media(min-width:820px){.reviews{grid-template-columns:repeat(3,1fr)}}
.rev{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:28px;position:relative}
.rev::after{content:"\201C";position:absolute;top:8px;right:22px;font-size:4.6rem;line-height:1;
  color:var(--hell2);font-family:Georgia,serif}
.rev .stars{font-size:1.1rem;display:block;margin-bottom:14px;position:relative;z-index:1}
.rev p{font-size:.96rem;margin-bottom:18px;position:relative;z-index:1}
.rev .m{font-size:.86rem;color:var(--grau);font-weight:700;padding-top:14px;border-top:1px solid var(--linie)}

/* Angebotsblock */
.offer{background:linear-gradient(135deg,var(--navy),var(--navy-l));color:#fff;border-radius:16px;
  padding:52px 44px;display:grid;gap:38px;align-items:center;box-shadow:0 20px 54px rgba(15,46,76,.28)}
@media(max-width:560px){.offer{padding:34px 22px;border-radius:12px}
  .offerbox{padding:20px 18px}}
@media(min-width:900px){.offer{grid-template-columns:1.15fr .85fr}}
.offer h2{margin-bottom:12px}
.offer p{opacity:.93;margin-bottom:22px}
.offerbox{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:28px}
.offerbox .row{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.14)}
.offerbox .row:last-child{border-bottom:0}
.offerbox svg{width:20px;height:20px;flex-shrink:0;margin-top:3px;fill:none;stroke:var(--orange);
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.offerbox .lbl{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  opacity:.72;font-weight:700}
.offerbox a{color:#fff;font-weight:800;font-size:1.08rem}

/* FAQ */
.faq{max-width:880px;margin:0 auto}
details{background:#fff;border:1px solid var(--linie);border-radius:10px;margin-bottom:13px;overflow:hidden}
summary{cursor:pointer;padding:22px 58px 22px 26px;font-weight:700;font-size:1.03rem;
  list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:26px;top:50%;width:11px;height:11px;
  border-right:2.6px solid var(--orange);border-bottom:2.6px solid var(--orange);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details p{padding:0 26px 24px;color:var(--grau);font-size:.97rem}

/* CTA-Band */
.band{background:var(--orange);color:#fff;text-align:center;padding:64px 0}
.band h2{margin-bottom:12px}
.band p{opacity:.96;margin-bottom:28px;font-size:1.08rem}
.band .btn{background:#fff;color:var(--orange-d);box-shadow:0 4px 16px rgba(0,0,0,.16)}
.band .btn:hover{background:var(--hell)}

/* Footer */
footer{background:var(--navy-d);color:#94A9BE;padding:56px 0 32px;font-size:.92rem}
.fg{display:grid;gap:34px;margin-bottom:34px}
@media(min-width:800px){.fg{grid-template-columns:1.5fr 1fr 1fr 1.1fr}}
footer h4{color:#fff;font-size:.98rem;margin-bottom:14px}
footer a{color:#94A9BE}
footer a:hover{color:#fff}
footer ul{list-style:none}
footer li{margin-bottom:8px}
.fbot{border-top:1px solid rgba(255,255,255,.13);padding-top:22px;display:flex;flex-wrap:wrap;
  gap:16px;justify-content:space-between;font-size:.85rem}

/* Sticky-Kontaktleiste */
.sticky{position:fixed;bottom:0;left:0;right:0;width:100%;z-index:70;background:#fff;
  border-top:1px solid var(--linie);padding:9px 12px;display:flex;gap:9px;
  box-shadow:0 -4px 20px rgba(15,46,76,.13)}
.sticky a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 4px;border-radius:8px;font-size:.76rem;font-weight:700;
  color:#fff;transition:filter .15s}
.sticky a:hover{filter:brightness(.93)}
.sticky svg{width:21px;height:21px}
.s-tel{background:#1878C8}
.s-wa{background:#25D366}
.s-mail{background:var(--orange)}
body{padding-bottom:74px}
@media(max-width:360px){.sticky a{font-size:.68rem}.sticky{gap:6px;padding:8px}}
/* Desktop: Kontaktknöpfe dauerhaft sichtbar, unten rechts */
@media(min-width:820px){
  .sticky{left:auto;right:24px;bottom:24px;top:auto;width:auto;flex-direction:column;
    align-items:flex-end;gap:11px;padding:0;background:none;border:0;box-shadow:none}
  .sticky a{flex:none;width:56px;height:56px;flex-direction:row;padding:0;border-radius:50%;
    font-size:0;box-shadow:0 6px 22px rgba(15,46,76,.26);position:relative;
    transition:transform .16s,filter .16s,width .22s}
  .sticky a:hover{transform:translateX(-2px)}
  .sticky svg{width:24px;height:24px}
  /* Beschriftung erscheint beim Überfahren */
  .sticky a::after{content:attr(data-label);position:absolute;right:66px;top:50%;
    transform:translateY(-50%) translateX(6px);background:var(--navy-d);color:#fff;
    padding:8px 14px;border-radius:6px;font-size:.85rem;font-weight:700;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
    box-shadow:0 4px 14px rgba(0,0,0,.2)}
  .sticky a:hover::after{opacity:1;transform:translateY(-50%)}
  body{padding-bottom:0}
}
.fab{display:none}

/* --- Google-Bewertungen --- */
.gbewertung{display:grid;gap:16px;align-items:center;background:#fff;
border:1px solid var(--linie);border-radius:14px;
padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,28px);
box-shadow:0 10px 30px rgba(15,46,76,.07)}
@media(min-width:820px){.gbewertung{grid-template-columns:auto 1fr auto;
gap:22px}}
.gsterne{display:flex;gap:3px}
.gsterne svg{width:21px;height:21px;fill:#F5A623}
.gtext{line-height:1.35;color:var(--navy);font-size:1.02rem}
.gtext b{font-size:1.12rem}
.gtext span{display:block;color:var(--grau);font-size:.86rem;margin-top:3px}
.glinks{display:flex;gap:10px;flex-wrap:wrap}
.glinks .btn{padding:11px 16px;font-size:.9rem}
@media(max-width:520px){.glinks .btn{flex:1 1 100%;justify-content:center;
text-align:center}}
.gbewertung.kompakt{margin-top:clamp(22px,2.6vw,30px)}

/* Einzelne Bewertungen */
.gliste{display:grid;gap:16px;margin-top:16px}
@media(min-width:900px){.gliste{grid-template-columns:repeat(3,1fr)}}
.gkarte{background:#fff;border:1px solid var(--linie);border-radius:14px;
padding:22px 22px 20px;box-shadow:0 8px 24px rgba(15,46,76,.06);
display:flex;flex-direction:column}
.gkopf{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.gavatar{width:38px;height:38px;border-radius:50%;background:var(--hell2);
display:flex;align-items:center;justify-content:center;font-weight:800;
color:var(--navy);font-size:.95rem;flex-shrink:0}
.gname{font-weight:700;color:var(--navy);font-size:.95rem;line-height:1.25}
.gname span{display:block;font-weight:500;color:var(--grau);font-size:.8rem}
.gkarte .gsterne svg{width:15px;height:15px}
.gkarte .gsterne{margin-bottom:9px}
.gsterne .leer{fill:#D7DEE6}
.gzitat{margin:0;color:var(--tinte);font-size:.94rem;line-height:1.55}
.gquelle{margin-top:14px;font-size:.78rem;color:var(--grau)}
.gquelle a{color:var(--grau);text-decoration:underline}

/* --- Faktenkasten --- */
.fakten{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--linie)}
.fakten > div{display:grid;gap:4px;padding:15px 0;
border-bottom:1px solid var(--linie)}
@media(min-width:720px){.fakten > div{grid-template-columns:230px 1fr;
gap:24px;align-items:baseline}}
.fakten dt{font-weight:700;color:var(--navy);font-size:.95rem}
.fakten dd{margin:0;color:var(--grau)}

/* --- Navigation mit Untermenues --- */
.navpunkt{position:relative;display:flex;align-items:center}
.navclose{display:none}
.navpunkt > a::after{content:"";display:inline-block;width:6px;height:6px;
margin-left:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-2px);opacity:.55}
@media(min-width:981px){
  .navpunkt::after{content:"";position:absolute;left:0;right:0;top:100%;
  height:16px}
  .unter{position:absolute;top:calc(100% + 14px);left:-18px;background:#fff;
  border:1px solid var(--linie);border-top:3px solid var(--orange);
  border-radius:10px;padding:8px;display:grid;gap:1px;
  box-shadow:0 18px 40px rgba(15,46,76,.15);opacity:0;visibility:hidden;
  transform:translateY(5px);transition:.16s ease;z-index:80}
  .navpunkt:hover .unter,.navpunkt:focus-within .unter{opacity:1;
  visibility:visible;transform:translateY(0)}
  .unter a{display:block;padding:8px 14px;border:0;border-radius:7px;
  font-size:.88rem;font-weight:600;white-space:nowrap;color:var(--tinte)}
  .unter a:hover{background:var(--hell2);color:var(--navy)}
  /* Zwölf Orte in zwei Spalten - sonst reicht das Menü bis unter den Hero */
  .unter.zwei{grid-template-columns:repeat(2,minmax(146px,1fr));gap:1px 4px}
}
@media(max-width:980px){
  .navpunkt{display:block;width:100%}
  .navpunkt > a::after{float:right;margin-top:7px}
  .unter{display:block;background:var(--hell2)}
  .unter a{padding-left:38px;font-size:.94rem}
}

/* --- Anfrageformular --- */
.formular{display:grid;gap:16px;margin-top:8px}
@media(min-width:760px){.formular{grid-template-columns:1fr 1fr}
.formular .voll{grid-column:1/-1}}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font-size:.86rem;font-weight:600;color:var(--navy)}
.feld input,.feld textarea,.feld select{font:inherit;padding:13px 14px;
border:1px solid var(--linie);border-radius:10px;background:#fff;color:var(--tinte)}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:0;
border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,103,34,.18)}
.feld textarea{min-height:130px;resize:vertical}
.zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;
color:var(--grau)}
.zustimmung input{margin-top:3px;width:18px;height:18px;flex:0 0 18px}
.honig{position:absolute;left:-9999px}
.hinweisbox{padding:16px 18px;border-radius:10px;margin-bottom:18px;font-weight:600}
.hinweisbox.ok{background:#E8F5EC;color:#1C6B37}
.hinweisbox.fehler{background:#FDECE6;color:#A83A12}

/* --- Lkw-Band: festes Seitenverhaeltnis je Breite, deshalb wird nie
       beschnitten oder verzerrt. Zwei Bildzuschnitte je Breite. --- */
/* Die beiden Hero-Spalten waren mittig ausgerichtet. Da die Bildspalte
   kuerzer ist als der Text, standen Bild und Text versetzt und unter dem
   Bild blieb eine leere blaue Flaeche. Jetzt spannt das Bild ueber die
   volle Hoehe, oben und unten buendig mit dem Text. */
.heroraster{display:grid;gap:38px;align-items:center}
.herobild{min-width:0}
@media(min-width:1000px){
  .heroraster{grid-template-columns:1.05fr .95fr;gap:54px;align-items:stretch}
  .herotext{max-width:none;align-self:center}
  .herobild{display:flex}
  /* Mit dem Elternselektor davor, sonst gewinnt die allgemeine
     .panorama-Regel weiter unten im Stylesheet. */
  .heroraster .panorama{height:100%;aspect-ratio:auto;min-height:360px;
  width:100%}
  .heroraster .panorama picture,.heroraster .panorama picture img{height:100%}
}
.panorama{position:relative;overflow:hidden;background:var(--navy-d);
border-radius:16px;height:auto;aspect-ratio:3/2;margin:0;
box-shadow:0 22px 54px rgba(10,32,56,.42)}
.panorama picture{display:block;width:100%;height:100%}
.panorama picture img{display:block;width:100%;height:100%;object-fit:cover;
object-position:center}
.panorama::after{display:none}
@media(max-width:759px){.panorama{border-radius:12px}}

/* --- Kontaktpunkt in der Seitenmitte --- */
.zcta{padding:0}
.zcta-box{background:var(--navy);color:#fff;border-radius:16px;padding:34px 32px;
display:grid;gap:22px;align-items:center}
@media(min-width:860px){.zcta-box{grid-template-columns:1fr auto;gap:40px;
padding:38px 44px}}
.zcta-box h2{color:#fff;margin-bottom:8px}
.zcta-box p{color:#AFC4D8;max-width:56ch}
.zcta-box .hcta{margin:0}
.zcta-box .btn-o{border-color:rgba(255,255,255,.5);color:#fff}

/* --- Kurzprofil des Ansprechpartners --- */
.profil{display:grid;gap:34px;align-items:center}
@media(min-width:820px){.profil{grid-template-columns:300px 1fr;gap:48px}}
.profilbild{border-radius:16px;overflow:hidden;box-shadow:0 16px 44px rgba(15,46,76,.16);
max-width:300px}
.profilbild picture,.profilbild img{display:block;width:100%;height:auto}

/* --- Karte mit Zwei-Klick-Lösung --- */
.kartenblock{margin:30px 0 0;border:1px solid var(--linie);border-radius:14px;
overflow:hidden;background:#fff;height:100%;display:flex;flex-direction:column}
.karte{margin:0;background:#EAF0F6;aspect-ratio:16/10;display:flex;
align-items:center;justify-content:center;text-align:center}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte-platzhalter{padding:26px 22px;max-width:460px}
.karte-platzhalter p{margin-bottom:14px;font-size:.9rem;color:var(--grau)}
.kartenfuss{padding:20px 22px;display:grid;gap:14px;margin-top:auto}
@media(min-width:700px){.kartenfuss{grid-template-columns:1fr auto;
align-items:center;gap:24px}}
.kartenfuss p{margin:0;color:var(--grau)}
.kartenfuss .hcta{margin:0}
/* Knopf mit dunkler Kontur - der helle btn-o ist fuer dunkle Flaechen gedacht
   und auf weissem Grund kaum zu sehen. */
.btn-n{background:transparent;color:var(--navy);
border:2px solid rgba(15,46,76,.28);box-shadow:none}
.btn-n:hover{background:var(--hell2);border-color:var(--navy)}

/* --- Galerie: festes Seitenverhältnis statt fester Höhe, damit die Kacheln
       auf jeder Breite gleich aussehen und Hochformate nicht ausbrechen --- */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.gal{margin:0;border-radius:12px;overflow:hidden;background:#F5F8FB;
box-shadow:0 8px 24px rgba(15,46,76,.08)}
.gal picture{display:block;aspect-ratio:4/3}
.splitimg{aspect-ratio:4/3}
/* Rueckfallebene, falls das picture-Element fehlt - dann traegt das Bild
   selbst das Seitenverhaeltnis */
.gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.splitimg img{width:100%;height:100%;object-fit:cover}
.panorama img{width:100%;height:100%;object-fit:cover}
img.inhaltsbild{width:auto;max-width:100%;height:auto;
max-height:clamp(300px,42vw,520px);margin:0 auto 30px;border-radius:12px}
.gal picture img{display:block;width:100%;height:100%;object-fit:cover;
object-position:center}
.gal figcaption{padding:12px 14px;font-size:.86rem;color:var(--grau)}
@media(max-width:860px){.galerie{grid-template-columns:1fr}}

/* --- Inhaltsbild: einheitliche Höhe, kein Beschnitt. Hochformate stehen
       mittig auf hellem Grund, Querformate füllen die Breite --- */
.inhaltsbild{display:flex;justify-content:center;margin:0 0 30px;
border-radius:12px;overflow:hidden;background:#F5F8FB;
box-shadow:0 10px 30px rgba(15,46,76,.10)}
.inhaltsbild img{display:block;width:auto;max-width:100%;height:auto;
max-height:clamp(300px,42vw,520px)}

/* --- Panorama und Splitbild: die Bilder müssen ihren Rahmen ausfüllen.
       Ohne diese Regeln setzt das picture-Element die Vorgaben oben ausser Kraft --- */
.panorama picture{display:block;width:100%;height:100%}
.panorama picture img{display:block;width:100%;height:100%;object-fit:cover;
object-position:center 45%}
.splitimg picture{display:block;width:100%;height:100%}
.splitimg picture img{display:block;width:100%;height:100%;object-fit:cover;
object-position:center}

/* --- Kein seitliches Ueberlaufen. Ein einziges zu breites Element macht
       die ganze Seite seitlich scrollbar und verschiebt alles. --- */
html{overflow-x:hidden}
body{overflow-x:clip;max-width:100%}
.maps > *,.cards > *,.galerie > *,.steps > *,.fakten > *,.formular > *,
.two > *,.heroraster > *,.split > *{min-width:0}
img,picture,iframe,video{max-width:100%}
pre,code{overflow-x:auto}

/* --- Formularkarte --- */
.formularkarte{background:#fff;border:1px solid var(--linie);border-radius:16px;
padding:clamp(26px,3vw,40px);box-shadow:0 14px 40px rgba(15,46,76,.08);
margin-top:clamp(22px,2.6vw,32px)}
.formularkarte h3{margin-bottom:8px}
.formularkarte > p{color:var(--grau);margin-bottom:26px;max-width:62ch}

/* --- Abstaende --- */
section{padding:clamp(52px,6.4vw,80px) 0}
.center{margin-bottom:0}
.sub{margin-bottom:clamp(28px,3.4vw,42px)}
.gebiet{margin-top:clamp(20px,2.6vw,30px)}
.maps{margin-top:clamp(26px,3vw,38px)}
.cards,.galerie,.steps,.orte2,.fakten{margin-top:clamp(24px,2.8vw,34px)}
.card{padding:clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px)}
.zcta{padding:clamp(10px,1.6vw,20px) 0}
@media(max-width:600px){.hg{padding:56px 0 60px}}

footer .spaltentitel{color:#fff;font-size:.98rem;font-weight:700;
margin-bottom:14px}

/* --- WordPress-Blockabstaende neutralisieren.
   Gutenberg setzt zwischen Geschwisterbloecken einen Abstand nach oben.
   In unseren Rastern - Standortkarten, Leistungskarten, Galerie - schiebt
   das jedes zweite Element nach unten, statt es oben buendig zu halten.
   Unsere Abstaende stecken bereits im eigenen Stylesheet. --- */
main.wp-block-group > *{margin-block-start:0}
.wp-block-group.maps,.wp-block-group.cards,.wp-block-group.galerie,
.wp-block-group.steps,.wp-block-group.orte,.wp-block-group.reviews{margin:0}
.wp-block-details{margin:0}

/* --- Einwilligungsbanner --- */
.zustimmbanner{position:fixed;left:0;right:0;bottom:0;z-index:120;
background:#fff;border-top:2px solid var(--orange);
box-shadow:0 -12px 40px rgba(15,46,76,.18);padding:20px 0}
.zustimmbanner[hidden]{display:none}
.zustimminhalt{display:grid;gap:16px;align-items:center}
@media(min-width:900px){.zustimminhalt{grid-template-columns:1fr auto}}
.zustimminhalt p{margin:0;font-size:.92rem;color:var(--grau);max-width:70ch}
.zustimminhalt b{color:var(--navy)}
.zustimmknoepfe{display:flex;gap:12px;flex-wrap:wrap}
/* Beide Knoepfe gleich gross und gleich auffaellig - Ablehnen darf nicht
   schwerer zu finden sein als Zustimmen. */
.zustimmknoepfe .btn{min-width:168px;justify-content:center;text-align:center}
.btn-ablehnen{background:var(--navy);color:#fff;border:2px solid var(--navy)}
.btn-ablehnen:hover{background:var(--navy-d);border-color:var(--navy-d)}
@media(max-width:560px){.zustimmknoepfe .btn{flex:1 1 100%}}
/* Solange das Band steht, rutscht die Kontaktleiste nach oben */
body.bannersichtbar .sticky{bottom:auto;top:auto}
@media(min-width:900px){body.bannersichtbar .sticky{bottom:150px}}
@media(max-width:899px){body.bannersichtbar .sticky{bottom:210px}}

/* Zum Schluss, damit keine aeltere Regel gewinnt.

   Der Hero ist ein <section> und bekam dadurch die allgemeine
   Abschnittspolsterung - zusaetzlich zur eigenen Polsterung von .hg.
   Macht oben und unten rund 160 Pixel leere blaue Flaeche. Die
   Abschnittspolsterung entfaellt hier, die innere bleibt. */
.hero{padding:0}
/* .hg setzt die Polsterung als Kurzform und loescht damit den seitlichen
   Rand, den .wrap vorgibt - auf dem Handy klebte der Text am Bildschirmrand.
   Deshalb getrennt nach Achsen. */
.hero .hg{padding-block:clamp(52px,6vw,76px);padding-inline:24px}
.wrap{padding-inline:24px}
@media(max-width:520px){.wrap{padding-inline:18px}
.heroraster{gap:26px}}

/* Blockabstand in allen Flex- und Rasterboxen abschalten */
.btn > *,.card .ico > *,.cards > *,.checks > *,.checks li > *,.fakten > *,.fakten > div > *,.fbot > *,.feld > *,.fg > *,.formular > *,.galerie > *,.gavatar > *,.gbewertung > *,.gkarte > *,.gkopf > *,.glinks > *,.gliste > *,.gsterne > *,.hcta > *,.headin > *,.herobild > *,.heroraster > *,.inhaltsbild > *,.karte > *,.kartenblock > *,.kartenfuss > *,.logo > *,.mapfoot > *,.maphead > *,.maphead .pin > *,.maps > *,.nav > *,.navpunkt > *,.offer > *,.offerbox .row > *,.orte > *,.profil > *,.reviews > *,.rhead > *,.split > *,.step .num > *,.steps > *,.sticky > *,.sticky a > *,.tb > *,.tb-tels > *,.tb-tels a > *,.tbg > *,.unter > *,.usp > *,.usp li > *,.zcta-box > *,.zustimminhalt > *,.zustimmknoepfe > *,.zustimmung > *,header .nav > *,kuerzer ist als der Text > *,mittig auf hellem Grund > *,volle Hoehe > *,.btn > *,.mapcard > *,.navpunkt > a > *,.navclose > *{margin-block-start:0;margin-block-end:0}

/* --- Menue auf kleinen Breiten, vollstaendig neu gefasst.
   Das Panel stammte aus einer Zeit ohne Untermenues: Es formatierte jeden
   Verweis gleich und machte den letzten zum Knopf - seit den Untermenues
   traf das den letzten Ortseintrag. Ausserdem lag die Abdunkelung ueber
   dem Panel, weshalb es grau durchschien. --- */
@media(max-width:980px){
  header{z-index:100}
  header.navopen{z-index:110}
  .burger{z-index:20}
  .navback{z-index:120;background:rgba(10,32,56,.5)}
  .nav{position:fixed;top:0;right:0;bottom:0;left:auto;
  width:min(340px,88vw);height:100dvh;background:#fff;z-index:130;
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  overflow-y:auto;overscroll-behavior:contain;padding:0 0 28px;
  box-shadow:-18px 0 50px rgba(10,32,56,.28);opacity:1;
  transform:translateX(101%);visibility:hidden;
  transition:transform .28s ease,visibility .28s ease}
  .nav.open{transform:translateX(0);visibility:visible}
  .nav::before{content:"Menü";display:block;padding:26px 22px 14px;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);border-bottom:1px solid var(--linie)}
  /* Eigener Schliessknopf: Das Panel liegt vor der Kopfzeile, der Burger
     darunter waere nicht mehr erreichbar. */
  .navclose{position:absolute;top:16px;right:14px;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;background:none;
  border:0;cursor:pointer;padding:0;color:var(--navy)}
  .navclose svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round}
  .navpunkt > a::after{transition:transform .2s}
  .navpunkt.auf > a::after{transform:rotate(180deg)}
  .nav a{display:block;width:100%;margin:0;padding:15px 22px;
  border:0;border-bottom:1px solid var(--linie);border-radius:0;
  font-size:1rem;font-weight:600;color:var(--tinte);background:transparent;
  box-shadow:none;text-align:left}
  .nav a:active{background:var(--hell2);color:var(--orange)}
  /* Gruppen mit Untermenue */
  .navpunkt{display:block;width:100%;position:static}
  .navpunkt > a{display:flex;align-items:center;justify-content:space-between;
  font-weight:700;color:var(--navy)}
  .navpunkt > a::after{float:none;margin:0 0 0 10px;opacity:.45;
  border:0;width:auto;height:auto;transform:none;content:"⌄";
  font-size:1.2rem;line-height:1}
  /* Untermenues sind zunaechst zu und klappen auf Antippen auf */
  .nav .unter{position:static;display:none;background:var(--hell2);
  border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:0;
  box-shadow:none;opacity:1;visibility:visible;transform:none;
  grid-template-columns:1fr}
  .nav .unter a{padding:13px 22px 13px 38px;font-size:.94rem;
  font-weight:500;color:var(--grau);
  border-bottom:1px solid rgba(15,46,76,.07)}
  .nav .unter a:last-child{border-bottom:0}
  .navpunkt.auf .unter{display:block}
  /* Die alte Regel machte den jeweils letzten Verweis zum Knopf. Seit den
     Untermenues trifft das den letzten Ortseintrag - hier zuruecksetzen,
     der eigentliche Knopf traegt die Klasse navcta. */
  .nav a:last-child:not(.navcta){background:transparent;color:var(--tinte);
  margin:0;width:100%;border-radius:0;box-shadow:none;text-align:left;
  font-weight:inherit}
  .nav .unter a:last-child:not(.navcta){color:var(--grau)}
  /* Knopf am Ende, unabhaengig von der Reihenfolge */
  .nav a.navcta{margin:22px 22px 0;width:auto;padding:15px 20px;
  border:0;border-radius:10px;background:var(--orange);color:#fff;
  font-weight:800;text-align:center;
  box-shadow:0 8px 20px rgba(242,103,34,.28)}
}