/*
 * mens-mag polish pass — 2026-05-20
 *
 * Tactical CSS overrides on top of Foxiz (parent: fox) to address
 * owner-feedback issues without touching parent theme files.
 *
 * Foxiz layout in use: Header 56 (.masthead.header_desktop56),
 * "post56" card system, "carousel56" hero. Selectors verified
 * live at 2026-05-20 — see .claude/docs/sites/mens-mag/polish-pass.md.
 *
 * Order of sections matches the polish-pass.md tracker.
 */

/* =========================================================================
 * #1 Header top row — large "magazine masthead" logo in the initial state.
 * Owner wants a big premium masthead at the top of the page; the sticky
 * header (#2) collapses the whole top row away on scroll, so the large size
 * only costs vertical space above the fold — which is the intended effect.
 * Baseline (Foxiz default): .main_header56__container 181 px tall.
 * ========================================================================= */
.main_header56__container {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
.header56__logo {
    line-height: 0;
}
.header56__logo img.main-img-logo,
.header56__logo a img {
    max-height: 92px !important;
    width: auto !important;
    height: auto !important;
}
@media (min-width: 1024px) {
    .header56__logo img.main-img-logo,
    .header56__logo a img {
        max-height: 112px !important;
    }
}

/* =========================================================================
 * #2 Sticky header — collapse top row on scroll, keep only nav
 * Foxiz toggles .is-sticky on .masthead__wrapper when scrolled.
 * ========================================================================= */
.masthead__wrapper.is-sticky .main_header56__container {
    display: none !important;
}
.masthead__wrapper.is-sticky .header_bottom56__container {
    padding: 0 !important;
}
/* Reduce nav row height when sticky for a tighter strip. */
.masthead__wrapper.is-sticky .header56__nav .menu > li > a {
    line-height: 44px !important;
}

/* =========================================================================
 * #3 Social icons — keep top 3 only (FB / Instagram / TikTok)
 * Foxiz uses .fox56-social-list with per-platform class .social__item.item--<name>.
 * Hide: X, Threads, Pinterest, YouTube. Keep: FB, Instagram, TikTok.
 * Rationale: Threads/Pinterest/YouTube channels low-engagement per inventory;
 *            X redundant with primary social presence. Trim to declutter
 *            without losing the high-traffic channels.
 * ========================================================================= */
.header56__social .social__item.item--x,
.header56__social .social__item.item--twitter,
.header56__social .social__item.item--threads,
.header56__social .social__item.item--pinterest,
.header56__social .social__item.item--youtube {
    display: none !important;
}

/* =========================================================================
 * #4 Hamburger — hide at tablet/desktop (only show on mobile)
 * Foxiz emits .header56__hamburger at all viewports; nav is also visible
 * at >=1024px, so the hamburger is redundant + confusing.
 * ========================================================================= */
@media (min-width: 1024px) {
    .header56__hamburger {
        display: none !important;
    }
}

/* =========================================================================
 * #5 Dark-mode toggle ("BRIGHT" pill) — remove
 * Adds clutter, ~zero users will toggle it, theme is already a one-mode design.
 * ========================================================================= */
.header56__darkmode {
    display: none !important;
}

/* =========================================================================
 * #6 Hero carousel — kill the arrow controls + autoplay indicator dots
 * Foxiz uses Flickity (.flickity-enabled .flickity-prev-next-button) for the
 * carousel. Static-hero conversion requires editing the homepage Elementor
 * template; for v1 we kill the visible carousel chrome so it reads as a
 * single hero (drag-scroll still works, but the "this is a slider"
 * affordances are gone).
 * ========================================================================= */
.blog56--carousel.carousel56--1cols .flickity-prev-next-button,
.blog56--carousel.carousel56--1cols .flickity-page-dots,
.blog56--carousel.carousel56--1cols .flickity-button {
    display: none !important;
}

/* =========================================================================
 * #7 Hero headline overlay — readable scrim under text
 * Foxiz .post56__overlay sits over the hero image; without a gradient the
 * white headline disappears against bright photo areas.
 * ========================================================================= */
.post56--ontop .post56__overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 40%,
        rgba(0, 0, 0, 0.55) 70%,
        rgba(0, 0, 0, 0.82) 100%
    );
}
.post56--ontop .post56__overlay > * {
    position: relative;
}
.post56--ontop .entry-title,
.post56--ontop .entry-title a {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* =========================================================================
 * #8 Card grid — let Foxiz's own grid `gap` handle spacing.
 *
 * Earlier I added `.blog56 .post56 { margin-bottom: 24px }` to give cards
 * breathing room, but Foxiz blog56--grid containers already use CSS Grid
 * with their own `gap` (16px mobile, 32px desktop). Stacking another 24px
 * on top makes rows ~36-56px apart — too much. Remove our added margin so
 * Foxiz's grid gap is the single source of truth.
 *
 * Tighten Foxiz's desktop gap to ~20px so multi-row grids feel cohesive.
 * ========================================================================= */
.blog56.blog56--grid {
    gap: 16px !important;
}
@media (min-width: 1024px) {
    .blog56.blog56--grid {
        gap: 20px !important;
    }
}

/* =========================================================================
 * #9 — handled in functions.php (excerpt fallback)
 * =========================================================================
 *
 * #10 "MEHR LESEN" — hide on grid cards, keep only on the carousel hero.
 *
 * Foxiz puts the read-more BETWEEN title and excerpt in grid cards, which
 * reads as broken UX. Card title + image are already clickable links to the
 * same target. Hide the read-more on EVERYTHING except the carousel hero
 * slider (.post56--carousel), where the pill is the only secondary
 * affordance over the image.
 *
 * NOTE: Foxiz also applies `post56--ontop` to grid cards that overlay text
 * on image (Lifestyle/Sport/Stil sections) — that modifier is NOT a reliable
 * "is hero" signal. Scope by `post56--carousel` instead.
 * ========================================================================= */
.post56:not(.post56--carousel) .readmore56,
.post56:not(.post56--carousel) .btn56.more--btn {
    display: none !important;
}
/* On the carousel hero, flatten the pill (no filled rectangle, no double arrow). */
.post56--carousel .readmore56 .btn56.more--btn,
.post56--carousel .btn56.btn56--primary.more--btn {
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}
.post56--carousel .readmore56 .btn56.more--btn::after {
    content: " →";
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.15s ease;
}
.post56--carousel .readmore56 .btn56.more--btn:hover::after {
    transform: translateX(2px);
}

/* =========================================================================
 * #11 Back-to-top — collapse to icon-only square so it stops overlapping
 *  content in card grids.
 *
 * Foxiz HTML:
 *   <div class="scrollup56 scrollup56--text scrollup56--noimage scrollup56--square">
 *     <span class="go">gehe</span>
 *     <span class="top">Ganz nach oben</span>
 *   </div>
 *
 * Strategy: hide both text spans, inject an upward arrow via ::before, lock
 * the box to 44 × 44 px (touch-target), pin to bottom-right with z-index
 * above content but with light opacity until hover.
 * ========================================================================= */
.scrollup56,
.scrollup56.shown {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 0 !important;
    padding: 0 !important;
    line-height: 44px !important;
    text-align: center !important;
    border-radius: 6px !important;
    background-color: rgba(14, 28, 64, 0.86) !important; /* mens-mag navy */
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    opacity: 0.92;
    transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
    z-index: 95 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.scrollup56:hover {
    opacity: 1;
    transform: translateY(-2px);
}
.scrollup56 .go,
.scrollup56 .top,
.scrollup56 span:not(.scrollup56__icon) {
    display: none !important;
}
.scrollup56::before {
    content: "↑";
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    display: inline-block;
}

/* =========================================================================
 * #12 — handled in functions.php (housekeeping-category filter)
 *
 * #13 Article header — consistent left-aligned layout, capped max-width
 * Foxiz uses .single56__title / .single56__subtitle (with .align-center on
 * various .single56__part wrappers depending on Foxiz template variant).
 * Some posts come out centered, some left-aligned — force consistent left
 * for editorial coherence with a comfortable reading max-width.
 * ========================================================================= */
.single .single56__title,
.single .post-title.single56__title,
.single .post-subtitle.single56__subtitle,
.single .single56__heading,
.single .single56__part .meta56 {
    text-align: left !important;
}
.single .container--single-header.single56__outer .single56__inner {
    max-width: 820px;
    margin-inline: auto;
}
.single .post-title.single56__title {
    line-height: 1.15;
}
/* Foxiz frequently puts `align-center` modifier on the wrappers — override. */
.single .single56__part.align-center,
.single .single56__title.align-center,
.single .single56__subtitle.align-center {
    text-align: left !important;
}

/* =========================================================================
 * Misc — favicon for the rendered search icon's empty grey pill
 * The top-left .header56__search rendered as a tiny icon next to an empty
 * grey pill (`.search-btn-modal` placeholder). Tighten its appearance.
 * ========================================================================= */
.header56__search {
    display: inline-flex;
    align-items: center;
}
.header56__search .search-btn-modal {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* =========================================================================
 * #15b Card image normalization — uniform aspect ratio across grid cards.
 *
 * Foxiz lets each post use its original featured-image aspect ratio
 * (landscape F1 shot next to a portrait businessman next to a vertical
 * trophy photo). The grid rows look chaotic because titles below each
 * image start at different y-positions.
 *
 * Fix: lock the figure to 3:2 landscape and `object-fit: cover` the img
 * inside. Portraits get cropped to head/shoulders, verticals get center-
 * cropped, landscapes fit naturally. Applies to every standard grid
 * (TOP THEMEN, LIFESTYLE B, GENUSS B, and any other 4-/6-up grid).
 *
 * Excluded:
 *   - .blog56--carousel    — hero slider has its own full-bleed treatment
 *   - .blog56--masonry     — masonry literally relies on variable heights
 *   - [data-card-variant=C].post56 — Variant C absolute-positions the
 *                                     figure to fill the entire card; the
 *                                     `aspect-ratio: 4/5` belongs to the
 *                                     card itself, not the figure
 * ========================================================================= */
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56 figure.thumbnail56 {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin: 0;
}
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56 figure.thumbnail56 a,
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56 figure.thumbnail56 a img,
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56 figure.thumbnail56 > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* ---- Equal-height cards + base internal padding ------------------------
 * Foxiz uses CSS Grid for .blog56--grid (cells naturally stretch to the row
 * max via `align-items: stretch`). But each .post56 inside the cell is
 * `display: block`, so its height is content-driven. Make each card a flex
 * column so it can grow to row height AND give the text area auto-grow +
 * inner padding.
 *
 * Also clamp title and excerpt so rows don't blow out from one verbose
 * post.
 *
 * Variant C is excluded because it uses absolute-positioned figure + text
 * overlay (the cinematic cover pattern), not a vertical flex stack.
 */
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) .post56__text {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding: 14px 14px 16px !important;
    gap: 8px;
}
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) .title56,
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) .title56 a {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;  /* heavier than Foxiz default 700 — reads
                                     visibly bolder at desktop sizes where
                                     Oswald's 700 looks washed out at 23 px. */
}
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) .excerpt56 {
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
/* DOM order is: title → meta(date) → readmore(hidden) → excerpt.
 * We want visual order: title → excerpt → meta(date) — tight stack with
 * meta as the byline footer. Use flex `order` to rearrange without
 * touching the markup. Meta is then pushed to the bottom of the card via
 * `margin-top: auto` (now in the correct visual position).
 */
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) .title56   { order: 1; }
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) .excerpt56 { order: 2; }
.blog56:not(.blog56--carousel):not(.blog56--masonry) .post56:not(:where([data-card-variant="D"] *, [data-card-variant="D"])) .meta56    { order: 3; margin-top: auto !important; padding-top: 6px; opacity: 0.6; font-size: 11px; }

