@charset "UTF-8";
/* ==========================================================================
   Arafiq - Stilsystem
   --------------------------------------------------------------------------
   Aufbau:
   01 Zeichen (Farben, Abstaende, Schrift)
   02 Grundlagen und Typografie
   03 Raster und Abschnitte
   04 Helfer
   05 Kopfbereich und Menue
   06 Knoepfe
   07 Abschnittsueberschriften
   08 Hero
   09 Formular
   10 Partner-Laufband
   11 Geteilte Abschnitte
   12 Karten
   13 Pakete und Preise
   14 Terminliste
   15 Schritte
   16 Kennzahlen und Leistungsliste
   17 Akkordeon
   18 Aufruf
   19 Fusszeile
   20 Schwebende Knoepfe und Darstellung
   21 Seitenkopf und Pfad
   22 Textseiten
   23 Paket-Detailseite
   24 Leistungs-Unterseite
   25 Fragen- und Kontaktseite
   26 404
   27 Buchung: Termin, Summe, Zahlweg, Vorgangsseite
   27b Unterseiten: Fakten, Gliederung, Inhaltsverzeichnis
   27c Bilder: Paar und Band
   28 Schmale Schirme (Handy und Tablet)
   29 Bewegung, Kontrast, Druck

   Grundregeln, die diese Datei traegt:
   - Inhalt laeuft nie randlos bis an den Fensterrand. Alles sitzt in .af-rahmen.
   - Zeilenlaenge im Fliesstext hoechstens 70 Zeichen.
   - Zierbilder sind Kacheln mit fester Groesse, niemals "cover".
   - Jede Tippflaeche mindestens 44 px.
   ========================================================================== */

/* == 01 Zeichen =========================================================== */

:root {
	/* Marke */
	--gruen-900: #0a2a1f;
	--gruen-800: #0f3d2e;
	--gruen-700: #104632;
	--gruen-600: #17513c;
	--gruen-500: #1d6349;
	--gruen-050: #edf3f0;
	--gruen-025: #f5f9f7;

	--gold-500: #c89b3c;
	--gold-400: #e0b44e;
	--gold-300: #ffbf2f;
	--gold-text: #7a5600;

	--sand-100: #f7f4ee;
	--sand-050: #fbf9f5;

	--text: #1c2b24;
	--text-mitte: #4a5a52;
	--text-hell: rgba(255, 255, 255, .82);
	/* Platzhalter: dunkel genug fuer 5,1:1 auf Weiss - hellere Grautoene
	   bleiben unter dem Mindestwert 4,5:1. */
	--platzhalter: #667069;
	--weiss: #fff;

	--linie: rgba(16, 70, 50, .14);
	--linie-stark: rgba(16, 70, 50, .26);
	--linie-hell: rgba(255, 255, 255, .2);

	/* Schrift */
	--schrift-titel: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--schrift-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-mini: .8125rem;
	--fs-klein: .9rem;
	--fs-text: 1.0625rem;
	--fs-lead: clamp(1.075rem, 1rem + .35vw, 1.25rem);
	--fs-h4: clamp(1.05rem, 1rem + .3vw, 1.2rem);
	--fs-h3: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
	--fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
	--fs-h1: clamp(2.15rem, 1.5rem + 2.9vw, 4rem);

	/* Raster */
	--rahmen: 1180px;
	--rahmen-breit: 1320px;
	--luft: clamp(1.25rem, 4vw, 2.5rem);
	--abschnitt: clamp(3.5rem, 6vw, 6rem);
	--kopf-hoehe: 78px;

	/* Form */
	--rund-s: 6px;
	--rund-m: 12px;
	--rund-l: 20px;
	--schatten-s: 0 1px 2px rgba(10, 42, 31, .06), 0 2px 8px rgba(10, 42, 31, .05);
	--schatten-m: 0 2px 6px rgba(10, 42, 31, .07), 0 12px 28px rgba(10, 42, 31, .09);
	--schatten-l: 0 4px 12px rgba(10, 42, 31, .1), 0 24px 56px rgba(10, 42, 31, .16);

	--zug: 180ms cubic-bezier(.2, .6, .3, 1);
}

/* == 02 Grundlagen und Typografie ========================================= */

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

html {
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
	margin: 0;
	background: var(--weiss);
	color: var(--text);
	font-family: var(--schrift-text);
	font-size: var(--fs-text);
	line-height: 1.68;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	font-family: var(--schrift-titel);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -.012em;
	text-wrap: balance;
	color: var(--gruen-800);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1.1em; max-width: 70ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--gruen-600); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--gruen-800); }

strong, b { font-weight: 650; }
em { font-style: normal; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

small { font-size: var(--fs-klein); }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

:focus-visible {
	outline: 3px solid var(--gold-500);
	outline-offset: 2px;
	border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold-300); color: var(--gruen-900); }

button { font: inherit; color: inherit; }

/* == 03 Raster und Abschnitte ============================================= */

.af-rahmen {
	width: 100%;
	max-width: var(--rahmen);
	margin-inline: auto;
	padding-inline: var(--luft);
}
.af-rahmen--breit { max-width: var(--rahmen-breit); }

.af-inhalt { display: block; }

.af-abschnitt { padding-block: var(--abschnitt); }

.af-flaeche { background: var(--sand-050); }

.af-dunkel {
	position: relative;
	isolation: isolate;
	background: var(--gruen-800);
	color: var(--text-hell);
	padding-block: var(--abschnitt);
}
.af-dunkel h2,
.af-dunkel h3,
.af-dunkel h4 { color: var(--weiss); }
.af-dunkel a { color: var(--gold-300); }
.af-dunkel a:hover { color: var(--weiss); }

/* Zierde: feste Kachel, niemals skaliert. */
.af-zierde {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: repeat;
	background-size: 260px auto;
	opacity: .05;
	pointer-events: none;
}

/* Deckbild: echtes img statt background-image, damit srcset greift. */
.af-deckbild {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--gruen-800);
}
.af-deckbild__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--af-bildpos, center);
}
.af-deckbild::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(10, 42, 31, .92) 0%, rgba(10, 42, 31, .78) 42%, rgba(10, 42, 31, .5) 100%);
}

/* == 04 Helfer ============================================================ */

.af-nurlesen {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.af-sprung {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -110%);
	z-index: 200;
	background: var(--gruen-800);
	color: var(--weiss);
	padding: .7rem 1.2rem;
	border-radius: 0 0 var(--rund-s) var(--rund-s);
	text-decoration: none;
	font-weight: 600;
	transition: transform var(--zug);
}
.af-sprung:focus { transform: translate(-50%, 0); color: var(--weiss); }

.af-mittig { text-align: center; margin-top: 2.5rem; }
.af-mittig p { margin-inline: auto; }

.af-svg { flex: none; }

.af-marke { color: var(--gold-500); flex: none; }
.af-dunkel .af-marke,
.af-kicker--hell .af-marke { color: var(--gold-300); }

.af-fussnote {
	font-size: var(--fs-klein);
	color: var(--text-mitte);
	margin-top: 1.2rem;
}

.af-vorlauf {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--text-mitte);
}
.af-vorlauf--gross {
	font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
	color: var(--text);
}

.af-leer {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--text-mitte);
	background: var(--gruen-025);
	border-radius: var(--rund-m);
}

/* == 05 Kopfbereich und Menue ============================================= */

/* Der Kopf liegt im Fluss, klebt aber oben. Er belegt echte Hoehe - deshalb
   beginnt der Inhalt darunter und nicht dahinter. */
.af-kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--weiss);
	border-bottom: 1px solid var(--linie);
	transition: box-shadow var(--zug), background var(--zug);
}
.af-kopf[data-scrollt="ja"] { box-shadow: var(--schatten-s); }

/* Auf der Startseite und in Seitenkoepfen sitzt der Kopf ueber dem Bild. */
.home .af-kopf,
.af-seite-paket .af-kopf,
body:not(.home) .af-kopf {
	background: var(--weiss);
}

.af-kopf__reihe {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--kopf-hoehe);
}

.af-logo { flex: none; display: block; line-height: 0; }
.af-logo__bild {
	width: auto;
	height: clamp(34px, 3.4vw, 42px);
	transition: height var(--zug);
}
.af-kopf[data-scrollt="ja"] .af-logo__bild { height: clamp(30px, 3vw, 36px); }

.af-nav { margin-left: auto; }
.af-nav__liste {
	display: flex;
	align-items: center;
	gap: clamp(.15rem, 1vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.af-nav__liste li { margin: 0; position: relative; }
.af-nav__liste > li > a {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .65rem .7rem;
	min-height: 44px;
	color: var(--gruen-800);
	font-size: .95rem;
	font-weight: 550;
	text-decoration: none;
	border-radius: var(--rund-s);
	white-space: nowrap;
	transition: color var(--zug), background var(--zug);
}
.af-nav__liste > li > a:hover { background: var(--gruen-025); color: var(--gruen-600); }
.af-nav__liste > li.af-aktiv > a { color: var(--gruen-600); }
.af-nav__liste > li.af-aktiv > a::after {
	content: "";
	position: absolute;
	left: .7rem; right: .7rem; bottom: .3rem;
	height: 2px;
	background: var(--gold-500);
	border-radius: 2px;
}

/* Untermenue */
.af-nav__liste .sub-menu {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	min-width: 16rem;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	box-shadow: var(--schatten-m);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.35rem);
	transition: opacity var(--zug), transform var(--zug), visibility var(--zug);
	z-index: 10;
}
.af-nav__liste > li:hover > .sub-menu,
.af-nav__liste > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.af-nav__liste .sub-menu a {
	display: block;
	padding: .6rem .75rem;
	min-height: 44px;
	color: var(--gruen-800);
	font-size: .925rem;
	text-decoration: none;
	border-radius: var(--rund-s);
}
.af-nav__liste .sub-menu a:hover { background: var(--gruen-025); color: var(--gruen-600); }
.af-nav__liste > li.menu-item-has-children > a::after {
	content: "";
	width: .42em; height: .42em;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-.1em);
	opacity: .6;
}

.af-kopf__tat {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: none;
}
.af-kopf__ruf {
	display: none;
	align-items: center;
	gap: .4rem;
	font-size: .875rem;
	color: var(--text-mitte);
	text-decoration: none;
}
.af-kopf__ruf:hover { color: var(--gruen-600); }
.af-kopf__knopf { white-space: nowrap; }

/* Brenner */
.af-brenner {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	padding: 0;
	background: var(--gruen-800);
	border: 0;
	border-radius: var(--rund-s);
	cursor: pointer;
}
.af-brenner__linien { display: grid; gap: 4px; }
.af-brenner__linien i {
	display: block;
	width: 20px; height: 2px;
	background: var(--weiss);
	border-radius: 2px;
	transition: transform var(--zug), opacity var(--zug);
}
.af-brenner[aria-expanded="true"] .af-brenner__linien i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.af-brenner[aria-expanded="true"] .af-brenner__linien i:nth-child(2) { opacity: 0; }
.af-brenner[aria-expanded="true"] .af-brenner__linien i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Schublade */
.af-schublade {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(24rem, 100%);
	z-index: 150;
	display: flex;
	flex-direction: column;
	background: var(--weiss);
	box-shadow: var(--schatten-l);
	transform: translateX(100%);
	transition: transform 240ms cubic-bezier(.2, .7, .25, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.af-schublade[hidden] { display: flex; }
.af-schublade[data-offen="ja"] { transform: translateX(0); }

.af-schublade__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--linie);
}
.af-schublade__titel {
	font-family: var(--schrift-titel);
	font-size: 1.15rem;
	color: var(--gruen-800);
}
.af-schublade__zu {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	padding: 0;
	background: var(--gruen-025);
	border: 0;
	border-radius: var(--rund-s);
	color: var(--gruen-800);
	cursor: pointer;
}
.af-schublade__nav { padding: .5rem .75rem; flex: 1; }
.af-schublade__liste,
.af-schublade__liste .sub-menu { margin: 0; padding: 0; list-style: none; }
.af-schublade__liste a {
	display: flex;
	align-items: center;
	min-height: 50px;
	padding: .5rem .75rem;
	color: var(--gruen-800);
	font-weight: 550;
	text-decoration: none;
	border-radius: var(--rund-s);
	border-bottom: 1px solid var(--linie);
}
.af-schublade__liste .sub-menu a {
	padding-left: 1.75rem;
	font-weight: 400;
	font-size: .95rem;
	color: var(--text-mitte);
}
.af-schublade__liste li.af-aktiv > a { color: var(--gruen-600); background: var(--gruen-025); }
.af-schublade__fuss {
	display: grid;
	gap: .75rem;
	padding: 1.25rem;
	border-top: 1px solid var(--linie);
	background: var(--sand-050);
}
.af-schublade__mail {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .925rem;
	color: var(--text-mitte);
	text-decoration: none;
	min-height: 44px;
}

