/* =========================================================
   CUSTOM CSS – JTL Shop / NIU Plus Template (Dreizack Medien)
   Navigation: Strg+F nach [Nummer], z. B. [12]

   [1]  Globale Hintergrundfarben
   [2]  Checkout & Warenkorb
   [3]  Kategorieseite – Bilder & Rahmen
   [4]  Kategorieseite – Titel & Beschreibung
   [5]  Trennlinien (hr) & Sidebar (Linien/Hintergrund)
   [6]  Produktbox – Rahmen
   [7]  Custom Box (#cbtest) DEAKTIVIERT
   [8]  Kontaktformular – Linien aus & Felder
   [9]  Cookie-Consent – Buttons
   [10] Buttons – "Ideen"
   [11] Footer – Newsletter (Button + Feld)
   [12] Suchleiste (Header + Sidebar-Overlay)
   [13] Login-/Registrieren-Popup – Buttons + Linie
   [14] Warenkorb – Button "WEITER EINKAUFEN"
   [15] Primary-Buttons (shopweit)
   [16] Kundenkonto – Karten & Menü
   [17] Registrierung + Anmelden-Sidebar – Felder
   [18] Menü "Alle Kategorien" – Icon-Bilder
   [19] Widerrufsformular – Felder & Copyright-Abstand
   [20] Modal-Fenster – Hintergrund & Linie
   [21] Startseite – Spotlight-Banner (Bild)
   [22] Produktkarte – QuickBuy-Hover-Button
   [23] Header – Nav-Badge (Zähler)
   [24] Warenkorb-Sidebar – Button
   [25] 404-Seite ("page-not-found") – Boxen
   [26] Registrierung – Versandadresse-Checkbox & Button
   [27] Eigene Seiten (Startseite) – Container
   [28] Eigene Seiten – Aufklapp-Text ("Erfahre mehr")
   [UNTEN] Override-Block (bleibt am Dateiende)

   Farben:
   #FFFCE7 Seiten-Hintergrund   | #FFFEF6 Karten/Felder   | #FFF9CE Checkout-Header
   #DBCEC8 Rahmen Bilder        | #C7B2A9 Linien/Feldrand  | #926F5F Placeholder
   #B3F7C7 Button               | #9CF4B6 Button-Hover      | #E1FCE9 Outline-Hover
   #002B0D / #004d14 / #005E1C / #007823 Grün-Töne
========================================================= */


/* ============ [1] GLOBALE HINTERGRUNDFARBEN ============ */
body,
html {
    background-color: #FFFCE7 !important;
}

#content,
#result-wrapper,
[data-wrapper="true"] {
    background-color: #FFFCE7 !important;
}

div[style*="height: 100vh"] {
    background-color: #FFFCE7 !important;
}


/* ============ [2] CHECKOUT & WARENKORB ============ */
.niu-checkout-header,
.niu-checkout-header .container-fluid,
.niu-checkout-header .container-fluid-xl {
    background-color: #FFF9CE !important;
    justify-content: center !important;
}

.niu-checkout-header .navbar-brand {
    margin: 0 auto !important;
}

#shop-logo-desktop {
    display: inline !important;
}

#shop-logo-mobile {
    display: none !important;
}

.niu-checkout-content-left,
.niu-checkout-content-right {
    background-color: #FFFCE7 !important;
}

.niu-checkout-footer {
    background-color: #FFFCE7 !important;
}

/* Warenkorb-Container: Rahmen wie die Trennlinien ([5]) */
#content > div > div:nth-child(1) > div.col.col-lg-12.col-xl-12.col-12 > div {
    border: 1px solid #C7B2A9 !important;
    border-radius: 8px !important;
}

/* Versandkostenrechner (Warenkorb): Felder wie Registrierung ([17]) */
#country,
#plz {
    background-color: #FFFEF6 !important;
    border-color: #C7B2A9 !important;
    color: #002B0D !important;
}
#country::placeholder,
#plz::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}
label[for="country"],
label[for="plz"] {
    background-color: #FFFEF6 !important;
    color: #926F5F !important;
}

/* Versandkostenrechner: Button (Outline-Optik wie [13]/[14]/[16]) */
#shipping-estimate-form > div.form-row > div.col.col-md-4.col-12 > button {
    color: #002B0D !important;
    border-color: #002B0D !important;
}
#shipping-estimate-form > div.form-row > div.col.col-md-4.col-12 > button:hover {
    background-color: #E1FCE9 !important;
    border-color: #002B0D !important;
    color: #002B0D !important;
}

/* Checkout-Karten (Bestandskunde / Neu registrieren): Rahmen wie die
   Eingabefelder – gleiche Dicke (1px) und Farbe (#C7B2A9). */
#existing-customer > div,
#form-register > div.niu-item-card.niu-item-card--is-checkout.p-3.niu-itembox-style-modern.niu-itembox-option--has-border {
    border: 1px solid #C7B2A9 !important;
}
#form-register > div.niu-item-card.niu-item-card--is-checkout.p-3.niu-itembox-style-modern.niu-itembox-option--has-border {
    border-radius: 8px !important;
}

/* Warenkorb-Artikel-Karte im Checkout: bestehenden (grauen) Rahmen der
   Karte selbst umfaerben, statt einen zusaetzlichen Rahmen um den Wrapper
   zu legen (das erzeugte vorher einen doppelten Rahmen). */
#checkout .niu-item-card {
    border-color: #C7B2A9 !important;
}

