@charset "UTF-8";
/* Ergänzungen zum Entwurfs-CSS: Wortmarke als Text, WordPress-Besonderheiten. Der Entwurf bleibt unverändert in entwurf-*.css. */

/* Wortmarke statt Logo-Bild 900 × 252: Breite = Höhe des Bildes × 900/252 (86 → 307 px, 46 → 164 px, 62 → 221 px, 50 → 179 px) */
.ap-logo { display: block; height: auto !important; width: 307.14px; container-type: inline-size; transition: width .35s; text-decoration: none; }
.ap-header.is-scrolled .ap-logo { width: 164.29px; }
/* Kopf wie im Entwurf: Wortmarke 307 × 86 auch bei 1024 und 768 px; nur auf dem Handy kleiner, damit sie die Lupe nicht überdeckt */
@media (max-width: 600px) { .ap-logo { width: min(221.43px, 43vw); } .ap-header.is-scrolled .ap-logo { width: min(164.29px, 36vw); } }
.ap-s-top .ap-logo, .ap-d-top .ap-logo { width: 178.57px !important; }
.ap-wm { display: block; text-align: center; }
.ap-wm__name { display: block; font: 600 19.6cqw/0.92 'Cabin Condensed', 'Arial Narrow', sans-serif; letter-spacing: .005em; color: #000; white-space: nowrap; }
.ap-wm__rot { color: var(--red); }
.ap-wm__zeile { display: block; margin-top: 1.8cqw; font: 400 7cqw/1.2 'Lora', Georgia, serif; color: var(--red); white-space: nowrap; }

/* Wortmarke im Fuß (Entwurf: Oswald-Text, weiß, A und Punkt rot) */
.ap-word { font-family: 'Cabin Condensed', 'Arial Narrow', sans-serif; font-weight: 600; font-size: 34px; letter-spacing: .01em; }
.ap-footer .ap-word { font-size: 34px; color: #fff; }

/* Zugänglichkeit und WordPress */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
.screen-reader-text:focus { position: fixed; z-index: 200; left: 12px; top: 12px; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; background: #fff; color: var(--red); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.admin-bar .ap-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ap-header { top: 46px; } }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Divi 5 setzt per <style class="et-vb-global-data"> Schriftgröße und Zeilenhöhe von body; der Entwurf legt 16 px und 1,6 fest */
html body { font-size: 16px !important; line-height: 1.6 !important; }

/* Fuß: Zeilen ohne Link wie die Links */
.ap-f-col li { font-size: 14px; color: #bdb7b0; }

/* Rubrikseiten: Inhalte kommen als WordPress-Blöcke. Haken-Liste (Entwurf: li > div) und Textabschnitt der Unterrubriken */
.seo .chk li { display: block; position: relative; padding-left: 34px; }
.seo .chk li::before { position: absolute; left: 0; top: 0; }
.seo .cta .claim { margin-top: 14px; font-family: var(--serif); font-style: italic; color: var(--red); }
.seo .cta .end { margin-top: 14px; color: var(--ink); }
.seo .seo-text { max-width: 860px; }
.seo .seo-text h2 { margin-bottom: 18px; }
.seo .seo-text p { margin-top: 14px; font-size: 16px; line-height: 1.7; }
.intro .intro-grid ul.wp-block-list { padding: 0; }
.intro-grid h1 + .wp-block-html .rule, .intro-grid .wp-block-html { margin: 0; }

/* Schutz vor seitlichem Überlauf (Slider-Ränder, große 404-Ziffern); der Entwurf selbst läuft bei 390 px 15–37 px über */
html, body { overflow-x: clip; }
@media (max-width: 600px) { .nf .num { font-size: clamp(90px, 30vw, 230px); } }
/* Kontakt und Textseiten haben im Entwurf Zeilenhöhe 1,7 */
html body.ap-kontakt, html body.ap-seite { line-height: 1.7 !important; }


/* Textseiten: Tags bleiben semantisch (Seitentitel H1, Abschnitte H2, Unterabschnitte H3); die Optik ist die der Entwurfs-Stufen H3 und H4 */
body.ap-seite .prose h2 { font-family:var(--serif);font-weight:600;color:var(--red);font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:46px 0 14px;scroll-margin-top:120px;letter-spacing:.01em }
body.ap-seite .prose h2:first-child { margin-top:0 }
body.ap-seite .prose h3 { font-family:var(--serif);font-weight:600;color:var(--ink);font-size:19px;margin:28px 0 10px;letter-spacing:.01em }

/* Zusatzinfos etwas dunkler als im Entwurf (#8a8784 erreicht auf Weiß nur 3,5:1, gefordert sind 4,5:1) */
:root { --ink-3: #6f6b68; }

/* Startseite: die Zeile „Ihr Magazin für clevere Lösungen“ ist im Editor ein Absatz, im Entwurf ein Span */
.intro-text p.tag { margin: 0; max-width: none; line-height: 1.6; }

/* Überschriften H1 und H2: etwas kleiner und leichter als im Entwurf (Burk, 17.10.): H1 500 statt 600, rund 15–20 % kleiner; H2 500 statt 600, rund 12 % kleiner */
body .intro h1, body .intro-in h1 { font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); }
body .subhead h1, body .nf h1 { font-weight: 500; font-size: clamp(28px, 3vw, 40px); }
body .page-h h1 { font-weight: 500; font-size: clamp(30px, 3.2vw, 42px); }
body .intro-text h1 { font-size: clamp(26px, 2.5vw, 36px); }
body .article-title, body .grid > article > h1 { font-weight: 500; font-size: clamp(28px, 2.9vw, 40px); }
body .prose h2 { font-weight: 500; font-size: clamp(21px, 2vw, 26px); }
body.ap-seite .prose h2 { font-weight: 500; font-size: clamp(20px, 1.9vw, 24px); }
body .seo h2, body .seo .seo-text h2 { font-weight: 500; font-size: clamp(23px, 2.2vw, 28px); }
body .erw h2 { font-size: clamp(24px, 2.3vw, 30px); }
body .experts-title h2 { font-weight: 500; font-size: clamp(30px, 3vw, 38px); }
body .empty-s h2 { font-weight: 500; font-size: 24px; }
body .intro h2 { font-size: clamp(19px, 1.8vw, 24px); }

/* Slider: einen Ticken schmaler als der Rest (live: 80 % Breite); Pfeile erst beim Darüberfahren oder per Tastatur sichtbar */
.featured.container { max-width: 1200px; }
.slider-arrow { opacity: 0; }
.slider:hover .slider-arrow, .slider:focus-within .slider-arrow { opacity: 1; }

/* Beitrag: „Aus unserem Netzwerk“ über dem Newsletter; Zeile .mini wie auf Start- und Rubrikseiten (dort sind die Regeln im Seiten-CSS, im Beitrag nicht) */
.ap-netz { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 4px; padding: 22px 22px 8px; box-shadow: var(--shadow); }
.ap-netz .aside-title { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); padding-bottom: 14px; margin-bottom: 4px; border-bottom: 2px solid var(--red); }
.ap-netz .mini { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ap-netz .mini:last-child { border-bottom: 0; }
.ap-netz .mini .media { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--bg-soft); }
.ap-netz .mini .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.ap-netz .mini:hover .media img { transform: scale(1.06); }
.ap-netz .mini .k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 5px; }
.ap-netz .mini h4 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--red); }
.ap-netz .mini:hover h4 { color: var(--red-2); }

