/**
 * OSTBRONX – Stil-Angleichung der Lernmodule (M1/M2).
 *
 * Andreas' Modul-Inhalt (eigene „Lernmodule v2.0"-CSS, rot-basiert) bleibt
 * unangetastet. Wir biegen nur die CSS-Variablen des Moduls auf die OB-CI um
 * (rot → Magenta, kantig statt rund, Behördenblau-Akzente) und harmonisieren
 * ein paar Bausteine. Die H5P-Inhalte werden separat über h5p-ci.css angeglichen.
 */

.ostbronx-module {
	/* Akzent rot → OB-Magenta, Dunkel → Tinte, kantig, Content-Breite OB */
	--ost-red: var(--ob-magenta) !important;
	--ost-dark: var(--ob-ink) !important;
	--ost-light: var(--ob-paper-warm) !important;
	--ost-grey: var(--ob-grey) !important;
	--ost-border: var(--ob-border) !important;
	--ost-radius: 0px !important;
	--ost-shadow: 7px 7px 0 rgba(20,20,20,.10) !important;
	--ost-width: 900px !important;       /* fokussierte Lesespalte wie im Claude-Design */
	font-family: var(--ob-font-display) !important;
	color: var(--ob-ink);
}
.ostbronx-module :is(p, li, span, blockquote, summary, div) { font-family: var(--ob-font-display); }
.ostbronx-module :is(.image-credit, .ost-kicker, .subtitle-meta) { font-family: var(--ob-font-mono) !important; }

/* Überschriften klar in Super Grotesk, eng */
.ostbronx-module :is(h1,h2,h3,h4) {
	font-family: var(--ob-font-display);
	letter-spacing: -0.01em;
}

/* Meta-/Kicker-Ebene in Cella, falls vorhanden */
.ostbronx-module .ost-kicker,
.ostbronx-module .ostbronx-hero__eyebrow,
.ostbronx-module .quellen-box__label {
	font-family: var(--ob-font-mono);
	letter-spacing: 0.06em;
}

/* Buttons in OB-Magenta, kantig */
.ostbronx-module .ost-button {
	border-radius: 0 !important;
	background: var(--ob-magenta);
	color: #fff;
}

/* Quellen-Box im OB-Stil (warmes Papier, kantig, blaue Kante) */
.ostbronx-module .quellen-box {
	border-radius: 0 !important;
	background: var(--ob-paper-warm);
	border-left: 6px solid var(--ob-blau);
}

/* H5P-Platzhalter/Wrapper kantig + blau gestrichelt wie unsere Slots */
.ostbronx-module .h5p-placeholder {
	border-radius: 0 !important;
	border: 0;
	border-left: 5px solid var(--ob-blau);
	background: #F1F5FB;
}

/* Divider in den drei Zonenfarben-Diamanten ist global (.ob-divider);
   der modul-eigene .ost-divider wird nur kantig/neutralisiert */
.ostbronx-module .ost-divider {
	border-radius: 0 !important;
}

/* ===== OB-Modul-Layout (Angleichung an Claude-Design) ===== */

/* Modul-Kopf: Eyebrow + großer, linksbündiger Titel + Untertitel */
.ostbronx-module .ostbronx-header {
	text-align: left !important;
	margin-bottom: 40px !important;
	padding-bottom: 22px;
	border-bottom: 2px solid var(--ob-ink);
}
.ostbronx-module .ostbronx-header::before {
	content: "LERNMODUL";
	display: block;
	font-family: var(--ob-font-mono);
	font-size: 15px;
	letter-spacing: .08em;
	color: var(--ob-magenta-ink);
	margin-bottom: 14px;
}
.ostbronx-module .ostbronx-header h1 {
	font-size: clamp(38px, 6vw, 64px) !important;
	font-weight: 700 !important;
	line-height: .94 !important;
	letter-spacing: -.02em;
	margin-bottom: 12px !important;
}
.ostbronx-module .ostbronx-header .subtitle {
	font-size: clamp(18px, 2.2vw, 23px) !important;
	color: var(--ob-grey) !important;
	line-height: 1.4 !important;
}

/* Fließtext-Rhythmus */
.ostbronx-module .ostbronx-content p,
.ostbronx-module .ostbronx-content li {
	font-size: 19px;
	line-height: 1.65;
}
.ostbronx-module .ostbronx-content h2 {
	font-size: clamp(26px, 3.4vw, 34px) !important;
	letter-spacing: -.01em;
	border-left-width: 6px !important;
}

