@charset "UTF-8";
/*
 * flopi.css -- Designsystem FloPi 34
 *
 * FF Schenefeld - Verwaltungs und Informationssystem
 * Erstellt am 19.09.26 von Henrik Schulz
 *
 * Ersetzt Materialize 0.100.2 vollstaendig: Farben, Typografie, Grid,
 * Formulare und Tabellen. Die Farb- und Schriftwerte stammen aus dem
 * Stylesheet von feuerwehr-schenefeld.de, damit Verwaltung und
 * oeffentliche Seite dasselbe Erscheinungsbild haben.
 *
 * Aufbau:
 *   1. Design-Tokens
 *   2. Grundlagen und Typografie
 *   3. Layout (Kopf, Menue, Inhalt, Fuss)
 *   4. Grid (Ersatz fuer das Materialize-Grid)
 *   5. Karten und Kacheln
 *   6. Formulare
 *   7. Tabellen
 *   8. Hilfsklassen und Altlasten-Bruecke
 *   9. Bausteine anstelle von jQuery UI
 *  10. Druck
 */

/* ============================================================
   1. Design-Tokens
   ============================================================ */

:root {
	/* CI-Farben, ausgelesen aus feuerwehr-schenefeld.de */
	--ci-blau: #201c5d;
	--ci-blau-hell: #62608d;
	--ci-rot: #d2232a;
	--ci-rot-dunkel: #a61c21;
	--ci-akzent: #0788ca;

	/* Flaechen und Text */
	--grund: #ffffff;
	--grund-2: #f6f6f7;
	--grund-3: #ededef;
	--text: #4b4a4d;
	--text-leise: #79787d;
	--linie: #e8e8e8;
	--linie-stark: #d4d4d8;
	--auf-blau: #ffffff;
	--auf-rot: #ffffff;

	/* Kopfleiste und Fuss bleiben in beiden Darstellungen dunkel,
	   damit das Logo und die weisse Schrift darauf funktionieren. */
	--zierflaeche: #201c5d;
	--auf-zierflaeche: #ffffff;

	/* Signalfarben, bewusst getrennt von den CI-Farben */
	--gut: #1b7f4b;
	--warn: #9a6700;
	--krit: #d2232a;

	/* Schriften. Times New Roman ist die Hausschrift der Website. */
	--serif: "Times New Roman", Times, serif;
	--sans: "Source Sans 3", "Source Sans Pro", -apple-system,
		"Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	/* Abstaende */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;

	--radius: 3px;
	--menue-breite: 240px;
	--schatten: 0 1px 2px rgba(32, 28, 93, .06),
		0 4px 14px rgba(32, 28, 93, .05);
}

/* Dunkles Erscheinungsbild nach Systemeinstellung */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--grund: #17161d;
		--grund-2: #1e1d26;
		--grund-3: #272630;
		--text: #dcdbe0;
		--text-leise: #9b9aa3;
		--linie: #32313c;
		--linie-stark: #454451;
		--ci-blau: #b0ade0;
		--ci-blau-hell: #8b88bd;
		--ci-rot: #ff6b70;
		--ci-akzent: #4bb6e8;
		--auf-blau: #17161d;
		--auf-rot: #17161d;
		--gut: #5ec489;
		--warn: #e0b252;
		--krit: #ff6b70;
		--zierflaeche: #15123a;
		--auf-zierflaeche: #ffffff;
		--schatten: 0 1px 2px rgba(0, 0, 0, .4),
			0 4px 14px rgba(0, 0, 0, .3);
	}
}

:root[data-theme="dark"] {
	--grund: #17161d;
	--grund-2: #1e1d26;
	--grund-3: #272630;
	--text: #dcdbe0;
	--text-leise: #9b9aa3;
	--linie: #32313c;
	--linie-stark: #454451;
	--ci-blau: #b0ade0;
	--ci-blau-hell: #8b88bd;
	--ci-rot: #ff6b70;
	--ci-akzent: #4bb6e8;
	--auf-blau: #17161d;
	--auf-rot: #17161d;
	--gut: #5ec489;
	--warn: #e0b252;
	--krit: #ff6b70;
	--zierflaeche: #15123a;
	--auf-zierflaeche: #ffffff;
	--schatten: 0 1px 2px rgba(0, 0, 0, .4),
		0 4px 14px rgba(0, 0, 0, .3);
}

/* ============================================================
   2. Grundlagen und Typografie
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--grund);
	color: var(--text);
	font-family: var(--serif);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

/* Ueberschriften: Source Sans, Versalien, gesperrt.
   Die Zweifarbigkeit liefert ueberschrift_ci() in functions.php. */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .075em;
	line-height: 1.3;
	color: var(--ci-blau);
	margin: 0 0 var(--sp-2);
	text-wrap: balance;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; letter-spacing: .085em; }
h4 { font-size: 13px; letter-spacing: .09em; }
h5,
h6 { font-size: 12px; letter-spacing: .1em; color: var(--text-leise); }

/* Farbanteile der Ueberschriften */
.ci-b { color: var(--ci-blau); }
.ci-r { color: var(--ci-rot); }

p { margin: 0 0 var(--sp-3); }

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

a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--ci-akzent);
	outline-offset: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--linie);
	margin: var(--sp-4) 0;
}

small { font-size: 13px; color: var(--text-leise); }

code,
pre,
kbd {
	font-family: var(--mono);
	font-size: .88em;
}

code {
	background: var(--grund-3);
	padding: 1px 5px;
	border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* Trennlinie unter Ueberschriften */
.rule {
	height: 1px;
	background: var(--linie);
	margin: var(--sp-2) 0 var(--sp-4);
	border: 0;
}

/* ============================================================
   3. Layout
   ============================================================ */

header {
	position: sticky;
	top: 0;
	z-index: 40;
}

.kopfleiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	background: var(--zierflaeche);
	color: var(--auf-zierflaeche);
	padding: 0 var(--sp-4);
	padding-top: env(safe-area-inset-top, 0px);
	min-height: 56px;
	border-bottom: 3px solid var(--ci-rot);
}

