/* ─────────────────────────────────────────────────────────────
   HEADER.CSS
   Zentrales Styling für Main Header + Second Header.
   Wird von header.js erzeugtes Markup gestylt (.header-group,
   .navbar, .second-navbar, .nav-expand, .mobile-menu, ...).
   ───────────────────────────────────────────────────────────── */

/* ─── HEADER CSS-VARIABLEN ─── */
:root {
  --nav-height: 58px;
  --second-nav-height: 44px;
  --nav-text-idle: rgba(255, 255, 255, 0.55);
  --nav-text-active: #ffffff;
  /* EINE Stelle für die Dicke ALLER Navigationslinks (Hauptheader,
     Second Header, Untermenüs, Mobile-Menü) – dieselbe Variable wird
     unten bei .nav-center a / .nav-expand-link / .mobile-nav-link /
     .second-navbar-link referenziert, damit sie garantiert überall
     exakt gleich dünn sind. */
  --nav-font-weight: 400;

  /* Einheitliche, VOLL DECKENDE Header-Hintergrundfarbe für Main Header,
     Second Header, die Untermenü-/Such-Erweiterung UND das Mobile Menu:
     ein kühles, sehr dunkles Blaugrau statt reinem Schwarz – passt zur
     bestehenden Blau/Violett-Akzentfarbe (--accent-gradient in style.css),
     bleibt dabei selbst unbunt/zurückhaltend. Bewusst OHNE Alpha-Kanal:
     der eigentliche Header-/Menübereich darf keinerlei Seiteninhalt
     durchscheinen lassen (das Blur/Darkening gehört ausschließlich zum
     Bereich UNTERHALB des Headers, siehe .nav-backdrop). LEGO überschreibt
     diese Farbe bewusst weiterhin vollständig mit !important (siehe
     lego.html) und bleibt davon unberührt. */
  --header-surface: #101217;
  --header-surface-mobile: #0c0d10;

  /* Apple-artiger Hintergrund-Backdrop hinter geöffneten Submenus/der
     Suche – liegt UNTER dem (voll deckenden) Header/Menü und blurred/
     dunkelt ausschließlich den restlichen Seiteninhalt ab, damit der
     Fokus klar auf dem geöffneten Menü/der Suche liegt, die Website
     dahinter aber als solche erkennbar bleibt (kein voll deckendes
     Schwarz). */
  --nav-backdrop-bg: rgba(4, 5, 8, 0.62);
  --nav-backdrop-blur: 18px;
}

/* ─── HEADER-GRUPPE (STICKY-WRAPPER FÜR MAIN HEADER + SECOND HEADER) ───
   Trägt NUR noch die Fixed-/Smart-Sticky-Positionierung. Hintergrundfarbe
   UND backdrop-filter liegen bewusst NICHT mehr hier, sondern einzeln auf
   .navbar / .nav-expand / .second-navbar (identische Werte, siehe dort) –
   das ergibt optisch weiterhin EINE durchgehende Glasfläche, vermeidet
   aber zwei zentrale Bugs, die durch eine gemeinsame, sich in der Höhe
   verändernde backdrop-filter-Fläche entstanden: (1) wird .second-navbar
   ausgeblendet, blitzt sonst die dahinterliegende .header-group-Fläche als
   grauer Rest durch (v.a. sichtbar bei Themes wie LEGO, die .navbar/
   .second-navbar/.nav-expand eigene, undurchsichtige Farben geben). (2)
   Da sich beim Öffnen/Schließen eines Untermenüs nur die Höhe von
   .nav-expand ändert, muss bei geteilten backdrop-filter-Flächen auch nur
   dessen (kleine) Fläche neu geblurred werden statt der gesamten Header-
   Gruppe – das reduziert das sichtbare Flackern über detailreichem
   Hintergrund deutlich. */
