/* ═══════════════════════════════════════════════════════════════════════════
   EHNES HeartBit — Fachartikel-Layout
   ---------------------------------------------------------------------------
   Farben kommen aus Magic Paywall: das Plugin schreibt --mpw-primary,
   --mpw-accent, --mpw-dark, --mpw-soft-bg und --mpw-radius im wp_head aus den
   Einstellungen ins Dokument (Assets::render_inline_vars). Wir spiegeln sie
   auf eigene Namen, damit dieses Modul lesbar bleibt, aber KEINE zweite
   Wahrheit ueber die Markenfarben entsteht. Die Rueckfallwerte greifen nur,
   wenn das Paywall-Plugin abgeschaltet ist.

   Der Elementor-Kit faerbt jedes <button> mit der Primaerfarbe ein
   (.elementor-kit-XXXX button, Spezifitaet 0,1,1). Alle Knopf-Regeln hier
   sind deshalb zweistufig (0,2,0) notiert.
   ═══════════════════════════════════════════════════════════════════════════ */

.hb-article {
    --hb-primary: var(--mpw-primary, #00A88C);
    --hb-accent:  var(--mpw-accent,  #06CB98);
    --hb-dark:    var(--mpw-dark,    #20232B);
    --hb-soft:    var(--mpw-soft-bg, #f0faf7);
    --hb-radius:  var(--mpw-radius,  12px);

    --hb-line:  #dfe6e4;
    --hb-muted: #6B7B7E;
    --hb-text:  #15293A;

    /* ── Klebe-Versaetze ───────────────────────────────────────────────
       Diese drei Werte schreibt heartbit.js zur Laufzeit fort. Die Zahlen
       hier sind nur Rueckfallwerte, falls kein Skript laeuft.

       Warum gemessen und nicht festgeschrieben: Der Seitenkopf dieser
       Website ist NICHT dauerhaft sichtbar. Beim Herunterscrollen parkt er
       ausserhalb des Fensters, erst beim Hochscrollen faehrt er ein
       (Klasse `sticky` am .header-duplicate). Ein fester Versatz waere beim
       Lesen 92 px totes Feld - und beim Zurueckscrollen zu wenig. */

    /* Unterkante des Seitenkopfs: 0 beim Herunterlesen, sonst dessen Hoehe. */
    --hb-sticky-top: 0px;

    /* Volle Kopfhoehe, unabhaengig davon ob er gerade zu sehen ist.
       Wird fuer Ankerspruenge gebraucht - dort zaehlt der schlechteste Fall. */
    --hb-header-h: 92px;

    /* Hoehe unserer eigenen Artikelleiste. */
    --hb-bar-h: 56px;

    /* Abstand, den der Seitenkopf unter sich erzeugt (dessen margin-bottom).
       Wird gemessen; die Leiste zieht sich um diesen Wert nach oben. */
    --hb-head-gap: 0px;

    --hb-shell: 1295px;
    --hb-aside: 280px;

    /* ── Schriftgroessen an einer Stelle ────────────────────────────────
       Titel und Abschnittsueberschriften teilen sich einen Wert, Fliesstext
       einen zweiten. Vorher standen vier verschiedene Groessen an vier
       Stellen, und die Zusammenfassung war groesser als der Artikeltitel. */
    --hb-size-title: clamp(1.45rem, 1rem + 1.4vw, 1.85rem);
    --hb-size-body: 1.03rem;
    --hb-lh-body: 1.78;

    color: var(--hb-text);
}

.hb-shell {
    width: 100%;
    max-width: var(--hb-shell);
    margin-inline: auto;
    padding-inline: 15px;
}

/* ─────────────────────── Klebende Artikelleiste ─────────────────────── */

/* Fuehler: sitzt unmittelbar ueber der Leiste. Verlaesst er nach oben das
   Bild, hat die Leiste ihre klebende Lage erreicht. Robuster als der
   Vergleich der Fensterposition mit einer festen Zahl. */
.hb-topbar__sentinel {
    height: 1px;
    margin-bottom: -1px;
}

/* Die klebende Huelle ist durchsichtig - sie traegt nur die Position.
   Der negative Aussenabstand schliesst die Luecke im Ruhezustand: Der
   Seitenkopf traegt `margin-bottom: 15px`, wodurch die Leiste sonst 15 px
   unter ihm haengt statt anzuschliessen. Der Wert wird gemessen, nicht
   festgeschrieben - sonst bricht es, sobald das Theme ihn aendert. */
.hb-topbar {
    position: sticky;
    top: var(--hb-sticky-top);
    /* Unter dem Seitenkopf des Themes (der schaltet aktiv auf 999). */
    z-index: 90;
    margin-top: calc(0px - var(--hb-head-gap, 0px));
    background: transparent;
    transition: top 250ms ease;
}

/* Die weisse Flaeche: Inhaltsbreite statt randlos, unten abgerundet - genau
   wie der Seitenkopf, der mit 15 px Abstand steht und `0 0 12px 12px` hat.
   `overflow: hidden` sorgt dafuer, dass der Fortschrittsbalken der Rundung
   folgt statt ueber die Ecken hinauszulaufen. */
.hb-topbar__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--hb-shell);
    min-height: 56px;
    margin-inline: auto;
    padding: 10px 26px;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 var(--hb-radius) var(--hb-radius);
    box-shadow: 0 4px 14px rgba(12, 30, 33, .05);
}

.hb-topbar__back {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--hb-muted);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 150ms ease;
}

.hb-topbar__back:hover {
    color: var(--hb-primary);
}

.hb-topbar__back:focus-visible {
    outline: 2px solid var(--hb-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

.hb-topbar__arrow {
    line-height: 0;
    transition: transform 150ms ease;
}

.hb-topbar__back:hover .hb-topbar__arrow {
    transform: translateX(-3px);
}

/* Der Titel erscheint erst, wenn die Leiste klebt - daneben steht sonst
   die grosse Ueberschrift, und beides zugleich ist eine Dopplung. */
.hb-topbar__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--hb-text);
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hb-topbar__progress {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: transparent;
}

.hb-topbar__progress-fill {
    width: 0;
    height: 100%;
    background: var(--hb-primary);
    transition: width 100ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .hb-topbar,
    .hb-topbar__arrow,
    .hb-topbar__progress-fill,
    .hb-topbar__back {
        transition: none;
    }
}

@media (max-width: 1340px) {
    /* Unterhalb der Inhaltsbreite denselben Seitenabstand halten wie der
       Seitenkopf, sonst stossen die Kanten unterschiedlich weit nach aussen. */
    .hb-topbar__inner {
        margin-inline: 15px;
    }
}

@media (max-width: 700px) {
    .hb-topbar__inner {
        gap: 14px;
        min-height: 48px;
        padding-inline: 18px;
    }

    /* Auf schmalen Geräten zählt der Titel mehr als der beschriftete
       Rückweg - der Pfeil allein ist verständlich genug. */
    .hb-topbar__back-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hb-topbar__title {
        font-size: .92rem;
    }
}

/* ───────────────────────────── Zone A: Kopf ───────────────────────────── */

.hb-head {
    padding-block: 48px 44px;
}

/* Zweispaltig: Text links, Bild rechts. Das Bild bekommt bewusst weniger
   Platz als der Text - es begleitet die Aussage, es traegt sie nicht. */
.hb-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

/* Ohne Beitragsbild waere die zweite Spalte leer und der Text nur halb so
   breit - dann lieber einspaltig. */
.hb-head__grid--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 46em;
}

.hb-head__text {
    min-width: 0;
}

.hb-head__cat {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--hb-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

.hb-head__cat:hover,
.hb-head__cat:focus-visible {
    background: var(--hb-dark);
    color: #fff;
}

.hb-head__title {
    margin: 0 0 14px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--hb-size-title);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.hb-head__intro {
    margin: 0 0 26px;
    font-size: var(--hb-size-body);
    line-height: var(--hb-lh-body);
    color: #35474f;
}

/* Zitat im Kopf. Anfuehrungszeichen setzt die Vorlage, damit die Redaktion
   sie nicht mit eintippen muss und sie typografisch einheitlich bleiben. */
.hb-head__quote {
    margin: 0 0 26px;
}

.hb-head__quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(1.02rem, 1rem + .3vw, 1.2rem);
    line-height: 1.65;
    color: #35474f;
}

.hb-head__quote blockquote p {
    margin: 0;
}

.hb-head__quote blockquote p::before { content: '\201C'; }
.hb-head__quote blockquote p::after  { content: '\201D'; }

.hb-head__quote figcaption {
    margin-top: 12px;
    font-size: .92rem;
    color: var(--hb-muted);
}

.hb-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    font-size: .9rem;
    color: var(--hb-muted);
}

