/* =========================================================================
   Physiotherapie Neue Heimat — Component Layer
   Design Tokens leben in theme.json. Diese Datei portiert nur die
   Komponenten- und Utility-Schichten aus dem Prototyp (design-prototype/styles.css).
   ========================================================================= */

/* ---------------------------------------------------------------
   Alias-Map: prototype-Kurznamen → WordPress-Preset-CSS-Variablen.
   So bleibt der Code aus dem Prototyp 1:1 portierbar.
   --------------------------------------------------------------- */
:root {
	--sage:           var(--wp--preset--color--sage);
	--sage-dark:      var(--wp--preset--color--sage-dark);
	--sage-soft:      var(--wp--preset--color--sage-soft);
	--sage-tint:      var(--wp--preset--color--sage-tint);
	--ink:            var(--wp--preset--color--ink);
	--ink-soft:       var(--wp--preset--color--ink-soft);
	--muted:          var(--wp--preset--color--muted);
	--muted-soft:     var(--wp--preset--color--muted-soft);
	--bg:             var(--wp--preset--color--bg);
	--surface:        var(--wp--preset--color--surface);
	--surface-soft:   var(--wp--preset--color--surface-soft);
	--canvas:         var(--wp--preset--color--canvas);
	--hairline:       var(--wp--preset--color--hairline);
	--hairline-soft: var(--wp--preset--color--hairline-soft);
	--on-dark:        var(--wp--preset--color--on-dark);
	--warn:           var(--wp--preset--color--warn);
	--success:        var(--wp--preset--color--success);

	--font-display:  var(--wp--preset--font-family--manrope);
	--font-body:     var(--wp--preset--font-family--inter);
	--font-serif:    var(--wp--preset--font-family--source-sans-3);

	--sp-1:  var(--wp--preset--spacing--1);
	--sp-2:  var(--wp--preset--spacing--2);
	--sp-3:  var(--wp--preset--spacing--3);
	--sp-4:  var(--wp--preset--spacing--4);
	--sp-5:  var(--wp--preset--spacing--5);
	--sp-6:  var(--wp--preset--spacing--6);
	--sp-7:  var(--wp--preset--spacing--7);
	--sp-8:  var(--wp--preset--spacing--8);
	--sp-9:  var(--wp--preset--spacing--9);
	--sp-10: var(--wp--preset--spacing--10);
	--sp-section:    var(--wp--preset--spacing--section);
	--sp-section-sm: var(--wp--preset--spacing--section-sm);

	--r-sm:   var(--wp--custom--radii--sm);
	--r-md:   var(--wp--custom--radii--md);
	--r-lg:   var(--wp--custom--radii--lg);
	--r-xl:   var(--wp--custom--radii--xl);
	--r-pill: var(--wp--custom--radii--pill);

	--shadow-soft: var(--wp--preset--shadow--soft);
	--shadow-card: var(--wp--preset--shadow--card);
	--shadow-lift: var(--wp--preset--shadow--lift);

	--container:        1240px;
	--container-narrow: 880px;
}

/* =========================================================================
   Layout primitives
   ========================================================================= */
.container         { max-width: var(--container);        margin: 0 auto; padding: 0 var(--sp-5); }
.container-narrow  { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--sp-5); }
.section           { padding: var(--sp-section, 112px) 0; }
.section-sm        { padding: var(--sp-section-sm, 72px) 0; }
.section-tint      { background: var(--sage-tint); }
.section-surface   { background: var(--surface-soft); }

.eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--sage-dark);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.eyebrow::before {
	content: "";
	width: 24px; height: 1.5px;
	background: var(--sage-dark);
	display: inline-block;
}

.lede {
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.55;
	color: var(--muted);
	max-width: 56ch;
}

/* =========================================================================
   Top navigation
   ========================================================================= */
