/* =========================================================================
   Björns Pyrostübchen – Template-Stylesheet (NOVA-Child)
   Wird nach dem NOVA-Theme (clear/midnight/blackline) geladen und überschreibt
   Farben, Header/Footer sowie alle pyro-* Komponenten.
   ========================================================================= */

:root {
    --pyro-dark:        #0b0d12;   /* Schwarz wie der Logo-Hintergrund – Header, Footer */
    --pyro-dark-2:      #16181f;   /* hellere Fläche auf Schwarz */
    --pyro-dark-3:      #262a35;   /* Linien/Hover auf Schwarz */
    --pyro-blue:        #009fe3;   /* Logo-Blau – Primärfarbe, Buttons, Akzente */
    --pyro-blue-dark:   #0080b8;   /* Hover, Links auf hellem Grund */
    --pyro-blue-light:  #e6f5fc;   /* helle Blau-Fläche (Hinweisboxen) */
    --pyro-gold:        #f5c542;   /* Funken-Gold aus dem Logo – kleine Akzente */
    --pyro-cream:       #f4f7fa;   /* Seitenhintergrund (kühles Hellgrau) */
    --pyro-paper:       #ffffff;
    --pyro-ink:         #14161c;   /* Fließtext */
    --pyro-ink-soft:    #5b6270;
    --pyro-line:        #e1e6ec;
    --pyro-success:     #1c871e;
    --pyro-f1:          #2e8b57;
    --pyro-f2:          #ff6a1a;
    --pyro-radius:      .5rem;
    --pyro-shadow:      0 .5rem 1.5rem rgba(11, 13, 18, .08);
}

/* -------------------------------------------------------------------------
   Grundlagen
   ------------------------------------------------------------------------- */
body {
    background-color: var(--pyro-cream);
    color: var(--pyro-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Montserrat, "Open Sans", sans-serif;
    color: var(--pyro-dark);
    letter-spacing: -.01em;
}

a { color: var(--pyro-blue-dark); }
a:hover { color: var(--pyro-blue-dark); }

.btn {
    border-radius: var(--pyro-radius);
    font-weight: 600;
    letter-spacing: .01em;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--pyro-blue);
    border-color: var(--pyro-blue);
    color: #fff;
    box-shadow: none;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--pyro-blue-dark);
    border-color: var(--pyro-blue-dark);
    color: #fff;
    box-shadow: 0 .25rem .75rem rgba(0, 159, 227, .35);
}
.btn-primary::before { display: none; }

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--pyro-dark);
    border-color: var(--pyro-dark);
    color: #fff;
}
.btn-secondary:hover { background-color: var(--pyro-dark-3); border-color: var(--pyro-dark-3); }

.btn-outline-primary {
    border-color: var(--pyro-dark);
    color: var(--pyro-dark);
}
.btn-outline-primary:hover {
    background-color: var(--pyro-dark);
    border-color: var(--pyro-dark);
    color: #fff;
}

.form-control { border-radius: var(--pyro-radius); border-color: var(--pyro-line); }
.form-control:focus { border-color: var(--pyro-blue); box-shadow: 0 0 0 .2rem rgba(0, 159, 227, .25); }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pyro-blue);
    border-color: var(--pyro-blue);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(0, 159, 227, .35); }

.card {
    border: 1px solid var(--pyro-line);
    border-radius: var(--pyro-radius);
}

.badge-primary { background-color: var(--pyro-blue); color: #fff; }

/* -------------------------------------------------------------------------
   Header (Topbar + Navigation) – Nachtblau mit Gold
   ------------------------------------------------------------------------- */
#header-top-bar,
header,
header#jtl-nav-wrapper {
    background-color: var(--pyro-dark);
    color: #fff;
}

#header-top-bar {
    background-color: var(--pyro-dark-2);
    font-size: .8125rem;
}
/* gleiche Spezifität wie NOVA (#header-top-bar a:not(.dropdown-item):not(.btn)) */
#header-top-bar a:not(.dropdown-item):not(.btn),
header a:not(.dropdown-item):not(.btn),
#header-top-bar .nav-link,
#header-top-bar .dropdown-toggle { color: rgba(255, 255, 255, .85); }
#header-top-bar a:not(.dropdown-item):not(.btn):hover,
header a:not(.dropdown-item):not(.btn):hover,
#header-top-bar .nav-link:hover { color: var(--pyro-blue); }
#header-top-bar .topbar-note,
#header-top-bar .topbar-note .nav-link { color: var(--pyro-blue); font-weight: 600; }

header { box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25); }

