/**
 * MB Business Lite — Blog-Beitrags-Optik (Spoke-Stil "Trust/Human").
 *
 * Styled die vom Blog-Bot erzeugten Beitraege. Der Bot-Renderer
 * (agents/blog-bot/blog_bot/render.py) wrappt den Beitragsinhalt in
 * `.mbl-article` und nutzt genau diese Komponenten-Klassen. Spiegelt das
 * freigegebene Mockup mockups/blog-post-example-v1.html.
 *
 * Tokens hier lokal auf `.mbl-article` (self-contained), damit die Optik
 * unabhaengig vom Theme greift. Werte = Spoke-Gruen, identisch zu lite.css.
 * Nur auf Einzelbeitraegen geladen (Bootstrap: is_singular('post')).
 */

.mbl-article {
    --mbl-primary: #1C8161;
    --mbl-primary-dark: #15634A;
    --mbl-accent: #00C385;
    --mbl-tint: #EAF6F1;
    --mbl-ink: #142019;
    --mbl-text: #1A1A1A;
    --mbl-muted: #6B6B6B;
    --mbl-border: #E8E8E8;
    --mbl-radius-card: 24px;
    --mbl-radius-cta: 14px;
    --mbl-radius-pill: 999px;
    --mbl-shadow-soft: 0 1px 2px rgba(16, 40, 30, .05), 0 8px 30px rgba(16, 40, 30, .08);
    --mbl-font: "Assistant", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    max-width: 760px;
    margin: 0 auto;
    font-family: var(--mbl-font);
    font-size: 18px;
    line-height: 1.7;
    color: var(--mbl-text);
    -webkit-font-smoothing: antialiased;
}

/* Kopf */
.mbl-article .mbl-head {
    display: block;
    margin: 0 0 8px;
}

.mbl-article .kicker {
    display: inline-block;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mbl-primary);
    background: var(--mbl-tint);
    padding: 6px 14px;
    border-radius: var(--mbl-radius-pill);
}

.mbl-article .article-title {
    color: var(--mbl-ink);
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 16px 0 0;
}

@media (max-width: 640px) {
    .mbl-article .article-title { font-size: 31px; }
}

.mbl-article .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    color: var(--mbl-muted);
    font-size: 15px;
    padding-bottom: 26px;
    margin: 18px 0 30px;
    border-bottom: 1px solid var(--mbl-border);
}

.mbl-article .meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c7d4ce;
}

.mbl-article .lede {
    font-size: 21px;
    line-height: 1.6;
    color: #2c382f;
    margin: 0 0 30px;
}

/* TL;DR "Das Wichtigste in Kürze" — Kurz-Antwort direkt unter dem Kopf */
.mbl-article .tldr {
    background: var(--mbl-tint);
    border-left: 4px solid var(--mbl-primary);
    border-radius: 0 var(--mbl-radius-cta) var(--mbl-radius-cta) 0;
    padding: 20px 24px;
    margin: 0 0 30px;
}

.mbl-article .tldr__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mbl-primary-dark);
}

.mbl-article .tldr ul {
    margin: 0;
    padding: 0 0 0 20px;
}

.mbl-article .tldr li {
    margin-bottom: 8px;
    line-height: 1.55;
}

.mbl-article .tldr li:last-child {
    margin-bottom: 0;
}

/* Inhaltsverzeichnis — Sprunglinks auf die H2-Anker */
.mbl-article .toc {
    border: 1px solid var(--mbl-border);
    border-radius: var(--mbl-radius-cta);
    padding: 18px 24px;
    margin: 0 0 34px;
    font-size: 16px;
}

.mbl-article .toc__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mbl-muted);
}

.mbl-article .toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mbl-article .toc li {
    margin-bottom: 6px;
}

.mbl-article .toc li:last-child {
    margin-bottom: 0;
}