.af-blende {
	position: fixed;
	inset: 0;
	z-index: 140;
	background: rgba(10, 42, 31, .45);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--zug);
}
.af-blende[data-offen="ja"] { opacity: 1; }

/* == 06 Knoepfe =========================================================== */

.af-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 46px;
	padding: .7rem 1.25rem;
	border: 1.5px solid transparent;
	border-radius: var(--rund-s);
	font-family: var(--schrift-text);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--zug), color var(--zug), border-color var(--zug), transform var(--zug), box-shadow var(--zug);
}
.af-knopf--gross { min-height: 54px; padding: .9rem 1.6rem; font-size: 1rem; }
.af-knopf .af-svg { transition: transform var(--zug); }
.af-knopf:hover .af-svg { transform: translateX(3px); }
.af-knopf:active { transform: translateY(1px); }

.af-knopf--voll {
	background: var(--gold-300);
	border-color: var(--gold-300);
	color: var(--gruen-900);
}
.af-knopf--voll:hover {
	background: var(--gold-400);
	border-color: var(--gold-400);
	color: var(--gruen-900);
	box-shadow: 0 6px 18px rgba(255, 191, 47, .32);
}

.af-knopf--gruen {
	background: var(--gruen-700);
	border-color: var(--gruen-700);
	color: var(--weiss);
}
.af-knopf--gruen:hover {
	background: var(--gruen-800);
	border-color: var(--gruen-800);
	color: var(--weiss);
	box-shadow: 0 6px 18px rgba(16, 70, 50, .24);
}

.af-knopf--linie {
	background: transparent;
	border-color: var(--linie-stark);
	color: var(--gruen-800);
}
.af-knopf--linie:hover { background: var(--gruen-025); border-color: var(--gruen-700); color: var(--gruen-800); }

.af-knopf--linie-hell {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .42);
	color: var(--weiss);
}
.af-knopf--linie-hell:hover { background: rgba(255, 255, 255, .16); border-color: var(--weiss); color: var(--weiss); }

/* == 07 Abschnittsueberschriften =========================================== */

.af-kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .35rem .8rem .35rem .6rem;
	background: var(--gruen-050);
	border-radius: 100px;
	font-size: var(--fs-mini);
	font-weight: 650;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gruen-700);
	max-width: none;
}
.af-kicker--hell {
	background: rgba(255, 255, 255, .12);
	color: var(--weiss);
	backdrop-filter: blur(4px);
}

.af-ueberschrift__titel { margin-bottom: .5em; }
.af-ueberschrift__titel em { color: var(--gold-text); font-style: normal; }
.af-dunkel .af-ueberschrift__titel em,
.af-ueberschrift--hell .af-ueberschrift__titel em { color: var(--gold-300); }

.af-ueberschrift__text {
	font-size: var(--fs-lead);
	color: var(--text-mitte);
	max-width: 62ch;
}
.af-ueberschrift--hell .af-ueberschrift__text { color: var(--text-hell); }
.af-ueberschrift--mittig { text-align: center; margin-inline: auto; max-width: 46rem; margin-bottom: 3rem; }
.af-ueberschrift--mittig .af-ueberschrift__text { margin-inline: auto; }

.af-zweiteilig {
	display: grid;
	gap: 1.5rem 3rem;
	align-items: end;
	margin-bottom: 2.75rem;
}
.af-zweiteilig__seite { display: grid; gap: 1.25rem; justify-items: start; }
.af-zweiteilig__seite p { color: var(--text-mitte); }

@media (min-width: 62rem) {
	.af-zweiteilig { grid-template-columns: 1.15fr .85fr; }
	.af-zweiteilig .af-ueberschrift { margin-bottom: 0; }
}

/* == 08 Hero ============================================================== */

.af-hero {
	position: relative;
	isolation: isolate;
	color: var(--weiss);
	padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem);
}
.af-hero .af-deckbild::after {
	background:
		linear-gradient(100deg, rgba(10, 42, 31, .94) 0%, rgba(10, 42, 31, .82) 46%, rgba(10, 42, 31, .55) 100%);
}

.af-hero__reihe {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.af-hero__titel {
	color: var(--weiss);
	margin-bottom: .55em;
	letter-spacing: -.02em;
}
.af-hero__titel em { color: var(--gold-300); font-style: normal; }

.af-hero__lead {
	font-size: var(--fs-lead);
	color: var(--text-hell);
	max-width: 34ch;
}

.af-hero__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

.af-hero__fakten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem clamp(1rem, 2vw, 2rem);
	margin: 2.25rem 0 0;
	padding: 1.5rem 0 0;
	list-style: none;
	border-top: 1px solid var(--linie-hell);
}
.af-hero__fakten li { margin: 0; }
.af-hero__fakten strong {
	display: block;
	font-family: var(--schrift-titel);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 600;
	color: var(--gold-300);
	line-height: 1.1;
	margin-bottom: .3rem;
}
.af-hero__fakten span {
	font-size: var(--fs-klein);
	color: var(--text-hell);
	line-height: 1.45;
}

@media (min-width: 64rem) {
	.af-hero__reihe { grid-template-columns: 1.05fr minmax(360px, .95fr); align-items: center; }
	.af-hero__lead { max-width: 42ch; }
}

/* == 09 Formular ========================================================== */

.af-formular {
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-l);
	box-shadow: var(--schatten-m);
	padding: clamp(1.25rem, 2.5vw, 2rem);
	color: var(--text);
}
.af-formular--kompakt { padding: clamp(1.1rem, 2vw, 1.6rem); }
.af-formular--kompakt .af-raster { gap: .8rem; }
.af-formular--kompakt .af-hinweis { display: none; }
.af-formular--kompakt .af-zustimmung { margin-top: 1rem; padding: .7rem .85rem; }
.af-formular--hell { box-shadow: none; border-radius: var(--rund-m); padding: 1.1rem 0 0; border: 0; border-top: 1px solid var(--linie); }

.af-formular__kopf { margin-bottom: 1.25rem; }
.af-formular__titel {
	font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
	margin-bottom: .35em;
}
.af-formular__text {
	font-size: var(--fs-klein);
	color: var(--text-mitte);
	margin: 0;
}

.af-raster {
	display: grid;
	gap: 1rem;
}
@media (min-width: 30rem) {
	.af-raster { grid-template-columns: 1fr 1fr; }
	.af-feld--breit { grid-column: 1 / -1; }
	.af-formular--kompakt .af-raster > .af-feld:first-child { grid-column: 1 / -1; }
}

.af-feld { display: grid; gap: .4rem; min-width: 0; }

.af-label {
	font-size: var(--fs-klein);
	font-weight: 600;
	color: var(--gruen-800);
	line-height: 1.35;
}
.af-pflicht { color: #a4361f; }

.af-eingabe,
.af-select { position: relative; display: block; }

.af-eingabe__symbol,
.af-select__symbol {
	position: absolute;
	left: .8rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gruen-500);
	pointer-events: none;
	z-index: 1;
}
.af-eingabe:has(textarea) .af-eingabe__symbol { top: 1.4rem; transform: none; }

.af-eingabe__feld,
.af-select__native {
	width: 100%;
	min-height: 48px;
	padding: .7rem .85rem;
	background: var(--weiss);
	border: 1.5px solid var(--linie-stark);
	border-radius: var(--rund-s);
	font-family: var(--schrift-text);
	font-size: 1rem;
	color: var(--text);
	transition: border-color var(--zug), box-shadow var(--zug);
	appearance: none;
}
.af-eingabe__feld.hat-symbol,
.af-select__native.hat-symbol { padding-left: 2.5rem; }
textarea.af-eingabe__feld { min-height: 7rem; line-height: 1.6; resize: vertical; }

.af-eingabe__feld::placeholder { color: var(--platzhalter); }
.af-eingabe__feld:hover,
.af-select__native:hover { border-color: var(--gruen-500); }
.af-eingabe__feld:focus,
.af-select__native:focus {
	outline: none;
	border-color: var(--gruen-700);
	box-shadow: 0 0 0 3px rgba(16, 70, 50, .14);
}

.af-select__native { padding-right: 2.6rem; cursor: pointer; }
.af-select__pfeil {
	position: absolute;
	right: .8rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gruen-600);
	pointer-events: none;
}

/* Eigene Auswahlliste - wird vom Skript aufgebaut, das echte select bleibt
   als Rueckfall im Markup und wird dann versteckt. */
.af-select--eigen .af-select__native {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.af-wahl {
	position: relative;
	width: 100%;
}
.af-wahl__knopf {
	display: flex;
	align-items: center;
	gap: .55rem;
	width: 100%;
	min-height: 48px;
	padding: .7rem 2.6rem .7rem .85rem;
	background: var(--weiss);
	border: 1.5px solid var(--linie-stark);
	border-radius: var(--rund-s);
	font-size: 1rem;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--zug), box-shadow var(--zug);
}
.af-wahl__knopf:hover { border-color: var(--gruen-500); }
.af-wahl__knopf[aria-expanded="true"] {
	border-color: var(--gruen-700);
	box-shadow: 0 0 0 3px rgba(16, 70, 50, .14);
}
.af-wahl__symbol { color: var(--gruen-500); flex: none; }
.af-wahl__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.af-wahl__text--leer { color: var(--platzhalter); }
.af-wahl__pfeil {
	position: absolute;
	right: .8rem; top: 50%;
	transform: translateY(-50%);
	color: var(--gruen-600);
	pointer-events: none;
	transition: transform var(--zug);
}
.af-wahl__knopf[aria-expanded="true"] + .af-wahl__pfeil,
.af-wahl__knopf[aria-expanded="true"] ~ .af-wahl__pfeil { transform: translateY(-50%) rotate(180deg); }

.af-wahl__liste {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0; right: 0;
	z-index: 30;
	max-height: 17rem;
	margin: 0;
	padding: .35rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	box-shadow: var(--schatten-l);
}
.af-wahl__liste[hidden] { display: none; }
.af-wahl__punkt {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: .6rem .7rem;
	min-height: 44px;
	border-radius: var(--rund-s);
	font-size: .95rem;
	line-height: 1.4;
	cursor: pointer;
}
.af-wahl__punkt:hover,
.af-wahl__punkt[data-af-hin="ja"] { background: var(--gruen-025); }
.af-wahl__punkt[aria-selected="true"] {
	background: var(--gruen-050);
	font-weight: 600;
	color: var(--gruen-800);
}
.af-wahl__punkt[aria-selected="true"]::after {
	content: "";
	margin-left: auto;
	width: .55rem; height: .3rem;
	border-left: 2px solid var(--gruen-600);
	border-bottom: 2px solid var(--gruen-600);
	transform: rotate(-45deg);
	flex: none;
}
.af-wahl__punkt--kopf {
	padding: .5rem .7rem .3rem;
	min-height: 0;
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-mitte);
	cursor: default;
	pointer-events: none;
}

/* Anzahl Personen */
.af-zahl {
	display: grid;
	grid-template-columns: 48px 1fr 48px;
	align-items: center;
	border: 1.5px solid var(--linie-stark);
	border-radius: var(--rund-s);
	background: var(--weiss);
	overflow: hidden;
	transition: border-color var(--zug), box-shadow var(--zug);
}
.af-zahl:focus-within { border-color: var(--gruen-700); box-shadow: 0 0 0 3px rgba(16, 70, 50, .14); }
.af-zahl__knopf {
	display: grid;
	place-items: center;
	width: 48px; height: 46px;
	padding: 0;
	background: var(--gruen-025);
	border: 0;
	color: var(--gruen-800);
	cursor: pointer;
	transition: background var(--zug);
}
.af-zahl__knopf:hover { background: var(--gruen-050); }
.af-zahl__knopf:disabled { opacity: .35; cursor: not-allowed; }
.af-zahl__feld {
	min-width: 0;
	height: 46px;
	padding: 0 .25rem;
	border: 0;
	border-inline: 1.5px solid var(--linie);
	text-align: center;
	font-family: var(--schrift-text);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	appearance: textfield;
	-moz-appearance: textfield;
}
.af-zahl__feld::-webkit-outer-spin-button,
.af-zahl__feld::-webkit-inner-spin-button { appearance: none; margin: 0; }
.af-zahl__feld:focus { outline: none; }

