/*
 * Stefan Faber – ergänzende Stile.
 *
 * Nur Regeln, die theme.json nicht sinnvoll abbilden kann:
 *  1. Sichtbare Tastatur-Fokuszustände (WCAG 2.2 AA)
 *  2. Reduzierte Bewegung
 *  3. Grundstile für Contact Form 7 (.wpcf7) – generisch, ohne Formular-ID
 *  4. Feinschliff Kopf-/Fußbereich
 *  5. Bild- und Overflow-Sicherheit
 *
 * Keine Farbverläufe. Keine externen Ressourcen. Kein url() auf Remote-Hosts.
 */

/* -------------------------------------------------------------------------
 * 1. Fokuszustände
 * ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #2d3c4b;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Auf dunklen Flächen (Fußbereich) heller Fokusrahmen. */
.sf-footer a:focus-visible,
.sf-on-dark a:focus-visible,
.sf-on-dark button:focus-visible {
	outline-color: #ffffff;
}

/* Skip-Link des Core sichtbar machen, sobald er den Fokus erhält. */
.skip-link:focus {
	outline: 3px solid #2d3c4b;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 2. Reduzierte Bewegung
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	a,
	button,
	.wp-block-button__link,
	.wp-element-button {
		transition: background-color 160ms ease, color 160ms ease, outline-offset 160ms ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 3. Contact Form 7 – generische Grundstile (kein ID-Bezug)
 * ---------------------------------------------------------------------- */
.wpcf7 {
	max-width: 100%;
}

.wpcf7 form > p,
.wpcf7 .sf-field {
	margin: 0 0 1.25rem;
}

.wpcf7 label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.35rem;
	color: #2d3c4b;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.65rem 0.8rem;
	font: inherit;
	color: #2d3c4b;
	background-color: #ffffff;
	border: 1px solid #2d3c4b;
	border-radius: 4px;
}

.wpcf7 textarea {
	min-height: 8rem;
	resize: vertical;
}

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 3px solid #2d3c4b;
	outline-offset: 1px;
}

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	display: inline-block;
	min-height: 44px;
	padding: 0.75rem 1.75rem;
	font: inherit;
	font-weight: 500;
	color: #ffffff;
	background-color: #2d3c4b;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover,
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
	background-color: #1b191d;
}

/* Statusmeldungen: Kontrast + Rahmen, nie nur über Farbe kommuniziert. */
.wpcf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border: 1px solid #2d3c4b;
	border-radius: 4px;
	background-color: #f4f6f7;
	color: #2d3c4b;
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-weight: 500;
	color: #bf111b;
}

.wpcf7 .wpcf7-not-valid {
	border-color: #bf111b;
}

/* -------------------------------------------------------------------------
 * 4. Kopf-/Fußbereich
 * ---------------------------------------------------------------------- */
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #ffffff;
}

.sf-header {
	border-bottom: 1px solid #d9dde1;
	position: static;
	background-color: #ffffff;
}

/* Die öffentliche Kopfzeile bleibt sichtbar; der Admin-Bar-Versatz gilt nur
 * für angemeldete Redakteurinnen und Redakteure. */
body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks > .wp-block-template-part:first-child {
		top: 46px;
	}
}

.sf-footer,
.sf-footer :where(p, li, h1, h2, h3, h4, span) {
	color: #ffffff;
}

.sf-footer a {
	color: #ffffff;
	text-decoration: underline;
}

.sf-footer a:hover {
	text-decoration: none;
}

/* Weiße Schutzfläche für das farbige CDU-Logo im Fußbereich. */
.sf-footer-logo {
	display: inline-block;
	padding: 12px 16px;
	background-color: #ffffff;
	border-radius: 4px;
}

/* Größen bewusst per CSS: die Image-Blöcke bleiben Core-Standard-Markup. */
.sf-cdu-logo {
	width: min(132px, 100%);
	margin: 0;
}

.sf-footer-cdu-logo {
	width: min(128px, 100%);
	margin: 0;
}

