/* Ausgelagert aus dem frueher in index.php eingebetteten <style>-Block
   (siehe Sicherheitsaudit: CSP script-src/style-src ohne 'unsafe-inline'
   erfordert, dass CSS wie JS aus externen, unter 'self' geladenen Dateien
   kommt - ein inline <style>-Block waere sonst ebenso blockiert wie ein
   inline style="..."-Attribut). Eingebunden per <link rel="stylesheet"
   href="css/style.css"> aus index.php. */

:root {
	--color-primary: #00ADEF;
	--color-primary-dark: #006E99;
	--color-primary-darker: #004A70;
	--color-header-bg: #013A57;
	--color-ink: #1a1a1a;
	--color-bg: #ffffff;
	--color-bg-subtle: #f4f7f9;
	--color-border: #dbe3e8;
	--radius: 6px;
	--max-width: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-ink);
	background: var(--color-bg-subtle);
}

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

a { color: var(--color-primary-dark); }
a:hover, a:focus { color: var(--color-primary-darker); }

:focus-visible {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary-darker);
	color: #fff;
	padding: 12px 18px;
	z-index: 1000;
	border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
	left: 0;
}

/* Header - eine Zeile: Logo (offen, ohne Rahmen/Box), Hauptnavigation,
   rechts Suche/Sprache/Druck. Heller Hintergrund. */
.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}
.header-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	/* Vertikal knapper (frueher 14px) - u.a. damit auf hochskalierten
	   Bildschirmen (z.B. 150%-Skalierung bei hoher Aufloesung) Logo und
	   Footer gemeinsam ohne Scrollen sichtbar bleiben; Aenderung betrifft
	   nur den Innenabstand, nicht die Logogroesse selbst. */
	padding: 8px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.brand img.logo {
	display: block;
	width: 64px;
	height: 64px;
}

.primary-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.primary-nav a {
	display: block;
	padding: 8px 14px;
	color: var(--color-primary-darker);
	text-decoration: none;
	border-radius: var(--radius);
	font-weight: bold;
}
.primary-nav a:hover, .primary-nav a:focus {
	text-decoration: underline;
}


/* Rechter Header-Bereich: Suche, Sprachauswahl, Drucken */
.header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-wrap: wrap;
}

.search-form {
	display: flex;
	gap: 6px;
	align-items: center;
}
.search-form input[type="text"] {
	padding: 7px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 0.9rem;
	width: 9rem;
}
.search-form button {
	padding: 7px 14px;
	border: 1px solid var(--color-primary);
	background: var(--color-primary);
	color: #013A57;
	font-weight: bold;
	border-radius: var(--radius);
	cursor: pointer;
}
.search-form button:hover, .search-form button:focus { background: #33c1ff; }

.lang-select {
	padding: 7px 8px;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	font-size: 0.85rem;
	background: #fff;
	color: var(--color-ink);
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius);
	border: 1px solid var(--color-primary);
	color: var(--color-primary-dark);
	background: transparent;
	flex: 0 0 auto;
}
.icon-btn:hover, .icon-btn:focus {
	background: var(--color-primary);
	color: #fff;
}

/* Kleine Piktogramme fuer Aktions-Links/-Buttons in Tabellen (Bearbeiten,
   Loeschen, Aktivieren usw., siehe scripts/610.php, 620.php, 630.php,
   640.php, 650.php, 651.php) - statt langer Woerter, die in schmalen
   Tabellenspalten haesslich umbrechen. Der sichtbare Text bleibt als
   aria-label/<title> erhalten (Screenreader, Tooltip beim Ueberfahren mit
   der Maus - siehe action_icon() in i18n.php). fill/stroke der SVGs ist
   "currentColor" und wird jetzt INLINE ausgegeben (nicht mehr per <img
   src="...svg">, siehe dortiger Kommentar), daher greift die ererbte Link-
   farbe bzw. eine der beiden Farbklassen unten ohne weiteres Zutun.
   Beim <a>/<button> selbst class="action-link" ergaenzen. */
.action-icon {
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.22em;
}
.action-link {
	display: inline-flex;
	align-items: center;
}

