/* nav.css — Alina Portfolio: Side-Navigation mit Wipe-Effekt
   Adaption der Osmo "Side Navigation with Wipe Effect" auf das
   monochrome Anton/Barlow-Design der Seite. Pure CSS + Vanilla-JS
   (kein GSAP). Markup wird von nav.js injiziert.
*/

.lpnav {
  --lpnav-ease: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --lpnav-ink: #0a0a0a;
  --lpnav-paper: #ffffff;
  font-family: Barlow, -apple-system, sans-serif;
}

/* ── Header-Leiste (Logo + Menü-Button) ─────────────────── */
.lpnav-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 24px;   /* gleiche Kante wie Eck-Labels und Werk-Zeilen (Judge 2026-09-10) */
  pointer-events: none;
}
.lpnav-header > * { pointer-events: auto; }

.lpnav-logo {
  /* Wortmarke A mit Zeile (ein SVG, Pfade — kein Schriftladen im Header). Die Breite steht am SVG, nicht am Anker
     (Padding + box-sizing wuerden sie sonst je Engine anders schneiden): 148 px -> Versalhoehe ~47 px, Zeile ~6,8 px
     Kapitale; Handy 120 px; bis 365 px (320er- und 360er-Handys) nur die Wortmarke mit 76 px — bei 375 bleiben 27 px Luft zum Aufruf (22.09.2026) */
  --lpnav-logo-w: 148px;
  --lpnav-wm-w: 76px;
  display: flex;
  align-items: center;
  flex: none;                                   /* WebKit staucht ein Flex-Kind sonst bei Platznot (Sonde 22.09.) */
  min-height: 44px;                             /* Tippziel (Audit 2026-09-10) */
  box-sizing: content-box;
  color: var(--lpnav-ink);
  text-decoration: none;
  font: 400 1.6rem/1 Anton, "Arial Black", sans-serif;   /* nur der Text-Fallback ohne LOGO_SVG */
  text-transform: uppercase;
  transition: color 0.45s var(--lpnav-ease);
  padding: 0 0.4rem;
  margin: 0 -0.4rem;
}
.lpnav-logo svg { display: block; width: var(--lpnav-logo-w); height: auto; fill: currentColor; }
.lpnav-logo .lpnav-logo-wm { display: none; width: var(--lpnav-wm-w); }
@media (max-width: 767px) { .lpnav-logo { --lpnav-logo-w: 120px; } }
@media (max-width: 365px) {
  .lpnav-logo .lpnav-logo-full { display: none; }
  .lpnav-logo .lpnav-logo-wm { display: block; }
}
/* KOPF:START — Kopf rechts: Aufruf + Menue/Schliessen · Fassung C „Leiste" · Abheben E „Kompakt" ─────────────
   Schreibt tools/_kopf-faecher.mjs (c --into) — NIE von Hand. Stand 24.09.2026 (Leo: Menue-Icon + CTA verbessern,
   Close neu; Panel-Animation und offenes Menue bleiben).
   Der Kopf hat EIN Bedienteil: Aufruf und Menü teilen eine Kante, gefüllt wird beim Darüberfahren nur der Aufruf; offen bleibt allein die Menü-Zelle als [SCHLIESSEN ×].
   Gemeinsam: EINE Stimme (Barlow 12/500 Versalien .12em wie die Knopf-Familie), Knoepfe auf der Versalhoehe der Wortmarke,
   „Schliessen" statt „Close", Aufruf im offenen Menue ganz weg, Panel-Tinte offen immer schwarz. */
.lpnav.is-open .lpnav-logo { color: var(--lpnav-paper); }   /* unveraendert aus dem Bestand */
/* Am Handy deckt das weiße Panel die ganze Breite: dort stand die Wortmarke offen weiß auf Weiß — unsichtbar, aber antippbar
   (dieselbe Klasse wie der weiße Aufruf vom 24.09., Befund beider Juroren 28.09.). Offen trägt sie deshalb die Panel-Tinte,
   und zwar erst, wenn das weiße Panel über sie läuft (Panels 0,62 s ab 0 / 0,09 / 0,18 s — über der Wortmarke ab ~0,35 s). */
