/* ═══════════════════════════════════════════════════════════════
   V4-Nav (helle Variante) — das Stylesheet der Navigation, für ALLE
   Seiten. Markup: partials/v4-nav.blade.php, Verhalten: js/v4-nav.js.

   Bis zum 16.09.2026 stand hier: „Die beiden V4-Seiten (Startseite,
   Products-Cafés) behalten ihr Inline-CSS — Muster des Exports."
   Products-Cafés hatte schon vorher keines mehr, die Startseite trug
   bis dahin einen Zwilling dieser Datei in ihrem eigenen <style>:
   rund 90 Regeln doppelt, neun auseinandergelaufen, drei davon
   sichtbar kaputt. Wer eine Regel hier ändert, ändert sie ab jetzt
   für alle vier Seiten — das ist der Sinn der Datei.

   Abweichung zur Quelle: Dropdown/Backdrop bei top:72px statt 130px
   (keine Quick-Nav-Leiste unter der Nav).
   ═══════════════════════════════════════════════════════════════ */

/* Randabstand 48px → 30px (Julian, 27.08.2026): "das steht irgendwie noch
   sehr weit links drin ... wuerde ich beide ein bisschen weiter nach aussen".
   Links und rechts waren schon exakt gleich gemessen — es war kein
   Ungleichgewicht, sondern schlicht zu viel Rand. Burger und Ansprechpartner
   sitzen jetzt naeher an der Kante, ohne sie zu beruehren; das Logo bleibt
   mittig. Unter 640px gelten weiter 16px. */
/* --nav-h = die eine Quelle für die Nav-Höhe (CLAUDE.md „Viewport-System"): 72px, unter
   640px 60px (Media-Block unten). app.css trägt denselben Wert für Seiten-Paddings —
   der Konfigurator lädt app.css nicht und bekommt das Token erst hierüber (F-12, 07.09.2026). */
:root { --nav-h: 72px; }
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(255,255,255,0.66); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 1px 0 rgba(13,13,13,0.08); transition: background 0.25s ease, box-shadow 0.25s ease; }
.nav.nav-scrolled { background: rgba(255,255,255,0.72); }
/* App-Layouts (Konfigurator: 100svh-Flex-Spalte, Seite scrollt nicht):
   Nav als Flex-Kind statt fixed — ersetzt dort den bisherigen Header.
   z-index: MUSS über dem #nav-dd-backdrop (97) liegen — der steht außerhalb
   des <nav>, und die Nav bildet als position:relative einen eigenen Stacking-
   Context. Liegt sie darunter, deckt der Backdrop das komplette offene Menü
   ab und frisst jeden Klick/Hover (Bug im Konfigurator, Julian 19.08.2026).
   Gleichzeitig unter den Seiten-Dialogen (.kf-modal = 100) bleiben. */
.nav.nav-statisch { position: relative; top: auto; flex: none; z-index: 99; }
/* Auf App-Layouts scrollt die Seite seit 04.09.2026 unter den Konfigurator —
   die statische Nav scrollt mit weg, das Logo soll dabei nicht zum „M" springen. */
