/* =============================================================================
   Folien-Arbeiter — Brand Kit
   -----------------------------------------------------------------------------
   DIE EINZIGE Datei, die das Kit im Shop umsetzt. Alles hier drin:
   Schriften, Tokens und die Overrides fuer das bestehende Theme.

   Rueckgaengig machen = diese Datei loeschen und die eine Zeile in
   css/general_bottom.css.php entfernen. Sonst wurde am Template NICHTS
   veraendert — FABRAND2026 ist ansonsten eine unveraenderte Kopie von
   FADESING2026.

   Quelle der Wahrheit:
     G:\Firmendokumente\secondbrain\Kontext\Brandkit\BRAND.md
   Bei Abweichung gilt BRAND.md.

   Angelegt 28.08.2026. NUR IM MIRROR. Live ist ein eigener Schritt.

   Grundregeln, die hier durchgesetzt werden:
     - Orange handelt (Buttons, Klickbares), Gruen kennzeichnet (Marke).
     - Orange unter 10 % der Flaeche, nie als Sektionshintergrund.
     - Kein Gelb, Lila, Blau. Rot nur fuer echte Fehler.
     - Keine Verlaeufe. Runde Ecken und Schatten sind erlaubt.
     - Hell ueberall, kein Dark Mode.

   Pfade absolut ab Webroot: diese Datei wird nach css/tpl_plugins.min.css
   einkombiniert, relative Pfade wuerden dabei verrutschen.
   ========================================================================== */


/* ===========================================================================
   1. SCHRIFTEN — selbst gehostet unter fonts/brand/
   ---------------------------------------------------------------------------
   Keine Google-Fonts-Einbindung ueber das Netz: auf deutschen Seiten
   abmahnfaehig (LG Muenchen I, 20.01.2022, Az. 3 O 17493/20).
   OFL-Lizenzen liegen im selben Ordner — die Lizenz verlangt Mitlieferung.

   Archivo Narrow und IBM Plex Sans sind Variable Fonts (eine Datei je
   Subset), IBM Plex Mono ist statisch (eine Datei je Gewicht).

   WICHTIG — die Gewichtsspanne beginnt bei 400, nicht bei 100:
   Das Theme setzt an rund 80 Stellen font-weight:100 (Suchfeld, Mininav,
   diverse Links). Mit Arial und OpenSans war das folgenlos, weil beide
   keinen 100er-Schnitt haben und der Browser auf 400 hochmappte. Eine
   Variable Font HAT diesen Schnitt und rendert ihn — der Text wird
   hauchduenn. Die untere Grenze auf 400 zu setzen faengt alle Faelle auf
   einmal ab, statt 80 Selektoren einzeln zu ueberschreiben.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Narrow';
  src: url('/templates/FABRAND2026/fonts/brand/archivo-narrow-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('/templates/FABRAND2026/fonts/brand/archivo-narrow-latin-ext.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/templates/FABRAND2026/fonts/brand/plex-sans-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/templates/FABRAND2026/fonts/brand/plex-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/templates/FABRAND2026/fonts/brand/plex-mono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/templates/FABRAND2026/fonts/brand/plex-mono-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/templates/FABRAND2026/fonts/brand/plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/templates/FABRAND2026/fonts/brand/plex-mono-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===========================================================================
   2. TOKENS
   ---------------------------------------------------------------------------
   Namen ohne fa-Praefix: '--fa-*' ist im Theme doppelt belegt (FontAwesome
   und der :root-Block in extra.css). Kollisionstest 28.08.2026: alle Namen
   unten sind im Theme frei.
   Kontraste gegen Weiss gerechnet, Werte stehen als Kommentar dran.
   ========================================================================== */

:root {
  /* Flaechen und Text */
  --bg:     #FFFFFF;
  --surf:   #F7F5F3;
  --fg:     #232125;   /* 15,96:1 */
  --mut:    #626262;   /*  6,10:1 */
  --line:   #DDDAD6;
  --line-2: #B8B7B8;

  /* Marke */
  --acc:      #A2601F; /*  4,97:1 auf Weiss, 4,75 auf #FAFAF8, 4,57 auf --surf */
  --acc-ink:  #FFFFFF;
  --acc-deep: #C4672F; /*  3,94:1 — Hover, kein Text */
  --acc-soft: #D67E29; /*  3,05:1 — nur Flaeche */

  --brand:      #3B6443; /* 6,80:1 */
  --brand-dark: #3A5940; /* 7,83:1 */
  --olive:      #8EAC41; /* 2,58:1 — nur Flaeche */
  --lime:       #B6C939; /* 1,84:1 — nur Flaeche */
  --lime-soft:  #DCE189; /* 1,38:1 — nur Flaechentoenung */

  /* Funktional. Es gibt bewusst KEINE Statusfarbe fuer "erledigt/OK" —
     Gruen ist Markenfarbe. Status laeuft ueber Symbol plus Text. */
  --neg: #A32C1E;      /* 7,15:1 */

  /* Schrift */
  --display: 'Archivo Narrow', 'Arial Narrow', Arial, sans-serif;
  --body:    'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --mono:    'IBM Plex Mono', Consolas, ui-monospace, monospace;

  /* Raster */
  --pad-x:        24px;
  --content:      940px;   /* Bootstrap-2-Bestand */
  --content-wide: 1200px;
  --measure:      68ch;

  /* Formen — folgen dem Shop-Bestand */
  --r:      10px;
  --r-card: 14px;
  --r-btn:  10px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(35,33,37,.06), 0 2px 8px rgba(35,33,37,.06);
  --sh-2: 0 12px 28px rgba(35,33,37,.10);
}

@media (max-width: 767px) { :root { --pad-x: 16px; } }

/* iOS zoomt beim Antippen jedes Formularfelds unter 16px automatisch hinein.
   Im Konfigurator stehen sie auf 13px (fa-norm.css) und werden in
   klebebuchstaben.css auf Mobil sogar noch auf 70% verkleinert. Das trifft
   genau die Kunden, die unterwegs eine Groesse eingeben wollen. */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; }
}

/* Sichtbarer Fokus. Das Theme setzt an rund 25 Stellen 'outline: none' —
   teils ohne Ersatz, teils nur mit Rahmenfarbwechsel, der zugleich den
   Ruhezustand markiert. Ohne diese Regel ist der Shop per Tastatur
   praktisch unbedienbar. */
:focus-visible {
  outline: 3px solid var(--acc) !important;
  outline-offset: 2px !important;
}


/* ===========================================================================
   3. TYPOGRAFIE
   ---------------------------------------------------------------------------
   stylesheet.min.css setzt "OpenSans" auf body und laedt es nirgends —
   praktisch sahen Besucher bisher Arial. Hier wird die Schrift zum ersten
   Mal wirklich gesetzt.
   Nur font-family wird angefasst. Groessen und Abstaende bleiben, damit
   keine Layouts kippen.
   ========================================================================== */

/* p braucht eine eigene Zeile: klebebuchstaben.css setzt 'p { Helvetica }',
   klebebuchstabena.css 'p { OpenSans }'. Beide wuerden die body-Regel
   uebersteuern, weil sie das Element direkt ansprechen. */
body, p,
input, select, textarea, button {
  font-family: var(--body);
}

/* Textfarbe. bootstrap.css setzt global 'body { color: #777777 }' — das sind
   4,48:1 auf Weiss und damit knapp UNTER der AA-Grenze von 4,5. Betrifft den
   gesamten Fliesstext des Shops. var(--fg) erreicht 15,96:1. */
body { color:var(--fg) !important; }

/* Der Footer ist die einzige dunkle Flaeche im Shop (#2B292E) — eine
   Bestandsausnahme zur Kit-Regel "hell ueberall". Er darf var(--fg) NICHT
   erben: dunkler Text auf dunkler Flaeche ergibt 1,11:1 und ist unsichtbar.
   var(--line) kommt dort auf ueber 10:1. */
footer, footer p, footer li, footer address, footer .boxcontent,
footer td, footer span, footer div {
  color:var(--line) !important;
}

/* Ueberschriften. Das Gewicht MUSS mit — das Theme setzt 400, und Archivo
   Narrow wirkt in 400 duenn statt schmal-kraeftig. 600/700 laut BRAND.md.
   Groessen bleiben unangetastet, damit keine Layouts kippen. */
h1, h2, h3, h4, h5, h6,
.fa-h1, .fa-h2, .fa-h3,
.products_name, .heading_title, .shopname,
.boxheader, .categoryheader {
  font-family: var(--display);
  font-weight: 600;
}
h1, .fa-h1 { font-weight: 700; }

/* Einzelne Module setzen eigene Ueberschriftenschriften (qrcode.css) —
   deshalb mit Elementnamen und !important nachziehen. */
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--display) !important;
}

/* Verlaeufe auf Link-Buttons in Produkttexten (hundelineArt.css u.a.) */
a[class*="button"], a[class*="btn"], a.cta, .fa-page a[class] {
  background-image: none !important;
}

/* Masse, Nummern, Preise: gleiche Ziffernbreite, damit Spalten stehen.
   Gewicht 500 — das Theme setzte 100, was IBM Plex Mono gar nicht hat
   (statische Schnitte 400 und 500), der Browser haette es hochgemappt. */
.price, .hl_price, .productprice,
#productinfowrap .productprice, .special_price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}


/* ===========================================================================
   4. FARBEN — Overrides fuer das bestehende Theme
   ---------------------------------------------------------------------------
   !!! FOLIENFARBEN NIEMALS ANFASSEN !!!

   Die Oracal-Farbfelder im Konfigurator sind PRODUKTdaten, keine UI-Farben.
   Sie kommen per Inline-Style aus der Shop-DB:

       <div class="fa-color-swatch" style="background-color:rgb(5,5,5)">

   Inline-Styles schlagen externes CSS, deshalb sind sie gegen die Regeln
   hier automatisch geschuetzt — SOLANGE keine Farbregel '!important'
   benutzt. Genau deshalb steht '!important' unten nur an drei Stellen, und
   zwar ausschliesslich dort, wo das Original es selbst benutzt
   (.owl-prev, .owl-next, .sitemap a:hover) — nie auf einem Farbfeld.

   Wer hier etwas ergaenzt: kein '!important' auf .fa-color-swatch,
   .ColorButton, .colorbox, .swatch oder irgendetwas, das eine Folienfarbe
   traegt. Ein umgefaerbtes Farbfeld heisst, der Kunde bestellt die falsche
   Folie.
   ---------------------------------------------------------------------- */

/* Sicherheitsnetz: nur Rahmen und Form, niemals die Flaeche.
   Der Rahmen ist noetig, damit weisse und sehr helle Folien ueberhaupt
   sichtbar sind — genau wie beim Farbchip im Brand Kit. */
.fa-color-swatch, .colorbox, .color-swatch {
  border: 1px solid var(--line-2);
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Das Theme hatte 48 Regeln mit dem alten Shop-Gruen (#7EA000 / #97C000),
   alle in stylesheet.min.css. Statt diese Datei zu veraendern, werden die
   Regeln hier gezielt ueberschrieben — diese Datei liegt im Bundle, das
   NACH stylesheet.min.css geladen wird, und gewinnt bei gleicher
   Spezifitaet ohne !important.

   Zuordnung nach der Kit-Regel:
     Flaeche/Kante, die kennzeichnet   -> var(--brand)
     alles Klickbare                   -> var(--acc)
     Hover und aktiver Zustand         -> var(--acc)
   ========================================================================== */

/* --- 4a. Hauptnavigation ------------------------------------------------
   Sonderfall: Die Regel steht als generisches 'nav { }' in bootstrap.css —
   jemand hat die Bibliothek angepasst. Sie setzt einen linear-gradient, und
   Verlaeufe sind im Kit verboten. Ausserdem faellt ein Verlauf nicht in einer
   Suche nach background-COLOR auf, weil er ueber background-IMAGE laeuft.
   Hier wird er durch eine flache Markenflaeche ersetzt.

   Am 29.08.2026 kurzzeitig auf hell umgestellt und noch am selben Tag
   zurueckgenommen: Die gruene Hauptnavigation bleibt. Sie ist das
   Erkennungszeichen des Shops, und ohne sie fehlt der Seite der Halt.
   Der Flaechendeckel fuer Gruen greift stattdessen bei den kleineren
   Flaechen — Breadcrumb, Konfigurator-Kopf, Schrittnummern. */
nav, nav#catmenu {
  background:var(--brand) !important;
  background-image: none;
  border-top-color:var(--brand) !important;
  border-bottom-color:var(--brand) !important;
}
/* Trennlinien innerhalb der Navigation: dunkler statt in Signalfarbe */
nav#catmenu a,
nav#catmenu .dropdown-toggle { border-bottom-color:var(--brand-dark) !important; }

/* Aufklappmenue. Stand auf #191919 (fast schwarz) mit weisser Schrift —
   lesbar, aber gegen die Regel "hell ueberall". Dunkle Flaechen sind laut
   BRAND.md nur fuer Footer und Bildunterlagen vorgesehen. */
#catmenu .dropdown-menu,
#catmenu ul.dropdown-menu {
  background-color:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}
#catmenu .dropdown-menu a,
#catmenu .dropdown-menu li > a {
  color:var(--fg) !important;
  background-color: transparent !important;
}
#catmenu .dropdown-menu a:hover,
#catmenu .dropdown-menu li > a:hover,
#catmenu .dropdown-menu li:hover > a {
  background-color:var(--surf) !important;
  color:var(--acc) !important;
}

/* Geoeffneter und aktiver Hauptpunkt: eine Stufe dunkler als die
   Navigationsflaeche, damit er sich abhebt, ohne Signalfarbe zu benutzen. */
#catmenu li.open > a,
#catmenu li.active > a,
#catmenu li.dropdown:hover > a,
#catmenu li.open,
#catmenu li.active {
  background-color:var(--brand-dark) !important;
  color:var(--acc-ink) !important;
}