.hb-head__author {
    font-weight: 600;
    color: var(--hb-text);
}

.hb-head__sep {
    opacity: .5;
}

/* `position: relative` ist hier Pflicht, nicht Kosmetik: Magic Paywall haengt
   das HeartBit-Abzeichen ueber den Filter `post_thumbnail_html` in die Figur,
   und das Abzeichen ist absolut positioniert. Ohne positionierten Vorfahren
   verankert es sich am Fenster und klebt links am Bildschirmrand. */
/* Rundung und Beschnitt liegen am Bild, nicht an der Figur: Die Figur traegt
   jetzt auch die Bildunterschrift, und die soll unter dem Rahmen stehen statt
   in ihn hineingeschnitten zu werden. */
.hb-head__figure {
    position: relative;
    margin: 0;
}

/* Festes Seitenverhaeltnis: Ein hochkantes Beitragsbild wuerde die Kopfzeile
   sonst in die Laenge ziehen und den Titel aus dem Blick schieben. */
.hb-head__figure img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--hb-radius);
}

.hb-head__grid--solo .hb-head__figure img {
    aspect-ratio: 16 / 9;
}

/* Bildunterschrift: gehoert zum Bild, soll ihm aber nicht die Schau stehlen. */
.hb-head__caption {
    margin-top: 10px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--hb-muted);
}

