/*
Theme Name: Lakatos Editorial
Theme URI: https://www.frauenarzt-lakatos.de
Author: Praxis Dr. med. Monika Lakatos
Description: Individuelles Theme für die frauenärztliche Praxis Dr. med. Monika Lakatos in Karlsruhe-Mühlburg.
Version: 2.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lakatos-editorial
*/

/* ============================================================
   1. Schriften
   ============================================================ */

@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2. Design-Token
   ============================================================ */

:root {
	/* Farben */
	--ink: #211a1e;
	--ink-soft: #4d4348;
	--plum-50: #fbf2f4;
	--plum-200: #e8c7cf;
	--plum-300: #d7a0ae;
	--plum-400: #bc6e84;
	--plum-600: #823a51;
	--plum-700: #692f41;
	--plum-800: #4f2431;
	--plum-900: #351821;
	--sand-50: #fdfbf9;
	--sand-100: #f8f3ee;
	--sand-200: #e8ded4;
	--sand-300: #d8c9bb;
	--white: #fff;

	/* Typografie */
	--font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
	--font-display: var(--font-sans);

	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lead: clamp(1.05rem, 1rem + 0.4vw, 1.175rem);
	--text-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	--text-h2: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
	--text-h1: clamp(1.9rem, 1.4rem + 2.1vw, 2.75rem);

	/* Abstände */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 2.5rem;
	--space-3xl: 4rem;
	--section-y: clamp(3rem, 6vw, 5rem);
	--gutter: clamp(1.25rem, 4vw, 2rem);
	--col-gap: clamp(2rem, 5vw, 4rem);

	/* Maße */
	--container: 72rem;
	--measure: 38rem;
	--radius: 6px;
	--header-h: 4.5rem;
	--tap: 2.75rem;
}

/* ============================================================
   3. Grundlagen
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--plum-900);
	text-wrap: balance;
}

p,
ul,
ol,
dl,
figure,
table {
	margin: 0;
}

p + p {
	margin-top: var(--space-sm);
}

:focus-visible {
	outline: 2px solid var(--plum-600);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--plum-200);
	color: var(--plum-900);
}

/* Sprungziele nicht unter dem fixierten Kopfbereich verstecken. */
[id] {
	scroll-margin-top: calc(var(--header-h) + var(--space-md));
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}

.skip-link:focus {
	left: var(--space-md);
	top: var(--space-md);
	padding: var(--space-sm) var(--space-lg);
	background: var(--plum-800);
	color: var(--white);
	font-weight: 600;
	border-radius: var(--radius);
}

/* ============================================================
   4. Layout
   ============================================================ */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--section-y);
	border-bottom: 1px solid var(--sand-200);
}

.section--alt {
	background: var(--sand-100);
}

.section--last,
.section:last-of-type {
	border-bottom: none;
}

.section-title {
	font-size: var(--text-h2);
	/* Lange Komposita (Mädchensprechstunde) sprachabhängig trennen statt hart umbrechen. */
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}

.section-intro {
	margin-top: var(--space-md);
}

.subheading {
	margin-top: var(--space-xl);
	font-size: 1.0625rem;
}

.measure {
	max-width: var(--measure);
}

.text-soft {
	color: var(--ink-soft);
}

.lead {
	margin-top: var(--space-lg);
	max-width: var(--measure);
	font-size: var(--text-lead);
	color: var(--ink-soft);
}

