/* ct-version: 20260830-34 */
/* ct: Header/Topbar/Nav nach Mockup (Carbon-Ink-Baender, Volt-Akzente, kantig).
   Anker bewusst an NOVAs IDs — NOVA setzt dort selbst per ID; gleiche
   Spezifitaet gewinnt per Ladereihenfolge OHNE !important.
   Aufbau: (1) Farben/Typo global fuer alle Breiten, (2) Desktop-Struktur
   NUR ab lg (Zweizeilen-Header), (3) Mobil-Anpassungen — Struktur-Regeln
   duerfen NIE ungescoped in NOVAs Mobil-Layout lecken (Fehlerregister 10). */
:root{--ct-css-header:'20260830-34'}

/* ============ (1) Farben & Typo — alle Breiten ============ */

/* Topbar */
#header-top-bar{
  background:var(--ct-ink);
  border-bottom:1px solid var(--ct-dline);
  min-height:40px;
  align-items:center;
}
#header-top-bar a,
#header-top-bar .nav-link{
  color:var(--ct-dmuted);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#header-top-bar a:hover,
#header-top-bar .nav-link:hover{color:var(--ct-volt)}
.ct-topbar-claim{
  margin-left:24px;
  align-self:center;
  color:var(--ct-dmuted);
  font-size:11px;
  letter-spacing:.06em;
}

/* ct: EINE Flucht — Topbar und Header-Band auf dieselbe Formel wie
   .ct-wrap/#content-wrapper (ct-base.css). NOVAs container-fluid-xl lief
   vorher 16..1424 (1440) bzw. 151..1769 (1920), waehrend der Content bei
   40..1400 bzw. 160..1760 stand — drei Fluchten auf einer Seite
   (Fehlerregister 17). Anker ist der gemeinsame Vorfahre je Band, damit
   die Regel BEIDE Instanzen desselben Bausteins trifft (Fehlerregister 13). */
#header-top-bar > .container-fluid,
#jtl-nav-wrapper > .container-fluid{
  max-width:calc(var(--ct-wrap-max) + 80px);
  margin-left:auto;margin-right:auto;
  padding-left:40px;padding-right:40px;
}
@media (max-width: 767.98px){
  #header-top-bar > .container-fluid,
  #jtl-nav-wrapper > .container-fluid{padding-left:20px;padding-right:20px}
}

/* Header-Band */
#jtl-nav-wrapper{
  background:var(--ct-ink);
  box-shadow:none;
  border-bottom:1px solid var(--ct-dline);
}
/* ct: 20260820-27 (Ben-Review, "Burger komplett unsichtbar") — invert(1)
   invertierte NICHTS: Bootstrap haengt sein Toggler-Icon an .navbar-light/
   .navbar-dark, unsere Navbar traegt keine der beiden Klassen, gemessen war
   background-image:none. Eigenes weisses Burger-SVG direkt am Icon. */
#jtl-nav-wrapper .burger-menu-wrapper .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M4 6h16M4 12h16M4 18h16'/></svg>");
}

/* ct: .ct-wordmark 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 per max-height. */
#jtl-nav-wrapper .ct-wordmark{display:flex;align-items:center}
/* keine width/height-Regel: {image} traegt 180x50 + NOVA object-fit:contain,
   so greift die Backend-Logohoehe, ohne sie bleibt es bei 50px */
#jtl-nav-wrapper .ct-wordmark img{display:block;max-width:100%}

/* Suche (alle Instanzen unterm gemeinsamen Anker; NOVA deckelt per
   max-height — mitsetzen, NOVA-LIVE-LEHREN I.6) */
/* ct: 20260820-22 — ⚠️ Feld und Suchknopf sind EINE Gruppe: gemessen stossen
   sie auf derselben Kante aneinander (Feld 397..972, Knopf 971..1086). Ein
   voller Radius an beiden Teilen haette an dieser Naht zwei gegenlaeufige
   Rundungen ergeben. Deshalb runden nur die AUSSENecken der Gruppe —
   dieselbe Regel wie beim PDP-Stepper und bei den Preisfeldern. */
#jtl-nav-wrapper .form-icon .form-control{
  background:var(--ct-ink-3);
  border:1px solid var(--ct-dline);
  border-radius:var(--ct-radius-sm) 0 0 var(--ct-radius-sm);
  color:#fff;
}
#jtl-nav-wrapper .form-icon .form-control::placeholder{color:var(--ct-dmuted)}
/* ct: 20260820-22 (Ben, 20.08.2026) — Suchknopf auf CI-Blau. Im v1-Mockup ist
   "SUCHEN" derselbe blaue Primaerknopf wie Hero-CTA und Warenkorb-CTA. */
