/* ============================================================
   MENÜ — Mini-Menü an der Leiste + Overlay unter der Nav
   ------------------------------------------------------------
   Gestaltung aus dem talents-Hauptprojekt übernommen
   (`c-menu` / `c-minimenu`). Übersetzt wurde nur das, was diese
   Seite anders benennt:

     --brand-500   → --brand          --font-sans → --font-body
     --surface     → --surface        --shadow    → --shadow-card
     --radius-lg   → --radius (beide 20px)
     --space-N     → feste px-Werte (hier gibt es keine Skala)

   Zwei Werte bringt die Datei selbst mit, weil sie im lokalen
   Token-Satz fehlen bzw. anders belegt sind — siehe unten.

   Diese Datei wird NACH nav.css geladen: der Block „Nav bei
   offenem Menü" muss die Farbumkehr aus nav.css überstimmen.
   ============================================================ */

:root {
  /* Das Hauptprojekt fährt das Menü mit 220/400 ms. Lokal ist
     --dur 260 ms und --dur-slow 600 ms (Nav-Schrumpfen) — 600 ms
     für ein aufblendendes Menü wirken zäh. Deshalb eigene Werte,
     exakt die des Hauptprojekts. */
  --menu-dur: 220ms;
  --menu-dur-slow: 400ms;

  /* Akzent je Gruppe. Wirtschaftsprüfer trägt das Magenta der
     Marke, Talents das Navy, das im Hauptprojekt als
     --talents-active die aktiven Zustände der talents-Seite
     färbt. Es ist die einzige Stelle dieser Seite mit Navy —
     wer die Gruppen lieber beide in Magenta hätte, ändert nur
     den Wert hier. */
  --menu-navy: #2B4781;
}


/* ------------------------------------------------------------
   MINI-MENÜ — Vorschau beim Überfahren des Menü-Buttons
   ------------------------------------------------------------
   Kompakte Fassung des Overlays, gleiche Gestaltungsmittel:
   Akzentpunkt, Versalien-Label, Haarlinie. Nur an Zeigegeräten,
   die hovern können — auf dem Handy führt die Berührung direkt
   ins volle Overlay. Bei offenem Overlay bleibt es weg.
   ------------------------------------------------------------ */
.nav__menu-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
}

.minimenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1;
  width: 312px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transform-origin: top right;
  /* visibility springt erst nach dem Ausblenden — beim Einblenden
     hebt die Regel unten die Verzögerung wieder auf. */
  transition: opacity var(--menu-dur) var(--ease),
    transform var(--menu-dur) var(--ease),
    visibility 0s linear var(--menu-dur);
}

/* Unsichtbarer Steg zum Button: sonst reißt der Hover ab, während
   die Maus die Lücke zwischen Kreis und Karte überquert. */
.minimenu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

@media (hover: hover) and (pointer: fine) {

  .nav__menu-wrap:hover .minimenu,
  .nav__menu-wrap:focus-within .minimenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--menu-dur) var(--ease),
      transform var(--menu-dur) var(--ease);
  }
}

/* Nie gleichzeitig mit dem Overlay. Der Zeiger steht nach dem Klick
   noch auf dem Button, also greift die Hover-Regel oben weiter —
   diese hier muss sie überstimmen und braucht deshalb dieselbe
   Selektorentiefe (Wrapper mitgeschrieben). */
html.is-menu-open .nav__menu-wrap .minimenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--menu-dur) var(--ease),
    transform var(--menu-dur) var(--ease),
    visibility 0s linear var(--menu-dur);
}

.minimenu__group--wp {
  --menu-accent: var(--brand);
}

.minimenu__group--talents {
  --menu-accent: var(--menu-navy);
}

.minimenu__group+.minimenu__group {
  margin-top: 24px;
}

.minimenu__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--menu-accent);
  line-height: 1;
}

.minimenu__bullet {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--menu-accent);
}

/* Die Einträge rücken auf die Textspalte des Labels ein — also um
   Punkt plus Abstand. Der Trennstrich beginnt weiterhin am Punkt,
   die Wortanfänge stehen darunter auf einer Kante. */
.minimenu__list {
  margin-top: 4px;
}

/* Der Einzug sitzt am Link, nicht an der Liste: nur so reicht die
   anklick- und fokussierbare Fläche über die ganze Zeile bis an den
   Rand der Karte. Läge er an der Liste, begänne der Link erst hinter
   dem Einzug — Trefferfläche und Fokusrahmen wären um diese 12px zu
   kurz, und der Zeilenanfang bliebe tot. */
.minimenu__link {
  display: block;
  padding: 8px 0 8px 12px;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  /* Die globale Zeilenhöhe ist ein fester Pixelwert (24px) und
     zöge die Einträge zu weit auseinander. */
  line-height: 1.25;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease),
    padding-left var(--dur-fast) var(--ease);
}

