/* ct-version: 20260820-20 */
/* ct: Design-Tokens 1:1 aus dem :root der Mockups (Projektinformationen/mockup/*.html),
   eigener Namensraum --ct-* (NOVA-/Fremdklassen nie wiederverwenden).
   Bewusst niedrige Spezifitaet, KEIN !important — das Kunden-Backend-CSS
   (customsass) muss uns mit gleicher Spezifitaet schlagen koennen. */
:root{
  --ct-css-base:'20260820-20';
  /* ct: Grundmass der Content-Flucht (Ben, 19.08.2026) — EIN Token fuer die
     ganze Site. Vorher 1280 hart in .ct-wrap; auf 1920 blieben dadurch je
     Seite ~320px brach. 1600 halbiert den Rand auf ~160px je Seite; bei 1440
     ergibt es 1360px Inhalt. Wer eine Flucht baut, greift dieses Token —
     kein Pixelwert mehr im Layout. */
  --ct-wrap-max:1600px;

  /* ct: VERTIKALES RASTER — EIN Rhythmus fuer die ganze Site
     (Ben, 19.08.2026: "sektionsabstände müssen nochmal grundsätzlich
     überarbeitet werden, da bist du einfach wie ein amateur";
     Projektinformationen/FEHLERMUSTER.md Muster 1).
     Vorher setzte jede Sektion ihre Abstaende einzeln — Hero 64/56,
     Rail-Zellen 26, USP-Zellen 34, Baender 88, Slider-Kopf 60 statt 40,
     Kategorietext 56/40. Ab hier gibt es KEINEN freihaendigen Vertikalwert
     mehr in den Bereichsdateien: jede Sektion greift eine dieser Rollen.
     Werte sind das 8er-Raster des Mockups (.sec 88, .sechead 24/40).
     Gleiche Bandart = gleiches Token = gemessen gleicher Abstand. */
  /* ct: 20260820-12 — 88 -> 44 (Ben, 20.08.2026: Sektionsabstaende der
     Startseite halbieren; markiert USP->Klassen und Klassen->Slider).
     Bewusst am TOKEN halbiert, nicht je Sektion: gleiche Bandart = gleicher
     Wert (FEHLERMUSTER 1) — der Wert wirkt damit ueberall, wo das Band-Mass
     greift (auch Kategorietext, PDP-Tab-Band, Footer-Oberkante). 44 verlaesst
     das 8er-Mockup-Raster (8x5,5) — Bens Ansage geht vor Rastertheorie. */
  --ct-band-y:44px;      /* Inhaltsband oben/unten (Klassen, Slider, Guide, SEO-Text) */
  --ct-pagehead-y:56px;  /* Seitenkopf-Band (Kategoriekopf) — Mockup .cathead 56/62 */
  --ct-head-pad:24px;    /* Sektionskopf -> Trennlinie */
  --ct-head-gap:40px;    /* Trennlinie -> Inhalt */
  --ct-cell-y:32px;      /* Zellpolster in Streifenbaendern (Zulassungs-Rail, USP) */
  --ct-hero-y:40px;      /* Hero: Oberkante -> Inhalt */
  --ct-hero-gap:24px;    /* Hero-Grid -> Zulassungs-Rail */
  /* ct: 20260819-9 — 566 -> 605px (Korrekturpaket 7). 605 ist die GEMESSENE
     Hoehe der Hero-Textspalte: Buehnenunterkante und CTA-Unterkante liegen
     damit auf derselben Linie (844px bei 1440x900), und das Fahrzeugfoto
     gewinnt 39px Kantenlaenge, die vorher als Leerraum in der Zeile standen.
     Der Fold bleibt unberuehrt — die Zeilenhoehe gab die Textspalte schon
     vorher vor, nicht die Buehne (und erst recht nicht das Bild wie in der
     Fassung mit `min-height:480px`, die auf 713px auflief). */
  --ct-hero-stage:605px;
  --ct-stack-sm:16px;    /* Abstaende INNERHALB eines Textstapels */
  --ct-stack-md:24px;
  --ct-stack-lg:32px;
  --ct-grid-gap:24px;    /* Spalten-/Zeilenabstand in Karten-Rastern */
  /* ct: 20260819-9 — ROLLEN-TOKEN fuer Bedienelement-Hoehen. Fehlerregister 11
     ("zwei Hoehen in einer Element-Gruppe") ist bei uns schon zweimal
     aufgetreten (PDP-Stepper 43 vs. CTA 54, Versandkostenzeile im Warenkorb
     select 40 vs. input/button 43). Ab hier gibt es EINE Quelle: wer eine
     Gruppe aus Feld + Knopf baut, referenziert dieses Token an ALLEN Teilen
     statt jedem Teil einen eigenen Wert zu geben.
     44px = Mockup-Mass der Beratungs-CTA (.helpbox .btn) und zugleich die
     uebliche Mindest-Tapflaeche. Die 54px der PDP-Kaufgruppe bleiben ihr
     eigenes, groesseres Mass (--ct-control-h-lg). */
  --ct-control-h:44px;
  --ct-control-h-lg:54px;
  /* ct: 20260820-16 — BILDZONE DER KLASSENKACHEL IST EIN VERHAELTNIS, KEINE HOEHE.
     Bis -15 standen hier vier Pixelwerte (--ct-cat-img 196/150,
     --ct-cat-img-big 300/210), weil es zwei Kachelgroessen gab. Das
     v1-Mockup (Projektinformationen/mockup/mockup-startseite-v1.pdf) kennt
     nur EINE Kachelgroesse; gemessen im PDF-Render: Kachel 244px breit,
     Bildzone 144px hoch = 1,69 — also 16/9. Als Verhaeltnis braucht die
     Bildzone keinen zweiten Wert je Breakpoint mehr: sie folgt der
     Kachelbreite automatisch (bei 1440/5 Spalten 252 -> 142px, praktisch das
     Mockup-Mass). Ein Rollen-Token statt eines Pixelwerts je Kachelgroesse
     (Fehlerregister 3). */
  --ct-cat-ratio:16/9;
  /* ct: 20260820-18 (Befund 14) — DECKEL DER PRODUKTKACHEL-BILDBUEHNE.
     Die Buehne ist quadratisch und folgt der Kachelbreite. Bei nur 1-2
     Treffern wird die Kachel halbseitenbreit, und die Buehne wuchs mit:
     gemessen /3-Rad (2 Artikel, 1440) 517x518px fuer ein 360x360-Foto —
     `object-fit:contain` skaliert nicht hoch, also standen 158px Weiss um
     das Fahrzeug (Fehlerregister 3b, tote Flaeche).
     360px ist kein gewuerfelter Wert, sondern JTLs geliefertes `md`-Format:
     groesser als die Quelldatei kann die Buehne nie sinnvoll werden. */
  --ct-pcard-stage-max:360px;
  /* ct: 20260820-16 — PAPIER-GRAU DER SEKTIONSBAENDER, im v1-Mockup-Render
     per Pixelprobe gemessen (#F4F6F8 an drei Punkten des Bestseller-Bandes).
     Bewusst NICHT --ct-paper (#f2f4f3): das ist der gruenstichige Ton der
     Kachel-Fusszeilen aus der aelteren Mockup-Iteration, --ct-band-paper der
     blaustichige Bandgrund von v1. Zwei Rollen, zwei Namen.
     ct: 20260820-18 — die frueher hier vermerkte offene Ben-Frage ("kein
     globaler Seitenhintergrund") ist ENTSCHIEDEN: Kategorie und PDP tragen
     diesen Ton jetzt als Seitengrund (Regel auf #main-wrapper weiter unten),
     die Startseite behaelt ihre Baender-Logik. */
  --ct-band-paper:#f4f6f8;
  /* ct: 20260820-16 — DEZENTER KARTENSCHATTEN, eine Rolle, eine Quelle.
     Das v1-Mockup hebt die USP-Karten und die Bestseller-Karten mit einem
     weichen Schatten vom Bandgrund ab; bis -15 kannte das Projekt gar keinen
     Schatten (NOVAs Bootstrap-Schatten werden ueberall abgeschaltet). Damit
     nicht zwei Sektionen je eine eigene Schattenfassung erfinden
     (Fehlerregister 3/17), steht er hier als Rollen-Token. */
  --ct-card-shadow:0 1px 2px rgba(13,15,14,.04), 0 8px 24px rgba(13,15,14,.06);
  /* ct: 20260819-10 — Innenpolster der Produktkachel. Steht bisher zweimal
     freihaendig in ct-kategorie.css (24 / 16 unter xl) und einmal mit 16px in
     der Slider-Kachel — drei Werte fuer EINEN Baustein. Ab hier ein Token,
     das Kategorie-, Startseiten- und Empfehlungskachel gemeinsam greifen. */
  --ct-card-pad:24px;
  /* ct: 20260819-11 — Thumb-Kachel der PDP-Galerie. 112x84 ist das gemessene
     Mass im Normalzustand (7 Bilder in der 880px-Leiste, Mockup .thumbs
     span{height:84px}); als Token, weil der Fullscreen-Zustand dieselbe
     Kachelgroesse braucht und sie sonst zweimal als Pixelwert dastuende. */
  --ct-thumb-w:112px;
  --ct-thumb-h:84px;
  /* ct: 20260820-15 (Ben, 20.08.2026) — ELEKTRO-GRUEN #6CBF3F STATT VOLT #8FE838.
     #8FE838 stammte aus der FALSCHEN Mockup-Iteration; die Farbwelt-Seite von
     Projektinformationen/mockup/Redesign-Konzept-CargoTrike-v1.pdf definiert
     #6CBF3F. Der Ton ist dunkler und gesaettigter — was den Kontrast auf
     hellen Flaechen VERBESSERT (auf Weiss 1,4:1 -> 2,3:1) und auf Ink weiter
     8,4:1 traegt (gemessen, s. Abnahme 20.08.).
     --ct-volt-d ist die Hover-/Dunkelstufe und wird aus dem Grundton
     ABGELEITET, nicht frei gewaehlt: gleicher Farbton (hsl ~97deg), Helligkeit
     eine Stufe runter (50% -> 44%) = #5AA834. Damit bleibt das Paar bei einem
     kuenftigen Tonwechsel nachvollziehbar statt zwei unabhaengige Hexwerte.
     ⚠️ --ct-volt-rgb traegt DENSELBEN Ton als Komponenten, damit
     halbtransparente Volt-Flaechen (Kategoriekopf-Verlauf) das Token greifen
     koennen statt ein zweites Mal hart zu stehen — bis -14 stand dort
     `rgba(143,232,56,.10)` und waere beim Umstellen stehengeblieben. */
  --ct-volt:#6CBF3F;
  --ct-volt-d:#5AA834;
  --ct-volt-rgb:108,191,63;
  /* ct: 20260820-13 (Ben, 20.08.2026) — CI-BLAU IST DIE CTA-FARBE.
     Das Template war gegen die falsche Mockup-Iteration gebaut: in der
     v1-Fassung (Projektinformationen/mockup/Redesign-Konzept-CargoTrike-v1.pdf,
     Farbwelt-Seite; nachgesehen in mockup-startseite/-kategorie/-artikel-v1.pdf)
     tragen ALLE Kauf-/Primaeraktionen das CI-Blau — Suchknopf, Hero-CTA,
     Kachel-Warenkorb, PDP-Kauf-Button. Volt BLEIBT der Akzent (Kicker-Linien,
     Chip-Punkte, Rail-Zahlen, Footer-Hover, Scroll-to-Top, Preis-Marker) und
     wird NICHT global ersetzt.
     Ab hier greift jede Blau-Stelle diese beiden Tokens — kein Hexwert im
     Layout (FEHLERMUSTER 1). Text auf Blau ist immer Weiss. */
  --ct-cta:#1976D2;
  --ct-cta-d:#1565C0;
  /* ct: 20260820-15 — helle Tinte derselben CTA-Farbe fuer FLAECHEN, auf denen
     CTA-Text steht (aktive Sidebar-Zeile im v1-Mockup: heller Block, blaue
     Schrift). Als Token, weil sonst wieder ein freihaendiges rgba() im Layout
     stuende. 8 % Deckung ist die gemessene Helligkeit der Mockup-Flaeche. */
  --ct-cta-soft:rgba(25,118,210,.08);
  /* ct: 20260820-13 (Ben, 20.08.2026) — RUNDUNGEN STATT HARTER ECKEN.
     Die v1-Mockups zeigen weiche Ecken; der Bestand hatte an ~35 Stellen
     `border-radius:0` als Override. Drei ROLLEN, kein freihaendiger
     Pixelwert je Element (FEHLERMUSTER 1 / Fehlerregister 3):
       lg = grosse Container (Hero-Buehne, PDP-Kaufbox, Galerie-Buehne,
            Guide-/Beratungskarten)
       md = Karten und Kacheln (Fahrzeug-Klassen, Produktkarten,
            Unterkategorien, Technische-Daten-Karte, Zaehlerbox)
       sm = Bedienelemente (Buttons, Inputs, Selects, Chips, Badges,
            Thumbs, Pfeilknoepfe, Pagination)
     ⚠️ Karten mit Bildzone/Fusszeile an der Kante brauchen zusaetzlich
     `overflow:hidden`, sonst stehen die Innenecken ueber der Kartenrundung. */
  --ct-radius-lg:16px;
  --ct-radius:12px;
  --ct-radius-sm:8px;
  --ct-ink:#0d0f0e;
  --ct-ink-2:#141917;
  --ct-ink-3:#1d2320;
  --ct-paper:#f2f4f3;
  --ct-paper-2:#e9ecea;
  --ct-line:#dfe4e1;
  --ct-dline:rgba(255,255,255,.13);
  --ct-text:#0d0f0e;
  --ct-muted:#69736e;
  --ct-dmuted:rgba(255,255,255,.60);
  --ct-font-display:'Archivo','Arial Narrow',Arial,sans-serif;
  --ct-font-text:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ct: Grundschrift — Mockup: Inter 16px/1.62, Headlines Archivo versal, eng. */
body{
  font-family:var(--ct-font-text);
  color:var(--ct-text);
}
/* ct: 20260820-20 (Abnahme-Befund N-2, SCHWERE HOCH) — der Header ist sticky
   (gemessen 159px Desktop / 110px mobil); ohne scroll-padding landete jeder
   Ankersprung (z. B. "Weiter einkaufen" -> …#buy_form_<id>) UNTER dem Header:
   der Kauf-Button war auf Desktop zu 100 %, mobil zu 74 % verdeckt.
   Ein Wert mit Luft deckt beide Headerhoehen; praeziser geht es nicht ohne
   JS, und 12-60px Ueberschuss sind unkritisch. */
html{scroll-padding-top:170px}
@media (max-width: 991.98px){
  html{scroll-padding-top:122px}
}
/* ct: Ueberschriftenfarbe GLOBAL (Ben, 19.08.2026). NOVA setzt h1-h3 auf
   rgb(82,82,82) — ein Grauwert, der weder im Mockup noch in unseren Tokens
   vorkommt. Der Grundwert gehoert an die Basis, nicht in Seiten-Scopes
   (Fehlerregister 17: ct-artikel.css hatte ihn genau deshalb schon einmal
   lokal). Ueberschriften auf DUNKLEN Flaechen setzen ihre Farbe selbst
   (.ct-hero-h1, .ct-cathead-h1, .ct-sechead-dark .ct-h2, .ct-gcard h3,
   footer) — alle diese Dateien laden nach ct-base.css. */
h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--ct-font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.022em;
  color:var(--ct-text);
}
/* ct: 20260820-19 (Ben-Review, "das mit den schriftarten ist vermutlich an
   vielen stellen nicht sauber") — my-nova setzt Montserrat auf die
   Heading-Ebene; unsere Regel oben faengt nur h1-h3. Die Reste liefen
   sichtbar in NOVA-Komponenten weiter (gemessen: Sidebar-Boxkopf
   "Kategorien", Modal-Titel des Warenkorb-Modals). Sammelregel fuer die
   restliche Heading-Ebene und die Komponententitel — Inter, nicht Display:
   das sind Binnen-Ueberschriften im Fliesskontext, keine Plakate. */
