/* ═══════════════════════════════════════════════════════════════════════════
   dedista — mega-menu.css · Referenz-Umsetzung Mega-Menü (23.08.2026)
   ─────────────────────────────────────────────────────────────────────────────
   Ergänzt v3.css, ändert dort keine einzige Regel — v3.css ist gesperrt,
   solange Arturs Sichtung der fünf v4-Seiten läuft (siehe
   docs/BESTAND-V3-DESIGNSYSTEM.md, §1). Verwendet ausschließlich bestehende
   Tokens aus v3.css; neue Tokens nur, wo es wirklich nichts Passendes gibt
   (unten, klar benannt).

   Baseline ohne JS: alle Links stehen sichtbar und erreichbar im Markup
   (html.no-js — Konvention aus v3.js/v3.css). Erst .js im <html> (von v3.js
   ganz oben gesetzt) schaltet auf Panel-Verhalten um. Reihenfolge im
   <head>/vor </body>: v3.css → mega-menu.css, v3.js → mega-menu.js.

   BEWUSSTE ABWEICHUNG VON DER SQUARE-REFERENZ: kein Hover-Öffnen der
   Desktop-Mega-Panels. Square öffnet per Hover; hier öffnet nur Klick oder
   Tastatur. Grund: ein Mausklick löst vorher zuverlässig ein mouseenter aus
   — mit Hover-Öffnen aktiviert genau dieser Klick zuerst das Öffnen, dann
   liest der Klick-Handler den frisch geöffneten Zustand und klappt sofort
   wieder zu (im Test reproduziert, siehe mega-menu.js). Klick + Tastatur
   ist zuverlässiger und für Tastaturnutzer ohnehin die einzige Bedienart —
   Hover-Intent (mit Verzögerung, um genau diesen Konflikt zu vermeiden)
   kann ergänzt werden, sobald der Ausroll-Weg (PHP-Include/Statisch)
   feststeht. Gehört in SPEC-WEBSITE-V5.md als dokumentierte Abweichung,
   nicht als Lücke.

   Seit 23.08.2026 (dedista-d5): der Auslöser ist .hd__navlink selbst statt
   eines separaten Umschalter-Buttons — Tastaturbedienung läuft daher über
   die native Link-Aktivierung (Enter), nicht mehr über Space auf einem
   <button>. Details siehe Kommentar bei .hd__navlink unten und in
   mega-menu.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ Desktop: Auslöser + Panel ═══════════════
   Umbau 23.08.2026 (dedista-d5, nach Arturs Screenshot): Square hat keine
   Chevrons an den Mega-Auslösern, und der Klick öffnet dort den Panel
   direkt, statt wegzunavigieren. Der Auslöser ist deshalb jetzt
   .hd__navlink selbst — kein separates .hd__navtoggle-Element mehr (siehe
   mega-menu.js). Es bleibt ein echter <a href>, damit Mittelklick/Strg/
   Cmd-Klick normal navigiert und die No-JS-Baseline (Panel offen im Fluss)
   unverändert funktioniert — "darf nicht als toter Link enden". */
/* v3.css setzt für .hd__nav a nie white-space:nowrap — bei vier kurzen
   Einträgen fiel das nie auf. Mit fünf Einträgen wird die Zeile eng genug,
   dass "1:1 Betreuung" im Wort umbricht (im Test reproduziert, Zeilenhöhe
   verdoppelt sich). Behoben hier statt in v3.css, weil v3.css gesperrt ist
   (siehe Datei-Kopf). */
.hd__nav>a,.hd__navlink{white-space:nowrap}
.hd__navitem{flex:0 0 auto}
html.js .hd__navitem{display:flex;align-items:stretch}
/* 28.08.2026 (REFERENZ-SQUARE-MOTION.md §2/§4): Squares eigenes
   Nav-Token-Trio, direkt aus --nav-duration/--nav-easing/--nav-delay
   gelesen (kein Einzelwert, ein benanntes System) — ersetzt das vorherige,
   unbelegte .2s ease. */
.hd__navlink{display:inline-flex;align-items:center;padding:9px 0;
  font-size:14.5px;font-weight:400;color:var(--t2);text-decoration:none;
  transition:color .1s linear .275s}
.hd__navlink--label{cursor:default}
/* Kein Hintergrund für Hover/Offen/Aktiv (Vorgabe dedista-d5, 23.08.2026,
   nach Fund einer Restfläche) — nur die Schrift zeichnet den Zustand aus,
   dunkel statt grau, wie beim aktiven Eintrag. Kein Glas, kein Radius. */
.hd__navitem:hover .hd__navlink,.hd__navlink:hover{color:var(--t1)}
/* Eigene, höhere Spezifität nötig für den offenen Zustand: v6-square.css
   setzt ".hd:not([data-scrolled=\"true\"]) .hd__nav a{color:var(--t3)}"
   (drei Klassen-äquivalente + ein Typ) — ohne den Präfix bliebe das
   geöffnete Wort grau statt dunkel, exakt der Fund von dedista-d5. */