.mbl-article .toc a {
    color: var(--mbl-primary-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.mbl-article .toc a:hover {
    border-bottom-color: var(--mbl-primary);
}

/* Fliesstext */
.mbl-article h2 {
    color: var(--mbl-ink);
    font-size: 26px;
    line-height: 1.25;
    margin: 42px 0 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    /* Anker-Sprungziel nicht unter einem Sticky-Header verstecken */
    scroll-margin-top: 90px;
}

.mbl-article h3 {
    color: var(--mbl-ink);
    font-size: 22px;
    margin: 30px 0 12px;
    font-weight: 800;
}

.mbl-article p {
    margin: 0 0 20px;
}

/* Fliesstext-Listen (Prosa). Callout/Tabelle haben eigene Optik mit hoeherer
   Spezifitaet (.mbl-article .callout ul) und bleiben davon unberuehrt. */
.mbl-article ul {
    margin: 0 0 20px;
    padding-left: 24px;
}

.mbl-article li {
    margin-bottom: 8px;
}

.mbl-article li::marker {
    color: var(--mbl-primary);
}

.mbl-article a {
    color: var(--mbl-primary);
}

/* Inline-Links im Fliesstext unterstreichen (Erkennbarkeit). Der CTA-Button
   (.cta a) bleibt ohne Unterstrich -> eigene Regel weiter unten. */
.mbl-article p a,
.mbl-article li a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Tastatur-Fokus sichtbar (WCAG 2.4.7) — auch auf dem dunklen CTA-Button. */
.mbl-article a:focus-visible {
    outline: 3px solid var(--mbl-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.mbl-article strong {
    color: var(--mbl-ink);
}

/* Callout "Auf einen Blick" */
.mbl-article .callout {
    background: var(--mbl-tint);
    border: 1px solid #d3ebe1;
    border-radius: var(--mbl-radius-card);
    padding: 26px 28px;
    margin: 34px 0;
}

.mbl-article .callout h3 {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mbl-primary-dark);
}

.mbl-article .callout ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mbl-article .callout li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
    line-height: 1.55;
}

.mbl-article .callout li:last-child {
    margin-bottom: 0;
}

.mbl-article .callout li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mbl-primary), var(--mbl-accent));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 13px no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 13px no-repeat;
}

/* Vergleichstabelle */
.mbl-article .table-wrap {
    margin: 30px 0;
    overflow-x: auto;
}

.mbl-article table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    background: #fff;
    border-radius: var(--mbl-radius-cta);
    overflow: hidden;
    box-shadow: var(--mbl-shadow-soft);
}

.mbl-article th,
.mbl-article td {
    text-align: left;
    padding: 14px 18px;
    vertical-align: top;
}

.mbl-article thead th {
    background: var(--mbl-ink);
    color: #eaf6f1;
    font-size: 14px;
    letter-spacing: .03em;
}

.mbl-article tbody tr + tr td {
    border-top: 1px solid var(--mbl-border);
}

.mbl-article tbody td:first-child {
    font-weight: 700;
    color: var(--mbl-ink);
    width: 38%;
}

/* Berater-Notiz */
.mbl-article .advisor {
    border-left: 4px solid var(--mbl-accent);
    background: #fff;
    border-radius: 0 var(--mbl-radius-cta) var(--mbl-radius-cta) 0;
    padding: 20px 24px;
    margin: 34px 0;
    box-shadow: var(--mbl-shadow-soft);
}

.mbl-article .advisor .label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mbl-primary);
    margin-bottom: 6px;
}

.mbl-article .advisor p {
    margin: 0;
    color: #2c382f;
}