.kopf-links,
.kopf-rechts {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.marke {
	font-family: var(--sans);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--auf-zierflaeche);
}

.marke:hover { text-decoration: none; }

/* Schaltflaechen in der Kopfleiste stehen auf blauem Grund und
   brauchen deshalb eine eigene Farbgebung. */
.kopfleiste .btn,
.kopfleiste .btn.hell {
	margin: 0;
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, .5);
}

.kopfleiste .btn:hover,
.kopfleiste .btn.hell:hover {
	background: rgba(255, 255, 255, .14);
	border-color: #ffffff;
	color: #ffffff;
}

.kopfleiste .btn.rot {
	background: var(--ci-rot);
	border-color: var(--ci-rot);
	color: #ffffff;
}

.kopfleiste .btn.rot:hover {
	background: var(--ci-rot-dunkel);
	border-color: var(--ci-rot-dunkel);
}

/* Menueschalter, nur auf schmalen Schirmen sichtbar */
.menue-schalter {
	display: none;
	appearance: none;
	background: none;
	border: 0;
	color: var(--auf-zierflaeche);
	cursor: pointer;
	padding: var(--sp-2);
	line-height: 0;
	border-radius: var(--radius);
}

.menue-schalter:hover { background: rgba(255, 255, 255, .12); }

/* Seitenmenue */
.seitenmenue {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--menue-breite);
	background: var(--grund-2);
	border-right: 1px solid var(--linie);
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 50;
	padding-bottom: var(--sp-6);
}

.menue-logo {
	padding: var(--sp-4) var(--sp-4) var(--sp-3);
	border-bottom: 1px solid var(--linie);
	background: var(--grund);
}

.menue-logo img { display: block; width: 100%; height: auto; }

.menue-benutzer {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--linie);
}

.menue-benutzer img,
.menue-benutzer .platzhalter {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--ci-blau);
	color: var(--auf-blau);
	display: grid;
	place-items: center;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
}

.menue-benutzer .name {
	display: block;
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.3;
}

.menue-benutzer .email {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	color: var(--text-leise);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.seitenmenue ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.seitenmenue > ul { padding-top: var(--sp-2); }

.seitenmenue a {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 7px var(--sp-4);
	font-family: var(--sans);
	font-size: 13.5px;
	color: var(--text);
	text-decoration: none;
	border-left: 3px solid transparent;
}

.seitenmenue a:hover {
	background: var(--grund-3);
	text-decoration: none;
}

.seitenmenue a.aktiv,
.seitenmenue a[aria-current] {
	border-left-color: var(--ci-rot);
	color: var(--ci-blau);
	font-weight: 600;
	background: var(--grund-3);
}

/* Zwischenueberschrift im Menue */
.seitenmenue .gruppe {
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--text-leise);
	padding: var(--sp-3) var(--sp-4) var(--sp-1);
}

/* Untermenue */
.seitenmenue ul ul a {
	padding-left: var(--sp-6);
	font-size: 13px;
	color: var(--text-leise);
}

.seitenmenue .trenner {
	height: 1px;
	background: var(--linie);
	margin: var(--sp-2) 0;
}

/* Abdunklung hinter dem ausgefahrenen Menue */
.menue-schatten {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 45;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.menue-schatten[hidden] { display: none !important; }

/* Inhaltsbereich */
main {
	flex: 1 0 auto;
	background: var(--grund-2);
	padding: var(--sp-4);
	padding-left: calc(var(--menue-breite) + var(--sp-4));
}

/* Ohne Anmeldung gibt es kein Menue, dann auch kein Einruecken. */
body.ohne-menue main { padding-left: var(--sp-4); }

.inhalt {
	max-width: 1180px;
	margin: 0 auto;
}

footer {
	background: var(--zierflaeche);
	color: var(--auf-zierflaeche);
	font-family: var(--sans);
	font-size: 12.5px;
	padding: var(--sp-4);
	padding-left: calc(var(--menue-breite) + var(--sp-4));
	padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}

body.ohne-menue footer { padding-left: var(--sp-4); }

footer a { color: var(--auf-zierflaeche); text-decoration: underline; }

/* --- Schmale Schirme: Menue faehrt aus --- */
@media (max-width: 992px) {
	.menue-schalter { display: block; }

	.seitenmenue {
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: var(--schatten);
	}

	.seitenmenue.offen { transform: translateX(0); }

	main,
	footer { padding-left: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
	.seitenmenue { transition: none; }
}

/* ============================================================
   4. Grid -- Ersatz fuer das Materialize-Grid
   ============================================================
   Bildet .row und .col s/m/l nach, damit die vorhandenen
   Inhaltsdateien unveraendert weiterlaufen. 12 Spalten.
   ============================================================ */

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--sp-2) * -1);
	margin-right: calc(var(--sp-2) * -1);
}

.row > .col {
	padding-left: var(--sp-2);
	padding-right: var(--sp-2);
	width: 100%;
	min-width: 0;
}

/* Kleine Schirme (Grundbreite) */
.col.s1  { width: 8.3333%; }
.col.s2  { width: 16.6666%; }
.col.s3  { width: 25%; }
.col.s4  { width: 33.3333%; }
.col.s5  { width: 41.6666%; }
.col.s6  { width: 50%; }
.col.s7  { width: 58.3333%; }
.col.s8  { width: 66.6666%; }
.col.s9  { width: 75%; }
.col.s10 { width: 83.3333%; }
.col.s11 { width: 91.6666%; }
.col.s12 { width: 100%; }

.col.offset-s1  { margin-left: 8.3333%; }
.col.offset-s2  { margin-left: 16.6666%; }
.col.offset-s3  { margin-left: 25%; }
.col.offset-s4  { margin-left: 33.3333%; }
.col.offset-s6  { margin-left: 50%; }

