/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/* ==========================================================================
   Produkt-FAQ (Tab "FAQ" auf der Artikelseite) - hwg/product_faq.tpl
   Farbe: #004C25 = $primary aus _variables.scss
   ========================================================================== */
.hwg-pfaq {
    max-width: 60rem;
    padding: .5rem 0 1rem;
}
.hwg-pfaq-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.hwg-pfaq-head-icon {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #e8f2ec;
    color: #004C25;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.hwg-pfaq-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2a24;
    line-height: 1.3;
}
.hwg-pfaq-sub {
    margin: .15rem 0 0;
    font-size: .875rem;
    color: #6b7670;
}
.hwg-pfaq-item {
    background: #fff;
    border: 1px solid #e2e8e4;
    border-radius: .75rem;
    margin-bottom: .625rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hwg-pfaq-item:hover {
    border-color: #b9cfc2;
    box-shadow: 0 2px 10px rgba(0, 76, 37, .06);
}
.hwg-pfaq-item[open] {
    border-color: #004C25;
    box-shadow: 0 4px 18px rgba(0, 76, 37, .10);
}
.hwg-pfaq-q {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1rem;
    color: #1f2a24;
    border-radius: .75rem;
    user-select: none;
}
.hwg-pfaq-q::-webkit-details-marker { display: none; }
.hwg-pfaq-q::marker { content: ''; }
.hwg-pfaq-q:focus-visible {
    outline: 2px solid #004C25;
    outline-offset: 2px;
}
.hwg-pfaq-q-badge {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #e8f2ec;
    color: #004C25;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.hwg-pfaq-q-text { flex: 1 1 auto; line-height: 1.4; }
.hwg-pfaq-q-toggle {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #f3f6f4;
    color: #004C25;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    transition: transform .25s ease, background .2s ease, color .2s ease;
}
.hwg-pfaq-item:hover .hwg-pfaq-q-text,
.hwg-pfaq-item[open] .hwg-pfaq-q-text { color: #004C25; }
.hwg-pfaq-item[open] .hwg-pfaq-q-badge,
.hwg-pfaq-item[open] .hwg-pfaq-q-toggle {
    background: #004C25;
    color: #fff;
}
.hwg-pfaq-item[open] .hwg-pfaq-q-toggle { transform: rotate(180deg); }
.hwg-pfaq-a {
    padding: 0 1.25rem 1.125rem 3.875rem;
    color: #3d4842;
    line-height: 1.65;
    animation: hwgPfaqIn .25s ease;
}
.hwg-pfaq-a p { margin-bottom: .6rem; }
.hwg-pfaq-a p:last-child,
.hwg-pfaq-a ul:last-child { margin-bottom: 0; }
.hwg-pfaq-a ul {
    padding-left: 1.1rem;
    margin-bottom: .6rem;
}
.hwg-pfaq-a li { margin-bottom: .2rem; }
.hwg-pfaq-a li::marker { color: #004C25; }
.hwg-pfaq-a a { color: #004C25; text-decoration: underline; }
@keyframes hwgPfaqIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.hwg-pfaq-contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: #f3f8f5;
    border: 1px dashed #b9cfc2;
    border-radius: .75rem;
}
.hwg-pfaq-contact-icon {
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #004C25;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hwg-pfaq-contact-text { display: flex; flex-direction: column; color: #3d4842; font-size: .95rem; }
.hwg-pfaq-contact-text strong { color: #1f2a24; }
.hwg-pfaq-contact-text a { color: #004C25; font-weight: 600; }
.hwg-pfaq-note {
    margin: .875rem 0 0;
    font-size: .78rem;
    color: #8a948e;
}
@media (max-width: 575.98px) {
    .hwg-pfaq-q { padding: .875rem 1rem; gap: .625rem; font-size: .95rem; }
    .hwg-pfaq-a { padding: 0 1rem 1rem 1rem; }
    .hwg-pfaq-head-icon { display: none; }
    .hwg-pfaq-contact { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .hwg-pfaq-a { animation: none; }
    .hwg-pfaq-item, .hwg-pfaq-q-toggle { transition: none; }
}

/* Kategorie-Ratgeber unter der Produktliste (Teil nach [mehr], siehe productlist/index.tpl) */
.hwg-cat-guide {
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid #e3e6e1;
    max-width: 860px;
}
.hwg-cat-guide h2 { font-size: 1.5rem; margin: 1.75rem 0 .75rem; }
.hwg-cat-guide h3 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
.hwg-cat-guide table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.hwg-cat-guide th, .hwg-cat-guide td { padding: .5rem .75rem; border-bottom: 1px solid #e3e6e1; text-align: left; vertical-align: top; }
.hwg-cat-guide th { background: #f1f7f3; }

/* Barrierefreiheit (Lighthouse, 2026-10-30) ============================== */

/* Topbar-Quellenangabe: $primary mit opacity .7 ergab auf Weiss nur 4,46:1
   (Minimum 4,5:1). Feste Farbe ohne Transparenz, ca. 6,3:1. */
.hwg-topbar-sources {
    color: #2e6b4b;
    opacity: 1;
}

/* Slider-Punkte: Klickflaeche 24x24 px (vorher 11 px, Minimum 24 px).
   Der sichtbare Punkt bleibt 8 px gross und wird als ::before gezeichnet. */
.splide__pagination__page {
    width: 24px;
    height: 24px;
    margin: 0;
    background: transparent;
    opacity: 1;
    transform: none;
}
.splide__pagination__page::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #ccc;
    opacity: .7;
    transition: transform .2s linear;
}
.splide__pagination__page.is-active,
.slider-wrapper .splide__pagination__page.is-active {
    background: transparent;
    border: 0;
    transform: none;
}
.splide__pagination__page.is-active::before {
    background: #fff;
    opacity: 1;
    transform: scale(1.4);
}
.slider-wrapper .splide__pagination__page.is-active::before {
    border: 1px solid #525252;
}
.splide__pagination__page:hover::before { opacity: .9; }
@media (prefers-reduced-motion: reduce) {
    .splide__pagination__page::before { transition: none; }
}
/* =====================================================================
 * HALLOWEEN (nur Template NOVAChild_Halloween)
 * Markup: hwg/halloween_bar.tpl, hwg/halloween_hero.tpl,
 *         layout/header_categories.tpl. Deko am Logo haengt per
 *         body:has(.hwg-hw-bar) an der Aktionsleiste (fehlt nach
 *         Aktionsende und im Bestellvorgang).
 * Farben: Nacht #13141f / #1c1d2c, Orange #f59a3c, Shopgruen #004c25.
 * ===================================================================== */
.hwg-hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hwg-hw-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.2em; }

/* --- Aktionsleiste --- */
.hwg-hw-bar {
    position: relative;
    overflow: hidden;
    background: #13141f;
    color: #f2efea;
    font-size: .875rem;
    line-height: 1.35;
    padding: .45rem 1rem;
}
.hwg-hw-bar-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .6rem;
    margin: 0;
    text-align: center;
    font-weight: 600;
}
.hwg-hw-bar-code {
    background: #f59a3c;
    color: #1a1208;
    border-radius: 3px;
    padding: .05rem .5rem;
    letter-spacing: .08em;
}
.hwg-hw-bar-bat {
    position: absolute;
    top: 50%;
    left: -40px;
    width: 30px;
    height: 15px;
    margin-top: -8px;
    fill: #8a86a8;
    animation: hwg-hw-fly-bar 22s linear infinite;
    pointer-events: none;
}
@keyframes hwg-hw-fly-bar {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(25vw, -4px); }
    50%  { transform: translate(50vw, 3px); }
    75%  { transform: translate(75vw, -3px); }
    100% { transform: translate(calc(100vw + 80px), 0); }
}

/* --- Mini-Kuerbis auf dem Logo --- */
body:has(.hwg-hw-bar) #logo .navbar-brand { position: relative; }
body:has(.hwg-hw-bar) #logo .navbar-brand::after {
    content: '';
    position: absolute;
    top: -6px;
    right: -14px;
    width: 26px;
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15 4.5c.6-2.4 3.4-3.4 5.4-2.2-2 .9-3 2.7-3.1 4.9h-2.4z' fill='%233f7a2e'/%3E%3Cellipse cx='10' cy='19' rx='8' ry='10' fill='%23e06d17'/%3E%3Cellipse cx='22' cy='19' rx='8' ry='10' fill='%23e06d17'/%3E%3Cellipse cx='16' cy='19' rx='8' ry='11' fill='%23f59a3c'/%3E%3Cpath d='M9.5 16.5l2.8-3.2 2.8 3.2zM16.9 16.5l2.8-3.2 2.8 3.2z' fill='%232b1a0a'/%3E%3Cpath d='M9 21.2c4.6 5.2 9.4 5.2 14 0l-2.2.9-1.4-1.3-1.5 1.7-1.9-1.6-1.9 1.6-1.5-1.7-1.4 1.3z' fill='%232b1a0a'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: rotate(12deg);
    transform-origin: 50% 90%;
    animation: hwg-hw-wobble 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hwg-hw-wobble {
    0%, 80%, 100% { transform: rotate(12deg); }
    86% { transform: rotate(0deg); }
    92% { transform: rotate(20deg); }
}
@media (max-width: 991.98px) {
    body:has(.hwg-hw-bar) #logo .navbar-brand::after { width: 20px; height: 20px; top: -4px; right: -10px; }
}

/* --- Menuepunkt "Halloween-Deals" --- */
.hwg-hw-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #b34d00 !important;
    font-weight: 700;
}
@media (min-width: 992px) {
    .hwg-hw-nav .nav-link { box-shadow: inset 0 -2px 0 #f59a3c; }
}

/* --- Startseiten-Banner --- */
.hwg-hw-hero { margin-top: 1rem; margin-bottom: 1.5rem; }
.hwg-hw-hero-inner {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
    padding: 2.5rem 3rem;
    border-radius: 6px;
    background:
        radial-gradient(ellipse at 75% 20%, rgba(80, 78, 130, .45), transparent 55%),
        linear-gradient(180deg, #1c1d2c 0%, #13141f 100%);
    color: #f2efea;
}
.hwg-hw-scene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.hwg-hw-moon {
    position: absolute;
    top: -40px;
    right: 7%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #ffe7c2 0%, #f5b56a 45%, rgba(245, 154, 60, 0) 72%);
    opacity: .9;
    animation: hwg-hw-flicker 7s infinite;
}
@keyframes hwg-hw-flicker {
    0%, 100% { opacity: .9; } 8% { opacity: .6; } 10% { opacity: .95; }
    42% { opacity: .8; } 44% { opacity: .5; } 46% { opacity: .9; }
}

/* Spinne am Faden */
.hwg-hw-spider {
    position: absolute;
    top: 0;
    left: 54%;
    width: 1px;
    height: 120px;
    background: rgba(242, 239, 234, .45);
    transform-origin: top center;
    animation: hwg-hw-spider 6s ease-in-out infinite;
}
.hwg-hw-spider-body {
    position: absolute;
    bottom: -7px;
    left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0b0b12;
    box-shadow: 0 0 0 2px rgba(242, 239, 234, .25);
}
.hwg-hw-spider-body::before,
.hwg-hw-spider-body::after {
    content: '';
    position: absolute;
    top: 5px;
    left: -6px;
    width: 26px;
    height: 4px;
    border-top: 2px solid #0b0b12;
    border-bottom: 2px solid #0b0b12;
}
.hwg-hw-spider-body::after { top: 1px; transform: rotate(10deg); }
@keyframes hwg-hw-spider {
    0%, 100% { height: 110px; transform: rotate(0deg); }
    50% { height: 150px; transform: rotate(3deg); }
}

/* Fledermaeuse: aeusseres SVG fliegt, Fluegelschlag per scaleY */
.hwg-hw-bat {
    position: absolute;
    fill: #0b0b12;
    filter: drop-shadow(0 0 2px rgba(245, 154, 60, .45));
}
.hwg-hw-bat-1 { top: 18%; left: -70px; width: 64px; height: 32px; animation: hwg-hw-fly 16s linear infinite; }
.hwg-hw-bat-2 { top: 36%; left: -70px; width: 40px; height: 20px; animation: hwg-hw-fly 21s linear -9s infinite; }
.hwg-hw-bat-3 { top: 10%; right: 24%; width: 34px; height: 17px; animation: hwg-hw-hover 5s ease-in-out infinite; }
@keyframes hwg-hw-fly {
    0%   { transform: translate(0, 0) scaleY(1); }
    10%  { transform: translate(10vw, -12px) scaleY(.5); }
    20%  { transform: translate(20vw, -20px) scaleY(1); }
    30%  { transform: translate(30vw, -26px) scaleY(.5); }
    40%  { transform: translate(40vw, -10px) scaleY(1); }
    50%  { transform: translate(50vw, 6px) scaleY(.5); }
    60%  { transform: translate(60vw, 18px) scaleY(1); }
    70%  { transform: translate(70vw, 10px) scaleY(.5); }
    80%  { transform: translate(80vw, -4px) scaleY(1); }
    90%  { transform: translate(90vw, -10px) scaleY(.5); }
    100% { transform: translate(calc(100vw + 140px), -10px) scaleY(1); }
}
@keyframes hwg-hw-hover {
    0%, 100% { transform: translate(0, 0) scaleY(1); }
    25% { transform: translate(-9px, 5px) scaleY(.55); }
    50% { transform: translate(-18px, 10px) scaleY(1); }
    75% { transform: translate(-9px, 5px) scaleY(.55); }
}

.hwg-hw-fog {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -40px;
    height: 180px;
    background:
        radial-gradient(ellipse at 30% 60%, rgba(140, 135, 170, .2), transparent 60%),
        radial-gradient(ellipse at 75% 70%, rgba(140, 135, 170, .16), transparent 60%);
    animation: hwg-hw-drift 18s ease-in-out infinite;
}
@keyframes hwg-hw-drift { 0%, 100% { transform: translateX(-4%); } 50% { transform: translateX(4%); } }

/* Leuchtende Kuerbisse unten rechts */
.hwg-hw-pumpkins { position: absolute; right: 6%; bottom: 14px; display: flex; align-items: flex-end; gap: 6px; }
.hwg-hw-pk { filter: drop-shadow(0 0 14px rgba(245, 154, 60, .55)); }
.hwg-hw-pk-1 { width: 54px; height: 54px; }
.hwg-hw-pk-2 { width: 84px; height: 84px; animation: hwg-hw-glow 3s ease-in-out infinite; }
.hwg-hw-pk-3 { width: 44px; height: 44px; }
@keyframes hwg-hw-glow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(245, 154, 60, .55)); }
    50% { filter: drop-shadow(0 0 26px rgba(255, 178, 94, .9)); }
}

/* Text */
.hwg-hw-copy { position: relative; z-index: 1; max-width: 560px; }
.hwg-hw-title {
    display: inline-flex;
    flex-direction: column;
    margin: 0 0 1.25rem;
    padding: .9rem 1.6rem .8rem;
    background: #004c25;
    color: #fff;
    font-size: clamp(2.4rem, 5.5vw, 4.4rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.01em;
    text-transform: uppercase;
    transform: rotate(-2deg);
    box-shadow: 8px 8px 0 #f59a3c;
}
.hwg-hw-tags { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.hwg-hw-tags::before,
.hwg-hw-tags::after { content: ''; width: 40px; height: 2px; background: #f2efea; }
.hwg-hw-tags span {
    border: 2px solid #f2efea;
    background: #004c25;
    border-radius: 4px;
    padding: .2rem .8rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.hwg-hw-text { margin: 0 0 1.25rem; font-size: 1.1rem; line-height: 1.5; color: #e1dee8; }
.hwg-hw-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.hwg-hw-cta {
    display: inline-flex;
    align-items: center;
    background: #f59a3c;
    color: #1a1208 !important;
    border-radius: 4px;
    padding: .6rem 1.4rem;
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none !important;
}
.hwg-hw-cta:hover { background: #ffb25e; }
.hwg-hw-cta-ghost { background: transparent; border: 2px dashed #f59a3c; color: #f2efea !important; }
.hwg-hw-cta-ghost:hover { background: rgba(245, 154, 60, .15); }
.hwg-hw-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 767.98px) {
    .hwg-hw-hero-inner { min-height: 0; padding: 1.75rem 1.25rem 6rem; }
    .hwg-hw-moon { width: 160px; height: 160px; top: -30px; right: -20px; }
    .hwg-hw-spider { left: 78%; }
    .hwg-hw-pk-1 { width: 40px; height: 40px; }
    .hwg-hw-pk-2 { width: 60px; height: 60px; }
    .hwg-hw-pk-3 { width: 32px; height: 32px; }
    .hwg-hw-bar { font-size: .8rem; }
}

/* =====================================================================
 * SEITENWEITER HALLOWEEN-LOOK (nur Farben + Deko-Pseudoelemente, keine
 * Layout-Aenderung, keine Regeln auf Produktbilder). Alles haengt an
 * body:has(.hwg-hw-bar) und verschwindet mit der Leiste.
 * ===================================================================== */

/* Topbar nachtblau */
body:has(.hwg-hw-bar) #header-top-bar { background: #1c1d2c; }
body:has(.hwg-hw-bar) #header-top-bar,
body:has(.hwg-hw-bar) #header-top-bar .nav-link,
body:has(.hwg-hw-bar) #header-top-bar .hwg-topbar-item,
body:has(.hwg-hw-bar) #header-top-bar .hwg-topbar-item i,
body:has(.hwg-hw-bar) #header-top-bar .hwg-topbar-sources { color: #f2efea !important; }
body:has(.hwg-hw-bar) #header-top-bar a.nav-link:hover,
body:has(.hwg-hw-bar) #header-top-bar a.nav-link:hover .hwg-topbar-item,
body:has(.hwg-hw-bar) #header-top-bar a.nav-link:hover i { color: #f59a3c !important; }
body:has(.hwg-hw-bar) #header-top-bar .hwg-topbar-item i.hwg-topbar-star { color: #f59a3c !important; }

/* Kopf: orange-violette Kante + Spinnennetz in der Ecke (hinter dem Inhalt) */
body:has(.hwg-hw-bar) #jtl-nav-wrapper:not(.sticky-top) { position: relative; z-index: 1020; }
body:has(.hwg-hw-bar) #jtl-nav-wrapper {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #f59a3c, #7a4bb3, #f59a3c) 1;
}
body:has(.hwg-hw-bar) #jtl-nav-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%237d7a94' stroke-width='1.2'%3E%3Cpath d='M100 0L0 30M100 0L20 80M100 0L70 100M80 6Q84 16 94 20M60 12Q68 32 88 40M40 18Q52 48 82 60M20 24Q36 64 76 80'/%3E%3C/svg%3E") no-repeat right top / contain;
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}
@media (max-width: 991.98px) {
    body:has(.hwg-hw-bar) #jtl-nav-wrapper::before { width: 56px; height: 56px; }
}

/* Kategorien-Menue: Orange beim Hovern / aktiv */
@media (min-width: 992px) {
    body:has(.hwg-hw-bar) #mainNavigation .nav-scrollbar-inner > .nav-item > .nav-link:hover,
    body:has(.hwg-hw-bar) #mainNavigation .nav-scrollbar-inner > .nav-item.active > .nav-link {
        color: #b34d00 !important;
        box-shadow: inset 0 -2px 0 #f59a3c;
    }
}

/* Fledermaeuse, die ab und zu ueber die ganze Seite fliegen (fixiert,
   klickdurchlaessig, unter allen Dialogen) */
.hwg-hw-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
}
.hwg-hw-sky-bat {
    position: absolute;
    left: -80px;
    fill: #1c1d2c;
    opacity: .85;
}
.hwg-hw-sky-bat-1 { top: 30vh; width: 46px; height: 23px; animation: hwg-hw-sky 38s linear 4s infinite; }
.hwg-hw-sky-bat-2 { top: 62vh; width: 30px; height: 15px; animation: hwg-hw-sky 53s linear 21s infinite; }
@keyframes hwg-hw-sky {
    0%   { transform: translate(0, 0) scaleY(1); }
    3%   { transform: translate(15vw, -30px) scaleY(.5); }
    6%   { transform: translate(30vw, -10px) scaleY(1); }
    9%   { transform: translate(45vw, -40px) scaleY(.5); }
    12%  { transform: translate(60vw, -20px) scaleY(1); }
    15%  { transform: translate(75vw, -50px) scaleY(.5); }
    18%  { transform: translate(90vw, -30px) scaleY(1); }
    21%, 100% { transform: translate(calc(100vw + 160px), -60px) scaleY(.5); }
}

/* Footer: orange Kante, Spinnennetz links oben */
body:has(.hwg-hw-bar) #footer { position: relative; border-top: 4px solid #f59a3c; }
body:has(.hwg-hw-bar) #footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%237d7a94' stroke-width='1.2'%3E%3Cpath d='M0 0L100 30M0 0L80 80M0 0L30 100M20 6Q16 16 6 20M40 12Q32 32 12 40M60 18Q48 48 18 60M80 24Q64 64 24 80'/%3E%3C/svg%3E") no-repeat left top / contain;
    opacity: .5;
    pointer-events: none;
}

/* Kleine Kuerbisse vor den Ueberschriften der Startseite (js/custom.js) */
.hwg-hw-head-ico { width: .9em; height: .9em; margin-right: .4rem; vertical-align: -.1em; }

/* --- Spinne, die auf allen Seiten rechts unter dem Kopf haengt ---
   Liegt in .hwg-hw-sky (z-index 5) und damit HINTER dem Sticky-Kopf:
   der Faden kommt scheinbar unter dem Menue hervor. Nur ab Tablet. */
.hwg-hw-sky-spider {
    position: absolute;
    top: 0;
    right: 4%;
    width: 1px;
    height: 170px;
    background: rgba(90, 88, 110, .55);
    transform-origin: top center;
    animation: hwg-hw-sky-spider 9s ease-in-out infinite;
}
.hwg-hw-sky-spider .hwg-hw-spider-body { background: #1c1d2c; box-shadow: none; }
.hwg-hw-sky-spider .hwg-hw-spider-body::before,
.hwg-hw-sky-spider .hwg-hw-spider-body::after { border-color: #1c1d2c; }
@keyframes hwg-hw-sky-spider {
    0%, 100% { height: 160px; transform: rotate(0deg); }
    40% { height: 215px; transform: rotate(-2deg); }
    70% { height: 190px; transform: rotate(1.5deg); }
}
@media (max-width: 767.98px) { .hwg-hw-sky-spider { display: none; } }

/* Kuerbis-Symbol (Datei wie am Logo) fuer Ueberschriften */
body:has(.hwg-hw-bar)[data-page="2"] #content h1::before,
body:has(.hwg-hw-bar)[data-page="1"] .product-title::before {
    content: '';
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-right: .45rem;
    vertical-align: -.08em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15 4.5c.6-2.4 3.4-3.4 5.4-2.2-2 .9-3 2.7-3.1 4.9h-2.4z' fill='%233f7a2e'/%3E%3Cellipse cx='10' cy='19' rx='8' ry='10' fill='%23e06d17'/%3E%3Cellipse cx='22' cy='19' rx='8' ry='10' fill='%23e06d17'/%3E%3Cellipse cx='16' cy='19' rx='8' ry='11' fill='%23f59a3c'/%3E%3Cpath d='M9.5 16.5l2.8-3.2 2.8 3.2zM16.9 16.5l2.8-3.2 2.8 3.2z' fill='%232b1a0a'/%3E%3Cpath d='M9 21.2c4.6 5.2 9.4 5.2 14 0l-2.2.9-1.4-1.3-1.5 1.7-1.9-1.6-1.9 1.6-1.5-1.7-1.4 1.3z' fill='%232b1a0a'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Kategorieseiten (Artikelliste) --- */
/* Ueberschrift mit orange Unterstrich */
body:has(.hwg-hw-bar)[data-page="2"] #content h1 {
    display: inline-block;
    padding-bottom: .2rem;
    border-bottom: 3px solid #f59a3c;
}
/* Spinnennetz oben rechts im Inhaltsbereich */
body:has(.hwg-hw-bar)[data-page="2"] #content,
body:has(.hwg-hw-bar)[data-page="1"] #product-offer { position: relative; }
body:has(.hwg-hw-bar)[data-page="2"] #content::before,
body:has(.hwg-hw-bar)[data-page="1"] #product-offer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%237d7a94' stroke-width='1.2'%3E%3Cpath d='M100 0L0 30M100 0L20 80M100 0L70 100M80 6Q84 16 94 20M60 12Q68 32 88 40M40 18Q52 48 82 60M20 24Q36 64 76 80'/%3E%3C/svg%3E") no-repeat right top / contain;
    opacity: .4;
    pointer-events: none;
    z-index: 0;
}
/* Artikeltitel in der Liste: orange beim Hovern (nur Text, nicht das Bild) */
body:has(.hwg-hw-bar) .productbox-title a:hover { color: #b34d00; }
/* Aktive Seitenzahl / Filter-Chips orange */
body:has(.hwg-hw-bar) .pagination .page-item.active .page-link {
    background: #f59a3c;
    border-color: #f59a3c;
    color: #1a1208;
}

/* --- Artikelseite --- */
/* Titel mit orange gestrichelter Linie darunter (kein CSS-Text: der
   wuerde in den Namen der Ueberschrift fuer Screenreader/KI einfliessen) */
body:has(.hwg-hw-bar)[data-page="1"] .product-title {
    padding-bottom: .35rem;
    border-bottom: 2px dashed #f59a3c;
}
/* Reiter (Beschreibung, Details ...) mit orange Markierung */
body:has(.hwg-hw-bar)[data-page="1"] .nav-tabs .nav-link.active {
    box-shadow: inset 0 -3px 0 #f59a3c;
}

/* Weniger Bewegung, wenn im Betriebssystem eingestellt */
@media (prefers-reduced-motion: reduce) {
    .hwg-hw-bar-bat, .hwg-hw-moon, .hwg-hw-spider, .hwg-hw-bat, .hwg-hw-fog, .hwg-hw-pk-2, .hwg-hw-sky-spider,
    body:has(.hwg-hw-bar) #logo .navbar-brand::after { animation: none !important; }
    .hwg-hw-bat-1 { left: auto; right: 42%; }
    .hwg-hw-bat-2 { left: auto; right: 34%; }
    .hwg-hw-bar-bat, .hwg-hw-sky { display: none; }
}