/* Bewegungs-Tokens — dieselben Werte wie themes/hookain/sass/_variables.scss.
   Diese Datei ist reines CSS und laeuft nicht durch den SCSS-Build, deshalb
   hier als Custom Properties statt als SCSS-Variablen. */
:root{--hk-t-tap:120ms;--hk-t-ui:200ms;--hk-t-panel:320ms;--hk-e-out:cubic-bezier(0.2,0.8,0.2,1);--hk-e-in-out:cubic-bezier(0.4,0,0.2,1)}

/* Tabbed product streams arrive only when the section approaches the
   viewport. Reserve their visual rhythm with neutral card silhouettes so a
   deferred response cannot pull following OPC content upwards or downwards. */
.hk-tabbed-slider__panel[data-hk-tab-deferred="1"].is-active{min-height:24rem}
.hk-tabbed-slider__skeleton{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem}
.hk-tabbed-slider__skeleton span{display:block;min-height:22rem;border:1px solid #e7e7e6;background:linear-gradient(110deg,#f4f4f3 25%,#fafafa 38%,#f4f4f3 55%);background-size:220% 100%;animation:hk-tabbed-slider-shimmer 1.35s linear infinite}
.hk-tabbed-slider__loading{margin:.7rem 0;color:#87898f;font-family:"Space Mono",ui-monospace,monospace;font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase}
@keyframes hk-tabbed-slider-shimmer{to{background-position:-220% 0}}
@media(min-width:768px){.hk-tabbed-slider__panel[data-hk-tab-deferred="1"].is-active{min-height:27rem}.hk-tabbed-slider__skeleton{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.hk-tabbed-slider__skeleton span{min-height:25rem}}
@media(prefers-reduced-motion:reduce){.hk-tabbed-slider__skeleton span{animation:none}}
/*
 * Platz fuer eigene Aenderungen direkt als CSS
 * Die hier gemachten Aenderungen ueberschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/* Hookain double banner: desktop runs two independent banner sliders, mobile keeps one slider. */
.hk-theme-double-banner .hk-double-desktop {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.hk-theme-double-banner .hk-double-panel {
    position: relative;
    min-width: 0;
    min-height: inherit;
    overflow: hidden;
    background: #101010;
}

.hk-theme-double-banner .hk-double-panel .hk-swiper-instance {
    height: 100%;
    min-height: inherit;
}

.hk-theme-double-banner .hk-double-mobile {
    display: block;
}

@media (min-width: 992px) {
    .hk-theme-double-banner .hk-double-desktop {
        display: grid;
    }

    .hk-theme-double-banner .hk-double-mobile {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .hk-theme-double-banner .hk-double-desktop {
        display: none !important;
    }

    .hk-theme-double-banner .hk-double-mobile {
        display: block;
    }
}

/* Final interface consistency pass — these rules load after the compiled theme. */
#consent-settings-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#consent-settings-btn > i,
#consent-settings-btn > svg,
#consent-settings-btn .fa {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.hk-payment-icons img {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    filter: none !important;
    opacity: 1;
}

.hk-payment-icons img:hover { opacity: 1; }

/* Keep visual content below the sticky navigation/mega menu without creating
   a stacking contest with the sidecart and consent manager. */
.product-list, .product-detail, .blog-overview, .hk-blog-main,
.lofi-mixmate-page, .hk-pg, .ivss-sale-page { position: relative; z-index: 1; }

/* Product-list alignment: the filter bar and first product card share the
   container edge on every desktop breakpoint. */
@media (min-width: 992px) {
    .hk-filter-root { margin-left: 0 !important; }
    .hk-filter-root + .hk-filter-cockpit-header { margin-left: 0 !important; }
    .row.product-list.layout-gallery { margin-left: -.5rem; }
}

/* A small, repeatable action language: square-ish controls, never pills
   unless the control is explicitly a search field or a compact filter chip. */
.btn, button:not(.hk-facet__opt):not(.hk-filter-active-chip):not(.lofi-mixmate__chip) {
    border-radius: 4px !important;
}

.ivss-sale-page { max-width: 1250px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 4rem) .5rem; }
.ivss-sale-hero { max-width: 48rem; margin-bottom: 1.5rem; }
.ivss-sale-hero h1 { font-weight: 900; letter-spacing: -.04em; }
.ivss-sale-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.ivss-sale-card { min-height: 15rem; display: flex; flex-direction: column; align-items: flex-start; padding: 1.35rem; border: 1px solid #e7e7e6; background: #fff; }
.ivss-sale-card .btn { margin-top: auto; }
.ivss-sale-card--all { border-color: #e2233b; background: linear-gradient(135deg, rgba(226,35,59,.07), #fff 62%); }
.ivss-sale-card__eyebrow { margin-bottom: .5rem; color: #e2233b; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

/* A legacy OPC body is still attached to the existing About link. The bespoke
   .hk-pg is the authoritative page; do not render the old second page below it. */
.hk-pg ~ .hk-portlet { display: none !important; }

/* Mobile header: search belongs to the icon cluster, not to a second line. */
@media (max-width: 767.98px) {
    #jtl-nav-wrapper .hide-navbar .navbar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: .15rem;
        padding: .35rem .5rem;
    }
    #jtl-nav-wrapper .nav-logo-wrapper {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 0;
    }
    #jtl-nav-wrapper .toggler-logo-wrapper {
        position: relative;
        display: flex;
        float: none;
        align-items: center;
        min-width: 0;
    }
    #jtl-nav-wrapper .toggler-logo-wrapper .burger-menu-wrapper {
        float: none;
        flex: 0 0 38px;
        padding: .35rem;
    }
    #jtl-nav-wrapper #shop-logo {
        width: auto;
        height: 34px;
        max-width: 132px;
        object-fit: contain;
    }
    #jtl-nav-wrapper .main-search-wrapper {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
    #jtl-nav-wrapper .main-search-wrapper .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
    }
    #jtl-nav-wrapper .main-search-wrapper .dropdown-menu {
        min-width: min(22rem, calc(100vw - 1rem));
        margin-top: .45rem;
    }
    #jtl-nav-wrapper .nav-icons-wrapper {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 0;
    }
    #jtl-nav-wrapper #shop-nav.nav-icons {
        width: auto;
        justify-content: flex-end;
    }
    #jtl-nav-wrapper #shop-nav.nav-icons .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
    }
    #jtl-nav-wrapper .hk-vip-pill-li { display: none !important; }
}

