/*
 * Anadolu Core: Layout-Bausteine (Header, Hero, Abschnitte, Footer).
 * Baut auf tokens.css auf. Klassen werden in Elementor unter
 * Erweitert > CSS-Klassen gesetzt. Breakpoints wie Elementor:
 * Tablet bis 1024 px, Handy bis 767 px.
 */

/* ---------- Header ---------- */
/* Header scrollt mit der Seite weg (nicht fixiert). Er liegt oben über der ersten
   Fläche, damit der Milchglas-Effekt etwas durchscheinen lassen kann. */
#wrap {
	position: relative;
}

/* Header scrollt mit (Kerem, 2026-10-05: nicht mitlaufen lassen) */
#site-header.custom-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: var(--an-header-offset);
	background: transparent;
	border: 0;
}

#site-header.custom-header #site-header-inner {
	padding: 0;
}

/* Erste Sektion jeder Seite rückt um die Header-Höhe nach unten */
#main .elementor > .e-con:first-child {
	padding-top: calc(var(--padding-top, 0px) + var(--an-header-space));
}

.an-header {
	position: relative;
}

/* Milchglas: leicht durchsichtig, nicht zu stark */
.an-header.e-con {
	background-color: rgb(255 255 255 / 0.72);
	border-color: rgb(204 214 207 / 0.75);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.an-header.e-con {
		background-color: rgb(255 255 255 / 0.94);
	}
}

/* Menü-Panel richtet sich am ganzen Header aus, nicht am Widget */
.an-header .elementor-widget-shortcode,
.an-header .elementor-widget-shortcode .elementor-widget-container,
.an-header .elementor-shortcode {
	position: static;
}

.an-logo {
	flex: 0 0 auto;
}

.an-logo,
.an-logo .elementor-widget-container {
	text-align: start;
}

.an-logo img {
	display: block;
	max-width: none;
	margin: 0;
	border-radius: 0;
	width: clamp(150px, 13vw, 188px);
	height: auto;
}

.an-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--an-space-5);
}

.an-nav-panel {
	display: flex;
	align-items: center;
	gap: var(--an-space-6);
}

.an-nav-list {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.6vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.an-nav-list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--an-font-sans);
	font-size: 15px;
	line-height: 1.2;
	color: var(--an-green-800);
	text-decoration: none;
}

.an-nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--an-dur) var(--an-ease);
}

.an-nav-list a:hover::after,
.an-nav-list a:focus-visible::after,
.an-nav-list .current-menu-item > a::after,
.an-nav-list .current-page-ancestor > a::after,
.an-nav-list a[aria-current="page"]::after {
	transform: scaleX(1);
}

/* Sprachumschalter (erscheint, sobald Polylang aktiv ist).
   Globus-Button, klappt eine kleine Liste auf. Steht im Header und im Cookie-Hinweis. */
.an-lang {
	position: relative;
	display: flex;
	flex: 0 0 auto;
}

/* Mehr Spezifität als die Button-Regeln von OceanWP */
.an-lang button.an-lang-toggle,
.an-lang button.an-lang-toggle:hover,
.an-lang button.an-lang-toggle:focus {
	color: var(--an-green-800);
	background-color: transparent;
}

.an-lang button.an-lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 var(--an-space-3);
	font-family: var(--an-font-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	border-radius: var(--an-radius-pill);
	cursor: pointer;
	transition: border-color var(--an-dur-fast) var(--an-ease), background-color var(--an-dur-fast) var(--an-ease);
}

.an-lang button.an-lang-toggle:hover,
.an-lang.is-open button.an-lang-toggle {
	background-color: var(--an-sage-100);
}

.an-lang-icon {
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../img/globus.svg") center / contain no-repeat;
	mask: url("../img/globus.svg") center / contain no-repeat;
}

.an-lang-panel {
	position: absolute;
	top: calc(100% + var(--an-space-2));
	right: 0;
	z-index: 20;
	min-width: 180px;
	margin: 0;
	padding: var(--an-space-2);
	list-style: none;
	background-color: var(--an-bg-surface);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius-md);
	box-shadow: var(--an-shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition:
		opacity var(--an-dur-fast) var(--an-ease),
		transform var(--an-dur-fast) var(--an-ease),
		visibility 0s linear var(--an-dur-fast);
}

.an-lang.is-open .an-lang-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--an-dur-fast) var(--an-ease),
		transform var(--an-dur-fast) var(--an-ease),
		visibility 0s;
}

/* Ohne JavaScript: Liste beim Überfahren oder per Tastatur zeigen */
html:not(.an-js) .an-lang:is(:hover, :focus-within) .an-lang-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.an-lang-panel a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--an-space-4);
	min-height: 44px;
	padding: 0 var(--an-space-3);
	font-family: var(--an-font-sans);
	font-size: 15px;
	color: var(--an-green-800);
	border-radius: var(--an-radius-sm);
	text-decoration: none;
	transition: background-color var(--an-dur-fast) var(--an-ease);
}

.an-lang-panel a:hover {
	background-color: var(--an-cream-50);
}

.an-lang-panel a[aria-current="true"] {
	font-weight: 600;
}

/* Haken an der aktuellen Sprache */
.an-lang-panel a[aria-current="true"]::after {
	content: "";
	width: 14px;
	height: 8px;
	margin-top: -4px;
	border-left: 1.5px solid var(--an-teal-600);
	border-bottom: 1.5px solid var(--an-teal-600);
	transform: rotate(-45deg);
}

.an-nav-toggle,
.an-nav-mobile-actions {
	display: none;
}

@media (max-width: 1024px) {
	.an-nav {
		justify-content: flex-end;
		gap: var(--an-space-2);
	}

	/* Auf dem Handy rund und umrandet wie der Menü-Button daneben */
	.an-header .an-lang button.an-lang-toggle {
		border-color: var(--an-border);
	}

	.an-nav-toggle {
		flex-shrink: 0;
	}

	/* Leeres Element: ohne feste Basis würde der Browser es auf 0 schrumpfen */
	.an-nav-toggle-bars {
		flex: 0 0 18px;
	}

	/* Mehr Spezifität als die Button-Regeln von OceanWP */
	.an-header .an-nav button.an-nav-toggle,
	.an-header .an-nav button.an-nav-toggle:hover,
	.an-header .an-nav button.an-nav-toggle:focus {
		color: var(--an-green-800);
		background-color: transparent;
	}

	.an-nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--an-space-2);
		min-width: 44px;
		min-height: 44px;
		padding: 0 var(--an-space-3);
		font-family: var(--an-font-sans);
		font-size: 15px;
		font-weight: 500;
		color: var(--an-green-800);
		background: transparent;
		border: 1px solid var(--an-border);
		border-radius: var(--an-radius-pill);
		cursor: pointer;
	}

	.an-nav-toggle-bars,
	.an-nav-toggle-bars::before,
	.an-nav-toggle-bars::after {
		display: block;
		width: 18px;
		height: 1.5px;
		background-color: currentColor;
		border-radius: 1px;
		transition: transform var(--an-dur) var(--an-ease), opacity var(--an-dur-fast) var(--an-ease);
	}

	.an-nav-toggle-bars {
		position: relative;
	}

	.an-nav-toggle-bars::before,
	.an-nav-toggle-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.an-nav-toggle-bars::before {
		transform: translateY(-6px);
	}

	.an-nav-toggle-bars::after {
		transform: translateY(6px);
	}

	.an-nav.is-open .an-nav-toggle-bars {
		background-color: transparent;
	}

	.an-nav.is-open .an-nav-toggle-bars::before {
		transform: rotate(45deg);
	}

	.an-nav.is-open .an-nav-toggle-bars::after {
		transform: rotate(-45deg);
	}

	.an-nav-panel {
		position: absolute;
		top: calc(100% + var(--an-space-2));
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--an-space-4);
		padding: var(--an-space-5);
		background-color: var(--an-bg-surface);
		border: 1px solid var(--an-border);
		border-radius: var(--an-radius-lg);
		box-shadow: var(--an-shadow-soft);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition:
			opacity var(--an-dur) var(--an-ease),
			transform var(--an-dur) var(--an-ease),
			visibility 0s linear var(--an-dur);
	}

	.an-nav.is-open .an-nav-panel {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition:
			opacity var(--an-dur) var(--an-ease),
			transform var(--an-dur) var(--an-ease),
			visibility 0s;
	}

	.an-nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.an-nav-list li + li {
		border-top: 1px solid var(--an-border);
	}

	.an-nav-list a {
		display: flex;
		min-height: 52px;
		font-size: 17px;
	}

	.an-nav-list a::after {
		display: none;
	}

	.an-nav-mobile-actions {
		display: grid;
		gap: var(--an-space-3);
	}

	.an-nav-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--an-btn-height);
		font-family: var(--an-font-sans);
		font-size: 17px;
		font-weight: 500;
		color: var(--an-white);
		background-color: var(--an-green-800);
		border: 1px solid var(--an-green-800);
		border-radius: var(--an-radius-pill);
		text-decoration: none;
	}

	.an-nav-cta-outline {
		color: var(--an-green-800);
		background-color: transparent;
		border-color: var(--an-border);
	}
}

@media (max-width: 767px) {
	/* Wenig Platz: nur der Globus, das Kürzel steht in der Liste */
	.an-lang button.an-lang-toggle {
		justify-content: center;
		width: 44px;
		padding: 0;
	}

	.an-lang-code {
		display: none;
	}
}

/* ---------- Abschnitte ---------- */
.an-rule-bottom {
	border-bottom: 1px solid var(--an-border);
}

.an-rule-top {
	border-top: 1px solid var(--an-border);
}

/* Überschrift oder Text mit Linie darunter: etwas Luft zur Linie */
.elementor-widget.an-rule-bottom {
	padding-bottom: var(--an-space-5);
}

/* Begrenzte Textbreite für gute Lesbarkeit.
   Elementor setzt Widgets in Containern mit starkem Selektor auf max-width: 100%. */
.an-measure,
.elementor.elementor .e-con > .elementor-widget.an-measure,
.e-con.e-con > .e-con-inner > .elementor-widget.an-measure {
	max-width: min(64ch, 100%); /* nie breiter als der Platz, sonst ragt Text auf schmalen Handys raus */
}

/* ---------- Hero ---------- */
/* Video als Hintergrund über die volle Breite und Höhe des Bildschirms, auch hinter dem Header.
   Davor ein heller Verlauf: links kräftig (Text lesbar), nach rechts durchsichtiger
   (Kerem, 2026-10-05, Variante E aus docs/hero-varianten/, Schleier 70 %). */
.an-hero.e-con {
	--an-veil: 0.7;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100svh;
}

/* Bezugsrahmen für den Hintergrund ist die Sektion, nicht die 1280-px-Innenbox */
.an-hero.e-con > .e-con-inner {
	position: static;
}

.an-hero .an-hero-bg.e-con {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.an-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgb(248 248 243 / calc(var(--an-veil) + 0.12)) 0%,
		rgb(248 248 243 / var(--an-veil)) 45%,
		rgb(248 248 243 / calc(var(--an-veil) - 0.5)) 100%
	);
}

/* Elementor-Hüllen um das Video auf volle Fläche ziehen */
.an-hero-bg > .elementor-widget-html,
.an-hero-bg > .elementor-widget-html > .elementor-widget-container {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.an-hero-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.an-hero .an-hero-card {
	box-shadow: 0 12px 40px rgb(9 39 42 / 0.14);
}

/* Umrandeter Button bleibt vor dem Video als Button erkennbar */
.an-hero > .e-con-inner > .e-con .an-btn-outline .elementor-button {
	background-color: rgb(255 255 255 / 0.72);
	border-color: rgb(14 44 47 / 0.25);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.an-hero > .e-con-inner > .e-con .an-btn-outline .elementor-button:hover,
.an-hero > .e-con-inner > .e-con .an-btn-outline .elementor-button:focus-visible {
	background-color: var(--an-bg-surface);
	border-color: var(--an-green-800);
}

@media (min-width: 1025px) {
	.an-hero .an-hero-card {
		max-width: 520px;
	}
}

/* Hochkant: Verlauf von oben nach unten, die Karte steht unten auf dem klareren Teil */
@media (max-width: 1024px) {
	.an-hero.e-con {
		min-height: 0;
	}

	.an-hero-bg::after {
		background: linear-gradient(
			180deg,
			rgb(248 248 243 / calc(var(--an-veil) + 0.12)) 0%,
			rgb(248 248 243 / var(--an-veil)) 55%,
			rgb(248 248 243 / calc(var(--an-veil) - 0.35)) 100%
		);
	}
}

/* Nummerierte Schritte in der Hero-Karte */
.an-steps-list ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: an-step;
}

.an-steps-list li {
	counter-increment: an-step;
	font-size: 15px;
	line-height: 1.55;
	color: var(--an-green-800);
}

.an-steps-list li::before {
	content: "0" counter(an-step);
	display: inline-block;
	min-width: 1.75em;
	font-variant-numeric: tabular-nums;
}

/* ---------- Ablauf (Elementor Tabs, vertikal) ---------- */
/* Elementor steuert die Tabs über CSS-Variablen. Wir setzen nur diese. */
.elementor-widget-n-tabs.an-process {
	--n-tabs-gap: 48px;
	--n-tabs-heading-width: 30%;
	--n-tabs-heading-justify-content: flex-start;
	--n-tabs-border-width: 0;
	--n-tabs-title-color: var(--an-text-muted);
	--n-tabs-title-color-hover: var(--an-green-800);
	--n-tabs-title-color-active: var(--an-green-800);
	--n-tabs-title-background-color: transparent;
	--n-tabs-title-background-color-hover: transparent;
	--n-tabs-title-background-color-active: var(--an-bg-surface);
	--n-tabs-title-font-size: 18px;
	--n-tabs-title-justify-content: flex-start;
	--n-tabs-title-text-align: start;
	--n-tabs-title-padding-top: 24px;
	--n-tabs-title-padding-bottom: 24px;
	--n-tabs-title-padding-left: 24px;
	--n-tabs-title-padding-right: 24px;
	--n-tabs-title-border-radius: 16px;
}

.an-process .e-n-tabs-heading {
	align-self: flex-start;
}

/* Reiter als Karteikarten: der aktive liegt weiß mit Schatten obenauf (Kerem, 2026-10-05) */
.an-process .e-n-tabs-heading {
	gap: 10px;
}

.an-process .e-n-tab-title {
	position: relative;
	overflow: hidden;
	font-family: var(--an-font-sans);
	padding-inline: 24px;
	border: 1px solid transparent;
	border-radius: 16px;
	transition:
		background-color var(--an-dur) var(--an-ease),
		box-shadow var(--an-dur) var(--an-ease),
		border-color var(--an-dur) var(--an-ease),
		color var(--an-dur) var(--an-ease);
}

.an-process .e-n-tab-title:hover {
	border-color: var(--an-border);
}

.an-process .e-n-tab-title[aria-selected="true"] {
	background-color: var(--an-bg-surface);
	border-color: transparent;
	box-shadow: 0 10px 30px rgb(9 39 42 / 0.10), 0 2px 6px rgb(9 39 42 / 0.05);
}

/* Fortschritt im aktiven Schritt, nur im Präsentationsmodus */
.an-steps.is-scrollsteps .e-n-tab-title[aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 10px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--an-teal-600);
	transform-origin: left center;
	transform: scaleX(var(--an-step-p, 0));
}

.an-process .e-n-tabs-content > .e-con {
	padding: 40px;
	background-color: var(--an-bg-surface);
	border: 0;
	border-radius: var(--an-radius-lg);
}

.an-process .e-n-tabs-content > .e-con.e-active {
	animation: an-open var(--an-dur) var(--an-ease);
}

@media (max-width: 767px) {
	.elementor-widget-n-tabs.an-process {
		--n-tabs-heading-width: 100%;
		--n-tabs-title-padding-top: 18px;
		--n-tabs-title-padding-bottom: 18px;
	}

	.an-process .e-n-tabs-content > .e-con {
		padding: 24px;
	}
}

.an-feature .elementor-icon {
	font-size: 34px;
}

.elementor-icon svg [stroke] {
	stroke: currentColor;
}

/* Merkmale auf Dunkel ("Was Ihnen wichtig ist") */
.an-feature .elementor-icon {
	color: var(--an-sand-400);
}

.an-feature .elementor-icon-box-title,
.an-feature .elementor-icon-box-title a {
	font-family: var(--an-font-serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--an-sand-400);
}

.an-feature .elementor-icon-box-description {
	color: var(--an-text-inverse);
}

/* ---------- Checkliste (Icon-Liste mit Kreisen und Linien) ---------- */
.an-checklist .elementor-icon-list-items {
	margin: 0;
}

.an-checklist .elementor-icon-list-item {
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--an-border);
	color: var(--an-green-800);
}

.an-checklist .elementor-icon-list-item:first-child {
	border-top: 1px solid var(--an-border);
}

.an-checklist .elementor-icon-list-text::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 12px;
	vertical-align: -1px;
	border: 1.5px solid var(--an-green-800);
	border-radius: 50%;
}

.an-checklist .elementor-icon-list-icon {
	display: none;
}

/* ---------- FAQ (Elementor Akkordeon) ---------- */
.elementor-widget-n-accordion.an-faq {
	--n-accordion-title-font-size: 26px;
	--n-accordion-title-flex-grow: 1;
	--n-accordion-title-justify-content: space-between;
	--n-accordion-title-icon-order: 1;
	--n-accordion-border-width: 0;
	--n-accordion-padding: 26px 0;
	--n-accordion-border-radius: 0;
	--n-accordion-item-title-space-between: 0;
	--n-accordion-item-title-distance-from-content: 0;
	--n-accordion-icon-size: 22px;
	--n-accordion-icon-gap: 24px;
	--n-accordion-title-normal-color: var(--an-green-800);
	--n-accordion-title-hover-color: var(--an-green-800);
	--n-accordion-title-active-color: var(--an-green-800);
	--n-accordion-icon-normal-color: var(--an-green-800);
	--n-accordion-icon-hover-color: var(--an-green-800);
	--n-accordion-icon-active-color: var(--an-green-800);
}

.an-faq .e-n-accordion-item {
	border-bottom: 1px solid var(--an-border);
}

.an-faq .e-n-accordion-item-title {
	background: transparent;
}

.an-faq .e-n-accordion-item-title-text {
	font-family: var(--an-font-serif);
	font-size: var(--n-accordion-title-font-size);
	line-height: 1.3;
	text-align: start;
}

.an-faq .e-n-accordion-item > .e-con {
	padding: 0 48px 26px 0;
	background: transparent;
	border: 0;
}

@media (max-width: 767px) {
	.elementor-widget-n-accordion.an-faq {
		--n-accordion-title-font-size: 21px;
		--n-accordion-padding: 20px 0;
	}

	.an-faq .e-n-accordion-item > .e-con {
		padding-right: 0;
	}
}

/* ---------- Footer ---------- */
#footer-widgets.oceanwp-row,
#footer-widgets {
	padding: 0;
	background: transparent;
}

#footer-widgets .footer-widgets-inner,
#footer-widgets .container {
	width: 100%;
	max-width: none;
	padding: 0;
}

.an-footer a:not(.elementor-button) {
	color: var(--an-text-inverse);
	text-decoration: none;
}

.an-footer a:not(.elementor-button):hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.an-footer-links .elementor-icon-list-item {
	padding: 6px 0;
}

.an-footer-links .elementor-icon-list-text {
	color: var(--an-text-inverse);
}

.an-footer .an-logo img {
	width: clamp(180px, 18vw, 240px);
}

/* ---------- Handy: feste Leiste unten ---------- */
.an-mobile-bar {
	display: none;
}

@media (max-width: 767px) {
	.an-mobile-bar {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: 12px;
		z-index: 90;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 8px;
		background-color: var(--an-bg-surface);
		border: 1px solid var(--an-border);
		border-radius: var(--an-radius-pill);
		box-shadow: var(--an-shadow-soft);
	}

	.an-mobile-bar a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		font-family: var(--an-font-sans);
		font-size: 16px;
		font-weight: 500;
		color: var(--an-green-800);
		border-radius: var(--an-radius-pill);
		text-decoration: none;
	}

	.an-mobile-bar a:first-child {
		color: var(--an-white);
		background-color: var(--an-green-800);
	}

	/* Platz, damit die Leiste den Footer nicht verdeckt */
	body.an-has-mobile-bar {
		padding-bottom: 84px;
	}
}

/* ---------- Kleine Helfer ---------- */
/* Sand als Textfarbe (z. B. Kontaktzeile im Footer) */
.an-sand-text,
.an-sand-text a,
.an-inverse .elementor-widget-text-editor.an-sand-text,
.an-inverse .an-sand-text a {
	color: var(--an-sand-400);
}

/* Trennlinie auf dunklem Grund */
.an-rule-top-inverse {
	border-top: 1px solid var(--an-border-inverse);
}

/* Überzeile auf Fotos in Creme statt Petrol */
.an-card-image .an-eyebrow .elementor-heading-title,
.an-eyebrow-light .elementor-heading-title {
	color: var(--an-text-inverse);
}

/* Karten in der Hero-Fläche: weiße Karte, Linie unter dem Einleitungssatz */
.an-hero-card .an-rule-bottom {
	padding-bottom: var(--an-space-4);
}

/* Kleiner umrandeter Button: klar klickbar, aber kein Haupt-Button */
.an-btn-small .elementor-button {
	min-height: 44px;
	padding: 10px 20px;
	font-size: 15px;
}

@media (max-width: 767px) {
	.an-btn-small .elementor-button {
		padding: 10px 14px;
		font-size: 14px;
		white-space: nowrap;
	}
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.an-legal h2 {
	margin: var(--an-space-7) 0 var(--an-space-3);
	font-size: 26px;
	line-height: 1.3;
}

.an-legal h3 {
	margin: var(--an-space-5) 0 var(--an-space-2);
	font-size: 20px;
	line-height: 1.35;
}

.an-legal :where(p, ul) {
	margin: 0 0 var(--an-space-4);
}

.an-legal ul {
	padding-left: 1.2em;
}

/* Sichtbare Platzhalter für fehlende Inhalte, damit sie niemand übersieht */
.an-placeholder {
	padding: var(--an-space-5);
	color: var(--an-green-800);
	background-color: var(--an-bg-note);
	border: 1px dashed var(--an-teal-600);
	border-radius: var(--an-radius-md);
}

/* Foto in einer Textsektion (z. B. Hände mit Gebetskette) */
.an-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 578 / 520;
	object-fit: cover;
	border-radius: var(--an-radius-lg);
}

/* Listen ohne Punkte, auch wenn Elementor sein Listen-CSS auf einer Seite nicht lädt
   (passiert beim Footer, der aus einer eigenen Vorlage kommt) */
:is(.an-footer-links, .an-checklist) .elementor-icon-list-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.an-footer-links, .an-checklist) .elementor-icon-list-item {
	display: flex;
	margin: 0;
}

/* ---------- Faktenleiste ---------- */
.an-facts {
	padding-top: var(--an-space-2);
}

.an-fact {
	padding-left: var(--an-space-5);
	border-left: 1px solid var(--an-border);
}

.an-fact-value .elementor-heading-title {
	font-family: var(--an-font-serif);
	font-size: clamp(26px, 1.6vw + 16px, 36px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--an-green-800);
}

.an-fact-label p {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
}

@media (max-width: 767px) {
	.an-fact {
		padding: var(--an-space-3) 0 var(--an-space-3) var(--an-space-4);
	}
}

/* Zentrierter Text (z. B. Einleitung über dem Zeitstrahl) */
.an-center {
	text-align: center;
}

.an-center.an-measure {
	margin-inline: auto;
}

/* ---------- Zeitstrahl (Über uns) ---------- */
/*
 * Aufbau in Elementor:
 *   Container "an-timeline"
 *     Container "an-timeline-item" (pro Station)
 *       Überschrift "an-timeline-year" (Jahr, der Punkt hängt per CSS daran)
 *       Container "an-timeline-body" (Titel, Text, Foto oder "an-timeline-media" als Platzhalter)
 * site.js setzt --an-tl-progress (0 bis 1) und "is-active" an erreichten Stationen.
 * Ohne JavaScript ist alles sichtbar und die Linie voll.
 */
.an-timeline {
	--an-tl-gutter: 112px;
	--an-tl-rail: 50%;
	--an-tl-year-size: clamp(52px, 3vw + 26px, 88px);
	--an-tl-idle: #7F8F8C; /* noch nicht erreicht, 3.2:1 auf Creme (große Schrift) */
	position: relative;
	padding-top: var(--an-space-8);
}

.an-timeline::before,
.an-timeline::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--an-tl-rail);
	width: 2px;
	margin-left: -1px;
	pointer-events: none;
}

.an-timeline::before {
	background-color: var(--an-line);
}

.an-timeline::after {
	background-color: var(--an-teal-600);
	transform-origin: top center;
	transform: scaleY(var(--an-tl-progress, 1));
}

.an-timeline > .e-con.an-timeline-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--an-tl-gutter) minmax(0, 1fr);
	align-items: start;
	gap: 0; /* Elementor-Abstand würde den Punkt neben die Linie schieben */
	padding-bottom: var(--an-space-9);
}

.an-timeline > .e-con.an-timeline-item:last-child {
	padding-bottom: var(--an-space-7);
}

.an-timeline-item > .an-timeline-year {
	position: relative;
	grid-column: 1;
	width: 100%;
	text-align: end;
}

.an-timeline-item > .an-timeline-body {
	grid-column: 3;
	max-width: 560px;
}

.an-timeline-year .elementor-heading-title {
	font-family: var(--an-font-serif);
	font-size: var(--an-tl-year-size);
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: var(--an-green-800);
	text-wrap: nowrap;
	transition: color var(--an-dur) var(--an-ease);
}

/* Punkt auf der Linie, auf halber Höhe der Jahreszahl */
.an-timeline-year::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--an-tl-gutter) / -2 - 8px);
	width: 16px;
	height: 16px;
	margin-top: -8px;
	box-sizing: border-box;
	background-color: var(--an-green-800);
	border: 2px solid var(--an-green-800);
	border-radius: 50%;
	box-shadow: 0 0 0 6px var(--an-cream-50);
	transition: background-color var(--an-dur) var(--an-ease), border-color var(--an-dur) var(--an-ease);
}

.an-timeline-title .elementor-heading-title {
	color: var(--an-green-800);
	transition: color var(--an-dur) var(--an-ease);
}

.an-timeline-body .elementor-widget-text-editor p {
	margin: 0;
}

/* Desktop und Tablet (Kerem, 2026-10-05, Vorbild Auto-Siegl): Jahr bzw. Titel samt Punkt bleibt auf Höhe der
   Linienspitze (55 % der Bildschirmhöhe, wie in site.js) stehen, während der Text weiterscrollt. Die nächste
   Station schiebt die vorherige nach oben weg und bleibt selbst stehen. Das Ende ihres Stationsblocks begrenzt
   das Stehenbleiben, so entsteht das Wegschieben ohne JavaScript. */
@media (min-width: 768px) {
	.an-timeline {
		--an-tl-mark: 55vh;
	}

	.an-timeline-item > .an-timeline-year {
		position: sticky;
		top: calc(var(--an-tl-mark) - var(--an-tl-year-size) / 2);
		z-index: 1;
	}

	.an-timeline-item > .an-timeline-year.an-timeline-point {
		top: calc(var(--an-tl-mark) - 18px);
	}

	/* Hier übernimmt der stehende Punkt die Spitze der Linie */
	.an-tl-head {
		display: none;
	}
}

/* Handy: Punkt an der Spitze der Linie wird von der Linie nach unten geschoben.
   site.js hängt ihn an und blendet ihn nur ein, solange sich die Linie füllt. */
.an-tl-head {
	position: absolute;
	z-index: 2;
	left: var(--an-tl-rail);
	top: calc(var(--an-tl-progress, 0) * 100%);
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background-color: var(--an-teal-600);
	box-shadow: 0 0 0 6px var(--an-cream-50);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--an-dur) var(--an-ease);
}

.an-timeline.is-moving .an-tl-head {
	opacity: 1;
}

/* Beschreibender Punkt ohne Jahr: Titel links an der Linie, kleinerer Punkt (Kerem, 2026-10-05) */
.an-timeline-point .elementor-heading-title {
	font-family: var(--an-font-serif);
	font-size: clamp(22px, 1vw + 14px, 30px);
	line-height: 1.25;
	text-wrap: balance;
	white-space: normal;
}

.an-timeline-year.an-timeline-point::after {
	top: 18px;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	right: calc(var(--an-tl-gutter) / -2 - 6px);
	background-color: var(--an-cream-50);
	border-color: var(--an-green-800);
}

.an-timeline.is-ready .an-timeline-item.is-active .an-timeline-point::after {
	background-color: var(--an-green-800);
}

.an-timeline.is-ready .an-timeline-item:not(.is-active) .an-timeline-point .elementor-heading-title {
	color: var(--an-text-muted);
}

/* Noch nicht erreicht */
.an-timeline.is-ready .an-timeline-item:not(.is-active) .an-timeline-year .elementor-heading-title {
	color: var(--an-tl-idle);
}

.an-timeline.is-ready .an-timeline-item:not(.is-active) .an-timeline-year::after {
	background-color: var(--an-cream-50);
	border-color: var(--an-line);
}

.an-timeline.is-ready .an-timeline-item:not(.is-active) .an-timeline-title .elementor-heading-title {
	color: var(--an-text-muted);
}

/* Foto oder Platzhalter */
.an-timeline-foto img,
.an-timeline-body > .an-timeline-media {
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: var(--an-space-3);
	border-radius: var(--an-radius-md);
}

.an-timeline-foto img {
	display: block;
	height: auto;
	object-fit: cover;
}

.an-timeline-body > .an-timeline-media {
	background-color: var(--an-sage-100);
}

.an-timeline-media p {
	margin: 0;
	font-size: 14px;
	color: var(--an-text-muted);
}

@media (max-width: 1024px) {
	.an-timeline {
		--an-tl-gutter: 72px;
	}
}

@media (max-width: 767px) {
	/* Linie links, Jahr über dem Titel */
	.an-timeline {
		--an-tl-gutter: 40px;
		--an-tl-rail: 9px;
		--an-tl-year-size: 44px;
		padding-top: var(--an-space-7);
	}

	.an-timeline > .e-con.an-timeline-item {
		grid-template-columns: var(--an-tl-gutter) minmax(0, 1fr);
		padding-bottom: var(--an-space-8);
	}

	.an-timeline-item > .an-timeline-year {
		grid-column: 2;
		margin-bottom: var(--an-space-3);
		text-align: start;
	}

	.an-timeline-item > .an-timeline-body {
		grid-column: 2;
	}

	.an-timeline-year::after {
		right: auto;
		left: calc(var(--an-tl-rail) - var(--an-tl-gutter) - 8px);
	}

	.an-timeline-year.an-timeline-point::after {
		right: auto;
		left: calc(var(--an-tl-rail) - var(--an-tl-gutter) - 6px);
	}
}

/* ---------- Kontakt-Kacheln ---------- */
/*
 * Aufbau in Elementor:
 *   Container "an-contact-card": Überschrift, Icon "an-contact-icon",
 *   Text "an-contact-value" (Nummer oder Adresse), Text (Hinweis), Button unten.
 */
.an-contact-card {
	border: 1px solid var(--an-border);
	text-align: center;
}

.an-contact-card > .elementor-widget-button {
	width: 100%;
	margin-top: auto;
	padding-top: var(--an-space-4);
}

.an-contact-card .elementor-button {
	width: 100%;
}

.an-contact-icon .elementor-icon-wrapper {
	text-align: center;
}

.an-contact-icon .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	font-size: 30px;
	color: var(--an-green-800);
	background-color: var(--an-sage-100);
	border-radius: var(--an-radius-sm);
}

.an-contact-card .an-contact-value p {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--an-green-800);
}

.an-contact-card .an-contact-value a {
	color: var(--an-link);
	text-decoration: none;
}

.an-contact-card .an-contact-value a:hover,
.an-contact-card .an-contact-value a:focus-visible {
	color: var(--an-green-800);
	text-decoration: underline;
}

.an-contact-card .elementor-widget-text-editor:not(.an-contact-value) p {
	margin: 0;
}

/* ---------- Bewegung beim Scrollen (Kerem, 2026-10-05) ---------- */
/* Hero: Text und Karte gleiten beim Laden nacheinander herein */
@keyframes an-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

.an-js .an-hero > .e-con-inner > .e-con:not(.an-hero-bg) > .elementor-element,
.an-js .an-hero > .e-con-inner > .an-hero-card {
	animation: an-rise 0.9s var(--an-ease) both;
}

.an-js .an-hero > .e-con-inner > .e-con:not(.an-hero-bg) > .elementor-element:nth-child(2) { animation-delay: 0.08s; }
.an-js .an-hero > .e-con-inner > .e-con:not(.an-hero-bg) > .elementor-element:nth-child(3) { animation-delay: 0.16s; }
.an-js .an-hero > .e-con-inner > .e-con:not(.an-hero-bg) > .elementor-element:nth-child(4) { animation-delay: 0.24s; }
.an-js .an-hero > .e-con-inner > .an-hero-card { animation-delay: 0.32s; }

/* Überschrift oder Spalte bleibt stehen, während daneben Inhalt vorbeizieht.
   Abstand oben: Header plus etwas Luft. Nur ab Tablet quer, darunter ist alles untereinander. */
@media (min-width: 1025px) {
	.an-sticky.e-con {
		position: sticky;
		top: var(--an-space-7);
		align-self: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.an-js .an-hero .elementor-element,
	.an-js .an-hero-card {
		animation: none !important;
	}
}

/* Ablauf als Präsentation (nur Desktop, site.js setzt "is-scrollsteps" und die Höhe):
   Der Abschnitt bleibt bildschirmfüllend stehen, Weiterscrollen schaltet die Schritte. */
.an-steps.is-scrollsteps.e-con {
	padding-top: 0;
	padding-bottom: 0;
}

.an-steps.is-scrollsteps.e-con {
	justify-content: flex-start;
}

/* Elementor zieht den inneren Bereich auf die volle Höhe, dann gäbe es nichts zum Stehenbleiben */
.an-steps.is-scrollsteps.e-con > .e-con-inner {
	position: sticky;
	top: 0;
	flex: 0 0 auto;
	height: 100vh;
	min-height: 0;
	justify-content: center;
	padding-block: var(--an-space-7);
}

.an-steps.is-scrollsteps .e-n-tabs-content {
	min-height: 340px;
}

/* Leistungskacheln nebeneinander (Startseite): teilen sich die Breite gleichmäßig.
   Elementor rechnet sonst Prozentbreite plus Abstand und bricht die vierte Kachel um. */
.an-tiles.e-con > .e-con {
	--width: auto;
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 1024px) {
	.an-tiles.e-con > .e-con {
		flex: 1 1 calc(50% - 8px);
	}
}

@media (max-width: 767px) {
	.an-tiles.e-con > .e-con {
		flex-basis: 100%;
	}
}

/* Bildnachweis unter einem Foto (Pflicht bei CC-Lizenzen), klein und zurückhaltend */
.an-photo-credit .elementor-widget-container,
.an-photo-credit p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--an-text-muted);
}

.an-photo-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Startseite: Flugzeug in der zweiten Kachel („Überführung“) höher zeigen, damit es über der Schrift steht.
   Foto größer als die Kachel und unten bündig, so rutscht es nach oben. Auf der Seite Leistungen passt der normale Ausschnitt. */
.an-tiles.e-con > .e-con:nth-child(2) > .an-card-media {
	background-size: auto 130% !important;
	background-position: 35% 100% !important;
}

@media (max-width: 1024px) {
	.an-tiles.e-con > .e-con:nth-child(2) > .an-card-media {
		background-size: cover !important;
		background-position: center 70% !important;
	}
}

/* ---------- Formulare: Zurück-Link und Reiter (Kerem, 2026-10-05) ---------- */
/* Zurück-Link mit Pfeil nach links */
.an-back .elementor-button-text::before {
	content: "\2190";
	display: inline-block;
	margin-right: 0.5em;
	transition: transform var(--an-dur) var(--an-ease);
}

.an-back .elementor-button:hover .elementor-button-text::before,
.an-back .elementor-button:focus-visible .elementor-button-text::before {
	transform: translateX(-4px);
}

/* Reiter wie Browser-Tabs: oben abgerundet, der aktive ist weiß wie die Formularfläche darunter */
.an-formtabs.e-con {
	align-items: flex-end;
	margin-top: var(--an-space-5);
}

.an-formtab .elementor-button {
	min-height: 52px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 500;
	color: var(--an-green-800);
	background-color: rgb(255 255 255 / 0.45);
	border: 0;
	border-radius: 16px 16px 0 0;
	box-shadow: none;
	transition: background-color var(--an-dur) var(--an-ease);
}

.an-formtab .elementor-button:hover,
.an-formtab .elementor-button:focus-visible {
	background-color: rgb(255 255 255 / 0.75);
	color: var(--an-green-800);
}

.an-formtab.is-active .elementor-button,
.an-formtab.is-active .elementor-button:hover {
	background-color: var(--an-white);
	box-shadow: 0 -6px 18px rgb(9 39 42 / 0.06);
}

@media (max-width: 767px) {
	.an-formtabs.e-con > .elementor-widget-button {
		flex: 1 1 0;
	}

	.an-formtab .elementor-button {
		width: 100%;
		padding: 12px 14px;
		font-size: 15px;
	}
}

/* Hinweis-Box: Info-Symbol mit Abstand zum Text */
.an-note-grey.e-con > .elementor-widget-icon {
	flex: 0 0 auto;
	margin-right: var(--an-space-2);
}

/* Formular-Seiten: Inhalte des gerade nicht gewählten Formulars (site.js schaltet um) */
.an-is-hidden,
.e-con.an-is-hidden,
.elementor-element.an-is-hidden {
	display: none !important;
}

/* Handy: lange deutsche Wörter (z. B. „Umsatzsteuer-Identifikationsnummer“, „Unternehmensgeschichte“)
   sauber trennen statt über den Rand zu laufen oder mitten im Wort hart umzubrechen (2026-10-05) */
@media (max-width: 767px) {
	.elementor-widget-text-editor,
	.elementor-heading-title {
		overflow-wrap: break-word;
	}

	/* E-Mail-Adressen und Links sind ein langes Wort: dürfen umbrechen, wenn sie nicht in die Zeile passen */
	.elementor-widget-text-editor a {
		overflow-wrap: anywhere;
	}

	/* Silbentrennung nur bei Überschriften, im Fließtext würde sie zu oft greifen */
	.elementor-heading-title {
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.elementor-widget-text-editor {
		min-width: 0;
		max-width: 100%;
	}
}