@media (max-width: 767px) { html .lpnav.is-open .lpnav-logo { color: #000; } }
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) { html .lpnav.is-open .lpnav-logo { transition-delay: .35s, 0s, 0s, 0s; } }
.lpnav {
  --lpnav-ground: #fff;                          /* Gegenfarbe zur Tinte: Schrift auf gefuellten Flaechen */
  --kh: 46px;                                    /* Kopfmass = Versalhoehe der Wortmarke: 148 px x 1000 / 3178,7 = 46,6 px */
  --khit: max(44px, var(--kh));                  /* Trefferflaeche nie unter 44 px */
  --kpad: 28px;                                  /* Polster wie Footer-Knopf C / .rf-btn */
  --kease: cubic-bezier(.22, 1, .36, 1);         /* Easing der Knopf-Familie (site.css --ease) */
}
html.nav-light .lpnav, html.nav-light-r .lpnav .lpnav-right { --lpnav-ground: #000; }
/* Offenes Menue: das Panel ist Papier. Tinte im Panel und am Schliessen-Knopf fest schwarz, auch wenn der Kopf vorher ueber
   einem dunklen Peak stand — nav-light faerbte sonst Links, Rechtliches und Schliessen weiss auf weiss (Befund 24.09.2026,
   tools/_kopf-dunkel-offen.mjs). Die Gestalt des offenen Menues bleibt damit genau die entworfene. */
html .lpnav.is-open .lpnav-panel, html .lpnav.is-open .lpnav-header .lpnav-toggle { --lpnav-ink: #000; --lpnav-ground: #fff; }

/* Kopf auf ganzen Pixeln: 1,6 rem = 25,6 px liess die 1,5-px-Linien je nach Lage auf 1 oder 2 px schnappen (oben 1, unten 2 —
   Geraetepixel gemessen 24.09.2026); 26 px verschiebt das Logo um 0,4 px und macht jede Linie im Kopf gleich scharf. */
.lpnav-header { padding-top: 26px; padding-bottom: 26px; }
/* Die Knoepfe stehen auf der Versalhoehe der Wortmarke: Oberkante = Oberkante LUVIREL, Unterkante = Grundlinie; die Zeile
   darunter haengt links allein (vorher mittig auf dem ganzen Lockup, 13 px unter der Wortmarken-Mitte). */
.lpnav-right { display: flex; align-items: center; gap: var(--kgap, 28px); align-self: flex-start;
  margin-top: calc((var(--kh) - var(--khit)) / 2); }

/* Aufruf: Knopf-Familie der Site (Footer C / .rf-btn, site-weit vereinheitlicht 24.09.) — Barlow 12/500 Versalien .12em,
   Polster 28, Pfeil-Glyphe 14 px hinter dem Wort, Gruppe mittig; eigenes Kopfmass ist allein die Hoehe. */
.lpnav .lpnav-cta { position: relative; display: flex; align-items: center; height: var(--khit); padding: 0;
  color: var(--lpnav-ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color .35s ease, opacity .45s var(--lpnav-ease) .3s, visibility 0s linear .3s; }
/* im offenen Menue tritt der Aufruf ganz ab — vorher wurde er weiss auf dem weissen Panel und blieb klickbar */
.lpnav.is-open .lpnav-cta { opacity: 0; visibility: hidden; pointer-events: none;
  transition: color .35s ease, opacity .25s var(--lpnav-ease), visibility 0s linear .25s; }
.lpnav-cta-f { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--kh); padding: 0 var(--kpad); font: 500 12px/1 Barlow, Arial, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap; transition: color .35s var(--kease); }
.lpnav-cta-f::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lpnav-ink);
  transition: clip-path .5s var(--kease); }
.lpnav-cta-a { display: inline-block; transition: transform .5s var(--kease); }
/* Hover nur auf Zeiger-Geraeten: auf Touch bliebe :hover nach dem Tippen kleben (Menue-Knopf stand nach dem Schliessen gefuellt) */
@media (hover: hover) { .lpnav-cta:hover .lpnav-cta-a { transform: translateX(6px); } }
.lpnav-cta:focus-visible .lpnav-cta-a { transform: translateX(6px); }
.lpnav .lpnav-cta:focus-visible, .lpnav .lpnav-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Menue-Knopf: EINE Stimme mit dem Aufruf. Das Wort rollt beim Oeffnen zu „Schliessen" (Mechanik des Bestands), die
   Wort-Maske ist so breit wie das SICHTBARE Wort (nav.js misst beide) — sonst stuende neben „Menue" die Breite von
   „Schliessen" als Loch. */
.lpnav .lpnav-toggle { position: relative; display: flex; align-items: center; justify-content: flex-end; height: var(--khit);
  min-width: 44px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; cursor: pointer;
  color: var(--lpnav-ink); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: color .35s ease; }
.lpnav-toggle-f { position: relative; z-index: 0; display: flex; align-items: center; gap: 12px; height: var(--kh);
  font: 500 12px/1 Barlow, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: color .35s var(--kease); }
.lpnav-toggle-text { display: flex; flex-direction: column; align-items: flex-end; height: 1.5em; overflow: hidden;
  width: var(--lpt-w0, auto); transition: width .5s var(--lpnav-ease); }
.lpnav.is-open .lpnav-toggle-text { width: var(--lpt-w1, auto); }
.lpnav-toggle-text span { display: block; flex: none; line-height: 1.5em; transition: transform .5s var(--lpnav-ease); }
.lpnav.is-open .lpnav-toggle-text span { transform: translateY(-100%); }
.lpnav-toggle-icon { position: relative; flex: none; transition: transform .5s var(--lpnav-ease); }
/* Linien 1 px: so stark wie der Knopf-Rahmen und die Staemme von Barlow 12/500; 1,5 px rendert Chromium je nach Lage 1 oder 2 px
   dick (auf jeder Pixeldichte, tools/_kopf-linien-probe.mjs 24.09.2026) — ganze Pixel sind die einzige gleichmaessige Staerke. */
.lpnav-toggle-icon i { position: absolute; display: block; height: 1px; background: currentColor;
  transition: transform .5s var(--lpnav-ease), width .45s var(--kease); }

.lpnav { --kgap: 0px; }
.lpnav-cta-f { outline: 1px solid var(--lpnav-ink); outline-offset: -1px; }
.lpnav-cta-f::before { clip-path: inset(100% 0 0 0); }
@media (hover: hover) {
  .lpnav-cta:hover .lpnav-cta-f { color: var(--lpnav-ground); }
  .lpnav-cta:hover .lpnav-cta-f::before { clip-path: inset(0 0 0 0); }
}
.lpnav-cta:focus-visible .lpnav-cta-f { color: var(--lpnav-ground); }
.lpnav-cta:focus-visible .lpnav-cta-f::before { clip-path: inset(0 0 0 0); }

.lpnav-toggle-icon { width: 20px; height: 8px; }
.lpnav-toggle-icon i { right: 0; width: 20px; }
.lpnav-toggle-icon i:first-child { top: 0; }
.lpnav-toggle-icon i:last-child { bottom: 0; width: 12px; }
@media (hover: hover) { .lpnav-toggle:hover .lpnav-toggle-icon i:last-child { width: 20px; } }
.lpnav.is-open .lpnav-toggle-icon i { width: 20px; }
.lpnav.is-open .lpnav-toggle-icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
.lpnav.is-open .lpnav-toggle-icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.lpnav-toggle-f { padding: 0 var(--kpad); outline: 1px solid var(--lpnav-ink); outline-offset: -1px; }
.lpnav-toggle-f::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lpnav-ink);
  clip-path: inset(100% 0 0 0); transition: clip-path .5s var(--kease); }