h4,h5,h6,.h4,.h5,.h6,
.box-normal-link,
.box-title,
.modal-title,
.dropdown-header{
  font-family:var(--ct-font-text);
  font-weight:600;
}
/* ct: 20260820-20 (Abnahme 15c) — my-nova setzt Montserrat mit HOEHERER
   Spezifitaet als die flache Sammelregel oben: `.sidepanel-left .box-normal
   .box-normal-link` (0,3,0) und die Stepper-Felder `.form-counter …`. Die
   Selektoren werden hier 1:1 gekontert; ct laedt nach my-nova (Ladeordnung
   im header.tpl-Kommentar), gleiche Spezifitaet genuegt. */
.sidepanel-left .box-normal .box-normal-link,
.product-matrix .product-matrix-title,
.form-counter .form-control,
.form-counter .input-group-text{
  font-family:var(--ct-font-text);
}

/* ct: slick-lazy-Slider VOR der Initialisierung clippen — die Slides liegen
   bis zum Lazy-Init ungeclippt nebeneinander und erzeugen auf Mobil 16px
   horizontales Scrollen (gemessen auf der Artikelseite, 390px, axi UND
   playwright). Nach dem Init uebernimmt slick-list (overflow:hidden). */
.slick-lazy:not(.slick-initialized){overflow-x:hidden}