/* Borlabs-Knopf (Datenschutz-Einstellungen) unten links; unten rechts sitzt „Nach oben“ */
body .brlbs-cmpnt-widget.brlbs-right-0 { right: auto; left: 0; }

/* Desktop: Inhaltsbreite wie die Menüleiste (rund 1240 px statt 1640 px) auf Beitrag, Rezept, Video, Rubrik- und Textseiten, Suche, 404 und Videos;
   die Startseite behält ihre volle Breite. Hintergrundbänder (Einleitung, SEO-Text) bleiben randlos, nur der Inhalt wird schmaler. */
@media (min-width: 1100px) {
	body:is(.ap-artikel, .ap-rezept, .ap-video, .ap-rubrik, .ap-seite, .ap-kontakt, .ap-suche, .ap-404, .ap-videos) main .container { max-width: calc(1240px + 2 * clamp(16px, 2vw, 32px)); }
}

/* Bildnachweise: dunkelgrau, kursiv, klein (auch der Blockstil „Bildnachweis“) */
.prose p.photo-credit, .prose p.is-style-photo-credit, .prose p.photo-credit em, .prose p.photo-credit strong { font-family: var(--sans); font-style: italic; font-weight: 400; font-size: 13px; line-height: 1.5; color: #4f4f4f !important; }
.prose p.photo-credit, .prose p.is-style-photo-credit { margin-top: 36px; }

/* Startseite: vier Kacheln, jede blendet für sich durch ihre Beiträge (wie auf der bisherigen Seite) */
.featured .slider-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; overflow: visible; padding: 8px 0 34px; margin: 0; }
.featured .kachel { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-sm), var(--shadow); background: var(--bg-soft); }
.featured .kachel .slide { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; opacity: 0; transition: opacity .9s ease; z-index: 0; transform: none; }
.featured .kachel .slide:hover { transform: none; box-shadow: none; }
.featured .kachel .slide.is-active { opacity: 1; z-index: 1; }
.featured .kachel .slider-arrow { z-index: 5; top: calc(50% - 20px); }
.featured .kachel:hover .slider-arrow, .featured .kachel:focus-within .slider-arrow { opacity: 1; }
@media (max-width: 1000px) { .featured .slider-kacheln { grid-template-columns: 1fr 1fr; } }
/* Handy: nur die erste Kachel, volle Breite (Burk 27.10.: vier Mini-Kacheln gefielen nicht); Pfeile sichtbar, weil es kein Darüberfahren gibt */
@media (max-width: 600px) { .featured .slider-kacheln { grid-template-columns: 1fr; } .featured .kachel:not(:first-child) { display: none; } .featured .kachel { aspect-ratio: 4 / 3; } .featured .kachel .slider-arrow { display: grid; opacity: 1; } }
.featured .slider-kacheln:hover .kachel:not(:hover):not(:focus-within) .slider-arrow { opacity: 0; }