/* Auf den Magazin-Kacheln sitzt das Abzeichen oben rechts. Im Artikelkopf
   genauso - der Leser soll dasselbe Zeichen an derselben Stelle wiederfinden. */
.hb-head__figure .mpw-thumb-badge {
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
}

/* ─────────────────────────── Zusammenfassung ─────────────────────────── */

/* Eigener Abschnitt über die volle Breite, durch eine Linie vom Kopf
   getrennt - nicht als Absatz in der Textspalte. Sie ist das, was ein Leser
   mitnimmt, wenn er nur zehn Sekunden hat. */
.hb-summary {
    padding-block: 44px 8px;
    border-top: 1px solid var(--hb-line);
}

.hb-summary__title {
    margin: 0 0 20px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--hb-size-title);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.hb-summary__text {
    margin: 0;
    font-size: var(--hb-size-body);
    line-height: var(--hb-lh-body);
    color: #35474f;
}

/* ──────────────────── Zone B: Verzeichnis + Artikeltext ──────────────────── */

.hb-body {
    padding-block: 44px 56px;
}

/* KEIN `align-items: start` hier. Die linke Spalte muss sich ueber die volle
   Zeilenhoehe strecken, sonst ist sie nur so hoch wie ihr Inhalt - und ohne
   Hoehe gibt es keine Klebestrecke fuer das Verzeichnis. Gemessen: Die
   Spalte lief sonst mit hinaus (y = -1858 bei scrollY 2600). */
.hb-shell--split {
    display: grid;
    grid-template-columns: var(--hb-aside) minmax(0, 1fr);
    gap: 56px;
}

.hb-shell--single {
    max-width: 860px;
}

/* Der Artikel nutzt die volle Spaltenbreite. Eine Begrenzung auf rund 72
   Zeichen waere fuer den Lesefluss angenehmer, ist aber ausdruecklich nicht
   gewuenscht - der Text soll in der gewohnten Seitenbreite laufen. */
.hb-main {
    min-width: 0;
}

/* Sticky erst, wenn die Spalte wirklich Platz hat. Darunter waere es eine
   mitfahrende Werbeflaeche statt einer Orientierungshilfe.

   Der Versatz stapelt sich auf die Artikelleiste: Seitenkopf (sofern gerade
   sichtbar) + Leiste + Luft. Beide Werte kommen gemessen aus dem Skript. */
