@charset "UTF-8";
/* ==========================================================================
   Dr. Alexander Horak – Onepager
   ========================================================================== */

:root {
	--ink: #48576b;
	--ink-soft: #5d6a7c;
	--line: #cad4e0;
	--red: #D34C4E;
	--red-dark: #a01a1c;
	--grey: #ececec;
	--tint: #f5f7fa;
	--hours: #76A919;
	--bar-h: 76px;

}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 64px;
}
body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 0.9em; }
strong { font-weight: 600; }

h1, h2, h3 {
	margin: 0;
	font-family: "Minion Pro", "Times New Roman", serif;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--ink);
	line-height: 1.25;
}
h2 { font-size: 1.5rem; letter-spacing: 0.08em; margin-bottom: 0.6em; }
h3 { font-size: 1.05rem; letter-spacing: 0.05em; }

a, a:link, a:visited { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 2px;
}

.wrap {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}
.skip {
	position: absolute; left: -999px; top: 0;
	background: #fff; padding: 10px 14px; z-index: 2000;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn, .btn:link, .btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 10px 22px;
	border: 1px solid var(--ink);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
	cursor: pointer;
}
.btn-termin {
	color:#fff!important;
	background: #8bc02a!important;}

.btn:hover { color: var(--ink); background: var(--tint); }
.btn-primary, .btn-primary:link, .btn-primary:visited {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn svg, .mobile-bar svg {
	flex: none; width: 20px; height: 20px;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Kopf ---------- */
.site-head {
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.site-head .wrap { padding-top: 10px; padding-bottom: 10px; }
.site-head a { display: block; }
.site-head img { width: 100%; max-width: 968px; margin: 0 auto; }

/* ---------- Navigation (klebt oben) ---------- */
.topnav {
	position: sticky;
	top: 0;
	z-index: 800;
	background: #fff;
	border-bottom: 1px solid var(--line);
}
.topnav .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
}
.nav-current {
	font-family: "Minion Pro", "Times New Roman", serif;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Burger-Button (Smartphone / Tablet) */
.burger {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.burger span {
	position: absolute;
	left: 12px;
	width: 24px;
	height: 2px;
	background: var(--ink);
	transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 30px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

/* Menü als Ausklapp-Panel unter der Leiste */
.topnav ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	flex-direction: column;
	margin: 0;
	padding: 4px 16px 16px;
	list-style: none;
	background: #fff;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 10px 24px rgba(72,87,107,0.16);
	max-height: calc(100vh - 60px);
	max-height: calc(100dvh - 60px);
	overflow-y: auto;
}
.topnav ul.open { display: flex; }
.topnav li a:not(.btn) {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 8px 4px;
	font-family: "Minion Pro", "Times New Roman", serif;
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-bottom: 1px dotted var(--line);
}
.topnav li a.on { color: var(--red); }
.menu-cta { margin-top: 14px; }
.menu-cta .btn { width: 100%; }
.nav-cta { display: none; min-height: 44px; padding: 6px 18px; flex: none; }

/* ---------- Hero ---------- */
.hero { position: relative; margin-top: 10px; }
.slides {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--tint);
}
.slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    background-image: url(images/slider-001.jpg);
}
.slides img.on { opacity: 1; }
.hero-card {
	padding: 20px 16px 22px;
	border: 1px solid var(--line);
	border-top: 0;
	background: rgba(255,255,255,0.80);
}
.hero-card h1 {
	font-size: 1.2rem;
	letter-spacing: 0.06em;
}
.hero-card .sub { margin: 6px 0 14px; color: var(--ink-soft); }
.status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 0.95rem;
	font-weight: 600;
}
.status::before {
	content: "";
	width: 12px; height: 10px; border-radius: 50%;
	background: #D34C4E;
}
.status.open::before { background: #2f8f4e; }
.hero-actions { display: grid; gap: 10px; }

/* ---------- Abschnitte ---------- */
section { padding: 44px 0; }
.sec-head { margin-bottom: 22px; }
.sec-head h2 { margin-bottom: 0.25em; }
.sec-head p { margin: 0; color: var(--ink-soft); }

/* ---------- Terminbuchung ---------- */
#termin {
	background: var(--grey);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.book-grid { display: grid; gap: 20px; }
.book-info {
	background: #fff;
	border: 1px solid var(--line);
	padding: 18px 16px;
}
.book-info h3 { margin: 0 0 6px; }
.book-info .btn { width: 100%; margin-top: 8px; }
.hours { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.hours th, .hours td {
	padding: 7px 0;
	text-align: left;
	font-weight: 400;
	border-bottom: 1px dotted var(--line);
	vertical-align: top;
}
.hours th { width: 3.2em; font-weight: 600; }
.hours tr.today th, .hours tr.today td { color: var(--hours); font-weight: 600; }
.book-frame {
	background: #fff;
	border: 1px solid var(--line);
}
.book-frame iframe {
	display: block;
	width: 100%;
	height: 80vh;
	height: 80dvh;
	min-height: 520px;
	max-height: 780px;
	border: 0;
	background: #fff;
}
.book-frame .fallback {
	margin: 0;
	padding: 12px 16px;
	font-size: 0.95rem;
	border-top: 1px solid var(--line);
}
.hint { margin: 0 0 12px; font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Praxis / Gedanke ---------- */
.split { display: grid; gap: 22px; }
.split img { width: 100%; border: 1px solid var(--line); }
.quote {
	margin: 18px 0 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--line);
	font-style: italic;
}

/* ---------- Leistungen ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
}
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 14px 16px 18px; }
.card-body h3 { margin-bottom: 6px; }
.card-body p { margin: 0; font-size: 0.97rem; }
.cta-row { margin-top: 24px; text-align: center; }
.cta-row .btn { width: 100%; }

/* ---------- Team ---------- */
.team { display: grid; gap: 14px; grid-template-columns: 1fr; }
.person {
	display: flex;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	padding: 14px;
}
.person img {
	flex: none;
	width: 96px; height: 96px;
	object-fit: cover;
	border: 1px solid var(--line);
}
.person h3 { margin-bottom: 2px; }
.person p { margin: 0; font-size: 0.97rem; }

/* ---------- Über mich ---------- */
.cv { list-style: none; margin: 0 0 1em; padding: 0; }
.cv li { padding: 8px 0 8px 18px; position: relative; border-bottom: 1px dotted var(--line); }
.cv li::before { content: "•"; position: absolute; left: 2px; color: var(--ink); }
.sig { width: 200px!important; margin-top: 10px; }

/* ---------- Kontakt ---------- */
#kontakt { background: var(--tint); border-top: 1px solid var(--line); }
.contact-grid { display: grid; gap: 22px; }
.map {
	position: relative;
	min-height: 320px;
	border: 1px solid var(--line);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map p { margin: 0 0 12px; font-size: 0.95rem; }
.notruf { margin: 0; }
.notruf p {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px dotted var(--line);
}
.notruf a { font-weight: 600; white-space: nowrap; }
address { font-style: normal; }
.addr-links { display: grid; gap: 10px; margin-top: 14px; }

/* ---------- Fuß ---------- */
footer {
	border-top: 1px solid var(--line);
	padding: 24px 0 18px;
	font-size: 0.95rem;
	text-align: center;
}
footer ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
footer li a { display: inline-block; padding: 8px 0; }
footer .copy { font-size: 0.8rem; }
footer .copy a { color: var(--ink-soft); }

/* ---------- Schnellzugriff (Smartphone) ---------- */
.mobile-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 900;
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 8px;
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: 0 -2px 10px rgba(72,87,107,0.12);
	transition: transform 0.25s ease;
}
.mobile-bar.hide { transform: translateY(110%); }
.mobile-bar .btn { min-height: 52px; padding: 8px 10px; }
body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
	.team { grid-template-columns: repeat(2, 1fr); }
	.hero-actions { grid-template-columns: 1fr 1fr; }
	.cta-row .btn { width: auto; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
	body { padding-bottom: 0; }
	.mobile-bar { display: none; }
	.wrap { padding: 0 24px; }
	.nav-cta { display: inline-flex; }
	.burger, .nav-current, .menu-cta { display: none; }
	.topnav .wrap { justify-content: flex-start; }
	.topnav ul,
	.topnav ul.open {
		display: flex;
		position: static;
		flex: 1;
		flex-direction: row;
		gap: 4px;
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;
	}
	.topnav li a:not(.btn) {
		min-height: 0;
		padding: 14px 12px;
		font-size: 0.95rem;
		white-space: nowrap;
		border-bottom: 3px solid transparent;
	}
	.topnav li a.on { border-bottom-color: var(--red); }
	section { padding: 64px 0; }
	h2 { font-size: 1.7rem; }

	.slides { aspect-ratio: 21 / 9; }
	.hero-card {
		position: absolute;
		left: 24px; bottom: 24px;
		max-width: 430px;
		border-top: 1px solid var(--line);
		padding: 22px 24px 24px;
		box-shadow: 0 6px 24px rgba(72,87,107,0.18);
	}
	.hero-card h1 { font-size: 1.45rem; }

	.book-grid { grid-template-columns: 340px 1fr; align-items: start; }
	.book-info { padding: 22px 22px 24px; position: sticky; top: 76px; }
	.book-frame iframe { height: 680px; max-height: none; }

	.split { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
	.split.rev .split-img { order: 2; }
	.cards { grid-template-columns: repeat(4, 1fr); }
	.contact-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.slides img { transition: none; }
	.burger span { transition: none; }
	.mobile-bar { transition: none; }
}