/* CTA (genau EIN Funnel-CTA) */
.mbl-article .cta {
    margin: 46px 0 8px;
    background: linear-gradient(135deg, #15342a, var(--mbl-primary));
    border-radius: var(--mbl-radius-card);
    padding: 38px 34px;
    text-align: center;
    color: #fff;
    box-shadow: var(--mbl-shadow-soft);
}

.mbl-article .cta h3 {
    margin: 0 0 8px;
    font-size: 24px;
    color: #fff;
    font-weight: 800;
}

.mbl-article .cta p {
    margin: 0 auto 22px;
    max-width: 480px;
    color: #d6ece4;
}

.mbl-article .cta a {
    display: inline-block;
    background: #fff;
    color: var(--mbl-primary-dark);
    font-weight: 800;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: var(--mbl-radius-cta);
    transition: transform .15s ease;
}

.mbl-article .cta a:hover {
    transform: translateY(-1px);
}

.mbl-article .cta a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Eingebetteter Tarif-Konfigurator (Funnel-Endpunkt im Beitrag, statt
   Link-CTA). Die Einleitung rahmt den darunter via Shortcode gerenderten
   Konfigurator (.mbl-konfigurator, Optik aus lite.css). */
.mbl-article .mbl-konf-embed {
    margin: 48px 0 18px;
    text-align: center;
}

.mbl-article .mbl-konf-embed h3 {
    font-size: 24px;
    margin: 0 0 8px;
    color: var(--mbl-ink);
}

.mbl-article .mbl-konf-embed p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--mbl-muted);
}

/* Netzbetreiber-Logos: (1) klein vor exakt erkanntem Netz-Namen in der
   Vergleichstabelle, (2) Trust-Leiste "Tarife in allen Netzen" am
   Funnel-Endpunkt (CTA + Konfigurator-Embed). Chips mit weissem Grund,
   damit die farbigen Marken-SVGs auch auf dem dunklen CTA-Verlauf stehen. */
.mbl-article .netz-logo {
    height: 18px;
    width: auto;
    vertical-align: -3px;
    margin-right: 7px;
}

.mbl-article .netz-trust {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mbl-article .netz-trust-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mbl-article .cta .netz-trust-label {
    color: #d6ece4;
}

.mbl-article .mbl-konf-embed .netz-trust-label {
    color: var(--mbl-muted);
}

.mbl-article .netz-trust-logos {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.mbl-article .netz-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 9px;
    padding: 6px 10px;
}

.mbl-article .netz-chip .netz-logo {
    margin-right: 0;
    vertical-align: 0;
}

/* Fusszeile */
.mbl-article .post-foot {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--mbl-border);
    font-size: 14px;
    color: var(--mbl-muted);
}

@media (max-width: 600px) {
    .mbl-article {
        font-size: 17px;
    }
}

/* Theme-Chrome auf Bot-Beitraegen unterdruecken.
 *
 * Das pixfort/Archiv-Theme rendert auf Einzelbeitraegen seinen eigenen
 * Meta-Riegel (Like-Herz + Autor + Kategorie-Badge + Datum) sowie eine
 * Autoren-Box im Footer — beides auf einem anderen Raster als die zentrierte
 * `.mbl-article`-Spalte und redundant zum bewusst gebauten Bot-Kopf
 * (Kicker -> H1 -> Meta). Ergebnis ohne diese Regeln: Fehlausrichtung,
 * doppelte Kategorie/Datum/Autor und ein "0 Likes"-Herz (B2B-Trust-schaedlich).
 *
 * `:has(.mbl-article)` greift nur, wenn der Bot-Artikel auf der Seite ist —
 * Fremd-Posts ohne `.mbl-article` behalten ihr Theme-Chrome. */
/* `!important` noetig: der Riegel traegt die Utility-Klasse `.d-flex`, die
 * `display: flex !important` setzt (CSS-Falle 9) und ein schlichtes
 * `display: none` ueberstimmen wuerde. */
body:has(.mbl-article) .entry-meta.pix-post-meta-inner {
    display: none !important;
}

body:has(.mbl-article) .entry-footer .media {
    display: none !important;
}

/* =========================================================================
   FAQ — Yoast-FAQ-Block, vom blog.js zum a11y-Akkordeon angereichert.
   Ohne JS: offene, lesbare Frage-Antwort-Liste (Schema + Inhalt im DOM,
   GEO/SEO-sicher). Mit JS: aus <strong> wird ein <button>, Antwort klappt zu.
   Tokens via `.mbl-article` geerbt (Spoke-Gruen).
   ========================================================================= */
.mbl-article .mbl-faq {
    margin: 40px 0 8px;
}

.mbl-article .mbl-faq > h2 {
    margin-bottom: 18px;
}