/* Die ganze Spalte scrollt, nicht die Linkliste allein.
   Der frühere Versuch, nur die Liste scrollen zu lassen (nach dem Vorbild),
   ging hier schief: Dort ist die Handlungsaufforderung ein flaches Banner,
   unsere Newsletter-Karte dagegen ein vollstaendiges Formular mit
   Einwilligungstext - gut 600 px hoch. Im gedeckelten Flex-Behaelter blieb
   die Kuerzung damit an der Liste haengen, und schon bei drei Eintraegen war
   der dritte halb abgeschnitten. */
@media (min-width: 1200px) {
    .hb-aside__inner {
        position: sticky;
        top: calc(var(--hb-sticky-top) + var(--hb-bar-h) + 24px);
        max-height: calc(100vh - var(--hb-sticky-top) - var(--hb-bar-h) - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        transition: top 250ms ease;
    }

    .hb-aside__inner::-webkit-scrollbar {
        width: 3px;
    }

    .hb-aside__inner::-webkit-scrollbar-thumb {
        background: #c3cecb;
        border-radius: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hb-aside__inner {
        transition: none;
    }
}

/* Verlaufsmaske: zeigt an, dass die Liste weitergeht. Nur wenn sie
   tatsaechlich scrollt und noch nicht am Ende ist - sonst waere der letzte
   Eintrag grundlos blass. Beide Zustaende setzt das Skript. */
.hb-toc {
    position: relative;
}

/* Der Verlauf wird nicht mehr gebraucht: Es scrollt die ganze Spalte, nicht
   die Linkliste allein - das Verzeichnis ist damit immer vollstaendig. Das
   Element bleibt im Markup, damit ein spaeterer Umbau es wiederverwenden
   kann, ohne die Vorlage anzufassen. */
.hb-toc__fade {
    display: none;
}

/* ───────────────────────── Inhaltsverzeichnis ───────────────────────── */

/* Eigener Kasten mit Rahmen und weissem Grund - in jeder Breite gleich.
   Ohne Rahmen war nicht zu erkennen, wo das Verzeichnis endet und die Karte
   darunter beginnt. */
.hb-toc {
    position: relative;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    background: #fff;
}

/* Breite Ansicht: Der Aufklapper ist keiner. Die Zusammenfassungszeile
   verliert ihr Dreieck und ihre Anfassbarkeit und wirkt nur noch als
   Ueberschrift. Das Element bleibt trotzdem <details>, damit schmal ohne
   Markup-Wechsel daraus ein echter Aufklapper wird. */
.hb-toc__summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 12px;
    cursor: default;
    list-style: none;
}

.hb-toc__summary::-webkit-details-marker {
    display: none;
}

.hb-toc__title {
    font-family: 'Ubuntu', 'Trebuchet MS', Verdana, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-muted);
}

.hb-toc__count,
.hb-toc__chevron {
    display: none;
}

.hb-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: hb-toc;
}

.hb-toc__item {
    margin: 0;
    padding: 0;
}

.hb-toc__item--l3 {
    padding-inline-start: 14px;
}

/* Verweis und Knopf teilen sich das Aussehen. Der Knopf braucht dafuer eine
   vollstaendige Ruecksetzung, sonst schlaegt der Elementor-Kit durch. */
.hb-toc .hb-toc__link {
    display: flex;
    gap: 7px;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--hb-muted);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms ease;
}

.hb-toc__item--l3 .hb-toc__link {
    font-size: .85rem;
}

.hb-toc .hb-toc__link:hover {
    background: none;
    color: var(--hb-primary);
}

.hb-toc .hb-toc__link:focus-visible {
    outline: 2px solid var(--hb-primary);
    outline-offset: 3px;
}

/* Aktiver Abschnitt — gesetzt vom Beobachter in heartbit.js */
.hb-toc__item.is-current > .hb-toc__link {
    color: var(--hb-text);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--hb-primary);
    padding-inline-start: 10px;
}

/* Gesperrte Eintraege: erkennbar, aber nicht abweisend. */
.hb-toc .hb-toc__link--locked {
    color: #9aa7ab;
}

.hb-toc .hb-toc__link--locked:hover {
    color: var(--hb-primary);
}

.hb-toc .hb-toc__link--static {
    cursor: default;
}

.hb-toc .hb-toc__link--static:hover {
    color: #9aa7ab;
}

.hb-toc__lock {
    flex: 0 0 auto;
    align-self: center;
    line-height: 0;
    opacity: .8;
}

