@charset "utf-8";

/* ==========================================================================
   fhsb.de - Kurz-URL-Dienst
   Gestaltungsraster und Farbwerte sind von kvkb.de uebernommen, damit beide
   Auftritte zusammenpassen.
   ========================================================================== */

/* --- Schriften -------------------------------------------------------- */

/* Selbst ausgeliefert - es gibt keine Anfrage an einen fremden Server.
   Beides sind Fliessschriften - je Zeichensatzbereich genuegt eine Datei. */

@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-latin.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Open Sans';
	src: url('fonts/opensans-latin-ext.woff2') format('woff2');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Vollkorn';
	src: url('fonts/vollkorn-latin.woff2') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Vollkorn';
	src: url('fonts/vollkorn-latin-ext.woff2') format('woff2');
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Werte ------------------------------------------------------------ */

/* Dreistufig: ohne eigene Wahl entscheidet die Systemeinstellung, eine
   ausdrueckliche Wahl gewinnt in beide Richtungen. kvkb.de kennt nur .dark und
   kommt auf einem dunklen System nicht zurueck nach hell. */

:root {
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-default: 1.5rem;
	--spacing-lg: 3rem;
	--padding-page-horizontal: 15vw;
	/* Aussenkante des Containers, in dem die ganze Seite steht. */
	--spaltenbreite: 60rem;

	--border-radius-default: 0.25rem;
	--shadow-default: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	--shadow-default-inverse: 0 -10px 20px rgba(0, 0, 0, 0.19), 0 -6px 6px rgba(0, 0, 0, 0.23);

	--font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-serif: 'Vollkorn', Georgia, serif;

	--color-float-button-bg: #bfbfbf;
	/* --color-bg steht jetzt je Fassung getrennt: hell bleibt das fhsb-Navy,
	   dunkel ist es ein neutrales Grau (siehe die drei Bloecke unten). */
}

/* Helle Fassung - Vorgabe. */
:root,
:root.light {
	/* Flaechenfarbe der Seite: das fhsb-Navy bleibt in der hellen Fassung
	   unveraendert (weisse Karten stehen darauf ruhig). */
	--color-bg: #35597b;
	--color-surface: #fff;
	--color-surface-dark: #e6e6e6;
	--color-text: #333;

	/* Das Blau von kvkb.de ist #1b95e0. Als Schrift- und Knopffarbe kommt es auf
	   Weiss nur auf 3,3:1 - zu wenig zum Lesen. Die frueher hier stehende, etwas
	   dunklere Fassung #1275b3 erreichte 5,0:1, war mit 82 % Saettigung aber sehr
	   laut: die Knoepfe leuchteten aus der Karte heraus.

	   Jetzt steht hier ein Ton aus derselben gedaempften Blaufamilie wie das
	   Firmenblau der Anbieterin (#325473): gleicher Farbton (208 Grad), halbe
	   Saettigung (41 statt 82 Prozent) - und mit 9,2:1 auf Weiss deutlich besser
	   lesbar als vorher. Bewusst eine Spur dunkler als #325473 selbst, denn
	   #325473 trifft fast genau die Flaechenfarbe der Seite (--color-bg): der
	   Knopf saehe dann aus wie ein Loch in der Karte statt wie eine Schaltflaeche.
	   Die Ueberfahr-Fassung geht noch eine Stufe tiefer. */
	--color-accent: #2b4a66;
	--color-accent-hover: #233d54;
	--color-on-accent: #fff;

	/* Rahmen von Eingabefeldern muessen erkennbar sein (3:1). */
	--color-field-border: #8a8a8a;

	--color-muted: #737373;
	--color-signal: #d50908;
	--color-link: #2b4a66;
	--color-link-hover: #1d3347;
	--color-float-button-fg: #333;
	--color-float-button-bg-active: #333;
	--color-float-button-fg-active: #f2f2f2;
}

/* Dunkle Fassung - einmal fuer die Systemeinstellung, einmal fuer die
   ausdrueckliche Wahl. Die Werte stehen bewusst nur an einer Stelle. */
