/**
 * OSTBRONX – Design-System (Tokens + Komponenten) + Utility-Styles.
 * CI-Farben/Schriften kommen aus theme.json (--wp--preset--*);
 * die --ob-* Tokens spiegeln den verbindlichen Handover (ostbronx-tokens.css)
 * für Komponenten, die in eigenem Markup (Header/Footer/ACF-Blöcke) leben.
 */

:root {
	--ob-ink:#141414;
	--ob-paper:#ffffff;
	--ob-paper-warm:#F4F2EC;
	--ob-grey:#5F5E5A;
	--ob-border:#E0DFD8;
	--ob-blau:#2B4F6B;
	--ob-blau-wash:#A6BFCD;
	--ob-magenta:#E4007C;
	--ob-magenta-ink:#A8005C;
	--ob-magenta-wash:#F4B8D2;
	--ob-gelb:#F5C518;
	--ob-gelb-wash:#F9DE82;
	--ob-ocker:#9A6E00;
	--ob-gruen:#1F8A5B;
	--ob-font-display:"Super Grotesk","Helvetica Neue",Arial,sans-serif;
	--ob-font-mono:"Cella","Super Grotesk",monospace;
	--ob-maxw:1280px;
	--ob-colmax:1280px;
	/* Gutter EXAKT wie das globale Root-Padding (theme.json), damit Sektionen
	   (Gutter via Eltern-Padding) und Header/Footer (eigener Gutter) auf JEDER
	   Breite dieselbe Kante haben. */
	--ob-gutter:clamp(20px, 5vw, 40px);
}

/* ---------- Layout-Container ---------- */
.ob-wrap{max-width:calc(var(--ob-maxw) + 2*var(--ob-gutter));margin-inline:auto;padding-inline:var(--ob-gutter);}
.ob-read{max-width:860px;}
/* Gutter ist clamp() -> skaliert stufenlos, kein Breakpoint-Override nötig. */

/* ---------- Typo-Helfer ---------- */
.ob-meta{font-family:var(--ob-font-mono);font-size:16px;letter-spacing:.05em;color:var(--ob-grey);}
.ob-kicker{font-family:var(--ob-font-mono);font-size:15px;letter-spacing:.07em;color:var(--ob-grey);text-transform:uppercase;}
.ob-accent-magenta{color:var(--ob-magenta);}
.ob-accent-blau{color:var(--ob-blau);}
.ob-h1{font-family:var(--ob-font-display);font-weight:700;font-size:clamp(40px,7vw,84px);line-height:.9;letter-spacing:-.02em;}
.ob-h2{font-family:var(--ob-font-display);font-weight:700;font-size:clamp(28px,4vw,46px);line-height:1;letter-spacing:-.01em;margin:0 0 30px;}
.ob-h3{font-family:var(--ob-font-display);font-weight:700;font-size:24px;line-height:1.1;}
.ob-lead{font-size:clamp(20px,2.4vw,27px);line-height:1.45;}
.ob-body{font-size:20px;line-height:1.6;}