.hb-toc__text {
    min-width: 0;
}

.hb-toc__gate {
    margin: 12px 0 0;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--hb-muted);
}

/* ───────────────────────── Karte in der Seitenspalte ───────────────────────── */

/* Weisser Grund wie beim Verzeichnis - beide Kaesten treten damit
   gleichrangig vom Seitenhintergrund ab. */
.hb-card {
    padding: 20px;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    background: #fff;
}

.hb-card + .hb-card {
    margin-top: 16px;
}

.hb-card__eyebrow {
    margin: 0 0 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hb-primary);
}

.hb-card__title {
    margin: 0 0 8px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.3;
}

.hb-card__text {
    margin: 0 0 14px;
    font-size: .88rem;
    line-height: 1.55;
    color: #43555c;
}

.hb-card__hint {
    margin: 10px 0 0;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--hb-muted);
}

.hb-card__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hb-card__links li + li {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hb-line);
}

.hb-card__links a {
    color: var(--hb-text);
    font-size: .88rem;
    line-height: 1.4;
    text-decoration: none;
}

.hb-card__links a:hover {
    color: var(--hb-primary);
}

/* ─────────────────── Newsletter-Kachel (Bild statt Formular) ─────────────────── */

/* Das Anmeldeformular stand hier mit Feld, Einwilligungstext und Knopf gut
   600 px hoch und beherrschte die Spalte. Die Kachel weckt nur Interesse und
   fuehrt zum Formular auf der Magazinseite. */
.hb-card--newsletter {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: var(--hb-dark);
    background-image: var(--hb-nl-image, none);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    transition: transform 300ms ease, box-shadow 200ms ease;
}

/* Solange kein Bild hinterlegt ist: Verlauf in den Markenfarben. Sichtbar
   unfertig, aber nicht kaputt - kein leerer Rahmen, kein Platzhalterkreuz. */
.hb-card--nofoto {
    background-image: linear-gradient(150deg, var(--hb-dark), var(--hb-primary));
}

.hb-card--newsletter:hover,
.hb-card--newsletter:focus-visible {
    box-shadow: 0 10px 26px rgba(12, 30, 33, .16);
}

.hb-card--newsletter:focus-visible {
    outline: 2px solid var(--hb-primary);
    outline-offset: 3px;
}

/* Abdunkelung von unten - das Bild ist unten heller als der Text vertraegt. */
.hb-nl__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8, 26, 26, .88) 0%,
        rgba(8, 26, 26, .62) 34%,
        rgba(8, 26, 26, .12) 62%,
        rgba(8, 26, 26, 0) 100%
    );
}

.hb-nl__text {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.hb-nl__eyebrow {
    margin-bottom: 4px;
    color: var(--hb-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hb-nl__title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #fff;
}

.hb-nl__line {
    margin-top: 6px;
    font-size: .88rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .82);
}

@media (prefers-reduced-motion: reduce) {
    .hb-card--newsletter {
        transition: none;
    }
}

/* ───────────────────────────── Knoepfe ───────────────────────────── */

.hb-card .hb-btn,
.hb-head .hb-btn,
.hb-inline-card .hb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 8px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.hb-card .hb-btn--primary,
.hb-inline-card .hb-btn--primary {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff;
}

.hb-card .hb-btn--primary:hover,
.hb-inline-card .hb-btn--primary:hover {
    background: var(--hb-dark);
    border-color: var(--hb-dark);
    color: #fff;
}

.hb-card .hb-btn--ghost,
.hb-inline-card .hb-btn--ghost {
    background: #fff;
    border-color: var(--hb-line);
    color: var(--hb-text);
}

.hb-card .hb-btn--ghost:hover,
.hb-inline-card .hb-btn--ghost:hover {
    border-color: var(--hb-primary);
    color: var(--hb-primary);
}

/* Der Knopf im Kopf ist eine Hauptaktion und keine Randnotiz - volle Breite
   waere hier aber falsch, er soll nur so breit sein wie seine Beschriftung. */
.hb-head .hb-btn {
    width: auto;
    margin: 0;
    padding: 13px 26px;
    font-size: .92rem;
}

.hb-head .hb-btn--primary {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff;
}

.hb-head .hb-btn--primary:hover {
    background: var(--hb-dark);
    border-color: var(--hb-dark);
    color: #fff;
}

/* Basisklassen fehlt ein sichtbarer Tastaturfokus — hier nachgeholt. */
.hb-card .hb-btn:focus-visible,
.hb-head .hb-btn:focus-visible,
.hb-inline-card .hb-btn:focus-visible {
    outline: 2px solid var(--hb-primary);
    outline-offset: 2px;
}

/* ───────────────────── Kennzahlen und Zusammenfassung ───────────────────── */

.hb-keypoints {
    margin: 0 0 28px;
    padding: 22px 24px;
    border-inline-start: 4px solid var(--hb-primary);
    border-radius: 0 var(--hb-radius) var(--hb-radius) 0;
    background: var(--hb-soft);
}

.hb-keypoints__title {
    margin: 0 0 10px;
    font-family: 'Ubuntu', 'Trebuchet MS', Verdana, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hb-primary);
}

