/* =========================================
   BW FRAMEWORK v2.0
   ========================================= */
/* 1) RESET & BASE */
html {
	font-size: 62.5%;

	/* 1rem = 10px */
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2) DESIGN TOKENS (Variables) */
:root {
	/* BW Color Palette */
	--bw-100: #ffffff;
	--bw-200: #f4f4f4;
	--bw-300: #dfdfdf;
	--bw-400: #c0c0c0;
	--bw-500: #858585;
	--bw-600: #696969;
	--bw-700: #353535;
	--bw-800: #1e1e1e;
	--bw-900: #000000;

	/* Semantische Farben */
	--color-primary: var(--primary);
	--color-primary-dark: #1e4154;
	--color-bg: var(--base);
	--color-surface: var(--bw-200);
	--color-text: var(--primary);
	--color-text-muted: var(--bw-600);
	--color-border: var(--bw-300);

	/* Layout */
	--content-width: 144rem;
	--gutter: clamp(1.6rem, 1rem + 2vw, 4rem);
	--z-header: 100;
	--z-modal: 1000;

	/* Fluid Typography */
	--text-xs: clamp(1.2rem, 1.15rem + 0.25vw, 1.4rem);
	--text-s: clamp(1.4rem, 1.35rem + 0.25vw, 1.6rem);
	--text-m: clamp(1.6rem, 1.55rem + 0.25vw, 1.8rem);
	--text-l: clamp(1.8rem, 1.65rem + 0.75vw, 2.4rem);
	--text-xl: clamp(2.2rem, 1.95rem + 1.25vw, 3.2rem);
	--h1: clamp(3.6rem, 2.8rem + 4vw, 7.2rem);
	--h2: clamp(3.0rem, 2.5rem + 2.5vw, 4.8rem);
	--h3: clamp(2.4rem, 2.1rem + 1.5vw, 3.6rem);
	--h4: clamp(2.0rem, 1.8rem + 1vw, 2.8rem);
	--lh-base: 1.6;
	--lh-heading: 1.2;

	/* Fluid Spacing Scale */
	--space-xs: clamp(0.8rem, 0.7rem + 0.5vw, 1.2rem);
	--space-s: clamp(1.6rem, 1.4rem + 1vw, 2.4rem);
	--space-m: clamp(2.4rem, 2rem + 2vw, 4rem);
	--space-l: clamp(4.0rem, 3.2rem + 4vw, 7.2rem);
	--space-xl: clamp(6.4rem, 5.0rem + 7vw, 12rem);

	/* Radius Scale */
	--radius-s: 0.4rem;
	--radius-m: 0.8rem;
	--radius-l: 1.6rem;
	--radius-xl: 3.2rem;
	--radius-pill: 99rem;
}

/* 3) BASE STYLES */
body {
	margin: 0;
	font-family: var(--font-primary);
	font-size: var(--text-m);
	line-height: var(--lh-base);
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

main {
	min-height: 100vh;
}

footer {
	flex-shrink: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	color: var(--color-primary);
	font-weight: normal;

	/* Fix für La Dolce Eleganz */
	margin: 0;
}

h1 {
	font-size: var(--h1);
}

h2 {
	font-size: var(--h2);
}

h3 {
	font-size: var(--h3);
}

h4 {
	font-size: var(--h4);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
}

/* 4) LAYOUT LOGIC */
section {
	width: 100%;
	padding-block: var(--space-l);
	padding-inline: var(--gutter);
}

section {
	width: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	padding-block: var(--space-l);
}

.container {
	width: 100% !important;
	max-width: var(--content-width, 1440px) !important;
	padding-inline: var(--gutter);
	margin-inline: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
	.grid--2,
	.grid--3,
	.grid--4 {
		grid-template-columns: 1fr;
	}
}

/* 6) UTILITIES */
.stack {
	display: flex;
	flex-direction: column;
}

.stack-s {
	gap: var(--space-s);
}

.stack-m {
	gap: var(--space-m);
}

.stack-l {
	gap: var(--space-l);
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.radius-s {
	border-radius: var(--radius-s);
}

.radius-m {
	border-radius: var(--radius-m);
}

.radius-l {
	border-radius: var(--radius-l);
}

.radius-pill {
	border-radius: var(--radius-pill);
}

/* 7) COMPONENTS */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem 2.4rem;
	border-radius: var(--radius-s);
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: 0.3s;
	text-decoration: none;
	font-size: var(--text-s);
}

.btn--primary {
	background-color: var(--color-primary);
	color: var(--bw-100);
	text-align: center;
}

.btn--pill {
	border-radius: var(--radius-pill);
}

.btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
	font-weight: 500;
}

.btn-arrow::before {
	content: "";
	width: 1.4rem;
	height: 1.4rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform 0.3s ease;
}

.btn-arrow:hover::before {
	transform: translateX(4px);
}

/* 8) PINEGROW BREAKPOINTS (Labels) */
@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/* Die Basis-Klasse für die Section */
.dark-overlay {
	position: relative;
	overflow: hidden;

	/* Sorgt dafür, dass der Overlay nicht übersteht */
}

/* Das eigentliche Overlay-Element */
.dark-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(22, 21, 21, 0.85);

	/* Hier die Farbe & Transparenz anpassen */
	z-index: 1;

	/* Liegt über dem Bild */
}

.full-width-card {
	grid-column: 1 / -1;
}