/*
 * RICHTUNG 3, VARIANTE B „SCHLANK MIT MENÜLEISTE“
 * Menü wie bei Richtung 2: eine Leiste oben, Untermenüs klappen direkt unter dem Hauptpunkt auf.
 * Vorteil gegenüber dem Vollbild-Menü: Man sieht alle Bereiche sofort, jedes Untermenü hängt
 * unmittelbar an seinem Hauptpunkt (die Maus muss nur gerade nach unten), und man bleibt auf der Seite.
 * Gilt ab 80 rem (1280 px Fensterbreite). Darunter wird die Leiste zu breit für das Logo (gemessen),
 * dort bleibt das Vollbild-Menü per „Menü“-Knopf.
 * Zusatz zu richtung-3.css, integriert.css, integriert-messing.css und schlank.css.
 */
@media (min-width: 80.0625rem) {
  .seite-leiste .kopf { background: var(--ink); height: var(--kopf-h); padding-block: 0; border-bottom: 2px solid var(--lime); }
  .seite-leiste .kopf__marke { background: none; padding-inline: 0; }
  .seite-leiste .kopf__marke:hover { background: none; color: var(--lime); }
  .seite-leiste .kopf__toggle, .seite-leiste .kopf__kunde { display: none; }

  /* Das Menü ist hier eine Leiste statt Vollbild */
  .seite-leiste .menue {
    position: fixed; inset: 0 var(--rand) auto auto; width: auto; height: var(--kopf-h); z-index: 61; padding: 0; overflow: visible;
    background: none; visibility: visible; opacity: 1; transition: none;
  }
  .seite-leiste .menue__liste { display: flex; max-width: none; margin: 0; height: 100%; }
  .seite-leiste .menue__punkt { height: 100%; border-bottom: 0; align-items: stretch; }
  .seite-leiste .menue__link {
    display: flex; align-items: center; gap: .65rem; padding: 0 .95rem; font-size: 1rem; letter-spacing: .01em; line-height: 1;
    font-stretch: 75%; font-weight: 700;
  }
  /* min-width: 0 hebt die Mindestbreite 2,2 rem aus dem Vollbild-Menü auf (richtung-3.css), sie machte den Abstand zur Zahl zu groß */
  .seite-leiste .menue__link::before { font-size: .58rem; opacity: .9; min-width: 0; letter-spacing: .04em; font-variant-numeric: tabular-nums; }   /* Ziffern gleich breit */
  .seite-leiste .menue__punkt:hover > .menue__link, .seite-leiste .menue__punkt:focus-within > .menue__link { background: var(--lime); color: rgba(0, 0, 0, 1); padding-left: .95rem; }
  .seite-leiste .menue__punkt:hover > .menue__link::before, .seite-leiste .menue__punkt:focus-within > .menue__link::before { color: rgba(0, 0, 0, 1); }

  /* Untermenü: direkt unter dem Hauptpunkt, ohne Lücke */
  .seite-leiste .menue__sub,
  .seite-leiste .menue__liste:not(:hover):not(:focus-within) .menue__punkt:first-child > .menue__sub {
    display: none; position: absolute; top: 100%; bottom: auto; left: 0; right: auto; width: max-content; min-width: 17rem; max-width: 34rem;
    padding: .4rem 0; background: var(--ink); border: 2px solid var(--lime); border-top: 0; animation: none;
  }
  .seite-leiste .menue__sub:has(li:nth-child(7)) { columns: 2; column-gap: 0; min-width: 33rem; }
  .seite-leiste .menue__punkt:nth-child(n+4) > .menue__sub { left: auto; right: 0; top: 100%; bottom: auto; }
  .seite-leiste .menue__punkt:hover > .menue__sub,
  .seite-leiste .menue__punkt:focus-within > .menue__sub,
  .seite-leiste .menue__punkt.is-offen > .menue__sub { display: block; animation: sub-ein .2s ease; }
  .seite-leiste .menue__sub-link { padding: .5rem 1.1rem; font-size: 1.05rem; border-bottom: 0; break-inside: avoid; }
  .seite-leiste .menue__sub-link:hover { padding-left: 1.5rem; }

  /* E-Book und Kundenzugang: abgesetzte Nebenwege am Ende der Leiste */
  .seite-leiste .menue__punkt--erste-neben { margin: 0 0 0 .8rem; padding-left: .8rem; border-left: 1px solid rgba(255, 255, 255, .3); }
  .seite-leiste .menue__punkt--neben .menue__link { font-size: 1rem; color: var(--lime); }
  .seite-leiste .menue__punkt--neben .menue__link::before { content: none; }
  .seite-leiste .menue__punkt--neben:hover > .menue__link { color: rgba(0, 0, 0, 1); }
  .seite-leiste .menue__punkt--extern { align-items: center; }
  .seite-leiste .menue__punkt--extern .menue__link { height: 2.5rem; margin-left: .3rem; padding: 0 1rem; border: 2px solid var(--lime); }
  .seite-leiste .menue__punkt--extern .menue__link::after { content: "↗"; margin-left: .35rem; font-stretch: 100%; }

  /* Der Farbtest sitzt unter der Leiste */
  .seite-leiste .farbtest { top: calc(var(--kopf-h) + .8rem); }
  .seite-leiste .hero--einstieg .werkzeug--oben { top: calc(var(--kopf-h) + .8rem); }
}

/* Zwischen 1280 und 1440 px etwas enger, damit Logo und Menü Luft behalten */
@media (min-width: 80.0625rem) and (max-width: 90rem) {
  .seite-leiste .menue__link { padding: 0 .7rem; }
  .seite-leiste .menue__punkt--erste-neben { margin-left: .5rem; padding-left: .5rem; }
}