/* Startseite: „Aus unserem Netzwerk“ als Slider unter den Experten */
.netz-start { margin-top: 0; }
.netz-slider { position: relative; overflow-x: clip; overflow-clip-margin: 20px; }
.netz-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 20px 36px; margin: -8px -20px -30px; scroll-padding-inline: 20px; scrollbar-width: none; }
.netz-track::-webkit-scrollbar { display: none; }
.netz-karte { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-sm), var(--shadow); transition: transform .3s, box-shadow .3s; }
.netz-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.netz-karte .media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.netz-karte .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.netz-karte:hover .media img { transform: scale(1.05); }
.netz-karte .body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.netz-karte .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.netz-karte h3 { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--red); font-size: 20px; line-height: 1.25; text-wrap: balance; }
.netz-karte:hover h3 { color: var(--red-2); }
.netz-karte .more-row { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; color: var(--red); }
.netz-slider .slider-arrow { top: calc(50% - 20px); opacity: 0; }
.netz-slider:hover .slider-arrow, .netz-slider:focus-within .slider-arrow { opacity: 1; }
@media (max-width: 1000px) { .netz-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .netz-track { grid-auto-columns: 86%; } .netz-slider .slider-arrow { display: none; } }

/* Netzwerk-Abschnitt: Luft zum Newsletter-Band darunter (Karten und Schatten klebten am grauen Band) */
.netz-start { padding-bottom: 88px; }
@media (max-width: 600px) { .netz-start { padding-bottom: 56px; } }

/* „Aus unserem Netzwerk“: Überschriften dunkel statt rot (fremde Seiten sehen anders aus als eigene Beiträge); beim Darüberfahren rot */
.netz-karte h3, .ap-netz .mini h4 { color: var(--ink); }
.netz-karte:hover h3, .ap-netz .mini:hover h4 { color: var(--red); }

/* Startseite: weniger Leerraum zwischen den Slider-Kacheln und dem Einleitungsband (vorher 78 px, jetzt rund 40 px) */
body.ap-home .featured .slider-kacheln { padding-bottom: 0; }
body.ap-home .featured { padding-bottom: 6px; }
body.ap-home .intro { margin-top: 34px; }

/* Kopf leicht durchscheinend (live 90 %, hier 95 %); Suche und Schublade bleiben deckend */
.ap-header { background: rgba(255,255,255,.95); }


/* ===== Überarbeitung nach dem Review: Barrierefreiheit (WCAG 2.2 AA), Bewegung, Überlauf ===== */

