/* ── NF-R99: Hauptmenue (Branched Menu) ─────────────────────────────────────────────────────
   Gemeinsame Stilvorlage zu js/hauptmenue.js fuer alle NorthFrame-Seiten. Farben aus den
   Seitentokens (--bg, --text, --gold, --gold-light); die Beispielpalette der Vorlage ist nicht
   uebernommen. Milchglas: echter backdrop-filter, mit deckender Rueckfallflaeche ohne ihn. ── */
.hm-schleier,.hm-panel{--hm-tinte:var(--text,#eef0f4);--hm-gold:var(--gold-light,#c49a56);
  --hm-gold-tief:var(--gold,#a07840);--hm-grund:var(--bg,#06090f);
  --hm-leise:color-mix(in srgb,var(--hm-tinte) 64%,transparent);
  --hm-linie:color-mix(in srgb,var(--hm-gold-tief) 38%,var(--hm-grund));
  --hm-ease:cubic-bezier(.23,1,.32,1)}
/* Hintergrundsperre. Die Rinne der Bildlaufleiste bleibt nur dann reserviert, wenn die Leiste
   vorher wirklich Platz belegt hat (Klasse hm-rinne, gesetzt vom Skript) - so aendert sich die
   Inhaltsbreite beim Oeffnen in keinem Fall: klassische Leiste -> Rinne bleibt, Overlay-Leiste
   oder keine Leiste -> keine Rinne. */
html.hm-offen{overflow:hidden!important}
html.hm-offen.hm-rinne{scrollbar-gutter:stable}

.hm-schleier{position:fixed;inset:0;z-index:1290;background:rgba(3,6,12,.42);opacity:0;
  transition:opacity .3s ease}
.hm-schleier.hm-auf{opacity:1}
.hm-schleier[hidden],.hm-panel[hidden]{display:none}

.hm-panel{position:fixed;inset:0;z-index:1300;display:flex;flex-direction:column;
  color:var(--hm-tinte);font-family:'Inter',system-ui,sans-serif;
  background:
    radial-gradient(120% 60% at 100% 0%,color-mix(in srgb,var(--hm-gold) 10%,transparent),transparent 60%),
    color-mix(in srgb,var(--hm-grund) 66%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.25);backdrop-filter:blur(24px) saturate(1.25);
  opacity:0;transform:translateY(10px);
  transition:opacity .28s ease,transform .36s var(--hm-ease)}
.hm-panel.hm-auf{opacity:1;transform:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hm-panel{background:color-mix(in srgb,var(--hm-grund) 96%,transparent)}
}
/* Ab 700 px: Schublade am rechten Rand, die Seite bleibt links sichtbar (verwischt). */
@media (min-width:700px){
  .hm-panel{left:auto;width:min(440px,100vw);transform:translateX(26px);
    border-left:1px solid color-mix(in srgb,var(--hm-gold) 26%,transparent);
    box-shadow:-28px 0 70px rgba(0,0,0,.34)}
  .hm-panel.hm-auf{transform:none}
}

.hm-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) 18px 10px 28px;flex:0 0 auto;
  border-bottom:1px solid color-mix(in srgb,var(--hm-gold) 16%,transparent)}
.hm-titel{margin:0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hm-gold)}
.hm-zu{width:46px;height:46px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--hm-tinte) 16%,transparent);
  background:color-mix(in srgb,var(--hm-tinte) 7%,transparent);color:var(--hm-tinte);cursor:pointer;
  transition:background .2s,border-color .2s}
@media (hover:hover) and (pointer:fine){
  .hm-zu:hover{background:color-mix(in srgb,var(--hm-tinte) 13%,transparent);
    border-color:color-mix(in srgb,var(--hm-gold) 50%,transparent)}
}

/* Der lange Baum scrollt im Menue, nie die Seite dahinter. */
.hm-rolle{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:18px 22px max(28px,env(safe-area-inset-bottom)) 28px}

/* ── Der Baum ── */
.hm-baum{position:relative;display:flex;flex-direction:column;padding-left:16px;max-width:380px}
.hm-baum::before{content:'';position:absolute;top:10px;bottom:6px;left:0;width:2px;border-radius:1px;
  background:linear-gradient(to bottom,var(--hm-linie) 0%,var(--hm-linie) 70%,transparent 100%)}