/* ct: EINE Flucht fuer die ganze Site (Ben, 19.08.2026 — Fehlerregister 17).
   Vorher liefen bei 1440 drei Fluchten nebeneinander: Header 16..1424,
   Content 40..1400, Footer 95..1345; bei 1920 sass der Artikel-Content sogar
   linksbuendig (0..1600, ohne margin:auto). Beides ist jetzt EIN Baustein.

   Rechnung (Bootstrap-Container-Muster): --ct-wrap-max ist die INNERE
   Inhaltsbreite, 40px ist das Seitenpolster. Das Element darf deshalb
   max-width + 2*40 breit werden:
     1440 → Element 1440 (voll), Inhalt 40..1400
     1920 → Element 1680 zentriert, Inhalt 160..1760
   Wer eine neue Flucht braucht, nimmt .ct-wrap oder haengt sich an diese
   Formel — kein zweiter Pixelwert mehr im Projekt. */
.ct-wrap{
  width:100%;
  max-width:calc(var(--ct-wrap-max) + 80px);
  margin-left:auto;margin-right:auto;
  padding-left:40px;padding-right:40px;
}
/* ct: Die Wurzel aller Inhaltsseiten. NOVA laesst #content-wrapper je nach
   Seitentyp voellig unterschiedlich laufen (Startseite/CMS: 0..1440 ohne
   Deckel, Liste: container-fluid-xl 1650). Der Deckel gehoert an die BASIS,
   nicht in Seiten-Scopes — ct-kategorie.css und ct-artikel.css hatten ihn
   bis 20260819 je einmal doppelt (Fehlerregister 17); dort steht jetzt nur
   noch das seitenspezifische Vertikalmass. */
