/*
 * jens-noack — Dark-Theme-Ebene, Richtung „Akademisches Profil" (Design-Exploration)
 * ------------------------------------------------------------------
 * Visuell orientiert an den persönlichen akademischen Websites von
 * Patrick Manser (patrick-manser.com) und Dr. Roberta Rosa Valtorta
 * (robertavaltorta.research.st): kompakter Profilkopf, ruhige einspaltige
 * Inhaltsführung, modulare Sektionen statt Marketing-Kacheln, Publikationen
 * als scanbare wissenschaftliche Liste. Vollständig eigenständige Umsetzung
 * im WordPress-Theme — keine Texte, Bilder, Logos, HTML/CSS/JS der
 * Referenzseiten übernommen; keine Owlstown-Abhängigkeiten.
 *
 * Ergänzt theme.json um:
 *  - gezielte Overrides für hartkodierte Inline-Farben aus Bestandsinhalten
 *    (Seiteninhalte bleiben unverändert — die Anpassung erfolgt im Theme)
 *  - Komponenten-Stile: Navigation/Overlay-Menü, Formulare (CF7, Suche),
 *    Tabellen, Code, Bilder, Fokus-Zustände, Pagination
 *
 * Farbwerte stammen aus den Presets (theme.json); Kontraste WCAG AA geprüft.
 */

/* ---------- Grundlagen ---------- */
html {
	color-scheme: dark; /* native Controls, Scrollbars dunkel */
}

::selection {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--petrol-deep);
}

/* ---------- Zweispalten-Layout Startseite (Referenz: patrick-manser.com / Argyle) ----------
   Struktur von oben nach unten:
   1. Vollbreiten-Banner unter dem Menü (wie Argyle .argyle-banner, 320 px, object-fit cover)
   2. Sidebar links (Porträt, Name, Adresse — sticky) + Hauptspalte rechts.
   Seiteninhalt bleibt bis auf den (explizit gewünschten) Banner unverändert. */
body.home .wp-block-post-content {
	display: grid;
	grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	max-width: 1100px;
	margin-inline: auto;
}

/* Banner (1. Kind): volle Breite über beide Spalten, Full-Bleed über den Rand,
   direkt unter dem Menü (explizite Zeile 1, damit das Grid es nicht nach unten schiebt).
   Höhe 284 px: endet bewusst ca. 10 px unter der Porträt-Unterkante (338 px,
   Bild 10 px angehoben) — mehr Bannerfläche sichtbar. Name und Adresse darunter
   liegen weiterhin ruhig auf dem Seitenhintergrund. */
body.home .wp-block-post-content > .wp-block-image:first-child {
	grid-column: 1 / -1;
	grid-row: 1;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
	height: 284px;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
}
body.home .wp-block-post-content > .wp-block-image:first-child img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	border-radius: 0;
	border: 0;
}
/* Dunkler Petrol-Verlauf über dem Banner (abgestimmte Bildbehandlung) */
body.home .wp-block-post-content > .wp-block-image:first-child::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 21, 28, 0.25) 0%, rgba(11, 21, 28, 0.55) 100%);
	pointer-events: none;
}

/* ---------- Fixierter Header ----------
   Das Menü bleibt oben stehen; der Inhalt scrollt darunter. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Hero-Gruppe (2. Kind) = Sidebar (erste Spalte, sticky) */
body.home .wp-block-post-content > .wp-block-group:nth-child(2) {
	grid-column: 1;
	grid-row: 2 / -1;
	position: sticky;
	top: 5.5rem; /* unter dem fixierten Header (≈ 4rem) + Abstand */
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}

/* Alle weiteren Gruppen (ab 3. Kind) = Hauptspalte; Vollbreiten-Bänder bleiben in der Spalte */
body.home .wp-block-post-content > .wp-block-group:nth-child(n + 3) {
	grid-column: 2;
}
/* About-Text (3. Kind) bündig mit dem Namen in der Sidebar:
   grid-row 1 legt ihn neben das Banner (Zeile 1, Spalte 2, Start y=64);
   margin-top = Name-Oberkante (368px) minus Zeilenstart (64px) → 304px.
   Seit 2026-08-22: h2 entfernt → Text-Oberkante exakt auf Name-Oberkante
   (keine 6px-Leading-Korrektur mehr nötig); +3px dann +2px nach Kundenwunsch,
   dann 1px zurück → insgesamt +4px. */
body.home .wp-block-post-content > .wp-block-group:nth-child(3) {
	grid-row: 1;
	margin-top: calc(5.5rem + 280px - 4rem + 4px);
}
body.home .wp-block-post-content > .wp-block-group.alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: auto !important;
	max-width: 100% !important;
}

/* Research-Focus-Karten (4. Kind): Boxen auf volle Spaltenhöhe strecken,
   damit alle drei Karten unten bündig abschließen. */
