/*
 * Vier Kopfbereiche statt einem.
 *
 * Vorher benutzten 14 von 17 Vorlagen denselben `.page-hero`: 500 px
 * hoch, grosses Bild, blauer Verlauf, riesige Serifenueberschrift. Bei
 * einer Seite wirkt das stark. Bei zwanzig Seiten hintereinander wirkt
 * es gar nicht mehr - und auf Funktionsseiten steht es im Weg.
 *
 * Der Punkt ist nicht Geschmack, sondern was der Besucher dort will:
 *
 *   Startseite   erzaehlt. Darf gross sein.
 *   Aktuelles    erzaehlt. Bild traegt die Meldung.
 *   Termine      Der Besucher sucht einen Termin. 500 px Bild sind
 *                500 px zwischen ihm und dem, wofuer er gekommen ist.
 *   Kontakt      Ein Formular. Ein grosser Kopf davor ist Dekoration.
 *
 * Gesteuert ueber zwei Klassen am `body`: `hero-knapp` und
 * `hero-ruhig`. So bleiben die 14 Vorlagen unveraendert - ein
 * Hero-Typ pro Template haette bedeutet, in jeder Datei eine Klasse
 * zu pflegen und beim naechsten neuen Template eine zu vergessen.
 *
 * Bis zum 27.08.2026 stand die Zuordnung stattdessen hier, als Liste
 * von rund vierzig einzelnen Auswahlausdruecken. Jede neue Seite
 * musste an sechs Stellen darin nachgetragen werden, und genau das
 * ist schiefgegangen: die vier Seiten hinter der Zeitungsschranke
 * standen in keiner Liste und bekamen den grossen Erzaehlkopf vor
 * einem Passwortfeld. Welche Seite in welche Gruppe gehoert, steht
 * jetzt an einer Stelle - in `ccrr_body_classes()`.
 *
 * Geladen nach site.css.
 */

/* --------------------------------------------------------------
 * Utility: Termine, Clubs, Markt, Dokumente, Suche
 * Der Besucher soll sofort suchen koennen.
 * -------------------------------------------------------------- */
.hero-knapp .page-hero {
	height: 340px;
	min-height: 340px;
}

.hero-knapp .page-hero .container {
	padding-bottom: 34px;
}

.hero-knapp .page-hero h1 {
	font-size: clamp(34px, 4.4vw, 54px);
	margin: 10px 0 8px;
}

/* Der Einleitungssatz darf bleiben, aber knapper gesetzt. */
.hero-knapp .page-hero p {
	font-size: 15px;
	max-width: 560px;
}

/* --------------------------------------------------------------
 * Quiet: Formulare, Rechtliches, Dank, Fehlerseite
 * Kein Bild noetig. Ruhige Flaeche, dann sofort der Inhalt.
 * -------------------------------------------------------------- */
.hero-ruhig .page-hero {
	height: 260px;
	min-height: 260px;
}

.hero-ruhig .page-hero .container {
	padding-bottom: 30px;
}

.hero-ruhig .page-hero h1 {
	font-size: clamp(30px, 3.8vw, 46px);
	margin: 8px 0 6px;
}

/*
 * Auf den ruhigen Seiten steht das Bild dem Text im Weg statt ihm zu
 * helfen: es ist auf 260 px so stark beschnitten, dass ohnehin nichts
 * mehr zu erkennen ist. Statt eines zufaelligen Ausschnitts eine
 * ruhige Flaeche in der Vereinsfarbe.
 */
.hero-ruhig .page-hero img {
	opacity: .28;
}

/* --------------------------------------------------------------
 * Bilder duerfen wieder Bilder sein
 *
 * Der blaue Verlauf lag bisher ueber der gesamten Breite. Fuer die
 * Lesbarkeit der Ueberschrift braucht es ihn aber nur links. Rechts
 * darf das Foto Foto bleiben - bei einem Verein, dessen Thema
 * Fahrzeuge sind, ist das kein Detail.
 * -------------------------------------------------------------- */
.page-hero::after {
	background:
		linear-gradient(90deg,
			rgba(3, 9, 28, .90) 0%,
			rgba(3, 9, 28, .68) 34%,
			rgba(3, 9, 28, .22) 62%,
			rgba(3, 9, 28, .06) 100%),
		linear-gradient(0deg, rgba(3, 9, 28, .58), transparent 46%);
}

/* --------------------------------------------------------------
 * Mobil
 *
 * 440 bis 500 px sind auf einem Telefon fast der ganze Bildschirm.
 * Wer /termine/ auf dem Handy oeffnet, sieht sonst ein Bild und muss
 * wischen, bevor der erste Termin auftaucht.
 * -------------------------------------------------------------- */
@media (max-width: 760px) {
	.page-hero {
		height: 380px;
		min-height: 380px;
	}

	.hero-knapp .page-hero {
		height: 260px;
		min-height: 260px;
	}

	.hero-ruhig .page-hero {
		height: 200px;
		min-height: 200px;
	}
}