.hb-keypoints__list {
    margin: 0;
    padding-inline-start: 20px;
}

.hb-keypoints__list li {
    margin-bottom: 7px;
    font-size: .97rem;
    line-height: 1.6;
}

.hb-keypoints__list li:last-child {
    margin-bottom: 0;
}

/* ───────────────────────────── Artikeltext ───────────────────────────── */

.hb-content {
    font-size: var(--hb-size-body);
    line-height: var(--hb-lh-body);
}

.hb-content > :first-child {
    margin-top: 0;
}

.hb-content p {
    margin: 0 0 1.3em;
}

.hb-content h2,
.hb-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    /* Ein Sprung darf nicht unter den klebenden Leisten landen. Hier zaehlt
       bewusst die VOLLE Kopfhoehe und nicht der gerade sichtbare Anteil:
       Nach einem Sprung nach oben faehrt der Seitenkopf ein, und dann waere
       das Ziel verdeckt. Etwas Luft zu viel ist der harmlosere Fehler. */
    scroll-margin-top: calc(var(--hb-header-h) + var(--hb-bar-h) + 20px);
}

/* Gleiches Format wie „Zusammenfassung" und „Weiterlesen" - es sind alles
   Ueberschriften derselben Ebene. */
.hb-content h2 {
    margin: 2em 0 .6em;
    font-size: var(--hb-size-title);
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* Manche Beitraege haben die ganze Ueberschrift zusaetzlich in <strong>
   gesetzt. Das zog sie von Stärke 500 auf 700 - sie wirkte dadurch schwerer
   als die Abschnittsueberschriften, obwohl sie kleiner gesetzt war. Im
   Beitragstext ist das bereinigt; diese Regel faengt kuenftige Faelle ab,
   ohne dass jemand den Fehler bemerken muss.
   Teilweise fett gesetzte Ueberschriften bleiben davon unberuehrt - dort ist
   die Hervorhebung gewollt und betrifft nur einen Teil der Zeile. */
.hb-content h2 > strong:only-child,
.hb-content h3 > strong:only-child,
.hb-content h4 > strong:only-child,
.hb-content h2 > b:only-child,
.hb-content h3 > b:only-child,
.hb-content h4 > b:only-child {
    font-weight: inherit;
}

.hb-content h3 {
    margin: 1.7em 0 .5em;
    font-size: 1.25rem;
    line-height: 1.3;
}

.hb-content ul,
.hb-content ol {
    margin: 0 0 1.3em;
    padding-inline-start: 22px;
}

.hb-content li {
    margin-bottom: .5em;
}

.hb-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--hb-radius);
}

.hb-content blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-inline-start: 3px solid var(--hb-primary);
    font-size: 1.1rem;
    font-style: italic;
    color: #35474f;
}

/* Breite Inhalte duerfen die Seite nicht waagerecht schieben. */
.hb-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* ─────────────────────── CTA-Box der Paywall im Text ─────────────────────── */

/* Die bestehende Formatierung im Child-Theme kennt genau einen Umbruchpunkt:
   `@media (max-width: 600px)`. Der ist FENSTERbezogen - und die Artikelspalte
   hier ist bei jeder Fensterbreite hoechstens rund 612 px breit. Der
   Umbruchpunkt feuert also nie, und die beiden Knoepfe blieben nebeneinander
   in einen Kasten gequetscht, der dafuer zu schmal ist.

   Weil die Spalte NIE breit wird, braucht es dafuer keine Container-Abfrage:
   Die kompakte Fassung gilt hier schlicht immer. Bewusst kein `contain` und
   kein `overflow` auf der Spalte - beides wuerde den weichen Verlauf ueber
   der Bruchkante abschneiden. */

