@charset "UTF-8";
/* ==========================================================
   ahnen-westhoff-2027.css
   Zentrales Stylesheet für www.ahnen-westhoff.de
   Autor:   Marko Westhoff
   Version: 2.0   09.11.2026

   Ersetzt ahnen-westhoff-zentrale.css und alle per @import
   geladenen Dateien:
     ahnen-westhoff-bildschirm.css, ahnen-westhoff-startseite.css,
     ahnen-westhoff-druckversion.css, ahnen-westhoff-mobil.css,
     test.css, speziellestyles.css, ahnen-westhoff-personenrahmen.css
   (ahnen-westhoff-test.css wurde nicht geladen und entfällt.)

   Änderungen gegenüber den alten Dateien:
   - doppelte Regeln zusammengefasst
   - ungültige Angaben entfernt bzw. korrigiert
   - Druckversion auf die aktuellen Bereiche (#menuoben, #content …)
     angepasst

   AUFBAU
     1.  Grundlagen (Seite, Überschriften, Text, Links)
     2.  Kopfbereich
     3.  Menü
     4.  Inhaltsbereich allgemein
     5.  Rahmen für Abschnitte
     6.  ALTE SEITEN – Gestaltung mit Tabellen
     7.  NEUE SEITEN – Gestaltung mit Flexbox
         7.1 Allgemeine Flexbox
         7.2 Quellenbilder / Meine Quellen
         7.3 Personenrahmen
     8.  Einzelseiten und Sonstiges (früher test.css)
     9.  Footer
     10. Größere Bildschirme   (ab 40em  = 640px)
     11. Tablet / PC            (ab 768px)
     12. Handy                  (bis 40em = 640px)
     13. Druckversion
   ========================================================== */


/* ==========================================================
   1. GRUNDLAGEN
   ========================================================== */

header, body {
	margin: 0;
	padding: 0;
}

body {
	background: url(../grafik/higru.jpg);
}

h1, h2 {
	margin: 0;
	padding: 10px;
	width: 60%;
	text-align: center;
	font-weight: bold;
	font-style: italic;
}

h1 {
	color: yellow;
	font-size: 3.5em;
	border-radius: 10em;
}

h2 {
	color: white;
	font-size: 2.5em;
}

h3 { font-size: 1.5em; color: #8C310A; }
h4 { font-size: 2.0em; color: #8C310A; }
h5, h6 { font-size: 1.2em; color: #8C310A; }

p { color: #8C310A; }

/* Links: rot unterstrichen, bei hover blaugrün ohne Unterstrich */
a       { color: #8C310A; text-decoration: underline; }
a:hover { color: #008C79; text-decoration: none; }

/* Bilder mit Bildunterschrift */
figure { border-color: #8C310A; }

figcaption {
	text-align: center;
	color: #8C310A;
	font-size: 0.8em;
}

.bildueberschrift {
	font-size: 1.5em;
	font-weight: bold;
}

/* Hilfsklassen */
.strong { font-weight: bold; }


/* ==========================================================
   2. KOPFBEREICH
   ========================================================== */

#header {
	background: url(../grafik/kopfzeile_higru.jpg);
	background-size: 100% 100%;   /* Bild füllt den ganzen Kopfbereich */
}

#blockheader {
	width: 100%;
	height: 29px;
	box-sizing: border-box;
}

/* Geburtsurkunde rechts im Kopf */
#kopfbild {
	float: right;
	max-width: 351px;
	max-height: 142px;
	margin-top: -160px;
	margin-right: -30px;
}


/* ==========================================================
   3. MENÜ
   (Menü unten und Menübutton nur auf dem Handy, siehe Abschnitt 12)
   ========================================================== */

#menubutton > a:nth-child(1),
#menuunten {
	display: none;
}

#menuoben {
	background-color: lightgrey;
	margin-top: -10px;
	padding: 15px;
}

#menuoben ul      { margin: 0; padding: 0; }
#menuoben ul li   { display: inline; }
#menuoben ul a {
	padding: 15px 20px;
	font-weight: bold;
	color: black;
	text-decoration: none;
}
#menuoben li:hover {
	padding-top: 10px;
	padding-bottom: 15px;
	background: black;
}
#menuoben li a:hover { color: white; }


/* ==========================================================
   4. INHALTSBEREICH ALLGEMEIN
   ========================================================== */

