/* ==========================================================================
   design.css – Gestaltung „Holz & Licht“ (von Kathrin gewählt, Okt. 2026)
   --------------------------------------------------------------------------
   Hell und luftig wie der Behandlungsraum; zartes Rosé als Grund, Honig vom
   Eichenboden als Akzent. Große, feine Überschriften in Jost, Abschnitte im
   Wechsel hell / Rosé-Sand, Fotos ohne Rahmen.
   Baut auf tokens.css, main.css und components.css auf und wird als letztes
   Stylesheet geladen.
   ========================================================================== */

body { font-size: 1.1875rem; } /* 19px – Jost läuft etwas kleiner */
h1, h2 { font-weight: 300; letter-spacing: -0.02em; }
h3 { font-weight: 450; }

.btn {
	border-radius: 0;
	min-height: 54px;
	padding-inline: var(--space-lg);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.9375rem;
}
.btn--primary:hover { background: var(--color-primary-hover); color: #fff; }

/* Kurze Honig-Linie über Abschnittstiteln – das wiederkehrende Ordnungszeichen */
.section__head h2,
.about__content h2,
.page-title,
.mit-linie { position: relative; padding-top: var(--space-lg); }
.section__head h2::before,
.about__content h2::before,
.page-title::before,
.mit-linie::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 2px;
	background: var(--color-honey);
}

/* Listen im Fließtext: kleine Honig-Striche statt Punkte */
.rich-text ul { list-style: none; padding-left: 0; }
.rich-text ul > li { position: relative; padding-left: 1.5em; margin-bottom: var(--space-2xs); }
.rich-text ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 0.8em;
	height: 1px;
	background: var(--color-honey);
}
.rich-text h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin-top: var(--space-xl); }
.rich-text h3 { font-size: var(--fs-400); margin-top: var(--space-lg); }
.rich-text > :first-child { margin-top: 0; }

/* =========================================================================
   HEADER
   ========================================================================= */
/* Menüleiste hebt sich vom Rosé-Grund ab: helleres Rosé, feine Linie, zarter Schatten */
.site-header {
	background: rgba(252, 246, 244, 0.97);
	border-bottom-color: var(--color-border-strong);
	box-shadow: 0 2px 14px rgba(46, 40, 35, 0.06);
}
.site-branding img { height: 60px; }
.site-nav__list a { font-size: 1.0625rem; font-weight: 400; letter-spacing: 0.01em; }
.site-nav__list a::after { background: var(--color-honey); }

/* =========================================================================
   STARTSEITE
   ========================================================================= */