@media (min-width: 601px) {
	.col.m1  { width: 8.3333%; }
	.col.m2  { width: 16.6666%; }
	.col.m3  { width: 25%; }
	.col.m4  { width: 33.3333%; }
	.col.m5  { width: 41.6666%; }
	.col.m6  { width: 50%; }
	.col.m7  { width: 58.3333%; }
	.col.m8  { width: 66.6666%; }
	.col.m9  { width: 75%; }
	.col.m10 { width: 83.3333%; }
	.col.m11 { width: 91.6666%; }
	.col.m12 { width: 100%; }

	.col.offset-m1 { margin-left: 8.3333%; }
	.col.offset-m2 { margin-left: 16.6666%; }
	.col.offset-m3 { margin-left: 25%; }
	.col.offset-m4 { margin-left: 33.3333%; }
	.col.offset-m6 { margin-left: 50%; }
}

@media (min-width: 993px) {
	.col.l1  { width: 8.3333%; }
	.col.l2  { width: 16.6666%; }
	.col.l3  { width: 25%; }
	.col.l4  { width: 33.3333%; }
	.col.l5  { width: 41.6666%; }
	.col.l6  { width: 50%; }
	.col.l7  { width: 58.3333%; }
	.col.l8  { width: 66.6666%; }
	.col.l9  { width: 75%; }
	.col.l10 { width: 83.3333%; }
	.col.l11 { width: 91.6666%; }
	.col.l12 { width: 100%; }

	.col.offset-l1 { margin-left: 8.3333%; }
	.col.offset-l2 { margin-left: 16.6666%; }
	.col.offset-l3 { margin-left: 25%; }
	.col.offset-l4 { margin-left: 33.3333%; }
	.col.offset-l6 { margin-left: 50%; }
}

.container {
	max-width: 1180px;
	margin: 0 auto;
	width: 100%;
}

/* ============================================================
   5. Karten und Kacheln
   ============================================================ */

.card,
.karte {
	background: var(--grund);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	margin-bottom: var(--sp-4);
}

/* Betonung ueber eine Kante, nicht ueber eine Farbflaeche */
.karte.wichtig { border-top: 3px solid var(--ci-rot); }
.karte.blau { border-top: 3px solid var(--ci-blau); }

.card-content,
.karte-inhalt {
	padding: var(--sp-4);
}

.card-title,
.karte-titel {
	display: block;
	font-family: var(--sans);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--ci-blau);
	margin: 0 0 var(--sp-2);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--linie);
}

.card-action,
.karte-fuss {
	padding: var(--sp-3) var(--sp-4);
	border-top: 1px solid var(--linie);
	background: var(--grund-2);
}

/* Kennzahlen */
.kennzahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: var(--sp-4);
}

.kennzahl {
	background: var(--grund);
	padding: var(--sp-3) var(--sp-4);
}

.kennzahl b {
	display: block;
	font-family: var(--sans);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ci-blau);
	font-variant-numeric: tabular-nums;
}

.kennzahl.rot b { color: var(--ci-rot); }

.kennzahl span {
	font-family: var(--sans);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-leise);
}

/* Beschriftete Wertepaare */
.werte {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-1) var(--sp-4);
	margin: 0;
	font-size: 15px;
}

.werte dt {
	font-family: var(--sans);
	font-size: 10.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-leise);
	padding-top: 4px;
}

.werte dd { margin: 0; }

/* Statusmarken, umrandet statt flaechig */
.marke-status {
	display: inline-flex;
	align-items: center;
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 2px;
	border: 1px solid currentColor;
	white-space: nowrap;
}

.marke-status.brand { color: var(--krit); }
.marke-status.hilfe { color: var(--ci-akzent); }
.marke-status.fehlalarm { color: var(--text-leise); }
.marke-status.gut { color: var(--gut); }
.marke-status.warnung { color: var(--warn); }

/* Meldungen */
.hinweis {
	border: 1px solid var(--linie);
	border-left: 3px solid var(--ci-akzent);
	background: var(--grund);
	padding: var(--sp-3) var(--sp-4);
	margin-bottom: var(--sp-4);
	border-radius: var(--radius);
}

.hinweis.info { border-left-color: var(--ci-akzent); }
.hinweis.fehler { border-left-color: var(--krit); }
.hinweis.erfolg { border-left-color: var(--gut); }
.hinweis.warnung { border-left-color: var(--warn); }

.hinweis p:last-child { margin-bottom: 0; }

/* Kopfzeile aus meldung(): Symbol und Art der Meldung.
   Die Farbe kommt vom Symbol, der Rahmen links wiederholt sie. */
.hinweis-kopf {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin: 0 0 var(--sp-2);
}

.hinweis.info .hinweis-kopf { color: var(--ci-akzent); }
.hinweis.fehler .hinweis-kopf { color: var(--krit); }
.hinweis.erfolg .hinweis-kopf { color: var(--gut); }
.hinweis.warnung .hinweis-kopf { color: var(--warn); }

.hinweis-text > :last-child { margin-bottom: 0; }

/* Die Meldungen des Bestandes bringen oft eigene Listen mit. */
.hinweis-text ul {
	margin: 0 0 var(--sp-2);
	padding-left: 1.2em;
}

/* Kurzmeldungen, frueher Materialize.toast */
.meldungen {
	position: fixed;
	left: 50%;
	bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	width: min(440px, calc(100vw - 2 * var(--sp-4)));
	pointer-events: none;
}

.meldung {
	background: var(--ci-blau);
	color: var(--auf-blau);
	font-family: var(--sans);
	font-size: 14px;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	opacity: 1;
	transition: opacity .3s ease, transform .3s ease;
}

.meldung.geht {
	opacity: 0;
	transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
	.meldung { transition: none; }
}

/* Dialoge aus dem Bestand */
.modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 95;
	width: min(640px, calc(100vw - 2 * var(--sp-4)));
	max-height: 80vh;
	overflow-y: auto;
	background: var(--grund);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
}

.modal.offen { display: block; }

.modal-content { padding: var(--sp-4); }

