/* === TOKENS === */
:root {
    --color-primary:        #990066;
    --color-primary-dark:   #770050;
    --color-primary-light:  #f7e6f1;
    --color-danger:         #cc0033;
    --color-danger-light:   #fdecec;
    --color-success:        #3a8a3a;
    --color-success-light:  #eaf6ea;
    --color-warning:        #e68900;
    --color-warning-light:  #fff4e0;
    --color-info:           #2b6cb0;
    --color-info-light:     #e6f0fa;
    --color-text:           #262626;
    --color-text-muted:     #6c757d;
    --color-border:         #dde3e9;
    --color-border-strong:  #c4cdd5;
    --color-bg-subtle:      #f8f9fb;
    --color-bg-muted:       #eef2f6;
    --color-white:          #ffffff;
    --color-star:           #f5a623;
    /* GOS-90: Sticky-Header — Hoehe im compact-Mode (gescrollt).
       Referenziert von .navbar-top (is-scrolled) und vom product_info-
       Sticky-Header (top-Offset, damit beide untereinander sichtbar). */
    --header-h-compact:     48px;

    --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', Arial, sans-serif;
    --font-size-xs:    0.75rem;
    --font-size-sm:    0.875rem;
    --font-size-base:  1rem;
    --font-size-lg:    1.125rem;
    --font-size-xl:    1.25rem;
    --font-size-h3:    1.375rem;
    --font-size-h2:    1.625rem;
    --font-size-h1:    2rem;
    --line-height-base:  1.65;
    --line-height-tight: 1.3;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold:   700;

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2rem;
    --sp-6: 3rem;

    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-card: 0.75rem;
    --radius-pill: 9999px;

    --shadow-card:     0 2px 10px rgba(57, 97, 120, 0.10);
    --shadow-hover:    0 6px 22px rgba(57, 97, 120, 0.16);
    --shadow-focus:    0 0 0 0.2rem rgba(153, 0, 102, 0.25);
    --transition-base: 0.2s ease;

    --container-max:   1320px;
}

.boxText {
    font-size: 10px;
    padding-left: 2px
}

.errorBox {
    font-size: 10px;
    background: #ffb3b5;
    font-weight: bold;
}

.stockWarning {
    font-size: 10px;
    color: #cc0033;
}

.productsNotifications {
    background: #f2fff7;
}

.orderEdit {
    font-size: 10px;
    color: #70d250;
    text-decoration: underline;
}

/* ems and rems solved problems which I faced using pixels. I use rem in spacing (margin, padding, etc.) and font sizing. And I use em for layouts like menu */
body {
    letter-spacing: 0.025em;
    line-height: 1.6;
}


@media only screen and (min-width: 1px) {
    .brandLogo {
        width: 25px;
    }

    .navbar-brand {
        min-height: 50px;
        height: inherit;
    }

    .hidden-inline-xs {
        display: none;
    !important
    }

    .country-module-list {
        -moz-column-count: 2;
        column-count: 2;
    }

    .glider-slide {
        padding: 0 5px 10px;
        display: flex;
    }

    .equal-height-btn {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .row_custom {
        flex-direction: column;
    }

    .responsive-font-size {
        font-size: xx-small !important;
    }
}

@media only screen and (min-width: 480px) {
    .brandLogo {
        width: 30px;
    }

    .navbar-brand {
        min-height: 60px;
        height: inherit;
    }

    .hidden-inline-xs {
        display: none !important;
    }

    .country-module-list {
        -moz-column-count: 3;
        column-count: 3;
    }

    .glider-slide {
        padding: 0 5px 10px;
        display: flex;
    }

    .equal-height-btn {
        padding-left: 20px;
        padding-right: 20px;
    }

    .responsive-font-size {
        font-size: smaller !important;
    }
}

@media only screen and (min-width: 768px) {
    .brandLogo {
        width: 32px;
    }

    .hidden-inline-xs {
        display: inline !important;
    }

    .country-module-list {
        -moz-column-count: 4;
        column-count: 4;
        -moz-column-gap: 50px;
        column-gap: 50px;
    }

    .glider-slide {
        padding: 0 10px 20px;
        display: flex;
    }

    .equal-height-btn {
        padding-left: 20px;
        padding-right: 20px;
    }

    .responsive-font-size {
        font-size: large !important;
    }
}

@media only screen and (min-width: 992px) {
    .brandLogo {
        width: 32px;
    }

    .hidden-inline-xs {
        display: inline !important;
    }

    .country-module-list {
        -moz-column-count: 5;
        column-count: 5;
        -moz-column-gap: 50px;
        column-gap: 50px;
    }

    .glider-slide {
        padding: 0 10px 20px;
        display: flex;
    }

    .equal-height-btn {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (min-width: 1200px) {
    .brandLogo {
        width: 32px;
    }

    .hidden-inline-xs {
        display: inline !important;
    }

    .country-module-list {
        -moz-column-count: 7;
        column-count: 7;
        -moz-column-gap: 80px;
        column-gap: 80px;
    }

    .glider-slide {
        padding: 0 10px 20px;
        display: flex;
    }

    .equal-height-btn {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* TopNavbar */
@media only screen and (min-width: 990px) and (max-width: 1200px) {
    #search {
        width: 175px;
    }

    #search input {
        width: 175px;
    }
}

@media only screen and (min-width: 990px) {

}

@media only screen and (max-width: 990px) {
    #topbar {
        padding: 10px;
    }

    /* .navbar-inverse .navbar-toggle {
         display: block;
         float: none;
         width: 44px;
         height: 35px;
         background-color: #FFFFFF;
         border-color: #FFFFFF;
         -webkit-border-radius: 0;
         -moz-border-radius: 0;
         -ms-border-radius: 0;
         -o-border-radius: 0;
         border-radius: 0;
     } */
    .navbar-collapse.collapse {
        /*  display: none !important; -- Verursacht Fehler mit Bootstrap toggles */
    }

    .navbar-nav > li {
        /*float: none;*/
    }

    .product-info-image-group {
        text-align: center !important;
    }

    .product-info-description {
        margin-right: auto;
        margin-left: 5%;
    }

}

@media only screen and (max-width: 749px) {
    #header #cart,
    .box-services {
        display: block !important;
        margin-bottom: 20px;
        width: 190px;
    }

    #header #cart,
    .box-services {
        margin-left: 35%;
    }
}

@media only screen and (max-width: 480px) {
    .show-mobile .quick-user .inner-toggle {
        right: -130px !important;
    }

    .show-mobile .quick-access .inner-toggle {
        right: -100px !important;
    }
}

.navbar_wrap, .header_wrap, .body_wrap, .footer_wrap {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* Nav Bars ----------------------------------------------------------------- */

.navbar-no-corners {
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-left: none;
    border-right: none;
}

.navbar-no-margin {
    margin-bottom: 0 !important;
}

/* End TopNavbar */

/* === Highlight-Snippets in der Kategorien-Hauptnavbar (GOS-90) ===========
   Neue Produkte / Sonderangebote / Bewertungen — modernes Pill-Markup,
   tokenisierte Farben, 44 px Touch-Target. Same Markup im Mobile-Burger
   der dunklen Top-Navbar (Override unten). */
.navbar-highlights {
    gap: var(--sp-1);
}
.nav-highlight {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-3) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    color: var(--color-text) !important;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}
/* Hover/Focus fuer Highlights = gleicher Brand-Tint-Effekt wie fuer
   Kategorien-Toplevel. Auf der subtle Bar (.navbar-main bg-subtle) ist
   reines Weiss kaum sichtbar — primary-light hebt sich klar ab. */
.nav-highlight:hover { background: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; text-decoration: none; box-shadow: 0 1px 3px rgba(57, 97, 120, 0.08); }
.nav-highlight:focus-visible { background: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; box-shadow: var(--shadow-focus); outline: none; }
/* Aktiv-State fuer Highlights (User ist auf der Ziel-Seite) — Bold + Brand-Color
   + Underline analog zu .navbar-main .nav-link.active. Greift via PHP-gesetzte
   .active-Klasse in den Widgets. */
.nav-highlight.active {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
}
/* Underline via ::before — siehe Begruendung beim .nav-link.active-Block:
   Bootstraps .dropdown-toggle::after (Chevron) wuerde sonst kollidieren,
   was bei .nav-highlight--info (= Dropdown-Toggle) sichtbar wird. */
.nav-highlight.active::before {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 4px;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}
.nav-highlight i {
    font-size: var(--font-size-base) !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
}
.nav-highlight--new i      { color: var(--color-success); }
.nav-highlight--sale i     { color: var(--color-danger); }
.nav-highlight--reviews i  { color: var(--color-star); }
.nav-highlight--info i     { color: var(--color-info); font-size: 1.1rem !important; }

/* Information-Cluster: rechts neben den Highlights, kleiner Gap */
.navbar-main .navbar-info-cluster {
    margin-left: var(--sp-2);
    padding-left: var(--sp-2);
    border-left: 1px solid var(--color-border);
}
/* Chevron des Info-Dropdown-Toggles — gleich wie alle Categories-Dropdown-Toggles
   in .navbar-main (greift bereits ueber .navbar-main .dropdown-toggle::after). */
.nav-highlight--info.dropdown-toggle::after {
    margin-left: var(--sp-1);
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* === Badge-Komponente (BS5-Standard + .badge--soft Modifier) ============
   Statt eigener .nav-highlight__count-Klasse fuer Highlights und
   .badge.bg-danger fuer Cart nutzen wir konsistent das Bootstrap-Pattern
   `.badge.rounded-pill.bg-{color}` plus eigene .badge--soft-Variante,
   die die saturierten BS-Backgrounds in Soft-Tints umwandelt. So sind
   alle Pills im Header (Highlights, Cart) ein Pattern, eine Implementierung,
   ein Markup. Hoehe entsteht aus em-padding — skaliert mit font-size. */
.badge.badge--soft {
    min-width: 24px;
    padding: 0.3em 0.55em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.badge.badge--soft.bg-success   { background-color: var(--color-success-light) !important; color: var(--color-success) !important; }
.badge.badge--soft.bg-danger    { background-color: var(--color-danger-light) !important;  color: var(--color-danger) !important; }
.badge.badge--soft.bg-warning   { background-color: var(--color-warning-light) !important; color: var(--color-warning) !important; }
.badge.badge--soft.bg-secondary { background-color: var(--color-bg-subtle) !important;     color: var(--color-text-muted) !important; }
.badge.badge--soft.bg-primary   { background-color: var(--color-primary-light) !important; color: var(--color-primary-dark) !important; }

/* Tablet-Verdichtung: Padding und Gap reduziert, Label bleibt sichtbar */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .navbar-highlights .nav-highlight { padding: 0 var(--sp-2) !important; gap: var(--sp-1); }
    .navbar-highlights .badge.badge--soft { min-width: 20px; padding: 0.25em 0.4em !important; font-size: 0.6875rem !important; }
}

/* === End Highlight-Snippets ============================================== */
/* Hinweis: Mobile-Burger-Highlights werden vom .burger-list-Block weiter
   unten gestyled (siehe `.burger-list .nav-link.nav-highlight`). Der frueher
   hier stehende `.navbar-top .nav-highlight`-Override wurde entfernt — durch
   .burger-list ueberlagert und damit toter Code. */

/* === Kategorien-Hauptnavbar (.navbar-main) — Polish nach Mockup GOS-90 ====
   Bar in Subtle-Grau (Mockup-konform), klare Abgrenzung via Border-Top und
   Border-Bottom; vertikales Padding fuer Atmung, min-height 48 px. Hover an
   den Kategorien-Links rendert weisse Karten-Pills mit dezentem Schatten —
   die Pills "schweben" optisch ueber der grauen Bar. 44 px Touch-Targets,
   Token-basierte Focus-/Active-States, weiches Karten-Dropdown.
   Schrift-Hierarchie: Kategorien primaer (font-size-sm/14 px, medium),
   Highlights sekundaer (xs/12 px UPPERCASE, muted). Markup via
   header_navigation.php (Top-Level: .nav-link.dropdown-toggle,
   Sub-Items: .dropdown-item, Sub-Submenus: .dropdown-submenu). */
.navbar-main {
    background: var(--color-bg-subtle) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: var(--sp-1) 0 !important;
    min-height: 48px;
}
.navbar-main .navbar-collapse {
    align-items: center;
    gap: var(--sp-2);
    padding: 0;
}
.navbar-main .navbar-nav {
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin: 0;
}

/* Top-Level-Links (Kategorien + dropdown-toggles) */
.navbar-main .nav-item { position: relative; }
.navbar-main .nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 44px;
    padding: 0 var(--sp-3) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none;
    transition: background-color var(--transition-base), color var(--transition-base);
}
/* Hover/Focus fuer ALLE Top-Level-Items (Categories + Highlights + Info):
   primary-light Tint + primary-dark Color + leichter Box-Schatten. Einheitlicher
   Indikator quer ueber die Bar — ohne Unterscheidung Categories vs. Highlights. */
.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus-visible {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(57, 97, 120, 0.08);
}
/* Geoeffnetes Dropdown: staerkerer Brand-Tint zeigt Aktivierung an —
   greift sowohl bei Bootstrap-Click (.show / aria-expanded) als auch beim
   reinen Hover-Open (siehe naechster Block). */
.navbar-main .nav-item.show > .nav-link,
.navbar-main .nav-link[aria-expanded="true"],
.navbar-main .nav-item.dropdown:hover > .nav-link,
.navbar-main .nav-item.dropdown:focus-within > .nav-link {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
    text-decoration: none;
    box-shadow: none;
}

/* Hover-Open NUR auf echten Maus-Geraeten — Touch-Geraete triggern :hover
   beim Tap, was den Bootstrap-Click-Toggle ueberschreibt (Sticky-State,
   2. Tap schliesst nicht). Pointer-Media-Query schliesst Touch sicher aus. */
@media (hover: hover) and (pointer: fine) {
    .navbar-main .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }
    /* Hover-Bridge: unsichtbarer Streifen ueberbrueckt die margin-top-Luecke
       zwischen Top-Level-Item und Dropdown-Menue, damit der Cursor-Pfad nicht
       reisst. Auch nur Maus — Touch braucht keine Bridge. */
    .navbar-main .dropdown-menu::before {
        content: "";
        position: absolute;
        top: calc(-1 * var(--sp-1));
        left: 0;
        right: 0;
        height: var(--sp-1);
    }
}
/* Tastatur-Open: nur bei echtem Tastatur-Focus (:focus-visible), NICHT
   beim Maus-Click-Focus. focus-within wuerde nach jedem Click sticky
   bleiben (Toggle behaelt Focus → Dropdown geht nicht mehr zu).
   :has(:focus-visible) greift nur bei Tab-Navigation. */
.navbar-main .nav-item.dropdown:has(:focus-visible) > .dropdown-menu {
    display: block;
}
.navbar-main .nav-link:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}
/* Top-Kategorie-Praefix-Icon (Setzling) — gedaempft, etwas kleiner als
   das Label. Wird vom header_navigation.php-Generator gerendert
   (gleicher Output Desktop+Mobile-Burger). */
.navbar-main .category-icon,
.burger-list .category-icon {
    color: var(--color-text-muted);
    font-size: 0.85em;
    opacity: 0.7;
    transition: color var(--transition-base), opacity var(--transition-base);
}
.navbar-main .nav-link:hover .category-icon,
.navbar-main .nav-link:focus-visible .category-icon,
.navbar-main .nav-item:hover > .nav-link .category-icon,
.navbar-main .nav-link.active .category-icon,
.navbar-main .nav-item.active > .nav-link .category-icon,
.burger-list .nav-link:hover .category-icon,
.burger-list .nav-item.active > .nav-link .category-icon {
    color: var(--color-primary);
    opacity: 1;
}
/* Aktiv (= Kategorie aktuell sichtbar): Brand-Color + Bold + dezenter Underline.
   Mockup-Pattern (.main-nav__link[aria-current="page"]) kennt KEIN background —
   nur color + bold. Wir erzwingen transparenten BG aggressiv, weil eine
   globale Legacy-Regel (.dropdown-menu > .active > a oder Bootstrap-3-Theme)
   sonst durchschlagen kann. */
.navbar-main .nav-link.active,
.navbar-main .nav-item.active > .nav-link,
.navbar-main .nav-link.active.dropdown-toggle,
.navbar-main .nav-item.active.dropdown > .nav-link {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
}
/* Wenn die aktive Kategorie GLEICHZEITIG offen ist (Hover oder Click):
   subtle Brand-Tint statt transparent, damit die Selektion weiterhin
   sichtbar ist — Text bleibt primary-dark fuer Kontrast. */
.navbar-main .nav-item.active.show > .nav-link,
.navbar-main .nav-item.active > .nav-link[aria-expanded="true"],
.navbar-main .nav-item.active.dropdown:hover > .nav-link,
.navbar-main .nav-item.active.dropdown:focus-within > .nav-link {
    background: var(--color-primary-light) !important;
    background-color: var(--color-primary-light) !important;
    background-image: none !important;
    color: var(--color-primary-dark) !important;
}
/* Underline via ::before — wuerde sonst mit Bootstraps .dropdown-toggle::after
   (Chevron-Pfeil) konfligieren: beide manipulieren das gleiche Pseudo-Element,
   die Triangle-Borders des Chevrons mischen sich mit unseren Underline-Werten
   → optisch verfaelschter Strich. ::before ist von Bootstrap nicht belegt. */
.navbar-main .nav-link.active::before,
.navbar-main .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 6px;
    height: 2px;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
}

/* Chevron der Dropdown-Toggles — kleiner, gedaempft, weiche Rotation.
   Ueberschreibt die globale .dropdown-toggle::after-Regel innerhalb der
   Kategorien-Hauptnavbar. */
.navbar-main .dropdown-toggle::after {
    margin-left: var(--sp-1);
    border-top-width: 0.28em;
    border-right-width: 0.28em;
    border-left-width: 0.28em;
    color: var(--color-text-muted);
    opacity: 0.7;
    transition: transform 0.2s var(--transition-base), opacity var(--transition-base);
}
.navbar-main .nav-item:hover > .nav-link.dropdown-toggle::after,
.navbar-main .dropdown-toggle.show::after,
.navbar-main .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
    opacity: 1;
}

/* Dropdown-Menue — runde Karten-Optik mit weichem Schatten */
.navbar-main .dropdown-menu {
    margin-top: var(--sp-1);
    padding: var(--sp-2) !important;
    background: var(--color-white) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    min-width: 240px;
    font-size: var(--font-size-sm) !important;
}
.navbar-main .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-3) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
    line-height: 1.3 !important;
    white-space: normal;
    transition: background-color var(--transition-base), color var(--transition-base);
}
.navbar-main .dropdown-menu .dropdown-item:hover,
.navbar-main .dropdown-menu .dropdown-item:focus-visible {
    background: var(--color-bg-subtle) !important;
    color: var(--color-primary) !important;
}
.navbar-main .dropdown-menu .dropdown-item:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
/* Aktiv-State: ueberschreibt den globalen schwarzen Gradient
   (.dropdown-menu > .active > a) und das primary-dark-Background von
   .dropdown-item.active mit einem ruhigen Brand-Tint. */
.navbar-main .dropdown-menu .dropdown-item.active,
.navbar-main .dropdown-menu .dropdown-item:active,
.navbar-main .dropdown-menu > .active > a {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
    font-weight: var(--font-weight-medium);
    background-image: none !important;
}

/* Sub-Submenu (.dropdown-submenu) — gleiches Karten-Design, oeffnet rechts */
.navbar-main .dropdown-submenu { position: relative; }
.navbar-main .dropdown-submenu > .dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.navbar-main .dropdown-submenu > .dropdown-toggle::after {
    margin-left: auto;
    transform: rotate(-90deg);
    border-top-width: 0.28em;
}
.navbar-main .dropdown-submenu:hover > .dropdown-toggle::after,
.navbar-main .dropdown-submenu.show > .dropdown-toggle::after {
    transform: rotate(-90deg);
}
.navbar-main .dropdown-submenu > .dropdown-menu {
    top: calc(-1 * var(--sp-2));
    left: calc(100% + var(--sp-1));
    margin-top: 0;
}

/* Verdichtung im Mid-Range, damit lange Kategorienamen + Highlights passen */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .navbar-main .nav-link { padding: 0 var(--sp-2); font-size: var(--font-size-xs); }
    .navbar-main .navbar-nav { gap: 2px; }
}
/* === End Kategorien-Hauptnavbar ========================================== */

#bodyContent .img-responsive, #columnLeft .img-responsive, #columnRight .img-responsive {
    margin-left: auto;
    margin-right: auto;
    object-fit: cover;
}

#columnLeft {
    padding-right: 5px;
}

#columnRight {
    padding-left: 5px;
}

#columnLeft .panel {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

.thumbnail {
    box-shadow: none !important;
    border: none !important;
    /*-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);*/
    /*box-shadow: 0 1px 2px rgba(0,0,0,.075);*/
    /*padding: 8px;*/
}

