/* ============================================================
   monparfum · Concept 2 "Conversion Retail"
   Buy-Box neu gebaut (productdetails/details.tpl) — .mp-buybox
   Werte 1:1 aus dem gewählten Mockup (pdp_concept_2)
   ============================================================ */
/* Fonts + Layout */
:root{
  --mp-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mp-display:'Fraunces','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mp-wrap:1280px; --mp-radius:8px; --mp-radius-sm:5px; --mp-radius-lg:12px;
  --ease:cubic-bezier(.4,.16,.2,1);
}
/* ---- Konzept 1: Soft Rosé (Default) — Primär=Rosé/Pflaume, Gold nur Sterne ---- */
:root,
html[data-mp-concept="rose"]{
  --mp-bg:#f8f4f0; --mp-surface:#ffffff; --mp-cream:#f2ece6; --mp-cream2:#faf5ef; --mp-snow:#fdfbf8;
  --mp-gold:#a05161; --mp-dgold:#7d3a48; --mp-ink:#2a2320; --mp-ink2:#4a443d;
  --mp-muted:#7a6f68; --mp-soft:#a0958d; --mp-line:#e8dfd6; --mp-line2:#dacec3;
  --mp-accent:#bd9a7e; --mp-accent-soft:#efe4d7; --mp-sale:#b23a4a; --mp-star:#c2933a; --mp-ok:#3c7a52;
  --mp-topbar:#2a2320; --mp-topbar-ink:#efe1d6; --mp-hero:#efe5db;
}
/* ---- Konzept 2: Modern Pink ---- */
html[data-mp-concept="pink"]{
  --mp-bg:#f6f6f7; --mp-surface:#ffffff; --mp-cream:#f0eef1; --mp-cream2:#faf3f7; --mp-snow:#ffffff;
  --mp-gold:#d6256e; --mp-dgold:#b01a59; --mp-ink:#1b1b20; --mp-ink2:#43434a;
  --mp-muted:#6a6a72; --mp-soft:#9a9aa2; --mp-line:#e7e6ea; --mp-line2:#d7d6dd;
  --mp-accent:#e98bb6; --mp-accent-soft:#fbe6f0; --mp-sale:#d6256e; --mp-star:#e0a92e; --mp-ok:#2f8f5b;
  --mp-topbar:#1b1b20; --mp-topbar-ink:#ededf0; --mp-hero:#efe9ee;
}
/* ---- Konzept 3: Petrol & Türkis ---- */
html[data-mp-concept="petrol"]{
  --mp-bg:#f4f1ea; --mp-surface:#ffffff; --mp-cream:#ece8de; --mp-cream2:#eff5f2; --mp-snow:#ffffff;
  --mp-gold:#0f5f63; --mp-dgold:#0a484b; --mp-ink:#1f292b; --mp-ink2:#3c4749;
  --mp-muted:#5f6a6c; --mp-soft:#8a9395; --mp-line:#e2dccf; --mp-line2:#d0c9ba;
  --mp-accent:#2fa39c; --mp-accent-soft:#dcebe8; --mp-sale:#bf5a2e; --mp-star:#c79a3f; --mp-ok:#2f8060;
  --mp-topbar:#16292b; --mp-topbar-ink:#dfeae8; --mp-hero:#e6e9e1;
}

/* ---- Buy-Box-Rahmen ---- */

/* ---- Cross-Sell / Empfehlungs-Sektion ---- */
.recommendations{ max-width:1180px; margin:0 auto; }
.recommendations .x-sell,
.recommendations .x-related,
.recommendations .x-supplies{ padding-top:30px; border-top:1px solid var(--mp-line); margin-top:0; }
.recommendations .hr-sect{
  font-size:13px !important; font-weight:600 !important; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--mp-ink) !important; justify-content:flex-start !important; gap:10px; margin:0 0 22px;
}
.recommendations .hr-sect::before{
  content:'' !important; flex:0 0 auto !important; width:24px !important; height:2px !important;
  background:var(--mp-gold) !important; border:0 !important; margin:0 !important;
}
.recommendations .hr-sect::after{ display:none !important; }
/* Produktkarten ruhiger Rahmen */
.recommendations .product-wrapper,
.recommendations .producttitle a{ color:var(--mp-ink2); }
.recommendations .product .price,
.recommendations .product .producttitle a:hover{ color:var(--mp-ink); }

/* ---- Beschreibung: Calibri-Inline-Font entfernen (erbt Theme-Font) ---- */
font[face],
.tab-pane font,
.tab-pane font[face]{ font-family:inherit !important; }
.tab-pane p{ color:var(--mp-ink2); }