.mbl-article .schema-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mbl-article .schema-faq-section {
    border: 1px solid var(--mbl-border);
    border-radius: var(--mbl-radius-cta);
    background: #fff;
    overflow: hidden;
}

/* Basis (ohne JS): Frage als Block-Ueberschrift, Antwort offen darunter. */
.mbl-article .schema-faq-question {
    display: block;
    padding: 16px 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--mbl-ink);
}

.mbl-article .schema-faq-answer {
    margin: 0;
    padding: 8px 20px 16px;
    color: var(--mbl-text);
}

/* Angereichert (JS aktiv): Frage = Button-Zeile, Antwort = Disclosure-Panel. */
.mbl-article .mbl-faq--enhanced .mbl-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    color: var(--mbl-ink);
    cursor: pointer;
}

.mbl-article .mbl-faq--enhanced .mbl-faq-q:hover {
    color: var(--mbl-primary-dark);
}

.mbl-article .mbl-faq--enhanced .mbl-faq-q:focus-visible {
    outline: 3px solid var(--mbl-primary);
    outline-offset: -3px;
    border-radius: var(--mbl-radius-cta);
}

.mbl-article .mbl-faq--enhanced .schema-faq-section:has(.mbl-faq-q[aria-expanded="true"]) {
    border-color: var(--mbl-primary);
}

/* Angereichertes Panel: Basis-Padding-oben entfaellt (Button traegt es schon). */
.mbl-article .mbl-faq--enhanced .schema-faq-answer {
    padding-top: 0;
}

/* Plus/Minus-Indikator: zwei Striche, beim Aufklappen zum Minus rotiert. */
.mbl-article .mbl-faq--enhanced .mbl-faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.mbl-article .mbl-faq--enhanced .mbl-faq-icon::before,
.mbl-article .mbl-faq--enhanced .mbl-faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    background: var(--mbl-primary);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.mbl-article .mbl-faq--enhanced .mbl-faq-icon::after {
    transform: rotate(90deg);
}

.mbl-article .mbl-faq--enhanced .mbl-faq-q[aria-expanded="true"] .mbl-faq-icon::after {
    transform: rotate(0deg);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mbl-article .mbl-faq--enhanced .mbl-faq-icon,
    .mbl-article .mbl-faq--enhanced .mbl-faq-icon::before,
    .mbl-article .mbl-faq--enhanced .mbl-faq-icon::after,
    .mbl-article .tariff-card-cta {
        transition: none;
    }
}

/* pixfort Like-/Favoriten-Widget (sticky Box mit Herz + Zaehler) — Vanity-
 * Metrik, B2B-Trust-schaedlich (zeigt z.B. "0 Likes"). Separate Box,
 * nicht Teil des oben versteckten `.entry-meta`-Riegels. */
body:has(.mbl-article) .pix-post-meta-box {
    display: none !important;
}

/* =========================================================================
   Share-Reihe am Artikel-Ende (Mobilfunkboerse\BusinessLite\Blog\ShareRow).
   Sibling von .mbl-article (via the_content angehaengt) -> self-contained mit
   eigener Spaltenbreite + Spoke-Gruen-Tokens. Statisch, NICHT mitlaufend.
   ========================================================================= */
.mbl-share {
    --mbls-primary: #1C8161;
    --mbls-primary-dark: #15634A;
    --mbls-tint: #EAF6F1;
    --mbls-text: #1A1A1A;
    --mbls-muted: #6B6B6B;
    --mbls-border: #E2E6E4;

    max-width: 760px;
    margin: 26px auto 8px;
    padding-top: 22px;
    border-top: 1px solid var(--mbls-border);
    font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.mbl-share-label {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mbls-muted);
}

.mbl-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mbl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 13px;
    border: 1px solid var(--mbls-border);
    border-radius: 999px;
    background: #fff;
    color: var(--mbls-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.mbl-share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: 0 0 auto;
}

.mbl-share-btn:hover {
    border-color: var(--mbls-primary);
    background: var(--mbls-tint);
    color: var(--mbls-primary-dark);
    transform: translateY(-1px);
}

.mbl-share-btn:focus-visible {
    outline: 3px solid var(--mbls-primary);
    outline-offset: 2px;
}