body.home .wp-block-post-content > .wp-block-group:nth-child(4) .wp-block-column {
	display: flex;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(4) .wp-block-column > .wp-block-group {
	width: 100%;
	flex-grow: 1;
}
/* Karten-Überschriften auf einheitliche Höhe: Die längste Überschrift
   (Karte 3, 4 Zeilen) braucht 104px, die kurzen 3 Zeilen (78px) — die
   min-height gleicht die Boxen an, damit die Texte darunter auf gemeinsamer
   Höhe starten. 104px → 89px: Text unter den Überschriften 15px höher. */
body.home .wp-block-post-content > .wp-block-group:nth-child(4) .wp-block-column h3 {
	min-height: 89px;
}
/* Karten-Gruppe unter den About-Text heben: About endet bei 531, Karten-Start
   611 (Anhebung 48px — Karten 25px höher als zuvor). */
body.home .wp-block-post-content > .wp-block-group:nth-child(4) {
	margin-top: -48px;
}
/* Text in den Karten ca. 50px höher: p-Abstand zur Überschrift (24px) auf 0,
   plus 25px Karten-Anhebung → Text-Start 49px höher. */
body.home .wp-block-post-content > .wp-block-group:nth-child(4) .wp-block-column p {
	margin-top: 0;
}

/* Newest Publications + Latest News: TESTWEISE Bildspalte auf exakt Bildbreite
   (18.75% ≈ 143px), Bilder 14:9. Nach Positions-Tausch (2026-08-22):
   Kind 6 = Latest News (Markup hat bereits 18.75/81.25),
   Kind 8 = Newest Publications (Markup 30/70 → hier umstellen).
   Latest News ist seit dem Query-Loop-Umbau ein wp:query mit
   post-featured-image (kein wp:image mehr). */
body.home .wp-block-post-content > .wp-block-group:nth-child(8) .wp-block-column[style*="flex-basis:30%"] {
	flex-basis: 18.75% !important;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(8) .wp-block-column[style*="flex-basis:70%"] {
	flex-basis: 81.25% !important;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(6) .wp-block-image img,
body.home .wp-block-post-content > .wp-block-group:nth-child(8) .wp-block-image img,
body.home .wp-block-post-content > .wp-block-group:nth-child(6) .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 14 / 9;
	object-fit: cover;
	display: block;
}
/* Newest Publications (8. Kind): Abstand unter dem letzten Eintrag wie bei
   Latest News (dort blockGap ~28px) — Kundenwunsch 2026-08-22. */
body.home .wp-block-post-content > .wp-block-group:nth-child(8) .wp-block-columns:last-of-type {
	margin-bottom: 1.5rem;
}
/* Newest Publications: Bildkante-zu-Bildkante-Abstand = wie Latest News (60px).
   Bei Latest News sind die Boxen 127px hoch (Text rechts höher als das Bild 92px)
   → Abstand 24px Gap + 35px Textüberhang = 60px. Die Publikations-Boxen sind teils
   nur 100px hoch (Text knapp über Bild) → nur 32px. Fix: Mindesthöhe der Boxen.
   Seit 2026-08-22: Abstände zwischen den Beiträgen etwas kleiner — Eintrags-Abstand
   24→16px, min-height 127px → Bildkante-Abstand ≈ 51px in beiden Sektionen.
   Danach: noch enger — Eintrags-Abstand 16→8px → Bildkante-Abstand ≈ 43px. */
body.home .wp-block-post-content > .wp-block-group:nth-child(8) .wp-block-columns {
	min-height: 127px;
	margin-top: 0.5rem;
}
/* Latest News (Query-Loop): Eintrags-Abstand (li) auf 8px reduzieren. */
body.home .wp-block-post-content > .wp-block-group:nth-child(6) .wp-block-post {
	margin-top: 0.5rem;
}
/* Query-Loop in Latest News: Post-Titel/Datum kompakt wie zuvor —
   vorher war der Titel ein <strong> im Fließtext (Sans, 0.9375rem, 700);
   das h3 (post-title) erbt sonst die Serif-Headline-Schrift.
   Schrift auf 1rem (16px) wie Newest Publications — Kundenwunsch 2026-08-22.
   li-Padding (8px oben/unten) entfernen → sichtbarer Abstand zwischen den
   Beiträgen = 24px wie in Newest Publications (Kundenwunsch 2026-08-22). */
body.home .wp-block-post-content > .wp-block-group:nth-child(6) .latest-news-loop li {
	padding-top: 0;
	padding-bottom: 0;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(6) .wp-block-post-title {
	margin-bottom: 0.25rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.55;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(6) .wp-block-post-date {
	color: var(--wp--preset--color--mist);
	font-size: 1rem;
	line-height: 1.55;
}

/* Institutes & Networks (4. Kind): kompakte Chip-Leiste, direkt unter den
   Research-Focus-Karten (ein Block). Der Grid-Gap wird per calc kompensiert,
   damit die Leiste auf allen Breiten ~1.25rem unter den Karten klebt. */
body.home .wp-block-post-content > .wp-block-group:nth-child(5) {
	padding-top: 1.25rem !important;
	padding-bottom: 1.25rem !important;
	margin-top: calc(-1 * clamp(2rem, 4vw, 3.5rem) + 1.25rem);
}
/* Label: klein, versaliert, Muted */
body.home .wp-block-post-content > .wp-block-group:nth-child(5) h2 {
	font-size: 0.8125rem !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--mist) !important;
	margin-bottom: 0.75rem !important;
}
/* Spalten als fließende Zeile, Untertitel klein */
body.home .wp-block-post-content > .wp-block-group:nth-child(5) .wp-block-columns {
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem !important;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(5) .wp-block-column {
	flex-basis: auto !important;
	flex-grow: 0 !important;
	width: auto !important;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(5) h3 {
	font-size: 0.8125rem !important;
	color: var(--wp--preset--color--slate) !important;
	margin-bottom: 0.5rem !important;
}
/* Listen als Chips (Pills mit Haarlinie) */
body.home .wp-block-post-content > .wp-block-group:nth-child(5) ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-left: 0;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(5) ul li {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--paper);
	padding: 0.3rem 0.875rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Sidebar-Inhalt: gestapelt, Porträt zuerst (wie Referenz) */
body.home .wp-block-post-content > .wp-block-group:nth-child(2) .wp-block-columns {
	flex-direction: column;
	gap: 1.25rem !important;
}
body.home .wp-block-post-content > .wp-block-group:nth-child(2) .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
}

/* Sidebar reduziert: Porträt ganz oben, darunter Name + Adresse.
   Rolle, Buttons und Bildunterschrift werden ausgeblendet (Inhalt unverändert). */
body.home .wp-block-post-content > .wp-block-group:nth-child(2) .wp-block-column:last-child {
	order: -1; /* Porträt-Spalte an den Anfang */
}
body.home .wp-block-post-content > .wp-block-group:nth-child(2) [style*="color:#E3EDF2"] {
	display: none; /* Rollen-Zeile */
}
body.home .wp-block-post-content > .wp-block-group:nth-child(2) .wp-block-buttons {
	display: none; /* Profil-Buttons */
}
body.home .wp-block-post-content > .wp-block-group:nth-child(2) figcaption {
	display: none; /* Caption (Name steht direkt darunter) */
}

/* Name: warmes Off-White, kompakt */
body.home .wp-block-post-content > .wp-block-group:nth-child(2) h1 {
	color: var(--wp--preset--color--ink) !important;
	font-size: clamp(1.25rem, 1.9vw, 1.5625rem) !important;
	margin-bottom: 0.5rem !important;
}

/* Rolle: Sekundärton; Affiliation: Muted-Ton */
[style*="color:#E3EDF2"] {
	color: var(--wp--preset--color--slate) !important;
}
[style*="color:#B9CBD6"] {
	color: var(--wp--preset--color--mist) !important;
}

/* Porträt: quadratischer Rahmen (wie Argyle-Avatar), feine Linie, dezente Tiefe.
   Testweise so breit wie die Sidebar-Spalte (260 px); visuell 10 px nach oben
   gerückt (relative + top), der Platz im Layout bleibt — Name und Adresse
   darunter verändern ihre Position nicht. */
.wp-block-image[style*="border-color:#FFFFFF"] {
	position: relative;
	top: -10px;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	max-width: 260px;
}
.wp-block-image[style*="border-color:#FFFFFF"] img {
	border-radius: 12px !important;
	max-width: 260px !important;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}
.wp-block-image[style*="border-color:#FFFFFF"] figcaption {
	color: var(--wp--preset--color--mist) !important;
	text-align: left;
	font-size: 0.8125rem;
}

/* Buttons in der Sidebar: kompakt, Primärfarbe Petrol */
a.wp-block-button__link[style*="background-color:#FFFFFF"] {
	background-color: var(--wp--preset--color--petrol) !important;
	color: #0B151C !important;
	padding: 0.5rem 1.125rem !important;
	font-size: 0.9375rem;
}
a.wp-block-button__link[style*="background-color:#FFFFFF"]:hover {
	background-color: #94E2E8 !important;
	color: #0B151C !important;
}
a.wp-block-button__link[style*="border-color:#FFFFFF"] {
	border-color: var(--wp--preset--color--petrol) !important;
	color: var(--wp--preset--color--ink) !important;
	padding: 0.5rem 1.125rem !important;
	font-size: 0.9375rem;
}
a.wp-block-button__link[style*="border-color:#FFFFFF"]:hover {
	border-color: #94E2E8 !important;
	color: #94E2E8 !important;
}

/* Mobil: einspaltig, Sidebar nicht sticky, Porträt etwas kleiner */
@media (max-width: 960px) {
	body.home .wp-block-post-content {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	body.home .wp-block-post-content > .wp-block-group:nth-child(2) {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}
	body.home .wp-block-post-content > .wp-block-group:nth-child(n + 3) {
		grid-column: 1;
	}
	/* Anhebung der ersten Hauptspalten-Gruppe nur auf Desktop (dort greift
	   grid-row: 1 + margin-top); mobil normal im Fluss unter dem Banner */
	body.home .wp-block-post-content > .wp-block-group:nth-child(3) {
		grid-row: auto;
		margin-top: 0;
	}
	/* Research-Focus-Karten: Anhebung nur auf Desktop; mobil im Fluss */
	body.home .wp-block-post-content > .wp-block-group:nth-child(4) {
		margin-top: 0;
	}
	/* Chip-Leiste mobil ohne Gap-Kompensation (kein Anheben) */
	body.home .wp-block-post-content > .wp-block-group:nth-child(5) {
		margin-top: 0;
	}
	/* Banner mobil: etwas flacher */
	body.home .wp-block-post-content > .wp-block-image:first-child {
		height: clamp(140px, 40vw, 220px);
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: 100vw;
		max-width: 100vw;
	}
	body.home .wp-block-post-content > .wp-block-group:nth-child(2) .wp-block-columns {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	body.home .wp-block-post-content > .wp-block-group:nth-child(2) .wp-block-column {
		flex: 1 1 auto;
	}
	.wp-block-image[style*="border-color:#FFFFFF"] {
		max-width: 150px;
	}
	.wp-block-image[style*="border-color:#FFFFFF"] img {
		max-width: 150px !important;
	}
}

/* ---------- Ruhige einspaltige Inhaltsführung ----------
   Sektionsbänder und Karten aus dem Bestandsinhalt werden ent-kastet:
   Weißraum + Haarlinien statt Flächen und Schatten. */

/* Vollbreite Bänder (war #F2F5F7) → transparent, gleicher Weißraum bleibt */
[style*="background-color:#F2F5F7"] {
	background-color: transparent !important;
}

/* Karten (Fläche + Rahmen) → ruhige Surface #10232D mit Haarlinie („leicht abgesetzt") */
[style*="background-color:#F2F5F7"][style*="border-color:#D8E0E6"] {
	background-color: var(--wp--preset--color--paper) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.30);
	/* padding-bottom 0: Karten enden auf Höhe von "resource availability"
	   (Kundenwunsch 2026-08-22); Text endet exakt an der Unterkante. */
	padding: 1.5rem 1.5rem 0 !important;
}

/* Restliche helle Rahmenlinien aus Bestandsinhalten */
[style*="border-color:#D8E0E6"] {
	border-color: var(--wp--preset--color--line) !important;
}

/* Modul-Überschriften (war Petrol #14465E) → helles Petrol, ruhig */
[style*="color:#14465E"] {
	color: #F2F0E9 !important;
}

/* Weiße Überschriften im Bestand (Hero, CTA) → warmes Off-White */
h1[style*="color:#FFFFFF"],
h2[style*="color:#FFFFFF"] {
	color: var(--wp--preset--color--ink) !important;
}

/* CTA-Band „Get in Touch" → ruhige Sektion mit Haarlinie, ohne Fläche */
[style*="background-color:#0C2E40"] {
	background-color: transparent !important;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* CTA-Text (war #C4D2DC) → Sekundärton */
[style*="color:#C4D2DC"] {
	color: var(--wp--preset--color--slate) !important;
}

/* Callouts / Projektbereiche (Current Projects, Transfer, Get in Touch):
   hervorgehobene Fläche #173642 als ruhige Kacheln */
body.home .wp-block-post-content > .wp-block-group:nth-child(7),
body.home .wp-block-post-content > .wp-block-group:nth-child(9),
body.home .wp-block-post-content > .wp-block-group:nth-child(10) {
	background-color: var(--wp--preset--color--petrol-deep) !important;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Sektionen "Applied Research & Technology Transfer" (9. Kind) und
   "Get in Touch" (10. Kind) entfernt — Kundenwunsch. Nur ausgeblendet
   (display: none), der Inhalt in der DB bleibt unverändert. */
body.home .wp-block-post-content > .wp-block-group:nth-child(9),
body.home .wp-block-post-content > .wp-block-group:nth-child(10) {
	display: none;
}

/* Sektion "Institutes & Networks" (5. Kind, Chip-Leiste) entfernt — Kundenwunsch. */
body.home .wp-block-post-content > .wp-block-group:nth-child(5) {
	display: none;
}

/* ---------- Publikationen: scanbare wissenschaftliche Liste ----------
   Muster der Bestandsinhalte: <strong>Titel</strong> — Autor:innen,
   <em>Quelle</em>, Jahr. <a>DOI</a> → Titel in Ink, Quelle in Slate,
   DOI als Petrol-Link. Listen-Einträge mit ruhigem Abstand. */

.wp-block-post-content ul {
	list-style: none;
	padding-left: 0;
}
.wp-block-post-content ul li {
	padding-block: 0.5rem;
	border-bottom: 1px solid rgba(242, 240, 233, 0.06);
}
.wp-block-post-content ul li:last-child {
	border-bottom: 0;
}
.wp-block-post-content ul li strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}
.wp-block-post-content ul li em {
	color: var(--wp--preset--color--slate);
}
.wp-block-post-content ul li a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Fließtext-Einträge (Legacy-Publikationsseiten, Projekte):
   Titel in Ink, Quelle in Slate, Links Petrol */
.wp-block-post-content p strong {
	color: var(--wp--preset--color--ink);
}
.wp-block-post-content p em {
	color: var(--wp--preset--color--slate);
}

/* Publikations-Übersicht (/publications/): Typen als ruhige Filterliste */
body.page-id-346 .wp-block-post-content > p {
	border-bottom: 1px solid rgba(242, 240, 233, 0.08);
	padding-block: 0.875rem;
	margin-block: 0;
}
body.page-id-346 .wp-block-post-content > p:first-child {
	border-top: 1px solid rgba(242, 240, 233, 0.08);
}

/* Inhaltsbreite für alle Seiten außer der Startseite: 960px (statt 720px).
   Titel (post-title) und Inhalt (post-content) werden bündig auf 960px
   gesetzt — das constrained-main begrenzt beide Kinder sonst auf die globale
   contentSize (720px), wodurch der Titel links anders einrückt als der Text.
   Die constrained-Layout-Klasse begrenzt auch die KINDER des Inhalts auf 720px
   → deren max-width wird aufgehoben. Mobil bleibt unkritisch: max-width ist
   eine Obergrenze, Container schrumpfen auf die Viewport-Breite. */
body:not(.home) .wp-block-post-content,
body:not(.home) .wp-block-post-title,
body:not(.home) .wp-block-query,
body:not(.home) .wp-block-query-title {
	max-width: 960px !important;
}
body:not(.home) .wp-block-post-content > *,
body:not(.home) .wp-block-post-template > *,
body:not(.home) .wp-block-post-template .wp-block-group > * {
	max-width: none !important;
}

/* Projects-Seite (183): Projekttitel bewusst kleiner als h4-Default
   (Preset large ist fluid 22–36px — zu groß für Projektnamen).
   Kundenwunsch 2026-08-23: Titel verkleinern, mehr Abstand zwischen Projekten.
   2026-08-23 (2): Titel wieder etwas größer (1.375rem), großer Abstand zwischen
   Projekten nur VOR dem Titel (margin-top 4rem), innen kompakt (blockGap 1rem). */
body.page-id-183 .wp-block-post-content h4.wp-block-heading {
	font-size: 1.375rem;
	line-height: 1.4;
	margin-top: 4rem;
	margin-bottom: 0.75rem;
}

body.page-id-183 .wp-block-post-content .wp-block-group > h4.wp-block-heading:first-child {
	margin-top: 0;
}

/* Paper- und Conferences-Seite: etwas kleinere Eintrags-Schrift
   (0.9375rem statt 1rem) — scanbarere Listen, gleiche Gestaltung.
   !important, weil die has-small-font-size-Klassen der Bestandseinträge
   sonst gewinnen (WP-Preset-Klassen mit !important) */
body.page-id-86 .wp-block-post-content p,
body.page-id-166 .wp-block-post-content p,
body.page-id-194 .wp-block-post-content p {
	font-size: 0.9375rem !important;
}

/* Conferences-Seite: laufende Nummer vor jedem Eintrag, oben der höchste
   Wert (absteigend). CSS-Counter: Start 82, increment -1 → erster Eintrag
   zeigt 81. Bei geändertem Eintragsbestand den Startwert anpassen (Anzahl + 1). */
body.page-id-166 .wp-block-post-content {
	counter-reset: conf 82;
}
body.page-id-166 .wp-block-post-content > p {
	position: relative;
	padding-left: 2.75rem;
}
body.page-id-166 .wp-block-post-content > p::before {
	counter-increment: conf -1;
	content: counter(conf);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--mist);
	line-height: 1.7;
}

/* Conferences-Seite: Conference-Poster-Abschnitt (eigener Container) mit
   eigenständiger Nummerierung — Counter-Start 31 = 30 Poster + 1 → erste
   Nummer 30, absteigend (nicht Teil der Konferenz-Zählung).
   Abstände: mehr Platz über der h2 (zum Konferenz-Inhalt) und unter der h2
   (zum ersten Poster) — Kundenwunsch 2026-08-22. */
body.page-id-166 .wp-block-post-content > h2 {
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}
body.page-id-166 .wp-block-post-content .conf-posters {
	counter-reset: poster 31;
}
body.page-id-166 .wp-block-post-content .conf-posters > p {
	position: relative;
	padding-left: 2.75rem;
}
body.page-id-166 .wp-block-post-content .conf-posters > p::before {
	counter-increment: poster -1;
	content: counter(poster);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--mist);
	line-height: 1.7;
}

/* Patents-Seite: gleiche Gestaltung wie Conferences — laufende Nummer vor
   jedem Eintrag (absteigend), keine Bild-Boxen. Counter-Start 30 =
   29 Eintraege + 1 → erster Eintrag zeigt 29. */
body.page-id-194 .wp-block-post-content {
	counter-reset: patent 30;
}
body.page-id-194 .wp-block-post-content > p {
	position: relative;
	padding-left: 2.75rem;
}
body.page-id-194 .wp-block-post-content > p::before {
	counter-increment: patent -1;
	content: counter(patent);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--mist);
	line-height: 1.7;
}
/* Patents-Seite: Kurzbeschreibung unter dem Titel — dezent kleiner und
   heller als der Titel */
body.page-id-194 .patent-desc {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--mist);
}

/* Paper-Seite: laufende Nummer wie bei Conferences (absteigend) plus
   Bild-Platzhalter-Box links neben jedem Eintrag (Bilder folgen später).
   Counter-Start 33 = 32 Eintraege + 1; der leere Absatz am Ende wird per
   :empty ausgeblendet und inkrementiert dadurch nicht mit. */
body.page-id-86 .wp-block-post-content {
	counter-reset: paper 33;
}
body.page-id-86 .wp-block-post-content > p,
body.page-id-86 .technical-papers > p {
	position: relative;
	padding-left: 7.5rem;
	min-height: 64px; /* Box ragt nie in den naechsten Beitrag -> gleiche Abstaende */
}
body.page-id-86 .wp-block-post-content > p:empty,
body.page-id-86 .technical-papers > p:empty {
	display: none;
}
/* Eintraege als columns (Bild links + Text rechts): Nummer davor */
body.page-id-86 .wp-block-post-content > .wp-block-columns,
body.page-id-86 .technical-papers > .wp-block-columns {
	position: relative;
}
body.page-id-86 .wp-block-post-content > .wp-block-columns::after,
body.page-id-86 .technical-papers > .wp-block-columns::after {
	counter-increment: paper -1;
	content: counter(paper);
	position: absolute;
	left: -1.75rem;
	top: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--mist);
	line-height: 1.7;
}
/* Bild-Platzhalter-Box (ganz links): dezentes Bild-Symbol,
   gestrichelter Rahmen — Platzhalter bis die echten Bilder kommen.
   Groesse wie die echten Bilder der Eintraege darueber (94x122). */
body.page-id-86 .wp-block-post-content > p::before,
body.page-id-86 .technical-papers > p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 94px;
	height: 122px;
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 15.5l-4.5-4.5L7 20.5'/%3E%3C/svg%3E");
	background-size: 45%;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--line);
}
/* Nummer: links neben dem Text, nach der Bild-Box */
body.page-id-86 .wp-block-post-content > p::after,
body.page-id-86 .technical-papers > p::after {
	counter-increment: paper -1;
	content: counter(paper);
	position: absolute;
	left: 6.25rem;
	top: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--mist);
	line-height: 1.7;
}
/* Paper-Seite: ALLE Eintrags-Boxen gleich hoch (mit Bild 122-132px, ohne Bild
   kuerzer). Einheitliche min-height 132px - Kundenwunsch 2026-08-23. */
