/*
Theme Name:  TRACE5 Blog (Divi Child)
Template:    Divi
Description: Blog von trace5.co im Design der Hauptseite: Navigation, Footer, Schriften und Opt-in aus /css/t5-site.css.
Version:     1.0
*/

/* ==========================================================
   Grundwerte wie auf trace5.co
   ========================================================== */
:root {
    --ink:        #111111;
    --paper:      #FFFFFF;
    --paper-soft: #F7F7F5;
    --signal:     #E8381A;
    --slate:      #2D3748;
    --gray-mid:   #8C8C8C;
    --gray-light: #D2D2CE;
    --white:      #FFFFFF;

    --font-display: 'Barlow Condensed', sans-serif;
    --font-serif:   'IBM Plex Serif', serif;
    --font-mono:    'IBM Plex Mono', monospace;

    --max-w:  1800px; /* breit wie im Vorbild: Inhaltsspalte füllt die Seite, Seitenleiste rechts daneben */
    --gutter: clamp(16px, 2vw, 40px); /* schmale Außenränder wie im Vorbild */
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body.t5-blog {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}
body.t5-blog #page-container { padding-top: 0 !important; overflow: visible; }
body.t5-blog #et-main-area { background: var(--paper); }
.t5-blog a { color: inherit; text-decoration: none; }
.t5-blog h1, .t5-blog h2, .t5-blog h3, .t5-blog h4, .t5-blog h5, .t5-blog h6 { color: inherit; padding-bottom: 0; }
.t5-blog p { padding-bottom: 0; }

/* ==========================================================
   Navigation (wie auf trace5.co)
   ========================================================== */
.t5-blog .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(17,17,17,0.97);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-bar.t5-blog .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar.t5-blog .nav { top: 46px; } }
.t5-blog .nav ul { list-style: none; margin: 0; padding: 0; }
/* Divi setzt Listen auf line-height 18px – auf trace5.co erben die Menüeinträge 18px × 1.7 */
.t5-blog .nav__links li, .t5-blog .nav__links a { line-height: 30.6px; }
@media (max-width: 1180px) { .t5-blog .nav__links a { line-height: 25.5px; } }
.t5-blog .footer { line-height: 1.7; }
.nav__inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
    height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo { display: inline-flex; align-items: center; position: relative; flex-shrink: 0; }
.nav__logo img { height: 60px; width: auto; display: block; }
.nav__logo-light { position: absolute; inset: 0; opacity: 0; }
.t5-blog .nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a {
    font-family: var(--font-mono); font-size: 18px; font-weight: 500; letter-spacing: 0.04em;
    color: var(--white); transition: color 0.2s; white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--signal); }