/* Trennlinie (border-top) zwischen den einzelnen Artikeln.
   :nth-child(n+2) erfasst automatisch ALLE Artikel ab dem zweiten -
   egal wie viele Artikel im Warenkorb liegen, keine Einzelauflistung noetig. */
#checkout .niu-basket-items.niu-scroll-more-container > div > div:nth-child(n+2) {
    border-top: 1px solid #C7B2A9 !important;
}

/* Warenkorb-Seite: linke und rechte Spalte, gleiche Dicke/Farbe wie die
   Eingabefelder (1px #C7B2A9). */
#content > div.container-fluid.basket.container-fluid-xl > div:nth-child(1) > div.col.col-lg-7.col-xl-8.col-12 > div,
#content > div.container-fluid.basket.container-fluid-xl > div:nth-child(1) > div.col.ml-auto-util.col-lg-5.col-xl-4.col-12 > div {
    border: 1px solid #C7B2A9 !important;
}


/* ============ [3] KATEGORIESEITE – BILDER & RAHMEN ============ */
#result-wrapper > picture {
    display: block !important;
    float: none !important;
    width: 360px !important;
    height: 360px !important;
    margin: 0 0 12px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

#result-wrapper > picture img,
.productlist-header-description-image {
    width: 360px !important;
    height: 360px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 3px solid #DBCEC8 !important;
}


/* ============ [4] KATEGORIESEITE – TITEL & BESCHREIBUNG ============ */
#result-wrapper > .title {
    display: none !important;
}

#result-wrapper > .desc {
    column-count: unset !important;
    overflow: visible !important;
}

p.small {
    display: block !important;
}


/* ============ [5] TRENNLINIEN (hr) & SIDEBAR ============ */
hr.productlist-page-nav-top,
hr.productlist-page-nav-bottom {
    border-color: #C7B2A9 !important;
    color: #C7B2A9 !important;
    border-width: 2px !important;
}

hr:not(.dzm-hr):not(.productlist-page-nav-top):not(.productlist-page-nav-bottom) {
    border-color: #C7B2A9 !important;
    color: #C7B2A9 !important;
    border-width: 2px !important;
}

hr.dzm-hr.dzm-hr {
    border-color: #FFFCE7 !important;
    border-top-width: 0px !important;
    border-width: 0px !important;
}

/* Kategorie-Sidebox: hr ausgeblendet */
#sidebox-categories-124 hr.box-normal-hr {
    display: none !important;
}

/* Sidebar-Linien (border-bottom, kein hr) */
.niu-sidebar-content > .niu-sidebar-head-small,
.niu-sidebar-content > .niu-sidebar-header-container {
    border-bottom-color: #C7B2A9 !important;
    border-bottom-width: 2px !important;
}
/* Sidebar-Linie oben (unter dem X) */
.niu-sidebar > .niu-sidebar-action-header {
    border-bottom-color: #C7B2A9 !important;
    border-bottom-width: 2px !important;
}
/* Barrierefreiheit-Panel */
.niu-sidebar-content.show > div:nth-child(2) > div {
    border-bottom-color: #C7B2A9 !important;
    border-bottom-width: 2px !important;
}
/* Merkzettel-Panel (<p>) */
.niu-sidebar-content.show > div:nth-child(2) > p {
    border-bottom-color: #C7B2A9 !important;
    border-bottom-width: 2px !important;
}
/* Weitere Sidebar-Variante (mit zusaetzlichem px-5-Wrapper).
   Ziel ist der div-Container (nicht das <p>), + border-style explizit
   gesetzt (sonst bleibt die Linie trotz Farbe/Dicke unsichtbar). */
.niu-sidebar-content.show > div.px-5 > div.niu-sidebar-head-small {
    border-bottom-style: solid !important;
    border-bottom-color: #C7B2A9 !important;
    border-bottom-width: 2px !important;
}

/* Sidebar-Hintergrund (Felder darin bleiben weiss) */
.niu-sidebar-action-header > div:nth-child(1),
.niu-sidebar-action-header > div.d-flex.flex-column.align-items-end,
.niu-sidebar-content.show {
    background-color: #FFFEF6 !important;
}

/* Ungewollte horizontale Scroll-Leiste im QuickBuy-Panel entfernen.
   Ursache: overflow-y:auto ohne overflow-x zwingt den Browser laut
   CSS-Spec, overflow-x ebenfalls auf auto zu setzen -> horizontale
   Leiste erscheint automatisch, sobald irgendein Inhalt minimal breiter
   ist als der Container. Fix: overflow-x explizit auf hidden. */
.niu-sidebar-product-form-body {
    overflow-x: hidden !important;
}

/* Quick-Buy-Formulare in der Sidebar: [id^="buy_form_"] erfasst ALLE
   IDs, die mit "buy_form_" beginnen (z. B. buy_form_26, buy_form_137, ...),
   egal welche Produktnummer folgt -> keine Einzelauflistung noetig. */
[id^="buy_form_"] > div {
    background-color: #FFFEF6 !important;
}

/* Trennlinie OBEN am Aktions-Container (statt bottom am Scroll-Container).
   Gleiche Werte wie die uebrigen Sidebar-Linien oben: #C7B2A9, 2px.
   [id^="buy_form_"] -> gilt automatisch fuer alle Quick-Buy-Formulare. */
[id^="buy_form_"] > div > div.niu-sidebar-action-container > div {
    border-top-style: solid !important;
    border-top-color: #C7B2A9 !important;
    border-top-width: 2px !important;
}

