/*
 * Heimwerkglobal 2026 - Startseite (hwg/home.tpl), Topbar-Aufteilung,
 * Kopfbereich-Beschriftungen, mobile Leiste unten.
 * Alle Klassen mit Praefix hwg- (keine Kollision mit Bootstrap/NOVA).
 * Farb-Tokens: siehe hwg-design.css (:root).
 */

/* Gemeinsames =============================================================== */

.hwg-i {
    width: 20px;
    height: 20px;
    flex: none;
    vertical-align: middle;
}

.hwg-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.hwg-home h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin: 0;
}

.hwg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--hwg-font-body);
    font-stretch: 100%;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--hwg-amber);
}

.hwg-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    flex: none;
    background: currentColor;
}

.hwg-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.hwg-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background .2s, transform .2s, color .2s;
}

.hwg-btn .hwg-i { width: 18px; height: 18px; }
.hwg-btn:hover { text-decoration: none; }
.hwg-btn--amber { background: var(--hwg-amber); color: var(--hwg-ink); }
.hwg-btn--amber:hover { background: var(--hwg-amber-hover); color: var(--hwg-ink); transform: translateY(-1px); }
.hwg-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; }
.hwg-btn--dark { background: var(--hwg-ink); color: #fff; }
.hwg-btn--dark:hover { background: #000; color: #fff; }

.hwg-section { padding-top: 72px; }

.hwg-shead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.hwg-shead p {
    color: var(--hwg-ink-3);
    margin: 8px 0 0;
    max-width: 560px;
}

.hwg-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--hwg-green-700);
    white-space: nowrap;
    text-decoration: none;
}

.hwg-more .hwg-i { width: 16px; height: 16px; transition: transform .2s; }
.hwg-more:hover .hwg-i { transform: translateX(3px); }

/* Startseite: NOVA-Container-Abstaende neutralisieren */
.hwg-home { padding-bottom: 16px; }

/* Hero ======================================================================== */

.hwg-hero { padding-top: 28px; }

.hwg-hero-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
}

.hwg-hero-main {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 480px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--hwg-green-900);
    color: #fff;
    text-decoration: none;
}

.hwg-hero-main:hover { color: #fff; text-decoration: none; }

.hwg-hero-main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 50%;
    opacity: .9;
}

.hwg-hero-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 46, 34, .96) 0%, rgba(11, 46, 34, .82) 42%, rgba(11, 46, 34, .1) 75%);
}

.hwg-hero-copy {
    position: relative;
    z-index: 1;
    padding: 48px;
    max-width: 560px;
}

.hwg-hero-title {
    font-family: var(--hwg-font-head);
    font-stretch: 85%;
    font-weight: 800;
    font-size: clamp(38px, 4.6vw, 62px);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 16px 0 18px;
    color: #fff;
}

.hwg-hero-title em { font-style: normal; color: var(--hwg-amber); }

.hwg-hero-text {
    font-size: 17px;
    color: #cfe0d6;
    max-width: 440px;
    margin: 0;
}

.hwg-hero-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.hwg-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 230px;
    padding: 28px;
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s;
}

.hwg-tile:hover { transform: translateY(-2px); box-shadow: var(--hwg-shadow-lg); text-decoration: none; }

.hwg-tile-copy { position: relative; z-index: 1; display: block; max-width: 60%; }

.hwg-tile-title {
    display: block;
    font-family: var(--hwg-font-head);
    font-stretch: 85%;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.05;
}

.hwg-tile-text { display: block; font-size: 14px; margin-top: 8px; }