/* Bewusste Einfaerbung einzelner Aktions-Icons nach Bedeutung (siehe
   $farbe_klasse-Parameter von action_icon() in i18n.php): gruen fuer
   freigebende/bestaetigende Aktionen (aktivieren, anlegen, erteilen,
   entsperren, speichern), rot fuer einschraenkende/entfernende Aktionen
   (deaktivieren, loeschen, entziehen, sperren, 2FA zuruecksetzen). Gleiche
   Farbwerte wie die bestehenden Erfolgs-/Fehlermeldungen (z.B. scripts/
   601.php) fuer ein konsistentes Farbschema site-weit. */
.icon-green {
	color: #0B6E2C;
}
.icon-red {
	color: #B00020;
}

/* Signalampel fuer den Aktiv-Status der Referenzprojekte (Seite 650, Spalte
   "Status") - ersetzt den vormaligen Text "Aktiv"/"Inaktiv": rot = inaktiv
   (unabhaengig vom Uebersetzungsstand), gelb = aktiv, aber nicht fuer alle
   aktuell aktiven Sprachen uebersetzt, gruen = aktiv und vollstaendig
   uebersetzt (siehe ampel_rang-Berechnung in scripts/650.php). role="img"
   + aria-label/title am jeweiligen <span> (siehe dort) tragen die
   Bedeutung fuer Screenreader/Maus-Tooltip, rein farblich waere die
   Information sonst nicht zugaenglich. */
.ampel {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	vertical-align: -0.1em;
}
.ampel-rot {
	background: #B00020;
}
.ampel-gelb {
	background: #F2C200;
}
.ampel-gruen {
	background: #0B6E2C;
}

/* Toggle-Schalter fuer Aktiv-/Slider-Status (Seite 650, Spalten "Status"/
   "Slider") - ersetzt dort die vormalige Kombination aus rein informativer
   Signalampel (.ampel oben) plus separatem Umschalt-Icon in der Aktionen-
   Spalte durch EIN interaktives Element: der Schalter zeigt den Status UND
   loest per Klick/Space direkt das Umschalten aus (auto-submit des
   umgebenden <form>, siehe data-autosubmit-Handling in js/ims.js). Rein
   visuell aus einer echten <input type="checkbox"> nachgebaut (per CSS
   versteckt, aber weiterhin fokussierbar/bedienbar) - Tastatur- und
   Screenreader-Semantik (checked/unchecked, Space zum Umschalten) bleiben
   dadurch automatisch erhalten, ganz ohne eigenes role="switch". Farben:
   gruen = an (wie .ampel-gruen/.icon-green oben), grau = aus (bewusst
   NEUTRAL statt rot - "aus" ist hier kein Fehlerzustand). */
.pa-switch {
	position: relative;
	display: inline-block;
	width: 2.4em;
	height: 1.4em;
	vertical-align: -0.35em;
	cursor: pointer;
}
.pa-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.pa-switch-track {
	position: absolute;
	inset: 0;
	background: #B0B8BE;
	border-radius: 999px;
	transition: background-color 0.15s ease-in-out;
}
.pa-switch-track::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0.15em;
	width: 1.1em;
	height: 1.1em;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease-in-out;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pa-switch input:checked + .pa-switch-track {
	background: #0B6E2C;
}
.pa-switch input:checked + .pa-switch-track::before {
	transform: translateX(1em);
}
.pa-switch input:focus-visible + .pa-switch-track {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}
.pa-switch input:disabled {
	cursor: not-allowed;
}
.pa-switch input:disabled + .pa-switch-track {
	opacity: 0.4;
}

/* Tabellenkoepfe (siehe .table-header-row auf <tr>, weiter unten in dieser
   Datei) grundsaetzlich oben statt mittig ausrichten - Browser-Standard fuer
   <th> ist vertical-align: middle, was bei zweizeiligen Koepfen (Spaltenname
   + darunter der Sortier-Pfeil, siehe .table-header-row a.nav gleich
   darunter) dazu fuehrt, dass diese Kopfzelle mittig "schwimmt" statt buendig
   mit den einzeiligen Nachbarzellen abzuschliessen. */
.table-header-row th {
	vertical-align: top;
}