html.js .hd .hd__navlink[aria-expanded="true"]{color:var(--t1)}

/* No-JS: Panel liegt offen im Fluss, keine Overlay-Mechanik nötig */
.mega{display:block;padding:14px 4px}
/* Volle Breite, bündig, kein Radius/Schatten/Karte (Vorgabe dedista-d5,
   23.08.2026) — verankert an .hd (dem sticky-Vorfahren, selbst ohne eigenes
   position:relative auf .hd__navitem jetzt der nächste positionierte
   Vorfahre), dadurch spannt der Panel über den ganzen Viewport statt nur
   über die schmale .hd__inner-Spalte. */
/* Übergang 28.08.2026 (Bewegungs-Messung, REFERENZ-SQUARE-MOTION.md §5):
   Square hat hier einen echten Übergang (.Dropdown{transition:height .3s
   cubic-bezier(.4,0,.6,1)}), keinen abrupten Wechsel wie vorher angenommen.
   "height" selbst lässt sich ohne JS-Höhenmessung nicht sauber animieren
   (der Inhalt ist variabel) — CSS-Grid-Zeilen (0fr→1fr) erreichen denselben
   sichtbaren Effekt ohne Höhen-Messung, dieselbe Dauer/Kurve. War vorher
   [hidden] (display:none, kein Übergang möglich) + kein Übergang; jetzt
   .is-open-Klasse (siehe mega-menu.js), visibility verzögert beim Schliessen
   (bleibt sichtbar bis die Kollaps-Animation fertig ist), sofort beim
   Öffnen. */
html.js .mega{position:absolute;top:100%;left:0;right:0;z-index:150;
  margin:0;padding:0;
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .3s cubic-bezier(.4,0,.6,1),visibility 0s .3s;
  background:var(--bg);border:0;border-radius:0;box-shadow:none}