.topnav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: rgba(250, 250, 247, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--hairline-soft);
}
.topnav .row {
	display: flex; align-items: center; justify-content: flex-start;
	height: 108px;
}
.brand {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-display); font-weight: 700;
	font-size: 17px; letter-spacing: -0.015em;
	color: var(--ink);
	text-decoration: none;
}
.brand-logo {
	width: auto; height: 40px;
	max-width: 200px;
	object-fit: contain;
	flex-shrink: 0;
}
.brand-icon {
	width: auto; height: 120px;
	flex-shrink: 0;
	object-fit: contain;
}
.brand-wordmark {
	width: auto; height: 80px;
	flex-shrink: 0;
	object-fit: contain;
	margin: 5px 25px 5px -25px;
}
.brand .mark {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--sage);
	display: flex; align-items: center; justify-content: center;
	color: var(--on-dark);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: -0.02em;
}
.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.brand-name {
	font-weight: 700;
}
.brand small, .brand-city {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	color: var(--muted);
	letter-spacing: 0;
	margin-top: 2px;
}

.topnav .menu {
	display: flex; gap: 28px;
}
.topnav nav.wp-block-navigation {
	display: flex;
	align-items: center;
	align-self: center;
	padding-left: 0;
	margin-block-start: 0;
}
.topnav .wp-block-navigation__container {
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 18px !important;
}
.topnav .menu a,
.topnav .wp-block-navigation a.wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-soft);
	padding: 8px 2px;
	border-radius: 0;
	transition: color 200ms ease;
	text-decoration: none;
}
.topnav .menu a:hover,
.topnav .wp-block-navigation a.wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--sage-dark);
}
.topnav .menu a.active,
.topnav .wp-block-navigation .current-menu-item > a {
	color: var(--sage-dark);
}

.topnav .right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topnav .row > a.btn { margin-left: auto; margin-block-start: 0; }
.topnav .lang {
	font-size: 13px; font-weight: 600;
	color: var(--muted);
	padding: 6px 10px;
	border: 1px solid var(--hairline);
	border-radius: var(--r-sm);
	background: transparent;
	font-family: var(--font-body);
	cursor: pointer;
}

@media (max-width: 960px) {
	.topnav .menu,
	.topnav .wp-block-navigation > .wp-block-navigation__container { display: none; }


    /* Show hamburger button and hide nav links between 601px-960px */
    .topnav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
    .topnav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
    .topnav .wp-block-navigation__responsive-container-close { display: flex; }
    /* Mobile menu overlay fills full viewport */
    .topnav .wp-block-navigation__responsive-container.is-menu-open { height: 100dvh !important; min-height: 100dvh !important; }
	/* Mobile: logo almost full width, hamburger on right edge */
	.topnav .row { justify-content: space-between; }
	.topnav .row .brand { flex: 1; max-width: calc(100% - 56px); }
	.topnav .row > nav.wp-block-navigation { flex-shrink: 0; }
}

/* =========================================================================
   Buttons (raw <a class="btn"> markup — Core-Button-Block lebt in theme.json)
   ========================================================================= */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1;
	padding: 14px 22px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition:
		background 200ms ease,
		color 200ms ease,
		transform 220ms cubic-bezier(.2, .7, .2, 1),
		box-shadow 240ms ease;
}
.btn-primary { background: var(--ink);  color: var(--on-dark); }
.btn-primary:hover { background: var(--sage-dark); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(46, 51, 44, .35); }
.btn-primary:active { transform: translateY(1px); }

.btn-sage { background: var(--sage); color: var(--on-dark); }
.btn-sage:hover { background: var(--sage-dark); transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(46, 51, 44, .35); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--ink); background: var(--canvas); transform: translateY(-1px); }

.btn-text { background: transparent; color: var(--ink); padding: 14px 6px; }
.btn-text:hover { color: var(--sage-dark); }
.btn-text .arrow { transition: transform 160ms; }
.btn-text:hover .arrow { transform: translateX(4px); }

.btn-lg { padding: 18px 28px; font-size: 15.5px; }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }

/* =========================================================================
   Image placeholder
   ========================================================================= */