/* Abstand um den Link innerhalb der Produktbox (Quick-Buy-Sidebar):
   Breite 90% statt volle Breite, automatisch zentriert (margin auto). */
[id^="buy_form_"] > div > div.niu-sidebar-content-scroll-container > div > div.productbox-inner > div > div.col.mt-3.p-0.col-12 > a {
    width: 90% !important;
    margin: 16px auto !important;
}

/* Warenkorb-Sidebar: Artikel-Karte, gleiche Farbe wie im Checkout ([2]).
   Kein nth-child(1) -> gilt automatisch fuer ALLE Artikel in der Sidebar. */
body > div.niu-sidebar.showing.show > div.niu-sidebar-content.show > div.niu-sidebar-content-scroll-container > div:nth-child(2) > div > div {
    border-color: #C7B2A9 !important;
}
/* Trennlinie (border-top) innerhalb jeder Artikel-Karte */
body > div.niu-sidebar.showing.show > div.niu-sidebar-content.show > div.niu-sidebar-content-scroll-container > div:nth-child(2) > div > div > div.niu-item-card--details-row {
    border-top-style: solid !important;
    border-top-color: #C7B2A9 !important;
    border-top-width: 1px !important;
}

/* Warenkorb-Sidebar: Trennlinie oben ueber Gesamtsumme + oben ueber
   Buttons. Nur bestehende Template-Linien umfaerben (nach dem
   funktionierenden Muster von .niu-sidebar-action-header, [5] oben). */
body > div.niu-sidebar.showing.show > div.niu-sidebar-content.show > div.niu-sidebar-content-static-footer-container > div,
body > div.niu-sidebar.showing.show > div.niu-sidebar-content.show > div.niu-sidebar-action-container > div {
    border-top-color: #C7B2A9 !important;
    border-top-width: 2px !important;
}


/* ============ [6] PRODUKTBOX – RAHMEN ============ */
.productbox-inner {
    border-color: #DBCEC8 !important;
    border-width: 3px !important;
}


/* ============ [7] CUSTOM BOX (#cbtest) ============ */
/* Linien */
#cbtest > div {
    border-left: none !important;
    border-right: none !important;
    border-color: #C7B2A9 !important;
    border-width: 2px !important;
}

/* Schrift */
#cbtest p.h4 {
    font-weight: 500 !important;
}

/* <p> optisch als Button gestaltet, gleiche Werte wie der
   Checkout-Button (.btn-checkout.btn-block): #B3F7C7/#004d14, 5px Radius.
   FIX: Vorher #cbtest > div > div > div > div > div > p (starre 5 Ebenen)
   -> funktionierte nur bei Produkten mit genau dieser Verschachtelungstiefe,
   bei anderen Produkten (andere Anzahl div-Ebenen) griff die Regel nicht.
   Jetzt ueber die feste Klasse p.h4.mb-0 -> unabhaengig von der Tiefe,
   funktioniert bei JEDEM Produkt (bestaetigt getestet).
   STATUS: AKTUELL DEAKTIVIERT. */

/* AUS
#cbtest p.h4.mb-0 {
    display: inline-block !important;
    background-color: #B3F7C7 !important;
    color: #004d14 !important;
    border: 1px solid #B3F7C7 !important;
    border-radius: 5px !important;
    padding: 0.625rem 0.9375rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
#cbtest p.h4.mb-0:hover {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
}
AUS */


/* ============ [8] KONTAKTFORMULAR – LINIEN AUS & FELDER ============ */
hr.contact-form-hr,
#content > div:nth-child(2) > form > div:nth-child(10) > div > hr {
    display: none !important;
}

/* Felder wie Registrierung: Rand + Schrift + Hintergrund #FFFEF6 */
#subject,
#message {
    background-color: #FFFEF6 !important;
    border-color: #C7B2A9 !important;
    color: #002B0D !important;
}
/* Placeholder-Farbe (echter Placeholder) */
#subject::placeholder,
#message::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}
/* Floating-Label als "Placeholder" (falls placeholder=" " genutzt wird) */
label[for="subject"],
label[for="message"] {
    background-color: #FFFEF6 !important;
    color: #926F5F !important;
}

/* Checkbox (CheckBox_2): Rand wie die Textfelder (#C7B2A9) */
label[for="CheckBox_2"]::before {
    border-color: #C7B2A9 !important;
}

/* Absenden-Button */
#content > div:nth-child(2) > form > div:nth-child(11) > div.col.offset-lg-4.col-lg-8.col-12 > div > div > button {
    font-weight: 700 !important;
    color: #004d14 !important;
}


/* ============ [9] COOKIE-CONSENT – BUTTONS ============ */
#consent-banner .btn-outline-secondary {
    background-color: #B3F7C7 !important;
    color: #005E1C !important;
    border-color: #B3F7C7 !important;
}


/* ============ [10] BUTTONS – "Ideen" ============ */
#result-wrapper .desc input[type="button"] {
    background-color: #B3F7C7 !important;
    color: #004d14 !important;
    border: 1px solid #B3F7C7 !important;
    border-radius: 5px !important;
    padding: 0.625rem 0.9375rem !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    width: auto !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#result-wrapper .desc input[type="button"]:hover {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
}


/* ============ [11] FOOTER – NEWSLETTER ============ */
.btn-footer {
    font-weight: 700 !important;
}

.btn-footer:hover {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
}

/* Feld: Radius nur links 5px (Button rechts daneben) */
#newsletter_email {
    background-color: #FFFEF6 !important;
    border: 1px solid #C7B2A9 !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#newsletter_email::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}