/* Hero: große Zeile, darunter das Praxisfoto als Panorama */
.hero { padding-block: clamp(3rem, 7vw, 6.5rem) 0; overflow: hidden; }
.hero__inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
.hero__content { text-align: center; display: grid; justify-items: center; }
.hero__title { font-weight: 250; line-height: 1.02; letter-spacing: -0.03em; max-width: 16ch; }
.hero__text { max-width: 46ch; margin-inline: auto; }
.hero__actions { justify-content: center; }
.hero__media {
	order: 0;
	margin-inline: calc(-1 * (max(0px, (100vw - var(--container)) / 2) + var(--gutter)));
	overflow: hidden;
}
.hero__image {
	aspect-ratio: 21 / 9;
	max-height: 78vh;
	object-position: 50% 40%;
	border-radius: 0;
	box-shadow: none;
	animation: hero-ruhe 2.4s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hero-ruhe {
	from { transform: scale(1.06); opacity: 0.6; }
	to   { transform: scale(1); opacity: 1; }
}
@media (max-width: 860px) {
	.hero__media { order: 0; margin-inline: calc(-1 * var(--gutter)); }
	.hero__image { aspect-ratio: 4 / 3; object-position: 56% 30%; }
}

/* Leistungs-Karten (Startseite und Übersicht) */
.leistungen { padding-top: clamp(4rem, 9vw, 8rem); }
.card-grid { gap: clamp(2rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) {
	.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card-grid .card { position: relative; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.card-grid .card:hover { transform: none; box-shadow: none; }
.card-grid .card__media { overflow: hidden; }
.card-grid .card__media img { aspect-ratio: 3 / 4; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.card-grid .card:hover .card__media img { transform: scale(1.035); }
.card-grid .card__body { padding: var(--space-md) 0 0; border-top: 0; }
.card-grid .card__title { font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem); }
.card__link { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.875rem; font-weight: 500; }
/* ganze Karte klickbar */
.card-grid .card__link::after { content: ""; position: absolute; inset: 0; }

/* Leistung ohne Beitragsbild: ruhige Fläche mit dem Signet aus dem Logo */
.card__media--leer {
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	background: var(--color-bg-alt);
}
.section--alt .card__media--leer { background: var(--color-bg); }
.card__media--leer::before {
	content: "";
	width: 72px;
	height: 72px;
	background: var(--color-honey);
	-webkit-mask: url("../images/signet.png") center / contain no-repeat;
	mask: url("../images/signet.png") center / contain no-repeat;
	transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
}
.card-grid .card:hover .card__media--leer::before { transform: scale(1.08); }

@media (max-width: 640px) {
	.card-grid .card__media img,
	.card__media--leer { aspect-ratio: 4 / 3; }
}

/* Über mich / Ablauf (Bild + Text) */
.about__inner { gap: clamp(2.5rem, 7vw, 6rem); }
.about__image { aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }

/* =========================================================================
   TERMIN-BAND: Kasten in Rosé-Sand mit Abstand zum Abschnitt davor
   ========================================================================= */
.cta-band { padding-top: var(--space-section); }
.cta-band__inner {
	background: var(--color-bg-alt);
	color: var(--color-ink);
	border-radius: 0;
	padding: clamp(2.5rem, 6vw, 5rem);
}
.cta-band__title { color: var(--color-ink); font-size: var(--fs-600); }
.cta-band__text { color: var(--color-ink-soft); }
.cta-band .btn--primary { background: var(--color-primary-strong); color: #fff; }
.cta-band .btn--primary:hover { background: var(--color-primary-hover); color: #fff; }
.cta-band .btn--outline { color: var(--color-primary-strong); border-color: var(--color-border-strong); }
.cta-band .btn--outline:hover { background: var(--color-primary-tint); color: var(--color-primary-strong); }

/* =========================================================================
   FOOTER: klares Raster, einheitliche Schrift und Farben
   ========================================================================= */
.site-footer { background: var(--color-bg-alt); border-top: 0; }
.site-footer__inner {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
	column-gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	padding-block: clamp(3.5rem, 6vw, 5rem);
}
.site-footer__brand { align-self: start; } /* Logo oben bündig mit den Spaltentiteln */
.site-footer__brand img { height: 76px; }
.site-footer h2 {
	color: var(--color-primary-strong);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	padding-bottom: var(--space-xs);
	margin-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border-strong);
}
.site-footer address,
.site-footer .footer-list { font-size: 1.0625rem; }
.site-footer a,
.site-footer__nav a { color: var(--color-ink); }
.site-footer a:hover,
.site-footer__nav a:hover { color: var(--color-primary-strong); text-decoration: underline; }
.footer-contact__row svg { color: var(--color-honey); }
.site-footer .footer-hours li { grid-template-columns: 6em auto; }
.site-footer .footer-hours .day { color: var(--color-ink-soft); }
.site-footer__bottom { border-top-color: var(--color-border-strong); }
.site-footer__bottom-inner,
.site-footer__legal-list a { color: var(--color-ink-soft); }
@media (max-width: 1000px) {
	.site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.site-footer__inner { grid-template-columns: 1fr; }
}

/* =========================================================================
   UNTERSEITEN
   ========================================================================= */

/* Seitenkopf: große, feine Überschrift mit Honig-Linie, darunter ein Lead */
.page-hero {
	padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
	border-bottom: 0;
}
.page-title {
	font-weight: 250;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);
	line-height: 1.04;
	letter-spacing: -0.03em;
	max-width: 18ch;
	margin-bottom: 0;
}
.page-hero__lead,
.page-hero .section__intro {
	margin-top: var(--space-md);
	max-width: 52ch;
	font-size: var(--fs-400);
	line-height: var(--lh-snug);
	color: var(--color-ink-soft);
}
.breadcrumb {
	margin-bottom: var(--space-lg);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.breadcrumb a { color: var(--color-primary-strong); }

/* Zweispaltig: Titel links, Inhalt rechts */
.split {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--space-lg) clamp(2.5rem, 7vw, 6rem);
	align-items: start;
}
.split__head h2 { margin-bottom: var(--space-sm); }
.split__head p { color: var(--color-ink-soft); }
@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; }
}

/* Fakten / Info-Blöcke: offene Spalten mit Linie statt Kästen */
.info-blocks {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--space-xl) clamp(1.5rem, 3vw, 2.5rem);
}
.info-block {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--color-border-strong);
	border-radius: 0;
	box-shadow: none;
	padding: var(--space-md) 0 0;
}
.info-block h3 { font-size: var(--fs-400); font-weight: 450; margin-bottom: var(--space-xs); }
.info-block p { color: var(--color-ink-soft); }
.info-blocks + .info-blocks { margin-top: var(--space-xl); }