body.page-id-86 .wp-block-post-content > .wp-block-columns,
body.page-id-86 .technical-papers > .wp-block-columns,
body.page-id-86 .technical-papers > p {
	min-height: 132px;
}
/* Technical-Paper-Sektion: eigener Counter (5 Eintraege, absteigend 5..1).
   Muss nach der Basis-Regel stehen (gleiche Spezifitaet). */
body.page-id-86 .technical-papers {
	counter-reset: tech 6;
}
body.page-id-86 .technical-papers > p::after {
	counter-increment: tech -1;
	content: counter(tech);
	left: -1.75rem; /* gleiche Position wie bei den columns-Eintraegen (links vor der Box) */
}
/* Technical-Paper-Eintraege als columns: eigener Counter (5..1) statt paper */
body.page-id-86 .technical-papers > .wp-block-columns::after {
	counter-increment: tech -1;
	content: counter(tech);
}
/* Sektions-Ueberschrift "Technical Paper": gleicher Abstand wie zwischen
   den Eintraegen (24px), damit die Liste nicht an der Ueberschrift klebt */
body.page-id-86 .wp-block-post-content > h2 {
	margin-bottom: 1.5rem;
}

/* Lange URLs/DOIs dürfen umbrechen (verhindert horizontalen Overflow
   auf Mobil, z. B. iopscience-DOI-Links auf der Paper-Seite) */
