@charset "UTF-8";
/*
## ----------------------------------------------------
## Praxis am Marbachweg – Wartungs-Landingpage
## Design angelehnt an das Joomla-3-Template „praxis-dr-schott"
## (C) formativ.net
## ----------------------------------------------------
*/

/* ---------- Schriften (lokal, keine Google Fonts) ---------- */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-light-webfont.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-regular-webfont.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/roboto-bold-webfont.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Farben aus dem Template (_color.scss) ---------- */
:root {
	--primary: #CBD656;      /* Lindgrün */
	--primary-dark: #999933;
	--secondary: #002752;    /* Marineblau */
	--secondary-light: #0a3a70;
	--grey-dark: #1e1e1e;
	--grey-prim: #4a4a4a;
	--grey-light: #8f8f8f;
	--grey-pastel: #f2f2f2;
	--white: #ffffff;
	--warning: #C12D01;

	--radius: 4px;
	--shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	--shadow-lg: 0 8px 24px rgba(0,39,82,.12);
	--width-max: 1200px;
}

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

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

body {
	margin: 0;
	font-family: 'Roboto', Arial, Helvetica, Verdana, sans-serif;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--grey-prim);
	background-color: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
	font-weight: 700;
	color: var(--secondary);
	line-height: 1.25;
	margin: 0 0 .75rem;
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--secondary); }
a:hover { color: var(--primary-dark); }

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

.wrapper-content {
	width: 100%;
	max-width: var(--width-max);
	margin: 0 auto;
	padding: 0 16px;
}

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

.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Wartungs-Leiste ---------- */
.maintenance-bar {
	background-color: var(--secondary);
	color: var(--white);
	font-size: .95rem;
}
.maintenance-bar .wrapper-content {
	padding-top: .6rem;
	padding-bottom: .6rem;
	text-align: center;
}
.maintenance-bar p { margin: 0; }
.maintenance-bar a { color: var(--primary); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--white);
	border-bottom: 1px solid var(--grey-light);
}
.site-header .wrapper-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 84px;
}
.logo img {
	height: 60px;
	width: auto;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.header-phone {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--secondary);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- Buttons (wie button.phone / button.date im Template) ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px;
	padding: .55rem 1.1rem;
	border: 0;
	border-radius: var(--radius);
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.btn--primary {
	background-color: var(--primary);
	color: var(--secondary);
}
.btn--primary:hover { background-color: #bcc945; color: var(--secondary); }

.btn--secondary {
	background-color: var(--secondary);
	color: var(--white);
}
.btn--secondary:hover { background-color: var(--secondary-light); color: var(--white); }

.btn--outline {
	background-color: transparent;
	color: var(--secondary);
	box-shadow: inset 0 0 0 2px var(--secondary);
}
.btn--outline:hover { background-color: var(--secondary); color: var(--white); }

.btn--large {
	min-height: 56px;
	padding: .9rem 1.6rem;
	font-size: 1.2rem;
}

/* ---------- Hero (Startseiten-Bild + Kontaktbox) ---------- */
.hero {
	position: relative;
	background-color: var(--primary);
	background-image: url('../img/hero-960.jpg');
	background-size: cover;
	background-position: center;
}
@media (min-width: 961px) {
	.hero { background-image: url('../img/hero.jpg'); }
}
.hero .wrapper-content {
	display: flex;
	justify-content: flex-end;
	padding-top: clamp(2rem, 6vw, 6rem);
	padding-bottom: clamp(2rem, 6vw, 6rem);
}
.hero-box {
	width: 100%;
	max-width: 600px;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	background-color: rgba(255,255,255,.92);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	color: var(--grey-dark);
}
.hero-box .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .9rem;
	padding: .25rem .7rem;
	background-color: var(--primary);
	color: var(--secondary);
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.hero-box .lead {
	font-size: 1.15rem;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.5rem;
}

/* ---------- Sektionen ---------- */
.section {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}
.section--grey { background-color: var(--grey-pastel); }
.section-head {
	max-width: 760px;
	margin-bottom: 2rem;
}
.section-head h2 {
	position: relative;
	padding-bottom: .6rem;
}
.section-head h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 5px;
	background-color: var(--primary);
}

/* ---------- Wartungshinweis-Box ---------- */
.notice {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem 1.25rem;
	align-items: start;
	padding: clamp(1.25rem, 3vw, 2rem);
	background-color: var(--white);
	border-left: 6px solid var(--primary);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.notice-icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--secondary);
	color: var(--primary);
}
.notice-icon .icon { width: 28px; height: 28px; }
.notice h2 { margin-bottom: .5rem; }