/* ---- Duftpyramide (per JS aus der Beschreibung) ---- */
.mp-pyramid-wrap{ margin:4px 0 20px; }
.mp-fam{ font-size:12px; color:var(--mp-muted); margin-bottom:14px; }
.mp-fam i{ color:var(--mp-gold); margin-right:5px; }
.mp-fam b{ color:var(--mp-ink); font-weight:600; }
.mp-pyramid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mp-note{ border:1px solid var(--mp-line); border-radius:11px; padding:15px; background:var(--mp-cream2); }
.mp-note-tag{ font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--mp-dgold); font-weight:700; display:flex; align-items:center; gap:7px; }
.mp-note-tag i{ font-size:12px; }
.mp-note-sub{ font-size:10px; color:var(--mp-muted); margin:4px 0 11px; }
.mp-note-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mp-note-chip{ font-size:11px; background:#fff; border:1px solid var(--mp-line); border-radius:18px; padding:5px 11px; color:var(--mp-ink2); font-weight:500; }
@media(max-width:600px){ .mp-pyramid{ grid-template-columns:1fr; } .mp-buybox .mp-trust{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   HEADER · NAVIGATION · SERVICELEISTE  (Child, echte NOVA-Klassen)
   ============================================================ */
/* ---- Serviceleiste (Topbar) – Marken-Dunkel + Gold-Akzente (echte ID #header-top-bar) ---- */
#header-top-bar.topbar-wrapper{ background:var(--mp-ink); border:0; font-size:12px; letter-spacing:.2px; }
#header-top-bar.topbar-wrapper, #header-top-bar .nav-link, #header-top-bar a, #header-top-bar #topbarNote,
#header-top-bar .dropdown-toggle, #header-top-bar .topbar-note{ color:#efe1d6; }
#header-top-bar .nav-link:hover, #header-top-bar a:hover, #header-top-bar .dropdown-toggle:hover{ color:#fff; }
#header-top-bar .fas, #header-top-bar .far, #header-top-bar .fab{ color:var(--mp-gold); }
#header-top-bar .nav-dividers > li + li::before{ border-color:rgba(255,255,255,.18); }

/* ---- Header-Fläche ---- */
header.sticky-top, header .navbar, .navbar.navbar-expand-lg{ background:var(--mp-snow); }
header.d-print-none{ border-bottom:1px solid var(--mp-line); }

/* ---- Logo ---- */
.navbar-brand{ font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:1.4px; color:var(--mp-ink); }
.navbar-brand .h1{ font-size:23px; letter-spacing:1.4px; margin:0; }

/* ---- Suche ---- */
.search-wrapper{ background:var(--mp-cream2); border:1px solid var(--mp-line); border-radius:5px; }
.search-wrapper:focus-within{ border-color:var(--mp-gold); }
.search-wrapper .ac_input{ background:transparent; color:var(--mp-ink); }
.search-wrapper .form-icon .fas, .search-wrapper .fa-search{ color:var(--mp-dgold); }
.search-wrapper .dropdown-body{ border:1px solid var(--mp-line); border-radius:0 0 6px 6px; }

/* ---- Konto / Wunschliste / Warenkorb ---- */
.nav-icons .nav-link{ color:var(--mp-ink); }
.nav-icons .nav-link:hover{ color:var(--mp-dgold); }
.nav-icons .nav-counter, .nav-icons .badge, .nav-icons .basket-item-count, .nav-icons [class*="-count"]{ background:var(--mp-gold); color:var(--mp-ink); }

/* ============================================================================
   HAUPT-MENÜBAND · Quiet-Luxury (Richtung B „Präzise Hairline", jurybestätigt)
   Feine 1px-Hairline DIREKT AM TEXT-SPAN (.nav-mobile-heading) — exakt textbreit,
   baseline-nah, kein schwebender Balken, kein ▾. Konstante Geometrie (transparente
   Linie im Ruhezustand) -> KEIN Layout-Shift beim Hover. Rosé nur bei Hover/Aktiv/Fokus.
   (text-decoration scheidet aus: .nav-link ist Flex-Container -> propagiert nicht.)
   ============================================================================ */
.navbar-nav.nav-scrollbar-inner .nav-link{
  position:relative; text-transform:none; letter-spacing:.35px;
  font-size:13.5px; font-weight:500; color:var(--mp-ink);
  padding-left:16px; padding-right:16px; text-decoration:none;
  transition:color .2s ease;
}
/* alten schwebenden 2px-Balken UND jeglichen ▾/Verbinder-Pseudo entfernen */
.navbar-nav.nav-scrollbar-inner .nav-link::after,
.navbar-nav.nav-scrollbar-inner .nav-link::before{ content:none !important; }
/* die Hairline: am Text-Span, immer vorhanden (transparent) -> Farbe animiert, keine Höhenänderung */
.navbar-nav.nav-scrollbar-inner .nav-link .nav-mobile-heading{
  display:inline-block; padding-bottom:3px;
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
/* Hover / offenes Mega-Menü: Text + Hairline gemeinsam auf Rosé */
.navbar-nav.nav-scrollbar-inner .nav-link:hover,
.navbar-nav.nav-scrollbar-inner .nav-item:hover > .nav-link,
.navbar-nav.nav-scrollbar-inner .nav-item.show > .nav-link,
.navbar-nav.nav-scrollbar-inner .nav-link[aria-expanded="true"]{ color:var(--mp-gold); }
.navbar-nav.nav-scrollbar-inner .nav-link:hover .nav-mobile-heading,
.navbar-nav.nav-scrollbar-inner .nav-item:hover > .nav-link .nav-mobile-heading,
.navbar-nav.nav-scrollbar-inner .nav-item.show > .nav-link .nav-mobile-heading,
.navbar-nav.nav-scrollbar-inner .nav-link[aria-expanded="true"] .nav-mobile-heading{ border-bottom-color:var(--mp-gold); }
/* Aktive Seite: ruhiges Ink + dauerhafte, dezente Hairline („du bist hier") */
.navbar-nav.nav-scrollbar-inner .nav-item.active > .nav-link,
.navbar-nav.nav-scrollbar-inner .nav-link.active{ color:var(--mp-ink); }
.navbar-nav.nav-scrollbar-inner .nav-item.active > .nav-link .nav-mobile-heading,
.navbar-nav.nav-scrollbar-inner .nav-link.active .nav-mobile-heading{ border-bottom-color:var(--mp-gold); }
.navbar-nav.nav-scrollbar-inner .nav-item.active > .nav-link:hover,
.navbar-nav.nav-scrollbar-inner .nav-link.active:hover{ color:var(--mp-gold); }
/* Tastatur-Fokus: klar sichtbar, ohne Layout-Shift */
.navbar-nav.nav-scrollbar-inner .nav-link:focus-visible{ outline:2px solid var(--mp-gold); outline-offset:3px; border-radius:3px; }
.navbar-nav.nav-scrollbar-inner .nav-link:focus:not(:focus-visible){ outline:none; }
/* etwaige NOVA-Caret/Chevron-Icons im Band ausblenden (defensiv) */
.navbar-nav.nav-scrollbar-inner .nav-link .caret,
.navbar-nav.nav-scrollbar-inner .nav-link i[class*="caret"],
.navbar-nav.nav-scrollbar-inner .nav-link i[class*="chevron"],
.navbar-nav.nav-scrollbar-inner .nav-link i[class*="angle"]{ display:none !important; }

/* ---- Mega-/Dropdown-Menü: Creme, Gold-Hover ---- */
.navbar-nav .dropdown-menu, .navbar-nav .mega-dropdown-menu, .nav-mobile-body{ background:var(--mp-snow); border:1px solid var(--mp-line); }
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu a:hover{ color:var(--mp-dgold); background:var(--mp-cream2); }
.navbar-nav .dropdown-header, .navbar-nav .dropdown-menu h4{ color:var(--mp-dgold); text-transform:uppercase; letter-spacing:.6px; font-size:11px; }

/* ---- Mobile Navigation (Offcanvas) ---- */
.nav-mobile-header{ border-bottom:1px solid var(--mp-line); }
.nav-mobile-header-name{ color:var(--mp-ink); font-weight:600; }
.burger-menu-wrapper .navbar-toggler-icon{ color:var(--mp-ink); }

/* ============================================================
   PRODUKTKARTEN  (productlist/item_box.tpl – echte NOVA-Klassen)
   Funktionen bleiben JTL: ribbon.tpl, price.tpl, rating.tpl, productlist_actions.tpl
   ============================================================ */
.productbox{ background:var(--mp-snow); border:1px solid var(--mp-line); border-radius:8px; overflow:hidden;
  transition:border-color .18s var(--ease,ease), transform .18s var(--ease,ease); box-shadow:none; }
.productbox.productbox-hover:hover{ border-color:var(--mp-line2); transform:translateY(-2px); box-shadow:none; }
.productbox .productbox-inner{ display:flex; flex-direction:column; }
/* Bildfläche ruhig */
.productbox-image .square-image, .productbox-images, .productbox-image .inner{ background:var(--mp-cream2); }
.productbox-images.list-gallery{ border-bottom:1px solid var(--mp-line); }
/* Marke-Eyebrow (per Override eingefügt; nur wenn vorhanden) */
.productbox .mp-card-brand{ font-size:11px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--mp-dgold); margin:2px 0 1px; line-height:1.2; }
/* Titel */
.productbox-title{ margin-top:6px; }
.productbox-title, .productbox-title a{ font-size:13.5px; font-weight:500; color:var(--mp-ink); line-height:1.35; }
.productbox-title a:hover{ color:var(--mp-dgold); }
/* Bewertung */
.productbox .fa-star, .productbox .stars, .productbox .product-rating .fas, .productbox [class*="rating"] .fas{ color:var(--mp-gold); }
.productbox .product-rating, .productbox .rating-count{ font-size:11.5px; color:var(--mp-text-soft,var(--mp-muted)); }
/* Preis / Streichpreis / Grundpreis */
.productbox .price, .productbox .price_wrapper .price{ color:var(--mp-ink); font-weight:700; font-size:16px; }
.productbox .price_wrapper{ background:transparent; border:0; padding:0; margin:0; }
.productbox .old-price, .productbox .strike-price, .productbox del, .productbox .price-old{ color:var(--mp-muted); font-weight:500; }
.productbox .base-price, .productbox .price-note{ font-size:11px; color:var(--mp-muted); }
/* Badges (echte Ribbons) ruhiger ins Theme */
.productbox .ribbon .text, .productbox .ribbon span, .productbox .badge{ font-weight:600; letter-spacing:.2px; }
.productbox .ribbon.ribbon-sale .text, .productbox .ribbon-discount .text{ background:var(--mp-sale); color:#fff; }
/* Quick-Actions (Wunschliste/Warenkorb on hover) */
.productbox-quick-actions .btn, .productbox-quick-actions a{ background:var(--mp-snow); border:1px solid var(--mp-line); color:var(--mp-ink2); border-radius:6px; }
.productbox-quick-actions .btn:hover, .productbox-quick-actions a:hover{ border-color:var(--mp-gold); color:var(--mp-dgold); }
.productbox .btn-add-to-cart, .productbox .productbox-add-to-cart .btn-primary{ background:var(--mp-gold); border-color:var(--mp-gold); color:var(--mp-ink); font-weight:600; }
.productbox .btn-add-to-cart:hover{ background:var(--mp-dgold); border-color:var(--mp-dgold); }

/* ============================================================
   GLOBALE SCHICHT — Mockup-weit (Typo/Container/Buttons/Footer)
   ============================================================ */
body{ font-family:var(--mp-font); background:var(--mp-bg); color:var(--mp-ink); }
main, #wrapper, .page-wrap{ background:var(--mp-bg); }
@media (min-width:1200px){ .container, .container-xl{ max-width:1300px; } }
a{ color:var(--mp-dgold); }
a:hover{ color:var(--mp-ink); }

/* Display-Serif für Sektions-/Seiten-/Hero-Überschriften (Produktnamen bleiben Sans) */
h1.h1, .page-header h1, .content-header h1, h2.h2,
.hr-sect, .product-stream-title, .opc-portlet h1, .opc-portlet h2,
.box-title, .sidebar .box .box-title, .category-header h1, .manufacturer-header h1{
  font-family:var(--mp-display); font-weight:600; letter-spacing:-.2px; color:var(--mp-ink);
}
/* Slider-/Sektions-Titel: links mit Gold/Primär-Strich (wie Mockup) */
.hr-sect{ display:flex; align-items:center; justify-content:flex-start; gap:12px; font-size:24px !important; text-transform:none; letter-spacing:-.2px; margin-bottom:20px; }
.hr-sect::before{ content:''; flex:0 0 auto; width:26px; height:2px; background:var(--mp-gold); border:0; }
.hr-sect::after{ display:none !important; }

/* ---- Buttons (NOVA) → Mockup ---- */
.btn{ border-radius:var(--mp-radius-sm); font-weight:600; letter-spacing:.1px; }
.btn-lg{ border-radius:var(--mp-radius-sm); }
.btn-primary{ background:var(--mp-gold); border-color:var(--mp-gold); color:#fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active{ background:var(--mp-dgold); border-color:var(--mp-dgold); color:#fff; box-shadow:none; }
.btn-secondary{ background:var(--mp-ink); border-color:var(--mp-ink); color:#fff; }
.btn-secondary:hover{ background:#000; border-color:#000; color:#fff; }
.btn-outline-primary{ color:var(--mp-gold); border-color:var(--mp-gold); }
.btn-outline-primary:hover{ background:var(--mp-gold); border-color:var(--mp-gold); color:#fff; }
.btn-outline-secondary{ color:var(--mp-ink2); border-color:var(--mp-line2); }
.btn-outline-secondary:hover{ background:transparent; border-color:var(--mp-gold); color:var(--mp-gold); }
.text-primary{ color:var(--mp-gold) !important; }
.badge-primary, .badge.badge-primary{ background:var(--mp-gold); color:#fff; }
.custom-control-input:checked ~ .custom-control-label::before,
.page-item.active .page-link{ background-color:var(--mp-gold); border-color:var(--mp-gold); }
.page-link{ color:var(--mp-dgold); }

/* ---- Sterne = Gold (auch wenn Komponenten --mp-gold/Primär nutzen) ---- */
.fa-star, .fas.fa-star, .product-rating .fas, .rating .fas, .rating .fa-star,
.productbox .fa-star, .mp-rate .fa-star, .stars, .reviews .stars, .rcard .stars,
.product-rating-stars .fas, .star-rating .fas{ color:var(--mp-star); }

/* ---- Formfelder im Theme-Stil ---- */
.form-control:focus, .custom-select:focus{ border-color:var(--mp-gold); box-shadow:0 0 0 .15rem rgba(160,81,97,.15); }

/* ============ FOOTER — dunkel wie Mockup ============ */
.footer, footer.footer, #footer, .footer-wrapper{ background:var(--mp-topbar); color:var(--mp-topbar-ink); border-top:0; }
.footer .footer-headline, .footer h3, .footer h4, .footer .h4, .footer .box-title, .footer .nav-headline{ color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:1px; font-weight:600; margin-bottom:14px; }
.footer a, .footer .nav-link, .footer p, .footer li{ color:rgba(255,255,255,.62); }
.footer a:hover, .footer .nav-link:hover{ color:#fff; }
.footer hr, .footer .border-top{ border-color:rgba(255,255,255,.12) !important; }
.footer .text-muted, .footer small{ color:rgba(255,255,255,.5) !important; }
.footer .form-control{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }
.footer .form-control::placeholder{ color:rgba(255,255,255,.5); }
.footer .social-links a, .footer .socialmedia a{ color:var(--mp-accent); border-color:rgba(255,255,255,.2); }
/* Copyright-Leiste */
.copyright, .footer-copyright, .sub-footer{ background:var(--mp-topbar); color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.12); }

/* ---- Newsletter-Box (Footer) ---- */
.footer .newsletter, .newsletter-wrapper{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--mp-radius-lg); }

/* ============ PRODUKTKARTEN — Feinschliff Richtung Mockup ============ */
.productbox{ background:var(--mp-surface) !important; border:1px solid var(--mp-line) !important; border-radius:var(--mp-radius) !important; }
.productbox.productbox-hover:hover{ border-color:var(--mp-line2) !important; box-shadow:0 6px 18px -12px rgba(42,35,32,.25); }
/* Bildfläche */
.productbox-images.list-gallery, .productbox-image .square-image{ background:var(--mp-cream2); }
.productbox-images.list-gallery{ border-bottom:1px solid var(--mp-line); margin-bottom:0; }
/* Karten-Body: Innenabstand wie Mockup */
.productbox .mp-card-brand{ padding:12px 13px 0; margin:0; }
.productbox-title{ padding:5px 13px 0; margin:0; }
.productbox .product-rating, .productbox [itemprop="aggregateRating"]{ padding:6px 13px 0; }
.productbox [itemprop="offers"]{ padding:6px 13px 13px; }
.productbox .price_wrapper{ margin:0; }
/* ============================================================================
   PRODUKT-RIBBONS (Suchspecial-Badges) · einheitliches, modernes Pill-Design
   Frontend rendert <div class="ribbon ribbon-<typ> productbox-ribbon">{Text}</div>.
   1 Bestseller · 2 Sonderangebote · 3 Neu · 4 Top-Angebote · 5 In Kürze ·
   6 Top bewertet · 7 Ausverkauft · 8 Auf Lager · 9 Vorbestellbar · custom
   Eine Designfamilie: gleiche Form/Typo, nur semantische Farbe + passendes Icon.
   ============================================================================ */
.productbox-ribbon, .ribbon.productbox-ribbon{
  position:absolute; top:10px; left:10px; z-index:3;
  display:inline-flex !important; align-items:center;
  font-family:var(--mp-font,'Inter',sans-serif) !important;
  font-size:11px !important; font-weight:600 !important; letter-spacing:.2px !important;
  text-transform:none !important; line-height:1.15; white-space:nowrap;
  padding:3px 8px !important; border-radius:3px !important;
  border:0 !important; box-shadow:none !important;
  background:var(--mp-accent-soft) !important; color:var(--mp-dgold) !important;
}
/* keine Icons / kein „Eselsohr"-Dreieck mehr (dezenter Badge wie Mockup) */
.productbox-ribbon::before, .productbox-ribbon::after,
.ribbon.productbox-ribbon::before, .ribbon.productbox-ribbon::after{ content:none !important; display:none !important; border:0 !important; width:0 !important; height:0 !important; }
/* semantische Varianten (Mockup: badge--soft / badge--new / badge--sale) */
.productbox-ribbon.ribbon-3, .productbox-ribbon.ribbon-9{ background:var(--mp-ink) !important; color:#fff !important; }                                   /* Neu / Vorbestellbar = dunkel */
.productbox-ribbon.ribbon-2, .productbox-ribbon.ribbon-4{ background:color-mix(in srgb,var(--mp-sale) 14%,#fff) !important; color:var(--mp-sale) !important; } /* Sonderangebot/Top = Sale */
.productbox-ribbon.ribbon-7{ background:var(--mp-cream) !important; color:var(--mp-muted) !important; }                                                   /* Ausverkauft = gedämpft */
.productbox-ribbon.ribbon-8{ background:#e3efe7 !important; color:#3c7a52 !important; }                                                                    /* Auf Lager = soft grün */

/* ============================================================================
   PRODUKTKARTE · 1:1 zum Mockup (.mp-card) – ersetzt die NOVA-productbox-Optik
   ============================================================================ */
.productbox.mp-card{ position:relative; background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); overflow:hidden; display:flex; flex-direction:column; padding:0; margin:0; box-shadow:none; transition:border-color .18s,transform .18s,box-shadow .18s; }
.productbox.mp-card:hover{ border-color:var(--mp-line2); box-shadow:0 10px 26px -16px rgba(42,35,32,.3); transform:translateY(-2px); }
.mp-card__form{ display:flex; flex-direction:column; flex:1; margin:0; }
.mp-card__media{ position:relative; aspect-ratio:1/1; background:#fff; display:grid; place-items:center; border-bottom:1px solid var(--mp-line); overflow:hidden; }
.mp-card__medialink{ display:block; width:100%; height:100%; }
.mp-card__media img, .mp-card__media .mp-card__img{ width:100% !important; height:100% !important; object-fit:contain !important; padding:9%; }
.mp-card__actions{ position:absolute; top:9px; right:9px; z-index:4; }
.mp-card__actions .product-actions{ margin:0; padding:0; background:none; border:0; box-shadow:none; display:block; }
.mp-card__actions .comparelist-button, .mp-card__actions .compare, .mp-card__actions .compare-button{ display:none !important; }
.mp-card__actions .wishlist, .mp-card__actions .wishlist-button{ width:36px !important; height:36px !important; min-width:0 !important; padding:0 !important; border-radius:50% !important; background:var(--mp-surface) !important; border:1px solid var(--mp-line) !important; color:var(--mp-muted) !important; display:grid !important; place-items:center !important; box-shadow:none !important; transition:color .15s,border-color .15s; }
.mp-card__actions .wishlist:hover, .mp-card__actions .wishlist.on-list{ color:var(--mp-gold) !important; border-color:var(--mp-gold) !important; }
.mp-card__actions .fa-heart{ font-size:16px; }
.mp-card__body{ padding:13px 14px 15px; display:flex; flex-direction:column; flex:1; }
.mp-card__brand{ font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--mp-muted); font-weight:600; }
.mp-card__name{ font-size:14px; font-weight:500; margin:4px 0 2px; line-height:1.35; color:var(--mp-ink); display:block; text-decoration:none; }
.mp-card__name:hover{ color:var(--mp-gold); text-decoration:none; }
.mp-card__type{ font-size:12px; color:var(--mp-soft); }
.mp-card__rate{ display:flex; align-items:center; gap:6px; margin:8px 0; }
.mp-card__rate .stars{ color:var(--mp-star); letter-spacing:1.5px; font-size:12px; line-height:1; }
.mp-card__rate .stars .far{ color:var(--mp-star); opacity:.4; }
.mp-card__rate small{ color:var(--mp-soft); font-size:11.5px; }
.mp-card__foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding-top:8px; }
.mp-card__prices{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.mp-card__prices .price{ font-weight:700 !important; font-size:18px !important; color:var(--mp-ink) !important; line-height:1.1; }
.mp-card__prices .price.productbox-price{ font-size:18px !important; }
.mp-card__prices .price-note, .mp-card__prices .price_label, .mp-card__prices .price-noted{ font-size:11px !important; color:var(--mp-soft) !important; font-weight:400 !important; }
.mp-card__prices .price_wrapper{ margin:0; }
.mp-card__prices .tax-info, .mp-card__prices .shipping-info{ display:none; }
.mp-card__add{ width:42px; height:42px; border-radius:var(--mp-radius-sm); background:var(--mp-gold); color:#fff; display:grid; place-items:center; flex:0 0 auto; transition:background .15s; border:0; cursor:pointer; text-decoration:none; }
.mp-card__add:hover{ background:var(--mp-dgold); color:#fff; }
.mp-card__add i{ font-size:16px; }
/* Schnellansicht-Button (Hover, gleitet ein – 1:1 Mockup .card__quick) */
@media (hover:none){ .mp-card__quick{ display:none; } }
/* Schnellansicht-Modal */

/* Quick-Actions (Hover) im Theme-Stil */
.productbox-quick-actions .btn, .productbox-quick-actions a.btn{ background:var(--mp-surface); border:1px solid var(--mp-line2); color:var(--mp-ink2); border-radius:6px; }
.productbox-quick-actions .btn:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }

/* ---- Slider-Gruppen-Tabs (Eau de Toilette/Parfum…) dezenter ---- */
.product-slider .nav-tabs .nav-link, .slider-tab, .product-slider-tabs .nav-link{ background:var(--mp-cream); color:var(--mp-ink2); border:1px solid var(--mp-line); border-radius:20px; font-size:11px; text-transform:none; letter-spacing:.2px; }
.product-slider .nav-tabs .nav-link.active, .product-slider-tabs .nav-link.active{ background:var(--mp-gold); color:#fff; border-color:var(--mp-gold); }

/* ---- Markenboxen (Home „Marken") → Mockup-Brandtile ---- */
.manufacturer-box, .hersteller-box, .brand-box, .manufacturer-slider .item a{ display:flex; align-items:center; justify-content:center; min-height:84px; background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); font-family:var(--mp-display); transition:border-color .15s,color .15s; }
.manufacturer-box:hover, .brand-box:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }

/* ---- Notify-Box: lokale --mp-* der Inline-CSS auf Konzept-Tokens mappen ---- */
:root .mp-bis, html[data-mp-concept="rose"] .mp-bis{ --mp-gold:#a05161; --mp-gold-deep:#7d3a48; --mp-gold-tint:#faf5ef; --mp-line:#e8dfd6; }
html[data-mp-concept="pink"] .mp-bis{ --mp-gold:#d6256e; --mp-gold-deep:#b01a59; --mp-gold-tint:#faf3f7; --mp-line:#e7e6ea; }
html[data-mp-concept="petrol"] .mp-bis{ --mp-gold:#0f5f63; --mp-gold-deep:#0a484b; --mp-gold-tint:#eff5f2; --mp-line:#e2dccf; }
.mp-bis__submit{ color:#fff !important; background:#2a2320 !important; border-radius:0 !important; }
.mp-bis__submit:hover{ background:#463f39 !important; }

/* ============================================================
   STARTSEITE — Hero / USP-Reihe / Duftwelten (Mockup-Sektionen)
   ============================================================ */
.mp-home{ padding-top:24px; }
.mp-home .mp-block-head{ margin:8px 0 18px; }
.mp-home .mp-block-kicker{ font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--mp-gold); font-weight:600; }
.mp-home .mp-block-title{ font-family:var(--mp-display); font-size:28px; font-weight:600; margin-top:5px; letter-spacing:-.2px; color:var(--mp-ink); }

/* Hero */
.mp-hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; background:var(--mp-hero); border:1px solid var(--mp-line); border-radius:var(--mp-radius-lg); overflow:hidden; padding:46px 48px; margin:4px 0 8px; }
.mp-hero__kicker{ font-size:12px; text-transform:uppercase; letter-spacing:1.6px; color:var(--mp-gold); font-weight:600; }
.mp-hero__title{ font-family:var(--mp-display); font-size:clamp(32px,4.2vw,52px); font-weight:500; line-height:1.06; margin:14px 0 16px; letter-spacing:-.5px; color:var(--mp-ink); }
.mp-hero__title em{ font-style:italic; color:var(--mp-gold); }
.mp-hero__lead{ font-size:16.5px; color:var(--mp-muted); max-width:46ch; margin-bottom:22px; line-height:1.6; }
.mp-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.mp-hero__cta .btn{ min-height:46px; padding:13px 22px; }
.mp-hero__usp{ display:flex; gap:22px; margin:24px 0 0; padding:0; list-style:none; flex-wrap:wrap; }
.mp-hero__usp li{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--mp-muted); }
.mp-hero__usp .fas{ color:var(--mp-ok); }
.mp-hero__visual{ position:relative; min-height:280px; display:flex; align-items:flex-end; justify-content:center; gap:18px; }
.mp-hero__bottle{ border-radius:6px 6px 9px 9px; position:relative; display:block; }
.mp-hero__bottle::before{ content:''; position:absolute; left:50%; top:-14px; transform:translateX(-50%); width:32%; height:15px; background:var(--mp-dgold); border-radius:3px; }
.mp-hero__bottle--a{ width:92px; height:190px; background:linear-gradient(180deg,var(--mp-accent),var(--mp-gold)); }
.mp-hero__bottle--b{ width:76px; height:238px; background:linear-gradient(180deg,var(--mp-surface),var(--mp-accent)); }
.mp-hero__bottle--c{ width:68px; height:158px; background:linear-gradient(180deg,var(--mp-gold),var(--mp-dgold)); }
/* Hero mit hochgeladenem Bild (Backend: monPARFUM · Hero → Hero-Bild) */
.mp-hero__visual--img{ min-height:0; align-items:stretch; }
.mp-hero__img{ width:100%; height:100%; min-height:300px; max-height:440px; object-fit:cover; border-radius:var(--mp-radius-lg); display:block; box-shadow:0 18px 40px -22px rgba(42,35,32,.45); }

/* USP-Reihe */
.mp-usp-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:22px 0 6px; padding:0; list-style:none; }
.mp-usp-row li{ display:flex; align-items:center; gap:13px; background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); padding:15px 16px; }
.mp-usp-row .fas{ color:var(--mp-gold); font-size:20px; flex:0 0 auto; width:24px; text-align:center; }
.mp-usp-row strong{ display:block; font-size:14px; font-weight:600; color:var(--mp-ink); }
.mp-usp-row span{ font-size:12.5px; color:var(--mp-muted); }

/* Duftwelten */
.mp-worlds-sec{ margin:34px 0 8px; }
.mp-worlds{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.mp-world{ position:relative; min-height:168px; border-radius:var(--mp-radius-lg); border:1px solid var(--mp-line); padding:20px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:#fff; transition:transform .18s var(--ease,ease); }
.mp-world:hover{ transform:translateY(-3px); color:#fff; }
.mp-world::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.5)); }
.mp-world__k{ position:relative; z-index:1; font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.9; }
.mp-world__t{ position:relative; z-index:1; font-family:var(--mp-display); font-size:21px; font-weight:600; margin-top:3px; }
.mp-world--floral{ background:linear-gradient(150deg,#c98aa0,#7d3a48); }
.mp-world--wood{ background:linear-gradient(150deg,#a9885f,#5b4327); }
.mp-world--orient{ background:linear-gradient(150deg,#b9763f,#5e2f17); }
.mp-world--fresh{ background:linear-gradient(150deg,#5ba6a0,#1f5d5a); }
.mp-world--img{ background-size:cover !important; background-position:center !important; background-repeat:no-repeat; }

@media (max-width:900px){
  .mp-hero{ grid-template-columns:1fr; padding:30px 24px; }
  .mp-hero__visual{ min-height:200px; justify-content:flex-start; }
  .mp-usp-row{ grid-template-columns:repeat(2,1fr); }
  .mp-worlds{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .mp-usp-row{ grid-template-columns:1fr; }
  .mp-hero__title{ font-size:30px; }
}

/* ---- Startseite: Hero/USP/Duftwelten oben (über OPC-Slider heben) ---- */
@supports selector(:has(*)){
  #main-wrapper:has(.mp-home){ display:flex; flex-direction:column; }
  #main-wrapper:has(.mp-home) > #content-wrapper{ order:-1; }
}

/* ============================================================
   FILTER-SIDEBAR · TOOLBAR · WARENKORB-DRAWER · MARKEN · KONTO
   ============================================================ */
/* ---- Filter-Sidebar (.sidepanel-left) ---- */
.sidepanel-left .filterbox, .sidepanel-left .box, .sidepanel-left .facet, .sidepanel-left .filter-box{ background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); margin-bottom:14px; overflow:hidden; }
.sidepanel-left .box-title, .sidepanel-left .filter-title, .sidepanel-left .facet-title, .sidepanel-left .card-header, .sidepanel-left h3{ font-family:var(--mp-font); font-size:13px !important; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:var(--mp-ink); padding:13px 14px; background:transparent; border-bottom:1px solid var(--mp-line); }
.sidepanel-left .custom-control-label, .sidepanel-left .filter-option, .sidepanel-left label{ font-size:13.5px; color:var(--mp-ink2); }
.sidepanel-left a, .sidepanel-left .nav-link{ color:var(--mp-ink2); }
.sidepanel-left a:hover{ color:var(--mp-gold); }
.sidepanel-left .custom-control-input:checked ~ .custom-control-label::before{ background:var(--mp-gold); border-color:var(--mp-gold); }
.sidepanel-left .badge, .sidepanel-left .count{ background:var(--mp-cream); color:var(--mp-muted); font-weight:500; }

/* ---- Toolbar (Sortierung/Ansicht/Anzahl/aktive Filter) ---- */
.search-filter-options, .productlist-config, .result-options, .product-filter-bar{ background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); padding:10px 14px; }
.active-filter, .selected-filter, .filter-active-item, .badge-filter{ background:var(--mp-cream); color:var(--mp-ink2); border:1px solid var(--mp-line); border-radius:20px; }
.custom-select, select.form-control{ border-radius:var(--mp-radius-sm); border-color:var(--mp-line2); }
.pagination .page-item.active .page-link{ background:var(--mp-gold); border-color:var(--mp-gold); color:#fff; }
.pagination .page-link{ color:var(--mp-dgold); border-color:var(--mp-line); }

/* ---- Mini-Warenkorb / Drawer (.cart-icon-dropdown) ---- */
.cart-icon-dropdown .dropdown-menu{ width:min(390px,94vw); border:1px solid var(--mp-line); border-radius:0; box-shadow:0 0 40px -10px rgba(42,35,32,.3); padding:0; }
.cart-icon-dropdown .dropdown-menu .dropdown-header, .cart-dropdown-header{ background:var(--mp-surface); border-bottom:1px solid var(--mp-line); padding:16px 18px; font-size:16px; font-weight:600; color:var(--mp-ink); text-transform:none; }
.cart-dropdown-item, .basket-item, .cart-item{ border-bottom:1px solid var(--mp-line); padding:14px 18px; }
.cart-dropdown-item .price, .basket-item .price{ color:var(--mp-ink); font-weight:700; }
.cart-dropdown-footer, .cart-summary, .basket-dropdown-footer{ background:var(--mp-cream2); border-top:1px solid var(--mp-line); padding:16px 18px; }
.cart-icon-dropdown .btn-primary{ background:var(--mp-gold); border-color:var(--mp-gold); }
.cart-icon-dropdown .badge, .cart-quantity, .basket-item-count{ background:var(--mp-gold); color:#fff; }

/* ---- Marken-Übersicht / A–Z (page/manufacturers.tpl) ---- */
.manufacturer-overview .manufacturer, .manufacturer-list .manufacturer-item, .az-list a, .manufacturer-grid a{ background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); font-family:var(--mp-display); transition:border-color .15s,color .15s; }
.manufacturer-overview .manufacturer:hover, .az-list a:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }
.az-navigation, .alphabet-nav, .character-nav{ display:flex; flex-wrap:wrap; gap:5px; }
.az-navigation a, .alphabet-nav a, .character-nav a{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--mp-radius-sm); font-weight:600; color:var(--mp-ink); }
.az-navigation a:hover, .alphabet-nav a:hover{ background:var(--mp-gold); color:#fff; }

/* ---- Kundenkonto / Checkout (Karten/Steps) ---- */
.account-content .box, .account .card, .checkout-step, .order-step, .panel-account{ background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); }
.checkout-steps .step.active, .progress-step.active, .nav-checkout .active{ color:var(--mp-gold); }
.checkout-steps .step.active .step-number{ background:var(--mp-gold); border-color:var(--mp-gold); color:#fff; }
.card-header{ background:var(--mp-cream2); border-bottom:1px solid var(--mp-line); }

/* ---- Mobile Filter-Drawer-Trigger ---- */
.filter-collapsible-control, .filter-toggle-btn{ color:var(--mp-gold); border-color:var(--mp-line2); }

/* ============================================================
   STARTSEITE — Produkt-Grids / Block-Köpfe / Newsletter / OPC aus
   ============================================================ */
.mp-home-block{ padding:36px 0 0; }
.mp-home-block .mp-block-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 22px; }
.mp-home-block .mp-block-kicker{ font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--mp-gold); font-weight:600; }
.mp-home-block .mp-block-kicker--sale{ color:var(--mp-sale); }
.mp-home-block .mp-block-title{ font-family:var(--mp-display); font-size:28px; font-weight:600; margin-top:5px; color:var(--mp-ink); letter-spacing:-.2px; }
.mp-block-more{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--mp-gold); white-space:nowrap; }
.mp-block-more:hover{ color:var(--mp-dgold); }
.mp-grid{ display:grid; grid-template-columns:repeat(var(--mp-grid-cols,4),1fr); gap:18px; }
@media(max-width:1100px){ .mp-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .mp-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
/* Slider-Markup im Grid neutralisieren (item_box steht jetzt direkt im Grid) */
.mp-grid .productbox{ width:auto; margin:0; }

/* Newsletter-Banner */
.mp-newsletter{ display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--mp-cream); border:1px solid var(--mp-line); border-radius:var(--mp-radius-lg); padding:32px 40px; margin:42px 0 10px; flex-wrap:wrap; }
.mp-newsletter__title{ font-family:var(--mp-display); font-size:26px; color:var(--mp-ink); }
.mp-newsletter__text p{ color:var(--mp-muted); margin-top:6px; }
.mp-newsletter__text .mp-newsletter__note{ font-size:12.5px; line-height:1.45; margin-top:8px; max-width:62ch; }

/* Startseite: OPC-Inhalte (Gender-Slider/Brand/Trust) ausblenden – Mockup hat sie nicht */
@supports selector(:has(*)){
  #main-wrapper:has(.mp-home) .opc-Container{ display:none; }
}

/* ---- Geschenkset-Banner ---- */
.mp-giftbanner{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--mp-line); border-radius:var(--mp-radius-lg); overflow:hidden; background:var(--mp-surface); margin:38px 0 0; }
.mp-giftbanner__text{ padding:40px; }
.mp-giftbanner__title{ font-family:var(--mp-display); font-size:28px; color:var(--mp-ink); margin:8px 0 12px; }
.mp-giftbanner__text p{ color:var(--mp-muted); margin-bottom:22px; max-width:40ch; }
.mp-giftbanner__art{ position:relative; background:var(--mp-hero); min-height:230px; display:flex; align-items:flex-end; justify-content:center; gap:16px; padding-bottom:24px; }
.mp-giftbanner__art--img{ background-size:cover; background-position:center; background-repeat:no-repeat; min-height:260px; }
.mp-giftbanner__b{ border-radius:5px 5px 7px 7px; }
.mp-giftbanner__b--1{ width:80px; height:150px; background:linear-gradient(180deg,var(--mp-accent),var(--mp-gold)); }
.mp-giftbanner__b--2{ width:64px; height:110px; background:linear-gradient(180deg,var(--mp-surface),var(--mp-accent)); }

/* ---- Bewertungen-Reihe ---- */
.mp-reviews-sec{ margin:40px 0 8px; }
.mp-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mp-qreview{ background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); padding:20px; margin:0; }
.mp-qstars{ color:var(--mp-star); letter-spacing:1px; }
.mp-qreview blockquote{ font-size:14.5px; line-height:1.6; margin:10px 0; color:var(--mp-ink); }
.mp-qreview figcaption{ font-size:12.5px; color:var(--mp-muted); }
@media(max-width:760px){ .mp-giftbanner{ grid-template-columns:1fr; } .mp-giftbanner__art{ min-height:150px; order:-1; } .mp-reviews{ grid-template-columns:1fr; } }

/* ---- Markenwand (Home) ---- */
.mp-brands-sec{ margin-top:36px; }
.mp-brandwall{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.mp-brandtile{ display:flex; align-items:center; justify-content:center; min-height:84px; background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:var(--mp-radius); font-family:var(--mp-display); font-size:18px; letter-spacing:.4px; color:var(--mp-ink); text-align:center; padding:12px; line-height:1.2; transition:border-color .15s,color .15s; }
.mp-brandtile:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }
@media(max-width:1100px){ .mp-brandwall{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:560px){ .mp-brandwall{ grid-template-columns:repeat(3,1fr); } .mp-brandtile{ min-height:64px; font-size:14px; } }

/* ============================================================
   FOOTER 1:1 nach Mockup (mp-footer, echte Boxen/Links)
   ============================================================ */
.mp-footer{ background:var(--mp-topbar); color:var(--mp-topbar-ink); margin-top:48px; }
.mp-footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:30px; padding:44px 24px 30px; }
.mp-footer__brand .mp-flogo{ font-family:var(--mp-display); font-size:20px; letter-spacing:1.5px; color:#fff; display:inline-block; }
.mp-footer__brand .mp-flogo b{ color:var(--mp-accent); font-weight:600; }
.mp-ftag{ font-size:13px; color:rgba(255,255,255,.6); margin:14px 0; max-width:34ch; line-height:1.6; }
.mp-fsocial{ display:flex; gap:12px; }
.mp-fsocial a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; color:var(--mp-accent); font-size:16px; }
.mp-fsocial a:hover{ border-color:var(--mp-accent); color:#fff; }
/* Footer-Box-Inhalt (echte Linkgruppen) in Mockup-Spaltenoptik */
.mp-footer__col{ min-width:0; }
.mp-footer__col .box, .mp-footer__col [id^="sidebox"]{ background:transparent; border:0; padding:0; margin:0; }
.mp-footer__col .collapse{ display:block !important; height:auto !important; }
.mp-footer__col .box-normal-link, .mp-footer__col .dropdown-toggle{ pointer-events:none; }
.mp-footer__col .box-normal-link::after, .mp-footer__col .dropdown-toggle::after{ display:none !important; }
.mp-footer__col .productlist-filter-headline,
.mp-footer__col .box-title, .mp-footer__col .box-normal-link, .mp-footer__col h3, .mp-footer__col .h3, .mp-footer__col .nav-headline{
  font-size:12px !important; text-transform:uppercase; letter-spacing:1px; color:#fff !important; margin:0 0 14px; font-weight:600; padding:0; display:block; }
.mp-footer__col a, .mp-footer__col .nav-link, .mp-footer__col li a{ display:block; font-size:13.5px; color:rgba(255,255,255,.62) !important; padding:5px 0; background:transparent; }
.mp-footer__col a:hover, .mp-footer__col .nav-link:hover{ color:#fff !important; }
.mp-footer__col ul, .mp-footer__col .nav{ list-style:none; padding:0; margin:0; flex-direction:column; }
/* Zahlung & Versand */
.mp-footer__pay h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#fff; margin-bottom:14px; font-weight:600; }
.mp-paychips{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.mp-paychip{ display:inline-flex; align-items:center; justify-content:center; height:34px; min-width:46px; padding:0 13px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.13); border-radius:4px; color:rgba(255,255,255,.6); transition:color .18s, border-color .18s, background .18s; }
.mp-paychip svg{ height:19px; width:auto; display:block; }
.mp-paychip--paypal svg{ height:21px; }
.mp-paychip--mc svg{ height:22px; }
.mp-paychip--inv svg{ height:21px; }
.mp-paychip--dpd svg{ height:20px; }
.mp-paychip:hover{ color:#fff; border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.08); }
/* Alt-Fallback (falls Text statt Icon) */
.mp-paychips span:not(.mp-paychip){ font-size:11px; font-weight:600; color:#2a2320; background:rgba(255,255,255,.85); padding:4px 9px; border-radius:3px; }
/* Copyright */
.mp-footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding:16px 24px; }
.mp-footer__bottom small{ font-size:12px; color:rgba(255,255,255,.5); }
@media (max-width:1100px){ .mp-footer__top{ grid-template-columns:1.4fr 1fr 1fr; } .mp-footer__pay{ grid-column:1/-1; } }
@media (max-width:680px){ .mp-footer__top{ grid-template-columns:1fr 1fr; padding:32px 16px 24px; } .mp-footer__brand{ grid-column:1/-1; } }

/* Footer-Top: Flex statt fixes Grid (passt sich an Box-Anzahl an, keine Lücken) */
.mp-footer__top{ display:flex !important; flex-wrap:wrap; align-items:flex-start; gap:30px; }
.mp-footer__brand{ flex:1.6 1 240px; }
.mp-footer .mp-footer__col{ flex:1 1 150px; }
.mp-footer .mp-footer__pay{ flex:1.1 1 170px; }

/* ============================================================
   HEADER 1:1 nach Mockup — Topbar / Logo / Nav / Icon-Labels
   ============================================================ */
/* Topbar: dunkel, Service-Items links (flex-row-reverse aufheben) */
#header-top-bar.topbar-wrapper{ background:var(--mp-topbar) !important; border:0; min-height:38px; }
#header-top-bar > div{ flex-direction:row !important; align-items:center; }
.mp-service{ display:flex !important; flex-wrap:nowrap !important; flex:0 1 auto; min-width:0; gap:22px; align-items:center; margin:0; padding:0; list-style:none; }
.mp-service li{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--mp-topbar-ink); white-space:nowrap; }
.mp-service .fas{ color:var(--mp-accent); font-size:11px; }
.mp-topbar-right{ margin-left:auto !important; margin-bottom:0; }
#header-top-bar a, #header-top-bar .nav-link, #header-top-bar .dropdown-toggle, #header-top-bar .topbar-main{ color:var(--mp-topbar-ink) !important; }
#header-top-bar a:hover{ color:#fff !important; }
#header-top-bar .fas, #header-top-bar .far{ color:var(--mp-accent); }

/* Theme-/Farbwechsler (rechts in der Serviceleiste, wie Mockup) */
.mp-topbar-end{ display:flex !important; align-items:center; gap:20px; margin-left:auto !important; margin-bottom:0; }
.mp-topbar-end .mp-topbar-right{ margin-left:0 !important; margin-bottom:0; }
.theme-switch{ display:flex; align-items:center; gap:8px; }
.theme-switch__lbl{ opacity:.6; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--mp-topbar-ink); }
.theme-dot{ display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:1; color:var(--mp-topbar-ink); opacity:.65; padding:4px 8px; border:0; background:transparent; border-radius:20px; cursor:pointer; transition:opacity .15s, background .15s; }
.theme-dot span{ width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:inline-block; flex:0 0 auto; }
.theme-dot:hover{ opacity:1; }
.theme-dot.is-on{ opacity:1; background:rgba(255,255,255,.12); }

/* Logo mon + PARFUM */
.navbar-brand.mp-logo .mp-logo-text{ font-family:var(--mp-display) !important; font-size:25px; font-weight:500; letter-spacing:1.4px; color:var(--mp-ink); text-transform:none; }
.navbar-brand.mp-logo .mp-logo-text b{ color:var(--mp-gold); font-weight:600; }
/* Bild-Logo (Backend: monPARFUM · Header & Logo → Logo-Modus = Bild-Logo) */
.navbar-brand.mp-logo .mp-logo-img{ height:48px; max-height:60px; width:auto; display:block; }
/* Tagline unter dem Logo */
.logo-wrapper.mp-logo-has-tag{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.mp-logo-tagline{ font-family:var(--mp-font); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mp-muted); margin-top:2px; }
/* Demo-/Vorschau-Banner (Backend: monPARFUM · Extras) – nur Staging */
.mp-demo-ribbon{ position:fixed; top:18px; left:-46px; z-index:9990; transform:rotate(-45deg); background:var(--mp-ink); color:#fff; font:600 11px/1 var(--mp-font); letter-spacing:1.5px; text-transform:uppercase; padding:7px 56px; box-shadow:0 4px 14px -4px rgba(0,0,0,.4); pointer-events:none; }

/* Hauptzeile: Logo links, Suche flex, Icons rechts (wie Mockup) */
.hide-navbar .navbar{ justify-content:space-between !important; }

/* Kategorie-Nav linksbündig */
.menu-center-center .navbar-nav.nav-scrollbar-inner,
.menu-center-left .navbar-nav.nav-scrollbar-inner{ justify-content:flex-start !important; margin-left:0 !important; }

/* Icon-Labels (Konto/Merken/Warenkorb) wie Mockup */
.nav-icons > li{ position:relative; }
.nav-icons .account-icon-dropdown > .dropdown-toggle,
.nav-icons .nav-link{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:21px; line-height:1; }
.nav-icons .account-icon-dropdown > .dropdown-toggle::after{ content:'Konto'; font-size:10.5px; color:var(--mp-muted); font-family:var(--mp-font); }
.nav-icons li.compare-icon-dropdown .nav-link::after,
.nav-icons .wishlist-icon-dropdown .nav-link::after{ content:'Merken'; font-size:10.5px; color:var(--mp-muted); }
.nav-icons .cart-icon-dropdown > .dropdown-toggle::after{ content:'Warenkorb'; font-size:10.5px; color:var(--mp-muted); font-family:var(--mp-font); display:block; }
.nav-icons .dropdown-toggle::after{ border:0 !important; }

/* Icon-Labels korrekt (Account/Wish/Cart) – echte Selektoren */
.nav-icons .nav-link, .nav-icons .nav-link-custom{ display:flex !important; flex-direction:column; align-items:center; gap:3px; font-size:20px; line-height:1; color:var(--mp-ink); }
.nav-icons .nav-link:hover{ color:var(--mp-gold); }
.nav-icons .nav-link::after, .nav-icons .nav-link-custom::after{ font-size:10.5px !important; color:var(--mp-muted) !important; font-family:var(--mp-font); font-weight:400; letter-spacing:.1px; border:0 !important; margin:0 !important; content:''; }
.nav-icons .account-icon-dropdown > .nav-link::after{ content:'Konto'; }
.nav-icons li:not(.account-icon-dropdown):not(.cart-icon-dropdown):not(.d-none) > .nav-link::after{ content:'Merken'; }
.nav-icons .cart-icon-dropdown > .nav-link::after{ content:'Warenkorb'; }
.nav-icons .cart-icon-dropdown .nav-link .badge, .nav-icons .nav-link .badge{ font-size:9px; }

/* Icon-Labels NUR Desktop – auf Mobil kompakte Icons (wie Mockup) */
@media (max-width:991.98px){
  .nav-icons .nav-link, .nav-icons .nav-link-custom{ flex-direction:row !important; gap:0; font-size:inherit; }
  .nav-icons .nav-link::after, .nav-icons .nav-link-custom::after{ content:'' !important; display:none !important; }
}

/* ============================================================
   HEADER-FIX · 1:1 Mockup-Angleich (Topbar-Wrap / Nav-Box / Suche / Cart)
   Farben über --mp-* gebunden → alle 3 Konzepte bleiben funktional.
   ============================================================ */

/* ---- FIX #1: Service-Items IMMER auf einer Zeile ---- */
#header-top-bar .mp-service li{ white-space:nowrap; flex:0 0 auto; }
.mp-topbar-end{ flex:0 0 auto; }
/* Engere Topbar (Topbar erst ab lg sichtbar): Theme-Switch kompakt = nur Punkte,
   genau wie das Mockup bei knappem Platz – verhindert das Umbrechen der Service-Leiste. */
@media (max-width:1199.98px){
  .theme-switch__lbl{ display:none; }
  .theme-dot{ font-size:0; gap:0; padding:5px; }
  .theme-dot span{ width:16px; height:16px; }
  .mp-topbar-end{ gap:10px; }
}

/* ---- FIX #2: Kategorie-Nav linksbündig + KEINE Karten-Box (wie Mockup) ---- */
.navbar-nav.nav-scrollbar-inner{ padding-left:0 !important; margin-left:0 !important; }
.navbar-nav.nav-scrollbar-inner > li:first-child{ margin-left:0 !important; }
.navbar-nav.nav-scrollbar-inner > li.nav-item{ margin-left:0; }
/* NOVA zeichnet die Menüzeile als umrandete „Karte" (Rahmen/Radius/Schatten) –
   das Mockup hat nur eine feine Trennlinie unter dem Header. Box auflösen: */
nav.navbar, .navbar.navbar-expand-lg,
.nav-multiple-row, .navbar-collapse.nav-multiple-row,
.menu-center-left, .menu-center-center{
  border:0 !important; box-shadow:none !important; border-radius:0 !important;
}
/* Der eigentliche „Karten"-Rahmen: .nav-mobile-body hat auf Desktop einen 1px-Rundumrahmen.
   Auf Desktop entfernen (Mockup: nur die feine Header-Unterlinie), mobil unangetastet lassen. */
@media (min-width:992px){
  .nav-mobile-body{ border:0 !important; box-shadow:none !important; border-radius:0 !important; }
}

/* ---- FIX #3: Gold-Caret/Box neutralisieren → nur dünne 2px ROSE-Linie ---- */
/* (Der Bootstrap-Dropdown-Caret liegt auf demselben ::after wie unsere Linie –
   border:0 im ::after-Block oben entfernt das Gold-Dreieck. Hier zusätzlich Box weg.) */
.navbar-nav.nav-scrollbar-inner .nav-link,
.navbar-nav.nav-scrollbar-inner .nav-item.active > .nav-link,
.navbar-nav.nav-scrollbar-inner .nav-link.active{ border-bottom:0 !important; box-shadow:none !important; }
.navbar-nav.nav-scrollbar-inner .nav-link:hover::after,
.navbar-nav.nav-scrollbar-inner .nav-item.active > .nav-link::after,
.navbar-nav.nav-scrollbar-inner .nav-link.active::after{ transform:scaleX(1) !important; background:var(--mp-gold) !important; height:2px !important; }
/* NOVA zeichnet den eigentlichen Gold-Balken auf .nav-link::before (border-bottom:6px #f8bf00).
   Dieses Pseudo-Element komplett abschalten → nur die dünne ROSE ::after-Linie (Mockup) bleibt. */
.navbar-nav.nav-scrollbar-inner .nav-link::before{ display:none !important; border:0 !important; }
/* Gold-Pfeil/Connector des Mega-Menüs (.dropdown-menu::before, #f8bf00) ausblenden – Mockup hat keinen. */
.navbar-nav.nav-scrollbar-inner .dropdown-menu::before,
.navbar-nav .mega-dropdown-menu::before,
.navbar-nav .dropdown-full .dropdown-menu::before{ display:none !important; border-color:transparent !important; }

/* ---- Suche: weiches Pill-Feld wie Mockup (kein dunkler Button, rosé-beiger Rahmen) ---- */
.search-wrapper{ background:var(--mp-cream2) !important; border:1px solid var(--mp-line2) !important; border-radius:var(--mp-radius-sm) !important; overflow:hidden; }
.search-wrapper:focus-within{ border-color:var(--mp-gold) !important; }
.search-wrapper .input-group{ border:0 !important; }
.search-wrapper .ac_input, .search-wrapper input.form-control{ border:0 !important; background:transparent !important; box-shadow:none !important; }
.search-wrapper input.form-control::placeholder{ color:var(--mp-muted); }
/* dunklen Submit-Button → transparente Lupe im Feld */
.search-wrapper .btn, .search-wrapper .btn-secondary, .search-wrapper button[type='submit'],
.search-wrapper .input-group-append .btn, .search-wrapper .input-group-prepend .btn{
  background:transparent !important; border:0 !important; box-shadow:none !important; color:var(--mp-muted) !important;
}
.search-wrapper .btn .fas, .search-wrapper button .fa-search, .search-wrapper .input-group-append .fas{ color:var(--mp-muted) !important; }

/* ---- Warenkorb: Preis ausblenden + Tasche statt Trolley (wie Mockup) ---- */
.nav-icons .cart-icon-dropdown-price{ display:none !important; }
.nav-icons .cart-icon-dropdown-icon::before{ content:"\f290" !important; }   /* fa-shopping-bag */

/* ============================================================================
   KATEGORIEÜBERSICHT (PLP) · 1:1 Mockup-Angleich
   Reines CSS auf stabilen JTL-Selektoren (AJAX-sicher), an --mp-* gebunden.
   Live verifiziert gegen dev.monparfum.de/parfum_9.
   ============================================================================ */

/* ---- 1. Breadcrumb (Vollbreite-Band über #content) ---- */
.breadcrumb-container .breadcrumb,
nav#breadcrumb ol.breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-family:var(--mp-font); font-size:12.5px; line-height:1.6; color:var(--mp-muted); background:transparent; padding:8px 0; margin:0; }
nav#breadcrumb ol.breadcrumb li, nav#breadcrumb ol.breadcrumb li a{ color:var(--mp-muted); }
nav#breadcrumb ol.breadcrumb li a:hover{ color:var(--mp-gold); }
nav#breadcrumb ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before{ color:var(--mp-accent); }

/* ---- 2. Kategorie-Kopf (cat-head) ---- */
#result-wrapper > .title{ padding:6px 0 4px; margin:0; }
#result-wrapper .title h1.h2{ font-family:var(--mp-display) !important; font-size:34px; font-weight:600; color:var(--mp-ink) !important; line-height:1.18; margin:0; }
#result-wrapper > .desc{ margin:0 0 4px; }
#result-wrapper > .desc p{ font-family:var(--mp-font); color:var(--mp-muted); font-size:15px; line-height:1.6; max-width:64ch; margin:8px 0 0; }

/* ---- 3. Toolbar / Sortierung / Anzahl (gerahmte Leiste) ---- */
#result-wrapper .productlist-page-nav-header-m.productlist-page-nav{ align-items:center; gap:14px; padding:14px 0; margin:16px 0 18px; border-top:1px solid var(--mp-line); border-bottom:1px solid var(--mp-line); background:var(--mp-bg); }
#result-wrapper .productlist-page-nav .productlist-item-info{ font-family:var(--mp-font); font-size:14px; color:var(--mp-muted); border:0 !important; padding:0; }
#result-wrapper .productlist-page-nav .productlist-item-info strong, #result-wrapper .productlist-page-nav .productlist-item-info b{ color:var(--mp-ink); }
/* Sortier-/Pro-Seite-Dropdown wie Mockup .select (ist ein Bootstrap-Dropdown, kein <select>) */
#result-wrapper .displayoptions .filter-type-FilterItemSort > .dropdown-toggle,
#result-wrapper .displayoptions .filter-type-FilterItemLimits > .dropdown-toggle{ appearance:none; background:var(--mp-surface); border:1px solid var(--mp-line2); border-radius:var(--mp-radius-sm); padding:10px 38px 10px 14px; font-family:var(--mp-font); font-size:14px; color:var(--mp-ink); min-height:42px; line-height:1; box-shadow:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; background-size:15px; }
#result-wrapper .displayoptions .dropdown-toggle::after{ display:none; }
#result-wrapper .displayoptions .dropdown-toggle:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }
#result-wrapper .displayoptions .dropdown-menu{ background:var(--mp-surface); border:1px solid var(--mp-line2); border-radius:var(--mp-radius-sm); box-shadow:0 8px 24px -12px rgba(0,0,0,.25); }
#result-wrapper .displayoptions .dropdown-item{ font-size:14px; color:var(--mp-ink); }
#result-wrapper .displayoptions .dropdown-item:hover, #result-wrapper .displayoptions .dropdown-item.active{ background:var(--mp-cream); color:var(--mp-gold); }
#result-wrapper .displayoptions .btn-option.ed{ border:1px solid var(--mp-line2); color:var(--mp-ink); background:transparent; border-radius:var(--mp-radius-sm); min-height:42px; }
#result-wrapper .displayoptions .btn-option.ed.active, #result-wrapper .displayoptions .btn-option.ed:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }

/* ---- 4. Aktive-Filter-Chips (nur bei gesetztem Filter) ---- */
#result-wrapper [class*="active-filter"] a, #result-wrapper .filter-active-list a{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:8px 14px; border-radius:30px; background:var(--mp-cream); border:1px solid var(--mp-line); color:var(--mp-ink); cursor:pointer; transition:border-color .15s, color .15s; text-decoration:none; }
#result-wrapper [class*="active-filter"] a:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }

/* ---- 5. Zwei-Spalten-Layout: Sidebar enger (Mockup-Gutter) ---- */
aside#sidepanel_left.sidepanel-left{ padding:0 28px 0 16px; }
/* Mockup-Sidebar hat KEINEN Kategorienbaum – nur Filter. Für 1:1 ausblenden. */
aside#sidepanel_left .box-categories{ display:none !important; }

/* ---- 6. Filtergruppen (.box → .fgroup), datengetrieben ---- */
aside#sidepanel_left .box{ border:0; border-bottom:1px solid var(--mp-line); padding:16px 0; background:transparent; border-radius:0; margin:0; }
aside#sidepanel_left .box:first-of-type{ padding-top:0; }
aside#sidepanel_left .box .btn-filter-box{ display:flex; align-items:center; justify-content:space-between; width:100%; font-family:var(--mp-font); font-size:14px; font-weight:600; color:var(--mp-ink); padding:2px 0; background:transparent; border:0; box-shadow:none; text-align:left; text-transform:none; letter-spacing:0; }
aside#sidepanel_left .box .btn-filter-box .text-truncate{ color:var(--mp-ink); }
aside#sidepanel_left .box .btn-filter-box::after, aside#sidepanel_left .box .btn-filter-box .fa, aside#sidepanel_left .box .btn-filter-box .fas{ color:var(--mp-muted); }
aside#sidepanel_left .box .collapse, aside#sidepanel_left .box .collapsing{ margin-top:12px; }
aside#sidepanel_left .box .filter-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--mp-ink); padding:0; margin:0 0 9px; text-decoration:none; }
aside#sidepanel_left .box .filter-item:last-child{ margin-bottom:0; }
aside#sidepanel_left .box .filter-item:hover, aside#sidepanel_left .box .filter-item:hover .box-link-wrapper{ color:var(--mp-gold); }
aside#sidepanel_left .box .filter-item.active, aside#sidepanel_left .box .filter-item.selected{ color:var(--mp-gold); font-weight:600; }
aside#sidepanel_left .box .filter-item .box-link-wrapper{ display:flex; align-items:center; gap:8px; width:100%; }
aside#sidepanel_left .box .filter-item .box-link-wrapper > .word-break{ flex:1 1 auto; }
aside#sidepanel_left .box .filter-item .badge,
aside#sidepanel_left .box .filter-item .filter-count, aside#sidepanel_left .box .filter-item .count{ margin-left:auto; font-size:12px; color:var(--mp-accent) !important; background:transparent !important; border:0 !important; padding:0 !important; font-weight:400; box-shadow:none; }
/* Filter-Status-Icons (FA-Quadrat/Check) on-brand: leer = soft, aktiv = rosé */
aside#sidepanel_left .box .filter-item .box-link-wrapper > i.fa,
aside#sidepanel_left .box .filter-item .snippets-filter-item-icon-right{ color:var(--mp-soft); }
aside#sidepanel_left .box .filter-item.active .box-link-wrapper > i.fa,
aside#sidepanel_left .box .filter-item .fa-check-square, aside#sidepanel_left .box .filter-item .fa-check{ color:var(--mp-gold); }
aside#sidepanel_left .box-filter-price .price-range-inputs input, aside#sidepanel_left .box input[type="text"], aside#sidepanel_left .box input[type="number"]{ background:var(--mp-surface); border:1px solid var(--mp-line2); border-radius:var(--mp-radius-sm); padding:10px 12px; color:var(--mp-ink); min-height:42px; width:100%; font-family:var(--mp-font); }
aside#sidepanel_left .box .btn-primary, aside#sidepanel_left .box .ui-slider .ui-slider-handle{ background:var(--mp-gold); border-color:var(--mp-gold); }
aside#sidepanel_left .box .ui-slider-range{ background:var(--mp-gold); }

/* ---- 7. Produkt-Grid: 4 Spalten, 18px Gutter (Card-Interna unangetastet) ---- */
#product-list.row.product-list{ margin-left:-9px; margin-right:-9px; }
#product-list.row.product-list > [class*="col-"]{ padding-left:9px; padding-right:9px; margin-bottom:18px; }

/* ---- 8. Pagination: dezent nummeriert ---- */
nav.navbar-pagination .pagination{ gap:4px; }
nav.navbar-pagination .pagination .page-item .page-link{ border:1px solid var(--mp-line2); background:var(--mp-surface); color:var(--mp-ink); border-radius:var(--mp-radius-sm); min-width:38px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; box-shadow:none; }
nav.navbar-pagination .pagination .page-item .page-link:hover{ border-color:var(--mp-gold); color:var(--mp-gold); }
nav.navbar-pagination .pagination .page-item.active .page-link{ background:var(--mp-gold); border-color:var(--mp-gold); color:#fff; }

/* ---- 9. SEO-/Beschreibungstext (Kategorie-Langtext) → Fraunces/ink ---- */
#result-wrapper h1:not(.h2):not(.cat-head__title),
#result-wrapper h2:not(.h2), #result-wrapper h3:not(.h2){ font-family:var(--mp-display); color:var(--mp-ink); font-weight:600; }
#result-wrapper h1:not(.h2){ font-size:24px; }
#result-wrapper h2:not(.h2){ font-size:20px; }
#result-wrapper h3:not(.h2){ font-size:17px; }
#result-wrapper .desc, #result-wrapper .category-description{ color:var(--mp-muted); font-size:14px; line-height:1.7; }
#result-wrapper .desc p{ max-width:80ch; }

/* ---- 10. Responsive ---- */
@media (max-width:760px){
  #result-wrapper .title h1.h2{ font-size:26px; }
  #result-wrapper .productlist-page-nav-header-m.productlist-page-nav{ flex-wrap:wrap; }
}
/* NOVA-Mobile-Filtermodal an Mockup-Optik angleichen */
#collapseFilter.modal .modal-content{ background:var(--mp-surface); border:0; }
#collapseFilter.modal .modal-header{ border-bottom:1px solid var(--mp-line); }
#collapseFilter.modal .modal-title{ font-family:var(--mp-display); color:var(--mp-ink); }

/* ============================================================================
   PREMIUM-FILTERLEISTE (PLP) · horizontale Pill-Bar (Scooterwerkstatt-Stil)
   Primär = --mp-gold (Rosé), Akzent = --mp-star (Gold). Ersetzt die Sidebar.
   ============================================================================ */
.mpf{ background:var(--mp-cream); border-radius:18px; padding:18px 20px; margin:6px 0 24px; font-family:var(--mp-font); }
.mpf *{ box-sizing:border-box; }
.mpf-count{ font-size:14px; color:var(--mp-muted); margin:0 0 12px; }
.mpf-count strong{ color:var(--mp-ink); }
.mpf-bar{ position:relative; background:var(--mp-surface); border:1px solid var(--mp-line); border-radius:16px; padding:12px 14px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.mpf-pills{ flex:1 1 auto; display:flex; flex-wrap:wrap; gap:10px; align-items:center; min-width:0; }
.mpf-sort-zone{ flex:0 0 auto; }
.mpf-allfilter{ display:inline-flex; align-items:center; gap:8px; background:var(--mp-gold); color:#fff; border:1px solid var(--mp-gold); border-radius:999px; padding:10px 16px; font-weight:600; font-size:14px; cursor:pointer; flex:0 0 auto; }
.mpf-allfilter .mpf-ic i{ color:#fff; font-size:14px; }
.mpf-badge{ background:var(--mp-star); color:#fff; font-weight:700; font-size:12px; min-width:20px; height:20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.mpf-badge:empty{ display:none; }
.mpf-pill{ position:relative; flex:0 0 auto; }
.mpf-pill-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--mp-line2); border-radius:999px; padding:9px 15px; background:var(--mp-surface); color:var(--mp-ink); font-weight:500; font-size:14px; cursor:pointer; white-space:nowrap; }
.mpf-pill-btn:hover{ border-color:var(--mp-gold); }
.mpf-pill.mpf--active .mpf-pill-btn{ border-color:var(--mp-gold); color:var(--mp-gold); }
.mpf-pill-btn .mpf-cnt{ color:var(--mp-gold); font-weight:700; margin-left:-3px; }   /* Pro-Pill-Zähler „(N)" */
.mpf-pill-btn .mpf-ic i{ color:var(--mp-star); font-size:14px; }
.mpf-pill-btn .mpf-car{ color:var(--mp-star); font-size:10px; transition:transform .15s; }
.mpf-pill.mpf--open .mpf-pill-btn .mpf-car{ transform:rotate(180deg); }
.mpf-dd{ display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:60; background:var(--mp-surface); border:1px solid var(--mp-line2); border-radius:14px; box-shadow:0 14px 36px rgba(0,0,0,.16); padding:14px 16px; min-width:252px; max-width:340px; }
.mpf-dd--right{ left:auto; right:0; }
.mpf-pill.mpf--open .mpf-dd{ display:block; }
.mpf-dd-h{ font-family:var(--mp-font); font-weight:600; color:var(--mp-ink); margin-bottom:10px; font-size:14px; }
.mpf-opts{ max-height:300px; overflow-y:auto; margin:0 -4px; padding:0 4px; }
/* JTL-Filter-Links als Checkbox-Zeilen */
.mpf-opts .filter-item{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--mp-ink); padding:5px 0; text-decoration:none; }
.mpf-opts .filter-item:hover{ color:var(--mp-gold); }
.mpf-opts .filter-item.active{ color:var(--mp-gold); font-weight:600; }
.mpf-opts .filter-item .box-link-wrapper{ display:flex; align-items:center; gap:8px; width:100%; }
.mpf-opts .filter-item .box-link-wrapper > .word-break{ flex:1 1 auto; }
.mpf-opts .filter-item .badge{ margin-left:auto; border:0 !important; background:transparent !important; color:var(--mp-accent) !important; padding:0 !important; font-weight:400; font-size:12px; box-shadow:none; }
.mpf-opts .filter-item i.fa, .mpf-opts .filter-item .far, .mpf-opts .filter-item .fas, .mpf-opts .filter-item .snippets-filter-item-icon-right{ color:var(--mp-soft); }
.mpf-opts .filter-item.active i{ color:var(--mp-gold); }
.mpf-opts .nav, .mpf-opts .flex-column{ display:block; }
.mpf-opts .collapse{ display:block !important; height:auto !important; }
.mpf-opts .snippets-filter-show-all{ display:none; }
.mpf-opts .filter-search-wrapper{ margin-bottom:10px; }
.mpf-opts .filter-search-wrapper input{ border:1px solid var(--mp-line2); border-radius:var(--mp-radius-sm); padding:7px 10px; font-size:13px; width:100%; }
.mpf-opts .price-range-inputs input{ border:1px solid var(--mp-line2); border-radius:var(--mp-radius-sm); }
.mpf-sortopt{ display:block; padding:6px 0; color:var(--mp-ink); text-decoration:none; font-size:13.5px; }
.mpf-sortopt:hover, .mpf-sortopt.active{ color:var(--mp-gold); font-weight:600; }
/* Aktive-Filter-Chips */
.mpf-active{ margin:14px 2px 0; }
.mpf-active .active-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.mpf-active .active-filters::before{ content:"Aktive Filter:"; font-size:13px; color:var(--mp-muted); margin-right:2px; align-self:center; white-space:nowrap; }   /* Label wie Referenz, nur sichtbar wenn Chips da sind */
.mpf-active .snippets-filter-item, .mpf-active .js-filter-item.snippets-filter-item{ display:inline-flex; align-items:center; gap:6px; background:var(--mp-cream2); border:1px solid var(--mp-line2) !important; color:var(--mp-ink) !important; border-radius:999px !important; padding:6px 12px !important; font-size:13px; font-weight:500; text-decoration:none; }
.mpf-active .snippets-filter-item:hover{ border-color:var(--mp-gold) !important; color:var(--mp-gold) !important; }
.mpf-active .snippets-filter-item .fa-times{ font-size:11px; color:var(--mp-muted); }
.mpf-active .snippets-filter-item-all{ background:transparent; border:1px solid var(--mp-line2); color:var(--mp-gold); border-radius:999px; padding:6px 12px; font-size:13px; text-decoration:none; }
/* curated-away Pills hinter "Alle Filter" */
.mpf-pill[data-mpf-hidden="1"]{ display:none; }
.mpf.mpf--allopen .mpf-pill[data-mpf-hidden="1"]{ display:inline-block; }
.mpf.mpf--allopen .mpf-allfilter{ box-shadow:0 0 0 3px rgba(194,147,58,.30); }
/* Sticky-Condense */
.mpf.mpf--stuck .mpf-bar{ position:sticky; top:0; z-index:100; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.mpf.mpf--stuck .mpf-active{ display:none; }
/* Sidebar entfernen + Content volle Breite + alte Top-Toolbar weg
   (aside ist direktes #content-Kind; Toolbar liegt außerhalb #result-wrapper) */
aside#sidepanel_left.sidepanel-left,
#content > aside#sidepanel_left{ display:none !important; }
#content-wrapper.has-left-sidebar #content .col-lg-8.col-xl-9.ml-auto-util,
#content .col-lg-8.col-xl-9.ml-auto-util{ flex:0 0 100% !important; max-width:100% !important; margin-left:0 !important; }
.productlist-page-nav-header-m.productlist-page-nav{ display:none !important; }
@media (max-width:991.98px){
  .mpf-pills{ flex-wrap:nowrap; overflow-x:auto; }
  .mpf-pills::-webkit-scrollbar{ height:0; }
  /* mp-filter-sheet (11.09.2026): position:fixed mit top:auto nahm die UNGESCROLLTE Lage des Filters -> gescrollt oeffnete das Dropdown weit unterhalb oder ausserhalb des Bildschirms. Jetzt Bottom-Sheet. */
  .mpf-pill.mpf--open .mpf-dd{ position:fixed; left:0; right:0; top:auto; bottom:0; width:auto; min-width:0; max-width:none; max-height:75vh; max-height:75dvh; overflow-y:auto; overscroll-behavior:contain; border-radius:2px 2px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); z-index:1060; box-shadow:0 -12px 36px rgba(0,0,0,.22); }
}

/* Preis-Pill: nativen JTL-Preisbox-Inhalt sauber darstellen */
.mpf-price{ min-width:262px; }
.mpf-price .box.box-filter-price{ border:0 !important; padding:0 !important; background:transparent !important; }
.mpf-price .btn-filter-box, .mpf-price .box-filter-hr, .mpf-price hr{ display:none !important; }
.mpf-price .box-filter-price-collapse{ padding:0 !important; }
.mpf-price .price-range-inputs{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.mpf-price .price-range-input{ border:1px solid var(--mp-line2) !important; border-radius:var(--mp-radius-sm) !important; }
.mpf-price .price-range-slide:not(.noUi-target){ display:none; }   /* leere Slider-Schiene ausblenden, bis initialisiert */
.mpf-price .noUi-connect{ background:var(--mp-gold) !important; }
.mpf-price .noUi-handle{ border:1px solid var(--mp-line2) !important; box-shadow:0 1px 3px rgba(0,0,0,.2) !important; }

/* ---- Filterleiste: Live-Suche (Lupe entfernt) + Preis-Felder + Ladezustand ---- */
.mpf-opts .filter-search-wrapper .input-group-prepend,
.mpf-opts .input-group-prepend,
.mpf-opts .input-group-text,
.mpf-opts .filter-search-wrapper .fa-search,
.mpf-opts .input-group-append .form-clear{ display:none !important; }
.mpf-opts .input-group, .mpf-opts .filter-search-wrapper .input-group{ display:block !important; }
.mpf-opts .filter-search, .mpf-opts input.filter-search{ width:100% !important; border:1px solid var(--mp-line2) !important; border-radius:var(--mp-radius-sm) !important; padding:8px 12px !important; font-size:13.5px !important; background:var(--mp-surface) !important; height:auto !important; }
.mpf-opts .filter-search:focus{ border-color:var(--mp-gold) !important; outline:none; box-shadow:none !important; }
.mpf-opts .filter-search-wrapper{ margin-bottom:10px; }

/* Preis von/bis (clientseitig, ?pf=von_bis) */
.mpf-price .mpf-price-fields{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.mpf-price .mpf-price-fields input{ width:100%; min-width:0; border:1px solid var(--mp-line2); border-radius:var(--mp-radius-sm); padding:9px 10px; font-size:14px; color:var(--mp-ink); }
.mpf-price .mpf-price-fields input:focus{ border-color:var(--mp-gold); outline:none; }
.mpf-price .mpf-price-sep{ color:var(--mp-muted); flex:0 0 auto; }
.mpf-price .mpf-apply{ width:100%; background:var(--mp-gold); color:#fff; border:0; border-radius:999px; padding:10px 16px; font-weight:600; font-size:13.5px; cursor:pointer; }
.mpf-price .mpf-apply:hover{ background:var(--mp-dgold); }

/* Ladezustand */
.mpf--loading .mpf-bar{ pointer-events:none; opacity:.7; }
[data-mpf-results]{ position:relative; min-height:120px; }

/* Aktive Filter-Option: klar sichtbarer Haken */
.mpf-opts .filter-item.active{ color:var(--mp-gold) !important; font-weight:600; }
.mpf-opts .filter-item.active i, .mpf-opts .filter-item i.fa-check-square{ color:var(--mp-gold) !important; }
.mpf-opts .filter-item i.far, .mpf-opts .filter-item i.fas{ font-size:15px; width:16px; text-align:center; }
/* Ladezustand: Klicks im Bar erlauben (Mehrfachauswahl), nur Ergebnis dimmen */
.mpf--loading .mpf-bar{ pointer-events:auto; opacity:1; }

/* ============================================================================
   MEGA-MENÜ · balancierte Spalten + einheitliche Typografie (Increment 1)
   Reines CSS, scoped auf #mainNavigation .dropdown-menu (nur Mega-Menü).
   Spaltenbalancierung via CSS-Multicolumn (column-fill:balance), kein JS.
   ============================================================================ */
:root{ --mp-mega-col-gap:44px; --mp-mega-group-gap:28px; --mp-mega-heading-gap:15px; --mp-mega-heading-size:14px; --mp-mega-item-size:13.5px; }

/* ---- Balancierter Multicolumn-Container statt 1-Spalte-pro-Unterkategorie ---- */
#mainNavigation .dropdown-menu .mp-mega-columns{
  flex:0 0 100%; width:100%; padding:0 32px; margin:22px 0 4px;
  column-count:4; column-gap:var(--mp-mega-col-gap); column-fill:balance;
}
#mainNavigation .dropdown-menu .mp-mega-col-item{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  display:block; width:100%; margin:0 0 var(--mp-mega-group-gap);
}
#mainNavigation .dropdown-menu .mp-mega-col-item:last-child{ margin-bottom:0; }
@media (min-width:992px) and (max-width:1199.98px){
  #mainNavigation .dropdown-menu .mp-mega-columns{ column-count:3; }
}

/* ---- Einheitliche Typografie: Überschrift dominant, Items konsistent ---- */
#mainNavigation .dropdown-menu .mp-mega-col-item .submenu-headline-toplevel{
  font-family:var(--mp-font,'Inter',sans-serif); font-size:11px;
  font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--mp-ink);
  line-height:1.4; margin:0 0 var(--mp-mega-heading-gap); padding:0; border:0;
  transition:color .18s ease;
}
#mainNavigation .dropdown-menu .mp-mega-col-item .submenu-headline-toplevel:hover{ color:var(--mp-gold); }
#mainNavigation .dropdown-menu .mp-mega-col-item .categories-recursive-dropdown{ margin-top:0; }
#mainNavigation .dropdown-menu .mp-mega-col-item .categories-recursive-dropdown a,
#mainNavigation .dropdown-menu .mp-mega-col-item .nav a.d-block{
  font-family:var(--mp-font,'Inter',sans-serif); font-size:var(--mp-mega-item-size);
  font-weight:400; line-height:1.55; color:var(--mp-ink2,#4a443d); padding:5px 0; display:block;
  position:relative; transition:color .18s ease, transform .18s ease;
}
/* ---- Hover: ruhig — nur Farbwechsel + minimaler Versatz, keine Deko ---- */
#mainNavigation .dropdown-menu .mp-mega-col-item a:hover{ color:var(--mp-gold); transform:translateX(3px); }
#mainNavigation .dropdown-menu .mp-mega-col-item a:focus-visible{ color:var(--mp-gold); outline:2px solid var(--mp-gold); outline-offset:3px; border-radius:3px; }
/* ---- Kategoriebild im Kopf: kein CLS, einheitlicher Abstand ---- */
#mainNavigation .dropdown-menu .mp-mega-col-item .submenu-headline-image{ margin-bottom:8px; height:auto; }
/* ---- „mehr" Zähler-Badge dezent ---- */
#mainNavigation .dropdown-menu .mp-mega-col-item .more-subcategories{ color:var(--mp-muted); font-size:11px; }

/* ---- Mega-Menü „Mehr anzeigen"-Toggle (max. Einträge/Gruppe) ---- */
#mainNavigation .dropdown-menu .mp-mega-overflow.d-none{ display:none !important; }
#mainNavigation .dropdown-menu .mp-mega-more-li{ list-style:none; }
#mainNavigation .dropdown-menu .mp-mega-more{
  background:none; border:0; padding:3px 0; margin-top:2px; cursor:pointer;
  font-family:var(--mp-font,'Inter',sans-serif); font-size:12px; font-weight:600;
  color:var(--mp-gold); display:inline-flex; align-items:center; gap:5px;
}
#mainNavigation .dropdown-menu .mp-mega-more::after{ content:"▾"; font-size:9px; transition:transform .15s; }
#mainNavigation .dropdown-menu .mp-mega-more.is-open::after{ transform:rotate(180deg); }
#mainNavigation .dropdown-menu .mp-mega-more .mp-mega-more-hide{ display:none; }
#mainNavigation .dropdown-menu .mp-mega-more.is-open .mp-mega-more-show{ display:none; }
#mainNavigation .dropdown-menu .mp-mega-more.is-open .mp-mega-more-hide{ display:inline; }
#mainNavigation .dropdown-menu .mp-mega-more:focus-visible{ outline:2px solid var(--mp-gold); outline-offset:2px; border-radius:2px; }

/* ---- LPT-balancierte Spalten (ersetzt column-fill) ---- */
#mainNavigation .dropdown-menu .mp-mega-cols-grid{ flex:1 1 100%; width:100%; display:flex; align-items:flex-start; gap:var(--mp-mega-col-gap,44px); padding:0 40px; margin:24px 0 4px; }
#mainNavigation .dropdown-menu .mp-mega-grid-col{ flex:1 1 0; min-width:0; }
#mainNavigation .dropdown-menu .mp-mega-grid-col .mp-mega-col-item{ margin:0 0 var(--mp-mega-group-gap,22px); display:block; width:100%; }
#mainNavigation .dropdown-menu .mp-mega-grid-col .mp-mega-col-item:last-child{ margin-bottom:0; }
@media (max-width:991.98px){ #mainNavigation .dropdown-menu .mp-mega-cols-grid{ flex-direction:column; gap:0; padding:0; } }
@media (max-width:991.98px){ #mainNavigation .dropdown-menu .mp-mega-grid-col + .mp-mega-grid-col::before{ display:none; } }

/* ============================================================================
   MEGA-MENÜ · Quiet Luxury (nur Mega, via :has) — reines CSS
   Keine farbigen Linien/Rahmen. Nur Weißraum, ruhige Typo, weicher Schatten,
   sanfter Reveal. Akzentfarbe (Rosé) ausschließlich bei Hover/Fokus.
   ============================================================================ */
#mainNavigation .dropdown-menu:has(.mp-mega-cols-grid){
  border:0 !important;
  box-shadow:0 26px 54px -34px rgba(42,35,32,.24);
}
/* defensiv: nur Fremd-Rahmen an inneren Mega-Elementen entfernen (NICHT den Hintergrund anfassen) */
#mainNavigation .dropdown-menu .mp-mega-grid-col,
#mainNavigation .dropdown-menu .mp-mega-col-item,
#mainNavigation .dropdown-menu .mp-mega-col-item .categories-recursive-dropdown,
#mainNavigation .dropdown-menu .mp-mega-col-item .nav,
#mainNavigation .dropdown-menu .mp-mega-col-item .collapse{ border:0 !important; box-shadow:none !important; }
/* Reveal-Animation bewusst entfernt: animierte opacity/transform erzeugte einen
   Stacking-Context, der nach Ablauf (ohne fill) wegfiel -> Seiteninhalt malte über
   das Menü. Statisches Öffnen ist deckend & zuverlässig (wie Original). */
@media (prefers-reduced-motion:reduce){
  #mainNavigation .dropdown-menu .mp-mega-col-item a:hover{ transform:none; }
}

/* ---- Mega-Menü Banner (Plugin-konfigurierbar pro Kategorie) ---- */
#mainNavigation .dropdown-menu .mp-mega-banner{ display:flex; gap:18px; align-items:center; margin:6px 32px 22px; padding:18px 20px; background:var(--mp-cream2); border:1px solid var(--mp-line); border-radius:var(--mp-radius-lg,12px); text-decoration:none; color:var(--mp-ink); }
#mainNavigation .dropdown-menu a.mp-mega-banner:hover{ border-color:var(--mp-gold); }
#mainNavigation .dropdown-menu .mp-mega-banner--top{ flex-direction:column; align-items:flex-start; }
#mainNavigation .dropdown-menu .mp-mega-banner--right{ flex-direction:row-reverse; }
#mainNavigation .dropdown-menu .mp-mega-banner__img{ flex:0 0 auto; display:block; line-height:0; }
#mainNavigation .dropdown-menu .mp-mega-banner__img img{ display:block; width:280px; max-width:38vw; height:auto; border-radius:8px; object-fit:cover; }
#mainNavigation .dropdown-menu .mp-mega-banner--top .mp-mega-banner__img{ width:100%; }
#mainNavigation .dropdown-menu .mp-mega-banner--top .mp-mega-banner__img img{ width:100%; max-width:100%; max-height:220px; }
#mainNavigation .dropdown-menu .mp-mega-banner__body{ display:flex; flex-direction:column; gap:6px; }
#mainNavigation .dropdown-menu .mp-mega-banner__heading{ font-family:var(--mp-display,'Fraunces',serif); font-size:19px; font-weight:600; color:var(--mp-ink); line-height:1.2; }
#mainNavigation .dropdown-menu .mp-mega-banner__text{ font-family:var(--mp-font,'Inter',sans-serif); font-size:13px; color:var(--mp-muted); line-height:1.5; }
#mainNavigation .dropdown-menu .mp-mega-banner__cta{ align-self:flex-start; margin-top:6px; background:var(--mp-gold); color:#fff; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:600; }
#mainNavigation .dropdown-menu a.mp-mega-banner:hover .mp-mega-banner__cta{ background:var(--mp-dgold); }
/* ---- Banner mobil/Tablet: stapeln + volle Breite (kein Überlauf im Drawer) ---- */
@media (max-width:991.98px){
  #mainNavigation .dropdown-menu .mp-mega-banner{ flex-direction:column !important; align-items:flex-start; gap:12px; margin:14px 0 6px; }
  #mainNavigation .dropdown-menu .mp-mega-banner__img,
  #mainNavigation .dropdown-menu .mp-mega-banner__img img{ width:100% !important; max-width:100% !important; }
  #mainNavigation .dropdown-menu .mp-mega-banner__img img{ max-height:160px; }
}

/* ============================================================================

/* === MPP-PDP-2026 START === */
/* ============================================================================
   monPARFUM · PDP 2026 – pixelgenaue Portierung des Mockups
   Alle Klassen mit .mpp gescoped + mpp-Prefix (keine Kollision mit NOVA).
   Design-Werte 1:1 aus monparfum_pdp_2026.html.
   ============================================================================ */
.mpp{
  --ink:#151412; --muted:#6e6a64; --line:#dedbd4; --soft:#f6f3ed; --paper:#fffdfa;
  --warm:#eee5d7; --accent:#7b2035; --accent-soft:#f3e6e9; --success:#246343; --danger:#a33b34;
  --radius:2px; --shadow:0 16px 38px rgba(31,26,20,.08);
  --serif:Georgia,"Times New Roman",serif;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.45;-webkit-font-smoothing:antialiased;
}
.mpp *{box-sizing:border-box}
.mpp button,.mpp input{font:inherit}
.mpp a{color:inherit;text-decoration:none}
.mpp button{color:inherit;background:none;border:0;cursor:pointer}
.mpp img,.mpp svg{display:block;max-width:100%}
.mpp .mpp-h1{font-family:var(--serif);font-size:39px;line-height:1.08;font-weight:400;letter-spacing:-.025em;margin:20px 0 8px}
.mpp .mpp-h2{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:-.02em;margin:0 0 22px}
.mpp .mpp-kicker{font-size:10px;font-weight:750;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* ---- Layout ---- */
.mpp-wrap{max-width:1380px;margin:auto;padding:0 26px}
.mpp-product{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(390px,.78fr);gap:54px;align-items:start}

/* ---- Galerie ---- */
.mpp-gallery{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;position:sticky;top:18px}
.mpp-thumbs{display:flex;flex-direction:column;gap:10px}
.mpp-thumb{width:74px;aspect-ratio:1;border:1px solid var(--line);background:#fff;cursor:pointer;padding:4px;position:relative;transition:border-color .18s,transform .18s;overflow:hidden}
.mpp-thumb:hover{transform:translateY(-1px)}
.mpp-thumb.is-active{border-color:var(--ink)}
.mpp-thumb img{width:100%;height:100%;object-fit:contain}
.mpp-media{background:var(--soft);min-height:690px;position:relative;overflow:hidden;display:grid;place-items:center}
.mpp-media__badge{position:absolute;left:18px;top:18px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;padding:8px 10px;z-index:2}
.mpp-media__actions{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:8px;z-index:2}
.mpp-media__action{width:42px;height:42px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.mpp-media__action svg{width:19px;height:19px;stroke-width:1.5}
.mpp-media__action.on-list{color:var(--accent);border-color:var(--accent)}
.mpp-media__slide{display:none;width:100%;height:100%;place-items:center;padding:54px}
.mpp-media__slide.is-active{display:grid}
.mpp-media__slide img{width:auto;max-width:100%;max-height:590px;object-fit:contain}
.mpp-media__index{position:absolute;bottom:17px;right:18px;font-size:11px;letter-spacing:.12em;color:var(--muted)}
/* Wunschzettel-Include auf Icon-Button-Look normalisieren */
.mpp-media__wl .btn,.mpp-media__wl button{width:42px;height:42px;min-width:0;padding:0;margin:0;border:1px solid var(--line)!important;background:#fff!important;border-radius:0!important;display:grid;place-items:center;color:var(--ink)!important;box-shadow:none!important}
.mpp-media__wl .btn:hover,.mpp-media__wl button:hover{border-color:var(--accent)!important;color:var(--accent)!important}
.mpp-media__wl .btn.active,.mpp-media__wl button.active,.mpp-media__wl .wishlist.active{color:var(--accent)!important;border-color:var(--accent)!important}
.mpp-media__wl svg,.mpp-media__wl i{width:19px;height:19px;font-size:17px}
.mpp-media__wl .badge,.mpp-media__wl span:not(.wishlist){display:none}

/* ---- Buybox ---- */
.mpp-buybox{padding-top:3px}
.mpp-brandline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mpp-brand{font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px}
.mpp-flag{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}
.mpp-flag span{width:6px;height:6px;border-radius:50%;background:var(--success)}
.mpp-flag.is-out span{background:var(--danger)}
.mpp-subtitle{font-size:14px;color:var(--muted);margin-bottom:14px}
.mpp-rating{display:flex;align-items:center;gap:9px;font-size:12px;margin-bottom:19px}
.mpp-stars{display:flex;gap:2px;color:var(--ink)}
.mpp-stars svg{width:15px;height:15px;fill:currentColor}
.mpp-stars .is-empty{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.4}
.mpp-rating a{border-bottom:1px solid var(--line)}
.mpp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.mpp-chip{font-size:11px;border:1px solid var(--line);padding:6px 9px;background:#fff}
.mpp-price-row{display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:1px solid var(--line);padding-top:20px}
.mpp-price{font-size:28px;font-weight:660;letter-spacing:-.03em}
.mpp-old-price{font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:8px}
.mpp-saving{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:5px 7px;margin-left:8px;vertical-align:3px}
.mpp-unit{font-size:11px;color:var(--muted);margin-top:3px}
.mpp-stock{font-size:12px;font-weight:650;color:var(--success);display:flex;align-items:center;gap:7px;padding-bottom:5px}
.mpp-stock:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
.mpp-stock.is-out{color:var(--danger)}
.mpp-stock.is-out:before{background:var(--danger)}
.mpp-field-label{display:flex;justify-content:space-between;align-items:center;margin:25px 0 10px;font-size:12px;font-weight:700}
.mpp-field-label span:last-child{font-weight:450;color:var(--muted)}
.mpp-variants{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mpp-variants.cols-2{grid-template-columns:repeat(2,1fr)}
.mpp-variants.cols-1{grid-template-columns:1fr}
.mpp-variants.cols-4{grid-template-columns:repeat(4,1fr)}
.mpp-variant[data-soldout]{opacity:.5}
.mpp-variant[data-soldout] .v-price:after{content:" · ausverkauft";font-weight:450;color:var(--muted)}
.mpp-variant{min-height:74px;border:1px solid var(--line);background:#fff;text-align:left;padding:12px 11px;cursor:pointer;transition:border-color .18s,box-shadow .18s;display:block;color:inherit}
.mpp-variant:hover{border-color:#8d8982}
.mpp-variant.is-active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mpp-variant strong{display:block;font-size:14px;margin-bottom:5px}
.mpp-variant span{display:block;font-size:11px;color:var(--muted)}
.mpp-variant .v-price{color:var(--ink);font-weight:650;margin-top:4px}
.mpp-delivery{border:1px solid var(--line);margin-top:18px;padding:14px;display:grid;grid-template-columns:24px 1fr;gap:11px;background:#fff}
.mpp-delivery svg{width:22px;height:22px;stroke-width:1.45}
.mpp-delivery strong{font-size:12px;display:block}
.mpp-delivery p{font-size:11px;color:var(--muted);margin:3px 0 0}
.mpp-cta{width:100%;height:57px;background:var(--ink);color:#fff;border:1px solid var(--ink);font-size:13px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;margin-top:13px;cursor:pointer;transition:background .18s;display:grid;place-items:center}
.mpp-cta:hover{background:#35312c}
.mpp-cta[disabled]{opacity:.5;cursor:not-allowed}
/* NOVA basket.tpl auf Mockup-CTA stylen (bringt #add-to-cart-Anker für PayPal/Apple Pay) */
.mpp-buy{margin-top:13px}
.mpp-buy #add-to-cart{width:100%}
.mpp-buy .choose_quantity,.mpp-buy #quantity-grp,.mpp-buy .product-quantity,.mpp-buy .form-counter{display:none!important}
.mpp-buy .product-buy .row,.mpp-buy .add-to-cart-container{margin:0}
.mpp-buy button[name="inWarenkorb"],.mpp-buy .add-to-cart-btn{width:100%!important;min-height:57px;background:var(--ink)!important;color:#fff!important;border:1px solid var(--ink)!important;border-radius:0!important;font-size:13px!important;font-weight:750!important;letter-spacing:.08em!important;text-transform:uppercase!important;display:flex!important;align-items:center;justify-content:center;gap:9px;box-shadow:none!important}
.mpp-buy button[name="inWarenkorb"]:hover,.mpp-buy .add-to-cart-btn:hover{background:#35312c!important}
.mpp-buy button[name="inWarenkorb"] .fa,.mpp-buy button[name="inWarenkorb"] svg{margin-right:2px}
/* PayPal / Apple Pay Express-Container-Abstand */
.mpp-buybox [id^="ppc-paypal-button"],.mpp-buybox [id^="paypal-button-"],.mpp-buybox .ppc-ecs-horizontal-container,.mpp-buybox .ppc-standalone-buttons{margin-top:10px}
.mpp-buybox [id^="paypal-button-"] .col-12{padding:0}
.mpp-fast-pay{margin-top:8px}
.mpp-fast-pay > *{margin-top:8px}
.mpp-sample{margin-top:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}
.mpp-sample__left{display:flex;align-items:center;gap:10px}
.mpp-sample svg{width:20px;height:20px;stroke-width:1.4}
.mpp-sample a{text-decoration:underline;text-underline-offset:3px}
.mpp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:14px}
.mpp-trust__item{font-size:10px;color:var(--muted);display:flex;align-items:flex-start;gap:7px}
.mpp-trust__item svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--ink);stroke-width:1.45}

/* ---- Duft in 10 Sekunden ---- */
.mpp-decision{margin-top:62px;border-top:1px solid var(--line);padding-top:44px}
.mpp-decision-grid{display:grid;grid-template-columns:1.3fr repeat(var(--facts,4),1fr);border:1px solid var(--line)}
.mpp-decision-intro{padding:24px;background:var(--ink);color:#fff;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.mpp-decision-intro p{font:22px/1.25 var(--serif);margin:0;max-width:250px}
.mpp-decision-intro span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#cfc9c0}
.mpp-fact{padding:23px 18px;border-left:1px solid var(--line);min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.mpp-fact svg{width:27px;height:27px;stroke-width:1.25;stroke:var(--ink)}
.mpp-fact__b span{display:block;font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.mpp-fact__b strong{display:block;font-size:14px;font-weight:650;line-height:1.25}

/* ---- Story + Pyramide ---- */
.mpp-story{margin-top:74px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.mpp-story__sticky{position:sticky;top:24px}
.mpp-story__lead{font:25px/1.4 var(--serif);margin:0;color:#37332f}
.mpp-story__body{font-size:14px;color:var(--muted);max-width:520px;margin-top:18px}
.mpp-pyramid{border-top:1px solid var(--line)}
.mpp-note{display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.mpp-note__type{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.mpp-note__name{font:22px var(--serif)}
.mpp-note__desc{font-size:11px;color:var(--muted);margin-top:4px}
.mpp-note__art{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--soft);flex:0 0 auto;color:var(--accent);font-size:22px}

/* ---- Accordion ---- */
.mpp-accordion-wrap{margin-top:76px;display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}
.mpp-accordion-intro p{font-size:13px;color:var(--muted);max-width:360px}
.mpp-accordion{border-top:1px solid var(--ink)}
.mpp-acc{border-bottom:1px solid var(--line)}
.mpp-acc button{width:100%;padding:19px 0;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:13px;font-weight:650}
.mpp-acc button svg{width:18px;height:18px;transition:transform .2s;flex:0 0 auto}
.mpp-acc.is-open button svg{transform:rotate(45deg)}
.mpp-acc__content{max-height:0;overflow:hidden;transition:max-height .32s ease}
.mpp-acc.is-open .mpp-acc__content{max-height:1200px}
.mpp-acc__inner{padding:0 36px 20px 0;font-size:12px;color:var(--muted);line-height:1.65}
.mpp-acc__inner ul{padding-left:18px;margin:0}
.mpp-acc__inner p{margin:0 0 8px}
.mpp-spec{width:100%;border-collapse:collapse;font-size:12px}
.mpp-spec th,.mpp-spec td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.mpp-spec th{width:42%;font-weight:600;color:var(--ink);padding-right:16px}
.mpp-spec td{color:var(--muted)}

/* ---- Bewertungen ---- */
.mpp-review-section{margin-top:84px;background:var(--soft);padding:56px 0}
.mpp-review-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
.mpp-review-score{display:flex;align-items:end;gap:14px}
.mpp-review-score strong{font:54px/1 var(--serif);font-weight:400}
.mpp-review-score div{font-size:11px;color:var(--muted);padding-bottom:4px}
.mpp-review-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px}
.mpp-bars{padding-right:24px}
.mpp-bar-row{display:grid;grid-template-columns:58px 1fr 34px;gap:10px;align-items:center;font-size:11px;margin:9px 0}
.mpp-bar{height:5px;background:#dedbd4;overflow:hidden}
.mpp-bar i{display:block;height:100%;background:var(--ink)}
.mpp-summary-card{background:#fff;border:1px solid var(--line);padding:24px}
.mpp-summary-card__title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:12px}
.mpp-summary-card p{font:21px/1.38 var(--serif);margin:0 0 17px}
.mpp-review-tags{display:flex;gap:7px;flex-wrap:wrap}
.mpp-review-tags span{font-size:10px;padding:6px 8px;border:1px solid var(--line)}
.mpp-review-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.mpp-review-card{background:#fff;border:1px solid var(--line);padding:18px;min-height:210px;display:flex;flex-direction:column}
.mpp-review-card__top{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted)}
.mpp-review-card h3{font-size:13px;margin:16px 0 8px}
.mpp-review-card p{font-size:11px;color:var(--muted);margin:0;line-height:1.6}
.mpp-verified{margin-top:auto;padding-top:14px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--success)}

/* ---- Related ---- */
.mpp-related{margin-top:80px;padding-bottom:20px}
.mpp-related-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
.mpp-related-head a{font-size:11px;border-bottom:1px solid var(--ink);padding-bottom:2px}
.mpp-products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mpp-card{border:1px solid var(--line);background:#fff;position:relative;display:block;color:inherit}
.mpp-card__media{aspect-ratio:1;background:var(--soft);display:grid;place-items:center;padding:22px;overflow:hidden}
.mpp-card__media img{width:100%;height:100%;object-fit:contain}
.mpp-card__body{padding:15px}
.mpp-card__brand{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mpp-card h3{font:17px var(--serif);margin:6px 0 10px;font-weight:400}
.mpp-card__price{font-size:12px;font-weight:700}
.mpp-card__type{font-size:10px;color:var(--muted)}

/* ---- Mobile Sticky-Kauf + Toast ---- */
.mpp-mobile-buy{display:none}
.mpp-toast{position:fixed;right:22px;bottom:22px;background:var(--ink);color:#fff;padding:14px 17px;font-size:12px;box-shadow:var(--shadow);transform:translateY(120px);opacity:0;transition:.3s;z-index:2000;pointer-events:none}
.mpp-toast.is-show{transform:none;opacity:1}

/* ---- Responsive ---- */
@media(max-width:1050px){
  .mpp-product{grid-template-columns:1.1fr .9fr;gap:30px}.mpp-gallery{grid-template-columns:60px 1fr}.mpp-thumb{width:60px}.mpp-media{min-height:560px}
  .mpp-decision-grid{grid-template-columns:1.2fr repeat(2,1fr)}.mpp-fact:nth-child(4){border-left:0;border-top:1px solid var(--line)}.mpp-fact:nth-child(5){border-top:1px solid var(--line)}
  .mpp-products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .mpp-product{display:block}.mpp-gallery{display:flex;flex-direction:column;position:relative;top:auto}.mpp-thumbs{order:2;flex-direction:row;justify-content:center;margin-top:8px}.mpp-thumb{width:10px;height:10px;border-radius:50%;padding:0;background:#d8d4cd;border:0;overflow:hidden}.mpp-thumb img{display:none}.mpp-thumb.is-active{background:var(--ink)}
  .mpp-media{min-height:430px}.mpp-media__slide{padding:32px 27px}.mpp-media__index{display:none}
  .mpp-buybox{padding-top:28px}.mpp .mpp-h1{font-size:32px;margin-top:16px}.mpp-price{font-size:25px}.mpp-trust{gap:4px}.mpp-trust__item{display:block}.mpp-trust__item svg{margin-bottom:5px}
  .mpp-decision{margin-top:48px;padding-top:34px}.mpp-decision-grid{grid-template-columns:1fr 1fr}.mpp-decision-intro{grid-column:1/-1;min-height:130px}.mpp-fact{min-height:145px}
  .mpp-story{margin-top:54px;display:block}.mpp-story__sticky{position:relative;top:auto;margin-bottom:35px}.mpp-story__lead{font-size:23px}.mpp-note{grid-template-columns:74px 1fr 48px;gap:12px}.mpp-note__name{font-size:19px}.mpp-note__art{width:48px;height:48px}
  .mpp-accordion-wrap{display:block;margin-top:58px}.mpp-accordion-intro{margin-bottom:28px}
  .mpp-review-section{margin-top:62px;padding:44px 0}.mpp-review-head{display:block}.mpp-review-score{margin-top:16px}.mpp-review-grid{display:block}.mpp-bars{padding-right:0;margin-bottom:26px}.mpp-review-list{display:flex;overflow:auto;scroll-snap-type:x mandatory}.mpp-review-card{min-width:82%;scroll-snap-align:start}
  .mpp-related{margin-top:58px}.mpp-products{display:flex;overflow:auto;scroll-snap-type:x mandatory}.mpp-card{min-width:74%;scroll-snap-align:start}
  .mpp-mobile-buy{position:fixed;left:0;right:0;bottom:0;height:74px;background:#fff;border-top:1px solid var(--line);padding:9px 12px;display:grid;grid-template-columns:1fr 1.65fr;gap:10px;z-index:1000}.mpp-mobile-buy__price{display:flex;flex-direction:column;justify-content:center}.mpp-mobile-buy__price strong{font-size:16px}.mpp-mobile-buy__price span{font-size:9px;color:var(--muted)}.mpp-mobile-buy button{background:var(--ink);color:#fff;font-size:11px;text-transform:uppercase;font-weight:750;letter-spacing:.07em}
  .mpp-toast{right:12px;left:12px;bottom:86px;text-align:center}
}

/* ============================================================================
   Filter-Leiste eckig (monPARFUM-Stil, --radius 2px statt Pillen/Rundungen)
   Überschreibt die .mpf-Regeln aus Etappe 4 (dieser Block steht später im File).
   ============================================================================ */
.mpf{border-radius:2px}
.mpf-bar{border-radius:2px}
.mpf-allfilter{border-radius:2px}
.mpf-pill-btn{border-radius:2px}
.mpf-badge{border-radius:2px}
.mpf-dd,.mpf-dd--right{border-radius:2px}
.mpf-sortopt{border-radius:2px}
.mpf-apply,.mpf-price .mpf-apply{border-radius:2px}
.mpf-active .snippets-filter-item,.mpf-active .js-filter-item.snippets-filter-item{border-radius:2px !important}
.mpf-active .snippets-filter-item-all{border-radius:2px}
.mpf-opts .filter-search,.mpf-opts input.filter-search,.mpf-price .mpf-price-fields input,.mpf-price .price-range-input,.mpf-opts .filter-search-wrapper input{border-radius:2px !important}

/* Status-Ribbon (Ausverkauft/Neu/Sale): kein Weg-Slide beim Hover.
   NOVA schiebt es per :hover auf left:-24px → wurde vom overflow:hidden der Karte
   abgeschnitten ("…sverkauft"). Hier festhalten. */
.productbox.mp-card:hover .productbox-ribbon,
.productbox.mp-card:hover .ribbon.productbox-ribbon,
.product-wrapper:hover .mp-card .productbox-ribbon{ left:10px !important; right:auto !important; transform:none !important; }

/* ===== Mini-Warenkorb-Toast (statt großem NOVA-Modal) ===== */
.mp-cart-toast{position:fixed;top:80px;right:22px;width:330px;max-width:calc(100vw - 28px);background:#fff;border:1px solid var(--mp-line,#e8dfd6);box-shadow:0 18px 46px -18px rgba(42,35,32,.42);padding:15px 17px;z-index:4000;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;font-family:var(--mp-font,Inter,system-ui,sans-serif);color:var(--mp-ink,#2a2320)}
.mp-cart-toast.is-show{opacity:1;transform:none;pointer-events:auto}
.mp-cart-toast__x{position:absolute;top:8px;right:9px;border:0;background:none;font-size:20px;line-height:1;color:var(--mp-muted,#9a8f86);cursor:pointer;padding:2px 4px}
.mp-cart-toast__x:hover{color:var(--mp-ink,#2a2320)}
.mp-cart-toast__head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--mp-gold,#a05161);margin-bottom:12px;padding-right:16px}
.mp-cart-toast__body{display:flex;gap:12px;align-items:flex-start}
.mp-cart-toast__body img{width:52px;height:52px;object-fit:contain;background:#faf7f3;border:1px solid var(--mp-line,#e8dfd6);flex:0 0 auto;padding:3px}
.mp-cart-toast__meta{min-width:0}
.mp-cart-toast__name{font-size:13px;font-weight:600;line-height:1.32;margin-bottom:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-cart-toast__price{font-size:13px;font-weight:700}
.mp-cart-toast__qty{font-size:11px;color:var(--mp-muted,#9a8f86);margin-top:2px}
.mp-cart-toast__link{display:inline-block;margin-top:13px;font-size:12px;font-weight:600;color:var(--mp-ink,#2a2320);border-bottom:1px solid currentColor;text-decoration:none;padding-bottom:1px}
.mp-cart-toast__link:hover{color:var(--mp-gold,#a05161)}
@media(max-width:600px){.mp-cart-toast{top:auto;bottom:14px;right:10px;left:10px;width:auto}}

/* ============================================================================
   Kompakter Checkout (body.is-checkout) – Stufe 1: entschlacken, eckig, dezenter.
   Kein Eingriff in Zahlungs-/Logik; nur Optik + Abstände.
   ============================================================================ */
body.is-checkout .form-control,body.is-checkout .custom-select,body.is-checkout select.form-control,body.is-checkout .btn,body.is-checkout .input-group,body.is-checkout .custom-control-label::before{border-radius:2px!important}
body.is-checkout .form-group{margin-bottom:11px}
body.is-checkout .checkout-register-form .row,body.is-checkout .inc-shipping-address .row{row-gap:0}
/* langer Werbe-Widerspruch-Rechtstext: voll lesbar, aber klein & gedämpft (spart Höhe) */
body.is-checkout .direct-advertising{margin-top:2px}
body.is-checkout .direct-advertising small{display:block;font-size:10.5px;line-height:1.42;color:var(--mp-muted,#9a8f86)}
/* Sektionsüberschriften dezent & kompakt */
body.is-checkout .checkout-register .h3,body.is-checkout legend,body.is-checkout .checkout h2{font-size:15px!important;font-weight:700;letter-spacing:.005em;margin-bottom:8px}
/* Login-Box straffen */
body.is-checkout .customer-login,body.is-checkout .checkout-login{padding:16px!important}
/* Abstände zwischen Blöcken reduzieren */
body.is-checkout hr{margin:12px 0}
body.is-checkout .card-body,body.is-checkout .checkout-step-content{padding-top:14px;padding-bottom:14px}
/* Schrittleiste eckig (passend zum Rest) */
body.is-checkout .checkout-steps *,body.is-checkout .nav-checkout *{border-radius:0!important}

/* ===== Produktkarten: immer gleiche Höhe + 2-zeiliger Namens-Clamp ===== */
.product-list .product-wrapper,.row.product-list .product-wrapper{display:flex}
.product-wrapper>.productbox.mp-card,.productbox.mp-card{height:100%;width:100%}
.mp-card__body{display:flex;flex-direction:column;flex:1 1 auto}
.mp-card__foot{margin-top:auto}
.mp-card__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.72em}
/* ===== Toast über mobiler Sticky-Kaufleiste ===== */
.mp-cart-toast.has-mobilebuy{bottom:92px}

/* Nicht kaufbare Produkte: "Details ansehen"-Pfeil statt Warenkorb-Tasche */
.mp-card__add--view{background:transparent !important;border:1px solid var(--mp-line2) !important;color:var(--mp-muted) !important}
.mp-card__add--view:hover{border-color:var(--mp-gold) !important;color:var(--mp-gold) !important;background:transparent !important}

/* Checkout Schritt 2/3: Versand-/Zahlungsoptionen kompakt */
body.is-checkout .checkout-shipping-form .h2,body.is-checkout .checkout-payment-form .h2,body.is-checkout .order-confirm .h2{font-size:16px!important;margin-bottom:10px}
body.is-checkout .checkout-shipping-form-options{margin-bottom:8px}
body.is-checkout .checkout-shipping-form .form-group,body.is-checkout .checkout-payment-form .form-group{margin-bottom:8px}
body.is-checkout .checkout-shipping-form-packaging{padding:10px 12px;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px}

/* Ausverkauft-Karten: Bild dezent entsättigt (Hover: wieder farbig), Preis gedämpft,
   Glocke = Verfügbarkeits-Benachrichtigung (statt irreführender Kauf-Tasche) */
.mp-card--soldout .mp-card__img{filter:grayscale(.6);opacity:.72;transition:filter .25s ease,opacity .25s ease}
.mp-card--soldout:hover .mp-card__img{filter:none;opacity:1}
.mp-card--soldout .mp-card__prices{opacity:.6}
.mp-card__add--notify{background:transparent !important;border:1px solid var(--mp-line2) !important;color:var(--mp-muted) !important}
.mp-card__add--notify:hover{border-color:var(--mp-gold) !important;color:var(--mp-gold) !important;background:transparent !important}

#mp-notify{scroll-margin-top:130px}
/* ===== Checkout-Umbau: 2 Spalten + ständige Bestellübersicht rechts ===== */
.mp-ck-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start;margin-top:6px}
.mp-ck-main{min-width:0}
.mp-ck-side{position:sticky;top:88px}
@media(max-width:991px){.mp-ck-grid{display:block}.mp-ck-side{position:static;margin-top:26px}}
.mp-ck-summary{background:#fff;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;padding:18px}
.mp-ck-summary__head{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:14px;padding-bottom:12px;border-bottom:1px solid var(--mp-line,#e8dfd6)}
.mp-ck-summary__count{font-size:11px;font-weight:500;color:var(--mp-muted,#9a8f86)}
.mp-ck-summary__items{max-height:298px;overflow-y:auto;margin:4px 0}
.mp-ck-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--mp-line,#e8dfd6) 55%,#fff)}
.mp-ck-item__img{position:relative;width:48px;height:48px;border:1px solid var(--mp-line,#e8dfd6);background:#fff;display:grid;place-items:center}
.mp-ck-item__img img{max-width:100%;max-height:100%;object-fit:contain;padding:3px}
.mp-ck-item__qty{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;border-radius:50%;background:var(--mp-ink,#2a2320);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.mp-ck-item__name{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-ck-item__price{font-size:12.5px;font-weight:700;white-space:nowrap}
.mp-ck-line{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--mp-muted,#9a8f86);padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--mp-line,#e8dfd6) 55%,#fff)}
.mp-ck-summary__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:13px;font-size:13px;font-weight:600}
.mp-ck-summary__total small{display:block;font-size:10px;font-weight:400;color:var(--mp-muted,#9a8f86)}
.mp-ck-summary__total strong{font-size:18px;letter-spacing:-.02em}
.mp-ck-summary__trust{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--mp-line,#e8dfd6);font-size:10.5px;color:var(--mp-muted,#9a8f86)}
.mp-ck-summary__trust i{color:var(--mp-gold,#a05161);margin-right:4px}
/* Versand-/Zahlungsoptionen als wählbare Karten */
body.is-checkout .checkout-shipping-form .custom-radio,body.is-checkout .checkout-payment-form .custom-radio,body.is-checkout .checkout-shipping-form-options-radio .custom-control{border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;background:#fff;padding:12px 14px 12px 44px;margin-bottom:8px;transition:border-color .15s,box-shadow .15s}
body.is-checkout .checkout-shipping-form .custom-radio:hover,body.is-checkout .checkout-payment-form .custom-radio:hover{border-color:var(--mp-line2,#d8d0c8)}
body.is-checkout .checkout-shipping-form .custom-radio:has(input:checked),body.is-checkout .checkout-payment-form .custom-radio:has(input:checked){border-color:var(--mp-ink,#2a2320);box-shadow:inset 0 0 0 1px var(--mp-ink,#2a2320)}
body.is-checkout .custom-radio .custom-control-label{width:100%;cursor:pointer}

body.is-checkout .customer-login-buttons{display:flex;flex-wrap:wrap;gap:8px}
body.is-checkout .customer-login-buttons .btn,body.is-checkout .customer-login-buttons [id^="ppc-paypal"]{max-width:100%}
/* Schrittleiste mobil: aktiver Titel begrenzt, kein horizontaler Überlauf */
body.is-checkout .checkout-steps{overflow:hidden}
@media(max-width:575px){
  body.is-checkout .checkout-steps .step-text,body.is-checkout .checkout-steps .text-truncate{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
}
/* Footer mobil: Grid-Spalten duerfen schrumpfen (kein horizontaler Scroll) */
.mp-footer__col{min-width:0}
.mp-footer__col .text-truncate{max-width:100%}
@media(max-width:575px){
  .mp-footer__top{display:block !important}
  .mp-footer__col{width:100%;max-width:100%;margin-bottom:18px}
  .mp-footer__col .text-truncate{white-space:normal}
}
/* ============================================================================
   CHECKOUT 2.0 — ablenkungsfrei wie große Shops (Shop-Chrome aus, eigene Shell)
   ============================================================================ */
body.is-checkout #jtl-nav-wrapper,body.is-checkout footer#footer{display:none !important}
body.is-checkout{background:#f7f4ef}
body.is-checkout #checkout{max-width:1180px;margin:0 auto;padding-bottom:40px}
/* Kassen-Leiste */
.mp-ck-bar{position:sticky;top:0;z-index:1020;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--mp-line,#e8dfd6);padding:0 22px;height:62px;margin-bottom:22px}
.mp-ck-bar__back{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--mp-muted,#9a8f86);text-decoration:none !important}
.mp-ck-bar__back:hover{color:var(--mp-ink,#2a2320)}
.mp-ck-bar__logo{justify-self:center;text-decoration:none !important;color:var(--mp-ink,#2a2320)}
.mp-ck-bar__logo img{max-height:34px;width:auto}
.mp-ck-bar__wordmark{font-family:var(--mp-display,Fraunces,Georgia,serif);font-size:21px;letter-spacing:.14em;text-transform:uppercase}
.mp-ck-bar__wordmark b{font-weight:700}
.mp-ck-bar__secure{justify-self:end;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--mp-muted,#9a8f86)}
.mp-ck-bar__secure i{color:var(--mp-gold,#a05161)}
@media(max-width:575px){.mp-ck-bar__back span,.mp-ck-bar__secure span{display:none}.mp-ck-bar{padding:0 14px;height:56px}}
/* Schrittleiste: zentriert, ruhig */
body.is-checkout .checkout-steps{background:transparent;border:0;box-shadow:none;justify-content:center;margin:0 0 22px}
body.is-checkout .checkout-steps .step{flex:0 0 auto;padding:0 18px}
body.is-checkout .checkout-steps .badge-pill{background:transparent;border:1.5px solid var(--mp-line2,#d8d0c8);color:var(--mp-muted,#9a8f86);width:28px;height:28px;display:inline-grid;place-items:center;border-radius:50% !important;font-size:12px}
body.is-checkout .checkout-steps .step-current .badge-pill{background:var(--mp-ink,#2a2320);border-color:var(--mp-ink,#2a2320);color:#fff}
body.is-checkout .checkout-steps .step-active:not(.step-current) .badge-pill{border-color:var(--mp-ink,#2a2320);color:var(--mp-ink,#2a2320)}
body.is-checkout .checkout-steps .step-text{font-size:12.5px;font-weight:600;color:var(--mp-muted,#9a8f86)}
body.is-checkout .checkout-steps .step-current .step-text{color:var(--mp-ink,#2a2320)}
/* Hauptspalte als Karte */
body.is-checkout .mp-ck-main{background:#fff;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;padding:26px 28px}
@media(max-width:575px){body.is-checkout .mp-ck-main{padding:18px 16px}}
body.is-checkout .mp-ck-main .h2,body.is-checkout .mp-ck-main h1.h2{font-family:var(--mp-display,Fraunces,Georgia,serif);font-size:22px !important;font-weight:600}
/* Login: schmale Zeile statt grauer Spalte ("Bereits Kunde?") */
body.is-checkout .checkout-existing-customer{flex:0 0 100%;max-width:100%;margin-bottom:18px}
body.is-checkout .checkout-existing-customer .card,body.is-checkout .checkout-existing-customer .card-gray{background:#faf8f4;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;box-shadow:none}
body.is-checkout .checkout-existing-customer .card-body{padding:14px 16px}
body.is-checkout .checkout-existing-customer .card-title{font-size:13px;font-weight:700;margin:0 0 10px}
body.is-checkout .checkout-existing-customer form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
body.is-checkout .checkout-existing-customer form .form-group{flex:1 1 190px;margin-bottom:0}
body.is-checkout .checkout-existing-customer form .customer-login-buttons{flex:0 0 auto;display:flex;gap:10px;align-items:center}
body.is-checkout .checkout-existing-customer .btn-block{width:auto;padding-left:20px;padding-right:20px}
body.is-checkout .checkout-existing-customer + .col{flex:0 0 100%;max-width:100%}
body.is-checkout .checkout-existing-customer-hr,body.is-checkout .hr-sect{display:none}
/* Großer CTA im monPARFUM-Stil */
body.is-checkout .checkout-register-form .btn-primary.submit_once,body.is-checkout .mp-ck-main .btn-primary[type="submit"]{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important;color:#fff !important;min-height:54px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:2px !important;width:100%}
body.is-checkout .checkout-register-form .btn-primary.submit_once:hover,body.is-checkout .mp-ck-main .btn-primary[type="submit"]:hover{background:#463f39 !important;border-color:#463f39 !important}
/* Rechts-Footer der Kasse */
.mp-ck-legal{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:34px 0 8px;font-size:11.5px}
.mp-ck-legal a{color:var(--mp-muted,#9a8f86);text-decoration:none;border-bottom:1px solid transparent}
.mp-ck-legal a:hover{color:var(--mp-ink,#2a2320);border-bottom-color:currentColor}

/* Schrittleiste: NOVA-Chevrons + Unterstreichung entfernen */
body.is-checkout .checkout-steps .step::before,body.is-checkout .checkout-steps .step::after,
body.is-checkout .checkout-steps .step .step-content::before,body.is-checkout .checkout-steps .step .step-content::after{display:none !important;content:none !important}
body.is-checkout .checkout-steps .step,body.is-checkout .checkout-steps .step-current,body.is-checkout .checkout-steps .step-active{border:0 !important;background:transparent !important;box-shadow:none !important}
body.is-checkout .checkout-steps a{text-decoration:none !important}
/* PayPal-Express in der Login-Zeile dezenter */
body.is-checkout .checkout-existing-customer [id^="paypal-button"],body.is-checkout .checkout-existing-customer .ppc-standalone-buttons,body.is-checkout .checkout-existing-customer [id^="ppc-"]{max-width:440px}
/* ===== Verfügbarkeits-Popup (Glocke auf Ausverkauft-Karten) ===== */
.mp-nm .modal-dialog{max-width:440px}
.mp-nm__content{border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;padding:34px 34px 30px;text-align:center;box-shadow:0 30px 80px -30px rgba(42,35,32,.5)}
.mp-nm__close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:1px solid var(--mp-line,#e8dfd6);background:#fff;color:var(--mp-ink,#2a2320);display:grid;place-items:center;cursor:pointer;border-radius:0;z-index:3}
.mp-nm__close:hover{color:var(--mp-gold,#a05161);border-color:var(--mp-gold,#a05161)}
.mp-nm__icon{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--mp-accent-soft,#efe4d7);color:var(--mp-gold,#a05161);display:grid;place-items:center;font-size:20px}
.mp-nm__icon--ok{background:#e3efe7;color:#3c7a52}
.mp-nm__title{font-family:var(--mp-display,Fraunces,Georgia,serif);font-size:22px;font-weight:600;color:var(--mp-ink,#2a2320)}
.mp-nm__product{font-size:12.5px;font-weight:600;color:var(--mp-muted,#9a8f86);margin:6px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-nm__text{font-size:13px;color:var(--mp-muted,#9a8f86);margin:10px 0 18px;line-height:1.55}
.mp-nm__hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.mp-nm__input{width:100%;border:1px solid var(--mp-line2,#d8d0c8);border-radius:2px;padding:13px 14px;font-size:14px;background:#fff}
.mp-nm__input:focus{outline:none;border-color:var(--mp-ink,#2a2320)}
.mp-nm__consent{display:flex;gap:9px;align-items:flex-start;text-align:left;font-size:11px;color:var(--mp-muted,#9a8f86);margin:12px 0 16px;cursor:pointer}
.mp-nm__consent input{margin-top:2px;accent-color:var(--mp-gold,#a05161)}
.mp-nm__consent a{color:inherit;text-decoration:underline}
.mp-nm__submit{width:100%;min-height:50px;background:var(--mp-ink,#2a2320);color:#fff;border:1px solid var(--mp-ink,#2a2320);border-radius:2px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background .15s}
.mp-nm__submit:hover{background:#463f39}
.mp-nm__submit[disabled]{opacity:.6;cursor:wait}
.mp-nm__submit i{margin-right:7px}
.mp-nm__submit--ghost{background:transparent;color:var(--mp-ink,#2a2320)}
.mp-nm__submit--ghost:hover{background:var(--mp-cream,#f2ece6)}
.mp-nm__error{margin-top:12px;font-size:12px;color:var(--mp-sale,#b23a4a);background:color-mix(in srgb,var(--mp-sale,#b23a4a) 8%,#fff);border:1px solid color-mix(in srgb,var(--mp-sale,#b23a4a) 30%,#fff);padding:9px 11px;border-radius:2px}

/* ============================================================================
   ZUSAMMENFASSUNG (Bestaetigung) — Variante A "Kompakt-Karten", 1:1 zum Mockup
   ============================================================================ */
.mp-ok-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
@media(max-width:900px){.mp-ok-grid{grid-template-columns:1fr}}
.mp-ok-card{background:#fff;border:1px solid var(--mp-line,#e8dfd6)}
/* Prüf-Zeilen */
.mp-ok-row{display:grid;grid-template-columns:30px minmax(0,1.1fr) minmax(0,2fr) auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--mp-line,#e8dfd6);font-size:13px}
.mp-ok-card .mp-ok-row:last-child,.mp-ok-card>*:last-child .mp-ok-row:last-child{border-bottom:0}
.mp-ok-row__ic{font-size:15px;color:var(--mp-gold,#a05161);text-align:center}
.mp-ok-row__lbl{font-weight:700;font-size:12px;color:var(--mp-ink,#2a2320)}
.mp-ok-row__val{color:var(--mp-ink2,#463f39);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-ok-row__hint{color:var(--mp-muted,#8b847c)}
.mp-ok-row__edit{font-size:11.5px;color:var(--mp-gold,#a05161);font-weight:600;text-decoration:none;white-space:nowrap}
.mp-ok-row__edit:hover{text-decoration:underline}
@media(max-width:900px){.mp-ok-row{grid-template-columns:26px minmax(0,1fr) auto}.mp-ok-row__val{grid-column:2/4;grid-row:2;white-space:normal}}
/* Artikel-Karte: JTL inc_order_items kompakt */
.mp-ok-items{margin-top:18px;padding:4px 18px}
.mp-ok-items .checkout-items-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--mp-line,#e8dfd6);margin:0}
.mp-ok-items .checkout-items-item:last-child{border-bottom:0}
.mp-ok-items .checkout-items-item>[class*="col"]{padding:0;flex:none;max-width:none;width:auto}
.mp-ok-items .checkout-items-item img{max-width:52px;max-height:52px;border:1px solid var(--mp-line,#e8dfd6);background:#fff;padding:2px}
.mp-ok-items .checkout-items-item .productname,.mp-ok-items .checkout-items-item p{font-size:13px;font-weight:600;line-height:1.35;margin:0}
.mp-ok-items .checkout-items-item a{color:var(--mp-ink,#2a2320);text-decoration:none}
.mp-ok-items .checkout-items-item ul{list-style:none;padding:0;margin:2px 0 0;font-size:11px;color:var(--mp-muted,#8b847c)}
.mp-ok-items .checkout-items-item ul li{display:none}
.mp-ok-items .checkout-items-item ul li.baseprice,.mp-ok-items .checkout-items-item ul li.sku{display:inline;margin-right:10px}
.mp-ok-items .checkout-items-item ul li strong{font-weight:500}
.mp-ok-items .checkout-items-item .price,.mp-ok-items .checkout-items-item [class*="price-col"]{font-weight:700;font-size:13.5px;white-space:nowrap;text-align:right}
.mp-ok-items .checkout-items-item .shortdescription,.mp-ok-items .checkout-items-item .attribute,.mp-ok-items .checkout-items-item .characteristic,.mp-ok-items .checkout-items-item .manufacturer,.mp-ok-items .checkout-items-item .delivery-status{display:none !important}
/* Summen-/Versand-/Steuer-Zeilen der Artikelliste ausblenden (stehen in der Sidebar) */
.mp-ok-items [class*="checkout-items-total"],.mp-ok-items hr{display:none !important}
/* Aufklapper (Kommentar/Gutschein/Guthaben) */
.mp-ok-more{margin-top:14px;font-size:12.5px}
.mp-ok-more summary{cursor:pointer;color:var(--mp-muted,#8b847c);font-weight:600;list-style:none;display:inline-block}
.mp-ok-more summary::-webkit-details-marker{display:none}
.mp-ok-more summary::before{content:'+ ';color:var(--mp-gold,#a05161);font-weight:700}
.mp-ok-more[open] summary::before{content:'– '}
.mp-ok-more__body{margin-top:10px;max-width:480px}
.mp-ok-textarea{width:100%;margin-top:10px;border:1px solid var(--mp-line2,#d8d0c8);border-radius:2px;padding:10px;font:inherit;font-size:13px;min-height:64px;background:#fff}
/* Summen-Karte */
.mp-ok-side{background:#fff;border:1px solid var(--mp-line,#e8dfd6);padding:20px;position:sticky;top:84px}
@media(max-width:900px){.mp-ok-side{position:static;margin-top:20px}}
.mp-ok-side__title{font-size:14px;font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--mp-line,#e8dfd6)}
.mp-ok-sum{font-size:13px;color:var(--mp-ink2,#463f39)}
.mp-ok-sum>div{display:flex;justify-content:space-between;padding:7px 0}
.mp-ok-free{color:#3c7a52;font-weight:600}
.mp-ok-sum__tot{border-top:1px solid var(--mp-line,#e8dfd6);margin-top:6px;padding-top:13px !important;font-weight:700;color:var(--mp-ink,#2a2320);font-size:15px;align-items:baseline}
.mp-ok-sum__tot strong{font-size:19px;letter-spacing:-.02em}
.mp-ok-agb{margin:14px 0 !important;font-size:11.5px;color:var(--mp-muted,#8b847c);line-height:1.5}
.mp-ok-agb p{margin:0}
.mp-ok-agb a{color:var(--mp-ink2,#463f39)}
.mp-ok-checkboxes{font-size:12px;margin-bottom:12px}
.mp-ok-checkboxes .form-group{margin-bottom:8px}
.mp-ok-cta,#complete-order-button{width:100%;min-height:52px;background:var(--mp-ink,#2a2320) !important;border:1px solid var(--mp-ink,#2a2320) !important;color:#fff !important;font-size:12.5px !important;font-weight:700 !important;letter-spacing:.07em;text-transform:uppercase;border-radius:2px !important;box-shadow:none !important}
.mp-ok-cta:hover,#complete-order-button:hover{background:#463f39 !important;border-color:#463f39 !important}
.mp-ok-cta i{margin-right:8px}
.mp-ok-ghost{display:block;text-align:center;font-size:12px;color:var(--mp-muted,#8b847c);margin-top:12px;text-decoration:underline}
.mp-ok-ghost:hover{color:var(--mp-ink,#2a2320)}
.mp-ok-trust{display:flex;gap:14px;justify-content:center;font-size:10.5px;color:var(--mp-muted,#8b847c);margin-top:14px;flex-wrap:wrap}
.mp-ok-trust i{color:#3c7a52;margin-right:3px}
/* Karte um die Artikelliste herum, wenn NOVA eigene Cards rendert: neutralisieren */
.mp-ok .card,.mp-ok .card-gray{border:0;background:transparent;box-shadow:none}
.mp-ok .card-body{padding:0}

/* ---- Fix v1.34.1b: PDP-Kaufzone — Menge (+/-) sichtbar, Button voll breit ---- */
.mpp-buy .choose_quantity,.mpp-buy #quantity-grp,.mpp-buy .form-counter{display:flex !important}
.mpp-buy .product-quantity{display:block !important}
.mpp-buy .basket-form-inline{display:flex !important;flex-wrap:nowrap;gap:12px;align-items:stretch;margin:0 !important}
.mpp-buy .basket-form-inline>[class*=col]{padding:0 !important;width:auto;max-width:none;flex:1 1 auto}
.mpp-buy .basket-form-inline>[class*=col]:first-child{flex:0 0 auto}
.mpp-buy .choose_quantity{height:54px;min-height:54px;width:130px;max-width:130px;border:1px solid var(--line2,#d8d0c8);border-radius:2px;overflow:visible;background:#fff;display:flex !important;flex-wrap:nowrap !important;align-items:stretch}
.mpp-buy .choose_quantity .input-group-prepend,.mpp-buy .choose_quantity .input-group-append{margin:0;flex:0 0 40px !important;width:40px !important;max-width:40px !important;display:flex;align-items:stretch}
/* "Stück"-Einheit im Stepper ausblenden — sie schob das + über den Rand hinaus */
.mpp-buy .choose_quantity .input-group-text,.mpp-buy .choose_quantity .unit{display:none !important}
.mpp-buy .choose_quantity .btn{background:#fff !important;border:0 !important;color:var(--ink,#2a2320) !important;width:40px !important;min-width:40px !important;max-width:40px !important;flex:1 1 auto !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;display:flex !important;align-items:center;justify-content:center}
.mpp-buy .choose_quantity .btn .fas{font-size:13px}
.mpp-buy .choose_quantity .btn:hover{background:var(--mp-cream,#f2ece6) !important}
.mpp-buy .choose_quantity input,.mpp-buy .choose_quantity .form-control.quantity{border:0 !important;text-align:center;font-weight:600;font-size:15px;box-shadow:none !important;flex:1 1 0 !important;width:0 !important;min-width:0 !important;max-width:none !important;padding:0 2px !important}
@media(max-width:575px){.mpp-buy .basket-form-inline{flex-wrap:wrap}.mpp-buy .basket-form-inline>[class*=col]:first-child{flex:1 1 100%}.mpp-buy .choose_quantity{max-width:none;width:100%}}

/* ============================================================================
   V1 "KOMPAKT-KARTEN" — Warenkorb-Seite (User-Wahl, Mockup 1)
   ============================================================================ */
.basket h1{font-family:var(--mp-display,Fraunces,Georgia,serif);font-size:24px;font-weight:600;margin-bottom:16px}
.basket .basket_wrapper{background:#fff;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;padding:4px 18px}
.basket .cart-items-header{display:none !important}
.basket .cart-items-body{padding:14px 0;border-bottom:1px solid var(--mp-line,#e8dfd6);margin:0;align-items:center}
.basket .basket-items>.cart-items-body:last-of-type{border-bottom:0}
.basket .cart-items-body hr{display:none}
.basket .cart-items-image{max-width:80px;padding-left:0}
.basket .cart-items-image img{border:1px solid var(--mp-line,#e8dfd6);background:#fff;padding:3px;max-width:64px}
.basket a.cart-items-name{font-size:13.5px;font-weight:600;color:var(--mp-ink,#2a2320);line-height:1.35;text-decoration:none}
.basket a.cart-items-name:hover{color:var(--mp-gold,#a05161)}
.basket .cart-items-body ul.list-unstyled{font-size:11px;color:var(--mp-muted,#8b847c);margin:2px 0 0}
.basket .cart-items-body ul.list-unstyled li{display:none}
.basket .cart-items-body ul.list-unstyled li.baseprice,.basket .cart-items-body ul.list-unstyled li:first-child{display:inline;margin-right:10px}
.basket .cart-items-single-price{font-size:12px;color:var(--mp-muted,#8b847c)}
.basket .cart-items-price .price_overall{font-size:14px;font-weight:700;color:var(--mp-ink,#2a2320)}
.basket .choose_quantity{max-width:128px;border:1px solid var(--mp-line2,#d8d0c8);border-radius:2px;overflow:hidden;background:#fff}
.basket .choose_quantity .btn{background:#fff;border:0;color:var(--mp-ink,#2a2320);min-width:34px;box-shadow:none !important;border-radius:0}
.basket .choose_quantity .btn:hover{background:var(--mp-cream,#f2ece6)}
.basket .choose_quantity input.quantity{border:0;text-align:center;font-weight:600;font-size:13px;box-shadow:none !important}
.basket .cart-items-delete{margin-top:4px}
.basket .cart-items-delete .btn{font-size:11.5px;color:var(--mp-muted,#8b847c);text-decoration:underline;text-underline-offset:2px;padding:2px 10px 2px 0;box-shadow:none !important}
.basket .cart-items-delete .btn:hover{color:var(--mp-sale,#b23a4a)}
.basket .cart-items-delete .btn .fas{margin-right:4px}
/* Versandrechner + Gutschein als schlanke Karten */
.basket .shipping-calculator-main,.basket #basket-coupon-form{background:#fff;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;padding:16px 18px;margin-top:16px}
.basket .shipping-calculator-main-heading{font-size:13px;font-weight:700;margin-bottom:10px}
/* Bestelluebersicht: weisse sticky Karte mit Ink-CTA */
.basket .cart-summary{background:#fff !important;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;padding:20px !important;top:84px;font-size:13px;color:var(--mp-ink2,#463f39)}
.basket .cart-summary>.h2,.basket .cart-summary h2{font-size:14px !important;font-weight:700;font-family:inherit;padding-bottom:12px;border-bottom:1px solid var(--mp-line,#e8dfd6);margin-bottom:8px}
.basket .cart-summary hr{border-color:var(--mp-line,#e8dfd6);margin:10px 0}
.basket .cart-summary .total-sum{color:var(--mp-ink,#2a2320);font-weight:700}
.basket .cart-summary .btn-primary{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important;color:#fff !important;min-height:52px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:2px !important;box-shadow:none !important}
.basket .cart-summary .btn-primary:hover{background:#463f39 !important;border-color:#463f39 !important}
.basket .cart-summary::after{content:'\2713  100 % Original      \2713  14 Tage R\00fcckgabe      \2713  2 Gratisproben';display:block;text-align:center;font-size:10.5px;color:var(--mp-muted,#8b847c);margin-top:14px;white-space:pre-wrap}
@media(max-width:991px){.basket .cart-summary{position:static !important;margin-top:20px}}

/* ============================================================================
   V1 — Checkout Schritt 2: Versandart + Zahlungsart als Karten-Radiozeilen
   ============================================================================ */
#checkout-shipping-payment legend,.checkout-payment-options legend{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mp-muted,#8b847c);border:0;margin:18px 0 8px;padding:0}
.checkout-shipping-form-options,.checkout-payment-options .radio-group,.checkout-payment-options{margin-bottom:6px}
/* Radio-Zeilen */
.checkout-shipping-form-options .custom-radio,.checkout-payment-method .custom-radio{background:#fff;border:1px solid var(--mp-line,#e8dfd6);border-bottom-width:0;margin:0;padding:15px 18px 15px 50px;transition:background .12s}
.checkout-shipping-form-options .custom-radio:last-child{border-bottom-width:1px}
.checkout-payment-method:last-child .custom-radio{border-bottom-width:1px}
.checkout-shipping-form-options .custom-radio:has(input:checked),.checkout-payment-method .custom-radio:has(input:checked){background:#f6f2ec}
.checkout-shipping-form-options .custom-control-label,.checkout-payment-method .custom-control-label{width:100%;cursor:pointer}
.checkout-shipping-form-options .custom-control-label::before,.checkout-payment-method .custom-control-label::before{border:1.5px solid var(--mp-line2,#d8d0c8);width:18px;height:18px;left:-32px;top:2px;background:#fff}
.checkout-shipping-form-options .custom-control-label::after,.checkout-payment-method .custom-control-label::after{left:-32px;top:2px;width:18px;height:18px}
.checkout-shipping-form-options .custom-control-input:checked~.custom-control-label::before,.checkout-payment-method .custom-control-input:checked~.custom-control-label::before{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important;box-shadow:none !important}
.checkout-shipping-form-options .title,.checkout-payment-method .title{font-size:13.5px;font-weight:600;color:var(--mp-ink,#2a2320)}
.checkout-shipping-form-options .title small,.checkout-payment-method .checkout-payment-method-note{font-size:11.5px;color:var(--mp-muted,#8b847c);font-weight:400}
.checkout-shipping-form-options .desc{font-size:11.5px;color:var(--mp-muted,#8b847c) !important}
.checkout-shipping-form-options .price-col{font-size:13px;font-weight:700;text-align:right}
.checkout-payment-method .img-sm{max-height:24px;width:auto;margin-right:8px}
.checkout-shipping-form-change{margin-bottom:6px}
.checkout-shipping-form-change a{font-size:11.5px;color:var(--mp-gold,#a05161)}
/* Weiter-Button-Zeile */
.checkout-button-row .btn-primary,#checkout-shipping-payment~.checkout-button-row .btn{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important;color:#fff !important;min-height:50px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:2px !important}

/* ============================================================================
   V1 — Mini-Warenkorb (Dropdown) mit +/-
   ============================================================================ */
.cart-dropdown{border:1px solid var(--mp-line,#e8dfd6) !important;border-radius:2px !important;box-shadow:0 24px 60px -20px rgba(42,35,32,.35) !important;padding:14px 16px !important;min-width:380px}
.cart-dropdown .dropdown-cart-items td{border-top:0;border-bottom:1px solid var(--mp-line,#e8dfd6);padding:10px 4px;font-size:12.5px;vertical-align:middle}
.cart-dropdown .dropdown-cart-items tr:last-child td{border-bottom:0}
.cart-dropdown .dropdown-cart-items a{color:var(--mp-ink,#2a2320);font-weight:600;text-decoration:none;font-size:12.5px;line-height:1.3}
.cart-dropdown .img-sm{border:1px solid var(--mp-line,#e8dfd6);padding:2px;background:#fff;max-width:44px}
.mp-dd-qty{display:inline-flex;align-items:center;border:1px solid var(--mp-line2,#d8d0c8);background:#fff;height:28px;border-radius:2px;overflow:hidden;vertical-align:middle}
.mp-dd-qty button{width:26px;height:100%;border:0;background:#fff;font-size:14px;line-height:1;cursor:pointer;color:var(--mp-ink,#2a2320);padding:0}
.mp-dd-qty button:hover{background:var(--mp-cream,#f2ece6)}
.mp-dd-num{min-width:26px;text-align:center;font-weight:600;font-size:12px}
.mp-dd-del{border:0;background:transparent;color:var(--mp-muted,#8b847c);font-size:15px;line-height:1;cursor:pointer;padding:2px 4px;margin-left:8px;vertical-align:middle}
.mp-dd-del:hover{color:var(--mp-sale,#b23a4a)}
.cart-dropdown .cart-dropdown-total-item{font-size:12px;color:var(--mp-ink2,#463f39);display:flex;justify-content:space-between;padding:2px 0}
.cart-dropdown .cart-dropdown-total-item-price{font-variant-numeric:tabular-nums}
.cart-dropdown .list-unstyled li.font-weight-bold-util{display:flex;justify-content:space-between;border-top:1px solid var(--mp-line,#e8dfd6);margin-top:6px;padding-top:9px;font-size:13.5px}
.cart-dropdown .cart-dropdown-buttons .btn-primary{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.06em;min-height:42px;border-radius:2px !important}
.cart-dropdown .cart-dropdown-buttons .btn-outline-primary{border:1px solid var(--mp-ink,#2a2320) !important;color:var(--mp-ink,#2a2320) !important;background:#fff !important;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.06em;min-height:42px;border-radius:2px !important}
.cart-dropdown .cart-dropdown-buttons .btn-outline-primary:hover{background:var(--mp-cream,#f2ece6) !important}
.cart-dropdown .cart-dropdown-shipping-notice{font-size:11px;color:var(--mp-muted,#8b847c)}

/* ============================================================================
   CHECKOUT SCHRITT 1 (Adresse) — Variante 1 "Gast zuerst" (User-Wahl)
   Reines Umstylen des NOVA-Gast-Formulars: einspaltig, Gruppen-Labels,
   Login als Aufklappleiste, Rechtstext/B2B-Felder eingeklappt.
   ============================================================================ */
.mp-addr{max-width:760px}
/* --- Login als schlanke Aufklappleiste --- */
.mp-loginbar{border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;background:#faf7f3;margin-bottom:24px;overflow:hidden}
.mp-loginbar>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:13px;color:var(--mp-ink2,#463f39)}
.mp-loginbar>summary::-webkit-details-marker{display:none}
.mp-loginbar__txt{display:inline-flex;align-items:center;gap:9px}
.mp-loginbar__txt i{color:var(--mp-gold,#a05161);font-size:16px}
.mp-loginbar__hint{color:var(--mp-muted,#8b847c)}
@media(max-width:520px){.mp-loginbar__hint{display:none}}
.mp-loginbar__cta{color:var(--mp-gold,#a05161);font-weight:700;font-size:12.5px;white-space:nowrap;letter-spacing:.03em}
.mp-loginbar__cta::after{content:" \25BE";font-size:10px}
.mp-loginbar[open] .mp-loginbar__cta::after{content:" \25B4"}
.mp-loginbar__body{padding:16px;border-top:1px solid var(--mp-line,#e8dfd6);background:#fff}
.mp-loginbar__body .card,.mp-loginbar__body .card-gray{border:0 !important;background:transparent !important;box-shadow:none !important;margin:0}
.mp-loginbar__body .card-body{padding:0}
.mp-loginbar__body .customer-login-buttons-forgot{color:var(--mp-muted,#8b847c);font-size:12px}

/* --- Gast-Formular: einspaltig, Label über Feldern --- */
.checkout-register-form>hr,.checkout-register-form .form-group+hr{display:none}
/* Überschrift-Spalte (col-md-4 mit .h3) und Feld-Spalte (folgende col-md-8) volle Breite */
.checkout-register-form .row>[class*="col-md-4"]:has(>.h3){flex:0 0 100%;max-width:100%;margin-bottom:2px}
.checkout-register-form .row>[class*="col-md-4"]:has(>.h3)+[class*="col-md-8"]{flex:0 0 100%;max-width:100%}
/* Überschrift -> Gruppen-Label */
.checkout-register-form .h3{font-family:var(--mp-font,inherit) !important;font-size:11px !important;font-weight:700 !important;letter-spacing:.13em;text-transform:uppercase;color:var(--mp-muted,#8b847c);margin:22px 0 12px !important;display:flex;align-items:center;gap:12px;line-height:1}
.checkout-register-form .row:first-child .h3,.checkout-register-form .h3:first-child{margin-top:0 !important}
.checkout-register-form .h3::after{content:"";flex:1;height:1px;background:var(--mp-line,#e8dfd6)}
/* Legende "Als Neukunde fortfahren" dezenter */
.checkout-register-form legend,.checkout-register-form .checkout-inc-billing-address-form-legend{border:0;font-size:20px;font-family:var(--mp-display,Georgia,serif);font-weight:600;margin-bottom:4px}
/* Feld-Optik an V1 angleichen */
.checkout-register-form .form-control{border:1px solid var(--mp-line2,#d8d0c8);border-radius:2px;min-height:52px;background:#fff}
.checkout-register-form .form-control:focus{border-color:var(--mp-ink,#2a2320);box-shadow:inset 0 0 0 1px var(--mp-ink,#2a2320)}
.checkout-register-form select.form-control{cursor:pointer}
.checkout-register-form .optional{color:var(--mp-faint,#b8afa6);font-weight:400;font-size:.85em}

/* --- Rechtstext eingeklappt --- */
.direct-advertising{font-size:11px !important;color:var(--mp-muted,#8b847c) !important}
.direct-advertising *{font-size:inherit !important;color:inherit !important;line-height:1.5}
details.mp-legal>summary{list-style:none;cursor:pointer;color:var(--mp-muted,#8b847c);font-size:11.5px}
details.mp-legal>summary::-webkit-details-marker{display:none}
details.mp-legal>summary::before{content:"\24D8  ";color:var(--mp-gold,#a05161)}
details.mp-legal[open]>summary{margin-bottom:8px}
details.mp-legal p{max-width:62ch}

/* --- B2B-Felder einklappen + Toggle --- */
.checkout-register-form:not(.mp-opt-show) .mp-opt-hidden{display:none}
.mp-opt-toggle{background:transparent;border:0;color:var(--mp-gold,#a05161);font-weight:600;font-size:12.5px;cursor:pointer;padding:2px 0 8px;text-align:left}
.mp-opt-toggle::before{content:"+ ";font-weight:800}
.mp-opt-toggle:hover{color:var(--mp-gold-d,#7d3a48)}

/* --- Submit + Datenschutz-Link --- */
.checkout-register-form .checkout-button-row{margin-top:22px;align-items:center}
.checkout-register-form .checkout-button-row .btn-primary{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important;color:#fff !important;min-height:52px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:2px !important;box-shadow:none !important}
.checkout-register-form .checkout-button-row .btn-primary:hover{background:#463f39 !important;border-color:#463f39 !important}
.checkout-register-form-buttons-privacy{font-size:11.5px}
.checkout-register-form-buttons-privacy a{color:var(--mp-muted,#8b847c);text-decoration:underline}
/* Lieferadresse-Toggle (aus inc_shipping_address) etwas Luft */
.checkout-register-form .checkbox.control-toggle,.checkout-register-form .register-form-account-unreg{margin-top:6px}

/* ============================================================================
   FIX v1.36.2 — Schritt 1 CTA voll breit + Schritt 2 (Versand/Zahlung) echte Klassen
   Zielt auf .checkout-shipping-form-options .custom-radio und .checkout-payment-method
   (Plugin-Zeilen mit .custom-control.custom-radio.custom-control-inline). MPP-STEP2-FIX
   ============================================================================ */
/* --- Schritt 1: „Kundendaten abschicken" volle Breite --- */
.checkout-register-form .checkout-button-row-submit{flex:0 0 100% !important;max-width:100% !important}
.checkout-register-form .checkout-button-row{flex-wrap:wrap}
.checkout-register-form .checkout-register-form-buttons-privacy{flex:0 0 100% !important;max-width:100% !important;text-align:right;margin-bottom:10px;order:-1}

/* --- Schritt 2: Sektions-Überschriften (Serif) sauber, nicht abgeschnitten --- */
.checkout-shipping-form .h3,.checkout-shipping-form-options+*,.checkout-payment-options,
#checkout-shipping-payment legend,.checkout-shipping-form legend{scroll-margin-top:90px}
.checkout-shipping-form{padding-top:2px}

/* --- Auswahl-Karten: Versand + Zahlung --- */
.checkout-shipping-form-options,.checkout-payment-options{display:block !important;margin:0 0 8px !important}
/* Kill Bootstrap-Inline-Radio-Verhalten */
.checkout-shipping-form-options .custom-control-inline,.checkout-payment-method .custom-control-inline{display:block !important;margin-right:0 !important;min-height:0}
/* Versand: die custom-radio-Zeile IST die Karte */
.checkout-shipping-form-options .custom-control.custom-radio{display:block !important;width:100% !important;max-width:100% !important;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;background:#fff;margin:0 0 10px !important;padding:0 !important;position:relative;padding-left:0 !important}
/* Zahlung: die col .checkout-payment-method IST die Karte */
.checkout-payment-options .checkout-payment-method{flex:0 0 100% !important;max-width:100% !important;width:100% !important;border:1px solid var(--mp-line,#e8dfd6);border-radius:2px;background:#fff;margin:0 0 10px !important;padding:0 !important;position:relative}
.checkout-payment-options .checkout-payment-method .custom-control{padding-left:0 !important;margin:0;width:100%}
/* Label füllt die Karte, Platz links für den Radio-Punkt */
.checkout-shipping-form-options .custom-control-label,
.checkout-payment-method .custom-control-label{display:flex !important;align-items:center;gap:10px;width:100%;min-height:56px;padding:12px 16px 12px 46px !important;cursor:pointer;margin:0;font-size:13.5px;color:var(--mp-ink,#2a2320)}
/* Runder Radio-Indikator */
.checkout-shipping-form-options .custom-control-label::before,
.checkout-payment-method .custom-control-label::before{width:18px !important;height:18px !important;left:16px !important;top:50% !important;transform:translateY(-50%);border-radius:50% !important;border:1.5px solid var(--mp-line2,#d8d0c8) !important;background:#fff !important;box-shadow:none !important}
.checkout-shipping-form-options .custom-control-label::after,
.checkout-payment-method .custom-control-label::after{left:16px !important;top:50% !important;transform:translateY(-50%);width:18px !important;height:18px !important;background:none !important}
.checkout-shipping-form-options .custom-control-input:checked~.custom-control-label::before,
.checkout-payment-method .custom-control-input:checked~.custom-control-label::before{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important}
.checkout-shipping-form-options .custom-control-input:checked~.custom-control-label::after,
.checkout-payment-method .custom-control-input:checked~.custom-control-label::after{background:radial-gradient(circle,#fff 0 3px,transparent 3.5px) !important}
/* Ausgewählte Karte hervorheben */
.checkout-shipping-form-options .custom-control.custom-radio:has(.custom-control-input:checked),
.checkout-payment-options .checkout-payment-method:has(.custom-control-input:checked){border-color:var(--mp-ink,#2a2320) !important;box-shadow:inset 0 0 0 1px var(--mp-ink,#2a2320);background:#faf7f3 !important}
/* Versand-Zeile: Name/Lieferzeit/Preis verteilen */
.checkout-shipping-form-options .custom-control-label .content{display:flex;flex:1;align-items:center;justify-content:space-between;gap:14px;margin:0;width:100%}
.checkout-shipping-form-options .custom-control-label .content [class*="col"]{padding:0;flex:0 0 auto;max-width:none;width:auto}
.checkout-shipping-form-options .price-col{font-weight:700;margin-left:auto}
.checkout-shipping-form-options .desc{color:var(--mp-muted,#8b847c) !important;font-size:11.5px}
/* Zahlungs-Logos/Text schlank */
.checkout-payment-method img,.checkout-payment-method .payment-logo{max-height:22px;width:auto}
.checkout-payment-method .checkout-payment-method-note{font-size:11.5px;color:var(--mp-muted,#8b847c);font-weight:400}
.checkout-payment-method .paypal-button-text{display:none}

/* --- Buttons Schritt 2: Weiter = Ink, Zurück = Ghost --- */
.checkout-button-row .btn-primary,.checkout-button-row .submit_once.btn-primary{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important;color:#fff !important;min-height:52px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:2px !important;box-shadow:none !important}
.checkout-button-row .btn-primary:hover{background:#463f39 !important;border-color:#463f39 !important}
.checkout-button-row .btn-outline-primary{background:#fff !important;border:1px solid var(--mp-line2,#d8d0c8) !important;color:var(--mp-ink,#2a2320) !important;min-height:52px;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:2px !important;box-shadow:none !important}
.checkout-button-row .btn-outline-primary:hover{background:var(--mp-cream,#f4f1ec) !important;border-color:var(--mp-ink,#2a2320) !important}

/* ============================================================================
   FIX v1.36.3 — Radio-Kreise + Ghost-Zurück mit korrekter Spezifität, Versandzeile
   Schlägt Zeile ~1290 (::before radius 2px) & ~1645 (#id~ .btn ink). MPP-STEP2-FIX2
   ============================================================================ */
/* Runde Radios (spez. (0,3,2) > body.is-checkout …::before (0,2,2)) */
body.is-checkout .checkout-shipping-form-options .custom-control-label::before,
body.is-checkout .checkout-payment-method .custom-control-label::before{border-radius:50% !important;width:18px !important;height:18px !important;left:16px !important;top:50% !important;transform:translateY(-50%) !important;border:1.5px solid var(--mp-line2,#d8d0c8) !important;background:#fff !important;box-shadow:none !important}
body.is-checkout .checkout-shipping-form-options .custom-control-input:checked~.custom-control-label::before,
body.is-checkout .checkout-payment-method .custom-control-input:checked~.custom-control-label::before{background:var(--mp-ink,#2a2320) !important;border-color:var(--mp-ink,#2a2320) !important}
body.is-checkout .checkout-shipping-form-options .custom-control-label::after,
body.is-checkout .checkout-payment-method .custom-control-label::after{left:16px !important;top:50% !important;transform:translateY(-50%) !important;width:18px !important;height:18px !important;background:none !important}
body.is-checkout .checkout-shipping-form-options .custom-control-input:checked~.custom-control-label::after,
body.is-checkout .checkout-payment-method .custom-control-input:checked~.custom-control-label::after{background:radial-gradient(circle,#fff 0 3px,transparent 3.5px) !important}
/* Ghost-Zurück (matcht #checkout-shipping-payment~ … , (1,2,0), später ⇒ gewinnt) */
#checkout-shipping-payment ~ .checkout-button-row .btn-outline-primary,
#checkout-shipping-payment ~ .checkout-button-row a.btn{background:#fff !important;color:var(--mp-ink,#2a2320) !important;border:1px solid var(--mp-line2,#d8d0c8) !important;text-transform:none !important;font-weight:600 !important;letter-spacing:0 !important;min-height:52px}
#checkout-shipping-payment ~ .checkout-button-row .btn-outline-primary:hover,
#checkout-shipping-payment ~ .checkout-button-row a.btn:hover{background:var(--mp-cream,#f4f1ec) !important;border-color:var(--mp-ink,#2a2320) !important}
/* Versandzeile: Name · Lieferzeit · Preis in EINER Reihe (nicht gestapelt) */
body.is-checkout .checkout-shipping-form-options .custom-control-label .content{display:flex !important;flex-wrap:nowrap !important;align-items:center;width:100%;gap:14px;margin:0}
body.is-checkout .checkout-shipping-form-options .custom-control-label .content>[class*="col"]{flex:0 1 auto !important;max-width:none !important;width:auto !important;padding:0 !important}
body.is-checkout .checkout-shipping-form-options .custom-control-label .content .price-col,
body.is-checkout .checkout-shipping-form-options .custom-control-label .content .font-weight-bold-util{margin-left:auto !important;flex:0 0 auto !important;font-weight:700;text-align:right}

/* ============================================================================
   BUTTON-TYPOGRAFIE global harmonisiert (v1.36.4) — größer & luftiger.
   Überschreibt konsolidiert alle bisherigen CTA-Regeln (kommt zuletzt).
   ============================================================================ */
.mpp-buy button[name="inWarenkorb"],.mpp-buy .add-to-cart-btn,
.mp-ok-cta,#complete-order-button,
.cart-summary .btn-primary,.basket .cart-summary .btn-primary,
.checkout-button-row .btn-primary,.checkout-button-row .submit_once.btn-primary,
.checkout-button-row .btn-outline-primary,.checkout-button-row .btn,
.checkout-register-form .checkout-button-row .btn-primary,
.mp-ck-bar .btn,.mp-ck-summary .btn{
  font-size:14.5px !important;
  letter-spacing:.02em !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  text-transform:uppercase !important;
  min-height:54px !important;
  padding-top:8px !important;padding-bottom:8px !important;
}
/* Icons in CTAs proportional */
.mpp-buy button[name="inWarenkorb"] i,.mp-ok-cta i,#complete-order-button i{font-size:14px !important}
/* Mini-Warenkorb-Buttons bleiben kompakt, aber lesbarer */
.cart-dropdown .cart-dropdown-buttons .btn-primary,
.cart-dropdown .cart-dropdown-buttons .btn-outline-primary{font-size:12px !important;letter-spacing:.02em !important;font-weight:600 !important;min-height:44px !important}

/* ============================================================================
   CHECKOUT SCHRITT 2 — Payment/Shipping-Karten konsolidiert (v1.37.0)
   Fix Doppelrand (col + custom-radio hatten beide Rand) · gewählte Methode
   leuchtet GRÜN · Fehlerbox-Styling unten. Überschreibt alle älteren Regeln.
   ============================================================================ */
/* Doppelrand weg: die äußere Spalte entkernen — die .custom-radio bleibt die Karte */
body.is-checkout .checkout-payment-method{border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;background:transparent !important}
/* Gewählte Methode leuchtet grün auf (Payment + Versand) */
body.is-checkout .checkout-payment-method .custom-radio:has(input:checked),
body.is-checkout .checkout-shipping-form-options .custom-radio:has(input:checked){
  border-color:#3c7a52 !important;
  box-shadow:0 0 0 1.5px #3c7a52, 0 8px 22px -12px rgba(60,122,82,.45) !important;
  background:#f2f9f4 !important;
}
body.is-checkout .checkout-payment-method .custom-control-input:checked~.custom-control-label::before,
body.is-checkout .checkout-shipping-form-options .custom-control-input:checked~.custom-control-label::before{
  background:#3c7a52 !important;border-color:#3c7a52 !important;box-shadow:none !important;
}
/* Verschobene Fehlerbox unten + optionaler Sektions-Hinweis */
.mp-inline-alerts{margin:6px 0 16px}
.mp-inline-alerts .alert{margin:0 0 8px;border-radius:2px}
.checkout-payment-options.mp-needs-choice{outline:1.5px dashed #3c7a52;outline-offset:6px;border-radius:3px;animation:mpPulse 1.4s ease 2}
@keyframes mpPulse{0%,100%{outline-color:rgba(60,122,82,.35)}50%{outline-color:rgba(60,122,82,.9)}}
@media(prefers-reduced-motion:reduce){.checkout-payment-options.mp-needs-choice{animation:none}}

/* Radio-Punkt der gewählten Methode grün (schlägt alle älteren ::before-Regeln) */
body.is-checkout .checkout-shipping-form-options .custom-control.custom-radio .custom-control-input:checked~.custom-control-label::before,
body.is-checkout .checkout-payment-method .custom-control.custom-radio .custom-control-input:checked~.custom-control-label::before{background:#3c7a52 !important;border-color:#3c7a52 !important;box-shadow:none !important}

/* ============================================================================
   STÖRER-KACHEL im Kategorie-Grid (Feature 1B) — settings-gesteuert
   Die Zelle .mp-stoerer-col übernimmt die Grid-Klassen des Nachbarn (perfekte
   Breite). .mp-stoerer füllt die Zelle wie eine Produktkarte.
   ============================================================================ */
.mp-stoerer-col{display:flex}
.mp-stoerer{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:100%;padding:24px 22px;border-radius:2px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;min-height:280px}
/* Optik-Presets */
.mp-stoerer--gold{background:linear-gradient(160deg,#6c3b45 0%,#a05161 58%,#c98a68 100%)}
.mp-stoerer--dark{background:linear-gradient(160deg,#2a2320 0%,#463f39 100%)}
.mp-stoerer--cream{background:linear-gradient(160deg,#f4ece2 0%,#e7d8c6 100%);color:var(--mp-ink,#2a2320)}
.mp-stoerer--cream .mp-stoerer__eyebrow,.mp-stoerer--cream .mp-stoerer__text{color:var(--mp-ink2,#463f39)}
.mp-stoerer__eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-bottom:8px}
.mp-stoerer__heading{font-family:var(--mp-display,Fraunces,Georgia,serif);font-size:23px;font-weight:600;line-height:1.12;margin-bottom:8px;text-wrap:balance}
.mp-stoerer__text{font-size:12.5px;line-height:1.5;opacity:.94;margin-bottom:16px;max-width:26ch}
.mp-stoerer__cta{align-self:flex-start;background:#fff;color:var(--mp-ink,#2a2320);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:11px 20px;border-radius:2px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.mp-stoerer__cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(0,0,0,.4)}
.mp-stoerer--cream .mp-stoerer__cta{background:var(--mp-ink,#2a2320);color:#fff}
/* ganze Kachel klickbar, wenn Link gesetzt (CTA liegt oben drauf) */
.mp-stoerer:has(.mp-stoerer__cta)::after{content:"";position:absolute;inset:0;z-index:0}
.mp-stoerer>*{position:relative;z-index:1}
@media(max-width:575px){.mp-stoerer{min-height:200px;padding:20px 18px}.mp-stoerer__heading{font-size:20px}.mp-stoerer-col--wide{flex:1 1 100% !important;max-width:100% !important}}

/* ============================================================================
   LIVE-SUCHE Dropdown (.mp-sd) – fehlertolerante Instant-Vorschau
   ============================================================================ */
.mp-sd{position:absolute;z-index:4200;background:#fff;border:1px solid var(--mp-line,#e8dfd6);box-shadow:0 30px 70px -30px rgba(42,35,32,.45);display:none;font-family:var(--mp-font,Inter,system-ui,sans-serif);color:var(--mp-ink,#2a2320);border-radius:0}
.mp-sd.is-open{display:grid;grid-template-columns:186px minmax(0,1fr)}
@media(max-width:640px){.mp-sd.is-open{grid-template-columns:1fr}}
.mp-sd mark{background:transparent;color:var(--mp-gold,#a05161);font-weight:700;padding:0}
/* Korrektur-Zeile */
.mp-sd__didyou{grid-column:1/-1;padding:9px 16px;font-size:12.5px;color:var(--mp-ink2,#463f39);background:color-mix(in srgb,var(--mp-gold,#a05161) 8%,#fff);border-bottom:1px solid var(--mp-line,#e8dfd6)}
.mp-sd__didyou b{color:var(--mp-gold-d,#7d3a48);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* Sidebar */
.mp-sd__side{border-right:1px solid var(--mp-line,#e8dfd6);background:var(--mp-soft,#faf8f4);padding:12px 0}
@media(max-width:640px){.mp-sd__side{border-right:0;border-bottom:1px solid var(--mp-line,#e8dfd6)}}
.mp-sd__sec{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mp-muted,#8b847c);padding:8px 16px 5px}
.mp-sd__link{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 16px;font-size:12.5px;color:var(--mp-ink2,#463f39);text-decoration:none}
.mp-sd__link:hover{background:var(--mp-cream2,#f2ece6);color:var(--mp-ink,#2a2320)}
.mp-sd__link .c{color:var(--mp-faint,#b8afa6);font-size:11px;font-variant-numeric:tabular-nums}
/* Produkte */
.mp-sd__main{padding:6px 0 0;min-width:0}
.mp-sd__prod{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 16px;text-decoration:none;color:var(--mp-ink,#2a2320);border-bottom:1px solid var(--mp-line,#e8dfd6)}
.mp-sd__prod:last-of-type{border-bottom:0}
.mp-sd__prod:hover,.mp-sd__prod.is-active{background:var(--mp-soft,#faf8f4)}
.mp-sd__th{width:46px;height:46px;border:1px solid var(--mp-line,#e8dfd6);background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.mp-sd__th img{max-width:100%;max-height:100%;object-fit:contain}
.mp-sd__th.noimg::after{content:"\1F9F4";font-size:18px;opacity:.5}
.mp-sd__meta{min-width:0}
.mp-sd__brand{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mp-muted,#8b847c);display:block}
.mp-sd__nm{font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-sd__badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.03em;padding:1px 6px;margin-top:3px;background:var(--mp-cream2,#f2ece6);color:var(--mp-muted,#8b847c)}
.mp-sd__prod.is-out .mp-sd__th img{opacity:.5;filter:grayscale(.5)}
.mp-sd__pr{text-align:right;white-space:nowrap}
.mp-sd__pr .now{font-size:13px;font-weight:700}
.mp-sd__pr .uvp{display:block;font-size:10px;color:var(--mp-muted,#8b847c);text-decoration:line-through}
/* Footer */
.mp-sd__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:var(--mp-cream,#f7f4ef);border-top:1px solid var(--mp-line,#e8dfd6);text-decoration:none;color:var(--mp-ink,#2a2320);font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer}
.mp-sd__foot:hover{background:var(--mp-cream2,#f2ece6)}
.mp-sd__keys{font-weight:400;letter-spacing:0;text-transform:none;color:var(--mp-muted,#8b847c);font-size:11px}
@media(max-width:640px){.mp-sd__keys{display:none}}
/* Empty */
.mp-sd__empty{grid-column:1/-1;padding:22px 20px;text-align:center}
.mp-sd__empty-h{font-family:var(--mp-display,Georgia,serif);font-size:16px;font-weight:600;margin-bottom:5px}
.mp-sd__empty p{font-size:12.5px;color:var(--mp-muted,#8b847c);margin-bottom:12px}
.mp-sd__fix{display:inline-block;background:var(--mp-ink,#2a2320);color:#fff;font-size:12.5px;font-weight:700;padding:9px 16px;text-decoration:none;cursor:pointer}
.ac_results{display:none !important}

/* ===== Warenkorb-Toast NEU (Feature 3): 2 Aktionen + Gratisversand + Balken ===== */
.mp-cart-toast{padding:0 !important;overflow:hidden;border-top:3px solid #3c7a52}
.mp-cart-toast__head{display:flex;align-items:center;gap:9px;padding:13px 16px 11px;font-size:13px;font-weight:700;color:var(--mp-ink,#2a2320);margin:0}
.mp-cart-toast__chk{width:20px;height:20px;border-radius:50%;background:#3c7a52;color:#fff;display:grid;place-items:center;flex:0 0 auto}
.mp-cart-toast__x{margin-left:auto;position:static;border:0;background:none;font-size:19px;line-height:1;color:var(--mp-muted,#8b847c);cursor:pointer;padding:0 2px}
.mp-cart-toast__x:hover{color:var(--mp-ink,#2a2320)}
.mp-cart-toast__body{display:flex;gap:12px;padding:0 16px 12px;align-items:center}
.mp-cart-toast__body img{width:54px;height:54px;object-fit:contain;background:var(--mp-soft,#faf8f4);border:1px solid var(--mp-line,#e8dfd6);padding:3px;flex:0 0 auto}
.mp-cart-toast__meta{min-width:0}
.mp-cart-toast__name{font-size:12.5px;font-weight:600;line-height:1.3;color:var(--mp-ink,#2a2320);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-cart-toast__sub{font-size:11px;color:var(--mp-muted,#8b847c);margin-top:2px}
.mp-cart-toast__price{font-size:13.5px;font-weight:700;color:var(--mp-ink,#2a2320);margin-top:2px}
.mp-cart-toast__ship{font-size:11px;color:var(--mp-ink2,#463f39);padding:0 16px 11px}
.mp-cart-toast__ship b{color:var(--mp-ink,#2a2320)}
.mp-cart-toast__ship .ok{color:#3c7a52;font-weight:600}
.mp-cart-toast__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 14px}
.mp-cart-toast__btn{text-align:center;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:11px 8px;text-decoration:none;border-radius:0;transition:background .14s}
.mp-cart-toast__btn.dark{background:var(--mp-ink,#2a2320);color:#fff}
.mp-cart-toast__btn.dark:hover{background:#463f39}
.mp-cart-toast__btn.ghost{background:#fff;color:var(--mp-ink,#2a2320);border:1px solid var(--mp-line2,#d8d0c8)}
.mp-cart-toast__btn.ghost:hover{background:var(--mp-cream,#f7f4ef)}
.mp-cart-toast__prog{height:3px;background:var(--mp-cream2,#f2ece6)}
.mp-cart-toast__prog i{display:block;height:100%;width:100%;background:#3c7a52;transform-origin:left;animation:mpToastBar 6s linear forwards}
.mp-cart-toast.is-paused .mp-cart-toast__prog i{animation-play-state:paused}
@keyframes mpToastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.mp-cart-toast__prog i{animation:none;transform:scaleX(0)}}

/* ===== Mega-Menü-Banner: rechts/links NEBEN den Spalten (statt immer unten) ===== */
#mainNavigation .dropdown-menu:has(.mp-mega-banner--right) .mp-mega-cols-grid,
#mainNavigation .dropdown-menu:has(.mp-mega-banner--left) .mp-mega-cols-grid{flex:1 1 0 !important;width:auto !important;min-width:0}
#mainNavigation .dropdown-menu .mp-mega-banner--right,
#mainNavigation .dropdown-menu .mp-mega-banner--left{flex:0 0 clamp(220px,23%,300px) !important;align-self:stretch;flex-direction:column !important;align-items:flex-start !important;margin-top:24px;margin-bottom:22px}
#mainNavigation .dropdown-menu .mp-mega-banner--right{order:99;margin-right:40px;margin-left:0}
#mainNavigation .dropdown-menu .mp-mega-banner--left{order:-1;margin-left:40px;margin-right:0}
#mainNavigation .dropdown-menu .mp-mega-banner--right .mp-mega-banner__img,
#mainNavigation .dropdown-menu .mp-mega-banner--left .mp-mega-banner__img{width:100%}
#mainNavigation .dropdown-menu .mp-mega-banner--right .mp-mega-banner__img img,
#mainNavigation .dropdown-menu .mp-mega-banner--left .mp-mega-banner__img img{width:100%;max-width:100%;max-height:210px;object-fit:cover}
@media(max-width:991.98px){#mainNavigation .dropdown-menu .mp-mega-banner--right,#mainNavigation .dropdown-menu .mp-mega-banner--left{flex-basis:auto !important;order:0;margin:6px 0}}

/* ============================================================================
   MOBILE-POLISH v1.42.2 — UX-Audit-Fixes (390px)
   ============================================================================ */
@media (max-width:575px){
  /* 1) Startseite: "Zeige alle …"-Link lief 26px über den Rand → Header umbrechen */
  .mp-home-block .mp-block-head{flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:16px}
  .mp-home-block .mp-block-title{font-size:22px !important;flex:1 1 100%;min-width:0;letter-spacing:-.3px}
  .mp-block-more{font-size:13px;flex:0 0 auto;white-space:nowrap}
  /* 2) Filter-Pills: eigene volle Zeile statt in 148px gequetscht → sauber wischbar */
  .mpf-bar{flex-wrap:wrap;gap:10px 12px}
  .mpf-pills{flex:1 1 100% !important;order:5;overflow-x:auto;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch;padding-bottom:3px;margin:2px -2px 0;scroll-padding-left:2px}
  .mpf-pills::-webkit-scrollbar{height:0}
  .mpf-pill{scroll-snap-align:start}
  /* 3) Header-Icons: 44px Touch-Fläche (WCAG/Apple HIG) ohne Höhenänderung */
  .nav-icons > li > .nav-link,
  .nav-icons .account-icon-dropdown > .dropdown-toggle,
  .nav-icons .cart-icon-dropdown > .dropdown-toggle,
  .nav-icons .cart-icon-dropdown > .nav-link{min-height:44px;min-width:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
  /* Breadcrumb-Links etwas größere Tap-Fläche */
  .breadcrumb a,.breadcrumb-item a{padding:4px 0;display:inline-block}
}
@media (max-width:767px){
  /* Filter-Pills auch auf Tablet-Portrait volle Zeile */
  .mpf-bar{flex-wrap:wrap}
  .mpf-pills{flex:1 1 100%;order:5;overflow-x:auto;flex-wrap:nowrap}
}

/* ===== Mobile-Fix v1.42.3: Produktblöcke (Sonderangebot/Bestseller) Seitenabstand,
   damit die äußeren Karten-Ränder nicht am Bildschirmrand kleben (iPhone 13) ===== */
@media (max-width:991.98px){
  .mp-home-block{padding-left:16px;padding-right:16px}
}
@media (max-width:575px){
  .mp-home-block{padding-left:16px;padding-right:16px}
  .mp-home-block .mp-grid{gap:12px}
}

/* ===== Mobiles Menü v1.42.4: kompaktere Abstände (waren 56px/Punkt → 44px)
   + feine Trennlinien für klare Struktur. Nur ≤991px (Offcanvas-Nav). ===== */
@media (max-width:991.98px){
  header .navbar-collapse .navbar-nav > .nav-item > .nav-link,
  #jtl-nav-wrapper .navbar-collapse .navbar-nav > .nav-item > .nav-link,
  header .navbar-nav > li > .nav-link{
    padding-top:12px !important; padding-bottom:12px !important;
    min-height:44px; display:flex; align-items:center;
  }
  /* Trennlinien zwischen Top-Level-Punkten */
  header .navbar-collapse .navbar-nav > .nav-item{ border-bottom:1px solid var(--mp-line); }
  header .navbar-collapse .navbar-nav > .nav-item:last-child{ border-bottom:0; }
  /* Drawer-Kopf ("Menü" + ×) etwas kompakter */
  header .nav-mobile-header > .row{ height:52px; }
  /* Untermenü-Ebene: etwas enger, klarer eingerückt */
  header .navbar-nav .dropdown-menu .nav-link{ padding-top:9px !important; padding-bottom:9px !important; }
  /* Sekundär-Block (Wunschzettel/News/Kontakt): gleiche kompakte Höhe */
  header .nav-mobile-body .navbar-nav .nav-link{ min-height:44px; }
}

/* ===== Mega-Menü mobil: enge Liste v1.42.5 — Kategorie-Gruppen waren 91px
   (16px+16px Padding + 15px Header-Margin). Jetzt ~46px + Trennlinien. ===== */
@media (max-width:991.98px){
  #mainNavigation .dropdown-menu .mp-mega-col-item{ padding-top:0 !important; padding-bottom:0 !important; margin:0 !important; }
  #mainNavigation .dropdown-menu .mp-mega-col-item > .categories-recursive-link,
  #mainNavigation .dropdown-menu .mp-mega-col-item > .submenu-headline-toplevel,
  #mainNavigation .dropdown-menu .mp-mega-col-item > a.d-block{
    padding-top:12px !important; padding-bottom:12px !important; margin:0 !important;
    min-height:46px; display:flex; align-items:center;
  }
  /* Trennlinien zwischen den Kategorie-Gruppen */
  #mainNavigation .dropdown-menu .mp-mega-grid-col > .mp-mega-col-item{ border-bottom:1px solid var(--mp-line); }
  #mainNavigation .dropdown-menu .mp-mega-grid-col:last-child > .mp-mega-col-item:last-child{ border-bottom:0; }
  /* Grid oben/unten kompakter + "…anzeigen"-Link straffen */
  #mainNavigation .dropdown-menu .mp-mega-cols-grid{ margin:6px 0 4px !important; }
  #mainNavigation .dropdown-menu .mp-mega-col-item .mp-mega-showall,
  #mainNavigation .dropdown-menu .mp-mega-cols-grid > .categories-recursive-link{ padding:12px 0 !important; margin:0 !important; }
}

/* === MPP-PDP-2026 END === */

/* Fix v1.35.1: selektierte Versand-/Zahlungskarte hell + lesbar (ueberschreibt Theme-Taupe rgb(160,149,141)) */
body.is-checkout .checkout-shipping-form-options .custom-control.custom-radio:has(input:checked),
body.is-checkout .checkout-payment-method .custom-control.custom-radio:has(input:checked),
.checkout-shipping-form-options .custom-control.custom-radio:has(input:checked),
.checkout-payment-method .custom-control.custom-radio:has(input:checked){background:#f2f9f4 !important;box-shadow:0 0 0 1.5px #3c7a52, 0 8px 22px -12px rgba(60,122,82,.45) !important;border-color:#3c7a52 !important}
.checkout-shipping-form-options .custom-radio:has(input:checked) .title,
.checkout-shipping-form-options .custom-radio:has(input:checked) .price-col,
.checkout-payment-method .custom-radio:has(input:checked) .title{color:var(--mp-ink,#2a2320) !important}
.checkout-shipping-form-options .custom-radio:has(input:checked) .desc,
.checkout-shipping-form-options .custom-radio:has(input:checked) .text-info,
.checkout-shipping-form-options .custom-radio:has(input:checked) small{color:var(--mp-muted,#8b847c) !important}

/* === Menü-Icons: Hover-Reveal je Kategorie (Inline-SVG via mp_megamenu, per JS injiziert) === */
/* mp_megamenu injiziert <span class="mp-navicon">SVG</span> als erstes Kind in den Nav-Link.
   Ruhezustand: Breite 0 + overflow:hidden -> Icon vollstaendig geclippt (kein Layer, garantiertes
   Malen in allen Browsern). Hover: Breite waechst -> Icon wird von links sanft aufgezogen. */
#mainNavigation .nav-link[data-category-id]{display:inline-flex;align-items:center;}
.mp-navicon{
    display:inline-flex;align-items:center;justify-content:flex-start;flex:none;
    width:0;overflow:hidden;color:currentColor;
    transition:width .3s cubic-bezier(.4,0,.2,1),margin-right .3s cubic-bezier(.4,0,.2,1);
}
.mp-navicon svg{width:1.4em;height:1.4em;display:block;flex:none;}
#mainNavigation .nav-item:hover > .nav-link[data-category-id] .mp-navicon,
#mainNavigation .nav-link[data-category-id]:focus-within .mp-navicon{
    width:1.4em;margin-right:9px;color:var(--mp-gold,#a05161);
}
/* Mobil (kein Hover): Icons dauerhaft aus, kein Layout-Effekt */
@media (max-width:991.98px){
    .mp-navicon{display:none !important;}
}

/* ============================================================================
   monPARFUM · Ankündigungs-Balken — "Warm Editorial Band"
   Nur --mp-Tokens. Tints via color-mix(). Full-width, NICHT sticky, Anfang #main-wrapper.
   Fail-open gerendert (kein CLS). JS setzt .is-hidden bei gültigem Dismiss.
   ============================================================================ */
.mp-announce{
  --_bg:     var(--mp-bg,#f8f4f0);
  --_ink:    var(--mp-ink,#2a2320);
  --_accent: var(--mp-gold,#a05161);
  --_hair:   color-mix(in srgb, var(--mp-gold,#a05161) 24%, transparent);
  --_muted:  color-mix(in srgb, var(--mp-ink,#2a2320) 60%, transparent);
  --_cta:    var(--mp-dgold,#7d3a48);
  --_focus:  var(--mp-gold,#a05161);
  width:100%; box-sizing:border-box;
  background:var(--_bg); color:var(--_ink);
  border-bottom:1px solid var(--_hair);
  font-family:var(--mp-font);
  position:relative; z-index:1;
}
.mp-announce *,.mp-announce *::before,.mp-announce *::after{ box-sizing:border-box; }
/* Startseite macht #main-wrapper zu Flexbox u. hoistet #content-wrapper (order:-1);
   Balken mit order:-2 GANZ nach oben (direkt unter die Nav), sonst rutscht er hinter den Hero. */
#main-wrapper:has(.mp-home) > .mp-announce{ order:-2; }
.mp-announce__inner{
  position:relative; max-width:1280px; margin-inline:auto; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  padding-block:9px; padding-inline:clamp(3rem,8vw,4rem);
}
.mp-announce__message{
  margin:0; display:inline-flex; align-items:center; flex-wrap:wrap;
  justify-content:center; column-gap:.65rem; row-gap:3px; text-align:center;
}
/* Slides: mehrere Aktionen im selben Raster-Feld gestapelt -> stabiler Umriss, sanfter Crossfade */
.mp-announce__slides{ display:inline-grid; }
.mp-announce__slide{
  grid-area:1 / 1; display:inline-flex; align-items:center; flex-wrap:wrap;
  justify-content:center; column-gap:.65rem; row-gap:3px;
  opacity:0; pointer-events:none; transition:opacity .55s ease;
}
.mp-announce__slide.is-active{ opacity:1; pointer-events:auto; }
.mp-announce__icon{ display:inline-flex; align-items:center; color:var(--_accent); opacity:.95; }
.mp-announce__icon svg{ display:block; }
.mp-announce__message.is-noicon .mp-announce__icon{ display:none; }
.mp-announce__text{
  font-family:var(--mp-display); font-optical-sizing:auto; font-weight:400;
  font-size:clamp(13.5px,.55vw + 12px,15px); line-height:1.35; letter-spacing:.012em;
  color:var(--_ink); text-wrap:balance;
}
.mp-announce__cta{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--mp-font);
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--_cta); text-decoration:none; white-space:nowrap; padding-block:3px;
  border-radius:var(--mp-radius-sm,6px); transition:color .18s ease, gap .18s ease;
}
.mp-announce__cta-label{
  padding-bottom:1px; border-bottom:1px solid color-mix(in srgb, var(--mp-dgold,#7d3a48) 55%, transparent);
  transition:border-color .18s ease;
}
.mp-announce__cta-arrow{ transition:transform .18s ease; }
.mp-announce__cta:hover{ color:var(--mp-gold,#a05161); gap:8px; }
.mp-announce__cta:hover .mp-announce__cta-label{ border-color:var(--mp-gold,#a05161); }
.mp-announce__cta:hover .mp-announce__cta-arrow{ transform:translateX(1px); }
.mp-announce__close{
  position:absolute; inset-block:0; inset-inline-end:max(.25rem, env(safe-area-inset-right));
  margin-block:auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent; color:var(--_muted); cursor:pointer;
  border-radius:var(--mp-radius-sm,6px); -webkit-tap-highlight-color:transparent;
  transition:color .18s ease, background-color .18s ease;
}
.mp-announce__close:hover{ color:var(--_ink); background:color-mix(in srgb, var(--mp-gold,#a05161) 12%, transparent); }
.mp-announce__close svg{ display:block; }
.mp-announce__cta:focus-visible,.mp-announce__close:focus-visible{ outline:2px solid var(--_focus); outline-offset:2px; }
.mp-announce__cta:focus,.mp-announce__close:focus{ outline:2px solid var(--_focus); outline-offset:2px; }
.mp-announce__cta:focus:not(:focus-visible),.mp-announce__close:focus:not(:focus-visible){ outline:none; }

/* --- Stil-Varianten --- */
.mp-announce--warm{
  background:linear-gradient(90deg, var(--mp-bg,#f8f4f0) 0%, color-mix(in srgb, var(--mp-gold,#a05161) 8%, var(--mp-bg,#f8f4f0)) 50%, color-mix(in srgb, var(--mp-gold,#a05161) 5%, var(--mp-bg,#f8f4f0)) 100%);
  border-bottom-color:color-mix(in srgb, var(--mp-gold,#a05161) 26%, transparent);
}
.mp-announce--minimal{ background:var(--mp-bg,#f8f4f0); border-bottom-color:color-mix(in srgb, var(--mp-gold,#a05161) 26%, transparent); }
.mp-announce--ink{
  --_ink:var(--mp-bg,#f8f4f0);
  --_muted:color-mix(in srgb, var(--mp-bg,#f8f4f0) 62%, transparent);
  --_accent:color-mix(in srgb, var(--mp-gold,#a05161) 60%, var(--mp-bg,#f8f4f0));
  --_hair:color-mix(in srgb, var(--mp-gold,#a05161) 42%, transparent);
  --_focus:var(--mp-bg,#f8f4f0);
  background:var(--mp-ink,#2a2320); color:var(--mp-bg,#f8f4f0);
  border-top:1px solid var(--_hair); border-bottom-color:var(--_hair);
}
.mp-announce--ink .mp-announce__cta{ color:var(--mp-bg,#f8f4f0); }
.mp-announce--ink .mp-announce__cta-label{ border-bottom-color:color-mix(in srgb, var(--mp-gold,#a05161) 65%, var(--mp-bg,#f8f4f0)); }
.mp-announce--ink .mp-announce__cta:hover{ color:color-mix(in srgb, var(--mp-bg,#f8f4f0) 80%, var(--mp-gold,#a05161)); }
.mp-announce--ink .mp-announce__close:hover{ background:color-mix(in srgb, var(--mp-bg,#f8f4f0) 12%, transparent); }
.mp-announce--solid{
  --_ink:var(--mp-bg,#f8f4f0);
  --_muted:color-mix(in srgb, var(--mp-bg,#f8f4f0) 66%, transparent);
  --_accent:var(--mp-bg,#f8f4f0);
  --_focus:var(--mp-bg,#f8f4f0);
  background:var(--mp-dgold,#7d3a48); color:var(--mp-bg,#f8f4f0);
  border-bottom-color:color-mix(in srgb, var(--mp-ink,#2a2320) 30%, transparent);
}
.mp-announce--solid .mp-announce__cta{ color:var(--mp-bg,#f8f4f0); }
.mp-announce--solid .mp-announce__cta-label{ border-bottom-color:color-mix(in srgb, var(--mp-bg,#f8f4f0) 60%, transparent); }
.mp-announce--solid .mp-announce__cta:hover{ color:color-mix(in srgb, var(--mp-bg,#f8f4f0) 82%, var(--mp-star,#c2933a)); }
.mp-announce--solid .mp-announce__close:hover{ background:color-mix(in srgb, var(--mp-bg,#f8f4f0) 14%, transparent); }
.mp-announce--sale{
  --_accent:var(--mp-sale,#b23a4a); --_cta:var(--mp-sale,#b23a4a);
  --_hair:color-mix(in srgb, var(--mp-sale,#b23a4a) 30%, transparent);
  background:linear-gradient(90deg, var(--mp-bg,#f8f4f0) 0%, color-mix(in srgb, var(--mp-sale,#b23a4a) 8%, var(--mp-bg,#f8f4f0)) 55%, color-mix(in srgb, var(--mp-sale,#b23a4a) 5%, var(--mp-bg,#f8f4f0)) 100%);
  border-bottom-color:color-mix(in srgb, var(--mp-sale,#b23a4a) 30%, transparent);
}
.mp-announce--sale .mp-announce__cta-label{ border-bottom-color:color-mix(in srgb, var(--mp-sale,#b23a4a) 55%, transparent); }
.mp-announce--sale .mp-announce__cta:hover{ color:var(--mp-sale,#b23a4a); }
.mp-announce--sale .mp-announce__cta:hover .mp-announce__cta-label{ border-color:var(--mp-sale,#b23a4a); }

/* --- Ein-/Ausblenden --- */
.mp-announce.is-hidden{ display:none !important; }
.mp-announce.is-closing{
  overflow:hidden; opacity:0; height:0 !important; padding-block:0; border-bottom-color:transparent;
  transition:height .32s ease, opacity .22s ease, padding .32s ease, border-color .32s ease;
}
.mp-announce.is-closing .mp-announce__inner{ padding-block:0; min-height:0; }

/* --- Checkout: ablenkungsfrei, Balken aus --- */
body.is-checkout .mp-announce{ display:none !important; }

/* --- Mobil --- */
@media (max-width:640px){
  .mp-announce__inner{ padding-inline:46px; padding-block:10px; }
  .mp-announce__message{ column-gap:.5rem; }
  .mp-announce__text{ font-size:13.5px; line-height:1.3; }
  .mp-announce__cta{ flex-basis:100%; justify-content:center; margin-top:2px; letter-spacing:.05em; }
  .mp-announce__close{ inset-inline-end:max(2px, env(safe-area-inset-right)); }
}
@media (max-width:380px){ .mp-announce__icon{ display:none; } }

/* --- Reduzierte Bewegung --- */
@media (prefers-reduced-motion:reduce){
  .mp-announce.is-closing{ transition:none; height:0 !important; opacity:0; }
  .mp-announce__cta,.mp-announce__cta-arrow,.mp-announce__cta-label,.mp-announce__close,.mp-announce__slide{ transition:none; }
}

/* Echte Zahlungs-/Versand-Logos (Karten-Set mit eigenem Schatten) */
.mp-paychips--img{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mp-paychips--img img{height:38px;width:auto;display:block}

/* ============================================================================
   COOKIE-DIALOG v1.44.12 — ersetzt die frueheren Consent-Bloecke.
   Das Markup kommt jetzt aus dem Theme-Override snippets/consent_manager.tpl
   (Text vor Buttons, zwei gleichwertige CTAs), daher braucht es hier keine
   order-/display:contents-Tricks mehr.
   ============================================================================ */

/* Backdrop. NOVA animiert #consent-manager per transform — dann ankert ein
   fixed-Kind am Manager statt am Viewport. Deshalb Manager neutralisieren. */
#consent-manager.active{
    position:static !important;transform:none !important;background:transparent !important;
    top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
    width:auto !important;height:auto !important;pointer-events:none;
}
#consent-manager>*{pointer-events:auto}

#consent-banner{
    position:fixed !important;inset:0 !important;
    width:auto !important;max-width:none !important;height:auto !important;
    display:flex !important;align-items:center;justify-content:center;
    padding:20px;z-index:2000;
    background:rgba(28,26,24,.55);backdrop-filter:blur(3px);
}
#consent-banner .consent-banner-icon{display:none !important}

/* Karte */
#consent-banner .mp-consent{
    background:#fff;width:100%;max-width:540px;
    padding:44px 46px 36px;text-align:center;
    display:block !important;
    border-radius:2px;box-shadow:0 40px 120px -30px rgba(0,0,0,.5);
    max-height:calc(100vh - 40px);overflow-y:auto;
}
@media(max-width:575px){#consent-banner .mp-consent{padding:30px 22px 26px}}

/* Text */
#consent-banner .mp-consent__title{
    display:block;
    font-family:var(--mp-display,Fraunces,Georgia,serif);
    font-size:26px;font-weight:600;line-height:1.25;letter-spacing:.01em;
    color:#1c1a18;margin:0 0 12px;
}
#consent-banner .mp-consent__title::before{content:none !important}
@media(max-width:575px){#consent-banner .mp-consent__title{font-size:21px}}

#consent-banner .mp-consent__text p{
    font-family:var(--mp-font,Inter,sans-serif);
    font-size:14.5px;line-height:1.6;color:#4a443e;margin:0 auto;max-width:420px;
}
#consent-banner .mp-consent__legal{margin-top:14px;font-size:12px}
#consent-banner .mp-consent__legal a{color:#8b847c;text-decoration:underline;text-underline-offset:2px}
#consent-banner .mp-consent__legal a:hover{color:#1c1a18}

/* Buttons: zwei gleichwertige nebeneinander */
#consent-banner .mp-consent__actions{margin-top:28px;display:block !important}
#consent-banner .mp-consent__row{
    display:grid !important;grid-template-columns:1fr 1fr;gap:12px;width:100%;
}
#consent-banner .mp-consent__row>div,
#consent-banner .mp-consent__row .consent-accept{display:contents !important}

#consent-banner .mp-consent__btn{
    width:100% !important;min-height:52px;height:auto !important;
    display:inline-flex !important;align-items:center;justify-content:center;
    padding:14px 12px;margin:0 !important;
    font-family:var(--mp-font,Inter,sans-serif);
    font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    white-space:nowrap;                 /* kein dreizeiliger Umbruch mehr */
    background:#1c1a18 !important;border:1.5px solid #1c1a18 !important;color:#fff !important;
    border-radius:2px;cursor:pointer;transition:background .18s,border-color .18s,color .18s;
}
#consent-banner .mp-consent__btn:hover{background:#39332e !important;border-color:#39332e !important}

/* Ablehnen optisch gleichwertig (gleiche Groesse/Gewicht), nur invertiert */
#consent-banner #consent-banner-btn-close{
    background:#fff !important;color:#1c1a18 !important;border-color:#1c1a18 !important;
}
#consent-banner #consent-banner-btn-close:hover{background:#f4f1ec !important;border-color:#1c1a18 !important}

/* Einstellungen: dezenter Textlink darunter */
#consent-banner .mp-consent__link{
    display:inline-block;width:auto !important;min-height:0 !important;
    margin:16px auto 0 !important;padding:4px 2px !important;
    background:none !important;border:0 !important;
    font-family:var(--mp-font,Inter,sans-serif);
    font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;
    color:#8b847c !important;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
#consent-banner .mp-consent__link:hover{color:#1c1a18 !important}

@media(max-width:400px){
    #consent-banner .mp-consent__row{grid-template-columns:1fr}
    #consent-banner .mp-consent__btn{font-size:13px}
}

/* Schliessen muss gewinnen: consent.js setzt die Klasse .consent-hidden auf
   #consent-banner (consent.js:150). Unser display:flex !important hat das
   ueberstimmt -> Dialog blieb nach "Alle akzeptieren"/"Nur notwendige" stehen. */
#consent-banner.consent-hidden,
#consent-manager.d-none #consent-banner,
#consent-manager.mini #consent-banner{display:none !important}

/* ############################################################################
   ##  monPARFUM · UX-Batch 1.44.14  (Aufgaben 3, 4, 5)
   ##  Angehaengt am Dateiende. Diese Datei ist das LETZTE Stylesheet -> bei
   ##  gleicher Spezifitaet gewinnen diese Regeln ueber NOVA/clear.css,
   ##  NOVA/custom.css und den inline criticalCSS-Block aus layout/header.tpl.
   ##  Bestehende Regeln (Z. 599 Logo, Z. 601/602 Tagline, Z. 1089/1090 Brand)
   ##  bleiben unangetastet und werden hier per Kaskade ueberschrieben.
   ############################################################################ */

:root{
  /* -- Aufgabe 3: Header/Logo -------------------------------------------- */
  --mp-logo-h: 30px;          /* Bildbox Desktop. Obergrenze ohne Header-Wachstum: 65px.
                                 Notfall-Fallback: 60px (= NOVAs header.menu_logoheight). */
  --mp-logo-tag-block: 22px;  /* Aussenhoehe der Tagline (font-size 10px * lh 1 + margin 0).
                                 Wer die Tagline aendert, MUSS diesen Wert nachziehen. */
  --mp-logo-ink-bias: 0;    /* 2 x Anteil der Bildhoehe, um den die Ink-Mitte im PNG
                                 unter der Boxmitte liegt (gemessen 3,0 %). Faktor 2, weil
                                 der negative Rand die Spalte verkuerzt und deren Mitte
                                 um die HAELFTE mitwandert. Randscharfes Asset -> 0. */
  --mp-logo-ratio: 8.72;       /* 180/50 - nur fuer die Mobil-Korrektur */
  --mp-logo-gap: 20px;        /* Burger -> Logo (nur mobil sichtbar) */
  --mp-navicon-tag-block: 13.5px; /* gap 3px + Label-Zeile 10,5px */

  /* -- Aufgabe 4: Geschenk ------------------------------------------------ */
  --mp-gift: var(--mp-gold,#a05161);
  --mp-gift-bg: #faf6f2;
}
@supports (background:color-mix(in srgb,#000 5%,#fff)){
  :root{ --mp-gift-bg: color-mix(in srgb, var(--mp-gold,#a05161) 6%, #fff); }
}

/* ==========================================================================
   A · HEADER: LOGO-GROESSE + FLUCHT MIT DEM SUCHFELD          (Aufgabe 3)
   --------------------------------------------------------------------------
   GEMESSEN (dev, Chrome, 1440px, Konzept "rose"), VORHER:
     Wortmarken-Mitte y=74,19 · Suchfeld-Mitte y=78,75 -> Versatz -4,56px
     sichtbare Wortmarke 20,16px (mp_logo_image.png ist 180x50, Schrift nur
     in Zeile 16..36 = 42 % der Bildhoehe)
     Logo-Bild bei x=84,9, Content-/Kategoriespalte bei x=78,5
   NACHHER: Wortmarke 26,88px (+33 %), Versatz 0,00px, linke Kante 78,5,
     Kopfzeile 81,5px und Header 138,75px UNVERAENDERT.
   GRENZE: Spaltenhoehe = 2*--mp-logo-tag-block + 0,94*--mp-logo-h <= 81,5px
           => --mp-logo-h max. 65px. 64px lassen 1,3px Luft.
   ========================================================================== */

/* A1 · Burger + Logo: Flexzeile statt NOVA-Floats.
        NOVA gibt dem Burger padding-top:1rem -> Icon stand mobil 9,9px tiefer.
        Der Burger braucht ID-Spezifitaet, weil NOVA `header #burger-menu
        {margin-right:1rem}` (1-0-1) setzt -> hier 1-1-1 statt !important. */
.toggler-logo-wrapper{ float:none; display:flex; align-items:center; }
.toggler-logo-wrapper .logo-wrapper{ float:none; min-width:0; }
header .toggler-logo-wrapper #burger-menu{
  padding-top:.25rem; padding-bottom:.25rem;
  margin-right:var(--mp-logo-gap);
}

/* A2 · Tagline: margin-top 2px -> 0, line-height fixieren.
        (Z. 601 liefert display:flex/column bereits - hier nicht wiederholt.) */
.mp-logo-tagline{ font-size:10px; line-height:1; margin-top:12px; }

/* A3 · Marke linksbuendig, Tagline-Hoehe oben ausgleichen.
        padding:0 loescht NOVAs `header .navbar-brand{padding:.6rem .4rem}`,
        margin-right:0 loescht `header .navbar-brand{margin-right:3rem}` (@lg). */
.navbar-brand.mp-logo{ display:block; padding:0; margin-right:0; outline-offset:3px; }
.logo-wrapper.mp-logo-has-tag > .navbar-brand.mp-logo{ padding-top:var(--mp-logo-tag-block); }

/* A4 · Bild: Groesse + Ausgleich des PNG-internen Versatzes.
        max-height:none ist PFLICHT - custom.css:599 setzt max-height:60px auf
        exakt demselben Selektor, sonst werden aus 64px stumm 60px.
        max-width:none haelt NOVAs 50vw/30vw fern. */
.navbar-brand.mp-logo .mp-logo-img{
  display:block;
  height:var(--mp-logo-h);
  width:auto; max-width:none; max-height:none;
  margin-top:calc(var(--mp-logo-h) * var(--mp-logo-ink-bias) * -1);
}

/* A5 · Mobil/Tablet (<992px): dort steht KEIN Suchfeld in der Zeile
        (header.mobile_search_type=fixed -> eigene Leiste darunter).
        Ziel: Burger | Logo | Icons auf EINER Achse.
        Vorher @390px: 3 Zeilen, Header 179,6px, Logo per max-width:30vw auf
        117px gedeckelt und per object-fit:contain in eine 48px-Box gelegt
        -> real 13,65px Ink. Nachher: 1 Zeile, Header 106,8px, Ink 20,0px.
        margin-right am Lockup garantiert den Abstand zur Icon-Spalte - ohne
        ihn klebt das Logo bei 320/360px mit 0px an den Icons. */
@media (max-width:991.98px){
  :root{ --mp-logo-w: clamp(96px, 44vw, 184px); }

  .mp-logo-tagline{ display:none; }
  .full-width-mega .toggler-logo-wrapper{ width:auto; max-width:100%; }
  .nav-logo-wrapper{ min-width:0; }
  .toggler-logo-wrapper .logo-wrapper{ margin-right:14px; }

  .navbar-brand.mp-logo,
  .logo-wrapper.mp-logo-has-tag > .navbar-brand.mp-logo{ padding-top:0; min-width:0; }

  /* breiten- statt hoehengesteuert -> NOVAs max-width:30vw + object-fit:contain
     greifen nicht mehr als Briefkasten */
  .navbar-brand.mp-logo .mp-logo-img{
    height:auto;
    width:var(--mp-logo-w);
    max-width:100%;
    margin-top:calc(var(--mp-logo-w) / var(--mp-logo-ratio) * var(--mp-logo-ink-bias) * -1);
  }
}

/* A6 · Icon-Spalte auf dieselbe Achse. PFLICHT, nicht optional:
        die Icons haben dasselbe Problem wie das Logo (Label haengt als ::after
        im Flex-Lockup, custom.css:624/626), das Glyph sitzt 6,75px
        (= (gap 3 + Label 10,5)/2) ueber der Suchfeld-Mitte. Ohne diesen Block
        verschiebt Aufgabe 3 den Versatz nur vom Logo zu den Icons
        (vorher 2,19px Differenz, dann 6,75px).
        Summe der Innenabstaende bleibt 3rem -> Kopfzeile bleibt 81,5px. */
@media (min-width:992px){
  header .nav-icons .nav-link,
  header .nav-icons .nav-link-custom{
    padding-top:    calc(1.5rem + var(--mp-navicon-tag-block) / 2);
    padding-bottom: calc(1.5rem - var(--mp-navicon-tag-block) / 2);
  }
}

/* ==========================================================================
   B · GRATIS-GESCHENK & AKTIONS-FORTSCHRITT                   (Aufgabe 4)
   Mini-Warenkorb · Warenkorbseite · Kasse · Bestaetigung
   Bildsprache: 2px-Haarlinie statt Verlaufspille, Haarlinien-Chip statt
   Ampel-Badge. Gold (Auszeichnung) statt Gruen (Bestaetigung).
   HINWEIS: .mp-gift* hat NICHTS mit dem bestehenden .mp-giftbanner
   (Z. 497-514, Startseiten-Banner) zu tun - kein Selektor-Ueberlapp.
   ========================================================================== */

/* B1 · Status-/Fortschrittseinheit */
.mp-gift{ display:block; font-family:var(--mp-font,Inter,sans-serif); color:var(--mp-ink,#2a2320); }
.mp-gift__row{ display:flex; align-items:flex-start; gap:10px; }
.mp-gift__ic{ flex:none; width:17px; height:17px; margin-top:1px; color:var(--mp-gift); }
.mp-gift__ic svg{ width:17px; height:17px; display:block; }
.mp-gift__body{ flex:1 1 auto; min-width:0; }
.mp-gift__txt{ display:block; font-size:12.5px; line-height:1.35; }
.mp-gift__txt strong{ font-weight:700; white-space:nowrap; }
.mp-gift__sub{ display:block; margin-top:2px; font-size:11px; line-height:1.35; color:var(--mp-muted,#7a6f68); }
.mp-gift__meter{ display:block; position:relative; height:2px; margin-top:9px; background:var(--mp-line,#e8dfd6); overflow:hidden; }
.mp-gift__meter i{ position:absolute; top:0; bottom:0; left:0; display:block; background:var(--mp-gift); transition:width .6s var(--ease,cubic-bezier(.4,.16,.2,1)); }
.mp-gift__cta{ flex:none; align-self:center; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mp-gift); text-decoration:none; white-space:nowrap; }
.mp-gift__cta:hover{ color:var(--mp-dgold,#7d3a48); text-decoration:underline; text-underline-offset:3px; }
.mp-gift--done .mp-gift__txt{ color:var(--mp-gift); font-weight:600; }

/* B2 · Varianten je Ort */
.mp-gift--card{ background:var(--mp-gift-bg); border:1px solid var(--mp-line,#e8dfd6); padding:14px 18px; margin:0 0 16px; }
.cart-dropdown .mp-gift{ margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--mp-line,#e8dfd6); }
.mp-ck-summary .mp-gift,
.mp-ok-side .mp-gift{ margin:10px 0 0; padding-top:11px; border-top:1px solid var(--mp-line,#e8dfd6); }

/* B3 · Auszeichnung der Geschenk-Position */
.mp-gifttag{
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle;
  margin-left:8px; padding:2px 6px;
  border:1px solid var(--mp-gift); border-radius:2px;
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.4; color:var(--mp-gift); white-space:nowrap;
}
.mp-giftprice{ white-space:nowrap; }
/* --mp-soft (#a0958d) auf --mp-gift-bg waere nur 2,3:1 - der durchgestrichene
   Preis ist inhaltstragend, deshalb --mp-ink2 mit Deckung (~8:1). */
.mp-giftprice s{ margin-right:7px; color:var(--mp-ink2,#4a443d); opacity:.62; font-weight:400; text-decoration-thickness:1px; }
.mp-giftprice b{ color:var(--mp-gift); font-weight:700; }

/* B4 · Mini-Warenkorb (box-shadow auf <tr> ist unzuverlaessig -> auf <td>) */
.cart-dropdown tr.mp-giftline > td{ background:var(--mp-gift-bg); }
.cart-dropdown tr.mp-giftline > td:first-child{ box-shadow:inset 2px 0 0 var(--mp-gift); }

/* B5 · Kassen-Zusammenfassung (rechte Spalte, ~300px).
        Chip + Preis GESTAPELT in der auto-Spalte - "7,95 EUR Gratis" waere in
        einer nowrap-Zeile ~110px statt ~52px und frisst die Namensspalte. */
.mp-ck-item.mp-giftline{ box-shadow:inset 2px 0 0 var(--mp-gift); background:var(--mp-gift-bg); padding-left:9px; margin-left:-9px; }
.mp-ck-item.mp-giftline .mp-ck-item__price{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.mp-ck-item.mp-giftline .mp-gifttag{ margin:0; }
.mp-ck-item.mp-giftline .mp-giftprice{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.mp-ck-item.mp-giftline .mp-giftprice s{ margin:0; font-size:11px; }

/* B6 · Bestaetigungsseite (checkout/inc_order_items.tpl arbeitet ueber :has) */
.checkout-items-item:has(.mp-gifttag){ box-shadow:inset 2px 0 0 var(--mp-gift); background:var(--mp-gift-bg); }
.checkout-items-item:has(.mp-gift-comp){ display:none !important; }
/* Rabattbetrag in der Summenkarte: Gold, NICHT das gruene .mp-ok-free (Z.1509) */
.mp-ok-disc{ color:var(--mp-gift); font-weight:600; }

/* B7 · Bestehendes Plugin-Band auf der Warenkorbseite umlackieren.
        Das Plugin liefert seinen <style>-Block INLINE im Body und gewinnt bei
        Gleichstand -> durchgehend mit .basket vorqualifizieren (0-2-0). */
.basket .spx-band{ background:var(--mp-gift-bg); border:1px solid var(--mp-line,#e8dfd6); border-radius:0; padding:16px 20px; margin:0 0 18px; }
.basket .spx-band__ic{ color:var(--mp-gift); font-size:18px; }
.basket .spx-band__ptxt{ font-size:12.5px; margin-bottom:9px; }
.basket .spx-band__bar{ height:2px; background:var(--mp-line,#e8dfd6); border-radius:0; }
.basket .spx-band__bar i{ background:var(--mp-gift); border-radius:0; }
.basket .spx-band__ok{ color:var(--mp-gift); }
.basket .spx-band__title{ font-size:14px; letter-spacing:.01em; }
.basket .spx-opt{ border-radius:0; }
.basket .spx-opt.is-sel{ border-color:var(--mp-gift); box-shadow:inset 0 0 0 1px var(--mp-gift); }
.basket .spx-opt__check{ background:var(--mp-gift); }
.basket .spx-opt__val b{ color:var(--mp-gift); }
.basket .spx-opt__btn{ border-radius:0; min-height:42px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.basket .spx-opt__btn.is-remove{ color:var(--mp-gift); border-color:var(--mp-gift); }
.basket .spx-gift-row .spx-tag{ background:transparent; border:1px solid var(--mp-gift); color:var(--mp-gift); font-size:9.5px; letter-spacing:.12em; border-radius:2px; padding:2px 6px; }
.basket .spx-gift-row .price_overall.spx-free{ color:var(--mp-gift); }

/* B8 · Toast (nur wirksam mit dem optionalen js/custom.js-Patch, nur dev) */
.mp-cart-toast__ship.is-gift{ color:var(--mp-gift); font-weight:600; }
.mp-cart-toast__ship.is-gift b,
.mp-cart-toast__ship.is-gift strong{ color:var(--mp-gift); }

@media (max-width:575px){
  .mp-gift__txt{ font-size:12px; }
  .mp-gift__cta{ font-size:11px; }
}

/* ==========================================================================
   C · PDP: HERSTELLERNAME ALS MARKENSIGNET                    (Aufgabe 5)
   --------------------------------------------------------------------------
   Ersetzt per Kaskade custom.css Z. 1089/1090:
     alt: font-size:12px; font-weight:750 (existiert nicht -> rendert 700);
          letter-spacing:.16em; border-bottom:1px solid var(--ink)
   Schriftwahl ueber var(--mp-display), NICHT 'Fraunces' hartcodiert:
   die Display-Schrift ist im Backend umschaltbar (mp_design.mp_font_display),
   header.tpl:12 preloaded fraunces|playfair|cormorant-latin-600. font-weight
   600 trifft in ALLEN DREI Faellen genau die vorgeladene Datei -> 0 KB extra.
   opsz 40 statt 72: bei 15px liegt die Haarlinie sonst bei 0,43px und faellt
   auf 1x-Displays weg (gemessen an den Outlines; opsz 40 -> 0,60px).
   Nur EINE Laengenstufe: kein Hersteller >26 Zeichen hat ueberhaupt Artikel.
   ========================================================================== */
.mpp-brandline{
  display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between;
  column-gap:20px; row-gap:7px; margin-bottom:2px;
}
.mpp-brand{
  flex:0 1 auto; min-width:0;
  font-family:var(--mp-display);
  font-weight:600;
  font-optical-sizing:none;
  font-variation-settings:'opsz' 40,'wght' 420;
  font-size:15px; line-height:1.28;
  letter-spacing:.20em; margin-right:-.20em;
  text-transform:uppercase;
  text-wrap:balance; overflow-wrap:anywhere;
  border-bottom:0; padding-bottom:0; text-decoration:none;
}
/* Schwelle 22 Zeichen: bei 15px/.20em passt das noch in 268px (320px-Telefon) */
.mpp-brand.is-long{ font-size:13px; letter-spacing:.16em; margin-right:-.16em; }

a.mpp-brand{ transition:color .2s var(--ease,ease); }
a.mpp-brand:hover,
a.mpp-brand:focus-visible{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.5em;
}
a.mpp-brand:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; }

/* Lieferstatus rutscht bei langen Namen in Zeile 2 statt den Namen zu quetschen */
.mpp-flag{ flex:0 0 auto; }

@media(max-width:1050px){   /* enger Zwei-Spalter: Buybox 305-435px */
  .mpp-brand{ font-size:14px; letter-spacing:.18em; margin-right:-.18em; }
  .mpp-brand.is-long{ font-size:12.5px; letter-spacing:.15em; margin-right:-.15em; }
}
@media(max-width:480px){
  .mpp-brand{ font-size:13px; letter-spacing:.16em; margin-right:-.16em; }
  .mpp-brand.is-long{ font-size:12px; letter-spacing:.14em; margin-right:-.14em; }
}
/* ####################  Ende UX-Batch 1.44.14  ############################# */

/* ############################################################################
   ##  monPARFUM · Geschenk-Status im Mini-Warenkorb        (Aufgabe 4)
   ##  Die grosse Fassung auf Warenkorbseite/Kasse liefert smart_promotions
   ##  selbst (.spx-band__*). Hier nur die kompakte Variante fuers Overlay.
   ############################################################################ */

.mp-giftbar{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px; margin:0 0 6px;
    background:var(--mp-gift-bg,#faf6f2);
    border-left:2px solid var(--mp-gift,#a05161);
    font-family:var(--mp-font,Inter,sans-serif);
}
.mp-giftbar__ic{
    flex:0 0 auto; display:inline-flex; color:var(--mp-gift,#a05161);
}
.mp-giftbar__wrap{ flex:1 1 auto; min-width:0 }
.mp-giftbar__txt{
    font-size:12px; line-height:1.4; color:var(--mp-ink,#2a2320);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mp-giftbar__txt b{ font-weight:600 }

/* Fortschrittsbalken — bewusst duenn, das Band soll nicht dominieren */
.mp-giftbar__bar{
    margin-top:6px; height:3px; border-radius:2px;
    background:rgba(42,35,32,.12); overflow:hidden;
}
.mp-giftbar__bar i{
    display:block; height:100%; border-radius:2px;
    background:var(--mp-gift,#a05161);
    transition:width .4s ease;
}

/* Erreicht: kein Balken mehr, nur die Bestaetigung */
.mp-giftbar--ok{ align-items:center }
.mp-giftbar--ok .mp-giftbar__txt{ color:var(--mp-ink,#2a2320) }
.mp-giftbar--ok .mp-giftbar__ic{ color:#3d7a52 }

/* Geschenk-Position in der Mini-Warenkorb-Liste kennzeichnen.
   Das Plugin setzt data-spx-gift per JS auf die Zeile (renderRowScript). */
.dropdown-cart-items tr[data-spx-gift] .dropdown-cart-item-price,
.dropdown-cart-items tr[data-spx-gift] .cart-dropdown-item-price{
    color:var(--mp-gift,#a05161); font-weight:600;
}
.dropdown-cart-items tr[data-spx-gift] td:first-child::after{
    content:'Geschenk';
    display:inline-block; margin-left:8px; padding:1px 6px;
    font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
    color:var(--mp-gift,#a05161);
    border:1px solid var(--mp-gift,#a05161); border-radius:2px;
    vertical-align:middle;
}

/* Gegenbuchung (spx_x...) im Mini-Warenkorb ausblenden — sie wuerde als
   negative Zeile ohne erkennbaren Bezug erscheinen. */
.dropdown-cart-items tr[data-spx-comp]{ display:none !important }

@media(max-width:480px){
    .mp-giftbar{ padding:9px 11px }
    .mp-giftbar__txt{ font-size:11.5px }
}

/* Geschenk-Status in der Kasse — einzeilig, dezent (renderCheckoutStatus) */
.spx-ck{
    display:flex; align-items:center; gap:9px;
    padding:11px 16px; margin:0 0 18px;
    background:var(--mp-gift-bg,#faf6f2);
    border-left:2px solid var(--mp-gift,#a05161);
    font-family:var(--mp-font,Inter,sans-serif);
    font-size:13px; line-height:1.45; color:var(--mp-ink,#2a2320);
}
.spx-ck__ic{ flex:0 0 auto; display:inline-flex; color:var(--mp-gift,#a05161) }
.spx-ck__ic svg{ width:16px; height:16px }
.spx-ck a{ color:var(--mp-gift,#a05161); text-decoration:underline; text-underline-offset:2px }
.spx-ck--ok{ border-left-color:#3d7a52 }
.spx-ck--ok .spx-ck__ic{ color:#3d7a52 }

/* Mini-Warenkorb: Schwelle erreicht, noch nichts gewaehlt */
.mp-giftbar--open .mp-giftbar__txt{ white-space:normal }
.mp-giftbar--open a{ color:var(--mp-gift,#a05161); text-decoration:underline; text-underline-offset:2px }

/* ############################################################################
   ##  monPARFUM · Logo-Groessen  (Nachtrag 1.44.18)
   ############################################################################ */

/* Header: groesser als zuvor. Das randscharfe Asset hat Seitenverhaeltnis 8.72,
   40px Hoehe ergeben 349px Breite (altes Logo: 173px sichtbar). */
:root{ --mp-logo-h: 52px; }   /* 52 x 8.72 = 453px breit */

/* Footer: Wortmarke als Bild statt Fliesstext. Helle Fassung, weil der
   Footer auf --mp-topbar (#2a2320) steht. */
.mp-footer__brand .mp-flogo{
    display:inline-block; line-height:0;
}
.mp-footer__brand .mp-flogo-img{
    height:32px; width:auto; max-width:100%;
    display:block; opacity:.92;
    transition:opacity .18s ease;
}
.mp-footer__brand .mp-flogo:hover .mp-flogo-img{ opacity:1 }

@media(max-width:991px){
    .mp-footer__brand .mp-flogo-img{ height:22px }
}

/* ############################################################################
   ##  monPARFUM · Typografie fuer Kategorie-Texte aus dem OnPage Composer
   ##
   ##  Ausgangslage: Die Portlets rendern ohne eigene Klassen (class="") und
   ##  laufen dadurch ueber die volle Containerbreite — auf einem 1800px-Schirm
   ##  sind das ~250 Zeichen pro Zeile. Lesbar sind 60–75. Ausserdem stehen
   ##  alle Ueberschriften als <h1> im Markup (im OPC auf "Ebene 1" gesetzt).
   ##
   ##  Anker: der OPC-Container ist das einzige direkte Kind von #content,
   ##  das .opc-Divider enthaelt. Damit greift nichts anderes auf der Seite.
   ############################################################################ */

#content > div:has(> .opc-Divider){
    --mp-lese: none;              /* volle Breite (Kundenwunsch 20.08.) */
    max-width:100%;
    margin-top:56px;
    padding-top:8px;
}

/* --- Lesebreite fuer alles, was Text traegt --------------------------------
   Nicht der Container wird schmal, sondern die Textzeilen. So bleiben
   Trennlinien in voller Breite und der Block wirkt nicht abgeschnitten. */
#content > div:has(> .opc-Divider) > h1,
#content > div:has(> .opc-Divider) > h2,
#content > div:has(> .opc-Divider) > h3,
#content > div:has(> .opc-Divider) > div > p,
#content > div:has(> .opc-Divider) > div > ul,
#content > div:has(> .opc-Divider) > div > ol{
    max-width:var(--mp-lese);
}

/* --- Ueberschriften -------------------------------------------------------
   Im OPC sind alle als h1 angelegt. Optisch werden sie hier zu einer
   Zwischenueberschrift: Displayschrift, ruhiges Ink statt Grau, klare
   Groesse — aber deutlich unter der echten Seitenueberschrift. */
#content > div:has(> .opc-Divider) > h1,
#content > div:has(> .opc-Divider) > h2{
    font-family:var(--mp-display,Fraunces,Georgia,serif);
    font-size:clamp(21px, 1.55vw, 26px);
    font-weight:500;
    line-height:1.3;
    letter-spacing:.005em;
    color:var(--mp-ink,#2a2320);
    margin:44px 0 14px;
}
#content > div:has(> .opc-Divider) > h3{
    font-family:var(--mp-display,Fraunces,Georgia,serif);
    font-size:19px; font-weight:500; line-height:1.35;
    color:var(--mp-ink,#2a2320);
    margin:34px 0 10px;
}

/* Die erste Ueberschrift traegt den Abschnitt an — etwas groesser, ohne
   den Abstand nach oben doppelt zu nehmen. */
#content > div:has(> .opc-Divider) > h1:first-of-type{
    font-size:clamp(24px, 1.9vw, 31px);
    margin-top:8px;
}

/* --- Fliesstext ----------------------------------------------------------- */
#content > div:has(> .opc-Divider) > div > p{
    font-family:var(--mp-font,Inter,sans-serif);
    font-size:16.5px;
    line-height:1.78;              /* luftig, aber nicht auseinandergerissen */
    color:#4a443e;                 /* dunkler als --mp-muted: besser lesbar */
    margin:0 0 15px;
    hyphens:auto;                  /* deutsche Komposita brauchen das */
    -webkit-hyphens:auto;
    text-wrap:pretty;              /* verhindert Schusterjungen, wo unterstuetzt */
}
#content > div:has(> .opc-Divider) > div > p:last-child{ margin-bottom:0 }

#content > div:has(> .opc-Divider) > div > ul,
#content > div:has(> .opc-Divider) > div > ol{
    font-family:var(--mp-font,Inter,sans-serif);
    font-size:15.5px; line-height:1.78; color:#4a443e;
    margin:0 0 16px; padding-left:20px;
}
#content > div:has(> .opc-Divider) > div li{ margin-bottom:5px }

/* --- Links ---------------------------------------------------------------
   Im Text sind es Kategorieverweise. Unterstrichen bleiben sie erkennbar,
   der Offset haelt die Linie von den Unterlaengen frei. */
#content > div:has(> .opc-Divider) a{
    color:var(--mp-gold,#a05161);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    font-weight:500;
    transition:color .16s ease;
}
#content > div:has(> .opc-Divider) a:hover{
    color:var(--mp-ink,#2a2320);
}

/* --- Trennlinien ---------------------------------------------------------
   NOVAs .hr-sect zieht eine Linie ueber die volle Breite. Als Gliederung
   zwischen Absaetzen reicht ein kurzer Strich — er markiert den Einschnitt,
   ohne den Textfluss zu zerschneiden. */
#content > div:has(> .opc-Divider) > .opc-Divider{
    display:block;
    margin:0;
    border:0;
    height:auto;
}
#content > div:has(> .opc-Divider) > .opc-Divider::before,
#content > div:has(> .opc-Divider) > .opc-Divider::after{
    content:none;
}
#content > div:has(> .opc-Divider) > .opc-Divider-empty{
    height:1px;
    width:40px;
    background:var(--mp-gold,#a05161);
    opacity:.5;
    margin:36px 0 0;
}

@media(max-width:767px){
    #content > div:has(> .opc-Divider){ margin-top:38px }
    #content > div:has(> .opc-Divider) > div > p,
    #content > div:has(> .opc-Divider) > div > ul,
    #content > div:has(> .opc-Divider) > div > ol{ font-size:15px; line-height:1.7 }
    #content > div:has(> .opc-Divider) > h1,
    #content > div:has(> .opc-Divider) > h2{ margin-top:32px }
}



/* ############################################################################
   ##  monPARFUM · Nachladen beim Scrollen
   ##  Die Seitennavigation bleibt im DOM (SEO, Fallback ohne JS) und wird
   ##  nur optisch ausgeblendet, solange das Nachladen funktioniert.
   ############################################################################ */

.productlist-page-nav.mp-endless-hidden{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.mp-endless{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:26px 0 8px;
    font-family:var(--mp-font,Inter,sans-serif);
}

.mp-endless__status{
    font-size:12.5px; letter-spacing:.03em; color:var(--mp-muted,#8b847c);
    min-height:18px;
}
.mp-endless__status.is-loading{
    display:inline-flex; align-items:center; gap:9px;
}
.mp-endless__status.is-loading::before{
    content:""; width:13px; height:13px; border-radius:50%;
    border:1.6px solid var(--mp-line,#e8dfd6);
    border-top-color:var(--mp-gold,#a05161);
    animation:mp-endless-spin .7s linear infinite;
}
@keyframes mp-endless-spin{ to{ transform:rotate(360deg) } }

.mp-endless__btn{
    min-height:46px; padding:0 30px;
    background:#fff; border:1.5px solid var(--mp-ink,#2a2320);
    color:var(--mp-ink,#2a2320);
    font-family:inherit; font-size:12.5px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; transition:background .16s ease, color .16s ease;
}
.mp-endless__btn:hover{ background:var(--mp-ink,#2a2320); color:#fff }
.mp-endless__btn:focus-visible{ outline:2px solid var(--mp-ink,#2a2320); outline-offset:3px }
.mp-endless__btn[hidden]{ display:none }

@media (prefers-reduced-motion:reduce){
    .mp-endless__status.is-loading::before{ animation:none }
    .mp-endless__btn{ transition:none }
}

/* Seitenzahlen ausblenden, solange das Nachladen laeuft — die Leiste selbst
   bleibt (sie traegt Ansichtsumschaltung und Trefferanzeige). */
.productlist-pagination.mp-endless-hidden,
.navbar-pagination.mp-endless-hidden,
.pagination.mp-endless-hidden{
    display:none !important;
}

/* ---------------------------------------------------------------------------
   Gratisproben-Hinweis abschaltbar (Theme-Einstellung mp_samples_active).
   Die Vertrauenszeile unter der Warenkorbsumme steht als CSS-content und laesst
   sich nicht per Template-Bedingung kuerzen — deshalb hier ein zweiter Satz
   ohne den Proben-Hinweis. <html> traegt dazu data-mp-samples="0|1".
   --------------------------------------------------------------------------- */
html[data-mp-samples="0"] .basket .cart-summary::after{
    content:'\2713  100 % Original      \2713  14 Tage R\00fcckgabe';
}

/* mpp-variant-gleichhoch: Groessen-Kacheln auf der PDP alle gleich gross.
   Vorher bemass sich jede Grid-Zeile eigenstaendig — bei 5 Varianten war
   die einzelne Kachel der zweiten Zeile anders hoch als die vier darueber.
   grid-auto-rows:1fr zwingt alle Zeilen auf die Hoehe der hoechsten. */
.mpp-variants{grid-auto-rows:1fr}
.mpp-variant{min-height:92px;height:100%;display:flex;flex-direction:column;justify-content:flex-start}
/* Grundpreise wie "1.233.911,42 € pro 1 l" duerfen die Kachel nicht sprengen */
.mpp-variant span{overflow-wrap:anywhere;hyphens:auto}
.mpp-variant .v-price{margin-top:auto;padding-top:4px}
@media(max-width:575px){
  .mpp-variants.cols-4{grid-template-columns:repeat(2,1fr)}
  .mpp-variant{min-height:84px}
}

/* mp-logo-wordmark: Wortmarke statt bisherigem Logo, 20 % kleiner.
   Vorher 48px hoch -> jetzt 38px. Die Wortmarke ist sehr breit (7,2:1),
   deshalb zusaetzlich die Breite deckeln, damit sie die Navigation
   auf schmalen Fenstern nicht wegdrueckt. */
.navbar-brand.mp-logo .mp-logo-img{
  height:38px !important; max-height:38px !important;
  width:auto !important; max-width:250px !important;
}
@media(max-width:991px){
  .navbar-brand.mp-logo .mp-logo-img{height:32px !important;max-height:32px !important;max-width:190px !important}
}

/* mp-media-randlos: Produktbild fuellt die Buehne aus.
   Vorher standen 54px Padding um das Bild und eine feste max-height von
   590px — dadurch blieb rundum die Hintergrundflaeche sichtbar. */
.mpp-media__slide{padding:0 !important}
.mpp-media__slide img{
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  object-fit:cover !important; object-position:center;
}
@media(max-width:575px){.mpp-media__slide{padding:0 !important}}

/* mp-footer-doppelte-titel: NOVA rendert jede Footer-Box-Ueberschrift zweimal —
   einmal als Aufklapp-Link (mobil) und einmal als statische Zeile
   (.productlist-filter-headline, per d-none/d-md-flex nur auf Desktop).
   Die statische Zeile ist mobil sauber versteckt, der Link hatte aber keine
   Gegenregel und stand auf Desktop zusaetzlich da. Ab Tablet ausblenden;
   der zugehoerige Inhalt ist dort ohnehin per .d-md-block offen. */
@media (min-width: 768px) {
  .mp-footer .box-normal-link.dropdown-toggle,
  .mp-footer a[data-toggle="collapse"].box-normal-link { display: none !important; }
}
/* Mobil bleibt der Link die Ueberschrift — dort etwas Luft und Gewicht. */
@media (max-width: 767.98px) {
  .mp-footer .box-normal-link.dropdown-toggle { padding: 10px 0; font-weight: 500; }
}

/* --- mp-stoerer-modern-pink --- */
/* Stoerer-Kacheln auf das Modern-Pink-Konzept umgestellt.
   Verlauf laeuft von hell oben nach dunkel unten - der Text sitzt unten
   (justify-content:flex-end), deshalb bleibt Weiss dort lesbar. */
.mp-stoerer--gold{background:linear-gradient(160deg,#e0619f 0%,#d6256e 42%,#8e1049 100%)}
.mp-stoerer--dark{background:linear-gradient(160deg,#43434a 0%,#1b1b20 100%)}
.mp-stoerer--cream{background:linear-gradient(160deg,#fbe6f0 0%,#f0eef1 100%);color:var(--mp-ink,#1b1b20)}
.mp-stoerer--cream .mp-stoerer__eyebrow{color:var(--mp-dgold,#b01a59);opacity:1}
.mp-stoerer--cream .mp-stoerer__text{color:var(--mp-ink2,#43434a)}
.mp-stoerer--cream .mp-stoerer__cta{background:var(--mp-gold,#d6256e);color:#fff}
.mp-stoerer__cta{color:var(--mp-dgold,#b01a59)}
/* --- ende mp-stoerer-modern-pink --- */

/* --- mp-footer-untermenue --- */
/* NOVA faerbt Footer-Untermenues hell:
   clear.css  "#footer .box-linkgroup .dropdown .collapse{background:#f5f7fa}"
   Das ist fuer den hellen NOVA-Footer gedacht. Unser Footer ist dunkel -
   dadurch lag ein weisser Kasten mit fast weisser Schrift ueber den Links
   (betrifft "Parfumwissen" und "Beauty-Wissen"). */
#footer.mp-footer .box-linkgroup .dropdown .collapse,
#footer.mp-footer .box-categories .dropdown .collapse{
  background: transparent !important;
}
/* Die Trennlinie stammt aus :has(.collapse:not(.show)). Unsere Untermenues
   sind dauerhaft aufgeklappt, tragen aber nie .show - die Linie war ein
   Artefakt und passte farblich nicht in den dunklen Footer. */
#footer.mp-footer .link-group-item.dropdown:has(.collapse:not(.show)){
  border-bottom: 0;
}
/* Untermenue als solches lesbar: eingerueckt an einer Haarlinie. */
#footer.mp-footer .link-group-item.dropdown > ul.collapse{
  margin: 1px 0 9px;
  padding-left: 13px;
  border-left: 1px solid rgba(255,255,255,.16);
}
#footer.mp-footer .link-group-item.dropdown > ul.collapse .nav-link{
  font-size: 13px;
  padding: 4px 0;
  color: rgba(255,255,255,.54) !important;
}
#footer.mp-footer .link-group-item.dropdown > ul.collapse .nav-link:hover{
  color: #fff !important;
}
/* Die Gruppen-Ueberschrift ist ein echter Link ("Parfumwissen" -> /parfumwissen).
   Die pointer-events:none-Regel fuer .dropdown-toggle hatte sie mit stillgelegt. */
#footer.mp-footer .nav-link.dropdown-toggle > a{
  pointer-events: auto;
  color: rgba(255,255,255,.80) !important;
  font-weight: 500;
}
#footer.mp-footer .nav-link.dropdown-toggle > a:hover{ color: #fff !important; }
/* --- ende mp-footer-untermenue --- */

/* --- mp-geschenk-sternchen --- */
/* Pflichthinweis an jedem Geschenk-Versprechen. Die zugehoerige Fussnote
   steht im Warenkorb-Band (spx-band__note). */
.mp-star{font-size:.72em;line-height:0;position:relative;top:-.35em;opacity:.85;}
/* --- ende mp-geschenk-sternchen --- */

/* --- mpg-geschenkseite --- */
/* Seite /gratis-geschenke. Kontrastregel (gemessen, auf Weiss):
   --mp-ink 17,15:1 · --mp-ink2 9,81:1 · --mp-muted 5,36:1 · --mp-dgold 6,69:1
   --mp-gold 4,83:1 -> NUR Flaeche/Rahmen, auf --mp-accent-soft nur 4,07:1 = verboten
   --mp-soft 2,79:1 -> nie als Textfarbe. */
.mpg{max-width:960px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px);padding-block:8px 56px;
  font-family:var(--mp-font,'Inter'),system-ui,sans-serif;color:var(--mp-ink,#1b1b20);}
.mpg h2{font-family:var(--mp-display,'Fraunces'),Georgia,serif;font-size:24px;font-weight:500;margin:0 0 20px;}
.mpg-star{font-size:.72em;line-height:0;position:relative;top:-.35em;}
.mpg-empty{max-width:640px;margin:40px auto;color:var(--mp-ink2,#43434a);}

/* Antwortkarte */
.mpg-answer{background:var(--mp-cream2,#faf3f7);border:1px solid var(--mp-line,#e7e6ea);
  border-radius:var(--mp-radius,8px);padding:clamp(20px,3.4vw,40px);
  display:grid;gap:0 40px;grid-template-columns:minmax(0,1fr) 260px;
  grid-template-areas:"kick hero" "h1 hero" "lead hero" "rail hero" "next hero" "act hero" "fine fine";
  min-block-size:260px;}
.mpg-answer__kicker{grid-area:kick;margin:0 0 12px;font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--mp-dgold,#b01a59);font-weight:600;}
.mpg-answer__h1{grid-area:h1;margin:0 0 12px;font-family:var(--mp-display,'Fraunces'),Georgia,serif;
  font-size:clamp(28px,4.2vw,40px);font-weight:600;line-height:1.15;text-wrap:balance;}
.mpg-answer__lead{grid-area:lead;margin:0 0 16px;font-size:17px;line-height:1.55;color:var(--mp-ink2,#43434a);}
.mpg-hero{grid-area:hero;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;}
.mpg-hero__pod{inline-size:220px;aspect-ratio:1/1;background:var(--mp-surface,#fff);
  border:1px solid var(--mp-line,#e7e6ea);border-radius:6px;display:grid;place-items:center;
  position:relative;padding:12px;}
.mpg-hero__pod img,.mpg-step__pod img{max-block-size:72%;max-inline-size:78%;object-fit:contain;
  inline-size:auto;block-size:auto;}
.mpg-hero__txt{max-inline-size:240px;}
.mpg-hero__brand,.mpg-step__brand{margin:0;font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--mp-muted,#6a6a72);}
.mpg-hero__name{margin:2px 0 0;font-size:15px;font-weight:500;line-height:1.35;}
.mpg-hero__val{margin:6px 0 0;font-size:13px;color:var(--mp-ink2,#43434a);font-variant-numeric:tabular-nums;}
.mpg-hero__hint{margin:4px 0 0;font-size:13px;color:var(--mp-muted,#6a6a72);}

/* Fortschrittszeile - gleich breite Segmente, eines je Stufe */
.mpg-rail{grid-area:rail;margin:0 0 12px;}
.mpg-rail__labels{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;
  font-size:13px;color:var(--mp-ink2,#43434a);font-variant-numeric:tabular-nums;}
.mpg-rail__track{display:flex;gap:4px;height:3px;}
.mpg-rail__seg{flex:1;background:var(--mp-line,#e7e6ea);border-radius:2px;overflow:hidden;}
.mpg-rail__fill{display:block;height:100%;background:var(--mp-gold,#d6256e);}
.mpg-answer__next{grid-area:next;margin:0 0 20px;font-size:15px;line-height:1.5;color:var(--mp-ink2,#43434a);}
.mpg-answer__next b{color:var(--mp-dgold,#b01a59);font-variant-numeric:tabular-nums;}
.mpg-answer__actions{grid-area:act;display:flex;flex-wrap:wrap;gap:12px;}
.mpg-answer__fine{grid-area:fine;margin:20px 0 0;font-size:13px;color:var(--mp-muted,#6a6a72);}

/* Schaltflaechen - Pink nur im Hover, nie als Ruheflaeche */
.mpg-btn{min-block-size:48px;padding:0 22px;border-radius:var(--mp-radius,8px);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font:500 15px/1 var(--mp-font,'Inter'),system-ui,sans-serif;
  background:var(--mp-ink,#1b1b20);color:#fff;border:1px solid var(--mp-ink,#1b1b20);}
.mpg-btn:hover,.mpg-btn:focus-visible{background:var(--mp-dgold,#b01a59);
  border-color:var(--mp-dgold,#b01a59);color:#fff;}
.mpg-btn--ghost{background:transparent;color:var(--mp-ink,#1b1b20);border-color:var(--mp-line2,#d7d6dd);}
.mpg-btn--ghost:hover,.mpg-btn--ghost:focus-visible{background:transparent;
  border-color:var(--mp-dgold,#b01a59);color:var(--mp-dgold,#b01a59);}

/* Leiter */
.mpg-steps,.mpg-how,.mpg-faq,.mpg-end{margin-top:56px;padding-top:40px;
  border-top:1px solid var(--mp-line,#e7e6ea);}
.mpg-picker fieldset{border:0;padding:0;margin:0;}
.mpg-picker legend{font-size:15px;color:var(--mp-ink2,#43434a);margin-bottom:12px;padding:0;}
.mpg-picker__row{display:flex;flex-wrap:wrap;gap:10px;}
.mpg-picker input{position:absolute;opacity:0;inline-size:1px;block-size:1px;}
.mpg-picker label{min-block-size:48px;min-inline-size:104px;padding:0 18px;
  display:inline-flex;align-items:center;border-radius:999px;
  border:1px solid var(--mp-line2,#d7d6dd);background:var(--mp-surface,#fff);
  font-size:15px;color:var(--mp-ink2,#43434a);cursor:pointer;font-variant-numeric:tabular-nums;}
.mpg-picker input:checked + label{background:var(--mp-accent-soft,#fbe6f0);
  border-color:var(--mp-gold,#d6256e);color:var(--mp-dgold,#b01a59);font-weight:600;}
.mpg-picker input:focus-visible + label{outline:2px solid var(--mp-dgold,#b01a59);outline-offset:2px;}
.mpg-result{min-block-size:24px;margin:18px 0 22px;font-size:15px;color:var(--mp-ink2,#43434a);}
.mpg-result--preview{background:var(--mp-cream,#f0eef1);border-radius:var(--mp-radius,8px);padding:12px 16px;}

.mpg-list{list-style:none;margin:0;padding:0;}
.mpg-step{display:grid;align-items:center;column-gap:20px;
  grid-template-columns:88px 160px minmax(0,1fr) auto;
  padding-block:20px;border-bottom:1px solid var(--mp-line,#e7e6ea);}
.mpg-step__thr{font-family:var(--mp-display,'Fraunces'),Georgia,serif;font-size:20px;
  color:var(--mp-ink,#1b1b20);font-variant-numeric:tabular-nums;white-space:nowrap;}
.mpg-step__pod{inline-size:160px;aspect-ratio:1/1;background:var(--mp-cream,#f0eef1);
  border:1px solid var(--mp-line,#e7e6ea);border-radius:6px;display:grid;place-items:center;
  position:relative;padding:10px;}
.mpg-step--open .mpg-step__pod{background:var(--mp-cream2,#faf3f7);}
.mpg-step__pod::after{content:"";position:absolute;inset-inline:24%;block-size:10px;bottom:12%;
  background:radial-gradient(ellipse,rgba(27,27,32,.10),transparent 70%);filter:blur(1px);}
.mpg-step__name{margin:2px 0 0;font-size:15px;font-weight:500;line-height:1.35;
  font-family:var(--mp-font,'Inter'),system-ui,sans-serif;}
.mpg-step__teaser{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--mp-muted,#6a6a72);}
.mpg-step__value{margin:6px 0 0;font-size:13px;color:var(--mp-ink2,#43434a);font-variant-numeric:tabular-nums;}
.mpg-step__aside{text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.mpg-step__state{font-size:13px;color:var(--mp-ink2,#43434a);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.mpg-step--open .mpg-step__state{color:var(--mp-dgold,#b01a59);font-weight:600;}
.mpg-step__link{font-size:13px;color:var(--mp-dgold,#b01a59);text-decoration:none;white-space:nowrap;}
.mpg-step__link:hover,.mpg-step__link:focus-visible{text-decoration:underline;}
.mpg-step--picked{border:1px solid var(--mp-gold,#d6256e);border-radius:var(--mp-radius,8px);
  background:var(--mp-cream2,#faf3f7);padding:14px;}

.mpg-here{border-top:1px solid var(--mp-accent,#e98bb6);padding:16px 0 20px;margin:0;
  font-size:15px;line-height:1.5;color:var(--mp-ink,#1b1b20);}
.mpg-here b{font-weight:600;color:var(--mp-dgold,#b01a59);font-variant-numeric:tabular-nums;}
.mpg-here--preview{border-top-color:var(--mp-line2,#d7d6dd);color:var(--mp-ink2,#43434a);}
.mpg-here--preview b{color:var(--mp-ink2,#43434a);}
.mpg-steps__note{margin:24px 0 0;font-size:15px;color:var(--mp-ink2,#43434a);}

/* So gehts */
.mpg-how__list{list-style:none;margin:0;padding:0;display:grid;gap:24px;
  grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:mpgs;}
.mpg-how__list li{counter-increment:mpgs;}
.mpg-how__list li::before{content:counter(mpgs);display:grid;place-items:center;
  inline-size:32px;block-size:32px;border-radius:50%;margin-bottom:12px;
  background:var(--mp-accent-soft,#fbe6f0);color:var(--mp-dgold,#b01a59);
  font-size:14px;font-weight:600;}
.mpg-how__list b{display:block;font-size:15px;font-weight:600;margin-bottom:4px;}
.mpg-how__list span{font-size:13px;line-height:1.6;color:var(--mp-ink2,#43434a);}

/* FAQ */
.mpg-faq{max-width:720px;}
.mpg-faq__item{border-bottom:1px solid var(--mp-line,#e7e6ea);}
.mpg-faq__item summary{padding:16px 0;font-size:15px;font-weight:500;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;min-block-size:24px;}
.mpg-faq__item summary::-webkit-details-marker{display:none;}
.mpg-faq__item summary::after{content:"+";color:var(--mp-dgold,#b01a59);font-size:18px;line-height:1;}
.mpg-faq__item[open] summary::after{content:"\2013";}
.mpg-faq__item summary:focus-visible{outline:2px solid var(--mp-dgold,#b01a59);outline-offset:2px;}
.mpg-faq__item p{margin:0 0 18px;font-size:15px;line-height:1.65;color:var(--mp-ink2,#43434a);}

.mpg-end__sum{margin:0 0 20px;font-size:17px;font-variant-numeric:tabular-nums;}
.mpg-note{margin:24px 0 0;max-width:68ch;font-size:13px;line-height:1.55;color:var(--mp-muted,#6a6a72);}

@media (max-width:1023px){
  .mpg-answer{grid-template-columns:minmax(0,1fr) 220px;gap:0 28px;}
  .mpg-hero__pod{inline-size:200px;}
}
@media (max-width:759px){
  .mpg-answer{grid-template-columns:1fr;
    grid-template-areas:"kick" "h1" "lead" "hero" "rail" "next" "act" "fine";min-block-size:0;}
  .mpg-answer__h1{font-size:30px;}
  .mpg-answer__lead{font-size:16px;}
  .mpg-hero{flex-direction:row;text-align:left;align-items:center;gap:14px;margin-bottom:16px;}
  .mpg-hero__pod{inline-size:88px;padding:8px;flex:none;}
  .mpg-hero__txt{max-inline-size:none;}
  .mpg-answer__actions{flex-direction:column;align-items:stretch;}
  .mpg-btn{width:100%;}
  .mpg-step{grid-template-columns:110px minmax(0,1fr);column-gap:14px;row-gap:8px;}
  .mpg-step__pod{inline-size:110px;grid-row:span 2;}
  .mpg-step__thr{order:-1;grid-column:2;font-size:17px;}
  .mpg-step__aside{grid-column:2;text-align:left;align-items:flex-start;}
  .mpg-how__list{grid-template-columns:1fr;gap:20px;}
  .mpg-steps,.mpg-how,.mpg-faq,.mpg-end{margin-top:40px;padding-top:32px;}
}
@media (max-width:479px){
  .mpg-answer{padding:20px;}
  .mpg-answer__h1{font-size:28px;}
}
/* --- ende mpg-geschenkseite --- */

/* --- mp-geschenklink --- */
/* Die Geschenk-Hinweise in Topbar, Hero, Warenkorb und Kasse fuehren jetzt
   auf /gratis-geschenke. Sie sollen wie Text aussehen, nicht wie ein Link -
   erst beim Ueberfahren wird die Klickbarkeit sichtbar. */
.mp-giftlink{color:inherit;text-decoration:none;border-bottom:1px solid transparent;}
.mp-giftlink:hover,.mp-giftlink:focus-visible{color:inherit;border-bottom-color:currentColor;}
.mp-usp-row .mp-giftlink{display:flex;flex-direction:column;}
.mp-usp-row .mp-giftlink:hover,.mp-usp-row .mp-giftlink:focus-visible{border-bottom-color:transparent;}
.mp-usp-row .mp-giftlink:hover strong{border-bottom:1px solid currentColor;}
/* --- ende mp-geschenklink --- */

/* --- mpdl-duftlexikon --- */
/* Bereich /duftlexikon. Tokens wie im uebrigen Theme; Pink bleibt Akzent. */
.mpdl{max-width:1080px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px);padding-block:8px 56px;
  color:var(--mp-ink,#1b1b20);}
.mpdl h1{font-family:var(--mp-display,'Fraunces'),Georgia,serif;font-size:clamp(30px,4.4vw,42px);
  font-weight:600;line-height:1.12;margin:0 0 14px;}
.mpdl h2{font-family:var(--mp-display,'Fraunces'),Georgia,serif;font-size:26px;font-weight:500;margin:0 0 8px;}
.mpdl-kopf__lead,.mpdl-block__lead,.mpdl-dkopf__lead{font-size:16px;line-height:1.65;
  color:var(--mp-ink2,#43434a);max-width:62ch;margin:0 0 22px;}
.mpdl-block{margin-top:52px;padding-top:36px;border-top:1px solid var(--mp-line,#e7e6ea);}
/* Der erste Block folgt direkt auf die Kopfzeile - dort keine zweite Linie. */
.mpdl-block--erst{margin-top:34px;padding-top:0;border-top:0;}

/* Suche */
.mpdl-suche{margin:26px 0 0;max-width:520px;}
.mpdl-suche__label{display:block;font-size:13px;color:var(--mp-muted,#6a6a72);margin-bottom:6px;}
.mpdl-suche input{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--mp-line2,#d7d6dd);
  border-radius:var(--mp-radius,8px);background:var(--mp-surface,#fff);font-size:16px;
  font-family:inherit;color:var(--mp-ink,#1b1b20);}
.mpdl-suche input:focus{outline:2px solid var(--mp-dgold,#b01a59);outline-offset:1px;border-color:transparent;}
.mpdl-suche__zahl{margin:8px 0 0;font-size:13px;color:var(--mp-muted,#6a6a72);min-height:19px;}

/* Notenkacheln */
.mpdl-noten{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.mpdl-note{display:flex;flex-direction:column;gap:3px;padding:14px 16px;text-decoration:none;
  border:1px solid var(--mp-line,#e7e6ea);border-radius:var(--mp-radius,8px);
  background:var(--mp-surface,#fff);transition:border-color .15s,background .15s;}
.mpdl-note:hover,.mpdl-note:focus-visible{border-color:var(--mp-gold,#d6256e);
  background:var(--mp-cream2,#faf3f7);}
.mpdl-note__name{font-size:15px;font-weight:500;color:var(--mp-ink,#1b1b20);}
.mpdl-note__meta{font-size:12.5px;color:var(--mp-muted,#6a6a72);}

/* A–Z */
.mpdl-az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;}
.mpdl-az a{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--mp-line2,#d7d6dd);border-radius:6px;text-decoration:none;font-size:14px;
  color:var(--mp-ink2,#43434a);}
.mpdl-az a:hover,.mpdl-az a:focus-visible{border-color:var(--mp-gold,#d6256e);color:var(--mp-dgold,#b01a59);}
.mpdl-gruppe{margin-bottom:28px;scroll-margin-top:100px;}
.mpdl-gruppe__b{font-family:var(--mp-display,'Fraunces'),Georgia,serif;font-size:22px;font-weight:500;
  margin:0 0 10px;color:var(--mp-dgold,#b01a59);}
.mpdl-liste{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
.mpdl-liste li{border-bottom:1px solid var(--mp-line,#e7e6ea);}
.mpdl-liste a{display:block;padding:13px 0;text-decoration:none;}
.mpdl-liste__name{display:block;font-size:15px;font-weight:500;color:var(--mp-ink,#1b1b20);}
.mpdl-liste__teaser{display:block;font-size:13px;line-height:1.5;color:var(--mp-muted,#6a6a72);margin-top:2px;}
.mpdl-liste a:hover .mpdl-liste__name{color:var(--mp-dgold,#b01a59);}

/* Detail */
.mpdl-krume{display:flex;gap:8px;font-size:13px;color:var(--mp-muted,#6a6a72);padding-block:14px;}
.mpdl-krume a{color:var(--mp-muted,#6a6a72);}
.mpdl-krume span::before{content:"/";margin-right:8px;}
.mpdl-dkopf__typ{margin:0 0 8px;font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--mp-dgold,#b01a59);font-weight:600;}
.mpdl-text{max-width:68ch;}
.mpdl-text p{font-size:16px;line-height:1.75;color:var(--mp-ink2,#43434a);margin:0 0 18px;}

/* Duftverlauf */
.mpdl-verlauf{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:640px;}
.mpdl-verlauf li{display:grid;grid-template-columns:110px 1fr 190px;gap:14px;align-items:center;}
.mpdl-verlauf li.is-null{opacity:.45;}
.mpdl-verlauf__n{font-size:14px;font-weight:500;}
.mpdl-verlauf__bar{height:6px;background:var(--mp-line,#e7e6ea);border-radius:20px;overflow:hidden;}
.mpdl-verlauf__bar i{display:block;height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--mp-accent,#e98bb6),var(--mp-gold,#d6256e));}
.mpdl-verlauf__z{font-size:13px;color:var(--mp-ink2,#43434a);font-variant-numeric:tabular-nums;}
.mpdl-verlauf__z small{display:block;font-size:12px;color:var(--mp-muted,#6a6a72);}

/* Artikel */
.mpdl-artikel{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
.mpdl-artikel__k{text-decoration:none;display:flex;flex-direction:column;gap:4px;}
.mpdl-artikel__bild{aspect-ratio:1/1;background:var(--mp-cream,#f0eef1);border-radius:6px;
  display:grid;place-items:center;padding:12px;margin-bottom:6px;}
.mpdl-artikel__bild img{max-block-size:80%;max-inline-size:82%;object-fit:contain;}
.mpdl-artikel__m{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mp-muted,#6a6a72);}
.mpdl-artikel__n{font-size:14px;line-height:1.35;color:var(--mp-ink,#1b1b20);}
.mpdl-artikel__p{font-size:13px;color:var(--mp-ink2,#43434a);font-variant-numeric:tabular-nums;}
.mpdl-artikel__k:hover .mpdl-artikel__n{color:var(--mp-dgold,#b01a59);}

.mpdl-zurueck{margin-top:48px;padding-top:24px;border-top:1px solid var(--mp-line,#e7e6ea);font-size:14px;}
.mpdl-zurueck a{color:var(--mp-dgold,#b01a59);text-decoration:none;}
.mpdl--leer{text-align:center;padding-block:60px;}
.mpdl-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:var(--mp-radius,8px);
  background:var(--mp-ink,#1b1b20);color:#fff;text-decoration:none;font-weight:500;}

@media (max-width:759px){
  .mpdl-verlauf li{grid-template-columns:1fr;gap:4px;}
  .mpdl-verlauf__bar{order:3;}
  .mpdl-liste{grid-template-columns:1fr;}
  .mpdl-block{margin-top:40px;padding-top:28px;}
}
/* --- ende mpdl-duftlexikon --- */

/* --- mp-announce-ueberblendung --- */
/* Die Rotationszeilen liegen uebereinander in derselben Zelle. Blendeten sie
   gleichzeitig, waren waehrend der 0,55 s beide Texte lesbar und ueberlagerten
   sich. Jetzt geht die alte Zeile zuerst raus, die neue kommt danach - und
   inaktive Zeilen sind fuer Screenreader und Maus komplett weg. */
.mp-announce__slide{
  visibility:hidden;pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.mp-announce__slide.is-active{
  visibility:visible;pointer-events:auto;
  transition:opacity .3s ease .3s, visibility 0s linear .3s;
}
@media (prefers-reduced-motion:reduce){
  .mp-announce__slide,.mp-announce__slide.is-active{transition:none;}
}
/* --- ende mp-announce-ueberblendung --- */

/* --- mp-display-sans --- */
/* Ohne eigene Display-Schrift laufen die Ueberschriften in derselben Sans wie der
   Text. Eine Grotesk braucht dafuer andere Werte als eine Antiqua: mehr Gewicht,
   negative Laufweite in grossen Graden, etwas engere Zeilen. Greift nur, wenn die
   Theme-Einstellung "Keine" gewaehlt ist - die Serifen-Varianten bleiben unberuehrt. */
html[data-mp-display="none"] .mp-hero__title{
  /* Inter braucht mindestens 1,148 Zeilenhoehe: Oberkante Ü liegt bei 0,933 em,
     Unterlaenge g bei -0,216 em. Darunter ragen die Umlautpunkte aus der Zeilenbox
     und die Ueberschrift ruecht optisch an das darueberliegende Element heran. */
  font-weight:600;letter-spacing:-.022em;line-height:1.16;
}
/* Das hervorgehobene Wort traegt die Auszeichnung jetzt ueber Farbe und Gewicht.
   Eine Grotesk-Kursive ist nur geneigt, nicht geschrieben - sie wirkt wie ein Fehler,
   und bei der Didone klebte das kursive Wort ohne Abstand am naechsten. */
html[data-mp-display="none"] .mp-hero__title em,
html[data-mp-display="none"] .mp-hero__title i{
  font-style:normal;font-weight:600;
}
html[data-mp-display="none"] .mp-home .mp-block-title,
html[data-mp-display="none"] .mp-home-block .mp-block-title,
html[data-mp-display="none"] .mp-world__t,
html[data-mp-display="none"] .mp-newsletter__title,
html[data-mp-display="none"] .mp-giftbanner__title,
html[data-mp-display="none"] .mp-stoerer__heading,
html[data-mp-display="none"] .mpg-answer__h1,
html[data-mp-display="none"] .mpg h2,
html[data-mp-display="none"] .mpdl h1,
html[data-mp-display="none"] .mpdl h2,
html[data-mp-display="none"] .mpdl-gruppe__b,
html[data-mp-display="none"] #result-wrapper .title h1.h2,
html[data-mp-display="none"] .basket h1{
  font-weight:600;letter-spacing:-.018em;
}
/* Wortmarken bleiben gesperrt - dort ist die Weite Absicht, nicht Nachlaessigkeit. */
html[data-mp-display="none"] .mp-footer__brand .mp-flogo,
html[data-mp-display="none"] .navbar-brand.mp-logo .mp-logo-text,
html[data-mp-display="none"] .mp-ck-bar__wordmark{
  font-weight:500;letter-spacing:.14em;
}
/* --- ende mp-display-sans --- */

/* --- mpp-galerie-touch --- */
/* Unter 760 px werden die Vorschaubilder bewusst zu Punkten. Sie waren aber nur
   10 x 10 gross - weit unter der empfohlenen Antippflaeche von 44 px. Der Punkt
   bleibt optisch 10 px, die Schaltflaeche darum herum wird 44 x 44. */
@media(max-width:760px){
  .mpp-thumbs{gap:0;align-items:center;}
  .mpp-thumb{width:44px;height:44px;border-radius:0;background:none;padding:0;
    position:relative;overflow:visible;}
  .mpp-thumb::after{content:"";position:absolute;top:50%;left:50%;
    width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
    background:#d8d4cd;transition:background .18s,transform .18s;}
  .mpp-thumb:hover{transform:none;}
  .mpp-thumb.is-active{background:none;}
  .mpp-thumb.is-active::after{background:var(--ink,#1b1b20);transform:scale(1.15);}
  .mpp-thumb:focus-visible{outline:2px solid var(--mp-dgold,#b01a59);outline-offset:-6px;}
  /* Wischen soll waagerecht gehen, senkrechtes Scrollen unberuehrt lassen. */
  .mpp-media{touch-action:pan-y;}
}
/* --- ende mpp-galerie-touch --- */

/* ==========================================================================
   PDP-Bewertung: Aufruf statt Sackgasse  (mpp-rate-cta)
   Vorher stand bei Artikeln ohne Bewertung nur ein Link auf einen Anker,
   den es nicht gab - bewerten war dort schlicht unmoeglich. Jetzt steht das
   echte Formular da. Ruhig gehalten, damit es die Kundenstimmen nicht
   uebertoent: gleiche Karte wie mpp-summary-card, nur mittig.
   ========================================================================== */
.mpp-rate-cta{background:#fff;border:1px solid var(--line);padding:34px 28px;text-align:center;max-width:520px}
.mpp-rate-cta__stars{display:flex;gap:5px;justify-content:center;margin-bottom:16px}
.mpp-rate-cta__stars svg{width:19px;height:19px;fill:none;stroke:var(--muted);stroke-width:1.4}
.mpp-rate-cta__title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}
.mpp-rate-cta__text{font:20px/1.42 var(--serif);margin:0 0 20px;color:var(--ink)}
.mpp-rate-cta form{margin:0}
.mpp-rate-cta button.mpp-rate-cta__btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:background .18s,color .18s}
.mpp-rate-cta button.mpp-rate-cta__btn:hover,.mpp-rate-cta button.mpp-rate-cta__btn:focus-visible{background:transparent;color:var(--ink)}
.mpp-rate-cta__hint{font-size:11px;color:var(--muted);margin:12px 0 0}
@media(max-width:760px){
  .mpp-rate-cta{padding:26px 20px;max-width:none}
  .mpp-rate-cta__text{font-size:18px}
  .mpp-rate-cta button.mpp-rate-cta__btn{width:100%}
}

/* ==========================================================================
   Wissensbereich als Magazin  (mpw-*)   ·   Parfumwissen 118, Beauty-Wissen 125
   Die CMS-Seiten liefen vorher in der vollen Bootstrap-Breite: 165 Zeichen
   pro Zeile bei 14px. Lesbar sind 60-75. Dieser Block gibt den Beitraegen
   eine feste Textspalte, groessere Schrift, ein mitlaufendes
   Inhaltsverzeichnis und einen Fuss mit den Nachbarbeitraegen.
   Keine eigene Schriftart - der Text erbt, was im Theme eingestellt ist.
   ========================================================================== */
/* mpw-grundflaeche: --mp-bg ist NICHT weiss, sondern #f6f6f7. Mein
   Rueckfallwert #fff hat nie gegriffen, weil die Variable gesetzt ist -
   der Wissensbereich lag dadurch auf Grau, waehrend der uebrige Shop
   (#main-wrapper) weiss ist. Ohne eigene Farbe erbt der Block einfach
   die Flaeche des Shops und passt in jedem Farbkonzept. */
.mpw{background:transparent;padding:0 0 72px}
.mpw-inner{max-width:1160px;margin:0 auto;padding:0 22px}

/* ---- Kopf des Beitrags ---- */
/* Der Artikelkopf ist ein <header> - und das Theme faerbt "header"
   pauschal weiss (gemeint ist die Kopfzeile des Shops). Auf der grauen
   Flaeche wurde daraus eine weisse Karte. Zuruecksetzen. */
.mpw-head{background:transparent;padding:34px 0 26px;border-bottom:1px solid var(--mp-line,#e6e0d9);margin-bottom:38px}
.mpw-kicker{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mp-muted,#8a8077);text-decoration:none;margin-bottom:14px}
a.mpw-kicker:hover,a.mpw-kicker:focus-visible{color:var(--mp-ink,#2a2320);text-decoration:underline;text-underline-offset:3px}
.mpw-titel{font-size:clamp(28px,4vw,44px);line-height:1.18;font-weight:600;margin:0;color:var(--mp-ink,#2a2320);max-width:22ch}
.mpw-meta{margin-top:16px;font-size:12.5px;color:var(--mp-muted,#8a8077);display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.mpw-meta__punkt{opacity:.55}
.mpw-meta__datum{white-space:nowrap}

/* ---- Zweispaltiges Geruest ---- */
.mpw-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:1024px){
  .mpw-layout{grid-template-columns:230px minmax(0,1fr);gap:58px;align-items:start}
}

/* ---- Inhaltsverzeichnis ---- */
.mpw-toc{margin:0 0 30px;border:1px solid var(--mp-line,#e6e0d9);padding:16px 18px;background:var(--mp-cream,#faf7f3)}
.mpw-toc__kopf{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-muted,#8a8077);margin-bottom:10px}
.mpw-toc__liste{list-style:none;margin:0;padding:0;counter-reset:mpwtoc}
.mpw-toc__liste li{margin:0}
.mpw-toc__liste a{display:block;padding:7px 0;font-size:13.5px;line-height:1.42;color:var(--mp-ink,#2a2320);
  text-decoration:none;border-left:2px solid transparent;padding-left:11px;margin-left:-11px;transition:color .15s,border-color .15s}
.mpw-toc__liste a:hover,.mpw-toc__liste a:focus-visible{color:var(--mp-gold,#a1854f);border-left-color:var(--mp-line,#e6e0d9)}
.mpw-toc__liste a.is-aktiv{color:var(--mp-gold,#a1854f);border-left-color:var(--mp-gold,#a1854f);font-weight:600}
.mpw-toc__liste .mpw-toc--tief a{padding-left:22px;font-size:12.5px;color:var(--mp-muted,#8a8077)}
.mpw-toc__liste .mpw-toc--tief a:hover,.mpw-toc__liste .mpw-toc--tief a.is-aktiv{color:var(--mp-ink,#2a2320)}
/* Verzeichnis auf schmalen Schirmen zuklappbar */
.mpw-toc__knopf{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:inherit;cursor:default;text-align:left}
.mpw-toc__pfeil{display:none}
.mpw-toc--klappbar .mpw-toc__knopf{cursor:pointer;min-height:30px}
.mpw-toc--klappbar .mpw-toc__pfeil{display:block;flex:0 0 9px;width:9px;height:9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);margin-bottom:3px;transition:transform .2s}
.mpw-toc--klappbar.is-offen .mpw-toc__pfeil{transform:rotate(-135deg);margin-bottom:-2px}
.mpw-toc--klappbar .mpw-toc__liste{display:none}
.mpw-toc--klappbar.is-offen .mpw-toc__liste{display:block;margin-top:8px}
.mpw-toc--klappbar .mpw-toc__kopf{margin-bottom:0}

@media(min-width:1024px){
  .mpw-toc{position:sticky;top:calc(var(--mpw-kleber, 110px) + 18px);margin:0;background:transparent;border:0;border-left:1px solid var(--mp-line,#e6e0d9);
    padding:2px 0 2px 16px;max-height:calc(100vh - 140px);overflow-y:auto;overscroll-behavior:contain}
  .mpw-toc__liste a{margin-left:-17px;padding-left:16px}
}

/* ---- Der Beitrag selbst ---- */
/* Auch beim direkten Aufruf einer Sprungmarke (geteilter Link) darf das
   Ziel nicht unter der klebenden Kopfzeile verschwinden. */
.mpw-artikel [id]{scroll-margin-top:calc(var(--mpw-kleber, 110px) + 18px)}
.mpw-artikel{max-width:680px;font-size:17px;line-height:1.72;color:var(--mp-ink,#2a2320)}
.mpw-artikel .container,.mpw-artikel .container-fluid{max-width:none!important;width:100%;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
.mpw-artikel .row{margin-left:0;margin-right:0}
.mpw-artikel [class^="col-"],.mpw-artikel [class*=" col-"]{padding-left:0;padding-right:0}
.mpw-artikel p{margin:0 0 1.15em}
.mpw-artikel > .opc-Container > div > h2,.mpw-artikel h2:not(.card-header h2){font-size:clamp(21px,2.4vw,27px);line-height:1.28;font-weight:600;margin:2.1em 0 .55em}
.mpw-artikel h3{font-size:18.5px;line-height:1.38;font-weight:600;margin:1.75em 0 .45em}
.mpw-artikel h4{font-size:16px;font-weight:600;margin:1.5em 0 .4em}
.mpw-artikel ul,.mpw-artikel ol{margin:0 0 1.15em;padding-left:1.35em}
.mpw-artikel li{margin-bottom:.42em}
.mpw-artikel li > p:last-child{margin-bottom:0}
.mpw-artikel a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.mpw-artikel a:hover{color:var(--mp-gold,#a1854f)}
.mpw-artikel img{max-width:100%;height:auto}
.mpw-artikel strong{font-weight:650}
.mpw-artikel hr{border:0;border-top:1px solid var(--mp-line,#e6e0d9);margin:2.4em 0}
.mpw-artikel table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1.4em}
.mpw-artikel th,.mpw-artikel td{border-bottom:1px solid var(--mp-line,#e6e0d9);padding:9px 10px;text-align:left;vertical-align:top}

/* Reste aus KI-Chat-Exporten unsichtbar halten, bis der Text bereinigt ist */
.mpw-artikel .PDq2pG_selectionAnchor{display:none}

/* ---- Akkordeon im Beitrag ---- */
.mpw-artikel .opc-Accordion{margin:0 0 1.6em}
.mpw-artikel .opc-Accordion .card{border:0;border-top:1px solid var(--mp-line,#e6e0d9);border-radius:0;background:transparent;margin:0}
.mpw-artikel .opc-Accordion .card:last-child{border-bottom:1px solid var(--mp-line,#e6e0d9)}
.mpw-artikel .opc-Accordion .card-header{background:transparent;border:0;padding:0;margin:0}
.mpw-artikel .opc-Accordion .card-header h2{margin:0!important;font-size:inherit;line-height:inherit}
.mpw-artikel .opc-Accordion-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px;
  width:100%!important;max-width:none!important;text-align:left;padding:19px 0!important;font-size:17.5px;line-height:1.4;font-weight:600;
  color:var(--mp-ink,#2a2320)!important;text-decoration:none!important;white-space:normal;border:0;background:none}
.mpw-artikel .opc-Accordion-head:hover{color:var(--mp-gold,#a1854f)!important}
/* mpw-chevron-echt: NOVA legt auf jeden [data-toggle=collapse] ein
   Font-Awesome-Chevron (content:'\f078' !important). Ein selbst gezeichneter
   Winkel aus border-right + border-bottom sieht nach dem Drehen ungleichmaessig
   aus - die beiden Kanten rastern unterschiedlich. Deshalb NOVAs Zeichen
   behalten und nur Groesse, Abstand und Drehung anpassen: zu = 0 Grad,
   auf = 180 Grad. Damit sieht das Akkordeon aus wie jeder andere
   Klapp-Schalter im Shop. */
.mpw-artikel .opc-Accordion-head::after{border:0!important;width:auto!important;height:auto!important;
  flex:0 0 auto;font-size:12px!important;line-height:1!important;margin:5px 0 0 16px!important;
  vertical-align:baseline!important;transform:none;transition:transform .22s;opacity:.55}
.mpw-artikel .opc-Accordion-head:hover::after{opacity:1}
.mpw-artikel .opc-Accordion-head[aria-expanded="true"]::after{transform:rotate(180deg);opacity:1}
.mpw-artikel .opc-Accordion .card-body{padding:0 0 24px}

/* ---- Fuss: Nachbarbeitraege ---- */
.mpw-fuss{margin-top:66px;padding-top:30px;border-top:1px solid var(--mp-line,#e6e0d9)}
.mpw-fuss__kopf{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-muted,#8a8077);margin-bottom:16px}
.mpw-fuss__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.mpw-fuss__eintrag a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 19px;
  border:1px solid var(--mp-line,#e6e0d9);text-decoration:none;color:var(--mp-ink,#2a2320);
  background:#fff;transition:border-color .16s,transform .16s}
.mpw-fuss__eintrag a:hover,.mpw-fuss__eintrag a:focus-visible{border-color:var(--mp-ink,#2a2320);transform:translateY(-2px)}
.mpw-fuss__label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--mp-muted,#8a8077)}
.mpw-fuss__name{font-size:15.5px;font-weight:600;line-height:1.35}
.mpw-fuss__text{font-size:12.5px;line-height:1.5;color:var(--mp-muted,#8a8077)}

@media(max-width:1023px){
  .mpw-artikel{max-width:none}
}
@media(max-width:600px){
  .mpw-inner{padding:0 16px}
  .mpw-head{padding:24px 0 20px;margin-bottom:26px}
  .mpw-artikel{font-size:16.5px;line-height:1.68}
  .mpw-fuss{margin-top:46px}
}

/* NOVAs Fokusring ist 2px #ffda5f (JTL-Gelb) mit abgerundeten Ecken - neben
   der schwarz-weissen Typografie des Wissensbereichs sah das aus wie ein
   Fehler. Der Ring bleibt (ohne ihn findet sich niemand mehr zurecht, der
   mit der Tastatur navigiert), nur in der Farbe des Themes und eckig. */
.mpw-artikel .opc-Accordion-head:focus-visible,
.mpw-artikel .opc-Accordion-head.focus,
.mpw-toc__knopf:focus-visible,
.mpw-fuss__eintrag a:focus-visible{outline:2px solid var(--mp-ink,#2a2320)!important;outline-offset:3px!important;border-radius:0!important}
.mpw-artikel .opc-Accordion-head:focus:not(:focus-visible){outline:0!important;box-shadow:none!important}


/* ==========================================================================
   mp-tap-ziele: Klickflaechen auf Beruehrungsgeraeten (2026-09-10)
   Gemessen bei 375px: das Hamburger-Menue war 20x25px, Karten-Icons 36px,
   Fusszeilen-Links 27px hoch. Empfohlen sind 44px. Nur (pointer:coarse),
   damit sich am Mausbedienten Desktop nichts verschiebt.
   Bewusst mit Innenabstand statt display:flex gearbeitet, wo bereits ein
   Anzeigemodus gesetzt ist: .mp-card__name haengt an -webkit-line-clamp:2
   (zweizeilige Titelbegrenzung) - ein display:flex wuerde die aufheben.
   ========================================================================== */
@media (pointer: coarse) {
  .burger-menu-wrapper{min-height:44px;padding:10px 12px}
  .mp-card__actions .btn,
  .mp-card__actions .wishlist,
  .mp-card__actions .wishlist-button{width:44px !important;height:44px !important}
  .mp-card__add{width:44px;height:44px}
  .mp-card__name{padding:3px 0}
  .mp-footer .nav-item .nav-link{min-height:44px;padding-top:9px;padding-bottom:9px}
  .mp-footer .box-normal-link{min-height:44px;padding-top:3px;padding-bottom:3px}
  .mp-footer .link-group-item .nav-link{min-height:44px;padding-top:4px;padding-bottom:4px}
  .mp-fsocial a{width:44px;height:44px}
  .mpw-toc__knopf{min-height:44px}
  .mpp-media__action{min-width:44px;min-height:44px}
  .mp-bis__submit{min-height:44px}
}


/* ==========================================================================
   mp-suchvorschlaege: Farbe beim Ueberfahren in der Such-Vorschlagsliste
   Die Liste kommt von typeahead.js (.tt-menu/.tt-suggestion). Das Kind-Theme
   hatte dafuer keine einzige Regel, also griff clear.css durch:
     background-color:#f5f7fa; color:#525252
   Ein kuehles Blaugrau neben einer warmen Creme/Pink-Palette - genau der
   Bruch, der auffaellt. Jetzt in den Theme-Farben.
   ========================================================================== */
.tt-menu .tt-suggestion.tt-cursor,
.tt-menu .tt-suggestion:hover,
.tt-dropdown-menu .tt-suggestion.tt-cursor,
.tt-dropdown-menu .tt-suggestion:hover{
  background-color:var(--mp-cream2,#faf3f7) !important;
  color:var(--mp-ink,#1b1b20) !important;
}
.tt-menu .tt-suggestion.tt-cursor a,
.tt-menu .tt-suggestion:hover a,
.tt-dropdown-menu .tt-suggestion.tt-cursor a,
.tt-dropdown-menu .tt-suggestion:hover a{color:var(--mp-ink,#1b1b20) !important}


/* ==========================================================================
   mp-typeahead-breite: Kopfzeilen-Suche laeuft beim Tippen ueber (10.09.2026)
   typeahead.js huellt das Eingabefeld beim Initialisieren in ein eigenes
   <span class="twitter-typeahead"> mit inline display:inline-block und
   kopierten Pixelbreiten. Das Feld ist direktes Flex-Kind einer Bootstrap-
   Eingabegruppe; ein Flex-Kind hat standardmaessig min-width:auto und kann
   deshalb nicht unter seine Inhaltsbreite schrumpfen. Auf schmalen Schirmen
   sprengt das die Kopfzeile - die ganze Seite laesst sich seitlich schieben,
   und zwar genau ab dem ersten Tastendruck.
   Weder clear.css noch custom.css hatten bis hier eine einzige Regel fuer
   .twitter-typeahead / .tt-input / .tt-hint.
   ========================================================================== */
.twitter-typeahead{max-width:100%}
.input-group > .twitter-typeahead{flex:1 1 auto;min-width:0;width:auto !important;display:block !important}
.twitter-typeahead .tt-input,
.twitter-typeahead .tt-hint{width:100% !important;max-width:100%}
.twitter-typeahead .tt-menu,
.twitter-typeahead .tt-dropdown-menu{width:100%;max-width:100%;left:0;right:auto}
/* Die Eingabegruppe selbst und ihr Rahmen duerfen ebenfalls schrumpfen. */
.search-wrapper .input-group,
.search-wrapper .form-icon{min-width:0;max-width:100%}


/* ==========================================================================
   mp-suche-mobil: Such-Vorschau und Suchfeld auf dem Handy (11.09.2026)
   1) Die Vorschau (.mp-sd) hatte keine Hoehenbegrenzung. Einspaltig gestapelt
      wird sie 700-900px hoch, und weil position() sie bei jedem Scrollen neu
      unter das Feld setzt, waren die unteren Treffer und "Alle Treffer
      ansehen" nie erreichbar. Jetzt scrollt sie in sich.
   2) Das Suchfeld hatte 14px Schrift. Safari auf dem iPhone zoomt beim
      Antippen jedes Feldes unter 16px in die Seite hinein - die gezoomte
      Seite laesst sich dann seitlich verschieben. 16px unterdrueckt das.
   ========================================================================== */
.mp-sd.is-open{max-height:min(72vh,72dvh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-width:991.98px){
  .search-wrapper input.form-control,
  .search-wrapper .ac_input{font-size:16px !important}
}

/* =========================================================================
   mp-hero-fill (08.10.2026): Hero-Bild füllt die ganze Fläche
   Einstellung „Hero-Bild füllt die ganze Fläche“ (mp_hero.mp_hero_image_fill).
   Lesbarkeit: Unter dem Text liegt ein Verlauf in der Hero-Grundfarbe, der nach
   rechts ins Bild ausläuft. Titel, Text, Knöpfe und Häkchen stehen damit immer
   auf hellem Grund – unabhängig davon, welches Bild hochgeladen wird.
   Handy/Tablet (≤ 900 px): Bild als Band oben, Text darunter auf hellem Grund.
   ========================================================================= */
.mp-hero--fill{ position:relative; isolation:isolate; display:flex; align-items:center; min-height:clamp(440px,34vw,560px); padding:56px 56px; }
.mp-hero--fill .mp-hero__bg{ position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; object-position:right center; }
.mp-hero--fill .mp-hero__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(239,233,238,.97) 0%, rgba(239,233,238,.95) 40%, rgba(239,233,238,.62) 55%, rgba(239,233,238,0) 70%); }
@supports (background:color-mix(in srgb, red 50%, transparent)){
  .mp-hero--fill .mp-hero__scrim{ background:linear-gradient(90deg,
    color-mix(in srgb, var(--mp-hero) 97%, transparent) 0%,
    color-mix(in srgb, var(--mp-hero) 95%, transparent) 40%,
    color-mix(in srgb, var(--mp-hero) 62%, transparent) 55%,
    color-mix(in srgb, var(--mp-hero) 0%, transparent) 70%); }
}
.mp-hero--fill .mp-hero__text{ position:relative; max-width:min(560px,48%); }
/* Graue Texte im Vollflächen-Modus etwas dunkler – liegen auf leicht durchscheinendem Grund */
.mp-hero--fill .mp-hero__lead,
.mp-hero--fill .mp-hero__usp li{ color:#4d4d55; }
@supports (color:color-mix(in srgb, red 50%, blue)){
  .mp-hero--fill .mp-hero__lead,
  .mp-hero--fill .mp-hero__usp li{ color:color-mix(in srgb, var(--mp-muted) 65%, var(--mp-ink)); }
}

/* schmalere Desktops/Tablets quer: Text braucht mehr Breite → Verlauf weiter ziehen */
@media (min-width:901px) and (max-width:1199.98px){
  .mp-hero--fill{ padding:48px 44px; }
  .mp-hero--fill .mp-hero__text{ max-width:min(500px,54%); }
  .mp-hero--fill .mp-hero__scrim{ background:linear-gradient(90deg, rgba(239,233,238,.97) 0%, rgba(239,233,238,.95) 50%, rgba(239,233,238,.55) 62%, rgba(239,233,238,0) 76%); }
  @supports (background:color-mix(in srgb, red 50%, transparent)){
    .mp-hero--fill .mp-hero__scrim{ background:linear-gradient(90deg,
      color-mix(in srgb, var(--mp-hero) 97%, transparent) 0%,
      color-mix(in srgb, var(--mp-hero) 95%, transparent) 50%,
      color-mix(in srgb, var(--mp-hero) 55%, transparent) 62%,
      color-mix(in srgb, var(--mp-hero) 0%, transparent) 76%); }
  }
}

/* Handy/Tablet hoch: Bild als Band oben, sanfter Übergang in die Grundfarbe */
@media (max-width:900px){
  .mp-hero--fill{ display:block; min-height:0; padding:calc(clamp(190px,54vw,330px) + 6px) 24px 28px; }
  .mp-hero--fill .mp-hero__bg{ inset:0 0 auto 0; height:clamp(190px,54vw,330px); object-position:72% center; }
  .mp-hero--fill .mp-hero__scrim{ inset:0 0 auto 0; height:clamp(190px,54vw,330px);
    background:linear-gradient(180deg, rgba(239,233,238,0) 55%, rgba(239,233,238,.85) 88%, rgb(239,233,238) 100%); }
  @supports (background:color-mix(in srgb, red 50%, transparent)){
    .mp-hero--fill .mp-hero__scrim{ background:linear-gradient(180deg,
      color-mix(in srgb, var(--mp-hero) 0%, transparent) 55%,
      color-mix(in srgb, var(--mp-hero) 85%, transparent) 88%,
      var(--mp-hero) 100%); }
  }
  .mp-hero--fill .mp-hero__text{ max-width:none; }
}

/* Nutzer mit „Kontrast erhöhen“: Text immer auf vollflächigem Grund */
@media (prefers-contrast:more) and (min-width:901px){
  .mp-hero--fill .mp-hero__scrim{ background:linear-gradient(90deg, var(--mp-hero) 0%, var(--mp-hero) 56%, transparent 70%); }
}