#content-wrapper{
  width:100%;
  max-width:calc(var(--ct-wrap-max) + 80px);
  margin-left:auto;margin-right:auto;
  padding-left:40px;padding-right:40px;
}
/* ct: 20260820-18 (Befund 4, Ben 20.08.2026) — SEITENGRUND VON KATEGORIE UND
   PDP AUF PAPIER-GRAU. Bis -17 war `--ct-band-paper` ausdruecklich "KEIN
   globaler Seitenhintergrund (offene Ben-Frage)"; die Frage ist jetzt
   entschieden: die beiden Verkaufsseiten bekommen den v1-Bandgrund, damit
   ihre weissen Flaechen (Produktkacheln, Sidebar-Karten, Kaufbox,
   Tab-Kaesten) ueberhaupt als Karten lesbar sind. Vorher stand Weiss auf
   Weiss und der Rahmen war das einzige Signal.
   ⚠️ Der Grund haengt an `#main-wrapper`, nicht an `#content-wrapper`:
   letzterer ist auf 1680px gedeckelt, ein Grund darauf haette auf breiten
   Fenstern zwei weisse Streifen links und rechts stehen lassen.
   ⚠️ Bewusst NUR diese zwei Seitentypen (Ben: die Startseite behaelt ihre
   Baender-Logik) und bewusst NICHT auf `body`: Header und Footer tragen ihre
   eigenen Flaechen und duerfen davon nichts abbekommen. Beide Selektoren
   stehen HIER zusammen und nicht je einmal in ct-kategorie/ct-artikel —
   Fehlerregister 17, eine Rolle, eine Quelle. */