.header-group {
  position: fixed;
  top: 0;
  /* left+right statt left+width:100% – bei einer klassischen (Platz
     einnehmenden) Scrollbar auf Windows/Linux kann ein fixed-Element mit
     width:100% ein paar Pixel breiter berechnet werden als der tatsächlich
     sichtbare Bereich, wodurch zentrierte Inhalte (Nav-Links, Suchfeld)
     minimal aus der echten Bildschirmmitte wirken. left:0;right:0 spannt
     das Element stattdessen exakt zwischen die beiden sichtbaren
     Viewport-Kanten auf. */
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Main Header und (falls vorhanden) Second Header sind Teil derselben
   Gruppe und verschwinden/erscheinen beim Scrollen deshalb immer
   gemeinsam – unabhängig davon, ob ein Second Header vorhanden ist. */
.header-group.nav-hidden {
  transform: translateY(-100%);
}

/* ─── NAVBAR (MAIN HEADER) ───
   Grid: Logo links, Navigation mittig, Social-Icon/Hamburger rechts –
   die normale, zentrierte Main-Header-Anordnung. Nur die aufgeklappten
   Untermenüs (.nav-expand) werden separat linksbündig unter ihrem
   jeweiligen Trigger positioniert (siehe dort). */
.navbar {
  position: static;
  width: 100%;
  height: var(--nav-height);
  overflow: hidden;
  background-color: var(--header-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s ease;
}

/* Main + Second Header als EIN zusammenhängendes System: keine sichtbare
   Trennlinie zwischen den beiden, wenn ein Second Header vorhanden ist. */
body.has-second-header .navbar {
  border-bottom-color: transparent;
}

/* Linke Seite: Logo (Desktop) bzw. Logo/Zurück-Pfeil (Mobile) */
.nav-left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 24px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-mark {
  position: relative;
  display: inline-block;
  height: 48px;
  width: 48px;
  overflow: hidden;
  vertical-align: middle;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-mark img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

.logo:hover .logo-mark {
  width: 70px;
}

/* Zurück-Pfeil, der auf tieferen Mobile-Menü-Ebenen an die Stelle des Logos
   tritt. Auf Desktop nie sichtbar. */
.mobile-back-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 8px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.05rem;
  cursor: pointer;
}

/* Mittlere Seite: Navigations-Links (zentriert über die Grid-Spalte "auto") */
.nav-center {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-center .nav-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-center a {
  position: relative;
  padding: 8px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.08rem;
  font-weight: var(--nav-font-weight);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--nav-text-idle);
  transition: color 0.25s ease;
}

.nav-center a:hover {
  color: var(--nav-text-active);
}

.nav-caret {
  font-size: 0.55rem;
  margin-left: 5px;
  opacity: 0.6;
  transition: transform 0.25s ease;
}

.nav-item.has-submenu.is-open .nav-caret {
  transform: rotate(180deg);
}

/* Rechte Seite: Social Media Icons */
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-left: 24px;
}

/* Kreis-Button bleibt wie gehabt (inkl. Blau/Violett-Verlauf beim
   Hover) – nur die Ruhefarbe von Rahmen/Icon ist jetzt dieselbe
   gedimmte Farbe wie die normalen Header-Links (--nav-text-idle),
   statt fest weiss. Beim Hover wird das Icon (wie die Links) weiss,
   der Rahmen verschwindet zugunsten des Verlaufs (::after). LEGO
   überschreibt Rahmenform/-farbe ohnehin komplett per !important und
   bleibt davon unberührt. */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: relative;
  background-color: transparent;
  border: 1px solid var(--nav-text-idle);
  color: var(--nav-text-idle);
  font-size: 1rem;
  transition:
    color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  z-index: 1;
}

.social-icon::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: var(--accent-gradient);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-icon:hover,
.social-icon:focus-visible {
  color: var(--nav-text-active);
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(139, 123, 216, 0.2);
}

.social-icon:hover::after,
.social-icon:focus-visible::after {
  opacity: 1;
}

/* ─── SUCH-BUTTON (LUPE) IM HEADER ───
   Bewusst klein/dezent (keine Kreis-Box/Hintergrund wie .social-icon,
   nur ein reines Icon) und in derselben Farblogik wie die übrigen
   Header-Elemente (--nav-text-idle/--nav-text-active). Dieselbe Klasse
   wird zweimal im Markup verwendet: einmal in .nav-right (Desktop,
   zwischen "Kontakt" und dem YouTube-Icon) und einmal direkt neben dem
   Hamburger (Mobile, siehe Media Query unten) – beide steuern denselben
   Suchzustand. Bewusst KEIN Hover-Hintergrund (kein grauer Kreis) – nur
   die Icon-Farbe selbst ändert sich bei Hover/aktivem Zustand. */
.nav-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  color: var(--nav-text-idle);
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.25s ease;
}

