/* Eigene Anpassungen oben auf dem Start-Bootstrap-"Grayscale"-Theme.
   Grund: lange deutsche Headline verträgt nicht dieselbe breite
   Versalien-Laufweite wie das kurze Original-Demo-Wort "GRAYSCALE". */

.masthead h1.headline-de {
	text-transform: none;
	letter-spacing: normal;
	font-size: clamp(2.1rem, 5vw, 3.6rem);
	line-height: 1.15;
	max-width: 16em;
	/* Original blendet den h1-Text per Gradient nach unten aus (passend für
	   das kurze Demo-Wort "GRAYSCALE" in einer Zeile) — bei unserer längeren,
	   mehrzeiligen Headline würde das die zweite Zeile kaum lesbar machen.
	   Daher hier auf durchgehend deckendes Weiß zurückgesetzt. */
	background: none;
	color: #fff;
	-webkit-text-fill-color: #fff;
	-webkit-background-clip: initial;
	background-clip: initial;
}

/* Grayscale-Original zentriert den Hero-Inhalt strikt in 100vh — bei kürzerem
   Inhalt (kürzere Headline als "GRAYSCALE") entsteht dadurch ein auffällig
   großer Leerraum oberhalb des Textblocks. Feste, moderatere Höhe statt
   100vh sorgt für einen ausgewogeneren Abstand zum oberen Rand. Gilt auch
   mobil: das Original setzt dort ein noch größeres padding (15rem), wodurch
   "Bad Urach · seit 1947" viel zu weit unten sitzt. */
.masthead {
	height: auto;
	min-height: 34rem;
	padding: 8rem 0 6rem;
}
@media (min-width: 992px) {
	.masthead {
		min-height: 38rem;
		padding: 6rem 0 5rem;
	}
}

.masthead .eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .8rem;
	color: rgba(255, 255, 255, .75);
	margin-bottom: 18px;
}

.masthead .signature {
	margin-top: 28px;
	font-style: italic;
	color: rgba(255, 255, 255, .8);
}

/* Portrait-Bild in der Über-uns-Karte etwas gebändigt (Bootstrap-Card ist sonst volle Breite) */
.about-portrait {
	max-width: 260px;
	margin: 0 auto 2rem;
	border-radius: 4px;
}

.timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: 2px solid rgba(255, 255, 255, .25);
	text-align: left;
	max-width: 640px;
}
.timeline li {
	padding: 0 0 22px 26px;
	position: relative;
}
.timeline li::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #a48361;
}
.timeline .jahr {
	display: block;
	font-weight: 700;
	color: #d8bd9c;
	margin-bottom: 2px;
}

/* Impressum/Datenschutz: dieselbe Nav/Footer-Optik, aber als normale Textseite statt Vollbild-Sektionen */
.legal-main {
	max-width: 760px;
	margin: 0 auto;
	padding: 140px 24px 96px;
	color: #3a3530;
}
.legal-main h1 { margin-bottom: 1.5rem; }
.legal-main h2 { font-size: 1.15rem; margin-top: 2rem; }
.legal-main a { color: #7d6249; }