#jtl-nav-wrapper .form-icon .btn{
  background:var(--ct-cta);
  border:1px solid var(--ct-cta);
  border-radius:0 var(--ct-radius-sm) var(--ct-radius-sm) 0;
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
#jtl-nav-wrapper .form-icon .btn:hover{background:var(--ct-cta-d);border-color:var(--ct-cta-d);color:#fff}
#jtl-nav-wrapper .form-icon .form-clear{color:var(--ct-dmuted)}

/* ct: ⚠️ DER Grund fuer das kurze Suchfeld (gemessen 19.08., 1440):
   Formular 560px, Feld aber nur 223px — rechts davon 512px Leere bis zu den
   Icons. Ursache ist NICHT die Kaskade, sondern Markup: typeahead.js haengt
   zur Laufzeit ein <div class="twitter-typeahead"> um das Feld. Damit ist
   das direkte Kind der .input-group nicht mehr .form-control, und Bootstraps
   `.input-group > .form-control{flex:1 1 auto}` greift ins Leere — der
   Wrapper faellt auf `flex:0 1 auto` mit der Default-Feldbreite zurueck.
   Fix: der WRAPPER bekommt das Flex-Verhalten, das Feld fuellt ihn.
   min-width:0 ist Pflicht, sonst schrumpft das Flex-Item nie unter seine
   Inhaltsbreite (Fehlerregister 15). Bewusst OHNE Breiten-Media-Query —
   die mobile Instanz (#search-header-mobile-top) traegt denselben Wrapper
   (Fehlerregister 13). */
#jtl-nav-wrapper .input-group > .twitter-typeahead,
.search-form-wrapper-fixed .input-group > .twitter-typeahead{
  flex:1 1 auto;
  min-width:0;
}
#jtl-nav-wrapper .twitter-typeahead .form-control,
.search-form-wrapper-fixed .twitter-typeahead .form-control{width:100%}
/* Der Vorschlags-Dropdown von typeahead haengt am Wrapper — mit auf Kante. */
/* ct: 20260820-22 — das Vorschlagspanel gehoert zum Suchfeld, also dasselbe Token. */
#jtl-nav-wrapper .twitter-typeahead .tt-menu{width:100%;border-radius:var(--ct-radius-sm)}

/* ct: Icon-Leiste nach Mockup — Icon + zweizeilige Beschriftung
   (Vergleich/Merkliste/Warenkorb). Das Label-Markup liefern die drei
   Child-Overrides layout/header_shop_nav_{compare,wish}.tpl und
   basket/cart_dropdown_label.tpl; hier nur die Optik. */
#shop-nav .ct-navlabel{
  display:none;
  line-height:1.25;
  text-align:left;
}
#shop-nav .ct-navlabel b{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#fff;
}
#shop-nav .ct-navlabel span{
  display:block;font-size:10.5px;letter-spacing:.04em;color:var(--ct-dmuted);
}
#shop-nav .nav-link:hover .ct-navlabel b{color:var(--ct-volt)}

/* Shop-Icons */
#shop-nav .nav-link,
#shop-nav .dropdown-toggle{color:#fff}
#shop-nav .nav-link:hover,
#shop-nav .dropdown-toggle:hover{color:var(--ct-volt)}
#shop-nav .badge{
  background:var(--ct-volt);
  color:var(--ct-ink);
  border-radius:var(--ct-radius-sm); /* ct: 20260820-22 — Rolle Badge */
  font-weight:700;
}
/* ct: 20260819-13 (Korrekturpaket 10) — ZAEHLER AN DAS ICON, nicht ueber das
   Wort. ⛔ Befund der Abnahme: NOVA setzt den Warenkorb-Zaehler als
   `span.fa-sup{position:absolute; top:0; left:100%}` INNERHALB des
   Icon-<i>. Bei icon-only (NOVA-Standard) passt das; unsere Icon-Leiste hat
   seit dem Redesign aber eine Beschriftung daneben (.ct-navlabel) — `left:100%`
   schiebt den Zaehler damit exakt auf den Wortanfang.
   Gemessen mit einem Artikel im Warenkorb:
   `document.elementFromPoint(1330, 85)` lieferte `SPAN.fa-sup` statt des
   Labels; im Screenshot verdeckte die gruene Scheibe das "W" von
   "Warenkorb" (Fehlerregister 7 — fixes/absolutes Element ueber einem
   Bedienelement, hier ueber dem Linktext selbst).
   Der Zaehler gehoert an die obere rechte Ecke des Icons: `left:auto` MUSS
   dabei stehen, sonst ruht die Regel auf der Ueberbestimmungs-Aufloesung des
   Browsers (dieselbe Falle wie bei `.form-clear`, NOVA-LIVE-LEHREN I.1).
   Form kantig statt Kreis wie alle Badges des Redesigns. */
