/* Ersatzseite Praxis Trick-Krammer, ohne PHP, ohne externe Ressourcen */

@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("SourceSans3-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("SourceSans3-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url("SourceSans3-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url("SourceSerif4-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 700; font-display: swap; src: url("SourceSerif4-latin-700.woff2") format("woff2"); }

:root {
	--primaer: #1B5892;
	--text: #1D1D1D;
	--berry: #8C3A53;
	--berry-mittel: #792F46;
	--berry-dunkel: #632538;
	--fuss-grau: #E0E0E0;
	--breite: 71.25rem;
}

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

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

body {
	margin: 0;
	font-family: "Source Sans 3", system-ui, sans-serif;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--text);
	background: #fff;
}

h1, h2, h3 {
	font-family: "Source Serif 4", Georgia, serif;
	line-height: 1.15;
	margin: 0 0 1rem;
}
h1 { font-size: 2.93rem; font-weight: 700; letter-spacing: -0.05rem; }
h2 { font-size: 2.344rem; font-weight: 600; }
h3 { font-size: 1.875rem; font-weight: 600; }

p { margin: 0 0 0.75rem; }

a { color: var(--berry); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

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

.sprungmarke {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 10;
	padding: 0.5rem 1rem;
	background: #fff;
	color: var(--primaer);
	font-weight: 600;
}
.sprungmarke:focus { top: 1rem; }

.innen { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

/* Hinweis */
.hinweis {
	background: var(--primaer);
	color: #fff;
	font-size: 1.05rem;
	line-height: 1.45;
}
.hinweis .innen { padding-block: 0.75rem; }
.hinweis p { margin: 0; }
.hinweis a { color: #fff; font-weight: 600; white-space: nowrap; }
.hinweis :focus-visible { outline-color: #fff; }

/* Kopf */
.kopf { background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); position: relative; z-index: 3; }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 6.25rem; }
.logo { display: block; line-height: 0; }
.logo img { width: 22.7rem; max-width: 100%; height: auto; }
.kopf nav ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
.kopf nav a {
	color: var(--text);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.kopf nav a:hover { color: var(--berry); text-decoration: underline; }

/* Heldbild */
.held { position: relative; }
.held img { display: block; width: 100%; height: clamp(20rem, 70vh, 46rem); object-fit: cover; object-position: center; }
.held svg { position: absolute; left: 0; bottom: -1px; width: 100%; height: 100px; fill: #fff; }

/* Box mit drei Spalten */
.box {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: -13rem;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, .25);
	color: #fff;
}
.box > section { padding: 2.5rem 2.75rem 2.75rem; background: url("muster.png") repeat center / 900px auto; }
.box > section:nth-child(1) { background-color: var(--berry); }
.box > section:nth-child(2) { background-color: var(--berry-mittel); }
.box > section:nth-child(3) { background-color: var(--berry-dunkel); }
.box h2 { font-size: 2rem; margin-bottom: 1.5rem; }
.box a { color: #fff; }
.box :focus-visible { outline-color: #fff; }
.box address { font-style: normal; margin-bottom: 1rem; }
.box .klein { font-size: 0.95rem; line-height: 1.45; }

.kontaktliste { list-style: none; margin: 0; padding: 0; }
.kontaktliste li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.kontaktliste svg { width: 1.1rem; height: 1.1rem; flex: none; fill: currentColor; }
.kontaktliste .art { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sprechzeiten { border-collapse: collapse; width: 100%; font-size: 1.1rem; }
.sprechzeiten th { text-align: left; font-weight: 700; font-size: 1rem; padding: 0.4rem 1rem 0.4rem 0; vertical-align: middle; white-space: nowrap; }
.sprechzeiten td { padding: 0.4rem 0; line-height: 1.45; }
.sprechzeiten sup { font-size: 0.75em; }
.fussnote { margin: 1rem 0 0; font-size: 0.9rem; }

.box .nummer { font-size: 1.35rem; font-weight: 600; }

/* Inhalt */
main { position: relative; z-index: 1; }
.willkommen { padding-block: 5rem 3rem; }
.willkommen h1 { text-align: center; margin-bottom: 2.5rem; }
.spalten { columns: 2; column-gap: 3rem; }
.spalten p, .spalten li { font-size: 1.1rem; }
.spalten ul { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.spalten p, .spalten li { break-inside: avoid; }

.notfall { background: #f4eef0; padding-block: 3.5rem; }
.notfall .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; }
.notfall h2 { grid-column: 1 / -1; color: var(--berry-dunkel); }
.notfall .nr { font-size: 1.5rem; font-weight: 700; }

/* Rechtstexte */
.rechtstext { padding-block: 3rem 4rem; max-width: 50rem; }
.rechtstext h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.5rem; }
.rechtstext ul { padding-left: 1.5rem; }
.rechtstext li p { margin: 0 0 0.25rem; }
.rechtstext a { overflow-wrap: anywhere; }
.zurueck { margin-top: 2.5rem; }

/* Fuß */
.fuss { background: linear-gradient(135deg, var(--berry), var(--berry-dunkel)); color: var(--fuss-grau); padding-block: 3rem 2rem; font-size: 1.05rem; }
.fuss a { color: var(--fuss-grau); }
.fuss :focus-visible { outline-color: #fff; }
.fuss .oben { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2rem; }
.fuss address { font-style: normal; }
.fuss address strong { display: block; color: #fff; padding-bottom: 0.4rem; }
.fuss em { display: block; line-height: 1.25; font-size: 0.95rem; }
.fuss .rechtliches { list-style: none; margin: 0; padding: 0; }
.fuss .unten { border-top: 1px dotted var(--fuss-grau); padding-top: 1.25rem; font-size: 0.9rem; line-height: 1.5; }

@media (max-width: 1024px) {
	.box { grid-template-columns: 1fr; margin-top: -8rem; }
	.box > section { padding: 2rem 1.75rem; }
	.fuss .oben { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	body { font-size: 1.1rem; }
	h1 { font-size: 2.2rem; }
	h2 { font-size: 2rem; }
	.innen { width: min(100% - 2rem, var(--breite)); }
	.kopf .innen { min-height: 4.5rem; gap: 1rem; }
	.logo img { width: 15rem; }
	.kopf nav ul { gap: 1rem; }
	.held img { height: clamp(16rem, 45vh, 24rem); }
	.held svg { height: 40px; }
	.box { margin-top: -3rem; border-radius: 0.75rem; }
	.box h2 { font-size: 1.75rem; margin-bottom: 1rem; }
	.willkommen { padding-block: 3rem 2rem; }
	.willkommen h1 { margin-bottom: 1.5rem; }
	.spalten { columns: 1; }
	.notfall .raster { grid-template-columns: 1fr; }
	.fuss .oben { grid-template-columns: 1fr; gap: 1.25rem; }
}

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