@media (prefers-color-scheme: dark) {
	:root:not(.light) {
		/* Dunkel ist durchgehend NEUTRALES GRAU, ohne Blaustich - Wunsch der
		   Kundin vom 30.09.2026 ("nachts sind alle Katzen grau"). Jeder Wert hat
		   genau die Helligkeit des Blautons, der vorher hier stand: alle bisher
		   nachgemessenen Kontraste bleiben damit unveraendert. */
		/* Flaechenfarbe der Seite (vorher Blaugrau #45505c). */
		--color-bg: #4f4f4f;
		/* Karten: abgeschattetes Anthrazit, nicht reinschwarz - hebt sich vom
		   Seitengrund ab (1,68:1) und tut den Augen nicht weh. */
		--color-surface: #2d2d2d;
		--color-surface-dark: #3e3e3e;
		/* Fliesstext: gedaempftes Off-White statt reinweiss, 11:1 auf der Karte. */
		--color-text: #e6e6e6;
		/* Knoepfe und Verweise: 5,1:1 auf der Karte (Ueberfahren 4,8:1). */
		--color-accent: #9d9d9d;
		--color-accent-hover: #989898;
		/* Dunkle Schrift auf dem hellen Knopf (5,7:1). */
		--color-on-accent: #242424;
		--color-field-border: #8c8c8c;
		--color-muted: #aaaaaa;
		/* Signalrot (Countdown der Zwischenseite, Fehlerkarte): kraeftiges warmes
		   Rot statt des blassen Lachstons #ff8a86, den die Kundin am 01.10.2026
		   als schmutzig empfand. Gemessen auf der Karte #2d2d2d: 4,87:1 (vorher
		   6,05:1) - ueber den geforderten 4,5:1. Hell bleibt #d50908. */
		--color-signal: #ff6a4d;
		--color-link: #cfcfcf;
		--color-link-hover: #f2f2f2;
		--color-float-button-fg: #333;
		--color-float-button-bg-active: #333;
		--color-float-button-fg-active: #f2f2f2;
	}
}

:root.dark {
	/* Werte gespiegelt zur System-Dark-Fassung oben - bewusst identisch. */
	--color-bg: #4f4f4f;
	--color-surface: #2d2d2d;
	--color-surface-dark: #3e3e3e;
	--color-text: #e6e6e6;
	--color-accent: #9d9d9d;
	--color-accent-hover: #989898;
	--color-on-accent: #242424;
	--color-field-border: #8c8c8c;
	--color-muted: #aaaaaa;
	--color-signal: #ff6a4d; /* vorher #ff8a86, siehe oben */
	--color-link: #cfcfcf;
	--color-link-hover: #f2f2f2;
	--color-float-button-fg: #333;
	--color-float-button-bg-active: #333;
	--color-float-button-fg-active: #f2f2f2;
}

/* Zwei Bildfassungen, sichtbar ist immer genau eine - Muster von kvkb.de. */
[data-mode='dark'] {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not(.light) [data-mode='light'] {
		display: none;
	}

	:root:not(.light) [data-mode='dark'] {
		display: initial;
	}
}

:root.dark [data-mode='light'] {
	display: none;
}

:root.dark [data-mode='dark'] {
	display: initial;
}

:root.light [data-mode='light'] {
	display: initial;
}

:root.light [data-mode='dark'] {
	display: none;
}

/* --- Grundgeruest ------------------------------------------------------ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background: var(--color-bg);
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
}

/* Der Container, in dem die ganze Seite steht: Kopfzeile, Inhalt und Fusszeile
   enden auf derselben Kante, links und rechts bleibt auf breiten Bildschirmen
   die Hintergrundfarbe stehen. Vorher liefen die Balken von Kopf und Fuss ueber
   die volle Breite - auf grossen Schirmen sah der Inhalt darin verloren aus. */