/* Fokus unter dem festen Kopf: Kopf (180 px, geschrumpft 108 px) darf das fokussierte Element nie verdecken; Handy-/Tablet-Kopf (geschrumpft 66 px) */
html { scroll-padding-top: 130px; }
@media (max-width: 1260px) { html { scroll-padding-top: 90px; } }
/* Sprung zum Inhalt (Skip-Link): der Kopf schrumpft erst ab 70 px Scrollweg; so landet der Inhalt unter dem geschrumpften Kopf (108 bzw. 66 px) statt darunter versteckt */
main#inhalt { scroll-margin-top: -22px; outline: 0; }
@media (max-width: 1260px) { main#inhalt { scroll-margin-top: -42px; } }
@media (max-width: 600px) { main#inhalt { scroll-margin-top: 0; } }

/* „Weniger Bewegung“: keine Überblendungen, kein weiches Scrollen, keine Animationen */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* Hauptmenü als Navigation; Esc schließt das Untermenü (Klasse ap-zu, shell.js) auch bei Hover/Fokus */
@media (max-width: 1260px) { .ap-hnav { display: none; } }
.ap-nav > li.ap-zu:hover .ap-drop, .ap-nav > li.ap-zu:focus-within .ap-drop { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); }
.ap-nav > li.ap-zu:hover .chev, .ap-nav > li.ap-zu:focus-within .chev { transform: none; }

/* Schublade: eingeklappte Untermenüs sind nicht fokussierbar; „Suche“ ist ein Knopf im Stil der Menüzeilen */
.ap-d-sub { visibility: hidden; transition: max-height .3s, visibility 0s .3s; }
.ap-d-li.o .ap-d-sub { visibility: visible; transition: max-height .3s, visibility 0s; }
.ap-d-row > .ap-d-link { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--serif); font-size: 22px; color: var(--ink); padding: 16px 0; }
/* Fokus zeigt der Unterstrich (grau → rot), kein zusätzlicher Rahmen */
.ap-s-field { border-bottom-color: var(--line-2); transition: border-color .2s; }
.ap-s-field:focus-within { border-bottom-color: var(--red); }
.ap-count { font-size: 14px; color: var(--ink-3); margin: 44px 0 18px; }
.ap-count:empty { display: none; }
.ap-s-sec--0 { margin-top: 0; }

/* Fuß: Spaltenüberschriften sind H2 (vorher H5 ohne Vorgänger), Optik wie vorher */
.ap-f-col h2.ap-f-h { font-family: var(--serif); font-weight: 600; font-size: 17px; color: #fff; margin: 0 0 16px; }
.ap-f-col h2.ap-f-h a { color: #fff; }
.ap-f-col nav li, .ap-f-col nav a { font-size: 14px; }
.kcard h2.kh { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); margin: 0; }
/* Startseite: die zwei Karten vor der H1 sind Absätze statt H3 (Überschriftenfolge), Optik der H3 */
.post-card p.h3 { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--red); font-size: 24px; line-height: 1.2; letter-spacing: .03em; text-wrap: balance; margin: 0; }
.post-card.sm p.h3 { font-size: 21px; }
.post-card:hover p.h3 { color: var(--red-2); }
/* Beiträge, deren erste Überschrift H3/H4 ist, bekommen H2 (Überschriftenfolge); Optik der bisherigen Stufe */
.prose h2.ap-lede-4 { font-family: var(--serif); font-weight: 600; font-style: italic; color: var(--ink); font-size: 19px; line-height: 1.3; margin: 26px 0 8px; letter-spacing: .02em; text-wrap: initial; }
.prose h2.ap-lede-3 { font-family: var(--serif); font-weight: 600; font-style: normal; color: var(--red); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.25; margin: 34px 0 12px; letter-spacing: .02em; text-wrap: initial; }