.wp-block-post-content a {
	overflow-wrap: break-word;
}

/* Privacy-Policy-Seite: Unter-Überschriften (3.1, 3.2) deutlich kleiner
   als die Abschnitts-Überschriften (3.) — klare Hierarchie */
body.page-id-606 h3 {
	font-size: 1.25rem !important;
	line-height: 1.3;
}

/* News-Seite (Beitragsliste, /news/): Titel deutlich kleiner
   (das fontSize-Attribut am Block greift nicht — 42px statt x-large),
   Beitragsbilder kompakt mit Abstand */
body.blog .wp-block-post-title {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: clamp(1.375rem, 1.8vw, 1.5rem) !important;
	line-height: 1.3;
}
body.blog .wp-block-post-featured-image {
	margin-bottom: 1rem;
}
/* Beitragsbilder auf 16:9 zuschneiden (object-fit: cover) — verhindert
   übergroße Hochkant-Bilder in der News-Liste; volle Spaltenbreite (960px) */
body.blog .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Jeder News-Eintrag als sichtbare Karte (paper-Fläche, Haarlinie, Radius,
   Schatten — Stil der übrigen Karten). Überschreibt die Inline-Trennlinie
   und das vertikale Padding aus dem Template. */
body.blog .wp-block-post-template > * {
	background-color: var(--wp--preset--color--paper) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.30);
	padding: 1.5rem !important;
	margin-bottom: 1.5rem;
}