/* 12px Grundeinzug plus die 6px Verschiebung von vorher — der Text
   rückt beim Überfahren also unverändert um 6px nach rechts. */
.minimenu__link:hover {
  color: var(--menu-accent);
  padding-left: 18px;
}


/* ------------------------------------------------------------
   OVERLAY
   ------------------------------------------------------------
   Liegt unter der Nav (z-index eins tiefer), damit Logo und
   Menü-Button bedienbar bleiben, während es offen ist. Die Seite
   dahinter ist gesperrt, das Overlay scrollt selbst.
   ------------------------------------------------------------ */
.menu {
  /* Drei Maße halten die Spalten der Einträge zusammen. Die
     Hinweiszeile unter einer Gruppe rechnet daraus ihren Einzug und
     steht dadurch exakt unter dem ersten Buchstaben der Einträge,
     nicht unter der Ziffer. Im Mobilblock am Dateiende stehen sie
     kleiner — alles rückt dann gemeinsam nach. */
  --menu-inset: 28px;   /* Einzug der Liste gegenüber dem Gruppenkopf */
  --menu-num: 24px;     /* Breite der Ziffernspalte */
  --menu-gap: 24px;     /* Abstand Ziffer zu Wort */

  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--menu-dur-slow) var(--ease),
    visibility 0s linear var(--menu-dur-slow);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--menu-dur-slow) var(--ease);
}

html.is-menu-open {
  overflow: hidden;
}

/* Bei offenem Menü ist <main> inert — die Sprungmarke zeigte dann
   auf ein Ziel, das keinen Fokus annehmen kann. Sie gehört solange
   ganz aus der Tabulator-Reihenfolge. */
html.is-menu-open .skip-link {
  display: none;
}

/* Inhaltsspalte, oben an der Nav vorbei. --nav-h zieht über die
   Breakpoints mit, der Abstand darunter bleibt dadurch gleich. */
.menu__inner {
  max-width: calc(1015px + 2 * var(--container-px));
  margin-inline: auto;
  padding: calc(var(--nav-h) + 48px) var(--container-px) 96px;
  transform: translateY(18px);
  transition: transform var(--menu-dur-slow) var(--ease);
}

.menu.is-open .menu__inner {
  transform: none;
}

.menu__group--wp {
  --menu-accent: var(--brand);
}

.menu__group--talents {
  --menu-accent: var(--menu-navy);
}

.menu__group+.menu__group {
  margin-top: 32px;
}

/* Gruppenkopf: Punkt, Versalien-Label, Winkel, Haarlinie darunter.
   Zugeklappt neutral, aufgeklappt im Akzent der Gruppe. */
.menu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}

.menu__group.is-open .menu__head,
.menu__head:hover {
  color: var(--menu-accent);
}

.menu__bullet {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.menu__chevron {
  width: 22px;
  height: 22px;
  -webkit-mask-image: url("../../icons/keyboard_arrow_down_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  mask-image: url("../../icons/keyboard_arrow_down_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg");
  transition: transform var(--menu-dur-slow) var(--ease);
}

.menu__group.is-open .menu__chevron {
  transform: rotate(180deg);
}

/* Aufklappen über grid-template-rows 0fr → 1fr: die Höhe animiert
   weich, ohne dass JS den Inhalt ausmessen müsste. */
.menu__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--menu-dur-slow) var(--ease);
}

.menu__group.is-open .menu__body {
  grid-template-rows: 1fr;
}

.menu__body-clip {
  min-height: 0;
  overflow: hidden;
}

.menu__list {
  padding: 20px 0 40px var(--menu-inset);
}

/* Die Ziffer steht optisch mittig zur Headline, nicht auf deren
   Grundlinie. Auf der Grundlinie klebt eine 18px-Ziffer am unteren
   Rand einer 46px-Zeile und wirkt abgerutscht; die Zeilenhöhe ist
   mit 1.15 eng genug, dass die Mitte der Zeile auch optisch die
   Mitte der Versalien trifft. Und sie bleibt dort, egal ob die
   Headline Unterlängen hat („Wir für dich") oder nicht („Home"). */