header .navbar-brand,
header .navbar-brand .h1 {
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

header .navbar-toggler,
header #burger-menu { color: #fff; }
header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Icon-Navigation rechts (Konto, Wunschzettel, Warenkorb) */
header .nav-right .nav-link,
header .nav-right .nav-link:hover,
header .nav-right .btn-link { color: #fff; }
header .nav-right .nav-link:hover { color: var(--pyro-blue); }
header .nav-right .badge,
header .cart-badge,
header .badge-pill { background-color: var(--pyro-blue); color: #fff; }

/* Suche (Typeahead setzt inline background:transparent -> !important nötig) */
header .search-wrapper .form-control,
header .main-search .form-control,
header .search-form-wrapper-fixed .form-control,
header .fixed-search .form-control {
    background-color: rgba(255, 255, 255, .1) !important;
    border-color: rgba(255, 255, 255, .2);
    color: #fff !important;
}
header .search-wrapper .form-control::placeholder,
header .main-search .form-control::placeholder { color: rgba(255, 255, 255, .6); }
header .search-wrapper .tt-hint { color: rgba(255, 255, 255, .4) !important; }
header .search-wrapper .form-control:focus,
header .main-search .form-control:focus {
    background-color: #fff !important;
    color: var(--pyro-ink) !important;
    border-color: var(--pyro-blue);
    box-shadow: none;
}
header .search-wrapper .btn,
header .search-wrapper .input-group-text,
header .main-search .btn,
header .search-form-wrapper-fixed .btn,
header .fixed-search .btn {
    background-color: var(--pyro-blue);
    border-color: var(--pyro-blue);
    color: #fff;
}
header .search-wrapper .form-clear { color: rgba(255, 255, 255, .7); }

/* Hauptnavigation Desktop */
@media (min-width: 992px) {
    header .navbar-nav > .nav-item > .nav-link {
        color: rgba(255, 255, 255, .9);
        font-family: Montserrat, sans-serif;
        font-weight: 600;
        font-size: .9375rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    header .navbar-nav > .nav-item > .nav-link:hover,
    header .navbar-nav > .nav-item > .nav-link:focus,
    header .navbar-nav > .nav-item.active > .nav-link { color: var(--pyro-blue); }
    header .navbar-nav > .nav-item > .nav-link::before { border-color: var(--pyro-blue); }
    header .nav-scrollbar-arrow { color: #fff; }
}

/* Mobile Offcanvas-Menü bleibt hell */
@media (max-width: 991.98px) {
    header .navbar-collapse { background-color: #fff; color: var(--pyro-ink); }
    header .navbar-collapse .nav-link,
    header .navbar-collapse a:not(.dropdown-item):not(.btn) { color: var(--pyro-ink); }
    header .navbar-collapse a:not(.dropdown-item):not(.btn):hover { color: var(--pyro-blue-dark); }
    header .nav-mobile-header { background-color: var(--pyro-dark); color: #fff; }
    header .nav-mobile-header a:not(.dropdown-item):not(.btn),
    header .nav-mobile-header .btn { color: #fff; }
}

/* Dropdowns/Megamenü hell mit Navy-Überschriften */
header .dropdown-menu { color: var(--pyro-ink); border: 0; box-shadow: 0 1rem 2rem rgba(15, 20, 36, .18); }
header .submenu-headline-toplevel,
header .submenu-headline { color: var(--pyro-dark); }
header .dropdown-menu a:not(.dropdown-item):not(.btn) { color: var(--pyro-ink); }
header .dropdown-menu a:not(.dropdown-item):not(.btn):hover { color: var(--pyro-blue-dark); }

/* -------------------------------------------------------------------------
   Hinweisleiste "Kein Versand – Abholung gegen Ausweis"
   ------------------------------------------------------------------------- */
.pyro-notice-bar {
    background: linear-gradient(90deg, var(--pyro-blue) 0%, #1fb0f0 100%);
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    position: relative;
    z-index: 1019;
    transition: padding .2s ease;
}
.pyro-notice-bar-list {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.25rem;
}
.pyro-notice-bar-item { display: flex; align-items: center; gap: .5rem; }
.pyro-notice-bar-main { flex: 0 1 auto; min-width: 0; }
.pyro-notice-bar-secondary { display: none; }
@media (min-width: 1200px) { .pyro-notice-bar-secondary { display: flex; } }
.pyro-notice-bar-link { margin-left: auto; }
.pyro-notice-bar-anchor {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: .2em;
    white-space: nowrap;
}
.pyro-notice-bar-anchor:hover { color: #fff; text-decoration: none; }
.pyro-notice-bar-anchor .fa-chevron-right { font-size: .7em; margin-left: .25rem; }
.pyro-notice-bar-compact .pyro-notice-bar-list { padding: .25rem 0; }
.pyro-notice-bar-checkout .pyro-notice-bar-list { padding: .35rem 0; }
.pyro-notice-bar-checkout .pyro-notice-bar-link { display: none; }

.pyro-age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .4rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--pyro-dark);
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: .75rem;
    line-height: 1;
}
.pyro-age-badge-lg {
    min-width: 4.5rem;
    height: 4.5rem;
    font-size: 1.5rem;
    border-width: 4px;
    border-color: var(--pyro-gold);
    background: var(--pyro-dark);
    color: var(--pyro-gold);
    box-shadow: 0 0 0 .5rem rgba(245, 197, 66, .18);
}

@media (max-width: 767.98px) {
    .pyro-notice-bar { font-size: .8125rem; }
    .pyro-notice-bar-list { gap: .25rem .75rem; }
    .pyro-notice-bar-link { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   Breadcrumb / Content
   ------------------------------------------------------------------------- */
.breadcrumb-wrapper { border-color: var(--pyro-line); }
.breadcrumb a { color: var(--pyro-ink-soft); }
.breadcrumb-item.active { color: var(--pyro-dark); }

/* -------------------------------------------------------------------------
   Feuerwerks-Badges (Kat. F1/F2, NEM, BAM)
   ------------------------------------------------------------------------- */
.pyro-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .5rem;
}
.pyro-badges-lg { margin: .5rem 0 1rem; }
.pyro-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    background: var(--pyro-cream);
    color: var(--pyro-ink-soft);
    border: 1px solid var(--pyro-line);
}
.pyro-badges-lg .pyro-badge { font-size: .75rem; padding: .3rem .75rem; }
.pyro-badge-cat { color: #fff; border-color: transparent; background: var(--pyro-ink-soft); }
.pyro-badge-cat-f1 { background: var(--pyro-f1); }
.pyro-badge-cat-f2 { background: var(--pyro-f2); }
.pyro-badge-cat-f3, .pyro-badge-cat-f4, .pyro-badge-cat-t1, .pyro-badge-cat-t2, .pyro-badge-cat-p1, .pyro-badge-cat-p2 { background: #b90000; }
.pyro-badge-pickup { background: var(--pyro-blue); color: #fff; border-color: var(--pyro-blue); text-transform: none; letter-spacing: 0; font-size: .75rem; }

/* -------------------------------------------------------------------------
   Artikellisten
   ------------------------------------------------------------------------- */
.productbox.productbox-hover .productbox-inner::before {
    border-radius: var(--pyro-radius);
    border: 1px solid transparent;
}
.productbox.productbox-hover:hover .productbox-inner::before,
.productbox.productbox-hover:focus-within .productbox-inner::before {
    border-color: var(--pyro-line);
    box-shadow: var(--pyro-shadow);
}
.productbox-title a { color: var(--pyro-dark); font-weight: 600; }
.productbox-title a:hover { color: var(--pyro-blue-dark); }
.productbox .price,
.product-info .price,
.price-large .price { color: var(--pyro-dark); font-family: Montserrat, sans-serif; }

.pyro-list-pickup {
    margin-top: .375rem;
    font-size: .6875rem;
    color: var(--pyro-ink-soft);
    letter-spacing: .02em;
}
.pyro-list-pickup .fas { color: var(--pyro-blue-dark); margin-right: .25rem; }

/* -------------------------------------------------------------------------
   Artikeldetail – Abholhinweis kompakt, Sicherheitshinweise
   ------------------------------------------------------------------------- */
.pyro-pickup-compact {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    margin: 0 0 1rem;
    border-radius: var(--pyro-radius);
    background: #fff;
    border: 1px solid var(--pyro-line);
    border-left: 4px solid var(--pyro-blue);
    font-size: .8125rem;
    line-height: 1.5;
}
.pyro-pickup-compact-icon {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pyro-blue);
    color: #fff;
    font-size: 1rem;
}
.pyro-pickup-compact-body { display: flex; flex-direction: column; gap: .125rem; }
.pyro-pickup-compact-body strong { color: var(--pyro-dark); }
.pyro-pickup-compact-body a { font-weight: 600; align-self: flex-start; }

.pyro-safety-notes {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--pyro-line);
    font-size: .8125rem;
    color: var(--pyro-ink-soft);
}
.pyro-safety-notes ul { margin: 0; }
.pyro-safety-notes li { display: flex; gap: .625rem; align-items: flex-start; margin-bottom: .375rem; }
.pyro-safety-notes .fas { color: var(--pyro-blue-dark); margin-top: .2rem; width: 1rem; text-align: center; flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   Abhol-Infokarte (Modal / Content)
   ------------------------------------------------------------------------- */
.pyro-pickup-card { border-top: 4px solid var(--pyro-blue); }
.pyro-pickup-card-title { display: flex; align-items: center; }
.pyro-steps { list-style: none; margin: 0; padding: 0; counter-reset: pyro; }
.pyro-steps > li {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--pyro-line);
}
.pyro-steps > li:last-child { border-bottom: 0; padding-bottom: 0; }
.pyro-steps p { margin: .25rem 0 0; color: var(--pyro-ink-soft); }
.pyro-step-no {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pyro-blue);
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
}
.pyro-address { margin: .25rem 0 .5rem; font-style: normal; line-height: 1.6; }
.pyro-hours { margin: 0; }
.pyro-hours li { margin-bottom: .125rem; }
.pyro-hours .far { color: var(--pyro-blue-dark); }
.pyro-deadline {
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    border-radius: var(--pyro-radius);
    background: var(--pyro-blue-light);
    color: #045a82;
    font-size: .8125rem;
}

/* -------------------------------------------------------------------------
   Modals (Abholinfo, Altersabfrage)
   ------------------------------------------------------------------------- */
.pyro-modal .modal-content { border: 0; border-radius: var(--pyro-radius); padding: 0; }
.pyro-modal .modal-header { border-bottom: 1px solid var(--pyro-line); padding: 1.25rem 1.5rem; }
.pyro-modal .modal-body { padding: 1.5rem; }
.pyro-modal .pyro-pickup-card { border: 0; box-shadow: none; }
.pyro-modal .pyro-pickup-card .card-body { padding: 0; }

.pyro-age-gate .modal-content {
    background: var(--pyro-dark);
    color: rgba(255, 255, 255, .85);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(0, 159, 227, .28) 0, transparent 30%),
        radial-gradient(circle at 85% 75%, rgba(245, 197, 66, .18) 0, transparent 32%);
}
.pyro-age-gate .modal-body { padding: 2.5rem 2rem; }
.pyro-age-gate h2 { color: #fff; margin-top: 1.25rem; }
.pyro-age-gate-logo { display: flex; justify-content: center; }
.pyro-age-gate-question { font-family: Montserrat, sans-serif; font-weight: 600; color: var(--pyro-blue); font-size: 1.125rem; margin-top: 1.25rem; }
.pyro-age-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 1rem 0; }
.pyro-age-gate-actions .btn-outline-secondary { color: #fff; border-color: rgba(255, 255, 255, .5); }
.pyro-age-gate-actions .btn-outline-secondary:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pyro-age-gate-legal { font-size: .75rem; color: rgba(255, 255, 255, .55); margin: 0; }
.modal-backdrop.show { opacity: .7; }

/* -------------------------------------------------------------------------
   Checkout
   ------------------------------------------------------------------------- */
.pyro-checkout-notice {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.25rem;
    margin: .75rem 0 1.25rem;
    border-radius: var(--pyro-radius);
    background: var(--pyro-dark);
    color: rgba(255, 255, 255, .88);
    line-height: 1.55;
}
.pyro-checkout-notice strong { color: var(--pyro-blue); }
.pyro-checkout-notice-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pyro-blue);
    color: #fff;
    font-size: 1.125rem;
}
.pyro-checkout-notice-sm { padding: .75rem 1rem; font-size: .875rem; }
.pyro-checkout-notice-sm .pyro-checkout-notice-icon { width: 2rem; height: 2rem; font-size: .9rem; }

.checkout-shipping-form-options .custom-control-input:checked ~ .custom-control-label { color: var(--pyro-dark); }
.pyro-shipping-pickup-tag { margin-top: .375rem; }

/* Warenkorb – Abholhinweis statt Versandkostenzeile, "Weiter einkaufen" */
.pyro-cart-pickup {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--pyro-radius);
    background: var(--pyro-blue-light);
    color: #045a82;
    font-size: .8125rem;
    line-height: 1.4;
}
.pyro-cart-pickup .fas { color: var(--pyro-blue-dark); }
.pyro-continue-shopping { margin-top: .5rem; }

.pyro-confirm {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-radius: var(--pyro-radius);
    background: var(--pyro-blue-light);
    border: 1px solid #a8dcf4;
    line-height: 1.55;
}
.pyro-confirm strong { color: var(--pyro-dark); }
.pyro-confirm .custom-control-label { cursor: pointer; }
.pyro-confirm .custom-control-input.is-invalid ~ .custom-control-label,
.pyro-confirm .was-validated .custom-control-input:invalid ~ .custom-control-label { color: #b90000; }
.pyro-confirm .custom-control-input.is-invalid ~ .custom-control-label::before { border-color: #b90000; box-shadow: 0 0 0 .2rem rgba(185, 0, 0, .2); }
.pyro-confirm .invalid-feedback { font-weight: 600; }

/* Bestellbestätigung – "Abholschein" */
.order-confirmation-details { margin-bottom: 0 !important; }
.pyro-pickup-ticket {
    margin-top: 1.5rem;
    border: 1px solid var(--pyro-line);
    border-radius: var(--pyro-radius);
    overflow: hidden;
    background: #fff;
}
.pyro-pickup-ticket-head {
    background: var(--pyro-dark);
    color: rgba(255, 255, 255, .8);
    padding: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    background-image: radial-gradient(circle at 50% 120%, rgba(0, 159, 227, .35) 0, transparent 55%);
}
.pyro-pickup-ticket-label { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 600; }
.pyro-pickup-ticket-no {
    font-family: Montserrat, monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--pyro-blue);
    letter-spacing: .08em;
    word-break: break-all;
}
@media (max-width: 575.98px) {
    .pyro-pickup-ticket-no { font-size: 1.5rem; letter-spacing: .04em; }
    .pyro-pickup-ticket-head, .pyro-pickup-ticket-body { padding: 1.25rem 1rem; }
    .pyro-legal-strip p { padding: .625rem 0; }
}
.pyro-pickup-ticket-hint { font-size: .8125rem; }
.pyro-pickup-ticket-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}
.pyro-pickup-ticket-col h3 { display: flex; align-items: center; }
.pyro-checklist li { display: flex; gap: .625rem; margin-bottom: .5rem; }
.pyro-checklist .fas { color: var(--pyro-success); margin-top: .2rem; }
.pyro-ticket-note {
    margin: 1rem 0 0;
    padding: .625rem .75rem;
    border-radius: var(--pyro-radius);
    background: var(--pyro-cream);
    font-size: .8125rem;
    color: var(--pyro-ink-soft);
}

/* -------------------------------------------------------------------------
   Footer – Nachtblau
   ------------------------------------------------------------------------- */
#footer {
    background-color: var(--pyro-dark);
    color: rgba(255, 255, 255, .78);
    padding-top: 0;
    margin-top: 0;
}
#footer .card .card-title,
#footer .h2, #footer h2, #footer h3, #footer .h3 { color: var(--pyro-blue); }
#footer a:not(.btn) { color: rgba(255, 255, 255, .85); }
#footer a:not(.btn):hover { color: var(--pyro-blue); }
#footer hr, #footer .box-normal-hr { border-color: var(--pyro-dark-3); }
/* Linkgruppen-Boxen im Footer (NOVA: .productlist-filter-headline / .box-normal-link) */
#footer .productlist-filter-headline,
#footer .box-normal-link,
#footer .box-normal-link:hover,
#footer .box .card-title { color: var(--pyro-blue); font-family: Montserrat, sans-serif; font-weight: 600; }
#footer .box-normal-link::after { color: var(--pyro-blue); }
#footer .nav-link.active, #footer a.active { color: #fff; font-weight: 600; }
#footer .footnote-vat { color: rgba(255, 255, 255, .55); font-size: .75rem; margin-top: 1.5rem; }
#footer .form-control { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
#footer .form-control::placeholder { color: rgba(255, 255, 255, .5); }
#footer .btn-icon-secondary { background: var(--pyro-dark-2); color: #fff; border-color: var(--pyro-dark-3); }
#footer .btn-icon-secondary:hover { background: var(--pyro-blue); color: #fff; }
#footer .link-group-item.dropdown:has(.collapse:not(.show)) { border-bottom-color: var(--pyro-dark-3); }

.pyro-usp-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem 2rem;
    padding: 2.5rem 0;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--pyro-dark-3);
}
.pyro-usp { display: flex; gap: .875rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; }
.pyro-usp strong { display: block; color: #fff; font-family: Montserrat, sans-serif; font-size: .9375rem; margin-bottom: .125rem; }
.pyro-usp-icon {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pyro-dark-2);
    color: var(--pyro-blue);
    font-size: 1.125rem;
    border: 1px solid var(--pyro-dark-3);
}

.pyro-legal-strip {
    background: var(--pyro-dark-2);
    color: rgba(255, 255, 255, .7);
    font-size: .75rem;
    margin-top: 2rem;
}
.pyro-legal-strip p { margin: 0; padding: .75rem 0; text-align: center; }
.pyro-legal-strip .fas { color: var(--pyro-gold); }

#copyright { background-color: #000000; color: rgba(255, 255, 255, .6); margin-top: 0; }
#copyright a { color: rgba(255, 255, 255, .8); }

/* Scroll-to-top Button */
.btn-scroll-top, #btn-scroll-top { background-color: var(--pyro-blue); color: #fff; border-color: var(--pyro-blue); }

/* -------------------------------------------------------------------------
   Print – Abholschein sauber drucken
   ------------------------------------------------------------------------- */
@media print {
    .pyro-notice-bar, .pyro-usp-row, .pyro-legal-strip { display: none !important; }
    .pyro-pickup-ticket { border: 1px solid #000; }
    .pyro-pickup-ticket-head { background: #fff !important; color: #000 !important; }
    .pyro-pickup-ticket-no { color: #000 !important; }
}

/* -------------------------------------------------------------------------
   Logo (Text-Logo, wenn kein Logo-Bild im Backend hinterlegt ist)
   ------------------------------------------------------------------------- */
.pyro-logo {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    line-height: 1;
}
.pyro-logo-mark {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pyro-blue);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 .25rem .75rem rgba(0, 159, 227, .35);
}
.pyro-logo-text {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #fff;
    letter-spacing: -.01em;
}
.pyro-logo-text em { font-style: normal; color: var(--pyro-blue); font-weight: 800; }

/* -------------------------------------------------------------------------
   Wort-Bild-Marke (images/logo.svg) im Header
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   Logo im Header (images/logo.png)

   NOVA steuert die Logohöhe über "header .navbar-brand img" aus den
   Template-Einstellungen. Damit unser Logo (Verhältnis 2,8:1) nicht zu
   hoch wird, müssen wir mindestens gleich spezifisch sein (ID + Klasse).
   ------------------------------------------------------------------------- */
header .navbar-brand img#shop-logo.pyro-logo-img,
header #logo .navbar-brand img.pyro-logo-img,
.pyro-logo-img {
    height: 62px !important;
    width: auto !important;
    max-width: min(100%, 62vw);
    object-fit: contain;
    display: block;
}
@media (max-width: 991.98px) {
    header .navbar-brand img#shop-logo.pyro-logo-img,
    .pyro-logo-img { height: 48px !important; }
}
@media (max-width: 575.98px) {
    header .navbar-brand img#shop-logo.pyro-logo-img,
    .pyro-logo-img { height: 38px !important; }
}
/* Im Checkout ist der Header schlanker */
.is-checkout header .navbar-brand img#shop-logo.pyro-logo-img,
.is-checkout .pyro-logo-img { height: 44px !important; }

/* -------------------------------------------------------------------------
   Startseite – Bausteine für den OnPage Composer (siehe opc/startseite.html)
   ------------------------------------------------------------------------- */
.pyro-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--pyro-radius);
    background: var(--pyro-dark);
    color: #fff;
    padding: 3.5rem 2.5rem;
    margin: 0 0 2.5rem;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(0, 159, 227, .45) 0, transparent 30%),
        radial-gradient(circle at 92% 70%, rgba(245, 197, 66, .3) 0, transparent 24%),
        radial-gradient(circle at 65% 85%, rgba(0, 128, 184, .35) 0, transparent 22%),
        linear-gradient(120deg, #0b0d12 0%, #16181f 60%, #0b0d12 100%);
}
.pyro-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.4) 1px, transparent 1.5px);
    background-size: 90px 90px, 140px 140px;
    background-position: 10px 20px, 50px 70px;
    opacity: .35;
}
.pyro-hero > * { position: relative; z-index: 1; }
.pyro-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(0, 159, 227, .15);
    border: 1px solid rgba(0, 159, 227, .6);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.pyro-hero h1, .pyro-hero .h1 {
    color: #fff;
    font-size: 2.5rem;
    line-height: 1.15;
    max-width: 34rem;
    margin-bottom: 1rem;
}
.pyro-hero h1 em, .pyro-hero .h1 em { font-style: normal; color: var(--pyro-blue); }
.pyro-hero p { font-size: 1.0625rem; color: rgba(255, 255, 255, .8); max-width: 36rem; }
.pyro-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.pyro-hero-actions .btn-lg { padding: .75rem 1.5rem; }
.pyro-hero-actions .btn-outline-light { border-color: rgba(255, 255, 255, .5); color: #fff; }
.pyro-hero-actions .btn-outline-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.pyro-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .7);
}
.pyro-hero-facts strong { display: block; font-family: Montserrat, sans-serif; font-size: 1.125rem; color: var(--pyro-blue); }
@media (max-width: 767.98px) {
    .pyro-hero { padding: 2.25rem 1.25rem; }
    .pyro-hero h1, .pyro-hero .h1 { font-size: 1.85rem; }
}