/* Sortierbare Spaltenkoepfe (siehe sort_link_400() in scripts/400.php,
   sort_link_650() in scripts/650.php usw. - identisches Markup in insgesamt
   8 Listen-Seiten: "<a class=nav>Label <img class=sort-icon></a>") sollen
   den Spaltennamen IMMER in der ersten Zeile und den Sortier-Pfeil IMMER in
   einer zweiten Zeile darunter zeigen, nie nebeneinander umbrechend/mittig
   zentriert. display:flex mit flex-direction:column auf dem Link selbst
   erreicht das zuverlaessig: der Linktext (von Browsern automatisch in eine
   anonyme Flex-Box gefasst) und das <img> werden zu zwei Flex-Items
   untereinander, unabhaengig von der verfuegbaren Spaltenbreite - kein
   Umbruch-Zufall mehr wie zuvor bei einfachem Inline-Fluss. align-items:
   flex-start haelt beides linksbuendig (passt zu den durchgehend
   linksbuendigen Tabellen auf dieser Seite, siehe align="left" an den
   <th>-Zellen). */
.table-header-row a.nav {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
}
.sort-icon {
	width: 0.75em;
	height: 0.75em;
	margin-top: 2px;
}
.sort-icon.is-desc {
	transform: scaleY(-1);
}

/* Einspaltiges Suchfeld auf den internen Tabellenseiten (610/620/630/650/
   651/653 - Suche jeweils genau ueber die "Thema"-Spalte der Liste, siehe
   dortiger Kommentar) - knapp gehaltenes Inline-Formular oberhalb der
   Tabelle, analog zur bestehenden Anzahl-pro-Seite-Zeile. */
.suchformular {
	margin: 0.5em 0;
}
.suchformular input[type="text"] {
	padding: 4px 6px;
}

/* Dropdown-Menü auf Seite 600 (Dashboard) - buendelt alle Funktions-Links
   (ausser der Projektbereich-Tabelle) rechtsbuendig - erscheint site-weit
   rechts in der blauen Breadcrumb-Zeile (.sublink-bar) auf jeder Seite des
   internen Bereichs (600-699), siehe admin_dropdown_menu() in auth.php und
   dessen Aufruf in index.php. Reines <details>/<summary> ohne JavaScript;
   die Marker-Dreiecke der Browser werden ausgeblendet und durch ein eigenes,
   per CSS gezeichnetes Pfeilsymbol ersetzt, das sich beim Oeffnen dreht. Die
   Farben von summary/Pfeil sind an den blauen Hintergrund der Zeile
   angepasst (helle/transparente Flaechen statt der sonst ueblichen
   grauen Buttons); das aufgeklappte Menü selbst bleibt hell/undurchsichtig,
   damit die Linktexte unabhaengig vom Seitenhintergrund lesbar bleiben. */
.admin-menu-row {
	display: flex;
	justify-content: flex-end;
	flex: 0 0 auto;
}
.admin-menu {
	position: relative;
}
/* Trigger ist seit der Umstellung auf das Kopf/Schulter-Icon (siehe
   login_icon_svg() in auth.php) ein reines Icon statt eines Text-Pills -
   daher rund statt eckig und ohne den vorherigen Rahmen/Pfeil-Zusatz;
   .login-icon-link (ausgeloggter Zustand, ebenfalls unten) verwendet
   bewusst dieselben Icon-Masse fuer einen nahtlosen Uebergang beim
   Ein-/Ausloggen. */
.admin-menu > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: #fff;
	user-select: none;
}
.admin-menu > summary:hover {
	background: rgba(255,255,255,0.22);
}
.admin-menu > summary::-webkit-details-marker {
	display: none;
}
.admin-menu-list {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 20;
	margin: 0;
	padding: 0.5em 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	list-style: none;
}
.admin-menu-list li {
	margin: 0;
}
.admin-menu-list li a {
	display: block;
	padding: 6px 14px;
	white-space: nowrap;
}
.admin-menu-list li a:hover {
	background: #f0f0f0;
}
/* Angemeldeter Benutzername oben im Dropdown (siehe admin_dropdown_menu()
   in auth.php) - keine Aktion, daher kein Link/Hover, optisch als
   Kopfzeile vom Rest der Liste abgesetzt. */
.admin-menu-list li.admin-menu-user {
	padding: 4px 14px 8px;
	font-weight: bold;
	color: #1a1a1a;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 4px;
	white-space: normal;
}
/* Nicht anklickbare Zwischenueberschrift einer Rubrik (aktuell nur
   "Website-Administration", siehe admin_dropdown_menu() in auth.php) -
   klein/grau/gross geschrieben wie eine Gruppierung, kein Hover-Effekt. */
.admin-menu-list li.admin-menu-section {
	padding: 10px 14px 2px;
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #888;
	white-space: nowrap;
}
/* Icon-Link zu Seite 600 im ausgeloggten Zustand (siehe login_icon_link()
   in auth.php) - ersetzt den frueheren Footer-Link "Interner Bereich",
   erscheint an derselben Stelle wie oben .admin-menu im eingeloggten
   Zustand, daher dieselben Icon-Masse/Farben. */
