/* ============================================================
   PANEL ENERGY — v4 "Premium Dark" (Aufbau & Nutzerführung nach
   ThermoSol-Vorbild, eigenständiges Design in Panel-Energy-CI)
   ============================================================ */
:root{
  --orange:#F0670C; --orange-600:#d25a09; --blue:#008AFD;
  --ink:#1e2024; --ink-2:#323232; --muted:#5b6470; --line:#e7ebf0;
  --dark-0:#0b0f14; --dark-1:#10151c; --dark-2:#161d26; --dark-3:#1e2731;
  --w:#ffffff; --w72:rgba(255,255,255,.72); --w55:rgba(255,255,255,.55); --w12:rgba(255,255,255,.12);
  --soft:#f4f7fb;
  --radius:14px; --shadow:0 16px 44px rgba(5,8,12,.35); --shadow-sm:0 4px 14px rgba(20,24,31,.08); --wrap:1200px;
  --font:'Oxygen', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* overflow-x:hidden stand hier im Entwurf und ist RAUS.
   Es hat den seitlichen Ueberlauf nur unsichtbar gemacht, nicht behoben:
   Die Seite war auf dem Handy weiterhin 441 px breit bei 375 px Fenster,
   man sah es bloss nicht mehr. Damit verdeckt es kuenftige Ausreisser
   genauso lautlos — und der Zaehler, der die Ursache verraet
   (scrollWidth > clientWidth), zeigt sie trotzdem an.
   Die echte Ursache steckte im Knopf "Alle Bewertungen auf Google
   ansehen", s. Block "MOBIL" weiter unten. */
body{font-family:var(--font);color:var(--ink-2);background:#fff;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);line-height:1.15;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.18rem}
p{color:var(--muted)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:90px 0}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.lead{font-size:1.14rem;max-width:62ch}
.center{text-align:center}
.head{max-width:700px;margin:0 auto 54px;text-align:center}
.head p{margin-top:12px}

/* Dark sections */
.sec-dark{background:var(--dark-1)}
.sec-darker{background:var(--dark-0)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-darker h1,.sec-darker h2,.sec-darker h3{color:var(--w)}
.sec-dark p,.sec-darker p{color:var(--w72)}
.sec-soft{background:var(--soft)}

/* Buttons — uppercase, ThermoSol-artig */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:700;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;padding:16px 30px;border-radius:6px;transition:transform .18s,background .18s,box-shadow .18s,border-color .18s;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;font-family:inherit}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 26px rgba(240,103,12,.35)}
.btn-primary:hover{background:var(--orange-600);transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.btn-glass:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn-dark{background:var(--dark-1);color:#fff}
.btn-dark:hover{background:var(--dark-3);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--ink);border-color:#cdd5de}
.btn-outline:hover{border-color:var(--orange);color:var(--orange)}
.btn-block{width:100%}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* Topbar */
.topbar{background:var(--dark-0);color:var(--w72);font-size:.84rem;position:relative;z-index:60}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:18px}
.topbar .ti{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar a{color:var(--w72);display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#fff}
.topbar svg{color:var(--orange)}
.topbar .soc{display:flex;gap:14px}
.topbar .soc a:hover{color:var(--orange)}

/* Header — dunkel & sticky (ThermoSol) */
header{position:sticky;top:0;z-index:50;background:rgba(13,18,25,.96);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07);transition:box-shadow .2s}
header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.4)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px}
.logo{flex:none;display:block;width:178px}
.logo img{height:42px;width:178px;max-width:none;object-fit:contain;object-position:left center}
.menu{display:flex;align-items:center;gap:26px}
.menu a{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--w72);position:relative;padding:6px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .22s}
.menu a:hover,.menu a.active{color:#fff}
.menu a:hover::after,.menu a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:13px 22px}
.phone{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;white-space:nowrap}
.phone svg{color:var(--orange)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:.2s}