#main-wrapper:has(#content-wrapper.is-item-list),
#main-wrapper:has(.product-detail){background:var(--ct-band-paper)}

/* NOVAs innere .container/.container-fluid setzen je eine EIGENE Breite und
   ein 16px-Polster — sonst gewinnt die innere Flucht ueber die aeussere. */
#content-wrapper .container,
#content-wrapper .container-fluid{
  max-width:none;padding-left:0;padding-right:0;
}
@media (max-width: 767.98px){
  .ct-wrap{padding-left:20px;padding-right:20px}
  #content-wrapper{padding-left:20px;padding-right:20px}
}
/* ct: Mobile Stufe des Rasters — EINE Stelle, alle Sektionen folgen.
   Deshalb steht in den Bereichsdateien keine einzige vertikale
   Media-Query-Ausnahme mehr. */
/* ct: Zwischenstufe — unter xl schrumpft die Kachel spuerbar (gemessen ~195px
   Inhaltsbreite in der Kategorieliste), das Polster muss mit. */
@media (max-width: 1199.98px){
  :root{--ct-card-pad:16px}
}
@media (max-width: 767.98px){
  :root{
    --ct-band-y:28px; /* ct: 20260820-12 — 56 -> 28, halbiert wie Desktop */
    --ct-pagehead-y:36px;
    --ct-head-pad:16px;
    --ct-head-gap:28px;
    --ct-cell-y:24px;
    --ct-hero-y:32px;
    --ct-hero-gap:24px;
    --ct-hero-stage:300px;
    --ct-stack-sm:12px;
    --ct-stack-md:20px;
    --ct-stack-lg:24px;
    --ct-grid-gap:16px;
    /* ct: 20260820-16 — die Bildzone braucht hier keinen eigenen Wert mehr:
       sie haengt am Verhaeltnis --ct-cat-ratio und schrumpft mit der Kachel. */
  }
}