/* ---------- Bilder ---------- */

/* Inhaltsbilder: weiche Ecken + feine dunkle Linie (abgestimmte Bildbehandlung) */
.wp-block-image img,
.wp-block-post-featured-image img,
figure img {
	border-radius: 8px;
	border: 1px solid rgba(242, 240, 233, 0.10);
}

/* Porträt auf der About-Seite: dezente Größenbegrenzung + Rahmen */
img.wp-image-697 {
	max-width: 260px !important;
	height: auto !important;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--line);
}

/* Vollflächige Cover-Bilder: dunkler Petrol-Verlauf als Overlay für Lesbarkeit.
   Utility: Klasse "has-dark-overlay" an Cover/Group setzen für künftige Inhalte. */
.wp-block-cover {
	position: relative;
}
.wp-block-cover img {
	border-radius: 0;
	border: 0;
}
.wp-block-cover::after,
.has-dark-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 21, 28, 0.30) 0%, rgba(11, 21, 28, 0.72) 100%);
	pointer-events: none;
}

/* Projekt-/Partner-Logos (helle Logos auf dunklem Grund): dezente weiße
   „Chip"-Fläche, bewusst klein — keine großen Deko-Bilder */
img[src*="CENELEST_Logo"],
img[src*="SONAR-Logo"],
img[src*="Fraunhofer-Logo"],
img[src*="UNSW-footer"],
img[src*="Logo-UniBW"],
img[src*="grafik-1"] {
	background: #FFFFFF;
	border: 0;
	border-radius: 8px;
	padding: 10px 14px;
	max-width: 220px;
	height: auto;
}