html.js .mega.is-open{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
/* Nachtrag, gefunden beim Live-Test: 0fr allein kollabiert die Zeile nicht
   auf 0 — Padding zählt nicht als "Inhalt" und wird von min-height:0/
   overflow:hidden nicht mitgenommen (Box kann nie kleiner als ihr eigenes
   Padding werden, unabhängig von box-sizing). .mega__inner trägt unten
   40px/80px Padding (siehe Regel weiter unten) — das allein ergab schon
   120px "geschlossene" Höhe. Fix: vertikales Padding selbst mitanimieren,
   0 im Ruhezustand, die vollen 40/80px erst bei .is-open. */
html.js .mega > .mega__inner{overflow:hidden;min-height:0;
  padding-top:0;padding-bottom:0;
  transition:padding-top .3s cubic-bezier(.4,0,.6,1),padding-bottom .3s cubic-bezier(.4,0,.6,1)}
html.js .mega.is-open > .mega__inner{padding-top:40px;padding-bottom:80px}

/* Inhalt bleibt auf derselben Achse wie die Wortmarke — dieselben Tokens
   wie .hd__inner (linksbündig auf der Logo-Achse).
   NACHTRAG 23.08.2026 (dedista-66 hat Squares echtes Flyout vermessen,
   Referenz §10): Square selbst hat dort 80px seitlich, aber relativ zur
   randlosen Fensterkante (Square hat keinen zentrierten Container) —
   damals fielen bei uns Logo-Achse und Fensterkante nie zusammen, weil
   .hd__inner auf dem zentrierten --wrap/--gutter-Container sass.
   KORRIGIERT 28.08.2026 (Breiten-Umbau): .hd__inner läuft jetzt selbst
   randlos auf --edge-pad — Logo-Achse und Fensterkante fallen jetzt
   zusammen, der Kompromiss von damals ist nicht mehr nötig. .mega__inner
   folgt --edge-pad statt --gutter, kein max-width/margin-auto mehr —
   damit trifft es Squares randlose Referenz jetzt direkt, nicht nur
   näherungsweise. Vertikal unverändert: 40 oben, 80 unten (gemessen,
   asymmetrisch). */
.mega__inner{padding:40px var(--edge-pad) 80px;
  display:flex;flex-direction:column;align-items:flex-start;gap:23px}

/* Eine linksbündige Liste, keine Spalten/Rubriken-Überschriften (Vorgabe
   dedista-d5, 23.08.2026 — "Square hat sie nicht").
   NACHTRAG 23.08.2026 — echte Flyout-Messung (dedista-66) ersetzt meine
   Ableitung von vorhin (40px/700 aus dem .h2-Token): Square selbst hat hier
   28px, Gewicht 500, Zeilenhöhe 1,3 (36,4px). Der 46px-Reihenrhythmus kommt
   auf Square NICHT aus margin/gap — alle Reihen haben margin:0 und stossen
   im Zeilenboxen-Rhythmus direkt aneinander (die Differenz zu 36,4px ist
   die Eigenhöhe der Zeilenbox, keine Abstandsregel). Deshalb hier bewusst
   KEIN gap zwischen den Einträgen, sondern die Zeilenhöhe als Verhältnis
   (1,3), damit das Verhältnis bei jeder Schriftänderung mitwandert statt
   an einem festen px-Gap zu brechen. */
.mega__list{display:flex;flex-direction:column;align-items:flex-start;
  gap:0;width:100%}
html.js .hd .mega__list a,html.js .hd .mega__list .hd__soon{display:inline-flex;
  align-items:center;gap:16px;font-family:'Archivo',sans-serif;font-size:28px;
  line-height:1.3;font-weight:500;color:var(--t1);text-decoration:none;
  transition:color .18s ease}
html.js .hd .mega__list a:hover,html.js .hd .mega__list a:focus-visible{color:var(--blue)}
html.js .hd .mega__list .hd__soon{color:var(--t4);cursor:default}

/* Abschluss-Link ("All business types"-Rolle bei Square) + Konto — beide
   klein; Konto zusätzlich gedämpft statt gleichwertige Spalte ("Anmelden"
   ist das nachrangigste Element im Panel, Vorgabe UEBERGABE 23.08.2026).
   Derselbe Spezifitäts-Präfix nötig, Begründung oben. */
.mega__foot{display:flex;align-items:center;flex-wrap:wrap;gap:24px}
html.js .hd a.mega__all{font-size:18px;line-height:1.5;font-weight:700;color:var(--t1);text-decoration:none}
html.js .hd a.mega__all:hover,html.js .hd a.mega__all:focus-visible{color:var(--blue)}
html.js .hd a.mega__account{font-size:13.5px;font-weight:400;color:var(--t4);text-decoration:none}
html.js .hd a.mega__account:hover,html.js .hd a.mega__account:focus-visible{color:var(--t3)}
.hd__soon .badge,.mega__list a .badge,.hd__links a .badge{font-size:10.5px;padding:3px 9px}

/* ═══════════════ Desktop: rechter Nav-Block (Anmelden/Kontakt) ═══════════════ */
.hd__navend{display:none}
@media (min-width:960px){
  .hd__navend{display:flex;align-items:center;gap:4px;margin-left:8px}
  .hd__navend .hd__navlink{border-radius:var(--r-pill);padding:9px 16px}
}

/* ═══════════════ Mobil: Drill-Down-Panels im Burger-Sheet ═══════════════ */
.hd__panels{position:relative;overflow:hidden}
.hd__panel{display:flex;flex-direction:column;gap:2px;max-width:560px;margin-inline:auto}
html.js .hd__panel{display:none}
html.js .hd__panel.is-active{display:flex}
.hd__panel[hidden]{display:none}
.hd__drill{display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:56px;padding:8px 14px;border-radius:var(--r-md);background:none;border:0;
  font-family:inherit;font-size:clamp(21px,5.6vw,26px);font-weight:500;letter-spacing:-.02em;
  color:#fff;cursor:pointer;text-align:left;transition:background var(--t-base) ease}
.hd__drill:hover{background:rgba(255,255,255,.07)}
.hd__drill .chev{width:11px;height:11px;flex:0 0 auto;transform:rotate(-90deg);color:var(--t4)}
.hd__back{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 6px;
  margin-bottom:6px;background:none;border:0;font-family:inherit;color:var(--t3);
  font-size:15px;font-weight:500;cursor:pointer}
.hd__back:hover{color:#fff}
.hd__back .chev{width:9px;height:9px;transform:rotate(90deg)}
.hd__grouplabel{margin:16px 0 2px;padding-left:14px;font-size:11.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
/* v3.css deklariert für .hd__links a kein gap — bei Badge + Text nötig,
   ergänzt hier statt in der gesperrten v3.css. */
.hd__links a{gap:10px}
.hd__links .hd__soon{min-height:46px;padding:8px 14px;font-size:16px;color:var(--t3)}

/* Slide-Übergang zwischen Root- und Unter-Panel */
@media (prefers-reduced-motion:no-preference){
  html.js .hd__panel{animation:mm-panel-in .22s var(--ease-out)}
}
@keyframes mm-panel-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ═══════════════ Fokus — dieselbe Zweiring-Logik wie im Bestand ═══════════════
   .hd__navlink braucht hier keinen eigenen Eintrag mehr (kein .hd__navtoggle-
   Button mehr, siehe oben) — es ist wieder ein plaines Text-<a>, der
   sitebreite Fokusring aus v3.css:101 (:where(a,button,...):focus-visible)
   greift dafür bereits. */
.hd__drill:focus-visible,.hd__back:focus-visible{
  outline:2px solid transparent;outline-offset:2px;
  box-shadow:0 0 0 2px var(--focus-ink),0 0 0 5px var(--focus)}