/* The mobile side navigation is the single category entry point below the
   desktop breakpoint. The inherited desktop category bar is otherwise
   hydrated late and creates a redundant second header row after first paint. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper .menu-center-center { display: none !important; }
}

/* Consent is an overlay, never a layout participant. */
#consent-settings-btn .consent-icon {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
}
#consent-settings-btn .consent-icon svg {
    display: block !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
    margin: 0 !important;
}
.consent-modal.active {
    display: grid !important;
    inset: 0 !important;
    margin: 0 !important;
    z-index: 1070 !important;
}
.consent-modal.active .consent-modal-content { margin: 0 !important; }
@media (max-width: 767.98px) {
    #consent-settings-btn {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 4.75rem) !important;
        left: .75rem !important;
    }
}

/* Editorial content: compact, direct and deliberately outside Wawi content. */
.hk-home-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.55fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: end; margin-top: var(--hk-section-y, 3rem); margin-bottom: var(--hk-section-y, 3rem); padding-top: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid #e7e7e6; }
.hk-home-story__intro h1,.hk-home-story__intro h2 { max-width: 10ch; margin: .35rem 0 .8rem; color: #16171c; font-family: 'Archivo Black','Arial Narrow Bold',Impact,sans-serif; font-size: clamp(1.8rem, 4vw, 3rem); line-height: .98; letter-spacing: .01em; text-transform: uppercase; }
.hk-home-story__intro p:not(.hk-home-story__eyebrow) { max-width: 48ch; margin: 0; color: #525252; line-height: 1.65; }
.hk-home-story__eyebrow,.hk-home-story__num { display: block; margin: 0; color: #e2233b; font-family: 'Space Mono',ui-monospace,monospace; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hk-home-story__link { display: inline-flex; gap: .4rem; margin-top: 1rem; color: #16171c; font-weight: 800; text-decoration: none; }
.hk-home-story__link span { color: #e2233b; }
.hk-home-story__grid,.hk-pg-manifesto__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid #e7e7e6; background: #e7e7e6; }
.hk-home-story__card,.hk-pg-manifesto__grid article { display: flex; flex-direction: column; min-height: 13rem; padding: 1.2rem; background: #fff; color: #16171c; text-decoration: none; transition: background-color var(--hk-t-ui) var(--hk-e-out),color var(--hk-t-ui) var(--hk-e-out); }
.hk-home-story__card strong,.hk-pg-manifesto__grid h3 { margin: auto 0 .55rem; font-size: 1.03rem; font-weight: 900; line-height: 1.18; }
.hk-home-story__card > span:last-child,.hk-pg-manifesto__grid p { margin: 0; color: #707070; font-size: .84rem; line-height: 1.5; }
.hk-home-story__card:hover,.hk-home-story__card:focus,.hk-home-story__card--accent { background: #16171c; color: #fff; }
.hk-home-story__card:hover > span:last-child,.hk-home-story__card:focus > span:last-child,.hk-home-story__card--accent > span:last-child { color: rgba(255,255,255,.72); }
.hk-pg-manifesto { border-top: 1px solid #e7e7e6; padding-top: clamp(1.5rem, 4vw, 3rem); }
.hk-pg-manifesto__lead { max-width: 66ch; margin: -.3rem 0 1.4rem; color: #525252; font-size: 1rem; line-height: 1.65; }
.hk-pg-manifesto__grid article > span { color: #e2233b; font-family: monospace; font-size: .68rem; font-weight: 800; }
.hk-pg-manifesto__grid h3 { margin-top: auto; }
@media (max-width: 820px) { .hk-home-story { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .hk-home-story__grid,.hk-pg-manifesto__grid { grid-template-columns: 1fr; } .hk-home-story__card,.hk-pg-manifesto__grid article { min-height: 10rem; } }

/* Homepage rhythm: retain the editorial breathing room, lose the empty corridors. */
html body #content > .hk-portlet + .hk-portlet { margin-top: clamp(1.25rem, 2.4vw, 2rem) !important; }
.hk-home-story { margin-top: clamp(1.5rem, 2.8vw, 2.25rem); margin-bottom: clamp(1.5rem, 2.8vw, 2.25rem); padding-top: clamp(1.25rem, 2.8vw, 2.25rem); }

/* Mobile navigation: MixMate is a useful action, not a fifth competing primary section. */
@media (max-width: 767.98px) {
    .hk-tabbar__item--mixmate { color: #16171c; transform: translateY(-.45rem); font-weight: 800; }
    .hk-tabbar__item--mixmate .hk-tabbar__icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background: #e2233b; color: #fff; box-shadow: 0 3px 12px rgba(226,35,59,.28); }
    .hk-tabbar__item--mixmate .hk-tabbar__icon svg { width: 1.15rem; height: 1.15rem; }
    .hk-tabbar__item--mixmate:focus-visible { outline: 2px solid #1fb6c9; outline-offset: -2px; }
}

/* Consent: compact and legible; it stays a clear choice rather than becoming a page-sized layer. */
html body #consent-banner { padding: .45rem .8rem !important; box-shadow: 0 -2px 12px rgba(22,23,28,.06) !important; }
html body #consent-manager,html body #consent-manager p { font-size: .74rem !important; line-height: 1.35 !important; }
html body .consent-banner-body { gap: .7rem !important; max-width: 72rem !important; }
html body .consent-display-1,html body .consent-display-2 { margin-bottom: .05rem !important; font-size: .78rem !important; }
html body .consent-btn { min-height: 1.9rem !important; padding: .28rem .62rem !important; font-size: .67rem !important; }
@media (max-width: 767.98px) {
    html body #consent-banner { padding: .5rem .7rem !important; }
    html body .consent-banner-body { gap: .35rem !important; }
    html body .consent-btn-helper { gap: .3rem !important; }
}


/* ============================================================
   P4 (2026-07-18): moved from inline <style> in layout/header.tpl
   into this cached sheet. Static, self-scoped tuning rules — kept
   at file end so any higher-specificity rules above still win.
   Removes ~5.5KB of inline CSS from every HTML response.
   ============================================================ */

/* --- hk-consent-bar-compact --- */
#consent-banner {
        padding: 0.65rem 1.25rem !important;
        border: none !important;
        border-top: 1px solid rgba(22,23,28,0.1) !important;
        border-radius: 0 !important;
        box-shadow: 0 -4px 20px rgba(22,23,28,0.07) !important;
        background: linear-gradient(90deg,rgba(226,35,59,0.03),rgba(31,182,201,0.03)),#fff !important;
        width: 100% !important;
      }
      #consent-manager {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
      }
      #consent-manager p {
        margin: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
      }
      #consent-manager hr {
        display: none !important;
      }
      .consent-banner-icon {
        display: none !important;
      }
      .consent-banner-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        max-width: 80rem !important;
        margin: 0 auto !important;
      }
      .consent-display-1 {
        font-size: 0.92rem !important;
        margin: 0 0 0.15rem !important;
        font-weight: 700 !important;
      }
      .consent-display-2 {
        font-size: 0.88rem !important;
        margin: 0 0 0.15rem !important;
        font-weight: 700 !important;
      }
      .consent-display-3 {
        display: none !important;
      }
      .consent-btn {
        min-height: 2.1rem !important;
        padding: 0.35rem 0.85rem !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
      }
      .consent-btn-helper,
      .consent-btn-holder {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.4rem !important;
        flex-shrink: 0 !important;
      }
      .consent-btn-block,
      .consent-btn-helper .consent-btn,
      .consent-btn-holder .consent-btn {
        width: auto !important;
      }
      @media (max-width: 767.98px) {
        #consent-banner {
          padding: 0.7rem 1rem !important;
        }
        .consent-banner-body {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 0.6rem !important;
        }
        .consent-btn-helper {
          width: 100% !important;
          flex-wrap: wrap !important;
        }
        .consent-btn-helper .consent-btn {
          flex: 1 1 auto !important;
        }
      }

/* --- hk-pdp-breadcrumb-tune --- */
/* Kill the huge gap between menu and PDP content: the theme's
         #content-wrapper:not(.has-fluid) desktop padding-top (4rem) plus
         the old 2.35rem breadcrumb margin stacked to ~6.5rem dead space.
         Breadcrumb now sits tight under the header, content right below. */
      #content-wrapper:has(.product-detail):not(.has-fluid) {
        padding-top: 0.75rem !important;
      }
      #content-wrapper:has(.product-detail) .breadcrumb-container,
      body.hk-has-pdp-addbar #content-wrapper .breadcrumb-container {
        margin-top: 0.25rem;
        margin-bottom: 0.9rem;
      }

      #content-wrapper:has(.product-detail) .breadcrumb-wrapper,
      body.hk-has-pdp-addbar #content-wrapper .breadcrumb-wrapper {
        min-height: 34px;
        align-items: flex-end;
      }

      #content-wrapper:has(.product-detail) .navigation-arrows,
      body.hk-has-pdp-addbar #content-wrapper .navigation-arrows {
        align-items: flex-end;
        padding-bottom: 0.05rem;
      }

      #content-wrapper:has(.product-detail) .navigation-arrows .btn,
      body.hk-has-pdp-addbar #content-wrapper .navigation-arrows .btn {
        margin-bottom: 0;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
      }

/* --- hk-card-actions-tune --- */
.hk-tabbed-slider .hookain-card-actions,
      .opc-HookainProductStream .hookain-card-actions {
        min-height: 42px !important;
        height: auto !important;
        overflow: visible !important;
        align-items: stretch !important;
      }
      .hk-tabbed-slider .hookain-quickbuy__qty,
      .hk-tabbed-slider .hookain-quickbuy__btn,
      .hk-tabbed-slider .hookain-quickbuy__details,
      .opc-HookainProductStream .hookain-quickbuy__qty,
      .opc-HookainProductStream .hookain-quickbuy__btn,
      .opc-HookainProductStream .hookain-quickbuy__details {
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
      }
      .hk-tabbed-slider .hookain-quickbuy__btn,
      .hk-tabbed-slider .hookain-quickbuy__details,
      .opc-HookainProductStream .hookain-quickbuy__btn,
      .opc-HookainProductStream .hookain-quickbuy__details {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
      }
      @media (max-width: 767.98px) {
        .hookain-quickbuy__btn {
          width: 36px !important;
          min-width: 36px !important;
          max-width: 36px !important;
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        .hookain-quickbuy__btn span {
          display: none !important;
        }
        .hookain-quickbuy__btn i {
          margin-right: 0 !important;
          font-size: 0.8rem !important;
        }
        .hookain-card-actions:has(.hookain-quickbuy__qty) {
          grid-template-columns: 1fr 36px !important;
        }
      }

/* --- hk-tabbed-slider-tune --- */
.hk-tabbed-slider__panel.is-active .product-wrapper {
        height: auto !important;
      }

/* ============================================================
   Filter SEO landing content (hk-filter-seo-landing) — 2026-07-18
   Injected by hookain_filter on curated filter landings. Lives in
   custom.css (override layer) because the theme scss build env
   (themes/bootstrap dep) is only reproducible in HookainLocal.
   ============================================================ */
.hk-filter-seo-landing--intro { max-width: 70ch; margin: .35rem 0 1.5rem; }
.hk-filter-seo-landing--intro p { margin: 0; font-family: "Inter", sans-serif; font-size: 1rem; line-height: 1.6; color: #3c3e45; }
.hk-filter-seo-landing--body { margin-top: clamp(2.5rem,5vw,4rem); padding-top: clamp(1.5rem,3vw,2.25rem); border-top: 1px solid #e7e7e6; max-width: 78ch; }
.hk-filter-seo-landing--body h2 { font-family: "Archivo Black","Arial Narrow Bold",Impact,sans-serif; text-transform: uppercase !important; letter-spacing: .01em; font-size: clamp(1.15rem,2.2vw,1.6rem); line-height: 1.05; margin: 1.75rem 0 .6rem; color: #16171c; }
.hk-filter-seo-landing--body h2:first-child { margin-top: 0; }
.hk-filter-seo-landing--body p { margin: 0 0 .9rem; font-family: "Inter", sans-serif; font-size: .95rem; line-height: 1.65; color: #3c3e45; }
.hk-filter-seo-landing--body ul, .hk-filter-seo-landing--body ol { margin: 0 0 .9rem 1.1rem; font-family: "Inter", sans-serif; font-size: .95rem; line-height: 1.6; color: #3c3e45; }
.hk-filter-seo-landing--body a { color: #e2233b; text-decoration: underline; text-underline-offset: 2px; }

/* rl_bonuspunkte listing-hint de-dupe (2026-07-18): the plugin renders the hint
   server-side AND re-injects it via JS with guards that check different scopes on
   the HookainV2 #result-wrapper DOM, so it doubles. Keep the first, hide extras.
   (Proper fix = align the plugin's server/JS guards; this is the safe symptom fix.) */
#result-wrapper .rl-bonuspunkte-listing-hint ~ .rl-bonuspunkte-listing-hint { display: none !important; }

/* ── Consent-Banner als schwebende Karte (2026-07-30) ─────────────────
   Die Regeln dafuer stehen HIER und nicht in _consent.scss: diese Datei
   laedt nach dem Bundle und traegt weiter oben bereits
   `#consent-banner { width: 100% !important }`. Jeder Versuch im Sass-Teil
   verpuffte deshalb, unabhaengig von der Spezifitaet.

   Statt einer Leiste ueber die volle Breite eine begrenzte Karte unten
   links: sichtbar, aber sie verdeckt nur eine Ecke statt den Seitenfuss. */
html body #consent-banner {
    width: min(30rem, calc(100vw - 2rem)) !important;
    max-width: none !important;
    /* links 4.75rem, damit die Karte neben dem fest verankerten
       Fingerabdruck-Schalter (#consent-settings-btn, 44px bei left:16px)
       steht und ihn nicht verdeckt. */
    margin: 0 auto 1rem 4.75rem !important;
    padding: 1.1rem 1.2rem !important;
    border: 1px solid rgba(22, 23, 28, .12) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 46px -18px rgba(15, 16, 22, .45) !important;
}

html body .consent-banner-body {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .8rem !important;
    max-width: none !important;
}

/* Im DOM stehen die Schalter VOR dem Text. In der Zeile war das egal, in der
   Spalte standen die Schalter ueber der Ueberschrift. */
html body .consent-banner-description { order: 1; }
html body .consent-banner-actions { order: 2; }

/* Der Beschreibungstext zaehlt jede Drittanbieter-Leistung einzeln auf — in
   einer schmalen Karte sind das zehn Zeilen. Auf drei gekuerzt; der Rest
   steht unter „Konfigurieren". Der Schnitt sitzt auf dem <p>, nicht auf dem
   Container: der traegt auch Ueberschrift und die beiden Rechtslinks, und die
   duerfen nicht mit abgeschnitten werden. */
html body .consent-banner-description p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .35rem !important;
}
html body .consent-banner-description { font-size: .82rem !important; }

html body .consent-banner-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
}

/* Jeder Schalter steckt in einem eigenen div, das auf volle Breite geht —
   in der schmalen Karte ergab das drei Zeilen. Die Wrapper duerfen schrumpfen. */
html body .consent-banner-actions,
html body .consent-banner-actions .consent-btn-helper { width: 100% !important; }

html body .consent-banner-actions .consent-btn-helper > * {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 7rem !important;
}

html body .consent-banner-actions .consent-btn { width: 100% !important; }

/* Auf dem Handy ist der Einzug von 4.75rem falsch: die Karte waere breiter als
   der Rest des Bildschirms und liefe rechts hinaus. Dort steht sie mittig,
   und der Abstand nach unten haelt sie ueber der Tab-Leiste (64px) und dem
   Fingerabdruck-Schalter. */
@media (max-width: 767.98px) {
    html body #consent-banner {
        width: calc(100vw - 1.5rem) !important;
        margin: 0 auto calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body .consent-banner-actions .consent-btn-helper > * {
        min-width: 6rem !important;
    }
}

/* Commercial decision tables: only the explicit content-contract class
   becomes cards on small screens. This serves Wawi category copy and the
   selected Blog decision guides; generic editor tables keep their existing
   horizontal-scroll behavior. Each cell supplies its own data-label, so this
   needs no JS or duplicate mobile markup. */
.blog-details article {
    --rte-accent: var(--hk-cyan, #1fb6c9);
}

@media (max-width: 767.98px) {
    .hk-rte table.hk-content-table,
    .hk-rte.hk-rte--bare table.hk-content-table,
    .blog-details article table.hk-content-table {
        display: block;
        overflow: visible;
        margin: 1.25rem 0 1.5rem;
    }

    .hk-rte table.hk-content-table thead,
    .hk-rte.hk-rte--bare table.hk-content-table thead,
    .blog-details article table.hk-content-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .hk-rte table.hk-content-table tbody,
    .hk-rte.hk-rte--bare table.hk-content-table tbody,
    .blog-details article table.hk-content-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .hk-rte table.hk-content-table tr,
    .hk-rte.hk-rte--bare table.hk-content-table tr,
    .blog-details article table.hk-content-table tr {
        display: block;
        overflow: hidden;
        border: 1px solid #e7e7e6;
        border-left: 3px solid var(--rte-accent);
        border-radius: 4px;
        background: #fff;
    }

    .hk-rte table.hk-content-table td,
    .hk-rte table.hk-content-table tr:nth-child(even) td,
    .hk-rte table.hk-content-table tr:hover td,
    .hk-rte.hk-rte--bare table.hk-content-table td,
    .hk-rte.hk-rte--bare table.hk-content-table tr:nth-child(even) td,
    .hk-rte.hk-rte--bare table.hk-content-table tr:hover td,
    .blog-details article table.hk-content-table td,
    .blog-details article table.hk-content-table tr:nth-child(even) td,
    .blog-details article table.hk-content-table tr:hover td {
        display: grid;
        grid-template-columns: minmax(6.25rem, 0.72fr) minmax(0, 1.28fr);
        gap: 0.75rem;
        align-items: start;
        width: 100%;
        padding: 0.75rem;
        border: 0;
        border-bottom: 1px solid #e7e7e6;
        background: transparent;
        text-align: left;
    }

    .hk-rte table.hk-content-table td:last-child,
    .hk-rte.hk-rte--bare table.hk-content-table td:last-child,
    .blog-details article table.hk-content-table td:last-child {
        border-bottom: 0;
    }

    .hk-rte table.hk-content-table td::before,
    .hk-rte.hk-rte--bare table.hk-content-table td::before,
    .blog-details article table.hk-content-table td::before {
        content: attr(data-label);
        color: #16171c;
        font-family: "Space Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        line-height: 1.45;
        text-transform: uppercase !important;
    }
}