/* pz: Header-Bereich — Topbar, Kopfzeile (Wortmarke mittig, Icon-Gruppe
   rechts inkl. Suche), zentrierte Hauptnavigation darunter.
   SOLL: mockup-*.html (.topbar/.hdr/.hdr-top/.mark/.nav/.icons) — mit EINER
   dokumentierten Abweichung: das permanente Suchfeld links oben ist am
   20.08. auf Bens Ansage hin einem Lupen-Icon mit Panel in der rechten
   Icon-Reihe gewichen (Fehlerregister 6: Abweichung wird benannt, nicht
   stillschweigend gebaut).
   Version: --pz-css-header (muss mit layout/header.tpl uebereinstimmen) */

:root { --pz-css-header: "20260921-36"; }

/* ============ Topbar (Servicezeile, desktop-only wie NOVA) ============ */

#header-top-bar {
  background: var(--pz-ink);
  color: #c9beb2;
  font-size: 11.5px;
  letter-spacing: .05em;
}
/* pz: SPALTENFLUCHT (Review R3). Gemessen 20.08. (1440): die Inhaltsspalte
   der Seite laeuft 120…1320 (.pz-wrap), die Topbar aber 16…1424 — NOVAs
   .container-fluid mit 16px Polster. Der Kopfstreifen stand damit als
   einziges Element der Seite auf einer anderen Flucht.
   Loesung: das Aussenpolster des NOVA-Containers auf 0 und der Topbar-Inhalt
   bekommt EXAKT die .pz-wrap-Geometrie — dieselbe Rechnung auf jeder Breite,
   nicht nur auf 1440. */
#header-top-bar > .container-fluid,
#header-top-bar > .container { padding-left: 0; padding-right: 0; }
.pz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  min-height: 44px;
}
.pz-topbar-usps {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pz-topbar-usps li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.pz-topbar svg {
  width: 13px;
  height: 13px;
  color: var(--pz-gold-lt);
  flex: none;
}
.pz-topbar-right {
  display: flex;
  gap: 28px;
  align-items: center;
}
/* pz: Reviewer M2 — mit ID-Spezifitaet, sonst gewinnt NOVAs Topbar-Regel
   und die rechte Gruppe faellt auf dunkle Textfarbe (Kontrast 1,56:1) */
#header-top-bar .pz-topbar-right a:not(.dropdown-item) {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e4dbcf;
  text-decoration: none;
}
#header-top-bar .pz-topbar-right a:not(.dropdown-item):hover { color: var(--pz-gold-lt); }
/* pz: Backend-Linkgruppe "Kopf" und topbarNote (Review F17) — dieselbe
   Skala wie die USP-Liste, nur dezenter; rendern nur, wenn gepflegt. */
.pz-topbar-cms {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0 0 0 34px;
  padding: 0;
}
#header-top-bar .pz-topbar-cms a:not(.dropdown-item) { color: #e4dbcf; text-decoration: none; }
#header-top-bar .pz-topbar-cms a:not(.dropdown-item):hover { color: var(--pz-gold-lt); }
.pz-topbar-note { color: #e4dbcf; }

/* ============ Kopfzeile ============ */

header#jtl-nav-wrapper {
  background: var(--pz-ivory);
  border-bottom: 1px solid var(--pz-line);
  box-shadow: none;
}

/* pz: Wortmarke (ersetzt das Logo-Bild, layout/header_logo.tpl).

   pz: WORTMARKE WIRKLICH MITTIG (20.08., beim Suche-Umbau gemessen).
   Der Kopf zentriert den LOGO-WRAPPER (justify-self:center) — gemessen
   1440: Wrapper 514,42…925,56 in Container 80…1360, Mitte 719,99, also
   exakt richtig. Die Marke DARIN stand aber bei 514,42…877,56, Mitte 696,0
   — 24px links daneben. Ursache waren zwei geerbte Randwerte, die der
   Wrapper mitzentriert, obwohl sie nichts anzeigen:
     Bootstrap `.navbar-brand { margin-right: 3rem }` = 48px  -> 24px Versatz
     NOVA     `.navbar-brand { padding-right: .4rem }` = 6,4px -> 3,2px
   Beide stammen aus einer Kopfzeile, in der rechts vom Logo noch etwas
   stand; hier ist die Marke das einzige Kind. Sie fallen deshalb auf 0.
   ⚠️ Die Regelquelle wurde per styleSheets-Iteration gesucht, NICHT geraten —
   und der erste Anlauf mit `.pz-mark` (0,1,0) blieb wirkungslos, weil beide
   Gegenspieler `header .navbar-brand` heissen (0,1,1) und der
   margin-Wert zusaetzlich in `@media(min-width:992px)` steckt. Genau
   Fehlerregister 16: erst die Spezifitaet zaehlen, dann setzen. Anker ist
   deshalb `header#jtl-nav-wrapper .navbar-brand.pz-mark` (1,2,0) — dasselbe
   Muster wie im Mobilblock weiter unten, kein !important noetig.
   Die Sperrung bleibt unangetastet und bleibt symmetrisch: `text-indent`
   schiebt vorn um .3em ein, `letter-spacing` haengt hinter dem letzten
   Buchstaben dieselben .3em an — das hebt sich auf.
   ⚠️ Der Versatz war NICHT die Folge des Suche-Umbaus (die Marke stand vor-
   her an derselben Stelle, Mitte 696 im Vorher-Screenshot nachgemessen) —
   er fiel nur auf, weil links jetzt keine Suche mehr steht, die das Auge
   ablenkt. */
/* pz: .pz-mark ist seit 21.08. nur noch der Layout-Anker des Logo-Links —
   das Bild kommt aus dem Backend ($ShopLogoURL), die Hoehe ab 992px aus der
   Template-Einstellung "Logohoehe" (NOVA: header .navbar-brand img). Darunter
   deckeln die Mobilbloecke unten per max-height. */
.pz-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}
header#jtl-nav-wrapper .navbar-brand.pz-mark {
  margin-right: 0;
  padding-right: 0;
}
/* Keine width/height-Regel: das {image}-Tag traegt 180x50 + NOVA object-fit:
   contain — so greift die Backend-Logohoehe, und ohne sie bleibt es bei 50px. */
.pz-mark img {
  display: block;
  max-width: 100%;
}