.af-hinweis {
	margin: 0;
	font-size: var(--fs-mini);
	color: var(--text-mitte);
	line-height: 1.4;
}

.af-feldfehler {
	margin: 0;
	font-size: var(--fs-mini);
	font-weight: 600;
	color: #a4361f;
	line-height: 1.4;
}
.af-feld--fehler .af-eingabe__feld,
.af-feld--fehler .af-select__native,
.af-feld--fehler .af-wahl__knopf,
.af-feld--fehler .af-zahl { border-color: #c4553a; }

.af-zustimmung {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .1rem .65rem;
	margin: 1.35rem 0 0;
	padding: .9rem 1rem;
	background: var(--gruen-025);
	border-radius: var(--rund-s);
}
.af-zustimmung input {
	width: 24px; height: 24px;
	margin: .1rem 0 0;
	accent-color: var(--gruen-700);
	flex: none;
}
.af-zustimmung label {
	font-size: var(--fs-mini);
	line-height: 1.5;
	color: var(--text-mitte);
}
.af-zustimmung .af-feldfehler { grid-column: 2; }

.af-koeder {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.af-formular__fuss {
	display: grid;
	gap: .75rem;
	margin-top: 1.35rem;
}
.af-formular__fuss .af-knopf { width: 100%; }
.af-formular__fussnote {
	margin: 0;
	font-size: var(--fs-mini);
	color: var(--text-mitte);
	text-align: center;
}

.af-melde {
	display: flex;
	gap: .9rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--rund-m);
	font-size: .95rem;
	margin: 0 0 1.25rem;
	max-width: none;
}
.af-melde--gut {
	background: var(--gruen-050);
	border: 1px solid rgba(16, 70, 50, .2);
	margin: 0;
}
.af-melde--gut h2 { font-size: var(--fs-h3); margin-bottom: .35em; }
.af-melde--gut p { font-size: .95rem; color: var(--text-mitte); }
.af-melde__zeichen {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	flex: none;
	background: var(--gruen-700);
	color: var(--weiss);
	border-radius: 50%;
}
.af-melde__weiter { margin-top: 1rem; }
.af-melde--schlecht {
	background: #fdf1ee;
	border: 1px solid #e8b6a8;
	color: #7d2a15;
	font-weight: 550;
}

/* == 10 Partner-Laufband ================================================== */

.af-partner {
	padding-block: clamp(2.5rem, 4vw, 4rem);
	border-bottom: 1px solid var(--linie);
	overflow: hidden;
}
.af-partner__titel {
	text-align: center;
	font-size: var(--fs-h3);
	color: var(--text-mitte);
	font-family: var(--schrift-text);
	font-weight: 550;
	letter-spacing: 0;
	margin-bottom: 2rem;
}
.af-partner__titel em { color: var(--gruen-700); font-style: normal; font-weight: 650; }

.af-laufband {
	position: relative;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.af-laufband__spur {
	display: flex;
	align-items: center;
	width: max-content;
	gap: clamp(3rem, 7vw, 6.5rem);
	padding-inline: clamp(1.5rem, 3.5vw, 3.25rem);
	animation: af-lauf var(--af-lauf-dauer, 34s) linear infinite;
}
.af-laufband:hover .af-laufband__spur,
.af-laufband:focus-within .af-laufband__spur { animation-play-state: paused; }
.af-laufband__feld {
	flex: none;
	display: grid;
	place-items: center;
	height: 74px;
}
.af-laufband__logo {
	width: auto;
	max-height: 62px;
	max-width: 190px;
	object-fit: contain;
	/* Volle Farbe - die Logos sind so hinterlegt, wie sie die Partner fuehren. */
	opacity: .92;
	transition: opacity var(--zug), transform var(--zug);
}
.af-laufband__feld:hover .af-laufband__logo { opacity: 1; transform: scale(1.04); }

@keyframes af-lauf {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--af-lauf-weg, 50%)), 0, 0); }
}

/* Ohne Skript oder bei "Bewegung reduzieren": ruhige Reihe, mittig. */
.af-laufband:not([data-af-bereit="ja"]) .af-laufband__spur,
html.af-ruhe .af-laufband__spur {
	animation: none;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

/* == 11 Geteilte Abschnitte ================================================ */

.af-ueber { padding-block: var(--abschnitt); }

.af-ueber__reihe {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.af-ueber__bild { position: relative; }
.af-ueber__foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--rund-l);
}
.af-ueber__foto--hoch { aspect-ratio: 4 / 5; }
.af-ueber__marke {
	position: absolute;
	right: -.75rem;
	bottom: -.75rem;
	display: grid;
	place-items: center;
	width: clamp(64px, 8vw, 88px);
	height: clamp(64px, 8vw, 88px);
	background: var(--gruen-800);
	color: var(--gold-300);
	border: 4px solid var(--weiss);
	border-radius: 50%;
}

.af-ueber__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 2rem;
}

.af-versprechen {
	display: grid;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
.af-versprechen li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .9rem;
	margin: 0;
}
.af-versprechen h3 { font-size: var(--fs-h4); margin-bottom: .25em; }
.af-versprechen p { font-size: var(--fs-klein); color: var(--text-mitte); margin: 0; }
.af-versprechen__zeichen {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	background: var(--gruen-050);
	color: var(--gruen-700);
	border-radius: var(--rund-s);
}
.af-dunkel .af-versprechen__zeichen { background: rgba(255, 255, 255, .1); color: var(--gold-300); }
.af-dunkel .af-versprechen p { color: var(--text-hell); }

.af-versprechen--drei { gap: 1.75rem; }
@media (min-width: 56rem) {
	.af-versprechen--drei { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 62rem) {
	.af-ueber__reihe { grid-template-columns: .92fr 1.08fr; }
	.af-ueber__reihe--gedreht { grid-template-columns: 1.08fr .92fr; }
	.af-ueber__reihe--gedreht .af-ueber__bild { order: 2; }
	.af-ueber__marke { right: auto; left: -1.25rem; }
	.af-ueber__reihe--gedreht .af-ueber__marke { left: auto; right: -1.25rem; }
}

/* == 12 Karten ============================================================ */

.af-karten {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
@media (min-width: 70rem) {
	.af-karten { grid-template-columns: repeat(3, 1fr); }
	.af-karten--vier { grid-template-columns: repeat(4, 1fr); }
}

.af-karte {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: clamp(1.35rem, 2vw, 1.85rem);
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	transition: transform var(--zug), box-shadow var(--zug), border-color var(--zug);
}
.af-karte:hover {
	transform: translateY(-3px);
	box-shadow: var(--schatten-m);
	border-color: rgba(16, 70, 50, .22);
}
.af-karte__zeichen {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	background: var(--gruen-050);
	color: var(--gruen-700);
	border-radius: var(--rund-s);
	margin-bottom: .35rem;
}
.af-karte__titel { font-size: var(--fs-h4); margin: 0; }
.af-karte__text {
	font-size: var(--fs-klein);
	color: var(--text-mitte);
	margin: 0;
	flex: 1;
}
.af-karte__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 44px;
	font-size: var(--fs-klein);
	font-weight: 650;
	color: var(--gruen-700);
	text-decoration: none;
}
.af-karte__link .af-svg { transition: transform var(--zug); }
.af-karte:hover .af-karte__link .af-svg { transform: translateX(4px); }
.af-karte__link:hover { color: var(--gruen-800); text-decoration: underline; }

/* == 13 Pakete und Preise ================================================= */

.af-termine { padding-block: var(--abschnitt); }

.af-pakete {
	display: grid;
	gap: clamp(1.25rem, 2vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
@media (min-width: 62rem) {
	.af-pakete { grid-template-columns: repeat(3, 1fr); }
}
.af-pakete__feld { display: flex; min-width: 0; }
.af-pakete__feld > .af-paket { width: 100%; }

.af-paket {
	display: flex;
	flex-direction: column;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	overflow: hidden;
	transition: transform var(--zug), box-shadow var(--zug), border-color var(--zug);
}
.af-paket:hover {
	transform: translateY(-3px);
	box-shadow: var(--schatten-m);
	border-color: rgba(16, 70, 50, .22);
}

.af-paket__bild { position: relative; background: var(--gruen-800); }
.af-paket__foto {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(.2, .6, .3, 1);
}
.af-paket:hover .af-paket__foto { transform: scale(1.035); }
.af-paket__bild::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(10, 42, 31, .78), transparent);
	pointer-events: none;
}
.af-paket__saison {
	position: absolute;
	left: 1rem; bottom: .85rem;
	z-index: 1;
	margin: 0;
	font-size: var(--fs-mini);
	font-weight: 650;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--weiss);
}
.af-fahne {
	position: absolute;
	right: .85rem; top: .85rem;
	z-index: 1;
	margin: 0;
	padding: .3rem .7rem;
	background: var(--gold-300);
	color: var(--gruen-900);
	border-radius: 100px;
	font-size: var(--fs-mini);
	font-weight: 700;
}

.af-paket__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.15rem, 2vw, 1.5rem);
	flex: 1;
}
.af-paket__titel { font-size: var(--fs-h4); margin: 0; }
.af-paket__titel a { color: inherit; text-decoration: none; }
.af-paket__titel a:hover { color: var(--gruen-600); text-decoration: underline; }

.af-daten { display: grid; gap: .55rem; margin: 0; }
.af-daten > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; align-items: start; }
.af-daten dt {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: var(--fs-mini);
	font-weight: 600;
	color: var(--text-mitte);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.af-daten dt .af-svg { color: var(--gruen-500); }
.af-daten dd { margin: 0; font-size: var(--fs-klein); font-weight: 550; }

.af-paket__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .85rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--linie);
}
.af-paket__fuss .af-knopf { flex: 1 1 9rem; }

.af-preis { display: flex; align-items: baseline; gap: .3rem; margin: 0; flex-wrap: wrap; }
.af-preis__vor { font-size: var(--fs-klein); color: var(--text-mitte); }
.af-preis__zahl {
	font-family: var(--schrift-titel);
	font-size: clamp(1.5rem, 1.2rem + .9vw, 1.85rem);
	font-weight: 600;
	color: var(--gruen-800);
	line-height: 1;
	white-space: nowrap;
}
.af-preis__nach { font-size: var(--fs-mini); color: var(--text-mitte); width: 100%; }

/* Uebersichtsleiste und Filter */
.af-uebersicht__leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--linie);
}
.af-uebersicht__titel { font-size: var(--fs-h3); margin-bottom: .25em; }
.af-uebersicht__zahl { margin: 0; font-size: var(--fs-klein); color: var(--text-mitte); }
.af-uebersicht__zahl strong { color: var(--gruen-800); font-size: var(--fs-text); }

.af-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.af-filter__knopf {
	min-height: 44px;
	padding: .55rem 1rem;
	background: var(--weiss);
	border: 1.5px solid var(--linie-stark);
	border-radius: 100px;
	font-size: var(--fs-klein);
	font-weight: 600;
	color: var(--gruen-800);
	cursor: pointer;
	transition: background var(--zug), border-color var(--zug), color var(--zug);
}
.af-filter__knopf:hover { border-color: var(--gruen-600); background: var(--gruen-025); }
.af-filter__knopf.af-aktiv {
	background: var(--gruen-700);
	border-color: var(--gruen-700);
	color: var(--weiss);
}

/* Hadsch-Hinweis */
.af-hadsch { padding-block: var(--abschnitt); }
.af-hadsch__reihe {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--gruen-025);
	border: 1px solid var(--linie);
	border-radius: var(--rund-l);
}
.af-hadsch__foto {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--rund-m);
}
.af-hadsch__text h2 { font-size: var(--fs-h3); }
.af-hadsch__text p { color: var(--text-mitte); margin-bottom: 1.5rem; }
@media (min-width: 56rem) {
	.af-hadsch__reihe { grid-template-columns: .8fr 1.2fr; }
}

/* == 14 Terminliste ======================================================= */

.af-termine__rest { margin-top: 3rem; }
.af-termine__rest h3 {
	font-size: var(--fs-h4);
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--linie);
	margin-bottom: .25rem;
}