.hm-marke{position:absolute;top:0;left:0;z-index:1;width:2px;height:18px;border-radius:1px;
  background:var(--hm-gold);opacity:0;transition:top .22s var(--hm-ease),opacity .15s ease}
.hm-marke[data-an]{opacity:1}
.hm-sektion{display:flex;flex-direction:column}
.hm-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:48px;margin:0;padding:11px 4px 11px 0;border:0;background:none;
  color:var(--hm-leise);font:inherit;font-size:17px;font-weight:500;line-height:1.3;text-align:left;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .2s ease}
.hm-sektion[data-offen] .hm-kopfzeile,.hm-kopfzeile[aria-current]{color:var(--hm-tinte)}
.hm-kopfzeile[aria-current]{color:var(--hm-gold)}
.hm-pfeil{flex:0 0 auto;opacity:.7;transition:transform var(--hm-fold,.3s) var(--hm-ease)}
.hm-sektion[data-offen] .hm-pfeil{transform:rotate(180deg)}
.hm-koerper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--hm-ease)}
.hm-sektion[data-offen] .hm-koerper{grid-template-rows:1fr}
.hm-falte{min-height:0;overflow:hidden}
.hm-ast{position:relative;padding:2px 0 8px}
.hm-linien{position:absolute;top:0;left:0;overflow:visible;opacity:0;pointer-events:none;
  transition:opacity .2s ease}