.imgph {
	background: var(--sage-tint);
	border-radius: var(--r-lg);
	display: flex; align-items: center; justify-content: center;
	color: var(--sage-dark);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.imgph::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--sage) 28%, transparent) 0, transparent 38%),
		radial-gradient(circle at 80% 70%, color-mix(in oklab, var(--sage-dark) 22%, transparent) 0, transparent 42%),
		linear-gradient(135deg, var(--sage-tint), var(--sage-soft));
	z-index: -1;
}
.imgph .ph-label {
	background: rgba(255, 255, 255, 0.65);
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font-size: 12px;
	color: var(--sage-dark);
	border: 1px solid rgba(122, 133, 104, 0.2);
	backdrop-filter: blur(6px);
}
.imgph-photo {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(46, 51, 44, 0.18) 100%),
		radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--sage) 35%, var(--canvas)) 0, transparent 28%),
		linear-gradient(140deg, var(--sage-tint), var(--surface) 75%);
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
	background: var(--canvas);
	border: 1px solid var(--hairline-soft);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	transition:
		transform 320ms cubic-bezier(.2, .7, .2, 1),
		border-color 220ms ease,
		box-shadow 320ms ease,
		background 220ms ease;
}
.card:hover {
	transform: translateY(-4px);
	border-color: var(--sage);
	box-shadow: var(--shadow-lift);
}
.card-soft {
	background: var(--surface-soft);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	transition: background 240ms ease, transform 280ms cubic-bezier(.2, .7, .2, 1);
}
.card-soft:hover { background: var(--sage-tint); }
.card-tint {
	background: var(--sage-tint);
	border-radius: var(--r-lg);
	padding: var(--sp-6);
	transition: background 240ms ease;
}
.card-tint:hover { background: color-mix(in oklab, var(--sage-tint), var(--sage) 18%); }

/* =========================================================================
   Hover-Animationen — physioconcept-Stil
   ========================================================================= */
.card .imgph,
.card-soft .imgph,
a.imgph,
.imgph { overflow: hidden; position: relative; }
.imgph > * { transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.card:hover .imgph > *,
.card-soft:hover .imgph > *,
a:hover .imgph > * { transform: scale(1.045); }

.hover-underline,
.topnav .menu a,
.footer a,
a.sage,
.link {
	position: relative;
	display: inline-block;
}
.hover-underline::after,
.topnav .menu a::after,
.footer a::after,
a.sage::after,
.link::after {
	content: "";
	position: absolute;
	left: 0; right: auto;
	bottom: -2px;
	height: 1.5px;
	width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 360ms cubic-bezier(.2, .7, .2, 1);
}
.hover-underline:hover::after,
.topnav .menu a:hover::after,
.footer a:hover::after,
a.sage:hover::after,
.link:hover::after { transform: scaleX(1); }
.topnav .menu a.active::after { transform: scaleX(1); }

.arrow-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--ink);
	font-weight: 600;
	font-size: 15px;
	position: relative;
	text-decoration: none;
}
.arrow-link .arrow { display: inline-flex; transition: transform 280ms cubic-bezier(.2, .7, .2, 1); }
.arrow-link:hover { color: var(--sage-dark); }
.arrow-link:hover .arrow { transform: translateX(6px); }

.tile-hover {
	position: relative;
	transition: background 320ms ease, color 240ms ease;
	overflow: hidden;
}
.tile-hover::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--sage);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
}
.tile-hover:hover::before { transform: scaleY(1); }
.tile-hover:hover { background: var(--sage-tint); }

.card .eyebrow,
.card-soft .eyebrow {
	transition: transform 320ms cubic-bezier(.2, .7, .2, 1), color 220ms ease;
	display: inline-block;
}
.card:hover .eyebrow,
.card-soft:hover .eyebrow {
	transform: translateX(4px);
	color: var(--sage-dark);
}

.card .feature > div:first-child {
	transition:
		transform 320ms cubic-bezier(.2, .7, .2, 1),
		background 220ms ease;
}
.card:hover .feature > div:first-child { transform: scale(1.06) rotate(-2deg); }

.card h3,
.card h4,
.card-soft h3,
.card-soft h4 { transition: color 220ms ease; }
.card:hover h3,
.card:hover h4,
.card-soft:hover h3,
.card-soft:hover h4 { color: var(--sage-dark); }

@media (prefers-reduced-motion: reduce) {
	.card, .card-soft, .card-tint, .imgph > *,
	.hover-underline::after, .topnav .menu a::after, .footer a::after, a.sage::after, .link::after,
	.arrow-link .arrow, .tile-hover, .tile-hover::before,
	.card .eyebrow, .card-soft .eyebrow,
	.card .feature > div:first-child,
	.card h3, .card h4, .card-soft h3, .card-soft h4,
	.btn {
		transition: none !important;
	}
	.card:hover { transform: none !important; }
}