/* --- 4b. Markenflaechen -------------------------------------------------
   ACHTUNG: Hier standen urspruenglich auch .shipping .panel-heading und
   .payment .panel-heading — die Koepfe der Versandart- und Zahlungsauswahl.
   Das war falsch und ist am 30.08.2026 herausgenommen worden.

   Sie sind Auswahlkacheln, genau der Fall, den der MERKSATZ direkt unter
   diesem Block beschreibt. Der Kopf traegt ein <label> mit dem Namen der
   Zahlart, und dessen Textfarbe blieb dunkel: #232125 auf #3B6443 = 2,35:1.
   Ohne das Kit stand derselbe Text auf Weiss und war einwandfrei lesbar —
   die Faerbung hat also nichts verbessert, sondern nur kaputt gemacht.
   Und das ausgerechnet im Bezahlvorgang.

   Die Auswahl wird stattdessen weiter unten ueber Kante und Flaeche
   gekennzeichnet, so wie bei allen anderen Auswahlkacheln auch. */
li.active,
.footer1,
#checkoutnavigation li.active,
.checkout .label, .payment .label, .shipping .label,
#swipebox-top-bar,
.socialbox .fa,
.bestsellerbox .count {
  background:var(--brand) !important;
  border-color:var(--brand) !important;
}

/* --- Zahlungs- und Versandartauswahl: hell, mit Markierung -------------
   Der Kopf bleibt hell und lesbar. Die gewaehlte Zahlart erkennt man an
   der Akzentkante links und der leicht getoenten Flaeche — nicht daran,
   dass der Text darin verschwindet. */
.shipping .panel-heading, .payment .panel-heading {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--line-2) !important;
}
.shipping .panel-heading label, .payment .panel-heading label,
.shipping .panel-heading .panel-title, .payment .panel-heading .panel-title,
.shipping .panel-heading span, .payment .panel-heading span {
  color: var(--fg) !important;
}
/* Die gewaehlte Zahlart */
.shipping .panel.active .panel-heading, .payment .panel.active .panel-heading,
.shipping .panel-heading:has(input:checked),
.payment .panel-heading:has(input:checked) {
  background: var(--surf) !important;
  border-left-color: var(--acc) !important;
}

/* MERKSATZ — Auswahlkacheln NIE einfaerben.
   Staffelpreis- und Optionskacheln enthalten kleine graue Beschriftungen.
   Auf einer dunkelgruenen Flaeche ergibt das 1,11:1 und ist unlesbar.
   Diese Elemente bleiben hell und bekommen nur eine Akzentkante.
   Betroffen: .fa-graduated__card, .f26-tier-tile, .fst-card, .qr-size,
   .ra-qty-pick, .sf-qty-pick, .tp-qty-pick, .heck-wahl__opt */
.fa-graduated__card--active, .fa-graduated__card.is-active {
  background:var(--surf) !important;
  border-color:var(--acc) !important;
}
.fa-graduated__label, .fa-graduated__badge + span,
.fa-graduated__qty, .fa-graduated__qty-label,
.fa-graduated__card span, .fa-graduated__card div { color:var(--fg) !important; }
.fa-graduated__card { background:var(--bg) !important; border-color:var(--line-2) !important; }

/* Verlaeufe in Badges, CTA-Bannern und Hinweis-Chips flach ziehen */
span[class*="badge"], a[class*="cta"], .notes, .hinweis-chip,
[class*="__badge"], [class*="-badge"] { background-image: none !important; }

/* Fettungen im Fliesstext: standen teils auf Flat-UI-Rot #E74C3C
   Die Ausnahmen sind noetig: div strong trifft sonst auch die Beschriftung
   INNERHALB von Schaltflaechen. Genau so stand "Kasse »" mit --fg auf einem
   grauen Knopf (#545454) — 2,11:1, obwohl der Knopf selbst weissen Text
   vorsieht. Im Fliesstext soll die Fettung die Textfarbe tragen, auf einer
   Schaltflaeche die Knopffarbe.
   Merke: Elementregeln auf strong/em/span treffen auch Bedienelemente. */
p strong, li strong, td strong,
div:not(.btn):not([class*="btn"]) > strong,
.product-description strong, .description strong { color:var(--fg) !important; }
.btn strong, a.btn strong, button strong, [class*="btn"] strong,
.sc-checkout-btn strong { color: inherit !important; }
strong.warnung, .warnung strong, .error strong { color:var(--neg) !important; }

#swipebox-top-bar { border-top-color:var(--brand) !important; border-bottom-color:var(--brand) !important; }

/* --- 4c. Markenkanten und Linien ---------------------------------------- */
.boxheader, .categoryheader { border-left-color:var(--brand) !important; }

/* .boxheader traegt in content-styles.css var(--kb-green) — das ist gemappt
   und damit in Ordnung. klebebuchstaben.css setzt daneben aber den FESTEN
   Wert #7EA000, und der schlaegt jede Variable. Auf dem alten Fremdgruen
   stand der weisse Untertitel mit 3,04:1.
   Gefunden erst im Komplettdurchlauf ueber alle 750 Seiten — die betroffenen
   Produkte lagen in keiner Stichprobe. */
div.boxheader, .boxheader {
  background-color: var(--brand) !important;
  background-image: none !important;
}
.boxheader h1, .boxheader h2, .boxheader h3,
.boxheader .header-title, .boxheader .subheader-title,
.boxheader p, .boxheader span { color: var(--acc-ink) !important; }
.boxstart,
.nav-tabs,
.box2,
.sidebar .bild,
.subcontent,
.highlightbox2,
a.view_box.active, a.view_list.active {
  border-top-color:var(--brand) !important;
  border-bottom-color:var(--brand) !important;
}
.sitemap { column-rule-color:var(--brand) !important; }
.catnavhead .nav > li { border-right-color:var(--brand) !important; }
#box_cart { box-shadow: 0 3px 0 var(--brand); }
.fa-graduated__card:hover { border-color:var(--brand) !important; }

/* --- 4d. Handlung: alles Klickbare in Orange ---------------------------- */
.cart-count,
span.btn.cart-icon,
#box_search button.btn,
#box_login .btn,
.btn.checkout, .btn.incart, .btn.buynow,
.btn.confirmorder {
  background-color:var(--acc) !important;
  border-color:var(--acc) !important;
  color:var(--acc-ink) !important;
}

/* Verlaeufe sind im Kit verboten — die Warenkorb-Buttons bekommen eine
   flache Flaeche statt linear-gradient. */
.fa-addtobasket__btn .fa-cart-btn,
.fa-addtobasket__btn .btn.incart,
.fa-addtobasket__btn .btn.buynow,
.fa-addtobasket__btn input[type="submit"] {
  background:var(--acc) !important;
  border-color:var(--acc) !important;
  color:var(--acc-ink) !important;
}
.fa-addtobasket__btn .fa-cart-btn:hover,
.fa-addtobasket__btn .btn:hover,
.fa-addtobasket__btn input[type="submit"]:hover {
  background:var(--acc-deep) !important;
  border-color:var(--acc-deep) !important;
}

/* --- 4e. Hover und aktiver Zustand -------------------------------------- */
.mob-header__icons a:hover,
.mob-header__burger:hover,
.mininav a:hover,
.mininav a .fa,
.box2 a:hover,
.pagination_list ul li a:hover,
.pagination_list ul li.current,
a.view_box.active, a.view_list.active,
.orange {
  color:var(--acc) !important;
}
.pagination_list ul li a:hover,
.pagination_list ul li.current { border-top-color:var(--acc) !important; }

.owl-prev, .owl-next { background: var(--brand) !important; }
.sitemap ul > li.sitemap_header a:hover { background: var(--brand) !important; }
.sitemap a:hover { color: var(--acc) !important; }

/* --- 4e2. Meldungsboxen --------------------------------------------------
   Bootstrap faerbt .alert gelb (#FCF8E3 auf #FAEBCC mit #8A6D3B) — Gelb ist
   im Kit verboten. Die Auffaelligkeit kommt hier ueber eine Akzentkante,
   nicht ueber eine Fremdfarbe. Die Bedeutung steht im Text, nicht in der
   Farbe. */
.alert, .messagestackwarning, .messagestacksuccess, .messagestackerror {
  background-color:var(--surf) !important;
  border: 1px solid var(--line);
  border-left: 4px solid var(--acc-soft);
  border-radius: var(--r);
  color:var(--fg) !important;
  text-shadow: none;
}
.alert-error, .alert-danger, .messagestackerror { border-left-color:var(--neg) !important; }
/* KEIN Statusgruen — das waere ein Bruch der eigenen Regel aus BRAND.md §2.
   Erfolg wird ueber Symbol und Text getragen, nicht ueber die Markenfarbe. */
.alert-success, .messagestacksuccess { border-left-color:var(--line-2) !important; }
.alert-info { border-left-color:var(--mut) !important; }
.alert .close { color:var(--fg) !important; opacity: .6; }

/* --- 4f. Preise --------------------------------------------------------- */
/* Der Preis ist die kaufentscheidende Zahl, keine Markenauszeichnung.
   Gruen dort waere nur das alte Shop-Gruen in neuem Ton. Bedeutung kommt
   ueber Ziffernsatz und Groesse — genau die Logik, die das Kit fuer Status
   schon anwendet. */
.price,
.hl_price .special_price,
#productinfowrap .productprice {
  color:var(--fg) !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
}

/* Firmenname. Steht im dunklen Footer (#2B292E) — Markengruen erreicht dort
   nur 2,12:1 und ist praktisch unlesbar. Limette kommt auf 7,81:1 und haelt
   den Markenbezug. Auf hellem Grund bleibt es beim Markengruen. */
.shopname { color:var(--brand) !important; }
footer .shopname, .footer1 .shopname, .footer2 .shopname { color:var(--lime) !important; }


/* ===========================================================================
   5. BESTEHENDE TOKEN-SYSTEME ANGLEICHEN
   ---------------------------------------------------------------------------
   Das Theme hat fuenf gewachsene Token-Praefixe mit ueber 40 Farbwerten:

     --kb-*   Klebebuchstaben-Konfigurator (content-styles.css)
     --f26-*  fadesing2026.css (nur Produktseiten geladen)
     --bp-*   banner-landingpage.css — erbt per Fallback von --f26-*
     --sc-*   shopping-cart.css, checkout.css
     --fa-*   extra.css (ueberall im Bundle)

   Allein an Gruen fanden sich sieben Toene: #759f26, #7EA000, #7ba000,
   #7ba86d, #688400, #5d8319, #5f7f00. content-styles.css listet in Zeile 9
   selbst sechs davon auf.

   Statt die fuenf Quelldateien anzufassen, werden die Namen hier neu
   definiert. Diese Datei wird zuletzt geladen, ihre :root-Werte gewinnen.
   --bp-* braucht keine Zeile: es erbt ueber var(--f26-…, fallback).

   NICHT angefasst — das sind eigene Entscheidungen:
     --kb-blue  #0056b3 und --kb-blue-hover  #003d80   (Blau ist verboten)
     --lp-gold  #d4a017 und --lp-gold-light #fdf6e3    (Gold/Gelb ist verboten)
     --kb-success #1c7700  (funktionales Statusgruen im Konfigurator; das Kit
                            sieht Status ueber Symbol plus Text vor)
   ========================================================================== */

:root {
  /* REPARATUR eines toten Tokens: klebebuchstabena.css:1364 setzt shopweit
     ':focus { outline: 2px solid var(--kb-primary) }' — aber --kb-primary
     ist NIRGENDS definiert. Eine undefinierte Custom Property macht die
     Deklaration ungueltig, die Umrandung erscheint nie. Der einzige globale
     Fokusring des Shops war damit tot. */
  --kb-primary:     var(--acc);

  /* --- Klebebuchstaben-Konfigurator ---
     --kb-blue war #0056B3 und wird als CTA-Button benutzt (a.cta-button auf
     der LineArt-Seite). Blau ist in der Farbregel ausgeschlossen, und ein
     CTA ist eine Handlung — also Handlungs-Orange. */
  --kb-blue:        var(--acc);
  --kb-blue-hover:  var(--acc-deep);
  --kb-green:       var(--brand);
  --kb-green-hover: var(--brand-dark);
  --kb-green-bg:    var(--surf);
  --kb-nav-start:   var(--brand);
  --kb-nav-end:     var(--brand);
  --kb-text:        var(--fg);
  --kb-text-muted:  var(--mut);
  --kb-border:      var(--line);
  --kb-error:       var(--neg);

  /* --- fadesing2026 (Produktseiten) --- */
  --f26-green:      var(--brand);
  --f26-green-dark: var(--brand-dark);
  --f26-green-soft: var(--lime-soft);
  --f26-text:       var(--fg);
  --f26-muted:      var(--mut);
  --f26-border:     var(--line);
  --f26-bg:         var(--surf);
  --f26-card:       var(--bg);
  --f26-shadow:     var(--sh-1);
  --f26-ui:         var(--body);
  --f26-mono:       var(--mono);

  /* --- Warenkorb und Kasse ---
     ACHTUNG: Diese drei Zuweisungen hier im :root-Block waren wirkungslos.
     shopping-cart.css und checkout.css definieren ihren Variablensatz auf
     .sc-cart bzw. .co-checkout — eine Klasse schlaegt :root. Die wirksame
     Fassung steht deshalb weiter unten bei den Traegerselektoren.
     Merke: Fremde Variablensaetze dort ueberschreiben, wo sie definiert
     sind, nicht eine Ebene hoeher. */
  --sc-shadow:      var(--sh-1);

  /* --- extra.css. Wichtigste Korrektur: --fa-shop-green war #79b61c und
         wird 12x als TEXTfarbe benutzt — Kontrast auf Weiss nur 2,46:1.
         var(--brand) erreicht 6,80:1. --fa-accent war #0b5cff, ein Blau;
         ungenutzt, aber ersetzt, damit es niemand aus Versehen benutzt. --- */
  --fa-text:        var(--fg);
  --fa-muted:       var(--mut);
  --fa-line:        var(--line);
  --fa-shadow:      var(--sh-2);
  --fa-shadow-soft: var(--sh-1);
  --fa-radius:      var(--r-card);
  --fa-accent:      var(--acc);
  --fa-accent-2:    var(--acc-deep);
  --fa-shop-green:  var(--brand);
}

/* --- Hartkodierte Reste, die ueber kein Token laufen ------------------- */

/* categorie-klebebuchstaben.css: #759f26 fest verdrahtet */
.kat-card, .kat-card h3,
.faq-icon, #faq h2, .faq-section h2 {
  color:var(--brand) !important;
  border-color:var(--brand) !important;
}
#faq.faq-section, .faq-section { background-color:var(--surf) !important; }

/* stylesheet: Breadcrumb-Leiste #688400 */
.breads { background-color:var(--brand) !important; }

