/* ============================================================
   Designsystem „MORGENLUFT" · Praxis Daniela Fußhöller
   (Kadence Child, v2)
   ------------------------------------------------------------
   Leicht & luftig: Weiß + Nebelgrün + Eukalyptus + Aprikosen-
   Akzent. Cormorant Garamond (Display) + Mulish (Text).
   Signatur: der Atemkreis – eine feine Kreislinie hinter Fotos
   und um die Erstgespräch-Einladung.
   Stylt alle Klassen, die der Content-Importer vergibt (df-*).
   ============================================================ */

:root {
	--df-luft:      var(--global-palette8, #FCFCFA);
	--df-nebel:     var(--global-palette6, #F2F5F2);
	--df-linie:     #E5E9E5;
	--df-euka:      var(--global-palette1, #5E8272);
	--df-euka-tief: var(--global-palette2, #3F6355);
	--df-tinte:     var(--global-palette3, #2C3733);
	--df-text:      var(--global-palette4, #3E4A45);
	--df-grau:      #5A665F;
	--df-apricot:   var(--global-palette5, #E9BA9C);
	--df-weiss:     var(--global-palette9, #FFFFFF);

	--df-display: "Cormorant Garamond", Georgia, serif;
	--df-body:    "Mulish", system-ui, sans-serif;

	--df-r: 22px;
}

/* ---------- Basistypografie ---------- */
body {
	font-family: var(--df-body);
	color: var(--df-text);
	background-color: var(--df-luft);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.site-title {
	font-family: var(--df-display);
	font-weight: 500;
	letter-spacing: 0.005em;
	color: var(--df-tinte);
	line-height: 1.14;
}

h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--df-euka); }

/* Vorzeile (Eyebrow) */
.df-eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--df-euka-tief);
	font-weight: 700;
}

.df-lead { font-size: 1.14rem; color: var(--df-grau); }

/* ---------- Buttons & Links ---------- */
.wp-block-button__link,
.button, button[type="submit"] {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.df-mehr {
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.04em;
	color: var(--df-euka-tief);
	text-decoration: none;
	border-bottom: 1px solid var(--df-linie);
	padding-bottom: 0.15rem;
}
.df-mehr:hover { border-color: var(--df-euka-tief); }
.df-mehr::after { content: "  \2192"; }

/* ---------- Foto-Platzhalter ----------
   Leicht statt Fläche: Nebelgrund + feine Punktlinie.
   Echte Fotos: einfach ein Bild in die Gruppe ziehen –
   Punktlinie und Beschriftung verschwinden automatisch. */
.df-foto {
	position: relative;
	background: var(--df-nebel);
	border: 1.5px dotted #C9D2CA;
	border-radius: var(--df-r);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 280px;
}
.df-foto p {
	font-size: 0.76rem;
	letter-spacing: 0.05em;
	color: #7C877F;
	background: rgba(252, 252, 250, 0.94);
	padding: 0.4rem 0.9rem;
	border-radius: 9px 9px 0 0;
	margin: 0;
	text-align: center;
	max-width: 88%;
}
.df-foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.df-foto:has(img) { border: none; background: none; }
.df-foto:has(img) p { display: none; }

/* Formen: „Bogen" trägt jetzt die Signatur – den Atemkreis */
.df-foto-bogen { border-radius: var(--df-r); }
.df-foto-bogen::before {
	content: "";
	position: absolute;
	width: 128%;
	aspect-ratio: 1;
	border: 1px solid var(--df-linie);
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.df-foto-bogen::after {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--df-apricot);
	right: 5%;
	top: 3%;
	pointer-events: none;
}
.df-foto-rund     { border-radius: var(--df-r); }
.df-foto-portrait { aspect-ratio: 4 / 5; }
.df-foto-quer     { aspect-ratio: 4 / 3; }

/* ---------- Sektionen ---------- */
.df-sektion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.df-sektion-hell {
	background: var(--df-luft);
	border-block: 1px solid var(--df-linie);
}

/* Ehemals dunkelgrüner Block – in „Morgenluft" heller Nebel */
.df-sektion-gruen {
	background: var(--df-nebel);
	color: var(--df-text);
}
.df-sektion-gruen h1, .df-sektion-gruen h2, .df-sektion-gruen h3 { color: var(--df-tinte); }
.df-sektion-gruen .df-eyebrow { color: var(--df-euka-tief); }

/* Erstgespräch-CTA: weiß & offen, gerahmt vom Atemkreis */
.df-sektion-cta {
	position: relative;
	overflow: hidden;
	background: var(--df-luft);
	text-align: center;
	padding-block: clamp(4.5rem, 10vw, 8rem);
	border-top: 1px solid var(--df-linie);
}
.df-sektion-cta::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(880px, 140vw);
	aspect-ratio: 1;
	border: 1px solid var(--df-linie);
	border-radius: 50%;
	pointer-events: none;
}
.df-sektion-cta > * { position: relative; }

/* ---------- Karten & Kacheln (luftig: Haarlinie statt Fläche) ---------- */
.df-kachel {
	background: var(--df-weiss);
	border: 1px solid var(--df-linie);
	border-radius: var(--df-r);
	padding: 1.4rem 1.4rem 1.8rem;
	height: 100%;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.df-kachel:hover {
	border-color: var(--df-euka);
	box-shadow: 0 14px 34px rgba(44, 55, 51, 0.07);
}
.df-kachel .df-foto { aspect-ratio: 4 / 3; margin-bottom: 1.3rem; min-height: 0; }
.df-kachel h3 { margin-bottom: 0.4rem; }

.df-infokarte {
	background: var(--df-weiss);
	border: 1px solid var(--df-linie);
	border-radius: var(--df-r);
	padding: 1.8rem;
}

.df-hinweis {
	background: var(--df-nebel);
	border-radius: var(--df-r);
	padding: 1.5rem 1.7rem;
	font-size: 0.94rem;
	color: var(--df-grau);
}
.df-hinweis strong { color: var(--df-tinte); }

/* Methoden-Zeilen (Bereichsseiten): Listenzeile mit Haarlinien */
.df-methodenzeile {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--df-linie);
	border-radius: 0;
	padding: 2rem 0.25rem;
	margin-bottom: 0;
	transition: padding-left 0.25s ease;
}
.df-methodenzeile:last-of-type { border-bottom: 1px solid var(--df-linie); }
.df-methodenzeile:hover { padding-left: 0.6rem; }
.df-methodenzeile .df-alter {
	font-family: var(--df-display);
	font-style: italic;
	color: var(--df-euka-tief);
	font-size: 1.05rem;
	margin-bottom: 0.2rem;
}
.df-methodenzeile h3 { font-size: 1.45rem; margin-bottom: 0.3rem; }

/* ---------- Barrierefreiheit & Feinschliff ---------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2.5px solid var(--df-euka-tief);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.df-kachel, .df-methodenzeile { transition: none; }
	.df-methodenzeile:hover { padding-left: 0.25rem; }
}

@media (max-width: 781px) {
	.df-sektion { padding-block: 2.75rem; }
	.df-foto { min-height: 220px; }
	.df-foto-bogen::before { display: none; } /* Kreis mobil ausblenden – kein Overflow */
}