#shop-nav .nav-link .fa-sup{
  left:auto;
  right:-6px;
  top:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:var(--ct-radius-sm); /* ct: 20260820-22 — Rolle Badge */
  background:var(--ct-volt);
  color:var(--ct-ink);
  font-size:10px;
  font-weight:800;
  line-height:18px;
  text-align:center;
}
/* ct: 20260820-27 (Ben-Review) — mobil ragte der Zaehler ueber die OBERE
   Bildschirmkante (Screenshot: gruene 1 angeschnitten): der kompakte
   Mobil-Header laesst dem Icon oben keine 6px Luft. Ohne Negativ-Offset
   bleibt der Zaehler sichtbar an der Icon-Ecke. */
@media (max-width: 767.98px){
  #shop-nav .nav-link .fa-sup{top:0;right:-4px}
}

/* ct: 20260820-27 (Ben-Review) — die Header-Dropdowns (Warenkorb leer UND
   befuellt) hatten KEINE sichtbare Abgrenzung zum dunklen Seitengrund.
   Panel bekommt Kante, Rundung und Wurf; die beiden Aktions-Buttons
   ("Zur Kasse" / "Zum Warenkorb") waren zwei Groessen und zwei Stile in
   einer Gruppe (Fehlerregister 11) — jetzt gestapelt, volle Breite, EINE
   Hoehe aus dem Bedienelement-Token.
   ⚠️ `.cart-dropdown-buttons` ist zugleich der phpQuery-Einhaengepunkt von
   PayPal-Express und AmazonPay (append) — die Klasse und ihre Kinderliste
   nicht umbauen; ein per Plugin ergaenzter Button erbt durch flex-column
   automatisch dieselbe volle Breite. */
#shop-nav .dropdown-menu{
  background:var(--ct-ink);
  border:1px solid var(--ct-dline);
  border-radius:var(--ct-radius);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
  padding:18px;
}
#shop-nav .dropdown-menu .cart-dropdown-buttons{
  display:flex;flex-direction:column;gap:10px;margin-top:14px;
  /* ct: 20260820-29 (Nachmessung Punkt 2) — Bootstraps Row-Negativmargin
     (-16) traf auf das 24px-Polster des NOVA-.dropdown-body und liess die
     Buttons 8px je Seite einruecken. Auf 0 genullt: die Buttons fuellen
     jetzt exakt die Polsterbreite des Panels. */
  margin-left:0;margin-right:0;
}
/* ct: 20260820-28 (Abnahme-Befund Punkt 9) — NOVA verpackt die beiden
   Buttons in `col col-lg-6`-Spalten: ab lg also HALBE Breite in einem
   350px-Panel — gemessen 116px-Knoepfe, einer zweizeilig (44 vs 56px,
   Register 11). Die Spalten werden im Dropdown auf volle Breite gezwungen;
   ein per Plugin ergaenzter Button (PayPal/Amazon haengen sich hier ein)
   erbt dieselbe Zeile. */
#shop-nav .dropdown-menu .cart-dropdown-buttons > [class*="col"]{
  flex:0 0 100%;max-width:100%;width:100%;
  padding:0;margin:0;
}
#shop-nav .dropdown-menu .cart-dropdown-buttons .btn{
  width:100%;min-height:var(--ct-control-h);
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;white-space:nowrap;
}

/* Hauptnavigation — Typo/Farbe */
#mainNavigation .nav-item > .nav-link{
  color:#fff;
  font-family:var(--ct-font-text);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
/* ct: NOVAs Gelb-Marker (::before) in JEDEM Zustand killen — nur
   :hover/.active blitzt beim Un-hovern gelb (NOVA-LIVE-LEHREN C.2). */
#mainNavigation .nav-item > .nav-link::before{border-bottom:0}
#mainNavigation .nav-item > .nav-link:hover{color:var(--ct-volt)}
#mainNavigation .nav-item.active > .nav-link{
  color:var(--ct-volt);
  box-shadow:inset 0 -2px 0 var(--ct-volt);
}
/* NOVAs globales a:hover-Gelb in Dropdown-/Megamenu-Ebene (C.5) */
#jtl-nav-wrapper .dropdown-menu a:hover{color:var(--ct-volt-d)}

