/* Folgenplayer auf den Podcast-Einzelseiten (single-podcast.php).
   Medienkarte rechts neben dem Titel: YouTube-Video oben (falls vorhanden),
   darunter die Audio-Steuerung. Natives <audio preload="none">, eigene
   Oberflaeche darueber. Waveform stilisiert (aus der Folgennummer), kein Pegel. */

/* Kopfbereich: Text links, Karte rechts, zueinander mittig.
   .titlewe ist in mdg.css 50 % breit, hier auf volle Breite mit zwei Spalten. */
.singlepodwr .titlewe {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.singlepodwr .titlewe .b2p-player {
    max-width: none;
    margin: 0;
}
@media only screen and (max-width: 1100px) {
    .singlepodwr .titlewe {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Karte und ihre Ueberschrift sind zusammen ein Rasterfeld. */
.singlepodwr .titlewe .b2p-medien { min-width: 0; }

/* "Ganze Folge": am Desktop die gelbe Zeile in der Karte (.b2p-player-oben),
   am Handy die schwarze Ueberschrift darueber - dort steht die Karte im
   selben Stapel wie die Kaesten, am Desktop neben dem Folgentitel. */
.b2p-ganze { display: none; }

@media only screen and (max-width: 1100px) {
    .b2p-ganze {
        display: block;
        font-family: var(--b2p-font-display);
        font-size: 26px;
        line-height: 1;
        margin: 0 0 10px;
        padding: 0;
    }

    .b2p-player-oben { display: none; }
}

/* Abo-Icons: dunkle Kreise (SVG unveraendert), Beschriftung darunter,
   beim Drueberfahren gelb wie die Kapitel-Pillen. Die Fuellfarben stehen als
   Attribute im SVG, CSS ueberschreibt sie. */
.b2p-hero-text .abbobuttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}
.b2p-hero-text .abbobuttons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--b2p-text);
}
.b2p-hero-text .abbobuttons .abbo-icon { display: block; line-height: 0; }
.b2p-hero-text .abbobuttons svg { width: 52px; height: 52px; display: block; }
.b2p-hero-text .abbobuttons svg circle,
.b2p-hero-text .abbobuttons svg path { transition: fill .12s; }
.b2p-hero-text .abbobuttons a:hover svg circle,
.b2p-hero-text .abbobuttons a:focus-visible svg circle { fill: var(--b2p-accent); }
.b2p-hero-text .abbobuttons a:hover svg path,
.b2p-hero-text .abbobuttons a:focus-visible svg path { fill: var(--b2p-dark); }
.b2p-hero-text .abbobuttons a:focus-visible { outline: none; }
.b2p-hero-text .abbobuttons .abbo-label {
    font-family: var(--b2p-font-display-regular);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7a7666;
    line-height: 1.2;
}

/* Unterstuetzen-Hinweis unter den Abo-Icons: Outline-Pille mit Herz plus
   ein Satz. Bewusst ohne Fuellung, damit es nicht wie Werbung wirkt. */
.b2p-support {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-family: var(--b2p-font-body);
    font-size: 14px;
    line-height: 1.4;
    color: #7a7666;
}
.b2p-hero-text .b2p-support-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 2px solid var(--b2p-dark);
    border-radius: 20px;
    padding: 5px 14px 6px 12px;
    color: var(--b2p-dark);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.b2p-hero-text .b2p-support-pill:hover,
.b2p-hero-text .b2p-support-pill:focus-visible {
    background: var(--b2p-dark);
    color: var(--b2p-accent);
    outline: none;
}
.b2p-support-heart { color: var(--b2p-red); font-size: 15px; line-height: 1; }
.b2p-hero-text .b2p-support-pill:hover .b2p-support-heart,
.b2p-hero-text .b2p-support-pill:focus-visible .b2p-support-heart { color: var(--b2p-accent); }
.b2p-support-text { flex: 1 1 220px; max-width: 34ch; }

.b2p-player {
    background: var(--b2p-dark);
    color: var(--b2p-cream-light);
    border-radius: 20px;
    padding: 16px;
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 16px;
    align-items: stretch;
    box-shadow: 3px 3px 9px 4px rgba(0, 0, 0, .08);
    max-width: 720px;
    margin: 0 0 24px;
    box-sizing: border-box;
}
.b2p-player *,
.b2p-player *::before,
.b2p-player *::after { box-sizing: border-box; }

.b2p-player audio { display: none; }

/* Mit Video: einspaltig, Video oben, Steuerung darunter. */
.b2p-player--video { grid-template-columns: 1fr; }

