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

html { -webkit-text-size-adjust: 100%; }

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
	color: var(--c-text);
	background: var(--c-bg);
}

img, video { max-width: 100%; height: auto; }

a { color: var(--c-accent); }

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

.site-logo {
	display: block;
	height: 2.5rem;
	width: auto;
	max-width: 100%;
}

.site-footer a,
.breadcrumbs__item[aria-current="page"] {
	color: var(--cf-color-secondary);
}

/* Header */
.site-header {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-block: var(--gap);
}

.site-title {
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--c-text);
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	text-decoration: none;
	color: var(--c-muted);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--c-accent);
}

/* Main */
.site-main {
	flex: 1 0 auto;
	padding-block: 2rem;
}

.content { overflow-wrap: anywhere; }

/* Footer */
.site-footer {
	padding-block: 1.5rem;
	font-size: 0.875rem;
	color: var(--c-muted);
	border-top: 1px solid var(--c-border);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.site-footer__text { margin: 0; }

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ab Tablet: Header und Footer in einer Zeile */
@media (min-width: 48em) {
	.site-header__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.site-footer__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.container { padding-inline: 2rem; }
}

/* Breadcrumbs */
.breadcrumbs { margin-bottom: 1.5rem; font-size: 0.875rem; }

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--c-muted);
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-right: 0.25rem;
}

/* Hero */
.hero { margin: 0 0 1.5rem; }

.hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

/* Inhalt */
.content__title { margin-top: 0; }

/* ==========================================================================
   Hero-Komponente (cf-hero)
   Reihenfolge ist wichtig: Basis, Varianten, Bild, Abdunklung, Inhalt,
   Ausrichtung, Breakpoint, Höhe (zuletzt, damit sie auch ab 48em gilt).
   ========================================================================== */
.cf-hero {
	--cf-on-accent: #ffffff;
	--cf-hero-bg: var(--c-surface);
	--cf-hero-fg: var(--c-text);
	--cf-hero-btn-bg: var(--c-accent);
	--cf-hero-btn-fg: var(--cf-on-accent);
	--cf-hero-overlay-start: 75%;
	--cf-hero-overlay-end: 35%;
	--cf-hero-min-height: 0px;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: var(--cf-hero-min-height);
	margin-bottom: 2rem;
	padding: 2.5rem var(--gap);
	color: var(--cf-hero-fg);
	background: var(--cf-hero-bg);
	border-radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
	.cf-hero { --cf-on-accent: #0b1320; }
}

/* Varianten */
.cf-hero--dark {
	--cf-hero-bg: #0f1720;
	--cf-hero-fg: #ffffff;
	--cf-hero-btn-bg: #ffffff;
	--cf-hero-btn-fg: #0f1720;
}

.cf-hero--accent {
	--cf-hero-bg: var(--c-accent);
	--cf-hero-fg: var(--cf-on-accent);
	--cf-hero-btn-bg: var(--cf-on-accent);
	--cf-hero-btn-fg: var(--c-accent);
}

/* Mit Bild: Text immer hell auf abgedunkeltem Bild */
.cf-hero--has-image {
	--cf-hero-fg: #ffffff;
	--cf-hero-btn-bg: #ffffff;
	--cf-hero-btn-fg: #0f1720;
	--cf-hero-min-height: 18rem;

	background: #0f1720;
}

/* Abdunklung des Bildes (Anfang = unten, Ende = oben) */
.cf-hero--overlay-none   { --cf-hero-overlay-start: 0%;  --cf-hero-overlay-end: 0%; }
.cf-hero--overlay-light  { --cf-hero-overlay-start: 45%; --cf-hero-overlay-end: 15%; }
.cf-hero--overlay-medium { --cf-hero-overlay-start: 75%; --cf-hero-overlay-end: 35%; }
.cf-hero--overlay-strong { --cf-hero-overlay-start: 90%; --cf-hero-overlay-end: 60%; }

.cf-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.cf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--cf-color-dark) var(--cf-hero-overlay-start), transparent),
		color-mix(in srgb, var(--cf-color-dark) var(--cf-hero-overlay-end), transparent)
	);
}

.cf-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Inhalt */
.cf-hero__inner {
	width: 100%;
	max-width: 40rem;
}

.cf-hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 4vw + 1rem, 3rem);
	line-height: 1.15;
}

.cf-hero__text {
	margin: 0 0 1.5rem;
	font-size: 1.125rem;
}

.cf-hero__title:last-child,
.cf-hero__text:last-child { margin-bottom: 0; }

.cf-hero__actions { margin: 0; }

.cf-hero__button {
	display: inline-block;
	padding: 0.625rem 1.25rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--cf-hero-btn-fg);
	background: var(--cf-hero-btn-bg);
	border-radius: 0.375rem;
}

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

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

/* Ausrichtung */
.cf-hero--left   { text-align: left; }
.cf-hero--center { text-align: center; }
.cf-hero--right  { text-align: right; }

.cf-hero--left   .cf-hero__inner { margin-inline-end: auto; }
.cf-hero--center .cf-hero__inner { margin-inline: auto; }
.cf-hero--right  .cf-hero__inner { margin-inline-start: auto; }

@media (min-width: 48em) {
	.cf-hero { padding: 4rem 2rem; }
	.cf-hero--has-image { --cf-hero-min-height: 24rem; }
}

/* Höhe: "normal" braucht keine Regel (Standard). Steht nach dem Media-Block. */
.cf-hero--has-image.cf-hero--height-compact { --cf-hero-min-height: 12rem; }

.cf-hero.cf-hero--height-full { --cf-hero-min-height: 100vh; }

@supports (min-height: 100svh) {
	.cf-hero.cf-hero--height-full { --cf-hero-min-height: 100svh; }
}