/* ============ [12] SUCHLEISTE (Header + Sidebar-Overlay) ============ */
/* Hover Suchbutton (Header + Sidebar) */
.niu-header-search .input-group-append .btn:hover,
[data-niu-sidebar-content="search"] .input-group-append .btn:hover {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
}

/* Header-Suchfeld (Button daneben ausgeblendet -> rundum 5px) */
#search-header {
    background-color: #FFFEF6 !important;
    border: 1px solid #C7B2A9 !important;
    border-radius: 5px !important;
}
#search-header::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}

/* Header-Suchbutton (Lupe) ausgeblendet – Enter sucht weiterhin */
.niu-header-search .input-group-append {
    display: none !important;
}

/* Sidebar-Suchfeld: Radius links 5px, rechts 0 */
#search-sidebar {
    background-color: #FFFFFF !important;
    border: 1px solid #C7B2A9 !important;
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
#search-sidebar::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}

/* Sidebar-Suchbutton: Radius links 0, rechts 5px */
#niu_ajax_search_input_form > div > div.input-group-append > button {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

/* Suchfeld auf der Suchergebnis-/Suchseite: gleiches Muster wie die
   uebrigen Eingabefelder ([17]) */
#searchkey {
    background-color: #FFFEF6 !important;
    border-color: #C7B2A9 !important;
    color: #002B0D !important;
}
#searchkey::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}
label[for="searchkey"] {
    background-color: #FFFEF6 !important;
    color: #926F5F !important;
}


/* ============ [13] LOGIN-/REGISTRIEREN-POPUP ============ */
/* ANMELDEN-Button */
#submit-btn {
    background-color: #B3F7C7 !important;
    border-color: #B3F7C7 !important;
    color: #002B0D !important;
}
#submit-btn:hover,
#submit-btn:focus,
#submit-btn:active {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
    color: #002B0D !important;
}

/* REGISTRIEREN-Button (Outline) */
.niu-btn-outlined-primary {
    color: #002B0D !important;
}
.niu-btn-outlined-primary:hover,
.niu-btn-outlined-primary:focus,
.niu-btn-outlined-primary:active {
    background-color: #E1FCE9 !important;
    border-color: #002B0D !important;
    color: #002B0D !important;
}

/* Trennlinie unter "Anmelden für registrierte Kunden" */
#quick-login > legend {
    border-bottom-color: #C7B2A9 !important;
    border-bottom-width: 2px !important;
}


/* ============ [14] WARENKORB – "WEITER EINKAUFEN" (Outline) ============ */
.btn-outline-tertiary {
    color: #002B0D !important;
}
.btn-outline-tertiary:hover,
.btn-outline-tertiary:focus,
.btn-outline-tertiary:active {
    background-color: #E1FCE9 !important;
    border-color: #002B0D !important;
    color: #002B0D !important;
}


/* ============ [15] PRIMARY-BUTTONS (shopweit) ============ */
/* ACHTUNG: betrifft ALLE .btn-primary (z. B. "In den Warenkorb") */
.btn-primary {
    background-color: #B3F7C7 !important;
    border-color: #B3F7C7 !important;
    color: #002B0D !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
    color: #002B0D !important;
}


/* ============ [16] KUNDENKONTO – KARTEN & MENÜ ============ */
/* Karten-Hintergrund */
#account .card,
#account .card-header,
#account .card-body {
    background-color: #FFFEF6 !important;
}

/* Karten-Rahmen + Abstand */
#account .card {
    border: 3px solid #DBCEC8 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}

/* Aktiver Menü-Tab links */
#v-pills-tab .nav-link.active {
    background-color: #E1FCE9 !important;
    color: #002B0D !important;
}

/* Button "NEUE LIEFERADRESSE ERSTELLEN" (nur Konto) */
#account .btn-outline-secondary {
    color: #002B0D !important;
    border-color: #002B0D !important;
}
#account .btn-outline-secondary:hover,
#account .btn-outline-secondary:focus,
#account .btn-outline-secondary:active {
    background-color: #E1FCE9 !important;
    border-color: #002B0D !important;
    color: #002B0D !important;
}


/* ============ [17] REGISTRIERUNG + ANMELDEN-SIDEBAR – FELDER ============ */
/* per ID -> wirkt ueberall, wo diese IDs vorkommen */
/* Rand + Schrift (alle Felder) */
#email,
#password,
#password2,
#salutation,
#title,
#firstName,
#lastName,
#firm,
#firmext,
#street,
#streetnumber,
#street2,
#billing_address-country,
#billing_address-state,
#postcode,
#city,
#ustid,
#tel,
#mobile,
#www,
#birthday,
#email_quick,
#password_quick,
#register-shipping_address-salutation,
#register-shipping_address-title,
#register-shipping_address-firstName,
#register-shipping_address-lastName,
#register-shipping_address-firm,
#register-shipping_address-street,
#register-shipping_address-streetnumber,
#register-shipping_address-street2,
#register-shipping_address-country,
#register-shipping_address-state,
#register-shipping_address-postcode,
#register-shipping_address-city,
#register-shipping_address-mobil,
#register-shipping_address-tel,
#login_email,
#login_password {
    border-color: #C7B2A9 !important;
    color: #002B0D !important;
}
/* Hintergrund: Registrierung/Konto -> #FFFEF6 */
#email,
#password,
#password2,
#salutation,
#title,
#firstName,
#lastName,
#firm,
#firmext,
#street,
#streetnumber,
#street2,
#billing_address-country,
#billing_address-state,
#postcode,
#city,
#ustid,
#tel,
#mobile,
#www,
#birthday {
    background-color: #FFFEF6 !important;
}
#register-shipping_address-salutation,
#register-shipping_address-title,
#register-shipping_address-firstName,
#register-shipping_address-lastName,
#register-shipping_address-firm,
#register-shipping_address-street,
#register-shipping_address-streetnumber,
#register-shipping_address-street2,
#register-shipping_address-country,
#register-shipping_address-state,
#register-shipping_address-postcode,
#register-shipping_address-city,
#register-shipping_address-mobil,
#register-shipping_address-tel,
#login_email,
#login_password {
    background-color: #FFFEF6 !important;
}
/* Hintergrund: Anmelden-Sidebar (Quick-Login) -> weiss */
#email_quick,
#password_quick {
    background-color: #FFFFFF !important;
}