/* extra.css: #ff6600 — altes Signal-Orange auf USP-Leiste und FAQ */
.fa-usp-banner__item i,
.fa-faq__subtitle a,
.fa-faq__item summary::after,
.fa-faq__item summary i { color:var(--acc) !important; }

/* Navigations-Dropdowns: Trennlinien in #7EA000 */
#catmenu li.dropdown, #catmenu li.men {
  border-left-color:var(--brand-dark) !important;
  border-right-color:var(--brand-dark) !important;
}

/* --- Produkt-Konfiguratoren ---------------------------------------------
   #6b8e23 ist die durchgehende Akzentfarbe aller sieben Konfiguratoren,
   hartkodiert in fa-norm.css (26x), heckscheibe.css (14x), tierportrait.css
   (13x), rundeaufkleber.css (11x), sichtschutzfolie.css (10x),
   product-schild.css (4x) und rechteckaufkleber.css (2x). Kein Token.
   Die Namensmuster sind konsistent, deshalb lassen sie sich buendeln:
     fn-  = fa-norm (generisch)   heck- = Heckscheibe   schild- = Schild
     ra-  = runde Aufkleber       sf-   = Sichtschutz   tp-     = Tierportrait
     rek- = Rechteckaufkleber
   ---------------------------------------------------------------------- */

/* Kopfzeilen, Nummernkreise und Abzeichen: Markenflaeche */
.fn-config__header, .ra-config__header, .sf-config__header, .tp-config__header,
.schild-config .categoryheader, .heck-config .categoryheader,
.heck-step__num, .ra-guide__num, .sf-guide__num, .tp-guide__num,
.heck-preview__badge, .schild-preview__badge {
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:var(--acc-ink) !important;
}

/* Rahmen der Konfigurationsboxen */
.fn-config, .heck-config, .schild-config, .ra-config, .sf-config, .tp-config,
.rek-size-range, .rek-size-row input, .ra-diameter-range,
.ra-diameter-input-wrap input#ra-durchmesser {
  border-color:var(--brand) !important;
}

/* Fokus in Eingabefeldern — Tastaturbedienung muss sichtbar bleiben */
.fn-config select:focus, .fn-config input:focus, .fn-config textarea:focus,
.heck-step select:focus, .heck-step input:focus, .heck-step textarea:focus,
.schild-config input:focus, .ra-config select:focus, .ra-config input:focus,
.sf-config select:focus, .sf-config input:focus,
.tp-config select:focus, .tp-config input:focus,
.sf-options-wrap .textConfigBoxContent input:focus,
.tp-material-box select:focus, .tp-veredlung-box select:focus,
.tp-remark-box input[type="text"]:focus {
  border-color:var(--acc) !important;
  outline-color:var(--acc) !important;
}

/* Aktive Auswahl und Hover in Mengen-/Optionslisten */
.heck-wahl__opt--aktiv, .heck-wahl__opt--aktiv .heck-wahl__radio,
.ra-qty-pick--active, .sf-qty-pick--active, .tp-qty-pick--active,
.ra-qty-pick:hover, .sf-qty-pick:hover, .tp-qty-pick:hover {
  border-color:var(--acc) !important;
  background-color:var(--surf) !important;
}
.ra-qty-pick__price, .sf-qty-pick__price, .tp-qty-pick__price,
.heck-wahl__go, .fn-staffel-toggle, .fn-manufacturer a,
.heck-dropzone i, .sf-size-hint, .fa-shares a:hover {
  color:var(--acc) !important;
}

/* Textfarben der Konfiguratoren — die vollstaendige Liste.
   Die Regeln oben deckten die Stellen ab, die in den Stichproben auffielen.
   Der Komplettdurchlauf ueber alle 750 Seiten hat gezeigt, dass das zu wenig
   war: In den sieben Dateien stehen zusammen 50 hartkodierte Textfarben, und
   die Haelfte davon traegt nicht.
     #6B8E23  3,81:1     #888888  3,54:1     #999999  2,85:1   -> zu schwach
     #666666  5,74:1     #6B7280  4,83:1     #5A7A1E  4,96:1   -> lesbar,
                                                     aber ausserhalb der Palette
   Deshalb hier nach Rolle gebuendelt statt Stelle fuer Stelle.
   Zielwerte gemessen auf Weiss und auf --surf, beide ueber 4,5:1.          */

/* fuehrend: Links, Preise, Umschalter, Aufzaehlungspunkte */
.fn-short-desc a, .fn-short-desc li::marker, .fn-short-desc a:hover,
.fn-config .infoDatenCheck, .heck-upload-info,
.tp-staffel-toggle, .ra-staffel-toggle, .sf-staffel-toggle,
.ra-diameter-range, .rek-size-range,
.tp-manufacturer a, .ra-manufacturer a, .sf-manufacturer a {
  color:var(--acc) !important;
}

/* begleitend: Meta, Hinweise, Zaehler, Lupe, Steuerhinweis */
.fn-meta, .tp-meta, .ra-meta, .sf-meta, .schild-meta, .heck-meta,
.fn-preview__zoom, .tp-preview__zoom, .ra-preview__zoom, .sf-preview__zoom,
.fn-info .taxandshippinginfo,
.fn-config .textConfigBox .textConfigBoxTitle,
.fn-config .textConfigBox .textConfigBoxHelpWr a,
.heck-optional, .heck-char-count, .heck-dropzone,
.fn-opt p, .fn-opt .dropzone, .fa-shares a,
.ra-diameter-input-wrap .flaeche-unit {
  color:var(--mut) !important;
}

/* Die Kurzbeschreibungen (.tp-/.ra-/.sf-/.heck-short-desc) standen hier
   zuerst auf --fg. Das war doppelt gemoppelt: Weiter unten faerbt
   '[class*="-short-desc"]' sie ohnehin auf --mut, und diese Regel steht
   spaeter — sie gewinnt. Statt einer toten Regel also der Verweis.
   --mut hat 6,10:1 auf Weiss und ist Palettenfarbe; das genuegt.
   Ausgangswert war #6B7280, ein Tailwind-Grau mit 4,83:1.                 */

/* --- Reste von #7EA000 ---------------------------------------------------
   Das alte Fremdgruen steht an 48 Stellen in bootstrap.css, klebebuchstaben.css,
   qrcode.css, senkrecht.css und banner-landingpage.css. Der grosse Teil war
   ueber die Knopf- und Menue-Regeln oben schon erfasst; diese acht waren es
   nicht — sie kamen in keiner Stichprobe vor, weil sie nur im Hover, im Fokus
   oder auf der Banner-Landingpage sichtbar werden.
   #catmenu bleibt hier bewusst aussen vor: Die Navigation traegt ihr Gruen,
   das ist so gewollt und wurde einmal versehentlich zurueckgenommen.       */
.bp-page .bp-section--brand,
.navbar .btn-navbar,
.nav-pills > .active > a,
.nav-pills > li.active > a {
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
  color:var(--acc-ink) !important;
}
.bp-page .bp-section--brand h1, .bp-page .bp-section--brand h2,
.bp-page .bp-section--brand h3, .bp-page .bp-section--brand p,
.bp-page .bp-section--brand li, .bp-page .bp-section--brand span {
  color:var(--acc-ink) !important;
}

/* Rahmen in Hover und Fokus — Tastaturbedienung muss sichtbar bleiben */
a.thumbnail:hover, a.thumbnail:focus,
.dropdown-submenu:hover > a:after,
.qr-input:focus, .sk-text-input:focus,
.qr-size--active, .qrp-preview__qr--filled {
  border-color:var(--acc) !important;
}
.dropdown-submenu:hover > a:after { border-left-color:var(--acc) !important; }

/* --- Content-Bausteine: die doppelt definierten -------------------------
   content-styles.css und klebebuchstaben.css definieren 117 Selektoren
   gemeinsam. Bei 50 davon nutzt content-styles.css eine Variable und
   klebebuchstaben.css setzt daneben einen festen Farbwert. Beide haben
   dieselbe Spezifitaet — und klebebuchstaben.css wird SPAETER geladen
   (general_bottom.css.php: Zeile 31 gegen Zeile 54). Der feste Wert
   gewinnt also immer, und das Mapping von --kb-green laeuft ins Leere.

   Es ist derselbe Fehler wie bei .boxheader, nur 50 Mal. Er faellt nicht
   auf, weil beide Dateien optisch fast gleich aussehen — die Unterschiede
   sind vier verschiedene Gruens (#7EA000, #759F26, #7BA000, #4CAF50),
   drei Blaus (#0066CC, #0056B3, #008BB5) und ein Dutzend Graustufen.

   23 dieser Selektoren waren schon erfasst. Die restlichen 26 hier.
   Nach Rolle gebuendelt, nicht Datei fuer Datei — sonst faellt beim
   naechsten Stylesheet dieselbe Luecke wieder auf.                        */

/* fuehrend: Aufzaehlungszeichen, Kaufhinweis, Handlungsknopf im Hover */
.content-about ul li:before, .custom-box ul li:before,
.klebebox-list li .icon, .jetztkaufen {
  color:var(--acc) !important;
}
.cta-button:hover, .cta-button:focus {
  background-color:var(--acc-deep) !important;
  border-color:var(--acc-deep) !important;
  color:var(--acc-ink) !important;
}

/* Inhalt: Ueberschriften und Fliesstext der Content-Bausteine */
.anwendungsbereich h2, .anwendungsbereich h3, .boxcontent,
.category-content p, .faq-answer p, .faq-question, .faq-section h3,
.custom-icon-list li, .klebebox-list li {
  color:var(--fg) !important;
}
.categoryheader h1 { color:var(--acc-ink) !important; }

/* begleitend: Untertitel, Kleingedrucktes, Schlussnotiz */
.anwendungsbereich p, .content-about small, .custom-box ul,
.custom-subheader, .final-note {
  color:var(--mut) !important;
}

/* Flaechen und Linien */
.content section, .faq-item:hover .faq-question {
  background-color:var(--surf) !important;
}
.content-about { background-color:var(--bg) !important; }
.content-about hr { border-color:var(--line) !important; }
.faq-item {
  background-color:var(--bg) !important;
  border-color:var(--line) !important;
}

/* --- Modul-CSS ausserhalb des Templates ---------------------------------
   Nicht jedes Stylesheet liegt unter templates/. Der Bestellhinweis fuer
   Bootskennzeichen kommt aus fa_modules/text_config/css/main.css — ein Pfad,
   den keine der bisherigen Pruefungen angesehen hat, weil sie alle im
   Template-Ordner blieben. Die Datei bringt eine vierte Gruenwelt mit:
   #4A6B1E, #8BBF2B, #759F26, #D6E6B8.
   Der Ausschlag: '.fa-boots-helper__tag' — weisser Text auf #8BBF2B, 2,19:1.

   Weitere Fundorte derselben Art: fa_modules/briefkasten_designer/assets/
   (#7EA000, #678400) und 40 Kendo-UI-Themes, von denen hoechstens eines
   geladen wird.
   MERKE: Beim naechsten Durchgang nicht nur templates/ durchsuchen.       */
.fa-boots-helper {
  background-color:var(--surf) !important;
  border-left-color:var(--brand) !important;
}
.fa-boots-helper--amt { border-left-color:var(--brand) !important; }
.fa-boots-helper__badge, .fa-boots-helper__tag,
.textConfigBoxNumber,
.checkbox_container input[type="checkbox"]:checked + label:before {
  background-color:var(--brand) !important;
  color:var(--acc-ink) !important;
}
.fa-boots-helper__head, .fa-boots-helper__contact,
.fa-boots-helper__lead strong {
  color:var(--fg) !important;
}
.fa-boots-helper__qty, .fa-boots-helper__usp li::before,
.fa-boots-helper__contact .contact-link {
  color:var(--acc) !important;
}
.fa-boots-helper__sets, .fa-boots-helper__sets li,
.fa-boots-helper__lead, .fa-boots-helper__contact {
  border-color:var(--line) !important;
}

/* Texthervorhebung im Anwendungs-Ratgeber stand auf #FFFACD, einem hellen
   Gelb. Gelb gehoert nicht zur Palette. --lime-soft ist die hellste Farbe
   aus dem Logo und traegt mit 11,53:1 gegen --fg.                         */
.highlight {
  background-color:var(--lime-soft) !important;
  color:var(--fg) !important;
}

/* Karussell-Bedienelemente (owl.carousel) standen auf #E64417, einem
   Orangerot, das keine der beiden Marken fuehrt. Die Punkte tragen von Haus
   aus opacity .5 — auf --acc bleibt das erkennbar, ohne aufzudringen.     */
.owl-theme .owl-controls .owl-buttons div,
.owl-theme .owl-controls .owl-page span {
  background-color:var(--acc) !important;
}
.owl-theme .owl-controls .owl-buttons div { color:var(--acc-ink) !important; }

/* Akkordeon und Reiter. bootstrap.css faerbt sie ueber
   '.nav-tabs > .active > a' (Spezifitaet 0,2,1) — eine spaetere Position
   allein reicht nicht, der Selektor muss mitziehen. */
/* Akkordeon-Titel sind Ueberschriften, keine Links — deshalb Textfarbe.
   Auf getoentem Grund kam --acc dort nur auf 4,28:1. */
.accordion-heading .accordion-toggle,
.accordion-group .accordion-toggle,
a.accordion-toggle {
  color:var(--fg) !important;
  border-top-color:var(--brand) !important;
}
/* Nur der AKTIVE Reiter traegt die Akzentfarbe */
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > li.active > a {
  color:var(--acc) !important;
  border-top-color:var(--brand) !important;
}

/* --- Hartnaeckige Reste ------------------------------------------------
   Diese Selektoren brauchen 'body' oder Elementnamen davor, weil die
   Originale praefixiert sind und einfache Klassen nicht reichen. */
/* Hinweis fuer spaetere Aenderungen an der Navigation: Diese Regel hat
   Spezifitaet 0,1,2 ('body nav#catmenu') und schlaegt damit jedes spaetere
   'nav#catmenu' mit 0,1,1 — auch wenn das weiter unten steht. Wer die
   Navigation umfaerben will, muss HIER ansetzen, nicht dagegenhalten. */
body nav, body nav#catmenu {
  background:var(--brand) !important;
  background-image: none;
  border-top-color:var(--brand) !important;
  border-bottom-color:var(--brand) !important;
}

