/* Uebernommen aus wpNewsletterGermany (handbuch/docs/stil/wpng.css). */
/*
 * Farben des Handbuchs nach dem Redesign-Konzept, Abschnitt 8.1.
 *
 * Zwei Markenfarben: Blau traegt die Struktur, Oliv bedeutet "hier passiert
 * etwas". Im Handbuch gibt es keinen Kaufbutton -- deshalb kommt Oliv hier
 * bewusst nicht vor. Eine Farbe, die auf jeder Seite in Navigationspunkten
 * steckt, verliert genau die Bedeutung, wegen der sie im Konzept steht.
 *
 * Die Verweise tragen darum --wpsg-blau-mittel, nicht Oliv.
 */

:root {
	/* CI */
	--wpsg-blau: #003b6a;
	--wpsg-oliv: #96a008;

	/* Abgeleitete Stufen, gleiche Hue */
	--wpsg-blau-tief: #002440;
	--wpsg-blau-mittel: #00538f;
	--wpsg-blau-zart: #e7eff6;
	--wpsg-oliv-tief: #6f7706;
	--wpsg-oliv-zart: #f2f5da;

	/* Hilfsfarben */
	--wpsg-weiss: #ffffff;
	--wpsg-papier: #f5f7f9;
	--wpsg-linie: #d6dee6;
	--wpsg-text: #14212e;
	--wpsg-text-leise: #5a6875;

	/* Signalfarben */
	--wpsg-ok: #1e7a47;
	--wpsg-achtung: #a06a00;
	--wpsg-fehler: #b3261e;

	/*
	 * Nur fuer die dunkle Darstellung. Das Konzept sieht dafuer die
	 * umgekehrte Neutralskala bei gleichem Farbton vor, nennt aber keine
	 * Werte -- diese beiden sind daraus abgeleitet und auf Kontrast geprueft.
	 */
	--wpsg-blau-hell: #8cbde8;
	--wpsg-papier-dunkel: #101a24;
}

/* ── Helle Darstellung ─────────────────────────────────────────────── */

[data-md-color-scheme='default'] {
	--md-primary-fg-color: var(--wpsg-blau);
	--md-primary-fg-color--light: var(--wpsg-blau-mittel);
	--md-primary-fg-color--dark: var(--wpsg-blau-tief);
	--md-primary-bg-color: var(--wpsg-weiss);

	--md-accent-fg-color: var(--wpsg-blau-mittel);
	--md-typeset-a-color: var(--wpsg-blau-mittel);

	--md-default-bg-color: var(--wpsg-weiss);
	--md-typeset-color: var(--wpsg-text);

	/* Codeblöcke und Tabellen auf dem gebrochenen Weiss statt auf Grau. */
	--md-code-bg-color: var(--wpsg-papier);
	--md-code-fg-color: var(--wpsg-text);

	/* Die Signalfarben hinter den Hinweiskaesten. */
	--md-typeset-mark-color: var(--wpsg-oliv-zart);
}

[data-md-color-scheme='default'] .md-typeset h1,
[data-md-color-scheme='default'] .md-typeset h2,
[data-md-color-scheme='default'] .md-typeset h3,
[data-md-color-scheme='default'] .md-typeset h4 {
	color: var(--wpsg-blau);
}

[data-md-color-scheme='default'] .md-typeset table:not([class]) th {
	background-color: var(--wpsg-blau-zart);
	color: var(--wpsg-blau);
}

[data-md-color-scheme='default'] .md-typeset table:not([class]),
[data-md-color-scheme='default'] .md-typeset table:not([class]) td {
	border-color: var(--wpsg-linie);
}

[data-md-color-scheme='default'] .md-typeset hr,
[data-md-color-scheme='default'] .md-nav__link:focus-visible {
	border-color: var(--wpsg-linie);
}

/* ── Dunkle Darstellung ────────────────────────────────────────────── */

[data-md-color-scheme='slate'] {
	--md-hue: 210;

	--md-primary-fg-color: var(--wpsg-blau-tief);
	--md-primary-fg-color--light: var(--wpsg-blau-mittel);
	--md-primary-fg-color--dark: #001a2e;
	--md-primary-bg-color: var(--wpsg-weiss);

	--md-accent-fg-color: var(--wpsg-blau-hell);
	--md-typeset-a-color: var(--wpsg-blau-hell);

	--md-default-bg-color: var(--wpsg-papier-dunkel);
	--md-typeset-color: #e4ebf2;
}

[data-md-color-scheme='slate'] .md-typeset h1,
[data-md-color-scheme='slate'] .md-typeset h2,
[data-md-color-scheme='slate'] .md-typeset h3,
[data-md-color-scheme='slate'] .md-typeset h4 {
	color: var(--wpsg-blau-hell);
}

[data-md-color-scheme='slate'] .md-typeset table:not([class]) th {
	background-color: #16273a;
	color: var(--wpsg-blau-hell);
}

/* ── Bildschirmfotos ───────────────────────────────────────────────── */

/*
 * Die Bildschirmfotos aus dem Backend stehen sonst rahmenlos auf Weiss und
 * franst am Rand aus -- die meisten haben selbst einen weissen Hintergrund.
 */
.md-typeset img {
	border: 1px solid var(--wpsg-linie);
	border-radius: 2px;
	max-width: 100%;
}

[data-md-color-scheme='slate'] .md-typeset img {
	border-color: #2a3b4d;
}

/*
 * Dass sich eine Abbildung vergroessern laesst, sieht man ihr nicht an.
 * Deshalb die Lupe am Zeiger und ein Rahmen, der beim Ueberfahren die
 * Hausfarbe annimmt. Getroffen wird der Verweis, den mkdocs-glightbox um
 * jede Abbildung legt -- Bilder ohne Lichtbox bleiben unberuehrt.
 */
.md-typeset a.glightbox {
	cursor: zoom-in;
	display: inline-block;
	line-height: 0;
}

.md-typeset a.glightbox img {
	transition: border-color 120ms ease-in-out;
}

.md-typeset a.glightbox:hover img,
.md-typeset a.glightbox:focus-visible img {
	border-color: var(--wpsg-blau);
}

/* Die Bildunterschrift in der Lichtbox: dieselbe Schrift wie im Text. */
.gslide-description .gslide-title {
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 400;
	margin: 0;
}

/* ── Hinweis ueber einer alten Fassung ─────────────────────────────── */

.md-banner--warning {
	background-color: var(--wpsg-oliv-zart);
	color: var(--wpsg-text);
}

.md-banner--warning a {
	color: var(--wpsg-blau-mittel);
}

[data-md-color-scheme='slate'] .md-banner--warning {
	background-color: #3a3410;
	color: #f0eede;
}

[data-md-color-scheme='slate'] .md-banner--warning a {
	color: var(--wpsg-blau-hell);
}

/* ── Pflichtangaben im Fuss ────────────────────────────────────────── */

.wpsg-rechtliches {
	margin-top: 0.3rem;
}

.wpsg-rechtliches a + a::before {
	content: '·';
	margin: 0 0.4em;
	opacity: 0.6;
}

.md-footer-meta .wpsg-rechtliches a {
	color: currentcolor;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}