/* Feature item */
.feature { display: flex; flex-direction: column; gap: 14px; }
.feature .num {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--sage-dark);
	letter-spacing: 0;
}
.feature h3 { font-size: 22px; }
.feature p  { font-size: 15.5px; }

/* =========================================================================
   Lists
   ========================================================================= */
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li {
	display: flex; gap: 12px; align-items: flex-start;
	font-size: 15.5px; color: var(--ink-soft);
}
.checklist .dot {
	flex: 0 0 6px; width: 6px; height: 6px;
	border-radius: 50%; background: var(--sage);
	margin-top: 9px;
}
.checklist .check { flex-shrink: 0; color: var(--sage-dark); margin-top: 2px; }

/* wp:list.checklist — nativne Listenblöcke ohne SVG-Icon */
.wp-block-list.checklist {
	list-style: none; padding: 0 !important; margin: 0;
	display: flex; flex-direction: column; gap: 12px;
}
.wp-block-list.checklist li {
	display: flex; gap: 10px; align-items: flex-start;
	font-size: 15px; color: var(--ink-soft);
	padding-left: 0;
}
.wp-block-list.checklist li::before {
	content: "";
	flex-shrink: 0;
	width: 18px; height: 18px;
	margin-top: 1px;
	background-color: var(--sage-dark);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain; mask-size: contain;
}
.wp-block-list.checklist-dark li { color: rgba(250,250,247,0.75); }
.wp-block-list.checklist-dark li::before { background-color: var(--sage-soft); }

/* Heading em — kursiver Akzent in Hero-Patterns */
h1 em, .h1 em { font-style: italic; font-weight: 400; color: var(--sage-dark); }

.numlist { display: grid; gap: 0; }
.numlist > .row-item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 32px 0;
	border-top: 1px solid var(--hairline);
}
.numlist > .row-item:last-child { border-bottom: 1px solid var(--hairline); }
.numlist .ix {
	font-family: var(--font-display);
	font-size: 15px; font-weight: 600;
	color: var(--muted);
	letter-spacing: 0;
}
.numlist h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 600; }
.numlist p  { font-size: 15.5px; color: var(--muted); margin-top: 4px; max-width: 60ch; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer {
	background: var(--ink);
	color: rgba(250, 250, 247, 0.7);
	padding: var(--sp-9) 0 var(--sp-5);
	margin-top: 0;
}
.footer h4 {
	color: var(--on-dark);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 14px;
}
.footer a {
	color: rgba(250, 250, 247, 0.7);
	display: block;
	padding: 4px 0;
	font-size: 14px;
	text-decoration: none;
}
.footer a:hover { color: var(--on-dark); }
.footer .grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
}
.footer .brand            { color: var(--on-dark); display: inline-flex; padding: 0; }
.footer .brand-logo { filter: brightness(0) invert(1) opacity(0.9); }
.brand-logo-footer { width: 56px; height: 56px; margin-top: -7px; }
.footer .brand small      { color: rgba(250, 250, 247, 0.55); }
.footer .bottom {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex; justify-content: space-between;
	font-size: 13px; color: rgba(250, 250, 247, 0.4);
}
.footer .bottom a { display: inline; padding: 0; }
.footer .footer-tagline {
	color: rgba(250, 250, 247, 0.55);
	font-size: 14px;
	margin-top: 16px;
	max-width: 320px;
}
.footer .footer-address {
	color: rgba(250, 250, 247, 0.7);
	font-size: 14px;
	line-height: 1.7;
}
.footer .footer-legal { display: flex; gap: 24px; }
.footer .wp-block-column { --wp--style--block-gap: 0; }
.footer .wp-block-column > * + *,
.footer .wp-block-column.is-layout-flow > * + *,
.footer .wp-block-column > .is-layout-flow > * + * { margin-block-start: 0 !important; }
.footer .wp-block-column > .wp-block-paragraph,
.footer .wp-block-column > .is-layout-flow > .wp-block-paragraph { margin-block-start: 0; margin-block-end: 0; padding: 4px 0; }
.footer .footer-nav .wp-block-navigation__container { flex-direction: column; gap: 0; }
.footer .footer-nav .wp-block-navigation-item { margin: 0; }
.footer .footer-nav .wp-block-navigation-item__content { padding: 4px 0; }
.footer .footer-legal-nav,
.footer .footer-legal-nav.wp-block-navigation__container { flex-direction: row; gap: 24px; margin: 0; padding: 0; list-style: none; }
.footer .footer-legal-nav .wp-block-navigation-item__content { display: inline; padding: 0; font-size: 13px; color: rgba(250,250,247,0.4); }
.footer .footer-legal-nav .wp-block-navigation-item__content:hover { color: rgba(250,250,247,0.7); }
.footer .bottom.wp-block-group { align-items: center; }
.footer .bottom > * { margin-block-start: 0 !important; margin-top: 0 !important; }
.footer .bottom > .wp-block-paragraph { margin: 0; }