/* Pflichtfeld-Hinweise im Registrierungsformular standen auf #F54F29 —
   ein Rotorange, das weder Fehler- noch Markenfarbe ist. */
.inputRequirement, .required, span.inputRequirement { color:var(--neg) !important; }

/* "Auf den Merkzettel" ist als input gestylt und stand auf #777777 (4,48:1) —
   knapp unter AA, der letzte Fall dieser Art im Shop. */
.wishlist_submit_link, input.wishlist_submit_link { color:var(--fg) !important; }
body .textConfigBoxTitle,
body div.textConfigBoxTitle { color:var(--mut) !important; }
body label.fn-opt__radio,
body .fn-opt__radio {
  background-color:var(--surf) !important;
  border-color:var(--line-2) !important;
}
body span.f26-tier-note { color:var(--mut) !important; }
body .textConfigBox strong, body .fa-page strong { color:var(--fg) !important; }

/* --- Wiederkehrende Muster in ALLEN Konfiguratoren ----------------------
   Die sieben Konfiguratoren benutzen dieselben Namensendungen. Statt jede
   Datei einzeln zu jagen, hier ueber die Endung gefasst — mit 'body' davor,
   damit die Spezifitaet gegen die praefixierten Originalselektoren reicht.

   '__hint', '-hint', '__note', '__label' sind per Definition Hinweistexte:
   sie sollen zurueckhaltend sein, aber lesbar (4,5:1). Sie standen auf
   #888888, #999999 und #6B8E23 — alle darunter. */
body [class*="__hint"],
body [class*="-hint"],
body [class*="__note"],
body [class*="__label"],
body [class*="__sub"] { color:var(--mut) !important; }

/* "Farbe waehlen" / "Schriftart waehlen" sind Aktions-Buttons, keine
   Farbfelder — sie oeffnen einen Auswahldialog. Deshalb Handlungsfarbe.
   (Nachgeprueft: 160x40 px, Textinhalt, kein Inline-Style.) */
/* !!! NUR DER UNBERUEHRTE AUSGANGSZUSTAND !!!
   Sobald der Kunde eine Folie waehlt, schreibt das JS die Oracal-Farbe
   inline auf genau diesen Button (kbeditor.js:779 und :924, farbwahl.js:27,
   vorschauserial.js:16, v_qrcode.js:117) und berechnet dazu per
   kbGetContrastTextColorFromRgb() die passende Textfarbe.

   Author-!important schlaegt einen Inline-Style OHNE !important. Ohne die
   :not()-Bedingung bliebe der Button orange, egal welche Folie gewaehlt
   wurde — der Kunde saehe seine Farbe nicht. Betroffen waeren
   Klebebuchstaben, Klebezahlen, fa-norm und der QR-Konfigurator.

   Merke: "kein Inline-Style" im Ausgangszustand heisst NICHT "nie ein
   Inline-Style". Dynamik immer mitdenken. */
body button.ColorButton:not([style*="background"]),
body button.TextButton:not([style*="background"]),
.fn-opt .ColorButton:not([style*="background"]),
.fn-config .ColorButton:not([style*="background"]) {
  background-color:var(--acc) !important;
  border-color:var(--acc) !important;
  color:var(--acc-ink) !important;
}
body button.ColorButton:hover, body button.TextButton:hover {
  background-color:var(--acc-deep) !important;
  border-color:var(--acc-deep) !important;
}

/* Bereichsregler und Auswahlfelder der Konfiguratoren */
body [class*="-diameter-range"],
body [class*="-size-range"],
body [class*="__radio"] { color:var(--mut) !important; border-color:var(--line-2) !important; }
body label[class*="__radio"] { background-color:var(--surf) !important; }

/* Fliesstext in den Konfigurator-Hilfen: #4b5563 war blaustichig */
.fn-short-desc, .fn-opt p strong,
.ra-guide li, .sf-guide li, .tp-guide li { color:var(--mut) !important; }

/* Hinweistexte in den Konfiguratoren standen auf #888888 (3,54:1) und
   #999999 (2,61:1) — beide unter der AA-Grenze. var(--mut) erreicht 6,10:1.
   Die beiden letzten Selektoren muessen die Spezifitaet aus fa-norm.css
   mitziehen (0,3,0 bzw. 0,2,0), sonst gewinnt das Original. */
.heck-preview__hint, .heck-step__hint, .heck-optional,
.fn-hint, .ra-hint, .sf-hint, .tp-hint,
.heck-step__sub, .fn-opt__hint,
.fn-config .textConfigBox .textConfigBoxTitle,
.fn-info .taxandshippinginfo,
.taxandshippinginfo { color:var(--mut) !important; }

/* "Vorschau aktualisieren" ist eine Handlung — im aktiven Zustand also
   Orange, nicht Grau. Den :disabled-Zustand NICHT anfassen: er ist mit
   #AAAAAA absichtlich stumpf, und WCAG nimmt inaktive Bedienelemente von
   der Kontrastanforderung aus (SC 1.4.3, "incidental"). */
.heck-btn-preview:not(:disabled), .fn-btn--sekundaer:not(:disabled) {
  background-color:var(--acc) !important;
  border-color:var(--acc) !important;
  color:var(--acc-ink) !important;
}

/* Helle Flaechen: #93b888 (Suchfeld) und #f0f5e6 */
/* Suchfeld und Newsletter-Feld standen auf gruenem Grund (#93B888) mit
   WEISSER Schrift. Beim Aufhellen des Hintergrunds muss die Textfarbe
   zwingend mit — sonst steht Weiss auf Hell und das Feld ist unlesbar. */
input.search, input.newsmail, input#inputString,
.search_field, input[name="keywords"] {
  background-color:var(--surf) !important;
  color:var(--fg) !important;
  border-color:var(--line-2) !important;
}
input.search::placeholder, input.newsmail::placeholder,
input#inputString::placeholder, input[name="keywords"]::placeholder {
  color:var(--mut) !important;
  opacity: 1;
}

.heck-dropzone:hover, .heck-dropzone.dz-drag-hover,
.heck-manuell-fields { background-color:var(--surf) !important; }


/* --- Klebebuchstaben-Konfigurator ---------------------------------------
   Der umsatzstaerkste Bereich des Shops (3,79 Mio verkaufte Einheiten) und
   der mit dem eigenwilligsten Farbschema. Betroffen sind vier Dateien:
   klebebuchstaben.css (43 KB), klebebuchstabena.css, fadesing2026.css und
   application-guide.css.

   Gefunden wurden dort unter anderem Flat-UI-Toene, die mit der Palette
   nichts zu tun haben: Tuerkis #16A085, Blau #3498DB und #0066CC, dazu
   blaustichige Neutrals (#182230, #1A2A3A, #9FB2C4, #F8FBFF) und
   13 Farbverlaeufe.
   ---------------------------------------------------------------------- */

/* Der wichtigste Button des Shops stand auf einem gruenen Verlauf
   (#8AB400 → #6F9600). Gruen ist Markenfarbe, keine Handlung — und
   Verlaeufe sind im Kit verboten. Jetzt flaches Handlungs-Orange. */
.kbm-cart-btn,
.kbm-mobile-page .kbm-cart-btn,
.fadesing-kb-config .kbm-cart-btn {
  background:var(--acc) !important;
  background-image: none;
  border-color:var(--acc) !important;
  color:var(--acc-ink) !important;
}
.kbm-cart-btn:hover,
.kbm-mobile-page .kbm-cart-btn:hover,
.fadesing-kb-config .kbm-cart-btn:hover {
  background:var(--acc-deep) !important;
  background-image: none;
}

/* Weitere Verlaeufe in diesem Bereich flach ziehen */
.notes, .fadesing-kb-config {
  background-image: none;
}

/* Blaustichige Flaechen und Rahmen der Konfigurator-Oberflaeche */
.fadesing-kb-config,
.fadesing-kb-config .f26-sticky-intro,
.fadesing-kb-config .f26-segment-item span,
.fadesing-kb-config .f26-size-native,
.fadesing-kb-config .f26-size-grid {
  background-color:var(--surf) !important;
  border-color:var(--line) !important;
  color:var(--fg) !important;
}
.fadesing-kb-config .f26-size-select select.selectfontsize {
  border-color:var(--line-2) !important;
  color:var(--fg) !important;
}
.fadesing-kb-config .f26-size-grid::-webkit-scrollbar-thumb {
  background-color:var(--line-2) !important;
}
.kbm-mobile-page #textConfigBox4 .ColorButton,
.kbm-mobile-page #textConfigBox4 .TextButton {
  border-color:var(--line-2) !important;
}

/* Anwendungs-Ratgeber: Tuerkis #16A085 und Blau #3498DB.
   Beides ist in der Farbregel ausgeschlossen. */
.application-guide h2, .application-guide h4,
.content-about h1, .content-about h2,
.tip-box h3 {
  color:var(--brand) !important;
  border-bottom-color:var(--brand) !important;
}
.guide-section, .guide-step, .tip-box {
  border-left-color:var(--acc-soft) !important;
  background-color:var(--surf) !important;
}
.anwendungsbereich a, .content-about a { color:var(--acc) !important; }

/* Konfigurator-Bausteine, die noch auf altem Shop-Gruen standen */
.textConfigBoxNumber,
.checkbox_container input[type="checkbox"]:checked + label:before,
.custom-header, .header-title {
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
  color:var(--acc-ink) !important;
}
/* .klebebox ist eine Infobox mit hellem Grund und gruenem Rahmen —
   NICHT einfaerben, nur den Rahmen angleichen. */
.klebebox { background-color:var(--surf) !important; border-color:var(--brand) !important; }
.textConfigRightColumn .productprice,
.faq-section h4, .faq-icon,
.category-content p strong { color:var(--brand) !important; }
.faq-icon::before, .faq-icon::after { background-color:var(--brand) !important; }

/* Die f26-Oberflaeche des Konfigurators hat ein eigenes blaugraues Schema
   mit rund zwanzig Einzelwerten: Texte in #17212F, #394B61, #415366,
   #344658, #203043 und Rahmen in #D6DEE7, #CCD7E2, #D7E0EA, #C9D4E0.
   Dazu Flat-UI-Toene #2980B9 und #1ABC9C. Alles blaustichig, alles
   ausserhalb der Palette. Hier gebuendelt nach Rolle. */

/* WICHTIG zur Spezifitaet: Im Original sind alle f26-Regeln mit
   '.fadesing-kb-config' praefixiert (0,2,0), die textConfigBox-Regeln sogar
   mit '.f26-step-card' (0,3,0). Einfache Klassenselektoren (0,1,0) verlieren
   dagegen — auch als letzte Datei. Deshalb hier dieselbe Struktur. */

/* Haupttexte */
.fadesing-kb-config .f26-hero-measure,
.fadesing-kb-config .f26-qty-btn,
.fadesing-kb-config .f26-tier-qty,
.fadesing-kb-config .f26-segment-item,
.fadesing-kb-config .f26-page-title,
.fadesing-kb-config .f26-step-card .contentbox,
.fadesing-kb-config .f26-step-card a.contentbox,
a.contentbox { color:var(--fg) !important; }

/* Reste, die noch auf altem Shop-Gruen bzw. blaustichigen Toenen standen.

   .f26-tier-tile stand hier urspruenglich mit drin und wurde am 30.08.2026
   entfernt: Das ist eine Staffelpreis-Kachel, also genau der Fall, den der
   MERKSATZ weiter oben in dieser Datei ausdruecklich ausnimmt. Sie wurde
   an anderer Stelle wieder hell gesetzt, die Regel war also wirkungslos —
   aber sie haette bei der naechsten Umstellung zugeschlagen.
   Die Kachel bleibt hell und bekommt nur eine Akzentkante. */
div.textConfigBoxNumber { background-color:var(--brand) !important; }
input.placeholder, .fadesing-kb-config input.placeholder { border-color:var(--line) !important; }
img.img-responsive { border-color:var(--line) !important; }

/* Kontraste in der Konfigurator-Oberflaeche */
.fadesing-kb-config .f26-stars, .f26-stars { color:var(--acc) !important; }
.fadesing-kb-config .f26-tier-note,
.fadesing-kb-config .f26-tier-tile .f26-tier-note { color:var(--mut) !important; }
.fadesing-kb-config strong, .textConfigBox strong,
.fadesing-kb-config p strong { color:var(--fg) !important; }

/* Preisblock und Lieferhinweis — standen auf #0F2A12, #5A6A7E, #335400 */
.fadesing-kb-config .f26-price-value { color:var(--fg) !important; }
.fadesing-kb-config .f26-price-tax { color:var(--mut) !important; }
.fadesing-kb-config .f26-delivery-chip {
  color:var(--brand-dark) !important;
  background-color:var(--surf) !important;
}

/* Reste mit hoeherer Spezifitaet nachziehen.
   Nummernkreise der Schritte: Markenflaeche mit weisser Ziffer. */
.fadesing-kb-config div.textConfigBoxNumber,
body div.textConfigBoxNumber { background-color:var(--brand) !important; }

/* Staffelpreis-Kacheln sind AUSWAHLELEMENTE, keine Markenflaeche.
   Sie muessen hell bleiben — dunkelgruen darunter ergab bei der grauen
   Beschriftung 1,11:1, also praktisch unsichtbar. Nur die aktive Kachel
   bekommt eine Akzentkante. */
.fadesing-kb-config button.f26-tier-tile {
  background-color:var(--bg) !important;
  border-color:var(--line-2) !important;
  color:var(--fg) !important;
}
.fadesing-kb-config button.f26-tier-tile.is-active,
.fadesing-kb-config button.f26-tier-tile[aria-pressed="true"] {
  border-color:var(--acc) !important;
  background-color:var(--surf) !important;
}
.fadesing-kb-config .f26-tier-tile .f26-tier-qty { color:var(--fg) !important; }

/* Preisblock und Hinweise im mobilen Konfigurator */
.kbm-price-label { color:var(--mut) !important; }
.kbm-price-value { color:var(--fg) !important; }
.conclusion {
  background-color:var(--surf) !important;
  border-color:var(--acc-soft) !important;
}
.conclusion strong, .fa-page strong.warnung { color:var(--neg) !important; }

/* --- Flaechen-Konfigurator (fst-) und Rechteckaufkleber -----------------
   Zwei weitere Gruentoene: #6AAA1C und #87B100, dazu #F0F8E3 als Flaeche
   und #6B7280 als blaustichiges Textgrau. */