.pyro-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 2.5rem 0 1.25rem;
}
.pyro-section-title h2 { margin: 0; font-size: 1.5rem; }
.pyro-section-title a { font-weight: 600; font-size: .875rem; white-space: nowrap; }

/* Festes Raster statt auto-fit: Bei 8 Kacheln ergibt auto-fit sonst krumme
   Aufteilungen (6+2, 5+3) oder mehr Spalten als Kacheln. 4 bzw. 2 Spalten
   gehen bei jeder Bildschirmbreite glatt auf. */
.pyro-cat-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 768px) {
    .pyro-cat-tiles { grid-template-columns: repeat(4, 1fr); }
}
.pyro-cat-tile {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem 1rem;
    border-radius: var(--pyro-radius);
    background: #fff;
    border: 1px solid var(--pyro-line);
    color: var(--pyro-dark);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pyro-cat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--pyro-shadow);
    border-color: var(--pyro-blue);
    color: var(--pyro-dark);
    text-decoration: none;
}
.pyro-cat-tile-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pyro-cream);
    color: var(--pyro-blue-dark);
    font-size: 1.25rem;
}
.pyro-cat-tile strong { font-family: Montserrat, sans-serif; font-size: .9375rem; }
.pyro-cat-tile span { font-size: .75rem; color: var(--pyro-ink-soft); }

