/*
 * Kopf, Navigation und Fußzeile der öffentlichen Seiten (Auftrag 6, P6N).
 *
 * Eigene Datei statt shop.css: Kopf und Fußzeile gehören P6N, die übrigen
 * öffentlichen Gestaltungen P2S – so ändern zwei Pakete nie dieselbe Datei.
 * Geladen NACH shop.css. Farben aus den Variablen in shop.css (:root).
 *
 *   ab 901 px  Zeile 1 Leistungen, Zeile 2 Shop; Mega-Menüs per Maus/Tastatur
 *   bis 900 px Handy: Kopfzeile + Suche kleben oben, Menü als details-Element
 *
 * Ausblenden je Breite über Klassen (nv-ab-gross, nv-kat-n), nie über
 * Positionen – deterministisch, kein Layoutsprung (wie ND-NAV, E-9463).
 * Klickflächen mindestens 44 px (Lighthouse target-size, Messung vorher).
 */
.nv-kopf{--nv-text:#14213a;--nv-leise:#4b5a6e;--nv-linie:#e2e8f0;--nv-flaeche:#eff5fc;--nv-fokus:#1e6fd9;
    position:relative;z-index:45;background:#fff}
.nv-kopf .nv-ic{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nv-kopf ul{list-style:none;margin:0;padding:0}
.nv-kopf a,.nv-kopf button,.nv-kopf summary{-webkit-tap-highlight-color:transparent}
.nv-kopf a:focus-visible,.nv-kopf button:focus-visible,.nv-kopf summary:focus-visible,.nv-kopf input:focus-visible,
footer a:focus-visible{outline:3px solid var(--nv-fokus,#1e6fd9);outline-offset:2px;border-radius:6px}
.nv-unsichtbar{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nv-sprung{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--navy);color:#fff;padding:.75rem 1rem;border-radius:8px;font-weight:700}
.nv-sprung:focus{top:.5rem}
main#inhalt:focus{outline:none}
.nv-kopf summary{list-style:none;cursor:pointer}
.nv-kopf summary::-webkit-details-marker{display:none}

/* ── Zeile 1 ─────────────────────────────────────────────────────────── */
.nv-zeile1{border-bottom:1px solid var(--nv-linie);position:relative;z-index:3}
.nv-z1{display:flex;align-items:center;gap:1rem;min-height:76px;position:relative}
.nv-logo{display:flex;align-items:center;flex:0 1 auto;min-width:0;min-height:44px}
/* Reicht die Breite nicht, schrumpft das Logo – nie der Menü-Knopf (E-10325) */
.nv-logo picture{display:block;min-width:0}
.nv-logo img{height:52px;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block}
/* overflow-x:clip als Absicherung: ein zu langer Punkt wird abgeschnitten statt „Termin buchen“
   zu überdecken; y bleibt sichtbar für die Hover-Brücke, Polster für den Fokusrahmen (E-10326) */
.nv-leistungen{flex:1;min-width:0;overflow-x:clip;padding-inline:6px;margin-inline:-6px}
.nv-liste{display:flex;align-items:center;gap:.2rem;flex-wrap:nowrap}
.nv-punkt{position:static}
.nv-punkt>a,.nv-punkt>.nv-ausloeser{display:flex;align-items:center;gap:.35rem;min-height:44px;padding:0 .85rem;border-radius:9999px;
    color:var(--nv-text);font:inherit;font-size:.93rem;font-weight:650;white-space:nowrap;background:none;border:0;cursor:pointer}
.nv-punkt>a:hover,.nv-punkt>.nv-ausloeser:hover{background:var(--nv-flaeche);color:var(--navy)}
.nv-punkt.aktiv>a,.nv-punkt.aktiv>.nv-ausloeser{background:var(--nv-flaeche);color:var(--navy);font-weight:800}
.nv-hat-mega>a::after,.nv-hat-mega>.nv-ausloeser::after{content:"";width:.38em;height:.38em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-.12em) rotate(45deg);opacity:.6;margin-left:.15rem}
/* unsichtbare Brücke, damit das Menü beim Herunterfahren mit der Maus nicht zuklappt (E-9452) */
.nv-hat-mega>a,.nv-hat-mega>.nv-ausloeser{position:relative}
.nv-hat-mega>a::before,.nv-hat-mega>.nv-ausloeser::before{content:"";position:absolute;left:0;right:0;top:100%;height:1rem}
.nav-badge{display:inline-block;background:var(--accent);color:var(--navy);border-radius:999px;padding:0 .45rem;font-size:.7rem;font-weight:800;line-height:1.5;margin-left:.3rem;text-transform:lowercase}

.nv-aktionen{display:flex;align-items:center;gap:.55rem;margin-left:auto;flex:0 0 auto}
.nv-termin{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:0 1.15rem;border-radius:9999px;background:var(--accent);
    color:var(--navy-dark);font-weight:800;font-size:.95rem;white-space:nowrap;box-shadow:0 8px 18px rgba(207,138,18,.25)}
.nv-termin:hover{background:#f7b64a}
.nv-termin .nv-kurz{display:none}
.nv-telefon{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;min-width:44px;justify-content:center;padding:0 .8rem;border-radius:9999px;
    color:var(--navy);font-weight:750;font-size:.93rem;white-space:nowrap;border:1px solid rgba(16,42,77,.16)}
.nv-telefon:hover{background:var(--nv-flaeche)}

/* Klappmenü (Login): details-Element, geht ohne JavaScript */
.nv-klapp{position:relative}
.nv-klapp>summary{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .9rem;border-radius:9999px;border:1px solid rgba(16,42,77,.16);
    color:var(--navy);font-weight:750;font-size:.93rem;white-space:nowrap;background:#fff}
.nv-klapp>summary::after{content:"";width:.36em;height:.36em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.12em) rotate(45deg);opacity:.6}
.nv-klapp>summary:hover,.nv-klapp[open]>summary{background:var(--nv-flaeche)}
.nv-klapp-inhalt{position:absolute;right:0;top:calc(100% + .45rem);z-index:70;min-width:270px;background:#fff;border:1px solid var(--nv-linie);border-radius:12px;
    box-shadow:0 16px 36px rgba(16,42,77,.16);padding:.45rem}
.nv-klapp-kopf{color:var(--nv-leise);font-size:.8rem;padding:.45rem .7rem;border-bottom:1px solid var(--nv-linie);margin-bottom:.3rem}
.nv-klapp-inhalt a,.nv-klapp-inhalt button{display:flex;flex-direction:row;align-items:center;gap:.55rem;width:100%;min-height:44px;padding:.45rem .7rem;border-radius:8px;
    color:var(--navy);font:inherit;font-size:.92rem;background:none;border:0;cursor:pointer;text-align:left}
.nv-klapp-inhalt a:has(small){flex-direction:column;align-items:flex-start;gap:0}
.nv-klapp-inhalt small{color:var(--nv-leise);font-size:.78rem}
.nv-klapp-inhalt a:hover,.nv-klapp-inhalt button:hover{background:var(--bg-2)}
.nv-klapp-inhalt form{margin:0}
.nv-klapp-neu{border-top:1px solid var(--nv-linie);margin-top:.3rem;font-weight:700}

/* ── Mega-Menüs ──────────────────────────────────────────────────────── */
.nv-mega{position:absolute;top:100%;left:1.25rem;right:1.25rem;z-index:60;display:none;background:#fff;border:1px solid var(--nv-linie);border-radius:0 0 14px 14px;
    box-shadow:0 22px 44px rgba(16,42,77,.16);padding:1.4rem;max-height:calc(100vh - 9rem);overflow-y:auto}
/* Maus: Hover. Tastatur: :focus-visible innerhalb (E-9453). Knopf ohne Übersicht: Fokus nach Klick. */
.nv-hat-mega:hover>.nv-mega,.nv-hat-mega:has(:focus-visible)>.nv-mega,.nv-hat-mega:has(>.nv-ausloeser:focus)>.nv-mega{display:block}
.nv-hat-mega.nv-zu>.nv-mega{display:none!important}
.nv-mega-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.5rem}
.nv-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
.nv-kacheln a{display:flex;flex-direction:column;gap:.1rem;min-height:44px;padding:.65rem .8rem;border-radius:10px;color:var(--navy)}
.nv-kacheln a:hover{background:var(--nv-flaeche)}
.nv-kacheln b{font-size:.98rem}
.nv-kacheln span{color:var(--nv-leise);font-size:.84rem;line-height:1.4}
.nv-mega-seite{border-left:1px solid var(--nv-linie);padding-left:1.4rem;display:flex;flex-direction:column;gap:.25rem}
.nv-mega-titel{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nv-leise);margin:.2rem 0 .2rem}
.nv-werkzeuge a{display:flex;flex-direction:column;min-height:44px;justify-content:center;padding:.35rem .6rem;border-radius:8px;color:var(--navy)}
.nv-werkzeuge a:hover,.nv-einfach a:hover{background:var(--nv-flaeche)}
.nv-werkzeuge b{font-size:.92rem}
.nv-werkzeuge span{color:var(--nv-leise);font-size:.8rem}
.nv-einfach a{display:flex;align-items:center;min-height:44px;padding:0 .6rem;border-radius:8px;color:var(--navy);font-size:.9rem}
.nv-mega-fuss{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:auto;padding-top:.8rem}
.nv-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.2rem;border-radius:9999px;background:var(--accent);color:var(--navy-dark);font-weight:800}
.nv-knopf:hover{background:#f7b64a}
.nv-mehr{color:var(--blue-dark);font-weight:700;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.nv-mega-kopf{display:flex;align-items:center;gap:1.5rem;margin-bottom:1rem;font-weight:800;color:var(--navy)}
.nv-mega-kopf>span:first-child{margin-right:auto}
.nv-mega-kopf a{color:var(--blue-dark);font-size:.86rem;font-weight:700}
.nv-mega-kopf .nv-mwst,.nv-mwst-handy{font-weight:600;font-size:.82rem;color:var(--nv-leise);margin:0}
.nv-mwst-handy{display:block;margin-top:.5rem}
.nv-mwst-handy a{color:var(--blue-dark);text-decoration:underline;text-underline-offset:2px}
.nv-mega-spalten{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.2rem 2rem}
.nv-mega-spalte a{display:block;color:var(--nv-leise);font-size:.88rem;padding:.3rem 0}
.nv-mega-spalte a:hover{color:var(--blue-dark)}
.nv-mega-spalte .nv-spaltentitel{color:var(--navy);font-weight:800;font-size:.9rem;border-bottom:2px solid var(--accent);padding:0 0 .35rem;margin-bottom:.35rem;display:inline-block}

/* ── Zeile 2 ─────────────────────────────────────────────────────────── */
.nv-zeile2{background:var(--bg-2);border-bottom:1px solid var(--nv-linie);position:relative;z-index:2}
.nv-z2{display:flex;align-items:center;gap:.8rem;min-height:64px;position:relative}
.nv-shop{flex:0 1 auto;min-width:0;overflow-x:clip;padding-inline:6px;margin-inline:-6px}
.nv-shop .nv-punkt>a{font-size:.9rem}
.nv-kat>a{max-width:12rem;overflow:hidden;text-overflow:ellipsis;display:block;line-height:44px}
.nv-kat{display:none}
/* Sammelbestellung (nur mit Schalter an) direkt in Zeile 2 erst ab 1180 px, sonst über das Shop-Menü (E-10326) */
.nv-shop .nav-sammel{display:none}
.nv-suche{position:relative;flex:1 10 360px;min-width:220px;display:flex;align-items:center;background:#fff;border:2px solid rgba(16,42,77,.2);border-radius:9999px;
    padding:3px 4px 3px 0;box-shadow:0 6px 18px rgba(11,32,56,.05)}
.nv-suche:focus-within{border-color:var(--blue)}
.nv-suche input{flex:1;min-width:0;height:44px;border:0;background:transparent;padding:0 1.1rem;font:inherit;font-size:1rem;font-weight:600;color:var(--nv-text);outline:none}
.nv-suche input::placeholder{color:#64748b;font-weight:400}
.nv-suche input::-webkit-search-cancel-button{cursor:pointer}
.nv-suche button{display:inline-flex;align-items:center;gap:.4rem;height:44px;min-width:44px;justify-content:center;padding:0 1.1rem;border:0;border-radius:9999px;
    background:var(--accent);color:var(--navy-dark);font:inherit;font-weight:800;cursor:pointer}
.nv-suche button:hover{background:#f7b64a}
.nv-z2-rechts{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.nv-z2-rechts .preisart{height:44px;background:#fff}
.nv-korb{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;min-width:44px;border-radius:9999px;color:var(--navy);font-weight:800}
.nv-korb-gross{padding:0 1.1rem;background:var(--navy);color:#fff}
.nv-korb-gross:hover{background:var(--navy-dark)}
.nv-anzahl{display:inline-flex;align-items:center;justify-content:center;min-width:1.4rem;height:1.4rem;padding:0 .35rem;border-radius:999px;background:var(--accent);
    color:var(--navy-dark);font-size:.78rem;font-weight:800;line-height:1}
.nv-nur-handy{display:none}
.nv-menue{display:none}

/* Vorschläge der Suche */
.nv-vorschlaege{position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:80;background:#fff;border:1px solid var(--nv-linie);border-radius:14px;
    box-shadow:0 18px 40px rgba(16,42,77,.18);padding:.4rem;max-height:min(70vh,560px);overflow-y:auto}
.nv-vorschlaege[hidden]{display:none}
.nv-vg-titel{font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nv-leise);padding:.55rem .7rem .25rem}
.nv-vorschlag{display:flex;align-items:center;gap:.7rem;min-height:44px;padding:.4rem .7rem;border-radius:9px;color:var(--navy);cursor:pointer}
.nv-vorschlag img{width:36px;height:36px;object-fit:contain;border-radius:6px;background:#f8fafc;flex:0 0 36px}
.nv-vorschlag .t{font-weight:650;font-size:.93rem;line-height:1.3}
.nv-vorschlag .s{display:block;color:var(--nv-leise);font-size:.8rem;font-weight:400}
.nv-vorschlag:hover,.nv-vorschlag[aria-selected=true]{background:var(--nv-flaeche)}
.nv-vorschlag mark{background:none;color:inherit;font-weight:800}
.nv-v-alle{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:.3rem;border-top:1px solid var(--nv-linie);color:var(--blue-dark);font-weight:700;font-size:.9rem}
.nv-v-leer{padding:.8rem;color:var(--nv-leise);font-size:.9rem}

/* Breiten: erst ab genug Platz zusätzliche Punkte (Klassen, keine Positionen) */
.nv-ab-gross{display:none}
.nv-tel-nr{display:none}
@media(min-width:1180px){.nv-ab-gross{display:block}.nv-kat-1,.nv-kat-2{display:block}.nv-shop .nav-sammel{display:block}}
@media(min-width:1280px){.nv-tel-nr{display:inline}}
/* Mit Sammelbestellung rücken die Kategorien eine Stufe später nach (Container endet bei 1240 px, E-10326) */
@media(min-width:1180px) and (max-width:1279px){.nv-mit-sammel .nv-kat-1{display:none}}
@media(min-width:1180px){.nv-mit-sammel .nv-kat-2{display:none}}
@media(min-width:901px) and (max-width:1100px){
    .nv-punkt>a,.nv-punkt>.nv-ausloeser{padding:0 .6rem;font-size:.9rem}
    .nv-z2-rechts .preisart-lbl{display:none}
    .nv-mega-raster{grid-template-columns:minmax(0,1fr) 250px}
}

/* ── Handy ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
    .nv-kopf{position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(16,42,77,.08)}
    .nv-z1{min-height:58px;height:58px;gap:.4rem;padding-left:16px;padding-right:12px}
    .nv-logo img{height:40px}
    .nv-leistungen,.nv-konto,.nv-shop,.nv-z2-rechts{display:none}
    .nv-aktionen{gap:.3rem}
    .nv-termin{min-height:44px;padding:0 .8rem;font-size:.9rem;box-shadow:none}
    .nv-termin .nv-lang{display:none}
    .nv-termin .nv-kurz{display:inline}
    .nv-telefon{padding:0;width:44px;border:0}
    .nv-tel-nr{display:none!important}
    .nv-nur-handy{display:inline-flex;width:44px}
    .nv-korb .nv-anzahl{position:absolute;top:2px;right:0;min-width:1.15rem;height:1.15rem;font-size:.7rem}
    .nv-menue{display:block}
    .nv-menue>summary{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;color:var(--navy);
        font-size:.66rem;font-weight:800;gap:1px}
    .nv-menue>summary:hover,.nv-menue[open]>summary{background:var(--nv-flaeche)}
    .nv-menue .nv-ic-zu{display:none}
    .nv-menue[open] .nv-ic-zu{display:block}
    .nv-menue[open] .nv-ic-auf{display:none}
    .nv-menue-inhalt{position:fixed;left:0;right:0;top:58px;bottom:0;z-index:90;overflow-y:auto;overscroll-behavior:contain;background:#fff;
        padding:1rem 16px calc(2rem + env(safe-area-inset-bottom));border-top:1px solid var(--nv-linie)}
    body:has(.nv-menue[open]){overflow:hidden}
    .nv-knopf-gross{display:flex;width:100%;min-height:52px;font-size:1.02rem;margin-bottom:1rem}
    .nv-bereich{border:1px solid var(--nv-linie);border-radius:14px;padding:.9rem .9rem .6rem;margin-bottom:1rem}
    .nv-bereich-shop{background:var(--bg-2)}
    .nv-bereich-titel{font-size:1.15rem;font-weight:800;color:var(--navy);margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem}
    .nv-bereich-titel::before{content:"";width:6px;height:1.1em;border-radius:3px;background:var(--accent)}
    .nv-bereich-shop .nv-bereich-titel::before{background:var(--blue)}
    .nv-unter-titel{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nv-leise);margin:.8rem 0 .2rem}
    .nv-bereich .nv-kacheln{grid-template-columns:1fr 1fr;gap:.4rem}
    .nv-bereich .nv-kacheln a{background:var(--bg-2);min-height:64px;padding:.6rem .7rem}
    .nv-bereich .nv-kacheln span{font-size:.78rem}
    .nv-zeilen li+li{border-top:1px solid var(--nv-linie)}
    .nv-zeilen{margin-top:.3rem}
    .nv-zeilen a,.nv-zeilen button{display:flex;align-items:center;gap:.5rem;width:100%;min-height:48px;padding:0 .3rem;color:var(--navy);font:inherit;font-size:.98rem;
        background:none;border:0;text-align:left;cursor:pointer}
    .nv-zeilen form{margin:0}
    .nv-preis-handy{margin-top:.6rem;height:auto;min-height:44px;justify-content:flex-start;flex-wrap:wrap;background:#fff;
        border:1px solid var(--nv-linie);border-radius:12px;padding:.2rem .7rem;order:0;flex-basis:auto}
    .nv-preis-handy button{min-height:44px}
    .nv-zeile2{background:#fff;border-bottom:1px solid var(--nv-linie)}
    .nv-z2{min-height:0;padding:0 16px 10px}
    .nv-suche{flex:1 1 100%;min-width:0;box-shadow:none}
    .nv-suche input{font-size:16px} /* kein Zoom beim Antippen (iOS) */
    .nv-suche button{padding:0 .9rem}
    .nv-suche .nv-lang{display:none}
    .nv-vorschlaege{left:-8px;right:-8px;max-height:calc(100vh - 140px)}
}
/* Gängige Handys (360–414 px): Logo, Termin, Warenkorb und Menü müssen nebeneinander passen.
   Das Telefon steht im Handy-Menü („Kontakt & Login“) und weicht hier (Review P6N, E-10325). */
@media(max-width:420px){
    .nv-telefon{display:none}
    .nv-logo img{height:34px}
    .nv-z1{gap:.3rem;padding-right:8px}
}
/* Sehr schmal (320 px): „Termin“ nur als Symbol, der Text bleibt für Screenreader */
@media(max-width:359px){
    .nv-termin{padding:0;width:44px;justify-content:center}
    .nv-termin .nv-kurz{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* ── Fußzeile ────────────────────────────────────────────────────────── */
footer{background:var(--navy-dark);color:#c3d3e8;margin-top:2rem}
footer ul{list-style:none;margin:0;padding:0}
.fz-oben{padding:2.5rem 0 1.5rem}
.fz-raster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem}
footer .spaltentitel{color:#fff;font-size:.98rem;font-weight:800;margin:0 0 .7rem}
footer a{color:#c3d3e8}
footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fz-spalte li a{display:inline-flex;align-items:center;min-height:32px;font-size:.88rem;padding:.1rem 0}
.fz-spalte .motto{color:var(--accent);font-weight:800;font-size:1rem;margin:0 0 .5rem}
.fz-spalte address{font-style:normal;font-size:.88rem;line-height:1.6;margin:0 0 .4rem}
.fz-unternehmen .foot-referenzen{margin-top:1rem}
.fz-unternehmen .foot-referenzen .spaltentitel{font-size:.88rem;margin:0 0 .3rem}
.fz-unternehmen .foot-referenzen a{display:flex;align-items:center;min-height:32px;font-size:.88rem}
.fz-unten{border-top:1px solid #21344f;padding:1rem 0;font-size:.82rem;color:#9fb3cc}
.fz-unten .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
@media(max-width:1100px){.fz-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){
    .fz-raster{grid-template-columns:1fr 1fr;gap:1.5rem 1rem}
    .fz-spalte li a,.fz-unternehmen .foot-referenzen a{min-height:44px}
    .fz-unternehmen{grid-column:1/-1}
    /* ND-05 (E-9051): Rechtliches mobil über die volle Breite, zweispaltig */
    footer .foot-rechtliches{grid-column:1/-1;columns:auto}
    footer .foot-rechtliches ul{columns:2;column-gap:1rem}
    footer .foot-rechtliches li{break-inside:avoid}
}