) */ .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
), + 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; } /*
optisch als Button gestaltet, gleiche Werte wie der
Checkout-Button (.btn-checkout.btn-block): #B3F7C7/#004d14, 5px Radius. */
#cbtest > div > div > div > div > div > p {
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 > div > div > div > div > div > p:hover {
background-color: #9CF4B6 !important;
border-color: #9CF4B6 !important;
}
/* ============ [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;
}
/* ============ [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 {
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;
}
/* 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 {
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;
}
/* 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