/* ============================================================
   DMC  fix-01-chrome.css   Kopf und Fuss (Header, Mega-Menu,
   Mobile-Nav, Footer).  Notturno di Modena.  Nur Tokens.
   Laedt nach components.css und ueberschreibt Alt-BEM.
   ============================================================ */

/* ---------- HEADER-SCHICHT ----------
   will-change:auto hebt die Containing-Block-Falle auf: motion.css setzt
   will-change:transform auf .site-header, was fixierte Kinder (Mobile-Drawer)
   im Header einsperrt. Der Header-Transform animiert auch ohne den Hint. */
.site-header{will-change:auto}

/* ---------- HEADER-ZEILE ---------- */
.site-header__inner{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(--space-6);height:var(--header-h);max-width:var(--container-2xl);margin-inline:auto;padding-inline:var(--gutter)}
.site-header__actions{display:flex;align-items:center;gap:var(--space-3);margin-inline-start:auto}
/* Icon-Pill, gleiche Sprache wie .site-footer__social, nur ohne Beschriftung.
   Bewusst NICHT .btn: die Regel unten blendet ab 1023px alle .btn im Header aus,
   das Social-Icon soll aber gerade auf dem Telefon neben dem Menue stehen
   bleiben - dort kommt der Grossteil des Instagram-Verkehrs her. */
.site-header__social{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;flex:none;border:1px solid var(--hairline);border-radius:var(--radius-pill);color:var(--text-muted);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.site-header__social:hover{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft)}
.site-header__social:active{transform:scale(.94)}
.site-header__social:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.site-header__social svg{width:18px;height:18px;flex:none}
@media (prefers-reduced-motion:reduce){.site-header__social{transition:none}.site-header__social:active{transform:none}}

/* Instagram-Glyphe ist eine Kontur, keine Flaeche. base.css setzt global
   svg{fill:currentColor}; eine CSS-Deklaration schlaegt das Praesentations-
   Attribut fill="none", der Rahmen liefe also voll aus. Darum die Konturen
   hier per Klasse zuruecksetzen - und nur den Blitzpunkt gefuellt lassen. */
.icon-instagram,.icon-linkedin{fill:none;stroke:currentColor}
.icon-instagram .icon-instagram__dot,.icon-linkedin .icon-linkedin__dot{fill:currentColor;stroke:none}

/* Der Burger darf unter keinen Umstaenden aus dem Bild geschoben werden.
   .site-header scrollt nicht, ein Ueberlauf faellt daher nicht als Balken
   auf - das Menue ist dann einfach unerreichbar. Zwei Sicherungen: die
   Aktionsgruppe schrumpft nie, die Wortmarke schrumpft immer zuerst. */
.site-header__actions{flex:none}
.brand{min-width:0}
.brand__name{overflow:hidden;text-overflow:ellipsis}
/* Die Telefon-Regel steht bewusst weiter unten bei den uebrigen Umbruechen:
   .brand__text{display:flex} folgt erst spaeter und wuerde ein display:none
   an dieser Stelle bei gleicher Spezifitaet schlicht ueberschreiben. */

/* ---------- MARKE ---------- */
.brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text);text-decoration:none;font-size:1rem;font-weight:var(--weight-regular);line-height:1}
.brand__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.01em;line-height:1.05;color:var(--text);white-space:nowrap}
.brand__meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.trident{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--accent);transition:color var(--dur-normal) var(--ease-standard)}
.trident svg{width:auto;height:26px}
.brand:hover .trident{color:var(--accent-hover)}
.trident--sm{color:var(--accent)}
.trident--sm svg{height:20px}

/* ---------- MEGA-MENU LEISTE ---------- */
.mega-menu{display:none}
.mega-menu__bar{display:flex;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0}
.mega-menu__group{position:static;margin:0}
.mega-menu__trigger{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2);font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-medium);letter-spacing:.04em;color:var(--text);background-color:transparent;background-image:linear-gradient(var(--accent-hover),var(--accent-hover));background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;border:0;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:color var(--dur-fast) var(--ease-standard),background-size var(--dur-normal) var(--ease-out-expo)}
.mega-menu__trigger:hover,.mega-menu__trigger[aria-expanded=true]{color:var(--accent-hover);background-size:100% 2px}
.mega-menu__trigger:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- MEGA-MENU PANEL ---------- */
.mega-menu__panel{position:absolute;left:0;right:0;top:100%;z-index:var(--z-dropdown);opacity:1;visibility:visible;transform:none;pointer-events:auto;background:var(--surface);border:1px solid var(--hairline);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-3);overflow:hidden}
.mega-menu__panel.is-open{display:block}
.mega-menu__cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--space-8);max-width:var(--container-2xl);margin-inline:auto;padding:var(--space-7) var(--gutter)}
.mega-menu__links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1) var(--space-4)}
.mega-menu__links li{margin:0}
.mega-menu__links a{display:block;padding:var(--space-3);border-radius:var(--radius-md);transition:background-color var(--dur-fast) var(--ease-standard),transform var(--dur-normal) var(--ease-out-expo)}
.mega-menu__links a:hover{background:var(--surface-2);transform:translateX(4px)}
.mega-menu__links a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.mega-menu__label{display:block;font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-body);color:var(--text);transition:color var(--dur-fast) var(--ease-standard)}
.mega-menu__links a:hover .mega-menu__label{color:var(--accent-hover)}
.mega-menu__teaser{display:block;margin-top:3px;font-size:var(--text-caption);color:var(--text-muted);line-height:var(--leading-snug)}