/* ---------- Buttons ---------- */
.ob-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ob-font-display);font-weight:700;font-size:17px;line-height:1.1;padding:14px 24px;text-decoration:none;border:0;cursor:pointer;}
.ob-btn--primary{background:var(--ob-magenta);color:#fff;}
.ob-btn--ink{background:var(--ob-ink);color:#fff;}
.ob-btn--blau{background:var(--ob-blau);color:#fff;}
.ob-btn--outline{background:#fff;color:var(--ob-ink);border:2px solid var(--ob-ink);}

/* ---------- Karten / Boxen ---------- */
.ob-card{background:#fff;border:2px solid var(--ob-ink);padding:24px 22px;}
.ob-card--top-blau{border-top:6px solid var(--ob-blau);}
.ob-card--top-magenta{border-top:6px solid var(--ob-magenta);}
.ob-card--top-gelb{border-top:6px solid var(--ob-gelb);}
.ob-box{background:var(--ob-paper-warm);border:2px solid var(--ob-ink);padding:30px 32px;}
.ob-box--dark{background:var(--ob-ink);color:#fff;}

/* ---------- H5P-Platzhalter (Style-Rahmen, Inhalt = Embed) ---------- */
.ob-h5p-slot{border:2px dashed var(--ob-blau);background:#F1F5FB;padding:24px 26px;}
.ob-h5p-slot__tag{font-family:var(--ob-font-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ob-magenta-ink);margin-bottom:10px;}
.ob-h5p-slot__title{font-family:var(--ob-font-display);font-weight:700;font-size:22px;color:var(--ob-ink);margin:0;}
.ob-h5p-slot__type{font-family:var(--ob-font-mono);font-size:14.5px;color:var(--ob-blau);margin:6px 0 10px;}

/* ---------- Trenner (drei Zonen-Diamanten, volle Breite) ---------- */
.ob-divider{display:flex;align-items:center;justify-content:center;gap:9px;margin:64px auto 60px;}
.ob-divider::before,.ob-divider::after{content:"";height:1px;flex:1;background:var(--ob-border);}
.ob-divider i{width:9px;height:9px;display:block;transform:rotate(45deg);}
.ob-divider i:nth-child(1){background:var(--ob-blau);}
.ob-divider i:nth-child(2){background:var(--ob-magenta);}
.ob-divider i:nth-child(3){background:var(--ob-gelb);}

/* ---------- Duotone (Behördenblau / Magenta) ---------- */
.ob-duotone{position:relative;}
.ob-duotone img{filter:grayscale(1) contrast(1.12) brightness(1.02);display:block;width:100%;}
.ob-duotone::before{content:"";position:absolute;inset:0;background:var(--ob-blau);mix-blend-mode:lighten;}
.ob-duotone::after{content:"";position:absolute;inset:0;background:#EDE7DA;mix-blend-mode:darken;}
.ob-duotone--magenta::before{background:#7A0040;}
.ob-duotone--magenta::after{background:#F8D6E4;}

/* Sichtbarer Skip-Link (BITV: Tastaturbedienung) */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--demokratie);
	color: var(--wp--preset--color--paper);
	outline: 2px solid var(--wp--preset--color--graffiti);
	outline-offset: 2px;
}

/* Logo im Kopfbereich (SVG direkt eingebunden, kein Mediathek-Upload) */
.ostbronx-logo {
	display: inline-flex;
	align-items: center;
	margin-right: auto; /* Logo links, Navigation rechts */
}
.ostbronx-logo img,
.ostbronx-logo svg {
	display: block;
	height: clamp(56px, 8vw, 96px);
	width: auto;
}

/* Einstiegs-Kacheln: Farbe rahmt, Inhalt bleibt ruhig (Modell 1) */
.einstieg {
	color: var(--wp--preset--color--ink);
	border-bottom: 6px solid currentColor;
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}
.einstieg--demokratie { background: var(--wp--preset--color--demokratie-wash); border-bottom-color: var(--wp--preset--color--demokratie); }
.einstieg--hiphop     { background: var(--wp--preset--color--hiphop-wash);     border-bottom-color: var(--wp--preset--color--hiphop); }
.einstieg--graffiti   { background: var(--wp--preset--color--graffiti-wash);   border-bottom-color: var(--wp--preset--color--graffiti); }
.einstieg p { color: var(--wp--preset--color--ink); }

/* Abgesetzte Intro-Box auf der Startseite */
.ostbronx-introbox {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 6px solid var(--wp--preset--color--hiphop);
	background: var(--wp--preset--color--paper);
}

/* Drei Kurz-Statements (progressive disclosure) */
.ostbronx-statements {
	font-family: var(--wp--preset--font-family--cella);
	color: var(--wp--preset--color--hiphop-text);
}

/* Modul-Navigation: Kachel-Reihe M1–M5 (Design „Navigation") */
.module-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
	align-items: stretch;
}
.module-tile {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.8rem;
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	line-height: 1;
}
.module-tile__num {
	font-family: var(--wp--preset--font-family--super-grotesk);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	letter-spacing: -0.02em;
}
.module-tile__label {
	font-family: var(--wp--preset--font-family--super-grotesk);
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.12;
	text-align: left;
}
/* „selected" (aktuelle Modulseite) sowie Hover/Fokus = invertiert (wie im Design) */
a.module-tile:hover,
a.module-tile:focus-visible,
.module-tile.is-current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--ink);
}
.module-tile.is-current { font-weight: 700; }
/* Noch nicht verlinkte Module (Seiten folgen) */
.module-tile--upcoming {
	cursor: default;
	opacity: 0.55;
}

/* ===================== Startseite ===================== */

/* Hero */
.ostbronx-hero__title {
	letter-spacing: -0.02em;
	max-width: 16ch;
}
/* Gelb-Highlight hinter einem Keyword (Tinte auf Gelb = 11.3:1) */
.ostbronx-hl {
	background: var(--wp--preset--color--graffiti);
	color: var(--wp--preset--color--ink);
	padding: 0 0.12em;
	border-radius: 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
/* Kicker mit gelbem Marker */
.ostbronx-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--wp--preset--spacing--20);
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 700;
	color: var(--wp--preset--color--hiphop-text);
}
.ostbronx-kicker::before {
	content: "";
	display: inline-block;
	width: 1.8rem;
	height: 0.5rem;
	background: var(--wp--preset--color--graffiti);
}
.ostbronx-lead {
	max-width: 52ch;
	margin-top: var(--wp--preset--spacing--30);
}
.ostbronx-arrow {
	font-family: var(--wp--preset--font-family--cella);
	color: var(--wp--preset--color--hiphop-text);
	font-weight: 700;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	margin-top: var(--wp--preset--spacing--30);
}

/* Einstiegs-Kacheln: schicker (kräftige Kante, Eyebrow, Hover-Lift) */
.ostbronx-einstiege .wp-block-column {
	display: flex;
}
.ostbronx-einstiege .einstieg {
	border-bottom-width: 8px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ostbronx-einstiege .einstieg:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(20, 20, 20, 0.14);
}
.einstieg__eyebrow {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 700;
	margin: 0 0 0.25rem;
}
.einstieg h2 {
	margin-top: 0;
}

/* CTA-Band (Behördenblau, weiße Schrift, gelbe Akzente) */
.ostbronx-cta {
	border-top: 8px solid var(--wp--preset--color--graffiti);
}
.ostbronx-cta > * {
	max-width: 60ch;
}
.ostbronx-cta h2 {
	margin-top: 0;
}

/* Section-Titel mit farbigem Marker */
.ostbronx-section-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.ostbronx-section-title::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 0.4rem;
	height: 1.2em;
	background: var(--wp--preset--color--hiphop);
}

/* Pull-Quote (Akzentschrift Cella, blaue Tinte, gelbe Kante) */
.ostbronx-pullquote {
	font-family: var(--wp--preset--font-family--cella);
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	line-height: 1.3;
	color: var(--wp--preset--color--demokratie);
	border-left: 6px solid var(--wp--preset--color--graffiti);
	padding-left: 1rem;
	margin-top: var(--wp--preset--spacing--40);
}

/* ============ Wiederverwendbare Inhalts-Styles (Block-Styles) ============ */

/* Callout-Kästen: Wash-Fläche, farbige Kante, Tinte als Text (BITV) */
.is-style-ostbronx-callout-gelb,
.is-style-ostbronx-callout-blau,
.is-style-ostbronx-callout-magenta {
	color: var(--wp--preset--color--ink);
	border-left: 6px solid;
	padding: var(--wp--preset--spacing--40);
}
.is-style-ostbronx-callout-gelb {
	background: var(--wp--preset--color--graffiti-wash);
	border-left-color: var(--wp--preset--color--graffiti);
}
.is-style-ostbronx-callout-gelb :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--graffiti-text);
}
.is-style-ostbronx-callout-blau {
	background: var(--wp--preset--color--demokratie-wash);
	border-left-color: var(--wp--preset--color--demokratie);
}
.is-style-ostbronx-callout-blau :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--demokratie);
}
.is-style-ostbronx-callout-magenta {
	background: var(--wp--preset--color--hiphop-wash);
	border-left-color: var(--wp--preset--color--hiphop);
}
.is-style-ostbronx-callout-magenta :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--hiphop-text);
}

