/* =====================================================================================================================
   navi.css – neue Navigation (ENTWURF Phase 4, Frage 202 a: „Hybrid als Entwurf zeigen“), Präfix nv-
   Baut auf stil.css auf (.topbar, .nav, .nav-in, .brand, .btn, .burger bleiben) und ergänzt:
   – Desktop: „Gewerke“ als Knopf mit dreispaltiger Tafel (drei Gruppen), daneben Photovoltaik, Neubau, Über uns, Kontakt
   – Handy: Logo · Anruf-Knopf · „Anfrage“ · Menü; im Menü „Gewerke“ als Akkordeon in drei Gruppen, Rest flach
   – klebende Leiste unten auf dem Handy (Anrufen | Anfrage), erscheint erst nach dem Kopf, verschwindet am Formular
   – neue Fußzeile (Innenausbau/Allgemein): Gewerke-Zeile mit allen 13 Fachseiten, Jobs, ohne „Sanierungen“
   Kein requestAnimationFrame; Bewegung nur über Übergänge, bei prefers-reduced-motion aus.
   ===================================================================================================================== */

/* ---------- Kopfzeile Desktop ---------- */
.nv .nav-links{gap:26px}
.nv-gw{position:relative}
.nv-gw-knopf{display:inline-flex;align-items:center;gap:.4em;background:none;border:0;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:.74rem;letter-spacing:.03em;
  color:var(--ink);padding:6px 0;border-bottom:3px solid transparent;transition:border-color .2s}
.nv-gw-knopf:hover,.nv-gw-knopf.on,.nv-gw.offen .nv-gw-knopf{border-color:var(--olive)}
.nv-gw-knopf svg{width:10px;height:10px;transition:transform .25s}
.nv-gw.offen .nv-gw-knopf svg{transform:rotate(180deg)}

.nv-tafel{position:absolute;left:50%;top:calc(100% + 22px);width:min(860px,calc(100vw - 48px));
  transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px rgba(16,14,24,.16);
  padding:26px 28px 22px;transition:opacity .22s,transform .22s,visibility 0s .22s;z-index:120}
.nv-tafel::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}/* Brücke für die Maus */
.nv-gw.offen .nv-tafel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .22s,transform .22s,visibility 0s}
.nv-tafel-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.nv-gruppe{min-width:0}
.nv-gruppe-titel{font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;font-size:.66rem;
  letter-spacing:.16em;color:var(--olive);margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.nv-gruppe a,.nv .nav-links .nv-gruppe a{display:block;text-decoration:none;color:var(--ink);font-family:'Poppins',sans-serif;
  font-weight:500;text-transform:none;letter-spacing:-.01em;font-size:.95rem;padding:7px 10px;margin:0 -10px;
  border:0;border-radius:8px;transition:background .18s,color .18s}
.nv-gruppe a:hover,.nv-gruppe a:focus-visible,.nv .nav-links .nv-gruppe a:hover{background:var(--olive-wash);color:var(--olive-dk)}
.nv-gruppe a.on,.nv .nav-links .nv-gruppe a.on{color:var(--olive-dk);font-weight:600}
.nv-tafel-fuss{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.nv-tafel-fuss a,.nv .nav-links .nv-tafel-fuss a{padding:0;border:0;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:.7rem;
  letter-spacing:.04em;color:var(--olive-dk);text-decoration:none}
.nv-tafel-fuss a:hover{text-decoration:underline}

/* Anruf-Knopf in der Kopfzeile: nur auf dem Handy (Desktop hat die Servicezeile darüber) */
.nv-anruf{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--olive);color:var(--olive);flex:0 0 auto;text-decoration:none}
.nv-anruf svg{width:19px;height:19px;fill:currentColor}
.nv-anfrage-mob{display:none}

@media(max-width:1180px){.nv .nav-links{gap:18px}.nv .nav-in{gap:18px}}
@media(max-width:1060px){.nv .nav-links a[data-nur-breit]{display:none}}
@media(max-width:960px){
  .nv .nav-in{gap:10px}
  .nv .burger{margin-left:0}
  .nv-anruf{display:inline-flex;margin-left:auto}
  .nv>.nav-in>.btn.nv-anfrage-mob{display:inline-flex;padding:12px 15px;font-size:.7rem}
}
/* Schriftzug neben dem Logo erst ab 481 px: mit Schriftzug brauchen Logo, Anruf, „Anfrage“ und Menü samt Rand 454 px
   (bis 20.10.2026 hier 400 px – zwischen 401 und 430 px lief der Kopf über, z. B. 414 und 430 px breite Handys) */
@media(max-width:480px){.nv .brand span{display:none}}
@media(max-width:400px){.nv>.nav-in>.btn.nv-anfrage-mob{padding:12px 13px}}

/* ---------- Menü Handy ---------- */
.nv-mob{padding:18px 24px 120px}
.nv-mob .nv-mob-gw{border-bottom:1px solid var(--line)}
.nv-mob .nv-mob-gw summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.35rem;letter-spacing:-.02em;
  padding:16px 0;color:var(--ink)}