.modal-footer {
	padding: var(--sp-3) var(--sp-4);
	border-top: 1px solid var(--linie);
	background: var(--grund-2);
	text-align: right;
}

/* ============================================================
   6. Formulare
   ============================================================
   Wichtig: die Selektoren greifen auf Elementebene, weil im
   Bestand rund 490 Felder ohne jede Klasse stehen.
   ============================================================ */

form { margin: 0; }

label,
.label {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-leise);
	margin-bottom: var(--sp-1);
}

/* Grundstil aller Eingabefelder */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input:not([type]),
select,
textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: var(--serif);
	font-size: 15px;
	line-height: 1.4;
	color: var(--text);
	background: var(--grund);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	padding: 8px 10px;
	margin: 0 0 var(--sp-3);
	transition: border-color .12s ease, box-shadow .12s ease;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
	border-color: var(--text-leise);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
	border-color: var(--ci-akzent);
	box-shadow: 0 0 0 3px rgba(7, 136, 202, .16);
	outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
	background: var(--grund-3);
	color: var(--text-leise);
	cursor: not-allowed;
}

input[readonly] { background: var(--grund-2); }

textarea {
	min-height: 110px;
	resize: vertical;
	line-height: 1.5;
}

/* Auswahlfelder: eigenes Pfeilsymbol, damit sie zu den
   Textfeldern passen. Das Symbol steckt als Data-URI drin,
   damit keine zusaetzliche Datei noetig ist. */
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2379787d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 30px;
}

select[multiple] {
	background-image: none;
	padding: 4px;
	min-height: 120px;
	font-family: var(--sans);
	font-size: 14px;
}

select[multiple] option {
	padding: 5px 8px;
	border-radius: 2px;
}

select[multiple] option:checked {
	background: var(--ci-blau) linear-gradient(0deg, var(--ci-blau) 0%, var(--ci-blau) 100%);
	color: var(--auf-blau);
}

/* Ankreuzfelder und Auswahlknoepfe.
   Materialize hat diese frueher versteckt und per Label
   nachgebaut. Jetzt werden die echten Elemente gezeigt. */
input[type="checkbox"],
input[type="radio"] {
	appearance: auto;
	-webkit-appearance: auto;
	width: 16px;
	height: 16px;
	margin: 0 var(--sp-2) 0 0;
	vertical-align: -2px;
	accent-color: var(--ci-blau);
	opacity: 1;
	position: static;
	pointer-events: auto;
}

/* Eine Beschriftung, die ein Ankreuzfeld umschliesst, ist keine
   Feldbeschriftung, sondern laufender Text neben dem Kaestchen.
   Sie bekommt deshalb die Schrift des Fliesstextes. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
input[type="checkbox"] + label,
input[type="radio"] + label {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 400;
	color: var(--text);
	margin-bottom: var(--sp-1);
	cursor: pointer;
}

/* Rueckfall fuer Browser ohne :has() */
.ankreuz-zeile {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 400;
	color: var(--text);
	margin-bottom: var(--sp-1);
	cursor: pointer;
}

input[type="file"] {
	display: block;
	font-family: var(--sans);
	font-size: 13px;
	margin-bottom: var(--sp-3);
	max-width: 100%;
}

input[type="file"]::file-selector-button {
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ci-blau);
	background: var(--grund-2);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	padding: 6px 12px;
	margin-right: var(--sp-3);
	cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
	background: var(--grund-3);
}

/* Schaltflaechen */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
.button,
.Button {
	display: inline-block;
	width: auto;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.4;
	color: var(--auf-blau);
	background: var(--ci-blau);
	border: 1px solid var(--ci-blau);
	border-radius: var(--radius);
	padding: 8px 16px;
	margin: 0 var(--sp-2) var(--sp-3) 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color .12s ease, border-color .12s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.btn:hover,
.button:hover,
.Button:hover {
	background: #2b2678;
	border-color: #2b2678;
	text-decoration: none;
}

:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] input[type="submit"]:hover,
:root[data-theme="dark"] .btn:hover {
	background: #c5c2ec;
	border-color: #c5c2ec;
}

button:disabled,
input[type="submit"]:disabled,
.btn:disabled {
	background: var(--linie-stark);
	border-color: var(--linie-stark);
	color: var(--text-leise);
	cursor: not-allowed;
}

/* Nebensaechliche Schaltflaeche */
.btn-flat,
.btn.hell,
.button.hell {
	background: transparent;
	color: var(--ci-blau);
	border-color: var(--linie-stark);
}

.btn-flat:hover,
.btn.hell:hover,
.button.hell:hover {
	background: var(--grund-3);
	border-color: var(--text-leise);
	color: var(--ci-blau);
}

/* Schaltflaeche fuer loeschende Vorgaenge */
.btn.rot,
.button.rot,
button.rot {
	background: var(--ci-rot);
	border-color: var(--ci-rot);
	color: var(--auf-rot);
}

.btn.rot:hover,
.button.rot:hover,
button.rot:hover {
	background: var(--ci-rot-dunkel);
	border-color: var(--ci-rot-dunkel);
}

/* Feldgruppen */
fieldset {
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: var(--sp-4);
	margin: 0 0 var(--sp-4);
}

legend {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ci-blau);
	padding: 0 var(--sp-2);
}

/* Materialize-Rest: .input-field war dort der Feldwrapper.
   Die schwebenden Beschriftungen entfallen, die Beschriftung
   steht jetzt ueber dem Feld. */
.input-field {
	position: relative;
	margin-bottom: var(--sp-3);
}

.input-field > label {
	position: static;
	transform: none;
	font-size: 11px;
	color: var(--text-leise);
	pointer-events: auto;
}

/* Pflichtfeldkennzeichnung an einer Beschriftung.
   Achtung: greift nur auf Beschriftungen, nicht auf Eingabefelder.
   Ein Eingabefeld traegt .pflichtfeld (siehe Abschnitt 9); bei
   input[type="time"] wuerde ein ::after sonst sichtbar im Feld
   landen. */
