/* ============================================================================
   X-HUNTER · Branding-Overrides für das Theme "Leo Tactiko Elements"
   ----------------------------------------------------------------------------
   Quelle der Wahrheit: X-Hunter Design System
   (claude.ai/design – Markenrot #dd0e0e + Neutrals/Ink)

   WARUM DIESE DATEI:
   Leo Tactiko lädt diese Datei automatisch UND ZULETZT (hohe Priorität),
   wenn sie Inhalt hat. Sie überschreibt damit die Theme-Farben, OHNE die
   Hersteller-Datei theme.css anzufassen → update-sicher.

   SERVER-PFAD (genau so, Dateiname = custom.css):
   themes/leo_tactiko_elements/modules/leoelements/views/css/custom.css

   Schritt 1a "Farben" – Stand: Grundton + Preis + Buttons + Überschriften.
   (Status-Badges NEU/SALE folgen im Komponenten-Schritt.)
   ============================================================================ */

:root {

  /* --- DIE Markenfarbe ----------------------------------------------------
     Eine einzige rote Variable treibt fast alle Akzente des Themes
     (Buttons, Link-Hover, Produktname-Hover, aktive Menüpunkte, Icons ...),
     weil sie überall per var(--theme-color-default) referenziert wird.
     Olivgrün (#8E8B5E) -> X-Hunter-Rot. */
  --theme-color-default: #dd0e0e;   /* war: #8E8B5E */

  /* --- Text & Überschriften (Ink/Neutrals) ------------------------------- */
  --headings-color:       #262626;  /* war: #000   – DS Überschriften-Ink */
  --link-color:           #262626;  /* war: #000   – Links dunkel, Hover wird automatisch rot */
  --product-name-color:   #262626;  /* war: #000 */
  --block-heading-color:  #262626;  /* war: #000000 */
  /* --text-color (Fließtext) bewusst auf Leo-Default #505050 belassen:
     gut lesbar; das DS nennt #808080, das wäre auf Weiß kontrastschwach. */

  /* --- Preis = lautester Datenpunkt: Markenrot, fett --------------------- */
  --price-color:          #dd0e0e;  /* war: #000000 */
  --product-price-color:  #dd0e0e;  /* war: #000000 */
  /* durchgestrichener Alt-Preis: grau, aber WCAG-AA-lesbar (DS 17.10.2026) */
  --product-regular-price-color: #767676;  /* war: #9E9E9E (2,7:1) */

  /* --- Buttons (CTA) -----------------------------------------------------
     DS-Verhalten: rot  ->  beim Hover Ink (#0e182a), Schrift bleibt weiß.
     (--btn-bg ist im Theme bereits var(--theme-color-default) = jetzt rot.) */
  --btn-bg-hover:         #0e182a;  /* war: #fff            (Ink statt Weiß) */
  --btn-color-hover:      #fff;     /* war: rote Schrift -> weiß auf Ink */

  /* --- Produkt-Button "In den Warenkorb" --------------------------------- */
  --product-button-bg:        #0e182a;  /* war: #222   – Ink statt Grau */
  --product-button-hover-bg:  #dd0e0e;  /* war: #3f3f3f – Hover = Markenrot */
  /* --product-button-bg-hover ist bereits var(--theme-color-default) = rot */

}


/* ============================================================================
   Katalog-Flags / Badges  (Schritt 1a – Status/Badge-Farben)
   ----------------------------------------------------------------------------
   Leo-Default: weiße Chips mit buntem Rahmen (NEU grün, SALE orange,
   online-only gelb) + schwarzer Text  ->  off-brand.
   X-Hunter: eckige, GEFÜLLTE Chips, nur Marken-Rot / Ink / Grau.
   (Diese Regeln laden zuletzt und überschreiben die Theme-Regeln.)
   ============================================================================ */

.product-flags li.product-flag {
  border-radius: 0;                 /* eckig, wie im Design-System */
}

/* SALE / Preisnachlass  ->  Markenrot, weiße Schrift (lautester Flag) */
.product-flags .product-flag.on-sale,
.product-flags .product-flag.discount {
  background-color: #dd0e0e;
  border-color:     #dd0e0e;
  color:            #fff;
}
.thumbnail-container .discount-percentage {
  background-color: #dd0e0e;
  color:            #fff;
}

/* NEU  ->  Ink (dunkel), weiße Schrift – klar von SALE-Rot getrennt */
.product-flags .product-flag.new {
  background-color: #0e182a;
  border-color:     #0e182a;
  color:            #fff;
}