.nav-search-toggle:hover,
.nav-search-toggle:focus-visible,
.nav-search-toggle.is-active {
  color: var(--nav-text-active);
}

/* Nur auf Mobile sichtbar (siehe Media Query) – auf Desktop bereits durch
   .nav-right (display:none auf Mobile) automatisch die Desktop-Variante
   ausgeblendet, hier zusätzlich explizit für Klarheit. */
.nav-search-toggle--mobile {
  display: none;
}

/* ─── HEADER-ERWEITERUNG (DESKTOP-UNTERMENÜS) ───
   Gemeinsamer Mechanismus für das "Projekte"-Untermenü im Main Header
   UND für Second-Header-Einträge mit Untermenü. Bekommt bewusst dieselbe
   Hintergrundfarbe/denselben Blur wie .navbar/.second-navbar direkt auf
   sich selbst (statt sie von .header-group zu erben) – dadurch bleibt es
   optisch weiterhin EIN durchgehender Glass-Bereich (kein zweiter,
   dunklerer Kasten), aber nur diese kleine, tatsächlich wachsende Fläche
   muss während der Öffnen/Schließen-Animation neu geblurred werden, nicht
   die gesamte Header-Gruppe (behebt sichtbares Flackern über detail-
   reichem Hintergrund). Die Höhen-Animation (grid-template-rows 0fr →
   1fr) bleibt unverändert. */
.nav-expand {
  display: grid;
  grid-template-rows: 0fr;
  background-color: var(--header-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-expand.is-open {
  grid-template-rows: 1fr;
}

/* Linksbündig statt zentriert: padding-left wird von header.js dynamisch
   auf die exakte Position des jeweiligen Triggers gesetzt, damit die Liste
   sichtbar "unter" ihrem Menüpunkt beginnt statt mittig über die ganze
   Header-Breite verteilt zu sein. */
.nav-expand-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 30px;
  /* Nur oben/unten animieren, NIE links: padding-left wird von header.js
     dynamisch (pro Trigger) gesetzt. Wäre "padding" (Shorthand) hier
     transitioniert, würde der allererste dynamische Wert (von 30px auf die
     berechnete Position) sichtbar animieren – dadurch wirkte das Untermenü
     beim allerersten Hover so, als würde es von links hereinfahren, statt
     wie sonst sauber von oben zu expandieren. */
  transition: padding-top 0.35s ease, padding-bottom 0.35s ease;
}

.nav-expand.is-open .nav-expand-inner {
  padding-top: 18px;
  padding-bottom: 26px;
}

.nav-expand-link {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.94rem;
  font-weight: var(--nav-font-weight);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nav-text-idle);
  padding: 8px 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
}

.nav-expand.is-open .nav-expand-link {
  opacity: 1;
  transform: translateY(0);
}

.nav-expand-link:hover {
  color: var(--nav-text-active);
}

/* "Alle Projekte" (oder künftige vergleichbare Einträge): hebt sich durch
   einen kleinen zusätzlichen Abstand von der folgenden Liste ab, bleibt
   aber optisch Teil derselben Navigation. */
.nav-expand-link--emphasize {
  margin-bottom: 10px;
}

/* ─── SUCH-PANEL (WÄCHST WIE EIN NORMALES UNTERMENÜ AUS DEM HEADER) ───
   Nutzt bewusst dieselbe .nav-expand/.nav-expand-inner-Mechanik wie die
   Projekte-/Second-Header-Untermenüs (gleiche Höhen-Animation, gleiche
   Glasfläche) statt eines eigenen Overlays – dadurch fügt sich die Suche
   optisch nahtlos in den bestehenden Header ein und profitiert automatisch
   vom selben Backdrop-Mechanismus (siehe .nav-backdrop). */
.nav-search-inner {
  align-items: center;
}

.nav-expand.is-open .nav-search-inner {
  padding-top: 18px;
  padding-bottom: 22px;
}

/* Bewusst KEIN äußeres Container-Rechteck (keine Box/kein Rounded-
   Rectangle) um Icon + Eingabefeld – die Suche soll sich wie ein
   natürlicher Bestandteil des geöffneten Headers anfühlen, nicht wie
   eine zusätzliche Karte. Nur Icon + Eingabefeld inline, darunter eine
   dünne Trennlinie (.nav-search-divider) zu den Ergebnissen. */