.login-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	color: #fff;
	/* Ueberschreibt die allgemeine ".sublink-bar a"-Regel (weiss,
	   unterstrichen, fuer Breadcrumb-Textlinks gedacht) - dieser Link
	   enthaelt nur das SVG-Icon, keine Unterstreichung gewuenscht. */
	text-decoration: none;
}
.login-icon-link:hover {
	background: rgba(255,255,255,0.22);
}

/* WYSIWYG-Editor auf Seite 671 (Seiten.Content bearbeiten, siehe
   scripts/671.php) - eigene Symbolleiste + contenteditable-Bereich statt
   externer Bibliothek, konsistent mit der Abhaengigkeitsfreiheit des
   Projekts. */
.wysiwyg-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	margin-bottom: 4px;
	padding: 6px;
	border: 1px solid #ccc;
	border-bottom: none;
	background: #f5f5f5;
	border-radius: 4px 4px 0 0;
}
.wysiwyg-toolbar button {
	min-width: 2em;
	padding: 4px 8px;
	cursor: pointer;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
}
.wysiwyg-toolbar button:hover {
	background: #eee;
}
.wysiwyg-sep {
	display: inline-block;
	width: 1px;
	align-self: stretch;
	background: #ccc;
	margin: 0 2px;
}
.wysiwyg-editor {
	min-height: 300px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 0 0 4px 4px;
	background: #fff;
}
.wysiwyg-editor:focus {
	outline: 2px solid #7ab0e0;
	outline-offset: -2px;
}

/* Grafischer "2FA"-Button (siehe scripts/610.php, Spalte 2FA-Pflicht) -
   klickbarer Zustands-Badge statt langem Text ("2FA erzwingen" /
   "2FA-Pflicht aufheben"): sichtbare Beschriftung bleibt bewusst immer
   exakt "2FA", der aktuelle/naechste Zustand wird stattdessen ueber Farbe
   (gefuellt = Pflicht aktiv, umrandet = Pflicht aus) und den title-Tooltip
   (volle Beschreibung, siehe UI_Text twofa.toggle_required_on/_off)
   vermittelt. */
.badge-2fa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6em;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: 0.03em;
	cursor: pointer;
	line-height: 1.5;
}
.badge-2fa.is-on {
	border: 1.5px solid var(--color-primary-darker);
	background: var(--color-primary-darker);
	color: #fff;
}
.badge-2fa.is-off {
	border: 1.5px solid #b7c2ca;
	background: transparent;
	color: #6a7580;
}
.badge-2fa.is-on:hover, .badge-2fa.is-on:focus,
.badge-2fa.is-off:hover, .badge-2fa.is-off:focus {
	border-color: var(--color-primary);
	color: var(--color-primary-darker);
}
.badge-2fa.is-on:hover, .badge-2fa.is-on:focus {
	background: var(--color-primary);
	color: #fff;
}

@media (max-width: 700px) {
	.header-right { width: 100%; justify-content: flex-end; }
	.search-form { flex: 1 1 auto; }
	.search-form input[type="text"] { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* Breadcrumb-Zeile (aus Feld "Link", z.B. "Home > Dienstleistungen") -
   eigene Zeile mit blauem Hintergrund direkt unter dem Header. */
.sublink-bar {
	background: var(--color-header-bg);
}
.sublink-bar .inner {
	max-width: var(--max-width);
	margin: 0 auto;
	/* Knapper (frueher 8px), siehe Kommentar bei .header-inner. */
	padding: 5px 20px;
	font-size: 1rem;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1em;
}
.sublink-crumbs {
	flex: 1 1 auto;
	min-width: 0;
}
.sublink-bar a {
	color: #fff;
	text-decoration: underline;
}
.sublink-bar a:hover, .sublink-bar a:focus {
	color: #fff;
	text-decoration-thickness: 2px;
}
/* Das Funktions-Dropdown (admin_dropdown_menu() in auth.php) sitzt jetzt in
   dieser Zeile statt im Content-Bereich - die allgemeine ".sublink-bar a"-
   Regel oben (weiss, unterstrichen, fuer die Breadcrumb-Links gedacht)
   wuerde die Linktexte im aufgeklappten, hell hinterlegten Menü sonst
   unlesbar machen (weiss auf weiss) - hier auf dunklen Text ohne
   Unterstreichung zuruecksetzen, siehe .admin-menu-list weiter unten. */
.sublink-bar .admin-menu-list a {
	color: #1a1a1a;
	text-decoration: none;
}
.sublink-bar .admin-menu-list a:hover {
	color: #1a1a1a;
}

/* Hauptlayout */
.layout {
	max-width: var(--max-width);
	/* Knapper (frueher 20px auto / 0 20px 40px), siehe Kommentar bei
	   .header-inner. */
	margin: 12px auto;
	padding: 0 20px 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}
@media (min-width: 900px) {
	.layout {
		grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
		align-items: start;
	}
}

.content-area {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	/* Knapper (frueher 24px), siehe Kommentar bei .header-inner. */
	padding: 14px clamp(16px, 4vw, 40px);
}
.content-area :first-child { margin-top: 0; }

.page-nav {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 16px;
	font-size: 0.9rem;
}
.page-nav h2 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary-darker);
	margin-top: 0;
}