/* ============ (2) Desktop-Struktur — NUR ab lg ============ */
/* ct: Zeile 1 Logo|Suche|Icons, Zeile 2 Nav volle Breite. NOVAs
   .toggler-logo-wrapper ist float:left und die navbar hoehengedeckelt
   (gemessen 19.08.) — Container wird selbst zum Flex-Wrapper, die navbar
   per display:contents zur Durchreiche. Unter lg bleibt NOVAs
   Burger/Collapse-Mechanik komplett unangetastet. */
@media (min-width: 992px){
  #jtl-nav-wrapper .container-fluid{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  #jtl-nav-wrapper .toggler-logo-wrapper{
    float:none;
    min-height:104px;
    display:flex;
    align-items:center;
  }
  #jtl-nav-wrapper .navbar{display:contents}
  #shop-nav{
    order:1;
    flex:1 1 auto;
    align-items:center;
    min-height:104px;
  }
  #shop-nav > #search{
    flex:1 1 auto;
    max-width:720px;
    margin-left:40px;
    margin-right:auto;
  }
  #search .search-wrapper,
  #search form,
  #search .form-icon{width:100%}
  #jtl-nav-wrapper .form-icon .form-control{height:54px;max-height:none}
  #jtl-nav-wrapper .form-icon .btn{height:54px;max-height:none;padding:0 26px}
  /* Mockup: Icon + Beschriftung nebeneinander, 26px Abstand zwischen den
     drei Eintraegen, 21px Icons. Unter lg bleibt NOVAs Icon-only-Leiste. */
  #shop-nav .ct-navlabel{display:block}
  #shop-nav > li.nav-item > .nav-link,
  #shop-nav > .nav-item > .nav-link{
    display:flex;align-items:center;gap:10px;
    padding-left:13px;padding-right:13px;
  }
  #shop-nav > .nav-item > .nav-link > .fas,
  #shop-nav > .nav-item > .nav-link > .fa{font-size:19px}
  #shop-nav .cart-icon-dropdown-price{display:none}
  #mainNavigation{
    order:10;
    flex-basis:100%;
    width:100%;
    border-top:1px solid var(--ct-dline);
    /* ct: Zeilenhoehe wie im Mockup (`nav.main a{height:54px}`) als
       Untergrenze. Gemessen lief die Zeile auf 69px: der Inhalt ist 50,75px
       hoch, den Rest verteilte der umbrechende Flex-Container als freie
       Zeilenhoehe (align-content) auf die zweite Zeile — den wahren Grund
       (NOVAs 24px Scrollleisten-Polster) loest die Regel an
       .nav-scrollbar-inner weiter unten.
       ct: 20260830-34 — `height:54px` war HART und ging vom kuratierten
       Datenstand 08/2026 aus. Kundenbefund cargotrikenord.de (Ralf, 29.08.):
       14 Hauptkategorien liefen rechts aus dem Viewport, ohne Scroll und ohne
       Umbruch — die letzten Punkte waren fuer Kunden unerreichbar. Die Nav
       darf jetzt umbrechen (siehe flex-wrap unten), also folgt die Hoehe dem
       Inhalt. */
    min-height:54px;
    height:auto;
  }
  /* ct: Mockup-Mass ist eine 54px hohe Navzeile (`nav.main a{height:54px}`);
     gemessen waren es 69px. Die 15px zaehlen doppelt — sie stehen direkt
     ueber dem Fold und schoben den Hero nach unten (FEHLERMUSTER 1). */
  #mainNavigation .nav-item > .nav-link{
    padding-top:16px;
    padding-bottom:16px;
  }
  /* Kuratierte Nav auf eigener Zeile: Scrollpfeile sind Deko und clippen
     Dropdowns (NOVA-LIVE-LEHREN D.2).
     ⚠️ `padding-bottom:24px` an .nav-scrollbar-inner ist NOVAs Platz fuer die
     horizontale Scrollleiste — ohne Scrollen ist es reine Totflaeche und war
     der wahre Grund fuer die 69px hohe Navzeile (Mockup: 54px). Gemessen:
     Link 50,8px + 24px Polster, geclippt auf 69. */
  #mainNavigation .nav-scrollbar-arrow{display:none}
  /* ct: 20260830-34 — UMBRUCH STATT UEBERLAUF. Bootstraps .navbar-nav ist ab
     lg `flex-direction:row` + `flex-wrap:nowrap`; NOVA faengt zu viele
     Punkte per horizontalem Scroll ab (overflow-x:auto + Pfeile). Beides ist
     hier bewusst abgeschaltet (Pfeile = Deko, overflow clippt Megamenue-Panels,
     LEHREN D.2) — damit gab es aber KEIN Auffangnetz mehr: bei 14 Kategorien
     (cargotrikenord.de) liefen die letzten Punkte unsichtbar rechts raus.
     `flex-wrap:wrap` laesst die Liste auf eine zweite Zeile umbrechen, waechst
     also mit der Kategoriestruktur des Kunden mit. `overflow:visible` bleibt
     — ZWINGEND wegen der Megamenue-Kopplung (Kommentar unten). */
  #mainNavigation .nav-scrollbar-inner{overflow:visible;padding-bottom:0;flex-wrap:wrap}
  /* ct: 20260819-13 (Korrekturpaket 12a) — MEGAMENU-PANEL AN DEN INHALT.
     ⛔ Befund: NOVAs Panel ist `left:0; right:0` und damit 1440px breit —
     gemessen fuer DREI Eintraege (davon einer `d-lg-none`), die als
     `col-xl-3` je 360px belegten. Sichtbar waren also 720px Inhalt in einem
     1440px-Panel: die Haelfte leere Flaeche (Fehlerregister 3b).
     Ein Megamenu-Panel ueber die ganze Breite ist die richtige Form fuer
     einen tiefen Kategoriebaum — dieser Shop hat pro Zweig zwei
     Unterkategorien. Die Breite folgt deshalb dem Inhalt.
     Drei Zutaten, alle noetig:
       1. Der `.nav-item` muss `position:relative` bekommen, sonst bezieht
          sich das absolute Panel auf den Header und `left:0` bleibt der
          Fensterrand.
       2. `right:auto` MUSS dabei stehen — mit gesetztem left UND right ist
          die Breite ueberbestimmt und der Browser gewinnt (dieselbe Falle wie
          bei `.form-clear`, NOVA-LIVE-LEHREN I.1).
       3. Die inneren Bootstrap-Spalten stapeln (`flex-basis:100%`), sonst
          steht die Zeile wieder im 4-Spalten-Raster und das Panel ist so
          breit wie vier Spalten.
     ⚠️ Streng auf `min-width:992px` gescopet: unter lg ist dasselbe
     `.dropdown-menu` Teil von NOVAs Burger-/Offcanvas-Mechanik, und dort
     waere ein absolut positioniertes, inhaltsbreites Panel ein schwebender
     Kasten ueber dem Inhalt (Fehlerregister 10 — genau dieser Fehler ist bei
     spanl schon einmal passiert). */
  /* ct: ⚠️ ZWINGEND zusammen mit dem `position:relative` darunter: solange
     der `.nav-item` STATISCH war, war der naechste positionierte Vorfahre
     `#jtl-nav-wrapper` — und ein absolut positioniertes Element wird von einem
     `overflow:hidden`-Vorfahren nur dann geclippt, wenn dieser in seiner
     Containing-Block-Kette liegt. Mit `position:relative` am nav-item rueckt
     `#mainNavigation` (gemessen `overflow:hidden`, 54px hoch) in genau diese
     Kette — das Panel verschwand daraufhin vollstaendig hinter dem Hero
     (gemessen `elementsFromPoint` im Panel: DIV.ct-kick, also der Hero).
     Der Wert stammt aus NOVAs horizontaler Nav-Scrollleiste; deren Pfeile sind
     hier ohnehin abgeschaltet (LEHREN D.2); passt die Navi nicht auf eine
     Zeile, bricht sie um (flex-wrap oben, 20260830-34). */
  #mainNavigation{overflow:visible}
  #mainNavigation .nav-item.dropdown{position:relative}
  #mainNavigation .nav-item.dropdown > .dropdown-menu{
    left:0;
    right:auto;
    width:auto;
    min-width:260px;
    max-width:min(420px, calc(100vw - 80px));
    background:var(--ct-ink);
    border:1px solid var(--ct-dline);
    /* ct: 20260820-22 — Panel am Bedienelement: dasselbe Token wie die Nav. */
    border-radius:var(--ct-radius-sm);
    padding:8px 0;
    box-shadow:0 24px 48px rgba(0,0,0,.45);
  }
  #mainNavigation .dropdown-menu .container.subcategory-wrapper{
    max-width:none;padding-left:0;padding-right:0;width:auto;
  }
  #mainNavigation .dropdown-menu .row{margin-left:0;margin-right:0;display:block}
  #mainNavigation .dropdown-menu .row > .col,
  #mainNavigation .dropdown-menu .row > [class*="col-"]{
    flex:0 0 100%;max-width:100%;padding-left:0;padding-right:0;
  }
  /* ct: NOVAs Megamenu-Abstaende sind fuer ein vollbreites Panel mit
     mehreren Spalten gerechnet — gemessen `.dropdown-body{padding:24px 0}`,
     `.col.nav-item-lg-m{margin:24px 0}` und am Link selbst
     `margin-bottom:16px` plus eine HELLE Trennlinie (rgb(235,235,235)), die
     auf Ink als weisser Strich quer durch das Panel lief. In einer kompakten
     Linkliste sind das 122px Luft und eine Fremdlinie fuer 74px Inhalt
     (FEHLERMUSTER 1: Vertikalwerte, die keine Regel von uns setzt). */
  #mainNavigation .dropdown-menu .dropdown-body{padding:0}
  #mainNavigation .dropdown-menu .row > .col,
  #mainNavigation .dropdown-menu .row > [class*="col-"]{margin-top:0;margin-bottom:0}
  #mainNavigation .dropdown-menu .categories-recursive-link{
    margin-bottom:0;
    border-bottom:0;
    padding:9px 20px;
    color:#fff;
    font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    text-decoration:none;
  }
  #mainNavigation .dropdown-menu .categories-recursive-link:hover{
    background:var(--ct-ink-2);color:var(--ct-volt);text-decoration:none;
  }
  #mainNavigation .dropdown-menu .text-truncate{overflow:visible;text-overflow:clip}
}