/* Ausreichende Klickfläche für Navigations-Links. */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* Footer-Separator Farbe: Theme-CSS statt Blockattribute. */
.sf-footer .wp-block-separator {
	color: #5a6b7b;
}

/* -------------------------------------------------------------------------
 * 5. Bild- und Overflow-Sicherheit
 * ---------------------------------------------------------------------- */
img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Dekorativer CDU-Bogen: nie über den Viewport hinaus. */
.sf-bogen-image {
	width: min(220px, 100%);
	margin: 0;
}

.sf-bogen-image img {
	max-width: 100%;
	height: auto;
}

/* Themenkarten-Grid: responsive Layout (3 Spalten Desktop, 2 Tablet, 1 Mobile).
 * Selektor adressiert nur Inner-Grid unter weissen Sections mit sf-card-Kindern.
 * Trifft bestehende Homepage und zukünftige themen.php-Insertionen. */
section.wp-block-group.has-weiss-background-color.has-background
> .wp-block-group:has(> .sf-card) {
	display: grid !important;
	width: 100%;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--wp--preset--spacing--40) !important;
}

@media (max-width: 1023px) {
	section.wp-block-group.has-weiss-background-color.has-background
	> .wp-block-group:has(> .sf-card) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 599px) {
	section.wp-block-group.has-weiss-background-color.has-background
	> .wp-block-group:has(> .sf-card) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

section.wp-block-group.has-weiss-background-color.has-background
> .wp-block-group:has(> .sf-card)
> .sf-card {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

/* Karten: klare Fläche, dünne Linie, dezenter Schatten – kein Glassmorphism. */
.sf-card {
	background-color: #ffffff;
	border: 1px solid #d9dde1;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * 6. Responsive Navigation und mobile Inhaltslayouts
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	/* Die drei Header-Bausteine bleiben in einer Zeile, ohne den Viewport zu
	 * verbreitern. Logo und Menüschalter behalten ihre volle Bedienbarkeit. */
	.sf-header > .wp-block-group {
		flex-wrap: nowrap;
		gap: clamp(0.5rem, 2.5vw, 1rem);
	}

	.sf-header .wp-block-site-title {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 1rem;
	}

	.sf-header .wp-block-navigation,
	.sf-header .sf-cdu-logo {
		flex: 0 0 auto;
	}

	.sf-header .sf-cdu-logo {
		width: min(88px, 24vw);
	}

	/* Core-Overlay beibehalten, aber als vollständige, ruhige Menüfläche
	 * gestalten. Keine eigene Dialog- oder JavaScript-Implementierung. */
	.sf-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 1001;
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		min-height: 100vh;
		min-height: 100dvh;
		padding: 24px;
		overflow-y: auto;
		background-color: #ffffff !important;
		color: #2d3c4b !important;
	}

	.sf-header .wp-block-navigation__responsive-dialog {
		width: 100%;
		min-height: calc(100vh - 48px);
		min-height: calc(100dvh - 48px);
	}

	.sf-header .wp-block-navigation__responsive-container-close {
		top: 0;
		right: 0;
		min-width: 44px;
		min-height: 44px;
	}

	.sf-header .wp-block-navigation__responsive-container-content {
		box-sizing: border-box;
		width: min(100%, 360px);
		margin-right: auto;
		margin-left: auto;
		padding-top: 72px;
		align-items: stretch;
	}

	.sf-header .wp-block-navigation__responsive-container-content
	.wp-block-navigation__container {
		width: 100%;
		align-items: stretch;
		gap: 0.25rem;
	}

	.sf-header .wp-block-navigation__responsive-container-content
	.wp-block-navigation-item {
		width: 100%;
		align-items: stretch;
	}

	.sf-header .wp-block-navigation__responsive-container-content
	.wp-block-navigation-item__content {
		box-sizing: border-box;
		width: fit-content;
		max-width: 100%;
		align-self: flex-start;
		padding: 0.7rem 0;
		font-size: clamp(1.375rem, 6vw, 1.625rem);
		line-height: 1.2;
		text-align: left;
		white-space: normal;
	}

	/* Das Hero-Preset beginnt global bei 3.5rem. Auf schmalen Viewports
	 * passt diese responsive Untergrenze auch bei langen deutschen Wörtern. */
	body.home:not(.blog) .wp-block-post-content .has-hero-font-size {
		max-width: 100%;
		font-size: clamp(2.25rem, 10vw, 3rem) !important;
		line-height: 1.08;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: none;
	}

	/* Gespeicherte Homepage-Inhalte enthalten teilweise bewusst die Core-
	 * Klasse is-not-stacked-on-mobile. Für das Theme gilt mobil trotzdem eine
	 * lesbare Einspalten-Darstellung. */
	body.home:not(.blog) .wp-block-post-content
	.wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
	}

	body.home:not(.blog) .wp-block-post-content
	.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
		min-width: 0;
	}

	/* Alle Gutenberg-Gruppen mit direkten Theme-Karten werden mobil zu einer
	 * Spalte. Dies erfasst auch Raster auf hellgrauem Grund und überschreibt
	 * gespeicherte Zwei-Spalten-Regeln, ohne Desktop-Raster zu verändern. */
	.wp-block-group:has(> .sf-card) {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Höhere Spezifität als bereits im WordPress-Customizer gespeicherte
	 * Desktop-/Tablet-Rasterregeln, die alignwide-Kartengruppen betreffen. */
	body[class] main
	.wp-block-group.wp-block-group.alignwide:not(.sf-work-intro-grid):not(.sf-work-status-grid):has(> .sf-card) {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wp-block-group:has(> .sf-card) > .sf-card {
		grid-column: auto !important;
		grid-row: auto !important;
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body[class] main
	.wp-block-group.wp-block-group.alignwide:not(.sf-work-intro-grid):not(.sf-work-status-grid):has(> .sf-card)
	> .sf-card {
		grid-column: auto !important;
		grid-row: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.wp-block-group:has(> .sf-card) > .sf-card :is(h2, h3, h4, p) {
		max-width: 100%;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none;
	}

	body[class] main
	.wp-block-group.wp-block-group.alignwide:not(.sf-work-intro-grid):not(.sf-work-status-grid):has(> .sf-card)
	> .sf-card h3 {
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
	}
}

/* Das veröffentlichte Obervieland-Raster stammt aus gespeichertem Block-
 * Inhalt und wird zusätzlich von hochspezifischem Global-Styles-CSS aus der
 * WordPress-Datenbank adressiert. Dieser strukturelle Selektor benötigt kein
 * :has() und gewinnt die Kaskade gezielt für das tatsächliche Raster. */
@media (max-width: 700px) {
	body[class] main .wp-block-post-content
	section.wp-block-group.has-flaeche-hell-background-color
	> .wp-block-group.wp-block-group.alignwide.is-layout-grid {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	body[class] main .wp-block-post-content
	section.wp-block-group.has-flaeche-hell-background-color
	> .wp-block-group.wp-block-group.alignwide.is-layout-grid
	> .sf-card {
		grid-column: auto !important;
		grid-row: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body[class] main .wp-block-post-content
	section.wp-block-group.has-flaeche-hell-background-color
	> .wp-block-group.wp-block-group.alignwide.is-layout-grid
	> .sf-card :is(h2, h3, h4, p) {
		max-width: 100%;
		word-break: normal !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
	}
}

/* Platzhalter ohne Block-Support-Serialisierung: neutral und ersetzbar. */
.sf-portrait-placeholder,
.sf-image-placeholder {
	aspect-ratio: 4 / 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
 * 7. Typografischer Akzent
 * Einzelne hervorgehobene Wörter in Überschriften (<em>) sowie die
 * Utility-Klasse .sf-accent nutzen IBM Plex Serif Bold Italic.
 * IBM Plex Serif ist nur im Schnitt 700 italic geladen – daher hier
 * ausschließlich fett-kursiv verwenden.
 * ---------------------------------------------------------------------- */
:is(h1, h2, h3, h4) em,
.sf-accent {
	font-family: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-style: italic;
}