.hm-sektion[data-offen] .hm-linien{opacity:1;transition:opacity .25s ease .1s}
.hm-grund,.hm-pfad{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hm-grund{stroke:var(--hm-linie)}
.hm-pfad{stroke:var(--hm-gold);transition:stroke-dashoffset .45s var(--hm-ease)}
/* Eintraege: Tastflaeche mindestens 44 px; der Text bricht innerhalb seiner Spalte um (ab 40 px),
   die Aeste enden davor - Linie und Text beruehren sich nie. */
.hm-eintrag{display:flex;align-items:flex-start;gap:8px;min-height:44px;padding:11px 4px 11px 40px;
  box-sizing:border-box;color:var(--hm-leise);font-size:15.5px;line-height:1.35;text-decoration:none;
  -webkit-tap-highlight-color:transparent;transition:color .2s ease}
.hm-text{flex:1 1 auto;min-width:0}
.hm-neu{flex:0 0 auto;font-size:13px;opacity:.7;padding-top:1px}
.hm-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hm-eintrag[aria-current]{color:var(--hm-gold);font-weight:500}
@media (hover:hover) and (pointer:fine){
  .hm-kopfzeile:hover,.hm-eintrag:hover{color:var(--hm-tinte)}
  .hm-eintrag[aria-current]:hover{color:var(--hm-gold)}
}
.hm-kopfzeile:focus-visible,.hm-eintrag:focus-visible,.hm-zu:focus-visible,.hm-cta:focus-visible,
.hm-knopf:focus-visible{outline:2px solid var(--hm-gold,#c49a56);outline-offset:2px;border-radius:10px}
.hm-zu:focus-visible{border-radius:50%}

.hm-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:26px 0 0 16px;
  padding:0 26px;border-radius:999px;background:var(--gold,#a07840);color:var(--on-gold,#0b0e14);
  font-weight:600;font-size:15px;text-decoration:none;transition:background .2s}
@media (hover:hover) and (pointer:fine){.hm-cta:hover{background:var(--gold-light,#c49a56)}}

/* ── Schreibtischknopf in der Navigationsleiste ── */
/* Absolut neben dem CTA (Lage setzt das Skript als right) - kein Flexkind der Leiste. */
.hm-traeger{position:relative}
.hm-knopf{position:absolute;top:50%;margin:-19px 0 0;right:auto;
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;
  flex:0 0 auto;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold-light,#c49a56) 40%,transparent);
  background:color-mix(in srgb,var(--text,#eef0f4) 5%,transparent);color:var(--text,#eef0f4);
  font:inherit;font-size:13.5px;font-weight:500;letter-spacing:.01em;cursor:pointer;white-space:nowrap;
  transition:background .2s,border-color .2s}
.hm-knopf[hidden]{display:none}
.hm-knopf-icon{display:inline-flex;flex-direction:column;gap:3px;width:14px}
.hm-knopf-icon i{display:block;height:1.5px;border-radius:1px;background:currentColor}
.hm-knopf-icon i:nth-child(2){width:10px}
.hm-knopf-icon i:nth-child(3){width:12px}
@media (hover:hover) and (pointer:fine){
  .hm-knopf:hover{background:color-mix(in srgb,var(--text,#eef0f4) 11%,transparent);
    border-color:var(--gold-light,#c49a56)}
}

@media (prefers-reduced-motion:reduce){
  .hm-panel,.hm-schleier,.hm-marke,.hm-koerper,.hm-pfad,.hm-pfeil,.hm-linien{transition:none!important}
  .hm-panel{transform:none!important}
}

/* Der Einwilligungsstreifen (z-index 2000) tritt zurueck, solange das Menue offen ist, und kommt
   beim Schliessen von selbst wieder - wie bisher auf der Startseite fuer das alte Mobilmenue. */
html.hm-offen .nf-ew{display:none!important}

/* Knapper Platz zwischen letztem Link und CTA: nur das Symbol, 38 x 38. */
.hm-knopf.hm-knopf--knapp{width:38px;padding:0;justify-content:center}
.hm-knopf.hm-knopf--knapp .hm-knopf-text{display:none}

/* ── NF-R108: Rueckmeldung beim Antippen (alle Hauptseiten; diese Stilvorlage ist auf jeder eingebunden) ──────────
   Befund: das eckige blaue Feld beim Antippen von Links und Schaltflaechen ist die native Tipp-Hervorhebung des
   Browsers (-webkit-tap-highlight-color, Android/Chrome) - keine Regel des Projekts; ein eigenes :focus ohne
   :focus-visible gibt es nur an Formularfeldern. Sie folgt nicht der Rundung der Elemente und nicht den Farben.
   Ersetzt wird sie nur dort, wo es um Beruehrung geht: die native Flaeche wird durchsichtig, und das angetippte
   Element selbst gibt eine kurze, leise Rueckmeldung (Deckkraft) - in seiner eigenen Form und Farbe.
   Unveraendert: Tastaturfokus (alle :focus-visible-Regeln bleiben), Textauswahl, Zoom, Formularfeldfokus. */
html{-webkit-tap-highlight-color:transparent}
/* NF-R109: Drueckfeedback statt pauschaler Abdunkelung (opacity .72 aus NF-R108). Jede Art reagiert in ihrer eigenen
   Form und Farbe - fuer Finger, Maus und Stift gleich (:active), ohne Layoutsprung:
   - gefuellte Knoepfe (Gold und andere Fuellfarben): die Fuellung wird kurz etwas dunkler;
   - umrandete Knoepfe, Chips, Pfeile, Akkordeons, Schnellmenue: leichte Flaechentoenung und goldener Rand;
   - Textverweise: Goldton und Unterstreichung.
   Die Toenung folgt dem border-radius des Elements (Hintergrund, Rand, Filter - keine eigene Flaeche). Dauerhafte
   Auswahl (ist-aktiv, aria-current, :checked) bleibt staerker und gewinnt; deaktivierte und sendende Knoepfe
   (:disabled, aria-disabled, aria-busy) reagieren nicht. Tastaturfokus bleibt bei den :focus-visible-Regeln.
   Eigenstaendige Beispiel-Websites binden diese Stilvorlage nicht ein und bleiben unberuehrt. */
:where(.btn-primary,.nav-cta,.pricing-cta,.wv-preis-cta,.pd-preis-cta,.btn-next,.kurzform-submit,.bf-senden,.ab-p-anfrage,
  .pz-br-knopf,.zt-br-knopf,.ab-s-anfrage,.hm-cta,.ang2-knopf,.wv-serien-cta,.wv-display-cta):not(.pricing-cta--ghost,.wv-preis-cta--ghost,.pd-preis-cta--ghost):not(:disabled,[aria-disabled="true"],[aria-busy="true"]):active{
  filter:brightness(.92) saturate(1.05);transition:filter .12s ease,background-color .12s ease}
:where(.btn-secondary,.btn-back,.pricing-cta--ghost,.wv-preis-cta--ghost,.pd-preis-cta--ghost,.sk-pfeil,.sk-punkt-btn,.ab-p-abschnitt,
  .ab-p-preise,.ab-b-zu,.ab-s-knopf,.hm-knopf,.kw-opt,.nf-klapp-knopf,.portfolio-btn,.ang2-zknopf,.zus2-knopf,.br-pfeil,.wv-wechsel-pfeil,
  .nz-wahl,.leistung-wahl):not(:disabled,[aria-disabled="true"],[aria-busy="true"]):not(.ist-aktiv,.ist-an,[aria-current="true"],[aria-pressed="true"],[aria-selected="true"]):active,
:where(.chip):active>span{
  background-color:var(--nf-druck,rgba(255,255,255,.1));border-color:var(--border-gold,rgba(160,120,64,.5));
  transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.nz-wahl:active,details>summary:active{background-color:transparent;color:var(--gold-light,#c49a56);transition:color .12s ease}
:where(main p,main li,footer,.gross-footer,.hm-blatt,.ab-blatt) a:not([class]):active,
:where(.extra-card-cta,.pj-pfeil,.wv-modul-cta,.kurzform-alt a,.bf-alt a,.hm-link,.nav-link):active{
  color:var(--gold-light,#c49a56);text-decoration:underline;text-underline-offset:3px;transition:color .12s ease}
@media (prefers-reduced-motion:reduce){
  :where(a,button,summary,label,[role="button"]):active,:where(.chip):active>span{transition:none!important}
}

/* NF-R108: "Zum Projektformular" bricht als Einheit um - passt der Verweis nicht mehr in die Zeile, wandert er ganz in
   die naechste; "Zum" bleibt nicht allein stehen. Nur der Verweis, nicht der Absatz (bei 320 px passt der Verweis
   mit rund 150 px bequem in eine eigene Zeile, kein Ueberlauf). Kurzformulare der Hauptseiten (.kurzform-alt) und
   der Branchenseiten (.bf-alt). */
.kurzform-alt a,.bf-alt a{white-space:nowrap}

/* NF-R108: Kopfleiste auf breiten, aber niedrigen Fenstern (Laptop 1280 x 720, 1366 x 768). Dort belegte sie 92 px
   (20 px Abstand + 72 px Leiste), ein Achtel der Fensterhoehe. Jetzt 12 px Abstand und 6/8 px statt 10/16 px
   Innenabstand - rund 22 px weniger. Links, Unterzeilen, Logo, Menue und Anfrageknopf bleiben in Groesse und Lage
   unveraendert (keine Verkleinerung der Seite). Hoehere Fenster (ab 801 px, z. B. 1440 x 900, 1536 x 864) sind
   unberuehrt. Ankersprung und Stapel lesen die Leiste zur Laufzeit (js/ankersprung.js, STAPEL.navUnten). */
@media (min-width:961px) and (max-height:800px){
  .navbar{top:12px}
  .navbar .nav-inner{padding-top:6px;padding-bottom:8px}
}
/* NF-R111: Datenschutzhinweis direkt am Absendeknopf aller Formulare - gut lesbar (vorher 3,6 bis 4,8 : 1, jetzt ueber
   7 : 1 auf allen Formularflaechen). Eine Regel fuer Start-, Leistungs-, Branchenseiten und Projektformular. */
#anfrage .kurzform-privacy,#cta .kurzform-privacy,.kurzform-privacy,.privacy-consent,.bf-datenschutz{color:#a7afbd}
/* NF-R111: Rechtstexte (Impressum, Datenschutz, AGB) - lange Lesetexte heller (vorher rund 4 : 1), Verweise dauerhaft
   unterstrichen, lange Adressen und Woerter brechen um (schmale Fenster, starke Vergroesserung). */
.legal-section p,.legal-section address,.legal-section ul,.legal-wrap .legal-intro{color:#a7afbd}
.legal-section a{text-decoration:underline;text-underline-offset:2px}
.legal-wrap{overflow-wrap:break-word}