/* Desktop-Raster: Reihe 1 = Wortmarke (mittig) + Icon-Gruppe (rechts),
   Reihe 2 = Nav.
   NOVAs DOM bleibt unangetastet: navbar wird display:contents, dadurch
   werden #shop-nav und #mainNavigation direkte Grid-Kinder. Wortmarke und
   #shop-nav teilen sich Reihe 1 (Ueberlagerung: Icons rechts, Marke mittig
   — pointer-events regeln die Klickbarkeit).
   ⚠️ 20.08.: Seit die Suche ein Icon der rechten Gruppe ist, ist die linke
   Haelfte der Reihe leer. Das ist KEIN Loch, das gefuellt werden muss,
   sondern die Konsequenz des Mockup-Gefueges: die Marke ist ueber der
   VOLLEN Inhaltsspalte zentriert, nicht zwischen zwei Nachbarn — sie steht
   deshalb dort, wo sie vorher stand (Vorher-Screenshot nachgemessen).
   Der 24px-Versatz, der dabei auffiel, ist oben an `.pz-mark` behoben. */
@media (min-width: 992px) {
  header#jtl-nav-wrapper > .container-fluid {
    display: grid;
    grid-template-rows: 112px auto;
    align-items: center;
    /* pz: Spaltenflucht (Review R3) — Suchfeld und Icon-Gruppe standen auf
       16…1424 statt auf der Inhaltsspalte 120…1320. Dieselbe Geometrie wie
       .pz-wrap (max 1280 + 40px Polster), damit die Rechnung auf JEDER
       Breite stimmt und nicht nur auf 1440.
       ⚠️ Nur ab lg: unterhalb traegt derselbe Container Burger, Wortmarke
       und mobile Suche — 40px Polster waeren dort ein Rueckschritt
       (Fehlerregister 10). */
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
  }
  header#jtl-nav-wrapper .toggler-logo-wrapper {
    grid-area: 1 / 1;
    justify-self: center;
    align-self: center;
    /* pz: my-nova_crit.css gibt dem Burger-Wrapper padding-top (Lehre I.1) —
       auf Desktop ist er eh unsichtbar, das Grid zentriert nur die Marke */
    padding: 0;
  }
  header#jtl-nav-wrapper nav.navbar {
    display: contents;
  }
  #shop-nav {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    width: 100%;
    pointer-events: none; /* pz: nur die li selbst fangen Klicks, nicht die Leiste ueber der Marke */
  }
  #shop-nav > li { pointer-events: auto; }
  /* pz: Die Suche ist seit 20.08. das ERSTE Element der rechten Gruppe (vorher
     stand sie als Feld ganz links und schob den Rest per margin-right:auto
     nach rechts). Die freie Flaeche gehoert deshalb VOR die Suche.
     ⚠️ Nur EIN auto-Rand in der Reihe: zwei auto-Raender teilen den freien
     Platz und die Gruppe waere nicht mehr rechtsbuendig. */
  #shop-nav > li#search { margin-left: auto; }
  #mainNavigation {
    grid-area: 2 / 1;
    justify-content: center;
    padding-bottom: 28px;
    overflow: visible; /* pz: Lehre D.2 — overflow clippt sonst Dropdown-Panels */
    /* pz: 21.09.2026 — HOEHE FOLGT DEM INHALT (Teil des Umbruch-Fixes unten,
       cargo FEHLERMUSTER 10 / Kundenbefund Ralf 29.08.).
       Gemessen 21.09. vor dem Fix (1440, 6 Punkte): Rect 69px, das Kind
       .nav-mobile-body aber 56px und padding-bottom 28px — Inhalt + Polster
       sind 84px, die Zeile stand auf 69. Bricht die Liste jetzt auf eine
       zweite Zeile um, waere die zweite Zeile genau dort abgeschnitten.
       Die 54px des Mockups bleiben als Untergrenze, gewachsen wird nach
       Bedarf. */
    min-height: 54px;
    height: auto;
  }
  /* pz: Reviewer M4 — die UL traegt Bootstrap mr-auto und klebte links
     (572px tote Flaeche rechts); mittig wie im Mockup */
  #mainNavigation .navbar-nav {
    /* pz: die UL ist full-width - zentrieren muessen sich die ITEMS
       (margin:auto war wirkungslos; UL-Mitte zu messen war der Fehler) */
    justify-content: center;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* pz: 21.09.2026 — UMBRUCH STATT UEBERLAUF (cargo FEHLERMUSTER 10,
     Kundenbefund Ralf 29.08.2026 auf cargotrikenord.de; hier prophylaktisch
     vor der Uebergabe nachgezogen).
     Bootstraps .navbar-nav ist ab lg `flex-direction:row` + `flex-wrap:nowrap`;
     NOVA faengt zu viele Punkte per horizontalem Scroll ab (Scrollpfeile +
     overflow-x). Der overflow ist hier bewusst auf `visible` (Zeile weiter
     unten, LEHRE D.2 — sonst clippt er die Megamenue-Panels), damit gab es
     aber KEIN Auffangnetz mehr: gemessen 21.09. (1440, Belastungstest mit
     doppelter Punktzahl = 12) lief der letzte Punkt auf x=2017 bei 1440px
     Viewport, vier Punkte ganz ausserhalb, Dokumentbreite 2033px.
     `flex-wrap: wrap` laesst die Liste auf eine zweite Zeile umbrechen — die
     Nav waechst damit mit der Kategoriestruktur des Kunden mit, statt Punkte
     unerreichbar zu machen. */
  #mainNavigation .nav-scrollbar-inner { flex-wrap: wrap; }
  /* pz: 21.09.2026 — DIE SCROLLPFEILE GEHOEREN ZUR ERSETZTEN MECHANIK.
     Sie sind NOVAs Bedienelement fuer den horizontalen Nav-Scroll. Der ist
     hier seit jeher tot (`overflow: visible`, Lehre D.2) und mit dem Umbruch
     oben endgueltig gegenstandslos. Gemessen 21.09. bei 992px: der rechte
     Pfeil stand sichtbar am Rand (48x26, opacity 1), ein echter Klick darauf
     aenderte `scrollLeft` nicht (0 -> 0, scrollWidth == clientWidth) — ein
     Bedienelement ohne Wirkung (Fehlerregister 8; unser eigenes Muster 8:
     wer ein NOVA-Bauteil ersetzt, raeumt dessen Reste mit weg).
     Gleiche Loesung wie im Schwesterprojekt cargotrike (`ct-header.css`). */
  #mainNavigation .nav-scrollbar-arrow { display: none; }
}

