/**
 * 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;
}

/* 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;
}

.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);
}

/* 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;
}

/* 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;
    }
}