.note {
	margin-top: var(--space-lg);
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.figure-caption {
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.is-breakable {
	word-break: break-word;
}

/* Verhindert den Umbruch zusammengesetzter Eigennamen am Bindestrich. */
.nowrap {
	white-space: nowrap;
}

/* Zweispaltiges Grundraster: Überschrift links, Inhalt rechts. */
.split-grid {
	display: grid;
	gap: var(--space-lg);
}

.two-col {
	display: grid;
	gap: var(--col-gap);
	margin-top: var(--space-2xl);
}

@media (min-width: 48em) {
	.two-col {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 64em) {
	.split-grid {
		grid-template-columns: 20rem 1fr;
		gap: var(--col-gap);
	}
}

/* ============================================================
   5. Bilder
   ============================================================ */

.media-frame {
	position: relative;
	overflow: hidden;
	background: var(--sand-200);
}

.media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hero-Foto liegt als 3:4-Hochformat vor; mobil quadratisch beschnitten, Kopf oben behalten. */
.media-frame--hero {
	aspect-ratio: 1 / 1;
}

.media-frame--hero img {
	object-position: center 20%;
}

.media-frame--wide {
	aspect-ratio: 16 / 10;
}

.media-frame--portrait {
	aspect-ratio: 3 / 2;
}

@media (min-width: 64em) {
	.media-frame--hero {
		aspect-ratio: 3 / 4;
	}
}

/* ============================================================
   6. Schaltflächen und Links
   ============================================================ */

.icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: var(--tap);
	padding: 0.8rem 1.5rem;
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.3;
	color: var(--white);
	background: var(--plum-800);
	border: 1px solid var(--plum-800);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
	background: var(--plum-700);
	border-color: var(--plum-700);
}

.btn--outline {
	color: var(--plum-800);
	background: transparent;
	border-color: var(--plum-300);
}

.btn--outline:hover {
	background: var(--plum-50);
	border-color: var(--plum-600);
}

.action-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-lg);
	margin-top: var(--space-xl);
}

.link-underline,
.link-quiet {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

.link-underline {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-weight: 600;
	color: var(--plum-700);
}

.link-underline:hover {
	color: var(--plum-900);
}

.link-quiet {
	color: var(--plum-800);
	text-decoration-color: var(--plum-300);
}

.link-quiet:hover {
	color: var(--plum-600);
	text-decoration-color: currentColor;
}

.is-large {
	font-size: 1.125rem;
}

/* ============================================================
   7. Kopfbereich
   ============================================================ */

/* Urlaubs-/Abwesenheitshinweis ganz oben, ueber dem Kopfbereich. */
.vacation-banner {
	background: var(--plum-800);
	color: var(--white);
	font-size: var(--text-sm);
}

.vacation-banner .container {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-block: 0.6rem;
}

.vacation-banner .icon {
	flex-shrink: 0;
	width: 1.2rem;
	height: 1.2rem;
}

.vacation-banner span {
	line-height: 1.4;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sand-50);
	border-bottom: 1px solid var(--sand-200);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	min-height: var(--header-h);
	padding-block: var(--space-xs);
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: var(--tap);
	min-width: 0;
}

.brand-text {
	display: block;
	min-width: 0;
	line-height: 1.25;
}

.brand-name {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--plum-900);
}

.brand-tagline {
	display: none;
	font-size: 0.75rem;
	color: var(--ink-soft);
}

.main-nav {
	display: none;
	margin-left: auto;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	font-size: 0.9375rem;
	color: var(--ink-soft);
	transition: color 0.15s ease;
}

.nav-list a:hover,
.nav-list .current-menu-item > a {
	color: var(--plum-800);
}

.header-phone {
	display: none;
	align-items: center;
	gap: var(--space-xs);
	min-height: var(--tap);
	margin-left: auto;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--plum-800);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	transition: color 0.15s ease;
}

.header-phone:hover {
	color: var(--plum-600);
}

.header-inner .lang-switcher {
	display: none;
	align-items: center;
	margin-left: auto;
}

.header-inner .lang-switcher select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.35rem 1.75rem 0.35rem 0.75rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink-soft);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234d4348' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	border: 1px solid var(--sand-300);
	border-radius: var(--radius);
	cursor: pointer;
}

.header-inner .lang-switcher select:hover,
.header-inner .lang-switcher select:focus {
	color: var(--plum-800);
	border-color: var(--plum-300);
	outline: none;
}

.lang-switcher--mobile {
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--sand-200);
}

.lang-switcher--mobile .lang-switcher-list {
	flex-wrap: wrap;
}

.lang-switcher--mobile a {
	font-size: var(--text-base);
}

