/*  JP-Corporate-Identity fuer Zeina - jp-forum.com
 *  ------------------------------------------------------------------
 *  Wird NACH dem <style>-Block aus overall_header.html geladen und
 *  ueberschreibt deshalb auch die dort inline gesetzten Variablen.
 *  Das ist Absicht: so bleibt die Optik erhalten, selbst wenn jemand
 *  im Zeina-Kontrollpanel auf Speichern klickt und dabei die
 *  Panel-Farbe auf den Standard zuruecksetzt.
 *
 *  Palette aus jp-performance.de/css/style.css:
 *    #1d1d1b  Fast-Schwarz    #e21e14  Rot    #ffffff  Weiss
 */

html {
	--jp-ink: #1d1d1b;
	--jp-red: #e21e14;

	/* Kartenkoepfe schwarz statt eingefaerbtem Rot - naeher an der
	   Flaechenaufteilung von jp-performance.de */
	--panel-bg: var(--jp-ink) !important;
}

/* Kopfbereich: schwarze Flaeche mit rotem Abschluss statt Stockfoto
----------------------------------------*/
.header-section .header-image {
	background: var(--jp-ink) !important;
}

.header-section {
	border-bottom: 4px solid var(--jp-red);
}

.header-section h1 {
	/* Wortmarke statt Fliesstext: auf dem schwarzen Grund kommt die
	   invertierte Fassung zum Einsatz, damit das rote JP erhalten bleibt.
	   Der Text bleibt im Dokument stehen, nur ausserhalb des sichtbaren
	   Bereichs, damit Screenreader und Suchmaschinen ihn weiter lesen. */
	background-image: url("../../images/logo-a-invers.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	height: clamp(2.1rem, 5.5vw, 3.6rem);
	margin: 0 0 .35rem;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

/* Ohne geladene Bilder bleibt die Ueberschrift sonst unsichtbar */
@media (prefers-reduced-data: reduce) {
	.header-section h1 {
		background-image: none;
		text-indent: 0;
		font-family: "Anton", "Arial Narrow", Impact, Inter, sans-serif;
		font-size: clamp(2rem, 6vw, 3.75rem);
		text-transform: uppercase;
		height: auto;
	}
}

.header-section p {
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .95rem;
}

/* Ueberschriften in der Anzeigeschrift
----------------------------------------*/
.card-title,
h2.solo,
.page-title {
	font-family: "Anton", "Arial Narrow", Impact, Inter, sans-serif;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Rechtlicher Hinweis aus der Extension jpforum/footer
----------------------------------------*/
.jp-disclaimer {
	max-width: 62rem;
	margin: 0 auto .75rem;
	padding: 0 1rem;
	color: #6b7280;
	font-size: .8125rem;
	line-height: 1.5;
	text-align: center;
}