.menu__link {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  padding-block: 18px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.menu__link:hover {
  color: var(--menu-accent);
}

.menu__num {
  flex: none;
  min-width: var(--menu-num);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  color: var(--ink-faint);
}

/* Hinweiszeile unter einer Gruppe. Sie sitzt auf dem Platz, den das
   Hauptprojekt für die „Auch für:"-Reihe vorsieht, und übernimmt
   deren Werte: 19px, gedämpft, auf der Textkante der Einträge.
   19px steht ausgeschrieben, weil der lokale Token-Satz zwischen
   17px und 24px nichts anbietet. */
.menu__note {
  padding: 0 0 24px calc(var(--menu-inset) + var(--menu-num) + var(--menu-gap));
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Das Datum trägt den Akzent der Gruppe — dadurch hängt die Zeile
   sichtbar an „Talents" und schwebt nicht frei zwischen den Blöcken. */
.menu__note-date {
  font-weight: var(--fw-semibold);
  color: var(--menu-accent);
}

/* Folgt der Liste ein Hinweis, rückt er an sie heran. Ohne das läge
   dazwischen der volle Abstand, mit dem sich sonst der nächste Block
   absetzt — die Zeile gehört aber zur Liste darüber. */
.menu__list:has(+ .menu__note) {
  padding-bottom: 16px;
}


/* ------------------------------------------------------------
   NAV BEI OFFENEM MENÜ
   ------------------------------------------------------------
   Der Schleier der Leiste ist im Normalfall zu 88 % deckend und
   erst ab 32px Scrollweg sichtbar. Über dem Overlay muss er beides
   sein: sofort da und ganz deckend — sonst scheint der Menütext
   beim Scrollen durch die Logos.

   Die Farbumkehr über der roten Sektion nimmt nav.js zurück,
   solange das Menü offen ist. Deshalb steht hier nur der Schleier.
   ------------------------------------------------------------ */
html.is-menu-open .nav::before {
  opacity: 1;
  background: var(--surface);
}

/* Menü-Button wird zum X. Das Hauptprojekt tauscht dafür die
   Icon-Glyphe; diese Seite kommt ohne Icon-Font aus, also drehen
   die drei vorhandenen Striche selbst. Sie sind 2px hoch mit 6px
   Abstand — der äußere Strich hat damit 8px bis zur Mitte. */
.nav__burger span {
  transition: width var(--dur) var(--ease),
    height var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    background-color var(--dur-slow) var(--ease);
}

/* Im X sind die Striche eine halbe Pixelstufe kräftiger — nicht aus
   optischen Gründen, sondern weil die Rundung sonst nicht existiert:

   `border-radius` wird auf die halbe Höhe gekappt, bei 2px Strichen
   also auf 1px. Waagerecht zeichnet der Browser diesen Bogen noch;
   um 45° gedreht verschwindet er restlos in der Kantenglättung. Auf
   Bildschirmen ohne Verdopplung ist die Ausgabe mit und ohne Radius
   dann pixelgleich — nachgemessen. Ab 2.5px (Radius 1.25px) greift
   er wieder, darunter nicht.

   Der Versatz folgt daraus: drei Striche à 2.5px mit 6px Abstand
   ergeben 19.5px; die äußeren liegen damit 8.5px von der Mitte. */
.nav__burger[aria-expanded="true"] span {
  height: 2.5px;
}

/* Ein um 45° gedrehter Strich belegt waagerecht nur noch das
   0,707-fache seiner Länge. Bei unveränderten 24px misst das X
   deshalb 18,7px statt 24px — beim Umschalten wirkt es, als
   schrumpfe die Breite. Die beiden sichtbaren Striche wachsen im
   X-Zustand deshalb so weit, dass die sichtbare Breite wieder
   --burger-bar ergibt:

     Länge = --burger-bar × √2 − Strichstärke

   Der mittlere Strich bleibt absichtlich außen vor: er fällt
   ohnehin auf scaleX(0), und mitzuwachsen würde nur seinen
   Kollapspunkt verschieben. */
.nav__burger[aria-expanded="true"] span:nth-child(1),
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  width: calc(var(--burger-bar) * 1.41421 - 2.5px);
}

/* Die Striche sind rechtsbündig (align-items: flex-end). Ein
   längerer Strich wächst also nach links, und mit ihm wandert der
   Drehpunkt aus der Buttonmitte. Der waagerechte Versatz holt
   ihn zurück — die halbe Längenzunahme.

   Über `align-items: center` ginge das auch, würde aber den
   mittleren, noch sichtbaren Strich (16px) im selben Moment um 4px
   nach links springen lassen. */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translate(calc((var(--burger-bar) * 0.41421 - 2.5px) / 2), 8.5px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translate(calc((var(--burger-bar) * 0.41421 - 2.5px) / 2), -8.5px) rotate(-45deg);
}


/* ------------------------------------------------------------
   SCHMALE GERÄTE
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .menu__inner {
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 64px;
  }

  .menu {
    --menu-inset: 16px;
    --menu-num: 20px;
    --menu-gap: 16px;
  }

  .menu__list {
    padding: 16px 0 32px var(--menu-inset);
  }

  .menu__link {
    padding-block: 12px;
  }

  .menu__num {
    font-size: 15px;
  }

  .menu__note {
    padding-bottom: 20px;
    font-size: var(--fs-body);
  }
}