/* HERO — volle Fläche */
.hero3{position:relative;min-height:88vh;display:flex;align-items:center;background:var(--dark-0);overflow:hidden}
.hero3 .bg{position:absolute;inset:0}
.hero3 .bg img{width:100%;height:100%;object-fit:cover}
.hero3 .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,10,15,.94) 8%,rgba(7,10,15,.66) 48%,rgba(7,10,15,.30))}
.hero3 .wrap{position:relative;z-index:2;padding-top:110px;padding-bottom:120px}
.hero3 .inner{max-width:760px}
.hero3 h1{color:#fff;margin-bottom:22px}
.hero3 h1 em{color:var(--orange);font-style:normal}
.hero3 .lead{color:var(--w72);margin-bottom:34px}
.hero3 .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero3 .chips{display:flex;flex-wrap:wrap;gap:12px 26px}
.hero3 .chip{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;font-size:.92rem}
.hero3 .chip svg{color:var(--orange);flex:none}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;width:26px;height:44px;border:2px solid rgba(255,255,255,.4);border-radius:16px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:4px;background:var(--orange);animation:cue 1.6s infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Trust-Strip */
.trust{background:var(--dark-2);border-top:1px solid var(--w12);border-bottom:1px solid var(--w12)}
.trust .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding-top:44px;padding-bottom:44px}
.trust p{color:var(--w72);font-size:1.02rem;margin:0}
.trust p strong{color:#fff}
.trust .logos{display:flex;gap:36px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.trust .logos b{font-size:1.3rem;color:#fff;opacity:.85;letter-spacing:.05em}
.trust .logos small{display:block;font-size:.68rem;color:var(--w55);letter-spacing:.14em;text-transform:uppercase;font-weight:400}

/* Grosse Service-Karten */
.svc-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.svc{position:relative;border-radius:18px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;box-shadow:var(--shadow);transition:transform .25s}
.svc:hover{transform:translateY(-8px)}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc:hover img{transform:scale(1.06)}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,16,0) 30%,rgba(8,11,16,.88) 82%)}
.svc .bd{position:relative;z-index:2;padding:30px 30px 32px}
.svc h3{color:#fff;font-size:1.6rem;margin-bottom:8px}
.svc p{color:var(--w72);font-size:.98rem;max-width:44ch;margin-bottom:16px}
.svc .more{font-weight:700;color:var(--orange);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:gap .2s}
.svc:hover .more{gap:14px}
.svc-mini{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.svc.small{min-height:300px}
.svc.small h3{font-size:1.3rem}

/* Quality-Banner (fixed bg) */
.quality{position:relative;padding:130px 0;background-image:url('../img/stock/quality-bg.webp');background-size:cover;background-position:center;background-attachment:fixed}
.quality::after{content:"";position:absolute;inset:0;background:rgba(7,10,15,.78)}
.quality .wrap{position:relative;z-index:2;max-width:820px;text-align:center}
.quality h2{color:#fff;margin-bottom:16px}
.quality p{color:var(--w72);font-size:1.08rem;margin-bottom:30px}

/* Termin-Formular (weisser Block) */
.booking{background:#fff}
.booking .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px;box-shadow:0 24px 60px rgba(20,24,31,.12)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:span 2}
.field label{font-size:.85rem;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:14px 15px;font-family:inherit;font-size:.97rem;color:var(--ink-2);width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted)}
.consent input{margin-top:3px;flex:none}
.consent a{color:var(--orange);text-decoration:underline}
.contact-info{display:grid;gap:20px}
.ci{display:flex;gap:14px;align-items:flex-start}
.ci .ico{width:48px;height:48px;border-radius:10px;background:#fff3ea;display:grid;place-items:center;color:var(--orange);flex:none}
.ci b{color:var(--ink);display:block}
.ci span{color:var(--muted);font-size:.95rem}
.form-ok{text-align:center;padding:28px 10px}
.form-ok .tick{font-size:2.6rem}

/* Benefits */
.benefits .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.ben{background:var(--dark-2);border:1px solid var(--w12);border-radius:16px;padding:32px 26px;transition:transform .2s,border-color .2s}
.ben:hover{transform:translateY(-6px);border-color:rgba(240,103,12,.5)}
.ben .ico{width:54px;height:54px;border-radius:12px;background:rgba(240,103,12,.14);display:grid;place-items:center;color:var(--orange);margin-bottom:18px}
.ben h3{color:#fff;margin-bottom:8px;font-size:1.08rem}
.ben p{color:var(--w72);font-size:.93rem}

/* Counter-Band */
.counters{background:var(--dark-0);border-top:1px solid var(--w12);border-bottom:1px solid var(--w12)}
.counters .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:64px;padding-bottom:64px;text-align:center}
.cnt .v{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:700;color:var(--orange);line-height:1}
.cnt .v span{color:var(--orange)}
.cnt small{display:block;margin-top:10px;color:var(--w72);font-size:.92rem;letter-spacing:.06em}

/* Produkt-Highlight */
.product .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.product .ph{border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.product .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.product ul{list-style:none;margin:22px 0 30px;display:grid;gap:13px}
.product li{display:flex;gap:12px;align-items:flex-start;color:var(--w72);font-size:.98rem}
.product li svg{color:var(--orange);flex:none;margin-top:4px}
.product li b{color:#fff}

/* 4 Schritte */
.steps4{background:#fff}
.steps4 .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.st4{position:relative;padding-top:14px}
.st4 .n{font-size:4.2rem;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:2px #ffd0b0;margin-bottom:14px}
.st4 h3{margin-bottom:8px}
.st4 p{font-size:.95rem}

/* Quiz / Anfrage-Panel */
.offer2{background:var(--dark-1)}
.offer2 .head h2{color:#fff}
.offer2 .head p{color:var(--w72)}
.quiz2{max-width:880px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:42px}
.quiz2 .prog{height:7px;border-radius:99px;background:var(--line);margin-bottom:28px;overflow:hidden}
.quiz2 .prog i{display:block;height:100%;background:var(--orange);width:20%;transition:width .4s}
.quiz2 .q{font-size:1.35rem;font-weight:700;color:var(--ink);text-align:center;margin-bottom:26px}
.qstep{display:none}
.qstep.active{display:block;animation:fade .4s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.opt2grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.opt2grid.two{grid-template-columns:repeat(2,1fr);max-width:520px;margin:0 auto}
.opt2{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 12px;text-align:center;font-weight:700;color:var(--ink);cursor:pointer;transition:.16s;font-size:.94rem}
.opt2 img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:10px;background:var(--soft)}
.opt2:hover{border-color:var(--orange);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.quiz2 .foot{display:flex;justify-content:space-between;align-items:center;margin-top:24px;color:var(--muted);font-size:.84rem}
.quiz2 .back{background:none;border:0;color:var(--muted);cursor:pointer;font-family:inherit;font-size:.9rem}
.quiz2 .back:hover{color:var(--orange)}

/* FAQ */
.faq-list{max-width:800px;margin:0 auto;display:grid;gap:12px}
details{background:var(--dark-2);border:1px solid var(--w12);border-radius:12px;padding:2px 22px}
summary{cursor:pointer;font-weight:700;color:#fff;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--orange);font-size:1.5rem;font-weight:400;transition:.2s;flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:20px;font-size:.96rem;color:var(--w72)}

/* CTA-Band */
.cta-band{background:linear-gradient(120deg,var(--orange),var(--orange-600));color:#fff;padding:74px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);margin-top:6px}
.cta-band .phone-lg{font-size:1.7rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}
.cta-band .btn-glass{border-color:rgba(255,255,255,.6)}

/* Unterseiten-Hero */
.phero{position:relative;background:var(--dark-1);padding:96px 0 84px;overflow:hidden}
.phero .bgimg{position:absolute;inset:0}
.phero .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.phero .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,12,18,.9),rgba(9,12,18,.5))}
.phero .wrap{position:relative;z-index:2}
.phero .crumb{font-size:.84rem;color:var(--w55);margin-bottom:16px}
.phero .crumb a:hover{color:var(--orange)}
.phero h1{color:#fff;max-width:22ch;font-size:clamp(2rem,4.4vw,3.1rem)}
.phero p{margin-top:16px;max-width:62ch;font-size:1.08rem;color:var(--w72)}

/* Inhalts-Hilfsklassen (Unterseiten, hell) */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.adv ul{list-style:none;margin-top:22px;display:grid;gap:16px}
.adv li{display:flex;gap:13px;align-items:flex-start}
.adv li svg{color:var(--blue);flex:none;margin-top:3px}
.adv li b{color:var(--ink);display:block}
.adv li span{color:var(--muted);font-size:.95rem}
.contact-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.step{background:#fff;border-radius:var(--radius);padding:32px 28px;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.step .n{font-size:2.5rem;font-weight:700;color:#ffd0b0;line-height:1;margin-bottom:10px}
.step h3{margin-bottom:8px}.step p{font-size:.95rem}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .22s,box-shadow .22s;display:block}
.scard:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(20,24,31,.14)}
.scard .ph{aspect-ratio:16/11;overflow:hidden;background:var(--soft)}
.scard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.scard:hover .ph img{transform:scale(1.07)}
.scard .bd{padding:22px 22px 26px}
.scard h3{margin-bottom:8px}
.scard p{font-size:.94rem;margin-bottom:14px}
.more{font-weight:700;color:var(--orange);font-size:.9rem;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.more:hover{gap:11px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{background:var(--dark-1);color:#fff;border-radius:var(--radius);padding:30px 26px}
.stat .v{font-size:2.1rem;font-weight:700;color:#fff;line-height:1}
.stat .v em{color:var(--orange);font-style:normal}
.stat small{color:var(--w72);font-size:.9rem;display:block;margin-top:6px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gitem{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--soft)}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gitem:hover img{transform:scale(1.06)}
.gitem .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;color:#fff;font-weight:700;font-size:.95rem;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.tcard .stars{color:var(--orange);letter-spacing:2px;margin-bottom:10px}
.tcard p{color:var(--ink-2);font-style:italic}
.tcard .who{margin-top:14px;font-weight:700;color:var(--ink);font-style:normal;font-size:.92rem}
.faq-light details{background:#fff;border:1px solid var(--line)}
.faq-light summary{color:var(--ink)}
.faq-light details p{color:var(--muted)}
.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:1.3rem;margin:32px 0 10px}
.prose p{margin-bottom:12px}
.prose .box{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:20px}
.prose .box p{margin-bottom:4px;color:var(--ink-2)}
.prose a{color:var(--orange);text-decoration:underline}
.notice{background:#fff3ea;border:1px solid #ffd9bf;border-radius:14px;padding:20px 22px;color:var(--ink-2)}

/* Footer */
footer{background:var(--dark-0);color:var(--w72);padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--w12)}
footer h4{color:#fff;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
footer .flogo{height:40px;width:169px;max-width:none;object-fit:contain;object-position:left center;margin-bottom:16px}
footer a{color:var(--w72);font-size:.94rem;display:block;padding:5px 0}
footer a:hover{color:var(--orange)}
footer .ft-line{font-size:.94rem;padding:5px 0;color:var(--w72)}
.fsoc{display:flex;gap:12px;margin-top:12px}
.fsoc a{width:38px;height:38px;border-radius:50%;background:var(--w12);display:grid;place-items:center;padding:0}
.fsoc a:hover{background:var(--orange);color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:.85rem;color:var(--w55)}
.foot-bottom a{display:inline;padding:0}

/* Popup */
.modal{position:fixed;inset:0;z-index:200;background:rgba(5,8,12,.7);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.modal.show{display:flex;opacity:1}
.modal-box{background:#fff;border-radius:18px;max-width:460px;width:100%;padding:36px 32px;position:relative;box-shadow:var(--shadow);transform:translateY(16px);transition:transform .3s}
.modal.show .modal-box{transform:none}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:1.7rem;color:var(--muted);cursor:pointer;line-height:1}
.modal-x:hover{color:var(--ink)}
.modal-box .eyebrow{margin-bottom:8px}
.modal-box h3{font-size:1.5rem;margin-bottom:8px}
.modal-box p{font-size:.95rem;margin-bottom:18px}
.mform{display:grid;gap:12px}
.mform input{background:var(--soft);border:1.5px solid var(--line);border-radius:8px;padding:13px 15px;font-family:inherit;font-size:.95rem}
.mform input:focus{outline:none;border-color:var(--orange)}
.mform .btn{border-radius:8px}

/* Cookie-Banner */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:180;max-width:560px;margin:0 auto;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:22px 24px;display:none}
.cookie.show{display:block;animation:cookieUp .4s}
@keyframes cookieUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cookie h4{color:var(--ink);font-size:1.05rem;margin-bottom:6px}
.cookie p{font-size:.88rem;margin-bottom:16px}
.cookie p a{color:var(--orange);text-decoration:underline}
.cookie .row{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:12px 20px;font-size:.78rem;border-radius:8px}
.cookie .btn-outline{color:var(--ink)}



/* Responsive */
@media(max-width:1020px){
  .svc-duo,.svc-mini,.booking .wrap,.product .wrap,.adv-grid,.contact-split{grid-template-columns:1fr}
  .svc{min-height:340px}
  .benefits .grid,.steps4 .grid{grid-template-columns:1fr 1fr}
  .counters .wrap{grid-template-columns:1fr 1fr;gap:40px}
  .trust .wrap{grid-template-columns:1fr}
  .trust .logos{justify-content:flex-start}
  .grid-4{grid-template-columns:1fr 1fr}
  .opt2grid{grid-template-columns:repeat(2,1fr)}
  .gallery,.testi{grid-template-columns:1fr 1fr}
  /* Die Kopfzeilen-Regeln standen hier und sind in den Block "KOPFZEILE"
     am Ende gewandert: Der Umschaltpunkt zum Burger liegt jetzt bei
     1280 px statt 1020 px. Sie hier stehen zu lassen haette bedeutet,
     dass derselbe Umschalter an zwei Stellen mit zwei Zahlen steht. */
  .quality{background-attachment:scroll}
}
@media(max-width:760px){
  .nav-cta .btn{display:none}
  section{padding:60px 0}
  .hero3{min-height:78vh}
  .hero3 .wrap{padding-top:70px;padding-bottom:90px}
  .grid-3,.grid-4,.grid-2,.foot-grid,.testi,.benefits .grid,.steps4 .grid{grid-template-columns:1fr}
  .stats,.gallery{grid-template-columns:1fr 1fr}
  .counters .wrap{grid-template-columns:1fr 1fr;gap:34px}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:span 1}
  .topbar .ti .hrs,.topbar .ti .mail,.topbar .ti .addr{display:none}
  .topbar .wrap{min-height:38px}
  .quiz2{padding:26px 18px}
  .opt2grid{grid-template-columns:1fr 1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .form-card{padding:26px 20px}
}

/* === v6: Produkt-Karten (Unterseiten) === */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.pcard .pimg{aspect-ratio:4/3;background:var(--soft);overflow:hidden;display:grid;place-items:center}
.pcard .pimg img{width:100%;height:100%;object-fit:cover}
.pcard .pimg .picon{width:84px;height:84px;border-radius:50%;background:#fff3ea;color:var(--orange);display:grid;place-items:center}
.pcard .pbd{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .ptag{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.pcard h3{font-size:1.15rem}
.pcard p{font-size:.93rem}
.pcard ul{list-style:none;margin-top:4px;display:grid;gap:6px}
.pcard li{font-size:.88rem;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.pcard li::before{content:"✓";color:var(--orange);font-weight:700}
.checklist{list-style:none;display:grid;gap:12px;margin-top:18px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:.97rem}
.checklist li b{color:var(--ink)}
.checklist li::before{content:"✓";color:var(--orange);font-weight:700;font-size:1.05rem;line-height:1.4}
.foerder{position:relative;border-radius:20px;overflow:hidden;min-height:300px;display:flex;align-items:center}
.foerder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foerder::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(9,12,18,.9),rgba(9,12,18,.45))}
.foerder .fin{position:relative;z-index:2;padding:44px;max-width:560px}
.foerder h3{color:#fff;font-size:1.6rem;margin-bottom:10px}
.foerder p{color:rgba(255,255,255,.85);margin-bottom:20px}
.vcap{font-size:.78rem;color:var(--w55);margin-top:10px;text-align:center}

/* === v6: Anfrage-Panel neu (ohne Alt-Piktogramme) === */
.qsteps-label{display:flex;justify-content:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.qsl{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.85rem;font-weight:700;color:var(--muted);transition:.2s}
.qsl.on{background:var(--orange);border-color:var(--orange);color:#fff}
.qsl.done{border-color:var(--orange);color:var(--orange)}
.opt3grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.opt3grid.two{grid-template-columns:repeat(2,1fr);max-width:480px;margin:0 auto}
.opt3{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 14px 20px;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;transition:.18s;background:#fff;text-align:center}
.opt3 .qi{width:56px;height:56px;border-radius:50%;background:#fff3ea;color:var(--orange);display:grid;place-items:center;transition:.18s}
.opt3:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.opt3:hover .qi{background:var(--orange);color:#fff}
.opt3 b{color:var(--ink);font-size:1.02rem;line-height:1.2}
.opt3 small{color:var(--muted);font-size:.8rem}
@media(max-width:1020px){.pcards{grid-template-columns:1fr 1fr}.opt3grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.pcards{grid-template-columns:1fr}.opt3grid{grid-template-columns:1fr 1fr}.foerder .fin{padding:28px}}

/* === v7: Partner-Logos (echte Bilder) + Google-Bewertungen === */
.trust .logos .lg{background:#fff;border-radius:12px;padding:12px 18px;display:grid;place-items:center}
.trust .logos .lg img{height:52px;width:auto;max-width:220px;object-fit:contain}
.greview .gsum{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.greview .gsum .gscore{font-size:2.4rem;font-weight:700;color:#fff;line-height:1}
.greview .gsum .gstars{color:#fbbc04;font-size:1.5rem;letter-spacing:3px}
.greview .gsum small{color:var(--w72);font-size:.95rem}
.greview .tcard{background:var(--dark-2);border:1px solid var(--w12)}
.greview .tcard p{color:var(--w72)}
.greview .tcard .who{color:#fff}
.greview .tcard .stars{color:#fbbc04}
.greview .gbadge{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:99px;padding:8px 16px;font-weight:700;color:#1e2024;font-size:.85rem}
.pcards.four{grid-template-columns:repeat(4,1fr)}
.pcard .pimg img.contain{object-fit:contain;padding:16px;background:#fff}
a.pcard{color:inherit}
@media(max-width:1020px){.pcards.four{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.pcards.four{grid-template-columns:1fr}}
/* Fix: weisse Karten in dunklen Sektionen behalten dunkle Schrift */
.sec-dark .pcard h3,.sec-darker .pcard h3{color:var(--ink)}
.sec-dark .pcard p,.sec-darker .pcard p{color:var(--muted)}
.sec-dark .quiz2 h3,.sec-dark .quiz2 .q{color:var(--ink)}

/* === v8: Logo-Pill (Original-Logo), Burger-Animation, Marquee, Partner, Ueber uns, Footer, Mobile === */
.logo{background:#fff;border-radius:10px;padding:7px 12px;width:auto;display:inline-flex;align-items:center}
.logo img{height:34px;width:143px;max-width:none;object-fit:contain;object-position:left center}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Logo-Durchlaeufer */
.marquee{background:var(--dark-2);border-bottom:1px solid var(--w12);overflow:hidden;padding:22px 0}
.mq-track{display:flex;align-items:center;gap:70px;width:max-content;animation:mq 26s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-track .mi{display:flex;align-items:center;gap:12px;flex:none}
.mq-track .mi b{font-size:1.25rem;color:#fff;opacity:.8;letter-spacing:.08em;white-space:nowrap}
.mq-track .mi img{height:44px;width:auto;background:#fff;border-radius:8px;padding:7px 12px}

/* Partner-/Zertifikat-Sektion (ThermoSol-Stil) */
.partnersec{background:#fff}
.partnersec .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.partnersec .badge-img{height:110px;width:auto;margin-bottom:26px}
.cert-frame{border:1.5px dashed #cdd5de;border-radius:18px;aspect-ratio:4/3;display:grid;place-items:center;text-align:center;color:var(--muted);padding:30px;background:var(--soft)}
.cert-frame svg{margin:0 auto 12px;color:var(--orange)}

/* Ueber uns + Video-Platzhalter */
.about{background:var(--dark-1)}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.video-ph{position:relative;aspect-ratio:16/9;border-radius:18px;background:var(--dark-3);border:1.5px dashed rgba(255,255,255,.25);display:grid;place-items:center;text-align:center;color:var(--w72);padding:20px}
.video-ph .play{width:74px;height:74px;border-radius:50%;background:var(--orange);display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 12px 30px rgba(240,103,12,.4)}
.about .fact{display:flex;gap:12px;align-items:flex-start;margin-top:14px}
.about .fact svg{color:var(--orange);flex:none;margin-top:4px}
.about .fact b{color:#fff}
.about .fact span{color:var(--w72);font-size:.95rem}

/* Footer aufgeraeumt */
.fo-row{display:flex;gap:12px;align-items:flex-start;padding:7px 0;color:var(--w72);font-size:.94rem}
.fo-row svg{color:var(--orange);flex:none;margin-top:3px}
.oh-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--w12);font-size:.94rem;color:var(--w72)}
.oh-row b{color:#fff;font-weight:700}
.oh-row.closed span{color:var(--w55)}

/* Floating Call-Button (mobil) */
.call-fab{position:fixed;right:16px;bottom:16px;z-index:150;width:58px;height:58px;border-radius:50%;background:var(--orange);display:none;place-items:center;box-shadow:0 14px 34px rgba(240,103,12,.5);color:#fff}
.call-fab:active{transform:scale(.95)}

@media(max-width:760px){
  .call-fab{display:grid}
  
  .topbar .soc{display:none}
  .topbar .ti .addr{display:inline-flex !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
  .topbar .ti{flex-wrap:nowrap;gap:12px;font-size:.78rem;overflow:hidden}
  .topbar .wrap{gap:0}
  .partnersec .wrap,.about .wrap{grid-template-columns:1fr;gap:34px}
  .mq-track{gap:44px}
}
@media(min-width:761px) and (max-width:1020px){.partnersec .wrap,.about .wrap{grid-template-columns:1fr;gap:40px}}
/* Produkt-Renders: quadratische Bildflaeche, ganzes Geraet sichtbar */
.pcard .pimg:has(img.contain){aspect-ratio:1/1}
.pcard .pimg img.contain{padding:22px}
.menu a{white-space:nowrap}

/* === v9: ECHTER Sticky-Header (Wrapper klebt, Topbar rutscht raus) === */
#hdr{position:sticky;top:-42px;z-index:95}
@media(max-width:760px){#hdr{top:-38px}}

/* Logo zurueck wie vorher (weiss, ohne Kachel) */
.logo{background:transparent;border-radius:0;padding:0;width:178px;display:block}
.logo img{height:42px;width:178px}

/* Hero dynamisch: Ken-Burns + Einflug */
.hero3 .bg img{animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.6%,-1.2%)}}
.hero3 .inner>*{opacity:0;animation:heroIn .9s cubic-bezier(.2,.7,.3,1) forwards}
.hero3 .inner>*:nth-child(1){animation-delay:.1s}
.hero3 .inner>*:nth-child(2){animation-delay:.25s}
.hero3 .inner>*:nth-child(3){animation-delay:.4s}
.hero3 .inner>*:nth-child(4){animation-delay:.55s}
.hero3 .inner>*:nth-child(5){animation-delay:.7s}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Premium-Partner-Strip (Energiewerke-Stil) */
.pstrip{background:var(--dark-2);border-bottom:1px solid var(--w12);position:relative}
.pstrip .wrap{display:flex;align-items:center;gap:40px;padding-top:0;padding-bottom:0;min-height:110px;flex-wrap:wrap}
.pstrip .brands{display:flex;align-items:center;gap:48px;flex-wrap:wrap;flex:1;padding:24px 0}
.pstrip .brands .bw{font-weight:700;letter-spacing:.06em;white-space:nowrap;font-size:1.7rem;color:#fff;opacity:.92}
.pstrip .brands .bw.viessmann{color:#ff3e17;font-size:1.9rem;letter-spacing:.1em}
.pstrip .brands .bw small{display:block;font-size:.62rem;color:var(--w55);letter-spacing:.18em;font-weight:400;text-transform:uppercase}
.pstrip .pcardo{background:linear-gradient(135deg,var(--orange),#c94e07);border-radius:0 0 18px 18px;padding:26px 30px;color:#fff;max-width:300px;font-weight:700;line-height:1.5;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:10px}
.pstrip .pcardo svg{width:30px;height:30px}
@media(max-width:1020px){.pstrip .pcardo{border-radius:14px;margin:0 0 22px;max-width:none;width:100%}.pstrip .brands{justify-content:center}}

/* Karten-Facade (Kontakt) */
.map-facade{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;cursor:pointer;background:linear-gradient(135deg,#e8eef5,#f4f7fb);display:grid;place-items:center;text-align:center;color:var(--muted)}
.map-facade:hover{border-color:var(--orange)}
.map-facade .pin{width:60px;height:60px;border-radius:50%;background:var(--orange);display:grid;place-items:center;margin:0 auto 12px;box-shadow:0 12px 28px rgba(240,103,12,.4);color:#fff}
.map-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* VX3-Groessen: natuerliche Proportionen (Groessenunterschied sichtbar) */
.pimg.natural{aspect-ratio:auto !important;height:270px;background:#fff;align-items:end !important;display:flex !important;justify-content:center;padding-bottom:0}
.pimg.natural img{height:auto;max-height:230px;width:auto;max-width:82%;object-fit:contain;padding:0 !important;margin-bottom:20px}
/* Fix: Consent-Checkbox links neben dem Text (nicht darueber) */
.field.consent{flex-direction:row;align-items:flex-start;gap:10px}
.field.consent input{width:auto;margin-top:4px}
/* Karte: volle Adresse als feste Zeile unter der Karte */
.map-facade.loaded{display:flex;flex-direction:column;cursor:default;place-items:initial}
.map-facade.loaded iframe{position:static;flex:1;width:100%;min-height:0}
.map-addr{background:#fff;border-top:1px solid var(--line);padding:11px 14px;font-size:.88rem;color:var(--ink-2);display:flex;align-items:center;gap:8px;flex:none}
.map-addr b{color:var(--ink)}

/* === v11: Dynamischer Logo-Durchlaeufer im Partner-Strip === */
.pstrip .mqwrap{overflow:hidden;flex:1;padding:26px 0;min-width:0}
.pstrip .mq-track{display:flex;align-items:center;gap:34px;width:max-content;animation:mq 30s linear infinite}
.pstrip .mqwrap:hover .mq-track{animation-play-state:paused}
.lgp{flex:none;display:flex;align-items:center;background:#fff;border-radius:12px;padding:10px 20px;height:62px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.lgp img{height:42px;width:auto;max-width:190px;object-fit:contain}
.lgp b{font-size:1.25rem;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.lgp b.vred{color:#ff3e17;letter-spacing:.1em}
.lgp small{display:block;font-size:.6rem;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;font-weight:400}

/* Zukunftspartner-Auszeichnung (Kachel nachgebaut, ohne fremde Urkunde) */
.award{position:relative;aspect-ratio:1/1;max-width:430px;margin:0 auto;background:linear-gradient(135deg,#050505,#232323 55%,#0c0c0c);border-radius:6px;box-shadow:var(--shadow);display:flex;align-items:flex-end;padding:28px;overflow:hidden}
.award .vmark{position:absolute;inset:-4% 0 0 0;display:grid;place-items:center;font-size:17rem;font-weight:700;line-height:1;color:transparent;background:linear-gradient(115deg,#3d3d3d 20%,#7a7a7a 50%,#1c1c1c 80%);-webkit-background-clip:text;background-clip:text;user-select:none}
.award .alabel{position:relative;color:#fff;font-size:1.15rem;letter-spacing:.02em}
.award .vtop{position:absolute;top:18px;right:20px;color:#ff3e17;font-weight:700;letter-spacing:.12em;font-size:.82rem}
.award-cap{margin-top:14px;text-align:center;font-size:.92rem;color:var(--muted)}
.award-cap b{color:var(--ink)}

/* Referenzen-Galerie: Bilder vollstaendig (Masonry statt Beschnitt) */
.gallery{display:block;columns:3;column-gap:18px}
.gitem{aspect-ratio:auto;margin-bottom:18px;break-inside:avoid;display:block}
.gitem img{width:100%;height:auto}
@media(max-width:1020px){.gallery{columns:2}}
@media(max-width:640px){.gallery{columns:1}}
/* ============================================================
   WordPress-Theme — Ergaenzungen zum Stylesheet der Vorschau
   ============================================================ */

/* --- Schrift selbst ausliefern -------------------------------
   Statt fonts.googleapis.com. Ein Google-Fonts-Einbindung uebertraegt
   die IP jedes Besuchers in die USA — LG Muenchen I, 20.01.2022,
   Az. 3 O 17493/20. Der Kunde sitzt in Muenchen.
   font-display:swap = Text ist sofort lesbar, die Schrift tauscht
   sich nach, sobald sie da ist. Ohne swap bleibt der Text unsichtbar,
   bis die Datei geladen hat.
   unicode-range = der latin-Block; deutsche Umlaute sind darin. */
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/oxygen-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oxygen-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Sprung zum Inhalt ---------------------------------------
   Fuer Tastatur- und Screenreader-Nutzer: sonst muss man sich bei
   jedem Seitenaufruf durch die komplette Navigation tabben. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--orange);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Klassen, die in der Vorschau noch Inline-Styles im JS waren --- */
.topbar .addr { display: inline-flex; align-items: center; gap: 7px; }
.topbar .hrs  { color: var(--w55); }
footer .foot-grid > div > p { max-width: 36ch; color: var(--w72); }
footer .fo-row a.inline { display: inline; padding: 0; }
footer a.foot-link { margin-top: 10px; }

/* --- Cookie-Banner und Pop-up --------------------------------
   Beide werden serverseitig gerendert und mit [hidden] versteckt,
   nicht per JavaScript erzeugt. Klemmt ein Skript, ist der
   Einwilligungs-Banner trotzdem da — bei einem Consent-Banner ist
   das ein rechtlicher Unterschied, kein Detail.
   [hidden] braucht das !important, weil .cookie ein display setzt
   und sonst gewinnt. */
.cookie[hidden],
.modal[hidden] { display: none !important; }

/* --- Formular-Rueckfall --------------------------------------
   Falls Gravity Forms mal deaktiviert ist, steht hier die
   Telefonnummer statt eines rohen Shortcode-Textes. */
.form-fallback {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}
.form-fallback a { color: var(--orange); font-weight: 700; }

/* --- Gravity Forms an das Layout angleichen -------------------
   Das Plugin bringt eigene Styles mit, die hier abgeschaltet sind
   (gform_disable_form_theme_css). Damit das Formular aussieht wie
   die Seite und nicht wie Gravity Forms, wird sein Markup hier auf
   dieselben Bausteine gezogen, die auch die Vorschau nutzt. */
.gform_wrapper form { display: block; }

.gform_wrapper .gfield { margin-bottom: 16px; }

.gform_wrapper .gfield_label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}

.gform_wrapper .gfield_required { color: var(--orange); }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color .16s, box-shadow .16s;
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(240, 103, 12, .14);
}

.gform_wrapper textarea { min-height: 110px; resize: vertical; }

/* Auswahl-Kacheln (Personen im Haushalt, Dachneigung ...) —
   das Formular ist ein mehrstufiger Rechner, keine Liste von
   Radiobuttons. Die Kacheln machen daraus etwas Klickbares. */
.gform_wrapper .gfield_radio { display: grid; gap: 10px; }

@media (min-width: 560px) {
  .gform_wrapper .gfield_radio { grid-template-columns: repeat(2, 1fr); }
}

.gform_wrapper .gchoice {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .16s, background .16s;
}
.gform_wrapper .gchoice:hover { border-color: var(--orange); }

.gform_wrapper .gchoice input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.gform_wrapper .gchoice label {
  display: block;
  padding: 14px 16px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.gform_wrapper .gchoice:has(input:checked) {
  border-color: var(--orange);
  background: rgba(240, 103, 12, .06);
}

/* Zustimmung: Haekchen LINKS neben dem Text, nicht darueber.
   ACHTUNG, hier lag ein Fehler: Das flex gehoert auf den CONTAINER, nicht
   auf das Label. Auf dem Label wird dieses selbst zum Flex-Container und
   zerreisst seinen eigenen Fliesstext in Einzelteile — "Ich habe die",
   "Datenschutzerklaerung" und "gelesen und stimme..." standen mit Luecken
   nebeneinander. Gravity Forms nennt den Container .ginput_container_consent. */
.gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gform_wrapper .ginput_container_consent input[type="checkbox"] {
  width: auto;
  margin: 3px 0 0;
  flex: none;
}
.gform_wrapper .ginput_container_consent label {
  display: block;          /* NICHT flex — sonst zerfaellt der Satz */
  font-weight: 400;
  font-size: .84rem;
  color: var(--muted);
  padding: 0;
  margin: 0;
  line-height: 1.55;
}
.gform_wrapper .ginput_container_consent a {
  color: var(--orange);
  text-decoration: underline;
}

/* Pflichtfeld-Marke: der Entwurf zeigt kein "(Required)".
   Gravity Forms schreibt den Text aus; ich ersetze ihn durch einen
   dezenten Stern — die Information bleibt, der Laerm geht. Fuer
   Screenreader bleibt aria-required am Feld erhalten. */
.gform_wrapper .gfield_required_text { display: none; }
.gform_wrapper .gfield_required::after {
  content: "*";
  color: var(--orange);
  margin-left: 2px;
  font-weight: 700;
}

/* Datumsfeld: das Kalender-Icon von Gravity Forms haengt als <img>
   unter dem Feld statt darin. Weg damit — der Browser bringt seinen
   eigenen Datumswaehler mit. */
.gform_wrapper .ginput_container_date img.ui-datepicker-trigger { display: none; }
.gform_wrapper .ginput_container_date input { width: 100%; }

/* Knoepfe */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 0;
  border-radius: 10px;
  padding: 15px 26px;
  cursor: pointer;
  transition: background .16s, transform .16s;
}
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button {
  width: 100%;
  background: var(--orange);
  color: #fff;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover { background: var(--orange-600); }

.gform_wrapper .gform_previous_button {
  background: transparent;
  color: var(--muted);
  padding-left: 0;
}

/* Fortschritt des mehrstufigen Formulars */
.gform_wrapper .gf_progressbar_wrapper { margin-bottom: 22px; }
.gform_wrapper .gf_progressbar {
  background: var(--line);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.gform_wrapper .gf_progressbar_percentage {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: 99px;
  transition: width .3s ease;
}
.gform_wrapper .gf_progressbar_title {
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: 8px;
}

/* Fehler- und Bestaetigungsmeldungen */
.gform_wrapper .validation_message {
  font-size: .78rem;
  color: #c0392b;
  margin-top: 5px;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea { border-color: #c0392b; }

.gform_confirmation_message {
  text-align: center;
  padding: 30px 20px;
  color: var(--ink);
  font-weight: 700;
}

/* Auf dunklem Grund (Formular im Beratungs-Block) */
.sec-dark .gform_wrapper .gfield_label,
.sec-dark .gform_wrapper .gchoice label { color: var(--ink); }

/* ============================================================
   Theme-Klassen — ersetzen die Inline-Styles der Vorschau.
   In der statischen Vorschau standen diese Regeln als style=""
   im HTML bzw. im JavaScript. Im Theme gehoeren sie hierher:
   sonst stehen dieselben Werte in mehreren Templates und laufen
   beim ersten Aendern auseinander.
   ============================================================ */

/* Abstands-Helfer (waren style="margin-top:14px" usw.) */
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-30 { margin-top: 30px; }

/* Partner-Strip: Beschriftung vor dem Logo */
.logos-label {
  font-size: .68rem;
  color: var(--w55);
  letter-spacing: .14em;
  text-transform: uppercase;
  align-self: center;
}

/* Ueber uns */
.about-text { margin-top: 14px; color: var(--w72); }
.about-cta  { margin-top: 26px; }
.about-img  { width: 100%; border-radius: var(--radius); display: block; }
.about h2   { color: #fff; }

/* Nur eine Karte in der Mini-Reihe (Elektrikerservice) */
.svc-mini.single { grid-template-columns: 1fr; }

/* Video: erst auf Klick laden ------------------------------- */
.js-video { cursor: pointer; }
.js-video:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* Produkt-Highlight: Abspiel-Knopf ueber dem Standbild */
.product .ph { position: relative; background: #000; }
.product .ph img { opacity: .92; background: #fff; }

.ph-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.ph-play > span {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 34px rgba(240, 103, 12, .5);
  transition: transform .18s;
}
.js-video:hover .ph-play > span { transform: scale(1.07); }

.ph-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 18px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: #fff;
  font-size: .85rem;
  text-align: center;
  pointer-events: none;
}

/* Sobald das Video laeuft, sind Knopf und Beschriftung weg */
.js-video.playing .ph-play,
.js-video.playing .ph-cap { display: none; }

/* Google-Kurzhinweis im Beratungs-Block */
.google-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: .84rem;
  color: var(--muted);
  transition: border-color .16s;
}
.google-mini:hover { border-color: var(--orange); }
.google-mini b { color: var(--ink); font-size: .95rem; }
.google-mini svg { color: #fbbc04; fill: #fbbc04; }

/* Kleingedruckter Hinweis (war style="font-size:.78rem;color:...") */
.hinweis {
  margin-top: 16px;
  font-size: .78rem;
  color: var(--w55);
}

/* Abschluss-Band: Knopfgruppe (war ein style="display:flex...") */
.cta-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* Kontaktdaten im Beratungs-Block sind jetzt echte Links */
.contact-info { margin-top: 28px; }
.contact-info .ci b a { color: inherit; }
.contact-info .ci b a:hover { color: var(--orange); }

/* Karte: Klick-Fassade ---------------------------------------
   .map-facade bringt Rahmen, Seitenverhaeltnis und den Pin schon mit,
   auch ".map-facade iframe" ist definiert. Hier fehlt nur, was die
   Fassade bedienbar macht. */
.js-map:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.map-facade b { color: var(--ink); }
.map-hint { font-size: .82rem; }
.map-hint a { color: var(--orange); text-decoration: underline; }

/* ============================================================
   ANGEBOTS-PANEL (#angebot) — Gravity Forms in der Optik des Entwurfs
   ------------------------------------------------------------
   Der Entwurf hat das Quiz nur nachgestellt (.opt3/.opt3grid/.qsl/.prog,
   siehe oben im Stylesheet). Im WordPress ist es das echte Gravity-Forms-
   Formular mit eigenem Markup. Statt das Design zu aendern, wird GF hier
   auf dieselben Werte gezogen.

   EIN Unterschied im Bau ist unvermeidlich: Im Entwurf ist .opt3
   gleichzeitig Kachel UND Flex-Container. Bei GF liegt dazwischen noch
   das <label> (an ihm haengt das for= auf den Radio). Also:
   .gchoice = die Kachel, das <label> darin = der Flex-Container.
   Das kommt uns entgegen — so fuellt das Label die ganze Kachel und die
   GESAMTE Flaeche ist klickbar, nicht nur Icon und Text.

   Icons, Beschriftung, Schritt-Kreise und Fusszeile kommen aus
   inc/angebot-rechner.php. Die Kachel-Optik haengt an .pe-opt, damit sie
   nur die Bild-Fragen trifft und nicht die Anrede auf der Kontaktseite.
   ============================================================ */

/* Die Frage: gross, mittig, wie .quiz2 .q */
.quiz2 .gform_wrapper .gfield_label,
.quiz2 .gform_wrapper legend.gfield_label {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: 26px;
  line-height: 1.25;
}

/* Kachel-Raster: vier Spalten wie .opt3grid — inklusive der Haltepunkte
   des Entwurfs (1020 px und 760 px). */
.quiz2 .gform_wrapper .pe-opt .gfield_radio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Zwei Antworten (Tageszeit) — wie .opt3grid.two */
.quiz2 .gform_wrapper .pe-opt-two .gfield_radio {
  grid-template-columns: repeat(2, 1fr);
  max-width: 480px;
  margin: 0 auto;
}

@media (max-width: 1020px) {
  .quiz2 .gform_wrapper .pe-opt .gfield_radio { grid-template-columns: repeat(2, 1fr); }
}

/* Die Kachel: die Werte von .opt3.
   ------------------------------------------------------------
   Zur Selektor-Laenge: Das ".gfield_radio" in der Mitte ist NICHT
   Zierde. Das Bild-Plugin gestaltet dieselbe Kachel mit
   ".pc_image_choice.pcafe_imgp_col_auto .gfield_radio .gchoice" — vier
   Klassen, genauso viele wie ohne den Zusatz hier. Bei Gleichstand
   gewinnt das zuletzt geladene Blatt, und das ist das des Plugins.
   Ergebnis waeren wieder feste 150 px Kacheln in einem 188 px breiten
   Rasterfeld. Das Theme bestellt das Blatt zwar ab (s.
   pe_rechner_plugin_css_abbestellen()), aber diese Regeln sollen auch
   dann stimmen, wenn es doch einmal geladen wird.
   ".gfield_radio" ist dafuer die richtige Wahl: Es ist eine Klasse von
   Gravity Forms selbst und daher immer da — an eine Plugin-Klasse wie
   ".pc_image_choice" duerfte man sich nicht haengen, sonst faellt die
   Kachel-Optik in dem Moment auseinander, in dem das Plugin geht. */
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice {
  position: relative;
  /* width und margin raeumen die festen 150px/16px des Plugins weg,
     damit die Kachel ihr Rasterfeld ausfuellt. */
  width: auto;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: .18s;
}
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice:has(input:checked) {
  border-color: var(--orange);
  background: #fff3ea;
}
/* Der Radio ist ausgeblendet — ohne diese Regel waere die Kachel bei
   Tastaturbedienung voellig unsichtbar fokussiert. */
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Das Label ist Flex-Container und Klickflaeche in einem.
   border:0 nimmt den zweiten, eckigen Rahmen weg, den das Bild-Plugin um
   jedes Label zieht — das war der "Doppelrahmen". */
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 24px 14px 20px;
  margin: 0;
  border: 0;
  text-align: center;
  cursor: pointer;
}

/* Der Radio verschwindet nur OPTISCH. Er bleibt im Formular, bleibt
   fokussierbar und bleibt das, was abgeschickt wird. display:none haette
   ihn aus der Tab-Reihenfolge geworfen — die Kachel waere ohne Maus
   unerreichbar. */
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

/* Der orange Icon-Kreis — Werte 1:1 aus .opt3 .qi */
.quiz2 .gform_wrapper .pe-opt .gfield_radio .qi {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff3ea;
  color: var(--orange);
  display: grid;
  place-items: center;
  transition: .18s;
  flex: none;
}
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice:hover .qi,
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice:has(input:checked) .qi {
  background: var(--orange);
  color: #fff;
}

/* Fette Zahl + Unterzeile — Werte 1:1 aus .opt3 b und .opt3 small */
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice b {
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.2;
}
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice small {
  color: var(--muted);
  font-size: .8rem;
}

/* Rueckfall: Haette eine Antwort einmal keine Zuordnung in
   angebot-rechner.php, rendert das Bild-Plugin weiter sein Kachel-Bild.
   Dann wenigstens in Kreisgroesse und ohne den Kasten des Plugins. */
.quiz2 .gform_wrapper .pe-opt .gfield_radio .gchoice img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
  border: 0;
  padding: 0;
}

/* Fuer die Anrede (Herr/Frau) auf der Kontaktseite steht hier bewusst
   NICHTS: Sie ist kein Bildkachel-Feld, bekommt also kein .pe-opt und
   faellt damit auf die allgemeine Radio-Optik des Themes zurueck
   (.gform_wrapper .gchoice, ~Zeile 694) — dieselben Pillen wie im
   Terminformular. Genau richtig. Ein eigener Block dafuer waere nicht nur
   ueberfluessig, er waere WIRKUNGSLOS: Gravity Forms bringt fuer
   .gf_list_inline eine eigene Regel gleicher Spezifitaet mit und laedt
   nach dem Theme — bei Gleichstand gewinnt GF. (Nachgemessen: eine
   flex-Regel hier blieb ohne Wirkung, display blieb block.) */

/* Die Fusszeile: "Zurueck" links, Zaehler rechts — wie .quiz2 .foot.
   GF legt beides in den Seitenfuss, genau dort, wo der Entwurf sein
   .foot hat. */
.quiz2 .gform_wrapper .gform_page_footer,
.quiz2 .gform_wrapper .gform_footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

/* Der Absenden-Knopf der Kontaktseite steht ueber der Fusszeile und nimmt
   die volle Breite — wie der .btn-block des Entwurfs in Schritt 5. */
.quiz2 .gform_wrapper .gform_footer .gform_button {
  order: -1;
  width: 100%;
}

/* "Zurueck" in der Optik von .quiz2 .back */
.quiz2 .gform_wrapper .gform_previous_button {
  background: none;
  border: 0;
  padding: 0;
  width: auto;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: .9rem;
}
.quiz2 .gform_wrapper .gform_previous_button:hover { color: var(--orange); }

/* Der Zaehler steht rechts — auch auf Seite 1, wo es kein "Zurueck" gibt */
.quiz2 .gform_wrapper .qcount {
  margin-left: auto;
  color: var(--muted);
  font-size: .84rem;
}

/* Nur noch ein Rueckfall: Der Weiter-Knopf bleibt stehen, wenn das
   Auto-Advance-Addon einmal nicht laeuft (s. pe_rechner_seite_springt()).
   Im Normalfall gibt es ihn gar nicht. */
.quiz2 .gform_wrapper .gform_next_button { width: auto; min-width: 200px; }

/* Die Kontaktfelder im letzten Schritt sollen nicht kleben */
.quiz2 .gform_wrapper .gform_page:last-child .gfield_label {
  font-size: .82rem;
  text-align: left;
  margin-bottom: 7px;
  font-weight: 700;
}

/* ============================================================
   ABSTAENDE — gegen das "gequetschte" Gefuehl
   ------------------------------------------------------------
   Die Vorschau hatte an mehreren Stellen Inline-Abstaende, die beim
   Port nicht mitkamen, und Gravity Forms setzt eigene, engere Werte.
   ============================================================ */

/* Formularfelder brauchen Luft */
.gform_wrapper .gfield { margin-bottom: 20px; }
.gform_wrapper .gform_footer { margin-top: 26px; }

/* Aufzaehlungen in Produktkarten und Vorteilsblöcken */
.pcard .pbd ul { margin-top: 12px; display: grid; gap: 7px; }
.pcard .pbd ul li { font-size: .86rem; }

/* Checkliste: Zeilen sassen zu eng */
.checklist li { margin-bottom: 14px; }

/* Abschnitte auf den portierten Unterseiten */
.phero + section { padding-top: 70px; }
.contact-split { gap: 46px; }
.adv-grid { gap: 46px; }

/* Die frueheren Regeln gegen den "Doppelrahmen" um die Kachel-Bilder
   stehen hier nicht mehr: Das Bild-Plugin kommt im Rechner gar nicht mehr
   zum Zug (inc/angebot-rechner.php ersetzt den Label-Inhalt), also
   entsteht auch kein Kasten, den man wieder wegraeumen muesste.
   Eine der Regeln war ausserdem gefaehrlich geworden:
   ".gchoice .gfield-choice-input + label > *" mit background:none !important
   traf JEDES direkte Kind des Labels — und damit auch den orangen
   Icon-Kreis .qi, dem sie die Fuellung weggenommen haette.

   Die Regeln fuer .gf_progressbar_title sind ebenfalls weg: Die
   GF-Prozentleiste wird komplett durch die Schritt-Kreise (.qsl) des
   Entwurfs ersetzt, ihr Titel existiert nicht mehr. */

/* ============================================================
   POP-UP — die schlanke .mform-Optik des Entwurfs
   Drei Felder mit Platzhaltern, Knopf ueber die volle Breite.
   Ein Pop-up, das ungefragt aufgeht, darf kein Formular-Marathon sein.
   ============================================================ */
.modal-box .gform_wrapper .gfield { margin-bottom: 12px; }
.modal-box .gform_wrapper .gfield_label,
.modal-box .gform_wrapper .gform_required_legend { display: none; }

.modal-box .gform_wrapper input[type="text"],
.modal-box .gform_wrapper input[type="tel"],
.modal-box .gform_wrapper input[type="email"] {
  background: var(--soft);
  border: 1px solid transparent;
  padding: 14px 16px;
}
.modal-box .gform_wrapper input:focus { background: #fff; border-color: var(--orange); }

.modal-box .gform_wrapper .gform_footer { margin-top: 16px; }
.modal-box .gform_wrapper .gform_button { width: 100%; }

.mform-hinweis {
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 4px 0 0;
}
.mform-hinweis a { color: var(--orange); text-decoration: underline; }

/* ============================================================
   MOBIL — kein seitliches Wegrutschen der Seite
   ------------------------------------------------------------
   Befund (gemessen bei 375 px): Die Seite war 441 px breit, 66 px zu
   viel. Der Entwurf hat das mit overflow-x:hidden am body zugedeckt.
   Das ist keine Loesung: Der Inhalt bleibt zu breit, man sieht es nur
   nicht mehr — und jeder kuenftige Ausreisser verschwindet genauso
   lautlos. Die Zeile ist raus (s. body ganz oben), hier steht die
   Ursache.

   ES WAR GENAU EIN ELEMENT: der Knopf "Alle Bewertungen auf Google
   ansehen" im Bewertungs-Abschnitt — 417 px breit.
   Warum: .btn traegt white-space:nowrap (richtig fuer kurze
   Beschriftungen wie "Referenzen", die nicht mitten im Wort brechen
   sollen) plus 30 px Innenabstand links und rechts. Bei 35 Zeichen
   Beschriftung ergibt das 417 px, die nirgends umbrechen duerfen.

   Das Laufband (.mq-track, 706 px breit) war NICHT die Ursache,
   obwohl es weit aus dem Fenster ragt: Es sitzt in .mqwrap mit
   overflow:hidden, wird also geclippt und schiebt die Seite nicht auf.
   Ein Element, das aus dem Fenster ragt, ist nur dann ein Verursacher,
   wenn ueber ihm KEIN clippender Rahmen liegt — sonst jagt man das
   Falsche.
   ============================================================ */

/* Ein Knopf darf nie breiter sein als der Platz, den er hat. */
.btn { max-width: 100%; }

@media (max-width: 620px) {
  /* Auf schmalen Geraeten darf die Beschriftung umbrechen. Zwei Zeilen
     Knopf sind besser als eine Seite, die seitlich wegrutscht. */
  .btn { white-space: normal; }
}

/* ============================================================
   KOPFZEILE — der abgeschnittene "Jetzt anfragen"-Knopf
   ------------------------------------------------------------
   BEFUND (gemessen, nicht geschaetzt):
   Die Navigationszeile braucht  Logo 178 + Menue 872 + CTA 322 + 2x18
   Luecke = 1408 px. Ihr Rahmen .wrap ist aber auf max-width:1200px
   gedeckelt, innen also 1152 px. Der Header quillt damit bei JEDER
   Fensterbreite um ~256 px aus seinem Rahmen.

   Das erklaert auch, warum es "erst ab 1440 px" auffiel: Oberhalb von
   1200 px wird der Rahmen nicht mehr breiter — der Ueberlauf ragt
   einfach ueber den Rahmen hinaus und wurde vom breiten Fenster
   aufgefangen. Bei 1680 px "passte" der Knopf also nur zufaellig. Ein
   hoeherer Umschaltpunkt allein haette das NIE geloest.

   Das Menue ist der Brocken: 7 Punkte, deutsche Komposita in
   Grossbuchstaben ("ELEKTRIKERSERVICE" allein 154 px), 0,14em Sperrung,
   26 px Luecken.

   DIE ENTSCHEIDUNG — drei Stellschrauben, bewusst in dieser Reihenfolge:

   1. Die Kopfzeile bekommt einen EIGENEN, breiteren Rahmen (1400 px).
      Sie ist eine Leiste, kein Fliesstext — sie darf die Breite nutzen,
      die der Bildschirm hergibt. Das ist die einzige Stellschraube, die
      Platz SCHAFFT statt Pixel abzuschaben. Alles andere waere
      Millimeterarbeit, die beim naechsten umbenannten Menuepunkt wieder
      bricht.
      ⚠️ Preis, den Robert kennen muss: Logo und CTA sitzen ab 1400 px
      etwa 100 px weiter aussen als der Textinhalt darunter. Die Leiste
      ist dann bewusst breiter als das Raster.

   2. Das Menue wird MASSVOLL kompakter: Luecke 26→18, Sperrung
      0,14→0,08em, Schrift 0,8→0,78rem. Grossbuchstaben, orange
      Unterstreichung und dunkle Leiste bleiben — der Charakter also auch.
      Spart ~120 px.

   3. Der Burger kommt frueher: ab 1280 px statt 1020 px. Zwischen 1020
      und 1280 waren sieben gesperrte Grossbuchstaben-Punkte neben Logo,
      Telefon und CTA ohnehin ein Gedraenge. Der CTA-Knopf BLEIBT dabei
      sichtbar (nur Menue und Telefontext weichen) — er ist der Grund,
      warum die Leiste existiert.

   Ergebnis (nachgerechnet):
     <=1280 px          Burger. CTA sichtbar.
     1281-1399 px       volles Menue, Telefon nur als Symbol.
                        Bedarf ~1201 px, vorhanden ab 1233 px.
     >=1400 px          volles Menue, volle Nummer.
                        Bedarf ~1286 px, vorhanden 1352 px.
   ============================================================ */

/* 1. Eigener Rahmen fuer die Leiste — Topbar und Navigation gemeinsam,
      sonst laegen die beiden Zeilen der Kopfzeile nicht mehr uebereinander. */
.topbar .wrap,
.wrap.nav { max-width: 1400px; }

/* 2. Massvoll kompakter */
.menu { gap: 18px; }
.menu a { font-size: .78rem; letter-spacing: .08em; }

/* 3. Burger ab 1280 statt 1020 */
@media (max-width: 1280px) {
  .menu, .nav-cta .phone { display: none; }
  .burger { display: block; }
  .menu.open {
    display: flex; position: absolute; top: 84px; left: 0; right: 0;
    flex-direction: column; background: var(--dark-1);
    border-bottom: 1px solid var(--w12); padding: 14px 24px; gap: 2px;
    box-shadow: var(--shadow); z-index: 70;
  }
  .menu.open a { padding: 14px 0; border-bottom: 1px solid var(--w12); width: 100%; }
  .menu.open a::after { display: none; }
}

/* Mittlere Breiten: Nummer weicht, Symbol bleibt. Der Link bleibt ein
   Anruf-Link (aria-label traegt die Nummer, s. header.php). Die volle
   Nummer steht in dieser Lage weiterhin in der Topbar darueber. */
@media (min-width: 1281px) and (max-width: 1399px) {
  .nav-cta .phone .nr { display: none; }
}

/* ============================================================
   ANKERSPRUENGE — nicht unter der klebenden Leiste landen
   ------------------------------------------------------------
   #hdr klebt (position:sticky) und die Navigationszeile ist 84 px hoch.
   Ein Sprung auf #ueber-uns setzt die Oberkante des Abschnitts auf die
   Oberkante des Fensters — die Leiste liegt dann darueber und verdeckt
   die Ueberschrift. Weder Entwurf noch Theme hatten dagegen etwas.

   Vorher fiel es kaum auf, weil aus der Navigation nur ganze SEITEN
   verlinkt waren. Seit "Über uns" (und "Leistungen" in den Brotkrumen)
   auf Abschnitte der Startseite zeigen, trifft es die zwei Ziele, die
   am haeufigsten angesprungen werden.

   scroll-padding-top am <html> statt scroll-margin-top an jedem
   Abschnitt: eine Regel, und sie gilt fuer JEDEN Anker — auch fuer die
   aus dem Hero ("Unsere Leistungen"), der Fusszeile und kuenftige.
   90 px = 84 px Leiste + etwas Luft.
   ============================================================ */
html { scroll-padding-top: 90px; }