/* ---------- MEGA-MENU PROMO ---------- */
.mega-menu__promo{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--radius-lg);text-decoration:none;transition:border-color var(--dur-normal) var(--ease-standard),background-color var(--dur-normal) var(--ease-standard),transform var(--dur-normal) var(--ease-out-quint)}
.mega-menu__promo:hover{border-color:var(--accent-line);background:var(--surface-3);transform:translateY(-2px)}
.mega-menu__promo:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.mega-menu__promo-kicker{font-family:var(--font-mono);font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--accent-hover)}
.mega-menu__promo-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text)}
.mega-menu__promo-text{font-size:var(--text-caption);color:var(--text-muted);line-height:var(--leading-normal)}
.mega-menu__promo-cta{margin-top:var(--space-2);display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);font-size:var(--text-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-hover);transition:color var(--dur-fast) var(--ease-standard)}
.mega-menu__promo:hover .mega-menu__promo-cta{color:var(--accent-glow)}
.mega-menu__promo--links{gap:var(--space-1)}
.mega-menu__promo--links:hover{transform:none;background:var(--surface-2);border-color:var(--hairline)}
.mega-menu__promo--links a{display:block;padding:var(--space-2) 0;color:var(--text-muted);font-size:var(--text-body);transition:color var(--dur-fast) var(--ease-standard),transform var(--dur-normal) var(--ease-out-expo)}
.mega-menu__promo--links a:hover{color:var(--text);transform:translateX(4px)}
.mega-menu__promo--links a:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- HAMBURGER ---------- */
.nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;background:transparent;border:0;border-radius:var(--radius-sm);color:var(--text);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-standard)}
.nav-toggle:hover{background:var(--surface-2)}
.nav-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.nav-toggle__bar{display:block;width:22px;height:2px;border-radius:var(--radius-pill);background:currentColor;transition:transform var(--dur-normal) var(--ease-out-expo),opacity var(--dur-fast) var(--ease-standard)}
.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- MOBILE-DRAWER ----------
   min-height sichert die volle Hoehe auch dann, wenn ein Vorfahre den fixierten
   Drawer je einsperren sollte; bottom:0 deckt bei freiem Viewport exakt ab. */
.mobile-nav{position:fixed;inset:var(--header-h) 0 0 0;min-height:calc(100svh - var(--header-h));z-index:var(--z-overlay);background:var(--bg-2);border-top:1px solid var(--hairline);padding:var(--space-6) var(--gutter) var(--space-9);overflow-y:auto;overscroll-behavior:contain;opacity:1;visibility:visible;transform:none}
.mobile-nav.is-open{display:block}
.mobile-nav__inner{display:flex;flex-direction:column;gap:0;max-width:var(--container-lg);margin-inline:auto}
.mobile-nav__group{border-bottom:1px solid var(--hairline)}
.mobile-nav__group>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;list-style:none;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);color:var(--text)}
.mobile-nav__group>summary::-webkit-details-marker{display:none}
.mobile-nav__group>summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.mobile-nav__group>summary::after{content:"";width:.62em;height:.62em;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-normal) var(--ease-out-expo);opacity:.7}
.mobile-nav__group[open]>summary{color:var(--accent-hover)}
.mobile-nav__group[open]>summary::after{transform:rotate(-135deg)}
.mobile-nav__group a{display:block;padding:var(--space-3) 0;color:var(--text-muted);font-size:var(--text-body);transition:color var(--dur-fast) var(--ease-standard)}
.mobile-nav__group a:hover{color:var(--text)}
.mobile-nav__flat{display:block;padding:var(--space-4) 0;border-bottom:1px solid var(--hairline);font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);color:var(--text);transition:color var(--dur-fast) var(--ease-standard)}
.mobile-nav__flat:hover{color:var(--accent-hover)}
.mobile-nav__actions{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-7)}
.mobile-nav__actions .btn{width:100%}

