/* Schnelle Bau – Basis: Tokens, Kopf, Navigation, Knöpfe, Fuß */
@font-face{font-family:Poppins;src:url(../fonts/poppins-bold.woff2) format("woff2"),url(../fonts/poppins-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-regular.woff2) format("woff2"),url(../fonts/inter-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-semibold.woff2) format("woff2"),url(../fonts/inter-semibold.woff) format("woff");font-weight:600;font-style:normal;font-display:swap}

:root{
  --rot:#c80000;--rot-dunkel:#a30000;--rot-hell:#ff4a3d;
  --tinte:#17181a;--text:#3d3f43;--grau:#6a6c70;
  --hell:#faf8f5;--stein:#efebe5;--linie:#e2ddd5;--weiss:#fff;
  --tief:#141517;--tief-2:#1d1f22;--tief-linie:#2e3035;--tief-text:#c9cacf;
  --kopf-h:84px;
  --display:Poppins,"Segoe UI",Arial,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--hell);color:var(--tinte);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit}
h1,h2,h3{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(clamp(16px,4vw,48px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,48px),env(safe-area-inset-right,0px))}
a[href^="tel:"],.nw{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--tinte);color:#fff;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px!important}
:focus-visible{outline:3px solid var(--rot-hell);outline-offset:3px}
.textlink{color:var(--rot);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.textlink:hover{color:var(--rot-dunkel)}
.dunkel .textlink{color:var(--rot-hell)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:50px;padding:13px 24px;border-radius:999px;font:600 1rem/1.2 var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn-rot{background:var(--rot);color:#fff;box-shadow:0 12px 26px -12px rgba(200,0,0,.8)}
.btn-rot:hover{background:var(--rot-dunkel);transform:translateY(-2px)}
.btn-linie{border:1.5px solid currentColor;background:transparent}
.btn-linie:hover{transform:translateY(-2px)}
.btn-hell{background:#fff;color:var(--tinte)}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto 0;z-index:40;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(rgba(20,21,23,.88),rgba(20,21,23,0));transition:background .35s,box-shadow .35s}
.kopf .wrap{display:flex;align-items:center;gap:24px;height:var(--kopf-h);transition:height .35s}
.logo{display:block;flex:none;border-radius:50%}
.logo{position:relative}
.logo img{height:70px;width:auto;transition:height .35s,opacity .35s}
.logo .logo-dunkel{position:absolute;left:0;top:0;opacity:0}
.kopf.hell .logo .logo-hell{opacity:0}.kopf.hell .logo .logo-dunkel{opacity:1}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px;font:600 .95rem var(--body)}
.nav a{text-decoration:none;color:#ececf0;transition:color .25s}
.nav a:not(.btn):hover{color:var(--rot-hell)}
.nav .kopf-tel{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.nav .kopf-tel svg{width:18px;height:18px}
.nav .btn{min-height:44px;padding:10px 20px;color:#fff}
.kopf.hell{background:rgba(250,248,245,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--linie)}
.kopf.hell .wrap{height:70px}.kopf.hell .logo img{height:54px}
.kopf.hell .nav a:not(.btn){color:var(--text)}
.kopf.hell .nav a:not(.btn):hover{color:var(--rot)}
.burger{display:none;margin-left:auto;width:48px;height:48px;border:0;border-radius:12px;background:rgba(255,255,255,.12);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .3s,opacity .3s,background .3s}
.kopf.hell .burger{background:var(--stein)}.kopf.hell .burger span{background:var(--tinte)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1199px){
  :root{--kopf-h:72px}
  .logo img{height:54px}
  .burger{display:flex}
  .nav{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:96px max(24px,env(safe-area-inset-right,0px)) 32px max(24px,env(safe-area-inset-left,0px));background:var(--tief);font-size:1.35rem;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s,transform .3s,visibility 0s .3s}
  .nav.offen{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
  .nav a:not(.btn),.kopf.hell .nav a:not(.btn){color:#fff;padding:12px 0;border-bottom:1px solid var(--tief-linie)}
  .nav .btn{margin-top:20px;min-height:54px}

  body.menue-offen{overflow:hidden}
  body.menue-offen .kopf{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.menue-offen .kopf .burger{background:rgba(255,255,255,.12)}
  body.menue-offen .kopf .burger span{background:#fff}
  body.menue-offen .kopf .logo .logo-hell{opacity:1}body.menue-offen .kopf .logo .logo-dunkel{opacity:0}
}

/* Leistungen-Menü */
.nav-punkt{position:relative}
.nav-auf{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:#ececf0;cursor:pointer}
.nav-auf svg{width:16px;height:16px;transition:transform .25s}
.nav-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-auf:hover{color:var(--rot-hell)}
.kopf.hell .nav-auf{color:var(--text)}.kopf.hell .nav-auf:hover{color:var(--rot)}
.mega{position:absolute;left:50%;top:calc(100% + 18px);width:min(640px,90vw);transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s;background:#fff;border-radius:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 0 0 1px var(--linie);padding:14px;color:var(--tinte)}
.mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-punkt.offen .mega,.nav-punkt:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .25s}
@media(hover:hover) and (min-width:1200px){.nav-punkt:hover .mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .25s}}
.mega-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.mega-liste a{display:block;padding:14px;border-radius:12px;text-decoration:none;color:var(--tinte)!important;transition:background .2s}
.mega-liste a:hover{background:var(--hell)}
.mega-liste b{display:block;font:700 .98rem/1.3 var(--display)}
.mega-liste span{display:block;font-size:.82rem;line-height:1.45;color:var(--grau);font-weight:400;margin-top:2px}
.mega-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding:12px 14px;border-radius:12px;background:var(--stein);font-size:.85rem;color:var(--text);font-weight:400}
.mega-fuss a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--rot)!important;text-decoration:none;white-space:nowrap}
.mega-fuss svg{width:16px;height:16px}

/* Abschnitts-Typo */
.marke{display:inline-block;font:600 .8rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--rot);margin:0 0 14px}
.dunkel .marke{color:var(--rot-hell)}
.h2{font:700 clamp(2rem,4.4vw,3.4rem)/1.08 var(--display);letter-spacing:-.02em;text-wrap:balance}
.h2 em{font-style:normal;color:var(--rot)}
.dunkel .h2 em{color:var(--rot-hell)}
.intro{color:var(--text);max-width:52ch;margin:16px 0 0}
.dunkel .intro{color:var(--tief-text)}
.dunkel{background:var(--tief);color:#f3f3f5}

/* Fuß (hell, ruhig) */
.fuss{background:#fff;color:var(--text);font-size:.95rem;line-height:1.6;border-top:1px solid var(--linie)}
.fuss a{color:inherit;text-decoration:none}
.fuss a:hover{color:var(--rot)}
.fuss-kopf{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;padding-block:44px 36px;border-bottom:1px solid var(--linie)}
.fuss-marke img{width:120px}
.fuss-claim{margin:0;max-width:40ch;color:var(--text)}
.fuss-tel{display:inline-flex;align-items:center;gap:10px;font:700 1.35rem/1 var(--display);color:var(--tinte)!important;white-space:nowrap}
.fuss-tel svg{width:22px;height:22px;color:var(--rot)}
.fuss-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding-block:44px 40px}
.fuss-orte{display:flex;align-items:baseline;gap:12px 28px;padding-block:22px;border-top:1px solid var(--linie)}
.fuss-orte h2,.fuss-orte .fuss-h{flex:none;min-width:110px}
.fuss .fuss-orte ul{display:flex;flex-wrap:wrap;gap:8px 24px}
.fuss-orte li{font-size:.9rem;color:var(--grau)}
.fuss h2,.fuss-h{font:600 .78rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin:0}
.fl-gruppe summary{list-style:none;margin-bottom:14px;pointer-events:none}
.fl-gruppe summary::-webkit-details-marker{display:none}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fuss address{font-style:normal;margin:0 0 4px;line-height:1.6}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding-block:20px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--linie);font-size:.85rem;color:var(--grau)}
.fuss-unten nav{display:flex;flex-wrap:wrap;gap:6px 22px}
@media(max-width:1000px){.fuss-spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}.fuss-orte{flex-direction:column;gap:12px}.fuss-kopf{grid-template-columns:auto minmax(0,1fr)}.fuss-tel{grid-column:1/-1}}
@media(max-width:640px){
  .fuss-kopf{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:36px 28px}
  .fuss-marke img{width:100px}
  .fuss-spalten{grid-template-columns:minmax(0,1fr);gap:0;padding-block:8px 16px}
  .fl-gruppe{border-bottom:1px solid var(--linie)}
  .fl-gruppe summary{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:0;padding:18px 0}
  .fl-gruppe summary::after{content:"";width:26px;height:26px;border-radius:50%;background:var(--hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c80000' stroke-width='2.4'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;transition:transform .3s}
  .fl-gruppe[open] summary::after{transform:rotate(45deg)}
  .fl-gruppe[open]{padding-bottom:18px}
  .fuss h2,.fuss-h{font-size:.85rem;color:var(--tinte)}
  .fuss-orte{padding-block:4px 22px;border-top:0}
  .fuss-unten{flex-direction:column;align-items:flex-start;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* Handy-Leiste */
.mobil-leiste{display:none}
@media(max-width:760px){
  .mobil-leiste{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(250,248,245,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -1px 0 var(--linie);transform:translateY(110%);transition:transform .35s}
  .mobil-leiste.da{transform:none}
  .mobil-leiste .btn{min-height:50px;padding:12px}
  .mobil-leiste .btn-linie{color:var(--tinte)}
}

/* Leistungen-Menü im Handy-Menü (nach den Grundregeln) */
@media(max-width:1199px){
  .nav{justify-content:flex-start;overflow-y:auto}
  .nav-auf,.kopf.hell .nav-auf{width:100%;justify-content:space-between;color:#fff;padding:12px 0;border-bottom:1px solid var(--tief-linie);font-size:1.35rem}
  .mega{position:static;width:auto;transform:none;opacity:1;visibility:visible;display:none;background:transparent;box-shadow:none;padding:4px 0 10px;transition:none}
  .mega::before{display:none}
  .nav-punkt.offen .mega{display:block;transform:none}
  .nav-punkt:focus-within .mega{transform:none}
  .mega-liste{grid-template-columns:minmax(0,1fr)}
  .mega-liste a{color:#fff!important;padding:9px 0 9px 14px;border-radius:0;border-left:2px solid var(--tief-linie)}
  .mega-liste a:hover{background:transparent;border-left-color:var(--rot-hell)}
  .mega-liste b{font:600 1.05rem var(--body)}
  .mega-liste span,.mega-fuss{display:none}
}
@media(max-width:1199px){.nav .mega-liste a{padding:10px 0 10px 16px;border-bottom:0;font-size:1rem}}

/* Mega-Menü: 4 Spalten mit Icons (Desktop) */
.mega-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#ececee;color:#55565c;margin-bottom:12px;font-style:normal}
.mega-ico svg{width:22px;height:22px}
@media(min-width:1200px){
  .nav-punkt{position:static}
  .kopf .wrap{position:relative}
  .mega{width:100%;max-width:1180px;top:100%;padding:18px}
  .mega::before{top:-30px;height:30px}
  .mega-liste{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .mega-liste a{height:100%}
}
@media(max-width:1199px){.mega-ico{display:none}}

/* ---------- Hover-Effekte (v10) ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.btn:hover::after{transform:translateX(120%)}}
.fuss-spalten a,.fuss-orte a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s,color .2s}
.fuss-spalten a:hover,.fuss-orte a:hover{background-size:100% 1px}
@media(hover:hover){.mega-liste a:hover .mega-ico{background:#2a2b2f;color:#fff;transform:translateY(-2px) rotate(-4deg)}}
.mega-ico{transition:background .25s,color .25s,transform .25s}
/* Spotlight + Anheben für Karten */
.spot{--mx:50%;--my:50%;position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 60%);opacity:0;transition:opacity .3s}
@media(hover:hover){.spot:hover::after{opacity:1}}
.nw{white-space:nowrap}

.fuss-h{margin:0}
.fuss-orte+.fuss-orte{border-top:0;padding-top:0}

/* v12: Kopf beim Scrollen fest, Handy-Menü kompakt mit Icons, Formular-Fehler */
.kopf.fest:not(.hell){background:rgba(20,21,23,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
@media(max-width:1199px){
  .nav{padding-top:88px;gap:0}
  .nav a:not(.btn),.kopf.hell .nav a:not(.btn),.nav-auf,.kopf.hell .nav-auf{font-size:1.15rem;padding:11px 0}
  .nav .mega-liste a{display:flex;align-items:center;gap:12px;padding:7px 0 7px 4px;border-left:0;font-size:.98rem}
  .nav .mega-liste .mega-ico{display:grid;width:30px;height:30px;border-radius:9px;margin:0;background:#2c2d31;color:#c9cad0;flex:none}
  .nav .mega-liste .mega-ico svg{width:17px;height:17px}
  .nav .mega-liste b{font:500 .98rem var(--body)}
  .nav .btn{margin-top:16px}
}
a[href^="mailto:"]{white-space:nowrap}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{vertical-align:middle}
@media(max-width:520px){.knoepfe .btn{width:100%;max-width:340px}}
p{text-wrap:pretty}