.lang-switcher ul {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.lang-switcher li {
	display: flex;
	align-items: center;
}

.lang-switcher li:not(:last-child)::after {
	content: "·";
	margin-left: var(--space-xs);
	color: var(--ink-soft);
}

.lang-switcher a {
	display: inline-flex;
	min-height: var(--tap);
	align-items: center;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
}

.lang-switcher a:hover {
	color: var(--plum-800);
}

.lang-switcher li.current-lang a {
	color: var(--plum-900);
	font-weight: 600;
}

.mobile-actions {
	display: flex;
	gap: var(--space-xs);
	margin-left: auto;
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: var(--tap);
	height: var(--tap);
	color: var(--plum-800);
	background: transparent;
	border: 1px solid var(--sand-300);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.icon-btn:hover {
	background: var(--white);
	border-color: var(--plum-300);
}

/* Ohne JavaScript bleibt die Navigation dauerhaft sichtbar. */
.nav-toggle {
	display: none;
}

.js .nav-toggle {
	display: inline-grid;
}

.nav-toggle .nav-toggle-close,
.nav-toggle[aria-expanded="true"] .nav-toggle-open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-close {
	display: block;
}

.mobile-nav {
	border-top: 1px solid var(--sand-200);
	background: var(--sand-50);
}

.js .mobile-nav {
	display: none;
}

.js .mobile-nav.is-open {
	display: block;
}

.mobile-nav-list {
	margin: 0;
	padding: var(--space-xs) 0 var(--space-md);
	list-style: none;
}

.mobile-nav-list li + li {
	border-top: 1px solid var(--sand-200);
}

.mobile-nav-list a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding-block: var(--space-sm);
	font-weight: 500;
	color: var(--ink);
}

.mobile-nav-list a:hover {
	color: var(--plum-800);
}

@media (min-width: 40em) {
	.brand-tagline {
		display: block;
	}
}

@media (min-width: 64em) {
	.brand-name {
		font-size: 1rem;
	}

	.main-nav {
		display: block;
	}

	.header-inner .lang-switcher {
		display: flex;
	}

	.header-phone {
		display: inline-flex;
		margin-left: var(--space-xl);
	}

	.mobile-actions,
	.mobile-nav {
		display: none !important;
	}
}

/* ============================================================
   8. Startseite
   ============================================================ */

.hero-grid {
	display: grid;
	gap: var(--col-gap);
	align-items: center;
}

.hero-title {
	font-size: var(--text-h1);
	line-height: 1.15;
}

@media (min-width: 64em) {
	/* Text und Bild als Paar in der Seitenmitte, nicht an den Rändern. */
	.hero-grid {
		grid-template-columns: minmax(0, 34rem) minmax(0, 22rem);
		justify-content: center;
	}

	.hero-figure {
		order: 2;
	}
}

/* Aufzählung mit Trennlinien statt Aufzählungszeichen. */
.rule-list {
	max-width: var(--measure);
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--sand-200);
}

.rule-list li {
	padding-block: var(--space-sm);
	border-top: 1px solid var(--sand-200);
}

.rule-list--top {
	margin-top: var(--space-sm);
	border-bottom: none;
}

.rule-list--top li:first-child {
	border-top: 1px solid var(--sand-200);
}

.bordered-note {
	margin-top: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--sand-200);
}

.services-grid {
	display: grid;
	gap: var(--space-lg);
	margin-top: var(--space-2xl);
}

@media (min-width: 48em) {
	.services-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.service-card {
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--white);
	border: 1px solid var(--sand-200);
	border-radius: var(--radius);
}

.service-card h3 {
	font-size: var(--text-h3);
}

.service-card > p {
	margin-top: var(--space-sm);
	color: var(--ink-soft);
}

.service-card ul {
	margin-top: var(--space-lg);
	padding: var(--space-lg) 0 0 1.25rem;
	font-size: 0.97rem;
	list-style: disc;
	border-top: 1px solid var(--sand-200);
}

.service-card li + li {
	margin-top: var(--space-xs);
}

.service-card li::marker {
	color: var(--plum-300);
}

.service-card--accent {
	background: var(--plum-50);
	border-color: var(--plum-200);
}

.service-card--accent ul {
	border-top-color: var(--plum-200);
}