/* Variant C figure stays at auto aspect-ratio (overridden by the absolute
 * positioning rule below in section #16). */
[data-card-variant="D"] .post56 figure.thumbnail56 {
    aspect-ratio: auto !important;
}

/* =========================================================================
 * #16 Card variants — alternate B (Newspaper Strip) / C (Cinematic Cover)
 *   across main-content Foxiz grids.
 *
 * Sections get tagged at runtime by assets/js/card-variants.js with
 * data-card-variant="B" or "C". The first qualifying section (typically
 * "TOP THEMEN") opens with C (premium feel), then alternates B / C / B ...
 *
 * Variant B — Newspaper Strip
 *   - No card background or shadow
 *   - Thin 1px vertical divider between columns
 *   - 8px gap between image and category dot+label
 *   - Bold sans headline + serif italic excerpt
 *   - Reads as a single dense editorial strip
 *
 * Variant C — Cinematic Cover
 *   - Full-bleed image fills the entire card surface
 *   - Gradient scrim at bottom + headline overlaid in white
 *   - Category chip top-left
 *   - 4:5 aspect ratio (portrait, more dramatic)
 *
 * Inner-padding fix applies to BOTH variants — Foxiz cards had zero
 * internal padding which made all text flush with the card edge. Even
 * if a user doesn't have variant tagging applied (e.g. JS blocked), the
 * baseline padding rule ships.
 * ========================================================================= */

/* Baseline padding — scoped to variant-tagged sections only.
 * Foxiz cards default to zero internal padding which makes the text flush
 * with the card edge. We only fix this where we're already opting in to a
 * variant treatment (B / C). Sections without a variant (e.g. TOP THEMEN —
 * skipped by card-variants.js) keep their original Foxiz layout untouched.
 */
[data-card-variant] .post56 .post56__text,
[data-card-variant] .post56 .post56__text__inner {
    padding-inline: 18px;
}
[data-card-variant] .post56 .title56 { padding-top: 16px; }
[data-card-variant="B"] .post56 .excerpt56 { padding-bottom: 18px; }

/* ---- Variant B — Newspaper Strip ---------------------------------------- */
[data-card-variant="B"] .post56,
[data-card-variant="B"] .griditem56 {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}
[data-card-variant="B"] .post56 .post56__text {
    padding: 16px 18px 18px !important;
    border-right: 1px solid rgba(14, 28, 64, 0.10);
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    min-height: 1px; /* allow flex children to set their own size */
}
[data-card-variant="B"] .post56:last-child .post56__text {
    border-right: 0;
}
/* On dark backgrounds, divider lightens. */
.bg--dark [data-card-variant="B"] .post56 .post56__text,
[data-card-variant="B"][data-on-dark] .post56 .post56__text {
    border-right-color: rgba(255, 255, 255, 0.14);
}

/* Source DOM order in Foxiz:
 *   1. title       (.title56)
 *   2. readmore    (.readmore56)        ← hidden by polish.css
 *   3. excerpt     (.excerpt56)
 *   4. meta-date   (.meta56)
 * We inject .cv-cat at the start (via card-variants.js), then re-order
 * everything with flex `order:` so the visual stack is:
 *   1. category badge
 *   2. headline
 *   3. excerpt (serif italic)
 *   4. meta line (date · read-time)
 */
[data-card-variant="B"] .post56 .cv-cat   { order: 1; }
[data-card-variant="B"] .post56 .title56  { order: 2; }
[data-card-variant="B"] .post56 .excerpt56{ order: 3; }
[data-card-variant="B"] .post56 .meta56   { order: 4; }