/* ============ (3) Mobil — bewusst gestaltet, kein Framework-Default ===== */
@media (max-width: 991.98px){
  #jtl-nav-wrapper .ct-wordmark img{max-height:40px}
  .search-form-wrapper-fixed{background:var(--ct-ink);padding-bottom:12px}
  .fixed-search .form-icon .form-control,
  .search-form-wrapper-fixed .form-control{
    background:var(--ct-ink-3);
    border:1px solid var(--ct-dline);
    /* ct: 20260820-22 — gleiche Gruppenlogik wie am Desktop (siehe oben). */
    border-radius:var(--ct-radius-sm) 0 0 var(--ct-radius-sm);
    color:#fff;
  }
  /* ct: 20260820-22 — die MOBILE Suchinstanz bekommt dieselbe Blau- und
     Radius-Fassung wie die Desktop-Instanz. NOVA rendert die Suche mehrfach
     (Fehlerregister 13); wer nur den Desktop-Anker umfaerbt, laesst hier den
     alten Zustand stehen. */
  .fixed-search .btn,
  .search-form-wrapper-fixed .btn{
    background:var(--ct-cta);
    border-color:var(--ct-cta);
    color:#fff;
  }
  /* ct: 20260820-25 — ⚠️ Der Radius braucht einen TIEFEREN Anker als die Farbe.
     Gemessen blieb der mobile Suchknopf kantig, obwohl die Regel darueber lud
     und `matches()` sie bestaetigte. Die Gegenregel im kompilierten Theme ist
     nicht die naheliegende (0,3,0), sondern Bootstraps
     `.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn`
     = (0,5,0). Das `:not(:last-child)` greift, weil typeahead HINTER den
     Append-Block noch ein `span.form-clear` haengt — der Knopf gilt Bootstrap
     damit als MITTLERES Gruppenteil und verliert seine rechten Radien.
     Fehlerregister 16 in Reinform: nicht !important, sondern denselben Anker
     verwenden. Am Desktop trat es nicht auf, weil dort eine ID im Selektor
     steht (1,2,0). Beide Stufen stehen bewusst in EINEM Block — dieselbe
     Deklaration, nur zwei Spezifitaeten fuer die Faelle mit und ohne
     form-clear, keine zweite Fassung des Fixes (Fehlerregister 17). */
  .fixed-search .input-group > .input-group-append > .btn,
  .search-form-wrapper-fixed .input-group > .input-group-append > .btn,
  .fixed-search .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
  .search-form-wrapper-fixed .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn{
    border-radius:0 var(--ct-radius-sm) var(--ct-radius-sm) 0;
  }
  /* ct: 20260820-25 — EINE Hoehe fuer die mobile Suchgruppe. Gemessen war das
     Feld 43px und der Knopf 44px hoch (Fehlerregister 11: zwei Hoehen in einer
     Gruppe). Solange beide kantig waren, fiel der 1px-Versatz nicht auf; an
     einer gerundeten Naht steht er sichtbar ueber. Der Wert ist das vorhandene
     Rollen-Token --ct-control-h, kein neuer Pixelwert; `max-height:none`
     gehoert dazu, weil NOVA Form-Controls deckelt (LEHREN I.6). */
  .fixed-search .form-control,
  .fixed-search .input-group > .input-group-append > .btn,
  .search-form-wrapper-fixed .form-control,
  .search-form-wrapper-fixed .input-group > .input-group-append > .btn{
    height:var(--ct-control-h);
    max-height:none;
  }

  /* ct: 20260819-17 (Korrekturpaket 12c) — OFFCANVAS-MENUE GESTALTET.
     ⛔ Befund bei 390px: das Panel mass 270x844 (volle Viewporthoehe) fuer
     fuenf Eintraege, die bei y254 enden — knapp 590px unbetreute schwarze
     Flaeche, und der Kopf trug NOVAs Default-Typo ("Menü" gemischt, 14px)
     neben einem 24px-Kreuz. Das ist Fehlerregister 9: der Mobil-Zweig blieb
     im Framework-Standard stehen, waehrend alles daneben gestaltet ist.
     Geaendert werden Hoehe, Kopf-Typo und Zeilentrennung — die Mechanik
     (Bootstrap collapse, NOVAs Klapp-Pfeile in die Unterkategorien) bleibt
     unangetastet. */
  #mainNavigation.navbar-collapse{
    /* ⚠️ `bottom:auto` ist Pflicht und kein Beiwerk: NOVA verankert das Panel
       mit `top:0` UND `bottom:0` (gemessen). Bei zwei gesetzten Kanten ist die
       Hoehe ueberbestimmt und `height:auto` bleibt wirkungslos — das Panel
       blieb exakt 844px hoch. Dieselbe Falle wie beim Suchfeld-Loeschknopf
       (NOVA-LIVE-LEHREN I.1) und beim Warenkorb-Zaehler. */
    bottom:auto;
    /* ⚠️ !important ist hier PFLICHT und dokumentiert (Kategorie
       "NOVA-important"): NOVA setzt `header .navbar-collapse{height:100vh
       !important}` unter 992px — per styleSheets-Iteration am Objekt
       gefunden, nicht geraten (Fehlerregister 16). Innerhalb der
       important-Ebene entscheidet wieder die Spezifitaet:
       `#mainNavigation.navbar-collapse` (1,1,0) schlaegt
       `header .navbar-collapse` (0,2,0). */
    height:auto!important;
    max-height:100vh;
    overflow-y:auto;
    border-right:1px solid var(--ct-dline);
    border-bottom:1px solid var(--ct-dline);
    box-shadow:0 24px 48px rgba(0,0,0,.5);
  }
  /* ct: Der Hoehen-Traeger ist NICHT das Panel selbst, sondern sein
     Innencontainer: gemessen `.nav-mobile-body` 794px = 844 minus Kopf, bei
     283px Inhalt. Ohne diese Zeile bleibt das Panel bildschirmhoch, egal was
     am Panel steht (Fehlerregister 16 sinngemaess: erst die Quelle messen,
     dann regeln — nicht am aeusseren Element weiter nachdruecken). */
  #mainNavigation .nav-mobile-body{height:auto}
  #mainNavigation .nav-mobile-header{
    display:flex;align-items:center;justify-content:space-between;
    min-height:56px;
    border-bottom:1px solid var(--ct-dline);
    font-family:var(--ct-font-display);
    font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:#fff;
  }
  #mainNavigation .nav-mobile-header .close,
  #mainNavigation .nav-mobile-header button{
    color:#fff;opacity:1;text-shadow:none;
  }
  /* Eintraege: eine Zeile pro Kategorie, Trennlinie wie im Fussmenue. */
  #mainNavigation .nav-item{border-bottom:1px solid var(--ct-dline)}
  #mainNavigation .nav-item:last-child{border-bottom:0}
  /* ct: NOVAs Platz fuer die horizontale Scrollleiste (24px padding-bottom)
     ist auch im Offcanvas gesetzt und stand dort als leere Zeile unter dem
     letzten Eintrag — im Desktop-Zweig ist er aus demselben Grund schon
     abgeschaltet (Fehlerregister 13: derselbe Baustein, zwei Instanzen). */
  #mainNavigation .nav-scrollbar-inner{padding-bottom:0}
  #mainNavigation .nav-item > .nav-link{
    font-size:12.5px;letter-spacing:.1em;
  }
  #mainNavigation .nav-item > .nav-link:hover,
  #mainNavigation .nav-item > .nav-link:focus{color:var(--ct-volt)}
}