.media-split,
.doctor-grid {
	display: grid;
	gap: var(--col-gap);
	align-items: center;
}

@media (min-width: 64em) {
	.media-split {
		grid-template-columns: 1fr 1fr;
	}

	.doctor-grid {
		grid-template-columns: 1fr 1.3fr;
		align-items: start;
	}
}

/* Sprechzeiten */
.hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.97rem;
}

.hours-table tr {
	border-bottom: 1px solid var(--sand-200);
}

.hours-table th {
	width: 7.5rem;
	padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
}

/* Mobil stehen mehrere Zeitfenster untereinander und linksbuendig. So bleibt
   keine Uhrzeit allein am Zeilenende zurueck. */
.hours-table td {
	padding-block: var(--space-sm);
	text-align: left;
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}

.hours-range {
	display: block;
}

.hours-range + .hours-range {
	margin-top: 0.15em;
}

@media (min-width: 64em) {
	.hours-table th {
		width: auto;
	}

	.hours-table td {
		text-align: right;
	}

	.hours-range {
		display: inline;
	}

	.hours-range + .hours-range::before {
		content: ", ";
	}

	.hours-range + .hours-range {
		margin-top: 0;
	}
}

.hours-table .is-closed {
	color: var(--ink-soft);
}

.contact-list {
	margin: 0;
	border-top: 1px solid var(--sand-200);
}

/* Mobil: Bezeichnung über dem Wert. Verhindert, dass lange Angaben wie die
   E-Mail-Adresse umbrechen und die Wertespalte ausfransen lassen. */
.contact-row {
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--sand-200);
}

.contact-row dt {
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

.contact-row dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.contact-row dd .link-quiet {
	display: inline-block;
	padding-block: 0.15rem;
}

/* Erst ab dieser Breite ist die Spalte breit genug fuer Bezeichnung und
   Wert nebeneinander - darunter wuerde die E-Mail-Adresse umbrechen. */
@media (min-width: 64em) {
	.contact-list {
		border-top: 0;
	}

	.contact-row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-2xs) var(--space-sm);
		padding-block: 0;
		border-bottom: 0;
	}

	.contact-row + .contact-row {
		margin-top: var(--space-sm);
	}

	.contact-row dt {
		flex: 0 0 4.5rem;
		font-size: var(--text-sm);
	}
}

.emergency-box {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--sand-200);
}

.emergency-box .subheading {
	margin-top: 0;
}

.emergency-box p {
	margin-top: var(--space-sm);
}

/* Häufige Fragen */
.faq-list {
	max-width: var(--measure);
	border-bottom: 1px solid var(--sand-200);
}

.faq-list details {
	border-top: 1px solid var(--sand-200);
}

.faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: var(--tap);
	padding-block: var(--space-md);
	font-weight: 600;
	color: var(--plum-900);
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease;
}

.faq-list summary::-webkit-details-marker {
	display: none;
}

.faq-list summary:hover {
	color: var(--plum-600);
}

.faq-list summary .icon {
	width: 1rem;
	height: 1rem;
	color: var(--plum-400);
	transition: transform 0.2s ease;
}

.faq-list details[open] summary .icon {
	transform: rotate(180deg);
}

.faq-list p {
	padding-bottom: var(--space-lg);
	color: var(--ink-soft);
}

/* Anfahrt */
.address-block {
	font-style: normal;
	line-height: 1.6;
}

.address-block strong {
	display: block;
	font-weight: 600;
	color: var(--plum-900);
}

.route-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.route-details {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--sand-200);
}

.route-details > div + div {
	margin-top: var(--space-lg);
}

.route-details dt {
	font-weight: 600;
	color: var(--plum-900);
}

.route-details dd {
	margin: var(--space-2xs) 0 0;
	color: var(--ink-soft);
}

/* Die Karte fuellt die Spaltenhoehe, damit unter ihr keine leere Flaeche entsteht. */
.map-frame {
	display: flex;
	background: var(--sand-100);
}