/* ============================================================================
   pz: `#search` AUS DER ZWEITEN, UNSICHTBAREN REGELQUELLE BEFREIEN
   (NOVA-LIVE-LEHREN I.1: `my-nova_crit.css` wird inline in <style
   id="criticalCSS"> ausgegeben und ist auch eine LAYOUT-Quelle, nicht nur
   eine Farbquelle — im DevTools-Sheet taucht sie als "inline" auf).
   Gemessen 20.08. per styleSheets-Iteration (Lehre H, statt am Wert zu raten):
     #search{margin-right:1rem;display:none}
     @media(min-width:992px){#search{display:block}}
   Zwei Treffer, beide toedlich fuer die neue Icon-Suche:
   (1) `display:none` unter 992px — der Listenpunkt trug bisher das
       Desktop-Suchfeld, das mobil durch NOVAs eigene Suchleiste ersetzt
       wurde. Seit dem Umbau haengt der EINZIGE Suchzugang daran; ohne diese
       Zeile waere die Lupe auf Telefon und Tablet schlicht unsichtbar
       (Fehlerregister 13 in seiner haerteren Form: die Instanz fehlt ganz).
   (2) `margin-right:1rem` — Abstand des alten Feldes zum Rest. In der
       Icon-Reihe erzeugte er 16px Loch zwischen Lupe und Konto, waehrend
       Konto/Wunschzettel/Warenkorb bei 0 stehen: ein gewuerfelter Wert
       mitten in einer Gruppe (Fehlerregister 3). Der Abstand der Icons
       kommt aus EINER Quelle — dem 13px-Polster der .nav-link.
   Spezifitaet: `#shop-nav > li#search` (2,0,1) schlaegt `#search` (1,0,0)
   auf beiden Ebenen — kein !important noetig (Fehlerregister 16: erst die
   IDs zaehlen, dann nachdruecken). */
#shop-nav > li#search {
  display: block;
  margin-right: 0;
}

/* Icons rechts (Suche/Konto/Merkzettel/Warenkorb): ruhig, duenn, ink-Ton */
#shop-nav > li > .nav-link {
  color: #3a352e;
  font-size: 20px;
  padding-left: 13px;
  padding-right: 13px;
}
#shop-nav > li > .nav-link:hover { color: var(--pz-gold); }

/* Warenkorb-Badge im Gold der CI */
#shop-nav .badge,
#shop-nav .badge-pill {
  background: var(--pz-gold);
  color: #14110c;
  font-weight: 600;
}
/* pz: 21.08. (impeccable-Audit) — DIE ZIFFER IM WARENKORB-ZAEHLER.
   Die Kugel ist `.fa-sup`, NICHT `.badge` (gemessen 21.08.: className
   ist genau "fa-sup") — die Regel darueber hat sie deshalb nie
   getroffen. Ihre Goldflaeche kommt aus NOVAs $primary (Template-
   Einstellung), die Ziffer erbte dagegen NOVAs Body-Grau rgb(82,82,82):
   2,60:1 auf dem Gold — die Zahl, die dem Kunden sagt, wie viel im
   Korb liegt, war der kontrastschwaechste Text des Kopfes.
   Mit --pz-ink sind es 6,32:1 (im Browser gerechnet).
   Kein !important noetig: die Ziffer hatte gar keine eigene Regel,
   sie erbte nur (Fehlerregister 16 — erst die Konkurrenz suchen,
   dann Nachdruck; hier gibt es keine). */
#shop-nav .fa-sup { color: var(--pz-ink); }

/* ============ Hauptnavigation (Reihe 2, zentriert) ============ */

#mainNavigation .nav-scrollbar-inner { overflow: visible; } /* pz: Lehre D.2 */

#mainNavigation .nav-item > .nav-link {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #3a352e;
  padding: 6px 17px;
  border-bottom: 1px solid transparent;
}
/* Hover: Gold-Unterstrich statt NOVA-Gelb (den ::before killt pz-base.css) */
#mainNavigation .nav-item > .nav-link:hover {
  color: var(--pz-ink) !important;
  border-bottom-color: var(--pz-gold);
  background: transparent;
}
/* Aktiv: Gold-Unterstrich (verifizieren auf einer Kategorieseite, Lehre D.3) */
#mainNavigation .nav-item.active > .nav-link {
  color: var(--pz-ink);
  border-bottom-color: var(--pz-gold);
}

/* ============================================================================
   pz: MOBILE KOPFZEILE — KOLLISION WORTMARKE / BENUTZER-ICON (Ben 20.08., A7).
   Gemessen 20.08. (390, mobile-Emulation) VORHER:
     .toggler-logo-wrapper  x16-294   position: ABSOLUTE (NOVA)
     .navbar-brand.pz-mark  x76-278   h44
     #shop-nav (3 Icons)    x236-374  h49
   -> 42px Ueberlappung ab x236, die Unterzeile der Marke lag unter dem
   Konto-Icon; zusaetzlich zwei Zeilenhoehen (44 vs 49) in einer Reihe
   (Fehlerregister 11).

   Zwei Ursachen, zwei Korrekturen:
   (1) NOVA nimmt den Logo-Block per `position:absolute` aus dem Fluss — er
       kann deshalb gar nicht ausweichen. Unterhalb lg wird er wieder ein
       normales Flex-Kind, dann teilen sich Burger, Marke und Icons die Reihe
       rechnerisch statt uebereinander zu liegen.
       ⚠️ NUR unterhalb lg: auf Desktop traegt genau dieses absolute Element
       die Grid-Zentrierung der Wortmarke (Fehlerregister 10).
   (2) Der Restplatz muss reichen: die Icon-Polster gehen auf 9px zurueck und
       die Marke auf eine Stufe, die auch bei 360px Breite noch passt.
   Registerhaltigkeit: Marke und Icons bekommen dieselbe Zeilenhoehe (48px)
   und werden zentriert — eine Kante, nicht zwei. */