/* Placeholder-Farbe (echte Placeholder) */
#email::placeholder,
#password::placeholder,
#password2::placeholder,
#salutation::placeholder,
#title::placeholder,
#firstName::placeholder,
#lastName::placeholder,
#firm::placeholder,
#firmext::placeholder,
#street::placeholder,
#streetnumber::placeholder,
#street2::placeholder,
#billing_address-country::placeholder,
#billing_address-state::placeholder,
#postcode::placeholder,
#city::placeholder,
#ustid::placeholder,
#tel::placeholder,
#mobile::placeholder,
#www::placeholder,
#birthday::placeholder,
#email_quick::placeholder,
#password_quick::placeholder,
#register-shipping_address-salutation::placeholder,
#register-shipping_address-title::placeholder,
#register-shipping_address-firstName::placeholder,
#register-shipping_address-lastName::placeholder,
#register-shipping_address-firm::placeholder,
#register-shipping_address-street::placeholder,
#register-shipping_address-streetnumber::placeholder,
#register-shipping_address-street2::placeholder,
#register-shipping_address-country::placeholder,
#register-shipping_address-state::placeholder,
#register-shipping_address-postcode::placeholder,
#register-shipping_address-city::placeholder,
#register-shipping_address-mobil::placeholder,
#register-shipping_address-tel::placeholder,
#login_email::placeholder,
#login_password::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}

/* Floating-Label als "Placeholder": Quick-Login (Feld weiss) */
label[for="email_quick"],
label[for="password_quick"] {
    background-color: #FFFFFF !important;
    color: #926F5F !important;
}

/* Floating-Label als "Placeholder": Registrierung (Feld #FFFEF6) */
label[for="email"],
label[for="password"],
label[for="password2"],
label[for="salutation"],
label[for="title"],
label[for="firstName"],
label[for="lastName"],
label[for="firm"],
label[for="firmext"],
label[for="street"],
label[for="streetnumber"],
label[for="street2"],
label[for="billing_address-country"],
label[for="billing_address-state"],
label[for="postcode"],
label[for="city"],
label[for="ustid"],
label[for="tel"],
label[for="mobile"],
label[for="www"],
label[for="birthday"] {
    background-color: #FFFEF6 !important;
    color: #926F5F !important;
}
label[for="register-shipping_address-salutation"],
label[for="register-shipping_address-title"],
label[for="register-shipping_address-firstName"],
label[for="register-shipping_address-lastName"],
label[for="register-shipping_address-firm"],
label[for="register-shipping_address-street"],
label[for="register-shipping_address-streetnumber"],
label[for="register-shipping_address-street2"],
label[for="register-shipping_address-country"],
label[for="register-shipping_address-state"],
label[for="register-shipping_address-postcode"],
label[for="register-shipping_address-city"],
label[for="register-shipping_address-mobil"],
label[for="register-shipping_address-tel"],
label[for="login_email"],
label[for="login_password"] {
    background-color: #FFFEF6 !important;
    color: #926F5F !important;
}

/* Datenschutz-/AGB-Checkboxen: Kaestchen (::before) + Haken (::after) */
label[for="CheckBox_2"]::before,
label[for="CheckBox_3"]::before {
    background-color: #FFFEF6 !important;
}
#CheckBox_2:checked ~ label[for="CheckBox_2"]::after,
#CheckBox_3:checked ~ label[for="CheckBox_3"]::after {
    background-color: #007823 !important;
}


/* ============ [18] MENÜ "ALLE KATEGORIEN" – ICON-BILDER ============ */
/* Quadrat 100px, Rahmen wie [3] aber 2px */
#niu-navlink-c-28 > div.d-flex.gap-3 > div:nth-child(1) > picture > img,
#niu-navlink-c-29 > div.d-flex.gap-3 > div:nth-child(1) > picture > img,
#niu-navlink-c-25 > div.d-flex.gap-3 > div:nth-child(1) > picture > img,
#niu-navlink-c-26 > div.d-flex.gap-3 > div:nth-child(1) > picture > img,
#niu-navlink-c-30 > div.d-flex.gap-3 > div:nth-child(1) > picture > img,
#niu-navlink-c-27 > div.d-flex.gap-3 > div:nth-child(1) > picture > img,
#niu-navlink-c-52 > div.d-flex.gap-3 > div:nth-child(1) > picture > img {
    aspect-ratio: 1 / 1 !important;
    width: 100px !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 2px solid #DBCEC8 !important;
}