#content {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;
	padding: 2% 4%;
}

#content p,
#content blockquote {
	padding-left: 20px;
	font-family: Times, "Times New Roman", serif;
	font-size: 1.2em;
	color: #8C310A;
}

/* kleine Abstände – ermöglicht Zusammenschieben der Seite */
#content p {
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 1.2em;
}

/* Textvarianten */
#content p.einleitung,
#content p.quelle,
#content blockquote.einleitung,
#content blockquote.quelle {
	color: grey;
	font-size: 1.0em;
}
#content p.hinweis { color: grey; font-size: 0.8em; }
#content p.normal  { font-size: 1.0em; }
#content p.enkel   { font-size: 0.6em; }

/* Listen von Namen und Orten */
#namensliste p,
#ortsliste p {
	padding-left: 20px;
	text-align: left;
}

.geschichte_westhoff,
.sitemap {
	text-align: left;
}


/* ==========================================================
   5. RAHMEN FÜR ABSCHNITTE
   ========================================================== */

#namensliste, #ortsliste, #infoseite, section {
	padding: 0.5%;
	margin: 1%;
	border: 2px solid grey;
	border-radius: 0 1em 1em 1em;
}


/* ==========================================================
   6. ALTE SEITEN – GESTALTUNG MIT TABELLEN
   Kann entfernt werden, wenn alle Seiten erneuert sind.
   ========================================================== */

#content table,
#content tbody {
	width: 100%;
}

/* Personen, Kinder, Enkel in Tabellen */
#content td.person { vertical-align: top; }
#content td.kinder {
	padding-top: 50px;
	font-size: 0.8em;
	vertical-align: top;
	line-height: 1.1em;
}
#content td.enkel {
	padding-top: 30px;
	font-size: 0.6em;
	vertical-align: top;
}

/* Tabelle auf der Startseite */
#tabellestartseite {
	width: 100%;
	border-collapse: separate;
	padding: 15px;
}
#tabellestartseite td {
	background-color: lightgrey;
	border: 3px solid lightgrey;
	padding: 10px;
}
#tabellestartseite td.bild_mitte {
	background-color: grey;
	padding-left: 2em;
	padding-right: 2em;
}

/* altes Menü als Tabelle */
.menualt {
	text-align: center;
	margin-top: 20px;
}
.menualt table {
	border: 10px;
	padding: 10px;
	background-color: #c0c0c0;
	width: 1000px;
}

/* Familienindex */
.familienindex {
	font-size: 1.2em;
	color: #8C310A;
	text-align: left;
	padding-right: 10px;
}
.familienindex table th { padding: 5px; text-decoration: underline; }
.familienindex table td { padding-right: 20px; }

/* Geschichten / Kurzbeschreibungen */
td.kurzbeschreibung { padding: 20px 80px 40px 20px; font-size: 1.2em; }
th.kurzbeschreibung { padding: 10px 40px 20px 20px; font-size: 1.2em; }

.titel_kurzbeschreibung {
	text-align: left;
	margin: 25px;
}

.geschichten > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1),
.geschichten > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(2) {
	vertical-align: top;
}