/* ---------- Navigation ---------- */

/* Overlay-Menü (mobil): dunkle Fläche — Fallback zusätzlich zu overlayBackgroundColor */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--petrol-deep) !important;
}

/* Untermenüs (Dropdown): dunkle Fläche, Haarlinie, weiche Ecken */
.wp-block-navigation .wp-block-navigation-submenu {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	padding: 0.5rem;
}
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item {
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
}
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:hover {
	background-color: rgba(99, 199, 211, 0.12);
}

/* Hover: dezente Petrol-Unterstreichung; aktiver Menüpunkt in Petrol mit
   Messing-Unterstreichung (gezielter Akzent) */
.wp-block-navigation-item a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--petrol);
}
.wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation-item a[aria-current="page"] {
	color: var(--wp--preset--color--petrol) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--accent);
}

/* Hamburger-/Schließen-Buttons im dunklen Menü */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
	background: transparent;
	border-radius: 6px;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
	background: rgba(99, 199, 211, 0.12);
}

/* ---------- Formulare (Contact Form 7 + Suche) ---------- */

.wpcf7-form label,
.wp-block-search__label {
	color: var(--wp--preset--color--slate);
	font-size: 0.875rem;
}

.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-hidden),
.wp-block-search__input {
	background-color: #10232D;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	padding: 0.625rem 0.75rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.wpcf7-form-control:not(.wpcf7-submit):focus,
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 0 0 3px rgba(99, 199, 211, 0.25);
	outline: none;
}