.fst-config__header, .flaeche-head, .fst-step__num {
  background-color:var(--brand) !important;
  border-color:var(--brand) !important;
  color:var(--acc-ink) !important;
}
.fst-card {
  background-color:var(--bg) !important;
  border-color:var(--line-2) !important;
}
.fst-card.is-active, .fst-card[aria-pressed="true"] {
  border-color:var(--acc) !important;
  background-color:var(--surf) !important;
}
.fst-card__qty-label, .fst-card__qty-lab, .ra-short-desc,
.fst-hint, .flaeche-hint { color:var(--mut) !important; }

/* --- QR-Code-Konfigurator (qrp-, qr-) ----------------------------------- */
.qrp-badge, .qrp-guide__num, .qrp-step__num {
  background-color:var(--brand) !important;
  color:var(--acc-ink) !important;
}
.qrp-hero, .qr-size, .qrp-card { border-color:var(--line-2) !important; }
.qrp-hero { border-left-color:var(--brand) !important; }
.qr-size__name { color:var(--fg) !important; }
.qr-size__price { color:var(--brand) !important; }
.qr-size.is-active, .qr-size--aktiv {
  border-color:var(--acc) !important;
  background-color:var(--surf) !important;
}
.qrp-hint, .qr-size__note, .qrp-note, .qr-size__dim { color:var(--mut) !important; }
.qr-generate, button.qr-generate {
  background:var(--acc) !important;
  background-image: none !important;
  border-color:var(--acc) !important;
  color:var(--acc-ink) !important;
}
.qr-color-trigger { color:var(--fg) !important; border-color:var(--line-2) !important; }
.qrp-cart { border-color:var(--line) !important; }
.qrp-preview span, .qrp-placeholder { color:var(--mut) !important; }

/* CTA-Buttons: waren teils blau (#0056B3), teils mit Verlauf */
a.cta-button, .cta-button {
  background:var(--acc) !important;
  background-image: none !important;
  border-color:var(--acc) !important;
  color:var(--acc-ink) !important;
}
.fa-graduated__badge, span.fa-graduated__badge {
  background-color:var(--acc) !important;
  background-image: none !important;
  color:var(--acc-ink) !important;
}
/* Farbwahl-Ausloeser im QR-Konfigurator: heller Grund, dunkler Text.
   ACHTUNG: Das Kind '.qr-color-trigger__swatch' zeigt die gewaehlte
   FOLIENFARBE — es bekommt nur einen Rahmen, niemals eine Flaeche. */
.qr-color-trigger, span.qr-color-trigger,
.qr-color-trigger__text {
  background-color:var(--bg) !important;
  color:var(--fg) !important;
  border-color:var(--line-2) !important;
}
.qr-color-trigger__swatch {
  border: 1px solid var(--line-2);
  border-radius: 4px;
}

/* Kurzbeschreibungen und Formkacheln in allen Konfiguratoren */
[class*="-short-desc"], .prod-intro { color:var(--mut) !important; }
[class*="-shape-card"] {
  background-color:var(--bg) !important;
  border-color:var(--line-2) !important;
}
[class*="-shape-card"].is-active, [class*="-shape-card"][aria-pressed="true"] {
  border-color:var(--acc) !important;
  background-color:var(--surf) !important;
}
/* Restliche Verlaeufe auf Inline-Elementen */
span[class*="qrp-"], span[class*="qr-"], a[class*="btn"] { background-image: none !important; }
.qrcode-page h2, .qrp-page h2, .qrp-hero h2 { font-family:var(--display) !important; }

/* Warnhinweise in Produkttexten standen auf #E74C3C (Flat-UI-Rot) */
.fa-page strong, .product-description strong, .conclusion strong,
strong.achtung { color:var(--fg) !important; }
.warnung, .warning-text, strong.warnung { color:var(--neg) !important; }
.fadesing-kb-config img.img-responsive,
body img.img-responsive { border-color:var(--line) !important; }

/* Sekundaertexte */
.fadesing-kb-config .f26-product-meta,
.fadesing-kb-config .f26-step-subtitle,
.fadesing-kb-config .f26-artnr,
.fadesing-kb-config .f26-rating,
.fadesing-kb-config .f26-tier-note,
.fadesing-kb-config .f26-hero-sub { color:var(--mut) !important; }

/* Rahmen und Trenner */
.fadesing-kb-config .f26-product-card,
.fadesing-kb-config .f26-hero-card,
.fadesing-kb-config .f26-qty-control,
.fadesing-kb-config .f26-tier-tile,
.fadesing-kb-config .f26-sticky-intro,
.fadesing-kb-config .f26-segment,
.fadesing-kb-config .textConfigBox,
.fadesing-kb-config .kbm-sticky-bar,
.fn-config .textConfigBox,
input.placeholder { border-color:var(--line) !important; }

/* Akzentkanten der Konfigurator-Schritte */
.fadesing-kb-config .f26-step-card .textConfigBoxHead,
.fadesing-kb-config .f26-step-card.is-open .textConfigBoxHead,
.fadesing-kb-config .f26-step-card .textConfigBoxNumber,
.fadesing-kb-config .f26-nav-chip.is-active,
.fn-config .textConfigBox .textConfigBoxHead,
.fn-config .textConfigBox .textConfigBoxNumber { border-color:var(--brand) !important; }

.fadesing-kb-config .f26-step-card .textConfigBoxNumber,
.fn-config .textConfigBox .textConfigBoxNumber {
  background-color:var(--brand) !important;
  color:var(--acc-ink) !important;
}

/* Ueberschriften im Ratgeber standen auf #2980B9 */
.application-guide h3, .content-about h3, .tip-box h4 { color:var(--brand) !important; }

/* Helle Flaechen und Fehlerzustaende
   .subheader-title stand hier urspruenglich mit drin — das war falsch. Es ist
   kein Kasten, sondern der Untertitel INNERHALB von .boxheader, und der hat
   einen gruenen Grund (content-styles.css: background-color:var(--kb-green)).
   Ein heller Hintergrund darauf liess den weissen Text auf --surf stehen:
   1,09:1, praktisch unsichtbar. Gleiche Falle wie beim Footer und beim
   Suchfeld — Flaeche aufhellen, Textfarbe vergessen.
   Merke: erst pruefen, WORIN ein Element sitzt, bevor man ihm eine Flaeche gibt. */
.textConfigBox, .custom-container, .custom-box,
.product-description-container,
.checkbox_container label:hover:before { background-color:var(--surf) !important; }
.custom-warning { background-color:var(--surf) !important; border-left: 4px solid var(--acc-soft); }
/* Fehlerhafte Eingabefelder standen in klebebuchstaben.css auf einem
   rosa Grund (#ee7171) mit dunklem Text — 2,46:1. Ein Feld, das gerade
   einen Fehler meldet, ist das letzte, das schlecht lesbar sein darf.
   Statt der Fuellung jetzt eine kraeftige Kante: Die Aussage traegt der
   Rahmen, der Inhalt bleibt lesbar. */
input.error, .heightTooLowError, #text-config-warning,
input.error:focus {
  color:var(--fg) !important;
  background-color:var(--bg) !important;
  background-image:none !important;
  border:2px solid var(--neg) !important;
}

/* ---------------------------------------------------------------------------
   Nachtrag 28.08.2026 — Funde aus der Vollpruefung ueber alle 38 Layouts
   (26 Produktseiten-, 12 Kategorie-Layouts, je ein Vertreter je Template-
   Kombination, auf dem frischen Live-Datenstand).
   --------------------------------------------------------------------------- */

/* categorie-klebebuchstaben.css hat #759f26 vier Mal fest verdrahtet, an der
   Variablen vorbei. Betrifft cPath=66. */
.highlighted-section { border-color:var(--line) !important; background-color:var(--surf) !important; }
.highlighted-section h2 { color:var(--brand) !important; }
.cta-button { background-color:var(--acc) !important; color:var(--acc-ink) !important; }

/* Bewertungssterne standen auf #f5b400 — Gelb ist im Kit ausgeschlossen, und
   auf Weiss ergab es 1,84:1. Orange ist der Konvention nah genug und traegt. */
.bp-trust-stars { color:var(--acc) !important; }

/* Zeichenzaehler auf #999 = 2,73:1. Kein inaktives Bedienelement, sondern
   eine Information — also volle Anforderung. */
.heck-char-count { color:var(--mut) !important; }

/* Bootstraps #999 fuer Kleintext ergibt auf --surf nur 2,62:1 (cPath=60).
   Bewusst auf den Inhaltsbereich begrenzt: im dunklen Footer waere --mut
   zu dunkel, dort gilt weiterhin die eigene Footer-Regel. */
.content small, .fa-page small, .fa-wrap small,
.content .muted, .fa-page .muted { color:var(--mut) !important; }

/* Und derselbe Fall noch einmal, eine Etage tiefer: Ein <small> INNERHALB
   einer Ueberschrift mit eigener dunkler Flaeche wurde ebenfalls gedaempft
   — auf dem grauen Kategoriekopf ergab das #626262 auf #545454, also
   1,24:1. Der Kommentar oben nennt genau diese Falle fuer den Footer; sie
   gilt fuer jede Flaeche, die ihre Textfarbe selbst mitbringt.
   Gefunden auf /index.php?cPath=90 ("an Rabatt- und Sale-Aufklebern").   */
.categoryheader small, .boxheader small, .custom-header small,
.header-title small, h1 small, h2 small, h3 small,
.categoryheader .muted, .boxheader .muted {
  color:inherit !important;
  opacity:.85;
}

/* ---------------------------------------------------------------------------
   Cookie-Banner (as-oil / jquery.cookieconsent.css)
   Das Modul war bis hierher gar nicht erfasst, obwohl es das Erste ist, was
   ein Besucher sieht. Zwei Befunde:
     1. Der Zustimmen-Knopf stand auf #31aa1e, ein grelles Fremdgruen.
     2. Der graue Knopf trug #aaa auf #eee — 1,9:1, praktisch unlesbar.
   Der zweite Punkt ist mehr als Optik: Wenn die Ablehnung schlechter lesbar
   ist als die Zustimmung, ist die Wahl nicht mehr gleichwertig. Beide Knoepfe
   bekommen deshalb dieselbe Groesse, dieselbe Schrift und tragfaehigen
   Kontrast — unterschieden wird ueber Flaeche, nicht ueber Lesbarkeit.
   --------------------------------------------------------------------------- */
/* Der Sternselektor darf Icon-Elemente NICHT treffen: Font Awesome stellt
   seine Zeichen ueber eine eigene Schrift dar, und eine erzwungene Textschrift
   macht daraus ein leeres Kaestchen. Genau das war bei "Einstellungen
   anpassen" passiert (i.fas.fa-cogs stand auf IBM Plex Sans).
   Merke: font-family per * immer mit Icon-Ausnahme.
   Und die Ueberschrift muss ebenfalls heraus: durch die drei :not() steigt
   die Spezifitaet auf 0,3,1 und schlaegt damit die spaetere Regel fuer
   .as-oil__heading (0,1,0) — die Ueberschrift landete sonst in der
   Textschrift statt in Archivo Narrow. */
.as-oil,
.as-oil *:not([class*="fa-"]):not([class*="icon"]):not(i):not([class*="heading"]) {
  font-family: var(--body) !important;
}
.as-oil__heading { font-family: var(--display) !important; color:var(--fg) !important; }
.as-oil-content-overlay { background-color:var(--bg) !important; color:var(--fg) !important; }
.as-oil__intro-txt { color:var(--fg) !important; }

/* Zustimmen: die Handlung, also Orange (BRAND.md — Orange handelt) */
.as-oil__btn-optin { background-color:var(--acc) !important; color:var(--acc-ink) !important; }
.as-oil__btn-optin:hover { background-color:var(--acc-deep) !important; color:var(--acc-ink) !important; }

/* Ablehnen und Einstellungen: gleichwertig lesbar, ruhigere Flaeche */
.as-oil__btn-grey, .as-oil__btn-blue {
  background-color:var(--surf) !important;
  color:var(--fg) !important;
  border:1px solid var(--line-2) !important;
}
.as-oil__btn-grey:hover, .as-oil__btn-blue:hover {
  background-color:var(--line) !important;
  color:var(--fg) !important;
}
.as-oil__btn-cpc, .as-oil__intro-txt--link { color:var(--acc) !important; }
.as-oil-cpc__status { color:var(--mut) !important; }
.as-oil-cpc__slider { background-color:var(--line-2) !important; }

/* ---------------------------------------------------------------------------
   Warenkorb und Kasse
   Diese Strecke war bis zum 29.08.2026 ungeprueft — ohne Artikel im Korb zeigt
   shopping_cart.php nur die leere Ansicht, und der Checkout ist ohne Warenkorb
   gar nicht erreichbar. Mit einem Artikel darin kamen 20 Kontrastprobleme und
   zwei Fremdfarben zum Vorschein, auf genau dem Weg, an dem der Umsatz haengt.

   shopping-cart.css und checkout.css bringen einen eigenen Variablensatz mit,
   definiert auf .sc-cart bzw. .co-checkout. Eine Klasse schlaegt :root —
   deshalb hier auf derselben Ebene ueberschrieben.
     --sc-green      #97c000  Kasse-Knopf  -> --acc, die Handlungsfarbe
     --sc-text-muted #777777  auf #f7f7f7 nur 4,18:1 -> --mut
   --------------------------------------------------------------------------- */
.sc-cart, .co-checkout {
  --sc-green:       var(--acc);
  --sc-green-dark:  var(--acc-deep);
  --sc-green-hover: var(--acc-deep);
  --sc-text:        var(--fg);
  --sc-text-muted:  var(--mut);
  --sc-border:      var(--line);
  --sc-bg-light:    var(--surf);
  --sc-bg-white:    var(--bg);
  --sc-shadow:      var(--sh-1);
}

/* ---------------------------------------------------------------------------
   Die uebrigen Variablensaetze — ebenfalls auf Klassenebene
   Im Template gibt es fuenf Baugruppen, die ihre eigenen Farbvariablen
   mitbringen, und alle definieren sie auf einer KLASSE statt auf :root.
   Das Kit hatte sie im :root-Block gemappt, wo sie nichts ausrichten —
   eine Klasse gewinnt immer. Aufgefallen ist es erst, als der Preis im
   Konfigurator in "Plus Jakarta Sans" stand, obwohl --f26-ui laengst auf
   die Kit-Schrift zeigen sollte.
   Merke: Fremde Variablensaetze dort ueberschreiben, wo sie definiert sind.
   --------------------------------------------------------------------------- */