/* ============ [19] WIDERRUFSFORMULAR – FELDER & COPYRIGHT-ABSTAND ============ */
/* Felder wie Registrierung: Rand + Schrift + Hintergrund #FFFEF6 */
#withdrawal_name,
#withdrawal_order,
#withdrawal_email,
#withdrawal_comment {
    background-color: #FFFEF6 !important;
    border-color: #C7B2A9 !important;
    color: #002B0D !important;
}
/* Placeholder-Farbe (echter Placeholder) */
#withdrawal_name::placeholder,
#withdrawal_order::placeholder,
#withdrawal_email::placeholder,
#withdrawal_comment::placeholder {
    color: #926F5F !important;
    opacity: 1 !important;
}
/* Floating-Label als "Placeholder" (falls placeholder=" " genutzt wird) */
label[for="withdrawal_name"],
label[for="withdrawal_order"],
label[for="withdrawal_email"],
label[for="withdrawal_comment"] {
    background-color: #FFFEF6 !important;
    color: #926F5F !important;
}

/* Copyright-Zeile: statt Weissraum eine sichtbare Linie darunter
   (gleicher Stil wie die uebrigen Trennlinien: #C7B2A9, 2px). */
#itkanzlei_txt_copyright {
    display: block !important;
    padding-bottom: 12px !important;
    margin-bottom: 36px !important;
    border-bottom: 2px solid #C7B2A9 !important;
}

/* Feld-Beschreibungstext: gleiche Farbe wie Placeholder.
   Hinweis: ID ist ein generierter Hash (JTL) -> kann sich ggf. aendern. */
#form-group-description-6a4cd51ed865b > span {
    color: #926F5F !important;
}

/* Footer-Link "Widerrufsrecht" */
#footer > div.niu-footer-main-wrapper > div > div.row.withdrawal-link-wrapper > div > div > a {
    font-weight: 700 !important;
    color: #004d14 !important;
}

/* Absenden-Button im Widerrufsformular */
#online-revocation-form > div > form > div:nth-child(8) > div > button {
    font-weight: 700 !important;
    color: #004d14 !important;
}


/* ============ [20] MODAL-FENSTER – HINTERGRUND & LINIE ============ */
/* Gleicher Ton wie die Sidebar-Panels ([5]): #FFFEF6.
   Rahmen + Radius wie die Kategoriebilder ([3]): 3px #DBCEC8 / 8px. */
body > div.modal.fade.show > div > div {
    background-color: #FFFEF6 !important;
    border: 3px solid #DBCEC8 !important;
    border-radius: 8px !important;
}
.index-heading-wrapper,
#data-privacy {
    background-color: #FFFEF6 !important;
}
/* #content ist in [1] global auf #FFFCE7 gesetzt (Seiten-Hintergrund).
   Innerhalb des Modals soll es aber #FFFEF6 sein wie der Rest -> per
   spezifischerem Selektor (mit Modal-Vorfahren) NUR hier ueberschrieben,
   der globale #content-Hintergrund ausserhalb des Modals bleibt unberuehrt. */
body > div.modal.fade.show > div > div #content {
    background-color: #FFFEF6 !important;
}

/* Modal-Header: Trennlinie wie die uebrigen Trennlinien (#C7B2A9, 2px) */
body > div.modal.fade.show > div > div > div.modal-header {
    border-bottom-style: solid !important;
    border-bottom-color: #C7B2A9 !important;
    border-bottom-width: 2px !important;
}


/* ============ [21] STARTSEITE – SPOTLIGHT-BANNER (BILD) ============ */
/* Radius wie die Kategoriebilder ([3]): 8px */
#main-wrapper > div:nth-child(4) > div > div > div > div.banner.dzm-spotlight-banner.position-relative.overflow-hidden > picture > img {
    border-radius: 8px !important;
}


/* ============ [22] PRODUKTKARTE – QUICKBUY-HOVER-BUTTON ============ */
/* WICHTIG: Nur der innere <button.dzm-itembox-quickbuy-trigger-btn> wird
   gestylt, NICHT der aeussere .dzm-itembox-quickbuy-trigger-wrapper (der
   ist nur ein Positionierungs-Container fuer die Slide-in-Animation -
   ihn zu veraendern hatte das Layout zerstoert). Klasse ist generisch,
   gilt automatisch fuer alle Produktkarten. */
.dzm-itembox-quickbuy-trigger-btn {
    background-color: #B3F7C7 !important;
    color: #002B0D !important;
}
.dzm-itembox-quickbuy-trigger-btn:hover {
    background-color: #9CF4B6 !important;
}


/* ============ [23] HEADER – NAV-BADGE (ZÄHLER) ============ */
#shop-nav > button.as-span.not-empty > div > span {
    color: #002B0D !important;
    background-color: #E1FCE9 !important;
}


/* ============ [24] WARENKORB-SIDEBAR – BUTTON ============ */
/* Button/Link im Warenkorb-Sidebar-Panel (sichtbar wenn Artikel drin sind) */
body > div.niu-sidebar.showing.show > div.niu-sidebar-content.show > div.niu-sidebar-action-container > div > div > a {
    background-color: #B3F7C7 !important;
    color: #002B0D !important;
}
body > div.niu-sidebar.showing.show > div.niu-sidebar-content.show > div.niu-sidebar-action-container > div > div > a:hover {
    background-color: #9CF4B6 !important;
    color: #002B0D !important;
}