/* Fokus: der starke 2-px-Ring bleibt auch an Eingabefeldern (Entwurf: outline: 0 mit zartem Schatten); bei Feldern in einer Hülle sitzt der Ring an der Hülle */
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--red) !important; outline-offset: 2px; }
.sf input:focus-visible, .nl-form input:focus-visible, .ap-s-field input:focus-visible { outline: 0 !important; }
.sf:focus-within, .nl-form:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.zut input:focus-visible + i { outline: 2px solid var(--red); outline-offset: 3px; box-shadow: none; }
.ap-top:focus-visible, .slider-arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Eingabefelder: Rand mit mindestens 3:1 gegen die Umgebung (Entwurf #d8d4ce hat nur 1,5:1) */
:root { --feld: #8a847e; }
.kform input, .kform textarea, .side-nl input, .nl input, .comment-form input, .comment-form textarea, .sf, .nl-form, .por { border-color: var(--feld); }
.kform input:focus, .kform textarea:focus, .side-nl input:focus, .nl input:focus, .comment-form input:focus, .comment-form textarea:focus { border-color: var(--red); }
.sf:focus-within, .nl-form:focus-within { border-color: var(--red); }

/* Formulare: Fehlerzustand sichtbar (Rand, Farbe, Symbol), Einwilligungshinweis */
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-tint); }
.nl-form input[aria-invalid="true"] { box-shadow: none; }
.nl-form:has(input[aria-invalid="true"]) { border-color: var(--red); border-width: 2px; padding: 6px; }
[data-ap-err]:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .5em; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: .85em; line-height: 1; }
[data-ap-err] { font-weight: 600; }
.nl-err { color: var(--red); font-size: 13.5px; }
.ap-consent { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.ap-consent a, .nl-note a { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
[data-ap-ok]:focus { outline: 0; }

/* Links im Fließtext nicht nur über die Farbe erkennbar: unterstrichen (Entwurf: Unterstreichung nur bei Hover oder zu blass) */
.prose a:not(.lc):not(.toc a), .intro p a, .intro-text p a, .erw p a, .seo p a, .kcard p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 70%, transparent); }
.prose a:not(.lc):not(.toc a):hover, .intro p a:hover, .intro-text p a:hover, .erw p a:hover, .seo p a:hover, .kcard p a:hover { text-decoration-color: currentColor; }

/* Kontrast weißer Schrift auf Fotos: Pille deckender (Pixelmessung gegen die Kachel- und Videobilder) */
.slide__kicker { background: rgba(20, 12, 10, .65); }
.vtag { background: rgba(20, 12, 10, .65); }
@media (max-width: 600px) { .featured .kachel .slide__kicker { font-size: 11px; letter-spacing: .06em; left: 8px; top: 8px; max-width: calc(100% - 16px); } }

/* Portionsregler und Rezeptkarte */
.por b[role="status"] { display: inline-block; }

/* ===== Überlauf bei schmalen Bildschirmen (320–414 px) ===== */
/* Einspaltige Raster: 1fr hat als Mindestbreite den Inhalt (lange Wörter, Formulare); minmax(0, 1fr) lässt sie schrumpfen (Breakpoints wie im Entwurf) */
@media (max-width: 980px) { .article-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) { .layout, .body, .grid, .newsletter { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .kgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .nf { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) { .article-side, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .article-side, .related-grid, .relg { grid-template-columns: minmax(0, 1fr); } }
.article-main, .article-side, .article-grid > *, .layout > *, .grid > *, .nf > *, .newsletter > *, .kgrid > * { min-width: 0; }
.prose { overflow-wrap: anywhere; }
.prose ins, .prose iframe, .prose video, .prose embed, .prose object, .prose img { max-width: 100%; }
.prose iframe, .prose ins { max-width: 100%; }
.prose .wp-block-table, .prose figure.wp-block-table { overflow-x: auto; max-width: 100%; }
.prose > table, .prose .wp-block-group > table, .prose .wp-block-column > table { display: block; max-width: 100%; overflow-x: auto; }
.nl-form input, .nl-form { min-width: 0; max-width: 100%; }
.sf input { min-width: 0; }
.side-nl, .side-nl form, .side-nl input, .nl, .nl input { max-width: 100%; min-width: 0; }
.side-nl button { max-width: 100%; }
.cm { grid-template-columns: 48px minmax(0, 1fr); overflow-wrap: anywhere; }
.cm > div { min-width: 0; }
.mini { grid-template-columns: 92px minmax(0, 1fr); }
.ap-netz .mini { grid-template-columns: 88px minmax(0, 1fr); }
.mini h4 { overflow-wrap: anywhere; }
@media (max-width: 480px) { .divider { gap: 12px; } .divider .line { min-width: 8px; } .divider__cat, .divider span.t { white-space: normal; text-align: center; min-width: 0; font-size: 21px; } }
form[aria-busy="true"] button[type="submit"] { opacity: .6; cursor: progress; }

/* Video-Einzelseite: natives <video controls>; Rahmen, Radius und Seitenverhältnis des Entwurfs bleiben, der Verlauf über dem Bild entfällt (er dunkelte die Bedienleiste ab) */
.player { cursor: auto; }
.player::after { display: none; }
.player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* Video-Kommentarformular: Absenden-Knopf wie im Beitragsformular (Pfeil mittig statt hochgerutscht) */
body.ap-video .btn { align-items: center; gap: 10px; padding: 13px 24px; font-family: var(--sans); }
body.ap-video .btn .arr { transition: transform .25s; }
body.ap-video .btn:hover .arr { transform: translateX(3px); }

/* Newsletter-Kästen: Briefsymbol rechts neben der Überschrift statt der roten Linie */
.side-nl h3, .nl h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.nl-ico { display: inline-flex; color: var(--red); flex: none; }
.side-nl .ap-consent, .nl .ap-consent { font-size: 11.5px; line-height: 1.5; }
/* Newsletter-Band: Briefsymbol links neben der Überschrift */
.newsletter-band h3 { display: flex; align-items: center; gap: 14px; }
.newsletter-band .nl-ico svg { width: 38px; height: 38px; }

/* Footer-Logo: Markenrot wie im Kopf (Entwurf hatte hier ein helleres Rot) */
.ap-footer .ap-word .a, .ap-footer .ap-word .d { color: var(--red); }

/* Borlabs-Entsperrknöpfe: dunkleres Rot statt YouTube-Rot (4,0:1 → ≥ 5,8:1) */
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn { background-color: #c00 !important; color: #fff !important; }
body .brlbs-cmpnt-container.brlbs-cmpnt-content-blocker a.brlbs-cmpnt-cb-btn:hover { background-color: #a30000 !important; }

/* Listenpunkte aus mehreren Teilen (z. B. <strong> + Text, wie in der Datenschutzerklärung): kein Grid, sonst rutscht der Text unter
   dem ersten Teil in die schmale Markerspalte (ein Zeichen pro Zeile). Marker absolut links, Text fließt normal. */
.prose ul.is-style-dots li,
.prose ul.dots li,
.prose > ul:not([class*="is-style-"]):not(.lst):not(.dots):not(.zut):not(.steps) > li { display: block; position: relative; padding-left: 26px; }
.prose ul.is-style-dots li::before,
.prose ul.dots li::before,
.prose > ul:not([class*="is-style-"]):not(.lst):not(.dots):not(.zut):not(.steps) > li::before { position: absolute; left: 0; top: .62em; margin: 0; }
.prose .infobox li, .prose .pc li { display: block; position: relative; padding-left: 28px; }
.prose .infobox li::before, .prose .pc li::before { position: absolute; left: 0; top: 0; }
/* Rezeptkarte: gleiche Ursache (Grid-Zeile), ein Link im Schritt- oder Zutatentext wurde zur eigenen Zelle („Ban|anen“) */
.prose .rezept ol.zub li { display: block; position: relative; padding-left: 54px; min-height: 38px; }
.prose .rezept ol.zub li::before { position: absolute; left: 0; top: 0; }
.prose .rezept ul.zut label { display: block; position: relative; padding-left: 40px; }
.prose .rezept ul.zut label i { position: absolute; left: 6px; top: 10px; margin: 0; }
/* Hochformat-Bilder im Beitrag (seit der Bildordnung zentriert über die volle Breite): Höhe begrenzen, Querformate bleiben unverändert */
.prose > figure.wp-block-image:not(.alignleft):not(.alignright) { display: block; }
.prose > figure.wp-block-image:not(.alignleft):not(.alignright) img { max-height: 640px; width: auto; max-width: 100%; margin-inline: auto; display: block; }
.prose > figure.wp-block-image:not(.alignleft):not(.alignright) figcaption { display: block; }
/* Selbsttests (Plugin Chained Quiz, 4 Beiträge): als Kasten im Beitragsstil, Antworten als große Klickflächen (Burk 26.10.2026: Quiz behalten) */
.prose .chained-quiz { margin: 30px 0 34px; padding: 24px 26px; background: #fff; border-radius: 4px; box-shadow: var(--shadow); border-top: 3px solid var(--red); }
.prose .chained-quiz-question h4 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.35; color: var(--ink); }
.prose .chained-quiz-question h4 span { color: inherit !important; }
.prose .chained-quiz-question p { margin: 0; }
.prose .chained-quiz-question p:only-of-type:empty { display: none; }
.prose .chained-quiz-choices { display: grid; gap: 10px; margin-top: 16px; }
.prose .chained-quiz-choice { margin: 0; }
.prose .chained-quiz-label { display: flex; gap: 12px; align-items: center; margin: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 4px; cursor: pointer; font-family: var(--sans); font-size: 16px; line-height: 1.4; color: var(--ink); transition: border-color .2s, background .2s; }
.prose .chained-quiz-label:hover { border-color: var(--red); background: var(--red-tint); }
.prose .chained-quiz-label:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.prose .chained-quiz-radio, .prose .chained-quiz-checkbox { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.prose .chained-quiz-action input[type="button"], .prose .chained-quiz input[type="submit"] { margin-top: 16px; padding: 10px 20px; border: 0; border-radius: 8px; background: var(--red); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 15px; cursor: pointer; }
.prose .chained-quiz-area > :is(h2, h3, h4, p):first-child { margin-top: 0; }
@media (max-width: 640px) { .prose .chained-quiz { padding: 20px 16px; } }
/* WordPress „Textfarbe“ verpackt Text in <mark class="has-inline-color">: das ist Farbe, kein Textmarker (z. B. graue Bildnachweise) */
.prose mark.has-inline-color { background: none; padding: 0; }
/* WordPress-Farbe „Cyan-bläuliches Grau“ (#abb8c3, ca. 2:1 auf Weiß) in Bestandsbeiträgen: lesbares Grau des Themes statt dessen */
.prose .has-cyan-bluish-gray-color { color: var(--ink-3) !important; }
/* Quiz-Beiträge: Abstandhalter und Trennlinien direkt vor und nach dem Quiz (oder dem Spaltenblock, in dem es steckt) stammen aus dem alten
   Layout (bis 170 px Leerraum); der Kasten bringt eigene Abstände */
.prose :is(.wp-block-spacer, hr.wp-block-separator):is(:has(+ :is(.chained-quiz, .wp-block-columns:has(.chained-quiz))), :has(+ :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.chained-quiz, .wp-block-columns:has(.chained-quiz))), :has(+ :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.chained-quiz, .wp-block-columns:has(.chained-quiz))), :has(+ :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.chained-quiz, .wp-block-columns:has(.chained-quiz)))),
.prose :is(.chained-quiz, .wp-block-columns:has(.chained-quiz)) + :is(.wp-block-spacer, hr.wp-block-separator),
.prose :is(.chained-quiz, .wp-block-columns:has(.chained-quiz)) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator),
.prose :is(.chained-quiz, .wp-block-columns:has(.chained-quiz)) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator),
.prose :is(.chained-quiz, .wp-block-columns:has(.chained-quiz)) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator, script) + :is(.wp-block-spacer, hr.wp-block-separator) { display: none; }
.prose .wp-block-column > .chained-quiz:last-child { margin-bottom: 0; }
/* Jede Frage hat unter der Überschrift einen leeren Absatz (&nbsp;, in allen 59 Fragen geprüft 26.10.2026) */
.prose .chained-quiz-question > :is(h2, h3, h4) + p:last-child { display: none; }
.prose .chained-quiz-choices { margin-top: 18px; }