/* Klebebuchstaben-Konfigurator. Die Ausgangswerte waren durchweg blaeulich
   (#182230, #607080, #d6dee7, #f3f6f9) — kuehle Bildschirmtoene, die zu
   einer Werkstatt nicht passen. Dazu zwei Google-Schriften, die inzwischen
   nicht mehr geladen werden. */
.fadesing-kb-config {
  --f26-green:      var(--brand);
  --f26-green-dark: var(--brand-dark);
  --f26-green-soft: var(--surf);
  --f26-text:       var(--fg);
  --f26-muted:      var(--mut);
  --f26-border:     var(--line);
  --f26-bg:         var(--surf);
  --f26-card:       var(--bg);
  --f26-shadow:     var(--sh-1);
  --f26-mono:       var(--mono);
  --f26-ui:         var(--body);
}

/* Banner-Landingpage. Leitet von --f26-* ab, faellt aber ausserhalb des
   Konfigurators auf die Altwerte zurueck — deshalb hier eigens gesetzt. */
.bp-page {
  --bp-green:       var(--brand);
  --bp-green-dark:  var(--brand-dark);
  --bp-green-soft:  var(--surf);
  --bp-text:        var(--fg);
  --bp-muted:       var(--mut);
  --bp-border:      var(--line);
  --bp-bg:          var(--surf);
  --bp-card:        var(--bg);
  --bp-shadow:      var(--sh-1);
}

/* Segelnummern. Hier stand eine komplett eigene Grundfarbe: #1c4f8c, ein
   Marineblau. Blau kommt in der Palette nicht vor — es war schlicht nie
   aufgefallen, weil die Seite in keiner Stichprobe lag. */
.fa-segel {
  --fa-segel-primary:       var(--brand);
  --fa-segel-primary-hover: var(--brand-dark);
  --fa-segel-primary-light: var(--surf);
  --fa-segel-bg:            var(--surf);
  --fa-segel-card-bg:       var(--bg);
  --fa-segel-text:          var(--fg);
  --fa-segel-muted:         var(--mut);
  --fa-segel-border:        var(--line);
  --fa-segel-border-strong: var(--line-2);
}
.sc-checkout-btn { background:var(--acc) !important; color:var(--acc-ink) !important; }
.sc-checkout-btn:hover { background:var(--acc-deep) !important; color:var(--acc-ink) !important; }

/* Die Spaltenkoepfe (Artikel, Einzelpreis, Anzahl, Summe) und der
   Einzelpreis lagen mit 4,18 bzw. 4,48:1 knapp unter der Grenze. */
.sc-col-name, .sc-col-price, .sc-col-qty, .sc-col-total,
.sc-product-unit-price, .sc-btn-continue { color:var(--fg) !important; }

/* Versandhinweise im Warenkorb standen auf 2,85:1 bei 11px. Das sind
   Preisangaben, keine Randnotiz. */
.sc-shipping-info, .sc-shipping-info * { color:var(--mut) !important; }

/* Die Schrittanzeige im Checkout ("Versandart wählen · Bezahlart wählen ·
   Bestätigen · Fertig") faerbt den erledigten Schritt mit --sc-green-dark.
   Das habe ich auf --acc-deep gemappt — und dieser Wert steht im Kit
   ausdruecklich als "3,94:1 — Hover, kein Text". Als Textfarbe ist er zu
   schwach. Hier deshalb --acc mit 4,97:1.
   Merke: Beim Mappen fremder Variablen mitdenken, ob der Wert Flaeche oder
   Text traegt. --acc-deep und --acc-soft sind reine Flaechenwerte. */
.co-progress-step--done .co-progress-label { color: var(--acc) !important; }
.co-progress-label { font-size: 12px !important; }

/* Die Zaehlblase an der Warenkorb-Ikone stand auf #dc143c (Crimson) — eine
   Fremdfarbe, und Rot ist im Kit ausschliesslich fuer Fehler reserviert.
   Ein gefuellter Warenkorb ist kein Fehler, sondern der Erfolgsfall.
   Sie erscheint ueberhaupt erst, wenn etwas im Korb liegt — deshalb war sie
   in allen bisherigen Pruefungen unsichtbar. */
span.icon_count, .icon_count, .cart-count { background-color:var(--acc) !important; color:var(--acc-ink) !important; }

/* Die Staffel-Badges im Konfigurator zeigen "-2 %", "-7 %", "-11 %" und
   standen auf #dc2626, einem kraeftigen Rot. Ein Mengenrabatt ist aber kein
   Fehler, sondern ein Kaufanreiz — nach der Kit-Regel gehoert er zu Orange,
   der Handlungsfarbe.
   Auch diese Badges erscheinen erst, wenn ein Text eingegeben ist und die
   Staffel greift. Ohne Eingabe sind sie unsichtbar und fallen durch jede
   Seitenpruefung. */
.f26-tier-badge, .fadesing-kb-config .f26-tier-badge, [class*="tier-badge"] {
  background: var(--acc) !important;
  color: var(--acc-ink) !important;
  /* stand auf 10 px — bei einer Preisangabe zu klein */
  font-size: 12px !important;
}

/* Erfolgsmeldungen im Warenkorb ("Versandkostenfrei erreicht", "Gutschein
   eingeloest") standen auf #f0f7d4, einem hellen Gelbgruen. Nach BRAND.md
   Abschnitt 5 kennzeichnet Gruen nicht den Status — die Meldung traegt ihre
   Aussage im Text, die Flaeche bleibt neutral mit einer Akzentkante.
   Beide erscheinen nur unter Bedingungen und waren deshalb in keiner
   Pruefung sichtbar. */
.sc-free-shipping, .sc-coupon-redeemed {
  background:var(--surf) !important;
  border-left:3px solid var(--brand) !important;
  color:var(--fg) !important;
}

/* ===========================================================================
   8. FLÄCHENDECKEL FÜR GRÜN
   ---------------------------------------------------------------------------
   BRAND.md Abschnitt 4 deckelt Orange bei 10 % der Fläche. Für Grün stand
   kein Deckel drin — und das Ergebnis war ein grüner Shop mit orangen
   Knöpfen. Nachgemessen trug Grün die vier größten Flächen der Seite:

     nav#catmenu           91.000 px²   die Hauptnavigation
     div.breads            63.000 px²   die Breadcrumb
     h3.fn-config__header  27.000 px²   der Konfigurator-Kopf
     li.active             14.000 px²   der aktive Menüpunkt

   Zusammen mehr als alles andere. Die Regel aus dem Kit lautet aber
   „Orange handelt, Grün kennzeichnet" — kennzeichnen heißt markieren, nicht
   fluten.

   Deshalb wird Grün hier von der Fläche auf die Kante gezogen: eine 4-px-
   Linie unter der Navigation, eine Markierung am aktiven Punkt, eine Kante
   am Konfigurator-Kopf. Die Farbe bleibt im Spiel, sie trägt nur nicht mehr
   den halben Bildschirm.

   WICHTIG bei jedem einzelnen Schritt: Wo eine Fläche aufgehellt wird, muss
   die Textfarbe mit. Genau das ist in diesem Projekt schon dreimal
   schiefgegangen — beim Footer, beim Suchfeld und beim Untertitel im
   Kategoriekopf, jedes Mal mit weißer Schrift auf hellem Grund.
   =========================================================================== */

/* --- Die Hauptnavigation bleibt grün ----------------------------------
   Am 29.08.2026 probeweise auf hell umgestellt — und sofort zurückgenommen.
   Sie ist das Erkennungszeichen des Shops; ohne die grüne Leiste fehlt der
   Seite der Halt, und der Kopf zerfällt in lauter helle Streifen.
   Der Deckel greift stattdessen bei den kleineren Flächen darunter.

   Falls das doch einmal geändert werden soll: Der Ansatzpunkt ist die Regel
   'body nav, body nav#catmenu' weiter oben in dieser Datei (Spezifität
   0,1,2). Eine neue Regel dagegenzusetzen wirkt nicht. Und die Textfarbe
   muss zwingend mitgezogen werden — beim ersten Versuch stand der dunkle
   Text auf der noch grünen Innenfläche von nav#my-menu: 2,35:1. */

/* --- Breadcrumb: ruhige Fläche statt zweitem grünen Band --------------- */
.breads, div.breads {
  background-color: var(--surf) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--mut) !important;
}
.breads a, div.breads a { color: var(--mut) !important; }
.breads a:hover { color: var(--acc) !important; }
.breads strong, .breads .active, .breads span:last-child { color: var(--fg) !important; }

/* --- Konfigurator-Kopf: Kante links statt gefülltem Balken ------------- */
.fn-config__header, .f26-config__header, [class*="config__header"] {
  background-color: var(--surf) !important;
  background-image: none !important;
  color: var(--fg) !important;
  border-left: 3px solid var(--brand) !important;
}
.fn-config__header *, .f26-config__header * { color: var(--fg) !important; }

/* --- Schrittnummern bleiben grün gefüllt ------------------------------
   Kurzzeitig auf Umriss umgestellt und nach Ansicht zurückgenommen. Sie
   führen durch den Konfigurator, und dafür sind gefüllte Punkte besser als
   leere Kästchen — man sieht auf einen Blick, wo man ist. Die Zahl darin
   macht sie nicht zur Messgröße.
   Die Füllung setzt weiterhin die Regel bei .fadesing-kb-config weiter
   unten in dieser Datei. */

/* --- Aktive Reiter: Kante oben statt Fläche ---------------------------- */
li.tab-heading.active, li.tab-heading.active > a,
.nav-tabs > li.active > a {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  border-top: 3px solid var(--acc) !important;
}

/* ===========================================================================
   7. CHARAKTER: RADIUS 0 FÜR ALLES DATENTRAGENDE
   ---------------------------------------------------------------------------
   Aus dem Markeninterview kam „industriell-werkstattlich" mit vier Merkmalen.
   Drei davon — Kanten, kraeftige Flaechen, sichtbare Struktur — waren beim
   Bauen verloren gegangen; uebrig blieb die Palette. BRAND.md nennt als
   Ausweg: Radius 0 fuer alles Datentragende.

   Die Trennlinie verlaeuft nicht nach Bauteil, sondern nach Aufgabe:

     Datentragend  = zeigt einen Wert, den jemand ablesen oder eingeben muss.
                     Preis, Mass, Menge, Artikelnummer, Tabelle, Eingabefeld,
                     Etikett, Schrittnummer.  -> scharfe Kante
     Erzaehlend    = fuehrt, bewirbt, gliedert. Karte, Schaltflaeche, Bild,
                     Hinweisblock.            -> bleibt rund (10/14 px)

   Der Sinn: Ein Preis soll nicht aussehen wie ein Werbebanner. Wo Zahlen
   stehen, sieht man das der Form an.

   Ausdruecklich NICHT betroffen:
     .ColorButton und alles mit inline gesetztem Hintergrund — das sind
     Folienfarben, also Produktdaten. Sie behalten ihre Form.
   =========================================================================== */

/* --- Eingabefelder: hier werden Werte eingetragen ---------------------- */
input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="password"], input[type="search"],
input[type="date"], input:not([type]), select, textarea {
  border-radius: 0 !important;
}
/* Kontrollkaestchen und Auswahlknoepfe behalten ihre Systemform */
input[type="checkbox"], input[type="radio"] { border-radius: revert !important; }

/* --- Tabellen: Zahlenwerk --------------------------------------------- */
table, thead, tbody, tr, th, td { border-radius: 0 !important; }

/* --- Preise, Masse, Mengen, Nummern ----------------------------------- */
[class*="price"]:not([class*="button"]):not([class*="btn"]),
[class*="preis"]:not([class*="button"]):not([class*="btn"]),
[class*="artnr"], [class*="art-nr"], [class*="model"],
[class*="mass"]:not([class*="massage"]), [class*="size"]:not([class*="sizes-info"]),
[class*="staffel"], [class*="tier"], [class*="qty"], [class*="menge"],
.f26-price-value, .f26-price-line, .kbm-price-value, .kbm-sticky-price,
.spec, .spec__kopf, .spec__zeile {
  border-radius: 0 !important;
}

/* --- Etiketten, Zaehlblasen, Chips ------------------------------------
   NICHT ueber [class*="chip"] gehen: das traf auch i.fa-… Icons und hat
   deren Groesse verstellt (16 px auf 14 px). Icons sind keine Etiketten. */
.label, .badge, [class*="badge"]:not(i):not([class*="fa-"]),
[class*="label-"]:not(i),
.fa-lbl, .fa-val, .fa-chip, .chip,
span.icon_count, .cart-count {
  border-radius: 0 !important;
}

/* --- Wo im Bestand tatsaechlich Radien sitzen --------------------------
   Nachgemessen auf einer Produktseite: nur 24 Elemente ueberhaupt, meist
   5 bis 8 px. Die datentragenden Stellen, die BRAND.md meint — Preise,
   Masse, Tabellen — hatten ohnehin keinen Radius. Wirkung entsteht also
   nur an diesen konkreten Stellen, und die sind hier benannt statt ueber
   Muster gesucht:

     .ColorButton        das Farbfeld — der Farbchip aus BRAND.md
     .fn-opt__radio      Auswahlfeld, traegt eine Entscheidung
     .fn-preview__wrap   die Vorschau, zeigt das Produkt selbst
     .boxcontent         Inhaltsblock mit Angaben

   Beim ColorButton geht es ausschliesslich um die FORM. Die Farbe bleibt
   unberuehrt — sie kommt inline aus der Shop-Datenbank. */
button.ColorButton, .ColorButton, .TextButton,
label.fn-opt__radio, .fn-opt__radio,
.fn-preview__wrap, .heck-preview, [class*="preview__wrap"],
div.boxcontent, .fa-addtobasket, .custom-box {
  border-radius: 0 !important;
}