/* ============ [25] 404-SEITE ("page-not-found") – BOXEN ============ */
/* Hintergrund wie die Sidebar-Panels ([5]): #FFFEF6.
   Rahmen + Radius wie der Checkout-Warenkorb-Container ([2]): 1px #C7B2A9 / 8px. */
#page-not-found > div.container.sitemap-wrapper-linkgroup > div > div.card-header,
#page-not-found > div.container.sitemap-wrapper-categories > div > div.card-header {
    background-color: #FFFEF6 !important;
    border-top: 1px solid #C7B2A9 !important;
    border-left: 1px solid #C7B2A9 !important;
    border-right: 1px solid #C7B2A9 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}
#page-not-found > div.container.sitemap-wrapper-linkgroup > div > div.card-body,
#page-not-found > div.container.sitemap-wrapper-categories > div > div.card-body {
    background-color: #FFFEF6 !important;
    border-bottom: 1px solid #C7B2A9 !important;
    border-left: 1px solid #C7B2A9 !important;
    border-right: 1px solid #C7B2A9 !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}


/* ============ [26] REGISTRIERUNG – VERSANDADRESSE-CHECKBOX & BUTTON ============ */
/* Label-Text der "Abweichende Lieferadresse"-Checkbox: Schrift + Hintergrund */
#collapse-register > div.row.inc-shipping-address > div > div.form-group.niu-form-group.checkbox.control-toggle > div > label {
    color: #004d14 !important;
    background-color: #FFFCE7 !important;
}

/* Kaestchen (::before) der Checkboxen.
   NICHT angehakt: heller Hintergrund + beiger Rand.
   ANGEHAKT: kein Rand, kein Radius - damit die gruene Fuellung samt
   Haken sauber und unveraendert sichtbar bleibt.
   Hinweis: die #\36 ...-IDs sind von JTL generierte Hashes und koennen
   sich bei Aenderungen am Formular aendern. */
#\36 a7afc2d248c7 > div > div > input:not(:checked) ~ label::before,
#\36 a7b0202113c0 > div.d-flex.flex-column-reverse > div > input:not(:checked) ~ label::before,
#collapse-register > fieldset.inc-billing-address-form > div:nth-child(5) > div > div > input:not(:checked) ~ label::before,
#collapse-register > div.row.inc-shipping-address > div > div.form-group.niu-form-group.checkbox.control-toggle > div > input:not(:checked) ~ label::before {
    background-color: #FFFEF6 !important;
    border-color: #C7B2A9 !important;
}
#\36 a7afc2d248c7 > div > div > input:checked ~ label::before,
#\36 a7b0202113c0 > div.d-flex.flex-column-reverse > div > input:checked ~ label::before,
#collapse-register > fieldset.inc-billing-address-form > div:nth-child(5) > div > div > input:checked ~ label::before,
#collapse-register > div.row.inc-shipping-address > div > div.form-group.niu-form-group.checkbox.control-toggle > div > input:checked ~ label::before {
    border: none !important;
    border-radius: 0 !important;
}

/* Absenden-Button: gleiche Farben wie die Primary-Buttons shopweit ([15]) */
#submitSendCustomerData {
    background-color: #B3F7C7 !important;
    border-color: #B3F7C7 !important;
    color: #002B0D !important;
}
#submitSendCustomerData:hover,
#submitSendCustomerData:focus,
#submitSendCustomerData:active {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
    color: #002B0D !important;
}


/* ============ [27] EIGENE SEITEN (Startseite) – CONTAINER ============ */
/* Ueberschrift + Inhalt aus "Eigene Seiten" nutzen die Bootstrap-Klasse
   .container (feste, kleinere max-width) und sind dadurch schmaler als die
   Dreizack-V3-Container. Hier auf die V3-Breite angeglichen.
   width:100% + max-width statt fester Breite -> bleibt responsiv und
   laeuft auf kleinen Bildschirmen nicht ueber. */
#content > div.container.index-heading-wrapper,
#content > div.container.link-content {
    width: 100% !important;
    max-width: 1618px !important;
}

/* Ueberschrift-Container: Hintergrund + fette Schrift.
   HINWEIS: .index-heading-wrapper wird in [20] global auf #FFFEF6 gesetzt
   (fuer das Modal). Dieser Selektor ist spezifischer (#content >) und
   greift daher nur hier auf der Seite, nicht im Modal. */
#content > div.container.index-heading-wrapper {
    background-color: #FFFCE7 !important;
    font-weight: 700 !important;
    text-align: center !important;
}
/* Direkt auf die h1, da Ueberschriften eine eigene font-weight vom
   Template mitbringen (NIU: 600) - die gewinnt gegen die Vererbung vom
   Container, deshalb muss sie hier explizit ueberschrieben werden. */
#content > div.container.index-heading-wrapper > h1 {
    font-weight: 700 !important;
}


/* ============ [28] EIGENE SEITEN – AUFKLAPP-TEXT ("Erfahre mehr") ============ */
/* Funktionsweise (Checkbox-Hack, kein JavaScript noetig):
   Eine versteckte Checkbox speichert den Zustand. Die beiden <label>-
   Elemente sind mit ihr verknuepft (for="mehr-toggle") und wirken dadurch
   als Klickflaechen = unsere Buttons.
   WICHTIG: Der Text wird NICHT per display:none versteckt, sondern nur
   per max-height/overflow eingeklappt -> bleibt fuer Suchmaschinen
   vollstaendig lesbar (der Inhalt ist ja auch SEO-Text). */