/* Footer */
.site-footer {
	background: var(--color-header-bg);
	color: #fff;
	/* Knapper (frueher 40px), siehe Kommentar bei .header-inner. */
	margin-top: 16px;
}
.footer-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	/* Knapper (frueher 8px), siehe Kommentar bei .header-inner. */
	padding: 6px 20px;
}
.footer-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 0;
	padding: 0;
}
.footer-nav a {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
}
.footer-nav a:hover, .footer-nav a:focus {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.artikelueberschrift {
	font-size: 1.1rem;
	font-weight: bold;
	margin-top: 1.25em;
	color: var(--color-primary-darker);
}

/* Tabellentext (Listen im internen Bereich + oeffentliche Seite 400,
   class="content zebra-tabelle", sowie die Projektblatt-Tabelle auf Seite
   401, class="projektblatt-tabelle") etwas kleiner als der uebrige
   Fliesstext, damit mehr Spalten/Zeilen ohne Umbruch Platz finden. Gilt
   fuer Kopf- (th) und Datenzellen (td) gleichermassen. */
table.content, table.content th, table.content td,
.projektblatt-tabelle, .projektblatt-tabelle th, .projektblatt-tabelle td {
	font-size: 0.9rem;
}
/* Aufzaehlungszeichen site-weit: kleines Quadrat in der Logofarbe (analog
   Windows Wingdings Zeichen 167) statt des browserabhaengigen Default-
   Quadrat-Markers (der die Textfarbe erbt und sich nicht separat einfaerben
   laesst) - .liste steht je nach Stelle entweder am <ul> (Kinder-<li> ohne
   eigene Klasse) oder direkt am <li>, daher beide Selektor-Formen. */
.liste { list-style: none; padding-left: 0; }
.liste li, li.liste {
	list-style: none;
	position: relative;
	padding-left: 1.2em;
}
.liste li::before, li.liste::before {
	content: "\25AA";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.8em;
	line-height: inherit;
	color: var(--color-primary);
}
.text_uL { text-decoration: underline; }

/* Seite 401 (Projektblatt): Tabelle links, Foto rechts - angelehnt an das
   Folienlayout der IMS-Gesamtpraesentation (Slide "Reference Project"):
   Feld-Zeilen als schlichte Tabelle mit fett gesetzter, schmaler Label-
   Spalte und zebra-gestreiftem Hintergrund, das Foto per CSS Grid daneben
   statt wie zuvor darueber. Eigene Klassen statt generischer .content-
   Tabelle, damit andere Seiten mit einfachen Tabellen unberuehrt bleiben. */
.projektblatt-grid {
	display: grid;
	grid-template-columns: 1fr minmax(200px, 340px);
	gap: 1.5rem;
	align-items: start;
	margin-top: 0.75em;
}
.projektblatt-tabelle {
	width: 100%;
	border-collapse: collapse;
}
.projektblatt-tabelle td {
	padding: 0.4em 0.75em;
	vertical-align: top;
}
.projektblatt-tabelle tr:nth-child(odd) td,
.zebra-tabelle tr:nth-child(odd) td {
	background: #F2F9FC;
}
.projektblatt-tabelle td.feld-label {
	font-weight: bold;
	white-space: nowrap;
	width: var(--rp-label-breite, 11em);
}
.projektblatt-foto img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid #ddd;
}
/* Schmale Bildschirme: nur eine Grid-Spalte (Tabelle und Foto
   untereinander). Das Foto beginnt bewusst nicht am linken Rand, sondern
   auf Hoehe des Beginns der 2. Tabellenspalte (dort, wo sonst die Werte-
   Spalte anfaengt) - so bleibt der visuelle Bezug zur Tabelle auch gestapelt
   erhalten, statt dass das Foto unvermittelt links buendig erscheint. */