.pyro-howto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
}
.pyro-howto-step {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    border-radius: var(--pyro-radius);
    background: #fff;
    border: 1px solid var(--pyro-line);
}
.pyro-howto-step .pyro-step-no { margin-bottom: .75rem; }
.pyro-howto-step strong { display: block; font-family: Montserrat, sans-serif; color: var(--pyro-dark); margin-bottom: .25rem; }
.pyro-howto-step p { margin: 0; font-size: .8125rem; color: var(--pyro-ink-soft); }

/* -------------------------------------------------------------------------
   Korrekturen gegen verbliebene NOVA-Gelbtöne (#F8BF00) und Live-Feinschliff
   ------------------------------------------------------------------------- */

/* Zähler-Badges an Warenkorb / Wunschzettel / Vergleichsliste */
.fa-sup,
#comparelist-badge,
#badge-wl-count,
.cart-icon-dropdown-icon .fa-sup {
    background-color: var(--pyro-blue) !important;
    color: #fff !important;
}

/* Aktive Kategorie in der Sidebar / im Filter (NOVA unterstreicht gelb) */
.productlist-filter-categories > .nav-item > .nav-link::before,
.box-categories .nav-link::before,
#sidebar .nav-link::before,
.nav-link.dropdown-toggle { border-color: var(--pyro-blue) !important; }
.box-categories .nav-link.active,
#sidebar .nav-link.active { color: var(--pyro-blue); font-weight: 600; }