/* --- Schrittnummern: bewusst AUSGENOMMEN -------------------------------
   Sie tragen zwar eine Zahl, waeren nach der Regel oben also datentragend.
   Am 29.08.2026 auf Umriss mit scharfer Kante umgestellt und nach Ansicht
   wieder zurueckgenommen: Die gruen gefuellten, runden Nummern bleiben.
   Sie sind Wegmarken durch den Konfigurator, keine Messwerte — und als
   gefuellte Punkte fuehren sie besser durch die Schritte.
   Deshalb hier KEINE Regel. Wer sie doch aendern will, muss sie in die
   Musterliste oben aufnehmen. */

/* --- Alles mit Mono-Schrift ist per Definition datentragend ------------ */
.fa-val, .fa-lbl, code, kbd, samp { border-radius: 0 !important; }

/* --- Was ausdruecklich rund bleibt ------------------------------------
   Kein `revert` hier: das setzt auf den Browser-Standard zurueck, nicht auf
   den Wert, den das Theme vorgesehen hat — Bilder und Karten haetten damit
   ihre Rundung verloren statt sie zu behalten. Deshalb feste Werte. */
.btn, a.btn, input[type="submit"], input[type="button"], .knopf,
.fa-cart-btn, .sc-checkout-btn, .btn.incart, .btn.buynow, .btn.checkout {
  border-radius: 10px !important;
}
.card, .karte, [class*="__card"], [class*="-card"], .thumbnail,
.fa-navcard, [class*="teaser"] {
  border-radius: 14px !important;
}
/* Runde Symbolknoepfe (Teilen-Icons) behalten ihre Kreisform */
a.contentbox, [class*="fa-share"] { border-radius: 50% !important; }

/* ---------------------------------------------------------------------------
   Meldungen: Fehler, Erfolg, Hinweis, Warnung
   Diese Zustaende erscheinen erst, wenn etwas passiert — ein fehlgeschlagener
   Login, ein unvollstaendiges Formular, ein erfolgreich hinzugefuegter
   Artikel. Auf einer ruhig geladenen Seite gibt es sie nicht, deshalb waren
   sie in keiner Seitenpruefung sichtbar. Gefunden wurden sie erst bei einer
   Durchsicht ALLER CSS-Dateien an der Quelle statt am gerenderten Ergebnis.

   Bootstrap 2 bringt vier Farbpaare mit, alle ausserhalb der Palette:
     .alert          #8A6D3B auf #FCF8E3   (Gelb — im Kit ausgeschlossen)
     .alert-success  #468847 auf #DFF0D8
     .alert-error    #B94A48 auf #F2DEDE
     .alert-info     #3A87AD auf #D9EDF7   (Blau — im Kit ausgeschlossen)

   Loesung nach BRAND.md Abschnitt 5: Die Flaeche bleibt neutral, die Aussage
   steht im Text, die Bedeutung traegt eine Kante links. So funktioniert die
   Meldung auch fuer jemanden, der Farben nicht unterscheidet.
   --------------------------------------------------------------------------- */
/* Meldungen sind datentragend — sie sagen, was los ist. Deshalb Radius 0,
   nicht rund. Eine erste Fassung ohne diese Angabe hatte p.alert von 0 auf
   10 px gebracht, weil die Knopfregel weiter unten mitgriff. */
.alert, .alert-notice {
  background-color:var(--surf) !important;
  color:var(--fg) !important;
  border:1px solid var(--line) !important;
  border-left:3px solid var(--acc) !important;
  border-radius: 0 !important;
}
.alert-error, .alert-danger, .alert-error.small {
  background-color:var(--surf) !important;
  color:var(--fg) !important;
  border-left-color:var(--neg) !important;
}
.alert-success {
  background-color:var(--surf) !important;
  color:var(--fg) !important;
  border-left-color:var(--brand) !important;
}
.alert-info {
  background-color:var(--surf) !important;
  color:var(--fg) !important;
  border-left-color:var(--brand) !important;
}
/* ':not(.btn)' ist hier kein Feinschliff, sondern noetig: Ein Knopf INNERHALB
   einer Meldungsbox ist auch ein <a>, und '.alert a' (0,1,1) schlaegt
   '.btn-warning' (0,1,0) — trotz spaeterer Position. Der Knopf bekam so die
   Akzentflaeche vom Kit, aber die dunkle Textfarbe von hier: 3,21:1.
   Zu finden auf /shop_content.php?coID=1000000 ("Mehr ueber
   Fahrzeugbeschriftungen erfahren").
   Das ist zum fuenften Mal dieselbe Ursache — Flaeche und Text kommen aus
   verschiedenen Regeln. Diesmal standen beide im Kit.                      */
.alert h1, .alert h2, .alert h3, .alert h4,
.alert a:not(.btn):not([class*="btn-"]), .alert strong { color:var(--fg) !important; }
.alert a:not(.btn):not([class*="btn-"]) { text-decoration: underline; }

/* Etiketten und Zaehlblasen tragen dieselben Fremdfarben. */
.label-important, .badge-important { background-color:var(--neg) !important; color:var(--acc-ink) !important; }
.label-warning, .badge-warning     { background-color:var(--acc) !important; color:var(--acc-ink) !important; }
.label-success, .badge-success     { background-color:var(--brand) !important; color:var(--acc-ink) !important; }
.label-info, .badge-info           { background-color:var(--brand) !important; color:var(--acc-ink) !important; }
.label-important[href], .badge-important[href] { background-color:var(--neg) !important; }
.label-warning[href], .badge-warning[href]     { background-color:var(--acc-deep) !important; }
.label-success[href], .badge-success[href]     { background-color:var(--brand-dark) !important; }
.label-info[href], .badge-info[href]           { background-color:var(--brand-dark) !important; }

/* Bootstrap-Hilfsklassen fuer Textfarben — dieselben Fremdwerte. */
.text-error, .text-danger  { color:var(--neg) !important; }
.text-success              { color:var(--brand) !important; }
.text-info, .text-warning  { color:var(--fg) !important; }

/* Die Schaltflaechen-Varianten stehen auf #da4f49, #faa732, #5bb75b, #49afcd.
   Nur .btn-success taucht ueberhaupt auf (eine PHP-Datei), die uebrigen sind
   im Bestand ungenutzt — hier trotzdem mit abgedeckt, damit ein spaeter
   eingesetzter Knopf nicht aus der Palette faellt. */
.btn-danger, .btn-danger:hover, .btn-danger:focus   { background-color:var(--neg) !important; border-color:var(--neg) !important; color:var(--acc-ink) !important; }
.btn-warning, .btn-warning:hover, .btn-warning:focus { background-color:var(--acc) !important; border-color:var(--acc) !important; color:var(--acc-ink) !important; }
.btn-success, .btn-success:hover, .btn-success:focus { background-color:var(--brand) !important; border-color:var(--brand) !important; color:var(--acc-ink) !important; }
.btn-info, .btn-info:hover, .btn-info:focus          { background-color:var(--brand) !important; border-color:var(--brand) !important; color:var(--acc-ink) !important; }
.btn-primary, .btn-primary:hover, .btn-primary:focus { background-color:var(--acc) !important; border-color:var(--acc) !important; color:var(--acc-ink) !important; }

/* ---------------------------------------------------------------------------
   Overlays und Dialoge
   Diese Elemente stehen im Ruhezustand auf display:none und fielen deshalb
   durch jede Seitenpruefung — sie existieren erst nach einem Klick. Gefunden
   wurden sie erst, als der Farbwaehler im Konfigurator geoeffnet wurde:
   die Kopfzeile "Farbpalette Oracal 751c" stand weiss auf #7EA000, dem alten
   Fremdgruen, und ergab 3,04:1.
   Merke: Was erst auf Klick erscheint, muss eigens geprueft werden.
   --------------------------------------------------------------------------- */
.fa-colorpicker-head { background:var(--brand) !important; }
.fa-colorpicker-head h3 { color:var(--acc-ink) !important; font-family:var(--display) !important; }
.fa-colorpicker { background:var(--bg) !important; }
.fa-colorpicker-search {
  border-color:var(--line-2) !important;
  color:var(--fg) !important;
  background-color:var(--bg) !important;
}
.fa-colorpicker-search::placeholder { color:var(--mut) !important; }
.fa-colorpicker-close { color:var(--acc-ink) !important; }
/* Die Leermeldung der Suche stand auf 3,54:1 — sie erscheint genau dann,
   wenn jemand nicht weiterkommt, und muss dann erst recht lesbar sein. */
.fa-colorpicker-empty { color:var(--mut) !important; }

/* bootstrap.css faerbt das ELEMENT header dunkel (rgb(43,41,46)) — gemeint
   war der Seitenkopf, getroffen wird jedes <header> im Dokument. Auf
   header.category-header schlug das mobil durch: dunkle Flaeche, dunkle
   Ueberschrift, 1,22:1. Auf dem Desktop fiel es nicht auf, weil dort eine
   andere Regel gewinnt.
   Kategorie- und Artikelkoepfe stehen im Inhalt und bleiben hell. */
header.category-header, header.product-header, .content header,
.fa-page header, .fa-wrap header {
  background-color: transparent !important;
}
header.category-header h1, header.category-header h2,
.content header h1, .content header h2 { color:var(--fg) !important; }

/* Bootstrap-Modals tragen dieselbe Fremdfarbe im Kopf. */
.modal-header {
  background:var(--brand) !important;
  border-top-color:var(--brand) !important;
  border-bottom-color:var(--brand) !important;
}
.modal-header, .modal-header h1, .modal-header h2, .modal-header h3,
.modal-header h4, .modal-header .close { color:var(--acc-ink) !important; }

/* ---------------------------------------------------------------------------
   Eingabefelder auf eine tragfaehige Hoehe
   Im Bestand stehen Maßfelder auf height:20px bei 8px Innenabstand oben und
   unten — rechnerisch bleiben 4px fuer eine 15px-Schrift. Daneben sind die
   Auswahlfelder doppelt so hoch, das sah aus wie zwei verschiedene Formulare.
   20px liegt ausserdem unter der Mindestgroesse fuer Trefferflaechen.
   Nachgemessen: nicht vom Kit verursacht, aber hier zu beheben, weil es die
   Maßeingabe betrifft — das meistbenutzte Bedienelement im Shop.
   Ausgenommen bleiben Kontrollkaestchen, Auswahlknoepfe und versteckte
   Felder; die haben ihre eigene Groesse. */
input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="password"], input[type="search"],
input:not([type]), select, textarea {
  min-height: 38px;
  box-sizing: border-box;
}
textarea { min-height: 76px; }
input[type="checkbox"], input[type="radio"], input[type="hidden"],
input[type="file"], input[type="range"], input[type="color"] { min-height:0; }

/* Schaltflaechen mit Text brauchen dieselbe Hoehe. "Auf den Merkzettel" stand
   auf 20px bei 16px Schrift und ganz ohne Innenabstand.
   Bild-Schaltflaechen bleiben aussen vor — deren Groesse kommt vom Bild. */
input[type="submit"]:not([style*="background-image"]),
input[type="button"], button:not([class*="icon"]) {
  min-height: 38px;
  box-sizing: border-box;
}
input.wishlist_submit_link { padding: 8px 14px !important; }

/* Versteckte Auswahlfelder (opacity:0, vom JavaScript ersetzt) bleiben
   unangetastet — select#SBOX im Schriftkonfigurator ist so ein Fall. */
select[style*="opacity: 0"], select[style*="opacity:0"] { min-height:0; }

/* ===========================================================================
   6. MOBIL UND SCHMALE SCHIRME
   ---------------------------------------------------------------------------
   Nachgemessen bei 390px und 768px: die Befunde unten sind ausnahmslos
   Bestand — mit und ohne Kit identische Zahlen. Das Kit bricht mobil nichts,
   aber es kann reparieren, was ohnehin bricht.
   =========================================================================== */

/* Diese beiden gelten bei JEDER Breite, nicht nur mobil:

   1. Die 100vw-Falle. .f26-sticky-intro benutzt das uebliche Full-Bleed-
      Muster (width:100vw plus margin-left:calc(50% - 50vw)). 100vw zaehlt
      die Scrollbar mit — bei 768px Fenster sind das 768px gegen 752px
      sichtbare Breite. Die Folge ist seitliches Scrollen auf jedem Geraet
      mit sichtbarer Scrollbar, egal wie breit. Deshalb hier ohne Media
      Query.
   2. Das Schriftmuster img#fontSample wurde 1237px breit gemessen, obwohl
      es .img-responsive traegt — irgendetwas ueberschreibt das max-width.
      Ein Bild darf nie breiter sein als sein Platz. */
.f26-sticky-intro, .fadesing-kb-config .f26-sticky-intro {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
img#fontSample, img.img-responsive, .content img, .fa-page img {
  max-width: 100% !important;
  height: auto !important;
}

/* Die Pflichtangabe zur Umsatzsteuer stand auf 11px — bei JEDER Breite, nicht
   nur mobil. Sie gehoert zur Preisangabe und muss lesbar sein, deshalb hier
   ohne Media Query. Gleiches gilt fuer den Versandkosten-Link daneben. */
p.taxandshippinginfo, p.taxandshippinginfo a, .taxandshippinginfo,
a.contentbox { font-size: 12.5px !important; }

/* Beschriftungen im Konfigurator ("Folienfarbe:", "Gespiegelt:") standen auf
   11px — auch auf dem Desktop. Das sind Bedienbeschriftungen, keine
   Randnotizen: Sie sagen, was das Feld daneben bedeutet.
   Bewusst NICHT angehoben werden reine Metadaten wie Artikelnummer,
   Bewertungszahl oder der Steuerhinweis am Preis — die duerfen klein bleiben,
   weil sie niemand lesen muss, um zu bedienen. */
.textConfigBoxTitle, .fn-opt__label,
.fn-config .textConfigBox .textConfigBoxTitle,
.fadesing-kb-config .textConfigBox .textConfigBoxTitle { font-size: 12.5px !important; }

/* Leere Etiketten ausblenden.
   Das Template schreibt "Art.-Nr. <span>{$PRODUCTS_MODEL}</span>" — bei 26
   der 654 aktiven Produkte (4 %) ist das Feld leer, und dann steht dort nur
   "Art.-Nr." ohne Wert. Das findet keine Kontrastmessung, das sieht man nur.
   Geloest im Kit statt im Template, damit es bei den drei Unterschieden zum
   Original bleibt. Nachgemessen: das innere span ist wirklich :empty. */
.f26-artnr:has(> span:empty) { display: none !important; }

