/* PL 2027 · Ergänzungen für WordPress: Artikeltext, Inhalte aus dem Editor, Seitenzahlen, Suche, Autorenbox. */

/* Blockstil „Handschrift (Unterzeile)“ für Absätze im Editor */
.is-style-handschrift { margin: .15em 0 .8em; font: 400 clamp(1.1rem, 1.9vw, 1.55rem)/1.15 var(--f-hand); letter-spacing: -.03em; word-spacing: -.12em; text-transform: uppercase; color: var(--violett); text-wrap: balance; }

/* Seiten unter der schwebenden Kopfzeile */
.seite { padding-bottom: var(--abstand); }
.seite--frei { padding-bottom: 0; }

/* Textspalte für Artikel und Seiten */
.text-spalte { width: min(100% - 2 * var(--rand), 720px); margin-inline: auto; }
.text-spalte > * { margin-block: 0 1.1em; }
.text-spalte h2 { margin: 1.6em 0 .35em; font-size: clamp(2rem, 4vw, 2.8rem); line-height: .95; }
.text-spalte h3 { margin: 1.4em 0 .4em; font: 700 1.35rem/1.25 var(--f-text); }
.text-spalte h4 { margin: 1.2em 0 .4em; font: 700 1.15rem/1.3 var(--f-text); }
.text-spalte p, .text-spalte li { font-size: 1.15rem; line-height: 1.65; }
.text-spalte ul, .text-spalte ol { padding-left: 1.3em; }
.text-spalte ul { list-style: disc; }
.text-spalte ol { list-style: decimal; }
.text-spalte li + li { margin-top: .35em; }
.text-spalte a { color: var(--blau); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.text-spalte a:hover { color: var(--schwarz); }
.text-spalte blockquote { margin: 1.6em 0; padding: 0 0 0 22px; border-left: 4px solid var(--lavendel); font-size: 1.3rem; }
.text-spalte hr { border: 0; height: 5px; margin: 2.2em 0; background: var(--verlauf); }
.text-spalte table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.text-spalte th, .text-spalte td { padding: 10px 12px; border-bottom: 1px solid rgb(0 0 0 / .15); text-align: left; vertical-align: top; }
.text-spalte img { height: auto; border-radius: 4px; }
.text-spalte iframe, .text-spalte video { max-width: 100%; }
.text-spalte .aligncenter { display: block; margin-inline: auto; }
.text-spalte .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
.text-spalte .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
.text-spalte::after { content: ""; display: table; clear: both; }
.text-spalte .wp-caption { max-width: 100%; }
.text-spalte .wp-caption-text, .text-spalte figcaption { margin-top: 8px; font-size: .9rem; color: rgb(0 0 0 / .65); }
.text-spalte .werbung { margin-right: 6px; }
@media (max-width: 600px) { .text-spalte .alignleft, .text-spalte .alignright { float: none; margin: 1em 0; max-width: 100%; } }

/* Artikel */
.artikel__kopf { padding-bottom: clamp(20px, 3vw, 36px); }
.artikel__kopf h1 { font-size: clamp(2.8rem, 6.5vw, 5.6rem); max-width: 18ch; }
.artikel__etikett { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; color: var(--blau); }
.artikel__etikett .werbung { color: var(--schwarz); }
.artikel__meta { margin: 18px 0 0; font: 700 .8rem/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.artikel__bild { margin: 0 auto clamp(28px, 4vw, 48px); max-width: 1100px; }
.artikel__bild img { width: 100%; max-height: 72vh; object-fit: cover; border-radius: 6px; }
.verwandt { padding-top: clamp(40px, 6vw, 80px); }

/* Autorenbox */
.autor { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: clamp(32px, 5vw, 56px); padding: 22px; background: var(--weiss); border-radius: 6px; }
.autor__bild { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.autor .etikett { color: var(--blau); margin-bottom: 6px; }
.autor__name { margin: 0 0 6px; font: 400 1.9rem/1 var(--f-titel); }
.autor__text { margin: 0 0 10px; font-size: 1rem; }
@media (max-width: 520px) { .autor { grid-template-columns: 64px minmax(0, 1fr); } .autor__bild { width: 64px; height: 64px; } }

/* Seitenzahlen */
.seitenzahlen ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 0; }
.seitenzahlen a, .seitenzahlen span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 2px solid var(--schwarz); font: 700 .85rem/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.seitenzahlen .current { background: var(--schwarz); color: var(--weiss); }
.seitenzahlen .dots { border-color: transparent; }

/* Suchfeld auf Such- und Fehlerseite */
.suche--seite { max-width: 640px; margin-top: 26px; }
.suche__zeile { display: flex; gap: 10px; }
.suche__zeile .suche__feld { flex: 1; min-width: 0; }
.knoepfe-zeile { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.akarte__bild--quadrat { aspect-ratio: 1; }

/* Bühne: Dauer je Folie aus dem Editor */
.buehne--laeuft .leiste__karte[aria-current="true"] .leiste__balken::after { animation-duration: var(--folien-zeit, 7s); }

/* Gruppen-Blöcke von WordPress sollen nichts am Layout ändern */
main.wp-block-group { display: block; }

/* Folgentitel auf der Startseite sind Links, sehen aber aus wie im Entwurf */
.folge h4 a { text-decoration: none; }
.folge h4 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Video-Seite: Player in voller Breite der Textspalte plus etwas mehr */
.video-seite__player { max-width: 1100px; margin: 0 auto clamp(28px, 4vw, 48px); }
.video-seite__text { margin-top: 0; }
/* Folge: lange Titel kleiner als Show-Namen */
.folge-seite__titel { font-size: clamp(2.4rem, 5vw, 4.6rem); max-width: 20ch; }
.folge-seite .seitenkopf__knoepfe { margin-top: 18px; }
.folge-seite .seitenkopf .hinweis-klick { margin-top: 14px; color: var(--creme); }

/* Brotkrumen auf dem Handy: Bei tiefen Seiten fehlt der eigene Titel (er steht ohnehin groß darunter) */
@media (max-width: 700px) { .pfad li[aria-current]:nth-child(n+4) { display: none; } }

/* Lange Listen (alle Artikel, Rubriken, Shows): bewusst ohne content-visibility: auto. Damit nimmt Chrome nicht gezeichnete
   Jahresgruppen aus dem Barrierefreiheitsbaum, Screenreader fänden nur das erste Jahr (Prüfung 08.10.2026). */

/* Startseite: Helle Abschnitte direkt nach einer farbigen Fläche (Podcast, Camp, Shop, Club) brauchen Luft nach oben,
   egal in welcher Reihenfolge die Abschnitte stehen */
:is(.podcast, .camp, .shop, .club) + :is(.rubriken, .blogteaser, .kanal) { padding-top: var(--abstand); }
/* Ohne Intro folgt der Kanal direkt auf die Bühne (Wunsch Nick, 01.10.2026): Abstand wie vorher durch das Intro */
.blatt > .kanal:first-child { padding-top: clamp(40px, 6vw, 88px); }

/* Fokusrahmen auf dunklen Flächen in Gelb: Blau erreicht auf Violett nur 2,2 : 1 (WCAG 1.4.11 verlangt 3 : 1) */
:is(.podcast, .folie--podcast, .seitenkopf--dunkel, .fuss) :focus-visible { outline-color: var(--gelb); }

/* Laufband: runder Knopf zum Anhalten am rechten Rand */
.laufband-huelle { position: relative; }
.laufband__schalter { position: absolute; top: 50%; right: clamp(10px, 2vw, 24px); transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--creme); color: var(--schwarz); cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .15); }
.laufband__schalter .buehne__schalter-bild { border-color: transparent; }
.laufband-huelle--halt .laufband__spur { animation-play-state: paused; }
.laufband-huelle--halt .laufband__schalter .buehne__schalter-bild::before { width: 0; height: 0; margin-left: 3px; background: none; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
@media (prefers-reduced-motion: reduce) { .laufband__schalter { display: none; } }

/* Fremde Einbettungen in alten Beiträgen werden zu Links (inc/einbettungen.php) */
.einbettung-link a { font-weight: 700; }
.text-spalte .pl-player { margin-block: 1.6em; }

/* „MP3 herunterladen“ auf Folgenseiten (pl27_laden_knopf, basis.js) */
.laden { font-variant-numeric: tabular-nums; }
.laden.laedt { cursor: progress; }

/* Link zur Datenschutzerklärung in den Hinweisen unter Play-Knöpfen */
.hinweis-klick a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.hinweis-klick a:hover { color: var(--blau); }
:is(.podcast, .seitenkopf--dunkel, .folie--podcast) .hinweis-klick a:hover { color: var(--lavendel); }

/* Barrierefreiheit (Prüfung 02.10.2026) */
.text-spalte { overflow-wrap: break-word; }
.text-spalte a { overflow-wrap: anywhere; }
.laufband__schalter:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 2px; box-shadow: 0 0 0 7px var(--creme); }
:is(.seitenkopf--dunkel, .podcast, .folie, .fuss) .pl-player__knopf:focus-visible { outline-color: var(--gelb); }
.leiste__karte:focus-visible { outline-offset: -3px; }

/* Windows-Kontrastmodus: Symbole aus Rahmen und Verläufen behalten ihre Form, die Farben kommen vom System */
@media (forced-colors: active) {
	.hoeren__kreis, .rubrik__play, .spieler__knopf, .buehne__schalter-bild, .laufband__schalter, .hand-zeichen { forced-color-adjust: none; color: CanvasText; }
	.hoeren__kreis, .rubrik__play, .spieler__knopf, .laufband__schalter { background: Canvas; border: 2px solid CanvasText; }
}