/* ============ Mobiler Kopf: Wortmarke + 4 Icons kollisionsfrei ==========
   ct: 20260820-26 (Befund 6, Ben 20.08.2026). BEFUND GEMESSEN bei 390px,
   Vergleichsliste GEFUELLT (dann rendert NOVA das VIERTE Icon):
     Wortmarke  L=56 .. R=256 (200px, 19px Schrift)
     Icon-Reihe L=217 .. R=370 (36/38/38/40px)
   -> 39px Ueberlappung, das Konto-Icon lag auf ".shop". Mit leerer
   Vergleichsliste (3 Icons) faellt es nicht auf — genau deshalb stand es
   bis jetzt drin.

   PLATZRECHNUNG statt Pixelraten (bei 390px, Werte gemessen):
     Rand links 20 + Burger 20 + Luft 16          = 56  -> Start Wortmarke
     Icon-Reihe 4 x ~36                           = 144 -> braucht 226..370
     bleibt fuer die Wortmarke                    = 158px
   Zwei Stellschrauben, beide bis an ihre Grenze gedreht, KEINE weiter:
   1. Icon-Polster 10px statt NOVAs 12/14 — die Icons messen damit 34..38 x
      40px. Weiter runter geht bewusst NICHT: 40px ist die Untergrenze der
      Tapflaeche (dasselbe Mass wie --ct-control-h), und die Reihe ist die
      meistbenutzte Bedienflaeche des mobilen Shops.
   2. Wortmarke 16px statt 19px und ohne das 6px-Innenpolster des Ankers
      -> 158px breit. Gemessene Luft zwischen Wortmarke und erstem Icon: 12px.
   Die Alternative — ein Icon mobil weglassen — waere Funktionsverlust: die
   Vergleichsliste ist sonst mobil nicht mehr erreichbar (Fehlerregister 14).

   ⚠️ Unter 390px skaliert die Wortmarke mit dem TATSAECHLICH FREIEN Platz,
   nicht mit `vw`. Ein reiner vw-Wert war gemessen falsch (bei 360px blieben
   6px Ueberlappung): der linke Anschlag (20 Rand + 36 Burger = 56) und der
   rechte (20 Rand + 144 Icons) schrumpfen NICHT mit dem Viewport, die
   Wortmarke aber schon — die beiden Groessen sind also nicht proportional.
   `calc((100vw - 228px) / 9.9)` rechnet stattdessen genau die Restbreite aus:
   228 = 56 links + 144 Icons + 20 rechts + 8 Sicherheitsluft, 9.9 ist das
   gemessene Verhaeltnis Wortmarkenbreite je px Schriftgrad (158px bei 16px).
   Deckel 16px (der bei 390px gemessene Bestwert), Boden 13px Lesbarkeit.
   ⚠️ BEKANNTE GRENZE: unter ~350px Viewportbreite greift der 13px-Boden und
   die Wortmarke laeuft wieder in die Icons. 360px (kleinste gaengige
   Android-Breite) ist gegengemessen frei. Ab 768px ist Platz genug, dort
   bleibt es bei 19px (gegengemessen). */