.af-terminliste { margin: 0; padding: 0; list-style: none; }
.af-terminliste li { margin: 0; border-bottom: 1px solid var(--linie); }
.af-terminliste a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .2rem .9rem;
	align-items: center;
	padding: 1rem .35rem;
	min-height: 56px;
	color: var(--text);
	text-decoration: none;
	transition: background var(--zug), padding-inline var(--zug);
}
.af-terminliste a:hover { background: var(--gruen-025); padding-inline: .75rem .35rem; }
.af-terminliste__zeit {
	grid-row: 1;
	font-size: var(--fs-mini);
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gruen-600);
}
.af-terminliste__name { grid-row: 2; font-weight: 600; }
.af-terminliste__dauer { grid-row: 3; font-size: var(--fs-mini); color: var(--text-mitte); }
.af-terminliste__preis {
	grid-column: 2; grid-row: 1 / span 2;
	font-family: var(--schrift-titel);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--gruen-800);
	white-space: nowrap;
	justify-self: end;
}
.af-terminliste__pfeil {
	grid-column: 2; grid-row: 3;
	justify-self: end;
	color: var(--gruen-600);
	transition: transform var(--zug);
}
.af-terminliste a:hover .af-terminliste__pfeil { transform: translateX(4px); }
.af-terminliste__hadsch a { background: var(--sand-050); }

@media (min-width: 48rem) {
	.af-terminliste a {
		grid-template-columns: 12rem 1fr 10rem 7rem 2rem;
		grid-template-rows: auto;
		gap: 1rem;
	}
	.af-terminliste__zeit,
	.af-terminliste__name,
	.af-terminliste__dauer,
	.af-terminliste__preis,
	.af-terminliste__pfeil { grid-row: 1; }
	.af-terminliste__zeit { grid-column: 1; }
	.af-terminliste__name { grid-column: 2; }
	.af-terminliste__dauer { grid-column: 3; }
	.af-terminliste__preis { grid-column: 4; justify-self: end; }
	.af-terminliste__pfeil { grid-column: 5; justify-self: end; }
}

.af-terminliste--breit { border-top: 1px solid var(--linie); }

/* == 15 Schritte ========================================================== */

.af-schritte {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
@media (min-width: 46rem) { .af-schritte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .af-schritte { grid-template-columns: repeat(4, 1fr); } }

.af-schritt {
	position: relative;
	margin: 0;
	padding-top: 3.75rem;
}
.af-schritt__zahl {
	position: absolute;
	left: 0; top: 0;
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	background: var(--gold-300);
	color: var(--gruen-900);
	border-radius: 50%;
	font-family: var(--schrift-titel);
	font-size: 1.15rem;
	font-weight: 600;
}
.af-dunkel .af-schritt::before,
.af-schritt::before {
	content: "";
	position: absolute;
	left: 52px; top: 26px;
	right: -1.5rem;
	height: 1px;
	background: var(--linie);
}
.af-dunkel .af-schritt::before { background: var(--linie-hell); }
.af-schritt:last-child::before { display: none; }
@media (max-width: 67.99rem) {
	.af-schritt::before { display: none; }
}
@media (min-width: 46rem) and (max-width: 67.99rem) {
	.af-schritt:nth-child(odd)::before { display: block; }
	.af-schritt:nth-child(even)::before { display: none; }
}

.af-schritt__titel { font-size: var(--fs-h4); margin-bottom: .4em; }
.af-schritt__text { font-size: var(--fs-klein); color: var(--text-mitte); margin: 0; }
.af-dunkel .af-schritt__text { color: var(--text-hell); }

.af-schritte--schmal { grid-template-columns: 1fr !important; gap: 1.25rem; }
.af-schritte--schmal .af-schritt {
	padding: 0 0 0 4.25rem;
	min-height: 52px;
}
.af-schritte--schmal .af-schritt::before {
	left: 26px; top: 52px; right: auto;
	width: 1px; height: calc(100% + 1.25rem - 52px);
}
.af-schritte--schmal .af-schritt__titel { margin-bottom: .25em; padding-top: .55rem; }

/* == 16 Kennzahlen und Leistungsliste ===================================== */

.af-kennzahlen {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, 1fr);
	background: var(--linie);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	overflow: hidden;
	margin-bottom: 3rem;
}
@media (min-width: 56rem) { .af-kennzahlen { grid-template-columns: repeat(4, 1fr); } }

.af-kennzahl {
	background: var(--weiss);
	padding: clamp(1.25rem, 2.5vw, 1.85rem) 1rem;
	text-align: center;
}
.af-kennzahl__zahl {
	margin: 0 0 .25rem;
	font-family: var(--schrift-titel);
	font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	color: var(--gruen-700);
}
.af-kennzahl__name { margin: 0 0 .2rem; font-size: var(--fs-klein); font-weight: 650; color: var(--text); }
.af-kennzahl__zusatz { margin: 0; font-size: var(--fs-mini); color: var(--text-mitte); }

.af-kennzahlen--hell { background: var(--linie-hell); border-color: var(--linie-hell); margin-top: 3rem; margin-bottom: 0; }
.af-kennzahlen--hell .af-kennzahl { background: rgba(255, 255, 255, .05); }
.af-kennzahlen--hell .af-kennzahl__zahl { color: var(--gold-300); }
.af-kennzahlen--hell .af-kennzahl__name { color: var(--weiss); }
.af-kennzahlen--hell .af-kennzahl__zusatz { color: var(--text-hell); }

.af-inklusive {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-l);
}
.af-inklusive__titel {
	font-size: var(--fs-h3);
	text-align: center;
	margin-bottom: 1.75rem;
}
.af-inklusive__liste {
	display: grid;
	gap: 1.35rem clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 40rem) { .af-inklusive__liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .af-inklusive__liste { grid-template-columns: repeat(3, 1fr); } }
.af-inklusive__liste li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .85rem;
	margin: 0;
}
.af-inklusive__liste h3,
.af-inklusive__liste h4 { font-size: 1rem; margin-bottom: .2em; }
.af-inklusive__liste p { font-size: var(--fs-mini); color: var(--text-mitte); margin: 0; }
.af-inklusive__zeichen {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	flex: none;
	background: var(--gruen-050);
	color: var(--gruen-700);
	border-radius: var(--rund-s);
}

.af-haken { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.af-haken li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .75rem;
	margin: 0;
	align-items: start;
}
.af-haken > li > .af-svg {
	margin-top: .28rem;
	color: var(--gruen-600);
}
.af-haken strong { display: block; margin-bottom: .15rem; }
.af-haken span { font-size: var(--fs-klein); color: var(--text-mitte); }
.af-haken--einfach { gap: .6rem; }
.af-haken--einfach span { color: var(--text); font-size: var(--fs-text); }

@media (min-width: 46rem) {
	.af-haken:not(.af-haken--einfach) { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; }
}

/* == 17 Akkordeon ========================================================= */

.af-akkordeon {
	border-top: 1px solid var(--linie);
}
.af-akk { border-bottom: 1px solid var(--linie); }
.af-akk__kopf { margin: 0; font-size: inherit; }
.af-akk__knopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.15rem .25rem;
	min-height: 60px;
	background: none;
	border: 0;
	font-family: var(--schrift-titel);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.35;
	color: var(--gruen-800);
	text-align: left;
	cursor: pointer;
	transition: color var(--zug);
}
.af-akk__knopf:hover { color: var(--gruen-600); }
.af-akk__knopf .af-svg {
	flex: none;
	color: var(--gruen-600);
	transition: transform var(--zug);
}
.af-akk__knopf[aria-expanded="true"] .af-svg { transform: rotate(45deg); }
.af-akk__knopf[aria-expanded="true"] { color: var(--gruen-600); }

.af-akk__feld { overflow: hidden; }
.af-akk__feld[hidden] { display: none; }
.af-akk__inhalt { padding: 0 3rem 1.4rem .25rem; }
.af-akk__inhalt p { font-size: var(--fs-klein); color: var(--text-mitte); margin: 0; max-width: 68ch; }

.af-dunkel .af-akkordeon,
.af-dunkel .af-akk { border-color: var(--linie-hell); }
.af-dunkel .af-akk__knopf { color: var(--weiss); }
.af-dunkel .af-akk__inhalt p { color: var(--text-hell); }

.af-fragen { padding-block: var(--abschnitt); }
.af-fragen__reihe {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
.af-fragen__seite p { color: var(--text-mitte); margin-bottom: 1.75rem; }
@media (min-width: 62rem) {
	.af-fragen__reihe { grid-template-columns: .82fr 1.18fr; }
}

/* == 18 Aufruf ============================================================ */

.af-aufruf {
	position: relative;
	isolation: isolate;
	color: var(--weiss);
	padding-block: clamp(3rem, 5.5vw, 5.5rem);
}
.af-aufruf .af-deckbild::after {
	background: linear-gradient(100deg, rgba(10, 42, 31, .95), rgba(16, 70, 50, .84));
}
.af-aufruf__inhalt {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 3.5rem);
	align-items: center;
}
.af-aufruf__text h2 { color: var(--weiss); margin-bottom: .5em; }
.af-aufruf__text p { color: var(--text-hell); font-size: var(--fs-lead); margin: 0; }
.af-aufruf__knoepfe { display: grid; gap: .85rem; justify-items: start; }
.af-aufruf__mail {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .35rem 0 0;
	font-size: var(--fs-klein);
	color: var(--text-hell);
}
.af-aufruf__mail a { color: var(--gold-300); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
.af-aufruf__mail a:hover { color: var(--weiss); text-decoration: underline; }
@media (min-width: 58rem) {
	.af-aufruf__inhalt { grid-template-columns: 1.2fr .8fr; }
	.af-aufruf__knoepfe { justify-items: stretch; }
	.af-aufruf__knoepfe .af-knopf { width: 100%; }
}

/* == 19 Fusszeile ========================================================= */

.af-fuss {
	background: var(--gruen-900);
	color: var(--text-hell);
	padding-block: clamp(2.75rem, 5vw, 4.5rem) 1.5rem;
	font-size: var(--fs-klein);
}
.af-fuss a:not(.af-knopf) { color: rgba(255, 255, 255, .86); text-decoration: none; }
.af-fuss a:not(.af-knopf):hover { color: var(--gold-300); text-decoration: underline; }

.af-fuss__oben {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--linie-hell);
}
@media (min-width: 62rem) {
	.af-fuss__oben { grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr); }
}

.af-fuss__logo { display: inline-block; line-height: 0; margin-bottom: 1.25rem; }
.af-fuss__logobild { width: auto; height: 40px; }
.af-fuss__satz { color: var(--text-hell); max-width: 34ch; margin-bottom: 1.5rem; }

.af-fuss__kontakt { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.af-fuss__kontakt li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	margin: 0;
	align-items: start;
}
.af-fuss__kontakt .af-svg { margin-top: .2rem; color: var(--gold-400); }
.af-fuss__kontakt a { min-height: 40px; display: inline-flex; align-items: center; }

.af-fuss__spalten {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 46rem) {
	.af-fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.af-fuss__titel {
	margin: 0 0 1rem;
	font-family: var(--schrift-text);
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold-400);
}
.af-fuss__spalte ul { margin: 0; padding: 0; list-style: none; }
.af-fuss__spalte li { margin: 0; }
.af-fuss__spalte li a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: .2rem 0;
	line-height: 1.4;
}
.af-fuss__mehr {
	gap: .4rem;
	font-weight: 650;
	color: var(--gold-300) !important;
}
.af-fuss__mehr .af-svg { transition: transform var(--zug); }
.af-fuss__mehr:hover .af-svg { transform: translateX(3px); }

.af-fuss__aufruf {
	display: grid;
	gap: 1.25rem;
	align-items: center;
	padding-block: clamp(1.75rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--linie-hell);
}
.af-fuss__aufruf h2 {
	font-size: var(--fs-h3);
	color: var(--weiss);
	margin-bottom: .35em;
}
.af-fuss__aufruf p { margin: 0; color: var(--text-hell); }
@media (min-width: 52rem) {
	.af-fuss__aufruf { grid-template-columns: 1fr auto; gap: 2rem; }
}

