/* =====================================================================
   nextPHYSIO — gemeinsames Stylesheet für alle Seiten
   =====================================================================

   Palette aus der alten Seite (nextphysio.de, Stand vor dem Umbau):
     Marineblau #00264B   primär   — Überschriften, Links, dunkle Flächen
     Grün       #95C11E   sekundär — Akzente, Buttons, Hover
     Orange     #f39200   tertiär  — Warnungen
     #f5f5f5 / #e8e8e8 / #333 / #999
                          Flächen, Rahmen, Text, Gedämpftes

   Zwei Erscheinungsbilder, wie auf der alten Seite:
     hell   (Standard)  — Inhaltsseiten wie das Impressum
     dunkel (body.dunkel) — die Baustellenseite, wie der alte Hero-Bereich

   Pfade sind RELATIV, damit die Dateien auch direkt von der Platte
   angezeigt werden können. Deshalb bindet das Impressum sie mit ../ ein.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Montserrat — liegt lokal, es wird NICHTS bei Google abgerufen.
   Variable Font mit der Achse wght 100..900: EINE Datei je Zeichensatz
   deckt alle Schnittstärken ab. Lizenz und Herkunft: siehe HERKUNFT.txt
   im selben Ordner (SIL Open Font License 1.1).

   Die Pfade sind relativ zu DIESER Datei, nicht zur HTML-Seite.
   --------------------------------------------------------------------- */
@font-face {
	font-display: swap;
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	src: url("fonts/montserrat-latin.woff2") format("woff2");
	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-display: swap;
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
	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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--navy: #00264B;
	--navy-tief: #001a34;
	--aufhellung: #00335f;
	--gruen: #95C11E;
	--orange: #f39200;

	--hell: #f5f5f5;
	--rahmen: #e8e8e8;
	--tinte: #333333;
	--blass: #999999;

	--gedimmt-dunkel: #bfbfbf;

	/* Überschriften in Montserrat. Für den Fließtext fehlt Roboto noch —
	   die alte Seite hat es selbst gehostet; bis dahin der System-Stack. */
	--schrift-titel: "Montserrat", system-ui, -apple-system, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--schrift-text: system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	--breite: 36rem;
}

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

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

body {
	background: var(--hell);
	color: var(--tinte);
	font-family: var(--schrift-text);
	font-size: 1rem;
	-webkit-font-smoothing: antialiased;
	line-height: 1.65;
	margin: 0;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	color: var(--hell);
	font-family: var(--schrift-titel);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-wrap: balance;
}

h1 {
	font-size: clamp(1.6rem, 4.5vw, 2.2rem);
	margin: 0 0 1.5rem;
}
h2 {
	font-size: 1.15rem;
	margin: 2.5rem 0 0.75rem;
}
h3 {
	font-size: 1rem;
	margin: 2rem 0 0.5rem;
}

p {
	margin: 0 0 1rem;
	text-wrap: pretty;
}

a {
	color: var(--navy);
}
a:hover, a:focus-visible {
	color: var(--gruen);
}

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

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

/* =====================================================================
   Baustellenseite — dunkel, mittig
   ===================================================================== */

body.dunkel {
	align-items: center;
	background: radial-gradient(circle at 50% 0%,
			var(--aufhellung) 0%, var(--navy) 45%, var(--navy-tief) 100%);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	/* mobil: echte Höhe ohne Adressleiste */
	padding: 3rem 1.5rem 2rem;
}

body.dunkel h1 {
	color: #ffffff;
}

body.dunkel p {
	color: var(--gedimmt-dunkel);
}

body.dunkel a {
	color: var(--gedimmt-dunkel);
}

body.dunkel a:hover,
body.dunkel a:focus-visible {
	color: var(--gruen);
}

/* Der Markenspruch aus dem Titel der alten Seite. */
.marke {
	color: var(--gruen);
	font-family: var(--schrift-titel);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 auto 1.5rem auto;
	text-transform: uppercase;
}

.strich {
	background: var(--gruen);
	border: 0;
	height: 3px;
	margin: 2.25rem auto 1.75rem;
	width: 3rem;
}

.hinweis {
	color: var(--gruen);
	font-weight: 700;
	margin-bottom: 0;
}

/* =====================================================================
   Grundgerüst für beide Seiten
   ===================================================================== */

.rahmen {
	margin: auto;
	max-width: var(--breite);
	width: 100%;
}

.logo {
	display: block;
	height: auto;
	margin: 0 auto 2.25rem;
	width: min(100%, 22rem);
}

/* =====================================================================
   Inhaltsseiten — hell, linksbündig, lesbar
   ===================================================================== */

body:not(.dunkel) .rahmen {
	padding: 3rem 1.5rem 4rem;
}

/* Kein eigenes Innenmaß — den Rand gibt .rahmen vor. */
.kopf {
	margin: 0;
}

.kopf .logo {
	margin: 0 0 2rem;
	width: min(70%, 13rem);
}

/* Der helle Grund braucht das farbige Logo — deshalb hier invertiert
   dargestellt. Liegt später eine dunkle Logofassung vor, ersetzt sie das. */
.kopf .logo-invers {
	background: var(--navy);
	border-radius: 6px;
	padding: 0.9rem 1.1rem;
}

.adresse {
	margin: 0 0 1.5rem;
}

.adresse strong {
	font-weight: 700;
}

.klein {
	color: var(--blass);
	font-size: 0.875rem;
}

.rechtstext {
	max-width: 46rem;
}

.rechtstext h2 {
	margin-top: 2.75rem;
}

/* =====================================================================
   Fußzeilen
   ===================================================================== */

.fuss-liste {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: 0.5rem 1.5rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.dunkel .fuss {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 3.5rem;
	max-width: var(--breite);
	padding-top: 1.5rem;
	width: 100%;
}

body.dunkel .fuss a {
	border-bottom: 1px solid transparent;
	text-decoration: none;
}

body.dunkel .fuss a:hover,
body.dunkel .fuss a:focus-visible {
	border-bottom-color: var(--gruen);
}

body:not(.dunkel) .fuss {
	border-top: 1px solid var(--rahmen);
	color: var(--blass);
	font-size: 0.875rem;
	margin-top: 4rem;
	padding-top: 1.5rem;
}

body:not(.dunkel) .fuss .fuss-liste {
	justify-content: flex-start;
}

/* =====================================================================
   Bewegung — nur andeuten, und nur wenn erwünscht
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
	body.dunkel .rahmen {
		animation: auf 600ms ease-out both;
	}
	@keyframes auf {
		from {
			opacity: 0;
			transform: translateY(8px);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}