/* =========================================================================
   Pattern Helpers — block-validation-safe CSS classes
   ========================================================================= */

/* Flex step rows (Ablauf + Wahlarzt-Rückerstattung) */
.step-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 0;
}
.step-row + .step-row { border-top: 1px solid var(--hairline); }
.step-row h4 { font-size: 17px; margin-top: 0; margin-bottom: 4px; }
.step-row p  { font-size: 15px; margin-top: 0; margin-bottom: 0; }

/* Testimonials */
.author-row { display: flex; gap: 12px; align-items: center; }
.card-quote { font-size: 16px; line-height: 1.55; margin-top: 14px; margin-bottom: 20px; }
.author-name { font-weight: 600; font-size: 14px; margin-top: 0; margin-bottom: 2px; }
.author-role { font-size: 12px; margin-top: 0; margin-bottom: 0; color: var(--muted); }

/* Section preview header rows */
.preview-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 48px;
	margin-bottom: 64px;
	flex-wrap: wrap;
}
.preview-title { max-width: 18ch; margin-top: 20px; margin-bottom: 0; }

/* CTA section */
.cta-box { background-color: var(--ink); border-radius: 28px; padding: 80px 64px; }
.cta-title {
	color: var(--on-dark);
	font-size: clamp(32px, 3.8vw, 48px);
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.10;
	margin-top: 0;
	margin-bottom: 16px;
	max-width: 16ch;
}
.cta-lede { color: rgba(250, 250, 247, 0.7); font-size: 17px; line-height: 1.55; max-width: 50ch; }

/* Hero editorial */
.hero-editorial { padding-top: 96px; padding-bottom: 64px; }
.editorial-wrapper { display: flex; flex-direction: column; align-items: center; }
.hero-editorial h1 {
	font-size: clamp(48px, 7vw, 96px);
	letter-spacing: -0.03em;
	line-height: 1.04;
	margin-top: 28px;
	margin-bottom: 24px;
	max-width: 16ch;
}
.hero-editorial .lede { max-width: 620px; margin-top: 0; margin-bottom: 36px; }
.hero-editorial-img { border-radius: 24px; aspect-ratio: 21/9; overflow: hidden; margin: 0; }
.hero-editorial-img img { width: 100%; height: 100%; object-fit: cover; }

/* Hero split */
.hero-split { padding-top:46px; padding-bottom: 80px; }
.hero-split-cols { gap: 80px; }
.hero-split h1 { font-size: clamp(40px, 5.5vw, 72px); letter-spacing: -0.03em; line-height: 1.08; margin-top: 24px; margin-bottom: 24px; max-width: 16ch; }
.stats-row { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 48px; }
.stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-top: 0; margin-bottom: 2px; }

/* Hero magazine */
.hero-magazine { background-color: var(--sage-tint); padding: 0; margin-top: 0; }
.hero-magazine-cols { gap: 0; }

/* Philosophie section */
.philosophie-cols { gap: 96px; }
.philosophie-cols h2 { font-size: var(--wp--preset--font-size--h-2); }
.philosophie-cols .checklist { margin-top: 20px; }
.philosophie-lead { font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; }

/* Standort section */
.standort-cols { gap: 64px; }
.standort-lead { font-size: 17px; margin-bottom: 28px; }

