/*
 * Editorial Layout — BCG-Style Article Detail.
 * Klassen-Praefix: ehnes-editorial-*
 * Wird nur enqueued auf Seiten mit Editorial-* Widgets (style_depends).
 */

:root {
    --editorial-lead-max-width: 1000px;
    --editorial-color-text: #0c2b15;
    --editorial-color-muted: #5a5a5a;
    --editorial-color-accent: #21bf61;
    --editorial-color-card: rgba(220, 213, 206, 0.78);
    --editorial-radius: 14px;
    --editorial-font-display: 'Fraunces', Sans-serif;
}

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

/*
 * Container ist breitlos — die aeussere Breite + Padding kontrolliert
 * der Elementor-Container, in dem das Widget liegt. So kann Stefan im UI
 * zwischen Boxed/Full-Width frei waehlen, und das Hero-Bild geht bis an
 * den Rand des Elementor-Containers.
 */
.ehnes-editorial-hero {
    /* intentionally empty */
}

.ehnes-editorial-hero__lead {
    max-width: var(--editorial-lead-max-width);
    padding-block: clamp(24px, 4vw, 48px);
}

.ehnes-editorial-hero__pill {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: clamp(16px, 2vw, 24px);
}

h1.ehnes-editorial-hero__title,
.ehnes-editorial-hero h1.ehnes-editorial-hero__title {
    font-family: var(--editorial-font-display);
    font-weight: 400;
    line-height: 1.042;
    margin: 0 0 clamp(20px, 3vw, 32px) 0;
    color: var(--editorial-color-text);
    font-size: clamp(32px, 6vw, 80px);
    /* Lange Komposita brechen statt overflow */
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.ehnes-editorial-hero__authors {
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--editorial-color-text);
    margin: 0 0 clamp(12px, 1.5vw, 20px) 0;
}
.ehnes-editorial-hero__authors a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ehnes-editorial-hero__authors-prefix { margin-right: 4px; }

.ehnes-editorial-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--editorial-color-muted);
    margin: 0;
}
.ehnes-editorial-hero__meta > * {
    display: inline-block;
}
.ehnes-editorial-hero__meta > * + *::before {
    content: "·";
    padding-right: 16px;
    color: var(--editorial-color-muted);
    margin-left: -16px;
    margin-right: 4px;
}

/*
 * Frame-Reveal-Effekt (BCG-Pattern):
 *   Initial (progress 0): Bild fuellt den Elementor-Container aus (volle Inhalts-Breite,
 *                         respektiert das Container-Padding), mit Border-Radius 28px.
 *   End     (progress 1): Bild bricht aus dem Container und nutzt 100vw (edge-to-edge
 *                         zum Viewport), Border-Radius 0.
 *
 * Animation laeuft ueber direkte width-Interpolation (statt transform: scale),
 * damit das Bild nicht visuell schrumpft und die Hoehe konstant bleibt.
 * Der margin-left-Trick zentriert das Element waehrend der Animation um den
 * Viewport-Mittelpunkt herum (start = Container, end = 100vw).
 */
.ehnes-editorial-hero__media {
    --editorial-scroll-progress: 0;
    --editorial-frame-radius-max: 28px;
    position: relative;
    width: calc(100% + (100vw - 100%) * var(--editorial-scroll-progress));
    margin-left: calc((100% - 100vw) * var(--editorial-scroll-progress) / 2);
    height: clamp(380px, 64vh, 720px);
    margin-block: clamp(20px, 3vw, 40px);
    overflow: hidden;
    border-radius: calc(var(--editorial-frame-radius-max) * (1 - var(--editorial-scroll-progress)));
    will-change: width, margin-left, border-radius;
}

.ehnes-editorial-hero__image,
.ehnes-editorial-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Video kann in manchen Browsern ein Default-Background haben */
    background-color: #000;
}