label.pflicht::after,
.label.pflicht::after,
.mandatory {
	content: " *";
	color: var(--ci-rot);
}

/* Fehlerhafte Eingabe */
input.fehler,
select.fehler,
textarea.fehler,
input[aria-invalid="true"] {
	border-color: var(--krit);
}

.feld-fehler {
	display: block;
	font-family: var(--sans);
	font-size: 12px;
	color: var(--krit);
	margin: -8px 0 var(--sp-3);
}

/* Felder nebeneinander */
.feld-reihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--sp-3);
}

.feld-reihe > * { flex: 1 1 200px; min-width: 0; }

/* Feldraster
   ------------------------------------------------------------
   Ersetzt das Layout ueber <table>, mit dem die aelteren
   Formulare Beschriftung und Feld nebeneinander gestellt haben.
   Die Beschriftung steht jetzt ueber dem Feld, damit auch lange
   Namen auf schmalen Schirmen lesbar bleiben. */
/* Feste Spaltenzahl statt auto-fit: sonst haengt die Aufteilung
   an der Fensterbreite und Felder rutschen unvorhersehbar in
   die naechste Reihe. Vier Spalten tragen die vier schmalen
   Felder der ersten Reihe (Nummer, Datum, zwei Zeiten). */
.feldsatz {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 var(--sp-4);
	padding: var(--sp-5);
}

.feld { min-width: 0; }

/* Ein schmales Feld belegt eine Spalte, ein gewoehnliches zwei,
   damit Beschriftungen wie "Einsatzbericht fuer Verlinkung"
   nicht umbrechen. */
.feld { grid-column: span 2; }
.feld.schmal { grid-column: span 1; }
.feld.breit { grid-column: span 3; }
.feld.voll { grid-column: 1 / -1; }

@media (max-width: 1100px) {
	.feldsatz { grid-template-columns: repeat(2, 1fr); }

	.feld,
	.feld.breit { grid-column: span 2; }
	.feld.schmal { grid-column: span 1; }
}

/* Der Speicherbereich der Formulare */
.karte > .reihe { padding: var(--sp-4) var(--sp-5); }

@media (max-width: 640px) {
	.feldsatz {
		grid-template-columns: 1fr;
		padding: var(--sp-4);
	}

	/* Auf dem Handy steht jedes Feld fuer sich */
	.feld,
	.feld.schmal,
	.feld.breit,
	.feld.voll { grid-column: 1; }

	.karte > .reihe { padding: var(--sp-4); }
}

/* Reiterleiste innerhalb einer Seite
   ------------------------------------------------------------
   Mehrere Seiten (Telefonlisten, Dienstplan, Gruppen) fuehren
   oben eine Leiste zum Umschalten. Das Markup stammt aus
   Materialize: <nav><div class="nav-wrapper"><ul>. */
main nav {
	margin-bottom: var(--sp-4);
}

main .nav-wrapper {
	border-bottom: 1px solid var(--linie);
}

main nav ul,
main .nav-wrapper ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

main nav ul li,
main .nav-wrapper ul li {
	margin: 0;
}

main nav ul li a,
main .nav-wrapper ul li a {
	display: block;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--text-leise);
	text-decoration: none;
	padding: 9px 14px;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}

main nav ul li a:hover,
main .nav-wrapper ul li a:hover {
	color: var(--ci-blau);
	background: var(--grund-2);
	text-decoration: none;
}

main nav ul li.active a,
main .nav-wrapper ul li.active a {
	color: var(--ci-blau);
	border-bottom-color: var(--ci-rot);
	background: var(--grund-2);
}

/* Materialize-Ausrichtungen innerhalb der Leiste */
main .nav-wrapper ul.left { justify-content: flex-start; }
main .nav-wrapper ul.right { justify-content: flex-end; }

/* ============================================================
   7. Tabellen
   ============================================================ */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin-bottom: var(--sp-4);
	background: var(--grund);
}

th {
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-leise);
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--linie-stark);
	vertical-align: bottom;

	/* Kopfzellen duerfen umbrechen. Breite Tabellen wie der
	   Dienstplan mit sieben Spalten passen dadurch auf den Schirm,
	   statt seitlich hinauszulaufen. */
	overflow-wrap: break-word;
}

td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--linie);
	vertical-align: top;

	/* Lange Inhalte umbrechen lassen, statt die Tabelle breiter
	   werden zu lassen als den Schirm. */
	overflow-wrap: break-word;
}

tbody tr:last-child td { border-bottom: 0; }

tbody tr:hover { background: var(--grund-2); }

/* Zahlen rechtsbuendig und auf gleicher Breite */
td.zahl,
th.zahl,
.zahl { font-variant-numeric: tabular-nums; }

td.rechts,
th.rechts { text-align: right; }

/* Verschachtelte Tabellen dienen im Bestand oft dem Layout.
   Sie bekommen deshalb keine Linien und keinen Hintergrund. */
table table,
td > table {
	margin-bottom: 0;
	background: transparent;
	font-size: inherit;
}

table table td,
table table th {
	border-bottom: 0;
	padding: 2px 6px 2px 0;
}

table table tbody tr:hover { background: transparent; }

/* Breite Tabellen duerfen seitlich rollen, ohne die Seite
   mitzunehmen. Die Bruecke dazu setzt tabellen_umbruch(). */
.tabelle-rollt {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	margin-bottom: var(--sp-4);
	-webkit-overflow-scrolling: touch;

	/* Haelt den Rollbereich auf die eigene Breite fest. Ohne das
	   schiebt eine breite Tabelle die ganze Seite nach rechts,
	   obwohl die Huelle bereits rollt. */
	contain: paint;
}

.tabelle-rollt > table {
	margin-bottom: 0;

	/* Die Tabelle darf innerhalb der Huelle breiter werden als der
	   Schirm, dann rollt die Huelle. Sie soll aber nur so breit
	   werden wie noetig. */
	width: auto;
	min-width: 100%;
}

