/* ==================================================================
   DER AKTIVE MENUEPUNKT IM HAUSROT (Leon, 17.09.2026: "die aktive Seite
   ist blau markiert, soll aber rot sein").

   Das Theme faerbt ihn in seiner Akzentfarbe #00bcd4 -- dieselbe Farbe
   faerbt aber auch jeden Link der Website. Darum wird hier NUR der
   Menuepunkt umgefaerbt und nicht die Theme-Farbe getauscht.

   #ff5252 statt #c40000: die Leiste ist dunkel, und das dunkle Hausrot
   waere dort kaum vom Grund zu unterscheiden. Es ist dasselbe Rot, das
   der Blog im Dunkelschema benutzt.

   Die Selektoren sind die des Themes (custom-*.css, thegem-header.css),
   nur mit einem Klassenpaar mehr Gewicht -- kein !important.
   ================================================================== */
#primary-menu.no-responsive > li.menu-item-active > a,
#primary-menu.no-responsive > li.menu-item-current > a,
#primary-menu.no-responsive > li.current-menu-item > a,
#primary-menu.no-responsive > li.current-menu-ancestor > a,
#primary-menu.no-responsive > li.current-menu-parent > a,
#primary-menu.no-responsive li.menu-item-current > a,
#primary-menu.no-responsive li.current-menu-item > a,
.main-menu-item.active,
.title-main-menu .main-menu-item.active {
  color: #ff5252;
}

/*
 * DER HOVER (Leon, 17.09.2026): live gemessen faerbt das Theme auch ihn
 * cyan -- Hauptpunkte, Untermenues und der Tastatur-Fokus gehen mit.
 */
#primary-menu.no-responsive > li > a:hover,
#primary-menu.no-responsive > li > a:focus-visible,
#primary-menu.no-responsive > li:hover > a,
#primary-menu.no-responsive li li > a:hover,
#primary-menu.no-responsive li li:hover > a,
#primary-menu.no-responsive li li > a:focus-visible,
.main-menu-item:hover,
.title-main-menu .main-menu-item:hover {
  color: #ff5252;
}

/* ------------------------------------------------------------------
   DIE HAUSSCHRIFT IN DER LEISTE (Leon, 17.09.2026)

   Das Theme setzt Montserrat 14px; Blog, Sidebar und Linktree stehen in
   Instrument Sans. Eine Schrift weniger im Haus: die Leiste liest sich
   wie der Rest. Fonts kommen aus fonts.css (S7B_Render::assets bzw.
   diese Datei laedt sie selbst nicht -- faellt die Schrift aus, greift
   die Systemschrift, nie Montserrat-Ersatz).
   ------------------------------------------------------------------ */
#primary-menu.no-responsive > li > a,
.primary-navigation.responsive #primary-menu > li > a {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/*
 * ETWAS ENGER (Leons Fund, 17.09.2026: "sieht halb fertig aus"): die
 * Zeichenreihe unten ist im Theme fest verankert. Mit den Gruppenzeilen
 * wuchs die Liste darueber hinaus -- die kompakteren Punkte holen den
 * Platz zurueck, und die Leiste wirkt dabei ruhiger.
 */
/* Dieselbe Spezifitaet wie die Theme-Regel (#page.vertical-header ...), nur spaeter geladen. */
#page.vertical-header #primary-menu.no-responsive > li > a,
#primary-menu.no-responsive > li > a {
  padding-top: 7px;
  padding-bottom: 8px;
}

/*
 * Die Zeichenreihe in der Leiste tritt ab (Leon, 17.09.2026: "die social
 * icons im Menue kannst du ausblenden") -- sie stehen weiter in der
 * Fussleiste und in der rechten Leiste. Eine Zeile zurueck, falls doch.
 */
.vertical-menu-item-widgets { display: none; }

/* Naeher ans Logo, ohne Trennlinie (Leon, 17.09.2026). */
#primary-menu.no-responsive {
  margin-top: 0;
  padding-top: 2px;
}

/*
 * DIE SPRACHWAHL STEHT UNTEN AM RAND (Leon, 17.09.2026). Sie ist ein
 * Punkt IN der Liste -- damit sie unten klebt, wird sie aus dem Fluss
 * genommen und an der Leiste ausgerichtet: menue.js meldet Lage und
 * Breite der Leiste als Variablen, damit hier keine Zahl geraten wird.
 * Nur in der Desktop-Fassung (.no-responsive); am Telefon bleibt sie in
 * der Liste.
 */
/* Zwei Klassen am li: sprache.css laedt spaeter und setzt sonst eine Reihe. */
#primary-menu.no-responsive > li.s7b-leiste-sprache.dont-translate {
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: fit-content;
  height: auto;
}

#primary-menu.no-responsive > li.s7b-leiste-sprache,
#primary-menu.no-responsive > li:not([class*="menu-item"]) {
  position: fixed;
  left: var(--s7b-menue-x, 66px);
  bottom: 24px;
  /* Nur so breit wie der Schalter -- die Beschriftung sitzt mittig darunter. */
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

#primary-menu.no-responsive > li.s7b-leiste-sprache.dont-translate > .s7b-leiste-label {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
}

#primary-menu.no-responsive > li.s7b-leiste-sprache:hover,
#primary-menu.no-responsive > li:not([class*="menu-item"]):hover { opacity: 1; }

/*
 * DAS UNTERMENUE KLAPPT IN DER LEISTE AUF (Leons Wahl, 17.09.2026) --
 * kein Fenster daneben: die Unterpunkte stehen eingerueckt unter ihrem
 * Punkt, an einer feinen roten Leitlinie.
 *
 * Nur in der Desktop-Fassung (.no-responsive). Die Klapp-Fassung am
 * Telefon behaelt die Mechanik des Themes; dort wird nichts angefasst.
 */