@media (max-width: 767px) {
    /* Mobile: weniger dramatischer Radius, kompaktere Hoehe */
    .ehnes-editorial-hero__media {
        --editorial-frame-radius-max: 14px;
        height: clamp(280px, 50vh, 480px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ehnes-editorial-hero__media {
        --editorial-scroll-progress: 1;
    }
}

.ehnes-editorial-hero__takeaways {
    position: absolute;
    left: clamp(16px, 4vw, 64px);
    bottom: clamp(16px, 4vw, 64px);
    width: clamp(280px, 36vw, 460px);
    max-width: calc(100% - clamp(32px, 8vw, 128px));
    padding: clamp(20px, 2.5vw, 32px);
    border-radius: 10px;
    background-color: var(--editorial-color-card);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--editorial-color-text);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    /* Verzoegerung, damit Card NACH dem Hero-Reveal eintritt */
    transition-delay: 0.15s;
    z-index: 2;
}
.ehnes-editorial-hero__takeaways.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Takeaways-Typografie: Default-Werte (Ubuntu 20px Light 300) — werden
 * vom Widget-Group-Control (Takeaways: Lead / Bullets / Label) ueber-
 * schrieben, sobald Stefan im Elementor was setzt.
 */
.ehnes-editorial-hero__takeaways-label {
    font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 12px 0;
}
.ehnes-editorial-hero__takeaways-lead {
    font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 16px 0;
}
.ehnes-editorial-hero__takeaways-list {
    list-style: disc;
    padding-left: 1.2em;
    margin: 0;
}
.ehnes-editorial-hero__takeaways-list li {
    font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 8px;
}
.ehnes-editorial-hero__takeaways-list li:last-child { margin-bottom: 0; }

/* Mobile: 20px wirkt in der kleinen Card zu gross */
@media (max-width: 767px) {
    .ehnes-editorial-hero__takeaways-lead,
    .ehnes-editorial-hero__takeaways-list li {
        font-size: 16px;
    }
}

/* Mobile: Takeaways unter dem Bild statt ueberlappend */
@media (max-width: 767px) {
    .ehnes-editorial-hero__media {
        overflow: visible;
    }
    .ehnes-editorial-hero__takeaways {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 16px;
        transform: none;
        opacity: 1;
    }
}

/* ============================ Body ============================ */

/*
 * Body-Container ebenfalls breitlos — Elementor-Container kontrolliert
 * max-width und horizontales Padding. Body-Content selbst nutzt das
 * max-width-Setting des Widgets (siehe Inline-Style).
 */
.ehnes-editorial-body {
    padding-block: clamp(32px, 4vw, 64px);
}

.ehnes-editorial-body__content {
    /* max-width wird via Widget-Control gesetzt (Inline-Style) */
}

.ehnes-editorial-body__content > * { margin-bottom: 1.4em; }
.ehnes-editorial-body__content > *:last-child { margin-bottom: 0; }

.ehnes-editorial-body__content p,
.ehnes-editorial-body__content li {
    font-size: clamp(16px, 1.15vw, 19px);
    line-height: 1.65;
    color: var(--editorial-color-text);
}

.ehnes-editorial-body__content h2,
.ehnes-editorial-body .ehnes-editorial-body__content h2 {
    font-family: var(--editorial-font-display);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 2em;
    margin-bottom: 0.6em;
}
.ehnes-editorial-body__content h3 {
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.ehnes-editorial-body__content a {
    color: var(--editorial-color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Paragraph-Reveal (optional) */
[data-editorial-reveal-paragraphs] .ehnes-editorial-body__content > p,
[data-editorial-reveal-paragraphs] .ehnes-editorial-body__content > h2,
[data-editorial-reveal-paragraphs] .ehnes-editorial-body__content > h3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-editorial-reveal-paragraphs] .ehnes-editorial-body__content > .is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ehnes-editorial-hero__takeaways,
    [data-editorial-reveal-paragraphs] .ehnes-editorial-body__content > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================ Side-Rail ============================ */

.ehnes-editorial-rail {
    position: sticky;
    top: 120px;
    align-self: start;
    z-index: 5;
}

.ehnes-editorial-rail__card {
    background-color: #ffffff;
    border-radius: var(--editorial-radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: 28px 24px;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/*
 * Close/Handle-Buttons: rund, gross, ausserhalb der Card platziert —
 * gleiche visuelle Sprache wie die Header-Icon-Buttons (Magic-Login,
 * Contact-Icon) auf der Site.
 */
.ehnes-editorial-rail__close,
.ehnes-editorial-rail__handle {
    position: absolute;
    top: -22px;
    right: -22px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 6;
    -webkit-tap-highlight-color: transparent;
}
.ehnes-editorial-rail__close {
    background-color: var(--editorial-color-accent);
    color: #ffffff;
}
.ehnes-editorial-rail__handle {
    background-color: #ffffff;
    color: var(--editorial-color-text);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: none;
}
.ehnes-editorial-rail__close:hover,
.ehnes-editorial-rail__handle:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.08);
}
.ehnes-editorial-rail__close svg,
.ehnes-editorial-rail__handle svg {
    width: 18px;
    height: 18px;
}

.ehnes-editorial-rail.is-collapsed .ehnes-editorial-rail__card { display: none; }
.ehnes-editorial-rail.is-collapsed .ehnes-editorial-rail__close { display: none; }
.ehnes-editorial-rail.is-collapsed .ehnes-editorial-rail__handle { display: flex; }

/* Actions (Bookmark + PDF) */
.ehnes-editorial-rail__actions {
    list-style: none;
    margin: 0;
    padding: 0 0 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.ehnes-editorial-rail__actions li { margin: 0; }
.ehnes-editorial-rail__actions li + li { margin-top: 4px; }

/*
 * Action-Button: bewusst alle Button-Defaults vom Theme/Browser ueberschreiben.
 * Im aktuellen Setup hat irgendein Default-Style (vermutlich Bexon-Button-CSS)
 * einen gruenen Hintergrund auf :focus/:active geliefert — hier hart deaktiviert.
 */
.ehnes-editorial-rail__action,
.ehnes-editorial-rail__action:hover,
.ehnes-editorial-rail__action:focus,
.ehnes-editorial-rail__action:focus-visible,
.ehnes-editorial-rail__action:active,
.ehnes-editorial-rail__action:visited {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}
.ehnes-editorial-rail__action {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 0;
    padding: 10px 4px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: var(--editorial-color-text);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}
.ehnes-editorial-rail__action:hover { color: var(--editorial-color-accent); }
.ehnes-editorial-rail__action:focus-visible {
    outline: 2px solid var(--editorial-color-accent);
    outline-offset: 2px;
}
.ehnes-editorial-rail__action[aria-pressed],
.ehnes-editorial-rail__action[aria-pressed="true"],
.ehnes-editorial-rail__action[aria-pressed="false"] {
    /* aria-pressed-Buttons koennen kein "Default-Active-Background" vom Theme bekommen */
    background-color: transparent !important;
}
.ehnes-editorial-rail__icon { flex-shrink: 0; width: 22px; height: 22px; }
.ehnes-editorial-rail__bookmark.is-saved .ehnes-editorial-rail__icon path { fill: currentColor; }
.ehnes-editorial-rail__bookmark.is-saved { color: var(--editorial-color-accent); }

/* Share */
.ehnes-editorial-rail__share {
    padding-block: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.ehnes-editorial-rail__share-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--editorial-color-muted);
    font-weight: 600;
}
.ehnes-editorial-rail__share-icons {
    display: flex;
    gap: 6px;
}
.ehnes-editorial-rail__share-icon {
    background: transparent;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: var(--editorial-color-text);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.ehnes-editorial-rail__share-icon:hover {
    background-color: rgba(0,0,0,0.06);
    color: var(--editorial-color-accent);
}
.ehnes-editorial-rail__share-icon.is-copied {
    color: var(--editorial-color-accent);
}

/* Subscribe + Login (Bottom-Stack) */
.ehnes-editorial-rail__bottom {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ehnes-editorial-rail__subscribe,
.ehnes-editorial-rail__login {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ehnes-editorial-rail__login {
    padding-top: 16px;
    border-top: 1px dashed rgba(0,0,0,0.10);
}
.ehnes-editorial-rail__subscribe-label,
.ehnes-editorial-rail__login-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--editorial-color-muted);
    font-weight: 600;
    margin: 0 0 4px 0;
}
.ehnes-editorial-rail__subscribe-text,
.ehnes-editorial-rail__login-text {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--editorial-color-text);
}
.ehnes-editorial-rail__subscribe-form input[type="email"],
.ehnes-editorial-rail__login-form input[type="email"],
.ehnes-editorial-rail__login-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 14px;
}

/* Empty-Preview im Editor */
.ehnes-editorial-hero--preview-empty,
.ehnes-editorial-body--preview-empty,
.ehnes-editorial-rail--preview-empty {
    padding: 24px;
    background: #f5f5f5;
    border-radius: 8px;
    color: #666;
    font-style: italic;
}

/* ============================ Mobile-Side-Rail ============================ */

@media (max-width: 1023px) {
    .ehnes-editorial-rail {
        position: static;
        margin-block: 32px;
    }
    .ehnes-editorial-rail__close { display: none; }
}

/* ============================ Bookmarks-Shortcode ============================ */

.ehnes-editorial-bookmarks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.ehnes-editorial-bookmarks__item {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: start;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (max-width: 600px) {
    .ehnes-editorial-bookmarks__item { grid-template-columns: 1fr; }
}
.ehnes-editorial-bookmarks__thumb img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
.ehnes-editorial-bookmarks__title { margin: 0 0 8px; font-size: 20px; }
.ehnes-editorial-bookmarks__title a { color: var(--editorial-color-text); text-decoration: none; }
.ehnes-editorial-bookmarks__excerpt { margin: 0 0 12px; color: var(--editorial-color-muted); font-size: 15px; line-height: 1.5; }
.ehnes-editorial-bookmarks__remove {
    background: transparent;
    border: 1px solid currentColor;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ============================================================
 * Responsive Overrides
 * ============================================================
 * Diese Block kommt nach allen anderen Regeln und nutzt erhoehte
 * Spezifitaet (Elementor-Selektoren + !important fuer Flex/Width-
 * Properties), weil Elementor pro-Widget eigene Inline-CSS-Vars
 * setzt, die sonst gewinnen wuerden.
 *
 * Stefan kann diese Defaults im Elementor pro Breakpoint feinjustieren —
 * Elementor's Inline-CSS hat dann hoehere Spezifitaet als !important hier
 * (data-id Selektor mit Theme-ID).
 */

/* --- 1) Hero-Eltern-Container darf nicht clippen, sonst klemmt der
 *        100vw-Breakout beim Scrollen. */
.elementor-widget-ehnes_editorial_hero,
.elementor-widget-ehnes_editorial_hero > .elementor-widget-container {
    overflow: visible;
}

/* --- 2) Tablet-Portrait + Mobile: Body + Side-Rail werden einspaltig.
 *        Elementors --flex-wrap-mobile greift erst bei <=767, wir
 *        ziehen den Wrap-Breakpoint auf 1023, weil 30%-Sidebar bei
 *        ~768-1023 zu eng zum bequemen Lesen ist. */
@media (max-width: 1023px) {
    .elementor-widget-ehnes_editorial_body,
    .elementor-widget-ehnes_editorial_side_rail {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        --container-widget-width: 100% !important;
    }
    .elementor-widget-ehnes_editorial_body .ehnes-editorial-body__content {
        max-width: 100% !important;
    }
}

/* --- 3) Tablet (≤1023): Padding der beiden Editorial-Container
 *        reduzieren — 100px L/R ist Desktop-Wert. */
@media (max-width: 1023px) {
    .elementor-widget-ehnes_editorial_hero,
    .elementor-widget-ehnes_editorial_body,
    .elementor-widget-ehnes_editorial_side_rail {
        /* Padding-Override fuer den DIREKTEN Eltern-Container, */
        /* damit das Widget mehr Atem-Platz hat */
    }
    /* Eltern-Container der Editorial-Widgets: Padding sanfter */
    .e-con.e-parent:has(> .e-con > .elementor-widget-ehnes_editorial_hero),
    .e-con.e-parent:has(> .e-con > .elementor-widget-ehnes_editorial_body),
    .e-con.e-parent:has(> .elementor-widget-ehnes_editorial_hero),
    .e-con.e-parent:has(> .elementor-widget-ehnes_editorial_body) {
        --padding-left: clamp(20px, 5vw, 60px) !important;
        --padding-right: clamp(20px, 5vw, 60px) !important;
    }
}

/* --- 4) Mobile-Portrait: kompaktere Spacings, kleinere Pill-Padding,
 *        schmalerer Card-Innenraum, kleinere Hero-Lead-Margin. */
@media (max-width: 600px) {
    .ehnes-editorial-hero__pill {
        font-size: 10px;
        padding: 4px 10px;
        margin-bottom: 12px;
    }
    .ehnes-editorial-hero__lead {
        padding-block: clamp(16px, 5vw, 28px);
    }
    .ehnes-editorial-body {
        padding-block: clamp(20px, 5vw, 36px);
    }
    .ehnes-editorial-rail__card {
        padding: 20px;
    }
    .ehnes-editorial-hero__meta {
        font-size: 11px;
        gap: 10px;
    }
    .ehnes-editorial-hero__meta > * + *::before {
        padding-right: 10px;
        margin-left: -10px;
    }
}

/* --- 5) Mobile-Landscape: Hero-Hoehe robust halten (≥ 260px), damit
 *        auf Geraeten wie iPhone-Landscape (375px Hoehe, davon
 *        ~290 nutzbar) nicht nur ein 130px-Streifen vom Bild zu
 *        sehen ist. */
@media (max-height: 500px) and (orientation: landscape) {
    .ehnes-editorial-hero__media {
        height: clamp(260px, 65vh, 420px);
    }
}

/* --- 6) Hero-Bild-Hoehe auf mittel-breiten Mobile-Viewports
 *        sanfter — der scrollY-Trigger-Pfad ist kuerzer. */
@media (max-width: 767px) {
    .ehnes-editorial-hero__media {
        height: clamp(280px, 56vh, 460px);
    }
}

/* --- 7) Body-Content-Lesetypografie auf Mobile sanft skalieren */
@media (max-width: 600px) {
    .ehnes-editorial-body__content p,
    .ehnes-editorial-body__content li {
        font-size: 16px;
        line-height: 1.6;
    }
    .ehnes-editorial-body__content h2,
    .ehnes-editorial-body .ehnes-editorial-body__content h2 {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.25;
    }
    .ehnes-editorial-body__content h3 {
        font-size: clamp(18px, 5vw, 22px);
    }
}

/* --- 8) Sehr schmale Geraete (≤360): Pill darf umbrechen,
 *        Takeaways-Card Padding minimal. */
@media (max-width: 360px) {
    .ehnes-editorial-hero__pill {
        white-space: normal;
    }
    .ehnes-editorial-hero__takeaways {
        padding: 16px;
    }
}

/* ============================================================
 * Magic-Paywall Fade-Out Override (Page-Background-Agnostisch)
 * ------------------------------------------------------------
 * Das Plugin-CSS (magic-paywall/assets/css/frontend.css:60)
 * rendert den Teaser-Fade als ::after-Overlay, der HARD-CODED
 * zu #ffffff fadet. Auf grauem Editorial-Body-Background
 * ergibt das einen sichtbaren weissen Streifen.
 *
 * Loesung: ::after deaktivieren, dafuer mask-image auf den
 * Teaser-Container selbst — fadet zum Alpha-transparent,
 * Page-Background scheint durch (egal welche Farbe).
 *
 * Hinweis: Override sitzt hier (editorial.css) und nicht in
 * bexon-child/magic-paywall.css, weil dessen Enqueue
 * (`ehnes_mpw_badge_assets`, prio 110) auf dieser Page nicht
 * ausgegeben wird — vermutlich Hook-Ordering-Issue. editorial.css
 * laedt garantiert via Widget-Style-Dependency.
 * ============================================================ */
.mpw-paywall.mpw-paywall--teaser {
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}

/* ------------------------------------------------------------
 * Plus-Marker (Premium-Artikel-Badge im H1) auf konsistente
 * Header-Button-Groesse 44x44px. Plugin-Default ist 1.25em,
 * skaliert also mit Headline-font-size — bei H1 ~50px wird der
 * Marker 63px gross und dominiert visuell.
 * ------------------------------------------------------------ */
h1.ehnes-editorial-hero__title .mpw-plus-marker,
.ehnes-editorial-hero h1.ehnes-editorial-hero__title .mpw-plus-marker {
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    margin-right: 0.35em;
    /*
     * Vertikale Mittigkeit: vertical-align:middle zentriert auf
     * Baseline + halbe x-height. Bei Serif-Display-Headlines (Fraunces)
     * sitzt der Marker dann optisch leicht zu hoch, weil die x-height
     * relativ klein ist. translateY korrigiert auf cap-height-Mitte.
     */
    vertical-align: middle;
    transform: translateY(-0.12em);
}
@media (max-width: 600px) {
    h1.ehnes-editorial-hero__title .mpw-plus-marker,
    .ehnes-editorial-hero h1.ehnes-editorial-hero__title .mpw-plus-marker {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
}
.mpw-paywall.mpw-paywall--teaser::after {
    display: none !important;
}

/* ------------------------------------------------------------
 * Leere <p>-Wrapper (oft von wpautop-Edge-Cases erzeugt)
 * verschlucken — sonst entstehen ungewollte Spacing-Luecken.
 * Der Hauptfix (saubere <p>-Wrapper im Teaser) sitzt in
 * magic-paywall/includes/modules/paywall/class-content-filter.php
 * (wpautop-Call in build_teaser_with_cta).
 * ------------------------------------------------------------ */
.ehnes-editorial-body__content p:empty {
    display: none;
}