.hwg-tile-go {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.hwg-tile-go .hwg-i { width: 16px; height: 16px; }

.hwg-tile img {
    position: absolute;
    right: 12px;
    bottom: 10px;
    height: 86%;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.hwg-tile-tag {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    background: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 11px;
    box-shadow: var(--hwg-shadow);
    color: var(--hwg-ink);
}

.hwg-tile--pool { background: linear-gradient(135deg, #e3f1f8, #cfe6f2); color: #0b3550; }
.hwg-tile--pool:hover { color: #0b3550; }
.hwg-tile--pool .hwg-tile-text { color: #2f5b74; }
.hwg-tile--clean { background: linear-gradient(135deg, #e9f4ee, #d3e8dc); color: var(--hwg-green-900); }
.hwg-tile--clean:hover { color: var(--hwg-green-900); }
.hwg-tile--clean .hwg-tile-text { color: #355a46; }

/* Vertrauensleiste */
.hwg-trust {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--hwg-line);
    border-radius: 18px;
    background: #fff;
}

.hwg-trust li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
}

.hwg-trust li + li { border-left: 1px solid var(--hwg-line); }

.hwg-trust-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--hwg-green-50);
    color: var(--hwg-green-700);
    display: grid;
    place-items: center;
    flex: none;
}

.hwg-trust b { display: block; font-size: 15px; color: var(--hwg-ink); }
.hwg-trust small { font-size: 13px; color: var(--hwg-ink-3); }

/* Kategorie-Kacheln ============================================================ */

.hwg-cgrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.hwg-cat {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 22px 18px 18px;
    background: var(--hwg-stone);
    border: 1px solid transparent;
    border-radius: var(--hwg-radius);
    color: var(--hwg-ink);
    text-decoration: none;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}

.hwg-cat:hover {
    background: var(--hwg-green-50);
    border-color: var(--hwg-green-100);
    box-shadow: var(--hwg-shadow);
    transform: translateY(-2px);
    color: var(--hwg-ink);
    text-decoration: none;
}

.hwg-cat-ic {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    color: var(--hwg-green-700);
    display: grid;
    place-items: center;
    box-shadow: var(--hwg-shadow);
}

.hwg-cat-ic .hwg-i { width: 24px; height: 24px; }
.hwg-cat--sale .hwg-cat-ic { color: var(--hwg-red); }

/* Lange deutsche Woerter ("Industriebetriebsbedarf") duerfen die Spalte nicht
   verbreitern - sonst zoomt das Handy heraus. Daher minmax(0, 1fr) in allen
   Rastern (unten) und Silbentrennung im Namen. */
.hwg-cat { min-width: 0; }
.hwg-cat b { display: block; font-size: 15px; overflow-wrap: anywhere; hyphens: auto; }
.hwg-cat small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--hwg-ink-3); }

/* Reiter + Produktraster ======================================================= */

.hwg-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: var(--hwg-stone);
    border-radius: 999px;
}

.hwg-tabs button {
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--hwg-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.hwg-tabs button.is-on {
    background: #fff;
    color: var(--hwg-ink);
    font-weight: 600;
    box-shadow: var(--hwg-shadow);
}

.hwg-pgrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* NOVA setzt auf .product-wrapper Spalten-Paddings - im eigenen Raster aus */
.hwg-pcol.product-wrapper {
    padding: 0;
    max-width: none;
    flex: none;
    width: auto;
}

/* Eigenmarken-Band ============================================================ */

.hwg-own {
    position: relative;
    display: grid;
    /* Karten so breit wie bei 'Beliebt' (ca. 240px bei 1440px Breite) */
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.75fr);
    border-radius: 28px;
    overflow: hidden;
    background: var(--hwg-green-900);
    color: #fff;
}

.hwg-own::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 400px at 0% 100%, rgba(245, 179, 1, .14), transparent 60%),
        radial-gradient(600px 300px at 100% 0%, rgba(255, 255, 255, .06), transparent 60%);
    pointer-events: none;
}