/* ---------- Termin-Kachel ---------- */
.booking {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 2rem;
	align-items: center;
	padding: clamp(1.5rem, 4vw, 3rem);
	background-color: var(--secondary);
	border-radius: var(--radius);
	color: var(--white);
	box-shadow: var(--shadow-lg);
}
.booking h2 { color: var(--white); }
.booking .booking-cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .75rem;
}
.booking .booking-cta .btn--outline {
	color: var(--white);
	box-shadow: inset 0 0 0 2px var(--white);
}
.booking .booking-cta .btn--outline:hover {
	background-color: var(--white);
	color: var(--secondary);
}
.booking small {
	display: block;
	color: rgba(255,255,255,.75);
	font-size: .9rem;
	text-align: center;
}
.booking ul {
	margin: 0;
	padding-left: 1.2rem;
}
.booking li::marker { color: var(--primary); }

/* ---------- Karten-Raster ---------- */
.grid {
	display: grid;
	gap: 1.5rem;
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background-color: var(--white);
	border-top: 5px solid var(--primary);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.card-title {
	display: flex;
	align-items: center;
	gap: .6rem;
}
.card-title .icon { color: var(--secondary); width: 1.4em; height: 1.4em; }
/* Button immer am Kartenende, damit sie in einer Reihe stehen */
.card > .btn { margin-top: auto; align-self: flex-start; }
.card > :has(+ .btn) { margin-bottom: 1.25rem; }

/* Öffnungszeiten-Tabelle */
.hours {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1rem;
}
.hours th, .hours td {
	padding: .45rem 0;
	border-bottom: 1px solid var(--grey-pastel);
	text-align: left;
}
.hours th { font-weight: 400; }
.hours td { text-align: right; font-weight: 700; color: var(--secondary); white-space: nowrap; }
.hours tr.is-today th, .hours tr.is-today td { background-color: rgba(203,214,86,.3); }
.hours tr.is-today th { font-weight: 700; padding-left: .5rem; }
.hours tr.is-today td { padding-right: .5rem; }
.hint { font-size: .95rem; color: var(--grey-prim); }

/* Adresse */
address { font-style: normal; margin-bottom: 1rem; }
.contact-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.contact-list li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .3rem 0;
}
.contact-list .icon { color: var(--secondary); }

/* ---------- Pre-Footer & Footer (wie im Template) ---------- */
.pre-footer {
	background-color: var(--grey-pastel);
	padding: 2.5rem 0;
	border-top: 1px solid #dbdbdb;
}
.pre-footer h3 { font-size: 1.1rem; }
.pre-footer p { margin-bottom: .5rem; }

footer.site-footer {
	background-color: var(--grey-prim);
	color: var(--white);
	padding: 1.5rem 0;
	font-size: .95rem;
}
.site-footer .wrapper-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .75rem 2rem;
}
.site-footer nav a {
	color: var(--white);
	margin-right: 1.25rem;
	text-decoration: none;
}
.site-footer nav a:hover { text-decoration: underline; }
.site-footer .copy a {
	color: #c4c4c4;
	text-decoration: none;
}
.site-footer .copy a:hover { text-decoration: underline; }

/* ---------- Mobile Sticky-Terminleiste ---------- */
.mobile-cta {
	display: none;
}

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.legal {
	max-width: 860px;
	padding-top: 2.5rem;
	padding-bottom: 3.5rem;
	overflow-wrap: anywhere;
}
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.45rem; margin-top: 2.25rem; }
.legal h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.legal .back { display: inline-flex; margin-bottom: 1.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid--3 > .card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	.booking { grid-template-columns: 1fr; }
	.hero .wrapper-content { justify-content: center; }
}

@media (max-width: 640px) {
	body { font-size: 1rem; padding-bottom: 72px; }
	.site-header .wrapper-content { min-height: 68px; }
	.logo img { height: 44px; }
	.header-actions .btn { display: none; }
	.header-phone span { display: none; }
	.header-phone {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background-color: var(--secondary);
		color: var(--white);
	}
	.grid--2, .grid--3 { grid-template-columns: 1fr; }
	.grid--3 > .card:last-child { grid-column: auto; }
	.notice { grid-template-columns: 1fr; }
	.hero-actions .btn { flex: 1 1 100%; }
	.btn--large { font-size: 1.1rem; padding: .8rem 1rem; }
	.booking .btn { white-space: nowrap; }
	.card { padding: 1.4rem; }

	.mobile-cta {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		gap: .5rem;
		padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom));
		background-color: var(--white);
		box-shadow: 0 -2px 10px rgba(0,0,0,.15);
	}
	.mobile-cta .btn { flex: 1; padding: .55rem .6rem; white-space: nowrap; }
	.legal-page { padding-bottom: 0; }
	.legal-page .header-actions .btn {
		display: inline-flex;
		min-height: 40px;
		padding: .4rem .7rem;
		font-size: .9rem;
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn { transition: none; }
	.btn:hover { transform: none; }
}

@media print {
	.site-header, .mobile-cta, .maintenance-bar { position: static; }
	.mobile-cta { display: none; }
	.hero { background: none; }
}