/* Zellen mit fest eingetragener Hintergrundfarbe
   ------------------------------------------------------------
   Im Bestand tragen Zellen Farben direkt im style-Attribut, etwa
   im Dienstplan zur Kennzeichnung von Sonderdiensten. Die Farben
   sind hell und bedeuten etwas, sie bleiben deshalb erhalten. Die
   Schrift darf dann aber nicht aus den Farbtokens kommen, sonst
   steht im dunklen Erscheinungsbild helle Schrift auf hellem
   Grund. Solche Zellen bekommen darum eine feste dunkle Schrift.

   Erfasst wird jede Zelle mit eigenem Hintergrund im style-Attribut,
   unabhaengig von Schreibweise und Gross- und Kleinschreibung. */
td[style*="background" i],
th[style*="background" i],
tr[style*="background" i] > td,
tr[style*="background" i] > th,
td[bgcolor],
th[bgcolor],
tr[bgcolor] > td,
tr[bgcolor] > th {
	position: relative;
	isolation: isolate;
	color: #1b1a1d;
}

/* Die hinterlegten Farben reichen von hellgrau bis zu vollem Rot.
   Dunkle Schrift allein ist auf den satten Toenen zu schwach, helle
   auf den blassen. Eine milchige Schicht zwischen Farbe und Schrift
   hellt jeden Untergrund so weit auf, dass dunkle Schrift auf allen
   Toenen sicher lesbar wird. Die Farbe bleibt als Kennzeichnung
   erkennbar, und die Werte in den Inhaltsdateien bleiben
   unveraendert. */
td[style*="background" i]::before,
th[style*="background" i]::before,
tr[style*="background" i] > td::before,
tr[style*="background" i] > th::before,
td[bgcolor]::before,
th[bgcolor]::before,
tr[bgcolor] > td::before,
tr[bgcolor] > th::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .62);
	z-index: -1;
	pointer-events: none;
}

/* Verweise und Symbole in solchen Zellen ebenfalls dunkel halten */
td[style*="background" i] a,
th[style*="background" i] a,
tr[style*="background" i] > td a,
td[bgcolor] a,
tr[bgcolor] > td a {
	color: #14135a;
}

td[style*="background" i] .symbol,
tr[style*="background" i] > td .symbol,
td[bgcolor] .symbol {
	color: #1b1a1d;
}

/* Zeilen mit eigener Farbe nicht zusaetzlich einfaerben */
tbody tr[style*="background" i]:hover,
tbody tr[bgcolor]:hover {
	background-image: none;
}

/* Altklasse aus dem Bestand */
table.tabelle { border: 1px solid var(--linie); }

table.striped tbody tr:nth-child(odd) { background: var(--grund-2); }

/* ============================================================
   8. Hilfsklassen und Altlasten-Bruecke
   ============================================================ */