/* Der Block waechst mit seinem Inhalt und wird NICHT ueber die Fensterhoehe
   gezogen. Vorher stand hier min-height:100vh und main trug flex:1 - damit
   klebte die Fusszeile immer am unteren Fensterrand, und auf einem grossen
   Monitor stand zwischen der letzten Karte und der Fusszeile ein halber
   Bildschirm Leerraum. Die Seite sah dadurch auseinandergerissen aus.

   Jetzt stehen Kopfzeile, Karten und Fusszeile als ein zusammenhaengender
   Block direkt untereinander, oben beginnend; darunter bleibt schlicht die
   Hintergrundfarbe stehen. Die kommt von html und body und fuellt das Fenster
   weiterhin ganz aus - es entsteht also keine helle Kante. */
.shell {
	max-width: var(--spaltenbreite);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
}

.wrap {
	padding: var(--spacing-default) var(--spacing-default);
}

/* Ein einziger Abstand fuer alles: zwischen Kopfzeile und erster Karte, zwischen
   den Karten und zwischen letzter Karte und Fusszeile liegt derselbe Wert.
   Vorher waren es oben und unten 3rem, zwischen den Karten 1,5rem - die Karten
   wirkten dadurch nicht gruppiert, sondern verteilt. */
main.wrap {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-default);
	/* Seitlich kein Innenabstand: die Karten enden auf derselben Kante wie
	   Kopf- und Fusszeile. Vorher sassen sie je 1,5rem (auf dem Telefon 1rem)
	   eingerueckt im Container - drei Breiten uebereinander wirkten unruhig
	   (Hinweis der Kundin vom 30.09.2026). main.wrap wiegt schwerer als .wrap,
	   das gilt damit auch fuer schmale Anzeigen. */
	padding-left: 0;
	padding-right: 0;
}

/* --- Karte ------------------------------------------------------------- */

.card {
	background: var(--color-surface);
	border-radius: var(--border-radius-default);
	box-shadow: var(--shadow-default);
	padding: var(--spacing-default);
}

/* --- Kopfzeile --------------------------------------------------------- */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	background: var(--color-surface);
	box-shadow: var(--shadow-default);
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-sm);
	border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
	/* Der Schatten der Kopfzeile soll ueber der Karte darunter liegen. */
	position: relative;
	z-index: 2;
}

.site-header .brand a {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	color: inherit;
}

.site-header .brand img {
	height: 2.25rem;
	width: auto;
}

.site-header .counts {
	font-size: 0.875rem;
	color: var(--color-muted);
	white-space: nowrap;
	flex: 1;
}

.site-header .brand {
	font-weight: 700;
	text-align: center;
	flex: 2;
}

.site-header .about {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-sm);
}

/* --- Fusszeile --------------------------------------------------------- */

.site-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-default);
	background: var(--color-surface);
	box-shadow: var(--shadow-default-inverse);
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-sm);
	font-size: 0.875rem;
	color: var(--color-muted);
	border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
	position: relative;
	z-index: 2;
}

.site-footer .brandmark {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-weight: 700;
}

.site-footer .brandmark img {
	height: 3.25rem;
	width: auto;
}

.site-footer ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacing-xs);
	text-align: right;
}

/* --- Typografie -------------------------------------------------------- */

h1,
h2 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.25;
}

h1 {
	font-size: clamp(1.5rem, 5vw, 2rem);
	margin-bottom: var(--spacing-default);
}

h2 {
	font-size: clamp(1.1rem, 3vw, 1.25rem);
	margin-bottom: var(--spacing-xs);
}

h2 + form {
	margin-bottom: var(--spacing-default);
}

form:last-child {
	margin-bottom: 0;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

h1 a {
	color: inherit;
}

main a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

main a:hover,
main a:focus-visible {
	color: var(--color-link-hover);
	text-decoration-thickness: 2px;
}

main a:focus-visible {
	outline: 2px solid var(--color-link-hover);
	outline-offset: 2px;
	border-radius: 2px;
}

main h1 a,
main h1 a:hover,
main h1 a:focus-visible {
	color: inherit;
	text-decoration: none;
}

.info {
	margin-bottom: var(--spacing-default);
	overflow-wrap: anywhere;
}

.info:last-child {
	margin-bottom: 0;
}

.accent {
	color: var(--color-signal);
	font-weight: 700;
}

#mainurl {
	display: inline-block;
	overflow-wrap: anywhere;
	margin-bottom: var(--spacing-default);
}

