/**
 * Senftenberg Brand Manual – globale Styles.
 *
 * Maße nach Layout „Web 1920“: Seitenleiste 300 px, Innenabstand 50 px,
 * Rasterabstand 16 px.
 */

/* ---------------------------------------------------------------------------
 * Seitengerüst: Seitenleiste links, Inhalt rechts
 * ------------------------------------------------------------------------ */

.cd-shell {
	--cd-top: 0px;

	display: grid;
	grid-template-columns: var(--wp--custom--sidebar--width) minmax(0, 1fr);
	min-height: 100vh;
}

.admin-bar .cd-shell {
	--cd-top: var(--wp-admin--admin-bar--height, 32px);
	min-height: calc(100vh - var(--cd-top));
}

.cd-sidebar {
	position: sticky;
	top: var(--cd-top);
	z-index: 10;
	height: calc(100vh - var(--cd-top));
	background: var(--wp--preset--color--hellgrau);
}

.cd-shell > .cd-main {
	margin-block: 0;
	min-width: 0;
	/* Raster und Abschnitte richten sich nach der Inhaltsbreite, nicht nach dem Fenster */
	container: cd-inhalt / inline-size;
}

.cd-main > * {
	margin-block-start: 0;
}

/* Seitenkopf mit H1 */
.cd-kopf {
	padding-top: var(--wp--preset--spacing--50);
}

.cd-kopf > .wp-block-post-title,
.cd-kopf > h1 {
	margin: 0;
}

.cd-inhalt {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Inhalt beginnt mit Abstand unter der H1 */
.cd-kopf + .cd-inhalt > :first-child:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--50);
}

/* Fließtext auf gut lesbare Zeilenlänge begrenzen */
.cd-main :where(p, ul, ol):not(.has-text-align-center):not(.has-text-align-right) {
	max-width: var(--wp--custom--textbreite);
}

/* H2 = Themen-Anker: Sprungziel nicht unter Admin-Leiste / mobiler Kopfleiste */
.cd-main h2[id] {
	scroll-margin-top: calc(var(--cd-top) + var(--cd-kopfleiste, 0px) + var(--wp--preset--spacing--50));
}

.cd-main h2 + p {
	margin-top: 1rem;
}

/* Weiches Scrollen zu den Ankern */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------------------------------------------------------------------------
 * Abschnitte: Gruppen über die volle Breite, optional farbig
 * ------------------------------------------------------------------------ */

.cd-inhalt > .wp-block-group.alignfull {
	padding-block: var(--wp--preset--spacing--50);
}

/* Aufeinanderfolgende Abschnitte ohne Lücke; farbiger Abschluss bis zum Seitenende */
.cd-inhalt > .alignfull + .alignfull {
	margin-top: 0;
}

.cd-inhalt:has(> .alignfull.has-background:last-child) {
	padding-bottom: 0;
}

.cd-inhalt > .wp-block-group.alignfull > :first-child {
	margin-top: 0;
}

/* Dunkle Flächen: Text weiß. Eigene Farben aus dem Farbwähler bekommen die
   Klasse „cd-hintergrund-dunkel/-hell“ nach Kontrast (inc/farben.php). */
:is(
	.has-deepnavy-background-color,
	.has-electric-background-color,
	.has-azure-background-color,
	.has-carmin-background-color,
	.cd-hintergrund-dunkel
) {
	color: var(--wp--preset--color--weiss);
}

.cd-hintergrund-hell {
	color: var(--wp--preset--color--deepnavy);
}

/* Bildschirmhoch: Überschrift oben, Motiv mittig, Abschluss (z. B. Buttons) unten */
.wp-block-group.is-style-bildschirmhoch {
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--cd-top, 0px));
	box-sizing: border-box;
}

/* Erster Abschnitt teilt sich den Bildschirm mit der H1 (Abstand oben + eine Zeile H1) */
.cd-kopf + .cd-inhalt > .wp-block-group.is-style-bildschirmhoch:first-child {
	min-height: calc(100svh - var(--cd-top, 0px) - var(--cd-kopfleiste, 0px) - var(--wp--preset--spacing--50) - var(--wp--preset--font-size--display));
}

.wp-block-group.is-style-bildschirmhoch > :is(figure, .wp-block-image, .wp-block-columns, .wp-block-gallery, .wp-block-group) {
	margin-block: auto;
}

.wp-block-group.is-style-bildschirmhoch > :last-child:not(:first-child) {
	margin-top: auto;
}