/* Startseite: 9 Rasterkarten füllen ab 1500 px (3 Spalten) die Höhe neben der Seitenleiste; darunter (2 Spalten/1 Spalte) wie bisher 6 */
@media (max-width: 1499px) { .home .layout .cards > :nth-child(n+7) { display: none; } }

/* Rubrikseiten: Textblock unten auf dem Hintergrundbild der Rubrik (wie live), Text in heller Karte links */
.seo.seo-bild { background-size: cover; background-position: center; padding: 72px 0; }
.seo.seo-bild .seo-in { grid-template-columns: minmax(0, 620px); gap: 28px; background: rgba(255, 255, 255, .93); border-radius: 6px; padding: 36px 40px; box-shadow: var(--shadow); max-width: 700px; }
.seo.seo-bild .cta { border-top: 1px solid var(--line-2); padding-top: 24px; }
@media (max-width: 1000px) { .seo.seo-bild { padding: 40px 16px; } .seo.seo-bild .seo-in { padding: 26px 22px; } }

/* Startseite: „Alle Rubriken“-Leiste vor dem Fußbereich (Regeln wie entwurf-rubrik.css) */
.home .rub { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 72px; }
.home .rub a { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: #fff; border-radius: 4px; padding: 24px 12px 20px; box-shadow: var(--shadow); transition: transform .3s, box-shadow .3s; }
.home .rub a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.home .rub svg { width: 42px; height: 32px; color: var(--red); }
.home .rub span { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.2; }
@media (max-width: 1000px) { .home .rub { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .home .rub { grid-template-columns: 1fr 1fr; } }

/* Handy: Experten zweispaltig statt einer Spalte mit großen Fotos (Burk 27.10.: „nimmt so viel Platz ein“) */
@media (max-width: 600px) { .experts-grid { grid-template-columns: 1fr 1fr; gap: 28px 14px; padding: 32px var(--gutter); } .expert .ph { margin-bottom: 10px; } .expert h4 { font-size: 17px; } .expert .role { font-size: 12.5px; } .expert .quote { font-size: 13.5px; line-height: 1.5; margin-top: 8px; } }

/* Menüleiste genau so breit wie der Inhalt (1240 px bzw. Fenster minus Rand): erster Punkt bündig links, Suche bündig rechts, dazwischen gleich verteilt.
   Vorher wuchs die Leiste mit Schrift und Abständen und war nur zufällig gleich breit (Burk 27.10.). */
.ap-hnav { align-self: stretch; margin-inline: -24px; }
.ap-hnav .ap-nav { width: min(1240px, 100% - 2 * clamp(16px, 2vw, 32px)); margin-inline: auto; justify-content: space-between; }
.ap-header .ap-hnav .ap-nav > li > a { padding-inline: 0; }

/* Beitrag auf einer Karte mit Rand und Schatten wie auf der bisherigen Seite (Burk 27.10.); Schatten wie die Karten der Seitenleiste, auf Tablet/Handy ohne Karte */
@media (min-width: 1100px) { .article-main { background: #fff; border: 1px solid #efece8; border-radius: 4px; padding: 44px 52px 52px; box-shadow: 0 1px 2px rgba(40,30,28,.05), 0 14px 34px -22px rgba(40,30,28,.28); } }

/* Rubrik-Kopf mit Bild über die volle Breite und Textkarte davor (wie die bisherige Seite, Burk 27.10.); Bildausschnitt je Rubrik: fokus in ap_rubriken() */
.intro-bild { position: relative; background: var(--bg-soft); display: flex; align-items: center; min-height: clamp(460px, 40vw, 640px); padding-block: 48px; }
.intro-hg { position: absolute; inset: 0; margin: 0; }
.intro-hg img { width: 100%; height: 100%; object-fit: cover; }
.intro-bild > .container { position: relative; width: 100%; }
.intro-karte { max-width: 620px; background: rgba(255, 255, 255, .92); border-radius: 6px; padding: 38px 40px 34px; box-shadow: 0 2px 6px rgba(40,30,28,.08), 0 18px 40px -22px rgba(40,30,28,.4); }
.intro-karte > :first-child { margin-top: 0; }
@media (max-width: 700px) {
	.intro-bild { display: block; min-height: 0; padding: 0 0 8px; }
	.intro-hg { position: static; aspect-ratio: 16 / 10; }
	.intro-karte { max-width: none; margin-top: -48px; padding: 26px 22px 22px; background: #fff; }
}

/* Borlabs: schwebenden Knopf ausblenden (Burk 31.10.2026). Borlabs erzwingt ihn bei aktivem IAB TCF; zurück in die Einstellungen geht es über
   „Cookie-Einstellungen“ im Fuß (footer.php), das nennt IAB Europe als Beispiel für den Weg zurück in den Dialog. */
#BorlabsCookieWidget { display: none !important; } /* Borlabs setzt am Knopf selbst inline display:block !important, darum der Container */
#BorlabsCookieWidget .brlbs-cmpnt-widget { visibility: hidden !important; pointer-events: none !important; }
.borlabs-cookie-open-dialog-preferences, .borlabs-cookie-open-dialog-preferences a { white-space: nowrap; } /* „Cookie-Einstellungen“ im Fuß nicht am Bindestrich umbrechen */

/* Artikeltitel und Zwischenüberschriften laufen bis zum Rand, nur kein einzelnes Wort in der letzten Zeile (Burk 02.11.2026). */
.article-title, .prose h2 { text-wrap: pretty; }