.hwg-own-copy { position: relative; padding: 56px; }
.hwg-own-copy h2 { color: #fff; margin: 16px 0 !important; font-size: clamp(32px, 3.4vw, 46px); }
.hwg-own-copy p { color: #bcd2c5; max-width: 400px; }

.hwg-own-copy ul {
    list-style: none;
    margin: 24px 0 32px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.hwg-own-copy li {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14.5px;
    color: #e3eee7;
}

.hwg-own-copy li .hwg-i { width: 18px; height: 18px; color: var(--hwg-amber); }

.hwg-own-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 32px 32px 32px 0;
    align-content: center;
    color: var(--hwg-ink);
}

/* Herstellerleiste ============================================================= */

.hwg-brands {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
    background: var(--hwg-line);
    border: 1px solid var(--hwg-line);
    border-radius: 18px;
    overflow: hidden;
}

.hwg-brands a {
    height: 92px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    background: #fff;
    font-family: var(--hwg-font-head);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .02em;
    color: #97a19b;
    text-align: center;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.hwg-brands a:hover { background: var(--hwg-green-50); color: var(--hwg-green-800); text-decoration: none; }

/* Ratgeber ===================================================================== */

.hwg-guides {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 18px;
}

.hwg-guide {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: var(--hwg-stone);
    color: var(--hwg-ink);
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}

.hwg-guide:hover { box-shadow: var(--hwg-shadow-lg); transform: translateY(-2px); color: var(--hwg-ink); text-decoration: none; }

/* Ratgeber-Kacheln wie die Hero-Kacheln: Farbverlauf + freigestelltes
   Produktbild (statt Banner mit abgeschnittener Schrift). */
.hwg-guide-img {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--hwg-line-2);
}

.hwg-guide:first-child .hwg-guide-img { aspect-ratio: 16 / 9; }

.hwg-guide-img img {
    width: auto;
    height: 74%;
    max-width: 80%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .35s;
}

.hwg-guide:hover .hwg-guide-img img { transform: scale(1.04); }
/* Schlicht: weisse Bildflaeche, Karte mit feinem Rahmen (Chef-Feedback: kein Farbverlauf) */
.hwg-guide { background: #fff; border: 1px solid var(--hwg-line); }
.hwg-guide-body { display: block; padding: 22px 24px 26px; }

.hwg-guide-tag {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--hwg-green-700);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.hwg-guide-title { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; margin: 8px 0 6px; }
.hwg-guide-text { display: block; font-size: 14px; color: var(--hwg-ink-3); }

/* Beratung + FAQ ================================================================ */

.hwg-help {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
}

.hwg-help-box {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 44px;
    background: var(--hwg-amber);
    color: var(--hwg-ink);
}

.hwg-help-box h2 { max-width: 460px; }
.hwg-help-box p { margin: 12px 0 26px; max-width: 440px; color: #3d3200; }

.hwg-help-big {
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 240px;
    height: 240px;
    color: rgba(0, 0, 0, .08);
    stroke-width: 1.2;
}

.hwg-faq {
    border: 1px solid var(--hwg-line);
    border-radius: 24px;
    padding: 16px 28px;
}

.hwg-faq details { border-bottom: 1px solid var(--hwg-line-2); padding: 16px 0; }
.hwg-faq details:last-child { border: 0; }

.hwg-faq summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
}

.hwg-faq summary::-webkit-details-marker { display: none; }
.hwg-faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--hwg-green-700); }
.hwg-faq details[open] summary::after { content: "–"; }
.hwg-faq details p { font-size: 14px; color: var(--hwg-ink-2); margin: 10px 0 0; }

/* Topbar: links Vorteile, rechts Service ======================================== */

/* Eine Zeile, niemals umbrechen: ein Umbruch wuerde unter dem Kopfbereich
   verschwinden (feste Hoehe 38px, siehe heimwerkglobal.scss). Bei weniger
   Breite entfallen Eintraege schrittweise. */
#header-top-bar .hwg-topbar {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0 26px;
    overflow: hidden;
}

#header-top-bar .hwg-topbar .hwg-topbar-right { margin-left: auto; }

@media (max-width: 1549.98px) {
    #header-top-bar .hwg-topbar-sources { display: none; }
}

@media (max-width: 1299.98px) {
    #header-top-bar .hwg-topbar-usp { display: none; }
}