.thumbnail:hover {
    /*-moz-box-shadow: rgba(0,0,0,.24) 0 1px 8px 0;*/
    /*-webkit-box-shadow: rgba(0,0,0,.24) 0 1px 8px 0;*/
    /*box-shadow: rgba(0,0,0,.24) 0 1px 8px 0;*/
}

.thumbnail a:hover img {
    z-index: 1;
    -webkit-transform: rotate(0deg) scale(1.02);
    -moz-transform: rotate(0deg) scale(1.02);
    -o-transform: rotate(0deg) scale(1.02);
    transform: rotate(0deg) scale(1.02);
}

#columnRight .panel {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

#contentText {
    margin-left: 160px;
}

.contentText.information {
    background: #fff;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgb(57 97 120 / 10%) !important;
    -webkit-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
    transition-delay: 0s;
    overflow: auto;
}

.go-review-review, .go-review-header,
.contentText td:not(.checkoutConfirmationTable) .infoBox {
    background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgb(57 97 120 / 10%) !important;
    -webkit-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
    transition-delay: 0s;
}

.contentText td:not(.checkoutConfirmationTable) .infoBox:not(.card.infoBox) {
    border-radius: 10px;
}

.go-review-review, .go-review-header,
.contentText .infoBox td {
    padding: 10px;
}

.contentText .checkoutConfirmationTable .infoBox td {
    padding: 5px;
}

.buttonSet {
    margin-top: 10px;
    margin-bottom: 10px;
}

.buttonSet {
    zoom: 1;
}

.buttonSet:before, .buttonSet:after {
    content: "";
    display: table;
}

.buttonSet:after {
    clear: both;
}

.noBackground {
    background: none !important;
}

/* Bootstrap css für CART list items */
.dropdown-menu > li > table > tbody > tr > td > a {
    display: block;
    /*padding: 3px 20px;*/
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    /*white-space: nowrap;*/
}

.dropdown-menu > li > table > tbody > tr > td > a:hover,
.dropdown-menu > li > table > tbody > tr > td > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

.pagination {
    margin: 10px;
}

.pagination > .active > a {
    background-color: #990066 !important;
    color: #f5f5f5;
    border-color: #770050 !important;
}

.pagination > .active > a:hover {
    background-color: #770050;
    border-color: #fff;
}

.yellow {
    color: gold;
}

.brandLogo {
    max-width: 60px;
    height: auto;
    display: inline !important;
}

/* OLD */
.footer div {
    padding: 5px;
    padding-left: 10px;
    text-align: left;
    color: #999999;
}

.footer ul {
    padding-left: 0px;
}

.footer li {
    padding-bottom: 10px;
}

/* OLD */

#footer {
    min-height: 100px;
    color: #909090;
}

#footer:before,
#footer:after {
    content: " ";
    display: table;
}

#footer:after {
    clear: both;
}

#footer .container-inner {
    padding: 30px;
    width: 100%
}

#footer div:first-child .container .container-inner {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

#footer .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
}

#footer .footer-top .container-inner {
    background-color: #303030;
    padding: 10px;
    text-align: center;
}

#footer .footer-top {
    background: #f8f9fb;
    height: 50px;
}

#footer .footer-center .container-inner {
    background-color: #292929;
}

#footer .footer-bottom .container-inner {
    background-color: #272727;
}

.container-inner h3 {
    color: #cccccc;
}

#footer h5 {
    color: #FFFFFF;
    /*font-size: 14px;*/
    /*margin-top: 0px;*/
    /*margin-bottom: 8px;*/
    padding: 0;
    margin: 0;
    font-size: 1em;
    letter-spacing: 0.1em;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#footer .column a {
    text-decoration: none;
    color: #909090;
    -webkit-transition: padding 0.5s ease 0s;
    transition: padding 0.5s ease 0s;
}

#footer .column a:hover {
    color: #fff; /* #57a6b9; */
}

#footer .column ul {
    padding-left: 0;
}

#footer .column ul li {
    padding: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    margin-left: 20px;
}

#footer .column ul li:hover {
    color: #57a6b9;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#success_social a {
    text-decoration: none;
    color: #909090;
    -webkit-transition: padding 0.5s ease 0s;
    transition: padding 0.5s ease 0s;
    font-size: 20px !important;
}

#success_social a:hover {
    color: #000; /* #57a6b9; */
}

#success_social ul li:hover {
    color: #57a6b9;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

#success_social ul li {
    padding: 5px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.social-icon {
    font-size: 24px;
    color: #808080;
    float: left;
    transition: color 0.3s;
}

.social-icon:hover {
    color: #4A90E2;
}


.back-top {
    position: fixed;
    bottom: 15em;
    right: 40px;
    text-decoration: none;
    color: #000;
    /*background-color: rgba(235, 235, 235, 0.80);*/
    font-size: 12px;
    padding: 1em;
    display: none;
}

.back-top:hover {
    background-color: transparent;
    /*background-color: rgba(135, 135, 135, 0.50);*/
    color: #000;
}

#powered {
    clear: both;
    color: #909090;
    background-color: #292929;
    margin-bottom: 30px;
    padding-bottom: 30px;
    overflow: hidden;
}

/* TopNavbar */
#topbar .show-mobile .language {
    margin: 0 5px;
}

#topbar .show-mobile .language .dropdown-menu {
    left: 0;
    right: auto;
}

#topbar .show-mobile .language button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    height: 30px;
    padding: 0 10px;
}

#language {
    line-height: 1.428571429;
    margin: 0 5px;
}

#language button {
    background: #363636;
    border: 1px solid #363636;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #88898e;
    padding: 2px 5px;
    margin-top: -2px;
}

#language button:hover {
    color: #990066;
}

#language img {
    cursor: pointer;
    margin-right: 5px;
}

.welcome {
    margin-top: 0px;
    font-size: 13px;
    font-weight: normal;
}

#topbar {
    color: #88898e;
    font-size: 13px;
    background: #282b2f;
    padding: 10px 0;
}

#topbar ul li a {
    font-size: 12px;
    background: #363636;
    border: 1px solid #363636;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #88898e;
    padding: 3px 6px;
}

#topbar ul li:hover a {
    color: #990066;
}

#topbar ul li:hover a:hover {
    text-decoration: none;
}

#topbar a {
    color: #990066;
}

#topbar a:hover {
    text-decoration: underline;
}

#topbar .show-mobile:before,
#topbar .show-mobile:after {
    content: " ";
    display: table;
}

#topbar .show-mobile:after {
    clear: both;
}

#topbar .show-mobile > div {
    margin: 0;
    padding: 0;
    position: relative;
}

#topbar .show-mobile > div:hover .inner-toggle {
    display: block;
}

#topbar .show-mobile .quickaccess-toggle {
    width: 44px;
    height: 38px;
    background-color: #FFFFFF;
    color: #000;
    line-height: 38px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    margin-left: 1px;
}

#topbar .show-mobile .quickaccess-toggle:hover {
    color: #FFFFFF;
    background-color: #990066;
}

#topbar .show-mobile i {
    padding-top: 10px;
}

#topbar .show-mobile .inner-toggle {
    display: none;
    position: absolute;
    background: #FFFFFF;
    right: 0;
    top: 100%;
    min-width: 260px;
    padding: 10px;
    z-index: 99999;
    border-top: 5px solid #990066;
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

#topbar .show-mobile ul,
#topbar .show-mobile .links {
    float: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

#topbar .show-mobile ul li,
#topbar .show-mobile .links li {
    float: none;
    display: block;
}

#topbar .show-mobile ul a,
#topbar .show-mobile .links a {
    float: none;
    margin: 0;
    padding: 0;
    line-height: 25px;
    background-color: transparent;
    color: #000000;
    border: none;
}

#topbar .show-mobile ul a:hover,
#topbar .show-mobile .links a:hover {
    color: #990066;
}

#topbar .show-mobile #search {
    padding-top: 0;
    padding-bottom: 0;
}

#topbar .show-mobile .cart-top .inner-toggle {
    width: auto;
}

#topbar .show-mobile .cart-top #cart-m .heading {
    display: none;
}

#topbar .show-mobile .cart-top #cart-m .content {
    display: block;
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 10px;
    min-width: 100px;
    background: transparent;
}

#topbar .show-mobile .cart-top #cart-m .content .empty {
    padding: 0;
    margin: 0;
    line-height: normal;
    font-size: 12px;
}

#topbar .show-mobile .currency,
#topbar .show-mobile .language {
    margin: 0 5px;
}

#topbar .show-mobile .currency .dropdown-menu,
#topbar .show-mobile .language .dropdown-menu {
    left: 0;
    right: auto;
}

#topbar .show-mobile .currency button,
#topbar .show-mobile .language button {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    height: 30px;
    padding: 0 10px;
}

.offcanvas-content {
    overflow-y: scroll;
    background: #f3efe0;
}

.offcanvas-pusher {
    left: 0;
    z-index: 99;
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.offcanvas-pusher::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.offcanvas-menu-open .offcanvas-pusher::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.offcanvas-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    visibility: hidden;
    width: 300px;
    height: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.offcanvas-menu::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    content: '';
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.offcanvas-menu-open .offcanvas-menu::after {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.offcanvas-menu ul {
    margin: 0;
    padding: 0;
    lioffcanvas-style: none;
}

.offcanvas-menu h2 {
    margin: 0;
    padding: 1em;
    color: rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    font-weight: 300;
    font-size: 2em;
}

.offcanvas-menu ul.megamenu > li > a {
    display: block;
    padding: 1em 1em 1em 1.2em;
    outline: none;
    -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
    color: #f3efe0;
    text-transform: uppercase;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.offcanvas-menu ul.megamenu > li > a:hover {
    text-decoration: underline;
}

.offcanvas-effect-1.offcanvas-menu {
    visibility: visible;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.offcanvas-effect-1.offcanvas-menu-open .offcanvas-effect-1.offcanvas-menu {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.offcanvas-effect-1.offcanvas-menu::after {
    display: none;
}

.offcanvas-effect-2.offcanvas-menu-open .offcanvas-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.offcanvas-effect-2.offcanvas-menu {
    z-index: 1;
}

.offcanvas-effect-2.offcanvas-menu-open .offcanvas-effect-2.offcanvas-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.offcanvas-effect-3.offcanvas-menu-open .offcanvas-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.offcanvas-effect-3.offcanvas-menu {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    z-index: 1;
}

.offcanvas-effect-3.offcanvas-menu-open .offcanvas-effect-3.offcanvas-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.offcanvas-effect-5.offcanvas-menu-open .offcanvas-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.offcanvas-effect-5.offcanvas-menu {
    z-index: 1;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
}

.offcanvas-effect-5.offcanvas-menu-open .offcanvas-effect-5.offcanvas-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

ul.links {
    position: relative;
    margin: 0;
    padding: 0;
}

ul.links li {
    display: inline-block;
    margin-right: 4px;
    line-height: 1.428571429;
}

ul.links li > a span {
    font-size: 12px;
    margin-right: 10px;
}

ul.list > li {
    padding: 10px 0;
}

ul.list > li ul {
    display: none;
}

ul.list > li ul > li {
    padding: 10px 0 0px 25px;
}

ul.list > li ul > li > a {
    text-decoration: none;
    display: block;
}

ul.list > li > a {
    text-decoration: none;
    /*background: url('../images/icons/arrow-li.png') no-repeat left 4px;*/
    padding-left: 20px;
}

ul.list > li > a:hover,
ul.list > li > a.active {
    background-position: left -46px;
}

ul.list > li a:hover .badge,
ul.list > li a.active .badge {
    background-color: #990066;
}

ul.list > li a.active {
    color: #990066;
}

ul.list > li a.active + ul {
    display: block;
}

#cart {
    position: relative;
    z-index: 1003;
}

#cart .checkout {
    text-align: right;
    clear: both;
}

#cart .empty {
    padding-top: 50px;
    text-align: center;
}

#cart .content {
    background: #FFFFFF;
    clear: both;
    /*display: none;*/
    min-height: 150px;
    min-width: 300px;
    padding: 8px;
    position: absolute;
    right: 0;
    border: 1px solid #7f7f7f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 2px #7f7f7f;
    box-shadow: 0px 2px 2px #7f7f7f;
    z-index: 20;
}

#cart .heading {
    z-index: 1;
}

#cart .heading > span {
    font-size: 14px;
    margin-top: -2px;
    padding: 4px 6px;
    background: #363636;
    border: 1px solid #363636;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    color: #FFFFFF;
}

#cart .heading:hover > span {
    background: #990066;
    border: 1px solid #990066;
}

#cart .heading a {
    text-decoration: none;
}

#cart .heading a span {
    background: url('images/icons/arrow-down.png') 100% 50% no-repeat;
    padding-right: 15px;
}

#cart .heading h4 {
    margin: 0;
    text-transform: uppercase;
    font-size: 17px;
}

#cart.active .content {
    display: block;
}

.mini-cart-total {
    text-align: right;
}

.mini-cart-total td {
    color: #000;
    padding: 4px;
}

.mini-cart-total table {
    border-collapse: collapse;
    display: inline-block;
    margin-bottom: 5px;
}

.mini-cart-info .quantity {
    text-align: right;
}

.mini-cart-info .name small {
    color: #666;
}

.mini-cart-info td {
    color: #000;
    vertical-align: top;
    padding: 10px 5px;
    border-bottom: 1px solid #d5d5d5;
}

.mini-cart-info table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 5px;
}

.mini-cart-info .image {
    width: 1px;
}

.mini-cart-info .image img {
    border: 1px solid #d5d5d5;
    text-align: left;
}

.mini-cart-info .remove {
    text-align: right;
}

.mini-cart-info .remove img {
    cursor: pointer;
}

.mini-cart-info td.total {
    text-align: right;
    font-weight: bold;
}

/* END TopNavbar */

.country-module-list {
    white-space: nowrap;
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: left;
}

.countdown {
    font-size: medium;
    color: darkgreen;
}

