/* ==========================================================================
   Alexandra Polok Zahnärztin — Klinische Klarheit, ruhiges Vertrauen
   Design-System: oklch-Töne, 12-Spalten-Grid, Fraunces/Source Sans, 4px-Radius
   ========================================================================== */

:root{
	/* Brand-Tokens (per Customizer, Fallback hier) */
	--primary: #0E3B4D;
	--accent: #6FA696;
	--sand: #E8E2D4;
	--bg: #FAFAF7;

	/* Abgeleitete Töne (oklch, gleiche Hue-Familie wie Primär) */
	--ink: oklch(32% 0.06 220);
	--ink-soft: oklch(42% 0.045 220);
	--muted: oklch(52% 0.02 220);
	/* Darkened, text-safe variant of --accent (blended toward --primary) for small
	   accent-coloured text on light backgrounds — the raw mint fails WCAG AA there. */
	--accent-ink: color-mix(in oklch, var(--accent) 55%, var(--primary) 45%);
	/* Lightened variant for accent-coloured text/links on dark (--primary) backgrounds. */
	--accent-on-dark: color-mix(in oklch, var(--accent) 70%, white 30%);
	--line: oklch(85% 0.01 220);
	--shadow-sm: oklch(32% 0.06 220 / 0.06);
	--shadow-md: oklch(32% 0.06 220 / 0.12);

	--radius: 4px;
	--radius-feature: 28px;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-ui: 220ms;
	--dur-reveal: 620ms;

	--fs-body: clamp(1.0625rem, 0.98rem + 0.2vw, 1.1875rem);
	--fs-small: 0.9rem;
	--measure: 68ch;

	--space-xs: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	--space-sm: clamp(2rem, 1.7rem + 1vw, 2.75rem);
	--space-md: clamp(4rem, 3.2rem + 3vw, 6rem);
	--space-lg: clamp(5.5rem, 4.2rem + 5vw, 8rem);
	--space-xl: clamp(7rem, 5rem + 8vw, 10rem);

	--container-max: 1240px;
	--container-narrow: 760px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body{
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: var(--fs-body);
	line-height: 1.65;
	text-wrap: pretty;
	overflow-x: hidden;
}
img, svg, video, iframe{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4{
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	line-height: 1.12;
	margin: 0 0 0.5em;
	color: var(--primary);
	text-wrap: balance;
}
p{ margin: 0 0 1em; max-width: var(--measure); }
button{ font: inherit; cursor: pointer; }

.icon{ width: 1.4em; height: 1.4em; flex: 0 0 auto; vertical-align: middle; }
.icon-flip{ transform: scaleX(-1); }

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.skip-link{
	position: fixed; top: -100px; left: 1rem; z-index: 999;
	background: var(--primary); color: #fff;
	padding: 0.75rem 1.25rem; border-radius: var(--radius);
	transition: top var(--dur-ui) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

.container{ max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container--narrow{ max-width: var(--container-narrow); }

.eyebrow{
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 0.9em;
}
.section-title{ font-size: clamp(2.1rem, 1.7rem + 1.8vw, 3rem); }
.section-title--sm{ font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
.section-sub{ color: var(--ink-soft); max-width: 56ch; }
.section-head{ max-width: 760px; margin-bottom: var(--space-sm); }

/* ---------- Buttons ---------- */
.btn{
	display: inline-flex; align-items: center; gap: 0.6em;
	padding: 0.95em 1.6em;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 0.98rem;
	border: 1px solid transparent;
	transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
	white-space: nowrap;
}
.btn .icon{ width: 1.1em; height: 1.1em; }
.btn--primary{ background: var(--primary); color: #fff; box-shadow: 0 10px 24px -12px var(--shadow-md); }
.btn--primary:hover{ transform: translateY(-2px); background: color-mix(in oklch, var(--primary) 88%, black); }
.btn--primary:active{ transform: translateY(0) scale(0.98); }
.btn--ghost{ background: transparent; color: var(--primary); border-color: var(--line); }
.btn--ghost:hover{ transform: translateY(-2px); border-color: var(--primary); }
.btn--ghost:active{ transform: translateY(0) scale(0.98); }
.btn--lg{ padding: 1.1em 2em; font-size: 1.05rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
	position: sticky; top: 0; z-index: 250;
	background: color-mix(in oklch, var(--bg) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
	transition: padding var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.site-header.is-compact{ box-shadow: 0 8px 24px -16px var(--shadow-md); }
.site-header__inner{
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	transition: padding var(--dur-ui) var(--ease-out);
}
.site-header.is-compact .site-header__inner{ padding-block: 0.75rem; }

.site-logo{ display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.site-logo-img{ max-height: 48px; width: auto; transition: max-height var(--dur-ui) var(--ease-out); }
.site-header.is-compact .site-logo-img{ max-height: 38px; }
.site-logo-mono{
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem; border-radius: var(--radius);
	background: var(--primary); color: #fff;
	font-family: 'Fraunces', serif; font-size: 1.1rem; flex-shrink: 0;
}
.site-logo-text{ font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--primary); line-height: 1.1; }
.site-logo-text em{ display: block; font-style: normal; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.main-nav-list{ display: flex; align-items: center; gap: clamp(1.25rem, 2vw, 2.25rem); }
.main-nav-list .nav-link{ display: inline-flex; align-items: center; gap: 0.35em; font-weight: 500; padding: 0.4em 0; position: relative; }
.main-nav-list .nav-link::after{
	content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
	background: var(--accent); transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur-ui) var(--ease-out);
}
.main-nav-list .nav-link:hover::after, .main-nav-list .nav-link:focus-visible::after{ transform: scaleX(1); }
.main-nav-list .icon-chevron{ width: 0.8em; height: 0.8em; transition: transform var(--dur-ui) var(--ease-out); }

.main-nav-list .has-dropdown{ position: relative; }
.main-nav-list .nav-dropdown{
	position: absolute; top: 100%; left: 0; min-width: 240px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 20px 40px -20px var(--shadow-md);
	padding: 0.5rem;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
}
.main-nav-list .has-dropdown:hover .nav-dropdown,
.main-nav-list .has-dropdown:focus-within .nav-dropdown{
	opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav-list .has-dropdown:hover .icon-chevron,
.main-nav-list .has-dropdown:focus-within .icon-chevron{ transform: rotate(180deg); }
.nav-dropdown .nav-link{ display: block; padding: 0.6em 0.8em; border-radius: var(--radius); }
.nav-dropdown .nav-link:hover{ background: var(--bg); }
.nav-dropdown .nav-link::after{ display: none; }

.site-header__actions{ display: flex; align-items: center; gap: 1rem; }
.header-cta{ padding: 0.7em 1.3em; font-size: 0.92rem; }

.burger{ display: none; background: none; border: none; padding: 0.4rem; color: var(--primary); }
.burger-box{ position: relative; display: inline-block; width: 24px; height: 18px; }
.burger-inner{
	position: absolute; top: 50%; left: 0; width: 100%; height: 2px;
	background: currentColor; transform: translateY(-50%);
	transition: background-color var(--dur-ui) var(--ease-out);
}
.burger-inner::before, .burger-inner::after{
	content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
	transition: top var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.burger-inner::before{ top: -8px; }
.burger-inner::after{ top: 8px; }
.burger.is-active .burger-inner{ background: transparent; }
.burger.is-active .burger-inner::before{ top: 0; transform: rotate(45deg); }
.burger.is-active .burger-inner::after{ top: 0; transform: rotate(-45deg); }

.mobile-nav{
	position: fixed; top: 0; right: 0; height: 100%; width: min(360px, 86vw);
	background: var(--bg); z-index: 200;
	box-shadow: -20px 0 50px -20px var(--shadow-md);
	transform: translateX(100%);
	transition: transform var(--dur-ui) var(--ease-out);
	overflow-y: auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav__inner{ padding: 7rem 1.75rem 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.mobile-nav-list{ display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav-list .nav-item{ border-bottom: 1px solid var(--line); }
.mobile-nav-list .nav-link{ display: flex; align-items: center; justify-content: space-between; padding: 1em 0.2em; font-size: 1.05rem; font-weight: 500; }
.mobile-nav-list .nav-dropdown{
	position: static; opacity: 1; visibility: visible; transform: none !important;
	box-shadow: none; border: none; padding: 0 0 0.5rem 1rem; display: block;
	transition: none;
}
.mobile-nav-list .nav-dropdown .nav-link{ font-size: 0.95rem; padding: 0.6em 0.2em; font-weight: 400; }
.mobile-nav-close-spacer{ display: none; }
.mobile-nav-cta{ width: 100%; justify-content: center; }

.mobile-nav-overlay{
	position: fixed; inset: 0; z-index: 150;
	background: oklch(20% 0.03 220 / 0.45);
	opacity: 0; visibility: hidden; transition: opacity var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
}
.mobile-nav-overlay.is-open{ opacity: 1; visibility: visible; }

/* ==========================================================================
   Hero + Kontaktleiste (kompaktes Hero mit Kontaktleiste direkt darunter)
   ========================================================================== */
.hero{ padding-block: var(--space-md) var(--space-sm); }
.hero__inner{ max-width: 880px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); text-align: center; }
.hero__title{ font-size: clamp(2.75rem, 2.1rem + 3.2vw, 4.25rem); }
.hero__subtitle{ color: var(--ink-soft); font-size: 1.1rem; margin-inline: auto; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.75rem; }

.contact-bar{ padding-block: var(--space-xs); background: var(--sand); }
.contact-bar__inner{
	max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 3vw, 3rem);
}
.contact-bar__item{ display: flex; align-items: center; gap: 0.6rem; color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; }
.contact-bar__item .icon{ color: var(--primary); flex-shrink: 0; }

/* ==========================================================================
   Slider (strukturell anderer Sektionstyp: edge-to-edge Carousel)
   ========================================================================== */
.slider{ padding-block: var(--space-lg); }
.slider__track{
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; gap: 0;
}
.slider__track::-webkit-scrollbar{ display: none; }
.slide{
	flex: 0 0 100%; scroll-snap-align: start;
	display: grid; grid-template-columns: 1fr; position: relative;
	min-height: clamp(360px, 60vw, 560px);
}
.slide__media{ position: absolute; inset: 0; }
.slide__img{ width: 100%; height: 100%; object-fit: cover; }
.slide__media::after{
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(0deg, oklch(20% 0.04 220 / 0.72) 0%, oklch(20% 0.04 220 / 0.1) 55%, transparent 80%);
}
.slide__caption{
	position: relative; align-self: end; z-index: 1;
	padding: clamp(1.75rem, 5vw, 3.5rem);
	max-width: 640px; color: #fff;
}
.slide__title{ color: #fff; font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem); }
.slide__text{ color: oklch(96% 0.01 220); }
.slider__controls{ display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.slider__btn{
	width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center; background: #fff; color: var(--primary);
	transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.slider__btn:hover{ background: var(--primary); color: #fff; transform: translateY(-2px); }
.slider__btn:active{ transform: scale(0.95); }
.slider__dots{ display: flex; gap: 0.5rem; }
.slider__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; padding: 0; transition: background-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.slider__dot.is-active{ background: var(--accent); transform: scale(1.3); }

/* ==========================================================================
   Services (versetztes 12-Spalten-Grid — Elemente auf unterschiedlichen Spalten)
   ========================================================================== */
.services{ padding-block: var(--space-lg); }
.service-grid{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
}
.service-card{
	grid-column: span 12;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 1px 2px var(--shadow-sm);
	transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.service-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 36px -22px var(--shadow-md); }
.service-card__media{ display: block; aspect-ratio: 16/10; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 100%, 0 100%); }
.service-card__img{ width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.service-card:hover .service-card__img{ transform: scale(1.04); }
.service-card__body{ padding: 1.5rem 1.6rem 1.75rem; }
.service-card__title{ font-size: 1.3rem; margin-bottom: 0.5rem; }
.service-card__title a:hover{ color: var(--accent-ink); }
.service-card__excerpt{ color: var(--ink-soft); font-size: 0.96rem; }
.service-card__excerpt p{ margin-bottom: 0.5em; }
.service-card__link{ display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--primary); margin-top: 0.5rem; }
.service-card__link .icon{ width: 1em; height: 1em; transition: transform var(--dur-ui) var(--ease-out); }
.service-card__link:hover .icon{ transform: translateX(4px); }

@media (min-width: 901px){
	.service-card--1{ grid-column: 1 / span 5; }
	.service-card--2{ grid-column: 7 / span 6; margin-top: 3.5rem; }
	.service-card--3{ grid-column: 2 / span 6; margin-top: -1.5rem; }
	.service-card--4{ grid-column: 8 / span 5; margin-top: 2rem; }
}

/* ==========================================================================
   Breakout — bewusst überbreiter Bruch in der Seitenmitte
   ========================================================================== */
.breakout{
	padding-block: var(--space-xl);
	background: var(--primary);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.breakout__inner{ max-width: 920px; margin-inline: auto; padding-inline: clamp(1.25rem, 6vw, 3rem); text-align: center; }
.breakout__quote{
	font-family: 'Fraunces', serif; font-weight: 500; font-style: italic;
	color: #fff; font-size: clamp(1.9rem, 1.5rem + 2.4vw, 3rem); line-height: 1.25; margin-bottom: 0.6rem;
}
.breakout__sub{ color: oklch(88% 0.02 220); max-width: 50ch; margin-inline: auto; }

/* ==========================================================================
   About (asymmetrisches Grid, Bild beginnt Spalte 1, Text Spalte 8)
   ========================================================================== */
.about{ padding-block: var(--space-md); }
.about__grid{
	display: grid; grid-template-columns: repeat(12, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.about__media{ grid-column: 1 / span 12; }
.about__img{
	width: 100%; aspect-ratio: 16/10; object-fit: cover;
	border-radius: var(--radius-feature);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 88%);
}
.about__text{ grid-column: 1 / span 12; }
.about__body{ color: var(--ink-soft); }
.about__counter{ display: flex; align-items: baseline; gap: 0.75rem; margin: 1.5rem 0; }
.counter{ font-family: 'Fraunces', serif; font-size: 3rem; color: var(--primary); line-height: 1; }
.about__counter-label{ color: var(--muted); font-size: 0.92rem; max-width: 20ch; }

@media (min-width: 901px){
	.about__media{ grid-column: 1 / span 6; }
	.about__text{ grid-column: 8 / span 5; }
}

/* ==========================================================================
   Kontakt-CTA (Startseite) + Karte
   ========================================================================== */
.contact-cta{ padding-block: var(--space-lg); background: var(--sand); }
.contact-cta--compact{ padding-block: var(--space-md); }
.contact-cta__grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.contact-cta__text{ grid-column: 1 / span 12; }
.contact-cta__map{ grid-column: 1 / span 12; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.contact-cta__map iframe{ width: 100%; height: 100%; border: 0; }
.contact-cta__list{ display: flex; flex-direction: column; gap: 0.85rem; margin: 1.5rem 0; }
.contact-cta__list li{ display: flex; align-items: center; gap: 0.75rem; }
.contact-cta__list .icon{ color: var(--primary); flex-shrink: 0; }
.contact-cta__list--stacked{ margin-top: 2rem; }

@media (min-width: 901px){
	.contact-cta__text{ grid-column: 1 / span 5; }
	.contact-cta__map{ grid-column: 7 / span 6; }
}

/* ==========================================================================
   Page header / content / prose (Gutenberg)
   ========================================================================== */
.page-header{ padding-block: var(--space-md) var(--space-sm); background: var(--sand); }
.page-header__inner{ max-width: 820px; }
.page-header__title{ font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.4rem); }
.page-header__sub{ color: var(--ink-soft); font-size: 1.1rem; }

.page-media{ padding-block: var(--space-sm); }
.page-media__img{ width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: var(--radius); }

.page-content{ padding-block: var(--space-md); }
.prose > *:first-child{ margin-top: 0; }
.prose h2{ font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.25rem); margin-top: 2.2em; }
.prose h3{ font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); margin-top: 1.8em; }
.prose p{ color: var(--ink-soft); }
.prose ul{ list-style: none; margin: 1.2em 0; display: flex; flex-direction: column; gap: 0.6em; }
.prose ul li{ position: relative; padding-left: 1.6em; color: var(--ink-soft); }
.prose ul li::before{
	content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px;
	background: var(--accent); border-radius: 50%;
}
.prose figure{ margin: 2em 0; }
.prose figure img{ border-radius: var(--radius); aspect-ratio: 16/10; object-fit: cover; }
.prose blockquote{
	border-left: 3px solid var(--accent); padding-left: 1.5em; margin: 2em 0;
	font-family: 'Fraunces', serif; font-style: italic; font-size: 1.2rem; color: var(--primary);
}
.prose a{ color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose .wp-block-columns{ display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 2em 0; }
.prose .wp-block-column{ min-width: 0; }

@media (min-width: 701px){
	.prose .wp-block-columns{ grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
}

/* Kontakt-Seite */
.kontakt-grid-section{ padding-block: var(--space-md) var(--space-lg); }
.kontakt-grid{ display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.kontakt-grid__info{ grid-column: 1 / span 12; }
.kontakt-grid__form{ grid-column: 1 / span 12; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); }
.kontakt-grid__map{ aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; margin-top: 1.5rem; border: 1px solid var(--line); }
.kontakt-grid__map iframe{ width: 100%; height: 100%; border: 0; }

@media (min-width: 901px){
	.kontakt-grid__info{ grid-column: 1 / span 6; }
	.kontakt-grid__form{ grid-column: 7 / span 6; }
}

/* CF7 */
.wpcf7-form p{ margin-bottom: 1.1rem; }
.wpcf7-form label{ display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4em; color: var(--primary); }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea{
	width: 100%; padding: 0.85em 1em; border: 1px solid var(--line); border-radius: var(--radius);
	font: inherit; background: var(--bg); transition: border-color var(--dur-ui) var(--ease-out);
	min-height: 44px;
}
.wpcf7-form textarea{ min-height: 140px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus{ outline: none; border-color: var(--primary); }
.wpcf7-form input[type="submit"]{
	background: var(--primary); color: #fff; border: none; border-radius: var(--radius);
	padding: 0.95em 1.8em; font-weight: 600; min-height: 44px;
	transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.wpcf7-form input[type="submit"]:hover{ transform: translateY(-2px); background: color-mix(in oklch, var(--primary) 88%, black); }
.wpcf7-form input[type="submit"]:active{ transform: scale(0.98); }
.wpcf7-not-valid-tip{ color: #b3362c; font-size: 0.85rem; margin-top: 0.3em; }
.wpcf7-response-output{ border-radius: var(--radius); padding: 1em 1.2em; margin-top: 1rem; border: 1px solid var(--line); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--primary); color: oklch(92% 0.02 220); padding-top: var(--space-md); }
.site-footer__top{
	max-width: var(--container-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem);
	display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: var(--space-sm);
}
.site-footer .site-logo-text, .site-footer .site-logo-mono{ color: #fff; background: oklch(96% 0.01 220 / 0.12); }
.site-footer .site-logo-text em{ color: oklch(80% 0.02 220); }
.site-footer__tagline{ color: oklch(80% 0.02 220); margin-top: 0.75rem; max-width: 32ch; }
.site-footer__heading{ color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.footer-contact-list{ display: flex; flex-direction: column; gap: 0.85rem; }
.footer-contact-list li{ display: flex; align-items: center; gap: 0.75rem; }
.footer-contact-list .icon{ flex-shrink: 0; color: var(--accent); }
.footer-contact-list a:hover{ color: var(--accent-on-dark); }
.footer-nav-list{ display: flex; flex-direction: column; gap: 0.6rem; }
.footer-nav-list a:hover{ color: var(--accent-on-dark); }
.site-footer__bottom{
	border-top: 1px solid oklch(96% 0.01 220 / 0.14);
	padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem); text-align: center;
	font-size: 0.85rem; color: oklch(72% 0.02 220);
}

@media (min-width: 701px){
	.site-footer__top{ grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ==========================================================================
   Scroll-Reveal — AUSSCHLIESSLICH transform, NIE opacity:0 als Startzustand
   ========================================================================== */
.reveal{ transform: translateY(28px); transition: transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: transform; }
.reveal.is-visible{ transform: translateY(0); }
.reveal[data-reveal="left"]{ transform: translateX(-32px); }
.reveal[data-reveal="left"].is-visible{ transform: translateX(0); }
.reveal[data-reveal="right"]{ transform: translateX(32px); }
.reveal[data-reveal="right"].is-visible{ transform: translateX(0); }

@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.reveal, .reveal.is-visible{ transform: none; transition: none; }
	.btn, .service-card, .slider__btn, .site-logo-img, .site-header__inner{ transition: none !important; }
}

/* ==========================================================================
   Responsive — Tablet (<=900px) & Mobile (<=600px)
   ========================================================================== */
@media (max-width: 900px){
	.main-nav{ display: none; }
	.header-cta{ display: none; }
	.burger{ display: inline-flex; }
	.site-header{ backdrop-filter: none; }

	.main-nav-list .nav-link:hover::after,
	.main-nav-list .nav-link:focus-visible::after{ transform: none; }
	.main-nav-list .has-dropdown:hover .nav-dropdown,
	.main-nav-list .has-dropdown:focus-within .nav-dropdown{ transform: translateY(8px); opacity: 0; visibility: hidden; }

	.about__grid, .contact-cta__grid, .kontakt-grid{ row-gap: 2rem; }
	.service-card{ grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

@media (max-width: 600px){
	.hero__actions{ flex-direction: column; align-items: stretch; }
	.hero__actions .btn{ justify-content: center; }
	.contact-bar__inner{ flex-direction: column; align-items: flex-start; gap: 1rem; }
	.slide{ min-height: 420px; }
	.breakout__quote{ font-size: 1.7rem; }
}