/* Hauptnavigation: Symbol VOR dem Text (NOVA nutzt ::before fuer die
   Unterstreichung des aktiven Punkts - hier umgewidmet, siehe hwg-icons.css) */
#mainNavigation .navbar-nav > .nav-item > .nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#mainNavigation .navbar-nav > .nav-item > .nav-link::before {
    position: static !important;
    transform: none !important;
    border: 0 !important;
    opacity: 1 !important;
}

/* Kopfbereich: Beschriftungen unter den Symbolen ================================ */

@media (min-width: 992px) {
    #shop-nav > .nav-item:not(.cart-icon-dropdown) > .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 12px;
        font-size: 12px;
        line-height: 1.2;
    }

    #shop-nav > .account-icon-dropdown > .nav-link::after,
    #shop-nav > #shop-nav-wish > .nav-link::after {
        display: block;
        border: 0;
        margin: 0;
        font-family: var(--hwg-font-body);
        font-size: 12px;
        font-weight: 500;
        color: var(--hwg-ink-2);
        vertical-align: baseline;
    }

    #shop-nav > .account-icon-dropdown > .nav-link::after { content: "Konto"; }
    #shop-nav > #shop-nav-wish > .nav-link::after { content: "Merkliste"; }

    #shop-nav .cart-icon-dropdown > .nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 18px;
        border-radius: 14px;
    }

    #shop-nav .cart-icon-dropdown-price {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        font-weight: 700;
        font-size: 14px;
    }

    #shop-nav .cart-icon-dropdown-price::before {
        content: "Warenkorb";
        font-size: 11px;
        font-weight: 500;
        opacity: .75;
    }
}

/* Mobile Leiste unten ============================================================ */

.hwg-mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--hwg-line);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .2);
}

.hwg-mbar a,
.hwg-mbar button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    border: 0;
    background: none;
    font-family: var(--hwg-font-body);
    font-size: 10.5px;
    color: var(--hwg-ink-2);
    text-decoration: none;
}

.hwg-mbar .is-on { color: var(--hwg-green-800); font-weight: 600; }
.hwg-mbar .hwg-i { width: 22px; height: 22px; }