.fflag {
    background-image: url(images/flags/flagSprite42.png);
    background-repeat: no-repeat;
    background-size: 100% 49494%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    box-sizing: content-box;
    margin-right: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.fflag-CH {
    box-shadow: none !important
}

.fflag-AL {
    background-position: center 0.2287%
}

.fflag-AD {
    background-position: center 0.4524%
}

.fflag-AM {
    background-position: center 0.6721%
}

.fflag-AT {
    background-position: center 0.8958%
}

.fflag-BY {
    background-position: left 1.1162%
}

.fflag-BE {
    background-position: center 1.3379%
}

.fflag-BA {
    background-position: center 1.5589%
}

.fflag-BG {
    background-position: center 1.7805%
}

.fflag-HR {
    background-position: center 2.0047%
}

.fflag-CY {
    background-position: center 2.2247%
}

.fflag-CZ {
    background-position: left 2.4467%
}

.fflag-DK {
    background-position: center 2.6674%
}

.fflag-EE {
    background-position: center 2.8931%
}

.fflag-FO {
    background-position: center 3.1125%
}

.fflag-FI {
    background-position: center 3.3325%
}

.fflag-FR {
    background-position: center 3.5542%
}

.fflag-DE {
    background-position: center 3.7759%
}

.fflag-GI {
    background-position: center 4.0015%
}

.fflag-GR {
    background-position: left 4.2229%
}

.fflag-HU {
    background-position: center 4.441%
}

.fflag-IS {
    background-position: center 4.66663%
}

.fflag-IE {
    background-position: center 4.8844%
}

.fflag-IM {
    background-position: center 5.1061%
}

.fflag-IT {
    background-position: center 5.3298%
}

.fflag-JE {
    background-position: center 5.5495%
}

.fflag-XK {
    background-position: center 5.7712%
}

.fflag-LV {
    background-position: center 5.994%
}

.fflag-LI {
    background-position: left 6.2156%
}

.fflag-LT {
    background-position: center 6.4363%
}

.fflag-LU {
    background-position: center 6.658%
}

.fflag-MT {
    background-position: left 6.8805%
}

.fflag-MD {
    background-position: center 7.1038%
}

.fflag-MC {
    background-position: center 7.3231%
}

.fflag-ME {
    background-position: center 7.5448%
}

.fflag-NL {
    background-position: center 7.7661%
}

.fflag-MK {
    background-position: center 7.98937%
}

.fflag-NO {
    background-position: center 8.2099%
}

.fflag-PL {
    background-position: center 8.4316%
}

.fflag-PT {
    background-position: center 8.6533%
}

.fflag-RO {
    background-position: center 8.875%
}

.fflag-RU {
    background-position: center 9.0967%
}

.fflag-SM {
    background-position: center 9.32237%
}

.fflag-RS {
    background-position: center 9.5426%
}

.fflag-SK {
    background-position: center 9.7628%
}

.fflag-SI {
    background-position: center 9.9845%
}

.fflag-ES {
    background-position: left 10.2052%
}

.fflag-SE {
    background-position: center 10.4269%
}

.fflag-CH {
    background-position: center 10.6486%
}

.fflag-TR {
    background-position: center 10.8703%
}

.fflag-UA {
    background-position: center 11.0945%
}

.fflag-GB {
    background-position: center 11.3135%
}

.fflag-VA {
    background-position: right 11.5354%
}

.fflag-BE.ff-round,
.fflag-FR.ff-round,
.fflag-IE.ff-round,
.fflag-IT.ff-round,
.fflag-RO.ff-round {
    background-size: 100% 50000%
}

.fflag.ff-sm {
    width: 18px;
    height: 11px
}

.fflag.ff-md {
    width: 27px;
    height: 17px
}

.fflag.ff-lg {
    width: 42px;
    height: 27px
}

.fflag.ff-xl {
    width: 60px;
    height: 37px
}

/* ff-round = circular icons */
.ff-round {
    background-size: 160%;
    background-clip: content-box;
    border-radius: 50%;
    box-shadow: 0 0 5px 0 rgb(85 85 85 / 50%);
}

.ff-round.ff-sm {
    width: 12px;
    height: 12px
}

.ff-round.ff-md {
    width: 18px;
    height: 18px
}

.ff-round.ff-lg {
    width: 24px;
    height: 24px
}

.ff-round.ff-xl {
    width: 32px;
    height: 32px
}

.flags {
    background: url(images/flags/flags-sprite.gif) no-repeat top left;
    padding-left: 25px;
    margin-bottom: 5px;
    padding-bottom: 1px;
    font-weight: normal;
    line-height: normal;
}

.sprite-flag_at {
    background-position: 0 0;
    width: 20px;
    height: 13px;
}

.sprite-flag_be {
    background-position: 0 -63px;
    width: 20px;
    height: 13px;
}

.sprite-flag_bg {
    background-position: 0 -126px;
    width: 18px;
    height: 11px;
}

.sprite-flag_cy {
    background-position: 0 -187px;
    width: 18px;
    height: 11px;
}

.sprite-flag_cz {
    background-position: 0 -248px;
    width: 18px;
    height: 12px;
}

.sprite-flag_de {
    background-position: 0 -310px;
    width: 20px;
    height: 12px;
}

.sprite-flag_dk {
    background-position: 0 -372px;
    width: 20px;
    height: 15px;
}

.sprite-flag_ee {
    background-position: 0 -437px;
    width: 18px;
    height: 11px;
}

.sprite-flag_es {
    background-position: 0 -498px;
    width: 20px;
    height: 13px;
}

.sprite-flag_eu {
    background-position: 0 -561px;
    width: 23px;
    height: 15px;
}

.sprite-flag_fi {
    background-position: 0 -626px;
    width: 18px;
    height: 11px;
}

.sprite-flag_fr {
    background-position: 0 -687px;
    width: 18px;
    height: 12px;
}

.sprite-flag_gr {
    background-position: 0 -749px;
    width: 20px;
    height: 13px;
}

.sprite-flag_hu {
    background-position: 0 -812px;
    width: 18px;
    height: 9px;
}

.sprite-flag_ie {
    background-position: 0 -871px;
    width: 20px;
    height: 10px;
}

.sprite-flag_it {
    background-position: 0 -931px;
    width: 20px;
    height: 13px;
}

.sprite-flag_lt {
    background-position: 0 -994px;
    width: 20px;
    height: 12px;
}

.sprite-flag_lu {
    background-position: 0 -1056px;
    width: 20px;
    height: 12px;
}

.sprite-flag_lv {
    background-position: 0 -1118px;
    width: 20px;
    height: 10px;
}

.sprite-flag_mt {
    background-position: 0 -1178px;
    width: 18px;
    height: 12px;
}

.sprite-flag_nl {
    background-position: 0 -1240px;
    width: 18px;
    height: 12px;
}

.sprite-flag_pl {
    background-position: 0 -1302px;
    width: 18px;
    height: 11px;
}

.sprite-flag_pt {
    background-position: 0 -1363px;
    width: 20px;
    height: 13px;
}

.sprite-flag_ro {
    background-position: 0 -1426px;
    width: 20px;
    height: 13px;
}

.sprite-flag_se {
    background-position: 0 -1489px;
    width: 20px;
    height: 13px;
}

.sprite-flag_si {
    background-position: 0 -1552px;
    width: 18px;
    height: 9px;
}

.sprite-flag_sk {
    background-position: 0 -1611px;
    width: 18px;
    height: 12px;
}

.sprite-flag_uk {
    background-position: 0 -1673px;
    width: 20px;
    height: 10px;
}

.cart_top_left {
    vertical-align: middle;
    background-color: gainsboro;
    background-repeat: no-repeat;
    padding: 6px 0 0 12px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
}

.cart_top_right {
    vertical-align: middle;
    background-color: gainsboro;
    background-repeat: no-repeat;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
}

.cart_bottom_left {
    vertical-align: middle;
    background-color: gainsboro;
    height: 12px;
    background-repeat: no-repeat;
    width: 202px;
    font-size: 4px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

.cart_bottom_right {
    vertical-align: middle;
    background-color: gainsboro;
    height: 12px;
    background-repeat: no-repeat;
    width: 13px;
    font-size: 4px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.big_search_box {
    width: 90%;
    height: 22px;
    font-size: 14px;
    background: rgb(247, 247, 247) url('images/lupe.png') left center no-repeat;
    display: inline-block;
    padding: 2px;
    padding-left: 26px;
    border: 1px solid #bebebe;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

A {
    color: #003399;
    text-decoration: none;
}

A:hover {
    color: #990066;
    text-decoration: none;
}

A.categories {
    color: #003399;
    padding: 2px;
    text-decoration: none;
}

A.categories:hover {
    color: #AABBDD;
    padding: 2px;
    text-decoration: underline;
}

ol {
    /* height: 28px; */
    padding: 0;
    margin: 0;
}

/* GOS-73 BC-G05: Legacy-Sprite (store-header-footer-sprite.png) komplett entfernt.
   Die drei Icons kommen jetzt aus Font Awesome 6.5.2 (global geladen in
   includes/header_scripts.php:18) via ::before-Pseudo-Elemente:
     - fa-home (\f015)         Home-Icon in der Breadcrumb-Liste
     - fa-angle-right (\f105)  Separator zwischen <li>-Elementen
     - fa-angle-left (\f104)   Icon im Back-Link
   Hardcoded-Farben (#003399 Link, #AABBDD Hover, gainsboro Separator) ersetzt durch
   Brand-Tokens: var(--color-primary) / var(--color-primary-dark) / var(--color-border)
   bzw. var(--color-text-muted) fuer Separator-Icons. */
.breadcrumbs {
    /* GOS-73 BC-G06: float-Layout durch Flexbox ersetzt. flex-wrap: wrap erlaubt
       sauberes Umbrechen langer Breadcrumb-Pfade auf schmalen Viewports. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    line-height: 28px;
    font-size: 15px;
}

.breadcrumbs li {
    /* GOS-73 BC-G06: float entfernt, <li> ist jetzt ein Flex-Item des <ol>.
       Das Separator-::before wird als Flex-Item gerendert und ueber `gap`
       symmetrisch umgeben (10px links vom Icon via margin-left am li, 10px
       rechts vom Icon via gap zum Span/A). Ersetzt die alte absolute
       Positionierung mit ungleichen Abstaenden. */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-left: 10px;
}

.breadcrumbs li::before {
    content: "\f105";                   /* fa-angle-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    color: var(--color-text-muted);
    display: inline-block;
}

.breadcrumbs li:first-child,
.breadcrumbs li:first-child + li {
    /* Home hat kein Chevron davor, und das zweite Element auch nicht
       (visuell schliesst das Home-Icon direkt an die erste Kategorie an). */
    margin-left: 0;
}

.breadcrumbs li:first-child::before,
.breadcrumbs li:first-child + li::before {
    content: none;
}

.breadcrumbs li:first-child {
    gap: 0;
    margin-right: 8px;
}

.breadcrumbs li span, .breadcrumbs li a {
    display: block;
    padding: 0;
    color: var(--color-primary);
}

/* GOS-73: Aktuelles Element (letztes <li>) visuell ausgegraut — kein Link,
   kein Primary-Farbton. Konsistent mit den UI-Mocks (z.B. product-info.html
   hatte `.breadcrumb-item.active { color: var(--color-text-muted); }`). */
.breadcrumbs li[aria-current="page"] > span,
.breadcrumbs li[aria-current="page"] > span[itemprop="name"] {
    color: var(--color-text-muted);
}

.breadcrumbs li a.home {
    /* GOS-73 BC-G05: Home-Icon aus Font Awesome 6.5.2 (bereits global geladen in
       header_scripts.php). Der span itemprop="name" bleibt fuer Screenreader und
       Schema.org-Microdata erhalten, wird aber visuell via height:0/overflow:hidden
       versteckt. Das FA-Icon wird absolut positioniert per ::before-Pseudo. */
    position: relative;
    display: block;
    height: 0;
    overflow: hidden;
    padding: 28px 0 0;
    width: 28px;
}

.breadcrumbs li a.home::before {
    content: "\f015";                  /* fa-home (solid) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    color: var(--color-primary);
    position: absolute;
    top: 5px;
    left: 5px;
}

.breadcrumbs li a.home:hover::before {
    color: var(--color-primary-dark);
}

/* GOS-73: Breadcrumb-Bar als voll-breiter, transparenter Slot direkt unterm
   Header. Kein eigener Hintergrund und kein Border-Bottom — die Bar blendet
   optisch mit dem darunterliegenden Page-Background. Ersetzt die Legacy-
   Konstruktion mit .header-breadcrumb-wrap + float-start.

   Innerer Container ist `container-fluid header_wrap` (max-width: 1600px,
   zentriert) — identisch zur Kategorie-Navbar darueber, damit die linke
   Einrueckung matched. Der margin-bottom sorgt fuer Abstand zum Main-Content
   darunter; Seiten mit eigenem top-padding collapsen die Margins. */
.breadcrumb-bar > .container-fluid {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* GOS-73 BC-G02: <nav aria-label="Breadcrumb"> als Landmark-Wrapper.
   GOS-73 BC-G06: Flex-Container fuer Back-Link + BreadcrumbList. Flex containt
   die Kinder automatisch. align-items: center sorgt fuer vertikale Zentrierung
   von Back-Link und Breadcrumb-Liste auf einer Linie. */
.breadcrumb-bar nav[aria-label="Breadcrumb"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* GOS-73 BC-B07: Back-Link sitzt jetzt ausserhalb der BreadcrumbList, braucht eigene Layout-Regel
   GOS-73 BC-G06: float entfernt — als Flex-Item des <nav> bekommt .breadcrumb-back die
   Position automatisch. */
.breadcrumb-back {
    display: flex;
    align-items: center;
    line-height: 28px;
    font-size: 15px;
    margin-right: 6px;
}

/* GOS-73 BC-G05: Chevron-Left (fa-angle-left) aus Font Awesome, Farben aus Tokens */
.breadcrumb-back .back {
    display: inline-block;
    width: 10px;
    margin-right: 4px;
    vertical-align: middle;
}

.breadcrumb-back .back::before {
    content: "\f104";                   /* fa-angle-left */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* GOS-73 BC-G09: Fallback-Hinweis (ORDER_HINT) ist jetzt ein eigener semantischer
   Container statt einer .navbar-text-Utility. Wird nur angezeigt, wenn kein
   Breadcrumb vorhanden ist (nur Home-Eintrag im trail). */
.breadcrumb-fallback-notice {
    display: inline-block;
    line-height: 28px;
    font-size: 15px;
    color: var(--color-text-muted);
}

/* GOS-73 BC-G07: Mobile-Truncation mit text-overflow: ellipsis.
   Auf schmalen Viewports (<768px, Bootstrap-sm-Breakpoint) duerfen Breadcrumb-Items
   unter ihre Inhaltsbreite schrumpfen (min-width: 0 am Flex-Item) und der Text wird
   mit einem Ellipsis gekuerzt, wenn er den Container-Rand erreicht. Dadurch ueberlaeuft
   auch ein einzelner langer Produktname wie "Phalaenopsis gibbosa var. alba x multiflora"
   nicht mehr den viewport.

   Die <ol class="breadcrumbs"> ist bereits Flex-Container (BC-G06), dessen Kinder
   (die <li>) duerfen nun zusaetzlich schrumpfen. Der eigentliche Ellipsis-Schnitt
   passiert am <a>/<span> innerhalb des <li>, weil dort der Text sitzt.

   Home-Icon und Separator-::before sind nicht betroffen, weil .home eine fixe width
   hat und ::before absolut positioniert ist. */
@media (max-width: 767.98px) {
    .breadcrumbs {
        width: 100%;
        min-width: 0;
    }

    .breadcrumbs li {
        min-width: 0;
        max-width: 100%;
    }

    .breadcrumbs li > a,
    .breadcrumbs li > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Auch den inneren <span itemprop="name"> innerhalb der <a>-Elemente kuerzen,
       weil er durch die bestehende "display: block"-Regel zu einem eigenen Block wird. */
    .breadcrumbs li > a > span[itemprop="name"] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        max-width: 100%;
    }

    /* Home-Icon bleibt seine fixe Breite (28px) — die generische Mobile-Regel oben
       wird durch die spezifischere .home-Regel nicht ueberschrieben; zur Sicherheit
       hier explizit gemacht. */
    .breadcrumbs li a.home {
        max-width: 28px;
        min-width: 28px;
    }
}

.breadcrumb-back a {
    display: inline;
    color: var(--color-primary);
    padding: 0 2px;
}

.breadcrumb-back a:hover {
    color: var(--color-primary-dark);
}

.breadcrumb-back .seperator {
    color: var(--color-border);
    margin: 0 2px;
}

.breadcrumbs li p.home {
}

.breadcrumbs li a:hover {
    color: var(--color-primary-dark);
}

FORM {
    display: inline;
}

TR.header {
    background: #ffffff;
}

TR.headerNavigation {
    background: #00336a; /*#981B1E;  background: #bbc3d3;*/
    font-size: 12px;
}

TD.headerNavigation {
    font-size: 10px;
    background: #00336a; /*#981B1E;   background: #bbc3d3;*/
    color: #990066;
    font-weight: normal;
}

A.headerNavigation {

    font-size: 12px;
}

A.headerNavigation:hover {
    color: #ffffff;
}

TR.headerError {
    background: #ff0000;
}

TD.headerError {
    font-size: 12px;
    background: #ff0000;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

TR.headerInfo {
    background: #00ff00;
}

TD.headerInfo {
    font-size: 12px;
    background: green;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

TR.footer {
    background: #00336a; /*#981B1E;  background: #bbc3d3;*/
}

TD.footer {
    font-size: 10px;
    background: #00336a; /*#981B1E; background: #bbc3d3;*/
    color: #ffffff;
    font-weight: bold;
}

.infoBox {
}

.infoBoxContainer {
    border: 1px solid #D8D8D8;
    margin: 5px;
}

.infoBoxContents {
    font-size: 10px;
}

/*Box f�r Warenkorb*/
.infoBoxShoppingCartContentsLeftRight {
    background-color: #D7E9F7;
    border: 0px;
    border-bottom: 0px;
    border-style: solid;
    border-color: #ccc;
}

.infoBoxContentsLeftRight {
    /*BACKGROUND: url(images/infobox/infobox-bg.png) no-repeat;*/
    border: 0px;
    border-bottom: 0px;
    border-style: solid;
    border-color: #ccc;
}

.infoBoxNotice {
    background: #FF8E90;
}

.infoBoxNoticeContents {
    background: #FFE6E6;
    font-size: 10px;
}

.checkoutConfirmationTable {
    background: #E9F0FC;
}

.infoBoxHeadingTopLeft {
    width: 7px;
    background-image: url('images/infobox/dropshadow.gif');
    background-repeat: no-repeat;
    background-position: top left;
    padding-left: 7px;
}

.infoBoxHeadingTop {
    height: 30px;
    background-image: url('images/infobox/dropshadow_top.gif');
    background-repeat: repeat-x;
    color: #990066;
    font-size: 12px;
    font-weight: normal;
    padding: 5px;
}

.infoBoxHeadingTopRight {
    width: 7px;
    background-image: url('images/infobox/dropshadow.gif');
    background-repeat: no-repeat;
    background-position: top right;
    padding-right: 7px;
}

.infoBoxHeadingLeft {
    background-image: url('images/infobox/dropshadow_side.gif');
    background-repeat: repeat-y;
    padding-left: 7px;
}

.infoBoxHeadingRight {
    background-image: url('images/infobox/dropshadow_side.gif');
    background-position: right;
    padding-left: 7px;
    background-repeat: repeat-y;
}

.infoBoxHeadingBottomLeft {
    width: 7px;
    height: 7px;
    background-image: url('images/infobox/dropshadow.gif');
    background-position: bottom left;
    background-repeat: no-repeat;
}

.infoBoxHeadingBottom {
    background-image: url('images/infobox/dropshadow_bottom.gif');
}

.infoBoxHeadingBottomRight {
    width: 7px;
    background-image: url('images/infobox/dropshadow.gif');
    background-position: bottom right;
}

TD.infoBoxHeading {
    font-size: 12px;
    font-weight: normal;
    /*background: #981B1E;    background: #bbc3d3;*/
    color: #990066;
    /*background-image: url(images/infobox/box_background.gif);*/
    background-image: url('images/infobox/dropshadow_top.gif');
    background-repeat: repeat-x;
    background-postion: 0px 0px;
}

TD.infoBox, SPAN.infoBox {
    font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
    background: #fff; /*#f9f9f9*/
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
    background: #fff; /*#f8f8f9;*/
}

TABLE.productListing {
    border: 0px;
    border-style: solid;
    border-color: #FEFEFE; /*#981B1E; /* border-color: #b6b7cb; */
    border-spacing: 1px;
    background-color: #fff;
}

.productListing-heading {
    height: 18px;
    font-size: 12px;
    color: #990066;
    font-weight: bold;
    background-image: url('images/infobox/dropshadow_top.gif');
    background-repeat: repeat-x;
    padding-right: 5px;
    padding-left: 5px;
}

TD.productListing-data {
    font-size: 12px;
}

DIV.productListing-data {
    border: red solid 1px;
    font-size: 12px;
}

A.pageResults {
    color: #003399;
    text-decoration: none;
    font-weight: bold;
}

A.pageResults:hover {
    color: #AABBDD;
    text-decoration: underline;
    font-weight: bold;
}

TD.pageHeading, DIV.pageHeading {
    font-size: 20px;
    font-weight: normal;
    color: #990066;
}

TR.subBar {
    background: #f4f7fd;
}

TD.subBar {
    font-size: 10px;
    color: #000000;
}

TD.main, P.main {
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
}

TD.smallText, SPAN.smallText, P.smallText, DIV.smallText * {
    font-size: 0.8rem;
}

.pdText {
    font-size: 16px;
}

TD.pdText {
    padding-left: 10px;
}

TD.pdSize {

}

.pdImage {
    margin: 5px;
    width: 50px;
    height: auto;
}

TD.additionalImages {
    padding: 15px;
}

TD.accountCategory {
    font-size: 13px;
    color: #aabbdd;
}

TD.fieldKey {
    font-size: 12px;
    font-weight: bold;
}

TD.fieldValue {
    font-size: 12px;
}

TD.tableHeading {
    font-size: 12px;
    font-weight: bold;
}

SPAN.newItemInCart {
    font-size: 10px;
    color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
    /*font-size: 11px;*/
}

TEXTAREA {
    width: 100%;
    font-size: 11px;
}

SPAN.greetUser {
    font-size: 12px;
    color: #f0a480;
    font-weight: bold;
}

TABLE.formArea {
    background: #f1f9fe;
    border-color: #7b9ebd;
    border-style: solid;
    border-width: 1px;
}

TD.formAreaTitle {
    font-size: 12px;
    font-weight: bold;
}

SPAN.markProductOutOfStock {
    font-size: 12px;
    color: #c76170;
    font-weight: bold;
}

SPAN.price {
    display: inline-block;
    color: #990066;
    font-weight: bold;
    padding: 10px;
}

S.price {
    color: #990066;
    font-weight: bold;
}

DEL.productOriginalPrice {
    color: #767676;
    padding: 5px;
    font-size: small;
}

SPAN.productSpecialPrice {
    color: #990066; /*#ff0000;*/
    padding: 5px;
    font-weight: bold;
}

SPAN.errorText {
    color: #ff0000;
}

.seperator, .breadcrumbs li span.seperator {
    display: inline;
    color: gainsboro;
    line-height: 28px;
    font-size: 12px;
}

.information_child {
    /*padding:5px;*/
    display: inline-block;
}

.links {
    font-size: 12px;
    color: #003399;
    text-decoration: none;
}

.heading_module_hr {
    background-color: #eae7e7;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0px;
}

.heading_hr {
    background-color: #eae7e7;
    height: 1px;
    margin-top: 3px;
    margin-bottom: 0px;
    border: 0px;
}

.rand {
    border: 1px double #000000;
}

.product_teaser {
    color: #767676;
    padding-top: 0;
    margin-top: 3px;
    max-height: 5.9em;
    overflow: hidden;
    max-width: 90%;
    margin-bottom: 0;
    padding-bottom: 0;
    font-weight: normal;
    font-size: small;
}

.product_review {
    white-space: nowrap;
}

.product_availability {
    color: green;
    font-size: 12px;
    margin-top: 4px;
    padding-right: 10px;
    white-space: nowrap;
}

/* labels on Products */
.product-flags .product-flag {
    float: left;
    clear: left;
    display: block;
    padding: 1.5px 5px;
    border-radius: 3px;
    margin-top: 3px;
    margin-left: 3px;
    min-width: 65px;
    min-height: 20px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.product-flags {
    position: absolute;
    top: 3px;
    left: 3px;
    /*width: 96%;*/
    z-index: 5;
    padding: 0px;
    opacity: 0.85;
}

.product-flags-container {
    position: relative;
    margin: 0px;
    width: fit-content;
}

li.product-flag.discount {
    display: none;
}

li.product-flag {
    background: #cd00eb;
}

li.product-flag {
    z-index: 0 !important;
}

.product-flags .product-flag.online-only {
    border: 1px solid #000;
    background: #000;
    color: #fff;
}

.product-flags .product-flag.on-sale {
    background: red;
    color: #fff
}

.product-flags .product-flag.new, .product-flags .product-flag.pack {
    border: 1px solid #3e8f3e;
    background: #3e8f3e;
    color: #fff
}

.product-flags .product-flag.discount-percentage, .product-discount .discount.discount-percentage, .modal-body .discount-percentage, .has-discount .discount {
    background: red;
    color: #fff;
    padding: 2px 15px !important
}

/* EOF labels on Products */

.expires-today {
    background-color: red;
    width: 120px;
    color: yellow;
}

.product_info_name {
    margin-bottom: 5px;
    margin-top: 3px;
    font-size: 30px;
    font-weight: normal;
    color: #990066;
}
.synonyms-section {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: #fff;
    border: 1px solid var(--color-border, #dde3e9);
    border-radius: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.synonyms-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    white-space: nowrap;
    padding-top: 0.15rem;
}
.synonym-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.synonym-chip {
    font-size: 0.75rem;
    background: var(--color-bg-subtle, #f8f9fb);
    border: 1px solid var(--color-border, #dde3e9);
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.2s ease;
}
.synonym-chip:hover {
    border-color: var(--color-primary, #990066);
    color: var(--color-primary, #990066);
    background: #f7e6f1;
}

.moduleRow {
}

.moduleRowOver {
    background-color: #D7E9F7;
    cursor: pointer;
}

.moduleRowSelected {
    background-color: #E9F0FC;
}

.checkoutBarFrom, .checkoutBarTo {
    font-size: 12px;
    color: #8c8c8c;
}

.checkoutBarCurrent {
    font-size: 12px;
    color: #000000;
}

.messageBox {
    font-size: 10px;
}

.messageStackError, .messageStackWarning {
    font-size: 10px;
    background-color: #ffb3b5;
}

.messageStackSuccess {
    font-size: 10px;
    background-color: #99ff00;
}

.inputRequirement {
    color: #ff0000;
}

/* -- Inline form validation (create_account) -- */
.field-error-msg {
    display: block;
    width: 100%;
    color: #ff0000;
    font-size: 0.8rem;
    margin-top: 3px;
    padding-left: calc(25% + 20px);
}
.field-error-msg.email-exists { color: #e67e22; }
.field-error-msg.email-exists a { color: #e67e22; text-decoration: underline; }

.input-group.has-error .form-control,
.input-group.has-error select { border: 1px solid #ff0000 !important; }
.input-group.has-error .input-group-text { border-color: #ff0000 !important; color: #ff0000; }

.input-group .field-valid-icon {
    color: #0abb87;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    border: 1px solid #0abb87;
    background: #fff;
    border-left: 0;
    border-radius: 0 0.25rem 0.25rem 0;
}
.input-group.has-success .form-control,
.input-group.has-success select { border: 1px solid #0abb87 !important; }
.input-group.has-success .input-group-text { border-color: #0abb87 !important; }

/* -- Account section shared styles -- */
.acct-heading {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.acct-card {
    margin-bottom: 1rem;
}
.acct-card .card-header {
    background-color: transparent;
}
.acct-card .card-header h4 {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #990066;
}

/* Account form validation */
.acct-feedback i { width: 1em; }
.acct-feedback.valid i:before { content: "\f00c"; color: #0abb87; }
.acct-feedback.invalid i:before { content: "\f00d"; color: #F64E60; }
.acct-validate.is-invalid { border-color: #F64E60 !important; }
.acct-validate.is-valid { border-color: #0abb87 !important; }
.acct-error-msg {
    font-size: 0.78rem;
    color: #F64E60;
    margin-top: 2px;
}

/* Account dashboard navigation items */
.acct-nav-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.acct-nav-item:hover {
    color: #990066;
    text-decoration: none;
}
.acct-nav-item i {
    width: 1.5rem;
    margin-right: 0.8rem;
    color: #990066;
    flex-shrink: 0;
    line-height: 1;
    font-size: 1.5rem;
}

/* Account button bar (back/continue) */
.acct-btn-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

/* Account toggle switch (newsletter/notification) */
.acct-toggle .form-check-input {
    width: 3em;
    height: 1.5em;
    cursor: pointer;
}

.acct-toggle .form-check-input:checked {
    background-color: #990066;
    border-color: #990066;
}

/* Password visibility toggle */
.acct-pw-toggle {
    cursor: pointer;
}
.acct-pw-toggle:hover {
    color: #990066;
}

/* Order row hover */
.acct-order-row {
    cursor: pointer;
    transition: background-color 0.15s;
}
.acct-order-row:hover {
    background-color: #f0f4ff;
}

/* -- Shopping cart styles -- */
/* Cart item layout — Desktop: 4-column grid, Mobile: image left + content right */
.cart-item-layout {
    display: grid;
    grid-template-columns: 120px 1fr auto auto;
    gap: 0.75rem;
    align-items: start;
}
.cart-product-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 4px;
}
.cart-item-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}
.cart-teaser {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-item-price {
    text-align: right;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .cart-item-layout {
        grid-template-columns: 100px 1fr;
        gap: 0.25rem 0.5rem;
    }
    .cart-product-img {
        width: 100px;
        height: 100px;
    }
    .cart-item-img {
        grid-row: 1 / 4;
        align-self: start;
    }
    .cart-item-info {
        grid-column: 2;
        grid-row: 1;
    }
    .cart-item-qty {
        grid-column: 2;
        grid-row: 2;
    }
    .cart-item-price {
        grid-column: 2;
        grid-row: 3;
        text-align: left;
    }
    .cart-item-price .price {
        font-weight: 600;
    }
    .cart-item-price .product_availability {
        display: inline;
        margin-bottom: 0;
        margin-left: 0.5rem;
        font-size: 0.8rem;
    }
    .cart-item-name {
        font-size: 0.9rem;
    }
    .cart-teaser {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }
}
.cart-qty-col {
    padding-top: 10px;
    white-space: nowrap;
}
.cart-qty-input {
    width: 52px;
    text-align: center;
    -moz-appearance: textfield;
}
.cart-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cart-stepper-btn,
.cart-remove-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    .cart-qty-input {
        width: 56px;
        min-height: 44px;
        font-size: 1rem;
    }
    .cart-stepper-btn,
    .cart-remove-btn {
        min-width: 44px;
        min-height: 44px;
    }
}
/* .cart-price-col removed — replaced by .cart-item-price grid layout */
/* Cart footer buttons — desktop: side by side, mobile: stacked */
.cart-footer-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
@media (max-width: 767.98px) {
    .cart-footer-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    .cart-checkout-btn {
        width: 100%;
        text-align: center;
    }
    .cart-continue-btn {
        width: 100%;
        text-align: center;
    }
}

.cart-payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cart-payment-icons img {
    border-radius: 3px;
}

.cart-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #990066;
    padding: 0.5rem 0;
}

ul.categories {
    list-style-type: none;
    list-style-position: outside;
    line-height: 16px;
    margin: 0;
    padding: 0;
}

#mainnavi {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

#mainnavi li {
    border-right: 1px solid gainsboro;
    display: inline;
}

#mainnavi li a {
    padding: 0 5px;
}

h1 {
    font-size: 2em !important;;
    font-weight: normal;
    padding-bottom: 0;
    padding-top: 0;
    color: #990066;
}

h2 {
    font-size: 1.5em !important;;
    color: #990066;
}

h3 {
    font-size: 1.17em !important;;
    color: #990066;
}

h4 {
    font-size: 1em !important;;
    color: #990066;
}

h5 {
    font-size: 0.83em !important;;
}

h6 {
    font-size: 0.75em !important;;
}

input[type="submit"] {
    font-family: FontAwesome;
}

/* experimental for menu*/

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-image: linear-gradient(to bottom, #303030 0%, #000 100%) !important;
}

.dropdown-submenu {
    position: relative;
}

/*.dropdown-submenu>.dropdown-menu {*/
/*top:0;*/
/*left:100%;*/
/*margin-top:-6px;*/
/*margin-left:-1px;*/
/*-webkit-border-radius:0 6px 6px 6px;*/
/*-moz-border-radius:0 6px 6px 6px;*/
/*border-radius:0 6px 6px 6px;*/
/*}*/
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

#categories-collapse .dropdown-submenu:hover > .dropdown-menu {
    display: none;
}

#categories-collapse .dropdown-menu {
    border: none;
    /*margin-left: 1.5rem;*/
}

/* right icon for submenu */
/*.dropdown-submenu>a:after {*/
/*display:block;*/
/*content:" ";*/
/*float:right;*/
/*width:0;*/
/*height:0;*/
/*border-color:transparent;*/
/*border-style:solid;*/
/*border-width:5px 0 5px 5px;*/
/*border-left-color:#cccccc;*/
/*margin-top:5px;*/
/*margin-right:-10px;*/
/*}*/
/*.dropdown-submenu:hover>a:after {*/
/*border-left-color:#ffffff;*/
/*}*/
.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

/* for the listings module rework ------------------------------------------- */

.productHolder {
    border: 1px solid #ddd !important;
    /*padding-top: 20px;*/
    margin: 0 !important;
    padding-bottom: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgb(57 97 120 / 10%) !important;
    -webkit-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
    transition-delay: 0s;
    max-width: 300px;
    overflow: hidden;
    /* GOS-103 PERF-02: Flex-Column ersetzt das alte equalHeight-jQuery-Plugin.
       height:100% lässt die Card ihre Bootstrap-Spalte vollständig ausfüllen —
       .row (auf #products) stretched die Spalten via Flex-Stretch auf gleiche
       Höhe pro Wrap-Reihe; ohne 100%-Höhe würde die kürzere Card-Inhalt-Höhe
       nicht bis ans Spalten-Bottom reichen. .equal-height-btn rutscht durch
       margin-top:auto ans Card-Bottom.
       GOS-103 SEO-02: position:relative als Anker für Bootstrap-.stretched-link
       — der Title-Anchor mit .stretched-link cover-t die ganze Card via
       ::after{inset:0; z-index:1}, sodass die Card insgesamt klickbar bleibt
       OHNE einen zweiten Anchor auf das Bild zu setzen (Crawl-Budget gespart). */
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    /*transition-property: box-shadow;*/
    /*transition-duration: 0.4s;*/
    /*transition-timing-function: ease;*/
}

.productHolder:hover {
    border: 1px solid #eee; /* #428bca; */
}

.productHolder.thumbnail {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #fff;
}

.productHolder h2 {
    /* GOS-103 SEO-04: Bis SEO-04 enthielt .productHolder nur <h3>, sodass diese
       Element-spezifische Regel ungenutzt war. Mit dem Wechsel auf <h2> auf
       Listing-Pages greift sie jetzt — Werte auf .item-heading-Niveau (1.2em,
       kein extra padding) angleichen, sonst würden Produktnamen aus der Card
       gedrückt. .item-heading bleibt der primäre Träger der Title-Optik. */
    font-size: 1.2em;
}

.equal-height {
    margin: 0 auto;
    /*text-align: center;*/
    /*content-visibility: auto;*/
    /*contain-intrinsic-size: 570px;*/
    /* GOS-103 PERF-02: equalHeight-jQuery-Plugin entfernt — ehemalige
       height:auto/min-height:0-Overrides waren Plugin-Schutz und sind nun obsolet.
       Ohne sie kann .productHolder { height:100% } seine Spalte korrekt füllen. */
}

/* GOS-103 PERF-04: tep_image()-Default-Styles aus Inline-Style → Klasse ausgelagert.
   Pro <img> sparen wir ~80 Bytes redundantes Inline-CSS und der Browser kann diese
   Regeln cachen statt sie pro Bild neu zu parsen. */
.tep-image {
    max-width: 100%;
    max-height: 100%;
}
.tep-image--square {
    aspect-ratio: 1/1;
    object-fit: cover;
}

#products .thumbnail {
    margin: 0 auto !important;
}

#products.list-group {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

#products .item.list-group-item {
    float: none;
    width: 100%;
    margin-bottom: 30px;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 1rem;
    border: 0;
}

#products .item.list-group-item .productHolder {
    /* GOS-103 PERF-02: List-Mode überschreibt die Default-Flex-Column-Card auf row.
       Sub-Spalten (Image | Desc | Btn) liegen nebeneinander, Höhen-Stretch via
       Flex-Default align-items:stretch — kein equalHeight-Plugin mehr nötig. */
    flex-direction: row;
}

#products .item.list-group-item .equal-height-btn {
    /* List-Mode: Btn-Spalte ist eigene Flex-Column innerhalb der Row,
       margin-top:auto-Override neutralisieren — sonst rutscht der gesamte
       Btn-Block beim Stretchen nach unten. */
    margin-top: 0;
}

.equal-height-images {
    height: auto;
    padding-left: 0;
}

.equal-height-desc {
    margin-top: 20px;
    height: auto;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
}

.equal-height-desc .product_teaser {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
}

.equal-height-btn {
    /*height: 131px;*/
    /* GOS-103 PERF-02: margin-top:auto drückt Preis/CTA-Block in der Flex-Column-Card
       ans Bottom — ersetzt das alte display:table-cell + vertical-align:bottom-Pattern,
       das ohne Tabellen-Wrapper sowieso nur noch fragmentarisch wirkte. */
    margin-top: auto;
}

/* GOS-103 A11Y-07: Cart-Button auf 44 × 44 px Touch-Target erzwingen
   (Style-Guide §9.5). btn-sm bleibt als visuelle Größe, min-height/-width
   garantieren den Klick-Bereich; inline-flex zentriert Icon+Text wieder.
   GOS-103 SEO-02: position:relative + z-index:2 hebt den Cart-Button über
   das .stretched-link::after-Overlay (z-index:1), sodass der Add-to-Cart-Klick
   das Card-weite Stretched-Link-Overlay nicht durchschlägt. */
.equal-height-btn .btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.equal-height-btn .price {
    padding-left: 0;
    font-size: 1.2rem;
}

.equal-height-btn .productOriginalPrice {
    padding-left: 0;
    font-size: 1.1rem;
}

.item.list-group-item {
    float: none;
    width: 100%;
    background-color: transparent;
    border: none;
}

.item.list-group-item .productHolder {
    max-width: none;
    padding-bottom: 0;
}

.item-heading {
    font-size: 1.2em;
}

.item.list-group-item .list-group-item-heading {
    text-align: left;
    font-size: 1.1em;
}

.item.grid-group-item .grid-group-item-heading {
    text-align: left;
    font-size: 1.1em;
}

.item.list-group-item .equal-height-desc {
    text-align: left;
}

.item.list-group-item .equal-height-btn {
    text-align: left;
    padding-left: 0;
}

.item.grid-group-item .equal-height-btn {
    text-align: left;
}

.grid-group-item {
    margin-bottom: 20px;
}

.grid-group-item .list-group-item-text {
    display: none;
}

p.lead del {
    font-size: 0.5em;
}

/* // for the listings module rework ------------------------------------------- */

/* Glider Box */
.glider-dot:hover,
.glider-dot:focus,
.glider-dot.active {
    background: #990066 !important;
}

.glider-next:focus {
    color: #990066 !important;
}

.glider-next {
    right: -15px !important;
}

.glider-prev {
    left: -15px !important;
}

/* FIX for bootstrap to small margin when scaling the radio / checkboxes, default is -20px */
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    margin-left: -23px !important;
}

/* PRODUCT INFO ALIGNMENTS */

.product-image-wrap {
    background: #fff;
    border: 1px solid var(--color-border, #dde3e9);
    border-radius: var(--radius-card, 0.75rem);
    box-shadow: var(--shadow-card, 0 2px 10px rgba(57,97,120,.10));
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

.product-info-image-group {
    text-align: center;
}
.product-image-notice {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.6rem;
    line-height: 1.4;
}

/* Pflegehinweise (GOS-66) */
.care-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #dde3e9);
}
.care-section__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6c757d;
    margin-bottom: 0.75rem;
}
.plant-size-value {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
}
.care-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.care-icon-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--color-border, #dde3e9);
    border-radius: 0.5rem;
}
.care-icon-item i {
    font-size: 1rem;
    color: #3a8a3a;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.care-icon-item__text { flex: 1; }
.care-icon-item__key {
    font-size: 0.75rem;
    color: #6c757d;
    display: block;
    line-height: 1.2;
}
.care-icon-item__val {
    font-size: 0.875rem;
    font-weight: 500;
    color: #262626;
    display: block;
    line-height: 1.3;
}

.product-thumbs {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-border, #dde3e9);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--color-bg-subtle, #f8f9fb);
}
.product-thumbs::-webkit-scrollbar { display: none; }

.thumb-item {
    flex: 0 0 auto;
    border: 2px solid var(--color-border, #dde3e9);
    border-radius: 0.25rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.thumb-item:hover { border-color: var(--color-primary, #990066); }
.thumb-item img { display: block; }

/* Social Sharing Row (GOS-66) */
.social-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border, #dde3e9);
    border-bottom: 1px solid var(--color-border, #dde3e9);
    margin-top: 1rem;
}
.social-row__date {
    font-size: 0.75rem;
    color: #6c757d;
    flex: 1;
    white-space: nowrap;
}
.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--color-border, #dde3e9);
    color: #6c757d;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social-btn--facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.social-btn--twitter:hover  { background: #000; color: #fff; border-color: #000; }

.gallery-image-additionals {
    display: grid;
    margin-top: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-right: auto;
    margin-left: auto;
}

.product-info-description {
    text-align: left;
}

/* Facets */
a[aria-expanded=true] .fa-angle-down {
    display: none;
}

a[aria-expanded=false] .fa-angle-up {
    display: none;
}

.facet_label {
    font-weight: normal;
    margin-bottom: 5px;
}

.facet_label:hover {
    cursor: pointer;
}

#facets_accordion .panel {
    box-shadow: none !important;
    border: none !important;
}

.facet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.facet-headline {
    border-top: solid 1px #e5e5e5;
    border-top-color: rgb(229, 229, 229);
    padding-top: 8px;
}

.facet-header {
    border:0;
    padding:5px 10px;
}

.facet-body {
    padding: 5px 8px;
}

#facets_accordion .card {
    box-shadow: none !important;
    border: none !important;
}

.facet_search_box, #facets_head_container {
    background: #fff;
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgb(57 97 120 / 10%) !important;
    -webkit-transition: box-shadow .5s ease;
    -o-transition: box-shadow .5s ease;
    transition: box-shadow .5s ease;
    transition-delay: 0s;
}

#facets_box {
    padding-top: 5px;
}

.facet_search_box.panel {
    border: 0;
}

/*.facet_search_box.card {*/
/*    border: 0;*/
/*}*/

/* Countdown */
.countdown .cd_num {
    padding: 7px 3px;
    display: block;
    background-color: #212529;
    min-width: 44px;
    color: #fff;
    font-size: 22px;
    border-radius: 6px;
    line-height: 1.2;
}

.countdown > div {
    display: inline-block;
    text-align: center;
    margin-right: 5px;
}

.countdown.cd_header {
    display: table;
    margin: auto;
}

div.countdown,
time.countdown {
    display: block;
    text-align: center;
}

.row_custom {
    display: flex;
    flex-wrap: wrap;
}

#ppplus > iframe {
    width: 100% !important;
}

.list-group.bootstrap3-legacy {
    display: block;
!important;
}

.row.bootstrap3-legacy {
    display: block;
!important;
}

.scrolltop {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 36px;
    height: 36px;
    position: fixed;
    bottom: 40px;
    right: 20px;
    cursor: pointer;
    z-index: 100;
    background-color: #990066;
    -webkit-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075);
    opacity: 0;
    -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
    border-radius: 0.42rem !important;
}

@media (max-width: 991.98px) {
    .scrolltop {
        bottom: 30px;
        right: 15px;
        width: 30px;
        height: 30px;
    }
}

.scrolltop .svg-icon svg {
    height: 24px;
    width: 24px;
}

.scrolltop .svg-icon svg g [fill] {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #ffffff;
}

.scrolltop .svg-icon svg:hover g [fill] {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

.scrolltop > i {
    font-size: 0.9rem;
    color: #ffffff;
}

.scrolltop:hover > i {
    color: #ffffff;
}

.scrolltop:hover .svg-icon svg g [fill] {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
    fill: #ffffff;
}

.scrolltop:hover .svg-icon svg:hover g [fill] {
    -webkit-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
}

[data-scrolltop=on] .scrolltop {
    opacity: 0.3;
    -webkit-animation: animation-scrolltop 0.4s ease-out 1;
    animation: animation-scrolltop 0.4s ease-out 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

[data-scrolltop=on] .scrolltop:hover {
    -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
    opacity: 1;
}

/* Accordion in FAQ page */
#containerFAQ {
    text-align: center;
}

#accordionFAQ .card-header {
    border-bottom: 0; !important;
}

#accordionFAQ a:not(.collapsed) .rotate-icon {
    display: inline-block;
    transform: rotate(180deg);
}

#accordionFAQ .topic {
    margin-left: 1rem;
    padding: 3px;
}

#accordionFAQ .accordion-item:has(+ div:not(.topic)) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 0.37rem;
    border-bottom-right-radius: 0.37rem;
}

#accordionFAQ .headline-card + .topic {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-top-left-radius: 0.37rem !important;
    border-top-right-radius: 0.37rem !important;
}

#accordionFAQ {
    counter-reset: section;
}

#accordionFAQ .question {
    padding: 0;
}

#accordionFAQ button {
    text-align: left;
}

#accordionFAQ button:focus {
    outline: none;
}

#accordionFAQ h1 {
    text-align: left;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    counter-reset: subsection;
}

#accordionFAQ h1::before {
    counter-increment: section;
    content: counter(section) ". ";
}

#accordionFAQ h2 {
    text-align: left;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    counter-reset: subsubsection;
}

#accordionFAQ h3 {
    text-align: left;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    padding-top: 0.3rem;
    padding-right: 35px;
    padding-bottom: 0.3rem;
    color: #333;
    white-space: normal;
}