/* Beschriftung ueber dem Video. Gegenstueck zu "Oder anhoeren" darunter und
   zur Ueberschrift der Box "Long Story Short" weiter unten auf der Seite. */
.b2p-player-oben {
    font-family: var(--b2p-font-display-regular);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--b2p-accent);
    line-height: 1.3;
    margin-bottom: -6px;
}
.b2p-player-video {
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}
.b2p-player-video iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.b2p-player-cover {
    width: 112px;
    height: 112px;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    background: #3a3a37;
}

.b2p-player-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.b2p-player-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.b2p-player-eyebrow {
    font-family: var(--b2p-font-display-regular);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--b2p-accent);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.b2p-player-eyebrow span {
    color: var(--b2p-cream-light);
    opacity: .7;
}
.b2p-player-eyebrow span:empty { display: none; }

.b2p-player-play {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--b2p-accent);
    border: 0;
    padding: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--b2p-dark);
    transition: transform .12s;
}
.b2p-player-play:hover { transform: scale(1.05); }
.b2p-player-play svg { width: 22px; height: 22px; display: block; }
.b2p-player-play .b2p-ic-pause { display: none; }
.b2p-player-play[aria-pressed="true"] .b2p-ic-play { display: none; }
.b2p-player-play[aria-pressed="true"] .b2p-ic-pause { display: block; }

.b2p-player-play:focus-visible,
.b2p-player-ctl:focus-visible,
.b2p-player-wave:focus-visible {
    outline: 3px solid var(--b2p-accent);
    outline-offset: 2px;
}

.b2p-player-wave {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    position: relative;
    cursor: pointer;
    touch-action: none;
}
.b2p-player-wave canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.b2p-player-tip {
    position: absolute;
    top: -26px;
    transform: translateX(-50%);
    background: var(--b2p-accent);
    color: var(--b2p-dark);
    font-family: var(--b2p-font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px 7px;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.b2p-player-wave:hover .b2p-player-tip,
.b2p-player-wave.is-scrubbing .b2p-player-tip { opacity: 1; }

.b2p-player-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--b2p-font-body);
    font-size: 13px;
    line-height: 1.5;
}
.b2p-player-time {
    font-variant-numeric: tabular-nums;
    opacity: .85;
    white-space: nowrap;
}
.b2p-player-time b { font-weight: 700; }
.b2p-player-total:empty { display: none; }
.b2p-player-total::before { content: " / "; }
.b2p-player-spacer { flex: 1; }

