/*
 * Zentrale Design-Definitionen.
 * Wesentliche visuelle Änderungen sollen möglichst hier vorgenommen werden.
 */
:root {
	--color-background: #ffffff;
	--color-text: #0a0a0a;
	--color-muted: #656565;
	--color-border: #e8e8e8;
	--color-overlay: rgb(0 0 0 / 62%);
	--color-overlay-light: rgb(255 255 255 / 72%);
	--color-focus: #111111;

	--font-family-base: "Roboto Flex", Arial, Helvetica, sans-serif;
	--font-weight-normal: 400;
	--font-weight-medium: 560;
	--font-weight-bold: 760;
	--line-height-body: 1.55;
	--line-height-heading: 1.02;
	--letter-spacing-heading: -0.035em;

	--font-size-xs: 0.78rem;
	--font-size-sm: 0.9rem;
	--font-size-base: clamp(1rem, 0.96rem + 0.16vw, 1.08rem);
	--font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.65rem);
	--font-size-h2: clamp(1.8rem, 1.35rem + 1.6vw, 3rem);
	--font-size-h1: clamp(2.5rem, 1.65rem + 3.4vw, 5.5rem);
	--font-size-hero: clamp(3rem, 1.55rem + 6.4vw, 8.6rem);

	--content-max-width: 80rem; /* 1280 px */
	--content-padding: clamp(1.25rem, 3.5vw, 3rem);
	--header-height: 4.75rem;
	--page-top-space: clamp(3.5rem, 7vw, 7rem);
	--page-bottom-space: clamp(5rem, 9vw, 9rem);

	--space-1: 0.35rem;
	--space-2: 0.65rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.25rem;
	--space-6: 3.5rem;
	--space-7: 5rem;
	--space-8: 7.5rem;

	--gap-small: clamp(0.5rem, 1vw, 0.9rem);
	--gap-medium: clamp(0.85rem, 1.7vw, 1.5rem);
	--gap-large: clamp(1.5rem, 3vw, 3rem);

	--radius-small: 0.2rem;

	--ai-icon-min-size: 20px;
	--ai-icon-max-size: 28px;
	--ai-icon-offset: 3px;
	--ai-icon-image: url("../icons/ai-marker.svg");
	--ai-icon-top: var(--ai-icon-offset);
	--ai-icon-right: var(--ai-icon-offset);
	--ai-icon-bottom: auto;
	--ai-icon-left: auto;
	--ai-icon-opacity: 1;

	/* Project-Teaser sind deutlich kleiner als normale Galerie-Kacheln. */
	--ai-teaser-icon-size: 20px;
	--ai-teaser-icon-top: 2px;
	--ai-teaser-icon-right: 2px;
	--ai-teaser-icon-bottom: auto;
	--ai-teaser-icon-left: auto;
	--ai-teaser-icon-opacity: 1;

	--shadow-header: 0 1px 8px rgb(0 0 0 / 7%);
	--transition-fast: 160ms ease;
	--transition-normal: 280ms ease;
	--masonry-row-height: 8px;
}

/*
 * Responsive Stufen (bewusst wenige, gängige Breakpoints):
 * 40rem ≈ 640 px, 48rem ≈ 768 px, 64rem ≈ 1024 px, 80rem = 1280 px.
 * Media-Query-Grenzen sind nicht als CSS-Variablen definiert, da Custom Properties
 * in klassischen @media-Bedingungen nicht zuverlässig verwendet werden können.
 */