/* Online only  ->  Ink */
.product-flags .product-flag.online-only {
  background-color: #0e182a;
  border-color:     #0e182a;
  color:            #fff;
}

/* Pack / Set  ->  dunkles Grau */
.product-flags .product-flag.pack {
  background-color: #262626;
  border-color:     #262626;
  color:            #fff;
}

/* Ausverkauft  ->  gedämpftes Grau (deutlich, aber nicht alarmierend)
   #6b6b6b statt #808080, damit weiße Schrift 5,3:1 hat (DS 17.10.2026) */
.product-flags .product-flag.out_of_stock {
  background-color: #6b6b6b;
  border-color:     #6b6b6b;
  color:            #fff;
}


/* ============================================================================
   Footer-Unterleiste
   ----------------------------------------------------------------------------
   Gewünschte Reihenfolge (oben -> unten):
     [dunkelgraue Zone mit Rechtshinweis "Alle Preise inkl. MwSt. zzgl. Versand"]
     [schwarzer Copyright-Balken, schließt die Seite ab]
   Standard-Theme stellt Copyright ZUERST -> hier per flex umgedreht.
   ============================================================================ */

.footer-bottom {
  background-color: #252525;       /* graue Zone (für den Rechtshinweis) */
  padding-bottom: 0;               /* damit der schwarze Balken bis ganz unten geht */
}
.footer-bottom .inner {
  display: flex;
  flex-direction: column;
}
/* Rechtshinweis nach oben, ins Graue */
.footer-bottom .inner > .aeuc_footer_info {
  order: -1;
  color: #b5b5b5;
  text-align: center;
  padding: 8px 15px 16px;
}
.footer-bottom .inner > .aeuc_footer_info br { display: none; }   /* überflüssige Leerzeile raus */
.footer-bottom .inner > .aeuc_footer_info a { color: #ffffff; }
.footer-bottom .inner > .aeuc_footer_info a:hover { color: #ffffff; text-decoration: underline; }  /* Rot hätte auf Dunkel nur 3,0:1 */
/* Copyright = schwarzer Balken ganz unten */
.footer-bottom .inner > .elementor {
  background-color: #000000;
  width: 100%;
}


/* ============================================================================
   Footer-Logo
   ----------------------------------------------------------------------------
   Das Leo-Footerprofil liefert auf der Startseite `logo-second`, auf allen
   anderen Seiten dagegen `logo`. Beide Varianten muessen im dunklen Footer
   dasselbe lokale weisse X-Hunter-Logo verwenden. Die Eingrenzung auf
   `.footer-center` laesst Header-, Zahlungs- und sonstige Footer-Bilder in Ruhe.
   ============================================================================ */

#footer .footer-center img.logo,
#footer .footer-center img.logo-second {
  content: url('/themes/leo_tactiko_elements/assets/img/logo-white.png?v=3');
}

/* PS9 design testshop: the inherited demo payment strip advertises unapproved providers. */
#footer .elementor-element-7d5ecae { display: none; }


/* ============================================================================
   Kontrast-Korrekturen aus dem Design System (17.10.2026)
   ----------------------------------------------------------------------------
   Vier Shop-Farben lagen unter WCAG AA (4,5:1) und wurden im DS angehoben.
   ============================================================================ */

/* Produktkarte: Kategorie-Label über dem Namen  (#a8a8a8 -> #707070) */
.thumbnail-container .category-default a { color: #707070; }

/* Produktkarte: Pflichtangabe „inkl. MwSt. – ggf. zzgl. Versandkosten“  (#878787 -> #707070) */
.thumbnail-container span.aeuc_tax_label,
.thumbnail-container .aeuc_shipping_label,
.thumbnail-container a.aeuc-modal-content-link { color: #707070; }

/* Footer: Social-Icons auf #303030  (#8b8b8b/#818a91 -> #9aa2a8); Hover bleibt weiß/rot */
#footer .elementor-social-icon,
#footer .elementor-social-icon i { color: #9aa2a8; }
#footer .elementor-social-icon svg { fill: #9aa2a8; }
#footer .elementor-social-icon:hover i { color: var(--theme-color-default); }
#footer .elementor-social-icon:hover svg { fill: var(--theme-color-default); }

/* Footer: Links auf dunklem Grund beim Hover weiß + unterstrichen statt rot */
#footer .footer-center .elementor-widget-heading a:hover,
#footer .footer-center .elementor-widget-LeoBlockLink a:hover,
#footer .footer-bottom .elementor-widget-heading a:hover { color: #ffffff; text-decoration: underline; }