.hb-content .mpw-paywall__cta--ehnes .mpw-paywall__box {
    padding: 2rem 1.5rem 1.75rem;
}

.hb-content .mpw-paywall__cta--ehnes .mpw-paywall__title {
    font-size: 1.45rem;
}

.hb-content .mpw-paywall__cta--ehnes .mpw-paywall__actions {
    flex-direction: column;
    gap: .5rem;
}

/* Der Abstand kommt aus dem `gap` der Reihe. Bexon gibt Knoepfen zusaetzlich
   einen Aussenabstand nach unten - untereinander gestapelt summiert sich das
   sichtbar auf. */
.hb-content .mpw-paywall__cta--ehnes .mpw-btn {
    width: 100%;
    margin: 0;
}

.hb-content .mpw-paywall__brand-img {
    width: 84px;
}

/* Zahl der gesperrten Abschnitte - dieselbe Angabe wie im Verzeichnis und in
   der Seitenkarte, damit alle drei als ein System lesbar sind. */
.hb-content .hb-cta-count {
    margin: .9rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid #DDE5E1;
    font-size: .82rem;
    color: #808291;
}

/* Sprungziel nach der Anmeldung: nicht unter den klebenden Leisten landen. */
.hb-content #hb-paywall {
    scroll-margin-top: calc(var(--hb-header-h) + var(--hb-bar-h) + 20px);
}

/* ───────────────────────── Schlussaufruf ───────────────────────── */

/* Steht nach dem Artikeltext, deutlich abgesetzt, aber ohne Kastenoptik -
   er soll wie ein Schlusswort wirken, nicht wie eine Anzeige. */
.hb-cta {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid var(--hb-line);
}

.hb-cta__hook {
    margin: 0 0 10px;
    font-weight: 600;
    font-size: var(--hb-size-body);
    line-height: var(--hb-lh-body);
    color: var(--hb-text);
}

.hb-cta__body {
    margin: 0 0 22px;
    font-size: var(--hb-size-body);
    line-height: var(--hb-lh-body);
    color: #35474f;
}

.hb-cta .hb-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 12px 24px;
    border: 1px solid var(--hb-primary);
    border-radius: 999px;
    background: var(--hb-primary);
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease;
}

.hb-cta .hb-cta__btn:hover {
    background: var(--hb-dark);
    border-color: var(--hb-dark);
    color: #fff;
}

.hb-cta .hb-cta__btn:focus-visible {
    outline: 2px solid var(--hb-primary);
    outline-offset: 3px;
}

.hb-cta__pfeil {
    line-height: 0;
}

/* Ansprechpartner: eine Person, kein Kasten. */
.hb-cta__person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.hb-cta__person-bild {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.hb-cta__person-daten {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hb-cta__person-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.3;
}

.hb-cta__person-rolle {
    font-size: .85rem;
    color: var(--hb-muted);
}

/* Der Rechtshinweis gehoert dazu, aber leise. */
.hb-cta__hinweis {
    margin: 24px 0 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--hb-muted);
}

.hb-inline-card {
    max-width: 480px;
    margin: 36px auto 0;
}

/* ───────────────────────────── Zone C: Abschluss ───────────────────────────── */

.hb-foot {
    padding-block: 0 64px;
}

/* Autorenkasten und Beitragsnavigation sind auf Wunsch entfallen - der
   Rueckweg steht durchgehend in der klebenden Leiste, der Autor im Kopf. */

.hb-related {
    padding-top: 34px;
    border-top: 1px solid var(--hb-line);
}

/* Gleiche Ebene wie „Zusammenfassung", also auch gleiche Groesse. */
.hb-related__title {
    margin: 0 0 20px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--hb-size-title);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.hb-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hb-related__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* `position: relative` ist Pflicht, nicht Kosmetik - gleiche Falle wie beim
   Kopfbild: Magic Paywall legt um das Vorschaubild ein <span class="mpw-thumb-wrap">
   mit `display: contents`. Ein solches Element erzeugt KEINE Box, sein eigenes
   `position: relative` bleibt also wirkungslos. Das absolut positionierte
   Abzeichen sucht sich dann den naechsten positionierten Vorfahren - und ohne
   diesen hier landet es am Dokumentanfang, oben links am Fensterrand. */
