/* ==========================================================================
   layout.css — Container, Grid, Sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.container--narrow {
	max-width: 860px;
}

.container--wide {
	max-width: 1440px;
}

/* --------------------------------------------------------------------------
   Grid System
   -------------------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--space-8);
}

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

.grid--auto {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Product-Grid: 2 Spalten auf Tablet, 3 auf Desktop */
.grid--products {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-6);
}

/* USP-Grid: 2x2 auf Mobile, 4 auf Desktop */
.grid--usp {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

/* Split: Text | Bild */
.grid--split {
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-16);
}

.grid--split-reverse .grid__media {
	order: -1;
}

/* --------------------------------------------------------------------------
   Philosophie-Abschnitt: Full-Bleed Left Image
   -------------------------------------------------------------------------- */

.unterschied-section {
	background-size: cover;
	background-position: center;
	padding-block: var(--space-24);
}

.unterschied-card {
	background: rgba(240, 237, 230, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(30, 54, 97, 0.12);
	border-radius: var(--radius-lg);
	padding: var(--space-12) var(--space-10);
	max-width: 600px;
}

.unterschied-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-top: var(--space-8);
}

.unterschied-item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: var(--space-4);
	align-items: start;
}

.unterschied-num {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: #43beef !important;
	line-height: 1;
}

.unterschied-item h4 {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: var(--space-1);
}

.unterschied-item p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
	.unterschied-section {
		padding-block: var(--space-16);
	}

	.unterschied-card {
		max-width: 100%;
		padding: var(--space-8) var(--space-6);
	}
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
	padding-block: var(--space-24);
}

.section--sm {
	padding-block: var(--space-16);
}

.section--lg {
	padding-block: var(--space-32);
}

/* Dark Section — Navy statt void, lesbarer auf großen Flächen */
.section--dark {
	background-color: var(--color-navy);
	color: var(--color-text-light);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: var(--color-text-light);
}

.section--dark p {
	color: var(--color-text-dim);
}

/* Navy Section */
.section--navy {
	background-color: var(--color-navy);
	color: var(--color-text-light);
}

/* Surface Section (leicht erhöht) */
.section--surface {
	background-color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Section-Header
   -------------------------------------------------------------------------- */

.section-header {
	max-width: 720px;
	margin-bottom: var(--space-16);
}

.section-header--center {
	text-align: center;
	margin-inline: auto;
}

.section-header .overline {
	display: block;
	margin-bottom: var(--space-3);
}

.section-header h2 {
	margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */

.divider {
	width: 48px;
	height: 2px;
	background-color: var(--color-cyan);
	margin-block: var(--space-6);
}

.divider--center {
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Main Content Area
   -------------------------------------------------------------------------- */

.site-main {
	min-height: 60vh;
}

/* --------------------------------------------------------------------------
   Flexbox Utilities
   -------------------------------------------------------------------------- */

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-2        { gap: var(--space-2); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	:root {
		--container-pad: var(--space-6);
	}

	.grid--split {
		grid-template-columns: 1fr;
		gap: var(--space-12);
	}

	.grid--split-reverse .grid__media {
		order: 0;
	}

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

@media (max-width: 768px) {
	:root {
		--container-pad: var(--space-5);
	}

	.section {
		padding-block: var(--space-16);
	}

	.section--lg {
		padding-block: var(--space-20);
	}

	.grid--2,
	.grid--3 {
		grid-template-columns: 1fr;
	}

	.grid--usp {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	:root {
		--container-pad: var(--space-4);
	}
}