/* Gestrichelte Sektion (z. B. Galerie-/Themenblock) */
.is-style-ostbronx-dashed {
	border: 2px dashed var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40);
}
.is-style-ostbronx-dashed > :where(h1, h2, h3) {
	color: var(--wp--preset--color--hiphop-text);
}

/* Marker-Überschrift (linker Farbbalken) */
.is-style-ostbronx-marker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.is-style-ostbronx-marker::before {
	content: "";
	flex: 0 0 auto;
	width: 0.4rem;
	height: 1.1em;
	background: var(--wp--preset--color--hiphop);
}

/* Details / Aufklapper in CI (Standard + Block-Style „OSTBRONX") */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 6px solid var(--wp--preset--color--demokratie);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--paper);
}
.wp-block-details > summary {
	font-family: var(--wp--preset--font-family--super-grotesk);
	font-weight: 700;
	color: var(--wp--preset--color--demokratie);
	cursor: pointer;
}

/* Sichtbarer Fokus-Rahmen global (BITV) */
:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--demokratie);
	outline-offset: 2px;
}

/* 404-Seite – zweispaltig: GIF neben Text */
.ob-404 {
	max-width: 940px;
	margin: 0 auto;
	padding: clamp(40px, 8vw, 96px) 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(24px, 5vw, 56px);
}
.ob-404__gif {
	flex: 0 0 auto;
	width: clamp(220px, 34%, 320px);
	margin: 0;
}
.ob-404__gif img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.ob-404__gifcredit {
	margin-top: 6px;
	font-family: var(--ob-font-mono, monospace);
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--wp--preset--color--ink-muted, #5F5E5A);
}
.ob-404__gifcredit a {
	color: inherit;
}
/* Fallback, solange/falls kein GIF vorhanden ist. */
.ob-404__gif.is-missing::after {
	content: "🕺";
	display: block;
	text-align: center;
	font-size: clamp(64px, 14vw, 110px);
	line-height: 1;
}
.ob-404__body {
	flex: 1 1 320px;
	min-width: 0;
}
.ob-404__title {
	flex: 1 1 100%;
	font-family: "Super Grotesk", sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4.2vw, 44px);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 .3em;
}
.ob-404__code {
	color: var(--wp--preset--color--hiphop, #E4007C);
}
.ob-404__joke {
	margin: 0 0 1.1em;
	border: 0;
	padding: 0;
}
.ob-404__joke p {
	font-family: "Cella", Georgia, serif;
	font-size: clamp(18px, 2.4vw, 23px);
	line-height: 1.4;
	color: var(--wp--preset--color--ink, #141414);
	margin: 0;
}
.ob-404__text {
	color: var(--wp--preset--color--ink-muted, #5F5E5A);
	margin: 0 0 1.3em;
	max-width: 46ch;
}
.ob-404__btn {
	display: inline-block;
	background: var(--wp--preset--color--ink, #141414);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	padding: .7em 1.4em;
	border-radius: 999px;
}
.ob-404__btn:hover,
.ob-404__btn:focus-visible {
	background: var(--wp--preset--color--hiphop, #E4007C);
}
.ob-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	align-items: center;
}
.ob-404__link {
	color: var(--wp--preset--color--ink-muted, #5F5E5A);
}
/* Mobil: untereinander, zentriert */
@media (max-width: 720px) {
	.ob-404 {
		flex-direction: column;
		text-align: center;
	}
	.ob-404__gif {
		width: min(280px, 80%);
	}
	.ob-404__text {
		max-width: none;
	}
	.ob-404__actions {
		justify-content: center;
	}
}