.nav-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-expand.is-open .nav-search-field {
  opacity: 1;
  transform: translateY(0);
}

.nav-search-field-icon {
  color: var(--nav-text-idle);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.nav-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--nav-text-active);
}

.nav-search-input::placeholder {
  color: var(--nav-text-idle);
}

.nav-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--nav-text-idle);
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-search-clear:hover {
  color: var(--nav-text-active);
  background-color: rgba(255, 255, 255, 0.1);
}

/* Dünne, dezente Trennlinie zwischen Suchfeld und Ergebnissen – ersetzt
   die frühere Box/Umrandung um den gesamten Suchbereich. */
.nav-search-divider {
  width: 100%;
  max-width: 480px;
  height: 1px;
  margin: 14px 0;
  background-color: rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-expand.is-open .nav-search-divider {
  opacity: 1;
}

.nav-search-results {
  width: 100%;
  max-width: 480px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.nav-search-results.has-results {
  max-height: 320px;
  overflow-y: auto;
  opacity: 1;
}

.nav-search-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  color: var(--nav-text-idle);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.2s ease;
}

.nav-search-result:last-child {
  border-bottom: none;
}

.nav-search-result:hover,
.nav-search-result:focus-visible {
  color: var(--nav-text-active);
}

.nav-search-result-label {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Hebt den eingegebenen Suchbegriff innerhalb des Ergebnis-Labels hervor
   (siehe highlightMatch in header.js) – bewusst kein Standard-<mark>-Gelb,
   sondern volles Weiß + etwas mehr Gewicht, damit es zur bestehenden
   Header-Farbwelt passt statt wie ein Fremdkörper zu wirken. */
.nav-search-highlight {
  background: none;
  color: var(--nav-text-active);
  font-weight: 700;
}

.nav-search-result-category {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.35);
}

.nav-search-empty {
  padding: 10px 4px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--nav-text-idle);
}

/* ─── HINTERGRUND-BACKDROP (APPLE-ARTIG) FÜR GEÖFFNETE SUBMENUS/SUCHE ───
   Eigenständiges, viewport-fixiertes Element AUSSERHALB von .header-group
   (bewusst als Geschwister-Element im Markup, siehe header.js) – wäre es
   ein Kind von .header-group, würde dessen "will-change: transform" einen
   neuen Containing Block erzeugen und das Backdrop dadurch nur innerhalb
   der (kleinen) Header-Fläche statt über die ganze Seite "fixed" wirken.
   Liegt per z-index UNTER dem Header (und damit unter dem gerade scharf
   bleibenden Untermenü/der Suche), aber ÜBER dem normalen Seiteninhalt.
   opacity + backdrop-filter werden zusammen mit dem jeweiligen Untermenü/
   der Suche ein- und ausgeblendet (siehe header.js), nutzen dieselbe
   Timing-Funktion wie die Untermenü-Höhen-Animation (0.4s, gleiche
   cubic-bezier) für ein synchrones Öffnen/Schliessen. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 950;
  background-color: var(--nav-backdrop-bg);
  backdrop-filter: blur(var(--nav-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--nav-backdrop-blur));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── HAMBURGER & MOBILE MENU ─── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1100;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow-y: auto;
  background-color: var(--header-surface-mobile);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 999;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none;
}

.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* Fester Navigations-Rahmen für ALLE Mobile-Menü-Ebenen: top/left/right
   sind konstante Werte, unabhängig von Textlänge, Anzahl Einträgen oder
   der Höhe irgendeiner vorherigen Ebene. Jede Ebene bekommt dadurch
   garantiert exakt denselben linken UND oberen Startpunkt – nicht nur wie
   zuvor horizontal, sondern jetzt auch vertikal fest verankert (siehe
   Punkt 5 der Anforderung: "Home" und "Alle Projekte" etc. müssen immer
   auf derselben Y-Position beginnen, unabhängig von der Länge der
   vorherigen Ebene). display:grid + .mobile-menu-panel{grid-area:1/1}
   lässt alt und neu währenddessen exakt übereinander in derselben Zelle
   liegen; die Zellenhöhe wird dabei automatisch vom Grid-Algorithmus auf
   die höhere der beiden Ebenen gesetzt – ganz ohne dass header.js jemals
   eine Höhe berechnen oder per JS setzen muss. Weder Inhalt noch
   JavaScript bestimmen also die Position der Navigation, nur dieser
   feste Rahmen.

   Bewusst position:relative + margin statt position:absolute + top: bei
   vielen Second-Header-Einträgen (z.B. 4 bei run.html) reicht der Inhalt
   über 100vh hinaus – ein absolut positioniertes Element trägt in
   manchen Browsern (u.a. Chrome) nicht zuverlässig zur Scroll-Höhe des
   umgebenden .mobile-menu (overflow-y:auto) bei, wodurch YouTube-Icon +
   Sprachbuttons am Ende unerreichbar würden. Mit margin bleibt der feste
   Abstand zum oberen Rand exakt erhalten, das Element zählt aber wieder
   normal zum scrollbaren Inhalt. */