/* Zeitzeugen-/Zitatbox: hartkodierte Orange → OB warmes Papier + Blau */
.ostbronx-module .zeitzeugen-box {
	background: var(--ob-paper-warm) !important;
	border: 2px solid var(--ob-ink) !important;
	border-left: 6px solid var(--ob-blau) !important;
}
.ostbronx-module .zeitzeugen-box :is(h3, h4, strong) { color: var(--ob-blau) !important; }

/* H5P-Interaktionen: mehr Luft */
.ostbronx-module .h5p-container { margin: 36px 0; }

/* Galerie als Raster */
.ostbronx-module .ost-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}
.ostbronx-module .ost-gallery img { width: 100%; height: auto; display: block; }

/* Bildnachweis dezent in Cella */
.ostbronx-module .image-credit {
	font-size: 14.5px !important;
	color: var(--ob-grey) !important;
	margin-top: 6px;
}

/* ============================================================
   OB · Modul-Layout „Claude Design" (Klassen m1-*) — für neu
   aufgebaute Modulseiten (Wrapper .ob-modul). Tokens als Hex
   gespiegelt aus der Referenz.
   ============================================================ */
.ob-modul{font-family:var(--ob-font-display);color:var(--ob-ink);}
.ob-modul .m1-wrap{max-width:1360px;margin:0 auto;padding:0 40px;}
/* Abschnitt: zentrierter 1280-Container, Lesespalte LINKS an der Content-Kante */
.ob-modul .m1-section{max-width:1360px;margin-inline:auto;padding:56px 40px 6px;}
/* Kanten-Fluchtung: die align:full-Wrapper bekommen vom Theme negative Margins
   (.has-global-padding > .alignfull) und säßen sonst linksbündig. margin auto
   erzwingt die Zentrierung -> fluchtet mit Header/Footer und Modul-Hero. */
.ob-modul .m1-wrap,.ob-modul .m1-section,.ob-modul .m1-h5pwrap,.ob-modul .m1-box,.ob-modul .m1-media,.ob-modul .m1-nextmodul{
	margin-left:auto !important;margin-right:auto !important;
}
/* Gutter auf JEDER Breite: bg/border- und Medien-Boxen sind align:full und füllen
   bei Tablet/Mobile sonst die ganze Breite (kleben am Rand). width:min(...) hält
   immer 40px (Tablet/Desktop) bzw. 20px (Mobile) Außenrand. */
.ob-modul .m1-h5pwrap,.ob-modul .m1-box,.ob-modul .m1-media,.ob-modul .m1-nextmodul{
	width:min(1280px, calc(100% - 80px)) !important;max-width:none !important;
}
@media(max-width:760px){
	.ob-modul .m1-h5pwrap,.ob-modul .m1-box,.ob-modul .m1-media,.ob-modul .m1-nextmodul{width:calc(100% - 40px) !important;}
}
/* m1-read ist ein constrained Group -> WP gibt ihm has-global-padding (40px innen),
   was Kicker/Text/Galerie nach rechts einrückt. Padding hier entfernen, damit die
   Lesespalte bündig an der Content-Kante (links) sitzt. */
