/*
  style.css
  =========
  Privatpraxis Dr. med. Ulla Theissen - Rekonstruktion (2026).
  Original-CSS nicht erhalten (TYPO3-Systemordner ohne Backup); diese
  Datei wurde anhand der HTML-Struktur und eines Screenshots der alten
  Seite nachgebaut. Da es sich um eine kleine, statische 3-Seiten-Website
  ohne CMS-Unterbau mehr handelt, ist alles in einer Datei zusammengefasst
  statt (wie im ursprünglichen TYPO3-Setup) auf vier Dateien verteilt.
  Die folgenden Abschnitte spiegeln trotzdem die gedankliche Gliederung:

    1. Reset & Grid-System (container / row / col-*)
    2. Layout (Kopf-/Mittel-/Fußbereich)
    3. Typografie & Farben
    4. Responsive Anpassungen
*/


/* ===========================================================
   1. RESET & GRID-SYSTEM
   Klassennamen (container/row/col-*) im HTML folgen bereits
   Bootstrap-Konventionen, daher ein einfaches, kompatibles
   Grid-System als Basis.
   =========================================================== */

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

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

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol {
	margin: 0 0 1em 0;
	padding: 0;
}

ul, ol {
	padding-left: 1.2em;
}

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

a {
	text-decoration: underline;
}

.container {
	width: 100%;
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}

[class^="col-"] {
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

.col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.align-center {
	text-align: center;
}

/* Fallback für AOS-Attribute (data-aos), falls die zugehörige
   Animations-Bibliothek nicht mitgeliefert/geladen wird: Inhalt
   soll trotzdem sichtbar bleiben. */
[data-aos] {
	opacity: 1;
}


/* ===========================================================
   2. LAYOUT
   Kopf-, Mittel- und Fußbereich wirken wie ein einziger,
   nahtloser weißer Block (880px) auf grauem Seitenhintergrund.
   Der weiße Hintergrund gehört deshalb dem .container selbst,
   nicht den vollbreiten #header/#content/#footer-Elementen -
   sonst wäre die ganze Seite links/rechts weiß statt seitlich
   grau zu bleiben.
   =========================================================== */

#header .container,
#content .container,
#footer .container {
	background-color: #ffffff;
}

/* 10px grauer Seitenhintergrund oberhalb des Containers, bevor
   der weiße Bereich beginnt */
#header .container {
	margin-top: 10px;
	padding-top: 40px;
	padding-bottom: 20px;
}

#content .container {
	padding-top: 0;
	padding-bottom: 30px;
}

#footer .container {
	padding-top: 0;
	padding-bottom: 40px;
}

/* Kopfbereich - Name, Untertitel und Navigation zentriert */
#header {
	text-align: center;
}

#header h1 {
	margin-bottom: 4px;
}

#header h2 {
	margin-bottom: 0;
}

/* Navigation (Start | Impressum | Datenschutz) */
#content .align-center {
	margin-bottom: 30px;
}

/* Porträtfoto: immer in Originalgröße (371x400, siehe width/height-
   Attribute im img-Tag), nicht durch den globalen
   "img { max-width:100% }"-Reset verkleinert. */
#content .col-6 img {
	max-width: none;
	width: 371px;
	height: 400px;
	margin: 0;
}

#content .col-6 p {
	margin-bottom: 1.4em;
}

/* Abstand zwischen der Bild/Kontakt-Zeile und einer eventuell
   folgenden weiteren Content-Zeile (z.B. der zweispaltige
   Datenschutz-Text unterhalb von Bild + Kontaktdaten) */
#content .row + .row {
	margin-top: 40px;
}

/* Fußbereich */
#footer .col-12 {
	line-height: 1.6;
	text-align: left;
}