.mobile-menu-levels {
  position: relative;
  margin: 100px 24px 32px 24px;
  display: grid;
  box-sizing: border-box;
}

/* Alle Ebenen liegen in derselben Grid-Zelle übereinander (Crossfade-
   Stapel) statt sich im normalen Fluss gegenseitig zu verschieben oder
   ihre eigene Breite/Position aus ihrem Inhalt abzuleiten. Die Zeilen
   selbst (siehe .mobile-nav-link/.mobile-nav-drill) beginnen dank
   align-items:flex-start / justify-content:flex-start (Flex-Default für
   Column-Richtung) IMMER oben in dieser Zelle, auch wenn die Zelle wegen
   der jeweils anderen (evtl. höheren) Ebene gestreckt wird. header.js
   animiert beim Ebenenwechsel ausschliesslich opacity/translateY der
   einzelnen Zeilen bzw. des austretenden alten Panels – nie die Position
   oder Breite dieses Rahmens selbst, wodurch eine horizontale oder
   vertikale Verschiebung strukturell gar nicht mehr möglich ist. */
.mobile-menu-panel {
  grid-area: 1 / 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 24px;
  margin-bottom: 28px;
}

.mobile-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  max-width: 100%;
  margin: 0;
  text-align: left;
  /* Dieselbe Schriftart/-stärke wie im Desktop-Header (.nav-center a /
     .second-navbar-link), damit Mobile und Desktop einheitlich aussehen.
     Nur Familie + Stärke angeglichen – Größe/Letter-Spacing/Text-Transform
     bleiben wie bisher (eigene Mobile-Größenordnung). */
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.34rem;
  font-weight: var(--nav-font-weight);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  /* Im Mobile Header immer volles Weiß statt der gedimmten Desktop-Idle-
     Farbe (--nav-text-idle) – gilt für die normalen Links (Home/Projekte/
     Über mich/Kontakt UND die Second-Header-Einträge, die dieselbe Klasse
     nutzen). LEGO bleibt davon unberührt (eigene !important-Farbregeln in
     lego.html). */
  color: #ffffff;
  background: none;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
  transition: color 0.25s ease;
}

/* "Alle Projekte" (oder künftige vergleichbare Einträge): dezente Trennlinie
   zur folgenden Liste. width:100%, damit die Linie – unabhängig von der
   Textlänge – über die volle Breite der Navigation läuft. */
.mobile-nav-link--emphasize {
  width: 100%;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

a.mobile-nav-link,
button.mobile-nav-drill {
  cursor: pointer;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  color: var(--nav-text-active);
}

.mobile-nav-drill i {
  font-size: 0.65em;
  opacity: 0.6;
}

/* YouTube-Icon + Sprachbuttons teilen sich eine Zeile (siehe
   header.js: socialLangRowHTML) statt untereinander zu stehen – spart
   vertikalen Platz im Mobile-Menü. */
.mobile-social-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 28px;
  margin-top: 40px;
}

.mobile-social {
  display: flex;
  gap: 20px;
}

/* YouTube-Icon im Mobile-Menü immer volles Weiß, genau wie die übrigen
   Mobile-Nav-Links (.mobile-nav-link – siehe dort) – nur im Mobile-Menü,
   der Desktop-Header (.nav-right .social-icon) bleibt bei der gedimmten
   --nav-text-idle-Farbe. LEGO überschreibt die Farbe ohnehin bereits per
   !important und bleibt unberührt. */
.mobile-social .social-icon {
  color: #ffffff;
  border-color: #ffffff;
}

body.menu-open {
  overflow: hidden;
}