.nav.nav-statisch.nav-scrolled .logo-swap .logo-full { clip-path: none; opacity: 1; transform: none; }
.nav.nav-statisch.nav-scrolled .logo-swap .logo-m { opacity: 0; }
.nav-left { display: flex; align-items: center; gap: 14px; position: relative; }
.nav-logo-center { display: flex; align-items: center; text-decoration: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav-logo-center img { height: 28px; width: auto; display: block; }
/* Logo-Swap: volles Logo → nur das „M" beim Scrollen (1:1 aus dem Export).
   Auf App-Layouts ohne Scroll (nav-statisch) greift nav-scrolled nie —
   dort bleibt automatisch das volle Logo stehen. */
.logo-swap { position: relative; display: block; height: 28px; }
.logo-swap .logo-full {
  height: 28px; width: auto; display: block; filter: none;
  clip-path: inset(0 0 0 0); transform-origin: 0 50%;
  transition: opacity 0.55s ease, transform 0.85s cubic-bezier(0.34,1.05,0.64,1), clip-path 0.85s cubic-bezier(0.34,1.05,0.64,1);
}
.logo-swap .logo-m {
  position: absolute; left: 50%; top: 50%;
  height: 21px; width: 36px;                 /* M-Seitenverhältnis 699:405 */
  transform: translate(-50%, -50%) scale(0.82);
  background-image: url('/plattform-assets/mmd-logo.webp');
  background-repeat: no-repeat;
  background-size: 439.2% 196.5%;            /* 3070/699 × 796/405 */
  background-position: 0 0;                  /* linke obere Ecke = das M */
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease 0.18s, transform 0.85s cubic-bezier(0.34,1.05,0.64,1) 0.18s;
}
.nav.nav-scrolled .logo-swap .logo-full { clip-path: inset(0 100% 0 0); opacity: 0; transform: scale(0.96); }
.nav.nav-scrolled .logo-swap .logo-m { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .logo-swap .logo-full, .logo-swap .logo-m { transition: opacity 0.2s ease; }
}
.nav-burger-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #0d0d0d; cursor: pointer; padding: 0; transition: opacity 0.15s; }
.nav-burger-btn:hover { background: transparent; opacity: 0.6; }

/* Burger-Panel (Desktop-Dropdown-Liste) */
.nav-links { display: none; flex-direction: column; align-items: flex-start; gap: 2px; position: absolute; top: 100%; left: 0; margin-top: 12px; min-width: 220px; background: rgba(13,13,13,0.96); /* kein backdrop-filter: sperrte die fixed-Mega-Dropdowns als Containing Block im Panel ein */ border-radius: 14px; padding: 10px 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); z-index: 99; }
.nav-links.open { display: flex; }
.nav-links .nav-item { width: 100%; }
.nav-links .nav-item-link { width: 100%; padding: 11px 14px; border-radius: 8px; color: rgba(255,255,255,0.75); }
.nav-links .nav-item-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-links .nav-item.open .nav-item-link { color: #fff; }

.nav-right { display: flex; align-items: center; gap: 10px; }
/* Icons rechts stehen frei — keine Kreise/Rahmen, auf ALLEN Seiten gleich
   (Julian, 20.08.2026: „wie auf der Startseite, einfach nur freilegen").
   Farbe erbt von der Nav-Variante, Hover blendet nur ab. */
.nav-icon-btn { width: 31px; height: 31px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #0d0d0d; text-decoration: none; flex-shrink: 0; transition: color 0.15s; }
.nav-icon-btn:hover { color: rgba(13,13,13,0.55); }
.nav-icon-btn-dark { background: transparent; color: #0d0d0d; border: none; }
.nav-icon-btn-dark:hover { background: transparent; color: rgba(13,13,13,0.55); }
.nav-lang { position: relative; }
.nav-lang-btn { width: 31px; height: 31px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #0d0d0d; cursor: pointer; padding: 0; overflow: visible; font-size: 16px; line-height: 1; transition: color 0.15s; }
.nav-lang-btn:hover { color: rgba(13,13,13,0.55); }
/* „CREATE" als Pille in der Icon-Reihe (Julian, 25.09.2026) — Verlauf wie die
   Bereichs-Pille im Lab, etwas kleiner als die Icons daneben, und der Verlauf
   wandert ruhig hin und her („das farbliche so ruhig bewegt"): 14 s für eine
   volle Runde, das fällt nicht auf, lebt aber. */
.nav-lab-pille { display: inline-flex; align-items: center; height: 25px; padding: 0 12px; border-radius: 999px; background: linear-gradient(90deg, #ff5fa2, #7c5cff, #ff5fa2); background-size: 220% 100%; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: opacity .15s, transform .15s; animation: nav-lab-pille-fluss 14s ease-in-out infinite; }
.nav-lab-pille:hover { opacity: .9; transform: translateY(-1px); color: #fff; }
@keyframes nav-lab-pille-fluss { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .nav-lab-pille { animation: none; } }
.nav-lang-menu { position: absolute; top: 44px; right: 0; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px; min-width: 150px; display: none; flex-direction: column; gap: 2px; z-index: 150; }
.nav-lang-menu.open { display: flex; }
.nav-lang-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #0d0d0d; text-decoration: none; cursor: pointer; background: none; border: none; text-align: left; width: 100%; font-family: 'DM Sans', sans-serif; }
.nav-lang-item:hover { background: #f5f5f3; }

/* ── Kopfzeile rechts: Konto und drei Punkte (Julian, 09.10.2026) ─────────
   Website und CREATE tragen dasselbe Bauteil (partials/kopf-rechts) und nur
   diese Maße — Vorlage ist die Startseite: 31-px-Felder, 10 px Abstand
   (.nav-right), Hover blendet nur ab. Angemeldet steht statt des
   Personen-Symbols das Profilbild bzw. die Initiale, 28 px im 31-px-Feld. */
.kopf-konto-bild { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; text-decoration: none; }
.kopf-konto-bild > span, .kopf-konto-bild > img { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; object-fit: cover; transition: opacity 0.15s; }
/* line-height fest (12.10.2026): die Startseite vererbte 1,6 — das „M“ saß dort gut 2 px zu hoch (Julian: „Buchstabe nicht mittig“) */
.kopf-konto-bild > span { background: #0d0d0d; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; line-height: 1; }
.kopf-konto-bild:hover > span, .kopf-konto-bild:hover > img { opacity: 0.7; }
.nav.nav-dunkel .kopf-konto-bild > span { background: #f5f5f3; color: #0d0d0d; }
/* Drei blasse Punkte: Sprache und Pflichtangaben (js/kopf-rechts.js) */
.kopf-mehr { position: relative; display: inline-flex; flex: none; }
.kopf-mehr-knopf { width: 24px; height: 31px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: rgba(13,13,13,0.45); cursor: pointer; padding: 0; position: relative; transition: color 0.15s; }
.kopf-mehr-knopf svg { width: 16px; height: 16px; }
.kopf-mehr-knopf:hover, .kopf-mehr-knopf[aria-expanded="true"] { color: #0d0d0d; }
.nav.nav-dunkel .kopf-mehr-knopf { color: rgba(245,245,243,0.55); }
.nav.nav-dunkel .kopf-mehr-knopf:hover, .nav.nav-dunkel .kopf-mehr-knopf[aria-expanded="true"] { color: #f5f5f3; }
@media (pointer: coarse) { .kopf-mehr-knopf::before { content: ""; position: absolute; inset: 0 -8px; } }
/* Rechtsbündig unter den Punkten: sie sitzen am rechten Rand, linksbündig lief
   das Menü aus dem Fenster (Julian, 01.10.2026) */
.kopf-mehr-menue { position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 141; min-width: 170px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,0.14); padding: 6px; }
.kopf-mehr-menue[hidden] { display: none; }
.kopf-mehr-menue a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 9px; font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: #0d0d0d; text-decoration: none; }
.kopf-mehr-menue a:hover, .kopf-mehr-menue a.aktiv { background: #f5f5f3; }
.kopf-mehr-titel { margin: 6px 12px 2px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(13,13,13,0.45); }
.kopf-mehr-strich { display: block; height: 1px; margin: 4px 8px; background: rgba(0,0,0,0.08); }

/* Touch-Geräte: die Bedienelemente der Nav sind die wichtigsten Ziele der Seite
   und lagen bei 38 px (Burger) bzw. 31 px (Warenkorb, Wunschliste, Sprache).
   Vergrößert wird nur die KLICKFLÄCHE — die Icons behalten ihre Größe, weil
   Breite/Höhe hier auf min-* umgestellt werden und das Icon im Flex-Zentrum
   bleibt (gemessen 10.09.2026). */
@media (hover: none) {
  .nav-burger-btn, .nav-icon-btn, .nav-lang-btn, .kopf-konto-bild { position: relative; }
  /* Unsichtbares Trefferfeld: der Kreis bleibt 31 bzw. 38 px (auf der Startseite
     ist er sogar sichtbar umrandet — größer machen würde die Optik ändern),
     angetippt werden aber 43 px. -6 px, damit sich die Felder bei gap:10px
     nicht gegenseitig überlappen. */
  /* ::before, nicht ::after: das ::after dieser Knöpfe gehört dem Tooltip
     („.nav-tip::after"), und der wird auf Touch ausgeblendet — das hätte das
     Trefferfeld gleich mit abgeschaltet. */
  .nav-burger-btn::before, .nav-icon-btn::before, .nav-lang-btn::before, .kopf-konto-bild::before {
    content: ""; position: absolute; inset: -6.5px; border-radius: 50%;
  }
  .kopf-mehr-menue a { min-height: 44px; }   /* Tap-Ziel (Mobil-Checkliste) */
}

/* Dropdowns (Mega-Panels) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item-link { font-size: 13.5px; color: rgba(17,17,17,0.6); text-decoration: none; font-weight: 500; transition: color 0.15s, font-weight 0.1s; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-family: 'DM Sans', sans-serif; }
.nav-item-arrow { flex-shrink: 0; opacity: 0.9; transition: transform 0.15s ease; }
/* Mobile-Akkordeon: Pfeil dreht sich beim Aufklappen um */
@media (max-width: 900px) { .nav-item.open .nav-item-arrow { transform: rotate(180deg); } }
/* Fläche VOLL opak + klare Kante + kräftigerer Schatten. Erst 0.94-Glas
   (verschmolz mit dem Grund), dann 0.985 — aber auch dadurch schien die Seite
   noch durch (Julian, 31.08.2026: „niemals … wo man da durchschauen kann").
   Deshalb deckend; damit entfällt auch der backdrop-filter. */
.nav-dropdown { position: fixed; top: var(--nav-h); left: 0; width: 260px; background: #faf9f6; border-bottom: 1px solid rgba(13,13,13,0.12); border-right: 1px solid rgba(13,13,13,0.09); box-shadow: 0 18px 44px rgba(0,0,0,0.14); z-index: 98; padding: 6px 0 10px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, visibility 0.15s ease; }
.nav-dropdown.open { visibility: visible; opacity: 1; pointer-events: auto; }
/* Wechsel zwischen zwei offenen Panels ohne Blende (Julian, 16.09.2026: „ist
   kurz der Hintergrund zu sehen, das sieht fast aus, als ob das so umgerollt
   ist"). Ursache: das alte Panel blendet 150ms lang aus, während das neue
   einblendet. Zwei halbdurchsichtige, sonst deckende Flächen übereinander
   lassen in der Mitte des Übergangs rund ein Viertel des Hintergrunds durch.
   Beim Öffnen aus dem Nichts und beim Schließen bleibt die Blende — nur der
   Wechsel ist hart, und der ist es auch in jedem anderen Mega-Menü. */
.nav-dropdown.nav-dd-sofort { transition: none; }
.nav-dd-link, .nav-links .nav-dd-link { display: block; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: rgba(17,17,17,0.78); text-decoration: none; padding: 9px 20px; letter-spacing: -0.01em; line-height: 1; transition: color 0.12s, background 0.12s; }
.nav-dd-link:hover { color: #0d0d0d; background: #eceae6; }
.nav-dd-backdrop { position: fixed; inset: 0; top: var(--nav-h); background: rgba(0,0,0,0.18); z-index: 97; visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0.15s ease; pointer-events: none; }
.nav-dd-backdrop.show { visibility: visible; opacity: 1; pointer-events: auto; }
.nav-dropdown.nav-dropdown-mega { left: 0; right: 0; width: auto; padding: 30px 0 34px; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
/* Bildspalte direkt hinter den Textspalten statt am rechten Rand — der Leerraum
   dazwischen war zu groß (Julian, 02.09.2026). Vierte Spalte fest 280px, Grid linksbündig. */
.nav-dd-mega-grid { display: grid; grid-template-columns: 170px 170px 170px 280px; justify-content: start; gap: 32px 44px; margin: 0; padding: 0 44px; }
.nav-dd-col-head { font-family: Impact, 'Arial Narrow', sans-serif; font-size: 18px; font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; color: #0d0d0d; margin-bottom: 14px; }
.nav-dd-mega-grid .nav-dd-link { padding: 7px 0; font-size: 13.5px; }
.nav-dd-mega-grid .nav-dd-link:hover { background: none; color: #0d0d0d; }
/* Karte rechts bewusst kompakt (210px statt 260px) — die großen Bilder haben
   das ganze Menü riesig wirken lassen (Julian, 19.08.2026) */
/* 280px statt 210px (Julian, 28.08.2026: „das Video darf ein bisschen größer,
   sieht sonst lost in space aus") — die Eyebrows darüber sind dafür raus,
   unter dem Bild stehen nur noch Titel und ein kurzer Satz. */
.nav-dd-img-col { display: flex; flex-direction: column; width: 280px; margin-left: 0; white-space: normal; }
/* Eigene Farbe statt keiner: ohne sie färbt der Browser den Link blau
   (rgb(0,0,238)) — gemessen am 16.09.2026 beim Zusammenführen der zwei
   Nav-Fassungen. Heute unsichtbar, weil nur ein Bild darin steckt; sichtbar
   würde es, sobald jemand Text in die Karte legt.
   Ausgeschrieben und NICHT 'inherit' (Review 16.09.2026): auf den Seiten über
   layouts/app steht body { color: var(--white) } — 'inherit' hätte dort fast
   weißen Text auf dem hellen Panel ergeben und das Problem nur verschoben.
   #0d0d0d ist die Farbe von .nav-dd-img-title daneben. */
.nav-dd-img-link { display: block; text-decoration: none; white-space: normal; color: #0d0d0d; }
.nav-dd-img { width: 100%; aspect-ratio: 4/5; border-radius: 8px; overflow: hidden; background: #e8e8e6; margin-bottom: 12px; }
.nav-dd-img img, .nav-dd-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-dd-img-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17,17,17,0.4); margin-bottom: 8px; }
.nav-dd-img-title { font-family: Impact, 'Arial Narrow', sans-serif; font-size: 17px; letter-spacing: 0.02em; color: #0d0d0d; margin-bottom: 4px; }
.nav-dd-img-sub { font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.5; color: rgba(17,17,17,0.55); white-space: normal; word-wrap: break-word; }
/* Kontakt-Karte: quadratisches Bild, damit der Kontakt-Button unter dem Text
   noch ins Panel passt (Julian, 20.08.2026) */
.nav-dd-img-col--kontakt .nav-dd-img { aspect-ratio: 1/1; }
.nav-dd-img-col--kontakt .nav-dd-img-sub { font-size: 11.5px; }

/* Warenkorb-Zähler (Konfigurator-Korb) */
/* Zähler an Warenkorb und Favoriten — EINE Regel für Website und Create
   (Julian, 05.10.2026: „deutlich sauberer … gerne mit eigenen Regeln").
   Vorher drei Fassungen in drei Dateien, verschieden groß und gefärbt, und
   im Create-Bereich gar keine für die Favoriten. Die Regeln:
   · eine Farbe für beide (das Blau des Systems, wie der Punkt an „Projekt
     speichern") — Rot heißt hier sonst Fehler
   · 16 px hoch, rund; ab zwei Ziffern eine Pille, „99+" ist das Ende
   · gleich breite Ziffern, damit „10" und „11" nicht springen
   · sitzt an der oberen rechten Ecke NEBEN dem Symbol, nicht auf seinem
     Strich — vorher lief die Zahl in den Korb hinein (Julians Bild). Ein
     Ring in Hintergrundfarbe ging nicht: die Website-Nav ist halbdurchsichtig,
     auf grauem Grund wurde der Ring zum dicken weißen Rand */
.nav-cart-count, .nav-wunsch-count {
  position: absolute; top: -3px; right: -7px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: #2f6bff; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.nav-cart-count[hidden], .nav-wunsch-count[hidden] { display: none; }


/* ── Desktop-Menü als EIN großes Panel: helle Spalte links (statt kleinem
     dunklen Zwischen-Panel) + Mega bündig daneben, gleiche Höhe.
     (Julian, 19.08.2026 — identisch in v4-nav.css UND Startseiten-Inline pflegen!) ── */
@media (min-width: 901px) {
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; margin-top: 0;
    width: 260px; min-width: 0; height: 440px; max-height: calc(100vh - var(--nav-h));
    background: transparent; border-radius: 0; padding: 24px 0 20px;
    /* Trenn-Strich Spalte/Mega: DECKEND, nie rgba! Der Spalten-Grund liegt auf
       ::before (nur Padding-Box) — hinter dem 1px-Border liegt direkt die
       Seite, ein transparenter Strich ließ sie durchschimmern (31.08.2026). */
    box-shadow: none; border-right: 1px solid #e3e2df;
    overflow-y: auto; z-index: 99;
  }
  /* Grund über ::before (ein backdrop-filter direkt auf .nav-links würde die
     position:fixed-Mega-Panels einsperren — Containing Block; inzwischen ist
     die Fläche eh deckend und braucht keinen Filter mehr).
     Farbe EXAKT wie das Mega-Panel daneben und VOLL opak (Julian, 31.08.2026):
     durch jedes Rest-Glas schien die Seite („niemals … durchschauen") und
     ungleiche Deckung machte aus der Naht ein dunkles Band. Spalte + Mega
     lesen als EIN Panel, getrennt nur vom border-right-Strich. */
  .nav-links::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #faf9f6;
  }
  /* 0.85 statt 0.65 (16.09.2026): die Startseite trug in ihrer eigenen Fassung
     den dunkleren Wert, alle anderen Seiten den helleren — beim Zusammenführen
     gewinnt der dunklere. Auf #faf9f6 liegt 0.65 bei rund 4,2:1 und damit unter
     den 4,5:1, die WCAG für Fließtext verlangt; 0.85 kommt auf rund 7:1. Es ist
     die linke Menüspalte, also der meistgelesene Text der ganzen Navigation. */
  .nav-links .nav-item-link { color: rgba(17,17,17,0.85); padding: 13px 28px; border-radius: 0; font-size: 14px; font-weight: 500; }
  .nav-links .nav-item-link:hover { background: rgba(0,0,0,0.04); color: #0d0d0d; }
  /* Pfeile zeigen in der Spalte nach RECHTS (das Panel öffnet rechts daneben) —
     der Runter-Pfeil hat die Logik unklar gemacht (Julian, 19.08.2026) */
  .nav-links .nav-item-arrow { transform: rotate(-90deg); margin-left: auto; }
  /* Aktiver Punkt UNÜBERSEHBAR: Balken links + Fettung + leichte Fläche */
  .nav-links .nav-item.open .nav-item-link {
    color: #0d0d0d; font-weight: 700; background: rgba(0,0,0,0.05);
    box-shadow: inset 3px 0 0 #0d0d0d;
  }
  /* Mega läuft bis zum rechten Rand durch (Julian, 20.08.2026 — Vorbild
     spized): das Panel beginnt neben der Menüspalte und endet am Bildschirm,
     nicht am Inhalt. Die Bildkarte sitzt dadurch rechtsbündig, die Textspalten
     bekommen Luft, ohne dass das Panel höher wird. */
  .nav-dropdown.nav-dropdown-mega {
    left: 260px; right: 0; min-width: 0;
    height: 440px; max-height: calc(100vh - var(--nav-h));
    /* Nie scrollbar (Julian, 28.08.2026) — die Karte ist ohne Textzeilen und
       mit gedeckelter Bildhöhe so bemessen, dass alles in die 440px passt. */
    overflow: hidden;
  }
  /* Bildkarte füllt die Panelhöhe (440 − 30 − 34 = 376px) — vorher blieben ~70px
     Leerraum unter dem Bild (Julian, 02.09.2026). Kontakt-Karte: Bild + Knopf. */
  .nav-dd-img { aspect-ratio: auto; height: 376px; max-height: none; margin-bottom: 0; }
  .nav-dd-img-col--kontakt .nav-dd-img { height: 328px; margin-bottom: 12px; }
  /* Textspalten links, Bildkarte DIREKT dahinter (Julian, 02.09.2026: zu viel
     Leerraum bis zum Bild am rechten Rand) */
  .nav-dropdown-mega .nav-dd-mega-grid {
    grid-template-columns: 190px 190px 190px 280px; justify-content: start;
    padding: 0 44px; gap: 40px 48px;
  }
  .nav-dropdown-mega .nav-dd-img-col { justify-self: start; }
  /* Lösungen hat seit 03.09.2026 nur zwei Textspalten (Spalte „Loslegen" raus) */
  #nav-dropdown-machen .nav-dd-mega-grid { grid-template-columns: 190px 190px 280px; }
  /* Zwei Bildkarten in den Menüs mit nur zwei Textspalten (Julian, 15.09.2026):
     eine einzelne Karte wirkte dort verloren. Bei „Referenzen" stand Spalte 3
     ohnehin leer, die Karte saß per grid-column:4 daneben.
     Erst ab 1200px: zwei Karten ergeben 190+190+280+280 plus Abstände und
     Innenrand = 1172px. Darunter bliebe es bei einer Karte, sonst schiebt das
     Menü die Seite waagerecht auf. */
  #nav-dropdown-machen .nav-dd-img-col + .nav-dd-img-col,
  #nav-dropdown-referenzen .nav-dd-img-col + .nav-dd-img-col { display: none; }
}

@media (min-width: 1200px) {
  #nav-dropdown-machen .nav-dd-mega-grid,
  #nav-dropdown-referenzen .nav-dd-mega-grid { grid-template-columns: 190px 190px 280px 280px; }
  #nav-dropdown-machen .nav-dd-img-col + .nav-dd-img-col,
  #nav-dropdown-referenzen .nav-dd-img-col + .nav-dd-img-col { display: flex; }
}

/* ── Hover-Label an den Nav-Icons (data-tip) ── */
.nav-tip { position: relative; overflow: visible; } /* overflow:hidden der Icon-Buttons würde das Label abschneiden (Flagge clippt sich selbst per SVG-clipPath) */
.nav-tip::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(0.96); background: #0d0d0d; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 6px 9px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease, transform 0.12s ease; z-index: 300;
}
.nav-tip:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
@media (hover: none) { .nav-tip::after { display: none; } } /* Touch: kein schwebendes Label */
/* Label darf nicht am runden Icon-Button clippen: die Regel muss die
   overflow:hidden-Angabe von .nav-lang-btn/.nav-icon-btn schlagen, egal in
   welcher Reihenfolge die Blöcke stehen (auf der Startseite kam .nav-lang-btn
   NACH .nav-tip → Telefon/Konfigurator/Wunschliste zeigten kein Label,
   Julian 20.08.2026). Zwei Klassen = höhere Spezifität. */
.nav-lang-btn.nav-tip, .nav-icon-btn.nav-tip, .nav-lang.nav-tip { overflow: visible; }

/* ── Mobile-Drawer (Burger-Panel wird zum Slide-in von rechts, wie Startseite) ── */
.nav-mobile-close-row { display: none; }
/* z-index MUSS unter BEIDEN Nav-Varianten bleiben (.nav 101, .nav-statisch 99):
   der Drawer (.nav-links, z 200) lebt IM Stacking-Context der Nav und kommt
   nie über deren eigenen z-index hinaus. Mit 199 lag das Overlay über dem
   kompletten Drawer — grau verhangen, und jeder Tipp traf das Overlay statt
   der Menüpunkte (gefunden 31.08.2026). 98 = über dem #nav-dd-backdrop (97),
   unter allem, was zur Nav gehört. */
.nav-burger-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 98; }
@media (max-width: 900px) {
  .nav-links {
    display: flex; position: fixed; top: 0; right: 0; left: auto; margin-top: 0;
    width: min(340px, 86vw); max-width: 340px; height: 100vh; height: 100svh; min-width: 0;
    background: #f5f4f0; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0; padding: 0;
    /* Schatten und Sichtbarkeit nur offen (Prüfrunde 05.10.2026): geschlossen
       lag der Schatten als grauer Streifen am rechten Rand jeder Seite, und die
       Links blieben per Tab erreichbar. visibility schaltet nach der Animation. */
    box-shadow: none; visibility: hidden;
    transform: translateX(100%); transition: transform 0.3s ease, visibility 0s linear 0.3s, box-shadow 0.3s ease;
    pointer-events: none; z-index: 200; overflow-y: auto; flex-direction: column;
    align-items: stretch; gap: 0;
  }
  .nav-links.open { transform: translateX(0); pointer-events: auto; visibility: visible; box-shadow: -12px 0 40px rgba(0,0,0,0.28); transition: transform 0.3s ease, visibility 0s, box-shadow 0.3s ease; }
  /* Offenes Menü: die Seite dahinter scrollt nicht mit (v4-nav.js setzt die Klasse) */
  html.nav-scroll-gesperrt, html.nav-scroll-gesperrt body { overflow: hidden; }
  .nav-burger-overlay.show { display: block; }
  .nav-mobile-close-row {
    display: flex; align-items: center; gap: 10px; padding: 20px 22px;
    border-bottom: 1px solid rgba(0,0,0,0.08); cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 15px; color: #0d0d0d; font-weight: 500;
  }
  /* display:block statt des flex-row aus der Basisregel (.nav-item, Z. 83):
     im Akkordeon muss das aufgeklappte Panel UNTER den Titel — als Flex-Zeile
     standen Titel und Inhalt nebeneinander und quetschten sich (31.08.2026). */
  .nav-links .nav-item { display: block; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.08); }
  .nav-links .nav-item-link { display: flex; width: 100%; padding: 18px 22px; font-size: 15.5px; justify-content: space-between; border-radius: 0; color: rgba(13,13,13,0.72); }
  .nav-links .nav-item-link:hover { background: rgba(0,0,0,0.03); color: #0d0d0d; }
  /* Offener Punkt: dunkel auf hellem Drawer — die Basisregel (Z. 64, altes
     dunkles Popup) färbte den Titel sonst weiß auf fast weiß (31.08.2026). */
  .nav-links .nav-item.open .nav-item-link { color: #0d0d0d; font-weight: 600; background: rgba(0,0,0,0.04); }
  /* Dropdowns werden im Drawer zum Akkordeon. display:none ist hier Pflicht:
     visibility:hidden bei position:static hält die Höhe → Riesenlücken. */
  .nav-dropdown, .nav-dropdown.nav-dropdown-mega {
    display: none; position: static; width: 100%; height: auto; max-height: none; overflow: visible;
    box-shadow: none; border: none; border-radius: 0;
    background: rgba(0,0,0,0.025); padding: 0 0 10px;
  }
  /* :not(.open) ist Pflicht: ein Tipp setzt auf Touch auch :hover, und ohne
     die Ausnahme schlug diese Regel (0,2,1) das .open (0,2,0) — das Akkordeon
     hielt seinen Platz (display:block), war aber unsichtbar (31.08.2026). */
  .nav-item:hover .nav-dropdown:not(.open) { visibility: hidden; opacity: 0; pointer-events: none; }
  .nav-dropdown.open { display: block; visibility: visible; opacity: 1; pointer-events: auto; }
  .nav-dd-mega-grid { display: block; padding: 0 22px; max-width: none; margin: 0; }
  .nav-dd-mega-grid > div { margin-bottom: 18px; }
  .nav-dd-col-head { font-size: 14px; margin-bottom: 8px; }
  /* 15px statt 6px: mit line-height 1 und 14px Schrift ergab das 26px hohe
     Tap-Ziele — bei rund 66 Untermenü-Links, also der gesamten Handy-
     Navigation, und ohne Abstand dazwischen (Mobil-Audit 15.09.2026). */
  .nav-dd-mega-grid .nav-dd-link { padding: 15px 0; font-size: 14px; color: rgba(13,13,13,0.65); }
  .nav-dd-img-col { display: none; }
}

/* Mobil: schmale Leiste — die Telefonnummer weicht, Konfigurator, Warenkorb
   und Sprache bleiben. Die Sprache stand hier früher mit in der Ausblendliste
   und wanderte dafür ins Burger-Panel; seit dem 27.08.2026 gibt es nur noch
   den einen Umschalter oben rechts (Julian: „nur da, wo sie immer sind"). */
@media (max-width: 640px) {
  :root { --nav-h: 60px; } /* Nav, Dropdown-Oberkante und Backdrop folgen dem Token */
  .nav { padding: 0 16px; }
  .nav-right > a[href^="tel:"] { display: none; } /* nur die Nummer in der Leiste — nicht der Anruf-Knopf im Berater-Widget (02.09.2026) */
  /* Sieben Elemente plus mittiges Logo passen auf kein Handy: die Icon-Reihe
     begann bei x=114, das Logo reicht bis 249 (Deep Dive, 03.09.2026). Bleiben:
     Burger · Logo · Anfrage/Warenkorb · Sprache · Ansprechpartner. Produkte,
     Konfigurator und Wunschliste stehen dafür als Schnellzugriff oben im
     Burger-Menü (.nav-mobile-schnell). Direkte Kinder: der Sprach-Knopf ist
     ebenfalls .nav-lang-btn, liegt aber in .nav-lang und bleibt. */
  .nav-right { gap: 6px; }
  .nav-right > a.nav-lang-btn, .nav-right > button.nav-lang-btn { display: none; }   /* die Create-Pille bleibt mobil sichtbar, links neben dem Menü (16.10.2026) */
  .nav-left { gap: 8px; }
  /* Mobil-Durchgang 16.10.2026: die Pille ist 25 px hoch — die Tippfläche wächst unsichtbar auf 45 px */
  .nav-lab-pille { position: relative; }
  .nav-lab-pille::after { content: ""; position: absolute; inset: -10px -4px; }
  /* Mit der Create-Pille links (16.10.2026) passte die volle Wortmarke nicht mehr
     zwischen Pille und Symbole — der Warenkorb lag auf dem Logo. Mobil steht
     darum das „M" (wie beim Scrollen), und das Herz weicht: Favoriten stehen im
     Burger-Menü als Schnellzugriff. */
  .nav-right .lab-korb:has(> [data-fav-knopf]) { display: none; }
  .logo-swap .logo-full { clip-path: inset(0 100% 0 0); opacity: 0; }
  .logo-swap .logo-m { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .nav-links .nav-mobile-schnell { display: grid; } /* spezifischer als die Basisregel (display:none) weiter unten */
  /* Logo 28 → 24px: bei 375px lag das volle Logo sonst noch 3–5px unter der
     verbliebenen Icon-Reihe. */
  .logo-swap, .logo-swap .logo-full, .nav-logo-center img { height: 24px; }
}
/* Schnellzugriff im Burger-Menü — nur mobil sichtbar (s. oben) */
/* Vier Kacheln seit dem Design-Lab-Eintrag (24.09.2026), zwei je Zeile: vier
   nebeneinander brachen bei 390 px „Konfigurator" mitten im Wort. */
.nav-mobile-schnell { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.nav-mobile-schnell > * { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 64px; padding: 10px 6px; min-width: 0; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,0.08); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: #0d0d0d; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.15; }
.nav-mobile-schnell > *:hover { border-color: rgba(0,0,0,0.25); }
.nav-mobile-schnell .nav-cart-count, .nav-mobile-schnell .nav-wunsch-count { top: 8px; right: 8px; transform: none; }

/* ═══ Dunkle Variante (nav-dunkel) — seit 01.09.2026 NICHT mehr vergeben
   (Julian: „Menü immer hell, auch auf der Startseite"; layouts/app übergibt
   überall navKlasse=''). Bleibt als fertige Variante stehen, falls dunkle
   Sonderseiten sie wieder brauchen. ═══ */
.nav.nav-dunkel { background: rgba(10,10,10,0.72); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.nav.nav-dunkel.nav-scrolled { background: rgba(10,10,10,0.88); }
.nav.nav-dunkel .nav-burger-btn { color: #f5f5f3; }
.nav.nav-dunkel .nav-lang-btn, .nav.nav-dunkel .nav-icon-btn { background: transparent; border: none; color: #f5f5f3; }
.nav.nav-dunkel .nav-lang-btn:hover, .nav.nav-dunkel .nav-icon-btn:hover { color: rgba(245,245,243,0.55); border-color: transparent; }
/* Warenkorb war als invertierter Akzent-Kreis gesetzt — steht jetzt wie alle
   anderen Icons frei (Julian, 20.08.2026) */
.nav.nav-dunkel .nav-icon-btn-dark { background: transparent; color: #f5f5f3; }
.nav.nav-dunkel .nav-icon-btn-dark:hover { background: transparent; color: rgba(245,245,243,0.55); }
.nav.nav-dunkel .logo-swap .logo-full, .nav.nav-dunkel .logo-swap .logo-m { filter: brightness(0) invert(1); }

/* Menü (Spalte + Mega) in dunklem Glas */
/* Voll opak + Trenn-Strich DECKEND (Julian, 31.08.2026: durchs 0.92-Glas und
   durch den rgba-Strich schien die Seite — hinter dem Border-Pixel liegt sie
   direkt, s. Kommentar im hellen Block). */
.nav.nav-dunkel .nav-links::before { background: #121212; }
.nav.nav-dunkel .nav-links { border-right-color: #343434; }
.nav.nav-dunkel .nav-links .nav-item-link { color: rgba(245,245,243,0.88); }
.nav.nav-dunkel .nav-links .nav-item-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav.nav-dunkel .nav-links .nav-item.open .nav-item-link { color: #fff; background: rgba(255,255,255,0.08); box-shadow: inset 3px 0 0 #f5f5f3; }
.nav.nav-dunkel .nav-dropdown { background: #121212; border-bottom-color: rgba(255,255,255,0.10); border-right-color: rgba(255,255,255,0.07); box-shadow: 3px 6px 18px rgba(0,0,0,0.35); }
.nav.nav-dunkel .nav-dd-col-head { color: #f5f5f3; }
.nav.nav-dunkel .nav-dd-link, .nav.nav-dunkel .nav-links .nav-dd-link { color: rgba(245,245,243,0.82); }
.nav.nav-dunkel .nav-dd-link:hover, .nav.nav-dunkel .nav-links .nav-dd-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.nav.nav-dunkel .nav-dd-mega-grid .nav-dd-link:hover { background: none; color: #fff; }
.nav.nav-dunkel .nav-dd-img-eyebrow { color: rgba(245,245,243,0.4); }
.nav.nav-dunkel .nav-dd-img-title { color: #f5f5f3; }
.nav.nav-dunkel .nav-dd-img-sub { color: rgba(245,245,243,0.7); }
.nav.nav-dunkel .nav-dd-img { background: #1a1a1a; }

/* Mobile-Drawer dunkel */
@media (max-width: 900px) {
  .nav.nav-dunkel .nav-links { background: #121212; }
  .nav.nav-dunkel .nav-links.open { box-shadow: -12px 0 40px rgba(0,0,0,0.5); }
  .nav.nav-dunkel .nav-mobile-close-row { color: #f5f5f3; border-bottom-color: rgba(255,255,255,0.08); }
  .nav.nav-dunkel .nav-links .nav-item { border-bottom-color: rgba(255,255,255,0.08); }
  .nav.nav-dunkel .nav-links .nav-item-link { color: rgba(245,245,243,0.75); }
  .nav.nav-dunkel .nav-links .nav-item-link:hover { background: rgba(255,255,255,0.04); color: #fff; }
  .nav.nav-dunkel .nav-dropdown, .nav.nav-dunkel .nav-dropdown.nav-dropdown-mega { background: rgba(255,255,255,0.04); }
  .nav.nav-dunkel .nav-dd-mega-grid .nav-dd-link { color: rgba(245,245,243,0.6); }
  .nav.nav-dunkel .nav-dd-col-head { color: rgba(245,245,243,0.85); }
}

/* Kontakt-Menü: Links mit Icon (Telefon, E-Mail, WhatsApp) — 02.09.2026 */
.nav-dd-link-icon { display: inline-flex; align-items: center; gap: 9px; }
.nav-dd-link-icon svg { flex: none; opacity: 0.75; }

/* Kontakt-Menü (02.09.2026): links Liste, Mitte Headline + Kontakt-Knöpfe, rechts Showroom groß */
.nav-dd-kontakt-mitte { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 8px; }
.nav-dd-kontakt-mitte .nav-dd-col-head { margin-bottom: 2px; }
.nav-dd-kontakt-text { font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.55; color: rgba(17,17,17,0.6); max-width: 34ch; }
.nav-dd-kontakt-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.nav-dropdown .nav-dd-mega-grid .nav-dd-pille, .nav-dropdown .nav-dd-mega-grid .nav-dd-pille:visited { color: #fff; }
.nav-dd-pille { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #0d0d0d; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.15s; }
.nav-dd-pille:hover { background: #2f6bff; color: #fff; }
.nav-dd-pille svg { flex: none; }
/* Text auf den schwarzen Pillen IMMER weiß — auf Julians iPhone (03.09.2026) stand
   er dunkel auf dunkel (Staging). Chrome zeigte es nie; die Regel ist absichtlich
   redundant zu .nav-dropdown .nav-dd-mega-grid .nav-dd-pille und deckt :link/
   :visited und -webkit-text-fill-color mit ab. */
.nav-dd-pille, .nav-dd-pille:link, .nav-dd-pille:visited, .nav-links .nav-dd-pille, .nav .nav-links a.nav-dd-pille { color: #fff !important; -webkit-text-fill-color: #fff; }
.nav-dd-pille svg { color: #fff; }
/* Standort-Badge auf dem Showroom-Bild im Kontakt-Menü (02.09.2026) */
.nav-dd-img-col--kontakt .nav-dd-img { position: relative; }
.nav-dd-img-badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 11px; border-radius: 10px; background: rgba(13,13,13,0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-family: 'DM Sans', sans-serif; text-align: left; white-space: nowrap; }
.nav-dd-img-badge svg { flex: none; }
.nav-dd-img-badge-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.nav-dd-img-badge-text strong { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.nav-dd-img-badge-text small { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.72); }
@media (min-width: 901px) {
  #nav-dropdown-kontakt .nav-dd-mega-grid { grid-template-columns: 190px 1fr 340px; }
  #nav-dropdown-kontakt .nav-dd-img-col { width: 340px; }
  .nav-dd-img-col--kontakt .nav-dd-img { height: 376px; margin-bottom: 0; }
}

/* Mobil-Nachlese 15.09.2026: das Logo in der Leiste maß 92×24 — als Link zur
   Startseite ein zu flaches Ziel. Nur die Trefferfläche wächst.

   28.09.2026: hier stand zusätzlich `position: relative`. Das überschrieb das
   `position: absolute` der Grundregel, das Logo fiel damit aus der Mitte zurück
   in den Flex-Fluss und lag auf jedem Touch-Gerät über der Icon-Reihe rechts
   (gemessen bei 390 px: Logo 243–335, Icons 259–374). Nötig war es nie — auch
   ein absolut gesetztes Element ist Bezug für sein ::after. */
@media (hover: none) and (pointer: coarse) {
  .nav-logo-center::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 100%; min-width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* ── Warenkorb-Fenster am Symbol (aus lab.css, seit 09.10.2026 für Website und CREATE) ── */
/* ── Das Warenkorb-Fenster am Symbol ────────────────────────────────────
   Julian, 29.09.2026: „der Warenkorb wandert dort raus, den haben wir nur noch
   als Popup über das Symbol in der Menüleiste." Es hängt am Knopf, nicht am
   Bildschirmrand: so zeigt es sichtbar, wo es herkommt. Rechtsbündig, damit es
   am rechten Rand nicht hinausragt. */
.lab-korb { position: relative; display: inline-flex; }
.lab-korb-fenster {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: min(340px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
    padding: 14px;
    z-index: 140;
}
.lab-korb-fenster[hidden] { display: none; }
.lab-korb-fenster { font-family: 'DM Sans', sans-serif; color: #0d0d0d; text-align: left; }
.lab-korb-titel { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.lab-korb-liste { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; }
.lab-korb-zeile { display: flex; align-items: center; gap: 10px; }
.lab-korb-bild {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 9px; background: #f5f5f3;
    object-fit: contain;
}
/* Platzhalter statt kaputtem Bildzeichen, wenn es keine Kachel gibt
   (01.10.2026). Er traegt die Produktfarbe, bleibt also informativ, und haelt
   die Zeilen in einer Flucht. */
.lab-korb-bild--leer { display: block; border: 1px solid rgba(0,0,0,.08); }
.lab-korb-text { min-width: 0; flex: 1; }
.lab-korb-name { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-korb-meta { display: block; font-size: 12px; color: rgba(13, 13, 13, .55); }
.lab-korb-leer { margin: 0; font-size: 13px; color: rgba(13, 13, 13, .55); }
.lab-korb-weiter { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; padding: 11px 20px; border-radius: 999px; background: #0d0d0d; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; }
.lab-korb-weiter:hover { background: #262626; color: #fff; }
/* Leerer Korb: kein toter Knopf, nur der Satz. lab.js setzt beides. */
.lab-korb-fenster[data-leer="1"] .lab-korb-weiter { display: none; }
.lab-korb-fenster:not([data-leer="1"]) .lab-korb-leer { display: none; }

/* Kurzer Hinweis, wenn Merken auf der Website nicht durchgeht (Review 09.10.2026) —
   dieselbe Form wie in CREATE; lab.css setzt dort die Position unter dem Kopfband. */
.lab-toast { position: fixed; top: calc(var(--nav-h, 64px) + 12px); left: 50%; transform: translateX(-50%); z-index: 1200; max-width: min(560px, calc(100vw - 32px)); background: #0d0d0d; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.45; padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); animation: lab-toast-weg .4s ease 6s forwards; }
@keyframes lab-toast-weg { to { opacity: 0; visibility: hidden; } }

/* Konto-Menü am Kreis (Abnahme 09.10.2026) — dieselbe Form wie die Vorschauen */
.kopf-konto-fenster { width: min(260px, calc(100vw - 24px)); }
.kopf-konto-name { margin: 0; font-size: 14px; font-weight: 700; }
.kopf-konto-mail { margin: 2px 0 10px; font-size: 12.5px; color: rgba(13, 13, 13, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-konto-form { margin: 0; }
.kopf-konto-fenster .lab-korb-weiter { margin-top: 8px; border: none; cursor: pointer; }
.kopf-konto-fenster .lab-korb-weiter:first-child { margin-top: 0; }
.lab-korb-weiter.kopf-knopf-leise { background: #f0efec; color: #0d0d0d; }
.lab-korb-weiter.kopf-knopf-leise:hover { background: #e6e5e1; color: #0d0d0d; }

/* Knöpfe = Pille (09.10.2026): Pfeil an Knöpfen, die irgendwohin führen */
a.lab-korb-weiter:not(.kopf-knopf-leise):not(.kopf-ohne-pfeil)::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; flex: none; vertical-align: -2px;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Kein Doppeltipp-Zoom auf Bedienelementen (Julian, 16.10.2026: „bei der
   Stückzahl Plus und Minus … schnell tippt, zoomt er dann so rein"). Safari
   wertete zwei schnelle Tipps auf + oder − als Zoom-Geste. manipulation lässt
   Tippen und Pinch-Zoom zu und nimmt nur den Doppeltipp-Zoom (und die 300-ms-
   Wartezeit) weg. Steht in jedem Haupt-Stylesheet, weil nicht jede Seite alle lädt.
   :where() hält die Spezifität bei 0 — sonst schlug [role="button"] eigene
   touch-action: none wie den Griff der Kontextleiste (Review 16.10.2026). */
:where(a, button, input, select, textarea, label, summary, [role="button"], [role="switch"], [onclick]) { touch-action: manipulation; }

/* Absatz vor einem eigenen Punkt im Mega-Menü (Produkte → Artist Merch, 16.10.2026) */
.nav-dd-link.nav-dd-link--abstand { margin-top: 14px; }