@media (hover: hover) {
  .lpnav.is-open .lpnav-toggle:hover .lpnav-toggle-f { color: var(--lpnav-ground); }
  .lpnav.is-open .lpnav-toggle:hover .lpnav-toggle-f::before { clip-path: inset(0 0 0 0); }
}
.lpnav.is-open .lpnav-toggle:focus-visible .lpnav-toggle-f { color: var(--lpnav-ground); }
.lpnav.is-open .lpnav-toggle:focus-visible .lpnav-toggle-f::before { clip-path: inset(0 0 0 0); }
.lpnav .lpnav-toggle { margin-left: -1px; }

@media (max-width: 767px) {
  .lpnav { --kh: 38px; --kpad: 16px; --kgap: 0px; }   /* 120-px-Wortmarke: Versalhoehe 37,8 px */
  .lpnav-toggle-text { display: none; }
  .lpnav-toggle-f { width: var(--kh); padding: 0; justify-content: center; }
  .lpnav .lpnav-toggle { min-width: 0; }
}
@media (max-width: 480px) { .lpnav-cta-a { display: none; } .lpnav { --kpad: 14px; } }
@media (max-width: 365px) {                     /* nur Wortmarke (76 px, 24 px hoch): Knoepfe auf ihre Mitte */
  .lpnav { --kpad: 12px; --kgap: 0px; }
  .lpnav-right { align-self: center; margin-top: 0; }
}
/* ABHEBEN · Fassung E „Kompakt" — Beim Einfahren wird der Kopf zur schmalen Leiste: die Zeile unter LUVIREL klappt weg, Logo und Leiste rücken zusammen, 79 statt 125 px — zurück oben entfaltet er sich wieder; die bewegteste Fassung. */
/* Abheben: Tinte folgt dem eigenen Grund (Schwelle, Grund-Berechnung: kopfAbheben() in nav.js) */
.lpnav { --kopf-grund: #fff; --kopf-tinte: #000; }
html:root .lpnav.is-abgehoben:not(.is-open),
html:root .lpnav.is-abgehoben:not(.is-open) .lpnav-logo,
html:root .lpnav.is-abgehoben:not(.is-open) .lpnav-right,
html:root .lpnav.is-abgehoben:not(.is-open) .lpnav-toggle,
html:root .lpnav.is-abgehoben:not(.is-open) .lpnav-cta { --lpnav-ink: var(--kopf-tinte); --lpnav-ground: var(--kopf-grund); }
.lpnav-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--kopf-platte-h, 100%); z-index: -1;
  background: var(--kopf-grund); clip-path: inset(0 0 100% 0); pointer-events: none;
  transition: clip-path .55s var(--lpnav-ease), background-color .25s ease, height .55s var(--lpnav-ease); }