/* ─── MOBILE SUCHE (WIEDERVERWENDET DAS MOBILE-MENU-OVERLAY) ───
   Kein eigenes zweites Overlay: die Lupe öffnet exakt denselben
   .mobile-menu-Zustand wie der Hamburger (gleiche Fläche, Farbe, Blur,
   Abstände, X oben rechts) – nur der Panel-Inhalt unterscheidet sich
   (Suchfeld statt Navigation), gerendert über dieselbe Panel-Crossfade-
   Mechanik wie die Nav-Ebenen (siehe header.js: swapMobilePanel). */
.mobile-search-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Bewusst KEIN äußeres Container-Rechteck (keine Box/kein Rounded-
   Rectangle) – nur Icon + Eingabefeld inline, darunter die Trennlinie
   (.mobile-search-divider). Lupe am Anfang, dieselbe Typografie
   (Barlow Condensed) wie die übrigen interaktiven Header-Elemente. */
.mobile-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mobile-search-field-icon {
  color: var(--nav-text-idle);
  font-size: 1rem;
  flex-shrink: 0;
}

.mobile-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--nav-text-active);
}

.mobile-search-input::placeholder {
  color: var(--nav-text-idle);
}

/* Nur eine dünne, dezente Trennlinie – keine Box/Umrandung um den
   gesamten Suchbereich. */
.mobile-search-divider {
  width: 100%;
  height: 1px;
  margin: 24px 0 18px;
  background-color: rgba(255, 255, 255, 0.12);
}

.mobile-search-results {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ─── SPRACHUMSCHALTER (DE/FR/EN/IT) ───
   Eine Instanz sitzt im Footer (jede Seite, siehe header.js), eine
   zweite in der obersten Ebene des Mobile-Menüs – beide teilen dieselbe
   Basisklasse, nur .lang-switcher--footer/.lang-switcher--mobile-menu
   passen Abstand/Größe an ihren jeweiligen Kontext an. */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-switcher-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nav-text-idle);
  background-color: transparent;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 9px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.lang-switcher-btn:hover {
  color: var(--nav-text-active);
  border-color: rgba(255, 255, 255, 0.4);
}

.lang-switcher-btn.is-active {
  color: #000000;
  background-color: #ffffff;
  border-color: #ffffff;
}

.lang-switcher--mobile-menu {
  margin-top: 0;
}

/* ─── SECOND HEADER (DESKTOP) ───
   Eigene Klassen (second-navbar*), damit dieses Styling niemals
   versehentlich den Main Header (.navbar/.nav-center) beeinflusst.
   Bewusst dieselbe Design-Sprache wie .nav-center a (Familie, Groß-
   schreibung, Farbwelt), aber etwas kleiner/zurückhaltender, damit eine
   klare Hierarchie Main → Second entsteht. */
.second-navbar {
  width: 100%;
  height: var(--second-nav-height);
  overflow: hidden;
  background-color: var(--header-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, height 0.25s ease, border-bottom-width 0.25s ease;
}

/* Wird gesetzt, solange ein Main-Header-Untermenü (z.B. "Projekte")
   geöffnet ist. Blendet den Second Header nicht nur unsichtbar (opacity),
   sondern kollabiert ihn vollständig (Höhe, Hintergrund, Blur, Rand,
   reservierter Platz) – sonst bliebe bei Themes mit eigener, undurch-
   sichtiger Hintergrundfarbe (z.B. LEGO) ein leerer, falsch gefärbter
   Rest an dieser Stelle stehen. Sobald der Hover endet, kommt der Second
   Header wieder exakt in seiner ursprünglichen Höhe zurück. */
.second-navbar.is-hidden-by-submenu {
  height: 0;
  opacity: 0;
  border-bottom-width: 0;
  pointer-events: none;
}

.second-navbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 42px;
}

/* Wrapper pro Eintrag: gibt der Erweiterung einen stabilen, ganzflächigen
   Hover-Bereich (nicht nur die Textzeile). */
.second-navbar-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.second-navbar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 0.9rem;
  font-weight: var(--nav-font-weight);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--nav-text-idle);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.25s ease;
}

.second-navbar-link:hover {
  color: var(--nav-text-active);
}

.second-navbar-caret {
  font-size: 0.6rem;
  opacity: 0.6;
  transition: transform 0.25s ease;
}

.second-navbar-item.has-submenu.is-open .second-navbar-caret {
  transform: rotate(180deg);
}