.hwg-mbar-badge {
    position: absolute;
    top: 0;
    right: calc(50% - 20px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--hwg-amber);
    color: var(--hwg-ink);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

@media (max-width: 991.98px) {
    /* Platz fuer die Leiste, und NOVAs "nach oben"-Knopf darueber setzen */
    body { padding-bottom: 64px; }
    .smoothscroll-top { bottom: 76px; }
    /* Cookie-Einstellungen (Fingerabdruck) ueber die Leiste setzen */
    #consent-settings-btn { bottom: 76px !important; }
}

/* Responsive Startseite ============================================================ */

@media (max-width: 1180px) {
    .hwg-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hwg-pgrid > :nth-child(5) { display: none; }
    .hwg-cgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hwg-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .hwg-hero-grid,
    .hwg-own,
    .hwg-help { grid-template-columns: 1fr; }
    .hwg-hero-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
    .hwg-own-rail { padding: 0 24px 32px; }
    .hwg-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hwg-trust li:nth-child(3) { border-left: 0; }
    .hwg-trust li:nth-child(n+3) { border-top: 1px solid var(--hwg-line); }
    .hwg-guides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hwg-guides .hwg-guide:first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .hwg-wrap { padding: 0 16px; }
    .hwg-hero { padding-top: 16px; }
    .hwg-hero-main { min-height: 440px; border-radius: 18px; }
    .hwg-hero-main img { opacity: .55; }
    .hwg-hero-main::after {
        background: linear-gradient(0deg, rgba(11, 46, 34, .98) 0%, rgba(11, 46, 34, .85) 50%, rgba(11, 46, 34, .2) 100%);
    }
    .hwg-hero-copy { padding: 28px 22px; }
    .hwg-hero-text { font-size: 15px; }
    .hwg-hero-side { grid-template-columns: 1fr; }
    .hwg-tile { min-height: 180px; border-radius: 18px; }
    .hwg-tile-title { font-size: 24px; }
    .hwg-tile img { height: 80%; }
    .hwg-trust { grid-template-columns: 1fr; }
    .hwg-trust li { border-left: 0 !important; padding: 14px 18px; }
    .hwg-trust li + li { border-top: 1px solid var(--hwg-line); }
    .hwg-section { padding-top: 52px; }
    .hwg-shead { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hwg-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .hwg-cgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .hwg-cat { gap: 18px; padding: 16px; }
    .hwg-pgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .hwg-own-copy { padding: 36px 22px 24px; }
    .hwg-own-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0 16px 22px; }
    .hwg-own-rail > :nth-child(3) { display: none; }
    .hwg-brands { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hwg-brands a { height: 64px; font-size: 16px; }
    .hwg-guides { grid-template-columns: 1fr; }
    .hwg-help-box { padding: 30px 24px; }
    .hwg-faq { padding: 8px 20px; }
}

/* Desktop-Navigation wie im Entwurf: eine Zeile, kompakte Pillen ============== */

@media (min-width: 992px) {
    #mainNavigation .navbar-nav > .nav-item > .nav-link {
        padding: 9px 11px;
        font-size: 13.5px;
        white-space: nowrap;
    }

    /* Scroll-Pfeile von NOVA werden bei 10 Eintraegen nicht gebraucht */
    #mainNavigation .nav-scrollbar-arrow { display: none !important; }

    #mainNavigation { align-items: center; }
    #mainNavigation .navbar-nav { align-items: center; }
    /* NOVA gibt der Liste unten 24px Innenabstand (versteckt die Scrollleiste),
       die Mitte des Containers liegt deshalb tiefer als die Eintraege. Darum
       oben ausrichten und die Pille in der Hoehe der Eintraege (50px) zentrieren. */
    #mainNavigation .navbar-nav > .nav-item > .nav-link { padding-top: 15px; padding-bottom: 15px; }
    .hwg-nav-all { align-self: flex-start; margin-top: 6px; }
}

/* "Alle Kategorien" */
.hwg-nav-all {
    position: relative;
    margin-left: auto;
    flex: none;
}

.hwg-nav-all > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--hwg-stone);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hwg-ink);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.hwg-nav-all > summary::-webkit-details-marker { display: none; }
.hwg-nav-all > summary .hwg-i { width: 17px; height: 17px; color: var(--hwg-green-600); }
.hwg-nav-all[open] > summary { background: var(--hwg-green-50); color: var(--hwg-green-800); }

.hwg-nav-all-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1040;
    width: min(760px, 90vw);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--hwg-line);
    border-radius: 18px;
    box-shadow: var(--hwg-shadow-lg);
}

.hwg-nav-all-panel a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    color: var(--hwg-ink);
    text-decoration: none;
}

.hwg-nav-all-panel a:hover { background: var(--hwg-stone); color: var(--hwg-ink); text-decoration: none; }

.hwg-nav-all-ic {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    background: var(--hwg-green-50);
    color: var(--hwg-green-700);
    display: grid;
    place-items: center;
}

.hwg-nav-all-panel b { display: block; font-size: 14px; font-weight: 600; }
.hwg-nav-all-panel small { display: block; font-size: 12px; color: var(--hwg-ink-3); line-height: 1.35; }

/* Suchfeld Desktop: Knopf "Suchen" + Hinweis "Art.-Nr." (HAN ist intern, nicht durchsuchbar) ===== */

