/* ============================================================
   SAV — Layout / Container / Sektionen
   ============================================================ */

.sav-container,
.ct-container {
	max-width: var(--container-base);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

@media (min-width: 768px) {
	.sav-container,
	.ct-container {
		padding-inline: var(--space-6);
	}
}

.sav-container--wide { max-width: var(--container-wide); }
.sav-container--narrow { max-width: var(--container-narrow); }

/* Sektion-Spacing */
.sav-section {
	padding-block: var(--space-8);
}
@media (min-width: 768px) {
	.sav-section { padding-block: var(--space-12); }
}
@media (min-width: 1280px) {
	.sav-section { padding-block: var(--space-16); }
}

.sav-section--tight   { padding-block: var(--space-6); }
.sav-section--soft    { background-color: var(--brand-orange-soft); }
.sav-section--neutral { background-color: var(--neutral-50); }
.sav-section--dark    { background-color: var(--brand-anthracite-dark); color: var(--neutral-200); }
.sav-section--dark h1,
.sav-section--dark h2,
.sav-section--dark h3,
.sav-section--dark h4 { color: var(--white); }

/* Grid-Utilities */
.sav-grid {
	display: grid;
	gap: var(--space-5);
}
.sav-grid--2 { grid-template-columns: 1fr; }
.sav-grid--3 { grid-template-columns: 1fr; }
.sav-grid--4 { grid-template-columns: repeat(2, 1fr); }
.sav-grid--6 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
	.sav-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.sav-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
	.sav-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.sav-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.sav-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.sav-grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* Flex-Utilities */
.sav-flex { display: flex; gap: var(--space-3); }
.sav-flex--center { align-items: center; justify-content: center; }
.sav-flex--between { align-items: center; justify-content: space-between; }
.sav-flex--wrap { flex-wrap: wrap; }
.sav-flex--col { flex-direction: column; }

/* Stack — vertikales Spacing in Containern */
.sav-stack > * + * { margin-top: var(--space-4); }
.sav-stack--lg > * + * { margin-top: var(--space-6); }
.sav-stack--xl > * + * { margin-top: var(--space-8); }

/* Helpers */
.sav-text-center { text-align: center; }
.sav-text-right  { text-align: right; }
.sav-text-muted  { color: var(--neutral-500); }
.sav-text-brand  { color: var(--brand-orange); }
.sav-text-strong { font-weight: var(--font-weight-bold); }

.sav-w-full { width: 100%; }
.sav-mx-auto { margin-inline: auto; }

.sav-divider {
	height: 1px;
	background: var(--neutral-200);
	margin-block: var(--space-6);
	border: none;
}

/* Eyebrow — kleines Label über Headlines */
.sav-eyebrow {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--brand-orange);
	margin-bottom: var(--space-3);
}

/* Visually-Hidden — A11y */
.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}