/* Bild-Links */
.bild_link    { background-color: #20D9BF; }
.bild_link th { background-color: red; margin: 10px; }


/* ==========================================================
   7. NEUE SEITEN – GESTALTUNG MIT FLEXBOX
   ========================================================== */

/* ---------- 7.1 Allgemeine Flexbox ----------
   Handy: untereinander, ab 768px nebeneinander (Abschnitt 11) */
.flexbox {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}


/* ---------- 7.2 Quellenbilder / Seite "Meine Quellen" ---------- */

/* Abschnitt mit Bildern nebeneinander */
.quellenbilder {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
}
section.quellenbilder { border-color: lightgray; }

.quellenliste {
	display: flex;
	max-width: 97vh;
}

/* Bildrahmen mit Leuchteffekt – gemeinsam für beide Varianten */
.quellenbilder > figure,
.flexbox-quellen > figure {
	border-radius: 15px;
	box-shadow:
		0 0 8px 2px rgba(140, 49, 10, 0.7),
		0 0 15px 5px rgba(0, 128, 128, 0.5);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* weißer Rand zwischen Bild und Rahmen für Kontrast */
.quellenbilder > figure img,
.flexbox-quellen > figure img {
	border-radius: 10px;
	border: 5px solid white;
}

/* Variante 1: .quellenbilder > figure (Bild über Text) */
.quellenbilder > figure {
	position: relative;
	display: inline-block;
	padding: 10px;
}
.quellenbilder > figure img {
	display: block;
	width: 15vw;
	height: auto;           /* Seitenverhältnis bleibt erhalten */
}
.quellenbilder > figure:hover {
	transform: scale(1.05);
	box-shadow:
		0 0 12px 4px rgba(140, 49, 10, 0.9),
		0 0 20px 7px rgba(0, 128, 128, 0.8);
}

/* Variante 2: .flexbox-quellen > figure (Bild neben Text ab 40em,
   siehe Abschnitt 10 und 12) */
.flexbox-quellen > figure {
	text-align: center;
}

div.flexbox-quellen > figure > div > h5 {
	max-width: 25ch;
	overflow-wrap: break-word;   /* lange Wörter umbrechen */
}

.text-content {
	display: flex;
	flex-direction: column;
	flex: 1;                     /* Text nimmt den restlichen Platz ein */
	font-size: 1.3em;
	overflow-wrap: break-word;
}


/* ---------- 7.3 Personenrahmen (Eltern, Heirat, Kinder) ----------
   Weitere Regeln ab 768px in Abschnitt 11 */

div.box-heirat {
	padding: 1%;
	margin: 1%;
	border: 0.2em solid orange;
	border-radius: 3em;
	text-align: center;
}

/* kleines Etikett "Vater", "Mutter", "Kind" über der Box */
div.box-vater::before,
div.box-mutter::before,
div.box-kind-m::before,
div.box-kind-w::before {
	position: relative;
	background: #e8f5e9;
	padding: 0 6px;
	font-size: 12px;
	color: #4CAF50;
	border-radius: 4px;
	border: 1px solid #4CAF50;
	font-weight: 600;
	pointer-events: none;        /* Etikett nicht anklickbar */
	white-space: nowrap;         /* kein Zeilenumbruch */
}
div.box-vater::before  { content: "Vater"; }
div.box-mutter::before { content: "Mutter"; }
div.box-kind-m::before,
div.box-kind-w::before {
	content: "Kind";
	top: -10%;                   /* leicht oberhalb */
}


/* ==========================================================
   8. EINZELSEITEN UND SONSTIGES (früher test.css)
   ========================================================== */

/* Testfarbe – noch benötigt? */
section#bilderreihe { background-color: yellow; }

/* Definitionslisten */
dl, dt, dd { text-align: left; }
dt { color: red;  margin-left: 15px; }
dd { color: blue; margin-left: 25px; }

#auswanderung { color: #8C310A; }


/* ==========================================================
   9. FOOTER
   ========================================================== */

#footer {
	text-align: center;
	margin-top: 60px;
	color: black;
	background: lightgrey;
}
#footer p:nth-child(1)   { padding: 5px; }
#footer > p:nth-child(2) { padding-bottom: 15px; }


/* ==========================================================
   12. HANDY ODER KLEINER BILDSCHIRM  (bis 40em = 640px)
   Steht vor den Abschnitten 10 und 11, damit bei genau 640px
   wie bisher die Regeln für größere Bildschirme gelten.
   ========================================================== */

@media screen and (max-width: 40em) {

	h1, h2 { width: 100%; }
	h4 { padding: 10px; margin: 10px; }

	/* Geburtsurkunde im Kopf und markierte Elemente ausblenden */
	#kopfbild, thead, .nomobil { display: none; }

	#blockheader { width: 100%; max-height: 15px; }

	/* Inhaltsbereich */
	#content     { margin: 0 3% 3% 0; }
	#content img { width: 90%; height: auto; }

	/* --- Menü oben und unten als Knöpfe untereinander --- */
	#menubutton > a:nth-child(1),
	#menuunten {
		display: block;
	}
	#menuoben ul li,
	#menuunten ul li {
		display: block;
		background: grey;
		padding: 8px 16px;
		border: 1px outset gray;
		border-radius: 10px;
	}
	#menuoben ul a,
	#menuunten ul a {
		padding: 10px;
		margin: 10px;
	}
	#menuoben li,
	#menuunten li {
		font-size: 1.5em;
		text-align: center;
	}
	#menuoben li:hover,
	#menuunten li:hover {
		padding-top: 0;
		padding-bottom: 0;
	}
	#menuoben li:hover   { background: darkgrey; }
	#menuoben li.nomobil { display: none; }

	/* --- ALTE SEITEN: Tabellen werden untereinander dargestellt --- */
	table, tbody, tr, td {
		display: block;
		padding: 5px;
	}
	tr { border-bottom: 2px solid #8C310A; }

	/* Spaltenüberschriften weg, stattdessen Text vor jeder Zelle */
	.kurzbeschreibung th,
	.familienindex th,
	#recherche th {
		display: none;
	}

	.familienindex td:nth-child(1)::before { content: "Geburtsjahr: "; }
	.familienindex td:nth-child(2)::before { content: "Familie: "; }
	.familienindex td:nth-child(3)::before { content: "Ort(e): "; }

	.enkel p:nth-child(1)::before { content: "Enkel Kinder von .."; }

	#recherche td:nth-child(1)::before,
	#recherche td:nth-child(2)::before,
	#recherche td:nth-child(3)::before {
		font-weight: bold;
		font-size: 1.4em;
		color: #8C310A;
	}
	#recherche td:nth-child(1)::before { content: "Sonstiges: "; }
	#recherche td:nth-child(2)::before { content: "Ortssuche: "; }
	#recherche td:nth-child(3)::before { content: "Höfe: "; }

	/* --- NEUE SEITEN: Quellenbilder --- */
	.flexbox-quellen > figure {
		display: inline-block;
		padding: 10px;
	}
	.flexbox-quellen > figure img {
		padding-top: 10px;
	}
}


