/* ==========================================================================
   Landingpage: Sektionen, Buttons, Hilfsklassen
   Benötigt variables.css und layout.css. Keine festen Farben, nur Tokens.
   ========================================================================== */

.cf-landing {
	padding-block: 0;
}

.cf-landing__hero {
	padding-top: var(--cf-space-8);
}

.cf-landing__intro {
	padding-block: var(--cf-space-8);
}

/* Button (wiederverwendbar) */
.cf-button {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--cf-button-fg, var(--cf-color-on-accent));
	background: var(--cf-button-bg, var(--cf-color-accent));
	border-radius: calc(var(--cf-radius) * 0.75);
}

.cf-button:hover { opacity: 0.9; }

.cf-button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* Sektion */
.cf-section {
	--cf-section-bg: var(--cf-color-bg);
	--cf-section-fg: var(--cf-color-text);
	--cf-button-bg: var(--cf-color-accent);
	--cf-button-fg: var(--cf-color-on-accent);

	padding-block: var(--cf-section-pad);
	color: var(--cf-section-fg);
	background: var(--cf-section-bg);
}

/* Hintergrundvarianten */
.cf-section--surface {
	--cf-section-bg: var(--cf-color-surface);
}

.cf-section--dark {
	--cf-section-bg: var(--cf-color-dark);
	--cf-section-fg: var(--cf-color-on-dark);
	--cf-button-bg: var(--cf-color-on-dark);
	--cf-button-fg: var(--cf-color-dark);
}

.cf-section--accent {
	--cf-section-bg: var(--cf-color-accent);
	--cf-section-fg: var(--cf-color-on-accent);
	--cf-button-bg: var(--cf-color-on-accent);
	--cf-button-fg: var(--cf-color-accent);
}

.cf-section--dark a:not(.cf-button),
.cf-section--accent a:not(.cf-button) {
	color: inherit;
}

/* Inhalt */
.cf-section__media {
	margin: 0 0 var(--cf-space-6);
}

.cf-section__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cf-radius);
}

.cf-section__title {
	margin: 0 0 var(--cf-space-4);
	font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
	line-height: 1.2;
}

.cf-section__text {
	overflow-wrap: anywhere;
}

.cf-section__text > :first-child { margin-top: 0; }
.cf-section__text > :last-child  { margin-bottom: 0; }

.cf-section__actions {
	margin: var(--cf-space-6) 0 0;
}

/* Inhaltsblock der Sektion (Titel, Text, Button); wird bei Bild links/rechts zur Gridspalte */
.cf-section__body { min-width: 0; }

/* Bildposition: mobil immer Bild oben; ab mittlerer Breite Bild links oder rechts */
@media (min-width: 48em) {
	.cf-section__inner--image-left,
	.cf-section__inner--image-right {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--cf-space-8);
		align-items: center;
	}

	.cf-section__inner--image-right {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.cf-section__inner--image-right .cf-section__media { order: 2; }

	.cf-section__inner--image-left .cf-section__media,
	.cf-section__inner--image-right .cf-section__media { margin-bottom: 0; }
}

/* Kartenfarben je Hintergrundvariante */
.cf-section {
	--cf-card-bg: var(--cf-color-surface);
}

.cf-section--surface {
	--cf-card-bg: var(--cf-color-bg);
}

.cf-section--dark {
	--cf-card-bg: color-mix(in srgb, var(--cf-color-on-dark) 8%, var(--cf-color-dark));
}

.cf-section--accent {
	--cf-card-bg: color-mix(in srgb, var(--cf-color-on-accent) 12%, var(--cf-color-accent));
}

/* Sektionstyp "cards": mobil eine Spalte, ab 48em zwei, ab 64em bis zu vier */
.cf-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cf-space-4);
	margin: var(--cf-space-8) 0 0;
	padding: 0;
	list-style: none;
}

.cf-section__inner + .cf-cards { margin-top: var(--cf-space-8); }
.cf-container > .cf-cards:first-child { margin-top: 0; }

.cf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: var(--cf-section-fg);
	background: var(--cf-card-bg);
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-radius: var(--cf-radius);
}

.cf-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.cf-card__body {
	padding: var(--cf-space-4) var(--cf-space-4) var(--cf-space-6);
}

.cf-card__title {
	margin: 0 0 var(--cf-space-2);
	font-size: 1.125rem;
	line-height: 1.3;
}

.cf-card__title:last-child { margin-bottom: 0; }

.cf-card__text {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Ganze Karte klickbar über genau einen Link (der Titel) */
.cf-card__link {
	color: inherit;
	text-decoration: none;
}

.cf-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cf-card--link:hover .cf-card__link { text-decoration: underline; }

.cf-card__link:focus-visible { outline: none; }

.cf-card:focus-within {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

@media (min-width: 48em) {
	.cf-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--cf-space-6);
	}
}

@media (min-width: 64em) {
	.cf-cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cf-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Sektionstyp "cta": zentrierter Aufruf mit großem Button */
.cf-section--type-cta {
	text-align: center;
}

.cf-section--type-cta .cf-section__inner {
	max-width: var(--cf-container-narrow);
	margin-inline: auto;
}

.cf-section--type-cta .cf-section__text--cols-1 {
	max-width: none;
}

.cf-button--large {
	padding: 0.875rem 1.75rem;
	font-size: 1.125rem;
}

/* Spalten: nur ab mittlerer Breite, davor immer einspaltig */
@media (min-width: 48em) {
	.cf-section {
		padding-block: var(--cf-section-pad-md);
	}

	.cf-section__text--cols-1 { max-width: 65ch; }

	.cf-section__text--cols-2 { column-count: 2; }
	.cf-section__text--cols-3 { column-count: 3; }

	.cf-section__text--cols-2,
	.cf-section__text--cols-3 {
		column-gap: var(--cf-gap-x);
	}

	.cf-section__text--cols-2 > *,
	.cf-section__text--cols-3 > * {
		break-inside: avoid;
	}
}

/* Sprunglinks (Anker-Navigation)
   Weiches Scrollen nur ohne reduzierte Bewegung. --cf-scroll-offset ist der
   Platz für einen fixierten Header (Standard 0). */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

.cf-section[id],
.cf-modular[id] {
	scroll-margin-top: var(--cf-scroll-offset, 0);
}

/* Modulare Seiten: gleicher Abstand wie Sektionen */
.cf-modular {
	padding-block: var(--cf-section-pad);
}

@media (min-width: 48em) {
	.cf-modular { padding-block: var(--cf-section-pad-md); }
}

/* Nur für Screenreader sichtbar */
.cf-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Modulare Seiten (templates/modular.html.twig, templates/modular/default.html.twig) */
.cf-modular-page {
	padding-block: 0;
}

.cf-modular__title {
	margin: 0 0 var(--cf-space-4);
	font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
	line-height: 1.2;
}

.cf-modular__body {
	overflow-wrap: anywhere;
}