/* collapse classes from BS3 break otherwise, see old BS3 bootstrap.css line 3151 */
#facets_head_container.collapse {
    visibility: visible; /* Override Bootstrap 3.3.1 */
}

#facets_head_container.collapse:not(.show) {
    display: none;
}

#accordionFAQ .collapse {
    visibility: visible; /* Override Bootstrap 3.3.1 */
}

#accordionFAQ .collapse:not(.show) {
    display: none;
}

#accordionFAQ .accordion-body {
    text-align: left;
}

.card-header {
    background: #fff !important;
}

.card-footer {
    background: #fff !important;
}

#facets_box .collapse {
    visibility: visible; /* Override Bootstrap 3.3.1 */
}

#facets_box .collapse:not(.show) {
    display: none;
}

.nav-information-child-link {
    margin-left: 20px;
    display: block;
}

/*bs4 nested dropdowns since they are not standard in bs4*/

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #770050;
}

.custom-input-height-fixed {
    /*height: calc(1.5em + .75rem + 2px);*/
}

.custom-card-bg {
    background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
    background-image:      -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
    background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
    background-repeat: repeat-x;
    border-color: #dcdcdc;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
}

.bs-custom-breadcrumb {
    --bs-breadcrumb-bg: #e9ecef;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    list-style: none;
    border-radius: .25rem;
}
/* BS5 caret symbol rotation */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    transition: transform .3s ease-in-out;
}

.dropdown-toggle.show::after {
    transform: rotate(180deg);
}
/* EOF BS5 caret symbol rotation */