.nv-mob .nv-mob-gw summary::-webkit-details-marker{display:none}
.nv-mob .nv-mob-gw summary svg{width:16px;height:16px;transition:transform .25s;flex:0 0 auto}
.nv-mob .nv-mob-gw[open] summary svg{transform:rotate(180deg)}
.nv-mob .nv-gruppe{margin:4px 0 14px}
.nv-mob .nv-gruppe-titel{border:0;padding:0;margin:10px 0 4px}
.nv-mob .nv-gruppe a{font-family:'Poppins',sans-serif;font-weight:500;text-transform:none;font-size:1.05rem;
  letter-spacing:0;padding:10px 12px;margin:0 -12px;border:0}
.nv-mob .nv-mob-alle{display:inline-block;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:.74rem!important;letter-spacing:.04em;color:var(--olive-dk)!important;border:0!important;padding:4px 0 16px!important}
.nv-mob-tel{display:flex!important;align-items:center;gap:.5em;color:var(--olive)!important}
.nv-mob-tel svg{width:22px;height:22px;fill:currentColor}
.nv-mob-zeit{font-size:.84rem;color:var(--muted);margin:8px 0 0}
.nv-mob a.btn{display:flex;justify-content:center;padding:19px 24px;border:0;color:#fff;font-size:.85rem;letter-spacing:.02em}

/* ---------- Klebende Leiste unten (Handy) ---------- */
.nv-dock{display:none}
@media(max-width:760px){
  .nv-dock{display:grid;grid-template-columns:1fr 1.25fr;gap:8px;position:fixed;left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:90;padding:8px;border-radius:16px;
    background:rgba(16,14,24,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 18px 40px rgba(16,14,24,.32);transform:translateY(140%);transition:transform .38s cubic-bezier(.16,1,.3,1)}
  .nv-dock.zeigen{transform:none}
  .nv-dock a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:50px;border-radius:11px;
    text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;font-size:.78rem;
    letter-spacing:.02em}
  .nv-dock svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
  .nv-dock-tel{color:#fff;border:1.5px solid rgba(255,255,255,.28)}
  .nv-dock-anfrage{background:var(--olive);color:#fff;position:relative;overflow:hidden}
  /* wandernder Lichtschein auf „Anfrage“ (cta-lieber-zu-gross) */
  .nv-dock-anfrage::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg)}
  .nv-dock.zeigen .nv-dock-anfrage::after{animation:nv-schein 3.6s 1s ease-in-out infinite}
  body.nv-hat-dock .foot{padding-bottom:110px}
}
@keyframes nv-schein{0%{left:-60%}38%,100%{left:130%}}

/* ---------- Fußzeile (neu) ---------- */
.nv-foot .foot-grid{grid-template-columns:1.3fr 1fr 1fr 1.15fr}
.nv-foot-gewerke{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:44px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);font-size:.84rem}
.nv-foot-gewerke>span{color:rgba(255,255,255,.42);margin-right:4px}
.nv-foot-gewerke a{display:inline;color:rgba(255,255,255,.62);text-decoration:none;padding:0}
.nv-foot-gewerke a:hover{color:#fff;text-decoration:underline}
.nv-foot-gewerke+.foot-orte{margin-top:18px;padding-top:0;border-top:0}
.nv-foot .nv-foot-zeit{margin:0;padding:5px 0}
@media(max-width:820px){.nv-foot .foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.nv-foot .foot-grid{grid-template-columns:minmax(0,1fr)}}

@media(prefers-reduced-motion:reduce){
  .nv-tafel,.nv-gw-knopf svg,.nv-dock,.nv-mob .nv-mob-gw summary svg{transition:none}
  .nv-dock.zeigen .nv-dock-anfrage::after{animation:none}
}