/* ct: 20260819-9 — GLOBALER CT-BUTTONSTIL (Ben, Korrekturpaket 19.08.2026).
   Bis hierhin trug nur, was wir selbst gebaut hatten, die Designsprache:
   .ct-btn-cta/.ct-btn-ghost (Hero), .ct-cartbtn (Kachel), der PDP-Kauf-CTA
   und der Suchknopf. Jeder Knopf, den JTL selbst rendert — "Zur Kasse",
   "Kundendaten abschicken", "Weiter", "Zahlungspflichtig bestellen",
   "Nachricht senden", "Anmelden", "Versandkosten ermitteln" — stand im
   NOVA-Default: 2px Radius, gemischte Schreibweise, weight 600, Bootstrap-
   Schatten. Das ist Fehlerregister 17 in Reinform (Fix nur dort, wo gerade
   jemand hinsieht) und Fehlerregister 9 (Framework-Default als Design).

   Der Stil sitzt deshalb an der BASIS auf den beiden Bootstrap-Rollen, die
   JTL durchgaengig verwendet, nicht an einzelnen Seiten-Selektoren.

   ⚠️ FARBEN — 20260820-13 KORRIGIERT diesen Absatz. Bis dahin stand hier
   "Farben bleiben, wo sie sind", weil NOVAs kompiliertes Theme .btn-primary
   schon volt faerbt. Seit Bens v1-Korrektur ist die Primaerfarbe BLAU, und
   die Quelle des Volt-Grundtons liegt NICHT in unseren Dateien, sondern in
   themes/my-nova/my-nova.css (`.btn-primary{background:rgb(143,232,56)}`,
   gemessen 20.08. per styleSheets-Iteration). Sie wird hier aktiv
   ueberschrieben: gleiche Spezifitaet (0,1,0), aber spaeter in der
   Ladereihenfolge — deshalb KEIN !important noetig (Fehlerregister 16).
   .btn-secondary bleibt Ink mit Volt-Hover (Sekundaerrolle, kein Kauf-CTA).

   ⚠️ AUSNAHMEN vom Hoehen-Token, beide gemessen, nicht vermutet:
   .btn-sm (NOVAs kleine Knoepfe, u. a. im Warenkorb-Dropdown) und
   .badge-circle-1 (die 38px-Kreisknoepfe Merken/Vergleichen aus
   comparelist_button.tpl / wishlist_button.tpl). Ein min-height gewinnt
   IMMER gegen ein kleineres height — ohne diese Guards waeren die
   38px-Icon-Knoepfe auf 44px aufgeblasen worden. */
.btn-primary,
.btn-secondary{
  border-radius:var(--ct-radius-sm); /* ct: 20260820-13 — Rolle Bedienelement */
  text-transform:uppercase;
  letter-spacing:.1em;
  box-shadow:none;
}
.btn-primary:not(.btn-sm):not(.badge-circle-1),
.btn-secondary:not(.btn-sm):not(.badge-circle-1){
  min-height:var(--ct-control-h);
}
/* ct: 20260820-13 — Primaeraktion = CI-Blau auf Weiss. Die Deklaration
   ueberschreibt NOVAs Volt-Grundton aus my-nova.css (siehe Kommentar oben). */