/* ===========================================================
   3. TYPOGRAFIE & FARBEN
   Farbwerte per Pixel-Analyse aus dem Original-Screenshot
   entnommen (keine exakten Originalwerte, sondern nächstliegende
   Schätzung):

     Seitenhintergrund (außen):  #e8e8e8
     Content-Box (innen):        #ffffff
     Überschrift H1:             #000000 (Versalien, weit gesperrt)
     Fließtext:                  #404040
     Footer-Text:                #3e3e3e
     Link-Farbe:                 #22228c (gedecktes Navyblau, unterstrichen)

   Schrift: schmale/leichte serifenlose Grotesk mit sehr feinen
   Strichstärken. "Helvetica Neue" mit font-weight:300 sieht auf
   macOS dünn aus, fällt aber auf Windows meist auf Arial in
   normaler Stärke zurück (kein echter Light-Schnitt vorhanden).
   Stattdessen: der ubiquitäre "System-Font-Stack" (kein Font wird
   heruntergeladen, jedes Betriebssystem nutzt seine eigene, dort
   bereits vorhandene Systemschrift mit echtem Light/Thin-Schnitt:
   San Francisco auf macOS/iOS, Segoe UI auf Windows, Roboto auf
   Android/ChromeOS).

   Überschriften-Hierarchie im Fließtext (z.B. Datenschutz-Seite):
     H3  Oberpunkt   ("1. Datenschutz auf einen Blick")
     H4  Unterpunkt  ("Allgemeine Hinweise")
     H5  Frage/Detail-Überschrift ("Wie erfassen wir Ihre Daten?")
     p   normaler Fließtext
   Jede Ebene ist bewusst deutlich von der jeweils übergeordneten
   unterscheidbar (Größe, Gewicht, Farbe).
   H2 wird ausschließlich als Untertitel im Kopfbereich verwendet.
   =========================================================== */

body {
	background-color: #e8e8e8;
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
}

h1 {
	font-size: 28px;
	font-weight: 200;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #000000;
}

/* H2: ausschließlich Untertitel im Kopfbereich ("Fachärztin für...")
   - fein/dünn, keine Linie. */
h2 {
	font-size: 17px;
	font-weight: 300;
	letter-spacing: 0.5px;
	color: #4d4d4d;
	margin-top: 0;
}

/* H3: Oberpunkte im Fließtext, deutlich stärker als alle
   nachgeordneten Ebenen. */
h3 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: #1a1a1a;
	margin-top: 1.5em;
	padding-bottom: 6px;
	border-bottom: 1px solid #dddddd;
}

/* H4: Unterpunkte innerhalb eines H3-Abschnitts - eine Stufe
   kleiner als H3, ohne Trennlinie. */
h4 {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: #262626;
	margin-top: 1.2em;
}

/* H5: Frage-/Detailüberschriften innerhalb eines H4-Abschnitts
   (z.B. "Wie erfassen wir Ihre Daten?") - deutlich zurückhaltender
   als H4: gleiche Größe wie der Fließtext, aber fett und in einer
   eigenen Farbe, damit sie trotzdem klar als Überschrift und nicht
   als hervorgehobener Fließtext (<strong>) wahrgenommen wird. */
h5 {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.1px;
	color: #3a3a3a;
	margin-top: 1em;
	margin-bottom: 0.3em;
}

p {
	font-size: 15px;
	color: #404040;
}

a {
	color: #22228c;
	text-decoration: underline;
}

a:hover,
a:focus {
	color: #000066;
}

a:visited {
	color: #4a4a9c;
}

#footer .container,
#footer p,
#footer div {
	color: #3e3e3e;
	font-size: 13px;
}

strong {
	font-weight: 600;
	color: #2b2b2b;
}


/* ===========================================================
   4. RESPONSIVE ANPASSUNGEN
   Bild- und Info-Spalte (col-6/col-6) werden auf schmalen
   Bildschirmen gestapelt, Schriftgrößen und Innenabstände
   leicht verkleinert.
   =========================================================== */

@media (max-width: 767px) {
	#content .col-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	#content .col-6 img {
		max-width: 280px;
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}

	h1 {
		font-size: 22px;
		letter-spacing: 2px;
	}

	h2 {
		font-size: 15px;
	}

	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	#header .container {
		padding-top: 25px;
	}
}

@media (max-width: 480px) {
	h1 {
		font-size: 18px;
		letter-spacing: 1.5px;
	}

	#content .col-6 img {
		max-width: 220px;
		width: 100%;
		height: auto;
	}

	p, a {
		font-size: 14px;
	}
}