.wpcf7-form-control::placeholder,
.wp-block-search__input::placeholder {
	color: #9AABAD;
}

/* Validierung: Fehler warm und kontrastreich, Erfolg in Petrol */
.wpcf7-form-control.wpcf7-not-valid {
	border-color: #E07B5E;
	box-shadow: 0 0 0 3px rgba(224, 123, 94, 0.20);
}
.wpcf7-not-valid-tip {
	color: #F0A98F;
	font-size: 0.8125rem;
}
.wpcf7-response-output {
	border-radius: 6px;
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	margin: 1.25rem 0 0;
	border: 1px solid;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	border-color: #E07B5E;
	color: #F0C9BC;
}
.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--slate);
}

/* Suche: Abstand aus dem Template (Kommentar-Styles rendern nicht in Datei-Markup) */
.wp-block-search {
	margin-bottom: 2.5rem;
}

/* Senden-Button im Formular = Theme-Button (Primärfarbe Petrol) */
input.wpcf7-submit,
.wp-block-search__button {
	background-color: var(--wp--preset--color--petrol);
	color: #0B151C;
	border: 0;
	border-radius: 8px;
	font-weight: 600;
	padding: 0.625rem 1.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
input.wpcf7-submit:hover,
.wp-block-search__button:hover {
	background-color: #94E2E8;
}
input.wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ---------- Tabellen, Code, Zitate ---------- */

.wp-block-table table,
table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table td,
.wp-block-table th,
table td,
table th {
	border: 1px solid var(--wp--preset--color--line);
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
}
.wp-block-table thead th,
table thead th {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

code,
kbd,
pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875em;
}
code,
kbd {
	background-color: #10232D;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 0.1em 0.35em;
	color: #94E2E8;
}
pre {
	background-color: #10232D;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	line-height: 1.55;
}

/* Zitat: Messing-Linie links (aus theme.json), hier zusätzlich dezente Fläche */
.wp-block-quote {
	background-color: rgba(201, 164, 91, 0.06);
	border-radius: 0 8px 8px 0;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* Fokus-Zustände (WCAG AA, tastatur-sichtbar) — Hover/Fokus-Farbe #94E2E8 */

:focus-visible {
	outline: 2px solid #94E2E8;
	outline-offset: 2px;
	border-radius: 2px;
}
.wp-block-navigation-item a:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline-color: #94E2E8;
}
.wp-block-button__link:focus-visible {
	outline-color: #94E2E8;
	outline-offset: 3px;
}
.wpcf7-form-control:focus-visible,
.wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--petrol);
	outline-offset: 1px;
	box-shadow: 0 0 0 3px rgba(99, 199, 211, 0.25);
}