/* Preisfilter-Slider (noUiSlider) */
.noUi-connect { background-color: var(--pyro-blue) !important; }
.noUi-handle { background-color: var(--pyro-blue) !important; border-color: var(--pyro-blue) !important; }

/* Ribbons / Lagerampel */
.ribbon-primary, .badge-check { border-color: var(--pyro-blue) !important; }
.badge-check .badge-circle { background-color: var(--pyro-blue) !important; border-color: var(--pyro-blue) !important; }
.badge-circle:hover, .badge-circle:focus,
.badge-circle-1.on-list { background-color: var(--pyro-blue) !important; border-color: var(--pyro-blue) !important; }

/* Abholstatus auf der Artikelseite */
.pyro-pickup-status { color: var(--pyro-blue-dark); font-weight: 600; }
.pyro-shipping-note { color: var(--pyro-ink-soft); }

/* -------------------------------------------------------------------------
   Hauptnavigation: viele Kategorien kompakt unterbringen
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* engere Abstände, damit mehr Einträge in eine Zeile passen */
    header .navbar-nav > .nav-item > .nav-link {
        padding-left: .75rem;
        padding-right: .75rem;
        font-size: .8125rem;
        letter-spacing: .02em;
        white-space: nowrap;
    }
    header .nav-multiple-row .navbar-nav > .nav-item > .nav-link { padding: .75rem; }

    /* Scroll-Pfeile: NOVA blendet hier einen WEISSEN Verlauf ein (heller Header).
       Auf unserem schwarzen Header sah das aus wie ein weißer Schatten.
       Die Selektoren müssen .left/.right mitnehmen – sonst gewinnt NOVA
       (.nav-scrollbar-arrow.right = 0,2,0 schlägt header .nav-scrollbar-arrow = 0,1,1). */
    header .nav-scrollbar-arrow,
    header .nav-scrollbar-arrow.right,
    header .nav-scrollbar-arrow.left {
        color: #fff;
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }
    header .nav-scrollbar-arrow.right {
        background: linear-gradient(to right, rgba(11, 13, 18, 0) 0%, var(--pyro-dark) 45%) !important;
    }
    header .nav-scrollbar-arrow.left {
        background: linear-gradient(to left, rgba(11, 13, 18, 0) 0%, var(--pyro-dark) 45%) !important;
    }
    header .nav-scrollbar-arrow.disabled,
    header .nav-scrollbar-arrow.right.disabled,
    header .nav-scrollbar-arrow.left.disabled { opacity: 0; pointer-events: none; }

    /* Menü in eigener Zeile (Template-Einstellung "Menü in eigener Zeile" = Ja):
       volle Breite, dezente Trennlinie zum Header darüber */
    header.full-width-mega .navbar-nav { border-top: 1px solid var(--pyro-dark-3); }
}