.nav__cta {
    display: inline-block;
    font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--signal); color: var(--white) !important; padding: 9px 20px; transition: opacity 0.2s; white-space: nowrap;
}
.nav__cta:hover { opacity: 0.82; }
.nav__dd { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__dd-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--white);
}
.nav__dd-btn::before {
    content: ''; width: 7px; height: 7px; margin-top: -4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 0.25s;
}
.nav__dd:hover .nav__dd-btn::before, .nav__dd.is-open .nav__dd-btn::before { transform: rotate(-135deg); margin-top: 4px; }
.nav__dd-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.t5-blog .nav__dd-menu {
    position: absolute; top: 100%; left: -20px; min-width: 320px; padding: 22px 0 0;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.nav__dd-menu::before {
    content: ''; position: absolute; inset: 22px 0 0;
    background: rgba(17,17,17,0.97); border-top: 2px solid var(--signal);
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.nav__dd:hover .nav__dd-menu, .nav__dd:focus-within .nav__dd-menu, .nav__dd.is-open .nav__dd-menu {
    opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s;
}
.nav__dd-menu li { position: relative; }
.nav__dd-menu li:first-child { padding-top: 8px; }
.nav__dd-menu li:last-child { padding-bottom: 8px; }
.nav__links .nav__dd-menu a { display: block; padding: 10px 22px; font-size: 16px; white-space: nowrap; }
@media (max-width: 1180px) {
    .nav__inner { height: 72px; gap: 14px; }
    .nav__logo img { height: 46px; }
    .t5-blog .nav__links { gap: 15px; }
    .nav__links a { font-size: 15px; }
    .nav__cta { font-size: 13px; padding: 8px 13px; }
}
@media (max-width: 900px) {
    .nav__logo img { height: 44px; }
    .t5-blog .nav__links { display: none; }
    /* Logo darf schrumpfen, der Menü-Knopf bleibt vollständig in der Leiste */
    .t5-blog .nav__logo { flex-shrink: 1; min-width: 0; max-width: calc(100% - 52px); }
    .t5-blog .nav__logo img { max-width: 100%; height: auto; max-height: 40px; }
}
/* Cookie-Knopf rechts, damit er das Autorenfoto links in der Byline nicht verdeckt */
.t5-blog #cookie-settings-btn { left: auto !important; right: 16px !important; }
.t5-blog .t5-mnav ul { list-style: none; }

/* ==========================================================
   Footer (wie auf trace5.co)
   ========================================================== */
.footer { background: var(--ink); border-top: 1px solid #1a1a1a; padding: 48px var(--gutter); color: var(--white); }
.footer__inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; }
.footer__logo { display: block; margin-bottom: 12px; }
.footer__logo img { height: 60px; width: auto; display: block; }
.footer__tagline { font-size: 18px; color: var(--white); line-height: 1.65; margin-bottom: 16px; }
.footer__copy { font-family: var(--font-mono); font-size: 16px; color: var(--white); letter-spacing: 0.04em; }
.footer__col-title { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.t5-blog .footer__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__nav-list a { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em; color: var(--white); }
@media (max-width: 720px) { .footer__inner { grid-template-columns: 1fr; gap: 36px; } }

/* ==========================================================
   Kopfbereich (dunkel, wie die Podcast-Mitschriften)
   ========================================================== */
.section-eyebrow {
    font-family: var(--font-mono); font-size: 16px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: #C9CCD3;
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.section-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--signal); }
.b-head { background: var(--ink); color: var(--white); margin-top: 80px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.b-head__inner { max-width: var(--max-w); margin: 0 auto; padding: clamp(40px, 6vh, 72px) var(--gutter) clamp(36px, 5vh, 60px); }
.b-head__back {
    display: inline-block; margin-bottom: 22px;
    font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #C9CCD3 !important;
}
.b-head__back:hover { color: var(--white) !important; }
.t5-blog .b-head h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(40px, 5.4vw, 80px); line-height: 0.96;
    text-transform: uppercase; letter-spacing: -0.02em; max-width: 22ch; color: var(--white);
}
.t5-blog .b-head h1 em { font-style: normal; color: var(--signal); }
.b-head__lead { margin-top: 22px; max-width: 62ch; color: #C9C9C4; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
@media (max-width: 1180px) { .b-head { margin-top: 72px; } }
@media (max-width: 600px) {
    .section-eyebrow { font-size: 13px; gap: 8px; }
    .section-eyebrow::after { display: none; }
}

/* ==========================================================
   Blog-Übersicht
   ========================================================== */
.b-list { max-width: var(--max-w); margin: 0 auto; padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(72px, 10vh, 130px); }
.b-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 3vw, 48px); }
.b-card { display: flex; flex-direction: column; }
.b-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-soft); margin-bottom: 22px; }
.b-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
.b-card:hover .b-card__img img { transform: scale(1.03); }
.b-meta { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-mid); }
.b-meta a { color: var(--signal); }
/* Kartentitel im selben Stil wie die Überschrift im Artikel-Hero: Inter Tight Black, Schlüsselteil rot */
.t5-blog .b-card__title {
    font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 900; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.05;
    text-transform: none; letter-spacing: -0.02em; margin: 10px 0 12px; color: var(--ink);
}
.b-card__title .b-ahead__red { color: var(--signal); }
.b-card__title a:hover { color: var(--slate); }
.b-card__text { color: var(--slate); font-size: 17px; line-height: 1.6; margin-bottom: 18px; }
.b-card__more {
    margin-top: auto; align-self: flex-start;
    font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink); border-bottom: 2px solid var(--signal); padding-bottom: 2px;
}
.b-card__more:hover { color: var(--signal); }
.b-empty { max-width: 640px; font-size: 20px; color: var(--slate); }
.b-pager { margin-top: clamp(48px, 7vh, 80px); display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 15px; }
.b-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--gray-light); color: var(--slate); }
.b-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.b-pager a.page-numbers:hover { border-color: var(--ink); color: var(--ink); }

/* ==========================================================
   Artikel
   ========================================================== */
