/**
 * Abstand zwischen Gutenberg-Bloecken im klassischen Astra-Theme.
 *
 * theme.json styles.spacing.blockGap erzeugt nur Regeln unter
 * .is-layout-flow / .is-layout-flex. .entry-content hat diese Klasse
 * nicht. Astra setzt zusaetzlich .wp-block-columns { margin-bottom: unset }.
 *
 * Token Desktop: Slug 70 = 6rem = 96 px (nicht 70 px).
 * Token Mobile (max 1023 px): Slug 50 = 3rem = 48 px.
 * DESIGN-TOKENS.md §4 / §4a. Spalten-Gutter (nebeneinander) bleibt
 * theme.json core/columns Slug 30.
 */

.entry-content > .wp-block-columns + .wp-block-columns,
.entry-content > [class*="wp-block-dm-custom-blocks-"] + *,
.entry-content > * + [class*="wp-block-dm-custom-blocks-"],
.entry-content > .wp-block-heading + .wp-block-columns,
.entry-content > .wp-block-columns + .wp-block-heading,
.editor-styles-wrapper .is-root-container > .wp-block-columns + .wp-block-columns,
.editor-styles-wrapper .is-root-container > [class*="wp-block-dm-custom-blocks-"] + *,
.editor-styles-wrapper .is-root-container > * + [class*="wp-block-dm-custom-blocks-"],
.wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--70, 6rem);
}

@media (max-width: 1023px) {
	.entry-content > .wp-block-columns + .wp-block-columns,
	.entry-content > [class*="wp-block-dm-custom-blocks-"] + *,
	.entry-content > * + [class*="wp-block-dm-custom-blocks-"],
	.entry-content > .wp-block-heading + .wp-block-columns,
	.entry-content > .wp-block-columns + .wp-block-heading,
	.editor-styles-wrapper .is-root-container > .wp-block-columns + .wp-block-columns,
	.editor-styles-wrapper .is-root-container > [class*="wp-block-dm-custom-blocks-"] + *,
	.editor-styles-wrapper .is-root-container > * + [class*="wp-block-dm-custom-blocks-"],
	.wp-block-column > * + * {
		margin-block-start: var(--wp--preset--spacing--50, 3rem);
	}
}

/*
 * Produktkacheln in einer Spalten-Zeile auf gleiche Hoehe ziehen.
 * Nur direkte Kachel-Kinder, damit Ueberschrift+Kachel in einer Spalte
 * nicht gemeinsam stretch-flexen.
 */
.wp-block-column:has(> .dm-produktkachel),
.editor-styles-wrapper .wp-block-column:has(> .dm-produktkachel) {
	display: flex;
	flex-direction: column;
}

.wp-block-column:has(> .dm-produktkachel) > .dm-produktkachel,
.editor-styles-wrapper .wp-block-column:has(> .dm-produktkachel) > .dm-produktkachel {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
}

/*
 * Astra/UA-Fokusring (oft gelb) plus eigener Ring wirkte zweifarbig.
 * Fokus und Auswahl teilen sich denselben Outline.
 *
 * Seit 11.09.2026 schwarz statt teal: Der ausgewaehlte Farbpunkt soll die
 * Produktfarbe nicht mit einer zweiten Markenfarbe ueberlagern. Der Wert muss
 * mit der is-active-Regel in src/produktkachel/style.scss uebereinstimmen.
 */
.entry-content .dm-produktkachel__swatch:focus,
.entry-content .dm-produktkachel__swatch:focus-visible,
.editor-styles-wrapper .dm-produktkachel__swatch:focus,
.editor-styles-wrapper .dm-produktkachel__swatch:focus-visible {
	outline: 2px solid var(--wp--preset--color--dm-black, #030300);
	outline-offset: 3px;
}

/*
 * ASTRA-BRUECKE FUER DIE TYPO-ROLLEN — mit Astra loeschen.
 *
 * Die Rollen stehen in theme.json unter styles.elements.h1 bis h6. WordPress
 * emittiert sie als blanken Selektor `h2` (0,0,1). Astra stylt Ueberschriften
 * im Inhalt ueber `.entry-content :where(h2)` (0,1,1) mit font-size 1.63em und
 * gewinnt damit — die Rollen kaemen im Frontend gar nicht an.
 *
 * Deshalb werden sie hier auf (0,2,1) wiederholt, ausschliesslich fuer
 * core/heading-Bloecke (die tragen `.wp-block-heading`). Unsere eigenen Bloecke
 * setzen ihre Titel selbst mit Element-Praefix, siehe
 * BLOCK-SUPPORTS-CONTRACT.md. Elementor-Ueberschriften bleiben unberuehrt,
 * die tragen `.elementor-heading-title`.
 *
 * Die Werte muessen mit theme.json styles.elements uebereinstimmen. Sobald
 * Astra weg ist, reicht theme.json allein und dieser Block entfaellt.
 */
.entry-content h1.wp-block-heading,
.editor-styles-wrapper h1.wp-block-heading {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--x-large, 2.625rem);
	font-weight: 600;
	line-height: 1.1;
}

.entry-content h2.wp-block-heading,
.editor-styles-wrapper h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--heading, 2rem);
	font-weight: 600;
	line-height: 1.25;
}

/*
 * Basis vor der Media Query. Gleiche Spezifitaet (0,2,1): steht die
 * Basis danach, gewinnt heading-sm auch mobil. Bei H2 war die
 * Reihenfolge schon richtig, bei H3 nicht.
 */
.entry-content h3.wp-block-heading,
.editor-styles-wrapper h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--heading-sm, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 1023px) {
	.entry-content h1.wp-block-heading,
	.editor-styles-wrapper h1.wp-block-heading {
		font-size: var(--wp--preset--font-size--heading, 2rem);
	}

	.entry-content h2.wp-block-heading,
	.editor-styles-wrapper h2.wp-block-heading {
		font-size: 1.5rem;
	}

	.entry-content h3.wp-block-heading,
	.editor-styles-wrapper h3.wp-block-heading {
		font-size: var(--wp--preset--font-size--medium, 1.25rem);
	}
}

.entry-content h4.wp-block-heading,
.editor-styles-wrapper h4.wp-block-heading {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1.25rem);
	font-weight: 600;
	line-height: 1.35;
}

.entry-content h5.wp-block-heading,
.editor-styles-wrapper h5.wp-block-heading {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--body-lg, 1.125rem);
	font-weight: 600;
	line-height: 1.4;
}

.entry-content h6.wp-block-heading,
.editor-styles-wrapper h6.wp-block-heading {
	font-family: var(--wp--preset--font-family--dm-heading, "Poppins", sans-serif);
	font-size: var(--wp--preset--font-size--body, 1rem);
	font-weight: 600;
	line-height: 1.4;
}

/*
 * Astra setzt #primary { margin: 4em 0 } (64 px). Das ist der Abstand
 * ueber dem ersten Block, auch ueber dem Hero. Slug 40 reicht.
 * Unter 767 px setzt style.css den Rand bereits auf 0.
 */
#primary,
.ast-plain-container #primary,
.ast-separate-container #primary {
	margin-top: var(--wp--preset--spacing--40, 2rem);
}