/* Category badge: red dot + small-caps label */
[data-card-variant="B"] .post56 .cv-cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: -4px;
}
[data-card-variant="B"] .post56 .cv-cat::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #B5292A;
    flex: 0 0 8px;
}
[data-card-variant="B"] .post56 .cv-cat:hover { color: #B5292A; }

/* Headline */
[data-card-variant="B"] .post56 .title56,
[data-card-variant="B"] .post56 .title56 a {
    font-weight: 800 !important;
    line-height: 1.22 !important;
    font-size: 18px !important;
    letter-spacing: -0.005em;
    margin: 0;
    color: inherit !important;
}

/* Excerpt — italic serif lede */
[data-card-variant="B"] .post56 .excerpt56 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    opacity: 0.88;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Meta line at the bottom: date, read time, etc. */
[data-card-variant="B"] .post56 .meta56 {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(14, 28, 64, 0.10);
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 10.5px !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    opacity: 0.7;
}
.bg--dark [data-card-variant="B"] .post56 .meta56,
[data-card-variant="B"][data-on-dark] .post56 .meta56 {
    border-top-color: rgba(255, 255, 255, 0.14);
}
[data-card-variant="B"] .post56 .meta56 .sep { display: none; } /* Foxiz separator dots — replaced by gap */

/* Section top accent bar */
[data-card-variant="B"] {
    border-top: 2px solid rgba(14, 28, 64, 0.85);
    padding-top: 22px;
    margin-top: 12px;
}
[data-card-variant="B"][data-on-dark] {
    border-top-color: rgba(255, 255, 255, 0.4);
}

/* When B is on a dark background, flip text colors to white-ish. */
[data-card-variant="B"][data-on-dark] .post56,
[data-card-variant="B"][data-on-dark] .post56 .title56,
[data-card-variant="B"][data-on-dark] .post56 .title56 a,
[data-card-variant="B"][data-on-dark] .post56 .excerpt56,
[data-card-variant="B"][data-on-dark] .post56 .cv-cat,
[data-card-variant="B"][data-on-dark] .post56 .meta56,
[data-card-variant="B"][data-on-dark] .post56 .meta56 a {
    color: #FFFFFF !important;
}
[data-card-variant="B"][data-on-dark] .post56 .excerpt56 {
    opacity: 0.85;
}

/* ---- Variant D — Premium Magazine ---------------------------------------
 *   Full-bleed photo card with structured info corners:
 *     - Red category chip top-left
 *     - Round arrow button bottom-right (turns red on hover, slides)
 *     - Headline + date+read-time bottom-LEFT (not centered)
 *     - Deeper top + bottom gradient scrim
 *     - Image zooms 7% + card lifts 4px on hover
 *   Replaces the earlier centered-text Cinematic Cover.
 *
 * Mobile (<=600px): force 1-column stack with 4:3 aspect so cards are
 * wide enough to fit headlines on 2 lines instead of being squeezed into
 * 2-column 4:5 portraits where headlines wrap mid-word.
 * ------------------------------------------------------------------------- */
/* Responsive column override for D:
 *   <= 600 px  → 1 col (full-width, 4:3)
 *   601-1024   → 2 col (tablet — cards big enough for the chip + headline)
 *   > 1024     → Foxiz default (4 col on desktop)
 * Foxiz's default tablet--4cols crams the cards too small to show the chip
 * cleanly. */
@media (max-width: 600px) {
    [data-card-variant="D"].blog56--grid {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    [data-card-variant="D"].blog56--grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
[data-card-variant="D"] .post56,
[data-card-variant="D"] .griditem56 {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    aspect-ratio: 4 / 5;
    background: var(--ink, #0E1C40) !important;
    box-shadow: 0 4px 14px rgba(14, 28, 64, 0.18) !important;
    margin-bottom: 0 !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}
@media (max-width: 600px) {
    /* Wider single-column cards work better at 4:3 (more landscape).
       Keeps cards from becoming towering portraits at mobile width. */
    [data-card-variant="D"] .post56,
    [data-card-variant="D"] .griditem56 {
        aspect-ratio: 4 / 3;
    }
}
[data-card-variant="D"] .post56:hover,
[data-card-variant="D"] .griditem56:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(14, 28, 64, 0.28) !important;
}
[data-card-variant="D"] .post56 .thumbnail56,
[data-card-variant="D"] .post56 .figcaption56,
[data-card-variant="D"] .post56 figure {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
[data-card-variant="D"] .post56 figure img,
[data-card-variant="D"] .post56 .thumbnail56 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.45s ease;
}
[data-card-variant="D"] .post56:hover figure img,
[data-card-variant="D"] .post56:hover .thumbnail56 img {
    transform: scale(1.06);
}
/* Scrim — top + bottom gradient for both chip + headline contrast. */
[data-card-variant="D"] .post56::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0) 25%,
            rgba(0, 0, 0, 0) 55%,
            rgba(0, 0, 0, 0.62) 80%,
            rgba(0, 0, 0, 0.92) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Text overlay — bottom-LEFT aligned (not centered). */
[data-card-variant="D"] .post56 .post56__text,
[data-card-variant="D"] .post56 .post56__text__inner {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 18px 20px 18px !important;
    color: #fff !important;
    text-align: left !important;
}
[data-card-variant="D"] .post56 .title56,
[data-card-variant="D"] .post56 .title56 a {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em;
    text-align: left !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    /* Clamp to 3 lines so layout never blows out. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 10px !important;
}
[data-card-variant="D"] .post56 .excerpt56 {
    display: none !important; /* Overlay variant: no excerpt, image carries weight. */
}
[data-card-variant="D"] .post56 .meta56,
[data-card-variant="D"] .post56 .meta56__item {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 11px !important;
    text-align: left !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
[data-card-variant="D"] .post56 .meta56 {
    display: flex !important;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
}
[data-card-variant="D"] .post56 .meta56 a {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Category chip top-left — Foxiz meta__category positioned absolute. */
[data-card-variant="D"] .post56 .meta56__category {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: #B5292A;
    padding: 5px 9px;
    border-radius: 2px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
}
[data-card-variant="D"] .post56 .meta56__category a {
    color: #fff !important;
    text-decoration: none !important;
}
/* Use the injected .cv-cat as backup if Foxiz doesn't emit meta__category. */
[data-card-variant="D"] .post56 .cv-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    background: #B5292A;
    color: #fff !important;
    padding: 4px 8px;
    border-radius: 2px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    /* Constrain width so long category names don't wrap on small cards. */
    max-width: calc(100% - 64px); /* leaves room for arrow at right */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-card-variant="D"] .post56 .cv-cat::before { display: none !important; }
@media (max-width: 600px) {
    [data-card-variant="D"] .post56 .cv-cat {
        font-size: 9.5px;
        padding: 3px 7px;
        letter-spacing: 0.1em;
        max-width: 55%;
    }
}

/* Arrow button bottom-right. */
[data-card-variant="D"] .post56::before {
    content: "→";
    position: absolute;
    bottom: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.2s ease, transform 0.2s ease;
}
[data-card-variant="D"] .post56:hover::before {
    background: #B5292A;
    transform: translateX(2px);
}

/* ---- Variant E — Editorial Split -----------------------------------------
 *   Image on top (4:3), structured text section below on dark navy:
 *     - Red category chip
 *     - Bold sans headline (clamp 3 lines)
 *     - Italic serif excerpt (clamp 2 lines) — gives readers real context
 *     - Byline meta at card bottom (date · read-time)
 *   Targets the SPORT section (masonry) via JS heading override; works on
 *   both grid and masonry layouts because the inner card structure is the
 *   same in Foxiz.
 * ------------------------------------------------------------------------- */
[data-card-variant="E"] .post56,
[data-card-variant="E"] .griditem56 {
    background: #0E1C40 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(14, 28, 64, 0.18) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    color: #fff !important;
}
[data-card-variant="E"] .post56:hover,
[data-card-variant="E"] .griditem56:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(14, 28, 64, 0.28) !important;
}
[data-card-variant="E"] .post56 figure.thumbnail56,
[data-card-variant="E"] .post56 .thumbnail56 {
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    margin: 0 !important;
    flex: 0 0 auto;
}
[data-card-variant="E"] .post56 figure.thumbnail56 img,
[data-card-variant="E"] .post56 .thumbnail56 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease;
}
[data-card-variant="E"] .post56:hover figure.thumbnail56 img {
    transform: scale(1.05);
}
[data-card-variant="E"] .post56 .post56__text {
    padding: 16px 18px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
}
/* Visual order matches B: cat → title → excerpt → meta(bottom). */
[data-card-variant="E"] .post56 .cv-cat       { order: 1; }
[data-card-variant="E"] .post56 .meta56__category { order: 1; }
[data-card-variant="E"] .post56 .title56      { order: 2; }
[data-card-variant="E"] .post56 .excerpt56    { order: 3; }
[data-card-variant="E"] .post56 .meta56       { order: 4; margin-top: auto !important; padding-top: 10px !important; }

/* Red category chip — ONLY the injected .cv-cat at the top.
 * Foxiz also emits a .meta56__category INSIDE the .meta56 meta-line at the
 * bottom — that's a duplicate and we hide it (see below). */
[data-card-variant="E"] .post56 .cv-cat {
    align-self: flex-start;
    background: #B5292A;
    color: #fff !important;
    padding: 5px 9px;
    border-radius: 2px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    margin: 0 !important;
}
[data-card-variant="E"] .post56 .cv-cat::before { display: none !important; }
/* Hide Foxiz's duplicate category list inside the meta line. */
[data-card-variant="E"] .post56 .meta56 .meta56__category {
    display: none !important;
}

/* Headline — only apply line-clamp to the OUTER h2.title56, leave the
 * inner <a> as default block flow. Applying -webkit-box to both was
 * causing the anchor to clip its own content. */
[data-card-variant="E"] .post56 .title56 {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.005em;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-card-variant="E"] .post56 .title56 a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Italic serif excerpt — gives the SPORT cards real context. */
[data-card-variant="E"] .post56 .excerpt56 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-style: italic !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta line at the bottom — date · read-time, dimmed. */
[data-card-variant="E"] .post56 .meta56 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
[data-card-variant="E"] .post56 .meta56__category {
    /* Already styled as chip above — but we don't want it AGAIN in the
       bottom meta line. The chip lives at top via order:1. Hide its
       duplicate in the meta56 container if Foxiz includes it there too. */
    position: static;
}
[data-card-variant="E"] .post56 .meta56 .sep { display: none; }

/* Masonry neutralization:
 *   The SPORT block ships with `blog56--masonry` (Foxiz's masonry library).
 *   The library absolute-positions cards via inline transforms/top/left and
 *   sets visibility: hidden during layout calc — which fights every flex
 *   override we apply here and leaves figures rendered outside their card.
 *
 *   card-variants.js strips the `blog56--masonry` class on the SPORT block
 *   (adds `data-no-masonry`), clears inline positioning, and installs a
 *   MutationObserver to re-strip if Foxiz re-applies them on resize.
 *   We then style the block as a plain CSS grid below.
 */
/* Foxiz nests cards in: .blog56 > .main-masonry > .masonry-cell.griditem56 >
 * article.post56. The outer .blog56 keeps its existing grid (3-cols at desk,
 * single column for tablet/mobile), but its only direct child is the
 * .main-masonry wrapper, which is block-level and full-width. So setting
 * grid on .blog56 doesn't lay out the cards. We instead grid-display the
 * .main-masonry wrapper and let it own the per-card columns.
 *
 * Rules apply to ANY variant (B/D/E) on a neutralized masonry block —
 * not just E. STIL+RATGEBER use B; SPORT uses E. */
[data-card-variant][data-no-masonry] {
    height: auto !important;
}
[data-card-variant][data-no-masonry] .main-masonry {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    height: auto !important;
    position: static !important;
    width: 100% !important;
}
@media (min-width: 768px) {
    [data-card-variant][data-no-masonry] .main-masonry {
        gap: 24px !important;
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    }
}
/* SPORT + AUTO use variant E with exactly 4 cards (5+ source posts capped
 * via :nth-of-type(n+5) below for variant E). At desktop, force 4 columns
 * so the row never wraps to an awkward 3+1. The auto-fill default would
 * only fit 3 cols at ~1190px container width (which is what the
 * mens-mag content area is). RATGEBER uses variant B with masonry and
 * isn't affected — auto-fill stays default there. */
@media (min-width: 1024px) {
    [data-card-variant="E"][data-no-masonry] .main-masonry {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
/* Cell-level position reset. The .masonry-cell / .griditem56 wrappers were the
 * elements Foxiz masonry absolute-positioned; with masonry JS killed this is
 * mostly vestigial but harmless.
 * CRITICAL: position/transform are reset on the CELL only — NOT on .post56.
 * Variants D and F need `position: relative` on .post56 so their inset:0
 * figure stays anchored to the card; forcing .post56 to static makes the
 * figure escape to a far ancestor and one image covers the whole row. */
[data-card-variant][data-no-masonry] .masonry-cell,
[data-card-variant][data-no-masonry] .griditem56 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}
[data-card-variant][data-no-masonry] .masonry-cell,
[data-card-variant][data-no-masonry] .griditem56,
[data-card-variant][data-no-masonry] .post56 {
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    margin: 0 !important;
}
[data-card-variant][data-no-masonry] .masonry-cell {
    display: flex !important;
}
[data-card-variant][data-no-masonry] .post56,
[data-card-variant][data-no-masonry] .post56 * {
    visibility: visible !important;
}

/* SPORT (variant E) cap: 4 cards. The Foxiz block ships 6+ posts which
 * spills into a half-empty second row on the 4-col desktop grid. Trimming
 * to 4 fills the row cleanly. Applied to variant E (not all neutralized
 * blocks) so RATGEBER/STIL/other future masonry/carousel sections keep
 * their full card count by default. */
[data-card-variant="E"][data-no-masonry] .main-masonry > .masonry-cell:nth-of-type(n+5) {
    display: none !important;
}

/* NEUE ARTIKEL override:
 *   Foxiz ships this section as blog56--grid--1cols (one full-width card
 *   per row) with 10 posts → unscrollable. Variant B alone doesn't change
 *   the column count (Foxiz's responsive grid wins). Force a multi-col
 *   grid template, cap to 6 cards, and add a card surface so the
 *   "transparent + divider" B baseline doesn't look anemic in this
 *   standalone-section context.
 *   Targets variant B on grid--1cols specifically; other variant-B grids
 *   (LIFESTYLE/GENUSS — already multi-col in source) are unaffected. */
[data-card-variant="B"].blog56--grid--1cols {
    grid-template-columns: 1fr !important;
}
@media (min-width: 601px) {
    [data-card-variant="B"].blog56--grid--1cols {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 24px !important;
    }
}
@media (min-width: 1024px) {
    [data-card-variant="B"].blog56--grid--1cols {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* Cap to 6 cards. nth-of-type works because direct children of .blog56 are
 * .post56 articles. */
[data-card-variant="B"].blog56--grid--1cols > .post56:nth-of-type(n+7) {
    display: none !important;
}
/* Visual chrome — when shown standalone (no sibling columns to imply the
 * "newspaper strip"), B's transparent background reads as half-finished.
 * Add a subtle surface + drop the vertical divider so each card stands
 * alone. */
[data-card-variant="B"].blog56--grid--1cols .post56 {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(14, 28, 64, 0.08) !important;
    border-radius: 4px !important;
    overflow: hidden;
}
[data-card-variant="B"].blog56--grid--1cols .post56 .post56__text {
    border-right: 0 !important;
}

/* Carousel neutralization (STIL block — Foxiz uses Flickity, not Swiper):
 *   Tree: .blog56.carousel56 > .carousel56__container > .main-carousel >
 *         .flickity-viewport > .flickity-slider > .post56
 *   .flickity-viewport gets inline `height: <px>` + `overflow: hidden`.
 *   .flickity-slider gets inline `transform: translateX(-Xpx)`.
 *   Each .post56 gets inline `position: absolute; left: Xpx`.
 *   card-variants.js removes the carousel class, hides arrows, clears
 *   inline styles. CSS below grids out .flickity-slider so all cards show
 *   at once. */
[data-card-variant][data-no-carousel],
[data-card-variant][data-no-carousel] .carousel56__container,
[data-card-variant][data-no-carousel] .main-carousel,
[data-card-variant][data-no-carousel] .flickity-viewport {
    height: auto !important;
    overflow: visible !important;
}
[data-card-variant][data-no-carousel] .flickity-slider {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    transform: none !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
}
@media (min-width: 768px) {
    [data-card-variant][data-no-carousel] .flickity-slider {
        gap: 24px !important;
        grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    }
}
[data-card-variant][data-no-carousel] .carousel-cell,
[data-card-variant][data-no-carousel] .post56,
[data-card-variant][data-no-carousel] .griditem56 {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
[data-card-variant][data-no-carousel] .flickity-button,
[data-card-variant][data-no-carousel] .flickity-prev-next-button,
[data-card-variant][data-no-carousel] .flickity-page-dots {
    display: none !important;
}

/* Foxiz draws absolute-positioned vertical column dividers (.blog56__sep__line)
 * sized to the ORIGINAL masonry/carousel height. After neutralization they
 * hang as stray full-height lines through the new grid — drop them. */
[data-card-variant][data-no-masonry] .blog56__sep,
[data-card-variant][data-no-carousel] .blog56__sep {
    display: none !important;
}

/* Foxiz reveals masonry card components (figure + .post56__text) with a
 * scroll-entrance animation — they ship at opacity:0 and the masonry
 * layoutComplete callback flips them visible. With masonry JS killed that
 * callback never runs, so the cards render as bare navy blocks. Force every
 * variant-tagged card's components visible (the entrance animation isn't
 * wanted on our restyled cards anyway). */
[data-card-variant] .post56 figure,
[data-card-variant] .post56 .thumbnail56,
[data-card-variant] .post56 .post56__text,
[data-card-variant] .post56 .post56__text__inner,
[data-card-variant] .post56 .component56 {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Desktop column count for neutralized 4-card sections. The base rule lays
 * .main-masonry / .flickity-slider out with auto-fill minmax() (good for the
 * 6-card RATGEBER block); these four-card category showcases want a clean
 * single row of 4 instead. E[data-no-masonry] already has this (SPORT/AUTO) —
 * extend it to D masonry + both carousel variants. */
@media (min-width: 1024px) {
    [data-card-variant="D"][data-no-masonry] .main-masonry,
    [data-card-variant="E"][data-no-carousel] .flickity-slider,
    [data-card-variant="D"][data-no-carousel] .flickity-slider {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* =========================================================================
 * Variant F — Wide Feature (single-card cinematic spotlight)
 *
 * A category section with only one published post (e.g. UHREN) can't carry a
 * multi-card grid variant. card-variants.js upgrades any cards===1 section to
 * F: the lone post becomes a full-width cinematic banner — landscape image,
 * navy gradient scrim, red category chip + serif headline overlaid bottom-
 * left. Mirrors the A1 live-hero design language so the page reads coherent.
 * ========================================================================= */
[data-card-variant="F"][data-no-masonry] .main-masonry,
[data-card-variant="F"][data-no-carousel] .flickity-slider {
    grid-template-columns: 1fr !important;
}
[data-card-variant="F"] .post56,
[data-card-variant="F"] .griditem56 {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    aspect-ratio: 21 / 9;
    background: #0E1C40 !important;
    box-shadow: 0 6px 20px rgba(14, 28, 64, 0.20) !important;
    margin: 0 !important;
    transition: box-shadow 0.25s ease;
}
[data-card-variant="F"] .post56:hover {
    box-shadow: 0 14px 34px rgba(14, 28, 64, 0.32) !important;
}
[data-card-variant="F"] .post56 figure,
[data-card-variant="F"] .post56 .thumbnail56 {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
[data-card-variant="F"] .post56 figure img,
[data-card-variant="F"] .post56 .thumbnail56 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease;
}
[data-card-variant="F"] .post56:hover figure img {
    transform: scale(1.04);
}
/* Scrim — heavy navy on the left where the text panel sits. */
[data-card-variant="F"] .post56::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        rgba(14, 28, 64, 0.93) 0%,
        rgba(14, 28, 64, 0.66) 38%,
        rgba(14, 28, 64, 0) 72%);
}
/* Text panel — bottom-left, contained. */
[data-card-variant="F"] .post56 .post56__text,
[data-card-variant="F"] .post56 .post56__text__inner {
    position: absolute !important;
    left: 0;
    bottom: 0;
    z-index: 2;
    max-width: 620px;
    padding: 32px 40px 34px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    color: #fff !important;
    text-align: left !important;
}
[data-card-variant="F"] .post56 .cv-cat { order: 1; }
[data-card-variant="F"] .post56 .title56 { order: 2; }
[data-card-variant="F"] .post56 .excerpt56 { order: 3; }
[data-card-variant="F"] .post56 .meta56 { order: 4; }
[data-card-variant="F"] .post56 .readmore56 { display: none !important; }
[data-card-variant="F"] .post56 .cv-cat {
    align-self: flex-start;
    background: #db4a37;
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    margin: 0 !important;
}
[data-card-variant="F"] .post56 .cv-cat::before { display: none !important; }
[data-card-variant="F"] .post56 .title56,
[data-card-variant="F"] .post56 .title56 a {
    color: #fff !important;
    font-family: Georgia, 'Playfair Display', serif;
    font-weight: 700 !important;
    font-size: clamp(22px, 2.4vw, 34px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-card-variant="F"] .post56 .excerpt56 {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-card-variant="F"] .post56 .meta56 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 !important;
    padding-top: 4px !important;
    font-size: 11px !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62) !important;
}
[data-card-variant="F"] .post56 .meta56 a { color: rgba(255, 255, 255, 0.82) !important; }
[data-card-variant="F"] .post56 .meta56 .sep { display: none; }
@media (max-width: 768px) {
    [data-card-variant="F"] .post56,
    [data-card-variant="F"] .griditem56 {
        aspect-ratio: 4 / 3;
    }
    [data-card-variant="F"] .post56::after {
        background: linear-gradient(
            to top,
            rgba(14, 28, 64, 0.95) 0%,
            rgba(14, 28, 64, 0.58) 46%,
            rgba(14, 28, 64, 0) 80%);
    }
    [data-card-variant="F"] .post56 .post56__text {
        max-width: none;
        right: 0;
        padding: 22px 20px 24px !important;
    }
    [data-card-variant="F"] .post56 .title56 {
        font-size: 21px !important;
    }
}

/* =========================================================================
 * Mobile-specific tightening
 * ========================================================================= */
@media (max-width: 767px) {
    .header56__logo img.main-img-logo,
    .header56__logo a img {
        max-height: 60px !important;
    }
    .main_header56__container {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
    /* Card stack gutter is now handled by the grid `gap` rule above
       (.blog56--grid { gap: 16px }), not by per-card margin-bottom. */
}

/* ============================================================
   HERO-TEST PAGE — A1 / A2 / A3 (Variant A with Slideshow)
   Scoped to /hero-test/ template (page-hero-test.php).
   Brand: navy #0e1c40, accent red #db4a37.
   ============================================================ */

/* ---- Page chrome ---- */
.hero-test-page {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f5f2;
}
.hero-test-page__intro {
    max-width: 880px;
    margin: 0 auto;
    padding: 56px 24px 28px;
    text-align: center;
    color: #1a1a1a;
}
.hero-test-page__intro h1 {
    font-family: Georgia, 'Playfair Display', serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
}
.hero-test-page__intro p {
    font-size: 15px;
    color: #555;
    margin: 0 0 6px;
}
.hero-test-page__intro-meta {
    font-size: 12px !important;
    color: #888 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-test__label {
    max-width: 1280px;
    margin: 64px auto 18px;
    padding: 0 24px;
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.hero-test__label-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 8px;
    border-radius: 50%;
    background: #0e1c40;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.hero-test__label-name {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}
.hero-test__label-note {
    font-size: 13px;
    color: #888;
    flex: 1;
    border-bottom: 1px dashed #d0d0c8;
    padding-bottom: 4px;
}

/* ---- Slideshow shared shell ---- */
.hero-slideshow {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    isolation: isolate;
    box-shadow: 0 2px 24px rgba(0,0,0,0.10);
    outline: none;
}
.hero-slideshow__track {
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease;
    pointer-events: none;
    z-index: 1;
}
.hero-slide[data-active="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}
.hero-slide__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.hero-slide__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-slide__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.3s ease;
}
.hero-slide__title a:hover {
    background-size: 100% 1px;
}

/* ---- Slideshow chrome: arrows / dots / progress bar (shared) ---- */
.hero-slideshow__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 28, 64, 0.82);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.hero-slideshow__nav:hover {
    background: #db4a37;
    border-color: #db4a37;
}
.hero-slideshow__nav--prev { left: 24px; }
.hero-slideshow__nav--next { right: 24px; }
.hero-slideshow__nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.hero-slideshow__nav-chevron {
    font-family: -apple-system, system-ui, 'Segoe UI', sans-serif;
    font-size: 38px;
    line-height: 1;
    font-weight: 300;
    color: #fff;
    display: block;
    margin-top: -4px;  /* optical centering of the chevron glyph */
}

.hero-slideshow__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
    padding: 10px 16px;
    background: rgba(14, 28, 64, 0.78);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.hero-slideshow__dot {
    width: 26px;
    height: 4px;
    border-radius: 0;
    background: rgba(255,255,255,0.35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, width 0.2s ease;
}
.hero-slideshow__dot[aria-selected="true"] {
    background: #db4a37;
    width: 38px;
}
.hero-slideshow__dot:hover { background: rgba(255,255,255,0.6); }
.hero-slideshow__dot[aria-selected="true"]:hover { background: #db4a37; }
.hero-slideshow__dot span { display: none; }

.hero-slideshow__progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.10);
    z-index: 10;
}
.hero-slideshow__progress-bar {
    width: 100%;
    height: 100%;
    background: #db4a37;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}

/* ====================================================================
   A1 — Anchored Tag Card (bottom-left navy card on photo)
   ==================================================================== */
.hero-slideshow[data-hero-variant="A1"] {
    height: clamp(560px, 90vh, 940px);
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__shade {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.15) 35%,
        rgba(0,0,0,0) 65%
    );
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__content {
    position: absolute;
    left: 4%;
    bottom: 5%;
    max-width: 520px;
    width: calc(100% - 8%);
    background: rgba(14, 28, 64, 0.95);
    border-top: 3px solid #db4a37;
    padding: 26px 32px 24px;
    color: #fff;
    z-index: 3;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__kicker {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #db4a37;
    margin-bottom: 12px;
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__title {
    font-family: Georgia, 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(21px, 2vw, 30px);
    line-height: 1.16;
    letter-spacing: -0.012em;
    margin: 0 0 10px;
    color: #fff;
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__title a { color: inherit; }
.hero-slideshow[data-hero-variant="A1"] .hero-slide__dek {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(13px, 0.9vw, 14px);
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
    margin: 0 0 16px;
    /* Cap at 2 lines to keep the card compact */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 12px;
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__date {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}
.hero-slideshow[data-hero-variant="A1"] .hero-slide__cta:hover {
    color: #db4a37;
    gap: 12px;
}

@media (max-width: 768px) {
    .hero-slideshow[data-hero-variant="A1"] {
        height: clamp(520px, 86vh, 760px);
    }
    .hero-slideshow[data-hero-variant="A1"] .hero-slide__content {
        left: 14px;
        right: 14px;
        bottom: 56px; /* clear dots */
        width: auto;
        max-width: none;
        padding: 20px 20px 16px;
    }
    .hero-slideshow[data-hero-variant="A1"] .hero-slide__title {
        font-size: 20px;
    }
    .hero-slideshow[data-hero-variant="A1"] .hero-slide__dek {
        -webkit-line-clamp: 2;
    }
}

/* ====================================================================
   A2 — Wide Gradient Footer with Title
   ==================================================================== */
.hero-slideshow[data-hero-variant="A2"] {
    height: clamp(480px, 80vh, 760px);
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__shade {
    background: linear-gradient(
        to top,
        rgba(14, 28, 64, 0.94) 0%,
        rgba(14, 28, 64, 0.78) 18%,
        rgba(14, 28, 64, 0.18) 42%,
        rgba(14, 28, 64, 0) 65%
    );
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__content {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    padding: 42px 32px 64px;
    color: #fff;
    z-index: 3;
    max-width: 1180px;
    width: 100%;
    transform: translateX(-50%);
    box-sizing: border-box;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__kicker {
    display: inline-block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #db4a37;
    border-left: 2px solid #db4a37;
    padding-left: 14px;
    line-height: 1.2;
    margin-bottom: 22px;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__title {
    font-family: Georgia, 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.018em;
    max-width: 920px;
    margin: 0 0 18px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__title a { color: inherit; }
.hero-slideshow[data-hero-variant="A2"] .hero-slide__dek {
    font-family: Georgia, 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(15px, 1.2vw, 19px);
    line-height: 1.45;
    color: rgba(255,255,255,0.92);
    margin: 0 0 26px;
    max-width: 760px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__meta-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__date {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    order: 2;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 14px 26px;
    border: 1px solid rgba(255,255,255,0.4);
    background: transparent;
    transition: all 0.2s ease;
    order: 1;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slide__cta:hover {
    background: #db4a37;
    border-color: #db4a37;
    color: #fff;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slideshow__dots {
    bottom: 22px;
    left: auto;
    right: 32px;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    padding: 0;
}
.hero-slideshow[data-hero-variant="A2"] .hero-slideshow__dot {
    width: 22px;
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
}
.hero-slideshow[data-hero-variant="A2"] .hero-slideshow__dot[aria-selected="true"] {
    background: #db4a37;
    width: 34px;
}

@media (max-width: 768px) {
    .hero-slideshow[data-hero-variant="A2"] {
        height: clamp(440px, 72vh, 640px);
    }
    .hero-slideshow[data-hero-variant="A2"] .hero-slide__content {
        padding: 36px 20px 28px;
    }
    .hero-slideshow[data-hero-variant="A2"] .hero-slide__title {
        font-size: 24px;
    }
    .hero-slideshow[data-hero-variant="A2"] .hero-slide__dek {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }
}

/* ====================================================================
   A3 — Glassmorphism Strip (backdrop-blur footer)
   ==================================================================== */
.hero-slideshow[data-hero-variant="A3"] {
    height: clamp(500px, 84vh, 800px);
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__shade {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25) 0%,
        rgba(0,0,0,0) 30%,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.15) 100%
    );
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 36px 40px 36px;
    color: #fff;
    z-index: 3;
    background: rgba(14, 28, 64, 0.32);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,0.18);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        'kicker meta'
        'title  title'
        'dek    cta';
    column-gap: 32px;
    row-gap: 14px;
    align-items: end;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__kicker {
    grid-area: kicker;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #db4a37;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__title {
    grid-area: title;
    font-family: Georgia, 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
    color: #fff;
    max-width: 1000px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__title a { color: inherit; }
.hero-slideshow[data-hero-variant="A3"] .hero-slide__dek {
    grid-area: dek;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
    margin: 0;
    max-width: 720px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__meta-row {
    display: contents;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__date {
    grid-area: meta;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    justify-self: end;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__cta {
    grid-area: cta;
    justify-self: end;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    padding: 12px 22px;
    background: #db4a37;
    border: 1px solid #db4a37;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slide__cta:hover {
    background: transparent;
    color: #fff;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slideshow__dots {
    bottom: auto;
    top: 18px;
    background: rgba(14, 28, 64, 0.55);
    padding: 8px 12px;
    border-radius: 999px;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slideshow__dot {
    width: 18px;
    height: 3px;
}
.hero-slideshow[data-hero-variant="A3"] .hero-slideshow__dot[aria-selected="true"] {
    width: 28px;
}

@media (max-width: 768px) {
    .hero-slideshow[data-hero-variant="A3"] {
        height: clamp(460px, 72vh, 620px);
    }
    .hero-slideshow[data-hero-variant="A3"] .hero-slide__content {
        padding: 22px 18px 22px;
        grid-template-columns: 1fr;
        grid-template-areas:
            'kicker'
            'title'
            'dek'
            'cta';
        gap: 10px;
    }
    .hero-slideshow[data-hero-variant="A3"] .hero-slide__date {
        display: none; /* meta hidden on mobile to save space */
    }
    .hero-slideshow[data-hero-variant="A3"] .hero-slide__cta {
        justify-self: stretch;
        justify-content: center;
        margin-top: 6px;
    }
    .hero-slideshow[data-hero-variant="A3"] .hero-slide__title {
        font-size: 22px;
    }
}

/* Hide arrows on mobile (touch-swipe + dots are enough; arrows crowd small viewports) */
@media (max-width: 768px) {
    .hero-slideshow__nav {
        display: none;
    }
}

/* ============================================================
   LIVE HERO SWAP — Homepage
   The Foxiz hero (Elementor section_66091596e216c44 desktop +
   section_6609159ceaeaa_20 mobile) is hidden so our A1 slideshow,
   rendered via the_content filter, takes its visual place.
   ============================================================ */
body.home .section_66091596e216c44,
body.home .h__section_6609159ceaeaa_20 {
    display: none !important;
}

/* Wrapper around the live slideshow lets us position it independently of the
   Foxiz archive-builder container. Slideshow itself stays full-width. */
body.home .hero-slideshow-live-wrap {
    margin: 0 0 32px;
}
body.home .hero-slideshow--live {
    width: 100%;
    margin: 0;
}

/* Trailing spacing after last variant */
.hero-test-page .hero-slideshow:last-of-type {
    margin-bottom: 80px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }
    .hero-slideshow__progress-bar {
        display: none;
    }
}

/* =========================================================================
 * Hide empty category / topic sections (2026-05-22)
 *
 * A Foxiz builder section whose category has zero published posts still
 * renders its heading + an empty `.primary56` body — a bare title floating
 * above whitespace (seen on HAUS GARTEN & OUTDOOR, BARBECUE & GRILLEN,
 * VIDEOS). Hide any TITLED builder section that contains no post card, no
 * embed and no video. CSS `:has()` keeps this flash-free (no JS paint gap);
 * `:not(:has(.post56))` also covers a `.blog56` that rendered with 0 cards.
 * ========================================================================= */
.builder56__section:has(.heading56):not(:has(.post56)):not(:has(iframe)):not(:has(video)) {
    display: none !important;
}

/* =========================================================================
 * Widget titles — navy label bar (footer + sidebar) (2026-05-22)
 *
 * Foxiz's default `.widget-title` shrink-wraps a navy box around heavily
 * letter-spaced, centred text. Longer titles ("NEUE ARTIKEL AUF MEN'S MAG")
 * then wrap and orphan a single word ("MAG" alone on line 2). Make every
 * widget title a full-width, left-aligned navy bar with comfortable padding
 * and restrained tracking; `text-wrap: balance` stops single-word orphans
 * if a title still needs two lines.
 * ========================================================================= */
.widget-title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 18px !important;
    padding: 12px 16px !important;
    background: #0e1c40 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    text-wrap: balance;
}
.widget-title span {
    display: inline !important;
    color: inherit !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: inherit !important;
}

/* =========================================================================
 * 4-column grids — one clean row of 4 (2026-05-22)
 *
 * A blog56--grid--4cols section with 5 posts renders 4 + 1 orphan (INTERVIEWS).
 * Cap homepage 4-col grids at 4 cards. At tablet width Foxiz drops these to 3
 * columns (→ 3 + 1 orphan); force a 2×2 instead.
 *
 * SCOPED to `body.home`: polish.css is enqueued site-wide, so an unscoped cap
 * would hide the 5th+ post in EVERY 4-col Foxiz grid (category archives,
 * search, related posts). Only the homepage has the INTERVIEWS / category
 * 4-col sections this is meant for.
 *
 * The selector carries .blog56 + .griditem56 so it outweighs the
 * equal-height-cards rule (`.post56 { display:flex !important }`, 0,4,0) —
 * otherwise that !important flex would keep the 5th card visible.
 * ========================================================================= */
body.home .blog56.blog56--grid--4cols > .post56.griditem56:nth-of-type(n+5) {
    display: none !important;
}
@media (min-width: 601px) and (max-width: 1024px) {
    body.home .blog56.blog56--grid--4cols {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* =========================================================================
 * FITNESS & GESUNDHEIT — list re-flowed to a card grid (2026-05-22)
 *
 * Ships as blog56--list: full-width horizontal cards stacked one per row
 * (~700px each, mostly whitespace). card-variants.js tags it variant E and
 * strips the list classes (data-no-list); re-flow as a 4-up grid like the
 * other category sections.
 * ========================================================================= */
[data-card-variant][data-no-list] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}
@media (min-width: 1024px) {
    [data-card-variant][data-no-list] {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px !important;
    }
}
@media (max-width: 600px) {
    [data-card-variant][data-no-list] {
        grid-template-columns: 1fr !important;
    }
}
[data-card-variant][data-no-list] .blog56__sep { display: none !important; }

/* =========================================================================
 * Homepage sidebar — capped, self-contained scroll panel (2026-05-22)
 *
 * The homepage `.secondary56` sidebar stacks ~13 widgets ≈ 10,800px tall
 * (BELIEBTE ARTIKEL alone is ~4,000px). Because `.container--main` is a flex
 * row, that giant sidebar stretched the whole section to ~11,000px (and the
 * page to ~31,000px) with mostly-empty space beside the short main column.
 *
 * Cap it to a viewport-tall panel that scrolls on its own;
 * `overscroll-behavior: contain` stops scroll-chaining, so the sidebar only
 * moves when the cursor is inside it. This collapses the section to ~1,100px.
 * (No `position: sticky` — the `.builder56__section` ancestor is
 * `overflow:hidden`, which disables sticky, and the now-compact section
 * doesn't need it anyway.) Foxiz's theia-sticky-sidebar JS is dequeued on
 * the homepage (functions.php). Desktop only — matches theia's old 1024px.
 * ========================================================================= */
@media (min-width: 1024px) {
    body.home .secondary56:has(.widget) {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.home .secondary56:has(.widget)::-webkit-scrollbar {
        width: 8px;
    }
    body.home .secondary56:has(.widget)::-webkit-scrollbar-thumb {
        background: rgba(14, 28, 64, 0.28);
        border-radius: 4px;
    }
    body.home .secondary56:has(.widget)::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* =========================================================================
 * ARTICLE TEMPLATE — premium overhaul (polish-pass, 2026-05-22)
 *
 * Turns the Foxiz `single56--2` article into an "ultra high value magazine"
 * read: one clean centered reading column, Merriweather serif body, Oswald
 * display headings, a proper hero masthead (red category kicker + byline),
 * and the 12 sidebar widgets relocated into a full-width zone BELOW the
 * article ("Mehr vom Men's Mag").
 *
 * Companion: functions.php `theme_mod_single_*` filters reconfigure the
 * Foxiz renderer (kicker + byline elements, after-content order, dropped
 * broken prev/next nav). Foxiz's single renderer is option-driven with no
 * template hooks, so structure comes from those filters; all visual styling
 * lives here.
 *
 * Scope: `.single` (WP body class — single posts only; pages carry `.page`).
 * ========================================================================= */

/* --- 1 · Layout — clean centered column, sidebar reflowed below ---------- */
/* Foxiz lays .primary56 + .secondary56 side-by-side inside .container--main.
 * Flip to a column: the article reads full-width/clean, the sidebar widgets
 * fall BELOW it (styled as the "Mehr" zone — section 4). */
.single .single56 .container--main {
    display: flex !important;
    flex-direction: column !important;
}
.single .single56 .container--main > .primary56,
.single .single56 .container--main > .secondary56 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* One 700px reading column for EVERYTHING text — masthead, body, after-
 * content — so the H1, the body paragraphs, the caption and the author box
 * all share one left edge (~70 chars of Merriweather 19px). Only the
 * featured image breaks out wider. */
.single .single56__body,
.single .single56__body .entry-content {
    max-width: 700px;
    margin-inline: auto;
}
.single .container--single-header .single56__header {
    max-width: 700px;
    margin-inline: auto;
}
.single .container--single-header .single56__thumbnail {
    max-width: 1060px;
    margin-inline: auto;
}
.single .container--main {
    margin-top: 30px;
}

/* --- 2 · Reading typography --------------------------------------------- */
/* Body: Merriweather serif (self-hosted), near-black, open leading. */
.single .entry-content {
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
    font-size: 19px;
    line-height: 1.78;
    color: #1d2330;
}
.single .entry-content p {
    margin: 0 0 1.5em;
}
.single .entry-content a {
    color: #0e1c40;
    text-decoration: underline;
    text-decoration-color: rgba(219, 74, 55, 0.5);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.single .entry-content a:hover {
    text-decoration-color: #db4a37;
}

/* In-content headings → Playfair Display Bold (the Men's Mag logo face),
 * generous space ABOVE (groups the heading with its section). h1 is included
 * as insurance — a body <h1> is demoted to <h2> by a the_content filter
 * (functions.php), but style it too so nothing escapes if the filter is
 * bypassed (e.g. content rendered outside the_content). */
.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    color: #0e1c40;
    font-weight: 700;
}
.single .entry-content h1,
.single .entry-content h2 {
    font-size: 31px;
    line-height: 1.22;
    letter-spacing: normal;
    margin: 1.7em 0 0.5em;
}
.single .entry-content h3 {
    font-size: 23px;
    line-height: 1.3;
    margin: 1.6em 0 0.45em;
}
.single .entry-content h1:first-child,
.single .entry-content h2:first-child,
.single .entry-content h3:first-child {
    margin-top: 0;
}

/* Lists */
.single .entry-content ul,
.single .entry-content ol {
    margin: 0 0 1.5em;
    padding-left: 1.4em;
}
.single .entry-content li {
    margin-bottom: 0.5em;
}

/* Blockquote — Foxiz ships a centered, UPPERCASE, cream-card quote with a
 * big glyph; that turns long quotes into unreadable caps walls. Override to
 * a clean left-aligned italic pull quote that reads at any length. */
.single .entry-content blockquote {
    margin: 1.8em 0 !important;
    padding: 6px 0 6px 26px !important;
    border: 0 !important;
    border-left: 3px solid #db4a37 !important;
    background: transparent !important;
    font-family: 'Merriweather', Georgia, serif !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
    font-style: italic !important;
    font-weight: 400 !important;
    text-align: left !important;
    text-transform: none !important;
    color: #2a3142 !important;
}
.single .entry-content blockquote::before,
.single .entry-content blockquote::after {
    content: none !important;
    display: none !important;
}
.single .entry-content blockquote p {
    margin: 0 0 0.5em !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
    text-transform: none !important;
    color: inherit !important;
}
.single .entry-content blockquote p:last-child {
    margin-bottom: 0 !important;
}
.single .entry-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

/* In-content figures */
.single .entry-content figure {
    margin: 1.8em 0;
}
.single .entry-content figcaption {
    font-size: 14px;
    font-style: italic;
    color: #6b7280;
    margin-top: 8px;
}

/* Lead paragraph + drop cap — only when the article opens with prose. */
.single .entry-content > p:first-child {
    font-size: 21px;
    line-height: 1.62;
    color: #11151f;
}
.single .entry-content > p:first-child::first-letter {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 4.6em;
    line-height: 0.78;
    float: left;
    margin: 0.07em 0.09em 0 0;
    color: #db4a37;
}

/* --- 3 · Hero masthead — kicker, title, subtitle, byline, image --------- */
/* One consistent alignment for the whole masthead. Foxiz's per-post
 * `single_header_align` puts `.align-center` on `.single56__header`, which
 * left the kicker + byline centered while the title + subtitle were forced
 * left (the #13 block) — a visibly broken mismatch. Pin every part left;
 * the .meta56 rows are flex, so reset justify-content too. */
.single .single56__header,
.single .single56__header .meta56,
.single .single56__header .post-title,
.single .single56__header .post-subtitle,
.single .single56__header .single56__subtitle {
    text-align: left !important;
}
.single .single56__header .meta56 {
    justify-content: flex-start !important;
}

/* Category kicker: the standalone-category .meta56 block (carries no date). */
.single .single56__header .meta56:has(.meta56__category--fancy):not(:has(.meta56__date)) {
    margin: 0 0 14px;
}
.single .single56__header .meta56__category--fancy a {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #db4a37;
    text-decoration: none;
}
.single .single56__header .meta56__category--fancy a:hover {
    color: #0e1c40;
}

/* Title — Playfair Display Bold (the Men's Mag logo face). */
.single .post-title.single56__title {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: normal;
}

/* Subtitle / dek */
.single .single56__header .post-subtitle.single56__subtitle {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 20px;
    line-height: 1.5;
    font-style: italic;
    color: #4a5160;
    /* Foxiz indents the dek with margin-left:50px + max-width:600px — reset
     * both so it shares the H1 / byline left edge and the 700px column. */
    margin: 14px 0 0 !important;
    max-width: 100% !important;
}

/* Byline: the date / author / reading-time .meta56 block. */
.single .single56__header .meta56:has(.meta56__date) {
    margin: 18px 0 0;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}
.single .single56__header .meta56:has(.meta56__date) a {
    color: #0e1c40;
}
.single .single56__header .meta56__author img,
.single .single56__header .meta56__avatar img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

/* Hairline between masthead and the image/content below it. */
.single .single56__header {
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(14, 28, 64, 0.14);
}
.single .single56__thumbnail {
    margin-top: 28px;
}
.single .single56__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}
/* Featured-image caption. Foxiz stretches the figure edge-to-edge with
 * negative margins (full-bleed image — kept). Pull the caption back into the
 * article's reading column and LEFT-align it, so it lines up with the body
 * text instead of floating centered under a wider image. */
.single .single56__thumbnail figcaption,
.single .single56__thumbnail .thumbnail56__caption,
.single .single_thumbnail56 figcaption {
    font-family: 'Merriweather', Georgia, serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: #6b7280;
    text-align: left;
    max-width: 700px;
    margin: 14px auto 0;
    box-sizing: border-box;
}
@media (max-width: 767px) {
    .single .single56__thumbnail figcaption,
    .single .single56__thumbnail .thumbnail56__caption,
    .single .single_thumbnail56 figcaption {
        padding-inline: 27px;
    }
}

/* --- 4 · Below-article zone — bottom-posts grid only -------------------- */
/* The relocated 12-widget sidebar zone has been removed — functions.php sets
 * single posts to no-sidebar (it duplicated the site footer and rendered as a
 * ragged masonry). These display:none rules are belt-and-suspenders guards:
 * against a per-post `_wi_sidebar_state` override re-introducing `.secondary56`,
 * and against Foxiz's floating "Don't Miss" side-dock. */
.single .single56 .secondary56,
.single .sidedock56-placement,
.single .sidedock56 {
    display: none !important;
}

/* "Zuletzt erschienen" bottom-posts heading + the comment-reply title (both
 * carry .single56__heading). Foxiz tracks this heading 6px and sets its inner
 * <span> to white-space:nowrap — with uppercase Playfair that blows past
 * narrow containers and overflows the viewport. Tame the tracking and let it
 * wrap. */
.single .single56__heading {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #0e1c40 !important;
}
.single .single56__heading span {
    white-space: normal !important;
}
.single .single56__bottom_posts {
    margin-top: 46px;
}

/* --- 5 · Components — share, author box, comments, progress ------------- */
/* Foxiz native share row (.share56--brand) → minimal monochrome icon
 * buttons. Foxiz pins the <a> to a fixed ~46.7px width; with padding + an
 * icon + the (hidden) label that squeezed the content past the box. Use
 * explicit square 42px buttons, icon centred, label removed (the <a> keeps
 * its aria-label for accessibility). */
.single .share56 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.single .share56 ul li {
    margin: 0;
    width: auto !important;
}
.single .share56 ul li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    background: #fff !important;
    color: #0e1c40 !important;
    border: 1px solid rgba(14, 28, 64, 0.2) !important;
    border-radius: 2px;
    transition: background-color .15s, color .15s, border-color .15s;
}
.single .share56 ul li a:hover {
    background: #0e1c40 !important;
    color: #fff !important;
    border-color: #0e1c40 !important;
}
.single .share56 ul li a i {
    color: inherit !important;
    font-size: 15px;
}
.single .share56 ul li a span {
    display: none !important;
}
.single .share56__label {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7280;
}


/* Author box */
.single .single56__authorbox,
.single .authorboxes56 {
    max-width: 700px;
    margin: 40px auto;
}
.single .authorbox56 {
    padding: 26px 28px;
    background: #f5f6f8;
    border-left: 3px solid #db4a37;
}
.single .authorbox56 .authorbox56__name,
.single .authorbox56 .authorbox56__title {
    font-family: 'Oswald', sans-serif;
}

/* Comment form */
.single .comment-respond {
    max-width: 700px;
    margin-inline: auto;
}
.single .comment-reply-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: normal;
    color: #0e1c40;
}
.single #commentform input[type="text"],
.single #commentform input[type="email"],
.single #commentform input[type="url"],
.single #commentform textarea {
    border: 1px solid rgba(14, 28, 64, 0.22);
    border-radius: 2px;
    padding: 12px 14px;
    font-family: 'Merriweather', Georgia, serif;
    font-size: 15px;
}
.single #commentform input:focus,
.single #commentform textarea:focus {
    border-color: #0e1c40;
    outline: none;
}
.single #commentform .submit,
.single .comment-respond .submit {
    background: #0e1c40 !important;
    color: #fff !important;
    font-family: 'Oswald', sans-serif !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0 !important;
    border-radius: 2px;
    padding: 13px 26px !important;
}
.single #commentform .submit:hover,
.single .comment-respond .submit:hover {
    background: #db4a37 !important;
}

/* Reading-progress bar (Foxiz <progress class="progress56">). */
.progress56.progress56--top {
    height: 3px;
    border: 0;
    background: transparent;
}
.progress56::-webkit-progress-bar { background: transparent; }
.progress56::-webkit-progress-value { background: #db4a37; }
.progress56::-moz-progress-bar { background: #db4a37; }
.progress56 .progress56__bar { background: #db4a37; }

/* --- 6 · Mobile -------------------------------------------------------- */
@media (max-width: 767px) {
    .single .entry-content {
        font-size: 18px;
        line-height: 1.72;
    }
    .single .entry-content > p:first-child {
        font-size: 19px;
    }
    .single .entry-content > p:first-child::first-letter {
        font-size: 3.8em;
    }
    .single .entry-content h2 { font-size: 26px; }
    .single .entry-content h3 { font-size: 20px; }
    .single .post-title.single56__title {
        font-size: 31px !important;
        line-height: 1.14;
    }
}

/* =========================================================================
 * SITE-WIDE — Playfair Display Bold for headlines / subheadings (2026-05-22)
 *
 * Brand consistency: Playfair Display is the Men's Mag logo face. The article
 * template (.single, above) already uses it; this extends it to the rest of
 * the site — Foxiz card titles (.title56, used on the homepage, category
 * archives, search, related blocks, sidebar widget lists), Foxiz section /
 * block headings (.heading56), and the homepage A1 hero.
 *
 * Only the 700 weight is self-hosted, so every target is pinned to 700 (Foxiz
 * card titles otherwise vary 700/800 — an un-pinned 800 would render faux
 * bold). Small UI labels — widget titles, category kickers, meta lines, nav,
 * buttons — deliberately stay Oswald.
 * ========================================================================= */
.title56,
.title56 a,
.heading56,
.single56__title,
.hero-slide__title,
.hero-slide__title a {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
}

/* Section banner headings ("TOP THEMEN", "ENTERTAINMENT & POP-KULTUR", …):
 * 90px worked for condensed Oswald but a wide Didone at 90px overflows the
 * container. Drop to a size that fits the longest section name and reads as
 * an elegant display heading rather than a shout. */
.heading56.section56__heading {
    font-size: 58px !important;
    letter-spacing: normal !important;
    line-height: 1.15 !important;
}
@media (max-width: 1024px) {
    .heading56.section56__heading {
        font-size: 42px !important;
    }
}
@media (max-width: 600px) {
    .heading56.section56__heading {
        font-size: 27px !important;
    }
}

/* =========================================================================
 * FOOTER — "Neue Artikel" latest-posts widget (2026-05-22)
 *
 * Foxiz renders this widget as a flex-column post list with a small cropped
 * thumbnail. Posts that lack a featured image leave the list ragged (some
 * thumbed, some not) and the cropped baked-in-text thumbnails read badly,
 * especially on mobile. Strip the thumbnails → one uniform, clean title list.
 * Scoped to `.footer__col__inner` so it only affects the footer.
 * ========================================================================= */
.footer__col__inner .widget_latest_posts .thumbnail56,
.footer__col__inner .widget_latest_posts .post56__thumbnail {
    display: none !important;
}
.footer__col__inner .widget_latest_posts .post56 {
    display: block !important;
}
.footer__col__inner .widget_latest_posts .post56__text,
.footer__col__inner .widget_latest_posts .post56__inner {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.footer__col__inner .widget_latest_posts .title56 {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* =========================================================================
 * NEWS-section carousel — kill oval thumbnails (2026-05-22)
 *
 * The homepage NEWS carousel block is configured (Foxiz builder) with
 * circular thumbnails — border-radius:50% on a square-cropped <img>. The
 * carousel card slot is wider than tall, so each "circle" renders as a
 * stretched oval. Force rectangular, cover-fit thumbnails — consistent with
 * every other homepage section (TOP THEMEN etc. are all rectangular cards).
 * ========================================================================= */
.post56--carousel .thumbnail56 img,
.blog56--carousel .post56 .thumbnail56 img {
    border-radius: 0 !important;
    object-fit: cover !important;
}