/* Pricing section */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pricing-card { display: flex; flex-direction: column; gap: 18px; }
.pricing-card-dark { background-color: var(--ink); color: var(--on-dark); position: relative; }
.pricing-card-dark .card-title { color: var(--on-dark); }
.pricing-card-dark .price-tag { color: var(--on-dark); }
.pricing-card-dark .muted { color: rgba(250, 250, 247, 0.6); }
.pricing-badge { position: absolute; top: -12px; left: 24px; background: var(--sage); color: var(--on-dark); font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.pricing-divider { border: none; border-top: 1px solid var(--hairline); margin: 0; }
.pricing-card-dark .pricing-divider { border-top-color: rgba(255, 255, 255, 0.1); }
.pricing-duration { font-size: 13px; margin-top: 0; margin-bottom: 0; }
.wahlarzt-title { margin-top: 20px; margin-bottom: 20px; }

/* Team full section */
.team-bio { font-size: 17px; color: var(--ink-soft); margin-bottom: 24px; max-width: 52ch; }
.team-section-h2 { font-size: clamp(32px, 3.4vw, 44px); margin-top: 20px; margin-bottom: 20px; }

/* Über uns section */
.ueber-uns-cols { gap: 80px; }
.ueber-uns-lead { font-size: 18px; color: var(--ink-soft); margin-bottom: 20px; }
.werte-h2 { margin-top: 20px; margin-bottom: 56px; max-width: 20ch; }
.werte-num { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--sage-dark); margin-top: 0; margin-bottom: 16px; }
.werte-h3 { font-size: 22px; margin-top: 0; margin-bottom: 10px; }
.werte-text { font-size: 15px; margin-top: 0; }

/* Team preview cards */
.team-card .wp-block-image { border-radius: 16px; aspect-ratio: 3/4; overflow: hidden; }
.team-card .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.team-name {
	font-size: 19px;
	font-weight: 600;
	font-family: var(--font-display);
	margin-top: 16px;
	margin-bottom: 0;
}
.team-role     { font-size: 13px; margin-top: 4px; margin-bottom: 0; }
.team-statement { font-size: 14px; color: var(--ink-soft); margin-top: 8px; margin-bottom: 0; }

/* Section headings with max-width constraints */
.section-testimonials h2 { max-width: 20ch; }

/* Service card grid (Leistungen Preview) */
.leistungen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-num {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--sage-dark);
	margin-top: 14px;
	margin-bottom: 0;
}

/* Pricing cards */
.card-title { font-size: 16px; font-weight: 600; margin-top: 0; margin-bottom: 4px; }
.price-tag {
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

/* Page hero */
.page-hero {
	padding: 14px 0 32px;
	border-bottom: 1px solid var(--hairline-soft);
}
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(36px, 4vw, 56px); margin-top: 8px; margin-bottom: 18px; max-width: 18ch; }
.page-hero p  { font-size: 18px; max-width: 60ch; color: var(--muted); }

/* =========================================================================
   Utilities
   ========================================================================= */
.stack          { display: flex; flex-direction: column; }
.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 12px; }
.stack-4 > * + * { margin-top: 16px; }
.stack-5 > * + * { margin-top: 24px; }
.stack-6 > * + * { margin-top: 32px; }
.row { display: flex; align-items: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 24px; } .gap-6 { gap: 32px; }
.muted  { color: var(--muted); }
.ink    { color: var(--ink); }
.sage   { color: var(--sage-dark); }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

.badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 500;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--sage-tint);
	color: var(--sage-dark);
	border: 1px solid color-mix(in oklab, var(--sage) 18%, transparent);
}
.divider { height: 1px; background: var(--hairline); width: 100%; }

/* =========================================================================
   Mobile breakpoints
   ========================================================================= */
@media (max-width: 960px) {
	.hide-mobile { display: none !important; }
}