/* --- Formulare --------------------------------------------------------- */

form.main {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

form.inline {
	display: inline;
}

input[type='text'] {
	flex: 1 1 18rem;
	min-width: 0;
	min-height: 2.75rem;
	font: inherit;
	color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-field-border);
	border-radius: var(--border-radius-default);
	padding: var(--spacing-xs) var(--spacing-sm);
	transition: border-color 0.2s ease-in-out;
}

input[type='text']:focus-visible {
	border-color: var(--color-accent);
	outline: 2px solid var(--color-accent);
	outline-offset: 1px;
}

input[type='text']::placeholder {
	color: var(--color-muted);
}

input[type='submit'] {
	min-height: 2.75rem;
	font: inherit;
	font-weight: 700;
	color: var(--color-on-accent);
	background: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-default);
	padding: var(--spacing-xs) var(--spacing-default);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

input[type='submit']:hover {
	background: var(--color-accent-hover);
}

/* Gleich breite Schaltflaechen lassen die beiden Formularzeilen buendig enden.
   Der "nein"-Knopf der Weiterleitungsseite steht im Fliesstext und bleibt aussen vor. */
form.main input[type='submit'] {
	min-width: 9rem;
}

input[type='submit']:focus-visible,
.icon-button:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

/* Falle fuer automatisierte Eintraege - fuer Besucher unsichtbar. */
.clname {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: var(--color-accent);
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	border-radius: var(--border-radius-default);
	transition: color 0.2s ease-in-out;
}

.icon-button:hover {
	color: var(--color-accent-hover);
}

.icon-button.is-copied {
	color: var(--color-accent-hover);
}

/* --- Datenraster ------------------------------------------------------- */

.gridTable {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: var(--spacing-xs) var(--spacing-sm);
	overflow-wrap: anywhere;
}

.short-link-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

/* --- Fehlerblock ------------------------------------------------------- */

.errors {
	color: var(--color-signal);
}

.errors-title {
	text-decoration: underline;
	font-weight: 700;
}

.errors ol {
	margin: var(--spacing-xs) 0 var(--spacing-default) var(--spacing-default);
}

/* In der Fehlermeldung steht die eingegebene Adresse. Die kann sehr lang und
   ohne Trennstelle sein - ohne diese Regel schiebt sie die Karte auseinander. */
.errors li {
	overflow-wrap: anywhere;
}

.errors p {
	color: var(--color-text);
}

/* --- Datenschutzhinweis ------------------------------------------------ */

.privacy {
	font-size: 1rem;
	color: var(--color-muted);
}

.privacy strong {
	color: var(--color-text);
}

/* --- Platz fuer Meldungen ---------------------------------------------- */

/* Frueher hielt dieser Bereich 14,5rem Platz frei, auch wenn nichts zu melden
   war. Das war noetig, solange der Inhalt senkrecht mittig stand: eine
   erscheinende Meldung haette sonst die ganze Seite verschoben.

   Der Inhalt steht inzwischen oben. Eine Meldung waechst damit nur nach unten,
   die Eingabefelder darueber bleiben, wo sie sind - der freigehaltene Platz
   hatte keine Aufgabe mehr, riss aber genau die Luecke zwischen Startkarte und
   Datenschutzkarte auf, die auf grossen Monitoren stoerte. Ist nichts zu
   melden, ist der Bereich jetzt schlicht nicht da. */
.messages[aria-hidden='true'] {
	display: none;
}

/* --- Darstellung wechseln --------------------------------------------- */

