/* Preview-Tokens: spiegelt theme.json (Farben, Fonts, Spacing, Typo) als CSS-Variablen,
   damit der statische Render exakt wie das WordPress-Block-Theme aussieht.
   Im echten WP kommen diese Variablen automatisch aus theme.json. */

@font-face {
	font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("../fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
	font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}

:root {
	--wp--preset--color--primary: #DD0000;
	--wp--preset--color--primary-hover: #EA0000;
	--wp--preset--color--primary-deep: #7A0000;
	--wp--preset--color--base: #0E0E0F;
	--wp--preset--color--surface-dark: #1A1A1C;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--surface-soft: #FCFCFC;
	--wp--preset--color--text-on-dark: #FFFFFF;
	--wp--preset--color--text-muted-dark: #9E9FA1;
	--wp--preset--color--text: #0E0E0F;
	--wp--preset--color--text-muted: #626262;
	--wp--preset--color--border-dark: #2A2A2D;
	--wp--preset--color--border-light: #E6E6E8;
	--wp--preset--color--whatsapp: #25D366;

	--wp--preset--font-family--display: "Space Grotesk", "Barlow Condensed", system-ui, sans-serif;
	--wp--preset--font-family--body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--medium: 1.0625rem;
	--wp--preset--font-size--large: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	--wp--preset--font-size--x-large: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
	--wp--preset--font-size--xx-large: clamp(2.25rem, 1.2rem + 4vw, 4rem);
	--wp--preset--font-size--price: clamp(1.375rem, 1.2rem + 1vw, 1.625rem);

	--wp--preset--spacing--10: 0.25rem;
	--wp--preset--spacing--20: 0.5rem;
	--wp--preset--spacing--30: 0.75rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2rem;
	--wp--preset--spacing--70: 3rem;
	--wp--preset--spacing--80: 4rem;
	--wp--preset--spacing--90: 6rem;
}

/* --- Reset + Block-Grundstile (entspricht den theme.json-styles im echten WP) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--surface);
}
h1, h2, h3, h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; line-height: 1.1; margin: 0 0 .6em;
}
h1 { font-size: var(--wp--preset--font-size--xx-large); text-transform: uppercase; letter-spacing: -0.5px; }
h2 { font-size: var(--wp--preset--font-size--x-large); }
h3 { font-size: var(--wp--preset--font-size--large); font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--wp--preset--color--primary); }
a:hover { color: var(--wp--preset--color--primary-hover); }
img { max-width: 100%; height: auto; }
main { display: block; }

/* Layout-Container (entspricht layout.contentSize/wideSize + root padding) */
.fc-container { max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }
.fc-container--wide { max-width: 1320px; }
.fc-full { width: 100%; }
section { }

/* Block-Buttons (Preview-Abbild der core/button-Stile) */
.wp-block-buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
.wp-block-button__link, .wp-element-button {
	display: inline-block; background: var(--wp--preset--color--primary); color: #fff;
	text-decoration: none; padding: 14px 24px; border-radius: 8px; font-weight: 600;
	font-family: var(--wp--preset--font-family--body); border: none; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
		transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 20px rgba(221,0,0,.35);
	}
}
.is-style-outline .wp-block-button__link {
	background: transparent; border: 1.5px solid #fff; color: #fff;
}
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }