/*
 * Anadolu Core: Design-Tokens und Interaktionen.
 *
 * Ebene 1 (Primitiv): Farben kommen aus den globalen Farben von Elementor
 *   (Website-Einstellungen). Wer dort eine Farbe ändert, ändert sie überall.
 *   Der Hex-Wert dahinter ist nur die Absicherung.
 * Ebene 2 (Semantisch): Rollen wie Hintergrund, Text, Linie.
 * Ebene 3 (Komponente): Buttons, Karten, Header.
 *
 * Klassen für Elementor (Erweitert > CSS-Klassen) beginnen mit "an-".
 * Animiert werden nur transform und opacity, plus Farbwechsel bei Buttons.
 */

/* ---------- Ebene 1: Primitiv ---------- */
:root {
	--an-green-900: var(--e-global-color-angreen900, #09272A);
	--an-green-800: var(--e-global-color-primary, #0E2C2F);
	--an-green-850: #081F22; /* Hover dunkler als Primär */
	--an-teal-600: var(--e-global-color-accent, #286C6E);
	--an-sand-400: var(--e-global-color-secondary, #C5B68C);
	--an-sand-500: #B6A67B; /* Hover dunkler als Sand */
	--an-sage-100: var(--e-global-color-ansage100, #DFEDE7);
	--an-mint-50: var(--e-global-color-anmint50, #F5FEFF);
	--an-cream-50: var(--e-global-color-ancream50, #F8F8F3);
	--an-white: var(--e-global-color-anwhite, #FFFFFF);
	--an-line: var(--e-global-color-anline, #CCD6CF);
	--an-muted: var(--e-global-color-text, #526563);
	--an-grey-600: var(--e-global-color-angrey600, #636361);
	--an-error: #9B3B32; /* gedämpftes Rot, 6.4:1 auf Creme */

	--an-font-serif: var(--e-global-typography-primary-font-family, "Lora"), Georgia, "Times New Roman", serif;
	--an-font-sans: var(--e-global-typography-text-font-family, "Manrope"), system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Abstandsskala */
	--an-space-1: 4px;
	--an-space-2: 8px;
	--an-space-3: 12px;
	--an-space-4: 16px;
	--an-space-5: 24px;
	--an-space-6: 32px;
	--an-space-7: 48px;
	--an-space-8: 64px;
	--an-space-9: 96px;
	--an-space-10: 128px;

	--an-radius-sm: 12px;
	--an-radius-md: 20px;
	--an-radius-lg: 28px;
	--an-radius-xl: 32px;
	--an-radius-pill: 999px;

	--an-dur-fast: 200ms;
	--an-dur: 300ms;
	--an-dur-slow: 400ms;
	--an-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Ebene 2: Semantisch ---------- */
:root {
	--an-bg-page: var(--an-cream-50);
	--an-bg-surface: var(--an-white);
	--an-bg-subtle: var(--an-sage-100);
	--an-bg-note: var(--an-mint-50);
	--an-bg-inverse: var(--an-green-900);
	--an-bg-inverse-soft: var(--an-green-800);

	--an-text: var(--an-green-800);
	--an-text-muted: var(--an-muted);
	--an-text-inverse: var(--an-cream-50);
	--an-text-accent-inverse: var(--an-sand-400);
	--an-link: var(--an-teal-600);
	--an-border: var(--an-line);
	--an-border-inverse: rgb(248 248 243 / 0.28);
	--an-focus: var(--an-teal-600);
	--an-focus-inverse: var(--an-sand-400);

	--an-shadow-soft: 0 18px 40px -24px rgb(9 39 42 / 0.35);
}

/* ---------- Ebene 3: Komponenten ---------- */
:root {
	--an-btn-height: 56px;
	--an-btn-pad-x: 36px;
	--an-btn-radius: var(--an-radius-pill);
	--an-header-height: 88px;
	--an-header-offset: var(--an-space-5);
	--an-header-space: calc(var(--an-header-height) + var(--an-header-offset));
	--an-card-radius: var(--an-radius-lg);
	--an-pattern-w: 312px; /* Kachel aus Figma, 624 px in doppelter Auflösung */
}

@media (max-width: 767px) {
	:root {
		--an-btn-height: 52px;
		--an-btn-pad-x: 28px;
		--an-header-height: 68px;
		--an-header-offset: var(--an-space-3);
		--an-card-radius: var(--an-radius-md);
		--an-pattern-w: 234px;
	}
}

/* ---------- Grundlagen ---------- */
/* Anker (#checkliste) nicht unter dem Sticky-Header verstecken */
html {
	scroll-padding-top: 24px;
}

body {
	background-color: var(--an-bg-page);
	color: var(--an-text-muted);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* OceanWP legt eigene weiße Flächen und Linien darüber */
#outer-wrap,
#wrap,
#main,
#content-wrap,
.content-area {
	background-color: transparent;
}

/* Clip statt hidden, damit der Sticky-Header funktioniert */
#outer-wrap,
#wrap {
	overflow: clip;
}

::selection {
	background-color: var(--an-sage-100);
	color: var(--an-green-900);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--an-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

:where(.an-inverse, .an-card-image) :where(a, button, summary, [tabindex]):focus-visible {
	outline-color: var(--an-focus-inverse);
}

/* Fließtext-Links: immer unterstrichen, damit sie ohne Farbe erkennbar sind */
.elementor-widget-text-editor a {
	color: var(--an-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--an-dur-fast) var(--an-ease);
}

.elementor-widget-text-editor a:hover {
	color: var(--an-green-800);
}

/* Überschriften nie zu breit */
.elementor-heading-title {
	text-wrap: balance;
}

.elementor-widget-text-editor p {
	text-wrap: pretty;
}

/* ---------- Buttons ---------- */
/* Grundform kommt aus den Website-Einstellungen (Primär, dunkelgrün). */
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--an-btn-height);
	padding-inline: var(--an-btn-pad-x);
	border-radius: var(--an-btn-radius);
	transition:
		background-color var(--an-dur) var(--an-ease),
		color var(--an-dur) var(--an-ease),
		border-color var(--an-dur) var(--an-ease),
		transform var(--an-dur-fast) var(--an-ease);
}

.elementor-button .elementor-button-icon {
	transition: transform var(--an-dur) var(--an-ease);
}

.elementor-button:hover .elementor-button-icon,
.elementor-button:focus-visible .elementor-button-icon {
	transform: translateX(4px);
}

.elementor-button:active {
	transform: scale(0.98);
}

/* Pfeil als Schriftzeichen (Manrope), wie im Entwurf. Klasse "an-arrow" am Button. */
.an-arrow .elementor-button-text::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.5em;
	transition: transform var(--an-dur) var(--an-ease);
}

.an-arrow .elementor-button:hover .elementor-button-text::after,
.an-arrow .elementor-button:focus-visible .elementor-button-text::after,
.an-card-image:hover .an-arrow .elementor-button-text::after {
	transform: translateX(4px);
}

/* Umrandet (z. B. "Erste Schritte") */
.an-btn-outline .elementor-button {
	background-color: transparent;
	color: var(--an-green-800);
	border: 1px solid var(--an-border);
}

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

/* Sand auf Dunkel (z. B. Karten, Footer) */
.an-btn-sand .elementor-button {
	background-color: var(--an-sand-400);
	color: var(--an-green-800);
}

.an-btn-sand .elementor-button:hover,
.an-btn-sand .elementor-button:focus-visible {
	background-color: var(--an-sand-500);
	color: var(--an-green-900);
}

/* Textlink mit Pfeil (z. B. "Ablauf ansehen"). Linie wächst von links. */
.an-btn-link .elementor-button {
	position: relative;
	min-height: 44px; /* Touch-Fläche */
	padding: 0;
	background-color: transparent;
	color: var(--an-link);
	border: 0;
	border-radius: 0;
}

.an-btn-link .elementor-button::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--an-dur) var(--an-ease);
}

.an-btn-link .elementor-button:hover,
.an-btn-link .elementor-button:focus-visible {
	background-color: transparent;
	color: var(--an-green-800);
}

.an-btn-link .elementor-button:hover::after,
.an-btn-link .elementor-button:focus-visible::after {
	transform: scaleX(1);
}

.an-btn-link.an-on-dark .elementor-button,
.an-inverse .an-btn-link .elementor-button {
	color: var(--an-text-inverse);
}

/* ---------- Flächen ---------- */
/* Helle Karte auf dunkler Fläche: Farben zurück auf dunkel */
.an-inverse .an-surface .elementor-heading-title,
.an-inverse .an-surface .elementor-widget-text-editor {
	color: var(--an-green-800);
}

.an-inverse .an-surface .an-btn-link .elementor-button {
	color: var(--an-link);
}

/* :where() hält die Spezifität bei 0. Farben aus dem Elementor-Editor gewinnen immer. */
:where(.an-surface) {
	background-color: var(--an-bg-surface);
	border-radius: var(--an-card-radius);
}

:where(.an-note) {
	background-color: var(--an-bg-note);
	border-radius: var(--an-radius-md);
}

:where(.an-note-grey) {
	background-color: var(--an-grey-600);
	color: var(--an-white);
	border-radius: var(--an-radius-sm);
}

.an-note-grey :where(.elementor-heading-title, p, li, .elementor-icon) {
	color: var(--an-white);
}

/* Dunkle Fläche: Hintergrund und helle Schrift. Überschreibt die Kit-Farben der Überschriften. */
:where(.an-inverse) {
	background-color: var(--an-bg-inverse);
	color: var(--an-text-inverse);
}

.an-inverse .elementor-heading-title,
.an-inverse .elementor-widget-text-editor {
	color: var(--an-text-inverse);
}

/* Sand als Akzent für Überschriften auf Dunkel (z. B. "Über Anadolu") */
.an-inverse .an-sand .elementor-heading-title,
.an-sand .elementor-heading-title {
	color: var(--an-sand-400);
}

/* Gedämpfter Text (Einleitungen, Hinweise) */
.an-muted,
.an-muted .elementor-widget-container {
	color: var(--an-text-muted);
}

/* Ornament auf dunklen Flächen. Sitzt unter dem Inhalt. */
.an-pattern {
	position: relative;
	isolation: isolate;
}

.an-pattern::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background-image: url("../img/ornament.png");
	background-size: var(--an-pattern-w) auto;
	background-repeat: repeat;
	opacity: 0.1;
}

/* Kleine Überzeile, sparsam einsetzen */
.an-eyebrow .elementor-heading-title {
	font-family: var(--an-font-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--an-teal-600);
}

.an-inverse .an-eyebrow .elementor-heading-title {
	color: var(--an-sand-400);
}

/* ---------- Bildkarten ---------- */
/*
 * Aufbau in Elementor:
 *   Container "an-card-image"
 *     Container "an-card-media" (nur Hintergrundbild)
 *     ... Inhalt (Überschrift, Text, Button)
 */
.an-card-image {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--an-card-radius);
	background-color: var(--an-green-800);
}

.an-card-image > .an-card-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	transition: transform var(--an-dur-slow) var(--an-ease);
}

/* Ton-in-Ton-Verlauf nach unten, damit Text lesbar ist */
.an-card-image::before,
.an-card-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.an-card-image::before {
	background: linear-gradient(180deg, rgb(14 44 47 / 0) 18%, rgb(14 44 47 / 0.78) 56%, rgb(14 44 47 / 0.96) 100%);
}

.an-card-image::after {
	background-color: rgb(9 39 42 / 0.16);
	opacity: 0;
	transition: opacity var(--an-dur-slow) var(--an-ease);
}

.an-card-image:hover > .an-card-media,
.an-card-image:focus-within > .an-card-media {
	transform: scale(1.03);
}

.an-card-image:hover::after,
.an-card-image:focus-within::after {
	opacity: 1;
}

.an-card-image .elementor-heading-title,
.an-card-image .elementor-widget-text-editor {
	color: var(--an-text-inverse);
}

/* ---------- Header ---------- */
.an-header {
	background-color: var(--an-bg-surface);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius-pill);
	min-height: var(--an-header-height);
}

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

.an-faq .e-n-accordion-item-title-icon {
	transition: transform var(--an-dur) var(--an-ease);
}

.an-faq .e-n-accordion-item[open] > .e-n-accordion-item-title + * {
	animation: an-open var(--an-dur) var(--an-ease);
}

@keyframes an-open {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

/* ---------- Einblenden beim Scrollen (einmalig) ---------- */
.an-js .an-reveal:not(.is-visible) {
	opacity: 0;
	transform: translateY(12px);
}

.an-js .an-reveal {
	transition:
		opacity var(--an-dur-slow) var(--an-ease),
		transform var(--an-dur-slow) var(--an-ease);
}

/* Im Elementor-Editor immer alles zeigen */
.elementor-editor-active .an-reveal {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.an-js .an-reveal:not(.is-visible) {
		opacity: 1;
		transform: none;
	}

	.an-card-image:hover > .an-card-media,
	.an-card-image:focus-within > .an-card-media {
		transform: none;
	}
}