/* Der Umschalter steht seit 01.10.2026 in der Kopfzeile neben "Über" - vorher
   schwebte er unten rechts unter dem Nach-oben-Knopf, und die beiden stiessen
   zusammen (Hinweis der Kundin). Ein kleiner Kreis in der zweiten
   Flaechenfarbe, der Halbmond (Aufbau von kvkb.de) in der Schriftfarbe:
   10:1 zum Kreis und 12,6:1 zur Kopfzeile (hell), 8,6:1 und 11:1 (dunkel). */
.toggle {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0.375rem;
	border: none;
	border-radius: 50%;
	background: var(--color-surface-dark);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.toggle:hover {
	transform: scale(1.1);
}

/* Auf der Kopfzeile: in der Schriftfarbe, damit der Ring hell wie dunkel
   sichtbar ist. Das bisherige #333 verschwand auf der dunklen Kopfzeile. */
.toggle:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

/* Halbmond: aussen ein Ring, innen zur Haelfte gefuellt. */
.toggle > div {
	width: 100%;
	height: 100%;
	border: 3px solid var(--color-text);
	border-radius: 9999px;
	background: var(--color-text);
	overflow: hidden;
}

.toggle > div > div {
	height: 120%;
	width: 55%;
	transform: translateX(-5%);
	background: var(--color-surface-dark);
}

/* --- Nach oben --------------------------------------------------------- */

/* Aufbau und Aussehen von kvkb.de, fest am Fensterrand, damit er auf breiten
   Schirmen im farbigen Rand neben dem Container sitzt. Seit der Umschalter in
   der Kopfzeile steht, hat er die Ecke unten rechts fuer sich (vorher 5rem). */
.back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 300;
	width: 50px;
	height: 50px;
	padding: 0.5rem;
	border: none;
	border-radius: 50%;
	background: var(--color-float-button-bg);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease-in-out, background-color 0.2s ease;
}

.back-to-top:hover,
.back-to-top:focus-visible,
.back-to-top:active {
	transform: scale(1.1);
	background: var(--color-float-button-bg-active);
}

.back-to-top:focus-visible {
	outline: 2px solid #f2f2f2;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #333, 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.back-to-top.hidden {
	opacity: 0;
	visibility: hidden;
}

/* Pfeil nach oben aus drei Balken. */
.back-to-top span {
	display: block;
	width: 0.3rem;
	background-color: var(--color-float-button-fg);
	border-radius: 999px;
}

.back-to-top:hover span,
.back-to-top:focus-visible span,
.back-to-top:active span {
	background-color: var(--color-float-button-fg-active);
}

.back-to-top span:nth-child(1) {
	height: 1rem;
}

.back-to-top span:nth-child(2),
.back-to-top span:nth-child(3) {
	height: 0.8rem;
	position: absolute;
	top: 13px;
}

.back-to-top span:nth-child(2) {
	transform: rotate(45deg);
	left: 19px;
}

.back-to-top span:nth-child(3) {
	transform: rotate(-45deg);
	left: 26px;
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top:hover,
	.back-to-top:focus-visible,
	.back-to-top:active {
		transform: none;
	}
}

/* --- Schmale Anzeigen -------------------------------------------------- */

@media (max-width: 760px) {
	.wrap {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}

	/* Randlos: der Container braucht auf dem Telefon keinen farbigen Rand. */
	.site-header,
	.site-footer {
		flex-direction: column;
		text-align: center;
		border-radius: 0;
	}

	/* Die Karten laufen hier wie Kopf- und Fusszeile bis an den Rand -
	   dann auch ohne abgerundete Ecken. */
	.card {
		border-radius: 0;
	}

	.site-header .counts,
	.site-header .brand,
	.site-header .about {
		flex: none;
		text-align: center;
	}

	/* "Über" und der Umschalter bleiben zusammen in einer Zeile, mittig. */
	.site-header .about {
		justify-content: center;
	}

	.site-footer .brandmark,
	.site-footer ul {
		align-items: center;
		text-align: center;
	}
}

/* --- Wer Bewegung reduziert haben moechte, bekommt keine ---------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}