/* Im Klebebuchstaben-Konfigurator standen drei Angaben deutlich zu klein:
     .kbm-price-label     9px   Beschriftung am Preis
     .f26-tier-note      10px   Hinweis zur Staffelung
     .f26-delivery-chip  11px   Lieferzeit
   Alle drei sind kaufrelevant — was der Artikel kostet, ab welcher Menge es
   guenstiger wird und wann er da ist. Das ist keine Randnotiz. */
.kbm-price-label, .f26-tier-note, .f26-delivery-chip { font-size: 12px !important; }

/* Lange Produktnamen in Fliesstext-Links brachen bei 1024px nicht um und
   ragten ueber den Rand. Umbruch im Wort ist hier das kleinere Uebel. */
.content p a, .fa-page p a, p a[href*="products_id"], p a[href*=".html"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   Die Navigation bricht zwischen 1200 und 1499 px auf zwei Zeilen
   Nachgemessen: die sieben Menuepunkte brauchen zusammen 1387 px. Der
   Container steht in diesem Bereich auf 1170 px (bootstrap-responsive,
   @media min-width:1200px) und erst ab 1500 px auf 1420 px. Ergebnis:
   zwei Zeilen und 125 statt 64 px Kopfhoehe — bei 1440, 1366 und 1280 px,
   also den haeufigsten Aufloesungen ueberhaupt.

   Zwei Stellschrauben zusammen, damit keine allein zu weit gehen muss:
     1. Der Container nutzt die vorhandene Breite statt auf 1170 px zu
        beharren, gedeckelt bei 1400 px.
     2. Die Menuepunkte werden etwas kompakter — 17 statt 20 px Schrift,
        10 statt 15 px Innenabstand. Das spart rund 280 px.
   Damit passt das Menue ab etwa 1190 px Fensterbreite in eine Zeile.
   Unterhalb von 992 px greift ohnehin das Mobilmenue.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1499px) {
  nav#catmenu .container, nav#catmenu .navbar-static-top .container {
    width: auto !important;
    max-width: 1400px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  nav#catmenu ul.nav > li > a,
  nav#catmenu ul.nav > li > .dropdown-toggle {
    font-size: 17px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Unterhalb von 1250 px reichen 17 px noch nicht: die ersten sechs Punkte
   enden bei 925 px, der siebte ist 260 px breit — zusammen genau die
   Containerbreite, es fehlen wenige Pixel. Hier deshalb eine Stufe kompakter. */
@media (min-width: 1150px) and (max-width: 1249px) {
  nav#catmenu ul.nav > li > a,
  nav#catmenu ul.nav > li > .dropdown-toggle {
    font-size: 15.5px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* Zwischen 992 und 1149 px ist es am engsten. Und hier zeigt die Messung
   etwas, das man dem Menue nicht ansieht: Der siebte "Punkt" ist gar kein
   Menuepunkt, sondern eine verschachtelte Liste —
   <ul class="nav mm-listview extra"> mit "Neue Artikel" und "Anwendungen"
   darin. Ausserdem ist die aeussere Liste auf 929 px begrenzt, nicht auf die
   1009 px des Containers; rechts daneben liegt weiterer Kopfinhalt.
   Gemessen fehlten zuletzt 40 px. Deshalb hier eine Stufe weiter, und die
   verschachtelte Liste bekommt dieselbe Behandlung wie die uebrigen Punkte —
   sonst greift die Verkleinerung an ihr vorbei. */
@media (min-width: 980px) and (max-width: 1149px) {
  nav#catmenu ul.nav > li > a,
  nav#catmenu ul.nav > li > .dropdown-toggle,
  nav#catmenu ul.nav ul.extra > li > a,
  nav#catmenu ul.nav ul.mm-listview > li > a {
    font-size: 13.5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (max-width: 991px) {

  /* Die Bootstrap-2-Reiter liegen nebeneinander und laufen aus dem Schirm
     (ul.nav-tabs reichte bis 493px bei 375px Breite). Auf kleinen Schirmen
     duerfen sie umbrechen.
     Wichtig: Der CONTAINER behaelt width:100%. Ein width:auto darauf war der
     erste Versuch und genau falsch — dann waechst der Flex-Container auf
     Inhaltsbreite (477px) und bricht erst recht nicht um. Nur die einzelnen
     Reiter bekommen auto.
     Der eigentliche Riegel ist min-width:max-content aus stylesheet.min.css:
     das zwingt die Liste auf Inhaltsbreite und schlaegt jedes width:100%,
     denn min-width gewinnt gegen width. Das Theme wollte damit seitlich
     scrollbare Reiter (daher auch overflow-x:auto). Hier wird stattdessen
     umgebrochen — dann sind alle Reiter sichtbar statt hinter einer
     Scrollgeste versteckt. Dafuer MUSS min-width zurueckgesetzt werden. */
  ul.nav-tabs, ul.nav.nav-tabs, .nav-tabs-container > .nav.nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }
  ul.nav-tabs > li, .nav-tabs > li, li.tab-heading {
    float: none !important;
    width: auto !important;
    flex: 0 1 auto !important;
  }
  li.tab-heading, li.tab-heading > a { white-space: normal !important; }

  /* Nichts darf breiter sein als der Schirm. Tabellen und Bilder aus
     Produkttexten sind die ueblichen Verursacher. */
  .content img, .fa-page img, .fa-wrap img,
  .product-description-container img { max-width:100% !important; height:auto !important; }
  .content table, .fa-page table { max-width:100% !important; display:block; overflow-x:auto; }

  /* 11px Fliesstext ist auf einem Telefon zu klein. Nur der Mindestwert wird
     angehoben, die Abstufungen bleiben — Ueberschriften und Bedienelemente
     ruehrt das nicht an. */
  .content p, .content li, .content td, .content span:not([class*="icon"]),
  .fa-page p, .fa-page li, .fa-wrap p, .fa-wrap li {
    font-size: max(12.5px, 1em);
  }

  /* Namentlich die Stellen, die nachgemessen unter 12px lagen und gelesen
     oder bedient werden. Die Preisangabe steht bewusst mit dabei: "inkl.
     19 % MwSt. zzgl. Versandkosten" ist eine Pflichtangabe und stand auf
     10px.
     NICHT angefasst wird das Shopvote-Widget (.sv-*, [class*="rbadge"]) —
     fremdes Element mit eigenem Styling — und die Copyright-Zeile, die
     ueblicherweise klein steht. */
  a.accordion-toggle, .textConfigBoxTitle, .fn-opt__label {
    font-size: 12.5px !important;
  }
  /* fa-norm.css setzt .fn-config .textConfigBox .textConfigBoxTitle auf
     0.6875rem mit !important — Spezifitaet 0,3,0. Eine einfache Klasse
     kommt dagegen nicht an, auch nicht mit !important. Deshalb hier auf
     gleicher Ebene nachgezogen. */
  .fn-config .textConfigBox .textConfigBoxTitle,
  .fadesing-kb-config .textConfigBox .textConfigBoxTitle {
    font-size: 12.5px !important;
  }
  /* "Details" faltet Inhalte auf — ein Bedienelement, keine Beschriftung. */
  a.accordion-toggle {
    display: inline-block !important;
    min-height: 32px !important;
    line-height: 32px !important;
  }

  /* Die Vertrauensleiste ueber dem Kopf ("SEHR GUT", "in Deutschland",
     "75.000+ Kunden beliefert") stand auf 11px. Das sind Verkaufsargumente,
     die auf dem Telefon zuerst gesehen werden — sie duerfen nicht die
     kleinste Schrift der Seite tragen. */
  .fa-usp-banner, .fa-usp-banner__item, .fa-usp-banner__item span {
    font-size: 12px !important;
  }

  /* Trefferflaechen: was angetippt wird, braucht Hoehe.
     min-height wirkt NICHT auf display:inline — a.u-font-xlarge stand genau
     so da und blieb trotz min-height:34px bei 31px. Deshalb zusammen mit
     display:inline-block. */
  .content a.btn, .content button, .fa-page a.btn, .fa-page button,
  a.contentbox, .u-font-xlarge, a.u-font-xlarge {
    display: inline-block;
    min-height: 34px;
  }

  /* Tierportrait: die Mengenknoepfe sind 100px breit, der Preis darin steht
     auf white-space:nowrap und braucht 88px plus Innenabstand — "19,25 €/Stk"
     ragte 25px heraus und liess die ganze Seite seitwaerts scrollen.
     Der Preis darf umbrechen, der Knopf darf mitwachsen. */
  .tp-qty-pick { min-width: 0 !important; height: auto !important; }
  .tp-qty-pick__price {
    white-space: normal !important;
    display: block !important;
    max-width: 100% !important;
  }
}

/* Verlaeufe: Das Kit schliesst sie aus (BRAND.md Abschnitt 5). Im Bestand
   liegen 21 Fundstellen in 7 Dateien; bisher waren nur die auf Link-Buttons
   abgeschaltet.
   ACHTUNG — vier davon sind FUNKTIONAL und bleiben ausdruecklich stehen:
     .qr-color-trigger__swatch   erzeugt das Schachbrett fuer Transparenz
     .lp-hero::after             Lesbarkeits-Overlay ueber dem Hero-Bild
     .fa-segel__boat-btn-label   Lesbarkeits-Overlay ueber Bootsbildern
     .notes                      Linienpapier-Optik, ein Muster kein Verlauf
   Ein pauschales background-image:none haette alle vier zerstoert. Deshalb
   hier einzeln benannt statt mit dem Rasenmaeher. */
.fa-shortdesc--list, .fa-size-card { background-image:none !important; background-color:var(--bg) !important; }
.fa-kat__fazit { background-image:none !important; background-color:var(--surf) !important; }
.fadesing-kb-config { background-image:none !important; background-color:var(--surf) !important; }
.fadesing-kb-config .kbm-cart-btn,
.kbm-mobile-page .kbm-cart-btn { background-image:none !important; background-color:var(--acc) !important; color:var(--acc-ink) !important; }
.extra-cta, a.cta-button { background-image:none !important; }
nav { background-image:none !important; }

/* Veraltete <font>-Tags: 51 Produkttexte tragen noch face= und color= aus der
   Zeit vor CSS. Gefunden wurden Arial, Courier, Times, Tahoma, Candara und
   Microsoft Sans Serif sowie #0000ff, navy, #660000, #008a17.
   Das Attribut wirkt wie ein Inline-Style und laeuft an jeder Klassenregel
   vorbei — deshalb hier ueber den Elementnamen zurueckgeholt.
   Bewusst im CSS geloest und nicht in 51 Texten: Schrift und Farbe sind
   Sache des Design-Systems. Die Semantik der Texte bleibt unberuehrt. */
font, font[face], font[color] {
  font-family: inherit !important;
  color: inherit !important;
}

/* KEINE pauschale Regel auf span[style*="background-color"] — das waere
   dieselbe Falle wie beim ColorButton: Ein inline gesetzter Hintergrund im
   Content kann eine Folienfarbe sein, und eine erzwungene Textfarbe darauf
   macht die Angabe unlesbar. Die vier Word-Textmarker im Bestand sind
   stattdessen einzeln in der Datenbank auf Palettenwerte gezogen worden. */


/* ===========================================================================
   5b. EIN LAYOUT-FIX — bewusste Ausnahme
   ---------------------------------------------------------------------------
   Das Kit aendert sonst nur Farbe und Schrift, kein Layout. Hier eine
   begruendete Ausnahme, weil es ein Einzeiler ist und mehrere Seiten trifft:

   Die Reiter (.tab-heading) sind in Bootstrap 2 'float: left', aber weder
   'ul.nav' noch '.nav-tabs-container' haben einen Clearfix — der Container
   steht auf 'overflow: visible'. Dadurch fliesst '.tab-content' NEBEN die
   Reiter statt darunter: Der Inhalt begann bei x=815 mit 737px Breite statt
   bei x=163 mit 1390px.

   Nachweislich betroffen: product_info_flaeche_steps (Klebepunkte, 20k
   Verkaeufe) und fa_norm_info (554 Produkte, 34k Verkaeufe) — also der
   Standard. Gemessen mit und ohne Kit: der Fehler ist Bestand, nicht vom
   Kit verursacht.
   ========================================================================== */

/* (a) Reiter-Inhalt unter die Reiter statt daneben */
.tab-content { clear: both; }

/* (b) Kategorieseiten: Der Textblock '.fa-wrap' ist auf 980px begrenzt und
   zentriert (--fa-wrap aus extra.css), die Kategorie-Ueberschrift des
   Shop-Templates steht aber ausserhalb und nutzt die vollen 1390px. Dadurch
   beginnt die Ueberschrift 189px weiter links als der Text darunter — es
   sieht aus, als sei der Inhalt verrutscht.
   ':has()' grenzt die Regel auf Seiten mit fa-Markup ein, damit
   Produktseiten unberuehrt bleiben. */
.content:has(.fa-wrap) > h1 {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* (c) Kategoriekacheln: 'c_list.css:8' setzt height:40px mit overflow:hidden.
   Zweizeilige Kategorienamen brauchen aber 65px — bei "Geschenkideen aus
   Holz-Lasergravuren" wurde die zweite Zeile waagerecht mittendurch
   gekappt. min-height statt height loest das, ohne das Raster zu brechen:
   alle Kacheln bleiben gleich hoch (68px statt 50px). */
.cat_show_name {
  height: auto !important;
  min-height: 58px !important;
  overflow: visible !important;
}


/* ===========================================================================
   6. HILFSKLASSEN
   ---------------------------------------------------------------------------
   Mit fa-Praefix, weil unpraefixierte Namen wie .chip mit Bootstrap und
   Plugins kollidieren. Im Brand Kit heissen sie .lbl / .val / .chip —
   gleiche Rolle, gleiche Maße.
   ========================================================================== */

/* Technisches Label */
.fa-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:var(--mut) !important;
}

/* Masse, Nummern, Belegnummern */
.fa-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Farbchip — Signature-Element.
   Farbfeld aus oracalcolors r,g,b. Die Spalte 'hex' ist die TEXTfarbe,
   nicht die Folienfarbe. Siehe Produktion/oracal-farben-751c.md. */
.fa-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.fa-chip i {
  width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid var(--line-2); flex: none;
}
.fa-chip .fa-val { font-weight: 500; }
.fa-chip em { font-style: normal; color:var(--mut) !important; }