/* Header: mobile cart indicator — auf heller Top-Navbar dunkler Stroke */
.navbar-cart-indicator {
    position: relative;
    color: var(--color-text-muted);
    padding: 0.25rem;
    text-decoration: none;
    line-height: 1;
}
.navbar-cart-indicator:hover { color: var(--color-primary); }
.navbar-cart-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #dc3545;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}

/* Mini-cart dropdown */
.minicart-dropdown {
    min-width: 320px;
    max-width: 380px;
    padding: 0.5rem 0;
}
.minicart-item {
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 1rem !important;
    white-space: normal !important;
}
.minicart-img {
    flex-shrink: 0;
}
.minicart-product-img {
    width: 75px !important;
    height: 75px !important;
    object-fit: cover;
    border-radius: 3px;
}
.minicart-info {
    flex: 1;
    min-width: 0;
}
.minicart-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
}
.minicart-qty {
    display: block;
    font-size: 0.75rem;
    color: #999;
}
.minicart-rating {
    display: block;
    font-size: 0.7rem;
    line-height: 1;
    margin-top: 7px;
}
.minicart-price {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    color: #990066;
}
.minicart-buttons {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}
.minicart-buttons .btn {
    flex: 1;
    text-align: center;
}
/* GOS-90: Brand-Style fuer die beiden Mini-Cart-Buttons (statt
   Bootstrap-Default outline-secondary grau + success gruen). Konsistent
   mit dem Header-Checkout-Button (`.nav-checkout`). Mobile-Burger hat
   eigenen Override (siehe @media-Block) — `.btn-success` wird dort
   ausgeblendet, weil dupliziert zum Konto-Section-CTA. */
.minicart-buttons .btn-outline-secondary {
    color: var(--color-primary) !important;
    background: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    font-weight: var(--font-weight-medium);
}
.minicart-buttons .btn-outline-secondary:hover,
.minicart-buttons .btn-outline-secondary:focus-visible {
    color: var(--color-primary-dark) !important;
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
}
.minicart-buttons .btn-success {
    color: var(--color-white) !important;
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    font-weight: var(--font-weight-bold);
}
.minicart-buttons .btn-success:hover,
.minicart-buttons .btn-success:focus-visible {
    color: var(--color-white) !important;
    background: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Header: mobile logo size */
/* GOS-90: Logo in der hellen Top-Navbar — Mobile schmaler, Desktop 350 px
   (= Original-Inline-Style-Wert aus dem alten Header-Wrap). Aspect-Ratio
   des PNG bleibt erhalten (nur width gesetzt, height automatisch).
   display:block damit kein inline-Whitespace unter dem Logo sitzt.
   margin-y 8 px gibt der Bar etwas Atmung — die Bar-Hoehe entspricht damit
   Logo-Hoehe + 16 px. Kein filter noetig: Magenta-Wortmarke (~#990066)
   ist auf der weissen Bar gut lesbar. */
.header-logo,
.header-logo-mobile {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
}
@media (min-width: 768px) {
    .header-logo,
    .header-logo-mobile { max-width: 350px; }
}

/* GOS-90: Header-Suche in der Top-Navbar (Mockup-Pattern .header-search).
   Echte Seitenzentrierung: Brand und Collapse bekommen jeweils flex:1 1 0
   damit beide Slots gleich gross werden. Suche dazwischen mit fixer Breite
   480 px ist dadurch effektiv zur Viewport-Mitte zentriert (unabhaengig
   von der Brand-Breite). Im Mobile-Burger volle Breite mit eigener
   Such-Box (eigene ID damit das Auto-Complete-JS beide unabhaengig
   initialisiert). */
@media (min-width: 768px) {
    .navbar.navbar-top .navbar-brand {
        flex: 1 1 0;
        min-width: 0;
    }
    .navbar.navbar-top .header-search {
        flex: 0 0 auto;
        width: 480px;
        max-width: 100%;
        margin: 0;
        padding: 0 var(--sp-3);
    }
    .navbar.navbar-top .collapse.navbar-collapse {
        flex: 1 1 0;
        min-width: 0;
    }
}
@media (max-width: 767.98px) {
    /* Mobile-Burger: Suche im Collapse, volle Breite, keine Max-Width */
    .navbar.navbar-top .collapse .header-search {
        flex: none;
        max-width: none;
        margin: 0;
        padding: 0 0.5rem;
    }
}

/* Such-Form: Pill-Look mit subtle Background, focus-within hebt sich ab */
.header-search__form {
    width: 100%;
    margin: 0;
}
.header-search__group {
    display: flex !important;
    align-items: stretch;
    background: var(--color-bg-subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-pill) !important;
    /* overflow: visible damit das absolut positionierte Auto-Suggest-
       Dropdown (top: 100%+6px) nicht weggeclipt wird. Pill-Form bleibt
       sichtbar weil alle Children transparenten BG + border-radius:0
       haben (siehe unten). */
    overflow: visible;
    height: 40px;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    position: relative;
}
.header-search__group:focus-within {
    background: var(--color-white) !important;
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus);
}
.header-search__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--color-text-muted) !important;
    padding: 0 !important;
    font-size: var(--font-size-sm);
}
.header-search__input {
    flex: 1 1 auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 var(--sp-2) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text) !important;
    min-width: 0;
    height: 100%;
    box-shadow: none !important;
}
.header-search__input:focus { outline: none !important; box-shadow: none !important; }
.header-search__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.header-search__submit {
    flex-shrink: 0;
    border: none !important;
    background: transparent !important;
    padding: 0 var(--sp-3) !important;
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-medium) !important;
    font-size: var(--font-size-sm) !important;
    cursor: pointer;
    transition: color var(--transition-base);
    border-radius: 0 !important;
}
.header-search__submit:hover,
.header-search__submit:focus-visible { color: var(--color-primary-dark) !important; }
.header-search__submit:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Auto-Complete-Dropdown — wird via JS in .input-group eingefuegt mit
   position: absolute, nimmt die volle Container-Breite ein. Karten-Look
   passend zu den anderen Header-Dropdowns (.navbar-main .dropdown-menu). */
.search-ac-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--sp-1);
}
.search-ac-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-base);
}
.search-ac-item:hover,
.search-ac-item--active { background: var(--color-bg-subtle); }
.search-ac-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    flex-shrink: 0;
}
.search-ac-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: 1.3;
}
.search-ac-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.search-ac-stars {
    font-size: 0.7rem;
    color: var(--color-star);
    line-height: 1;
    margin-top: 2px;
}
.search-ac-stars small { color: var(--color-text-muted); margin-left: 2px; }
.search-ac-hl {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    padding: 0 1px;
    border-radius: 2px;
}
.search-ac-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--sp-2);
    margin-top: var(--sp-1);
    background: var(--color-bg-subtle);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.search-ac-footer .btn { font-size: var(--font-size-sm); }

/* GOS-90: Top-Navbar — heller Hintergrund (Logo ist Magenta auf weiss gut
   lesbar), keine Bootstrap navbar-dark/bg-dark mehr. Padding raus, damit
   die Logo-Bildhoehe die gesamte Bar-Hoehe bestimmt. Border-Bottom dient
   als Trennung zur darunterliegenden Suche-Zone. */
.navbar.navbar-top {
    background: var(--color-white) !important;
    border-bottom: 1px solid var(--color-border);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
    /* GOS-90: Sticky-Header. z-index 1031 = Bootstrap-fixed-top (1030) + 1,
       damit eigene .fixed-top-Komponenten (z.B. Cookie-Banner) nicht mit
       dem Sticky-Header konkurrieren. Bewusst UNTER Modal-Backdrop (1050)
       und Modal (1055) — Modals duerfen den Header verdecken.
       product_info-Sticky-Buy-Bar hat z-index 999 und sitzt dadurch unter
       dem Header (siehe top-Offset auf --header-h-compact). */
    position: sticky;
    top: 0;
    z-index: 1031;
    transition: box-shadow var(--transition-base);
}
/* Sticky-Schatten erscheint beim Scrollen (visuelle Trennung). */
body.is-scrolled .navbar.navbar-top {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Compact-Mode: Logo schrumpft, vertikale Innenmargin verschwindet,
   Suche bleibt sichtbar aber etwas niedriger. CSS-Transition gibt
   die weiche Schrumpf-Animation. */
.navbar.navbar-top .header-logo,
.navbar.navbar-top .header-logo-mobile {
    transition: max-width 0.2s var(--ease-out, ease-out), margin 0.2s var(--ease-out, ease-out);
}
.navbar.navbar-top .header-search__group {
    transition: height 0.2s var(--ease-out, ease-out), background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
/* Compact-Mode — nur Desktop. Header bekommt explizite Hoehe = Token,
   damit die Hoehe garantiert konsistent ist (kein „je nach hoechstem
   Child"-Problem) und die product_info-Buy-Bar bei `top: var(--header-
   h-compact)` sauber drunter sitzt. Logo per max-height constrainen.
   Mobile bekommt keinen Compact-Mode: der Burger-Toggler (44 px) bestimmt
   ohnehin die Header-Hoehe — Logo-Reduktion wuerde visuell nichts bringen,
   und eine fixe Hoehe wuerde den geoeffneten Burger-Collapse abschneiden.
   product_info-Buy-Bar sitzt Mobile `bottom: 0`, kein Top-Konflikt. */
@media (min-width: 768px) {
    body.is-scrolled .navbar.navbar-top {
        height: var(--header-h-compact);
        min-height: var(--header-h-compact);
    }
    body.is-scrolled .navbar.navbar-top .header-logo {
        max-height: calc(var(--header-h-compact) - 8px);
        max-width: 160px;
        width: auto;
        margin: 0;
    }
    body.is-scrolled .navbar.navbar-top .header-search__group {
        height: 34px;
    }
}
.navbar.navbar-top .navbar-brand {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}
.navbar.navbar-top .navbar-brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}
/* nav-link Items in der Top-Navbar (Mobile-Burger + Desktop) — dunkler Text
   auf hellem BG. Bootstrap-Default-Farben werden ohne navbar-dark zu hell
   gerendert (rgba 0.55 grau), die wir mit konkreten Tokens ersetzen. */
.navbar.navbar-top .nav-link {
    color: var(--color-text) !important;
}
.navbar.navbar-top .nav-link:hover,
.navbar.navbar-top .nav-link:focus-visible {
    color: var(--color-primary) !important;
}
/* Checkout-CTA Desktop: Primary-Button-Look (Brand-Bg, weisse Schrift,
   pill-rounded). Mobile-Burger hat eigenen Override (siehe @media-Block
   weiter unten) — gleiche Optik aber zentriert + voll-breit. */
.navbar.navbar-top .nav-checkout {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-weight: var(--font-weight-bold) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.45rem 0.95rem !important;
    margin-left: var(--sp-2);
    white-space: nowrap !important;
    transition: background-color var(--transition-base);
}
.navbar.navbar-top .nav-checkout:hover,
.navbar.navbar-top .nav-checkout:focus-visible {
    background: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
}
.navbar.navbar-top .nav-checkout i {
    color: inherit !important;
}
/* Burger-Toggler-Icon: ohne navbar-dark setzt Bootstrap die SVG-Stroke
   automatisch auf dunkel — kein eigenes Override noetig. Border auf
   subtle Token. */
.navbar.navbar-top .navbar-toggler {
    border-color: var(--color-border);
}

/* GOS-90: Burger-Inhalt scrollbar machen, damit lange Sektionsketten
   (Sortiment + Highlights + Information + Konto + Checkout) nicht nach
   unten aus dem Mobile-Viewport laufen. Ohne diese Regel expandiert
   .collapse.show beliebig und schiebt den Body-Content weg → User muss
   die ganze Page scrollen, um zum Burger-Boden zu kommen.
   `100dvh` (dynamic viewport height) statt 100vh, damit die Mobile-URL-
   Bar (Safari/Chrome bei Scroll) die effektive Hoehe nicht reisst.
   `overscroll-behavior: contain` verhindert, dass am Burger-Scroll-Ende
   der Body weiterscrollt (Scroll-Chaining). 64 px Reserve fuer den
   Header oben (Logo + Margin + Border). */
@media (max-width: 767.98px) {
    .navbar.navbar-top .collapse.navbar-collapse.show,
    .navbar.navbar-top .collapsing {
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* GOS-90: 8 px horizontaler Atemraum links/rechts — verhindert,
           dass Items/Pills/Outlines am Mobile-Viewport-Rand kleben.
           Sortiment-Section muss dafuer ihr eigenes padding-x verlieren
           (siehe @media-Block weiter unten), sonst doppelt eingerueckt. */
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
    }
}

/* Cart-Badge: nutzt jetzt die zentrale .badge.badge--soft-Komponente
   (siehe oben Z.420). Markup in cm_navbar.php: <span class="badge
   rounded-pill badge--soft bg-danger">N</span> — kein eigenes Override
   mehr noetig. */
/* GOS-90: Burger-Toggler mit eigenem Icon-Pair (Bars/Times). Bootstrap
   setzt aria-expanded="true" wenn die Collapse offen ist — darueber
   blenden wir Bars aus und Times ein. Bootstraps Default-SVG wird
   durch unser <i> ersetzt. Komplett im Mobile-Media-Query, damit
   `display`-Override nicht mit dem `d-md-none` am Button kollidiert. */
@media (max-width: 767.98px) {
    .navbar-toggler.navbar-toggler--icon-pair {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-sm) !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .navbar-toggler.navbar-toggler--icon-pair:focus,
    .navbar-toggler.navbar-toggler--icon-pair:focus-visible {
        outline: 2px solid var(--color-primary) !important;
        outline-offset: 2px;
        box-shadow: none !important;
    }
    .navbar-toggler.navbar-toggler--icon-pair .navbar-toggler__icon {
        font-size: 1.25rem !important;
        line-height: 1 !important;
        color: var(--color-text) !important;
    }
    .navbar-toggler.navbar-toggler--icon-pair .navbar-toggler__icon--close { display: none !important; }
    .navbar-toggler.navbar-toggler--icon-pair[aria-expanded="true"] .navbar-toggler__icon--open { display: none !important; }
    .navbar-toggler.navbar-toggler--icon-pair[aria-expanded="true"] .navbar-toggler__icon--close {
        display: inline-block !important;
        color: var(--color-primary) !important;
    }
}

/* GOS-90 — Mobile-Burger: Sortiment-Section + Akkordeon
   ───────────────────────────────────────────────────────────────
   Setting: Bootstrap-Collapse-Burger (#bs-navbar-collapse-1) <md.
   Ziel: Mockup-OffCanvas-Look (Section-Header + 48px-Touch-Items
   + inline Akkordeon fuer Sub-Kategorien). Der Generator
   header_navigation.php emittiert weiterhin Bootstrap-Dropdowns
   (data-bs-toggle="dropdown") — Bootstrap toggelt also Touch-
   gerecht (.show / aria-expanded), wir styling den floating
   Karten-Look auf einen Inline-Akkordeon um.
   Greift nur Mobile (<md) — Desktop bleibt unveraendert. */
@media (max-width: 767.98px) {
    .burger-section {
        /* padding-x: 0 — horizontaler Atemraum kommt jetzt vom Collapse-
           Container (siehe oben). Ohne diese Aenderung waeren Sortiment/
           Highlights/Information-Items doppelt eingerueckt vs. Konto-Items. */
        padding: 0;
        margin: var(--sp-3) 0;
    }
    .burger-section__title {
        font-size: 0.75rem !important;
        font-weight: var(--font-weight-bold) !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-muted) !important;
        padding: 0 var(--sp-3);
        margin: 0 0 var(--sp-2) !important;
    }
    .burger-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-direction: column !important;
    }
    .burger-list .nav-item {
        width: 100%;
    }
    /* Top-Level-Item — Touch-Min 48px, voll klickbar */
    .burger-list > .nav-item > .nav-link {
        display: flex !important;
        align-items: center !important;
        gap: var(--sp-3) !important;
        padding: 0.75rem !important;
        min-height: 48px !important;
        font-size: 1rem !important;
        font-weight: var(--font-weight-medium) !important;
        color: var(--color-text) !important;
        border-radius: var(--radius-md) !important;
        text-decoration: none !important;
        transition: background-color var(--transition-base), color var(--transition-base);
    }
    .burger-list > .nav-item > .nav-link:hover,
    .burger-list > .nav-item > .nav-link:focus-visible {
        background: var(--color-bg-subtle) !important;
        color: var(--color-primary) !important;
    }
    .burger-list > .nav-item > .nav-link:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }
    .burger-list > .nav-item.active > .nav-link,
    .burger-list > .nav-item > .nav-link.active {
        background: var(--color-primary-light) !important;
        color: var(--color-primary-dark) !important;
        font-weight: var(--font-weight-bold) !important;
    }
    /* Chevron des Top-Level-Toggles ans rechte Ende, weiche Rotation */
    .burger-list > .nav-item > .nav-link.dropdown-toggle::after {
        margin-left: auto !important;
        border-top-width: 0.32em;
        border-right-width: 0.32em;
        border-left-width: 0.32em;
        color: var(--color-text-muted);
        opacity: 0.7;
        transition: transform 0.2s var(--transition-base), opacity var(--transition-base);
    }
    .burger-list > .nav-item.show > .nav-link.dropdown-toggle::after,
    .burger-list > .nav-item > .nav-link.dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    /* Bootstrap-Dropdown-Menue als Inline-Akkordeon (kein Karten-Look,
       kein floating, kein Schatten). Voll auf, sobald Bootstrap .show
       setzt — wir lassen die Standard-Display-Logik intakt und
       ueberschreiben nur Position + Optik. Aktive Pfade werden via
       .nav-item.active geoeffnet (CSS-only — kein Sync-JS noetig). */
    .burger-list .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 var(--sp-2) var(--sp-4) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        font-size: var(--font-size-sm) !important;
    }
    .burger-list .nav-item.active > .dropdown-menu {
        display: block !important;
    }
    .burger-list .dropdown-menu .dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: var(--sp-2) !important;
        padding: var(--sp-2) var(--sp-3) !important;
        min-height: 44px !important;
        font-size: var(--font-size-sm) !important;
        font-weight: var(--font-weight-medium) !important;
        line-height: 1.35 !important;
        color: var(--color-text) !important;
        background: transparent !important;
        background-image: none !important;
        border-radius: var(--radius-sm) !important;
        white-space: normal !important;
        transition: background-color var(--transition-base), color var(--transition-base);
    }
    /* Sub-Item Icons (Login/Logoff) — gedaempfter als das Label, etwas
       schmaler. Tokenisierte Standardbreite damit Items mit/ohne Icon
       nicht horizontal springen, falls spaeter weitere Sub-Items Icons
       bekommen. */
    .burger-list .dropdown-menu .dropdown-item > i.fas,
    .burger-list .dropdown-menu .dropdown-item > i.far,
    .burger-list .dropdown-menu .dropdown-item > i.fab {
        color: var(--color-text-muted) !important;
        font-size: 0.85em;
        width: 16px;
        text-align: center;
        flex-shrink: 0;
    }
    .burger-list .dropdown-menu .dropdown-item:hover > i,
    .burger-list .dropdown-menu .dropdown-item:focus-visible > i {
        color: var(--color-primary) !important;
    }
    /* Divider als klare Section-Trennung in der Sub-Karte. */
    .burger-list .dropdown-menu .dropdown-divider {
        margin: var(--sp-1) var(--sp-2) !important;
        border-top: 1px solid var(--color-border) !important;
        opacity: 1 !important;
    }
    .burger-list .dropdown-menu .dropdown-item:hover,
    .burger-list .dropdown-menu .dropdown-item:focus-visible {
        background: var(--color-bg-subtle) !important;
        color: var(--color-primary) !important;
    }
    .burger-list .dropdown-menu .dropdown-item:focus-visible {
        outline: none;
        box-shadow: var(--shadow-focus);
    }
    .burger-list .dropdown-menu .dropdown-item.active,
    .burger-list .dropdown-menu > .active > a {
        background: var(--color-primary-light) !important;
        color: var(--color-primary-dark) !important;
        font-weight: var(--font-weight-medium) !important;
        background-image: none !important;
    }

    /* Sub-Submenu (.dropdown-submenu) — gleiche Akkordeon-Logik
       eine Ebene tiefer eingerueckt. Bootstrap nutzt hier denselben
       Mechanismus (data-bs-toggle="dropdown" am Sub-Toggle). */
    .burger-list .dropdown-submenu { width: 100%; }
    .burger-list .dropdown-submenu > .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        gap: var(--sp-2) !important;
        position: relative;
    }
    .burger-list .dropdown-submenu > .dropdown-toggle::after {
        margin-left: auto !important;
        border-top-width: 0.3em;
        border-right-width: 0.3em;
        border-left-width: 0.3em;
        transform: rotate(0deg);
        transition: transform 0.2s var(--transition-base);
    }
    .burger-list .dropdown-submenu.show > .dropdown-toggle::after,
    .burger-list .dropdown-submenu > .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
    .burger-list .dropdown-submenu > .dropdown-menu {
        padding-left: var(--sp-4) !important;
    }

    /* Highlight-Items im Burger (Neu/Specials/Reviews) — die Widgets bringen
       eigenes .nav-highlight-Styling mit (entstanden fuer Desktop-Highlight-
       Bar in der Hauptnavbar). Wir ueberschreiben Mobile mit Burger-Look:
       voll-breit, 48 px Touch, dezenter Hover-Tint, Counter-Pill rechts. */
    .burger-list .nav-link.nav-highlight {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        gap: var(--sp-3) !important;
        padding: 0.75rem !important;
        min-height: 48px !important;
        border-radius: var(--radius-md) !important;
        font-size: 1rem !important;
        font-weight: var(--font-weight-medium) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: var(--color-text) !important;
        box-shadow: none !important;
    }
    .burger-list .nav-link.nav-highlight:hover,
    .burger-list .nav-link.nav-highlight:focus-visible {
        background: var(--color-bg-subtle) !important;
        color: var(--color-primary) !important;
        box-shadow: none !important;
    }
    .burger-list .nav-link.nav-highlight:focus-visible {
        box-shadow: var(--shadow-focus) !important;
    }
    .burger-list .nav-link.nav-highlight .badge {
        margin-left: auto !important;
    }
    /* Aktiv-State: Tint statt Underline — der Underline aus dem Desktop-
       Highlight-Pattern (.nav-highlight.active::before) wird im Burger
       unterdrueckt, weil er auf dem dunklen Tint-Hintergrund schlecht liest. */
    .burger-list .nav-highlight.active {
        background: var(--color-primary-light) !important;
        color: var(--color-primary-dark) !important;
        font-weight: var(--font-weight-bold) !important;
    }
    .burger-list .nav-highlight.active::before { display: none !important; }

    /* Inline-Section-Header (ohne <section>-Wrapper) — fuer Sections, wo
       die <ul> sowohl Desktop als auch Mobile genutzt wird (Konto-Section).
       Der Header sitzt direkt im Collapse-Stack vor der <ul>. */
    .burger-section__title.burger-section__title--inline {
        margin-top: var(--sp-3);
    }

    /* Checkout-Button im Burger als primaerer CTA — zentriert, bg-primary,
       voll breit, klare Touch-Surface. Der Desktop-Style (.nav-checkout
       white-space: nowrap) bleibt unangetastet, dies ueberschreibt nur
       den Burger-Look. */
    .burger-list .nav-link.nav-checkout {
        justify-content: center !important;
        background: var(--color-primary) !important;
        color: var(--color-white) !important;
        font-weight: var(--font-weight-bold) !important;
        margin-top: var(--sp-2);
        margin-bottom: var(--sp-4);
    }
    .burger-list .nav-link.nav-checkout:hover,
    .burger-list .nav-link.nav-checkout:focus-visible {
        background: var(--color-primary-dark) !important;
        color: var(--color-white) !important;
    }
    .burger-list .nav-link.nav-checkout i {
        color: inherit !important;
    }

    /* Empty-Cart-Hint (.navbar-text) als gedaempfter Hinweis statt
       Touch-Item — Bootstrap rendert hier kein .nav-link. */
    .burger-list .nav-item.navbar-text {
        padding: var(--sp-2) var(--sp-3) !important;
        color: var(--color-text-muted) !important;
        font-size: var(--font-size-sm) !important;
        font-style: italic;
    }

    /* Mini-Cart (.minicart-dropdown) im Burger — Desktop-Werte (min-width
       320 px, 75 px Bild, side-by-side Buttons) sind im engen Burger
       suboptimal. Mobile-Override ohne Desktop-Risiko (alles im Media-Query
       + .burger-list-Scope). */
    .burger-list .minicart-dropdown {
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .burger-list .minicart-item {
        padding: var(--sp-2) var(--sp-3) !important;
        gap: var(--sp-3) !important;
        align-items: center !important;
        min-height: 0 !important;
    }
    .burger-list .minicart-item:hover,
    .burger-list .minicart-item:focus-visible {
        background: var(--color-bg-subtle) !important;
    }
    .burger-list .minicart-product-img {
        width: 56px !important;
        height: 56px !important;
    }
    .burger-list .minicart-name {
        font-size: 0.875rem !important;
    }
    .burger-list .minicart-qty,
    .burger-list .minicart-rating {
        font-size: 0.75rem !important;
    }
    .burger-list .minicart-price {
        font-size: 0.875rem !important;
        color: var(--color-primary) !important;
    }
    /* Cart-Header (Summe + „Warenkorb anzeigen") als prominente Zeile */
    .burger-list .minicart-dropdown .dropdown-header {
        padding: var(--sp-2) var(--sp-3) !important;
        font-size: 0.8125rem !important;
        font-weight: var(--font-weight-bold) !important;
        color: var(--color-text) !important;
        text-transform: none;
        letter-spacing: 0;
    }
    /* Cart-Action-Buttons im Mini-Cart-Akkordeon — Mobile braucht hier nur
       „Warenkorb anzeigen". Der grüne Checkout-Button (.btn-success) ist im
       Burger ein Duplikat zum primaeren Konto-Section-CTA (.nav-checkout)
       direkt darunter und wird ausgeblendet. */
    .burger-list .minicart-buttons {
        padding: var(--sp-3) !important;
    }
    .burger-list .minicart-buttons .btn-success {
        display: none !important;
    }
    .burger-list .minicart-buttons .btn-outline-secondary {
        flex: 1 !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        font-weight: var(--font-weight-medium) !important;
        color: var(--color-primary) !important;
        background: var(--color-white) !important;
        border-color: var(--color-primary) !important;
    }
    .burger-list .minicart-buttons .btn-outline-secondary:hover,
    .burger-list .minicart-buttons .btn-outline-secondary:focus-visible {
        background: var(--color-primary-light) !important;
        color: var(--color-primary-dark) !important;
        border-color: var(--color-primary) !important;
    }
    .burger-list .minicart-dropdown .dropdown-divider {
        margin: 0 !important;
    }
}