.ob-modul .m1-read{max-width:820px;margin:0;padding-left:0 !important;padding-right:0 !important;}
/* Abschnitts-Kicker wie Original: „09 · Ausblick" (Nummer + Name) */
.ob-modul .m1-kicker{font-family:var(--ob-font-mono);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:#A8005C;margin:0 0 10px;display:flex;align-items:baseline;gap:12px;}
.ob-modul .m1-kicker b{color:#2B4F6B;font-weight:700;}
.ob-modul .m1-h2{font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.0;letter-spacing:-.01em;margin:0 0 22px;}
/* Zwischen-Überschrift (neuer Abschnitt mitten im Lesefluss) – mehr Luft oben */
.ob-modul .m1-subhead{margin-top:56px;}
.ob-modul .m1-read p{font-size:21px;line-height:1.7;margin:0 0 18px;}
/* Klassenlose Fließtext-Absätze im Modul (z. B. Einstiegstexte) = lesbarer Body */
.ob-modul p:not([class]){font-size:21px;line-height:1.7;margin:0 0 18px;}
.ob-modul .m1-read p strong{font-weight:700;}

/* H5P-Slots — Rahmen + echtes Embed */
.ob-modul .m1-h5pwrap{max-width:1280px;margin:72px auto 8px;}
.ob-modul .m1-h5plead{font-size:19px;line-height:1.6;color:#141414;margin:0 0 14px;}
.ob-modul .h5p-slot{border:0;background:transparent;padding:0;}
/* Kleiner Tag über der Aufgabe (z. B. „AUFGABE" / „BILDVERGLEICH") – „H5P" wurde
   aus den Inhalten entfernt, da für Betrachter irrelevant. */
.ob-modul .h5p-slot__tag{font-family:var(--ob-font-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#A8005C;margin:0 0 3px;}
.ob-modul .h5p-slot__title{font-weight:700;font-size:24px;color:#141414;line-height:1.1;margin:0;}
.ob-modul .h5p-slot__type{font-family:var(--ob-font-mono);font-size:14.5px;color:#2B4F6B;margin:6px 0 10px;}
.ob-modul .h5p-slot__desc{font-size:20px;line-height:1.6;color:#141414;}
/* Hervorgehobene Frage (highlight + wichtig) */
.ob-modul .m1-frage{font-weight:700;font-size:18.5px;line-height:1.45;background:#FBE9F2;border-left:4px solid #E4007C;padding:12px 16px;color:#141414;margin:8px 0 0;}
.ob-modul .h5p-slot__embed{margin-top:16px;background:#fff;}
.ob-modul .h5p-slot__embed .h5p-content{border:0;}

/* Box / Medien */
.ob-modul .m1-box{max-width:1280px;margin:34px auto 8px;background:#F4F2EC;border:3px solid #141414;padding:30px 32px;}
.ob-modul .m1-box--dark{background:#141414;color:#fff;}
.ob-modul .m1-box h3{font-weight:700;font-size:26px;margin:0 0 16px;line-height:1.1;}
.ob-modul .m1-box p{font-size:18.5px;line-height:1.65;margin:0 0 14px;}
.ob-modul .m1-box--dark p{color:rgba(255,255,255,.86);}
/* Dark-Box: Überschriften/Text hell erzwingen (globale Heading-Farbe würde sonst
   schwarz-auf-schwarz rendern). */
.ob-modul .m1-box--dark :is(h2,h3,h4,strong){color:#fff !important;}
.ob-modul .m1-box--dark :is(p,li,a){color:rgba(255,255,255,.88) !important;}
/* Bildnachweise unter dem Bildvergleich: 2 Spalten (je unter seinem Bild),
   auf Content-Breite begrenzt (sonst full-bleed). */
/* Bildnachweise untereinander (gestapelt), an der Content-Kante (links, unter dem
   Bild). .ob-modul ist is-layout-flow -> ohne max-width+margin:auto würden die
   Credits am Gruppenrand (x=0) kleben statt an der Content-Kante zu sitzen. */
.ob-modul .m1-credits{display:flex;flex-direction:column;gap:2px;max-width:1360px;margin:12px auto 0;padding:0 40px;box-sizing:border-box;}
.ob-modul .m1-credits .wp-block-column{margin:0;flex:none;width:auto !important;}

.ob-modul .m1-box video,.ob-modul .m1-box audio{width:100%;display:block;margin-top:8px;}
.ob-modul .m1-box details{margin-top:18px;border-top:1px solid #D8D6CE;padding-top:14px;}
.ob-modul .m1-box--dark details{border-top-color:rgba(255,255,255,.2);}
.ob-modul .m1-box summary{cursor:pointer;font-family:var(--ob-font-mono);font-size:15px;letter-spacing:.04em;color:#2B4F6B;font-weight:700;}
.ob-modul .m1-box--dark summary{color:#F4B8D2;}
.ob-modul .m1-box details p{font-size:17px;line-height:1.6;}
/* Akkordeon (Liedtext / „Wie kam Hip-Hop…") – klar als Aufklapp-Element:
   bündig links (kein Marker-Einzug), volle Breite, Titel links + klarer Pfeil rechts. */
.ob-modul .wp-block-details{border:0 !important;border-radius:0 !important;margin:22px 0 0;padding:0 !important;background:transparent;}
.ob-modul .wp-block-details > summary{
	cursor:pointer;display:flex !important;align-items:center;justify-content:space-between;gap:14px;list-style:none !important;
	margin:0;padding:17px 22px;background:#2B4F6B;color:#fff;
	font-family:var(--ob-font-mono);font-size:15px;letter-spacing:.02em;font-weight:700;}
.ob-modul .wp-block-details > summary::-webkit-details-marker{display:none !important;}
/* klarer, großer Pfeil rechts, der beim Öffnen rotiert */
.ob-modul .wp-block-details > summary::after{
	content:"";flex:none;width:13px;height:13px;border-right:3px solid #fff;border-bottom:3px solid #fff;
	transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;}
.ob-modul .wp-block-details[open] > summary::after{transform:rotate(-135deg) translate(-1px,-1px);}
.ob-modul .wp-block-details > summary:hover,.ob-modul .wp-block-details > summary:focus-visible{background:#E4007C;}
.ob-modul .wp-block-details > :not(summary){margin:0;padding:14px 18px 6px;}

/* Medien + Galerie */
.ob-modul .m1-media{max-width:1280px;margin:34px auto 8px;}
.ob-modul .m1-media h3{font-weight:700;font-size:26px;margin:0 0 14px;}
.ob-modul .m1-media p{font-size:19px;line-height:1.65;margin:0 0 16px;max-width:720px;}
/* Galerie als Raster (3 Spalten, gecroppte 4:3-Bilder) */
.ob-modul .m1-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
/* Galerie steckt in der Lesespalte (820px) -> auf volle Content-Breite ausbrechen.
   Lesespalte sitzt an der Content-Kante links, daher nach rechts aufziehen. */
.ob-modul .m1-read .m1-gallery{
	max-width:none !important;width:min(1280px, calc(100vw - 80px)) !important;
	margin-left:0 !important;margin-right:0 !important;margin-block:28px;}
.ob-modul .m1-gallery .wp-block-image{margin:0;width:auto;}
.ob-modul .m1-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06);background:#2B4F6B;}
@media(max-width:760px){.ob-modul .m1-gallery{grid-template-columns:1fr 1fr;}}
/* Bildnachweis als Caption direkt am Bild */
.ob-modul figcaption.image-credit,.ob-modul .wp-block-image figcaption{font-family:var(--ob-font-mono);font-size:14px;line-height:1.5;color:#5F5E5A;margin-top:6px;text-align:left;}

.ob-modul .m1-credit{font-family:var(--ob-font-mono);font-size:14.5px;line-height:1.7;color:#5F5E5A;margin-top:12px;}

/* Trenner (drei Zonen-Diamanten) */
.ob-modul .m1-divider{display:flex;align-items:center;justify-content:center;gap:9px;margin:96px auto 88px;}
.ob-modul .m1-divider::before,.ob-modul .m1-divider::after{content:"";height:1px;flex:1;background:#C5C3BA;}
.ob-modul .m1-divider i{width:9px;height:9px;display:block;transform:rotate(45deg);}
.ob-modul .m1-divider i:nth-child(1){background:#2B4F6B;}
.ob-modul .m1-divider i:nth-child(2){background:#E4007C;}
.ob-modul .m1-divider i:nth-child(3){background:#F5C518;}

@media(max-width:760px){
	.ob-modul .m1-wrap{padding:0 22px;}
	.ob-modul .m1-read p{font-size:19px;}
	.ob-modul .m1-box,.ob-modul .h5p-slot{padding:22px 20px;}
}

/* Cover-Hero (editierbarer Core-Cover-Block) */
.ob-modul .m1-hero{color:#fff;}
.ob-modul .m1-hero .wp-block-cover__inner-container{max-width:1360px;width:100%;margin-inline:auto;padding:70px 40px 54px;text-align:left;}
.ob-modul .m1-hero img.wp-block-cover__image-background{filter:grayscale(1) contrast(1.12) brightness(.62);}
.ob-modul .m1-hero__eyebrow{font-family:var(--ob-font-mono);font-size:15px;letter-spacing:.1em;color:#F5C518;margin:0 0 18px;}
.ob-modul .m1-hero__title{font-weight:700;font-size:clamp(40px,7vw,84px);line-height:.92;letter-spacing:-.02em;margin:0;max-width:16ch;color:#fff;}
.ob-modul .m1-hero__sub{font-size:clamp(18px,2.4vw,23px);line-height:1.4;color:rgba(255,255,255,.9);margin:20px 0 0;max-width:620px;}
.ob-modul .m1-hero__chips{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0;font-family:var(--ob-font-mono);font-size:14.5px;letter-spacing:.04em;color:#fff;}
.ob-modul .m1-hero__chips span{border:1px solid rgba(255,255,255,.4);padding:7px 13px;}
/* A11y: Text auf Foto zusätzlich abgesichert (Lesbarkeit + zukunftssicher bei
   Bildtausch). Der Kontrast wird primär über das 70%-Overlay garantiert. */
.ob-modul .m1-hero__eyebrow,.ob-modul .m1-hero__title,.ob-modul .m1-hero__sub,.ob-modul .m1-hero__chips{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.45);}
/* Cover-Default-Höhe neutralisieren */
.ob-modul .m1-hero.wp-block-cover{min-height:0;}
/* Box-/Slot-Inhalt füllt die Box (kein zentriertes contentSize) */
.ob-modul .m1-box > *,.ob-modul .h5p-slot > *{max-width:none;}

/* Cover-Inhalt linksbündig (nicht zentriert) */
.ob-modul .m1-hero .wp-block-cover__inner-container > *{margin-left:0 !important;margin-right:0 !important;}

/* Bildnachweis (mono, dezent) – EINHEITLICH überall, !important schlägt die
   20px von .m1-read p, die sonst Galerie-/Inline-Credits aufblähen. */
.ob-modul .image-credit,.ob-modul p.image-credit,.ob-modul figcaption.image-credit{
	font-family:var(--ob-font-mono) !important;font-size:13px !important;line-height:1.55 !important;
	color:#6B6A65 !important;margin:8px 0 0 !important;letter-spacing:0;font-weight:400 !important;}

/* Nächstes-Modul-Karte (wie Original) */
.ob-modul .m1-nextmodul{position:relative;max-width:1280px;margin:8px auto 0;background:#22384A;color:#fff;padding:32px 56px 32px 40px;}
.ob-modul .m1-nextmodul__label{font-family:var(--ob-font-mono);font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 6px;}
.ob-modul .m1-nextmodul__title{font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.1;margin:0;color:#fff;}
.ob-modul .m1-nextmodul__title a{color:#fff;text-decoration:none;}
.ob-modul .m1-nextmodul--live .m1-nextmodul__title a::after{content:"";position:absolute;inset:0;}
.ob-modul .m1-nextmodul--live{cursor:pointer;transition:background .15s ease;}
.ob-modul .m1-nextmodul--live:hover{background:#E4007C;}
.ob-modul .m1-nextmodul--soon{opacity:.9;}
.ob-modul .m1-nextmodul__arrow{position:absolute;right:40px;top:50%;transform:translateY(-50%);font-size:28px;margin:0;color:#fff;}

/* ImageJuxtaposition (Bildvergleich) nicht zu hoch für kleine Screens */
/* Vorher/Nachher (ImageJuxtaposition) läuft in einem iframe -> die Slider-Innereien
   sind per Theme-CSS nicht erreichbar. Stattdessen den iframe-CONTAINER im Haupt-DOM
   begrenzen; das H5P-Resize-JS skaliert den Slider dann auf diese Breite herunter,
   damit der Vorher/Nachher-Vergleich komplett auf den Desktop-Screen passt.
   (data-content-id 5 = Header-Juxtaposition in M1.) */
/* Interaktive H5P (Bildvergleich 5, SortParagraphs 4, MultiChoice 6,
   BranchingScenario 7, AudioRecorder 10) auf Bildbreite (~700px), links –
   damit die Boxen nicht über die ganze Breite laufen. CoursePresentation (8)
   bleibt breit (Folien-Deck). */
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="5"]),
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="4"]),
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="6"]),
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="7"]),
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="10"]){max-width:700px;margin-left:0;margin-right:auto;}
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="4"]) > iframe,
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="5"]) > iframe,
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="6"]) > iframe,
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="7"]) > iframe,
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="10"]) > iframe{width:100% !important;}
/* AudioRecorder (10) als Box: Rahmen + warmes Papier (Aufnahme „eingelassen") */
.ob-modul .h5p-iframe-wrapper:has(> iframe.h5p-iframe[data-content-id="10"]){background:#F4F2EC;border:3px solid #141414;padding:16px 18px;box-sizing:border-box;}
.ob-modul .h5p-image-juxtaposition-image{height:100% !important;}
.ob-modul .h5p-image-juxtaposition-image img{height:100% !important;width:100% !important;object-fit:cover !important;object-position:center;}