.btn-primary{
  font-weight:800;
  background-color:var(--ct-cta);
  border-color:var(--ct-cta);
  color:#fff;
}
.btn-secondary{font-weight:700}
/* ct: NOVA setzt seine Hover-/Aktiv-Farben mit `:not(:disabled):not(.disabled)`
   (0,3,0). Eine nackte `.btn-primary:hover` (0,2,0) verliert dagegen —
   Fehlerregister 16: nicht !important, sondern DENSELBEN Anker verwenden. */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active{
  background-color:var(--ct-cta-d);
  border-color:var(--ct-cta-d);
  color:#fff;
  box-shadow:none;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active{
  background-color:var(--ct-volt);
  border-color:var(--ct-volt);
  color:var(--ct-ink);
  box-shadow:none;
}


/* ct: 20260820-14 — MENGEN-ZAEHLER: EINE Gruppe, EINE Rundung.
   NOVA rendert denselben Baustein `.input-group.form-counter` mindestens
   zweimal: auf der Artikelseite (#quantity-grp) und je Warenkorbzeile
   (#quantity-grp0, -1, …). Gemessen 20.08. war der PDP-Stepper nach der
   ersten Fassung gerundet, der Warenkorb-Stepper kantig — Fehlerregister 13.
   Die Regel haengt deshalb an der Klasse, nicht an einer ID, und liegt an der
   BASIS statt in zwei Bereichsdateien (Fehlerregister 17).
   ⚠️ Nur die AUSSENecken: drei einzeln gerundete Kaesten sind kein Stepper
   (NOVA-LIVE-LEHREN N.5 — "nie drei einzeln umrandete Kaesten"). */

/* ⛔ ct: 20260820-17 (Ben, 20.08.2026 — Screenshot mit orangem Kringel um den
   PDP-Stepper) — DOPPELTER RAHMEN IN ZWEI VERSCHIEDENEN GRAUS.

   BEFUND, gemessen statt geraten (Fehlerregister 12/16 — die Gewinnerregel
   wurde per styleSheets-Durchlauf gesucht, nicht vermutet):
     my-nova.css  .form-counter { border: 1px solid rgb(112,112,112);
                                  border-radius: .125rem;
                                  max-height: calc(1.5em + 2px + 1.25rem) }
   Die GRUPPE traegt also schon einen eigenen Rahmen — in einem Grau (#707070),
   das in unserem Token-Satz gar nicht vorkommt. Die drei Kinder (zwei .btn,
   ein .form-control) trugen zusaetzlich je einen 1px-Rahmen in --ct-line.
   Ergebnis am DOM nachgemessen: Gruppe x909,1..1033,1 / Kind x910,1..1032,1 —
   also ZWEI parallele Linien im Abstand von 1px, in zwei verschiedenen Toenen,
   rundherum. Genau das ist die "verrupfte" Kante auf Bens Screenshot.
   Zweiter Befund derselben Ursache (Fehlerregister 11 — gemeinsame Kanten):
   Gruppe top -3115,2 / bottom -3061,2 gegen Kinder -3114,2 / -3060,2, also
   1px Versatz oben UND unten, weil die Kinder eine eigene feste Hoehe (54px)
   im 52px-Innenraum der gerahmten Gruppe hatten.

   FIX — EIN Rahmen, zwei Trennlinien (NOVA-LIVE-LEHREN N.5: "die drei Boxen
   als EIN Rahmen mit zwei Trennlinien stylen, nie drei einzeln umrandete
   Kaesten"):
     • Der Rahmen bleibt an der GRUPPE, bekommt aber unseren Linienton.
     • Die Kinder verlieren ihren Rahmen komplett und liefern stattdessen die
       beiden Naehte (- rechts, + links).
     • `overflow:hidden` an der Gruppe, damit kein Kind ueber die Rundung ragt.
     • Die HOEHE kommt ab hier nur noch von der Gruppe; die Kinder stehen auf
       `height:auto` und werden vom Flex-Stretch gefuellt. Damit gibt es genau
       EINE Hoehenquelle (Fehlerregister 11) statt vier, die sich um 1px
       verfehlen. NOVAs `max-height`-Deckel muss dabei mit weg
       (NOVA-LIVE-LEHREN I.6), sonst kappt er jede groessere Hoehe.
     • Bootstraps `.input-group-prepend{margin-right:-1px}` (der Ueberlapp, der
       doppelte Rahmen kaschieren soll) wird auf 0 gesetzt — ohne Kindrahmen
       gibt es nichts mehr zu ueberlappen, mit ihm saesse die Naht schief.
   ⚠️ An der BASIS, nicht in ct-artikel.css: derselbe Baustein steht im
   Warenkorb (#quantity-grp0). Beide Instanzen sind nach dem Fix gemessen
   worden (Fehlerregister 13). */
.input-group.form-counter{
  border:1px solid var(--ct-line);
  border-radius:var(--ct-radius-sm);
  overflow:hidden;
  background:#fff;
  max-height:none;
}
.input-group.form-counter > .input-group-prepend,
.input-group.form-counter > .input-group-append{
  margin:0;
  height:auto;
}
.input-group.form-counter .form-control,
.input-group.form-counter > .input-group-prepend .btn,
.input-group.form-counter > .input-group-append .btn{
  border:0;
  border-radius:0;
  margin:0;
  height:auto;
  max-height:none;
}
.input-group.form-counter > .input-group-prepend .btn{
  border-right:1px solid var(--ct-line);
}
.input-group.form-counter > .input-group-append .btn{
  border-left:1px solid var(--ct-line);
}

/* ct: 20260820-15 (Ben, 20.08.2026) — KARTEN-OVERLAYS BLEIBEN IN DER KARTE.
   Bens Wortlaut: "der fail den du IMMER und IMMER wieder neu einbaust … beim
   hover über das bild - hovert das overlay am rand mit raus … rück die
   overlays bitte einfach so weit ein dass sie beim hovern nich verloren
   gehen" (Fehlerregister 2, Projektinformationen/FEHLERMUSTER.md Muster 2).

   URSACHE, gemessen in themes/my-nova/my-nova.css — NICHT geraten:
     .productbox-ribbon.ribbon                       { top: 1rem; left: -0.5rem }
     .productbox.productbox-hover:hover
       .productbox-ribbon.ribbon                     { top: -0.5rem; left: -1.5rem }
     .layout-gallery .productbox-show-variations.productbox-hover:hover
       .productbox-quick-actions                     { right: 1.5rem; top: 1.5rem }
   NOVA setzt das Badge also schon im RUHEZUSTAND 8px links AUSSERHALB der
   Karte und schiebt es beim Hovern auf -24px/-8px. Solange die Karte keinen
   Radius hatte, fiel das nicht auf; seit -13 tragen alle Karten
   `border-radius + overflow:hidden`, und damit wird das Badge beschnitten
   (gemessen: "NEU" auf der Kategoriekarte oben links angeschnitten) bzw.
   verschwindet beim Hovern ganz.

   BAU-REGEL (Bens Default, keine Diskussion): Overlays liegen VOLLSTAENDIG
   INNERHALB der Kartenflaeche, eingerueckt, in JEDEM Zustand. Der Einzug ist
   --ct-radius: genau der Kartenrundung — damit liegt die Overlay-Ecke im
   Mittelpunkt des Rundungsbogens und kann von keiner Rundung mehr
   angeschnitten werden. Kein freihaendiger Pixelwert (Fehlerregister 3).

   ⚠️ AN DER BASIS, NICHT JE SEITE (Fehlerregister 17): Denselben Baustein
   rendern Kategorie-Grid (.productbox-column), Kategorie-Liste
   (.productbox-row), Startseiten-Slider und PDP-Empfehlungen (.ct-pcard) —
   alle mit denselben NOVA-Klassen. Bis -14 stand die Positionierung DOPPELT
   (ct-kategorie.css und ct-startseite.css, beide mit `left:0;top:0`); beide
   Fassungen sind mit diesem Paket dort entfernt worden.

   ⚠️ KEIN !important (Fehlerregister 16): Die Hover-Regel hat Spezifitaet
   (0,4,0) — hier steht deshalb DERSELBE Anker, und ct-base.css laedt nach
   my-nova.css. Der Ruhezustand-Anker ist (0,2,0), identisch zu NOVAs. */
.productbox-ribbon.ribbon,
.productbox.productbox-hover:hover .productbox-ribbon.ribbon,
.productbox.productbox-hover:focus .productbox-ribbon.ribbon,
.productbox.productbox-hover.focus .productbox-ribbon.ribbon{
  top:var(--ct-radius);
  left:var(--ct-radius);
  right:auto;
}
.productbox-quick-actions,
.layout-gallery .productbox-show-variations.productbox-hover:hover .productbox-quick-actions{
  top:var(--ct-radius);
  right:var(--ct-radius);
  left:auto;
}
/* ct: Rolle Badge — gilt fuer jede Kachelinstanz statt zweimal je Bereich.
   Die Zipfel von NOVAs .ribbon-3 (::before/::after) widersprechen der
   Designsprache und wuerden ausserdem ueber die Einrueckung hinausragen. */
.productbox-ribbon.ribbon{border-radius:var(--ct-radius-sm)}
.productbox-ribbon.ribbon::before,
.productbox-ribbon.ribbon::after{display:none}

/* ct: 20260819-10 (Korrekturpaket 3) — CONSENT-KNOPF AUS DER BEDIENFLAECHE.
   Befund (gemessen /Cargo-Trikes, 1440): JTLs `#consent-settings-btn` steht
   `position:fixed; left:16px; bottom:16px` und misst 40x40, belegt also
   dauerhaft x16..56. Der linke Griff des Preisfilters sitzt bei x43..53 —
   `document.elementFromPoint(48, 864)` lieferte den CONSENT-KNOPF, nicht den
   Griff (Fehlerregister 7). Der Filter war damit an dieser Stelle schlicht
   nicht bedienbar.
   Ein Freiraum unter der Sidebar hilft dagegen NICHT: der Knopf ist fixiert
   und ueberdeckt bei jeder Scrollposition dieselbe Bildschirmecke. Er muss
   also aus der Inhaltsspalte heraus — in die Seitenrinne, die die
   Content-Flucht ohnehin freilaesst (40px bei 1440/768, 160px bei 1920).
   32px an left:4 belegt x4..36 und beginnt damit VOR dem Inhalt.
   Funktion bleibt unangetastet: nur Groesse und Position, kein display,
   kein pointer-events, kein Eingriff ins Plugin-Markup. */
#consent-settings-btn{
  left:4px;
  bottom:12px;
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  padding:0;
}
#consent-settings-btn svg,
#consent-settings-btn img{width:16px;height:16px}