/* Skip-Link (WP „Skip to content"): beim Fokus sichtbar auf dunklem Grund */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: 0.5rem 1rem;
	border-radius: 0 0 8px 0;
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	position: absolute !important;
	left: 2px;
	top: 2px;
	z-index: 100000;
}

/* ---------- Pagination / Query ---------- */

.wp-block-query-pagination a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wp-block-query-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* ---------- Kleingedrucktes / Footer ---------- */

.wp-element-caption,
figcaption {
	color: var(--wp--preset--color--mist);
}

/* Beitragslisten: sanftere Trennlinien */
.wp-block-query .wp-block-group[style*="border-bottom"] {
	border-bottom-color: var(--wp--preset--color--line) !important;
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Spam-Schutz (Contact Form 7) ---------- */

/* Honeypot-Feld unsichtbar machen: aus dem Viewport schieben statt
   display:none, damit Bots das Feld nicht gezielt meiden. */
.jn-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	margin: 0;
	padding: 0;
	border: 0;
}

/* ---------- About: Affiliations-Logos ---------- */

/* Einheitliche weiße Logo-Boxen (220x76): alle Logos gleich hoch,
   unten bündig abschließend; Zeile 2 mittig zentriert. */
.about-logos {
	align-items: center;
	justify-content: center;
}

.about-logos .wp-block-column {
	display: flex;
	justify-content: center;
}

.about-logos .wp-block-image img {
	width: 300px;
	max-width: 300px;
	height: 104px;
	object-fit: contain;
	background: #fff;
	border-radius: 8px;
	padding: 10px 16px;
	display: block;
	margin: 0;
}

/* Fraunhofer: Logo-Inhalt im Bild sitzt zu hoch -> Inhalt nach unten schieben */
.about-logos img[alt="Fraunhofer"] {
	padding: 16px 16px 4px;
}

.about-logos-row2 .wp-block-column {
	flex: 0 0 auto !important;
}

/* Mobil: Logos verkleinern, damit keine Zeile überläuft */
@media (max-width: 600px) {
	.about-logos .wp-block-column {
		flex: 0 0 auto;
	}
	.about-logos .wp-block-image img {
		width: 110px;
		height: 48px;
	}
}

/* Media-Text-Porträt: 1px-Rahmen des Themes nicht überlaufen lassen */
.wp-block-media-text__media img {
	box-sizing: border-box;
	max-width: 100%;
}

/* Media-Text (About): Bild quadratisch, Höhe = Textblockhöhe (bündig oben/unten) */
.page-id-177 .wp-block-media-text {
	align-items: stretch !important;
	grid-template-columns: auto 1fr !important;
}

.page-id-177 .wp-block-media-text__media {
	position: relative;
	width: 260px;
	height: 100%;
}

.page-id-177 .wp-block-media-text__media img {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 260px;
	height: 260px;
	object-fit: cover;
	display: block;
}

/* Text rechts neben dem Porträt: erste Zeile bündig mit Bild-Oberkante,
   ca. 3 px höher (optische Korrektur), rechts bündig (WP-8%-Padding raus) */
.page-id-177 .wp-block-media-text__content > p:first-child {
	margin-top: -3px;
}

.page-id-177 .wp-block-media-text__content {
	padding-right: 16px;
}

@media (max-width: 600px) {
	.page-id-177 .wp-block-media-text__media {
		position: static;
		width: auto;
		height: auto;
	}
	.page-id-177 .wp-block-media-text__media img {
		position: static;
		transform: none;
		width: 100%;
		height: auto;
		object-fit: cover;
	}
}

/* Listen auf der About-Seite: Bullet Points (Theme setzt global list-style:none) */
.page-id-177 .wp-block-post-content .wp-block-list,
.page-id-177 .wp-block-post-content ul {
	list-style-type: disc;
	padding-left: 1.5em;
}

.page-id-177 .wp-block-post-content .wp-block-list li,
.page-id-177 .wp-block-post-content ul li {
	list-style-type: disc;
}





/* Lightbox: Zoom-Animation deaktiviert - alle Bilder oeffnen sofort (wie Latest News) */
.wp-lightbox-overlay,
.wp-lightbox-overlay img {
	animation: none !important;
	transition: none !important;
}