/* ---------- LOCK ---------- */
.lock{display:inline-block;width:6px;height:6px;margin-inline-start:.4em;border-radius:var(--radius-round);background:var(--accent-hover);vertical-align:middle;overflow:hidden;text-indent:120%;white-space:nowrap}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--hairline);color:var(--text-muted)}
.site-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-9) var(--space-8);max-width:var(--container-2xl);margin-inline:auto;padding:var(--space-10) var(--gutter) var(--space-8)}
.site-footer__col{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.site-footer__col>.site-footer__head:not(:first-child){margin-top:var(--space-5)}
.site-footer__head{margin:0;font-family:var(--font-mono);font-weight:500;font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.site-footer__brand{gap:var(--space-4)}
.site-footer__name{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text)}
.site-footer__tagline{margin:0;max-width:44ch;font-size:var(--text-body);line-height:var(--leading-normal);color:var(--text-muted)}
.site-footer__socials{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.site-footer__social{display:inline-flex;align-items:center;gap:var(--space-3);width:max-content;padding:var(--space-2) var(--space-4);border:1px solid var(--hairline);border-radius:var(--radius-pill);color:var(--text-muted);font-size:var(--text-caption);letter-spacing:.03em;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard)}
.site-footer__social:hover{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft)}
.site-footer__social:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.site-footer__social svg{width:16px;height:16px;flex:none}
.site-footer__addr{margin:0;font-style:normal;font-size:var(--text-body);line-height:var(--leading-normal);color:var(--text-muted)}
.site-footer__contact{margin:0;font-size:var(--text-body);line-height:var(--leading-normal);color:var(--text-muted)}
.site-footer__contact a{color:var(--accent-hover);transition:color var(--dur-fast) var(--ease-standard)}
.site-footer__contact a:hover{color:var(--text)}
.site-footer__col[aria-label] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.site-footer__col[aria-label] li{margin:0}
.site-footer__col[aria-label] a{display:block;width:max-content;max-width:100%;padding-block:2px;color:var(--text-muted);font-size:var(--text-body);transition:color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-out-expo)}
.site-footer__col[aria-label] a:hover{color:var(--text);transform:translateX(3px)}
.site-footer__col[aria-label] a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* ---------- FOOTER-META ---------- */
.site-footer__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6);max-width:var(--container-2xl);margin-inline:auto;padding:var(--space-5) var(--gutter);border-top:1px solid var(--hairline)}
.site-footer__copy{margin:0;font-size:var(--text-caption);color:var(--text-faint)}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.site-footer__legal a{font-size:var(--text-caption);color:var(--text-faint);transition:color var(--dur-fast) var(--ease-standard)}
.site-footer__legal a:hover{color:var(--text-muted)}
.site-footer__legal a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* ---------- RESPONSIVE ---------- */
@media (min-width:1024px){.mega-menu{display:block}.nav-toggle{display:none}.mobile-nav{display:none}}
@media (max-width:1199px){.site-header__apply{display:none}}
@media (max-width:1023px){.site-header__actions .btn{display:none}.site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}.site-footer__meta{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){.site-footer__grid{grid-template-columns:1fr;gap:var(--space-7)}}
/* Unter 480px reicht die Kopfzeile nicht fuer Wortmarke, zwei Social-Icons
   und Burger. Dann traegt der Dreizack allein die Marke; der volle Name
   steht in der Schublade und im Fuss. Sonst bliebe nur ein Rumpf wie
   "Deutsc..." und die Unterzeile liefe unter die Icons. */
@media (max-width:479px){.brand__text{display:none}}

/* ---------- LINK-DEKORATION (klar, ohne Default-Unterstrich der klassenlosen a) ---------- */
.mega-menu__links a,.mega-menu__promo--links a,.mobile-nav__group a,.site-footer__col[aria-label] a,.site-footer__legal a{text-decoration:none}

/* ---------- OEFFNUNGS-ANIMATION (kompositorfreundlich, reduced-motion-sicher) ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes dmc-mega-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  @keyframes dmc-drawer-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .mega-menu__panel.is-open{animation:dmc-mega-in var(--dur-normal) var(--ease-out-expo)}
  .mobile-nav.is-open{animation:dmc-drawer-in var(--dur-normal) var(--ease-out-expo)}
}
/* integration: auth-aware header actions must honor [hidden] over .btn display */
.site-header__actions [hidden],
.mobile-nav__actions [hidden]{display:none!important;}