.lpnav.is-abgehoben:not(.is-open) .lpnav-header::before { clip-path: inset(0 0 0 0); pointer-events: auto; }
.lpnav.is-grund-lauf .lpnav-header::before { transition-property: clip-path, height; }   /* Seite färbt um: Frame für Frame, ohne Nachlauf */
.lpnav { --kopf-hub: 10px; --kopf-platte-kompakt: 79px; }
.lpnav .lpnav-logo { clip-path: inset(-12px); transition: color .45s var(--lpnav-ease), transform .55s var(--lpnav-ease), clip-path .55s var(--lpnav-ease), opacity .3s ease; }
.lpnav .lpnav-right { transition: transform .55s var(--lpnav-ease); }
.lpnav.is-abgehoben:not(.is-open) .lpnav-logo,
.lpnav.is-abgehoben:not(.is-open) .lpnav-right { transform: translateY(calc(-1 * var(--kopf-hub))); }
.lpnav.is-abgehoben:not(.is-open) .lpnav-logo { clip-path: inset(-12px -12px 35.77% -12px); }
.lpnav.is-abgehoben:not(.is-open) { --kopf-platte-h: var(--kopf-platte-kompakt); }
.lpnav.is-abgehoben:not(.is-open):has(.lpnav-logo:focus-visible) { --kopf-platte-h: 100%; }
.lpnav.is-abgehoben:not(.is-open):has(.lpnav-logo:focus-visible) .lpnav-logo,
.lpnav.is-abgehoben:not(.is-open):has(.lpnav-logo:focus-visible) .lpnav-right { transform: none; }
.lpnav.is-abgehoben:not(.is-open) .lpnav-logo:focus-visible { clip-path: inset(-12px); }
@media (max-width: 767px) { .lpnav { --kopf-hub: 12px; --kopf-platte-kompakt: 66px; } }
@media (max-width: 365px) { .lpnav { --kopf-platte-kompakt: 72px; } .lpnav.is-abgehoben:not(.is-open) .lpnav-logo { clip-path: inset(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .lpnav-header::before, .lpnav-header::after, .lpnav-logo::before, .lpnav-right::before, .lpnav .lpnav-logo, .lpnav .lpnav-right { transition-duration: .001s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lpnav .lpnav-cta, .lpnav-cta-f, .lpnav-cta-f::before, .lpnav-cta-a, .lpnav-toggle-f, .lpnav-toggle-f::before,
  .lpnav-toggle-f::after, .lpnav-toggle-text, .lpnav-toggle-text span, .lpnav-toggle-icon, .lpnav-toggle-icon::before,
  .lpnav-toggle-icon i { transition-duration: .001s !important; transition-delay: 0s !important; }
}
/* KOPF:END */
/* ── Overlay + Panel ────────────────────────────────────── */
.lpnav-overlay-wrap {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  display: none; /* von nav.js auf 'block' gesetzt während offen — kein
                    dauerhaftes Fullscreen-Fixed-Layer (Safari-Black-Screen) */
}
.lpnav.is-open .lpnav-overlay-wrap { pointer-events: auto; }

.lpnav-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.55s var(--lpnav-ease);
}
.lpnav.is-open .lpnav-overlay { opacity: 1; }

.lpnav-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(35em, 100%);
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s var(--lpnav-ease);
}

/* Schließen als EIN Blatt (29.09.2026, Leo: „Menü links zugeklickt, die Seitennamen bleiben stecken, obwohl das Menü schon zu ist“).
   Vorher lief jedes Teil seine Öffnen-Bewegung einzeln rückwärts: das Papier fuhr 560 px zur Seite, die Namen nur eine Zeile nach
   unten in ihre Maske — nach ~30 px Papierweg standen sie frei über der Seite (gemessen ~0,2 s, bis 42.000 px² Schrift, KONTAKT auf
   „WEBDESIGN-STUDIO“; tools/_menu-zu-probe.mjs). Wie im Osmo-Vorbild (menu xPercent 120) fährt jetzt das ganze Panel mit Papier,
   Namen und Rechtlichem hinaus; .is-closing hält dabei alle inneren Teile auf ihrem Offen-Stand, der Schatten der Papierkante
   (60 px Unschärfe) ist bei 120 % aus dem Bild. Zurückgesetzt wird erst, wenn die Hülle display:none hat (keine Transition) —
   das nächste Öffnen spielt den Auftritt wieder von vorn. Die Tinte bleibt im Panel schwarz wie offen (sonst wird sie über
   dunklen Sektionen weiß auf dem Papier, während es hinausfährt). */
.lpnav.is-closing .lpnav-panel { transform: translateX(120%); }
.lpnav.is-closing .lpnav-bg-panel { transform: translateX(0); }
.lpnav.is-closing .lpnav-link { transform: translateY(0) rotate(0deg); }
.lpnav.is-closing .lpnav-fade { opacity: 1; transform: translateY(0); }
html .lpnav.is-closing .lpnav-panel { --lpnav-ink: #000; --lpnav-ground: #fff; }

/* Gestaffelte Wipe-Panels (schwarz → Akzent → weiß) */
.lpnav-bg { position: absolute; inset: 0; z-index: 0; }
.lpnav-bg-panel {
  position: absolute;
  inset: 0;
  transform: translateX(101%);
  transition: transform 0.62s var(--lpnav-ease);
}
.lpnav-bg-panel.first  { background: #0a0a0a; }
/* mittlerer Streifen in der Akzentfarbe des Footers (Leo 29.09.: „statt beige orange wie im Footer“; vorher #b8b4ad) */
.lpnav-bg-panel.second { background: var(--akzent, #ff4f1f); }
.lpnav-bg-panel.third  { background: var(--lpnav-paper); box-shadow: -28px 0 60px rgba(10,10,10,0.12); }
.lpnav.is-open .lpnav-bg-panel.first  { transform: translateX(0); transition-delay: 0s; }
.lpnav.is-open .lpnav-bg-panel.second { transform: translateX(0); transition-delay: 0.09s; }
.lpnav.is-open .lpnav-bg-panel.third  { transform: translateX(0); transition-delay: 0.18s; }

.lpnav-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3em;
  height: 100%;
  padding: clamp(5.5rem, 9vh, 8rem) clamp(1.75rem, 3vw, 2.6rem) clamp(3.2rem, 6vh, 4.5rem);
  overflow: auto;
}

/* ── Große Links ────────────────────────────────────────── */
.lpnav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.lpnav-item {
  position: relative;
  overflow: hidden;
}
.lpnav-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  width: 100%;
  padding: 0.6em 0.6em;
  text-decoration: none;
  transform: translateY(135%) rotate(5deg);
  transition: transform 0.75s var(--lpnav-ease);
}
.lpnav.is-open .lpnav-link {
  transform: translateY(0) rotate(0deg);
  transition-delay: calc(0.34s + var(--i, 0) * 0.05s);
}

.lpnav-link-h {
  position: relative;
  z-index: 1;
  font: 400 clamp(2.2rem, 5.6vw, 4.4rem)/0.82 Anton, "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--lpnav-ink);
  text-shadow: 0 1em 0 var(--lpnav-paper);
  transition: transform 0.55s var(--lpnav-ease);
}
.lpnav-link-num {
  position: relative;
  z-index: 1;
  margin-top: 0.4em;
  font: 500 0.8rem/1 Barlow, sans-serif;
  letter-spacing: 0.12em;
  color: var(--lpnav-ink);
  opacity: 0.4;
}
.lpnav-link-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--lpnav-ink);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.55s var(--lpnav-ease);
}
@media (hover: hover) {
  .lpnav-link:hover .lpnav-link-h { transform: translateY(-1em); transition-delay: 0.08s; }
  .lpnav-link:hover .lpnav-link-num { opacity: 0; }
  .lpnav-link:hover .lpnav-link-bg { transform: scaleY(1); }
}
/* Aktive Seite dezent markieren */
.lpnav-link.is-current .lpnav-link-num { opacity: 1; }

/* ── Footer im Panel: Rechtliches + Socials ─────────────── */
.lpnav-details {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  padding-left: 0.6em;
}
.lpnav-fade {
  opacity: 0;
  transform: translateY(45%);
  transition: opacity 0.5s var(--lpnav-ease), transform 0.5s var(--lpnav-ease);
}
.lpnav.is-open .lpnav-fade {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.5s + var(--i, 0) * 0.04s);
}
.lpnav-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
}
.lpnav-legal a {
  display: inline-block;
  font: 500 0.72rem/1 Barlow, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lpnav-ink);
  opacity: 0.5;
  text-decoration: none;
  transform-origin: left center;
  transition: opacity 0.3s, transform 0.5s var(--lpnav-ease);
}
/* Hover: Wort kippt/dreht leicht — kein Hintergrund */
@media (hover: hover) {
  .lpnav-legal a:hover { opacity: 1; transform: rotate(-7deg); }
}

.lpnav-socials-row {
  display: flex;
  align-items: center;
  gap: 1.2em;
}
.lpnav-socials-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--lpnav-ink);
  transition: transform 0.4s var(--lpnav-ease), opacity 0.3s;
}
.lpnav-socials-row a svg { display: block; width: 100%; height: 100%; }
@media (hover: hover) {
  .lpnav-socials-row a:hover { transform: translateY(-3px); opacity: 0.6; }
}

/* Body-Lock wenn Menü offen */
body.lpnav-lock { overflow: hidden; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .lpnav-panel { width: 100%; }
  .lpnav-bg-panel { border-radius: 0; }
  .lpnav-inner { padding-top: clamp(6rem, 14vh, 9rem); }
  .lpnav-link-h { font-size: clamp(2.4rem, 11vw, 3.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lpnav-panel, .lpnav-bg-panel, .lpnav-link, .lpnav-fade, .lpnav-overlay {
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
  }
}