.leise { color: var(--text-leise); }
.klein { font-size: 13px; }
.sans { font-family: var(--sans); }
.mittig { text-align: center; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.voll { width: 100%; }

.abstand-0 { margin-bottom: 0; }
.abstand-1 { margin-bottom: var(--sp-2); }
.abstand-2 { margin-bottom: var(--sp-4); }
.abstand-3 { margin-bottom: var(--sp-5); }

.stapel { display: grid; gap: var(--sp-4); align-content: start; }
.reihe { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.reihe-ende { margin-left: auto; }

.nur-lesbar {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Materialize-Reste, die im Bestand noch vorkommen */
.hide { display: none !important; }

@media (max-width: 600px) {
	.hide-on-small-only { display: none !important; }
}

@media (min-width: 601px) {
	.show-on-small { display: none !important; }
}

@media (max-width: 992px) {
	.hide-on-med-and-down { display: none !important; }
}

.left { float: left; }
.right { float: right; }
.left-align { text-align: left; }
.right-align { text-align: right; }
.center,
.center-align { text-align: center; }

.divider {
	height: 1px;
	background: var(--linie);
	margin: var(--sp-2) 0;
}

/* Materialize-Farbklassen, die im Bestand benutzt werden */
.red-text,
.red { color: var(--ci-rot); }
.green-text { color: var(--gut); }
.blue-text,
.indigo-text { color: var(--ci-blau); }
.grey-text { color: var(--text-leise); }
.white-text { color: var(--auf-blau); }

/* Symbole aus images/icons/sprite.svg
   ------------------------------------------------------------
   Gezeichnete Linien statt Rastergrafiken. Sie nehmen die
   Schriftfarbe an und bleiben dadurch in heller wie dunkler
   Darstellung sichtbar. */
.symbol {
	width: 18px;
	height: 18px;
	flex: none;
	vertical-align: -3px;
	color: var(--text-leise);
	pointer-events: none;
}

a .symbol,
button .symbol {
	color: currentColor;
}

a:hover .symbol { color: var(--ci-akzent); }

.symbol.gross { width: 22px; height: 22px; vertical-align: -5px; }
.symbol.klein { width: 15px; height: 15px; vertical-align: -2px; }

.symbol.gut { color: var(--gut); }
.symbol.warnung { color: var(--warn); }
.symbol.kritisch { color: var(--krit); }
.symbol.blau { color: var(--ci-blau); }

/* Runde Schaltflaechen aus dem Bestand
   ------------------------------------------------------------
   Materialize kannte btn-floating als runden Knopf und
   fixed-action-btn als schwebende Schaltflaeche unten rechts.
   Beide Formen bleiben erhalten, nur schlichter. */
.btn-floating {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0 4px 4px 0;
	border-radius: 50%;
	background: var(--ci-blau);
	border: 1px solid var(--ci-blau);
	color: var(--auf-blau);
	cursor: pointer;
	text-decoration: none;
	vertical-align: middle;
}

.btn-floating:hover {
	background: #2b2678;
	border-color: #2b2678;
	text-decoration: none;
}

.btn-floating .symbol {
	color: currentColor;
	width: 17px;
	height: 17px;
	vertical-align: 0;
}

.btn-floating.btn-small {
	width: 30px;
	height: 30px;
}

.btn-floating.btn-small .symbol {
	width: 15px;
	height: 15px;
}

.btn-floating.btn-large {
	width: 46px;
	height: 46px;
}

/* Farbvorgaben aus dem Bestand */
.btn-floating.rot,
.btn-floating.red {
	background: var(--ci-rot);
	border-color: var(--ci-rot);
	color: var(--auf-rot);
}

.btn-floating.rot:hover,
.btn-floating.red:hover {
	background: var(--ci-rot-dunkel);
	border-color: var(--ci-rot-dunkel);
}

.btn-floating.green {
	background: var(--gut);
	border-color: var(--gut);
	color: #fff;
}

/* Schwebende Schaltflaeche unten rechts */
.fixed-action-btn {
	position: fixed;
	right: var(--sp-4);
	bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
	z-index: 35;
	margin: 0;
	padding: 0;
}

.fixed-action-btn ul {
	list-style: none;
	margin: 0 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px;
}

.fixed-action-btn ul li { margin: 0; }

.fixed-action-btn > a { margin: 0; }

/* Steht in der Leiste nur ein einziger Knopf, braucht es den
   Ausloeser davor nicht. */
.fixed-action-btn.horizontal {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

/* Schaltflaeche, die nur aus einem Symbol besteht */
.symbol-knopf {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0 2px 0 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--text-leise);
	cursor: pointer;
}

.symbol-knopf:hover {
	background: var(--grund-3);
	border-color: var(--linie-stark);
	color: var(--ci-blau);
}

.symbol-knopf .symbol { color: inherit; }

/* Symbole aus der alten Icon-Schrift nicht als Text zeigen */
.material-icons {
	font-family: var(--sans);
	font-size: inherit;
	line-height: 1;
	vertical-align: middle;
}

/* jQuery-UI-Datumsauswahl an das Erscheinungsbild angleichen */
.ui-datepicker {
	font-family: var(--sans) !important;
	font-size: 13px !important;
	border: 1px solid var(--linie-stark) !important;
	border-radius: var(--radius) !important;
	background: var(--grund) !important;
	box-shadow: var(--schatten);
	padding: var(--sp-2) !important;
}

.ui-datepicker .ui-datepicker-header {
	background: var(--ci-blau) !important;
	color: var(--auf-blau) !important;
	border: 0 !important;
	border-radius: 2px !important;
}

.ui-datepicker .ui-datepicker-title { color: var(--auf-blau) !important; }

.ui-datepicker td a,
.ui-datepicker td span {
	text-align: center !important;
	color: var(--text) !important;
	background: transparent !important;
	border: 0 !important;
	padding: 5px !important;
}

.ui-datepicker td a:hover { background: var(--grund-3) !important; }

.ui-datepicker .ui-state-active {
	background: var(--ci-rot) !important;
	color: var(--auf-rot) !important;
	border-radius: 2px;
}

/* CKEditor einfassen, damit er nicht aus der Karte laeuft */
.cke,
.cke_chrome {
	max-width: 100% !important;
	border-color: var(--linie-stark) !important;
	border-radius: var(--radius) !important;
}

/* ============================================================
   9. Bausteine anstelle von jQuery UI
   ============================================================
   Verhalten steckt in include/flopi-ui.js. Das Markup im
   Bestand blieb unveraendert, deshalb greifen die Selektoren
   auf die Kennungen und Klassen, die dort schon stehen.
   ============================================================ */

/* --- Reiterleisten --- */
.reiterleiste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	list-style: none;
	margin: 0 0 -1px;
	padding: 0;
	border-bottom: 1px solid var(--linie);
}

.reiterleiste > li { margin: 0; }

.reiterleiste > li > a {
	display: block;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text-leise);
	background: transparent;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
	padding: var(--sp-3) var(--sp-4);
	white-space: nowrap;
}

.reiterleiste > li > a:hover { color: var(--text); }

.reiterleiste > li.aktiv > a {
	color: var(--ci-blau);
	background: var(--grund);
	border-color: var(--linie);
	/* Deckt die Linie der Leiste unter dem aktiven Reiter ab. */
	box-shadow: 0 1px 0 0 var(--grund);
}

.reiterleiste > li.gesperrt > a {
	color: var(--linie-stark);
	cursor: not-allowed;
}

.reiterleiste > li > a:focus-visible {
	outline: 2px solid var(--ci-akzent);
	outline-offset: -2px;
}

.reitertafel {
	border: 1px solid var(--linie);
	border-radius: 0 var(--radius) var(--radius) var(--radius);
	background: var(--grund);
	padding: var(--sp-5);
}

.reitertafel[hidden] { display: none; }

/* --- Aufklappbare Abschnitte --- */
.klappe-kopf-huelle {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
}

.klappe-kopf {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	width: 100%;
	text-align: left;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	background: var(--grund-2);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-1);
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}

.klappe-kopf:hover { background: var(--grund-3); }

/* Dreieck, das den Zustand anzeigt */
.klappe-kopf::before {
	content: "";
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform .12s ease;
}

.klappe-kopf[aria-expanded="true"]::before {
	transform: rotate(90deg);
}

.klappe-koerper {
	border: 1px solid var(--linie);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: var(--sp-4);
	margin: -1px 0 var(--sp-2);
}

.klappe-koerper[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.klappe-kopf::before { transition: none; }
}

/* --- Dialoge --- */
.dialog-schatten {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
	background: rgba(23, 22, 29, .55);
}

.dialog-schatten[hidden] { display: none; }

body.dialog-offen { overflow: hidden; }

.dialog {
	width: min(540px, 100%);
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: var(--grund);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
}

.dialog-kopf {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--linie);
}

.dialog-titel {
	flex: 1;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ci-blau);
	margin: 0;
}