@media (max-width: 991.98px) {
  /* ============================================================================
     pz: DER KOPF MUSS SEINEN EIGENEN FLOAT EINSCHLIESSEN (20.08., beim
     Suche-Umbau aufgedeckt — A/B gegen HEAD gemessen, nicht vermutet).
     BEFUND bei 390: die komplette Startseiten-Buehne `.pz-hero` stand nur
     156,6px breit am rechten Rand (left 233,4) statt ueber die vollen 390.
     URSACHE, Kette:
       1. NOVA gibt `.toggler-logo-wrapper` unterhalb lg ein `float: left`;
          der Kopf selbst raeumt den Float NIE auf.
       2. Solange NOVAs mobile Suchleiste im Kopf stand, war der Kopf
          107,8px hoch und damit HOEHER als der Float (44,2) — der Ueberstand
          fiel nicht auf.
       3. Mit dem Umbau auf Icon+Panel faellt die Leiste weg, der Kopf
          schrumpft auf 45,8px — der 48px hohe Float ragt jetzt 2,2px in
          `#main-wrapper` hinein.
       4. `.pz-hero` hat `overflow: hidden`, ist also ein eigener
          Formatierungskontext. So ein Kasten weicht einem Float nicht mit
          seinen Textzeilen aus, sondern wird KOMPLETT daneben geschoben —
          aus 390px Breite wurden 156,6.
     Gemessen A/B (Fehlerregister 12: erst reproduzieren, dann erklaeren):
       HEAD-Stand (mit Suchleiste):  headerBottom 107,8 | float 44,2 | hero 0…390
       Neu ohne Fix:                 headerBottom  45,8 | float 48,0 | hero 233,4…390
     LOESUNG: der Kopfcontainer schliesst den Float ein. `display: flow-root`
     und nicht `overflow: hidden` — letzteres wuerde das Such-Panel und die
     Konto-/Warenkorb-Dropdowns am Kopfrand abschneiden (Lehre D.2: overflow
     ist hier immer der Feind). Der Kopf ist danach 48px hoch, der Float endet
     buendig damit, und `#main-wrapper` beginnt wieder bei 0.
     ⚠️ Der Float betrifft JEDE Seite unter 992px, nicht nur die Startseite —
     die Regel haengt deshalb am Kopfcontainer und nicht an `.pz-hero`
     (Fehlerregister 17: der Wert ist nicht HIER falsch, sondern ueberall). */
  header#jtl-nav-wrapper > .container-fluid,
  header#jtl-nav-wrapper > .container { display: flow-root; }
  header#jtl-nav-wrapper .toggler-logo-wrapper {
    position: static;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
  }
  header#jtl-nav-wrapper .logo-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  header#jtl-nav-wrapper > .container-fluid > nav.navbar { align-items: center; }
  header#jtl-nav-wrapper #shop-nav { flex: 0 0 auto; }
  /* EINE Zeilenhoehe fuer beide Teile der Reihe */
  header#jtl-nav-wrapper .navbar-brand.pz-mark,
  header#jtl-nav-wrapper #shop-nav > li > .nav-link {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
  }
  header#jtl-nav-wrapper #shop-nav > li > .nav-link {
    flex-direction: row;
    align-items: center;
    padding-left: 9px;
    padding-right: 9px;
  }
  /* pz: Logo-Bild statt Wortmarke (21.08.) — 40px in der 48px-Zeile */
  .pz-mark img { max-height: 40px; }
}
/* ============================================================================
   pz: KOLLISIONSZONE MARKE <-> ICONS, NEU VERMESSEN (Ben 20.08., A7 — der
   Befund von damals darf durch den Suche-Umbau nicht zurueckkommen).
   Die Icon-Reihe hat mit der Lupe ein VIERTES Element bekommen. Gemessen
   direkt danach bei 390 (Desktop-UA = schlimmster Fall, siehe unten):
     Wortmarke  76…233,4   Lupe ab 233,4  ->  0,0px Luft
   Null Abstand ist genau der Zustand, den A7 beseitigt hat — die Marke
   stiess wieder an das erste Icon.
   Zwei Stellschrauben, beide aus der vorhandenen Skala statt frei gegriffen:
   (1) Der Abstand zwischen Marke und Gruppe ist EIN benannter Skalenwert,
       --pz-nav-halb (16px, die kleinste Stufe der Projektskala) — kein
       eigener Pixelwert fuer diese eine Stelle (Fehlerregister 3).
   (2) Das Icon-Polster geht unter 576px von 9 auf 6px. Das ist kein
       Schrumpfen der Trefferflaeche: die Zeilenhoehe von 48px bleibt, und
       die Icons behalten mit 6px Polster je Seite rund 32px Breite bei
       48px Hoehe.
   ⚠️ WARUM DESKTOP-UA BEI 390 DER SCHLIMMSTE FALL IST: NOVA rendert
   Wunschzettel und Vergleichsliste nur `{if !$isMobile}` — auf einem echten
   Telefon stehen dort also nur DREI Icons (Suche, Konto, Warenkorb), im
   Browser-Fenster bei 390px dagegen VIER. Gemessen wird deshalb bewusst der
   Vier-Icon-Fall; passt der, passt der Telefon-Fall erst recht. */