/* SmartSlider: Safari-Fix — Einkaufsbutton-Layer erscheint kurz, dann verschwindet er (~1s Delay-Bug)
   Ursache: SmartSlider setzt opacity:0 als Animationsstartzustand async; Safari rendert das Element
   kurz sichtbar bevor das JS greift. Pre-set via CSS; SmartSlider überschreibt per inline-style am Ende.
   will-change hilft Safari, den Compositing-Layer rechtzeitig vorzubereiten. backface-visibility:visible
   verhindert das Verschwinden durch den rotationY-3D-Kontext des Parent-Layers. */
.n2-section-smartslider {
    margin-top: 1rem !important;
}
.n2-section-smartslider .n2-ss-layer--auto {
    opacity: 0;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    will-change: opacity, transform;
}

/* GOS-73: .header-breadcrumb-wrap-Regel entfernt — der Breadcrumb sitzt jetzt
   in .breadcrumb-bar > .container (siehe oben, Zeilen 1938–1952). */

/* ═══════════════════════════════════════════════
   product_info.php — Buy Box + Sticky Bars (GOS-66)
═══════════════════════════════════════════════ */
.price-card {
    background: #fff;
    border: 1px solid #dde3e9;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(57,97,120,.10);
}
@media (min-width: 768px) {
    .price-card { position: sticky; top: 20px; }
}
.price-card__inner { padding: 1.25rem; }
.countdown-block {
    background: linear-gradient(135deg, #fff4e6, #fff8f0);
    border: 1px solid #f5d9a0;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}
.countdown-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #e68900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.countdown-block .countdown small {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-top: 0.2rem;
    letter-spacing: 0.04em;
}
.price-qty { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.price-qty__label { font-size: 0.875rem; color: #6c757d; white-space: nowrap; }
.pi-qty-group { width: 130px; flex-shrink: 0; }
.product-price { margin-bottom: 0.25rem; }
.price-original {
    font-size: 0.875rem;
    color: #6c757d;
    text-decoration: line-through;
    display: block;
    margin-bottom: 0.1rem;
}
.price-special {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary, #990066);
    display: block;
    line-height: 1.1;
}
.price-tax { display: block; font-size: 0.75rem; color: #6c757d; margin-bottom: 0.35rem; }
.price-tax a { color: #6c757d; text-decoration: underline dotted; }
.price-tax--shipping { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 1rem; }
.price-payment-break { flex-basis: 0; height: 0; }
@media (min-width: 768px) { .price-payment-break { flex-basis: 100%; } }
.price-tax--shipping i { flex-shrink: 0; }
.price-transit-time { display: flex; align-items: center; gap: 0.35rem; width: 100%; font-size: 0.75rem; color: #6c757d; }
.price-transit-time i { flex-shrink: 0; }
.price-availability {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #3a8a3a;
    margin-bottom: 1rem;
}
.price-availability--out { color: #cc0033; }
.btn-add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 52px;
    background: #28a745;
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease;
    margin-bottom: 1rem;
}
.btn-add-to-cart:hover { background: #218838; }
.price-payment-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding-top: 0.75rem;
    border-top: 1px solid #dde3e9;
}
.price-payment-icons img {
    height: 24px;
    width: auto;
}

/* Mobile Buy Bar */
#mobile-buy-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 8px rgba(0,0,0,.12);
    padding: 10px 16px;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#mobile-buy-bar .mbb-name {
    font-size: .85rem;
    font-weight: 600;
    color: #212121;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
#mobile-buy-bar .mbb-price {
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-primary, #990066);
    flex-shrink: 0;
}
@media (min-width: 768px) { #mobile-buy-bar { display: none !important; } }

/* Desktop Sticky Header */
/* GOS-90: outer = full-width Background + Schatten (visuell durchgaengiger
   Streifen), inner = Shop-Boundary via .container-fluid.header_wrap
   (max-width 1600 px, zentriert) damit Inhalt nicht ueber die Shop-Breite
   hinauslaeuft. top-Offset = compact Site-Header-Hoehe; z-index 999 sitzt
   unter dem Top-Navbar (1031), damit der Header immer obenauf liegt. */
#desktop-sticky-header {
    display: none;
    position: fixed;
    top: var(--header-h-compact, 48px); left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    z-index: 999;
}
#desktop-sticky-header .dsh-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
}
#desktop-sticky-header .dsh-name {
    font-size: .95rem;
    font-weight: 600;
    color: #212121;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
#desktop-sticky-header .dsh-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #990066);
    flex-shrink: 0;
    /* GOS-90: explizit nach rechts (margin-left: auto drueckt das Element +
       alles danach an den rechten Rand). Doppelt-sicher gegen den Fall, dass
       `.dsh-name { flex: 1 }` durch eine andere Regel ueberlagert wird. */
    margin-left: auto;
}
@media (max-width: 767px) { #desktop-sticky-header { display: none !important; } }
.pi-qty-input::-webkit-outer-spin-button,
.pi-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pi-qty-input { -moz-appearance: textfield; }

/* ═══════════════════════════════════════════════
   product_info.php — Kundenbewertungen (GOS-66)
═══════════════════════════════════════════════ */
.reviews-section { margin-top: 2rem; margin-bottom: 3rem; }
.reviews-heading {
    font-size: 1.375rem;
    font-weight: 700;
    color: #262626;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.reviews-heading small { font-size: 0.875rem; font-weight: 400; color: #6c757d; }
.review-summary {
    background: #fff;
    border: 1px solid #dde3e9;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(57,97,120,.10);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.summary-score { display: flex; flex-direction: column; align-items: center; min-width: 100px; }
.summary-score__avg { font-size: 3.5rem; font-weight: 700; line-height: 1; color: #262626; }
.summary-score__stars { color: #f5a623; font-size: 1rem; margin: 0.25rem 0; }
.summary-score__count { font-size: 0.75rem; color: #6c757d; text-align: center; }
.summary-bars { flex: 1; min-width: 160px; }
.summary-bar-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; font-size: 0.75rem; }
.summary-bar-row__label { width: 28px; text-align: right; color: #6c757d; flex-shrink: 0; }
.summary-bar-row__track {
    flex: 1;
    height: 8px;
    background: #f8f9fb;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid #dde3e9;
}
.summary-bar-row__fill { height: 100%; background: #f5a623; border-radius: 9999px; }
.summary-bar-row__count { width: 24px; color: #6c757d; flex-shrink: 0; }
.review-summary .hero-ai { flex: 1; min-width: 220px; }
.reviews-empty {
    background: #fff;
    border: 1px solid #dde3e9;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(57,97,120,.10);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    color: #6c757d;
    font-size: 0.9375rem;
    text-align: center;
}
.summary-actions { text-align: right; margin-bottom: 1.5rem; }
.btn-write-review {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--color-primary, #990066);
    color: var(--color-primary, #990066);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease;
    white-space: nowrap;
}
.btn-write-review:hover { background: var(--color-primary, #990066); color: #fff; }
.review-list { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.review-card {
    background: #fff;
    border: 1px solid #dde3e9;
    border-radius: 0.75rem;
    box-shadow: 0 2px 10px rgba(57,97,120,.10);
    padding: 1.5rem;
}
.review-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: #f7e6f1;
    border: 1px solid #dde3e9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--color-primary, #990066);
}
.review-meta { flex: 1; min-width: 0; }
.review-meta__name { font-weight: 700; font-size: 0.875rem; color: #262626; }
.review-meta__date {
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    flex-wrap: wrap;
}
.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    color: #3a8a3a;
    font-weight: 500;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 9999px;
    padding: 0.1rem 0.4rem;
}
.review-stars { color: #f5a623; font-size: 1rem; white-space: nowrap; }
.review-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--sp-1) 0;
    line-height: var(--line-height-tight);
}
.review-body { font-size: 0.875rem; line-height: 1.65; color: #262626; margin-bottom: 1rem; }
.review-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    border-top: 1px solid #dde3e9;
    padding-top: 0.5rem;
}
.review-vote__label { font-size: 0.75rem; color: #6c757d; }
.review-vote__btns { display: flex; gap: 0.5rem; }
.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #6c757d;
    background: #f8f9fb;
    border: 1px solid #dde3e9;
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s ease;
}
.vote-btn:hover { border-color: var(--color-primary, #990066); color: var(--color-primary, #990066); }
.vote-btn--up:hover { background: #f0fdf4; border-color: #3a8a3a; color: #3a8a3a; }
/* === REVIEWS PAGE === */
.reviews-page {
    padding: var(--sp-4) 0 var(--sp-6);
}
.page-heading {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--sp-4);
    line-height: var(--line-height-tight);
}

/* Rating Hero */
.rating-hero {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4) var(--sp-5);
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    gap: var(--sp-5);
    align-items: start;
    margin-bottom: var(--sp-4);
}
.rating-hero:not(:has(.hero-ai)) {
    grid-template-columns: 180px 1fr;
}
.hero-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-right: var(--sp-5);
    border-right: 1px solid var(--color-border);
}
.hero-score__avg {
    font-size: 4.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1;
    letter-spacing: -0.03em;
}
.hero-score__of {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}
.hero-score__stars {
    color: var(--color-star);
    font-size: 1.3rem;
    margin: var(--sp-2) 0;
    letter-spacing: 2px;
}
.hero-score__count {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-3);
}

/* Hero Bar chart */
.hero-bars {
    padding-right: var(--sp-4);
    border-right: 1px solid var(--color-border);
}
.rating-hero:not(:has(.hero-ai)) .hero-bars {
    border-right: none;
    padding-right: 0;
}
.hero-bars__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--sp-3);
}
.hero-bar-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.3rem;
    transition: background var(--transition-base);
    text-decoration: none;
    color: inherit;
}
.hero-bar-row:hover { background: var(--color-bg-subtle); }
.hero-bar-row__label {
    width: 30px;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
    white-space: nowrap;
}
.hero-bar-row__track {
    flex: 1;
    height: 10px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.hero-bar-row__fill {
    height: 100%;
    background: var(--color-star);
    border-radius: var(--radius-pill);
}
.hero-bar-row__fill--low { background: #e8a0a0; }
.hero-bar-row__count {
    width: 42px;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* AI Summary */
.hero-ai {
    background: linear-gradient(135deg, #f5f0ff 0%, #ede8f8 100%);
    border: 1px solid #d8ceee;
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    position: relative;
}
.hero-ai__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.hero-ai__icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.hero-ai__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: #4c1d95;
}
.hero-ai__subtitle {
    font-size: var(--font-size-xs);
    color: #6d28d9;
    opacity: 0.8;
}
.hero-ai__text {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: #3b1872;
    margin-bottom: var(--sp-2);
}
.hero-ai__highlights {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}
.ai-highlight {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--font-size-xs);
}
.ai-highlight__bar-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.ai-highlight__label {
    font-weight: var(--font-weight-medium);
    color: #4c1d95;
    width: 100px;
    flex-shrink: 0;
}
.ai-highlight__track {
    flex: 1;
    height: 6px;
    background: rgba(109,40,217,0.15);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.ai-highlight__fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    border-radius: var(--radius-pill);
}
.ai-highlight__pct {
    font-weight: var(--font-weight-bold);
    color: #4c1d95;
    width: 34px;
    text-align: right;
}
.hero-ai__disclaimer {
    font-size: 0.65rem;
    color: #6d28d9;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Omnibus-Transparenz-Disclosure (GOS-72 Phase 3, G-11)
   Pflicht nach § 5b Abs. 3 UWG auf allen Seiten, die Kundenbewertungen zeigen. */
.reviews-omnibus-notice {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text);
}
.reviews-omnibus-notice i {
    color: var(--color-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.reviews-omnibus-notice strong {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}

/* Filter + Sort Bar */
.filter-bar {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.filter-bar__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.star-filters {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    flex: 1;
}
.star-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    text-decoration: none;
}
.star-filter-btn:hover {
    border-color: var(--color-star);
    color: var(--color-text);
    background: #fff9ee;
}
.star-filter-btn--active {
    background: var(--color-star);
    border-color: var(--color-star);
    color: var(--color-white);
}
.star-filter-btn--active:hover {
    background: #d4891a;
    border-color: #d4891a;
    color: var(--color-white);
}
.filter-bar__divider {
    width: 1px;
    height: 24px;
    background: var(--color-border);
    flex-shrink: 0;
}
.sort-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.35rem var(--sp-3);
    font-size: var(--font-size-sm);
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-white);
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.sort-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Reviews Meta Row */
.reviews-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.reviews-meta strong { color: var(--color-text); }
.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: #fff9ee;
    border: 1px solid var(--color-star);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.active-filter-chip button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    line-height: 1;
}
.active-filter-chip button:hover { color: var(--color-danger); }

/* Review Cards */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.review-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base);
}
.review-card:hover { box-shadow: 0 4px 18px rgba(57,97,120,0.13); }
.review-card__product {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
}
.review-card__product:hover { background: var(--color-primary-light); }
.review-product-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.review-product-thumb img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain;
}
.review-product-name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    line-height: var(--line-height-tight);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-card__product:hover .review-product-name { color: var(--color-primary); }
.review-card__inner {
    padding: var(--sp-3);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.review-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}
.review-avatar--f { background: var(--color-primary-light); color: var(--color-primary); }
.review-avatar--m { background: #e8f0ff; color: #3060b0; }
.review-meta { flex: 1; min-width: 0; }
.review-meta__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1.2;
}
.review-meta__row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: 0.2rem;
}
.review-meta__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.review-meta__flag { font-size: 0.9rem; }
.review-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.35rem;
    white-space: nowrap;
}
.review-stars {
    color: var(--color-star);
    font-size: var(--font-size-sm);
    letter-spacing: 1px;
    flex-shrink: 0;
    padding-top: 2px;
}
.review-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--sp-1);
    line-height: var(--line-height-tight);
}
.review-card__text {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text);
    flex: 1;
    margin-bottom: var(--sp-3);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.review-card__reply {
    background: var(--color-bg-subtle);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}
.review-card__reply-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}
.review-card__reply-header i { font-size: 0.7rem; }
.review-card__reply-text { color: var(--color-text); }
.review-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    border-top: 1px solid var(--color-border);
    padding-top: var(--sp-2);
}
.review-helpful__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    flex: 1;
}
.vote-btns {
    display: flex;
    gap: var(--sp-1);
}
.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-base);
}
.vote-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.vote-btn--up:hover { background: #f0fdf4; border-color: var(--color-success); color: var(--color-success); }

/* Pagination */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
}
.pagination-info {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.pagination-info strong { color: var(--color-text); }
.pagination-links {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
}
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.page-btn--active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.page-btn--active:hover { background: var(--color-primary-dark); }
.page-btn--wide { width: auto; padding: 0 var(--sp-2); }

/* Responsive */
@media (max-width: 991px) {
    .rating-hero {
        grid-template-columns: 160px 1fr;
        grid-template-rows: auto auto;
    }
    .hero-ai {
        grid-column: 1 / -1;
    }
    .hero-bars { border-right: none; }
}
@media (max-width: 767px) {
    .rating-hero {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        padding: var(--sp-3);
    }
    .hero-score {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: var(--sp-3);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sp-3);
    }
    .review-grid { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════
   === WRITE-REVIEW PAGE ===
   product_reviews_write.php + ggf. Modal auf product_info.php
   Modal-ready: .review-form__* Klassen haben KEINE
   Abhängigkeit zu .review-form-card — sie funktionieren
   auch direkt in einem .modal-body.
═══════════════════════════════════════════════ */
.write-review-page {
    padding: var(--sp-4) 0 var(--sp-6);
}
.write-review-page .page-heading {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--sp-1);
    line-height: var(--line-height-tight);
}
.write-review-page .page-subheading {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-4);
}