/* ==========================================================
   10. GRÖSSERE BILDSCHIRME  (ab 40em = 640px)
   ========================================================== */

@media (min-width: 40em) {

	/* Quellenbilder: Bild links, Text rechts */
	.flexbox-quellen > figure {
		display: flex;
		align-items: flex-start;
		position: relative;
		gap: 1rem;                /* Abstand zwischen Bild und Text */
		max-width: 60vh;
	}
	.flexbox-quellen > figure img {
		display: block;
		width: 15vw;
		max-width: 150px;
		height: auto;
		object-fit: cover;
	}
}


/* ==========================================================
   11. TABLET / PC  (ab 768px)
   ========================================================== */

@media (min-width: 768px) {

	/* Flexboxen nebeneinander */
	.flexbox {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.flex-container-eltern {
		flex-direction: row;
	}
	.flex-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}

	/* Aufklappbare Bereiche */
	details {
		padding: 2%;
		border: 3px solid lightgrey;
		border-radius: 1em;
	}
	summary {
		color: #8C310A;
		font-size: 1.2em;
	}

	/* Personenrahmen */
	div.eltern,
	div.nachkommen {
		display: flex;
	}

	div.person {
		padding: 1%;
		background: lightgrey;
		border: 15px solid grey;
	}

	div.heirat { padding: 20px; }

	div.kinder {
		padding: 0.5%;
		margin: 1%;
		border: 0.2em solid grey;
		border-radius: 0 1em 1em 1em;
	}

	/* Kind männlich (blau) / weiblich (lachsfarben) */
	div.box-kind-m,
	div.box-kind-w {
		padding: 1%;
		margin: 1%;
		border-width: 0.2em;
		border-style: solid;
		border-radius: 1em;
		min-width: 0;              /* Box darf schmaler werden als ihr längster Text */
		max-width: 40ch;           /* höchstens ca. 40 Zeichen breit */
		overflow-wrap: break-word; /* trennt auch sehr lange Namen */
	}
	div.box-kind-m { border-color: blue; }
	div.box-kind-w { border-color: lightsalmon; }
}


/* ==========================================================
   13. DRUCKVERSION
   ========================================================== */

@media print {

	body {
		font-family: "Times New Roman", Times, serif;
		font-size: 10pt;
	}

	/* Menüs und Randbereiche nicht drucken
	   (#navibereich: alter Name, falls noch auf alten Seiten) */
	#menuoben, #menuunten, #menubutton,
	#navibereich, aside {
		display: none;
	}

	#content a,
	#inhaltsbereich a {
		color: black;
		text-decoration: underline;
	}

	p.slogan::before { content: "Slogan: "; }
}

/* ==========================================================
   E N D E  ahnen-westhoff-2027.css
   ========================================================== */