/* ==========================================================================
   ONPAGE COMPOSER FIX (OPC)
   ========================================================================== */

/*
 * Dieser Trick sucht nach ALLEN Elementen, die im HTML-Code
 * das Wort "Roboto Light" im Style-Attribut stehen haben.
 * Wir zwingen diese Elemente zurück auf die korrekte Roboto Schriftfamilie.
 */
[style*="Roboto Light"] {
    font-family: 'Roboto', sans-serif !important; /* Korrigiert den Namen */
    font-weight: 300 !important;                  /* Erzwingt den Light-Schnitt */
}

/* Falls der OPC auch "Roboto-Light" (mit Bindestrich) schreibt: */
[style*="Roboto-Light"] {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
}

/* ==========================================================================
   LOKALE SCHRIFTARTEN (TTF)
   ========================================================================== */

/* 1. Light (300) - Deine Standard-Schrift */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../fonts/Roboto-Light.ttf') format('truetype');
}

/* 2. Regular (400) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/Roboto-Regular.ttf') format('truetype');
}

/* 3. Medium (500) - Für Fettschrift (strong) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/Roboto-Medium.ttf') format('truetype');
}

/* 4. Bold (700) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/Roboto-Bold.ttf') format('truetype');
}


/* ==========================================================================
   GLOBAL & TYPOGRAPHIE
   ========================================================================== */

/* Hier erzwingen wir jetzt die Nutzung der Dateien von oben */
body, p {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300; /* Greift auf Roboto-Light.ttf zu */
    line-height: 1.5;
    color: #525252;
    -webkit-font-smoothing: antialiased; 
}

/* 2. Überschriften explizit auch auf Roboto setzen */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300;
    color: #88ba14; /* Deine grüne Farbe für Überschriften behalten */
}

/* 3. WICHTIG: Auch Eingabefelder und Buttons zwingen, Roboto zu nutzen */
/* Browser nutzen hier sonst oft Arial oder Systemschriften */
input, button, select, textarea {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300;
}

/* 4. Fettdruck lesbar halten (da Light sonst zu dünn für Bold wirkt) */
strong, b {
    font-weight: 500;
    font-family: 'Roboto', sans-serif !important;
}

/* 5. Links generell */
a {
    text-decoration: none;
    /* Farbe wird durch andere Blöcke (Hover etc.) geregelt */
}


/* ==========================================================================
   FARBEN & BUTTONS (Theme Farbe: #88ba14)
   ========================================================================== */

/* Suchlupe, Buttons und primäre Aktionen */
.btn-secondary {
    color: #f5f7fa;
    background-color: #88ba14;
    border-color: #88ba14;
    box-shadow: none;
}

/* Lupe im Header (Weiß) */
.fa-search {
    color: #ffffff !important;
}

/* Preis im Warenkorb-Dropdown */
.cart-icon-dropdown-price {
    color: #88ba14;
}

/* Sterne und Symbole generell grün */
.fa, .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #88ba14;
}

/* Lieferstatus "sofort verfügbar" grün */
.delivery-status .status-2 {
    color: #88ba14;
}
/* ==========================================================================
   BUTTON HOVER EFFEKTE
   ========================================================================== */

/* Sekundär-Buttons (Warenkorb, Suche etc.) beim Hover */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    background-color: #51812e !important;  /* Ein etwas dunkleres Grün als Kontrast */
    border-color: #51812e !important;
    color: #ffffff !important;
}

/* Falls du auch die "Primary" Buttons (oft Kasse/Login) grün haben willst: */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #51812e !important;
    border-color: #51812e !important;
    color: #ffffff !important;
}
/* ==========================================================================
   HEADER & LAYOUT
   ========================================================================== */

/* OnPage Composer Fix für Firefox (Fullwidth) */
.container.opc-Container {
    max-width: 100%;
}

/* Footer Container Breite anpassen */
.container.d-print-none {
    max-width: 100%;
}
/* ==========================================================================
   HEADER MENÜ ANPASSUNG (Text & Balken)
   ========================================================================== */

/* 1. Text-Farbe (Grün bei Hover, Focus & Aktiv) */
header .navbar-nav > .nav-item > .nav-link:hover,
header .navbar-nav > .nav-item > .nav-link:focus,
header .navbar-nav > .nav-item.active > .nav-link {
    color: #88ba14 !important;
}

/* 2. Balken-Farbe (Border) - Global */
/* Das färbt den Strich unten (::before) grün, egal auf welchem Gerät er sichtbar ist */
header .navbar-nav > .nav-item > .nav-link::before {
    border-color: #88ba14 !important;
}
/* ==========================================================================
   WARENKORB & PRODUKTE
   ========================================================================== */

/* Korrekte Bildgröße im Warenkorb */
.img-sm {
    width: 90px;
    height: auto;
}

/* Warenkorb Button Icon Anpassung */
#add-to-cart .btn .btn-basket-check span {
    margin-right: 0.25rem;
    display: inline-block !important;
}

/* ==========================================================================
   FOOTER BEREICH
   ========================================================================== */

#footer {
    background-color: #ffffff;
    color: #525252;
}

/* Überschriften im Footer (dunkles Grün) */
.productlist-filter-headline.d-none.d-md-flex {
    color: #51812e;
}

/* Schriftgröße bei Footer Links leicht erhöhen */
.container.link-content {
    font-size: 16px;
}

/* Hinweis "Preise inklusive MwSt" zentrieren */
.footnote-vat {
    text-align: center;
}

/* --- Copyright Bereich --- */

/* Entfernt den Standard "Powered by JTL-Shop" Block */
div#system-credits {
    display: none;
}

/* Container für Copyright */
#footer #copyright {
    background-color: #ffffff;
    color: #414141;
    margin-top: 1rem;
    /* padding-right entfernt, da wir jetzt zentrieren wollen */
}

/* Text im Copyright Container */
#footer #copyright > div {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.75rem;
    text-align: center; /* Geändert von 'right' auf 'center' passend zum neuen Template */
}

/* ==========================================================================
   TABS & REITER (Artikeldetailseite, Konto etc.)
   ========================================================================== */

/* 1. Der AKTIVE Reiter (der gerade offen ist) */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #88ba14 !important;        /* Text wird grün */
    border-color: #88ba14 !important; /* Die Linie (Border) wird grün */
    background-color: transparent !important; /* Hintergrund bleibt sauber */
}

/* 2. Der HOVER Zustand (wenn man mit der Maus über einen inaktiven Reiter fährt) */
.nav-tabs .nav-link:hover {
    color: #88ba14 !important;        /* Text wird beim Drüberfahren grün */
    border-color: #88ba14 !important; /* Optional: Auch der Rahmen wird beim Hovern grün */
}

a:hover,
a:focus {
    color: #88ba14 !important; /* Dein Grün */
    text-decoration: none;     /* Verhindert Unterstreichung auch beim Hover */
}

/* ==========================================================================
   FOCUS OUTLINE (Barrierefreiheit / Tastatur-Navigation)
   ========================================================================== */

.btn:focus-visible,
.focus,
:focus-visible {
    outline: 2px solid #88ba14 !important; /* Gelb zu deinem Grün geändert */
    border-radius: .125rem;
    outline-offset: 1px;
}