/* --- Form-Card Wrapper (nur Standalone, NICHT im Modal) --- */
/* display+width explizit: im Frontend gibt es Legacy-Regeln aus dem
   alten osCommerce-Stack, die <form>-Elemente shrink-to-fit rendern. */
.review-form-card {
    display: block;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--sp-5);
}

/* --- Identity-Hint (oben im Formular) --- */
.review-form__identity-hint {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: var(--font-size-sm);
}
.review-form__identity-hint i {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
}
.review-form__identity-hint strong { color: var(--color-text); }
.review-form__identity-hint-disclaimer {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}
.review-form__verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.4rem;
    margin-left: var(--sp-2);
    white-space: nowrap;
}

/* --- Generisches Formfeld --- */
.review-form__field {
    margin-bottom: var(--sp-4);
}
.review-form__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--sp-2);
}
.review-form__label-required::after {
    content: ' *';
    color: var(--color-danger);
}
.review-form__label-optional {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin-left: var(--sp-1);
}

/* --- Rating (Sterne) --- */
.review-form__rating-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.review-form__stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--sp-1);
}
.review-form__star-input {
    display: none;
}
.review-form__star {
    font-size: 2.25rem;
    line-height: 1;
    color: #d0d0d0;
    cursor: pointer;
    transition: color var(--transition-base), transform var(--transition-base);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    margin-bottom: 0;
}
.review-form__star:hover,
.review-form__star:hover ~ .review-form__star,
.review-form__star-input:checked ~ .review-form__star {
    color: var(--color-star);
}
.review-form__star:hover {
    transform: scale(1.08);
}
.review-form__rating-hint {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.review-form__rating-hint-current {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}
.review-form__rating-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    max-width: 300px;
    margin-top: var(--sp-1);
    padding: 0 var(--sp-1);
}

/* --- Empfehlungs-Toggle (Segmented Control) --- */
.review-form__recommend-group {
    display: inline-flex;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px;
    gap: 3px;
}
.review-form__recommend-input { display: none; }
.review-form__recommend-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.55rem var(--sp-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    background: transparent;
    min-height: 44px;
    white-space: nowrap;
    margin-bottom: 0;
}
.review-form__recommend-btn:hover {
    background: var(--color-white);
    color: var(--color-text);
}
.review-form__recommend-btn i { font-size: var(--font-size-sm); }
.review-form__recommend-input:checked + .review-form__recommend-btn--yes {
    background: var(--color-success-light);
    color: var(--color-success);
    border-color: var(--color-success);
}
.review-form__recommend-input:checked + .review-form__recommend-btn--no {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* --- Input + Textarea --- */
.review-form__input,
.review-form__textarea {
    display: block;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem var(--sp-3);
    font-size: var(--font-size-base);
    font-family: var(--font-base);
    color: var(--color-text);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.review-form__input:focus,
.review-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.review-form__input::placeholder,
.review-form__textarea::placeholder {
    color: #b8b8b8;
}
.review-form__textarea {
    min-height: 160px;
    resize: vertical;
    line-height: var(--line-height-base);
}

/* --- Field footer (Counter + Status) --- */
.review-form__field-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--sp-1);
    flex-wrap: wrap;
}
.review-form__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.review-form__status--ok { color: var(--color-success); }
.review-form__status--warn { color: var(--color-warning); }
.review-form__status--error { color: var(--color-danger); }
.review-form__counter strong { color: var(--color-text); }

.review-form__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--sp-1);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Actions (Submit + Cancel) --- */
.review-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.review-form__actions .btn-cancel {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--sp-2);
    transition: color var(--transition-base);
    background: none;
    border: none;
}
.review-form__actions .btn-cancel:hover { color: var(--color-primary); }
.review-form__actions .btn-submit,
.thank-you-actions .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.85rem var(--sp-5);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-base);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-base), transform var(--transition-base);
    min-height: 48px;
}
.review-form__actions .btn-submit:hover,
.thank-you-actions .btn-submit:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-1px);
}

/* --- Error-State --- */
.review-form__input--error,
.review-form__textarea--error {
    border-color: var(--color-danger);
    background: var(--color-danger-light);
}
.review-form__input--error:focus,
.review-form__textarea--error:focus {
    box-shadow: 0 0 0 0.2rem rgba(204, 0, 51, 0.2);
    border-color: var(--color-danger);
}
.review-form__error-msg {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    margin-top: var(--sp-1);
}
.review-form__banner-error {
    background: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    font-size: var(--font-size-sm);
    color: var(--color-danger);
}
.review-form__banner-error i { flex-shrink: 0; margin-top: 0.2rem; }
.review-form__banner-error ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }

/* Kurze Notice über der Form-Card (vermeidet card-in-card) */
.review-form__error-notice {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--sp-3);
}
.review-form__error-notice i { font-size: var(--font-size-base); flex-shrink: 0; }

/* --- Kontext-Sidebar --- */
.context-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.context-sidebar__product {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--sp-4);
    text-align: center;
}
.product-card__image {
    width: 250px;
    max-width: 100%;
    margin: 0 auto var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    overflow: hidden;
    line-height: 0; /* verhindert Descender-Gap unter dem <img> */
}
.product-card__image img {
    display: block;
    width: 100%;
    height: auto;
}
.product-card__name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--sp-1);
    line-height: var(--line-height-tight);
}
.product-card__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-2);
    line-height: 1.5;
}
.product-card__meta-label {
    font-weight: var(--font-weight-medium);
}
.product-card__price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--sp-3);
}
.product-card__price del {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-right: var(--sp-1);
}
.product-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 0.45rem var(--sp-3);
    transition: all var(--transition-base);
}
.product-card__link:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* --- Richtlinien-Panel --- */
.context-sidebar__guidelines {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.guidelines__header {
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    list-style: none;
}
.guidelines__header::-webkit-details-marker { display: none; }
.guidelines__header-icon {
    font-size: var(--font-size-lg);
}
.guidelines__header-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.guidelines__chevron {
    color: var(--color-text-muted);
    transition: transform var(--transition-base);
    font-size: var(--font-size-xs);
}
details[open] .guidelines__chevron { transform: rotate(180deg); }
.guidelines__body {
    padding: var(--sp-3) var(--sp-4);
}
.guidelines__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.guidelines__item {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    padding: 0.35rem 0;
    line-height: 1.5;
}
.guidelines__item i {
    flex-shrink: 0;
    margin-top: 0.2rem;
    font-size: var(--font-size-sm);
}
.guidelines__item--do i { color: var(--color-success); }
.guidelines__item--dont i { color: var(--color-danger); }

/* --- Thank-you Screen --- */
.thank-you-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.thank-you-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--sp-4);
    background: var(--color-success-light);
    color: var(--color-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.thank-you-heading {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--sp-2);
    line-height: var(--line-height-tight);
}
.thank-you-text {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--sp-5);
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
.thank-you-product {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
    text-align: left;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.thank-you-product__image {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.thank-you-product__image img {
    max-width: 100%;
    max-height: 100%;
}
.thank-you-product__info { flex: 1; min-width: 0; }
.thank-you-product__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}
.thank-you-product__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.thank-you-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}
.thank-you-actions .btn-submit { min-width: 260px; justify-content: center; }
.thank-you-link {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}
.thank-you-link:hover { text-decoration: underline; }

/* --- Responsive (Write-Review) --- */
@media (max-width: 991px) {
    .review-form-card {
        padding: var(--sp-4);
    }
    .review-form__rating-wrap {
        gap: var(--sp-2);
    }
}
@media (max-width: 767px) {
    .review-form-card {
        padding: var(--sp-3);
    }
    .write-review-page .page-heading {
        font-size: 1.65rem;
    }
    .review-form__star {
        font-size: 2rem;
    }
    .review-form__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .review-form__actions .btn-submit {
        width: 100%;
        justify-content: center;
    }
    .review-form__actions .btn-cancel {
        text-align: center;
    }
    .review-form__recommend-group {
        width: 100%;
    }
    .review-form__recommend-btn {
        flex: 1;
        justify-content: center;
    }
    .context-sidebar__product {
        padding: var(--sp-3);
    }
    .product-card__image {
        width: 200px;
    }
    .thank-you-card {
        padding: var(--sp-4) var(--sp-3);
    }
    .thank-you-icon {
        width: 72px;
        height: 72px;
        font-size: 2.25rem;
    }
}

/* === TAGCLOUD (GOS-86 SEO-10) === */
/* Gewichtete Keyword-Wolke mit freiem Text-Fluss auf Homepage & advanced_search.php.
   5 Größen-Abstufungen (tagcloud__tag--size-1…size-5) reflektieren die Häufigkeit
   des Begriffs in den Top-30-Produktnamen. Keine Pills/Listen — die Tags fließen
   inline wie echter Text. Responsive: max-Größe skaliert per clamp() mit dem Viewport. */
.tagcloud {
    margin: var(--sp-3) auto var(--sp-5);
    padding: var(--sp-3) var(--sp-3);
    max-width: 60rem;
    text-align: center;
}
.tagcloud__words {
    margin: 0;
    padding: 0;
    line-height: 2;              /* gleichmäßige Zeilenhöhe auch bei gemischten Größen */
    word-spacing: 0.4em;
}
.tagcloud__tag {
    display: inline-block;
    margin: 0 0.15em;
    color: var(--color-primary);
    text-decoration: none;
    line-height: 1;
    transition: color var(--transition-base), text-shadow var(--transition-base);
    vertical-align: baseline;
}
.tagcloud__tag:hover,
.tagcloud__tag:focus-visible {
    color: var(--color-primary-dark);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.tagcloud__tag:focus-visible {
    outline: none;
    text-shadow: 0 0 0 var(--color-primary);
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* Base-Skalen (Mobile-first): bewusst eng gehalten, damit auf 375 px kein Zeilenbruch
   zwischen Tag-Wörtern absurd wirkt. clamp(min, vw-scale, max) glättet die Sprünge.   */
.tagcloud__tag--size-1 { font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem); font-weight: var(--font-weight-normal); opacity: 0.80; }
.tagcloud__tag--size-2 { font-size: clamp(0.90rem, 0.85rem + 0.3vw, 1.05rem); font-weight: var(--font-weight-normal); opacity: 0.92; }
.tagcloud__tag--size-3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); font-weight: var(--font-weight-medium); }
.tagcloud__tag--size-4 { font-size: clamp(1.25rem, 1.10rem + 0.7vw, 1.55rem); font-weight: var(--font-weight-medium); }
.tagcloud__tag--size-5 { font-size: clamp(1.45rem, 1.25rem + 1.0vw, 1.95rem); font-weight: var(--font-weight-bold); }

@media (min-width: 576px) {
    .tagcloud { padding: var(--sp-4) var(--sp-4); }
    .tagcloud__words { line-height: 2.1; word-spacing: 0.5em; }
}
@media (min-width: 992px) {
    .tagcloud__words { line-height: 2.2; word-spacing: 0.6em; }
    .tagcloud__tag { margin: 0 0.2em; }
}

/* === HERO BLOCK (GOS-86 SEO-01/CVR-01) === */
/* Above-the-fold-Zone der Homepage: H1 + USP-Bar mit Reviews-Count und
   Jahren-Erfahrung. Liefert Crawlern die einzige H1 der Seite und Nutzern
   die fehlende Verkaufsargumentation oberhalb des Hero-Sliders. */
.hero-block {
    margin: var(--sp-1) 0 var(--sp-3);
    text-align: left;
}
.hero-headline {
    font-size: clamp(1.4rem, 1.0rem + 1.2vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin: 0 0 var(--sp-2);
}
.hero-usp {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--sp-1);
}
.hero-usp__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: clamp(0.82rem, 0.75rem + 0.25vw, 0.95rem);
    color: var(--color-text);
    line-height: 1.3;
}
.hero-usp__item strong {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: 1.05em;
}
.hero-usp__item:not(:last-child)::after {
    content: '·';
    margin: 0 0.7em;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    opacity: 0.6;
}
.hero-usp__icon {
    /* Position-absolute-Centering ist robust gegen FA-Glyph-Baseline-Offsets:
       das ::before wird absolut positioniert und per translate(-50%,-50%)
       exakt auf den Mittelpunkt geschoben — unabhaengig davon, wo FA das
       Glyph in seiner em-Box platziert hat. */
    display: inline-block;
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
.hero-usp__icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.95rem;
    line-height: 1;
}
.hero-usp__item--quality    .hero-usp__icon { color: #2e7d32; background: #e8f5e9; }
.hero-usp__item--shipping   .hero-usp__icon { color: #1565c0; background: #e3f2fd; }
.hero-usp__item--packaging  .hero-usp__icon { color: #6a4c93; background: #ede7f6; }
.hero-usp__item--reviews    .hero-usp__icon { color: #d4a017; background: #fff8e1; }
.hero-usp__item--experience .hero-usp__icon { color: var(--color-primary); background: var(--color-primary-light); }

@media (max-width: 575px) {
    .hero-headline                    { font-size: 1.25rem; margin-bottom: var(--sp-2); }
    .hero-usp__item                   { font-size: 0.78rem; }
    .hero-usp__icon                   { width: 1.4rem; height: 1.4rem; }
    .hero-usp__icon::before           { font-size: 0.8rem; }
    .hero-usp__item:not(:last-child)::after { margin: 0 0.5em; }
}

/* === LAZY-BLOCK (GOS-86 PERF-02) === */
/* Below-the-fold-Container der Homepage (Gliders, Tagcloud, Info-Longform,
   Countries). `content-visibility: auto` uebersperingt Layout/Paint, bis der
   Block den Viewport nahekommt — beschleunigt Initial-Paint und LCP spuerbar.
   `contain-intrinsic-size` reserviert die Box-Hoehe vorab → kein CLS beim
   Einblenden. Dimensionen pro Variant je nach typischer Content-Groesse.
   Fallback: Browser ohne Support (< Safari 18 / < Firefox 125) rendern wie
   bisher — keine Regression.
   Padding-Inline + negatives Margin schaffen Platz fuer Glider-Pfeile, die
   bei left/right:-15px aus dem Glider ragen und sonst vom paint-containment
   geclippt wuerden. */
.lazy-block {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;  /* Glider: Heading + Card-Reihe + Pager */
    padding-inline: 20px;
    margin-inline: -20px;
}
.lazy-block--compact  { contain-intrinsic-size: auto 280px; }  /* Tagcloud */
.lazy-block--longform { contain-intrinsic-size: auto 800px; }  /* Information-Block (id=31) */
.lazy-block--wide     { contain-intrinsic-size: auto 1100px; } /* Countries-Liste */

/* === OPC ONE-PAGE-CHECKOUT (GOS-98.B) ====================================
   Single-Page-Checkout, parallel zum 3-Schritt-Flow aktivierbar via
   CHECKOUT_ONEPAGE_ENABLED. Markup nach Mockup V2 (GOS-98), zusätzlich
   Adress-/Versand-Modal für inline-CRUD. Alle Klassen unter .opc-page-Scope,
   damit kein Konflikt mit Legacy-Stylesheet. */

.opc-page {
    /* Lokale Token-Erweiterungen (Mockup V2 v2.0 Style-Guide). Globale
       Tokens stehen oben im :root-Block; hier nur OPC-spezifische Ergänzungen.
       .opc-page ist ein Wrapper-Div innerhalb des Standard-Layouts (zwischen
       Header und Footer aus includes/header.php / footer.php). */
    --opc-border-strong:  #c4cdd5;
    --opc-bg-muted:       #eef2f6;
    --opc-container-max:  1180px;
    --opc-shadow-hover:   0 4px 18px rgba(57, 97, 120, 0.13);

    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    padding: var(--sp-4) 0 var(--sp-6);
    /* negative Margins kompensieren ggf. .container-fluid-Padding aus dem
       Standard-Layout, damit der OPC-Hintergrund full-bleed wirkt. */
    margin: 0 calc(-1 * var(--sp-3));
}
.opc-page *,
.opc-page *::before,
.opc-page *::after { box-sizing: border-box; }
.opc-page a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}
.opc-page a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.opc-page img { max-width: 100%; display: block; }
.opc-page button { font-family: inherit; cursor: pointer; }
.opc-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* === OPC STEPPER (3 Schritte) ============================================= */
.opc-steps {
    list-style: none;
    max-width: 600px;
    margin: var(--sp-5) auto var(--sp-4);
    padding: 0 var(--sp-3);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
}
.opc-steps__item {
    position: relative;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.opc-steps__circle {
    width: 44px; height: 44px;
    margin: 0 auto var(--sp-2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    position: relative;
    z-index: 2;
    transition: all var(--transition-base);
}
.opc-steps__item + .opc-steps__item::before {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(-50% + 22px);
    right: calc(50% + 22px);
    height: 2px;
    background: var(--color-border);
    z-index: 1;
}
.opc-steps__item--done .opc-steps__circle {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}
.opc-steps__item--done + .opc-steps__item::before,
.opc-steps__item--current + .opc-steps__item::before {
    background: var(--color-success);
}
.opc-steps__item--current .opc-steps__circle {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(38, 38, 38, 0.08);
}
.opc-steps__item--current .opc-steps__label {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}
.opc-steps__label { font-size: var(--font-size-sm); }
@media (max-width: 575.98px) {
    .opc-steps__circle { width: 36px; height: 36px; font-size: var(--font-size-sm); }
    .opc-steps__item + .opc-steps__item::before { top: 18px; left: calc(-50% + 18px); right: calc(50% + 18px); }
    .opc-steps__label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0,0,0,0);
    }
}

/* === OPC LAYOUT ============================================================ */
.opc-container {
    max-width: var(--opc-container-max);
    margin: 0 auto;
    padding: 0 var(--sp-3) var(--sp-6);
}
.opc-heading {
    text-align: center;
    margin-bottom: var(--sp-4);
}
.opc-heading h1 {
    margin: 0 0 var(--sp-2);
    color: var(--color-primary);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}
.opc-heading p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.opc-heading strong { color: var(--color-text); }

.opc-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 992px) {
    .opc-grid {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}

/* === OPC TOP-SELECTOR (Pill-Tabs für Zahlart) ============================= */
.opc-selector {
    margin-bottom: var(--sp-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--sp-3) var(--sp-4);
}
.opc-selector__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.opc-selector__title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}
.opc-selector__title i { color: var(--color-primary); }
.opc-selector__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
@media (max-width: 575.98px) {
    .opc-selector__hint { display: none; }
}
.opc-selector__tabs {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.opc-selector__tabs::-webkit-scrollbar { display: none; }
.opc-selector__tab {
    flex: 1 0 auto;
    min-width: 110px;
    scroll-snap-align: start;
    border: 1.5px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-base);
    line-height: 1.2;
}
.opc-selector__tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.opc-selector__tab i,
.opc-selector__tab .opc-selector__icon {
    font-size: 1.25rem;
    height: 22px;
    display: flex; align-items: center; justify-content: center;
}
.opc-selector__tab--active {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(153, 0, 102, 0.08);
}
.opc-selector__tab--active i { color: var(--color-primary); }
.opc-selector__tab[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(60%);
}

/* === OPC CARDS ============================================================ */
.opc-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--sp-3);
    overflow: hidden;
}
.opc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    gap: var(--sp-2);
}
.opc-card__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-primary);
}
.opc-card__title small {
    display: inline-block;
    margin-left: var(--sp-2);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-muted);
}
.opc-card__action {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.opc-card__action:hover { color: var(--color-primary-dark); text-decoration: underline; }
.opc-card__body { padding: var(--sp-4); }
.opc-card__body--flush { padding: 0; }

/* === OPC ADDRESS GRID ===================================================== */
.opc-address-grid {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 576px) {
    .opc-address-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.opc-address-block {
    padding: var(--sp-4);
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 576px) {
    .opc-address-block + .opc-address-block {
        border-left: 1px solid var(--color-border);
    }
}
.opc-address-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.opc-address-block__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.opc-address-block__edit {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--color-text-muted);
    background: none;
    border: 0;
    cursor: pointer;
    transition: all var(--transition-base);
}
.opc-address-block__edit:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
    text-decoration: none;
}
.opc-address-block address {
    font-style: normal;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text);
}
.opc-address-block address strong {
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--sp-1);
}