/* Checkbox selbst unsichtbar, aber im DOM vorhanden */
.do-toggle-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* VARIABLE HOEHE: interpolate-size erlaubt dem Browser, von 0 nach auto
   zu animieren - also exakt zur tatsaechlichen Inhaltshoehe, unabhaengig
   von Desktop/Handy oder spaeteren Textaenderungen.
   Unterstuetzt: Chrome/Edge 129+, Safari 26+. Firefox noch nicht ->
   dort greift automatisch der px-Fallback weiter unten. */
:root {
    interpolate-size: allow-keywords;
}

/* Eingeklappter Zustand.
   transition-Zeiten bewusst getrennt: Aufklappen etwas langsamer (ease-out),
   Zuklappen schneller (ease-in) - sonst wirkt es traege. */
.do-toggle-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease-in !important;
}

/* Aufgeklappter Zustand (Checkbox angehakt).
   FIX: Der WYSIWYG-Editor packt die Checkbox beim Speichern in ein <p>,
   dadurch ist .do-toggle-content KEIN Geschwister mehr und der ~-Selektor
   greift nicht. Loesung ueber :has() am gemeinsamen Elternelement -
   funktioniert unabhaengig von der Verschachtelung.
   1. Regel = px-Fallback fuer Browser ohne interpolate-size.
   2. Regel = echte variable Hoehe (max-height:auto), gewinnt wo unterstuetzt. */
.link-content:has(.do-toggle-input:checked) .do-toggle-content,
#content:has(.do-toggle-input:checked) .do-toggle-content {
    max-height: 1800px !important;
    transition: max-height 0.5s ease-out !important;
}
@supports (interpolate-size: allow-keywords) {
    .link-content:has(.do-toggle-input:checked) .do-toggle-content,
    #content:has(.do-toggle-input:checked) .do-toggle-content {
        max-height: auto !important;
    }
}

/* Buttons: gleiche Optik wie die uebrigen Shop-Buttons ([10]/[15]).
   display:table + margin:auto zentriert den Button, ohne dass er ueber
   die volle Breite laeuft (wie es bei display:block der Fall waere). */
.do-toggle-btn {
    display: table !important;
    margin: 12px auto !important;
    background-color: #B3F7C7 !important;
    color: #002B0D !important;
    border: 1px solid #B3F7C7 !important;
    border-radius: 5px !important;
    padding: 0.625rem 0.9375rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.do-toggle-btn:hover {
    background-color: #9CF4B6 !important;
    border-color: #9CF4B6 !important;
}

/* Der vom Editor erzeugte <p>-Wrapper um die Checkbox soll keinen
   zusaetzlichen Abstand erzeugen. */
p:has(> .do-toggle-input) {
    margin-bottom: 0 !important;
}

/* Abmilderung fuer das Scroll-Problem am Handy: Beim Zuklappen schrumpft
   die Seite und der Browser behaelt die absolute Scroll-Position bei ->
   man landet weiter unten. Vollstaendig loesbar ist das nur mit
   JavaScript. scroll-margin sorgt aber dafuer, dass beim Ansteuern des
   Bereichs etwas Abstand nach oben bleibt (Header ueberdeckt nichts). */
.do-toggle-content,
p:has(> .do-toggle-input) {
    scroll-margin-top: 120px !important;
}

/* "Erfahre mehr" nur im eingeklappten Zustand zeigen.
   FIX 1: Vorher per display:none - schaltete SOFORT um, Button sprang
   beim Zuklappen rein, waehrend der Text noch zusammenklappte.
   FIX 2: Statt Verzoegerung laeuft der Button jetzt SYNCHRON zur
   Klapp-Animation (gleiche Dauer, gleiche Kurve) - dadurch verschmelzen
   beide Bewegungen optisch zu einer einzigen, ruhigen Bewegung. */
.do-toggle-open {
    overflow: hidden !important;
    max-height: 60px !important;
    opacity: 1 !important;
    transition: max-height 0.3s ease-in,
                opacity 0.3s ease-in,
                margin 0.3s ease-in,
                padding 0.3s ease-in,
                border-width 0.3s ease-in !important;
}
.link-content:has(.do-toggle-input:checked) .do-toggle-open,
#content:has(.do-toggle-input:checked) .do-toggle-open {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    transition: max-height 0.5s ease-out,
                opacity 0.5s ease-out,
                margin 0.5s ease-out,
                padding 0.5s ease-out,
                border-width 0.5s ease-out !important;
}

/* "Zuklappen"-Button blendet beim Zuklappen sanft mit aus, statt
   abrupt zu verschwinden - passt zum Rest der Bewegung. */
.do-toggle-close {
    opacity: 0 !important;
    transition: opacity 0.3s ease-in !important;
}
.link-content:has(.do-toggle-input:checked) .do-toggle-close,
#content:has(.do-toggle-input:checked) .do-toggle-close {
    opacity: 1 !important;
    transition: opacity 0.4s ease-out 0.15s !important;
}


/* #########################################################
   ##  [UNTEN] OVERRIDE-BLOCK – BLEIBT IMMER AM DATEIENDE  ##
   ##  Neue Abschnitte bitte OBERHALB einfuegen.           ##
   ######################################################### */

/* Kategorie-Karten (dzm): fest 358.5x358.5, zentriert.
   ACHTUNG: betrifft ALLE .dzm-category-card */
.dzm-category-card {
    width: 358.5px !important;
    height: 358.5px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.dzm-category-card picture,
.dzm-category-card picture img {
    width: 358.5px !important;
    height: 358.5px !important;
    object-fit: cover !important;
}