@media (max-width: 991.98px) {
  /* pz: Die Icon-Gruppe gehoert an den RECHTEN Rand — auch unterhalb lg.
     Gemessen 20.08. bei 768 VORHER: Marke 76…256, Icons 268…479, danach
     289px Leere bis zum Rand (Fehlerregister 3b, tote Flaeche): der Kopf
     sah aus, als sei rechts ein Element vergessen worden. Grund ist NOVAs
     Mobilaufbau — `.toggler-logo-wrapper` ist ein `float: left`, und
     `#shop-nav` schliesst als `flex: 0 0 auto` direkt daran an, statt sich
     am Rand auszurichten.
     `margin-left: auto` ist dieselbe Loesung wie auf dem Desktop weiter
     oben — EINE Mechanik fuer beide Breiten statt zweier verschiedener.
     Das `padding-left` sichert den Mindestabstand zur Wortmarke fuer den
     Fall, dass der auto-Rand auf 0 zusammenfaellt (schmale Geraete); der
     Wert ist die kleinste benannte Stufe der Projektskala, kein
     Einzelwert (Fehlerregister 3). */
  header#jtl-nav-wrapper #shop-nav {
    margin-left: auto;
    padding-left: var(--pz-nav-halb);
  }

  /* pz: ZAEHLER-BADGE KLEBTE AN DER VIEWPORT-OBERKANTE (Gate-Befund 20.08.).
     Gemessen bei 390 mit gefuelltem Warenkorb: `.fa-sup` (die Kugel mit der
     Artikelzahl) y=0,0…25,2 — ihre Oberkante lag auf Pixel 0 des Fensters.
     Ursache ist NOVAs eigener Wert in my-nova.css: `.fa-sup { position:
     absolute; top:0; margin-top:-1em }`. Auf dem Desktop faengt die Topbar
     das ab, unterhalb 992px ist die Icon-Reihe das erste Element der Seite —
     dort landet die Kugel exakt auf der Kante.
     `calc(-1em + 4px)` statt eines neuen em-Werts: der Bezug bleibt sichtbar
     NOVAs Offset, dazu 4px Luft (Fehlerregister 3 — kein frei gegriffener
     Ersatzwert). Die Kugel ist absolut positioniert, aendert die
     Registerhoehe der 48px-Reihe also nicht; nachgemessen. */
  /* pz: ZAEHLER-KUGEL LAG AUF ZWEI VIEWPORT-KANTEN (Gate-Befund 20.08.,
     beide mit gefuelltem Warenkorb gemessen).
       OBEN  bei 390: `.fa-sup` y=0,0…25,2 — Oberkante auf Pixel 0.
       RECHTS bei 360: `.fa-sup` x=349,6…374,4 bei clientWidth 360, also
             14,4px Ueberlauf und scrollWidth 374.
     Beides hat dieselbe Wurzel: NOVAs `.fa-sup { position:absolute; top:0;
     left:100%; margin-left:-.3em; margin-top:-1em; font-size:14px }` haengt
     die Kugel NEBEN den Icon-Glyphen und um eine volle Zeilenhoehe nach
     oben. Auf dem Desktop faengt die Topbar das oben ab und rechts steht
     hinter dem Warenkorb noch der Preis; unterhalb 992px ist die Icon-Reihe
     das erste Element der Seite UND das Warenkorb-Icon ihr letztes — dort
     schlaegt beides durch.
     Die Kugel wird deshalb unterhalb lg zu einem echten Eck-Badge: an der
     rechten oberen Icon-Ecke verankert (`right`/`top` statt `left`/margin),
     etwas kleiner (11,5px ist die kleine Schriftstufe des Projekts, nicht
     ein eigener Wert) und mit den Ueberstaenden als Bruchteile ihrer
     eigenen Groesse. Sie ueberlappt das Icon damit zur Haelfte, statt es zu
     verdecken (mit `right:-.3em` bei voller Groesse tat sie genau das —
     im Screenshot gesehen und verworfen).
     Auf Desktop bleibt NOVAs Sitz unveraendert. Die Kugel ist absolut
     positioniert und aendert die Registerhoehe der 48px-Reihe nicht;
     nachgemessen. */
  header#jtl-nav-wrapper #shop-nav .fa-sup {
    font-size: 11.5px;
    padding: .3em .5em;
    top: -.25em;
    right: -.4em;
    left: auto;
    margin-top: 0;
    margin-left: 0;
  }
}
@media (max-width: 575.98px) {
  /* pz: FLIESSENDE WORTMARKE STATT EINER TREPPE AUS EINZELWERTEN.
     Gemessen 20.08. bei 360px (Desktop-UA, also der Vier-Icon-Fall):
       mit Lupe + 16px Abstand   #shop-nav 243…371  -> 11px ueber den Rand
       ohne Lupe                 #shop-nav 243…339  ->  0px  (Ursache belegt)
       mit Lupe, ohne Abstand    #shop-nav 233…361  ->  1px  (auch dann zu eng)
     Die Zeile ist bei vier Icons unterhalb ~376px schlicht zu schmal — die
     Wortmarke muss mitgeben, und zwar STETIG. Eine weitere feste Stufe
     (@media 389.98px o. ae.) waere genau der gewuerfelte Einzelwert, den
     Ben mehrfach beanstandet hat (Fehlerregister 3): sie loest 360 und
     laesst 340 wieder auflaufen.
     Die clamp-Rechnung ist an den bestehenden Wert GEANKERT, nicht geraten:
       3.72vw ergibt bei 390px exakt die 14,5px, die hier vorher standen —
       die abgenommene 390er-Ansicht aendert sich also um 0.
       Darunter skaliert sie linear mit, bei 320px greift die Untergrenze.
     Sperrung und Einzug sind em-basiert und skalieren deshalb mit; die
     Mindestbreite der Marke faellt linear und die Reihe passt wieder.
     ⚠️ Auf einem echten Telefon ist der Fall entspannter: NOVA rendert
     Wunschzettel/Vergleich nur `{if !$isMobile}`, dort stehen also nur drei
     Icons. Gemessen wird trotzdem der Vier-Icon-Fall (siehe Kommentar oben). */
  /* pz: Logo-Bild statt Wortmarke (21.08.) — das Bild skaliert ueber die
     Hoehe, NOVA deckelt die Breite zusaetzlich auf 30vw (_header.scss). */
  .pz-mark img { max-height: 34px; }
  header#jtl-nav-wrapper #shop-nav > li > .nav-link {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* ============================================================================
   pz: ULTRA-SCHMAL (<= 359px) — KOPF LIEF UM 25px UEBER (21.08.,
   impeccable-Audit; Fehlerregister 15/10).
   Gemessen VORHER bei 320 (Desktop-UA = Vier-Icon-Fall):
     scrollWidth 345 / clientWidth 320  ->  25px Ueberlauf
     Marke 76…207 (131) | Icons 217…345 (128) | rechter Rand ab 320
   Die Rechnung fuer die Zeile bei 320 (alles gemessen, nichts geschaetzt):
     320 - 2x16 Container-Polster           = 288 nutzbar
     - 44 Burger - 16 Burger-Aussenabstand
     - 10 Innenabstand der Icon-Gruppe - 128 Icons
     -----------------------------------------------------------------
     = 90px fuer die Wortmarke. Sie brauchte 131.
   ⛔ NICHT ueber die Icons geloest: deren Trefferflaeche ist mit 32x48px
      ohnehin schon unter den 40px, die Ben als Untergrenze gesetzt hat —
      weiteres Polster wegzunehmen macht den echten Fehler groesser, um
      einen Messwert zu retten. Die Icons bleiben deshalb unangetastet.
   Zwei Stellschrauben, beide auf der Marken-Seite:
   (1) Der Burger-Aussenabstand geht von NOVAs 16px auf --pz-nav-halb —
       denselben Skalenwert, den die Icon-Gruppe auf dieser Stufe schon
       traegt (10px). Kein neuer Pixelwert, und die Zeile wird symmetrisch.
   (2) Die Unterzeile entfaellt. Ihr Text misst selbst bei 6px noch 123px
       und passt in die 96px dieser Stufe unter KEINEN Umstaenden — sie
       stand hier also entweder ueber den Icons oder in einer Groesse,
       die niemand lesen kann. Unter 360px traegt die Marke nur noch
       ihren Namen; das ist eine Entscheidung, kein Framework-Rest
       (Fehlerregister 9).
   Zeile 1 folgt mit 10px/.04em. Nachgemessen 21.08. bei 320: Marke
   70…166 (96px), Icons 178…304, rechter Rand 16px — also dasselbe Mass
   wie links am Burger, die Zeile steht symmetrisch.
   (Zwischenstand 10,5px/.06em ergab 103px und liess die Icon-Gruppe 7px
   ueber die Inhaltsspalte laufen — kein Scrollbalken, aber ein rechter
   Rand von 9 statt 16px. Deshalb die kleinere Stufe.) */
@media (max-width: 359.98px) {
  header#jtl-nav-wrapper .burger-menu-wrapper { margin-right: var(--pz-nav-halb); }
  /* pz: Logo-Bild statt Wortmarke (21.08.) — kleinste Stufe der Treppe */
  .pz-mark img { max-height: 28px; }
}

/* ============================================================================
   pz: SUCHE = LUPEN-ICON MIT PANEL (Ben 20.08.: "Suche im Megamenu - mach das
   als icon mit dropdown neben die anderen nav items rechts / anmelden usw").

   Markup: layout/header_nav_search.tpl. Der Umschalter ist strukturell
   dasselbe Element wie Konto/Wunschzettel/Warenkorb
   (li.nav-item.dropdown > a.nav-link) — er erbt deshalb die Regel
   `#shop-nav > li > .nav-link` weiter oben (20px, 13px Polster) und steht
   damit AUTOMATISCH auf demselben Register wie die uebrigen Icons
   (Fehlerregister 11: die Hoehe wird EINMAL festgelegt und referenziert,
   nicht je Icon neu erfunden). Gemessen 20.08. (1440): alle vier Icons
   y60-141, h81 — Ober- UND Unterkante identisch.

   Kein Layout-Shift beim Oeffnen: das Panel ist Bootstraps
   `position:absolute`-Dropdown, es nimmt keinen Platz im Fluss ein. */

.pz-search-toggle { cursor: pointer; }

/* Panel: Ivory-Flaeche, Kontur im Bedienelement-Ton (--pz-ctl-line, 3,48:1
   auf Ivory — WCAG 1.4.11 verlangt >=3:1 fuer die Kontur eines
   Bedienelements; --pz-line waere mit 1,88:1 zu leise fuer einen Kasten,
   der ueber dem Inhalt schwebt). Schrift Inter kommt aus pz-base; hier
   steht sie trotzdem, weil NOVAs Kompilat in .dropdown-menu eine eigene
   Familie setzt (dieselbe Falle wie bei den Megamenu-Links weiter unten). */
.pz-search-panel {
  padding: 18px;
  min-width: 360px;
  background: var(--pz-ivory);
  border: 1px solid var(--pz-ctl-line);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(18, 16, 13, .10);
  font-family: var(--pz-sans);
  /* pz: die Vorschlagsliste (typeahead .tt-menu) haengt IM Panel — sie darf
     nicht am Panelrand abgeschnitten werden. */
  overflow: visible;
}

/* ============================================================================
   pz: DAS FELD IM PANEL — EINE GRUPPE MIT EINER KANTE (Ben 20.08.: "Rand des
   Such-Icons nicht buendig mit dem Rand der Suche selbst",
   Fehlerregister 11 — zwei Hoehen/zwei Kanten in einer Element-Gruppe).
   Gemessen 20.08. (1440) VORHER, als die Suche noch links im Kopf stand:
     .input-group  x16-255  y77-123 (h46)
     input         x16-212  y77-123 (h46)   Unterstrich endet bei 212
     button        x211-255 y77-117 (h40)   Unterkante 6px HOEHER
   Zwei Fehler in einem: der Unterstrich (die sichtbare "Suche") hoerte vor
   dem Icon auf, und der Knopf war 6px kuerzer als das Feld — weil das Feld
   seine Hoehe aus pz-base (min-height:46) und der Knopf seine aus einer
   eigenen height:40 bezog.
   SOLL: die Hoehe wird EINMAL an der Gruppe festgelegt, die Linie liegt an
   der GRUPPE (laeuft also unter dem Icon durch), beide Teile referenzieren
   sie. Danach ist die Icon-Kante die Feldkante. Das gilt im Panel
   unveraendert weiter — der Umzug hat die Gruppe nicht aufgeloest.
   ⚠️ Die Linie liegt jetzt auf --pz-ctl-line statt --pz-line: sie ist die
   sichtbare Begrenzung eines EINGABEFELDS, also ein Bedienelement
   (WCAG 1.4.11). Im hellen Kopf war das frueher dieselbe Frage — der Wert
   war dort schon zu leise (Fehlerregister 17: der Wert ist nicht HIER
   falsch, er war es ueberall). */
#search .search-wrapper .input-group {
  height: 46px;
  border-bottom: 1px solid var(--pz-ctl-line);
}
#search .search-wrapper .input-group:focus-within { border-bottom-color: var(--pz-gold); }
#search .search-wrapper .form-control {
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--pz-text);
}
#search .search-wrapper .form-control:focus {
  box-shadow: none;
}
#search .search-wrapper .btn {
  background: transparent;
  border: 0;
  color: #3a352e;
  /* pz: Bootstraps $btn-box-shadow zeichnet einen KASTEN, den man erst im
     Screenshot sieht (20.08. am 390er-Panel entdeckt, danach gemessen):
     `rgba(255,255,255,.15) 0 1px 0 inset, rgba(0,0,0,.075) 0 1px 1px`.
     Hintergrund und Rahmen waren schon aus, der Schatten blieb — und
     malte um den flachen Lupenknopf eine zweite Kante in eine Gruppe, die
     genau EINE haben soll (Fehlerregister 11). */
  box-shadow: none;
}
#search .search-wrapper .btn:hover { color: var(--pz-gold); }
/* Beide Teile beziehen die Hoehe der Gruppe — kein eigener Wert mehr. */
#search .search-wrapper .form-control,
#search .search-wrapper .input-group-append,
#search .search-wrapper .btn {
  height: 100%;
  min-height: 0;
  max-height: none;
}
/* ============================================================================
   pz: NOVAs typeahead schiebt einen Wrapper zwischen Gruppe und Feld — und
   der Wrapper WAECHST NICHT MIT (gemessen 20.08. im geoeffneten Panel, 1440):
     .input-group          776,3…1098,3  (322 breit)
     .twitter-typeahead    776,3…  972,3 (196 — Rest des ALTEN Kopf-Feldes)
     Submit-Knopf          971,3…1015,3
   -> Der Unterstrich der Gruppe lief bis 1098, das Icon endete bei 1015:
   83px Linie hinter dem Knopf. Das ist exakt Bens Beanstandung vom 20.08.
   in neuem Gewand ("Rand des Such-Icons nicht buendig mit dem Rand der
   Suche selbst", Fehlerregister 11) — und ein Beleg dafuer, dass ein
   Baustein nach dem Umzug NEU gemessen werden muss, statt sich auf die
   alte Messung zu verlassen.
   Ursache: typeahead setzt den Wrapper inline auf `display:inline-block`
   (im Flex-Container zu `block` blockifiziert) — er ist damit ein
   Flex-Item mit `flex: 0 1 auto` und schrumpft auf die Inhaltsbreite des
   Feldes. KEINE Stylesheet-Regel setzt die 196px; sie sind die
   Shrink-to-fit-Breite (per styleSheets-Iteration belegt, Lehre H).
   `width: 1%` + `flex: 1 1 auto` ist Bootstraps eigenes Muster fuer
   `.form-control` in einer input-group; `min-width: 0` gehoert dazu, weil
   ein Flex-Item sonst nie unter sein laengstes Wort schrumpft
   (Fehlerregister 15). */