.b-cover { max-width: 1100px; margin: clamp(40px, 6vh, 72px) auto 0; padding: 0 var(--gutter); }
.b-cover img { width: 100%; height: auto; display: block; }
.b-article { max-width: 780px; margin: 0 auto; padding: clamp(48px, 8vh, 88px) var(--gutter) clamp(64px, 9vh, 112px); }
.b-article--builder { max-width: none; padding: 0; }
.b-body { color: var(--ink); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.75; }
.b-body > * + * { margin-top: 1.1em; }
.b-body p { color: #222; text-wrap: pretty; }
.t5-blog .b-body h2 {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12;
    text-transform: none; letter-spacing: -0.01em; margin-top: 1.6em; color: var(--ink);
}
.t5-blog .b-body h2::after {
    content: ''; display: block; width: 42px; height: 3px; margin-top: 12px; background: var(--signal);
}
.t5-blog .b-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.3; margin-top: 1.6em; color: var(--ink); }
.t5-blog .b-body h4 { font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-top: 1.6em; }
.b-body h2 + *, .b-body h3 + *, .b-body h4 + * { margin-top: 0.6em; }
.b-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.b-body a:hover { color: var(--signal); }
.b-body strong { font-weight: 600; }
.t5-blog .b-body ul, .t5-blog .b-body ol { padding: 0 0 0 1.3em; color: #222; line-height: inherit; }
.t5-blog .b-body ul { list-style: disc outside; }
.t5-blog .b-body ol { list-style: decimal outside; }
.t5-blog .b-body li { padding-left: 0.2em; }
.b-body li + li { margin-top: 0.4em; }
.b-body ul li::marker { color: var(--signal); }
.b-body ol li::marker { font-family: var(--font-mono); font-size: 0.85em; color: var(--signal); }
.t5-blog .b-body blockquote {
    margin-left: 0; margin-right: 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--signal);
    font-size: 1.12em; font-style: italic; font-weight: 300; color: var(--ink);
}
.b-body blockquote cite { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 14px; font-style: normal; letter-spacing: 0.04em; color: var(--gray-mid); }
.b-body code { font-family: var(--font-mono); font-size: 0.86em; background: var(--paper-soft); border: 1px solid #E6E6E2; padding: 1px 6px; }
.t5-blog .b-body pre {
    background: var(--ink); color: #E4E4E0; padding: 22px 24px; overflow-x: auto;
    font-family: var(--font-mono); font-size: 15px; line-height: 1.6; border-left: 3px solid var(--signal);
}
.b-body pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; }
.b-body img { max-width: 100%; height: auto; }
.b-body figure { margin-left: 0; margin-right: 0; }
.b-body figcaption, .b-body .wp-element-caption { margin-top: 10px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.5; color: var(--gray-mid); }
.b-body hr { border: 0; border-top: 1px solid var(--gray-light); margin: 2.4em 0; }
.b-body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.b-body th, .b-body td { border-bottom: 1px solid var(--gray-light); padding: 12px 14px; text-align: left; vertical-align: top; }
.b-body th { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
/* Tabelle scrollt in sich, wenn die Spalten nicht in die Satzbreite passen */
.b-tablewrap { max-width: 100%; margin: 1.6em 0; overflow-x: auto; background: var(--paper-soft); border-top: 3px solid var(--ink); -webkit-overflow-scrolling: touch; }
.b-tablewrap table { margin: 0; }
.t5-blog .b-tablewrap th, .t5-blog .b-tablewrap td { font-size: 16px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.b-body .wp-block-button__link { border-radius: 0; background: var(--signal); color: var(--white); text-decoration: none; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 26px; }

.b-foot { margin-top: clamp(48px, 7vh, 80px); padding-top: 24px; border-top: 1px solid var(--gray-light); display: flex; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.b-foot a { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.b-foot a:hover { color: var(--signal); }

/* Kommentare (nur sichtbar, wenn sie für einen Artikel offen sind) */
.b-comments { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 9vh, 112px); }
.b-comments #comment-wrap { padding-top: 0; }
.t5-blog .b-comments h1, .t5-blog .b-comments h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 32px; line-height: 1.1; margin-bottom: 8px; }
.b-comments .comment-notes, .b-comments .logged-in-as { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--gray-mid); margin-bottom: 16px; }
.t5-blog .b-comments input[type=text], .t5-blog .b-comments input[type=email], .t5-blog .b-comments input[type=url], .t5-blog .b-comments textarea {
    width: 100% !important; border: 2px solid var(--ink) !important; border-radius: 0 !important; background: var(--paper) !important;
    padding: 12px 14px !important; font-family: var(--font-serif) !important; font-size: 16px !important; color: var(--ink) !important;
}
.t5-blog .b-comments input:focus, .t5-blog .b-comments textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--signal); }
.t5-blog .b-comments #commentform p { margin-bottom: 12px; padding: 0; }
.t5-blog .b-comments .comment-form-cookies-consent { font-size: 14px; color: var(--slate); }
.t5-blog .b-comments .submit, .t5-blog .b-comments .et_pb_button {
    float: none !important; background: var(--signal) !important; color: var(--white) !important; border: 2px solid var(--signal) !important; border-radius: 0 !important;
    padding: 14px 26px !important; font-family: var(--font-mono) !important; font-size: 14px !important; font-weight: 500 !important;
    letter-spacing: 0.06em !important; text-transform: uppercase !important; cursor: pointer;
}
.t5-blog .b-comments .submit:hover, .t5-blog .b-comments .et_pb_button:hover { background: var(--ink) !important; border-color: var(--ink) !important; padding: 14px 26px !important; }
.t5-blog .b-comments .et_pb_button::after { display: none !important; }
.t5-blog .b-comments .commentlist { list-style: none; padding: 0; }
.t5-blog .b-comments .comment-body { padding: 18px 0; border-bottom: 1px solid var(--gray-light); }