#primary-menu.no-responsive li.menu-item-has-children > ul.sub-menu {
  display: none;
  position: static;
  top: auto;
  left: auto;
  width: auto;
  min-width: 0;
  margin: 2px 0 6px;
  padding: 2px 0 2px 13px;
  border: 0;
  border-left: 1px solid rgb(196 0 0 / 0.5);
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}

#primary-menu.no-responsive li.menu-item-has-children:hover > ul.sub-menu,
#primary-menu.no-responsive li.menu-item-has-children:focus-within > ul.sub-menu {
  display: block;
}

#primary-menu.no-responsive li > ul.sub-menu > li {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}

#primary-menu.no-responsive li > ul.sub-menu > li > a {
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  color: rgb(255 255 255 / 0.66);
  transition: background-color 0.18s ease, color 0.18s ease;
}

/*
 * HOVER ALS FLAECHE (Leons Wahl): eine ganz leichte Flaeche mit runden
 * Ecken hinter dem Punkt, statt nur roter Schrift.
 */
#page.vertical-header #primary-menu.no-responsive > li > a,
#primary-menu.no-responsive > li > a {
  /* Die Flaeche ist nur so breit wie die Schrift (Leon, 17.09.2026). */
  width: fit-content;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  border-radius: 10px;
}

#primary-menu.no-responsive li > ul.sub-menu > li > a { width: fit-content; }

@media (hover: hover) {
  #primary-menu.no-responsive > li > a:hover {
    background: rgb(255 255 255 / 0.06);
  }
  #primary-menu.no-responsive li > ul.sub-menu > li > a:hover {
    background: rgb(255 255 255 / 0.06);
    color: #ff5252;
  }
}

#primary-menu.no-responsive li li > a {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 0.07em;
}

/* Der aktive Punkt traegt mehr Gewicht -- Farbe allein ist kein Rang. */
#primary-menu.no-responsive > li.menu-item-active > a,
#primary-menu.no-responsive > li.current-menu-item > a,
#primary-menu.no-responsive > li.s7b-aktiv > a {
  font-weight: 800;
}

/* ------------------------------------------------------------------
   DER GLEITENDE INDIKATOR

   Ein 2px-Streifen am linken Rand. menue.js setzt --s7b-ind-y und
   --s7b-ind-h (Lage und Hoehe des Punktes); ohne Skript bleibt er auf
   Hoehe 0 und damit unsichtbar -- das Menue funktioniert ohne ihn.
   ------------------------------------------------------------------ */
#primary-menu.no-responsive {
  position: relative;
}

#primary-menu.no-responsive::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 0;
  width: 2px;
  height: var(--s7b-ind-h, 0px);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5252, #c40000);
  box-shadow: 0 0 10px rgb(255 82 82 / 0.5);
  transform: translateY(var(--s7b-ind-y, 0px));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), height 0.28s ease;
  pointer-events: none;
}

/*
 * DER SCANNER (Leons Wunsch, 17.09.2026: "wie bei den Unterstrichen im
 * Studio-Blog, nur von oben nach unten und zurueck").
 *
 * Dasselbe Licht wie .s7b-archiv-titel::after, nur senkrecht: es pendelt
 * ueber den roten Streifen des aktiven Punktes. Nur transform ist
 * animiert; bei reduzierter Bewegung steht es still.
 */
#primary-menu.no-responsive::after {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(closest-side,
    rgb(255 170 170 / 0.95),
    rgb(255 82 82 / 0.55) 55%,
    rgb(255 82 82 / 0) 100%);
  box-shadow: 0 0 12px rgb(255 82 82 / 0.7);
  opacity: 0;
  transform: translateY(var(--s7b-ind-y, 0px));
  pointer-events: none;
}

#primary-menu.no-responsive.ist-markiert::after {
  opacity: 1;
  animation: s7bMenueScanner 1.8s ease-in-out infinite alternate;
}

@keyframes s7bMenueScanner {
  from { transform: translateY(var(--s7b-ind-y, 0px)); }
  to   { transform: translateY(calc(var(--s7b-ind-y, 0px) + var(--s7b-ind-h, 0px) - 18px)); }
}

/* Hover: der Punkt rueckt ein Stueck mit -- ruhig, ohne Farbknall. */
#primary-menu.no-responsive > li > a {
  transition: color 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
  #primary-menu.no-responsive > li > a:hover { transform: translateX(4px); }
}

/* ------------------------------------------------------------------
   GRUPPEN MIT KICKERN

   Drei Bloecke statt einer langen Liste: Explore, Get files, Support.
   Die Beschriftung ist unser Blog-Kicker (10.5px, weit gesperrt, rotes
   Quadrat). Die Klassen setzt S7B_Menue am Menuepunkt -- kein Umbau des
   Markups, keine zweite Liste.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #primary-menu.no-responsive::before { transition: none; }
  #primary-menu.no-responsive.ist-markiert::after { animation: none; }
  #primary-menu.no-responsive > li > a:hover { transform: none; }
}

/* Die Klapp-Fassung am Telefon: dort ist der Streifen links das Signal. */
.mobile-menu-layout-default .primary-navigation.responsive ul > li.menu-item-current > a,
.mobile-menu-layout-default .primary-navigation.responsive ul > li.menu-item.menu-item-active a,
.primary-navigation.responsive ul > li.current-menu-item > a {
  border-left-color: #c40000;
  color: #c40000;
}

.primary-navigation.responsive ul > li > a:hover,
.primary-navigation.responsive ul > li > a:focus-visible {
  color: #c40000;
}