/* =============================================================================
 * theme-gkd.css - Marken-Theme Gummiketten-Discount.de (gedeckt: Grau/Grau-Violett, Gelb nur Warenkorb)
 *
 * NICHT VON HAND BEARBEITEN - erzeugt von gummikettendiscount/tools/build-theme.php
 * Design aendern = tools/design.css, dann neu erzeugen.
 * (Hue-basiert: Orange->Grau-Violett, Amber/Gold->Gelb, Rot/Gruen/Blau bleiben.)
 * Neu erzeugen:  php gummikettendiscount/tools/build-theme.php
 * ============================================================================= */

:root { --color-nuance1: #222222; --color-nuance2: #6B6B6B; --color-nuance3: #5E5283; --color-nuance4: #4A3E6A; --color-nuance5: #4A3E6A; --color-default: #222222; --color-primary: #222222; --color-link: #4A3E6A; --color-backgrounds: #222222; --color-shadows: #222222; --color-secondary: #222222; --color-bright: #222222; --background-topbar: #4A3E6A; --background-header: #5E5283; --background-primary: #222222; --background-secondary: #4A3E6A; --background-footer: #222222; --background-copyright: #4A3E6A; }
body { background: #F2F2F2; }
.info-circle { background: #F0B80F; }
.bbt-boxes i { background: rgba(74, 62, 106, .18); }
.bbt-boxes b { background: #4A3E6A; box-shadow: 0 6px 14px rgba(74, 62, 106, .4); }
.bbt-toast-link:hover { color: #4A3E6A; }
@keyframes bbt-badge-pulse {
  40% { background: #4A3E6A; }
}
.nav-cat-card:hover { border-color: #222222; }
.nav-cat-card--active { border-color: #222222 !important; }
.nav-cat-img { background-color: #FFFFFF; }
.nav-cat-name { color: #222222; }
.bbt-tag-input-wrap:focus-within { border-color: #4A3E6A; box-shadow: 0 0 0 .15rem rgba(74, 62, 106, .25); }
.bbt-tag { background: #4A3E6A; color: #222222; }
.bbt-tag-remove { color: #222222; }
#topbar { background: #4A3E6A; color: #222222; }
.topbar-usps span { color: #222222; }
.topbar-usps svg { fill: #222222; }
.topbar-link { color: #222222 !important; }
.search-mode-tab { background: #F2F2F2; }
.search-mode-tab:hover { border-color: #4A3E6A; color: #222222; }
.search-mode-tab.active { background: #222222; border-color: #222222; color: #4A3E6A; }
.header-search-icon { border: 1.5px solid #DADADA; }
.header-search-input { border: 1.5px solid #DADADA; }
.header-search-input:focus { border-color: #4A3E6A; }
.header-search-input:focus + .header-search-btn,
.header-search-input-group:focus-within .header-search-icon { border-color: #4A3E6A; }
.header-search-btn { background: #4A3E6A; color: #222222; border: 1.5px solid #4A3E6A; }
.header-search-btn:hover { background: #3A3054; border-color: #3A3054; color: #222222; }
.header-model-select { border: 1.5px solid #DADADA; }
.header-model-select:focus { border-color: #4A3E6A; box-shadow: 0 0 0 .15rem rgba(74, 62, 106, .2); }
.header-model-select:disabled { background: #F2F2F2; }
.search-hint-example { color: #4A3E6A; }
.search-hint-example:hover { color: #3F355A; }
.header-action-btn { color: #222222; background: #F2F2F2; }
.header-action-btn:hover { background: #4A3E6A; color: #222222; border-color: #4A3E6A; }
.header-action-btn--active { background: #4A3E6A; color: #222222 !important; border-color: #4A3E6A; }
.site-category-bar { background: #5E5283; }
@media (max-width: 768px) {
  #nav-cats-toggle { color: #222222; }
}
.header-action-btn { background: #5E5283; color: #222222 !important; }
.header-action-btn:hover,
.header-action-btn--active { background: #222222 !important; border-color: #222222 !important; }
.header-action-btn:hover svg,
.header-action-btn--active svg { fill: #4A3E6A; }
.header-search-btn { background: #4A3E6A; border-color: #4A3E6A; color: #222222; }
.header-search-btn:hover { background: #3A3054 !important; border-color: #3A3054 !important; }
.search-mode-tab.active { background: #4A3E6A; border-color: #4A3E6A; color: #222222; }
.search-mode-tab { border-color: #DADADA; }
.nav-cat-card--active { outline: 2px solid #222222; }
.nav-cat-img { background-color: #DEAA0E !important; }
.btn-dark,
.btn-dark:focus { background: #222222 !important; border-color: #222222 !important; }
.btn-dark:hover { background: #4A3E6A !important; border-color: #4A3E6A !important; color: #222222 !important; }
.btn-warning { background: #4A3E6A !important; border-color: #4A3E6A !important; color: #222222 !important; }
.text-warning { color: #4A3E6A !important; }
.bg-warning { background-color: #4A3E6A !important; }
.header-search-hint a,
.search-hint-example { color: #4A3E6A !important; }
.site-header { border-bottom: 2px solid #5E5283; }
.bbt-action-btn { background: #FFFFFF; color: #222222; }
.bbt-action-btn:hover { background: #4A3E6A; border-color: #4A3E6A; color: #222222 !important; }
.bbt-action-btn--active { background: #4A3E6A !important; border-color: #4A3E6A !important; }
.bbt-stab.active { background: #222222; border-color: #222222; color: #4A3E6A; }
.bbt-stab:hover:not(.active) { border-color: #4A3E6A; color: #222222; }
.bbt-search-form { border: 2px solid #DADADA; }
.bbt-search-form:focus-within { border-color: #4A3E6A; box-shadow: 0 0 0 3px rgba(74, 62, 106, .15); }
.bbt-search-input { color: #222222; }
.bbt-model-select { border-right: 1px solid #DADADA; color: #222222; }
.bbt-search-submit { background: #4A3E6A; color: #222222; }
.bbt-search-submit:hover { background: #443961; }
.search-hint-example { color: #4A3E6A !important; }
.bbt-menu-btn { background: #222222; color: #4A3E6A; }
.bbt-menu-btn:hover { background: #4A3E6A; color: #222222; }
.bbt-menu-btn:hover .bbt-burger span { background: #222222; }
.bbt-burger span { background: #4A3E6A; }
.megaMenu__grid-pattern { background-image: linear-gradient(rgba(74, 62, 106, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 62, 106, .04) 1px, transparent 1px); }
.megaMenu__head { border-bottom: 1px solid rgba(74, 62, 106, .15); }
.megaMenu__close { border: 2px solid rgba(74, 62, 106, .3); color: #4A3E6A; }
.megaMenu__close:hover { background: rgba(74, 62, 106, .15); border-color: #4A3E6A; }
.menuTile { border: 1.5px solid rgba(74, 62, 106, .15); }
.menuTile:hover { border-color: #4A3E6A; }
.menuTile:hover .menuTile__go { color: #4A3E6A; }
.menuTile__num { color: rgba(74, 62, 106, .4); }
.menuTile__icon { background: rgba(74, 62, 106, .1); color: #4A3E6A; }
.menuTile h3 { color: #4A3E6A; }
.megaMenu__foot { border-top: 1px solid rgba(74, 62, 106, .12); }
.megaMenu__link:hover { color: #4A3E6A !important; }
.site-header { border-bottom: 3px solid #5E5283; }
.bbt-smode { border: 1.5px solid #DADADA; }
.bbt-smode.active { background: #222222; border-color: #222222; color: #4A3E6A; }
.bbt-smode:hover:not(.active) { border-color: #4A3E6A; color: #222222; }
.bbt-sform { border: 2px solid #DADADA; }
.bbt-sform:focus-within { border-color: #4A3E6A; box-shadow: 0 0 0 3px rgba(74, 62, 106, .12); }
.bbt-sinput { color: #222222; }
.bbt-mselect { color: #222222; }
.bbt-sbtn { background: #4A3E6A; color: #222222; }
.bbt-sbtn:hover { background: #443961; }
.bbt-cta-btn { background: #222222; color: #4A3E6A; }
.bbt-cta-btn:hover { background: #4A3E6A; color: #222222; }
.bbt-act-btn { color: #222222; background: #FFFFFF; }
.bbt-act-btn:hover { background: #4A3E6A; border-color: #4A3E6A; color: #222222 !important; }
.bbt-act-btn--on { background: #4A3E6A; border-color: #4A3E6A; }
#bbt-contact-btn { background: #222222; color: #4A3E6A; }
#bbt-contact-btn:hover { background: #4A3E6A; color: #222222; box-shadow: 0 5px 20px rgba(74, 62, 106, .4); }
#bbt-contact-btn.is-open { background: #4A3E6A; color: #222222; }
.contactPopover { border: 1.5px solid rgba(74, 62, 106, .2); }
.contactPopover__head { background: linear-gradient(135deg, #222222 0%, #3a3836 100%); }
.contactPopover__badge { background: rgba(74, 62, 106, .2); color: #4A3E6A; }
.contactOption { color: #222222; border-bottom: 1px solid #FFFFFF; }
.contactOption--phone   .contactOption__icon { background: #222222; }
.contactOption--email   .contactOption__icon { background: #4A3E6A; }
.contactOption:hover .contactOption__arrow { color: #4A3E6A; }
.contactPopover__foot { border-top: 1px solid #FFFFFF; }
.bbt-mega-strip { background: #222222; border-bottom: 2px solid rgba(74, 62, 106, .2); }
.bbt-mega-strip__inner svg:first-child { color: #4A3E6A; }
.bbt-mega-strip__cats { color: rgba(74, 62, 106, .7); }
.bbt-mega-strip:hover .bbt-mega-strip__cats span:not(.bbt-strip-dot) { color: #4A3E6A; }
.bbt-mega-strip__chevron { color: #4A3E6A; }
.sh__tab:hover { color: #222222; }
.sh__tab--active { color: #222222; border-bottom-color: #4A3E6A; }
.sh__form { border: 2px solid #DADADA; }
.sh__form:focus-within { border-color: #4A3E6A; box-shadow: 0 0 0 3px rgba(74, 62, 106, .12); }
.sh__input { color: #222222; }
.sh__select { border-right: 1.5px solid #DADADA; color: #222222; }
.sh__btn { background: #4A3E6A; color: #222222; }
.sh__btn:hover { background: #443961; }
.sh__hint { color: #4A3E6A; }
.sh__hint:hover { color: #443961; }
.sh__act { color: #222222; }
.sh__act:hover { background: #4A3E6A; border-color: #4A3E6A; color: #222222 !important; }
.sh__act--on { background: #4A3E6A; border-color: #4A3E6A; }
.sh-strip { background: #222222; }
.sh-strip__inner > svg:first-child { color: #4A3E6A; }
.sh-strip__cats { color: rgba(74, 62, 106, .65); }
.sh-strip__chev { color: #4A3E6A; }
.mm__head { border-bottom: 1.5px solid #FFFFFF; }
.mm__close { border: 1.5px solid #DADADA; }
.mm__close:hover { background: #222222; color: #4A3E6A; border-color: #222222; }
.mm__tile { border: 1.5px solid var(--tile-border, #DADADA); color: #222222; }
.mm__tile-name { color: #222222; }
.mm__foot { border-top: 1.5px solid #FFFFFF; }
.mm__foot a:hover { color: #4A3E6A !important; }
.mm__foot-phone { color: #222222; }
#bbt-contact-btn { border: 2px solid #DADADA !important; color: #222222 !important; }
#bbt-contact-btn:hover, #bbt-contact-btn.is-open { border-color: #4A3E6A !important; color: #4A3E6A !important; box-shadow: 0 3px 14px rgba(74, 62, 106, .25) !important; }
.hdr-util { background: #4A3E6A; }
.hdr-util__usp { color: #222222; }
.hdr-util__phone { color: #222222 !important; }
.bbt-ctype-btn--active { background: #222222; color: #4A3E6A; }
.bbt-ctype-btn:not(.bbt-ctype-btn--active):hover { color: #222222; }
.hdr-trust__stars { color: #222222; }
.hdr-trust__score { color: #222222; }
.hdr-stab--on { color: #222222; border-bottom-color: #4A3E6A; }
.hdr-sform:focus-within { border-color: #4A3E6A; }
.hdr-sinput { color: #222222; }
.hdr-sbtn { background: #4A3E6A; color: #222222; }
.hdr-sbtn:hover { background: #473C66; }
.hdr-sform--model .hdr-msel { color: #222222; }
.hdr-hint { background: #FFFFFF; }
.hdr-hint:hover { background: #4A3E6A; color: #222222; }
.hdr-act { color: #222222 !important; }
.hdr-act:hover { background: #FFFFFF; }
.hdr-act--on { background: #FFFFFF; }
.hdr-act .header-cart-badge { background: #4A3E6A; color: #222222; }
.hdr-nav { background: #222222; }
.hdr-nav__all { background: #4A3E6A; color: #222222; }
.hdr-nav__all:hover,
.hdr-nav__all--open { background: #473C66; }
.mm__top { background: #222222 !important; }
.mm__top strong { color: #4A3E6A !important; }
.mm__x:hover { background: rgba(74, 62, 106, .25) !important; color: #4A3E6A !important; }
.mm__item { color: #222222 !important; }
.mm__item:hover { border-color: #4A3E6A !important; color: #4A3E6A !important; }
.mm__item-icon { color: #4A3E6A !important; }
.mm__foot { background: #FFFFFF !important; }
.mm__foot a:hover { color: #4A3E6A !important; }
.mm__foot-r { color: #222222 !important; }
.page-hero { background: linear-gradient(130deg, #534678 0%, #4A3E6A 40%, #3F355A 100%); }
.page-hero__btn--primary { background: #222222; color: #4A3E6A !important; border: 2px solid #222222; }
.page-hero__btn--outline { color: #222222 !important; }
.hdr-mode-btn--on { background: #222222; color: #4A3E6A; border-right-color: #222222; }
.hdr-mode-btn:hover:not(.hdr-mode-btn--on) { background: #FFFFFF; color: #222222; }
.hdr-msel--model { color: #222222; }
.hdr-trust__stars { color: #F5D26A; }
.page-hero__arrow { color: #222222; }
.page-hero__dot.is-active { background: #222222; }
body [class*="-btn-mode-default"],
body [class*="-btn-mode-compact"] { border: 2px solid #DADADA !important; color: #222222 !important; }
body [class*="-btn-mode-default"]:hover,
body [class*="-btn-mode-compact"]:hover { border-color: #4A3E6A !important; color: #4A3E6A !important; box-shadow: 0 3px 14px rgba(74, 62, 106, .25) !important; }
body [class*="-btn-mode-default"] svg,
body [class*="-btn-mode-compact"] svg { color: #222222 !important; stroke: #222222 !important; fill: #222222 !important; }
body [class*="-btn-mode-default"]:hover svg,
body [class*="-btn-mode-compact"]:hover svg { color: #4A3E6A !important; stroke: #4A3E6A !important; fill: #4A3E6A !important; }
.bbt-loader__text { color: #222222; }
.cat-pill { background: #FFFFFF; color: #222222; }
.cat-pill:hover { background: #4A3E6A; color: #222222; }
.bbt-price { color: #222222; }
.bbt-price-label a:hover { color: #4A3E6A !important; }
.page-hero__media { background: linear-gradient(135deg, #3F355A 0%, #352D4C 100%); }
#bbt-model-fab { background: #222222; color: #4A3E6A; }
#bbt-model-fab:hover { background: #4A3E6A; color: #222222; box-shadow: 0 5px 20px rgba(74, 62, 106, .4); }
#bbt-model-fab.is-set { background: #4A3E6A; color: #222222; }
#bbt-model-fab.is-set:hover { background: #222222; color: #4A3E6A; }
.bbt-model-modal__x:hover { color: #222222; }
.bbt-model-modal__apply { background: #4A3E6A; color: #222222; }
.bbt-model-modal__apply:hover { background: #433860; }
.bbt-model-hint__x:hover { color: #222222; }
.bbt-model-hint__icon { background: #EDECF0; color: #3F355B; }
.bbt-model-hint__go { background: #4A3E6A; color: #222222; }
.bbt-model-hint__go:hover { background: #433860; }

/* =============================================================================
 * design.css  —  Design-System Gummiketten-Discount.de
 *
 * Wird von build-theme.php ANS ENDE von theme-gkd.css angehaengt (nach dem
 * hue-rotierten Farb-Teil) und ist damit das LETZTE Stylesheet der Seite.
 *
 * WARUM hier und nicht im Markup?
 *   Die Seiten-Templates (category.php, product.php, includes/header.php ...)
 *   sind bewusst BITGLEICH zu shop-v2, damit Engine-Fixes per cp uebernommen
 *   werden koennen. Das komplette Design laeuft deshalb ueber CSS - inklusive
 *   !important dort, wo die Templates Inline-Styles setzen (Produktbilder).
 *
 * PRINZIP (Discounter: pragmatisch, ruhig, die PRODUKTE stehen im Vordergrund)
 *   Neutrale Flaechen (Hellgrau/Weiss), klare graue Linien statt Schatten.
 *   Ein GEDECKTES Grau-Violett traegt nur das Bedienbare (Buttons, Links, Fokus),
 *   GELB ist der EINE Akzent: nur "In den Warenkorb". Keine Verlaeufe, keine
 *   Glows, kein Hover-Huepfen. Bewegung minimal, prefers-reduced-motion beachtet.
 * ============================================================================= */

/* === 1. DESIGN-TOKENS ===================================================== */
:root {
    /* Marke — bewusst entsaettigt (frueher #5B21B6 = zu knallig). Die Token-
     * Namen bleiben "violet", damit alle Regeln unten unveraendert greifen. */
    --gkd-violet:      #4A3E6A;   /* Buttons, Links, Fokus (~9,6:1 auf Weiss) */
    --gkd-violet-d:    #3A3054;   /* Hover */
    --gkd-violet-l:    #5E5283;
    --gkd-violet-50:   #F3F2F6;   /* fast neutrale Hover-Flaeche */
    --gkd-violet-100:  #E2DFEA;
    --gkd-yellow:      #F5C542;   /* gedaempftes Gelb, NUR Warenkorb */
    --gkd-yellow-d:    #E5B22C;

    /* Dunkle Flaechen (Topbar/Footer): fast neutral, nur ein Hauch Violett. */
    --gkd-dark:        #2E2B36;
    --gkd-dark-2:      #25232B;

    /* Neutral. Headline vs. Fliesstext trennt die Schriftstaerke. */
    --gkd-ink:         #222222;   /* Headlines, Preise */
    --gkd-ink-2:       #333333;   /* Fliesstext */
    --gkd-muted:       #6B6B6B;   /* sekundaer (~5,3:1 auf Weiss) */
    --gkd-line:        #DADADA;   /* Linien/Kartenrahmen: neutrales Grau */
    --gkd-line-strong: #C4C4C4;   /* Formularfelder: Rahmen klar erkennbar */
    --gkd-bg:          #F2F2F2;   /* Seite: neutrales Hellgrau */
    --gkd-bg-2:        #E8E8E8;   /* Kopfband Startseite */
    --gkd-white:       #FFFFFF;

    /* Radien: klein und sachlich */
    --gkd-r-sm: 4px;
    --gkd-r:    6px;
    --gkd-r-lg: 8px;
    --gkd-r-pill: 999px;

    /* Schatten: kaum noch — Tiefe kommt aus Linien. */
    --gkd-sh-1: 0 1px 2px rgba(0,0,0,.04);
    --gkd-sh-2: 0 2px 8px rgba(0,0,0,.08);
    --gkd-sh-3: 0 6px 20px rgba(0,0,0,.12);

    /* Steuerelemente */
    --gkd-ctrl-h: 52px;

    /* Motion */
    --gkd-t: 170ms cubic-bezier(.2,.7,.3,1);
}

/* === 2. BASIS & TYPOGRAFIE ================================================ */
html { scroll-behavior: smooth; }

body {
    background: var(--gkd-bg) !important;
    color: var(--gkd-ink-2);
    font-size: 16.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3 {
    color: var(--gkd-ink);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.18;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.05rem); }
h3 { font-size: 1.12rem; letter-spacing: -.012em; }

p { color: var(--gkd-ink-2); }
strong, b { color: var(--gkd-ink); font-weight: 700; }
small, .small { font-size: .875rem; }
.text-muted { color: var(--gkd-muted) !important; }

a { color: var(--gkd-violet); text-decoration: none; transition: color var(--gkd-t); }
a:hover { color: var(--gkd-violet-d); }

::selection { background: var(--gkd-violet); color: #fff; }
hr { border-color: var(--gkd-line); opacity: 1; }

/* === 3. FOKUS & MOTION (Barrierefreiheit) ================================= */
:focus-visible {
    outline: 3px solid rgba(74,62,106,.45);
    outline-offset: 2px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* === 4. FLAECHEN & KARTEN ================================================= */
/* Bootstrap .shadow ist zu hart -> feine, geschichtete Tiefe. */
.shadow, .shadow-sm, .shadow-lg {
    box-shadow: var(--gkd-sh-1) !important;
}
.rounded { border-radius: var(--gkd-r) !important; }

.card, .detail-card, .product-card, .bbt-box {
    background: var(--gkd-white);
    border: 1px solid var(--gkd-line);
    border-radius: var(--gkd-r);
    box-shadow: none;
}

/* === 5. PRODUKTKARTEN =====================================================
 * Markup (category.php/default.php, NICHT aenderbar - siehe Kopf):
 *   .category-product > .shadow.p-3.rounded.bg-white
 *     > a > .product-image[style="...height:300px;border:1px solid #eee..."]
 *     > .product-info > h3 + p
 *     > .bbt-price-wrap > .bbt-price + .bbt-price-label
 * Die Inline-Styles am Bild werden hier gezielt ueberschrieben.            */
.category-product > .shadow,
.container-products-filtered .shadow,
.container-products-offers .shadow {
    border: 1px solid var(--gkd-line);
    border-radius: var(--gkd-r-lg) !important;
    box-shadow: none !important;
    padding: 14px !important;
    transition: box-shadow var(--gkd-t), border-color var(--gkd-t);
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Hover nur als ruhige Rueckmeldung: Rahmen dunkler + Hauch Schatten, kein Anheben. */
.category-product > .shadow:hover,
.container-products-filtered .shadow:hover,
.container-products-offers .shadow:hover {
    box-shadow: var(--gkd-sh-2) !important;
    border-color: var(--gkd-line-strong);
}

/* Bildflaeche: weiss wie die Karte -> das Produktfoto steht frei im Fokus. */
.product-image {
    height: 210px !important;
    background-color: var(--gkd-white) !important;
    background-size: contain !important;      /* Ketten vollstaendig zeigen */
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 0 !important;
    border-radius: var(--gkd-r) !important;
}

/* Warenkorb-Zeilenbild: hier umschliesst .product-image ein <img> (venobox),
 * NICHT die Karten-Buehne. Ohne diese Korrektur erbt der Anchor die 210px-
 * Bildflaeche der Produktkarten -> kleines Bild oben + grosse leere Box darunter.
 * Im Cart-Kontext daher als kompaktes Thumbnail zuruecknehmen. */
.product-image.venobox {
    height: auto !important;
    width: 84px !important;
    background: none !important;
    border: 1px solid var(--gkd-line) !important;
    border-radius: 7px !important;
    overflow: hidden;
    padding: 0 !important;
    transform: none !important;
}
.product-image.venobox img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

.product-info { flex: 1 1 auto; }
.product-info h3 {
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 14px !important;
    color: var(--gkd-ink);
    /* max. 2 Zeilen -> gleich hohe Karten */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-info p {
    font-size: .8rem; color: var(--gkd-muted);
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* Preis: klare Hierarchie, Ziffern tabellarisch (ruhiges Bild im Raster). */
.bbt-price-wrap { margin-top: auto; padding-top: 6px; }
.bbt-price {
    font-size: 1.5rem !important; font-weight: 800 !important;
    color: var(--gkd-ink) !important; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.bbt-price-label { font-size: .74rem !important; color: var(--gkd-muted) !important; }

/* === 6. STEUERELEMENTE (nativ + bootstrap-select IDENTISCH & vertikal mittig) ==
 * WICHTIG: KEIN display:flex auf nativen <select>/<input> - das verschiebt dort
 * den Text nach oben. Native Controls zentrieren ueber Hoehe + Padding; nur der
 * bootstrap-select-BUTTON wird per Flex zentriert (dessen .filter-option sitzt
 * sonst absolut oben -> genau der gemeldete "nicht mittig"-Effekt). */
.form-control, .form-select,
.bootstrap-select > .dropdown-toggle {
    min-height: var(--gkd-ctrl-h) !important;
    height: var(--gkd-ctrl-h) !important;
    border: 1px solid var(--gkd-line-strong) !important;
    border-radius: var(--gkd-r-sm) !important;
    background-color: var(--gkd-white) !important;
    color: var(--gkd-ink) !important;
    font-size: 1rem !important;
    box-shadow: none !important;
    padding: 8px 15px !important;
    transition: border-color var(--gkd-t), box-shadow var(--gkd-t);
}
select.form-control, .form-select { line-height: 1.4 !important; }

/* bootstrap-select: Button flex-zentriert, Caret vertikal mittig, Text im Fluss. */
.bootstrap-select > .dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    padding: 0 38px 0 15px !important;   /* rechts Platz fuer den Caret */
}
.bootstrap-select > .dropdown-toggle .filter-option {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
}
.bootstrap-select > .dropdown-toggle .filter-option-inner,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bootstrap-select .dropdown-toggle .caret {
    top: 50% !important; margin-top: 0 !important; transform: translateY(-50%); right: 16px !important;
}
.form-control:hover,
.bootstrap-select > .dropdown-toggle:hover { border-color: #A8A8A8 !important; }

.form-control:focus, .form-select:focus,
.bootstrap-select.show > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:focus {
    border-color: var(--gkd-violet) !important;
    box-shadow: 0 0 0 3px rgba(74,62,106,.15) !important;
    outline: none !important;
}
.bootstrap-select.form-control {
    border: 0 !important; padding: 0 !important; height: auto !important; box-shadow: none !important;
}
.form-control::placeholder { color: #9A9A9A; }   /* neutrales, ruhiges Grau */

/* Dropdown-Menue */
.bootstrap-select .dropdown-menu, .dropdown-menu {
    border: 1px solid var(--gkd-line) !important;
    border-radius: var(--gkd-r) !important;
    box-shadow: var(--gkd-sh-3) !important;
    padding: 7px !important;
}
.bootstrap-select .dropdown-menu li a,
.dropdown-menu .dropdown-item {
    border-radius: var(--gkd-r-sm); padding: 9px 12px; color: var(--gkd-ink);
    transition: background var(--gkd-t), color var(--gkd-t);
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--gkd-violet-50) !important; color: var(--gkd-ink) !important;
}
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a,
.dropdown-menu .dropdown-item.active {
    background: var(--gkd-violet) !important; color: #fff !important;
}

/* === 7. BUTTONS ===========================================================
 * Grau-Violett = Navigation/Suchen/Filtern.  GELB = NUR "In den Warenkorb".
 * Flach: Hover nur ueber die Flaechenfarbe, kein Glow/Schatten.
 * Der Kauf-Button traegt zusaetzlich .btn-dark -> .btn.btn-addtocart ist
 * spezifischer und gewinnt immer.                                          */
.btn {
    border-radius: var(--gkd-r-sm) !important;
    font-weight: 700;
    transition: background var(--gkd-t), border-color var(--gkd-t);
    background-image: none !important;
}

.btn-primary, .btn-dark, .btn-warning, .btn-secondary,
.gkd-btn-find, .btn-category-product-continue {
    background: var(--gkd-violet) !important;
    border-color: var(--gkd-violet) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-dark:hover, .btn-warning:hover, .btn-secondary:hover,
.gkd-btn-find:hover, .btn-category-product-continue:hover,
.btn-primary:focus, .btn-dark:focus, .btn-warning:focus, .btn-secondary:focus,
.gkd-btn-find:focus, .btn-category-product-continue:focus {
    background: var(--gkd-violet-d) !important;
    border-color: var(--gkd-violet-d) !important;
    color: #fff !important;
    box-shadow: none;
}

.btn.btn-addtocart {
    background: var(--gkd-yellow) !important;
    border-color: var(--gkd-yellow) !important;
    color: var(--gkd-ink) !important;
    font-weight: 800;
}
.btn.btn-addtocart:hover, .btn.btn-addtocart:focus {
    background: var(--gkd-yellow-d) !important;
    border-color: var(--gkd-yellow-d) !important;
    color: var(--gkd-ink) !important;
    box-shadow: none;
}

.btn-outline-secondary, .btn-outline-dark {
    background: var(--gkd-white) !important;
    border-color: var(--gkd-line-strong) !important;
    color: var(--gkd-ink) !important;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover {
    background: var(--gkd-violet-50) !important;
    border-color: #A8A8A8 !important;
    color: var(--gkd-ink) !important;
}
.btn-lg { padding: 14px 26px !important; font-size: 1.05rem !important; }

/* === 8. HEADER ============================================================ */
.hdr-util {
    background: var(--gkd-dark) !important;
    color: rgba(255,255,255,.90) !important;
    font-size: .82rem;
    border-bottom: 0;
}
/* WICHTIG: Die Utility-Bar war urspruenglich AMBER (hell) -> ihr GESAMTER Text ist
 * in custom.min.css dunkel (#262524 / rgba(38,37,36,...)). Da die Bar jetzt violett
 * ist, muessen ALLE diese Texte hell werden - sonst dunkel-auf-dunkel. Einzige
 * Ausnahme: das weisse "Privatkunde"-Pill (bleibt dunkle Schrift). */
.hdr-util a, .hdr-util span, .hdr-util__usp, .hdr-util__phone,
.hdr-trust, .hdr-trust__score, .hdr-trust__count, .bbt-ctype-btn {
    color: rgba(255,255,255,.90) !important;
}
.hdr-util a:hover, .hdr-trust:hover, .hdr-util__phone:hover { color: #fff !important; }
.hdr-util__sep { color: rgba(255,255,255,.40) !important; opacity: 1; }
.hdr-util .hdr-trust__stars { color: var(--gkd-yellow) !important; }
.hdr-util .bbt-ctype-btn--active { color: var(--gkd-ink) !important; }

/* USP-Streifen mit Icons in der Utility-Leiste (Icon erbt die helle Textfarbe). */
.hdr-util__gkd-usps { display: inline-flex; align-items: center; gap: 8px; }
.hdr-util__gkd-usps .hdr-util__usp { display: inline-flex; align-items: center; gap: 6px; }
.hdr-util__gkd-usps .hdr-util__usp svg { flex: 0 0 auto; opacity: .9; }
/* Auf schmalen Screens ausblenden (Platz sparen; Switch/Trust/Telefon bleiben). */
@media (max-width: 991px) { .hdr-util__gkd-usps { display: none; } }

/* === OUTLET-VEREINFACHUNG (gkd) ============================================
 * Nav-Strip, Mega-Menue, Kopf-Suchmaske und Konto/Login ausblenden -> schlanker
 * Outlet-Header (Logo + Warenkorb). Elemente bleiben im DOM (Header-JS und der
 * B2B/B2C-Schalter finden ihre Knoten weiter, nichts bricht) — nur unsichtbar. */
.hdr-nav,
#megaMenu,
.hdr-main__search { display: none !important; }
/* Konto-/Login-Aktion raus (nur Gastcheckout) — der Warenkorb bleibt. */
.hdr-main__acts a[href$="login"],
.hdr-main__acts a[href$="account"] { display: none !important; }

/* B2B/B2C-Schalter als Segmented Control */
.bbt-ctype-switch {
    background: rgba(255,255,255,.10);
    border-radius: var(--gkd-r-pill);
    padding: 3px;
    display: inline-flex; gap: 2px;
}
.bbt-ctype-btn {
    border: 0 !important; background: transparent !important;
    color: rgba(255,255,255,.75) !important;
    border-radius: var(--gkd-r-pill) !important;
    padding: 4px 13px !important; font-size: .78rem; font-weight: 600;
    transition: background var(--gkd-t), color var(--gkd-t);
}
.bbt-ctype-btn--active, .bbt-ctype-btn.active {
    background: #fff !important; color: var(--gkd-ink) !important;
}

/* === HEADER (gkd) — kompakt & flat ==========================================
 * Eine Zeile: Logo links, Topbar-Infos (Telefon / Bewertung / Privat-Gewerbe)
 * + Warenkorb rechts. Darunter der Slogan als Badge auf der Uebergangslinie.
 * Flach: keine Schatten, klare Kanten (Outlet-Look). */
.hdr-main {
    background: var(--gkd-white) !important;
    border-bottom: 1px solid var(--gkd-line);
    padding: 0;                     /* Hoehe steuert __inner */
}
/* WICHTIG: custom.min.css setzt spaet und ungescopt .hdr-main__inner{padding:3em 32px}
 * (~96px). Deshalb Hoehe/Padding hier mit !important kompakt erzwingen. */
.hdr-main__inner {
    justify-content: flex-start !important; align-items: center; gap: 18px;
    height: auto !important; min-height: 0 !important; padding: 8px 22px !important;
}
.hdr-main__logo { display: inline-flex; }
.hdr-main__logo img { max-height: 44px !important; width: auto; display: block; }

/* Info-Cluster aus der frueheren Topbar (rechts, vor dem Warenkorb) */
.hdr-gkd-util { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.hdr-gkd-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--gkd-ink) !important; font-weight: 800; font-size: 1.02rem; text-decoration: none; white-space: nowrap; }
.hdr-gkd-phone svg { color: var(--gkd-violet); flex: 0 0 auto; }
.hdr-gkd-phone:hover { color: var(--gkd-violet) !important; }
.hdr-gkd-trust { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; color: var(--gkd-muted); white-space: nowrap; }
.hdr-gkd-stars { color: var(--gkd-yellow); letter-spacing: 1px; font-size: .82rem; }
.hdr-gkd-trust b { color: var(--gkd-ink); font-weight: 800; }
/* Privat/Gewerbe-Schalter fuer den hellen Kopf */
.hdr-gkd-switch.bbt-ctype-switch { background: var(--gkd-bg) !important; border: 1px solid var(--gkd-line) !important; border-radius: var(--gkd-r-pill) !important; padding: 3px !important; display: inline-flex; gap: 2px; }
.hdr-gkd-switch .bbt-ctype-btn { border: 0 !important; background: transparent !important; color: var(--gkd-muted) !important; border-radius: var(--gkd-r-pill) !important; padding: 5px 13px !important; font-size: .8rem; font-weight: 700; box-shadow: none !important; }
.hdr-gkd-switch .bbt-ctype-btn--active { background: var(--gkd-violet) !important; color: #fff !important; }

/* Warenkorb-Button (flat, gefuellt) */
.hdr-main__acts { display: flex; align-items: center; }
.hdr-main__acts .hdr-act {
    display: inline-flex; flex-direction: row !important; align-items: center; gap: 9px;
    background: var(--gkd-violet) !important; color: #fff !important;
    padding: 8px 15px 8px 13px !important; border-radius: var(--gkd-r-sm);
    font-weight: 700; font-size: .95rem; line-height: 1; text-decoration: none;
    box-shadow: none !important; transition: background var(--gkd-t);
}
.hdr-main__acts .hdr-act__label { font-size: .9rem !important; }
.hdr-main__acts .hdr-act:hover { background: var(--gkd-violet-d) !important; }
.hdr-main__acts .hdr-act__icon { position: relative; display: inline-flex; }
.hdr-main__acts .hdr-act__icon svg { width: 22px; height: 22px; color: #fff; }
.hdr-main__acts .hdr-act__label { color: #fff !important; }
.hdr-main__acts .header-cart-badge {
    position: absolute; top: -8px; right: -10px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--gkd-yellow); color: var(--gkd-ink);
    border-radius: var(--gkd-r-pill); font-size: 11px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.hdr-main__acts .header-cart-badge:empty { display: none; }

/* Slogan-Badge auf der Kopf/Content-Linie: ENTFAELLT. Der Claim ist jetzt als
 * umrandete Pille (.gkd-hero__claim) sauber im Hero platziert - die frueher hier
 * ueberlagernde Naht-Badge (violett auf violett, von der Header-Kante durchschnitten)
 * entfaellt damit. Markup bleibt in header.php (mit shop-v2 byte-identisch),
 * wird aber nicht mehr angezeigt. */
.hdr-gkd-badgewrap { display: none; }

/* ===== TOPBAR (gkd): persoenliche Baggermodell-Leiste ganz oben ============
 * Ersetzt die frueher unten rechts schwebende "Mein Bagger"-FAB. Zeigt nach der
 * Auswahl das aktuelle Modell; Einstieg zum Waehlen/Aendern oeffnet dasselbe Modal. */
.gkd-topbar { background: var(--gkd-dark); color: #fff; font-size: .86rem; }
.gkd-topbar.is-set { background: var(--gkd-dark-2); }   /* gewaehlt: dunkler, ruhiger */
.gkd-topbar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 38px; padding-top: 5px; padding-bottom: 5px; }
.gkd-topbar__label { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); font-weight: 600; }
.gkd-topbar__label svg { color: rgba(255,255,255,.7); flex: 0 0 auto; }
.gkd-topbar__model { font-weight: 700; color: #fff; background: rgba(255,255,255,.12); padding: 3px 11px; border-radius: var(--gkd-r-sm); }
/* Schlicht weiss statt gelb: Gelb bleibt exklusiv fuer "In den Warenkorb". */
.gkd-topbar__btn { border: 0; background: #fff; color: var(--gkd-ink); font-weight: 700; font-size: .8rem; padding: 5px 14px; border-radius: var(--gkd-r-sm); cursor: pointer; transition: background var(--gkd-t); }
.gkd-topbar__btn:hover { background: #E8E8E8; }
.gkd-topbar__btn--ghost { background: transparent; color: rgba(255,255,255,.7); text-decoration: underline; padding: 5px 6px; }
.gkd-topbar__btn--ghost:hover { background: transparent; color: #fff; }
@media (max-width: 600px) {
    .gkd-topbar__inner { gap: 8px; }
    .gkd-topbar__label { font-size: .8rem; }
}

/* Sticky-FAB + Willkommens-Hinweis bei gkd ausgeblendet: Einstieg laeuft ueber
 * die Topbar; das Modal-Markup (bbt-model-modal) bleibt aktiv nutzbar. */
.bbt-model-fab, .bbt-model-hint { display: none !important; }

@media (max-width: 900px){
    .hdr-gkd-trust { display: none; }
    .hdr-gkd-util { gap: 14px; }
}
@media (max-width: 640px){
    .hdr-gkd-switch { display: none; }
    .hdr-gkd-phone span { display: none; }               /* nur Telefon-Icon */
    .hdr-main__acts .hdr-act__label { display: none; }    /* nur Warenkorb-Icon */
    .hdr-main__logo img { max-height: 44px; }
    .hdr-gkd-badge { font-size: .66rem; padding: 7px 14px; letter-spacing: .04em; white-space: normal; max-width: 88vw; line-height: 1.2; }
}

/* Suchfeld als Pille mit integriertem Button */
.hdr-sform {
    display: flex; align-items: center; gap: 0;
    background: var(--gkd-bg);
    border: 1.5px solid var(--gkd-line);
    border-radius: var(--gkd-r-pill);
    padding: 4px 4px 4px 6px;
    transition: border-color var(--gkd-t), box-shadow var(--gkd-t), background var(--gkd-t);
}
.hdr-sform:focus-within {
    background: #fff;
    border-color: var(--gkd-violet);
    box-shadow: 0 0 0 3px rgba(74,62,106,.15);
}
.hdr-sinput {
    flex: 1 1 auto; border: 0 !important; background: transparent !important;
    height: 44px !important; padding: 0 14px !important; font-size: 1rem;
    color: var(--gkd-ink); box-shadow: none !important; outline: none !important;
}
.hdr-sbtn {
    border: 0 !important; border-radius: var(--gkd-r-pill) !important;
    background: var(--gkd-violet) !important; color: #fff !important;
    height: 44px; padding: 0 22px !important; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background var(--gkd-t);
}
.hdr-sbtn:hover { background: var(--gkd-violet-d) !important; }

/* Navigations-Strip */
.hdr-nav {
    background: var(--gkd-violet) !important;
    box-shadow: var(--gkd-sh-1);
}
.hdr-nav__link, .hdr-nav__all {
    color: rgba(255,255,255,.92) !important;
    font-weight: 600; font-size: .95rem;
    border-radius: var(--gkd-r-sm);
    transition: background var(--gkd-t), color var(--gkd-t);
}
.hdr-nav__link:hover, .hdr-nav__all:hover {
    background: rgba(255,255,255,.14) !important; color: #fff !important;
}
.hdr-nav__link--model {
    background: var(--gkd-yellow) !important; color: var(--gkd-ink) !important; font-weight: 800;
}
.hdr-nav__link--model:hover { background: var(--gkd-yellow-d) !important; color: var(--gkd-ink) !important; }

/* Mega-Menue */
.mm__sheet {
    border-radius: 0 0 var(--gkd-r-lg) var(--gkd-r-lg);
    box-shadow: var(--gkd-sh-3);
    border: 1px solid var(--gkd-line); border-top: 0;
}
.mm__item, .mm__tile {
    border-radius: var(--gkd-r) !important;
    border: 1px solid transparent;
    transition: background var(--gkd-t), border-color var(--gkd-t);
}
.mm__item:hover, .mm__tile:hover {
    background: var(--gkd-violet-50) !important;
    border-color: var(--gkd-line);
}
.mm__item-icon svg { color: var(--gkd-violet); }
.mm__backdrop { backdrop-filter: blur(2px); background: rgba(51,51,51,.45); }

/* === 9. BADGES & STATUS =================================================== */
.badge {
    border-radius: var(--gkd-r-pill) !important;
    font-weight: 700; letter-spacing: .01em; padding: .42em .85em;
}
/* "Passt zu Ihrem Modell": Bootstrap-Gruen liegt ausserhalb der Palette -> Violett. */
.bbt-compat-badge .badge,
.badge.bg-success {
    background: var(--gkd-violet) !important; color: #fff !important;
    box-shadow: none;
}
/* AUSNAHME: Die Liefer-Ampel (gruen/gelb/rot) ist ein FUNKTIONALES Signal und
 * bleibt bewusst farbig - Verfuegbarkeit muss auf einen Blick erkennbar sein
 * (das ist Best Practice, nicht Deko). */
.trafficlight { box-shadow: 0 0 0 3px rgba(51,51,51,.06); }

/* === 9b. PALETTE-HYGIENE (Fremdfarben aus custom.min.css einfangen) ========
 * custom.min.css laedt VOR diesem Theme; die Hue-Rotation traf nur Orange.
 * Hier holen wir die letzten sichtbaren Nicht-Palette-Toene auf Weiss/Gelb/
 * Violett/#333 zurueck. FUNKTIONALE Status-Farben bleiben bewusst (s.u.). */

/* "Passt zu Ihrem Modell": gruener Karten-Rahmen -> Violett (wie der Badge). */
.category-product.is-compatible .shadow {
    border-color: var(--gkd-violet) !important;
    box-shadow: 0 0 0 1px var(--gkd-violet) !important;
}

/* Toast-Text (war slate-blau #0f172a/#1f2937) -> #333. Die Erfolg/Fehler-
 * Akzente des Toasts sind FUNKTIONALES Feedback und bleiben (gruen/rot). */
.bbt-toast, .bbt-toast-title, .bbt-toast-link { color: var(--gkd-ink) !important; }

/* WhatsApp-Button: Marken-Gruen liegt ausserhalb der Palette -> Violett.
 * (Das WhatsApp-Icon bleibt und traegt die Wiedererkennung.) */
.btn-whatsapp, .footer-whatsapp,
.contactOption--whatsapp .contactOption__icon {
    background: var(--gkd-violet) !important;
    border-color: var(--gkd-violet) !important;
    color: #fff !important;
}
.btn-whatsapp:hover, .footer-whatsapp:hover {
    background: var(--gkd-violet-d) !important; border-color: var(--gkd-violet-d) !important;
}

/* Bootstrap-Erfolgs-Alert -> ruhiger Violett-Tint statt Gruen (Deko, kein Status).
 * Echte Status-Ampel (.trafficlight, s.u.) bleibt farbig. */
.alert-success {
    background: var(--gkd-violet-50) !important;
    border-color: var(--gkd-violet-100) !important;
    color: var(--gkd-ink) !important;
}

/* === 10. FOOTER =========================================================== */
footer {
    background: var(--gkd-dark) !important;     /* ruhiges Dunkelgrau statt Violett */
    color: rgba(255,255,255,.90);
    margin-top: 64px;
}
footer .p-5 { padding: 34px 20px !important; }   /* war zu wuchtig */
footer h1, footer h2, footer h3, footer h4, footer strong { color: #fff !important; }
footer p, footer li, footer span { color: rgba(255,255,255,.90) !important; }
footer a { color: rgba(255,255,255,.86) !important; transition: color var(--gkd-t); }
footer a:hover, footer a:focus { color: #fff !important; text-decoration: underline; }
footer hr { border-color: rgba(255,255,255,.18); }
/* Text-Marke im Footer (wenn keine helle Logo-Variante existiert, z.B. gkd). */
.footer-brand-name {
    font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em;
    color: #fff; line-height: 1.2;
}

/* Mono-weisses Footer-Logo: groesser + voll responsiv. width:100% haelt es in
 * der Spalte (kein Ueberlauf), max-width begrenzt die Groesse. Spalte ist fuer
 * gkd col-md-3 (footer.php) -> genug Platz. */
footer img[src$="logo-gkd-white.svg"] {
    width: 100%;
    max-width: 210px;
    height: auto;
    display: block;
}
@media (max-width: 767px) {
    /* Mobil: Spalte ist voll breit -> Logo etwas kompakter, oben mit Luft. */
    footer img[src$="logo-gkd-white.svg"] { max-width: 200px; margin-bottom: 6px; }
}

/* Widerruf-Button: hartes Inline-Orange in footer.php -> schlichter heller
 * Rahmen-Button auf dem dunklen Footer. */
.footer-widerruf-btn,
.footer-widerruf-btn:link,
.footer-widerruf-btn:visited {
    background: transparent !important;
    border-color: rgba(255,255,255,.55) !important;
    color: #fff !important;
}
.footer-widerruf-btn:hover, .footer-widerruf-btn:focus {
    background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.85) !important;
}

/* --- COPYRIGHT-LEISTE ------------------------------------------------------
 * Bug: --background-copyright (Orange->Violett) + --color-bright (#262524 dunkel)
 * = dunkle Schrift auf dunklem Grund. Fix: eigener dunkler Grund + WEISS.
 * Zusaetzlich unten Platz schaffen, damit die zentrierten Fix-FABs
 * (#bbt-contact-btn / #bbt-model-fab) den Text NICHT ueberlagern. */
#copyright {
    background: var(--gkd-dark-2) !important;
    color: rgba(255,255,255,.90) !important;
    padding-bottom: 92px !important;            /* Freiraum fuer die unten-mittigen FABs */
}
#copyright, #copyright a, #copyright span { color: rgba(255,255,255,.90) !important; }
#copyright a:hover { color: #fff !important; }
#copyright svg, #copyright svg path { fill: currentColor !important; }   /* Matthias-Eger-Logo sichtbar */

/* === FLOATING FABs (gkd) ====================================================
 * NUTZ-FABs (Kontakt, Back-to-Top, Cookie-Banner) = ruhig WEISS mit grauem
 * Icon, feine Linie. Der MODELL-FAB ist die EINE Ausnahme: gelb, unten rechts
 * links neben dem Back-to-Top-Button, fliegt beim Laden ein -> hebt sich klar
 * ab (vorher violett = ging im violetten Kopfband unter).
 * Der Grauton fuer alle FAB-Icons: */
:root { --gkd-fab-ico: #555555; }

/* --- Kontakt-FAB (bottom-center, Position aus custom.min.css bleibt) -------- */
#bbt-contact-btn,
#bbt-contact-btn:hover, #bbt-contact-btn.is-open {
    background: #fff !important;
    border: 1.5px solid var(--gkd-line) !important;
    color: var(--gkd-fab-ico) !important;
    box-shadow: 0 3px 14px rgba(51,51,51,.16) !important;
}
#bbt-contact-btn:hover, #bbt-contact-btn.is-open {
    border-color: var(--gkd-line-strong) !important;
    color: var(--gkd-violet) !important;     /* dezenter Hover-Akzent */
}
#bbt-contact-btn svg { color: currentColor !important; }

/* --- Back-to-Top-FAB (bottom-right) ---------------------------------------- */
#bbt-top-btn, .back-to-top {
    background: #fff !important;
    border: 1.5px solid var(--gkd-line) !important;
    box-shadow: 0 2px 10px rgba(51,51,51,.10) !important;
}
/* NUR den Pfeil einfaerben. Den Fortschrittsring (.bbt-top-ring) NICHT anfassen —
 * dessen Inline-Farben (Track hell, Bogen violett) sollen bleiben, sonst wird der
 * Ring "zerhauen" (genau der vorherige Bug: pauschales svg-stroke-Override). */
#bbt-top-btn .bbt-top-arrow { fill: var(--gkd-ink) !important; color: var(--gkd-ink) !important; }

/* --- Cookie-Banner (Compliance Guardian): der schwebende Button traegt eine
 * Zufalls-Hash-Klasse; nur die Wrapper-Endung ".*-btn-wrapper" ist stabil.
 * Darueber faerben wir NUR den Button weiss -> der Dialog bleibt violett
 * (primaryColor in includes/scripts.php). Versionsunabhaengig. */
[class*="-btn-wrapper"] > button {
    background: #fff !important;
    color: var(--gkd-fab-ico) !important;
    border: 1.5px solid var(--gkd-line) !important;
    box-shadow: 0 3px 14px rgba(51,51,51,.16) !important;
}
[class*="-btn-wrapper"] > button svg { color: var(--gkd-fab-ico) !important; fill: var(--gkd-fab-ico) !important; stroke: var(--gkd-fab-ico) !important; }
[class*="-btn-wrapper"] > button span { color: var(--gkd-fab-ico) !important; }

/* --- Modell-FAB: die EINE gelbe Ausnahme, unten rechts, fliegt ein ---------
 * Position: links neben dem Back-to-Top-Button (der sitzt bottom:20px/right:18px,
 * 52px breit) -> right:84px. Farbe gelb = hebt sich vom violetten Kopf ab. */
#bbt-model-fab,
#bbt-model-fab.is-set {
    top: auto !important;
    bottom: 20px !important;
    left: auto !important;
    right: 84px !important;
    transform: none !important;
    background: var(--gkd-yellow) !important;
    color: var(--gkd-ink) !important;
    box-shadow: 0 6px 20px rgba(51,51,51,.22) !important;
    animation: bbt-model-fly-in .7s cubic-bezier(.2,.7,.3,1) .15s backwards;
}
#bbt-model-fab:hover, #bbt-model-fab.is-set:hover {
    background: var(--gkd-yellow-d) !important;
    color: var(--gkd-ink) !important;
    transform: translateY(-2px) !important;
}
#bbt-model-fab .bbt-model-fab__icon,
#bbt-model-fab .bbt-model-fab__name { color: var(--gkd-ink) !important; }
#bbt-model-fab .bbt-model-fab__hint { color: rgba(51,51,51,.72) !important; }

@keyframes bbt-model-fly-in {
    0%   { opacity: 0; transform: translateX(150%); }
    60%  { opacity: 1; transform: translateX(-6%); }
    100% { opacity: 1; transform: translateX(0); }
}
/* Bis Tablet nur Icon zeigen (sonst Kollision mit dem zentrierten Kontakt-FAB). */
@media (max-width: 768px) {
    #bbt-model-fab, #bbt-model-fab.is-set { right: 80px !important; padding: 11px !important; gap: 0 !important; max-width: none !important; }
    #bbt-model-fab .bbt-model-fab__text { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    #bbt-model-fab, #bbt-model-fab.is-set { animation: none !important; }
}
/* WhatsApp-FAB ist in custom.min.css ausgeblendet (display:none) -> kein Style. */

/* === 11. SEITENRHYTHMUS =================================================== */
#content { padding-bottom: 8px; }
.breadcrumb {
    background: transparent !important; padding-left: 0 !important;
    font-size: .85rem; color: var(--gkd-muted);
}
.alert {
    border: 1px solid var(--gkd-line); border-radius: var(--gkd-r);
    background: var(--gkd-white); color: var(--gkd-ink-2);
}
.alert-info { background: var(--gkd-violet-50); border-color: var(--gkd-violet-100); }

/* Keine Verlaeufe (Vorgabe). */
[class*="gradient"], .bg-gradient { background-image: none !important; }

/* === 12. RESPONSIVE ======================================================= */
@media (max-width: 991px) {
    .hdr-sform { padding: 3px 3px 3px 5px; }
    .hdr-sbtn { padding: 0 15px !important; }
}
@media (max-width: 767px) {
    body { font-size: 16px; }
    .product-image { height: 175px !important; }
    .bbt-price { font-size: 1.32rem !important; }
    footer { margin-top: 44px; }
    footer .p-5 { padding: 24px 16px !important; }
}