@media (max-width: 767.98px){
  #jtl-nav-wrapper .ct-wordmark{padding-left:0;padding-right:0}
  #jtl-nav-wrapper .ct-wordmark img{max-height:34px}
  #jtl-nav-wrapper #shop-nav .nav-item > .nav-link{
    padding-left:10px;padding-right:10px;
  }
}

/* ct: Warenkorb-Dropdown, Positionsliste (Ben, 21.08.2026 — "wird scrollbar,
   braucht mehr Platz"). NOVA deckelt die Liste unter 992px mit der Utility
   .max-h-sm = 150px (Desktop: .lg-max-h = 350px); EINE Position plus
   Versandzeile sind schon 192px, der Scrollbalken erscheint beim ersten
   Artikel. Mobil bis zur halben Viewport-Hoehe, Desktop-Wert als Deckel. */
@media (max-width: 991.98px){
  .cart-icon-dropdown .table-responsive.max-h-sm{max-height:min(50vh, 21.875rem)}
}
/* ct: Die zwei Buttons im Dropdown-Fuss kamen in zwei Bauweisen (Outline im
   Fliesstext, Primaer in Versalien). Eine Typo fuer beide — dieselbe wie die
   Checkout-Buttons (ct-checkout.css Abschnitt 7). Die Gewichtung
   (Kasse = Outline, Warenkorb = Primaer) ist NOVAs Markup und bleibt. */
.cart-icon-dropdown .dropdown-menu .btn{
  min-height:var(--ct-control-h);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--ct-radius-sm);
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;
}
.cart-icon-dropdown .dropdown-menu .btn-outline-primary{color:#fff;border-color:rgba(255,255,255,.35)}
.cart-icon-dropdown .dropdown-menu .btn-outline-primary:hover,
.cart-icon-dropdown .dropdown-menu .btn-outline-primary:focus{color:#fff;border-color:#fff;background:transparent}