@media (max-width: 700px) {
	.projektblatt-grid { grid-template-columns: 1fr; }
	.projektblatt-foto {
		margin-left: var(--rp-label-breite, 11em);
		max-width: calc(100% - var(--rp-label-breite, 11em));
	}
}

/* Seitennavigation (Blaettern) unter Ergebnistabellen - Seite 400/650. */
.seiten-nav {
	text-align: center;
	margin: 0.75em 0;
}
.seiten-nav a, .seiten-nav strong {
	display: inline-block;
	min-width: 1.4em;
	padding: 0.1em 0.35em;
	text-align: center;
}
.seiten-nav strong {
	color: var(--color-primary-darker);
}
.anzahl-wahl {
	text-align: right;
	margin: 0.4em 0;
}

/* Mehrfach-Datei-Upload auf Seite 640 (siehe scripts/640.php +
   js/file-upload.js): Dropzone-Flaeche fuer Drag&Drop, zusaetzlich per
   Klick auf den enthaltenen Button erreichbar (beides fuellt dasselbe
   versteckte <input type="file" multiple>). is-dragover wird per JS
   waehrend eines aktiven Drag-Vorgangs gesetzt. */
.upload-dropzone {
	border: 2px dashed var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg-subtle);
	padding: 20px;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-dropzone.is-dragover {
	border-color: var(--color-primary);
	background: #e8f7ff;
}
.upload-dropzone-hint {
	margin: 0 0 10px 0;
	color: #555;
}
#pa-upload-filelist-wrap {
	margin-top: 10px;
}

/* Bilder-Slider auf der Startseite (Seite 0, siehe scripts/0.php) - zeigt
   ausgewaehlte Referenzprojekt-Fotos in zufaelliger Reihenfolge. Responsiv:
   nie breiter als der Client-Viewport, Bilder skalieren proportional. */