/* Suchfeld nicht zu breit werden lassen, damit das Menü Platz behält */
@media (min-width: 992px) {
    header .search-wrapper { max-width: 18rem; margin-left: auto; }
}

/* -------------------------------------------------------------------------
   Sticky-Header: sanftes Ein-/Ausfahren beim Scrollen

   NOVA blendet Topbar und Logo-/Suchzeile beim Scrollen per Bootstrap-Klasse
   aus (d-none bzw. Entfernen von d-lg-flex). "display: none" lässt sich nicht
   animieren – der Header sprang deshalb hart von 182 px auf 72 px.
   Wir heben das display-Umschalten auf Desktop auf und animieren stattdessen
   Höhe und Deckkraft. Mobil bleibt NOVAs Verhalten unangetastet.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    header #header-top-bar.topbar-wrapper {
        display: flex !important;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height .28s ease, opacity .2s ease;
    }
    header #header-top-bar.topbar-wrapper.d-lg-flex {
        max-height: 5rem;
        opacity: 1;
    }

    header .hide-navbar {
        display: block !important;
        overflow: hidden;
        max-height: 8rem;
        opacity: 1;
        transition: max-height .28s ease, opacity .2s ease;
    }
    header .hide-navbar.d-none {
        max-height: 0;
        opacity: 0;
    }

    /* Schatten erst zeigen, wenn der Header eingefahren ist */
    header { transition: box-shadow .25s ease; }
}