/* Karte wird erst nach Zustimmung nachgeladen. */
.map-consent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-md);
	width: 100%;
	min-height: clamp(18rem, 40vw, 24rem);
	padding: var(--space-xl);
	border: 1px solid var(--sand-200);
}

.map-consent__text {
	max-width: 28rem;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.map-consent__actions {
	margin: 0;
}

/* Hinweis unter den Terminbuttons, dass die Buchung zu Doctolib fuehrt. */
.doctolib-hint {
	margin-top: var(--space-md);
}

/* Seitlich fixierter Buchungs-Button (Doctolib), auf allen Seiten sichtbar.
   Dauerhaft mit Text, damit die Buchung sofort erkennbar ist. */
.doctolib-cta {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 55;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.7rem 0.9rem;
	color: var(--white);
	background: var(--plum-800);
	border-radius: var(--radius) 0 0 var(--radius);
	box-shadow: 0 6px 20px -10px rgba(33, 26, 30, 0.6);
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.doctolib-cta:hover,
.doctolib-cta:focus-visible {
	background: var(--plum-700);
	outline: none;
}

.doctolib-cta:focus-visible {
	box-shadow: 0 0 0 3px var(--plum-300);
}

.doctolib-cta__icon {
	flex-shrink: 0;
	width: 1.35rem;
	height: 1.35rem;
}

.doctolib-cta__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.doctolib-cta__main {
	font-size: 0.9375rem;
	font-weight: 600;
}

.doctolib-cta__brand {
	font-size: 0.75rem;
	opacity: 0.85;
}

/* Auf schmalen/Touch-Geraeten unten rechts ueber der Kontaktleiste, kompakt. */
@media (max-width: 47.99em) {
	.doctolib-cta {
		top: auto;
		bottom: calc(4.25rem + var(--space-sm));
		transform: none;
		padding: 0.55rem 0.8rem;
	}

	.doctolib-cta__main {
		font-size: 0.875rem;
	}

	.doctolib-cta__brand {
		font-size: 0.6875rem;
	}
}

.map-frame iframe {
	flex: 1 1 auto;
	width: 100%;
	min-height: clamp(18rem, 40vw, 24rem);
	border: 0;
}

@media (min-width: 64em) {
	.two-col--map {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   9. Inhaltsseiten
   ============================================================ */

.page-body {
	max-width: var(--measure);
}

.page-body h1 {
	margin-bottom: var(--space-lg);
	font-size: var(--text-h2);
}

.entry-content > * + * {
	margin-top: var(--space-md);
}

.entry-content h2,
.entry-content h3 {
	margin-top: var(--space-xl);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content a {
	color: var(--plum-800);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.error-404 .action-row {
	margin-top: var(--space-lg);
}

/* ============================================================
   9a. Galerie (Core-Galerie-Block, Core-Layoutklassen entfernt in
       lakatos_gallery_block; Selektoren bewusst spezifischer als
       das Block-CSS, das nach style.css geladen wird)
   ============================================================ */

/* Seiten mit Galerie duerfen die volle Containerbreite nutzen. */
.page-body:has(.lakatos-gallery) {
	max-width: none;
}

.page-body:has(.lakatos-gallery) > h1,
.page-body:has(.lakatos-gallery) .entry-content > p {
	max-width: var(--measure);
}

.page-body .entry-content .lakatos-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
	gap: var(--space-xl) var(--space-lg);
	margin: var(--space-xl) 0 0;
	padding: 0;
}

.page-body .entry-content .lakatos-gallery figure.wp-block-image {
	display: block;
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
}

.page-body .entry-content .lakatos-gallery figure.wp-block-image::before {
	content: none;
}

.page-body .entry-content .lakatos-gallery figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--sand-100);
	cursor: zoom-in;
}

.page-body .entry-content .lakatos-gallery figure.wp-block-image figcaption {
	position: static;
	margin: var(--space-xs) 0 0;
	padding: 0;
	background: none;
	color: var(--ink-soft);
	font-size: var(--text-sm);
	line-height: 1.5;
	text-align: left;
	text-shadow: none;
	overflow: visible;
	max-height: none;
}

/* Lightbox-Schaltflaeche des Core-Blocks ausblenden, das Bild selbst ist klickbar. */
.page-body .entry-content .lakatos-gallery .lightbox-trigger {
	display: none;
}

/* ============================================================
   9b. Kontaktformular
   ============================================================ */

.contact-form {
	max-width: var(--measure);
	margin-top: var(--space-lg);
}

.form-row {
	margin-top: var(--space-md);
}

.form-row label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-weight: 600;
	color: var(--ink);
}

.form-required {
	color: var(--plum-700);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: inherit;
	font-size: var(--text-base);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--sand-300);
	border-radius: var(--radius);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
	outline: 2px solid var(--plum-400);
	outline-offset: 1px;
}

.form-row textarea {
	resize: vertical;
}

.form-row--consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	font-weight: 400;
}