.b2p-player-ctl {
    background: transparent;
    color: var(--b2p-cream-light);
    border: 1.5px solid rgba(249, 246, 234, .35);
    border-radius: 14px;
    padding: 3px 10px;
    margin: 0;
    font: 700 12px/1.4 var(--b2p-font-body);
    cursor: pointer;
    letter-spacing: .5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: none;
}
.b2p-player-ctl:hover {
    border-color: var(--b2p-accent);
    color: var(--b2p-accent);
    background: transparent;
}
.b2p-player-ctl svg { width: 14px; height: 14px; display: block; }
.b2p-player-speed {
    min-width: 52px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.b2p-player-speed.is-on {
    background: var(--b2p-accent);
    color: var(--b2p-dark);
    border-color: var(--b2p-accent);
}

/* Schmal: Cover links, Titelzeile und Waveform rechts, die Steuerzeile
   darunter ueber die volle Breite, damit sie einzeilig bleibt. */
@media (max-width: 560px) {
    .b2p-player {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto auto;
        padding: 14px;
        gap: 8px 12px;
        align-items: center;
    }
    .b2p-player-main { display: contents; }
    .b2p-player-cover { width: 72px; height: 72px; grid-column: 1; grid-row: 1 / 3; }
    .b2p-player-eyebrow { grid-column: 2; grid-row: 1; font-size: 14px; }
    .b2p-player-row { grid-column: 2; grid-row: 2; }
    .b2p-player-meta { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
    .b2p-player-play { width: 48px; height: 48px; }
    .b2p-player-wave { height: 48px; }

    /* Mit Video eine Zeile mehr: "Ganze Folge", Video, "Oder anhoeren",
       Waveform, Steuerzeile. */
    .b2p-player--video { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; }
    .b2p-player--video .b2p-player-oben { grid-column: 1; grid-row: 1; font-size: 14px; }
    .b2p-player--video .b2p-player-video { grid-column: 1; grid-row: 2; }
    .b2p-player--video .b2p-player-main .b2p-player-eyebrow { grid-column: 1; grid-row: 3; }
    .b2p-player--video .b2p-player-row { grid-column: 1; grid-row: 4; }
    .b2p-player--video .b2p-player-meta { grid-column: 1; grid-row: 5; }
}

@media (prefers-reduced-motion: reduce) {
    .b2p-player-play, .b2p-player-tip { transition: none; }
}

/* Kapitelmarken in der Folgenbeschreibung (b2p_link_chapters in functions.php).
   Zeit-Pille = Audio, Video-Pille = YouTube (nur bei Folgen mit Video), Titel
   fett daneben. Laufendes Kapitel bekommt eine gelbe Pille. */
.content a.b2p-chapter,
.content a.b2p-chapter-video {
    color: var(--b2p-accent);
    text-decoration: none;
    display: inline-block;
    background: var(--b2p-dark);
    font-family: var(--b2p-font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .5px;
    padding: 2px 10px 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    vertical-align: baseline;
    margin: 3px 4px 3px 0;
    transition: background .12s, color .12s;
}
.b2p-chapter-time { font-variant-numeric: tabular-nums; }
.b2p-chapter-time::before {
    content: "";
    display: inline-block;
    border-left: 7px solid currentColor;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
    margin-right: 6px;
    vertical-align: 0;
}
.content a.b2p-chapter-video svg {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 5px;
}
.b2p-chapter-title {
    font-weight: 700;
    margin-left: 4px;
}
.content a.b2p-chapter:hover,
.content a.b2p-chapter:focus-visible,
.content a.b2p-chapter-video:hover,
.content a.b2p-chapter-video:focus-visible,
.content a.b2p-chapter.is-active,
.content a.b2p-chapter-video.is-active {
    background: var(--b2p-accent);
    color: var(--b2p-dark);
}
.content a.b2p-chapter-video.is-active svg path,
.content a.b2p-chapter-video:hover svg path,
.content a.b2p-chapter-video:focus-visible svg path { fill: var(--b2p-accent); }
.content a.b2p-chapter:focus-visible,
.content a.b2p-chapter-video:focus-visible { outline: none; }

/* Einblicke-Box: Fotos als Kachelraster (Technik wie die Tourismus-Galerie).
   Ein Foto: gross, natuerliches Format. Mehrere: quadratische Kacheln,
   3 Spalten, auf dem Handy 2. Ab sieben Fotos deckt +N die sechste Kachel. */
.einblicke-wrap .b2p-fotos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.einblicke-wrap .b2p-fotos--einzel { grid-template-columns: 1fr; }
.einblicke-wrap .b2p-fotos + .einblickvideos:not(:empty) { margin-top: 10px; }
.b2p-foto {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: var(--b2p-cream-warm);
}
.b2p-foto a { display: block; line-height: 0; }
.b2p-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    transition: transform .25s ease;
}
/* Einzelfoto: Seitenverhaeltnis aus width/height-Attributen (revert holt den
   Browser-Standard zurueck), damit der Lazy-Load-Platzhalter nicht quadratisch ist. */
.b2p-fotos--einzel .b2p-foto img { aspect-ratio: revert; object-fit: contain; }
.b2p-foto a:hover img { transform: scale(1.04); }
.b2p-foto-mehr {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(42, 42, 40, .62);
    color: var(--b2p-accent);
    font-family: var(--b2p-font-display);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s;
}
.b2p-foto-mehr:hover,
.b2p-foto-mehr:focus-visible { background: rgba(42, 42, 40, .78); outline: none; }
@media (max-width: 560px) {
    .einblicke-wrap .b2p-fotos { grid-template-columns: repeat(2, 1fr); }
    .einblicke-wrap .b2p-fotos--einzel { grid-template-columns: 1fr; }
}

/* Long Story Short: eigene Box im Stil von "Einblicke", darin genau ein Video.
   Die Rahmen-, Ueberschrift- und 16:9-Regeln kommen von .einblicke-wrap bzw.
   .einblickvideo aus mdg.css, hier faellt nur der Abstand weg, den die Box mit
   mehreren Videos untereinander braucht. */
.b2p-lss .einblickvideo { margin-bottom: 0; }

/* ──────────────────────────────────────────────────────────────────────
   Abschnitte der Folgenseite (.b2p-ak, Markup aus b2p_abschnitt() in
   functions.php, Inhalte aus b2p_beschreibung_teilen()).

   Am Desktop sind es schlichte Abschnitte mit Ueberschrift - so wie der
   Fliesstext vorher, nur beschriftet. Erst bis 980px macht
   podcast-player.js aus der Ueberschrift einen Schalter und setzt
   .b2p-ak--bereit; NUR darauf greift das Zuklappen. Laeuft das Skript
   nicht, steht alles offen da. Der Text selbst steht in jedem Fall
   vollstaendig in der Seite, nichts wird beim Klick nachgeladen - sonst
   waere er fuer Suchmaschinen nicht vorhanden.
   ────────────────────────────────────────────────────────────────────── */

.b2p-ak {
    width: 100%;
    box-sizing: border-box;
}

.b2p-ak-titel {
    font-family: var(--b2p-font-display);
    font-size: 26px;
    line-height: 1.1;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 4px 10px;
    flex-wrap: wrap;
}

.b2p-ak-hinweis {
    font-family: var(--b2p-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.55;
}

/* podcast-player.js packt den Inhalt der Ueberschrift in einen <button>.
   Am Desktop ist er nur Traeger und soll aussehen wie die Ueberschrift
   vorher - ohne Rahmen, ohne Flaeche, ohne Zeigefinger. */
.b2p-ak-knopf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
}

.b2p-ak-pfeil { display: none; }

/* Reihenfolge am Desktop wie vor dem Umbau: Kaesten (order 3), dann der
   Text, dann das Transkript, dann "Weitere Folgen" (order 7). Am Handy
   faellt order weg, dort zaehlt die Reihenfolge im Markup. */
@media only screen and (min-width: 981px) {
    .b2p-ak { order: 5; }
    .b2p-ak--transkript { order: 6; }

    /* Ausnahme am Desktop: "Infos zu B2P" ist zugeklappt (DESKTOP_ZU in
       podcast-player.js). Ueberschrift bleibt wie die anderen, bekommt nur
       den Pfeil vom Handy und wird anklickbar. */
    .b2p-ak--bereit.b2p-ak--desktop-zu .b2p-ak-knopf {
        width: auto;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }

    .b2p-ak--bereit.b2p-ak--desktop-zu .b2p-ak-knopf:hover .b2p-ak-wort,
    .b2p-ak--bereit.b2p-ak--desktop-zu .b2p-ak-knopf:focus-visible .b2p-ak-wort {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .b2p-ak--bereit.b2p-ak--desktop-zu .b2p-ak-pfeil {
        display: block;
        flex: 0 0 auto;
        width: 11px;
        height: 11px;
        border-right: 3px solid var(--b2p-text);
        border-bottom: 3px solid var(--b2p-text);
        transform: translateY(-3px) rotate(45deg);
        transition: transform 0.2s ease;
    }

    .b2p-ak--bereit.b2p-ak--desktop-zu.is-open .b2p-ak-pfeil {
        transform: translateY(3px) rotate(-135deg);
    }

    .b2p-ak--bereit.b2p-ak--desktop-zu:not(.is-open) .b2p-ak-titel {
        margin-bottom: 0;
    }

    .b2p-ak--bereit.b2p-ak--desktop-zu:not(.is-open) .b2p-ak-inhalt {
        display: none;
    }
}

@media only screen and (max-width: 980px) {
    /* Die 80px Zeilenabstand der Seite sind fuer eine Reihe von Leisten zu
       viel. Enger stellen und den Kaesten den Platz fuer ihre ueberhaengende
       Ueberschrift wieder einzeln geben. */
    .singlepodwr { row-gap: 32px; }
    .singlepodwr .einblicke-wrap { margin-top: 38px; }

    /*
     * Keine Kaesten, sondern Zeilen mit Trennlinie darueber. Grund ist die
     * Linie links: in einem Rahmen mit Innenabstand kann die Ueberschrift
     * die Spaltenkante nicht erreichen, sie stuende immer rund 20px weiter
     * rechts als "Ganze Folge" und "Long Story Short" daneben. Ohne Rahmen
     * steht alles auf einer Linie.
     *
     * Kein overflow: hidden hier - das macht die Leiste zum Scroll-Container
     * und position: sticky am Zuklappen-Knopf wirkungslos.
     */
    .b2p-ak--bereit {
        background: none;
        border: 0;
        border-top: solid 3px var(--b2p-text);
        border-radius: 0;
    }

    .b2p-ak--bereit .b2p-ak-titel {
        margin: 0;
        display: block;
    }

    .b2p-ak-knopf {
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
        min-height: 60px;   /* bequeme Tippflaeche ueber die volle Breite */
        padding: 14px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .b2p-ak-wort { flex: 1 1 auto; }

    .b2p-ak-knopf .b2p-ak-hinweis {
        flex: 0 0 auto;
        align-self: center;
    }

    /* Pfeil aus zwei Rahmenkanten: zeigt zu, wenn er nach unten weist. */
    .b2p-ak-pfeil {
        display: block;
        flex: 0 0 auto;
        width: 12px;
        height: 12px;
        margin-left: 2px;
        border-right: 3px solid var(--b2p-text);
        border-bottom: 3px solid var(--b2p-text);
        transform: translateY(-3px) rotate(45deg);
        transition: transform 0.2s ease;
    }

    .b2p-ak--bereit.is-open .b2p-ak-pfeil {
        transform: translateY(3px) rotate(-135deg);
    }

    .b2p-ak--bereit .b2p-ak-inhalt {
        padding: 0 0 22px;
    }

    /* Der erste und letzte Block im Inhalt bringt aus den Grundregeln der
       Seite eigene Aussenabstaende mit (das Transkript z. B. 30px). In der
       Leiste steht die Luft schon im Innenabstand. */
    .b2p-ak--bereit .b2p-ak-inhalt > *:first-child { margin-top: 0; }
    .b2p-ak--bereit .b2p-ak-inhalt > *:last-child { margin-bottom: 0; }
    .b2p-ak--transkript .transcript { margin: 0; }

    .b2p-ak--bereit:not(.is-open) .b2p-ak-inhalt {
        display: none;
    }

    /* Im aufgeklappten Zustand steckt das Transkript schon in der Leiste,
       sein eigener Kasten mit Rahmen und eigenem Rollbalken waere ein
       Kasten im Kasten - am Handy besonders unangenehm. */
    .b2p-ak--transkript .transcript {
        height: auto;
        overflow: visible;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
    }

    /* Weg zurueck am Ende langer Abschnitte (podcast-player.js haengt ihn
       nur an, wenn der Inhalt laenger als der Bildschirm ist). */
    /*
     * Weg zurueck aus langen Abschnitten. Ein Transkript ist aufgeklappt gut
     * 200 Bildschirme lang, ein Knopf am Ende waere unerreichbar. Deshalb
     * schwebt er ueber dem unteren Rand, solange man im Abschnitt liest
     * (podcast-player.js schaltet is-sichtbar).
     *
     * position: sticky waere das Naheliegende, scheitert hier aber am
     * overflow-x: hidden auf body - dieselbe Falle wie bei der Menueleiste,
     * siehe sticky-header.js.
     */
    .b2p-ak-zu {
        position: fixed;
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
        z-index: 1500;
        display: none;
        margin: 0;
        padding: 10px 20px;
        min-height: 44px;
        border: solid 3px var(--b2p-text);
        border-radius: 46px;
        background: var(--b2p-cream-light);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
        font-family: var(--b2p-font-display-regular);
        font-size: 17px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--b2p-text);
        cursor: pointer;
    }

    .b2p-ak-zu.is-sichtbar {
        display: block;
    }
}

/* Kapitelliste am Handy: Pillen, Titel und Beschreibung je auf eigener
   Zeile. Nebeneinander bricht der Titel sonst mitten im Wort um die
   Pillen herum und die zwoelf Kapitel werden zur Textwand. */
@media only screen and (max-width: 980px) {
    .b2p-ak--kapitel .b2p-ak-inhalt {
        line-height: 1.5;
    }

    .b2p-ak--kapitel .b2p-chapter {
        margin-top: 18px;
    }

    /* Umbruch VOR dem Titel, ohne ihn zum Block zu machen: als Block haengt
       dahinter noch das <br> aus dem Importtext und erzeugt eine Leerzeile,
       wodurch die Beschreibung optisch zum naechsten Kapitel rutscht. */
    .b2p-ak--kapitel .b2p-chapter-title {
        margin-left: 0;
    }

    .b2p-ak--kapitel .b2p-chapter-title::before {
        content: "\A";
        white-space: pre;
    }
}

/* Zeitmarke vor jedem Absatz des Transkripts. Springt in die Folge
   (podcast-player.js). Zurueckhaltend, weil es bei einer langen Folge
   ueber 500 davon sind - sie sollen den Lesefluss nicht zerhacken. */
.content a.b2p-zeit {
    display: inline-block;
    color: var(--b2p-text);
    opacity: 0.45;
    text-decoration: none;
    font-family: var(--b2p-font-body);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    padding: 2px 6px;
    margin-right: 2px;
    border-radius: 20px;
    border: solid 1px currentColor;
    vertical-align: 1px;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.content a.b2p-zeit:hover,
.content a.b2p-zeit:focus-visible {
    opacity: 1;
    background: var(--b2p-accent);
    border-color: var(--b2p-dark);
    color: var(--b2p-dark);
}

/* Absatzabstand im Transkript: die Absaetze sind jetzt lang, da reicht
   weniger Luft als der Standard der Seite. */
.b2p-ak--transkript .transcript p {
    margin: 0 0 14px;
}

/*
 * Abo-Bereich am Handy: statt vier dunkler 52px-Kreise mit Beschriftung
 * darunter vier Umriss-Pillen mit kleinem Zeichen und Wort - dieselbe Form
 * wie der Membersheep-Knopf direkt darunter, der Kopfbereich spricht damit
 * eine Sprache. Vorher nahm der Block samt Ueberschrift und Hinweis 194px
 * ein, bevor man beim Player war.
 *
 * Das Markup bleibt, wie es ist: das Zeichen steckt schon in .abbo-icon,
 * das Wort in .abbo-label. Am Desktop bleiben die Kreise, dort ist Platz.
 */
@media only screen and (max-width: 980px) {
    .b2p-hero-text .abbobuttons {
        gap: 6px;
    }

    /* Vier Pillen mit Wort passen nicht in eine Zeile (Newsletter allein
       braucht rund 130px), es werden also zwei Reihen zu zweit. Damit das
       nicht mehr Platz kostet als die Kreise vorher, bleibt die Pille
       flach: 32px hoch, zusammen mit der Luft dazwischen 70px. */
    .b2p-hero-text .abbobuttons a {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 3px 12px 3px 5px;
        border: solid 2px var(--b2p-text);
        border-radius: 46px;
        line-height: 1;
    }

    .b2p-hero-text .abbobuttons svg {
        width: 22px;
        height: 22px;
    }

    .b2p-hero-text .abbobuttons .abbo-label {
        font-size: 14px;
        letter-spacing: 0.5px;
        text-transform: none;
        color: var(--b2p-text);
    }

    /* Beim Antippen faerbt sich die ganze Pille, nicht nur das Zeichen. */
    .b2p-hero-text .abbobuttons a:hover,
    .b2p-hero-text .abbobuttons a:focus-visible {
        background: var(--b2p-accent);
    }
}

/*
 * Kleine Beschriftungen im Kopfbereich ("Folge Nr: 294", "B2P abonnieren").
 * Beides sind Etiketten, keine Saetze - standen aber in fetter Fliesstext-
 * schrift und wirkten dadurch wie Fremdkoerper zwischen den Londrina-
 * Ueberschriften. Jetzt dieselbe Sprache wie "GANZE FOLGE" und "ODER
 * ANHOEREN" in der Karte: klein, gesperrt, Versalien.
 */
.b2p-hero-text p.b2p-kopfzeile {
    margin: 0 0 8px;
}

.b2p-hero-text p.b2p-kopfzeile strong {
    font-family: var(--b2p-font-display-regular);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #7a7666;
    line-height: 1.2;
}

/*
 * Abstaende zwischen den Abschnitten am Desktop. Die Seite hat 80px
 * Zeilenabstand - der stammt aus der Zeit, als hier nur die Kaesten standen,
 * deren Ueberschrift ueber den Rahmen haengt und entsprechend Platz braucht.
 * Fuer beschriftete Textabschnitte ist das zu viel. Jetzt 44px fuer alle und
 * der fehlende Platz einzeln zurueck an die Kaesten.
 */
@media only screen and (min-width: 981px) {
    .singlepodwr {
        row-gap: 44px;
    }

    .singlepodwr .einblicke-wrap {
        margin-top: 36px;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   "Frag deine Folge" an das Haus angepasst.

   Der Kasten kommt aus dem Plugin b2p-hypermedia und bringt sein eigenes
   Stylesheet als <style> im Rumpf mit - also NACH dieser Datei in der
   Reihenfolge. Bei gleicher Spezifitaet gewinnt es deshalb; alle Regeln
   hier sind mit .einblicke-wrap davor geschrieben (0,2,0 gegen 0,1,0).
   Das Plugin selbst bleibt unangetastet.

   Was daran fremd wirkte: Systemschrift statt Hausschrift, eine eigene
   Farbwelt in Blau und Gruen (#f8fbff, #e8f5e9, #0369a1), sieben
   verschiedene Eckenradien zwischen 8 und 30px, Schlagschatten mit
   Hover-Sprung. Nichts davon kommt sonst auf der Seite vor.
   ────────────────────────────────────────────────────────────────────── */

.einblicke-wrap .b2p-container {
    font-family: var(--b2p-font-body);
}

/* Eingabezeile: gleicher Rahmen wie die Kaesten, Pillenform wie die
   uebrigen Knoepfe. 16px, weil iOS bei kleinerer Schrift beim Antippen
   in das Feld hineinzoomt. */
.einblicke-wrap .b2p-input {
    border: solid 3px var(--b2p-text);
    border-radius: 46px;
    padding: 12px 20px;
    font-family: var(--b2p-font-body);
    font-size: 16px;
}

.einblicke-wrap .b2p-input:focus {
    border-color: var(--b2p-text);
    box-shadow: 0 0 0 3px var(--b2p-accent);
}

.einblicke-wrap .b2p-char {
    font-family: var(--b2p-font-body);
    font-size: 12px;
    color: #7a7666;
}

/* "Fragen": wie die Pillen im Kopfbereich, nur gefuellt. */
.einblicke-wrap .b2p-btn {
    background: var(--b2p-dark);
    color: var(--b2p-accent);
    border: solid 3px var(--b2p-dark);
    border-radius: 46px;
    padding: 9px 26px;
    font-family: var(--b2p-font-display-regular);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: none;
}

.einblicke-wrap .b2p-btn:hover {
    background: var(--b2p-accent);
    border-color: var(--b2p-text);
    color: var(--b2p-text);
    transform: none;
    box-shadow: none;
}

.einblicke-wrap .b2p-btn:active {
    transform: none;
}

/* Vorschlaege: Umriss-Pillen wie im Kopfbereich, ohne Schatten und ohne
   Huepfen beim Drueberfahren. */
.einblicke-wrap .b2p-suggest-btn {
    background: none;
    border: solid 2px var(--b2p-text);
    border-radius: 46px;
    padding: 7px 16px;
    font-family: var(--b2p-font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--b2p-text);
    box-shadow: none;
}

.einblicke-wrap .b2p-suggest-btn:hover,
.einblicke-wrap .b2p-suggest-btn:focus-visible {
    background: var(--b2p-accent);
    border-color: var(--b2p-text);
    transform: none;
    box-shadow: none;
}

.einblicke-wrap .b2p-suggest-btn:active {
    transform: none;
}

/* Werkzeugzeichen: dunkel wie alles andere, Web-Suche gelb statt gruen. */
.einblicke-wrap .b2p-icon-btn svg {
    fill: var(--b2p-text);
}

.einblicke-wrap .b2p-icon-btn.active:hover {
    transform: none;
    opacity: 1;
}

.einblicke-wrap .b2p-icon-btn.web-on {
    background: var(--b2p-accent);
    border: solid 2px var(--b2p-text);
    border-radius: 46px;
}

.einblicke-wrap .b2p-icon-btn.web-on svg {
    fill: var(--b2p-text);
}

.einblicke-wrap .b2p-web-label {
    font-family: var(--b2p-font-display-regular);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--b2p-text);
}

/* Antwortverlauf: ein Rahmen wie der Kasten selbst, Fragen in Creme,
   Antworten in Weiss - statt Blau und Gruen aus einer fremden Palette. */
.einblicke-wrap .b2p-history {
    border: solid 3px var(--b2p-text);
    border-radius: 20px;
}

.einblicke-wrap .b2p-msg {
    font-family: var(--b2p-font-body);
    border-radius: 18px;
}

.einblicke-wrap .b2p-msg.user {
    background: var(--b2p-cream-light);
    border: solid 2px var(--b2p-text);
    color: var(--b2p-text);
}

.einblicke-wrap .b2p-msg.bot {
    background: #fff;
    border: solid 2px var(--b2p-text);
    color: var(--b2p-text);
}

.einblicke-wrap .b2p-msg.bot.web {
    background: #fff;
    border-color: var(--b2p-text);
    box-shadow: inset 4px 0 0 var(--b2p-accent);
}

.einblicke-wrap .b2p-msg.error {
    background: #fff;
    border: solid 2px var(--b2p-red);
    color: var(--b2p-red);
}

.einblicke-wrap .b2p-tag,
.einblicke-wrap .b2p-tag.defaultanswer,
.einblicke-wrap .b2p-tag.webanswer {
    background: var(--b2p-dark);
    color: var(--b2p-accent);
    font-family: var(--b2p-font-display-regular);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 46px;
    padding: 3px 10px;
}

.einblicke-wrap .b2p-citation-chip {
    border-width: 2px;
    border-radius: 46px;
    font-family: var(--b2p-font-body);
    font-weight: 400;
    box-shadow: none;
}

/* Am Handy ist die Spalte 250px breit (.singlepodwr nimmt links und rechts
   je 37,5px), zwei Vorschlagspillen nebeneinander gehen sich nicht aus.
   Sie stehen also untereinander - dann wenigstens flach und eng. */
@media only screen and (max-width: 980px) {
    .einblicke-wrap .b2p-suggestions {
        gap: 8px;
        margin-top: 14px;
    }

    .einblicke-wrap .b2p-suggest-btn {
        padding: 6px 14px;
        font-size: 13.5px;
    }
}

/* Zwei der vier Werkzeugzeichen im Chat-Kasten heissen "(Demnaechst)" und
   tun nichts. Tote Knoepfe sind das Unprofessionellste, was eine Oberflaeche
   haben kann - weg, bis es die Funktionen gibt. Der Griff geht ueber den
   title, nicht ueber die Position: bekommen sie eines Tages eine Funktion
   und eine andere Beschriftung, erscheinen sie von selbst wieder. */
.einblicke-wrap .b2p-icon-btn[title*="Demn\00e4 chst"] {
    display: none;
}

/*
 * Seitenrand am Handy. 10% sind bei 375px je 37,5px, also ein Fuenftel der
 * Breite als Rand - die Inhaltsspalte blieb mit 300px schmal, im Chat-Kasten
 * sogar nur 250px. Jetzt 20px, das ist das uebliche Mass am Handy und gibt
 * allem mehr Luft: Textzeilen, Kaesten, Vorschlagspillen.
 */
@media only screen and (max-width: 980px) {
    .singlepodwr {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   Suche im Transkript (podcast-player.js, initTranskriptSuche).
   Gebaut wird die Zeile erst vom Skript, damit ohne Skript kein totes
   Feld dasteht.
   ────────────────────────────────────────────────────────────────────── */
.b2p-suche {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.b2p-suche-feld {
    position: relative;
    flex: 1 1 240px;
    max-width: 420px;
    display: block;
}

.b2p-suche-feld input {
    width: 100%;
    box-sizing: border-box;
    border: solid 3px var(--b2p-text);
    border-radius: 46px;
    background: #fff;
    padding: 10px 18px 10px 42px;
    font-family: var(--b2p-font-body);
    font-size: 16px;  /* darunter zoomt iOS beim Antippen hinein */
    color: var(--b2p-text);
    -webkit-appearance: none;
    appearance: none;
}

.b2p-suche-feld input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--b2p-accent);
}

/* Lupe aus Kreis und Stiel, damit kein Zeichensatz nachgeladen wird. */
.b2p-suche-lupe {
    position: absolute;
    left: 17px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -7px;
    border: solid 2px var(--b2p-text);
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
}

.b2p-suche-lupe::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 6px;
    height: 2px;
    background: var(--b2p-text);
    transform: rotate(45deg);
}

.b2p-suche-zahl {
    font-family: var(--b2p-font-display-regular);
    font-size: 15px;
    letter-spacing: 0.5px;
    opacity: 0.7;
    white-space: nowrap;
}

.b2p-suche-pfeile {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.b2p-suche-pfeile button {
    width: 40px;
    height: 40px;
    border: solid 2px var(--b2p-text);
    border-radius: 50%;
    background: none;
    color: var(--b2p-text);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.b2p-suche-pfeile button:hover:not(:disabled) {
    background: var(--b2p-accent);
}

.b2p-suche-pfeile button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Treffer. Der laufende ist dunkel, damit er sich von den uebrigen
   abhebt, ohne dass die Seite bunt wird. */
.b2p-presse mark.b2p-fund,
.transcript mark.b2p-fund {
    background: var(--b2p-accent);
    color: var(--b2p-text);
    padding: 0 2px;
    border-radius: 3px;
}

.transcript mark.b2p-fund.ist-aktuell {
    background: var(--b2p-dark);
    color: var(--b2p-accent);
}

@media only screen and (max-width: 560px) {
    .b2p-suche-pfeile {
        margin-left: 0;
    }
}

/*
 * Hinweis "Entgeltliche Kooperation mit ..." ueber der Folgennummer, nur bei
 * bezahlten Folgen (Liste in functions.php, b2p_bezahlte_folgen). Gelbe
 * Pille, damit er auffaellt und nicht wie Kleingedrucktes wirkt. Der Link
 * fuehrt zur Erklaerung auf der Seite "Grundsaetze".
 */
.b2p-hero-text p.b2p-bezahlt-hinweis {
    margin: 0 0 12px;
}

.b2p-hero-text p.b2p-bezahlt-hinweis a {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 40px;
    background: var(--b2p-accent);
    color: var(--b2p-dark);
    font-family: var(--b2p-font-display-regular);
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-decoration: none;
}

.b2p-hero-text p.b2p-bezahlt-hinweis a:hover,
.b2p-hero-text p.b2p-bezahlt-hinweis a:focus-visible {
    text-decoration: underline;
}

/* Trenner zwischen Ueberschrift und Zusatz ("Kapitel" / "11 Kapitel"): nur
   fuer Suchmaschinen und Vorleser, im Bild unsichtbar. */
.b2p-ak-trenner {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}