@media (min-width: 992px) {
    #search .input-group-append {
        align-items: center;
    }

    #search .input-group-append::before {
        content: "Art.-Nr.";
        margin-right: 8px;
        padding: 2px 7px;
        border: 1px solid var(--hwg-line);
        border-radius: 6px;
        background: #fff;
        font-size: 12px;
        color: var(--hwg-ink-3);
        white-space: nowrap;
    }

    #search .input-group-append .btn {
        height: 42px;
        min-width: 0;
        padding: 0 22px;
        margin: 5px;
        font-size: 14px;
        font-weight: 600;
    }

    #search .input-group-append .btn .fas { display: none; }
    #search .input-group-append .btn::after { content: "Suchen"; }

    #search .form-control { height: 52px; background: transparent !important; }
}
/* Produktkarte (hwg/product_card.tpl) - wie im Entwurf ======================== */

.hwg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--hwg-line);
    border-radius: var(--hwg-radius);
    overflow: hidden;
    color: var(--hwg-ink);
    transition: border-color .2s, box-shadow .2s;
}

.hwg-card:hover { border-color: #cdd3cc; box-shadow: var(--hwg-shadow-lg); }

/* Bildflaeche: weisser Grund, Bild in angeforderter Groesse (scharf),
   leichter Zoom NUR auf dieser eigenen Karte (kein NOVA-Bildwechsel hier) */
.hwg-card-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid var(--hwg-line-2);
}

/* Bild absolut in der quadratischen Flaeche: Hoch-/Querformate duerfen die
   Kartenhoehe nicht veraendern (sonst verrutscht die Reihe). */
.hwg-card-media img {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    object-fit: contain;
    transition: transform .35s;
}

.hwg-card:hover .hwg-card-media img { transform: scale(1.03); }

.hwg-flag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--hwg-green-800);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.hwg-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 16px 16px 18px;
}

.hwg-card-brand {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hwg-ink-3);
}

.hwg-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--hwg-ink);
    text-decoration: none;
}

.hwg-card-title:hover { color: var(--hwg-green-700); text-decoration: none; }

/* Lagerstatus aus NOVA (span.status.status-N mit LKW-Symbol) als Punkt */
.hwg-card-stock { min-height: 1.3em; }

.hwg-card-stock .status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}

.hwg-card-stock .status-icon { display: none; }

.hwg-card-stock .status::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(34, 160, 90, .18);
}

.hwg-card-stock .status-2 { color: var(--hwg-green-700); }
.hwg-card-stock .status-1 { color: #b26a00; }
.hwg-card-stock .status-0 { color: var(--hwg-red); }

.hwg-card-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
}

.hwg-card-price { min-width: 0; flex: 1; }
.hwg-card-price .price_wrapper { text-align: left; }

.hwg-card-price .price {
    font-family: var(--hwg-font-head);
    font-stretch: 90%;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    color: var(--hwg-ink);
    white-space: nowrap;
}

.hwg-card-price .price-note,
.hwg-card-price .base-price {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--hwg-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hwg-card-price a { color: var(--hwg-ink-3); }

.hwg-card-buy { margin: 0; }

.hwg-card-add {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: var(--hwg-green-800);
    color: #fff;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.hwg-card-add:hover,
.hwg-card-add:focus { background: var(--hwg-amber); color: var(--hwg-ink); }
.hwg-card-add .hwg-i { width: 20px; height: 20px; }

@media (max-width: 720px) {
    .hwg-card-body { padding: 12px; }
    .hwg-card-price .price { font-size: 20px; }
    .hwg-card-add { width: 38px; height: 38px; border-radius: 10px; }
}
/* Spannenpreise ("37,90 € - 39,90 €") duerfen umbrechen statt gegen den
   Warenkorb-Knopf zu laufen; in den schmalen Karten des Eigenmarken-Bands
   etwas kleiner. */
.hwg-card-price .price { white-space: normal; }
.hwg-card-price .price span { white-space: nowrap; }
.hwg-own-rail .hwg-card-price .price { font-size: 20px; }
.hwg-own-rail .hwg-card-body { padding: 14px; }
/* Startseite: NOVAs oberen Inhaltsabstand entfernen - der Hero bringt seinen
   eigenen Abstand mit (28px wie im Entwurf). :has wird von allen aktuellen
   Browsern unterstuetzt; aeltere zeigen nur etwas mehr Abstand. */
#content-wrapper:has(.hwg-home),
#content:has(.hwg-home) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#content-wrapper:has(.hwg-home) .breadcrumb-container { display: none; }
/* <picture>-Huellen (Hero, Produktkarten) verhalten sich wie das Bild selbst */
.hwg-hero-main picture,
.hwg-card-media picture { display: contents; }
/* Hinweis bei leerer Suche (Skript in layout/footer.tpl) */
.hwg-search-empty {
    border-color: var(--hwg-red) !important;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .12) !important;
    animation: hwg-shake .35s ease-in-out;
}

@keyframes hwg-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .hwg-search-empty { animation: none; }
}
/* Eigene 404-Seite / leere Suche (page/404.tpl) */
.hwg-404 { max-width: 1272px; margin: 0 auto; padding: 24px 0 40px; }
.hwg-404-head { max-width: 720px; margin-bottom: 36px; }
.hwg-404-head h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 14px 0 12px; }
.hwg-404-head p { color: var(--hwg-ink-2); font-size: 16px; margin: 0 0 22px; }