.form-row--consent input[type="checkbox"] {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.form-consent-text {
	flex: 1 1 auto;
	font-weight: 400;
}

.form-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.form-notice {
	margin-top: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius);
	font-weight: 600;
}

.form-notice--success {
	color: var(--plum-900);
	background: var(--plum-50);
	border: 1px solid var(--plum-200);
}

.form-notice--error {
	color: #7a1a1a;
	background: #fbeaea;
	border: 1px solid #eec5c5;
}

/* ============================================================
   10. Fußbereich
   ============================================================ */

.site-footer {
	padding-block: var(--section-y) var(--space-lg);
	background: var(--sand-100);
	border-top: 1px solid var(--sand-200);
}

.footer-grid {
	display: grid;
	gap: var(--space-xl);
}

@media (min-width: 40em) {
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.footer-brand span {
	font-family: var(--font-display);
	color: var(--plum-900);
}

.footer-address {
	margin-top: var(--space-md);
	font-size: var(--text-sm);
	font-style: normal;
	line-height: 1.6;
	color: var(--ink-soft);
}

.footer-heading {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--plum-900);
}

.footer-list {
	margin-top: var(--space-md);
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

.footer-list li + li {
	margin-top: var(--space-xs);
}

.footer-list a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-color: var(--sand-300);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.footer-list a:hover {
	color: var(--plum-700);
	text-decoration-color: currentColor;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin-top: var(--space-3xl);
	padding-top: var(--space-lg);
	font-size: 0.8125rem;
	color: var(--ink-soft);
	border-top: 1px solid var(--sand-200);
}

.footer-bottom p {
	margin: 0;
}

.footer-bottom__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.footer-bottom a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (min-width: 40em) {
	.footer-bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* ============================================================
   12. Leistungen: ergänzende Angebote
   ============================================================ */

.services-secondary {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--sand-200);
}

.services-secondary__title {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.service-pair {
	display: grid;
	gap: var(--space-lg) var(--col-gap);
	margin-top: var(--space-lg);
}

.service-pair dt {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--plum-900);
}

.service-pair dd {
	margin: var(--space-2xs) 0 0;
	max-width: 32rem;
	color: var(--ink-soft);
}

@media (min-width: 48em) {
	.service-pair {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   13. Öffnungsstatus
   ============================================================ */

.open-status {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
	padding: var(--space-xs) var(--space-md);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink-soft);
	background: var(--sand-100);
	border: 1px solid var(--sand-200);
	border-radius: var(--radius);
}

.open-status .open-status__dot {
	margin-top: 0.45em;
}

/* Sobald der Text sicher einzeilig passt, wird daraus eine kompakte Pille. */
@media (min-width: 30em) {
	.open-status {
		display: inline-flex;
		align-items: center;
		border-radius: 999px;
	}

	.open-status .open-status__dot {
		margin-top: 0;
	}
}

.open-status.is-open {
	color: var(--plum-800);
	background: var(--plum-50);
	border-color: var(--plum-200);
}

.open-status__dot {
	width: 0.5rem;
	height: 0.5rem;
	flex-shrink: 0;
	border: 1px solid var(--sand-300);
	border-radius: 50%;
}

.is-open .open-status__dot {
	background: var(--plum-600);
	border-color: var(--plum-600);
}

.hours-table .is-today th,
.hours-table .is-today td {
	font-weight: 700;
	color: var(--plum-900);
}

.hours-table .is-today {
	border-bottom-color: var(--plum-300);
}

/* ============================================================
   14. Mobile Kontaktleiste
   ============================================================ */

.mobile-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-xs) var(--gutter);
	padding-bottom: calc(var(--space-xs) + env(safe-area-inset-bottom, 0px));
	background: var(--sand-50);
	border-top: 1px solid var(--sand-200);
}