/* Nutzer mit reduzierter Bewegung: sofort umschalten, keine Animation */
@media (prefers-reduced-motion: reduce) {
    header #header-top-bar.topbar-wrapper,
    header .hide-navbar { transition: none; }
}

/* -------------------------------------------------------------------------
   Startseite: Abhol-Block (OPC-Baustein 4, siehe opc/startseite.html)
   ------------------------------------------------------------------------- */
.pyro-home-pickup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.pyro-home-pickup-map,
.pyro-home-pickup-hours {
    padding: 1.75rem;
    border-radius: var(--pyro-radius);
    border: 1px solid var(--pyro-line);
    background: #fff;
}
.pyro-home-pickup-map {
    background: var(--pyro-dark);
    color: rgba(255, 255, 255, .8);
    border-color: var(--pyro-dark);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    background-image: radial-gradient(circle at 85% 15%, rgba(0, 159, 227, .35) 0, transparent 45%);
}
.pyro-home-pickup-map .fa-map-marker-alt { font-size: 1.75rem; color: var(--pyro-blue); }
.pyro-home-pickup-map strong {
    font-family: Montserrat, sans-serif;
    font-size: 1.125rem;
    color: #fff;
}
.pyro-home-pickup-map .btn { margin-top: .75rem; }
.pyro-home-pickup-hours h3 { margin-bottom: .75rem; }
.pyro-home-pickup-note {
    margin: .75rem 0 0;
    padding: .75rem;
    border-radius: var(--pyro-radius);
    background: var(--pyro-blue-light);
    color: #045a82;
    font-size: .8125rem;
}
.pyro-home-pickup-note .fas { color: var(--pyro-blue-dark); }

/* -------------------------------------------------------------------------
   Runde Icon-Buttons (Wunschzettel, Vergleichsliste, Quick-View)

   NOVA gibt diesen Buttons feste 44×44 px, sie erben aber zugleich das
   Bootstrap-Button-Padding (9.6px 22.4px). Dadurch wurde das Icon nach
   rechts geschoben (23 px links / 6 px rechts) und der Kreis auf 47 px
   verbreitert. Mit Flex-Zentrierung und ohne Padding sitzt es mittig.
   ------------------------------------------------------------------------- */
.badge-circle,
.badge-circle-1,
a.badge-circle,
a.badge-circle-1,
button.badge-circle,
button.badge-circle-1 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center;
}
.badge-circle > i,
.badge-circle > span,
.badge-circle-1 > i,
.badge-circle-1 > span {
    margin: 0 !important;
    line-height: 1 !important;
}

/* =========================================================================
   Abschnitts-Klassen für den OnPage Composer

   Im OPC lässt sich jedem Container unter "Erweitert › CSS-Klasse" eine
   dieser Klassen geben. So entstehen einheitliche Abschnitte, ohne dass
   Hintergrundfarbe und Abstände einzeln eingestellt werden müssen.

     pyro-section              Grundabschnitt mit ruhigem Innenabstand
     pyro-section--accent      blaues Band über die volle Breite
     pyro-section--dark        schwarzes Band (wie Hero/Footer)
     pyro-section--light       helle Fläche zum Absetzen
     pyro-section--tight       halber Innenabstand
     pyro-section--flush       ohne Innenabstand
     pyro-section--center      Inhalt zentriert
   ========================================================================= */
.pyro-section {
    padding: 3rem 0;
    position: relative;
}
.pyro-section > .row,
.pyro-section > div { position: relative; z-index: 1; }

.pyro-section--tight { padding: 1.5rem 0; }
.pyro-section--flush { padding: 0; }
.pyro-section--center { text-align: center; }

/* Farbige Bänder ziehen sich über die volle Fensterbreite, auch wenn der
   OPC-Container innen begrenzt ist. */