/* Second-Header-Einträge im Mobile-Menü (oberste Ebene): nutzen bewusst
   dieselbe .mobile-nav-link-Klasse wie die Main-Nav-Links (identisches
   Design, inkl. Klick-schließt-Menü-Verhalten für einfache Links), nur
   sichtbar abgesetzt durch eine dezente Trennlinie. */
.mobile-second-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 18px;
  /* Trennlinie (border-top) sitzt dank margin-top:0 + padding-top exakt
     mittig zwischen dem letzten Haupt-Nav-Link (.mobile-nav margin-
     bottom: 28px) und dem ersten Second-Header-Eintrag – vorher lag sie
     durch margin-top+padding-top deutlich näher am unteren Block. Der
     insgesamt kleinere Abstand (28px statt vorher 92px) schafft
     zusätzlich Platz für YouTube-Icon + Sprachbuttons am Ende. */
  margin-top: 0;
  margin-bottom: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ─── TRANSPARENTER HEADER FÜR VIDEO-HERO-SEITEN ───
   Ersetzt die früher pro Seite (index/run/drone/musik/urbnvibe)
   duplizierten Inline-Overrides. Seite aktiviert dies über
   <body class="transparent-header">. Da .nav-expand keinen eigenen
   Hintergrund mehr hat, wird es automatisch mit transparent, sobald
   .header-group es ist – bleibt also immer exakt dieselbe Fläche. */
body.transparent-header .navbar,
body.transparent-header .second-navbar,
body.transparent-header .nav-expand {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Sobald auf einer Video-Hero-Seite ein Submenu/die Suche geöffnet ist
   (.header-group bekommt dafür in header.js die Klasse .has-open-panel,
   siehe showBackdrop/hideBackdrop), muss der komplette Header-/Menübereich
   trotzdem voll deckend werden – sonst schiene das Hero-Video/der
   Seiteninhalt durch das geöffnete Menü hindurch. Höhere Spezifität als
   die Regel oben gewinnt automatisch, keine !important-Kollision nötig. */
body.transparent-header .header-group.has-open-panel .navbar,
body.transparent-header .header-group.has-open-panel .second-navbar,
body.transparent-header .header-group.has-open-panel .nav-expand {
  background-color: var(--header-surface) !important;
  background: var(--header-surface) !important;
}

/* ─── ABSTANDS-KOMPENSATION FÜR SEITEN MIT SECOND HEADER ───
   Seiten, die <main>/.page-padding nutzen und einen Second Header
   haben, brauchen zusätzlichen Abstand, damit Inhalt nicht unter der
   (höheren) Header-Gruppe verschwindet. */
body.has-second-header:not(.transparent-header) main,
body.has-second-header:not(.transparent-header) .page-padding {
  padding-top: calc(var(--nav-height) + var(--second-nav-height));
}

/* ─── RESPONSIVE DESIGN (MOBIL) ─── */
@media (max-width: 640px) {
  .navbar {
    grid-template-columns: 1fr auto auto;
    column-gap: 14px;
    height: 65px;
    padding: 0 20px;
  }

  .nav-center,
  .nav-right {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-menu {
    display: flex;
  }

  .nav-left {
    justify-content: flex-start;
    padding-right: 0;
  }

  /* Second Header erscheint auf Mobile nicht als eigene Leiste,
     seine Einträge stecken stattdessen mehrstufig im Mobile-Menü. */
  .second-navbar {
    display: none;
  }

  /* Auf einer tieferen Mobile-Menü-Ebene ersetzt der Zurück-Pfeil das Logo. */
  body.mobile-submenu-open .nav-left .logo {
    display: none;
  }

  body.mobile-submenu-open .nav-left .mobile-back-arrow {
    display: inline-flex;
  }

  /* Lupe direkt neben dem Hamburger (eigenes Grid-Item, siehe
     grid-template-columns oben: nav-left | Lupe | Hamburger). Öffnet auf
     Mobile NICHT das Desktop-Such-Panel (.nav-search-expand bleibt
     unerreichbar, da .nav-right hier ausgeblendet ist), sondern denselben
     .mobile-menu-Zustand wie der Hamburger (siehe header.js). */
  .nav-search-toggle--mobile {
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 8px;
    color: #ffffff;
    font-size: 1.05rem;
  }
}