#search .search-wrapper .twitter-typeahead {
  height: 100%;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
#search .search-wrapper .twitter-typeahead .form-control { width: 100%; }

/* pz: Reviewer M12 — Megamenu-Eintraege in gesperrten Versalien, ohne
   Unterstreichung (NOVA-Default: Gross/Klein + underline) */
#mainNavigation .dropdown-menu a {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  text-decoration: none;
  color: #3a352e;
}

/* pz: Reviewer m9 — Burger-Menue-Titel wie alle Eintraege in Versalien */
#mainNavigation .mobile-menu-title,
#burger-menu + * .menu-title,
.offcanvas-title {
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 11.5px;
}

/* pz: Reviewer M9 — fixe Widgets ueberdeckten CTAs und Titel.
   Scroll-Top heisst .smoothscroll-top (gemessen; die erste Regel zielte auf
   Phantom-Klassen). Mobil ganz aus; Consent-Icon ueberall kleiner und
   halbtransparent, bis der Zeiger drauf ist. */
@media (max-width: 991.98px) {
  .smoothscroll-top { display: none !important; }
}
#consent-settings-btn {
  width: 32px !important;
  height: 32px !important;
  opacity: .55;
  transition: opacity .15s;
}
#consent-settings-btn:hover { opacity: 1; }
/* ============================================================================
   pz: CONSENT-WIDGET UND VOLLBREITE CTAs (Audit L6, Fehlerregister 7).
   Gemessen 20.08. (390): #consent-settings-btn ist fixed 32x32 bei
   left/bottom 16px (x16-48, y796-828, z-index 1050); der Warenkorb-Knopf der
   Listenzeile ist vollbreit x16-374 — beim Durchscrollen liegt das Widget
   also auf seinen linken 32px.
   ⚠️ EHRLICHER BEFUND, kein "gefixt": Ein viewport-fixes Eck-Widget kreuzt
   JEDEN vollbreiten CTA irgendwann — das laesst sich per CSS nur beseitigen,
   indem man entweder das Widget versteckt (rechtlich keine Option) oder alle
   CTAs schmaler macht (Design-Schaden). Bens Fall aus Fixrunde 4 war ein
   ANDERER: dort lag das Widget DAUERHAFT auf dem Widerrufs-Knopf im Fuss, weil
   der an einer festen Seitenposition steht — das ist behoben
   (--pz-consent-clear, pz-footer.css).
   Was hier bleibt, ist der transiente Fall. Das MASS dafuer ist nicht "wie
   viele Pixel liegen darunter", sondern: VERLIERT EIN BEDIENELEMENT SEINE
   MITTE? Genau das war links der Fall — und zwar erst seit Ben/P5 die
   Kaufzeile der Artikelseite auch mobil einreihig macht: der Minus-Knopf des
   Mengen-Steppers liegt dann bei x16-60, das Widget bei x16-48, und
   `elementFromPoint` auf die Knopfmitte lieferte #consent-settings-btn
   (gemessen 20.08. bei 390). Ein 44px-Tap-Ziel, dessen Mitte fremd belegt ist,
   ist nicht bedienbar.
   Loesung: unter 576px wird das Widget BUENDIG in die Ecke geparkt (0/0). Das
   ist kein gewuerfelter Pixelwert, sondern das Ende derselben Achse — und es
   ist die einzige Position, bei der der 32px-Kasten unter der Mitte des
   Minus-Knopfes hindurchgeht: der sitzt bei x17-61, Mitte x39, das Widget
   belegt dann x0-32 (gemessen, 7px Luft).
   ⚠️ NICHT in die rechte Ecke verlegt, obwohl dort mehr Platz waere: die
   Consent-Meldung des Shops nennt die Position im eigenen Text
   ("Sie koennen die Einstellung jederzeit aendern (Fingerabdruck-Icon LINKS
   UNTEN)" — im Banner-Screenshot gelesen). Ein Template, das das Icon nach
   rechts schiebt, macht einen rechtlich relevanten Hinweistext falsch, und
   zwar nur auf dem Telefon. Der Text gehoert dem Consent-Plugin, nicht uns.
   ⚠️ Vollstaendig verschwindet die Kreuzung nicht: ein viewport-fixes
   Eck-Widget beruehrt jeden vollbreiten CTA irgendwann. Was messbar gilt, ist
   die Aussage oben — kein Bedienelement verliert seine Mitte, betroffen sind
   nur die aeussersten ~16px vollbreiter Knoepfe. */
