/* ============================================================
   OVERLAND OUTFITTERS — ZENTRALE THEME-DATEI
   ============================================================
   Diese Datei definiert die gemeinsamen Farb- und Schrift-
   variablen fuer alle individuell gebauten Seiten-Abschnitte
   (Startseite, FAQ, Marken-Landingpages, Zuladungsrechner,
   ARB Outback Solutions, Hersteller-Seiten, Cockpit).

   Zusaetzlich enthaelt sie die shopweiten CI-Regeln fuer
   Buttons und Ueberschriften (Akzentfarbe #c2ae6e).

   HINWEIS: Marken-Landingpages mit Hersteller-Button-Klassen
   (.fr-btn fuer Front Runner, .ac-btn fuer Alu-Cab, .ec-btn
   fuer EcoFlow, .vw-btn fuer VICKYWOOD etc.) behalten
   bewusst ihre Markenfarben als Hersteller-Identitaet und
   sind hier NICHT ueberschrieben.

   WICHTIG: Diese Datei ersetzt NICHT das CSS in den einzelnen
   Widgets. Sie ist die gemeinsame Quelle, auf die neue und
   nach und nach umgestellte Widgets verweisen sollen, statt
   ihre eigenen Farben lokal neu zu definieren.

   EINBINDUNG: Diese Datei muss einmal im gemeinsamen Header
   (Template-Einstellung "Header: OOF") verlinkt werden, z.B.:

   <link rel="stylesheet" href="/files/DEIN-PFAD/oof-theme.css">

   Danach steht sie auf jeder Seite zur Verfuegung.
   ============================================================ */

:root {
  /* --- Dunkel-Modus: Standardwerte --- */
  --oo-bg-black: #111111;
  --oo-bg-dark: #1c1c1c;
  --oo-bg-charcoal: #242424;
  --oo-bg-card: #151515;
  --oo-border: rgba(255, 255, 255, 0.12);
  --oo-border-soft: rgba(255, 255, 255, 0.08);

  --oo-text: #ffffff;
  --oo-text-mid: rgba(255, 255, 255, 0.72);
  --oo-text-soft: rgba(255, 255, 255, 0.55);

  /* --- Markenakzentfarbe (einzige Akzentfarbe) --- */
  --oo-accent-gold: #c2ae6e;
  --oo-accent-gold-light: #c2ae6e;
  --oof-accent: #c2ae6e;
  --oof-accent-ink: #ffffff;

  --oo-accent-red: #dd3526;
  --oo-accent-red-light: #e76e63;

  --oo-font-body: Arial, Helvetica, sans-serif;
  --oo-font-heading: "Barlow Condensed", Arial, sans-serif;
  --oo-font-mono: "IBM Plex Mono", monospace;
}

/* --- Hell-Modus: wird aktiv, wenn <html data-theme="light"> gesetzt ist --- */
[data-theme="light"] {
  --oo-bg-black: #ffffff;
  --oo-bg-dark: #f6f5f2;
  --oo-bg-charcoal: #eeece7;
  --oo-bg-card: #ffffff;
  --oo-border: rgba(0, 0, 0, 0.12);
  --oo-border-soft: rgba(0, 0, 0, 0.08);

  --oo-text: #161616;
  --oo-text-mid: rgba(0, 0, 0, 0.68);
  --oo-text-soft: rgba(0, 0, 0, 0.5);

  --oo-accent-gold: #c2ae6e;
  --oo-accent-gold-light: #c2ae6e;
  --oof-accent: #c2ae6e;
  --oof-accent-ink: #ffffff;

  --oo-accent-red: #c22e21;
  --oo-accent-red-light: #dd3526;
}

/* Sanfter Uebergang beim Umschalten, statt hartem Farbsprung */
body,
body * {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ============================================================
   HELL/DUNKEL-UMSCHALTER (Design)
   ============================================================ */
.oo-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--oo-border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--oo-text);
}
.oo-theme-toggle:hover {
  border-color: var(--oof-accent);
  color: var(--oof-accent);
}

/* ============================================================
   SHOPWEITES CI — Ueberschriften in Akzentfarbe
   ============================================================ */
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
  color: #c2ae6e !important;
}

/* Dark-Bereiche (Hero, FAQ-Head, Hintergrund dunkel) — Ueberschrift bleibt weiss */
.oof-hero h1, .oof-hero h2, .oof-hero h3,
.oof-hero__title, .oof-hero__subtitle,
.oos-hero h1, .oos-hero h2, .oos-hero h3,
.zr-header h1, .zr-header h2, .zr-header h3,
.zr-faq-head h1, .zr-faq-head h2, .zr-faq-head h3,
.oof-dark h1, .oof-dark h2, .oof-dark h3,
[data-oof-light] h1, [data-oof-light] h2, [data-oof-light] h3,
.zr-dark h1, .zr-dark h2, .zr-dark h3 {
  color: #ffffff !important;
}