/* Ablauf-Schritte – echte Reihenfolge, daher nummeriert */
.steps {
	list-style: none;
	margin: var(--space-lg) 0 0;
	padding: 0;
	counter-reset: schritt;
	display: grid;
	gap: var(--space-md);
}
.steps li {
	counter-increment: schritt;
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border-strong);
}
.steps li::before {
	content: counter(schritt, decimal-leading-zero);
	grid-row: span 2;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.2;
	color: var(--color-primary-strong);
	font-variant-numeric: tabular-nums;
}
.steps strong { display: block; font-weight: 500; margin-bottom: var(--space-3xs); }
.steps span { color: var(--color-ink-soft); }

/* Checkliste „Bitte mitbringen“ */
.checkliste { margin-top: var(--space-xl); }
.checkliste h3 { font-size: var(--fs-400); }

/* Häufige Fragen: Aufklappen per <details> – ohne JavaScript */
.faq { border-top: 1px solid var(--color-border-strong); }
.faq details { border-bottom: 1px solid var(--color-border-strong); }
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) 0;
	font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);
	font-weight: 400;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--color-primary-strong), var(--color-primary-strong)) center / 100% 1.5px no-repeat,
		linear-gradient(var(--color-primary-strong), var(--color-primary-strong)) center / 1.5px 100% no-repeat;
	transition: transform var(--transition-base);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-primary-strong); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq__antwort { padding: 0 0 var(--space-md); max-width: 62ch; }
.faq__antwort p { color: var(--color-ink-soft); }
.faq__antwort > :last-child { margin-bottom: 0; }

/* Kontaktseite: offene Spalten statt Kästen */
.contact-grid { gap: var(--space-xl) clamp(2.5rem, 7vw, 6rem); }
.contact-grid .contact-card {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--color-border-strong);
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.contact-grid .contact-card .card__body { padding: var(--space-lg) 0 0; }
.contact-card h2 { font-size: var(--fs-500); }
.contact-list__row svg { color: var(--color-honey); }
.contact-list__row a { color: var(--color-ink); }
.contact-list__row a:hover { color: var(--color-primary-strong); }
.contact-hours { max-width: 340px; }
.contact-hours li { display: grid; grid-template-columns: 6em auto; column-gap: var(--space-sm); font-variant-numeric: tabular-nums; }
.contact-hours .day { color: var(--color-ink-soft); }

/* Leistungs-Detailseite: Bild links (mitlaufend), Text rechts */
.leistung__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: var(--space-xl) clamp(2.5rem, 7vw, 6rem);
	align-items: start;
}
.leistung__media { position: sticky; top: calc(var(--header-height) + var(--space-lg)); }
.leistung__media img,
.leistung__media .card__media--leer { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.leistung__layout .entry-content { max-width: 62ch; }
@media (max-width: 860px) {
	.leistung__layout { grid-template-columns: 1fr; }
	.leistung__media { position: static; }
	.leistung__media img,
	.leistung__media .card__media--leer { aspect-ratio: 4 / 3; }
}

/* Weitere Leistungen als ruhige Linkliste */
.weitere-leistungen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}
.weitere-leistungen a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-border-strong);
	color: var(--color-ink);
	text-decoration: none;
	font-size: var(--fs-400);
	font-weight: 300;
}
.weitere-leistungen a span { color: var(--color-primary-strong); transition: transform var(--transition-fast); }
.weitere-leistungen a:hover { color: var(--color-primary-strong); }
.weitere-leistungen a:hover span { transform: translateX(4px); }

/* Rechtstexte */
.legal-page .rich-text h2 { font-size: var(--fs-400); font-weight: 450; letter-spacing: 0; }

/* Kleinere Abstände und Ergänzungen */
.leistungen__alle { margin: var(--space-xl) 0 0; }
.fehlerseite__aktionen { justify-content: flex-start; margin-top: var(--space-lg); }
.contact-hinweis { margin-top: var(--space-md); color: var(--color-ink-soft); }
/* Termin-Band direkt nach hellem Abschnitt: kein doppelter Abstand */
.section:not(.section--alt) + .cta-band,
.page-hero + .cta-band { padding-top: 0; }
.contact-hours { list-style: none; padding: 0; }

/* Info-Blöcke neben einem Titel (split): untereinander statt verwaister Spalten */
.split .info-blocks { grid-template-columns: 1fr; gap: var(--space-lg); }
/* Vier Blöcke über volle Breite: 2 × 2 statt 3 + 1 */
@media (min-width: 760px) {
	.info-blocks:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Grundsätze („Meine Philosophie“) – keine Reihenfolge, daher ohne Nummern */
.grundsaetze { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.grundsaetze li { padding-top: var(--space-md); border-top: 1px solid var(--color-border-strong); }
.grundsaetze strong { display: block; font-weight: 500; margin-bottom: var(--space-3xs); }
.grundsaetze span { color: var(--color-ink-soft); }
.grundsaetze__schluss { margin-top: var(--space-lg); }