.af-fuss__unten {
	display: grid;
	gap: .85rem;
	padding-top: 1.5rem;
	font-size: var(--fs-mini);
}
.af-fuss__recht { margin: 0; color: rgba(255, 255, 255, .62); }
.af-fuss__rechtliches {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.af-fuss__rechtliches li { margin: 0; }
.af-fuss__rechtliches a { display: inline-flex; align-items: center; min-height: 40px; }
@media (min-width: 46rem) {
	.af-fuss__unten { grid-template-columns: 1fr auto; align-items: center; }
	.af-fuss__rechtliches { justify-content: flex-end; }
}

/* == 20 Schwebende Knoepfe und Darstellung ================================= */

.af-schweber {
	position: fixed;
	right: clamp(.75rem, 2vw, 1.25rem);
	bottom: clamp(.75rem, 2vw, 1.25rem);
	z-index: 120;
	display: grid;
	gap: .5rem;
	justify-items: end;
}
.af-schweber__knopf {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	padding: 0 !important;
	background: var(--gruen-800);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	color: var(--weiss);
	cursor: pointer;
	opacity: .72;
	box-shadow: var(--schatten-m);
	transition: opacity var(--zug), transform var(--zug), background var(--zug);
}
.af-schweber__knopf:hover,
.af-schweber__knopf:focus-visible { opacity: 1; transform: translateY(-2px); }
.af-schweber__knopf[aria-expanded="true"] { opacity: 1; background: var(--gruen-600); }
.af-schweber__knopf[hidden] { display: none; }

.af-zugang {
	position: absolute;
	right: 0;
	bottom: calc(100% + .6rem);
	width: min(19rem, calc(100vw - 2rem));
	padding: 1.1rem 1.25rem 1.25rem;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	box-shadow: var(--schatten-l);
	text-align: left;
}
.af-zugang[hidden] { display: none; }
.af-zugang__titel { font-size: 1rem; margin-bottom: 1rem; }
.af-zugang__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .85rem;
	font-size: var(--fs-klein);
	font-weight: 600;
	color: var(--gruen-800);
}
.af-zugang__stufen {
	display: flex;
	align-items: center;
	gap: .25rem;
	border: 1px solid var(--linie-stark);
	border-radius: var(--rund-s);
	overflow: hidden;
}
.af-zugang__stufen button {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	padding: 0;
	background: var(--gruen-025);
	border: 0;
	color: var(--gruen-800);
	cursor: pointer;
}
.af-zugang__stufen output {
	min-width: 3.4rem;
	text-align: center;
	font-size: var(--fs-mini);
	font-variant-numeric: tabular-nums;
}
.af-zugang__schalter,
.af-zugang__zurueck {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-bottom: .4rem;
	padding: .6rem .85rem;
	background: var(--weiss);
	border: 1.5px solid var(--linie-stark);
	border-radius: var(--rund-s);
	font-size: var(--fs-klein);
	font-weight: 600;
	color: var(--gruen-800);
	text-align: left;
	cursor: pointer;
	transition: background var(--zug), border-color var(--zug);
}
.af-zugang__schalter:hover,
.af-zugang__zurueck:hover { background: var(--gruen-025); border-color: var(--gruen-600); }
.af-zugang__schalter[aria-pressed="true"] {
	background: var(--gruen-700);
	border-color: var(--gruen-700);
	color: var(--weiss);
}
.af-zugang__schalter[aria-pressed="true"]::after { content: " ✓"; }
.af-zugang__zurueck {
	margin-top: .75rem;
	margin-bottom: 0;
	text-align: center;
	font-weight: 550;
	color: var(--text-mitte);
	border-style: dashed;
}

/* == 21 Seitenkopf und Pfad =============================================== */

.af-seitenkopf {
	position: relative;
	isolation: isolate;
	color: var(--weiss);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.af-seitenkopf__inhalt { position: relative; }
.af-seitenkopf__titel { color: var(--weiss); margin: .35em 0 .4em; max-width: 26ch; }
.af-seitenkopf__text {
	font-size: var(--fs-lead);
	color: var(--text-hell);
	max-width: 58ch;
	margin: 0;
}

.af-krumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	font-size: var(--fs-mini);
	color: rgba(255, 255, 255, .72);
}
.af-krumen a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.af-krumen a:hover { color: var(--gold-300); text-decoration: underline; }
.af-krumen .af-svg { opacity: .5; transform: rotate(-90deg); }
.af-krumen span[aria-current] { color: var(--weiss); font-weight: 600; }

/* == 22 Textseiten ======================================================== */

.af-textseite {
	max-width: 52rem;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.af-text { font-size: 1.075rem; line-height: 1.75; }
.af-text > *:first-child { margin-top: 0; }
.af-text h2 {
	font-size: clamp(1.3rem, 1.15rem + .7vw, 1.65rem);
	margin: 2.25em 0 .6em;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
}
.af-text h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.af-text h3 { font-size: var(--fs-h4); margin: 1.75em 0 .5em; }
.af-text p,
.af-text li { max-width: 68ch; }
.af-text ul,
.af-text ol { padding-left: 1.35em; }
.af-text li { margin-bottom: .5em; }
.af-text strong { color: var(--gruen-800); }
.af-text a { color: var(--gruen-600); }
.af-text table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--fs-klein); }
.af-text th,
.af-text td { padding: .65rem .75rem; border: 1px solid var(--linie); text-align: left; }
.af-text th { background: var(--gruen-025); font-weight: 650; }
.af-textseite__zurueck { margin-top: 3rem; }

/* == 23 Paket-Detailseite ================================================= */

.af-paketkopf {
	position: relative;
	isolation: isolate;
	color: var(--weiss);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.af-paketkopf__inhalt { position: relative; }
.af-paketkopf__inhalt .af-kicker { margin-top: 1.25rem; }
.af-paketkopf__titel { color: var(--weiss); margin-bottom: .4em; max-width: 30ch; }
.af-paketkopf__lead { font-size: var(--fs-lead); color: var(--text-hell); max-width: 60ch; }

.af-marken {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}
.af-marken li {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: .5rem .9rem;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 100px;
	font-size: var(--fs-klein);
	font-weight: 550;
	backdrop-filter: blur(4px);
}
.af-marken .af-svg { color: var(--gold-300); }

.af-paketseite__reihe {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 64rem) {
	.af-paketseite__reihe { grid-template-columns: minmax(0, 1fr) minmax(21rem, 24rem); }
}

.af-block { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.af-block:last-child { margin-bottom: 0; }
.af-block > h2 {
	font-size: var(--fs-h3);
	padding-bottom: .6rem;
	margin-bottom: 1.35rem;
	border-bottom: 1px solid var(--linie);
}
.af-block--hinweis {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--sand-100);
	border-radius: var(--rund-m);
	border-left: 3px solid var(--gold-500);
}
.af-block--hinweis > h2 { border-bottom: 0; padding-bottom: 0; margin-bottom: .75rem; font-size: var(--fs-h4); }
.af-block--hinweis ul { margin: 0; padding-left: 1.15em; }
.af-block--hinweis li { color: var(--text-mitte); }

.af-tabelle { display: grid; gap: 0; margin: 0; }
.af-tabelle > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: .15rem;
	padding: .8rem 0;
	border-bottom: 1px solid var(--linie);
}
.af-tabelle dt {
	font-size: var(--fs-mini);
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-mitte);
}
.af-tabelle dd { margin: 0; }
@media (min-width: 34rem) {
	.af-tabelle > div { grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; }
}

.af-buchfeld {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-l);
	box-shadow: var(--schatten-m);
}
.af-buchfeld__saison {
	margin: 0 0 .5rem;
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gruen-600);
}
.af-buchfeld__preis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .4rem;
	margin: 0 0 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--linie);
}
.af-buchfeld__preis .af-preis__zahl { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem); }
.af-buchfeld__daten { margin: 0 0 .5rem; padding: 0; list-style: none; display: grid; gap: .6rem; }
.af-buchfeld__daten li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .6rem;
	margin: 0;
	font-size: var(--fs-klein);
	color: var(--text-mitte);
	align-items: start;
}
.af-buchfeld__daten .af-svg { margin-top: .18rem; color: var(--gruen-600); }
.af-buchfeld__fuss {
	margin: 1.1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--linie);
	font-size: var(--fs-mini);
	color: var(--text-mitte);
	text-align: center;
}

@media (min-width: 64rem) {
	[data-af-haftend] { position: sticky; top: calc(var(--kopf-hoehe) + 1.25rem); }
}

/* == 24 Leistungs-Unterseite ============================================== */

.af-leistungsseite {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 62rem) {
	.af-leistungsseite { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); }
}
.af-leistungsseite__haupt > .af-vorlauf { margin-bottom: 2.5rem; }

.af-seitenfeld {
	padding: clamp(1.25rem, 2.5vw, 1.6rem);
	background: var(--gruen-025);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	margin-bottom: 1.25rem;
}
.af-seitenfeld:last-child { margin-bottom: 0; }
.af-seitenfeld__titel { font-size: var(--fs-h4); margin-bottom: 1rem; }
.af-seitenfeld p { font-size: var(--fs-klein); color: var(--text-mitte); }
.af-seitenfeld__liste { margin: 0; padding: 0; list-style: none; }
.af-seitenfeld__liste li { margin: 0; border-bottom: 1px solid var(--linie); }
.af-seitenfeld__liste li:last-child { border-bottom: 0; }
.af-seitenfeld__liste a {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 46px;
	padding: .55rem 0;
	font-size: var(--fs-klein);
	font-weight: 550;
	color: var(--gruen-800);
	text-decoration: none;
	line-height: 1.35;
}
.af-seitenfeld__liste a:hover { color: var(--gruen-600); }
.af-seitenfeld__liste .af-svg { color: var(--gruen-500); flex: none; }
.af-seitenfeld__liste li.af-aktiv a { color: var(--gruen-600); font-weight: 700; }
.af-seitenfeld__ruf {
	display: grid;
	gap: .6rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
}
.af-seitenfeld__ruf .af-knopf { width: 100%; }
.af-seitenfeld__preis { margin: 0 0 .35rem; font-size: var(--fs-klein); }
.af-seitenfeld__preis strong { color: var(--gruen-800); font-size: var(--fs-text); }
.af-seitenfeld__mail {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: .35rem 0 0 !important;
	font-size: var(--fs-mini);
}

.af-seitenfeld--gruen {
	background: var(--gruen-800);
	border-color: var(--gruen-800);
	color: var(--text-hell);
}
.af-seitenfeld--gruen .af-seitenfeld__titel { color: var(--weiss); }
.af-seitenfeld--gruen p { color: var(--text-hell); }
.af-seitenfeld__termine { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.af-seitenfeld__termine li { margin: 0; border-bottom: 1px solid var(--linie-hell); }
.af-seitenfeld__termine li:last-child { border-bottom: 0; }
.af-seitenfeld__termine a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 46px;
	padding: .5rem 0;
	font-size: var(--fs-klein);
	color: var(--text-hell);
	text-decoration: none;
}
.af-seitenfeld__termine a:hover { color: var(--weiss); }
.af-seitenfeld__termine strong { color: var(--gold-300); white-space: nowrap; }
.af-seitenfeld--gruen .af-knopf { width: 100%; }

.af-leistungsreihen { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.af-leistungsreihe {
	display: grid;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}
.af-leistungsreihe__foto {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--rund-l);
}
.af-leistungsreihe__zeichen {
	display: grid;
	place-items: center;
	width: 54px; height: 54px;
	background: var(--gruen-050);
	color: var(--gruen-700);
	border-radius: var(--rund-s);
	margin-bottom: 1rem;
}
.af-leistungsreihe__text h2 { font-size: var(--fs-h2); }
.af-leistungsreihe__text p { color: var(--text-mitte); }
.af-leistungsreihe__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
@media (min-width: 58rem) {
	.af-leistungsreihe { grid-template-columns: .9fr 1.1fr; }
	.af-leistungsreihe--gedreht { grid-template-columns: 1.1fr .9fr; }
	.af-leistungsreihe--gedreht .af-leistungsreihe__bild { order: 2; }
}

/* == 25 Fragen- und Kontaktseite ========================================== */

.af-fragenseite,
.af-kontaktseite {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (min-width: 62rem) {
	.af-fragenseite { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); }
	.af-kontaktseite { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 21rem); }
}

.af-kontaktliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.af-kontaktliste li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .75rem;
	margin: 0;
	align-items: start;
	font-size: var(--fs-klein);
}
.af-kontaktliste .af-svg { margin-top: .2rem; color: var(--gruen-600); }
.af-kontaktliste span {
	display: block;
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-mitte);
	margin-bottom: .15rem;
}
.af-kontaktliste a { font-weight: 550; }