@media (max-width: 575.98px) {
  #consent-settings-btn {
    left: 0;
    bottom: 0;
  }
}

/* ============================================================================
   pz: BURGER-TREFFERFLAECHE (Reviewer F10, Fehlerregister/Tap-Ziel 44px).
   Gemessen 19.08. (390, iPhone-UA): `.burger-menu-wrapper.navbar-toggler`
   ist 20x25 px — deutlich unter dem sicheren Tap-Ziel. Die Flaeche gehoert
   an den BUTTON (er faengt den Klick), nicht an einen Wrapper darum. */
/* ⚠️ NUR unterhalb lg. Ein ungescoptes `display:inline-flex` mit
   ID-Spezifitaet schlaegt NOVAs `.navbar-expand-lg .navbar-toggler{display:none}`
   und liess den Burger auf 1440 mitten im Kopf stehen (beim ersten Versuch
   genau so passiert — Fehlerregister 10: dieselbe Mechanik verhaelt sich je
   Breakpoint anders). */
@media (max-width: 991.98px) {
  #jtl-nav-wrapper .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* ============================================================================
   pz: SUCHE — WARUM HIER JETZT NICHTS MEHR STEHT (Fehlerregister 13 und 17).
   Bis 20.08. standen hier Regeln fuer `.main-search` und
   `.search-form-wrapper-fixed`: NOVA rendert die Suche mehrfach, und die
   mobile Leiste war im Framework-Standard stehengeblieben (gemessen 19.08.
   bei 390: NOVAs kaltes #F5F7FA auf ink-Grund).
   Seit dem Umbau auf Icon+Panel gibt es diese zweite und dritte Instanz
   nicht mehr — `layout/header.tpl` leert `layout-header-search` und
   `layout-header-search-fixed`, `layout/header_nav_search.tpl` leert das
   mobile Lupen-Dropdown. Gemessen 20.08.:
   `document.querySelectorAll('.main-search, .search-form-wrapper-fixed,
   .fixed-search, .search-wrapper-dropdown').length === 0` auf allen drei
   Breiten (1440/768/390).
   Die Regeln sind deshalb ersatzlos entfallen statt "sicherheitshalber"
   stehenzubleiben: eine Regel, die eine Instanz beschreibt, die es nicht
   gibt, laesst die Stelle beim naechsten Lesen erklaert aussehen und man
   sucht nicht weiter (Fehlerregister 17, Schlussabsatz).
   Der einzige verbliebene Suchknopf ist der Submit im Panel — er wird oben
   von `#search .search-wrapper .btn` getragen. */

/* ============================================================================
   pz: MEGAMENU-PANEL AN DEN INHALT BINDEN (Reviewer F13).
   Gemessen 19.08. (1440): NOVAs `.dropdown-full` legt das Panel als
   1440x130-Vollbreite an — darin standen ZWEI Links ("Ohrstecker",
   "Ohrhaenger") und ~1200px Leere (Fehlerregister 3b).
   Der Umbau braucht beides: der Listenpunkt wird zum Bezugsrahmen
   (`position:relative`, vorher static -> das Panel bezog sich auf den
   Viewport), und das Panel bekommt Inhaltsbreite.
   ⚠️ Nur ab lg: unterhalb 992px ist dasselbe .dropdown-menu Teil des
   Off-Canvas-Menues und darf seine Breite NICHT verlieren
   (Fehlerregister 10: dieselbe Mechanik verhaelt sich je Breakpoint anders). */
@media (min-width: 992px) {
  #mainNavigation .nav-item.dropdown-full { position: relative; }
  #mainNavigation .nav-item.dropdown-full > .dropdown-menu {
    width: max-content;
    max-width: 460px;
    min-width: 220px;
    left: 0;
    right: auto;
    border: 1px solid var(--pz-line);
    border-radius: 0;
    box-shadow: 0 18px 40px rgba(18, 16, 13, .10);
  }
  #mainNavigation .dropdown-full .dropdown-body > .container {
    width: auto;
    max-width: none;
    padding: 8px 10px;
  }
  /* Zwei Unterpunkte in einem 4-Spalten-Bootstrap-Raster stapelten
     linksbuendig vor 50 % Leere — im schmalen Panel ist die Liste die
     richtige Form. */
  #mainNavigation .dropdown-full .dropdown-body .row.nav {
    display: block;
    margin: 0;
  }
  #mainNavigation .dropdown-full .dropdown-body .row.nav > .col {
    flex: none;
    max-width: none;
    padding: 0;
  }
  #mainNavigation .dropdown-full .categories-recursive-link {
    display: block;
    padding: 9px 14px;
    /* pz: Familie mitsetzen (Review R3, Klasse "Fremdschrift Montserrat") —
       Groesse und Sperrung standen hier schon, die Schrift kam weiter aus
       NOVAs Kompilat. */
    font-family: var(--pz-sans);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #3a352e;
    text-decoration: none;
    white-space: nowrap;
  }
  #mainNavigation .dropdown-full .categories-recursive-link:hover { color: var(--pz-gold); }
  /* NOVA gibt Spalte (24px) und Link (16px) je einen eigenen Fussabstand mit —
     im schmalen Panel wurden daraus 214px Hoehe fuer zwei 38px-Zeilen
     (Fehlerregister 3: zwei Abstandsebenen uebereinander). */
  #mainNavigation .dropdown-full .dropdown-body .row.nav > .col,
  #mainNavigation .dropdown-full .categories-recursive-link { margin: 0; }
  #mainNavigation .dropdown-full .dropdown-body { padding: 8px 0; }
}