@media (max-width: 760px) {
	:root {
		--sp-section:    64px;
		--sp-section-sm: 48px;
	}
	.container, .container-narrow { padding: 0 20px; }
	.topnav .row { height: auto; min-height: 64px; }
	.brand small { display: none; }
	.topnav .lang { display: none; }
	.brand-icon { height: 60px; }
	.brand-wordmark { height: 42px; margin: 3px 15px 3px -18px; }

	[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.section    { padding: 64px 0 !important; }
	.section-sm { padding: 48px 0 !important; }
	.page-hero  { padding: 56px 0 32px !important; }

	.section h1[style*="clamp(48px"] { font-size: 40px !important; }
	.section h1[style*="clamp(44px"] { font-size: 38px !important; }

	.numlist > .row-item {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
		padding: 24px 0 !important;
	}
	.numlist > .row-item > div[style*="width: 64px"] {
		width: 48px !important; height: 48px !important;
		order: -1;
	}

	.card { padding: 24px !important; }
	.row.gap-6, .row.gap-5 { flex-wrap: wrap; }
	[style*="position: sticky"] { position: static !important; }

	.footer { padding: 48px 0 24px; }
	.footer .grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
	.footer .bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

	.container.row[style*="gap: 48"] { gap: 16px !important; }
	/* Fix outer header offset for smaller topnav height */
	.wp-site-blocks > .wp-block-template-part:first-child { margin-top: 64px; }
}

@media (max-width: 480px) {
	.footer .grid { grid-template-columns: 1fr !important; }
	.brand        { font-size: 15px; }
	.brand-logo { width: 32px; height: 32px; }
	.brand-icon { height: 48px; }
	.brand-wordmark { height: 34px; margin: 2px 10px 2px -14px; }
	h1            { font-size: 32px !important; }
	.btn-lg       { padding: 14px 18px; font-size: 14.5px; }
}

/* Compensate for fixed header */
.wp-site-blocks > .wp-block-template-part:first-child {
	margin-top: 108px;
}
body.admin-bar .topnav {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .topnav {
		top: 46px;
	}
}
html {
	scroll-padding-top: 76px;
}

/* ── Page Body (Datenschutz, Impressum) ── */
.page-body { padding-top: 0; padding-bottom: 80px; }
.section:has(.page-body) { padding-top: 32px !important; margin-block-start: 0 !important; }
.page-body h1, .page-body h2, .page-body h3, .page-body h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-top: 2em;
    margin-bottom: 0.5em;
    color: var(--ink);
}
.page-body h2 { font-size: clamp(20px, 1.8vw, 26px); }
.page-body h3 { font-size: clamp(17px, 1.4vw, 20px); }
.page-body p { font-size: 16px; line-height: 1.7; color: var(--muted); margin-bottom: 1em; max-width: 72ch; }
.page-body ul, .page-body ol { font-size: 16px; line-height: 1.7; color: var(--muted); padding-left: 1.5em; margin-bottom: 1em; }
.page-body li { margin-bottom: 0.35em; }
.page-body a { color: var(--sage-dark); text-decoration: underline; }
.page-body a:hover { color: var(--ink); }
.page-body strong { font-weight: 600; color: var(--ink); }

/* ── Fix: container-narrow в секции контента выровнять по левому краю как у .container ── */
.section .container.container-narrow {
  margin-left: 0;
  margin-right: auto;
}

/* ── Fix: контент страницы — та же ширина что у .container (1240px), как у Page Hero ── */
.section .container.container-narrow {
  max-width: var(--container);
}

/* ── Fix v2: контент страницы — полная ширина container с автоматическими отступами ── */
.section .container.container-narrow {
  max-width: var(--container);
  margin: 0 auto;
}

/* ── Fix v3: box-sizing border-box чтобы padding не увеличивал ширину ── */
.section .container.container-narrow {
  max-width: var(--container);
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Tabellen in .page-body (Datenschutz, Impressum) ── */
.page-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 2em;
  border: 1px solid var(--hairline);
}
.page-body table th,
.page-body table td {
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  vertical-align: top;
  text-align: left;
}
.page-body table thead th {
  background-color: var(--surface);
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-body table tbody tr:nth-child(even) {
  background-color: var(--surface-soft);
}
.page-body table sup {
  font-size: 11px;
  line-height: 1;
}

/* ── Таблицы .page-body — адаптивный горизонтальный скролл на мобильном ── */
@media (max-width: 760px) {
  .page-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 480px;
    font-size: 13px;
  }
  .page-body table th,
  .page-body table td {
    padding: 8px 10px;
    min-width: 100px;
  }
}
@media (max-width: 480px) {
  .page-body table {
    font-size: 12px;
    min-width: 420px;
  }
  .page-body table th,
  .page-body table td {
    padding: 6px 8px;
  }
}


/* ===================================================
   Complianz – Soft-Cookiewall-Overlay deaktivieren
   Das halbtransparente Dimm-Overlay wird versteckt,
   damit der Banner offen ist ohne die Seite zu blockieren.
   =================================================== */
.cmplz-soft-cookiewall {
  background: transparent !important;
  pointer-events: none !important;
}
.cmplz-soft-cookiewall .cmplz-cookiebanner {
  pointer-events: auto !important;
}