.af-minischritte { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.af-minischritte li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	align-items: center;
	margin: 0;
	font-size: var(--fs-klein);
}
.af-minischritte span {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	background: var(--gruen-700);
	color: var(--weiss);
	border-radius: 50%;
	font-size: var(--fs-mini);
	font-weight: 700;
	flex: none;
}

/* == 26 404 =============================================================== */

.af-vierhundert {
	position: relative;
	isolation: isolate;
	color: var(--weiss);
	padding-block: clamp(4rem, 8vw, 7rem);
}
.af-vierhundert__inhalt { position: relative; max-width: 44rem; }
.af-vierhundert h1 { color: var(--weiss); }
.af-vierhundert p { color: var(--text-hell); font-size: var(--fs-lead); }
.af-vierhundert__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
.af-vierhundert__liste {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.75rem;
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie-hell);
	list-style: none;
}
.af-vierhundert__liste li { margin: 0; }
.af-vierhundert__liste a { color: var(--gold-300); font-size: var(--fs-klein); }

/* == 27 Buchung: Termin, Summe, Zahlweg, Vorgangsseite ====================
   Grundgedanke: auf einer Paketseite ist der Termin **gesetzt**. Er wird
   deshalb als Angabe gezeigt, nicht als Auswahlliste - eine Liste neben einem
   festen Preis laedt dazu ein, etwas zu waehlen, das nicht zum Preis passt.
   ======================================================================== */

/* Fester Termin */
.af-festtermin {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .85rem;
	align-items: center;
	margin-bottom: 1.1rem;
	padding: .85rem 1rem;
	background: var(--gruen-025);
	border: 1px solid var(--linie);
	border-radius: var(--rund-s);
}
.af-festtermin__zeichen {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	background: var(--gruen-700);
	color: var(--weiss);
	border-radius: var(--rund-s);
}
.af-festtermin__label {
	margin: 0;
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-mitte);
}
.af-festtermin__name { margin: .1rem 0 0; font-weight: 650; line-height: 1.3; }
.af-festtermin__zeit { margin: .1rem 0 0; font-size: var(--fs-mini); color: var(--text-mitte); }
.af-festtermin__wechsel {
	align-self: start;
	font-size: var(--fs-mini);
	font-weight: 650;
	color: var(--gruen-600);
	min-height: 24px;
}

/* Preisuebersicht im Formular */
.af-summe {
	margin: 1.25rem 0 0;
	padding: 1rem 1.1rem;
	background: var(--sand-100);
	border-radius: var(--rund-s);
}
.af-summe__zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: var(--fs-klein);
	padding: .3rem 0;
}
.af-summe__zeile span { color: var(--text-mitte); }
.af-summe__zeile--gesamt {
	margin-top: .35rem;
	padding-top: .7rem;
	border-top: 1px solid var(--linie-stark);
	font-size: var(--fs-text);
}
.af-summe__zeile--gesamt span { color: var(--text); font-weight: 600; }
.af-summe__zeile--gesamt strong {
	font-family: var(--schrift-titel);
	font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
	font-weight: 600;
	color: var(--gruen-800);
	line-height: 1;
	white-space: nowrap;
}
.af-summe__hinweis {
	margin: .8rem 0 0;
	padding-top: .7rem;
	border-top: 1px dashed var(--linie-stark);
	font-size: var(--fs-mini);
	color: var(--text-mitte);
	line-height: 1.5;
}

/* Anfragen oder buchen */
.af-wegwahl {
	margin: 1.35rem 0 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: .6rem;
}
.af-wegwahl legend { margin-bottom: .5rem; padding: 0; }
.af-wegwahl__punkt,
.af-zahlweg {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .75rem;
	align-items: start;
	padding: .85rem 1rem;
	background: var(--weiss);
	border: 1.5px solid var(--linie-stark);
	border-radius: var(--rund-s);
	cursor: pointer;
	transition: border-color var(--zug), background var(--zug);
}
.af-wegwahl__punkt:hover,
.af-zahlweg:hover { border-color: var(--gruen-500); background: var(--gruen-025); }
.af-wegwahl__punkt input,
.af-zahlweg input {
	width: 22px; height: 22px;
	margin: .1rem 0 0;
	accent-color: var(--gruen-700);
	flex: none;
}
.af-wegwahl__punkt:has(input:checked),
.af-zahlweg:has(input:checked) {
	border-color: var(--gruen-700);
	background: var(--gruen-050);
	box-shadow: 0 0 0 1px var(--gruen-700) inset;
}
.af-wegwahl__inhalt,
.af-zahlweg__inhalt { display: grid; gap: .2rem; }
.af-zahlweg__inhalt { grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.af-wegwahl__titel,
.af-zahlweg__titel { display: block; font-weight: 650; line-height: 1.35; }
.af-wegwahl__text,
.af-zahlweg__text {
	display: block;
	font-size: var(--fs-mini);
	color: var(--text-mitte);
	line-height: 1.5;
}
.af-zahlweg__zeichen {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	background: var(--gruen-050);
	color: var(--gruen-700);
	border-radius: var(--rund-s);
}
.af-zahlwege { display: grid; gap: .6rem; margin-bottom: 1.1rem; }

/* Der Teil, der nur bei verbindlicher Buchung erscheint */
.af-buchungsteil {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
}
.af-buchungsteil[hidden] { display: none; }
.af-teilkopf {
	margin: 0 0 .75rem;
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gruen-700);
}
.af-buchungsteil .af-raster { margin-bottom: 1.35rem; }
.af-feld--schmal { max-width: 10rem; }

/* Hinweis-Meldung */
.af-melde--hinweis {
	background: var(--sand-100);
	border: 1px solid var(--gold-500);
	color: var(--text);
}
.af-melde--hinweis h2 { font-size: var(--fs-h4); margin-bottom: .3em; }
.af-melde--hinweis p { font-size: var(--fs-klein); color: var(--text-mitte); margin: 0; }

/* Fahnen auf der Paketkarte */
.af-fahne--voll { background: var(--gruen-900); color: var(--weiss); }
.af-fahne--knapp { background: #b3541e; color: var(--weiss); }

/* Vorgangsseite */
.af-vorgangskopf {
	position: relative;
	isolation: isolate;
	color: var(--weiss);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.af-vorgangskopf__inhalt { position: relative; max-width: 46rem; }
.af-vorgangskopf h1 { color: var(--weiss); margin: .35em 0 .4em; }
.af-vorgangskopf__text { font-size: var(--fs-lead); color: var(--text-hell); margin: 0; }
.af-vorgangskopf__text strong { color: var(--weiss); }

.af-vorgang {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 64rem) {
	.af-vorgang { grid-template-columns: minmax(0, 1fr) minmax(20rem, 23rem); }
}
.af-vorgang__haupt > .af-melde { margin-bottom: 2rem; }

/* Belege */
.af-belege { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.af-belege li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .75rem;
	align-items: center;
	margin: 0;
	padding: .8rem 1rem;
	background: var(--gruen-025);
	border: 1px solid var(--linie);
	border-radius: var(--rund-s);
}
.af-belege__zeichen { color: var(--gruen-600); }
.af-belege li strong { display: block; }
.af-belege li span { font-size: var(--fs-mini); color: var(--text-mitte); }
.af-belege__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-height: 40px;
	font-size: var(--fs-klein);
	font-weight: 650;
	color: var(--gruen-700);
	text-decoration: none;
	white-space: nowrap;
}
.af-belege__link:hover { text-decoration: underline; }

/* Bankdaten */
.af-bank {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
}
.af-bank__titel {
	margin: 0 0 .7rem;
	font-size: var(--fs-mini);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-mitte);
}
.af-bank dl { margin: 0; display: grid; gap: .45rem; }
.af-bank dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; align-items: baseline; }
.af-bank dt { font-size: var(--fs-mini); color: var(--text-mitte); }
.af-bank dd { margin: 0; font-size: var(--fs-klein); }
.af-bank code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .95em;
	background: var(--gruen-025);
	padding: .1em .35em;
	border-radius: 3px;
	word-break: break-all;
}
.af-bank__hinweis { margin: .8rem 0 0; font-size: var(--fs-mini); color: var(--text-mitte); }

.af-buchfeld__zusatz { margin: -.5rem 0 1rem; font-size: var(--fs-mini); color: var(--text-mitte); }
.af-buchfeld__form { margin-bottom: .5rem; }
.af-buchfeld__form .af-knopf { width: 100%; }

/* == 27b Unterseiten: Fakten, Gliederung, Inhaltsverzeichnis ==============
   Vorher sahen Leistungs- und Rechtsseiten gleich aus: gruener Balken, weisse
   Karte, Textwand. Jetzt bekommt jede Unterseite eine Ordnung - Kernfakten
   oben, nummerierte Abschnitte, ein Inhaltsverzeichnis in der Seitenspalte.
   ======================================================================== */

/* Kernfakten unter dem Seitenkopf */
.af-fakten {
	background: var(--gruen-800);
	color: var(--text-hell);
	padding-block: clamp(1.25rem, 2.5vw, 1.85rem);
}
.af-fakten__liste {
	display: grid;
	gap: 1rem clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
.af-fakten__liste li {
	margin: 0;
	display: grid;
	gap: .1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--gold-400);
}
.af-fakten__liste strong {
	font-family: var(--schrift-titel);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--gold-300);
}
.af-fakten__name { font-size: var(--fs-klein); font-weight: 650; color: var(--weiss); }
.af-fakten__zusatz { font-size: var(--fs-mini); color: var(--text-hell); line-height: 1.4; }

/* Nummerierte Abschnitte */
.af-abschnittsblock {
	margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
	scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}
.af-abschnittsblock:last-of-type { margin-bottom: 0; }
.af-abschnittsblock__kopf {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .9rem;
	align-items: center;
	padding-bottom: .75rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--linie);
}
.af-abschnittsblock__kopf h2 { margin: 0; font-size: var(--fs-h3); }
.af-abschnittsblock__nr {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	background: var(--gruen-050);
	color: var(--gruen-700);
	border-radius: var(--rund-s);
	font-family: var(--schrift-titel);
	font-size: 1rem;
	font-weight: 600;
}
.af-abschnittsblock__inhalt > *:last-child { margin-bottom: 0; }
.af-abschnittsblock__inhalt .af-schritte--schmal { margin-top: 1.25rem; }

/* Bild als Zaesur zwischen den Abschnitten */
.af-zaesur { margin: 0 0 clamp(2.25rem, 4vw, 3.25rem); }
.af-zaesur__bild {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--rund-m);
}

/* Inhaltsverzeichnis */
.af-inhaltsliste { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.af-inhaltsliste li { margin: 0; border-bottom: 1px solid var(--linie); }
.af-inhaltsliste li:last-child { border-bottom: 0; }
.af-inhaltsliste a {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .65rem;
	align-items: start;
	min-height: 44px;
	padding: .6rem 0;
	font-size: var(--fs-klein);
	line-height: 1.4;
	color: var(--gruen-800);
	text-decoration: none;
}
.af-inhaltsliste a:hover { color: var(--gruen-600); }
.af-inhaltsliste a:hover span:last-child { text-decoration: underline; }
.af-inhaltsliste__nr {
	font-family: var(--schrift-titel);
	font-size: var(--fs-mini);
	font-weight: 600;
	color: var(--gold-text);
	min-width: 1.5rem;
}
.af-inhaltsliste--schmal a { font-size: var(--fs-mini); min-height: 40px; }

/* Abschluss der Leistungsseite */
.af-leistungsseite__fuss {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--gruen-025);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
}
.af-leistungsseite__fuss h2 { font-size: var(--fs-h3); margin-bottom: .4em; }
.af-leistungsseite__fuss p { color: var(--text-mitte); margin-bottom: 0; }

/* Textseiten mit Inhaltsverzeichnis */
.af-textseite {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}
.af-textseite--mitliste {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	max-width: var(--rahmen-breit);
}
@media (min-width: 62rem) {
	.af-textseite--mitliste { grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr); }
	.af-textseite__seite { order: -1; }
}
.af-textseite__haupt { min-width: 0; max-width: 46rem; }
.af-textseite__seite { min-width: 0; }

.af-ankerlink {
	margin-left: .35rem;
	font-size: .7em;
	font-weight: 400;
	color: var(--linie-stark);
	text-decoration: none;
	opacity: 0;
	transition: opacity var(--zug);
}
.af-text h2:hover .af-ankerlink,
.af-ankerlink:focus-visible { opacity: 1; }
.af-text h2 { scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem); }