.hwg-404-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

.hwg-404-links a { font-weight: 600; color: var(--hwg-green-700); }
/* 404: JTLs roter Zusatzhinweis ist doppelt zur eigenen Ueberschrift */
#content-wrapper:has(.hwg-404) .alert-danger { display: none; }
/* OPC-Bereiche der Startseite (Plugin hwg_opc_home) ===========================
   Live stehen die Bausteine direkt im Raster; im OPC-Bearbeitungsmodus liegen
   sie in einem .opc-area - beide Faelle muessen dasselbe Raster ergeben. */
.hwg-hero-slot { display: flex; min-width: 0; }
.hwg-hero-slot > .hwg-hero-main,
.hwg-hero-slot > .opc-area { flex: 1; min-width: 0; }
.hwg-hero-slot > .opc-area { display: flex; }
.hwg-hero-slot > .opc-area > * { flex: 1; }

.hwg-hero-side > .opc-area {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    min-height: 480px;
}

/* Banner als <div> (OPC) statt Link: Knoepfe sind echte Links */
div.hwg-hero-main .hwg-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* Dritte Kachel-Farbe aus dem OPC: Hellgrau */
.hwg-tile--neutral { background: linear-gradient(135deg, #f3f6f4, #e6ebe8); color: var(--hwg-ink); }
.hwg-tile--neutral:hover { color: var(--hwg-ink); }
.hwg-tile--neutral .hwg-tile-text { color: var(--hwg-ink-2); }

@media (max-width: 980px) {
    .hwg-hero-side > .opc-area { grid-template-rows: none; grid-template-columns: 1fr 1fr; min-height: 0; }
}

@media (max-width: 720px) {
    .hwg-hero-side > .opc-area { grid-template-columns: 1fr; }
}
/* Handy: fremde Knoepfe ueber die Leiste unten setzen ========================
   Cookie-Knopf (Plugin ws5_eucookie, Fingerabdruck) sass links ueber "Start".
   Der Barrierefreiheits-Knopf (easy-vision) liegt im Shadow-DOM - der wird per
   Skript in layout/footer.tpl verschoben. */
@media (max-width: 991.98px) {
    svg[class*="openConsentManagerButton"] { bottom: 84px !important; }

    /* iOS zoomt in Eingabefelder unter 16px hinein und springt dann beim
       Scrollen - Suchfeld deshalb mit 16px */
    .search-form-wrapper-fixed .form-control,
    #search .form-control { font-size: 16px; }
}
/* Desktop: NOVA blendet beim Scrollen ein Haus-Symbol vor den Kategorien ein -
   das schiebt "Alle Kategorien" rechts aus der Zeile. Start erreicht man ueber das Logo. */
@media (min-width: 992px) {
    #mainNavigation .nav-home-button { display: none !important; }
}