/* Hoehere Spezifitaet fuer Zuladungsrechner-Widget (ueberschreibt dessen interne Rules) */
html body .zr-app .zr-card.zr-static h1,
html body .zr-app .zr-card.zr-static h2,
html body .zr-app .zr-card.zr-static h3,
html body .zr-app .zr-card.zr-details h1,
html body .zr-app .zr-card.zr-details h2,
html body .zr-app .zr-card.zr-details h3,
html body .zr-app .zr-card .zr-dtitle,
html body .zr-app .zr-card .zr-stitle,
html body .zr-app .zr-faq-item > summary {
  color: #c2ae6e !important;
}
html body .zr-app .zr-header h1,
html body .zr-app .zr-header h2,
html body .zr-app .zr-header h3,
html body .zr-app .zr-faq-head h1,
html body .zr-app .zr-faq-head h2,
html body .zr-app .zr-faq-head h3 {
  color: #ffffff !important;
}

/* ============================================================
   SHOPWEITES CI — Buttons
   Normal: Hintergrund #c2ae6e, Schrift weiss, Rand #c2ae6e
   Hover : Hintergrund weiss, Schrift #c2ae6e, Rand #c2ae6e
   ============================================================ */
.oof-btn, .oof-btn--primary, .oof-btn--outline, .oof-btn--dark, .oof-btn--ghost,
.oos-btn, .oos-btn-primary, .oos-btn-outline,
.ooa-btn, .ooa-btn--primary, .ooa-btn--outline, .ooa-btn--dark, .ooa-btn--ghost,
.zr-btn, .zr-btn-primary, .zr-btn-outline, .zr-btn-pdf, .zr-reset,
.oof-hero__cta, .oof-hero__cta-outline,
a.cta, button.cta,
.btn-primary, .btn-oof {
  background: #c2ae6e !important;
  color: #ffffff !important;
  border: 2px solid #c2ae6e !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.oof-btn:hover, .oof-btn--primary:hover, .oof-btn--outline:hover, .oof-btn--dark:hover, .oof-btn--ghost:hover,
.oos-btn:hover, .oos-btn-primary:hover, .oos-btn-outline:hover,
.ooa-btn:hover, .ooa-btn--primary:hover, .ooa-btn--outline:hover, .ooa-btn--dark:hover, .ooa-btn--ghost:hover,
.zr-btn:hover, .zr-btn-primary:hover, .zr-btn-outline:hover, .zr-btn-pdf:hover, .zr-reset:hover,
.oof-hero__cta:hover, .oof-hero__cta-outline:hover,
a.cta:hover, button.cta:hover,
.btn-primary:hover, .btn-oof:hover {
  background: #ffffff !important;
  color: #c2ae6e !important;
  border-color: #c2ae6e !important;
}

/* Zuladungsrechner-Buttons mit hoeherer Spezifitaet (Widget-interne Overrides) */
html body .zr-app .zr-btn-pdf,
html body .zr-app .zr-reset {
  background: #c2ae6e !important;
  color: #ffffff !important;
  border: 2px solid #c2ae6e !important;
}
html body .zr-app .zr-btn-pdf:hover,
html body .zr-app .zr-reset:hover {
  background: #ffffff !important;
  color: #c2ae6e !important;
}

/* Fokus-Ring fuer Accessibility */
.oof-btn:focus-visible, .oos-btn:focus-visible, .zr-btn:focus-visible,
.oof-hero__cta:focus-visible, .btn-primary:focus-visible, .btn-oof:focus-visible,
.zr-btn-pdf:focus-visible, .zr-reset:focus-visible {
  outline: 2px solid #c2ae6e;
  outline-offset: 3px;
}

/* Utility-Klassen */
.oof-accent, .oos-accent, .zr-accent { color: #c2ae6e !important; }

/* ============================================================
   SHOPWEITES CI — Tabellen in Produktbeschreibungen
   Gilt fuer alle Tabellen im Marketingtext (.product-description).
   Titelzeile (thead oder erste Zeile nur mit th): Hintergrund
   #c2ae6e, Schrift weiss. Linien und Zeilentoene halbtransparent,
   damit sie im Hell- und Dunkel-Modus funktionieren.
   Handy: Tabelle laesst sich seitlich wischen.
   ============================================================ */
.product-description table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 15px;
  border: 0;
}
.product-description table th,
.product-description table td {
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  text-align: left;
  vertical-align: top;
}
.product-description table th {
  font-weight: 600;
  width: 34%;
}
.product-description table tbody tr:nth-child(even) {
  background: rgba(194, 174, 110, 0.08);
}
.product-description table thead th,
.product-description table tr:first-child:not(:has(td)) th {
  background: #c2ae6e;
  color: #ffffff;
  border-bottom: none;
}
@media (max-width: 767px) {
  .product-description table {
    display: block;
    overflow-x: auto;
    font-size: 14px;
  }
  .product-description table th,
  .product-description table td {
    padding: 7px 10px;
  }
}


/* ============================================================
   SHOPWEITES CI (bisher per Skript im Head Code eingefügt)
   Ersetzt das Skript «injectLate / oof-ci-late» im Head Code.
   ============================================================ */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4 {
  color: #c2ae6e !important;
}
html body .zr-app .zr-card h1, html body .zr-app .zr-card h2, html body .zr-app .zr-card h3,
html body .zr-app .zr-card .zr-dtitle, html body .zr-app .zr-card .zr-stitle,
html body .zr-app .zr-faq-item > summary {
  color: #c2ae6e !important;
}
html body .zr-app .zr-header h1, html body .zr-app .zr-header h2, html body .zr-app .zr-header h3,
html body .zr-app .zr-faq-head h1, html body .zr-app .zr-faq-head h2, html body .zr-app .zr-faq-head h3 {
  color: #fff !important;
}
html body .zr-app .zr-btn-pdf, html body .zr-app .zr-reset,
html body .ooa-btn, html body .ooa-btn--primary, html body .ooa-btn--outline,
html body .ooa-btn--dark, html body .ooa-btn--ghost {
  background: #c2ae6e !important;
  color: #fff !important;
  border: 2px solid #c2ae6e !important;
}
html body .zr-app .zr-btn-pdf:hover, html body .zr-app .zr-reset:hover,
html body .ooa-btn:hover, html body .ooa-btn--primary:hover, html body .ooa-btn--outline:hover,
html body .ooa-btn--dark:hover, html body .ooa-btn--ghost:hover {
  background: #fff !important;
  color: #c2ae6e !important;
}


/* =========================================================
   OVERLAND OUTFITTERS · PRODUKTKACHELN (Stil Fahrzeug-Finder)
   Gilt für alle Produktlisten (Kategorien, Suche, Marken).
   Einbindung: am Ende von oof-theme.css einfügen.
   Hell als Standard (wie der Shop), dunkel bei <html data-theme="dark">.
   ========================================================= */
.product-card{
  --oc-bg:#ffffff; --oc-img:#ffffff; --oc-line:#e4e1d6; --oc-line-strong:#bdb9aa;
  --oc-text:#1d1d1a; --oc-muted:#6a685e; --oc-soft:#f2f0e9; --oc-accent:#c2ae6e;
  --oc-ok:#2f7a3d; --oc-ok-bg:rgba(47,122,61,.1); --oc-warn:#94650f; --oc-warn-bg:rgba(148,101,15,.1); --oc-err:#c22e21; --oc-err-bg:rgba(194,46,33,.09);
}
[data-theme="dark"] .product-card{
  --oc-bg:#1a1b18; --oc-img:#ffffff; --oc-line:#30312b; --oc-line-strong:#4a4a42;
  --oc-text:#ecebe4; --oc-muted:#9c9a8e; --oc-soft:#22231f;
  --oc-ok:#86bd8f; --oc-ok-bg:rgba(134,189,143,.12); --oc-warn:#dcae5a; --oc-warn-bg:rgba(220,174,90,.12); --oc-err:#e76e63; --oc-err-bg:rgba(221,53,38,.12);
}
html body .product-card{
  background:var(--oc-bg)!important;
  border:1px solid var(--oc-line)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  padding:12px!important;
  height:auto!important;
  text-align:left!important;
  transition:border-color .15s ease, transform .15s ease!important;
}
html body .product-card:hover{
  border-color:var(--oc-line-strong)!important;
  transform:translateY(-2px);
  box-shadow:none!important;
}
/* Bild: ruhige Fläche, runde Ecken */
html body .product-card .card-img-top{
  border-radius:8px;
  background:var(--oc-img);
  border:1px solid var(--oc-line);
}
/* Inhalt als Spalte, Preis immer unten */
html body .product-card > .card-body:not(.card-body-hidden){
  padding:10px 0 0!important;
  display:flex!important;flex-direction:column;gap:8px;flex:1 1 auto;
}
/* Marke links, Artikelnummer rechts */
html body .product-card .product-meta{
  flex-direction:row-reverse;gap:8px;padding-bottom:0!important;
  font-size:12px!important;color:var(--oc-muted)!important;
}
html body .product-card .product-meta span:last-child{font-weight:700;text-transform:uppercase;letter-spacing:.06em}
html body .product-card .product-meta span:first-child{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px}
/* Titel: linksbündig, max. 3 Zeilen, gleiche Höhe in allen Kacheln */
html body .product-card .product-title{
  margin:0!important;text-align:left!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px!important;font-weight:600!important;line-height:1.32!important;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3.96em;
}
html body .product-card .product-title a{color:var(--oc-text)!important;text-decoration:none}
html body .product-card:hover .product-title a{text-decoration:underline;text-underline-offset:3px}
/* Preis mit Trennlinie */
html body .product-card .product-price{
  margin-top:2px!important;
  border-top:1px solid var(--oc-line);
  padding-top:10px;
  display:flex;align-items:baseline;justify-content:flex-start;gap:8px;flex-wrap:wrap;
}
html body .product-card .product-price .text-accent{
  font-family:"Barlow Condensed",Arial,sans-serif!important;
  font-size:23px!important;font-weight:600!important;
  color:var(--oc-text)!important;font-variant-numeric:tabular-nums;
}
html body .product-card .product-price del{color:var(--oc-muted)!important}
/* Lagerstatus als Pille mit Punkt */
html body .product-card .stock-badge{
  align-self:flex-start;display:inline-flex!important;align-items:center;gap:6px;
  width:auto!important;border-radius:999px!important;border:0!important;
  padding:3px 10px!important;font-size:12px!important;font-weight:600!important;
  background:var(--oc-soft)!important;color:var(--oc-muted)!important;
}
html body .product-card .stock-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
html body .product-card .stock-badge[data-bulbcolor="green"]{color:var(--oc-ok)!important;background:var(--oc-ok-bg)!important}
html body .product-card .stock-badge[data-bulbcolor="gold"],
html body .product-card .stock-badge[data-bulbcolor="yellow"],
html body .product-card .stock-badge[data-bulbcolor="orange"]{color:var(--oc-warn)!important;background:var(--oc-warn-bg)!important}
html body .product-card .stock-badge[data-bulbcolor="red"]{color:var(--oc-err)!important;background:var(--oc-err-bg)!important}
/* Warenkorb-Knopf nach Shop-Regel */
html body .product-card .card-body-hidden .btn-primary{
  background:var(--oc-accent)!important;border:1px solid var(--oc-accent)!important;color:#fff!important;border-radius:8px!important;
}
html body .product-card .card-body-hidden .btn-primary:hover{background:#fff!important;color:var(--oc-accent)!important}
@media (prefers-reduced-motion:reduce){html body .product-card,html body .product-card:hover{transition:none!important;transform:none}}


/* =========================================================
   OVERLAND OUTFITTERS · SHOP-CI (Stil Fahrzeug-Finder)
   Stand 11.11.2026 · Einbindung: am Ende von oof-theme.css
   Gilt für Template Physalis (Rent-a-Shop): Topbar, Header,
   Navigation, Seitentitel, Kategorieseiten, Produktdetail,
   Warenkorb, Checkout, Footer.
   Hell als Standard (wie der Shop), Topbar und Footer dunkel
   wie Finder und Landingpages. Einzige Akzentfarbe #c2ae6e.
   Marken-Landingpages (.fr-, .ac-, .vwrp, .cvrp, .fdrp ...)
   sind nicht betroffen, da nur Template-Klassen angesprochen
   werden.
   ========================================================= */

/* ---------- 1. Gemeinsame Werte ---------- */
html:root{
  --oc-bg:#ffffff; --oc-page:#ffffff; --oc-line:#e4e1d6; --oc-line-strong:#bdb9aa;
  --oc-text:#1d1d1a; --oc-muted:#6a685e; --oc-soft:#f6f5f2; --oc-soft2:#f2f0e9;
  --oc-accent:#c2ae6e; --oc-accent-tint:rgba(194,174,110,.16);
  --oc-dark:#1c1c1c; --oc-dark2:#151515; --oc-dark-line:rgba(255,255,255,.12);
  --oc-err:#c22e21;
  --oc-head:"Barlow Condensed",Arial,sans-serif;
  --oc-body:Arial,Helvetica,sans-serif;
  --oc-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Template-Variablen (Designeinstellungen) auf CI ziehen */
  --default-font-color:#1d1d1a;
  --default-link-color:#1d1d1a;            /* war #ff0000 */
  --default-link-hover-color:#c2ae6e;
  --primary:#c2ae6e;                        /* war #b0b0b0 */
  --primary-hover:#c2ae6e;
  --primary-font-color:#ffffff;
  --border-color:#e4e1d6;                   /* war #ad9e65 */
  --header-icon-color:#1d1d1a;
  --preheader-background-color:#1c1c1c;     /* war #ad9e65 */
  --preheader-font-color:rgba(255,255,255,.78);
  --breadcrumb-title-color:#1d1d1a;
  --breadcrumb-link-color:#6a685e;
  --footer-background-color:#111111;        /* war #373434 */
  --footer-font-color:rgba(255,255,255,.72);
  --input-background-color:#ffffff;         /* war #e6e6e6 */
  --input-font-color:#1d1d1a;
  --accent-color:#1d1d1a;
  --muted-font-color:#6a685e;
}

/* ---------- 2. Alte Inhalts-Designs neutralisieren ----------
   #938a57, #776d37 und #77bb41 stehen noch in den Rent-a-Shop
   Inhalts-Designs. Bis sie im Backend korrigiert sind, hier
   überschrieben. Danach kann dieser Block entfallen.            */
html body .content-design-4d8d8cf0-c782-4bac-9bdd-6914814faa34{
  --primary:#c2ae6e!important; --secondary-hover:#c2ae6e!important;
  --default-link-color:#1d1d1a!important;
  --default-link-hover-color:#c2ae6e!important; --border-color:#e4e1d6!important;
  --input-background-color:#ffffff!important; --input-font-color:#1d1d1a!important;
  --inner-background-color:#ffffff!important; --muted-font-color:#6a685e!important;
}
html body .content-design-a7550c7c-1034-47da-805a-183b81748f12{
  --secondary-hover:#c2ae6e!important; --default-font-color:#c2ae6e!important;
}
html body .content-design-e4105b80-83ed-407b-869f-4fd2a9dfc156{
  --primary:#c2ae6e!important; --primary-hover:#c2ae6e!important;
  --secondary-hover:#c2ae6e!important; --default-link-hover-color:#c2ae6e!important;
}
html body .content-design-8577b041-75c3-4233-b431-7019dae37ae8{ --default-font-color:#c2ae6e!important; }
html body .content-design-f02dcb67-4b93-4d03-9477-06db6357b29b{
  --primary:#c2ae6e!important; --primary-hover:#c2ae6e!important;
}

/* ---------- 3. Topbar (dunkel wie Finder) ---------- */
html body header .topbar{
  background:var(--oc-dark)!important; color:rgba(255,255,255,.78)!important;
  border-bottom:1px solid var(--oc-dark-line);
  font-size:13px; letter-spacing:.01em;
}
html body header .topbar p{margin:0}
html body header .topbar,html body header .topbar .topbar-text{color:rgba(255,255,255,.78)!important}
html body header .topbar a{color:#c2ae6e!important;text-decoration:none}
html body header .topbar a:hover{color:#ffffff!important}
html body header .topbar strong{color:#ffffff;font-weight:700}

/* ---------- 4. Header ---------- */
html body header.msw-header{box-shadow:none!important}
html body header .navbar-sticky{background:#ffffff!important;border-bottom:1px solid var(--oc-line)}
html body header .navbar-sticky.navbar-stuck{box-shadow:0 10px 24px -18px rgba(0,0,0,.35)!important}
/* Suche */
html body header .msw-search-suggestion,
html body header .input-group .form-control{
  background:var(--oc-soft)!important; border:1px solid var(--oc-line)!important;
  border-radius:10px!important; color:var(--oc-text)!important; min-height:44px;
}
html body header .msw-search-suggestion:focus{
  background:#fff!important; border-color:var(--oc-accent)!important;
  box-shadow:0 0 0 3px var(--oc-accent-tint)!important;
}
html body header .msw-search-suggestion::placeholder{color:var(--oc-muted)}
/* Symbole rechts */
html body header .navbar-tool-icon-box{color:var(--oc-text)!important;border-radius:50%}
html body header .navbar-tool:hover .navbar-tool-icon-box{color:var(--oc-accent)!important;background:var(--oc-soft)!important}
html body header .navbar-tool-label{background:var(--oc-accent)!important;color:#fff!important;font-weight:700}
html body header .navbar-tool-text small,
html body header .navbar-tool-text > small{color:var(--oc-muted)!important}
html body header .navbar-tool-text{color:var(--oc-text)!important;font-weight:600}

/* ---------- 5. Hauptnavigation ---------- */
@media (min-width:992px){
  html body header .navbar-nav{flex-wrap:nowrap!important}
}
html body header .navbar-nav > .nav-item > .nav-link{
  font-family:var(--oc-head)!important; font-weight:600!important;
  font-size:17px!important; letter-spacing:.04em; text-transform:uppercase;
  color:var(--oc-text)!important; padding-left:.85rem!important; padding-right:.85rem!important;
  position:relative;
}
html body header .navbar-nav > .nav-item > .nav-link::after{border:0!important;margin:0}
/* Breite je Bildschirm, damit alle Punkte inkl. «Neu» auf eine Zeile passen */
@media (min-width:1200px) and (max-width:1399.98px){
  html body header .navbar-nav > .nav-item > .nav-link{font-size:16px!important;padding-left:.7rem!important;padding-right:.7rem!important;letter-spacing:.03em!important}
}
@media (min-width:992px) and (max-width:1199.98px){
  html body header .navbar-nav > .nav-item > .nav-link{font-size:14.5px!important;padding-left:.45rem!important;padding-right:.45rem!important;letter-spacing:.02em!important}
}
@media (min-width:992px) and (max-width:1399.98px){
  html body header .navbar-nav > .nav-item > .nav-link::before{left:.45rem;right:.45rem}
}
html body header .navbar-nav > .nav-item > .nav-link::before{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:10px; height:2px;
  background:var(--oc-accent); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
html body header .navbar-nav > .nav-item > .nav-link:hover,
html body header .navbar-nav > .nav-item.active > .nav-link,
html body header .navbar-nav > .nav-item > .nav-link.active,
html body header .navbar-nav > .nav-item.show > .nav-link{color:var(--oc-accent)!important}
html body header .navbar-nav > .nav-item > .nav-link:hover::before,
html body header .navbar-nav > .nav-item.active > .nav-link::before,
html body header .navbar-nav > .nav-item.show > .nav-link::before{transform:scaleX(1)}
/* Untermenüs */
html body header .dropdown-menu{
  border:1px solid var(--oc-line)!important; border-radius:12px!important;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.25)!important; padding:6px!important;
}
html body header .dropdown-item{
  border-radius:8px; padding:9px 12px!important; color:var(--oc-text)!important; font-size:14.5px;
}
html body header .dropdown-item:hover,
html body header .dropdown-item:focus,
html body header .dropdown-item.active{background:var(--oc-soft2)!important;color:var(--oc-text)!important}
html body header .dropdown-item.dropdown-toggle::after{border-color:var(--oc-muted)!important}

/* ---------- 6. Seitentitel und Breadcrumb ---------- */
html body .page-title{background:#ffffff!important}
html body .page-title h1,
html body .page-title .h3{
  font-family:var(--oc-head)!important; font-weight:700!important; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.05!important; font-size:clamp(26px,3.2vw,36px)!important;
}
html body .breadcrumb{font-size:12.5px!important}
html body .breadcrumb-item,html body .breadcrumb-item a{color:var(--oc-muted)!important;text-decoration:none}
html body .breadcrumb-item a:hover{color:var(--oc-accent)!important}
html body .breadcrumb-item.active,html body .breadcrumb-item:last-child{color:var(--oc-text)!important}
html body .breadcrumb .fa-home{color:var(--oc-accent)!important}

/* ---------- 7. Knöpfe (Shop-Regel) ---------- */
html body .btn{border-radius:8px!important;font-weight:700!important;transition:background .15s,color .15s,border-color .15s}
html body .btn-primary,
html body .btn-primary:focus{
  background:#c2ae6e!important; border:1px solid #c2ae6e!important; color:#ffffff!important; box-shadow:none!important;
}
html body .btn-primary:hover,
html body .btn-primary:active{background:#ffffff!important;color:#c2ae6e!important;border-color:#c2ae6e!important}
html body .btn-primary:not(.btn-sm){min-height:44px}
/* Zweitknopf wie im Finder: Rahmen, kein Grau */
html body .btn-secondary,
html body .btn-outline-secondary{
  background:transparent!important; color:var(--oc-text)!important;
  border:1px solid var(--oc-line-strong)!important; box-shadow:none!important;
}
html body .btn-secondary:hover,
html body .btn-outline-secondary:hover{border-color:#c2ae6e!important;color:#c2ae6e!important;background:transparent!important}
html body .btn-shadow{box-shadow:none!important}
html body .btn:focus-visible{outline:2px solid #c2ae6e;outline-offset:2px}

/* ---------- 8. Formulare ---------- */
html body .form-control,
html body .form-select,
html body .productsort-chooser select{
  background-color:#ffffff!important; border:1px solid var(--oc-line-strong)!important;
  border-radius:8px!important; color:var(--oc-text)!important; min-height:44px;
}
html body textarea.form-control{min-height:110px}
html body .form-control:focus,
html body .form-select:focus,
html body .productsort-chooser select:focus{
  border-color:#c2ae6e!important; box-shadow:0 0 0 3px var(--oc-accent-tint)!important; outline:0;
}
html body .form-control[readonly]{background:var(--oc-soft)!important}
html body .form-label{font-weight:600;font-size:13.5px;color:var(--oc-text)}
html body .form-check-input{border-color:var(--oc-line-strong)!important}
html body .form-check-input:checked{background-color:#c2ae6e!important;border-color:#c2ae6e!important}
html body .form-check-input:focus{box-shadow:0 0 0 3px var(--oc-accent-tint)!important;border-color:#c2ae6e!important}
html body .productsort-chooser select{
  appearance:none; padding:9px 38px 9px 14px; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236a685e' stroke-width='1.6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 14px center!important;
}

/* ---------- 9. Kategorieseiten ---------- */
/* Filter-Spalte als Karte wie im Finder */
html body .layout-2cols-left .side-box,
html body .widget-categories{
  border:0; padding:0;
}
html body .offcanvas-collapse,
html body aside .rounded-3.shadow-lg,
html body .layout-2cols-left .shadow-lg{
  box-shadow:none!important; border:1px solid var(--oc-line)!important; border-radius:12px!important;
}
html body .side-box-title .accordion-button,
html body .side-box-title span{
  font-size:11.5px!important; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700!important; color:var(--oc-muted)!important; background:transparent!important; box-shadow:none!important;
}
html body .side-box{border-bottom:1px solid var(--oc-line);padding-bottom:12px;margin-bottom:12px}
html body .widget-filter-item,
html body .quantity-box-content label{color:var(--oc-text)!important;font-size:14px}
html body .with-resetbutton .btn,
html body .side-box ~ .btn-secondary{width:100%}
/* Preisschieber */
html body .range-slider .noUi-connect,
html body .range-slider .irs-bar{background:#c2ae6e!important}
html body .range-slider .noUi-handle{border-color:#c2ae6e!important;box-shadow:none!important}
html body .range-slider .filterslider__activetrack{background:#c2ae6e!important}
html body .range-slider .filterslider [class*="handle"]{border-color:#c2ae6e!important;box-shadow:none!important}
html body .range-slider .histogram-entry{background:#d9d5c7!important}
html body .range-slider input{border:1px solid var(--oc-line-strong)!important;border-radius:6px!important;color:var(--oc-text)!important}
/* Sortierung-Titel */
html body .productsort-chooser{max-width:340px}
/* Kategorietext unter der Liste */
html body .list-descriptionbottom h2,
html body .list-descriptionbottom h3{font-family:var(--oc-head)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.02em}
/* Seitenzahlen */
html body .pagination .page-link{
  border:1px solid var(--oc-line)!important; border-radius:8px!important; margin:0 3px;
  color:var(--oc-text)!important; background:#fff!important; min-width:40px; text-align:center;
}
html body .pagination .page-item.active .page-link,
html body .pagination .page-link:hover{background:#c2ae6e!important;border-color:#c2ae6e!important;color:#fff!important}

/* ---------- 10. Produktdetailseite ---------- */
html body .product-tabs-container > .card,
html body .product-tabs-container .shadow-lg,
html body .product-main.shadow-lg,
html body .product-details-container.shadow-lg{
  box-shadow:none!important; border:1px solid var(--oc-line)!important; border-radius:14px!important;
}
html body .product-tabs{border-bottom:1px solid var(--oc-line)!important}
html body .product-tabs .nav-link{
  font-family:var(--oc-head)!important; font-weight:700!important; text-transform:uppercase;
  letter-spacing:.06em; font-size:16px!important; color:var(--oc-muted)!important;
  border:0!important; border-bottom:2px solid transparent!important; background:transparent!important;
}
html body .product-tabs .nav-link:hover{color:var(--oc-text)!important}
html body .product-tabs .nav-link.active{color:var(--oc-text)!important;border-bottom-color:#c2ae6e!important}
/* Galerie */
html body .product-gallery-preview{border:1px solid var(--oc-line);border-radius:12px;background:#fff;overflow:hidden}
html body .product-gallery-thumblist-item,
html body .gallery-item{border-radius:8px!important}
/* Preis */
html body .product-details .text-accent,
html body .box-price .text-accent{
  font-family:var(--oc-head)!important; font-weight:700!important; font-size:36px!important;
  color:var(--oc-text)!important; font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
html body .product-details .product-price,
html body .box-price{color:var(--oc-muted)!important}
html body .box-price .text-accent small{
  font-family:var(--oc-body)!important; font-size:13px!important; font-weight:400!important;
  color:var(--oc-muted)!important; letter-spacing:0; margin-left:4px;
}
/* Produktnamen nie in Grossbuchstaben: Einheiten wie daN, kg, mm bleiben korrekt */
html body:has(.product-details) .page-title h1,
html body .product-description h2,
html body .product-description h3,
html body .product-description h4,
html body .widget-product-meta,
html body .product-title{text-transform:none!important}
html body:has(.product-details) .page-title h1{letter-spacing:0!important;font-size:clamp(24px,2.6vw,32px)!important}

html body .product-details del{color:var(--oc-muted)!important}
/* Lagerstatus als Pille wie in den Kacheln */
html body .product-details .stock-badge{
  display:inline-flex!important; align-items:center; gap:6px; border-radius:999px!important; border:0!important;
  padding:4px 12px!important; font-size:12.5px!important; font-weight:700!important;
  background:var(--oc-soft2)!important; color:var(--oc-muted)!important;
}
html body .product-details .stock-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
html body .product-details .stock-badge[data-bulbcolor="green"]{color:#2f7a3d!important;background:rgba(47,122,61,.1)!important}
html body .product-details .stock-badge[data-bulbcolor="gold"],
html body .product-details .stock-badge[data-bulbcolor="yellow"],
html body .product-details .stock-badge[data-bulbcolor="orange"]{color:#94650f!important;background:rgba(148,101,15,.1)!important}
html body .product-details .stock-badge[data-bulbcolor="red"]{color:#c22e21!important;background:rgba(194,46,33,.09)!important}
/* Menge */
html body .quantity-number{text-align:center;max-width:88px;font-weight:700}
/* Detailtabelle (Art.-Nr., GTIN ...) */
html body .product-details .table,
html body .tab-table-wrapper .table{font-size:13.5px;--bs-table-striped-bg:transparent}
html body .product-details .table td,
html body .product-details .table th,
html body .tab-table-wrapper .table td,
html body .tab-table-wrapper .table th{border-color:var(--oc-line)!important;color:var(--oc-text)!important;padding:8px 10px}
html body .product-details .table td:first-child,
html body .tab-table-wrapper .table td:first-child{color:var(--oc-muted)!important}
html body .product-details .table td:last-child{font-family:var(--oc-mono);font-size:12.5px}
/* Zwischentitel in der Produktbeschreibung */
html body .product-description h2,
html body .product-description h3,
html body .product-description h4{
  font-family:var(--oc-head)!important; font-weight:700!important; text-transform:uppercase; letter-spacing:.02em;
}
html body .product-description a{color:var(--oc-text);text-decoration:underline;text-decoration-color:#c2ae6e;text-underline-offset:3px}
/* Zubehör / Empfehlungen */
html body .product-references h2,
html body .productslider h2,
html body .pt_large > .title > h2,
html body main h2.h3{font-family:var(--oc-head)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.02em}
html body .tns-controls button{border:1px solid var(--oc-line)!important;border-radius:50%!important;background:#fff!important;color:var(--oc-text)!important}
html body .tns-controls button:hover{border-color:#c2ae6e!important;color:#c2ae6e!important}
/* Merkliste-Knopf auf der Detailseite */
html body .product-details .btn-wishlist,
html body .product-details .btn-secondary{font-weight:600!important}

/* ---------- 11. Warenkorb ---------- */
html body .cart-table table,
html body .basket table,
html body .shopping-cart table,
html body .mwc-tableform table{font-size:14px}
html body .cart-table th,
html body .basket th,
html body .mwc-tableform th{
  font-size:11.5px!important; letter-spacing:.12em; text-transform:uppercase; font-weight:700!important;
  color:var(--oc-muted)!important; border-bottom:1px solid var(--oc-line)!important;
}
html body .cart-table td,
html body .basket td,
html body .mwc-tableform td{border-color:var(--oc-line)!important;vertical-align:middle!important;color:var(--oc-text)!important}
html body .basket .text-danger,
html body .btn.text-danger{color:var(--oc-muted)!important}
html body .basket .text-danger:hover,
html body .btn.text-danger:hover{color:var(--oc-err)!important}
html body .widget.rounded-3.shadow-lg,
html body .rounded-3.shadow-lg{box-shadow:none!important;border:1px solid var(--oc-line)!important;border-radius:14px!important}
/* Summen rechts (Warenkorb und Checkout) */
html body .widget h2,
html body .rounded-3.shadow-lg > h2,
html body .rounded-3.shadow-lg h2.h6{
  font-family:var(--oc-head)!important; font-weight:700!important; text-transform:uppercase;
  letter-spacing:.06em; font-size:20px!important; color:var(--oc-text)!important;
}
html body .rounded-3.shadow-lg .text-accent,
html body .widget .text-accent{
  font-family:var(--oc-head)!important; font-weight:700!important; color:var(--oc-text)!important;
  font-variant-numeric:tabular-nums;
}
html body .rounded-3.shadow-lg h4 .text-accent,
html body .rounded-3.shadow-lg .h4 .text-accent,
html body .rounded-3.shadow-lg h4.text-accent{font-size:30px!important}

/* Summenbox rechts: Totale wie Preise in den Kacheln */
html body aside .rounded-3.shadow-lg h4,
html body aside .rounded-3.shadow-lg h5{
  font-family:var(--oc-head)!important; font-weight:700!important; color:var(--oc-text)!important;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
html body aside .rounded-3.shadow-lg h4{font-size:32px!important}
html body aside .rounded-3.shadow-lg h5{font-size:20px!important;color:var(--oc-muted)!important}
html body aside .rounded-3.shadow-lg h4 small,
html body aside .rounded-3.shadow-lg h5 small{
  font-family:var(--oc-body); font-size:11px!important; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--oc-muted)!important;
}
html body aside .rounded-3.shadow-lg .widget-product-meta .text-accent{
  font-family:var(--oc-body)!important; font-size:14px!important; color:var(--oc-text)!important; font-weight:700!important;
}

/* ---------- 12. Checkout ---------- */
html body .steps .step-progress{background:var(--oc-line)!important;height:3px!important}
html body .steps .step-count{
  background:var(--oc-line)!important; color:var(--oc-muted)!important; font-weight:700;
}
html body .steps .step-item.active .step-progress,
html body .steps .step-item.active .step-count{background:#c2ae6e!important;color:#ffffff!important;border-color:#c2ae6e}
html body .steps .step-label{
  font-family:var(--oc-head); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:14px; color:var(--oc-muted)!important;
}
html body .steps .step-item.active .step-label{color:var(--oc-text)!important}
html body .steps .step-item.disabled,
html body .steps .step-item.disabled *{opacity:1!important;filter:none!important}
html body .steps .step-item.disabled .step-count,
html body .steps .step-item.disabled .step-count *{color:var(--oc-muted)!important}
html body .section-title-cell,
html body .checkout-process .section-title-cell h3,
html body .shop-order-address-form .section-title-cell{
  font-family:var(--oc-head)!important; font-weight:700!important; text-transform:uppercase;
  letter-spacing:.04em; font-size:20px!important; color:var(--oc-text)!important;
  border-bottom:1px solid var(--oc-line)!important;
}
html body .radio-item input[type="radio"]:checked,
html body input[type="radio"].form-check-input:checked{background-color:#c2ae6e!important;border-color:#c2ae6e!important;accent-color:#c2ae6e}
html body input[type="radio"],html body input[type="checkbox"]{accent-color:#c2ae6e}
html body .payment-icons,html body .delivery-icons{opacity:.85}

/* ---------- 13. Footer (dunkel wie Finder) ---------- */
html body footer.footer{background:#111111!important;color:rgba(255,255,255,.72)!important;border-top:3px solid #c2ae6e}
html body footer.footer a{color:rgba(255,255,255,.85)!important}
html body footer.footer a:hover{color:#c2ae6e!important}
html body footer.footer h2,
html body footer.footer h3,
html body footer.footer h4{font-family:var(--oc-head)!important;text-transform:uppercase;letter-spacing:.04em}

/* ---------- 14. Kleinteile ---------- */
html body .badge.bg-primary{background:#c2ae6e!important;color:#fff!important}
html body .text-accent{color:#c2ae6e}
html body .handheld-toolbar{background:#1c1c1c!important;border-top:1px solid var(--oc-dark-line)}
html body .handheld-toolbar-item,html body .handheld-toolbar-label,html body .handheld-toolbar-icon{color:rgba(255,255,255,.85)!important}
html body .handheld-toolbar .badge{background:#c2ae6e!important}
html body .btn-scroll-top{background:#1c1c1c!important;color:#c2ae6e!important;border-radius:50%}

@media (prefers-reduced-motion:reduce){
  html body header .navbar-nav > .nav-item > .nav-link::before{transition:none}
}