.hb-related__thumb {
    position: relative;
    display: block;
    margin-bottom: 12px;
    border-radius: var(--hb-radius);
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

/* Gleiche Ecke wie auf den Magazin-Kacheln und im Artikelkopf. */
.hb-related__thumb .mpw-thumb-badge {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
}

.hb-related__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.hb-related__link:hover .hb-related__thumb img {
    transform: scale(1.04);
}

.hb-related__name {
    display: block;
    margin-bottom: 5px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.3;
}

.hb-related__link:hover .hb-related__name {
    color: var(--hb-primary);
}

.hb-related__meta {
    display: block;
    font-size: .8rem;
    color: var(--hb-muted);
}

.hb-related__link:focus-visible {
    outline: 2px solid var(--hb-primary);
    outline-offset: 4px;
    border-radius: var(--hb-radius);
}

@media (prefers-reduced-motion: reduce) {
    .hb-related__thumb img {
        transition: none;
    }

    .hb-related__link:hover .hb-related__thumb img {
        transform: none;
    }
}

/* ───────────────────────────── Umbrueche ───────────────────────────── */

@media (max-width: 1199px) {
    .hb-shell--split {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    /* Ohne Seitenspalte gehoert das Verzeichnis zusammengeklappt an den
       Anfang — als Block, nicht als mitlaufende Spalte. */
    .hb-aside {
        order: -1;
    }

    .hb-aside__inner {
        display: grid;
        gap: 16px;
    }

    /* Rahmen und Grund kommen bereits aus der Grundregel - schmal braucht es
       nur weniger Innenabstand, weil die Zusammenfassungszeile ihren eigenen
       mitbringt. */
    .hb-toc {
        padding: 0 20px;
    }

    /* Schmal wird die Zusammenfassungszeile zur Schaltflaeche: ganze Breite,
       Zaehler und Dreieck sichtbar, grosszuegige Trefferflaeche. */
    .hb-toc__summary {
        justify-content: flex-start;
        margin: 0;
        padding: 14px 0;
        cursor: pointer;
    }

    .hb-toc__count,
    .hb-toc__chevron {
        display: inline-flex;
    }

    .hb-toc__count {
        margin-inline-start: auto;
        font-size: .8rem;
        color: var(--hb-muted);
    }

    .hb-toc__chevron {
        align-self: center;
        color: var(--hb-muted);
        transition: transform 150ms ease;
    }

    .hb-toc__disclosure[open] .hb-toc__chevron {
        transform: rotate(180deg);
    }

    .hb-toc__summary:focus-visible {
        outline: 2px solid var(--hb-primary);
        outline-offset: 2px;
    }

    .hb-toc__list {
        padding-bottom: 6px;
    }

    .hb-toc__gate {
        margin-bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hb-toc__chevron {
        transition: none;
    }
}

/* Unter 900 px reicht die Breite nicht mehr für Text UND Bild nebeneinander:
   Das Bild wuerde zur Briefmarke, der Text zur Spalte. Also untereinander -
   Text zuerst, weil der Titel die Seite eroeffnen soll, nicht das Foto. */
@media (max-width: 900px) {
    .hb-head__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

@media (max-width: 1024px) {
    .hb-head {
        padding-block: 32px 32px;
    }

    .hb-summary {
        padding-block: 32px 4px;
    }

    .hb-body {
        padding-block: 32px 44px;
    }
}

@media (max-width: 900px) {
    .hb-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 700px) {
    .hb-head__top {
        flex-wrap: wrap;
    }

    .hb-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hb-keypoints {
        padding: 18px 18px;
    }

    .hb-abstract {
        font-size: 1.03rem;
    }

    .hb-content h2 {
        font-size: 1.4rem;
    }
}

/* Wer Bewegung reduziert haben moechte, bekommt kein sanftes Scrollen. */
@media (prefers-reduced-motion: reduce) {
    html:has(.hb-article) {
        scroll-behavior: auto;
    }
}