.home-slider {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	/* Knapper (frueher 1.5em), siehe Kommentar bei .header-inner. Die
	   Bildhoehe selbst (.home-slider-slide img max-height: 70vh) bleibt
	   unveraendert. */
	margin: 0 0 0.5em 0;
	background: #fff;
	line-height: 0;
}
.home-slider-slide {
	display: none;
	margin: 0;
}
.home-slider-slide.is-active {
	display: block;
}
.home-slider-slide a {
	display: block;
	line-height: 0;
}
.home-slider-slide img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 70vh;
	object-fit: contain;
	margin: 0 auto;
}
.home-slider-dots {
	position: absolute;
	left: 50%;
	bottom: 0.7em;
	transform: translateX(-50%);
	display: flex;
	gap: 0.6em;
	line-height: 0;
}
.home-slider-dot {
	width: 0.75em;
	height: 0.75em;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.8);
	background: rgba(0, 0, 0, 0.35);
	cursor: pointer;
}
.home-slider-dot:hover {
	background: rgba(0, 0, 0, 0.6);
}
.home-slider-dot.is-active {
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* =======================================================================
   Utility-Klassen fuer den internen Verwaltungsbereich (scripts/6*.php),
   ersetzen die frueheren inline style="..."-Attribute (siehe
   Sicherheitsaudit, CSP style-src ohne 'unsafe-inline'). Bewusst kleine,
   wiederverwendbare Klassen statt einer 1:1-Uebersetzung jedes einzelnen
   Attributs, da sich die urspruenglichen Werte stark wiederholt haben.
   ======================================================================= */

.msg-error {
	color: #B00020;
}
.msg-success {
	color: #0B6E2C;
}
.msg-warn-box {
	color: #8a6d00;
	background: #fff8e1;
	border: 1px solid #f0d98a;
	border-radius: 4px;
	padding: 8px 12px;
}
.form-input {
	width: 100%;
	padding: 6px;
}
.d-inline {
	display: inline;
}
.d-none {
	display: none;
}
.note-text {
	font-size: 0.85rem;
	color: #555;
}
.note-text-90 {
	font-size: 0.9rem;
	color: #555;
}
.btn-reset {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.table-header-row {
	border-bottom: 1px solid #999;
}
.code-box {
	font-family: monospace;
	font-size: 1.1rem;
	background: #f4f4f4;
	padding: 10px;
	border: 1px solid #ccc;
}
.code-display {
	font-size: 1.05rem;
	letter-spacing: 1px;
}
.img-block-responsive {
	display: block;
	width: 100%;
	height: auto;
}
.text-danger {
	color: #a32d2d;
}
.text-warn {
	color: #8a6d00;
}
.text-lg {
	font-size: 1.1rem;
}
.mb-10 {
	margin-bottom: 10px;
}

/* max-width-Modifikatoren fuer schmale Formulare/Boxen (class="content
   form-max-XXX") - die konkreten Werte entsprechen den zuvor individuell
   per style="max-width:...px;" gesetzten Breiten. */
.form-max-260 { max-width: 260px; }
.form-max-360 { max-width: 360px; }
.form-max-400 { max-width: 400px; }
.form-max-420 { max-width: 420px; }
.form-max-640 { max-width: 640px; }
.form-max-1180 { max-width: 1180px; }

/* Bestaetigungs-Dialoge (z.B. "Datei wirklich loeschen?" auf Seite 640) als
   echtes Popup statt eines leicht zu uebersehenden Text-Absatzes am
   Seitenanfang - natives <dialog>-Element, das PHP mit dem open-Attribut
   rendert (sichtbarer Block als Fallback ohne JavaScript) und das
   js/ims.js beim Laden in einen echten modalen Dialog mit
   Hintergrund-Abblendung umwandelt (siehe dortiger Kommentar). */
dialog.confirm-dialog {
	max-width: 420px;
	width: calc(100% - 2rem);
	margin: auto;
	padding: 20px 24px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
dialog.confirm-dialog::backdrop {
	background: rgba(0,0,0,0.45);
}
dialog.confirm-dialog p:first-child {
	margin-top: 0;
}
dialog.confirm-dialog form {
	margin: 0;
}

/* "Abbrechen"-Link in einem Bestaetigungs-Dialog (siehe dialog.confirm-
   dialog oben) soll optisch/als Klickziel wie ein Button neben dem
   eigentlichen Aktions-Button wirken, nicht wie ein einfacher Text-Link -
   per appearance:button rendert der Browser den Link genauso wie sein
   natives <button>-Element (beide bewusst unstyled, wie im restlichen
   Projekt), ohne dass CSS die konkrete Button-Optik selbst nachbauen muss. */
.btn-link {
	appearance: button;
	-webkit-appearance: button;
	-moz-appearance: button;
	text-decoration: none;
	color: inherit;
}

/* Minimalseite fuer fruehe die()-Fehlerausgaben (CSRF-Fehler in index.php,
   fehlende Auswahl in referenzen_pdf.php) - diese Seiten werden VOR dem
   Einbinden von css/style.css ausgegeben, tragen daher jeweils ein eigenes,
   ebenfalls externes <link> auf diese Minimal-Klasse (siehe dortiger
   Kommentar). */
.error-page-body {
	font-family: Arial, sans-serif;
	padding: 2rem;
}

/* Kontaktformular (Seite 700, siehe scripts/721.php + js/kontakt-plz.js):
   5-spaltiges Tabellenlayout (Feldname|Feld|Abstand|Feldname|Feld), "ganze
   Zeile"-Felder ueberspannen die letzten 4 Spalten per colspan="4". Diese
   Regeln lagen zunaechst in einem inline <style>-Block innerhalb von
   Seiten.Content (WYSIWYG-Text der Seite 700) - das wird jedoch von der
   sitesweiten CSP (style-src 'self', kein 'unsafe-inline', siehe
   security_headers.inc.php) komplett blockiert, genau wie eingangs oben in
   dieser Datei beschrieben. Der Bug zeigte sich als "hp-feld bleibt trotz
   position:absolute sichtbar", betraf in Wirklichkeit aber die gesamte
   Tabellenformatierung dieser Seite. Deshalb hierher verschoben. */
.kontakt-form { max-width: 640px; margin-top: 1.25rem; }
.kontakt-form table.kontakt-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kontakt-form table.kontakt-tabelle col.c-label { width: 130px; }
.kontakt-form table.kontakt-tabelle col.c-abstand { width: 24px; }
.kontakt-form td.feldname { padding: 6px 8px 6px 0; vertical-align: top; }
.kontakt-form td.feldname label { display: block; font-size: 0.85rem; font-weight: bold; color: var(--color-primary-darker); }
.kontakt-form td.feldwert { padding: 6px 0; vertical-align: top; }
.kontakt-form input[type="text"], .kontakt-form input[type="email"], .kontakt-form input[type="tel"], .kontakt-form textarea, .kontakt-form select {
	width: 100%; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; font-size: 0.95rem; box-sizing: border-box; background: #fff;
}
.kontakt-form input:focus, .kontakt-form textarea:focus, .kontakt-form select:focus { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.kontakt-form textarea { min-height: 170px; resize: vertical; }
.kontakt-form .pflicht { color: var(--color-primary-dark); }
.kontakt-form .hp-feld { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.kontakt-form button { margin-top: 16px; padding: 10px 22px; border: 1px solid var(--color-primary); background: var(--color-primary); color: #013A57; font-weight: bold; border-radius: var(--radius); cursor: pointer; font-size: 1rem; }
.kontakt-form button:hover, .kontakt-form button:focus { background: #33c1ff; }
.kontakt-form .hinweis { font-size: 0.8rem; color: #555; margin-top: 10px; }
@media (max-width: 700px) {
	.kontakt-form table.kontakt-tabelle, .kontakt-form table.kontakt-tabelle tbody, .kontakt-form table.kontakt-tabelle tr, .kontakt-form table.kontakt-tabelle td {
		display: block; width: 100%;
	}
	.kontakt-form td.abstand { display: none; }
	.kontakt-form td.feldname { padding: 10px 0 2px 0; }
	.kontakt-form td.feldwert { padding: 0 0 4px 0; }
}

/* Seite 300/301 ("Unser Team"): feste, kleine Darstellungsgroesse fuer
   Passbilder statt der globalen "img { max-width: 100%; height: auto; }"-
   Regel oben, die ein hochaufgeloestes Foto sonst ueber die gesamte
   Tabellen-/Formularbreite ausgeben wuerde. object-fit: cover schneidet
   dabei bei nicht-quadratischen Fotos sauber zu, statt zu verzerren. */
.mitarbeiter-foto { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius); }
.mitarbeiter-foto-vorschau { width: 96px; height: 96px; }

/* CV-Datenbank (Seiten 301-317, siehe cv.inc.php): Register-/Tab-Leiste
   (cv_tab_leiste()) ueber den 5 zusammengehoerenden Teilbereichen eines
   CV-Profils (Header/Ausbildung/Sprachkenntnisse/Regionale Erfahrung/
   Projekterfahrung) - visuelle Reiter-Optik mit durchgehender unterer
   Trennlinie, der aktive Reiter "durchbricht" diese Linie farblich (analog
   klassischer Tab-Bars), damit auch ohne JavaScript sofort erkennbar ist,
   welches Register gerade angezeigt wird. */
.cv-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 12px 0 18px 0;
	border-bottom: 2px solid var(--color-primary);
}
.cv-tab {
	display: inline-block;
	padding: 7px 14px;
	font-size: 0.9rem;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color-primary-dark);
	text-decoration: none;
}
.cv-tab:hover, .cv-tab:focus {
	background: #eef7fc;
	color: var(--color-primary-darker);
}
.cv-tab-active {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #013A57;
	font-weight: bold;
	margin-bottom: -2px;
	padding-bottom: 9px;
}

/* Gemeinsame Zeitraum-Formularfelder (Von/Bis Monat+Jahr, siehe
   cv_zeitraum_formularfelder() in cv.inc.php) auf den Seiten 307/309 -
   schmale numerische Felder statt der vollen Formularbreite, da hier nur
   zwei- bzw. vierstellige Zahlen eingegeben werden. */
.cv-zeitraum-felder { margin-bottom: 6px; }
.form-input-narrow { width: 5em; display: inline-block; }
.cv-laufend-checkbox { margin-right: 4px; }

/* Generischer kleiner Beschriftungs-Badge (siehe scripts/304.php,
   "Muttersprache"-Kennzeichnung) - dezenter als .badge-2fa oben, da hier
   kein Umschalt-Button, sondern eine reine Statusanzeige gemeint ist. */
.badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: bold;
	background: #eef7fc;
	color: var(--color-primary-darker);
	border: 1px solid var(--color-primary);
}