.mobile-cta__status {
	display: inline-flex;
	white-space: nowrap;
	align-items: center;
	gap: var(--space-xs);
	min-width: 0;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--ink-soft);
}

.mobile-cta__status.is-open {
	color: var(--plum-800);
}

.mobile-cta__btn {
	flex-shrink: 0;
	padding: 0.6rem 1.1rem;
	font-size: 0.9375rem;
}

/* Platz schaffen, damit die Leiste keine Inhalte verdeckt. */
body {
	padding-bottom: 4.25rem;
}

@media (min-width: 64em) {
	.mobile-cta {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}

/* ============================================================
   14b. Einwilligung fuer externe Inhalte
   ============================================================ */

.consent-banner {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	background: var(--sand-50);
	border-top: 1px solid var(--sand-300);
	box-shadow: 0 -8px 24px -18px rgba(33, 26, 30, 0.4);
}

.consent-banner[hidden] {
	display: none;
}

.consent-banner__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
}

.consent-banner__title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--plum-900);
}

.consent-banner__text {
	max-width: 46rem;
	margin-top: var(--space-2xs);
	font-size: var(--text-sm);
	color: var(--ink-soft);
}

@media (min-width: 48em) {
	.consent-banner__inner {
		gap: var(--space-md);
		padding-block: var(--space-md);
	}

	.consent-banner__text {
		font-size: 0.9375rem;
	}
}

/* Ablehnen und Zustimmen sind bewusst gleich gross und gleich erreichbar. */
.consent-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.consent-banner__actions .btn {
	flex: 1 1 10rem;
}

/* Ueber der mobilen Kontaktleiste einblenden, damit sich beide nicht verdecken. */
.consent-banner {
	bottom: 4.25rem;
}

@media (min-width: 48em) {
	.consent-banner__actions .btn {
		flex: 0 0 auto;
	}
}

@media (min-width: 64em) {
	.consent-banner {
		bottom: 0;
	}

	.consent-banner__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--col-gap);
	}

	.consent-banner__actions {
		flex-shrink: 0;
	}
}

/* ============================================================
   15. Typografische Feinheiten
   ============================================================ */

/* Keine automatische Silbentrennung: Sie zerlegt Eigennamen an falschen
   Stellen. Gegen echte Ueberlaeufe schuetzt overflow-wrap auf dem Body. */
p,
li,
dd {
	-webkit-hyphens: none;
	hyphens: none;
}

/* ============================================================
   16. Druckansicht
   ============================================================ */

@media print {
	.site-header,
	.mobile-cta,
	.consent-banner,
	.map-frame,
	.action-row,
	.skip-link,
	.faq-list summary .icon,
	.figure-caption {
		display: none !important;
	}

	body {
		padding-bottom: 0;
		font-size: 11pt;
		color: #000;
		background: #fff;
	}

	.section {
		padding-block: 1rem;
		border-bottom: none;
	}

	.section--alt,
	.service-card,
	.service-card--accent,
	.open-status {
		background: transparent !important;
	}

	.hero-figure,
	.doctor-figure,
	.media-split .media-frame {
		display: none;
	}

	.hero-grid,
	.doctor-grid,
	.two-col,
	.split-grid,
	.services-grid,
	.service-pair {
		display: block;
	}

	/* Antworten im Ausdruck sichtbar machen. */
	.faq-list details {
		display: block;
	}

	.faq-list p {
		display: block !important;
	}

	.service-card,
	.hours-table tr,
	.route-details > div {
		break-inside: avoid;
	}

	a {
		text-decoration: none;
		color: #000;
	}
}

/* ============================================================
   17. Reduzierte Bewegung
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}