.af-textseite__fuss {
	display: grid;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--linie);
}
.af-textseite__fuss > div { display: flex; flex-wrap: wrap; gap: .75rem; }
.af-textseite__stand { margin: 0; font-size: var(--fs-mini); color: var(--text-mitte); }
@media (min-width: 46rem) {
	.af-textseite__fuss { grid-template-columns: 1fr auto; align-items: center; }
}

/* == 27c Bilder: Paar und Band ============================================
   Die Mediathek hat gute Fotos von Makka und Madina, sie wurden aber kaum
   genutzt - eines pro Abschnitt, immer gleich gross. Hier zwei Bausteine, die
   mehrere Motive zeigen, ohne dass Text darauf liegt.
   ======================================================================== */

/* Zwei versetzte Bilder */
.af-bildpaar { position: relative; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.af-bildpaar figure { margin: 0; }
.af-bildpaar__bild { width: 100%; object-fit: cover; border-radius: var(--rund-l); }
.af-bildpaar__gross .af-bildpaar__bild { aspect-ratio: 4 / 5; }
.af-bildpaar__klein {
	position: absolute;
	right: clamp(-1rem, -2vw, 0rem);
	bottom: 0;
	width: 46%;
	max-width: 15rem;
	border: 5px solid var(--weiss);
	border-radius: calc(var(--rund-l) + 4px);
	box-shadow: var(--schatten-m);
	overflow: hidden;
}
.af-bildpaar__klein .af-bildpaar__bild { aspect-ratio: 1 / 1; border-radius: 0; }
.af-bildpaar__marke {
	position: absolute;
	left: -.75rem;
	top: 1.5rem;
	display: grid;
	place-items: center;
	width: clamp(56px, 7vw, 74px);
	height: clamp(56px, 7vw, 74px);
	background: var(--gruen-800);
	color: var(--gold-300);
	border: 4px solid var(--weiss);
	border-radius: 50%;
}

/* Drei Bilder in einer Reihe, randlos */
.af-bilderband {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
	background: var(--gruen-800);
}
.af-bilderband figure { margin: 0; overflow: hidden; }
.af-bilderband__bild {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 420ms cubic-bezier(.2, .6, .3, 1);
}
.af-bilderband figure:hover .af-bilderband__bild { transform: scale(1.04); }

@media (max-width: 47.99rem) {
	.af-bilderband { grid-template-columns: repeat(2, 1fr); }
	.af-bilderband figure:last-child { display: none; }
	.af-bildpaar__klein { width: 42%; border-width: 4px; }
	.af-bildpaar__marke { width: 50px; height: 50px; left: -.4rem; border-width: 3px; }
}

/* == 28 Schmale Schirme (Handy und Tablet) ================================
   Der Umbruch fuer das Menue liegt bei 62rem (992px): unterhalb passen sechs
   Punkte plus Logo und Knopf nicht mehr in eine Zeile.
   ======================================================================== */

/* -- Bis 61.99rem: Menue in die Schublade -------------------------------- */
@media (max-width: 61.99rem) {
	.af-nav { display: none; }
	.af-kopf__reihe { gap: .75rem; }
	.af-logo { margin-right: auto; }
}

/* -- Ab 62rem: Schublade und Menueknopf weg ------------------------------ */
@media (min-width: 62rem) {
	.af-brenner { display: none; }
	.af-schublade { display: none !important; }
	.af-kopf__knopf .af-kurz { display: none; }
}

/* -- Ab 75rem: E-Mail-Zeile im Kopf ------------------------------------- */
@media (min-width: 75rem) {
	.af-kopf__ruf { display: flex; }
}

/* -- Kurze Beschriftung nur auf schmalen Schirmen ----------------------- */
@media (max-width: 61.99rem) {
	.af-kopf__knopf .af-lang { display: none; }
	.af-kopf__knopf { padding-inline: .95rem; font-size: .9rem; }
}
@media (min-width: 62rem) {
	.af-kopf__knopf .af-kurz { display: none; }
}

/* -- Handy: Abstaende und Schriftgroessen ------------------------------- */
@media (max-width: 47.99rem) {
	:root {
		--abschnitt: clamp(2.75rem, 9vw, 3.5rem);
		--fs-text: 1rem;
	}

	/* Der Hero ist auf dem Handy hoch, weil das Formular darin steckt.
	   Deshalb hier so wenig Luft wie moeglich, ohne gedraengt zu wirken. */
	.af-hero { padding-block: 1.75rem 2.25rem; }
	.af-hero__reihe { gap: 1.75rem; }
	.af-hero__knoepfe { margin-top: 1.35rem; }
	.af-hero__knoepfe .af-knopf { flex: 1 1 100%; }
	/* Zwei Knoepfe mit sehr unterschiedlicher Breite nebeneinander wirken
	   unruhig. Unter 40rem stehen sie deshalb untereinander, volle Breite. */
	.af-ueber__knoepfe .af-knopf,
	.af-leistungsreihe__knoepfe .af-knopf,
	.af-vierhundert__knoepfe .af-knopf,
	.af-textseite__fuss > div .af-knopf,
	.af-seitenfeld__ruf .af-knopf { flex: 1 1 100%; width: 100%; }
	.af-hero__fakten {
		grid-template-columns: 1fr;
		gap: .85rem;
		margin-top: 1.75rem;
		padding-top: 1.25rem;
	}
	.af-hero__fakten li {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: .75rem;
		align-items: center;
	}
	.af-hero__fakten strong { font-size: 1.35rem; margin: 0; min-width: 4.5rem; }
	.af-hero__fakten span br { display: none; }

	.af-ueber__marke { width: 58px; height: 58px; right: -.5rem; bottom: -.5rem; border-width: 3px; }

	.af-karte { padding: 1.25rem; gap: .6rem; }
	.af-karte__zeichen { width: 46px; height: 46px; }

	.af-paket__text { padding: 1.1rem; gap: .85rem; }
	.af-paket__foto { aspect-ratio: 2 / 1; }
	/* Zwei Spalten bleiben, nur die Beschriftungsspalte wird schmaler:
	   uebereinander gestapelt kostet jede Zeile doppelt so viel Hoehe. */
	.af-daten > div { grid-template-columns: 6.5rem 1fr; gap: .5rem; }
	.af-daten dt { letter-spacing: .02em; }
	.af-paket__fuss { flex-direction: column; align-items: stretch; gap: .75rem; }
	/* flex-basis zuruecksetzen: in einer Spalte gilt sie fuer die HOEHE.
	   Mit dem geerbten `flex: 1 1 9rem` wurde der Knopf 144 px hoch -
	   genau der "verzerrte" Knopf auf dem Handy. */
	.af-paket__fuss .af-knopf { flex: 0 0 auto; width: 100%; }
	.af-preis { justify-content: flex-start; }

	.af-kennzahl { padding: 1.1rem .75rem; }
	.af-kennzahl__zahl { font-size: 1.75rem; }

	.af-inklusive { padding: 1.25rem; }
	.af-inklusive__liste { gap: 1.1rem; }
	.af-inklusive__zeichen { width: 38px; height: 38px; }

	.af-schritt__zahl { width: 44px; height: 44px; font-size: 1rem; }
	.af-schritt { padding-top: 3.25rem; }
	.af-schritte--schmal .af-schritt { padding-left: 3.5rem; }
	.af-schritte--schmal .af-schritt::before { left: 22px; top: 44px; height: calc(100% + 1.25rem - 44px); }

	.af-akk__knopf { font-size: 1.05rem; padding: 1rem .1rem; }
	.af-akk__inhalt { padding: 0 .5rem 1.2rem .1rem; }

	.af-formular { border-radius: var(--rund-m); }
	.af-formular--hell { border-radius: 0; }

	.af-zweiteilig { margin-bottom: 2rem; }
	.af-uebersicht__leiste { flex-direction: column; align-items: flex-start; gap: .85rem; }
	.af-filter { width: 100%; }
	.af-filter__knopf { flex: 1 1 auto; padding-inline: .8rem; }

	.af-seitenkopf,
	.af-paketkopf { padding-block: 2rem 2.25rem; }
	.af-seitenkopf__titel { max-width: none; }

	.af-marken li { padding: .4rem .7rem; font-size: var(--fs-mini); }

	.af-textseite { padding-block: 2rem 2.5rem; }
	.af-text { font-size: 1rem; }
	.af-text h2 { margin-top: 1.75em; padding-top: 1.25rem; }

	.af-fuss { padding-block: 2.25rem 1.25rem; }
	.af-fuss__logobild { height: 34px; }

	.af-aufruf__knoepfe .af-knopf { width: 100%; }

	/* Die schwebenden Knoepfe lagen im alten Aufbau auf dem Text.
	   Kleiner, zurueckhaltender, bei Beruehrung wieder voll da. */
	.af-fakten__liste { grid-template-columns: 1fr; gap: .85rem; }
	.af-fakten__liste li { grid-template-columns: auto 1fr; display: grid; align-items: baseline; gap: .1rem .7rem; }
	.af-fakten__liste strong { grid-row: 1 / span 2; font-size: 1.35rem; }
	.af-abschnittsblock__nr { width: 34px; height: 34px; font-size: .9rem; }
	.af-abschnittsblock__kopf { gap: .7rem; }
	.af-zaesur__bild { aspect-ratio: 4 / 3; }

	.af-festtermin { grid-template-columns: auto 1fr; }
	.af-festtermin__wechsel { grid-column: 2; justify-self: start; }
	.af-bank dl > div { grid-template-columns: 1fr; gap: .1rem; }
	.af-belege li { grid-template-columns: auto 1fr; }
	.af-belege__link { grid-column: 2; justify-self: start; }
	.af-zahlweg__inhalt { grid-template-columns: 1fr; }
	.af-zahlweg__zeichen { display: none; }

	.af-schweber__knopf { width: 42px; height: 42px; opacity: .62; }
	.af-schweber__knopf:active,
	.af-schweber__knopf[aria-expanded="true"] { opacity: 1; }
}

/* -- Bis 48rem: Knopfgruppen untereinander, volle Breite ---------------- */
@media (max-width: 47.99rem) {
	/* Zwei Spalten waren der naheliegende Weg, brachten aber bei 480 px
	   Beschriftungen wie "Kostenloses Gespraech" auf zwei Zeilen (61 px hohe
	   Knoepfe). Volle Breite passt immer und sieht gewollt aus. */
	.af-ueber__knoepfe,
	.af-leistungsreihe__knoepfe,
	.af-vierhundert__knoepfe { display: grid; grid-template-columns: 1fr; }
	.af-ueber__knoepfe .af-knopf,
	.af-leistungsreihe__knoepfe .af-knopf,
	.af-vierhundert__knoepfe .af-knopf { width: 100%; }
}

/* -- Sehr schmal: nichts darf mehr ueberstehen -------------------------- */
@media (max-width: 26rem) {
	.af-hero__titel { font-size: clamp(1.85rem, 8vw, 2.15rem); }
	.af-kopf__knopf { padding-inline: .8rem; font-size: .85rem; }
	.af-logo__bild { height: 30px; }
	.af-terminliste a { padding-inline: .1rem; }
	.af-terminliste__preis { font-size: 1.05rem; }
}

/* -- Tablet: zwei Spalten statt drei ------------------------------------ */
@media (min-width: 48rem) and (max-width: 61.99rem) {
	.af-karten { grid-template-columns: repeat(2, 1fr); }
	.af-pakete { grid-template-columns: repeat(2, 1fr); }
	.af-hero__reihe { grid-template-columns: 1fr; max-width: 34rem; }
}

/* Flex- und Rasterkinder muessen unter ihre Inhaltsbreite schrumpfen
   koennen - max-width:100% allein reicht dafuer nicht. */
.af-hero__text,
.af-hero__formular,
.af-ueber__text,
.af-ueber__bild,
.af-paketseite__haupt,
.af-paketseite__seite,
.af-leistungsseite__haupt,
.af-leistungsseite__seite,
.af-fragenseite__haupt,
.af-kontaktseite__formular,
.af-karte,
.af-paket,
.af-fuss__spalte { min-width: 0; }

/* == 29 Bewegung, Kontrast, Druck ========================================= */

/* Schriftgroesse aus dem Darstellungsmenue */
html[data-af-schrift] body { font-size: calc(var(--fs-text) * var(--af-schrift, 1)); }

/* Links hervorheben */
html.af-links a:not(.af-knopf):not(.af-logo):not(.af-fuss__logo) {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	background: rgba(255, 191, 47, .18);
	padding: 0 .12em;
	border-radius: 2px;
}

/* Hoeherer Kontrast */
html.af-kontrast {
	--text-mitte: #26332c;
	--text-hell: #fff;
	--linie: rgba(16, 70, 50, .38);
	--linie-stark: rgba(16, 70, 50, .6);
	--linie-hell: rgba(255, 255, 255, .5);
	--gold-text: #5f4300;
}
html.af-kontrast .af-deckbild::after {
	background: linear-gradient(100deg, rgba(6, 26, 19, .97), rgba(6, 26, 19, .9)) !important;
}
html.af-kontrast .af-karte,
html.af-kontrast .af-paket,
html.af-kontrast .af-formular { border-width: 2px; }

/* Bewegung reduzieren - System oder eigene Einstellung */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}
html.af-ruhe { scroll-behavior: auto; }
html.af-ruhe *,
html.af-ruhe *::before,
html.af-ruhe *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
}