/* ==========================================================
   Cookie-Banner (Klaro) – wie auf trace5.co
   ========================================================== */
.klaro .cookie-notice { background: #F4F2EE !important; color: #111 !important; border-top: 1px solid #D8D5D0 !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important; font-family: 'IBM Plex Serif', serif !important; }
.klaro .cookie-notice .cn-body { padding: 18px 24px !important; max-width: 1280px !important; margin: 0 auto !important; display: flex !important; align-items: center !important; gap: 20px !important; flex-wrap: wrap !important; }
.klaro .cookie-notice .cn-body p { font-size: 14px !important; color: #2D3748 !important; margin: 0 !important; flex: 1 !important; min-width: 200px !important; line-height: 1.5 !important; }
.klaro .cookie-notice .cn-body p a { color: #E8381A !important; font-weight: 600 !important; text-decoration: underline !important; }
.klaro .cookie-notice .cn-buttons { display: flex !important; gap: 8px !important; flex-shrink: 0 !important; }
.klaro .cookie-notice .cm-btn { border-radius: 0 !important; padding: 10px 20px !important; font-size: 13px !important; font-weight: 500 !important; font-family: 'IBM Plex Mono', monospace !important; cursor: pointer !important; transition: all 0.15s !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.klaro .cookie-notice .cm-btn.cm-btn-success { background: #E8381A !important; color: white !important; border: 1px solid #E8381A !important; }
.klaro .cookie-notice .cm-btn.cm-btn-success:hover { opacity: 0.82 !important; }
.klaro .cookie-notice .cm-btn.cm-btn-info, .klaro .cookie-notice .cm-btn.cm-btn-danger { background: white !important; color: #111 !important; border: 1px solid #D8D5D0 !important; }
.klaro .cookie-notice .cm-btn.cm-btn-info:hover, .klaro .cookie-notice .cm-btn.cm-btn-danger:hover { background: #F4F2EE !important; }
.klaro .cookie-modal { font-family: 'IBM Plex Serif', serif !important; }
.klaro .cookie-modal .cm-modal { border-radius: 0 !important; box-shadow: 0 24px 48px rgba(0,0,0,0.12) !important; background: white !important; }
.klaro .cookie-modal .cm-header { background: #111 !important; border-radius: 0 !important; border-bottom: 3px solid #E8381A !important; }
.klaro .cookie-modal .cm-header h1 { color: white !important; font-family: 'Barlow Condensed', sans-serif !important; font-size: 20px !important; text-transform: uppercase !important; }
.klaro .cookie-modal .cm-header h1 .title { color: white !important; }
.klaro .cookie-modal .cm-body { color: #2D3748 !important; }
.klaro .cookie-modal .cm-btn.cm-btn-success { background: #E8381A !important; color: white !important; border-radius: 0 !important; border: 1px solid #E8381A !important; }
.klaro .cookie-modal .cm-btn.cm-btn-info, .klaro .cookie-modal .cm-btn.cm-btn-danger { background: white !important; color: #111 !important; border: 1px solid #D8D5D0 !important; border-radius: 0 !important; }
.klaro .cookie-modal .cm-list-label { font-weight: 600 !important; color: #111 !important; }
.klaro .cookie-modal .cm-list-description { color: #8C8C8C !important; font-size: 13px !important; }
.klaro .cookie-modal .slider { border-radius: 20px !important; }
.klaro .cookie-modal input:checked + .slider { background: #E8381A !important; }
.klaro .cookie-modal .cm-close { color: #8C8C8C !important; }

/* Divi setzt Formularfelder zurück – Opt-in-Feld wie auf trace5.co */
.t5-blog .t5-optin__input { border: 2px solid #111; border-radius: 0; padding: 0 16px; font-family: var(--font-mono); font-size: 16px; color: #111; background: #fff; }
.t5-blog .t5-optin__row .t5-optin__input { border-right: 0; }
.t5-blog .t5-band__card .t5-optin__input { border-right: 2px solid #111; }
@media (max-width: 520px) { .t5-blog .t5-optin__row .t5-optin__input { border-right: 2px solid #111; } }

/* Divi-Builder-Artikel: Textmodule in Lesebreite und Lesesatz wie normale Artikel,
   breite Module (Bilder, Abschnitte mit Hintergrund) dürfen weiter die volle Breite nutzen */
.b-article--builder { padding: clamp(40px, 7vh, 80px) 0 clamp(64px, 9vh, 112px); }
.b-article--builder .et_pb_section { padding: 0; background: transparent; }
.b-article--builder .et_pb_row { padding: 0; }
.t5-blog .b-article--builder .et_pb_text {
    max-width: 780px; margin: 0 auto clamp(40px, 6vh, 64px); padding: 0 var(--gutter);
    color: var(--ink); font-family: var(--font-serif); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.75;
}
.b-article--builder .et_pb_text:last-child { margin-bottom: 0; }
.b-article--builder .et_pb_text_inner > * + * { margin-top: 1.1em; }
.t5-blog .b-article--builder .et_pb_text p { padding-bottom: 0; font-size: inherit; line-height: inherit; }
.t5-blog .b-article--builder .et_pb_text h2 { margin-top: 0; padding-top: 0; }
.t5-blog .b-article--builder .et_pb_text table { margin: 0; border: 0; }
.t5-blog .b-article--builder .et_pb_text table th, .t5-blog .b-article--builder .et_pb_text table td { border: 0 !important; border-bottom: 1px solid var(--gray-light) !important; padding: 12px 14px !important; font-size: 16px; line-height: 1.45; }
.t5-blog .b-article--builder .et_pb_text thead th { border-bottom: 2px solid var(--ink) !important; font-size: 13px; }
.t5-blog .b-article--builder .et_pb_text li { padding-bottom: 0; }

/* ==========================================================
   Hero der Blog-Startseite – gleiche Maße wie /podcast/ (.pod-hero):
   Bild 1916 × 821 über die volle Breite, weiße Box im Bild (40 % breit).
   Sie sitzt unten rechts über Arm und Schreibtisch, damit das Gesicht frei bleibt.
   Unter 1240 px rutscht die Box wie beim Podcast unter das Bild.
   ========================================================== */
.b-hero { position: relative; margin-top: 80px; background: #F4EEE2; }
.b-hero__img { display: block; width: 100%; aspect-ratio: 1916 / 821; overflow: hidden; }
.b-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-hero__box {
    position: absolute; bottom: 3%; left: 54%; /* unten rechts über Arm und Schreibtisch, Gesicht bleibt frei */
    width: 40%;
    background: var(--white); border-top: 3px solid var(--signal);
    box-shadow: 0 24px 60px rgba(17,17,17,0.18);
    padding: 1.7vw 1.9vw;
}
.b-hero__tag {
    display: inline-block; margin-bottom: 0.7vw;
    font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    background: var(--signal); color: var(--white); padding: 3px 10px;
}
.t5-blog .b-hero__box h1 {
    font-family: var(--font-display); font-weight: 700; font-size: 2.7vw;
    line-height: 0.94; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.7vw;
}
.t5-blog .b-hero__box h1 em { font-style: normal; color: var(--signal); }
.b-hero__lead { color: var(--slate); font-size: max(15px, 1.1vw); line-height: 1.5; }
/* Mit dem Eintragefeld ist die Box höher: zwischen 1240 und 1400 px würde sie sonst das Gesicht verdecken, deshalb dort ohne Einleitungssatz */
@media (min-width: 1241px) and (max-width: 1400px) { .b-hero__lead { display: none; } }
@media (max-width: 1240px) {
    .b-hero { padding-bottom: 1px; }
    .b-hero__box { position: relative; top: auto; left: auto; width: auto; max-width: 820px; margin: -90px var(--gutter) 48px auto; padding: 28px; }
    .b-hero__tag { margin-bottom: 12px; }
    .t5-blog .b-hero__box h1 { font-size: 44px; margin-bottom: 12px; }
    .b-hero__lead { font-size: 17px; }
}
@media (max-width: 1180px) { .b-hero { margin-top: 72px; } }
@media (max-width: 900px) { .b-hero__box { margin: -40px var(--gutter) 40px; } }
@media (max-width: 760px) {
    .b-hero__img { aspect-ratio: 4 / 3; }
    .b-hero__img img { object-position: 64% 30%; }
}

/* ==========================================================
   Artikelkopf mit Beitragsbild: Bild als Hero über die volle Breite,
   Titel und Datum stehen in der freien hellen Fläche links im Bild
   (die Beitragsbilder lassen dafür links oben Platz).
   Unter 1100 px stehen sie unter dem Bild in der Textspalte.
   ========================================================== */
.b-ahead { position: relative; margin-top: 80px; }
.b-ahead__img img { display: block; width: 100%; height: auto; }
.b-ahead__text {
    position: absolute; top: 0; left: 0; width: var(--b-ahead-breite, 46%); /* freie Fläche im Bild, je Beitrag über das Feld t5_hero_breite anpassbar */
    /* linke Kante wie das Logo im Menü (Inhalt höchstens 1480 px breit) */
    padding: clamp(28px, 3.4vw, 64px) 0 0 max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
}
.t5-blog .b-ahead h1 {
    /* Schrift und Farben wie auf den Podcast-Covern: sehr fette, eng gesetzte Grotesk, Schlüsselteil rot */
    font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 900; font-size: clamp(40px, 4.2vw, 84px);
    line-height: 1.02; letter-spacing: -0.022em; word-spacing: 0.04em; text-transform: none; color: var(--ink); margin-top: 0;
}
.b-ahead__red { color: var(--signal); }
.t5-blog .b-ahead--lang h1 { font-size: clamp(34px, 3.3vw, 66px); } /* sehr lange Titel (über 85 Zeichen) etwas kleiner */
/* dunkles Beitragsbild: Titel hell, roter Teil bleibt rot (nur solange der Titel im Bild steht) */
@media (min-width: 1101px) { .t5-blog .b-ahead--dark h1 { color: #FBF2E3; } } /* Creme wie die Schrift auf Cover 13 */
/* Datum unter dem Titel als Pille im Button-Stil */
.b-ahead__date {
    display: inline-block; margin-top: clamp(16px, 1.4vw, 24px); padding: 9px 16px;
    background: rgba(255, 255, 255, 0.85); border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: var(--font-mono); font-size: 12px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.b-ahead__lead { margin-top: 1.2vw; color: var(--slate); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; }
.b-ahead + .b-article { padding-top: clamp(40px, 6vh, 72px); }
@media (max-width: 1180px) { .b-ahead { margin-top: 72px; } }
@media (max-width: 1100px) {
    .b-ahead__text { position: static; width: auto; max-width: 780px; margin: 0 auto; padding: 36px var(--gutter) 0; }
    .b-ahead__date { background: var(--paper-soft); }
    .b-ahead__lead { margin-top: 16px; }
}

.b-meta__p { white-space: nowrap; }

/* ==========================================================
   Blog-Layout mit Seitenleiste (Artikel und Übersicht)
   Links Inhalt (flexibel), rechts Seitenleiste (ca. 25 %, höchstens 460 px), außen an den
   Kanten von Logo und Menü-Knopf. Unter 1100 px steht die Leiste unter dem Inhalt.
   ========================================================== */
.b-wrap {
    max-width: var(--max-w); margin: 0 auto;
    padding: clamp(36px, 5vh, 64px) var(--gutter) clamp(64px, 9vh, 112px);
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 460px);
    column-gap: clamp(32px, 3.4vw, 64px); row-gap: 64px; align-items: start;
}
.b-main { min-width: 0; }
.t5-blog .b-main .b-article, .t5-blog .b-main .b-article--builder { max-width: none; margin: 0; padding: 0; }
.t5-blog .b-main .b-article--builder .et_pb_text { max-width: none; margin: 0 0 clamp(36px, 5vh, 56px); padding: 0; }
.b-main .b-article--builder .et_pb_text:last-child { margin-bottom: 0; }
.b-body h2, .b-body h3 { scroll-margin-top: 156px; }
@media (max-width: 1100px) {
    .b-wrap { grid-template-columns: minmax(0, 1fr); max-width: calc(800px + 2 * var(--gutter)); }
    .b-ahead__text { max-width: calc(800px + 2 * var(--gutter)); }
}

/* Box unter dem Hero: großes Autorenfoto, Kategorie/Datum/Autor, Brotkrumen, Teilen */
.b-bar {
    display: flex; align-items: center; gap: 24px clamp(20px, 2.4vw, 36px);
    padding: clamp(20px, 2.6vw, 40px) clamp(20px, 2vw, 32px); margin-bottom: clamp(28px, 4vh, 40px);
    border: 1px solid var(--gray-light); border-radius: 10px;
}
.b-bar__avatar { flex: none; width: 146px; height: 146px; border-radius: 50%; object-fit: cover; }
.b-bar__info { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.b-bar__by { font-size: 17px; line-height: 1.45; color: var(--slate); }
.b-bar__by a { color: var(--ink); font-weight: 600; }
.b-bar__by, .b-crumbs, .b-share { min-width: 0; max-width: 100%; }
.b-crumbs { font-size: 16px; line-height: 1.4; color: var(--slate); display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 6px; }
.b-crumbs > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* langer Titel wird wie im Vorbild mit … gekürzt */
@media (max-width: 600px) {
    .b-bar { flex-direction: column; align-items: stretch; width: 100%; }
    .b-bar__avatar { width: 110px; height: 110px; }
    .b-crumbs { flex-wrap: wrap; white-space: normal; }
    .b-crumbs > span:last-child { white-space: normal; overflow: visible; text-overflow: unset; }
}
.b-crumbs a { color: var(--signal); }
.b-crumbs a:hover { color: var(--ink); }
.b-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.b-share a, .b-share button {
    height: 34px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 999px; background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: box-shadow 0.2s, transform 0.2s;
}
.b-share a:hover, .b-share button:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); transform: translateY(-1px); }
.b-share svg { width: 18px; height: 18px; }
.b-share--li { color: #0A66C2 !important; }
.b-share--x { color: #000000 !important; }
.b-share--fb { color: #1877F2 !important; }
.b-share--mail { color: var(--signal) !important; }
.b-share__copy { color: var(--slate); }
.b-share__copy.is-done { color: #1F8A4C; }

/* Inhaltsverzeichnis */
/* Inhaltsverzeichnis über dem Text, über die ganze Inhaltsspalte. Es floatet nicht in den Einstieg. */
.b-toc { position: relative; z-index: 2; /* über den Divi-Blöcken, die (position: relative) sonst die Klicks abfangen */ float: none; width: auto; max-width: none; margin: 0 0 clamp(32px, 4vh, 48px); background: var(--paper-soft); border-left: 3px solid var(--signal); padding: 20px 26px; }
.t5-blog .b-main .b-article--builder .et_pb_column { float: none; }
.b-author, .b-related, .b-comments { clear: both; }
.b-toc a.is-current { color: var(--signal); }

/* Lesefortschritt direkt unter der Navigation.
   Die Spur ist 6 px, der rote Stand wächst darüber.
   Der Schrittname ist 40 px hoch; derselbe Wert steht im Scroll-Offset in functions.php. */
.b-progress {
    --b-progress: 0;
    position: fixed; left: 0; right: 0; z-index: 180;
    pointer-events: none;
}
.b-progress__bar {
    position: relative; display: block; height: 6px; overflow: hidden; background: #2a2a2a;
}
.b-progress__bar::before {
    content: ''; position: absolute; inset: 0; background: var(--signal);
    transform: scaleX(var(--b-progress)); transform-origin: left center;
}
.b-progress__now {
    box-sizing: border-box; display: flex; align-items: center; gap: 12px;
    height: 0; margin: 0; overflow: hidden; background: var(--ink);
    padding: 0 max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
}
.b-progress.is-on .b-progress__now { height: 40px; }
.b-progress__nr {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--signal); flex: none;
}
.b-progress__name {
    font-family: var(--font-serif); font-size: 15px; line-height: 1.3; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b-toc summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.b-toc summary::-webkit-details-marker { display: none; }
.b-toc summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--signal); }
.b-toc[open] summary::after { content: '−'; }
.t5-blog .b-toc ol { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: toc; }
.b-toc li { padding: 0; }
.b-toc__l2 { counter-increment: toc; margin-top: 10px; }
.b-toc__l2 a { display: grid; grid-template-columns: 34px 1fr; font-size: 17px; line-height: 1.4; color: var(--ink); }
.b-toc__l2 a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--signal); padding-top: 3px; }
.b-toc__l3 { margin: 6px 0 0 34px; }
.b-toc__l3 a { font-size: 15px; line-height: 1.4; color: var(--slate); }
.b-toc a:hover { color: var(--signal); }

/* Autorenkasten am Artikelende */
.b-author {
    display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 28px; align-items: start;
    margin-top: clamp(56px, 8vh, 88px); padding: 28px; background: var(--paper-soft); border-top: 3px solid var(--ink);
}
.b-author img { width: 140px; height: 140px; object-fit: cover; display: block; }
.b-author__eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }
.b-author .b-author__name { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; text-transform: uppercase; margin: 6px 0 12px; }
.b-author p { color: var(--slate); font-size: 17px; line-height: 1.6; }
.b-author p:not([class]) + p:not([class]) { margin-top: 12px; }
.b-author__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
.t5-blog .b-author__links a { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em; color: var(--ink); border-bottom: 2px solid var(--signal); }
.b-author__links a:hover { color: var(--signal); }
@media (max-width: 600px) { .b-author { grid-template-columns: 1fr; } .b-author img { width: 110px; height: 110px; } }

/* Weiterlesen */
.b-related { margin-top: clamp(56px, 8vh, 88px); }
.b-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; }
.b-related__item { display: flex; flex-direction: column; gap: 8px; }
.b-related__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-bottom: 6px; }
.b-related__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.b-related__item:hover .b-related__title { color: var(--signal); }

/* Seitenleiste */
.b-side { display: flex; flex-direction: column; gap: 36px; min-width: 0; align-self: stretch; }
/* Newsletter-Box läuft beim Scrollen mit, damit neben langen Artikeln keine leere Spalte bleibt */
.b-side__news { position: sticky; top: 112px; }
@media (max-width: 1100px) { .b-side__news { position: static; } }
.b-side__title {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.b-side__title::after { content: ''; flex: 1; height: 1px; background: var(--gray-light); }
.b-search { display: flex; }
.t5-blog .b-search input {
    flex: 1; min-width: 0; height: 52px; padding: 0 14px; border: 2px solid var(--ink); border-right: 0; border-radius: 0;
    background: var(--paper); font-family: var(--font-mono); font-size: 15px; color: var(--ink);
}
.b-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--signal); }
.b-search button { width: 52px; height: 52px; border: 2px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; display: grid; place-items: center; padding: 0; }
.b-search button:hover { background: var(--signal); border-color: var(--signal); }
.b-search svg { width: 20px; height: 20px; }

.b-ads__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-mid); margin-bottom: 6px; }
.b-ad + .b-ad { margin-top: 20px; }
.b-ad img { display: block; width: 100%; height: auto; }
.b-ad figure { margin: 0; }
.b-ad__title { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }

.t5-blog .b-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.b-recent li { padding: 0; }
/* Bild links etwa halb so breit wie die Seitenleiste, rechts Datum und Titel (Stil wie die Kartentitel der Übersicht) */
.b-recent a { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 16px; align-items: start; }
.b-recent img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.b-recent a > span { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 900; font-size: 17px; line-height: 1.12; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.b-recent .b-ahead__red { color: var(--signal); }
.b-recent .b-meta { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; line-height: 1.4; letter-spacing: 0.06em; margin-bottom: 6px; }
.b-recent a:hover > span { color: var(--slate); }

.b-side__news { background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--signal); padding: 24px; }
.b-side__news-title { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 0.98; text-transform: uppercase; margin: 14px 0 10px; color: var(--ink); }
.b-side__news-title em { font-style: normal; color: var(--signal); }
.b-side__news-text { font-size: 15.5px; line-height: 1.55; color: var(--slate); margin-bottom: 16px; }
.b-side__news .t5-optin__row { flex-direction: column; gap: 8px; }
.t5-blog .b-side__news .t5-optin__row .t5-optin__input { width: 100%; flex: none; border-right: 2px solid #111; height: 52px; }
.b-side__news .t5-optin__btn { width: 100%; height: 52px; }

.b-side__about { background: var(--signal); color: var(--white); padding: 22px 18px 26px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.t5-blog .b-side__about .b-side__about-title { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--white); margin: 6px 0 20px; }
.b-side__about img { display: block; width: 100%; height: auto; margin-bottom: 14px; }
.t5-blog .b-side__about p { font-size: 15.5px; line-height: 1.5; color: var(--white); }
.t5-blog .b-side__about p + p { margin-top: 10px; }
.t5-blog .b-side__about a { color: var(--white); text-decoration: underline; }
.t5-blog .b-side__more { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); border-bottom: 2px solid var(--signal); }
.b-side__more:hover { color: var(--signal); }

/* Blog-Übersicht mit Seitenleiste: Karten zweispaltig */
.b-wrap--list .b-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.b-wrap--list { padding-top: clamp(48px, 7vh, 88px); grid-template-columns: minmax(0, 1fr); } /* Übersicht ohne Seitenleiste: Karten über die volle Breite */