/* === OPC SHIPPING ROW ===================================================== */
.opc-shipping-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    cursor: pointer;
    border: 0;
    width: 100%;
    text-align: left;
    transition: background var(--transition-base);
}
.opc-shipping-row:hover { background: var(--opc-bg-muted); }
.opc-shipping-row--locked,
.opc-shipping-row--locked:hover {
    cursor: default;
    background: var(--color-bg-subtle);
}
.opc-shipping-row--locked .opc-shipping-row__chevron { display: none; }
.opc-shipping-row__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.opc-shipping-row__text { flex: 1; }
.opc-shipping-row__text strong { display: block; font-weight: var(--font-weight-bold); color: var(--color-text); }
.opc-shipping-row__text span { color: var(--color-text-muted); }
.opc-shipping-row__teaser {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    background: var(--color-success-light);
    color: var(--color-success);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}
.opc-shipping-row__chevron {
    color: var(--color-text-muted);
    margin-left: var(--sp-1);
    flex-shrink: 0;
}
.opc-shipping-row__dhl {
    background: #ffcc00;
    color: #d40511;
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
}

/* === OPC PRODUCT LINES ==================================================== */
.opc-product-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
}
.opc-product-line:last-child { border-bottom: 0; }
.opc-product-line__thumb {
    width: 72px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}
.opc-product-line__thumb img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.opc-product-line__info { min-width: 0; }
.opc-product-line__name {
    margin: 0 0 var(--sp-1);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
}
.opc-product-line__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.opc-product-line__qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}
.opc-product-line__price { text-align: right; min-width: 96px; }
.opc-product-line__price strong {
    display: block;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.opc-product-line__price small {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
@media (max-width: 575.98px) {
    .opc-product-line { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; }
    .opc-product-line__thumb { width: 56px; }
    .opc-product-line__price { grid-column: 2; text-align: left; min-width: 0; }
    .opc-product-line__price strong { display: inline; }
}

/* === OPC TOTALS =========================================================== */
.opc-totals {
    list-style: none;
    margin: 0;
    padding: 0;
}
.opc-totals li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.opc-totals li strong {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.opc-totals li.opc-totals__grand {
    margin-top: var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 2px solid var(--color-border);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}
.opc-totals li.opc-totals__grand strong {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}
.opc-totals__note {
    margin: var(--sp-3) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
}

/* === OPC COMMENT (collapsible) ============================================ */
.opc-comment {
    margin-top: var(--sp-3);
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--sp-3) var(--sp-4);
}
.opc-comment summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    user-select: none;
}
.opc-comment summary::-webkit-details-marker { display: none; }
.opc-comment summary .fa-plus {
    transition: transform var(--transition-base);
}
.opc-comment[open] summary .fa-plus { transform: rotate(45deg); }
.opc-comment textarea {
    display: block;
    width: 100%;
    margin-top: var(--sp-3);
    min-height: 96px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--font-size-sm);
    resize: vertical;
    background: var(--color-white);
    color: var(--color-text);
}
.opc-comment textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.opc-comment__counter {
    display: block;
    margin-top: var(--sp-1);
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* === OPC PAYMENT-PANE (right column) ====================================== */
.opc-pane { position: static; }
@media (min-width: 992px) {
    .opc-pane {
        position: sticky;
        top: var(--sp-3);
    }
}
.opc-pane__header {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-white);
}
.opc-pane__header h2 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.opc-pane__header p {
    margin: var(--sp-1) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* === OPC PAYMENT-METHODS ================================================== */
.opc-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}
.opc-methods__section {
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.opc-methods__section:first-child { border-top: 0; }
.opc-methods li { border-bottom: 1px solid var(--color-border); }
.opc-methods li:last-child { border-bottom: 0; }

.opc-method__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.opc-method__header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    transition: background var(--transition-base);
    position: relative;
}
.opc-method__header:hover {
    background: var(--color-bg-subtle);
}
.opc-method__indicator {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    position: relative;
    transition: all var(--transition-base);
}
.opc-method__indicator::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--color-primary);
    transform: scale(0);
    transition: transform var(--transition-base);
}
.opc-method__radio:checked + .opc-method__header .opc-method__indicator {
    border-color: var(--color-primary);
}
.opc-method__radio:checked + .opc-method__header .opc-method__indicator::after {
    transform: scale(1);
}
.opc-method__radio:checked + .opc-method__header {
    background: var(--color-primary-light);
}
.opc-method__radio:focus-visible + .opc-method__header .opc-method__indicator {
    box-shadow: var(--shadow-focus);
}
.opc-method__name {
    flex: 1;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}
.opc-method__name small {
    display: block;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}
.opc-method__logo {
    flex-shrink: 0;
    height: 22px;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}
.opc-method__logo img,
.opc-method__logo svg { height: 22px; width: auto; }
.opc-method__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    background: var(--color-white);
}
.opc-method__radio:checked ~ .opc-method__body {
    max-height: 800px;
}
.opc-method__body-inner {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-top: 1px dashed var(--color-border);
}
.opc-method__hint {
    margin: 0 0 var(--sp-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}
.opc-method__hint i {
    color: var(--color-info);
    margin-top: 3px;
    flex-shrink: 0;
}

/* PayPal-Container und Card-Form werden vom paypal_checkout-Modul gerendert.
   Das Modul liefert eigene IDs (#paypal-button-container, #paypal-card-container,
   #paypal-applepay-container, #paypal-googlepay-button-container, #paypal-pui-container).
   Wir setzen nur sicher, dass der Container in unserem Body sichtbar wird. */
.opc-method__body-inner #paypal-button-container,
.opc-method__body-inner #paypal-applepay-container,
.opc-method__body-inner #paypal-googlepay-button-container,
.opc-method__body-inner #paypal-pui-container {
    min-height: 48px;
}

/* === OPC ACTION-BLOCK ===================================================== */
.opc-action {
    padding: var(--sp-4);
    background: var(--color-bg-subtle);
    border-top: 2px solid var(--color-border);
}
.opc-action__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px dashed var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.opc-action__total strong {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}
.opc-agb {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    background: var(--color-white);
    border: 1.5px solid var(--opc-border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    transition: all var(--transition-base);
    position: relative;
}
.opc-agb:hover { border-color: var(--color-primary); }
.opc-agb input {
    margin: 2px 0 0;
    width: 20px; height: 20px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
    cursor: pointer;
}
.opc-agb input:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.opc-agb input:checked + span .opc-agb__required { display: none; }
.opc-agb__required {
    display: inline-block;
    margin-left: var(--sp-1);
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}
.opc-action__cta { margin-top: var(--sp-3); }
.opc-cta {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    transition: all var(--transition-base);
    box-shadow: 0 4px 12px rgba(153, 0, 102, 0.18);
}
.opc-cta:hover { background: var(--color-primary-dark); box-shadow: 0 6px 18px rgba(153, 0, 102, 0.25); }
.opc-cta:disabled { background: var(--opc-border-strong); color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; }
.opc-cta i { font-size: 0.9em; }

.opc-action__sublabel {
    margin: var(--sp-2) 0 0;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.opc-action__sublabel i { color: var(--color-success); margin-right: 4px; }

.opc-badges {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: center;
}
.opc-badge {
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    filter: grayscale(40%);
    opacity: 0.85;
}
.opc-badge--visa   { color: #1a1f71; }
.opc-badge--mc     { color: #eb001b; }
.opc-badge--sepa   { color: #10298e; }
.opc-badge--apple  { color: #000; }
.opc-badge--google { color: #4285f4; }
.opc-badge--pp     { color: #003087; }
.opc-badge--bank   { color: var(--color-text); }

/* === OPC FOOTER =========================================================== */
.opc-footer {
    margin-top: var(--sp-6);
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-white);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.opc-footer__inner {
    max-width: var(--opc-container-max);
    margin: 0 auto;
    padding: 0 var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.opc-footer a { color: var(--color-text-muted); }
.opc-footer__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}
.opc-footer__links {
    display: flex;
    gap: var(--sp-3);
}

/* === OPC MODAL (Adress-Edit + Versand-Auswahl) ============================ */
.opc-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(38, 38, 38, 0.6);
    padding: var(--sp-3);
    animation: opc-fade-in 160ms ease-out;
}
.opc-modal[aria-hidden="false"] { display: flex; }
@keyframes opc-fade-in { from { opacity: 0; } to { opacity: 1; } }
.opc-modal__dialog {
    background: var(--color-white);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 2 * var(--sp-3));
    display: flex;
    flex-direction: column;
}
@media (max-width: 575.98px) {
    .opc-modal { padding: 0; }
    .opc-modal__dialog {
        max-width: 100%;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}
.opc-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.opc-modal__header h2 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}
.opc-modal__close {
    background: none;
    border: 0;
    font-size: 1.4rem;
    color: var(--color-text-muted);
    cursor: pointer;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
}
.opc-modal__close:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.opc-modal__body {
    padding: var(--sp-4);
    overflow-y: auto;
    flex: 1;
}
.opc-modal__footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    flex-shrink: 0;
    background: var(--color-bg-subtle);
}
.opc-modal__footer .opc-btn { min-width: 120px; }

/* === OPC FORM-FIELDS (Address-Modal) ====================================== */
.opc-field { margin-bottom: var(--sp-3); }
.opc-field__label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.opc-field__input,
.opc-field__select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--font-size-sm);
    background: var(--color-white);
    color: var(--color-text);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.opc-field__input:focus,
.opc-field__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.opc-field__input--error { border-color: var(--color-danger); }
.opc-field__error {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}
.opc-field-row {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: 1fr 1fr;
}
.opc-field-row--postcode-city { grid-template-columns: 120px 1fr; }
@media (max-width: 575.98px) {
    .opc-field-row,
    .opc-field-row--postcode-city { grid-template-columns: 1fr; }
}
.opc-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.opc-checkbox input { accent-color: var(--color-primary); width: 18px; height: 18px; }

/* === OPC ADDRESS-PICKER (Modal-Body Adresse wählen) ======================= */
.opc-addr-list {
    list-style: none;
    margin: 0 0 var(--sp-3);
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}
.opc-addr-list label {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}
.opc-addr-list label:hover { border-color: var(--color-primary); }
.opc-addr-list input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.opc-addr-list input[type="radio"]:checked + .opc-addr-list__content {
    color: var(--color-text);
}
.opc-addr-list label:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.opc-addr-list__content { flex: 1; font-size: var(--font-size-sm); }
.opc-addr-list__content strong { display: block; margin-bottom: 2px; font-weight: var(--font-weight-bold); }
.opc-addr-list__edit {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}
.opc-addr-list__edit:hover { background: var(--color-white); color: var(--color-primary); }
.opc-addr-add {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    background: var(--color-white);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    width: 100%;
    justify-content: center;
}
.opc-addr-add:hover { border-color: var(--color-primary); background: var(--color-primary-light); }

/* === OPC SHIPPING-PICKER (Modal-Body Versandart wählen) =================== */
.opc-ship-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-2);
}
.opc-ship-list label {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
}
.opc-ship-list label:hover { border-color: var(--color-primary); }
.opc-ship-list label:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.opc-ship-list input[type="radio"] {
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.opc-ship-list__title { flex: 1; font-weight: var(--font-weight-medium); }
.opc-ship-list__title small { display: block; font-weight: var(--font-weight-normal); color: var(--color-text-muted); font-size: var(--font-size-xs); margin-top: 2px; }
.opc-ship-list__cost { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }

/* === OPC BUTTONS (Modal-Footer) =========================================== */
.opc-btn {
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
}
.opc-btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.opc-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.opc-btn--secondary {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
}
.opc-btn--secondary:hover { background: var(--color-bg-subtle); }
.opc-btn--danger {
    background: var(--color-white);
    color: var(--color-danger);
    border-color: var(--color-border);
}
.opc-btn--danger:hover { background: var(--color-danger-light); border-color: var(--color-danger); }

/* === OPC TOAST (Fehler-/Success-Meldung) ================================== */
.opc-toast {
    position: fixed;
    top: var(--sp-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--color-text);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
    animation: opc-slide-down 200ms ease-out;
}
.opc-toast--error { background: var(--color-danger); }
.opc-toast--success { background: var(--color-success); }
@keyframes opc-slide-down {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* === OPC LOADING ========================================================== */
.opc-loading {
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}
.opc-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.4);
    border-radius: inherit;
}
.opc-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: opc-spin 600ms linear infinite;
}
@keyframes opc-spin { to { transform: rotate(360deg); } }

/* Loading-Bar oben (YouTube/GitHub-Pattern) — fixiert am Viewport-Top, fade-in
   bei aktivem AJAX-Dispatch, Indeterminate-Animation. */
.opc-loading-bar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
    background: rgba(153, 0, 102, 0.08);
}
.opc-loading-bar--active { opacity: 1; }
.opc-loading-bar__progress {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg,
        var(--color-primary-light),
        var(--color-primary),
        var(--color-primary-dark),
        var(--color-primary),
        var(--color-primary-light));
    background-size: 200% 100%;
    animation: opc-loading-slide 1.2s linear infinite, opc-loading-shimmer 2s linear infinite;
}
@keyframes opc-loading-slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}
@keyframes opc-loading-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: -200% 0; }
}
/* === END OPC ============================================================== */


/* === GOS-99: Gallery (Customer-Facing, frontend-style-guide v2.0) ==========
   Reimplementierung der Galerie-UI (gallery.php). BEM-Naming, Tokens-only,
   keine Inline-Styles. Klassifikations-Felder (genus, species, hybrid_status,
   care_*, tags) werden rein optional gerendert — fehlt das Datum, fehlt das
   Element. Card-Hoehe wird ueber aspect-ratio + flex erzwungen, sodass un-
   einheitliche Bildformate dieselbe Karten-Geometrie ergeben.
============================================================================ */

/* Wrapper aussen — begrenzt Breite + Padding */
.gallery-page {
    background: var(--color-bg-subtle);
    padding-bottom: var(--sp-5);
}

/* --- HERO: H1 + Count + Filter-Pills ----------------------------------- */
.gallery-hero {
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg-subtle) 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
}
.gallery-hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}
.gallery-hero__title {
    color: var(--color-primary);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--sp-2);
    letter-spacing: -0.01em;
}
.gallery-hero__count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--sp-3);
}
.gallery-hero__count strong {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}
.gallery-hero__filters {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-top: var(--sp-3);
}

/* Filter-Pill (Genus-Filter) */
.gallery-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong);
    background: var(--color-white);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
    line-height: 1.4;
}
.gallery-filter-pill:hover,
.gallery-filter-pill:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}
.gallery-filter-pill--active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.gallery-filter-pill--active:hover,
.gallery-filter-pill--active:focus {
    background: var(--color-primary-dark);
    color: var(--color-white);
    border-color: var(--color-primary-dark);
}
.gallery-filter-pill__count {
    background: rgba(0, 0, 0, 0.08);
    padding: 0 var(--sp-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}
.gallery-filter-pill--active .gallery-filter-pill__count {
    background: rgba(255, 255, 255, 0.22);
    color: var(--color-white);
}

/* Button-Variante (toggle Weitere/Weniger): Reset Browser-Defaults,
   gleiches visuelles Erscheinungsbild wie die <a>-Pills. */
button.gallery-filter-pill {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
}

/* Genus-Pills jenseits Top-N (data-extra) sind defaultmaessig versteckt;
   Container.is-expanded blendet sie ein. */
.gallery-hero__filters .gallery-filter-pill[data-extra="1"] { display: none; }
.gallery-hero__filters.is-expanded .gallery-filter-pill[data-extra="1"] { display: inline-flex; }
/* Im aufgeklappten Zustand verbirgt sich der Counter im "Weniger"-Button —
   weniger visuelles Rauschen wenn alles sichtbar ist. */
.gallery-hero__filters.is-expanded .gallery-filter-pill--more .gallery-filter-pill__count { display: none; }

/* --- TOOLBAR: Page-Indicator + Per-Page-Select ------------------------- */
.gallery-toolbar {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.gallery-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.gallery-toolbar__group label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin: 0;
}
.gallery-toolbar__group select {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-1) var(--sp-3);
    background: var(--color-white);
    font-family: inherit;
    font-size: inherit;
    color: var(--color-text);
    line-height: 1.4;
    height: auto;
    width: auto;
    cursor: pointer;
}
.gallery-toolbar__group select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: var(--shadow-focus);
}
.gallery-toolbar__sep {
    opacity: 0.5;
    user-select: none;
}

/* --- GRID -------------------------------------------------------------- */
.gallery-grid-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--sp-3) var(--sp-4);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 1199px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
@media (max-width: 575px)  { .gallery-grid { grid-template-columns: 1fr; } }

/* --- CARD -------------------------------------------------------------- */
.gallery-card {
    background: var(--color-white);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    height: 100%;
}
.gallery-card:hover,
.gallery-card:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Media-Container: 1:1 Quadrat erzwingt einheitliche Card-Geometrie.
   object-fit:cover laesst zu schmale/flache Bilder das Quadrat fuellen
   (User-Override gegenueber CLAUDE.md §5.7 — bewusst akzeptierter Crop). */
.gallery-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-muted);
    overflow: hidden;
    display: block;
}
.gallery-card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform var(--transition-base);
    display: block;
    /* tep_image() kann eigene max-width/-height setzen — wir ueberschreiben */
    max-width: none !important;
    max-height: none !important;
}
.gallery-card:hover .gallery-card__media img {
    transform: scale(1.03);
}

/* Genus-Badge oben links (nur wenn klassifiziert) */
.gallery-card__genus {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    line-height: 1.2;
    z-index: 2;
}

/* Variations-Counter oben rechts (nur wenn >1 Aufnahmen) */
.gallery-card__variations-badge {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    background: rgba(0, 0, 0, 0.65);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    line-height: 1.2;
    z-index: 2;
}
.gallery-card__variations-badge i { font-size: 0.85em; }

/* Hybrid-/Award-Badge unten links (nur wenn vorhanden) */
.gallery-card__species-badge {
    position: absolute;
    bottom: var(--sp-2);
    left: var(--sp-2);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    line-height: 1.2;
    z-index: 2;
}

/* Variations-Thumb-Strip — INSIDE body unter dem Title (haelt Title-Position
   ueber alle Cards konstant). Horizontal scrollbar bei vielen Variationen. */
.gallery-card__variations {
    display: flex;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.gallery-card__variations::-webkit-scrollbar { height: 4px; }
.gallery-card__variations::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; }
.gallery-card__variations a {
    flex: 0 0 64px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-base);
    display: block;
    background: var(--color-bg-muted);
}
.gallery-card__variations a:hover { border-color: var(--color-primary); }
.gallery-card__variations a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    max-width: none !important;
    max-height: none !important;
}

/* Card-Body: flex-grow:1 + product-link mit margin-top:auto -> einheitlich am Boden */
.gallery-card__body {
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1 1 auto;
}
.gallery-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0;
    line-height: var(--line-height-tight);
    letter-spacing: -0.005em;
}

/* TODO (Phase 2 — GAP-02 Pflegeprofile):
   .gallery-card__caption mit gallery_visual_caption + .gallery-card__care
   (Care-Pills Licht/Temperatur/Feuchte) + .gallery-card__tags. Die Container
   werden bereits konsistent positioniert — nur Inhalt fehlt noch in der DB. */
.gallery-card__caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Produkt-Link / Status — immer sichtbar, klemmt am Card-Boden */
.gallery-card__product {
    margin: auto 0 0;
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}
.gallery-card__product i { color: var(--color-success); flex-shrink: 0; }
.gallery-card__product a {
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    text-decoration: none;
}
.gallery-card__product a:hover { color: var(--color-primary-dark); text-decoration: underline; }
.gallery-card__product--unavailable {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
}
.gallery-card__product--unavailable i { color: var(--color-text-muted); }

/* --- PAGINATION (gallery-spezifisch, ueberlagert nicht .pagination) --- */
.gallery-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--sp-4) 0 var(--sp-3);
}
.gallery-pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}
.gallery-pagination li { display: inline-flex; }
.gallery-pagination a,
.gallery-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--sp-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: border-color var(--transition-base), color var(--transition-base), background var(--transition-base);
}
.gallery-pagination a:hover,
.gallery-pagination a:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}
.gallery-pagination .is-current {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.gallery-pagination .is-disabled {
    color: var(--color-text-muted);
    background: var(--color-bg-muted);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}
.gallery-pagination .gallery-pagination__ellipsis {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    min-width: 24px;
}

/* --- Empty State (out-of-range page) ---------------------------------- */
.gallery-empty {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-3);
    text-align: center;
    color: var(--color-text-muted);
}

/* --- Mobile-Polish ---------------------------------------------------- */
@media (max-width: 575px) {
    .gallery-hero { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
    .gallery-hero__title { font-size: 1.5rem; }
    .gallery-toolbar { padding: var(--sp-2) var(--sp-3); }
    .gallery-pagination a,
    .gallery-pagination span { min-width: 36px; height: 36px; }
}
/* === End GOS-99 Gallery (rev 2026-05-03 — Filter Weitere/Weniger Toggle) === */