.dialog-schliessen {
	flex: none;
	font-size: 22px;
	line-height: 1;
	color: var(--text-leise);
	background: none;
	border: none;
	padding: 0 var(--sp-1);
	cursor: pointer;
	box-shadow: none;
}

.dialog-schliessen:hover {
	color: var(--text);
	background: none;
}

.dialog-koerper {
	flex: 1;
	overflow-y: auto;
	padding: var(--sp-5);
}

.dialog-koerper > :last-child { margin-bottom: 0; }

.dialog-fuss {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	border-top: 1px solid var(--linie);
	background: var(--grund-2);
}

/* Die Symbole der alten Dialoge sind ersatzlos entfallen. */
.dialog .ui-icon { display: none; }

/* --- Vorschlagslisten --- */
.vorschlag-huelle {
	position: relative;
	display: block;
}

.vorschlaege {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 320px;
	overflow-y: auto;
	list-style: none;
	margin: -10px 0 0;
	padding: var(--sp-1);
	background: var(--grund);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
}

.vorschlaege[hidden] { display: none; }

.vorschlag {
	font-family: var(--serif);
	font-size: 15px;
	color: var(--text);
	padding: 6px var(--sp-3);
	border-radius: 2px;
	cursor: pointer;
}

.vorschlag.markiert,
.vorschlag:hover {
	background: var(--ci-blau);
	color: var(--auf-blau);
}

.vorschlag-gruppe {
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-leise);
	padding: var(--sp-3) var(--sp-3) var(--sp-1);
	border-top: 1px solid var(--linie);
	margin-top: var(--sp-1);
}

.vorschlag-gruppe:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: var(--sp-1);
}

/* --- Datumsauswahl neben einem Textfeld ---
   Das Textfeld behaelt Name und Format, der Waehler daneben
   dient nur zum Aussuchen. Er zeigt deshalb nur sein Symbol. */
.datum-waehler {
	width: 2.2em;
	min-width: 0;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 var(--sp-3) var(--sp-1);
	padding: 8px 4px;
	color: transparent;
	cursor: pointer;
}

/* Der Browser zeichnet den Text des Feldes selbst; er wird
   ausgeblendet, das Kalendersymbol bleibt. */
.datum-waehler::-webkit-datetime-edit,
.datum-waehler::-webkit-inner-spin-button,
.datum-waehler::-webkit-clear-button { display: none; }

.datum-waehler::-webkit-calendar-picker-indicator {
	color: var(--text-leise);
	opacity: 1;
	cursor: pointer;
	padding: 0;
}

.mit-datumswahl {
	display: inline-block;
	width: auto;
	max-width: 9em;
	vertical-align: middle;
}

/* --- Klassen aus jQuery UI, die der Bestand noch setzt ---
   Der Alarmmonitor markiert fehlerhafte Felder ueber
   ui-state-error und Hinweise ueber ui-state-highlight. Das
   Skript dort bleibt unveraendert, die Klassen bekommen hier
   ihre Bedeutung zurueck. */
.ui-state-error,
input.ui-state-error,
select.ui-state-error,
textarea.ui-state-error {
	border-color: var(--krit);
	box-shadow: 0 0 0 3px rgba(210, 35, 42, .16);
}

.ui-state-highlight {
	color: var(--warn);
	font-weight: 600;
}

.validateTips {
	font-family: var(--sans);
	font-size: 13px;
	color: var(--text-leise);
	margin: 0 0 var(--sp-3);
}

/* Diese beiden taten nur bei jQuery UI etwas. */
.ui-widget-content,
.ui-corner-all { border-radius: var(--radius); }

/* --- Pflichtfelder --- */
/* Ein noch leeres Pflichtfeld bekommt nur einen farbigen Rand.
   Frueher wurde die ganze Flaeche dunkelrot gefuellt, was den
   eigenen Text unlesbar machte. */
.pflichtfeld.offen,
textarea.pflichtfeld.offen,
select.pflichtfeld.offen {
	border-color: var(--krit);
}

.pflichtfeld.offen:focus {
	border-color: var(--krit);
	box-shadow: 0 0 0 3px rgba(210, 35, 42, .16);
}

/* Der Stern in der Beschriftung und in der Zeile unter dem
   Formular. Er haengt mit einem geschuetzten Abstand am letzten
   Wort, damit er bei einer langen Beschriftung nicht allein in
   die naechste Zeile rutscht und dort wie ein Teil des Feldes
   darunter aussieht. */
.pflicht-stern {
	color: var(--krit);
	font-weight: 700;
}

.pflicht-stern::before {
	content: "\00a0";
}

/* Feld, das aus einer Alarmierung uebernommen wurde */
.uebernommen {
	border-color: var(--gut);
	box-shadow: inset 3px 0 0 var(--gut);
}

/* --- Gruppen aus Auswahlknoepfen --- */
.wahlgruppe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
}

/* Im Feldraster steht neben einer Wahlgruppe kein Eingabefeld,
   das den Abstand nach unten mitbringt. */
.feld > .wahlgruppe { margin-bottom: var(--sp-3); }

/* Beschriftung und Knopf gehoeren zusammen und duerfen
   nicht getrennt umbrechen. */
.wahlgruppe input[type="radio"],
.wahlgruppe input[type="checkbox"] {
	margin-right: var(--sp-1);
}

.wahlgruppe label {
	display: inline;
	font-family: var(--serif);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--text);
	margin: 0 var(--sp-3) 0 0;
	cursor: pointer;
	white-space: nowrap;
}

/* ============================================================
   10. Druck
   ============================================================ */

@media print {
	header,
	footer,
	.seitenmenue,
	.menue-schatten,
	.menue-schalter,
	button,
	input[type="submit"],
	.btn,
	.button {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	main {
		padding: 0 !important;
		background: #fff;
	}

	.card,
	.karte {
		border: 1px solid #999;
		break-inside: avoid;
	}

	a { color: #000; text-decoration: none; }

	table { font-size: 10pt; }

	th,
	td { border-bottom: 1px solid #ccc; }
}