/* Motive mittig, z. B. das Logo */
.is-style-bildschirmhoch > .wp-block-image {
	padding-block: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------------
 * Kacheln: Spalten-Block (Stil „Kacheln“) ohne Abstand, darin Gruppen
 * (Stil „Kachel“), die ihre Spalte ganz ausfüllen. Verschachtelte Spalten
 * teilen eine Spalte weiter auf (Layout „Signet“: 1 große + 3 kleine Kacheln).
 * ------------------------------------------------------------------------ */

.wp-block-columns.is-style-kacheln,
.wp-block-columns.is-style-kacheln .wp-block-columns {
	gap: 0;
	margin-block: 0;
}

.is-style-kacheln .wp-block-column {
	display: flex;
	flex-direction: column;
}

.is-style-kacheln .wp-block-column > * {
	flex: 1 1 auto;
	margin-block: 0;
}

/* Kachel: Innenabstand wie die Seite, Beschriftung oben, Motiv mittig */
.wp-block-group.is-style-kachel {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* zwei Kacheln übereinander = ein Bildschirm */
	min-height: calc((100svh - var(--cd-top, 0px)) / 2);
	margin-block: 0;
	padding: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-kachel > * {
	margin-block: 0;
}

.wp-block-group.is-style-kachel > * + * {
	margin-top: 1rem;
}

.wp-block-group.is-style-kachel > :is(figure, .wp-block-image) {
	align-self: center;
	margin-block: auto;
	padding-block: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-kachel > :last-child:not(:first-child):not(figure):not(.wp-block-image) {
	margin-top: auto;
}

/* Motiv ohne eigene Breite: Standardgröße wie im Layout (Signet ≈ 225 px) */
.is-style-kachel .wp-block-image:not(.is-resized) img {
	width: clamp(7rem, 28cqi, 14rem);
	height: auto;
}

@container cd-inhalt (max-width: 899px) {
	/* Äußere Kacheln untereinander, verschachtelte bleiben nebeneinander */
	.cd-inhalt > .wp-block-columns.is-style-kacheln > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

/* Download: dunkles Quadrat mit Icon + Feld in Sky Blau */
.wp-block-button.is-style-download .wp-block-button__link {
	--cd-icon-box: 3.125rem;

	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--cd-icon-box);
	padding: 0.75rem 1.75rem 0.75rem calc(var(--cd-icon-box) + 1.75rem);
	box-sizing: border-box;
	background: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--deepnavy);
	text-decoration: none;
}

.wp-block-button.is-style-download .wp-block-button__link::before,
.wp-block-button.is-style-download .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--cd-icon-box);
}

.wp-block-button.is-style-download .wp-block-button__link::before {
	background: var(--wp--preset--color--deepnavy);
	transition: background-color 0.15s ease;
}

.wp-block-button.is-style-download .wp-block-button__link::after {
	background: var(--wp--preset--color--weiss);
	mask: url("../icons/download.svg") center / 1.375rem no-repeat;
}

.wp-block-button.is-style-download .wp-block-button__link:hover {
	background: var(--wp--preset--color--weiss);
}

.wp-block-button.is-style-download .wp-block-button__link:hover::before {
	background: var(--wp--preset--color--azure);
}

/* ---------------------------------------------------------------------------
 * Spaltenraster: volle Breite, bricht nach Inhaltsbreite um
 *
 * ab 900 px  wie im Editor angelegt
 * 560–899 px 2 Spalten bleiben, 3+ Spalten werden zu zwei pro Reihe,
 *            ungleiche Aufteilungen (33/66) werden gestapelt
 * unter 560  alles untereinander
 * ------------------------------------------------------------------------ */

@container cd-inhalt (max-width: 899px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-grow: 1 !important;
		flex-basis: calc(50% - 0.5rem) !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile):has(> .wp-block-column[style*="flex-basis"]) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@container cd-inhalt (max-width: 559px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Demoseite „Spaltenraster“: Platzhalterflächen */
.cd-raster-demo > .wp-block-column {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 17.5rem;
}

/* ---------------------------------------------------------------------------
 * Barrierefreiheit
 * ------------------------------------------------------------------------ */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--azure);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Mobil: Seitenleiste wird zur Kopfleiste
 * ------------------------------------------------------------------------ */

@media (max-width: 960px) {
	.cd-shell {
		--cd-kopfleiste: 4.5rem;

		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr;
	}

	.cd-sidebar {
		height: auto;
	}
}

/* Unter 600 px scrollt die Admin-Leiste mit weg. */
@media (max-width: 600px) {
	.admin-bar .cd-shell {
		--cd-top: 0px;
	}
}