/* Sanftes Einblenden.
 *
 * Bewusst umgekehrt gebaut: der Grundzustand ist SICHTBAR, die Klasse af-da
 * spielt nur eine Einblend-Animation. Der naheliegende Weg (Elemente per CSS
 * auf opacity:0 setzen und per Skript aufdecken) hat auf dieser Seite schon
 * zweimal halbe Seiten unsichtbar gelassen - wenn der Beobachter nicht
 * ausloest, das Skript vorher abbricht oder der Uebergang nicht weiterlaeuft,
 * bleibt der Inhalt weg. So kann das nicht passieren: ohne Skript, mit Fehler
 * oder in einem Tab ohne Bildaufbau ist einfach alles da. */
@keyframes af-auf {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
html.af-js .af-da { animation: af-auf 520ms cubic-bezier(.2, .6, .3, 1) both; }
html.af-ruhe .af-da { animation: none; }

@media print {
	.af-kopf, .af-schublade, .af-schweber, .af-aufruf, .af-fuss__aufruf,
	.af-formular, .af-laufband { display: none !important; }
	body { font-size: 11pt; color: #000; }
	.af-deckbild { display: none; }
	.af-seitenkopf, .af-paketkopf { color: #000; padding-block: 0 1rem; }
	.af-seitenkopf__titel, .af-paketkopf__titel { color: #000; }
	a { text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   30 Nachtrag: Luecken, die der Pruefer gefunden hat
   --------------------------------------------------------------------------
   skripte/pruefe-anwendung.php vergleicht jede benutzte Klasse mit den Regeln
   dieser Datei. Das hier stand vorher nirgends - die betroffenen Abschnitte
   liefen ohne senkrechten Innenabstand und die Teamkarten ganz ohne Gestaltung.
   Genau das war der Eindruck "alles ein Block".
   ========================================================================== */

/* --- 30.1 Abschnitte, denen der Innenabstand fehlte ------------------------
   .af-flaeche und .af-dunkel setzen nur die Farbe. Den Abstand traegt der
   Name des Abschnitts - bei diesen vier fehlte er. */

.af-leistungen,
.af-ablauf,
.af-warum { padding-block: var(--abschnitt); }

.af-pakete--alle { padding-block: var(--abschnitt); }

/* --- 30.2 Teamkarten ------------------------------------------------------
   Drei Personen, gleich hohe Karten. Das Bild bekommt ein festes
   Seitenverhaeltnis: ohne das springt die Zeile, sobald ein Foto anders
   beschnitten ist. */

.af-personen {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
	.af-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
	.af-personen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.af-person {
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	overflow: hidden;
	transition: transform var(--zug), box-shadow var(--zug), border-color var(--zug);
}
.af-person:hover {
	transform: translateY(-3px);
	box-shadow: var(--schatten-m);
	border-color: rgba(16, 70, 50, .22);
}

.af-person__bild {
	aspect-ratio: 4 / 5;
	background: var(--sand-050);
	overflow: hidden;
}
.af-person__bild img,
.af-person__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Etwas hoeher ausgerichtet: bei Portraits liegt das Gesicht im oberen
	   Drittel, mittig zentriert schneidet es die Stirn ab. */
	object-position: 50% 25%;
	display: block;
}

.af-person__text { padding: clamp(1rem, 1.6vw, 1.35rem); }
.af-person__name { margin: 0 0 .2rem; font-size: 1.05rem; }
.af-person__rolle { margin: 0; color: var(--text-mitte); font-size: .94rem; }

/* Auf dunklem Grund (Über uns) stehen die Karten hell - der Text darin muss
   dann wieder dunkel sein, sonst weiss auf weiss. */
.af-dunkel .af-person__rolle { color: var(--text-mitte); }
.af-dunkel .af-person__name { color: var(--gruen-800); }

/* --- 30.3 Untermenues ----------------------------------------------------
   Auf dem Schreibtisch ein Aufklappmenue, auf dem Handy eine offene Liste in
   der Schublade. Der Aufklappknopf ist nur fuer Tastatur und Touch da: mit der
   Maus reicht das Ueberfahren, aber "nur Hover" ist auf dem Tablet nicht
   bedienbar. */

.af-nav__liste > li { position: relative; }

.af-nav__auf {
	display: none;
	background: none;
	border: 0;
	padding: .35rem;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.af-nav__unter {
	position: absolute;
	top: calc(100% + .35rem);
	left: 0;
	z-index: 40;
	min-width: 17rem;
	margin: 0;
	padding: .5rem;
	list-style: none;
	background: var(--weiss);
	border: 1px solid var(--linie);
	border-radius: var(--rund-m);
	box-shadow: var(--schatten-m);
	/* Nicht display:none, sondern unsichtbar und nicht anklickbar: so laesst
	   sich der Wechsel weich zeichnen und der Inhalt bleibt im Baum. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.35rem);
	transition: opacity var(--zug), transform var(--zug), visibility var(--zug);
}
.af-nav__liste > li:hover > .af-nav__unter,
.af-nav__liste > li:focus-within > .af-nav__unter,
.af-nav__auf[aria-expanded="true"] + .af-nav__unter {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.af-nav__unter a {
	display: block;
	padding: .6rem .7rem;
	min-height: 44px;
	border-radius: var(--rund-s);
	text-decoration: none;
	color: var(--gruen-800);
}
.af-nav__unter a:hover,
.af-nav__unter a:focus-visible { background: var(--sand-050); }

.af-nav__untertitel { display: block; font-weight: 500; }
.af-nav__unterzusatz {
	display: block;
	font-size: .82rem;
	color: var(--text-mitte);
	font-variant-numeric: tabular-nums;
}

/* In der Schublade: immer offen, eingerueckt, kein Aufklappen. */
.af-schublade__unter {
	list-style: none;
	margin: .25rem 0 .5rem;
	padding: 0 0 0 1rem;
	border-left: 2px solid var(--linie);
	display: grid;
	gap: .15rem;
}
.af-schublade__unter a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: .95rem;
	color: var(--text-mitte);
	text-decoration: none;
}
.af-schublade__unter a:hover { color: var(--gruen-800); }

/* --- 30.4 Meldung nach einer Umleitung ----------------------------------- */

.af-meldung {
	margin: 1.25rem 0 0;
	padding: .85rem 1.1rem;
	border-radius: var(--rund-m);
	border-left: 4px solid var(--gold-400);
	background: var(--sand-050);
	font-size: .96rem;
}
.af-meldung--gut { border-left-color: #1d6b4a; }
.af-meldung--fehler { border-left-color: #a2231d; }

/* --- 30.5 Kleinere Luecken ----------------------------------------------- */

/* Reine Behaelter, die nur ihre Kinder ordnen. */
.af-fragen__liste { display: grid; gap: .75rem; }
.af-formular__form { display: block; }

/* Bild im Hadsch-Hinweis: nie hoeher als noetig, nie verzerrt. */
.af-hadsch__bild img {
	width: 100%;
	height: auto;
	border-radius: var(--rund-m);
	display: block;
}

/* Der "nach oben"-Knopf sitzt unter dem Darstellungsknopf. */
.af-schweber__knopf--oben { margin-top: .5rem; }

/* Seitenspalten der Unterseiten: auf schmalen Schirmen unter den Inhalt,
   ab Tablet daneben. Die Breite steckt schon im Elterngitter. */
.af-vorgang__seite,
.af-fragenseite__seite,
.af-kontaktseite__seite { min-width: 0; }

/* Markenspalte der Fusszeile. min-width: 0 ist hier nicht Kosmetik: ein
   Gitterkind hat von sich aus die Mindestbreite seines laengsten Inhalts, und
   eine lange E-Mail-Adresse sprengt damit die Spalte - genau das liess die
   rechte Fussseite verrutschen. */
.af-fuss__marke { min-width: 0; }
.af-fuss__marke a { overflow-wrap: anywhere; }

/* ==========================================================================
   31 Ueber uns: Grundsaetze und Fakten
   --------------------------------------------------------------------------
   Zwei Formen, die es auf der Seite sonst nirgends gibt. Das ist Absicht: die
   Seite hatte vorher dreimal denselben Aufbau (rundes Symbol, Ueberschrift,
   Text), und genau diese Gleichheit liess sie nach Vorlage aussehen - nicht
   ein einzelner Abschnitt.
   ========================================================================== */

/* --- Grundsaetze: Zwischentitel links, Text rechts ------------------------
   Eine Beschreibungsliste, keine Kacheln. Ab Tablet steht der Titel neben dem
   Text, darunter untereinander. Keine Rahmen, keine Symbole - nur eine
   Haarlinie zwischen den Punkten. */

.af-grundsaetze {
	margin: 0;
	display: grid;
	gap: 0;
}
.af-grundsaetze > div {
	display: grid;
	gap: .35rem 2.5rem;
	padding: 1.6rem 0;
	border-top: 1px solid var(--linie);
}
.af-grundsaetze > div:last-child { border-bottom: 1px solid var(--linie); }

.af-grundsaetze dt {
	font-family: var(--schrift-titel, inherit);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--gruen-800);
}
.af-grundsaetze dd {
	margin: 0;
	color: var(--text-mitte);
	max-width: 62ch;
}

@media (min-width: 52rem) {
	.af-grundsaetze > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
	/* Der Titel bekommt oben etwas Luft, damit die Grundlinien beieinander
	   liegen - er ist groesser als der Text daneben. */
	.af-grundsaetze dt { padding-top: .1rem; }
}

/* --- Eckdaten -----------------------------------------------------------
   Dieselbe Tabelle an drei Stellen: allein auf der Startseite und der
   Leistungsseite, und auf "Ueber uns" neben einem Text. Allein darf sie zwei
   Spalten breit laufen, neben dem Text nicht - sonst quetschen sich lange
   Werte ("Düsseldorf, Frankfurt, Köln") auf zwei Zeilen. */

.af-eckdaten {
	/* Abstand nach unten: allein auf der Startseite folgen direkt die
	   Paketkarten, und ohne Luft klebte die Tabelle daran. */
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	display: grid;
	gap: 0 clamp(2rem, 4vw, 3.5rem);
	/* Oben eine durchgehende Linie statt einer je Spalte: die Tabelle hat
	   sonst keinen Abschluss nach oben. */
	border-top: 1px solid var(--linie);
}
@media (min-width: 46rem) {
	.af-eckdaten { grid-template-columns: 1fr 1fr; }
}

.af-eckdaten > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--linie);
}
.af-eckdaten dt { color: var(--text-mitte); flex: 0 1 auto; }
.af-eckdaten dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--gruen-800);
	font-variant-numeric: tabular-nums;
}

/* --- Neben einem Text: eine Spalte, Tabelle rechts -------------------- */

.af-eckdaten__reihe {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (min-width: 56rem) {
	.af-eckdaten__reihe { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.af-eckdaten__text p { color: var(--text-mitte); max-width: 46ch; }
.af-eckdaten__reihe .af-eckdaten { grid-template-columns: 1fr; margin-bottom: 0; }

@media (max-width: 34rem) {
	/* Untereinander: nebeneinander bleibt bei langen Werten kaum Platz. */
	.af-eckdaten > div { flex-direction: column; gap: .15rem; }
	.af-eckdaten dd { text-align: left; }
}