.pyro-section--accent,
.pyro-section--dark,
.pyro-section--light { position: relative; }
.pyro-section--accent::before,
.pyro-section--dark::before,
.pyro-section--light::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: 0;
}
.pyro-section--accent::before { background: linear-gradient(90deg, var(--pyro-blue) 0%, #1fb0f0 100%); }
.pyro-section--dark::before   { background: var(--pyro-dark); }
.pyro-section--light::before  { background: #fff; }

.pyro-section--accent,
.pyro-section--accent h1, .pyro-section--accent h2, .pyro-section--accent h3,
.pyro-section--dark,
.pyro-section--dark h1, .pyro-section--dark h2, .pyro-section--dark h3 { color: #fff; }
.pyro-section--accent a:not(.btn) { color: #fff; text-decoration: underline; }
.pyro-section--dark a:not(.btn) { color: var(--pyro-blue); }

/* Überschrift eines Abschnitts */
.pyro-section > h2:first-child,
.pyro-section > .row > h2:first-child { margin-top: 0; }

@media (max-width: 767.98px) {
    .pyro-section { padding: 2rem 0; }
    .pyro-section--tight { padding: 1rem 0; }
}

/* =========================================================================
   Automatische Abstände für die Startseiten-Bausteine im OnPage Composer

   Damit im OPC keine CSS-Klasse von Hand vergeben werden muss, erkennen
   wir am Inhalt, welcher Baustein in einem Container steckt, und setzen
   Innenabstand und Hintergrund passend. Die Klassen pyro-section… bleiben
   zusätzlich nutzbar, sind aber nicht mehr nötig.
   ========================================================================= */

/* Hero: bringt eigenes Padding und eigenen Hintergrund mit – der Container
   soll ihn weder einrahmen noch überfärben. */
.opc-Container:has(.pyro-hero) {
    padding: 0 !important;
    background: transparent !important;
}
/* Falls am Container noch ein farbiges Band (pyro-section--accent o. ä.)
   eingestellt ist: hinter dem Hero wird es nicht gebraucht. */
.opc-Container:has(.pyro-hero)::before { display: none !important; }

/* Inhaltsabschnitte: ruhiger Abstand nach oben und unten */
.opc-Container:has(.pyro-cat-tiles),
.opc-Container:has(.pyro-howto) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Abholblock: oben weniger, weil die Abschnittsüberschrift schon Luft hat */
.opc-Container:has(.pyro-home-pickup) {
    padding-top: 1.5rem !important;
    padding-bottom: 3rem !important;
}

/* Artikel-Slider (Product-Stream) zwischen den Abschnitten */
.opc-ProductStream-slider,
.opc-product-slider { margin: 1rem 0; }

/* --- Doppelte Abstände vermeiden -----------------------------------------
   Hero, Container-Padding und Abschnittsüberschrift brachten je einen
   eigenen Abstand mit – zusammen 128 px Leerraum. Der Container regelt
   den Abstand, die beiden anderen geben ihren ab. */
.opc-Container .pyro-hero { margin-bottom: 0; }
.opc-Container .pyro-section-title:first-child,
.opc-Container > div > .pyro-section-title:first-child { margin-top: 0; }

@media (max-width: 767.98px) {
    .opc-Container:has(.pyro-cat-tiles),
    .opc-Container:has(.pyro-howto) {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .opc-Container:has(.pyro-home-pickup) {
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Ältere Browser ohne :has() – dann tragen die Bausteine ihren Abstand selbst */
@supports not selector(:has(*)) {
    .pyro-cat-tiles, .pyro-howto { margin: 3rem 0; }
    .pyro-home-pickup { margin: 1.5rem 0 3rem; }
}

/* =========================================================================
   Kurzbeschreibung: Zeilenumbrüche aus der Wawi anzeigen

   Die Lieferantendaten kommen zeilenweise (Kategorie, Brenndauer,
   Schussanzahl, NEM …), HTML stellt einfache Umbrüche aber nicht dar.
   "pre-line" zeigt sie an, bricht lange Zeilen aber weiterhin um.
   ========================================================================= */
/* Datenblatt aus der Kurzbeschreibung (siehe snippets/pyro_specs.tpl) */
.pyro-specs { margin-top: .75rem; }
.pyro-spec-intro {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pyro-ink);
    line-height: 1.45;
    margin: 0 0 .75rem;
}
.pyro-spec-row {
    display: flex;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--pyro-line);
    font-size: .875rem;
}
.pyro-spec-row:last-child { border-bottom: 0; }
.pyro-spec-label { flex: 0 0 45%; color: var(--pyro-ink-soft); }
.pyro-spec-value { font-weight: 600; color: var(--pyro-ink); }
@media (max-width: 400px) {
    .pyro-spec-label { flex-basis: 52%; }
    .pyro-spec-row { font-size: .8125rem; }
}

/* =========================================================================
   Verkaufstext auf der Artikelseite

   Die Beschreibung stand bisher im Reiter ganz unten – der Kunde sah sie
   erst nach dem Kaufbereich. Jetzt steht sie oben und ist etwas
   hervorgehoben, ohne den technischen Daten die Aufmerksamkeit zu nehmen.
   ========================================================================= */
.pyro-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pyro-ink);
    margin: .875rem 0 1.125rem;
    padding-left: 1rem;
    border-left: 3px solid var(--pyro-blue);
}
.pyro-lead p:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .pyro-lead { font-size: .9375rem; padding-left: .875rem; }
}