/* Kopier-Bestaetigung: kurzzeitig gruen gefuellt. */
.mbl-share-btn.is-copy.is-copied {
    border-color: var(--mbls-primary);
    background: var(--mbls-primary);
    color: #fff;
    transform: none;
}

/* Nativer Teilen-Button traegt das hidden-Attribut, bis blog.js ihn (nur bei
   navigator.share) einblendet — keine eigene display-Regel noetig. */

@media (max-width: 600px) {
    .mbl-share {
        margin-top: 22px;
    }
    .mbl-share-btn {
        font-size: 14px;
        padding: 9px 14px 9px 12px;
    }
}

/* Bild-Strecke: Inline-Bild aus dem Briefing-PDF (BS5). Brand-Rahmen + feste
   Massreservierung via width/height am <img> -> kein Layout-Shift (CLS). Statt
   width:100% nur max-width:100%, damit kleine PDF-Bilder nicht hochskaliert und
   unscharf werden; mittig im Artikelraster. */
.mbl-article .mbl-figure {
    margin: 32px 0;
}

.mbl-article .mbl-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--mbl-border);
    border-radius: var(--mbl-radius-card);
    box-shadow: var(--mbl-shadow-soft);
    background: var(--mbl-tint);
}

/* Bildunterschrift nur, wenn der Nutzer eine gesetzt hat (Default leer). */
.mbl-article .mbl-figure figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mbl-muted);
    text-align: center;
}

@media (max-width: 600px) {
    .mbl-article .mbl-figure {
        margin: 24px 0;
    }
}

/* =========================================================================
   Tarif-Anker — "Passende Tarife" am Funnel-Ende (render._tariff_anchors).
   1-3 abschliessbare Tarife mit Shop-Deeplink, deterministisch aus den
   Hub-Fakten. Bruecke vom Ratgeber in den Shop, NACH Konfigurator/CTA.
   Tokens via `.mbl-article` geerbt (Spoke-Gruen).
   ========================================================================= */
.mbl-article .tariff-anchors {
    margin: 40px 0 8px;
    padding: 30px 26px 24px;
    background: var(--mbl-tint);
    border: 1px solid var(--mbl-border);
    border-radius: var(--mbl-radius-card);
}

.mbl-article .tariff-anchors > h2 {
    margin: 0 0 4px;
    color: var(--mbl-ink);
}

.mbl-article .tariff-anchors-note {
    margin: 0 0 20px;
    color: var(--mbl-muted);
    font-size: 15px;
}

.mbl-article .tariff-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.mbl-article .tariff-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mbl-border);
    border-radius: var(--mbl-radius-cta);
    padding: 20px 20px 18px;
    box-shadow: var(--mbl-shadow-soft);
}

.mbl-article .tariff-card-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--mbl-ink);
    line-height: 1.3;
}

.mbl-article .tariff-card-meta {
    margin: 8px 0 0;
    color: var(--mbl-muted);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* CTA schiebt sich an die Kartenunterkante -> gleiche Button-Linie bei
   unterschiedlich langen Tarifnamen. */
.mbl-article .tariff-card-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-block;
    background: var(--mbl-primary);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: var(--mbl-radius-cta);
    transition: transform .15s ease, background .15s ease;
}

.mbl-article .tariff-card-cta:hover {
    background: var(--mbl-primary-dark);
    transform: translateY(-1px);
}

.mbl-article .tariff-card-cta:focus-visible {
    outline: 3px solid var(--mbl-accent);
    outline-offset: 3px;
}

/* Trust-Leiste erbt `.netz-trust`; das Label braucht im hellen Block die
   gedaempfte Farbe (Default ist nur fuer CTA/Konfigurator-Embed gesetzt). */
.mbl-article .tariff-anchors .netz-trust-label {
    color: var(--mbl-muted);
}

@media (max-width: 600px) {
    .mbl-article .tariff-anchors {
        padding: 24px 18px 20px;
    }
    .mbl-article .tariff-cards {
        grid-template-columns: 1fr;
    }
}