/* Sitewide Designsystem fuer ROTAIRWeb (Redesign nach dem Vorbild von KennwortZuruecksetzen.aspx / Issue #1070).
   Definiert die Farb-/Typografie-Tokens einmal zentral auf :root, damit alle Seiten (Master-Shell,
   Formulare, Grids) dieselbe Palette inkl. Dark-Mode nutzen. Klassen sind mit "rw-" praefigiert
   (ROTAIRWeb), um Kollisionen mit dem alten ROTAIRStylesheet.css und den seitenspezifischen
   "krz-" Klassen von KennwortZuruecksetzen.aspx zu vermeiden. Diese Datei wird global im
   Master-Head geladen und muss NACH ROTAIRStylesheet.css eingebunden werden, damit sie die
   alten Regeln ueberschreiben kann. */

:root {
	--rw-bg: #f5f8fc;
	--rw-surface: #ffffff;
	--rw-surface-sunken: #eef2f8;
	--rw-ink: #1c2130;
	--rw-ink-muted: #5b6472;
	--rw-ink-faint: #8b93a3;
	--rw-line: #dbe2ec;
	--rw-navy: #1b2a4a;
	--rw-navy-deep: #101a30;
	--rw-navy-ink: #ffffff;
	--rw-accent: #2f8fd9;
	--rw-success: #2f7d5a;
	--rw-success-tint: #e4f3ec;
	--rw-error: #ab3327;
	--rw-error-tint: #fbe9e7;
	--rw-focus-ring: #2f8fd9;
	--rw-radius: 10px;
	--rw-radius-lg: 18px;
	--rw-shadow: 0 1px 2px rgba(16, 26, 48, 0.04), 0 12px 32px -12px rgba(16, 26, 48, 0.18);
	--rw-font-body: "Public Sans", Arial, Helvetica, sans-serif;
	--rw-font-heading: "Libre Franklin", Arial, sans-serif;
	--rw-font-mono: "IBM Plex Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--rw-bg: #0d1420;
		--rw-surface: #141d2e;
		--rw-surface-sunken: #101828;
		--rw-ink: #e9edf5;
		--rw-ink-muted: #a3adc0;
		--rw-ink-faint: #6b7688;
		--rw-line: #263248;
		--rw-navy: #7f9bd6;
		--rw-navy-deep: #b7c8ea;
		--rw-navy-ink: #0d1420;
		--rw-accent: #6cc3f5;
		--rw-success: #6fbf98;
		--rw-success-tint: #17281f;
		--rw-error: #e5847a;
		--rw-error-tint: #2c1917;
		--rw-focus-ring: #6cc3f5;
		--rw-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 48px -16px rgba(0, 0, 0, 0.55);
	}
}

/* ---------- Reset & Basis ---------- */

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

body {
	margin: 0;
	background: var(--rw-bg);
	color: var(--rw-ink);
	font-family: var(--rw-font-body);
	font-size: 14px;
	line-height: 1.5;
}

.rw-app * { box-sizing: border-box; }

.rw-app h1, .rw-app h2, .rw-app h3 {
	font-family: var(--rw-font-heading);
	font-weight: 800;
	color: var(--rw-ink);
	line-height: 1.2;
}

.rw-app a { color: var(--rw-navy); }
@media (prefers-color-scheme: dark) { .rw-app a { color: var(--rw-accent); } }

/* ---------- App-Shell (Header / Nav / Main / Footer) ---------- */

.rw-app {
	display: grid;
	grid-template-columns: 220px 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
		"header header"
		"nav main"
		"footer footer";
	min-height: 100vh;
}

/* Die Trennung zur Seite darunter kam bisher von einer 3px Navy-zu-Accent-Verlaufslinie auf dem
   eigenen 1px border-bottom - zwei Kanten an praktisch derselben Position ergaben je nach Zoom/DPI
   eine leicht verwaschene Doppelkante, und die flache Farblinie wirkte fuer sich genommen wenig
   gelungen. Jetzt uebernimmt ein reiner Schlagschatten die Trennung, ohne eigene Kontur - ruhiger
   und zurueckhaltender, wie in den meisten modernen Dashboards. */
.rw-header {
	grid-area: header;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px clamp(12px, 3vw, 28px);
	background: var(--rw-surface);
	box-shadow: 0 4px 10px -6px rgba(16, 26, 48, 0.35);
	position: relative;
}

.rw-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rw-brand img { display: block; height: 34px; width: auto; }
.rw-brand-name {
	font-family: var(--rw-font-heading);
	font-weight: 600;
	font-size: 30px;
	line-height: 1;
	color: var(--rw-ink-muted);
	white-space: nowrap;
}
.rw-brand-name span { color: var(--rw-ink-faint); font-weight: 500; }

.rw-header-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.rw-loginstatus a {
	font-family: var(--rw-font-body);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	color: var(--rw-navy);
	padding: 7px 12px;
	border-radius: var(--rw-radius);
	background: var(--rw-surface-sunken);
	border: 1px solid var(--rw-line);
}
.rw-loginstatus a:hover { background: var(--rw-line); }
.rw-loginstatus a.rw-loginstatus-link--active { border-color: var(--rw-navy); }
@media (prefers-color-scheme: dark) { .rw-loginstatus a.rw-loginstatus-link--active { border-color: var(--rw-accent); } }
@media (prefers-color-scheme: dark) { .rw-loginstatus a { color: var(--rw-accent); } }

.rw-nav {
	grid-area: nav;
	background: var(--rw-surface);
	border-right: 1px solid var(--rw-line);
	padding: 20px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rw-nav a.rw-nav-link {
	display: block;
	padding: 9px 12px;
	border-radius: var(--rw-radius);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--rw-ink-muted);
	text-decoration: none;
	white-space: nowrap;
}
.rw-nav a.rw-nav-link:hover { background: var(--rw-surface-sunken); color: var(--rw-ink); }
.rw-nav a.rw-nav-link.rw-nav-link--active {
	background: var(--rw-navy);
	color: #fff;
	font-weight: 600;
}
@media (prefers-color-scheme: dark) {
	.rw-nav a.rw-nav-link.rw-nav-link--active { background: var(--rw-navy); color: var(--rw-bg); }
}
.rw-nav a.rw-nav-link:focus-visible { outline: 2px solid var(--rw-focus-ring); outline-offset: 1px; }

.rw-nav-gap { height: 12px; }

.rw-main {
	grid-area: main;
	padding: clamp(16px, 3vw, 32px);
	min-width: 0;
}

.rw-footer {
	grid-area: footer;
	padding: 14px clamp(12px, 3vw, 28px);
	border-top: 1px solid var(--rw-line);
	color: var(--rw-ink-faint);
	font-size: 11.5px;
	text-align: center;
	background: var(--rw-surface);
}

@media (max-width: 860px) {
	.rw-app {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas:
			"header"
			"nav"
			"main"
			"footer";
	}
	/* Logo + Wordmark + Sprachwahl + Logout sind bei Desktop-Massen (34px Logo, 30px Wordmark)
	   zusammen breiter als jeder Handy-Viewport - ohne diese Verkleinerung laeuft der Header
	   ueber den rechten Rand hinaus und der Logout-Link wird abgeschnitten. */
	.rw-header { gap: 10px; }
	.rw-brand { gap: 10px; }
	.rw-brand img { height: 26px; }
	.rw-brand-name { font-size: 19px; }
	.rw-header-actions { gap: 8px; }
	.rw-lang-chooser { gap: 2px; }
	.rw-loginstatus a { padding: 6px 10px; font-size: 12.5px; }
	.rw-nav {
		flex-direction: row;
		overflow-x: auto;
		border-right: none;
		border-bottom: 1px solid var(--rw-line);
		padding: 10px 12px;
		gap: 6px;
		-webkit-overflow-scrolling: touch;
	}
	.rw-nav-link { flex-shrink: 0; }
}

/* Sehr schmale Geraete (z.B. iPhone SE, 320px): auch die verkleinerten Header-Masse aus der
   860px-Stufe reichen dort noch nicht, deshalb Logo/Wordmark ein zweites Mal verkleinern. */
@media (max-width: 400px) {
	.rw-brand img { height: 22px; }
	.rw-brand-name { font-size: 16px; }
}

/* ---------- Sprachwahl ---------- */

.rw-lang-chooser { display: flex; align-items: center; gap: 6px; }
.rw-lang-btn {
	appearance: none;
	background: transparent;
	border: 1.5px solid transparent;
	border-radius: 8px;
	padding: 3px;
	cursor: pointer;
	line-height: 0;
	display: flex;
}
.rw-lang-btn img { width: 22px; height: 16px; border-radius: 3px; display: block; }
.rw-lang-btn:hover { border-color: var(--rw-line); }
.rw-lang-btn:focus-visible { outline: 2px solid var(--rw-focus-ring); outline-offset: 1px; }

/* ---------- Karten / Panels ---------- */

.rw-card {
	background: var(--rw-surface);
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-lg);
	box-shadow: var(--rw-shadow);
	overflow: hidden;
	position: relative;
}
.rw-card--accent::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--rw-navy) 0%, var(--rw-accent) 100%);
}
.rw-card-body { padding: clamp(18px, 4vw, 28px); }
.rw-card-body h1 { font-size: 20px; margin: 0 0 16px; }

.rw-lede { font-size: 13.5px; line-height: 1.55; color: var(--rw-ink-muted); margin: 0 0 20px; }

.rw-state-icon {
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 14px;
}
.rw-state-icon.rw-success { background: var(--rw-success-tint); color: var(--rw-success); }
.rw-state-icon.rw-error { background: var(--rw-error-tint); color: var(--rw-error); }

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

.rw-form { display: block; }
.rw-field { margin-bottom: 16px; }
.rw-field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.rw-field-row > .rw-field { flex: 1 1 200px; }

/* Dichtes Flex-Layout fuer operative Erfassungsformulare mit vielen kleinen, unterschiedlich
   breiten Feldern (z.B. Flugbuch) - bewusst Flexbox statt Grid, damit jedes Feld ueber
   .rw-field--xs/sm/md/lg seine eigene, zum Inhalt passende Breite bekommt statt aller
   Felder gleich breit zu sein. */
.rw-field-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 18px;
	align-items: end;
	margin-bottom: 16px;
}
.rw-field-grid .rw-field { margin-bottom: 0; min-width: 0; }
.rw-field-grid .rw-field--wide { flex: 1 1 100%; }
.rw-field-grid .rw-field--xs { flex: 0 0 70px; }
.rw-field-grid .rw-field--sm { flex: 0 0 100px; }
.rw-field-grid .rw-field--md { flex: 0 0 160px; }
.rw-field-grid .rw-field--lg { flex: 2 1 260px; }
.rw-field-inline { display: flex; gap: 6px; }
.rw-field-inline .InputHHHMM, .rw-field-inline .InputMMMM { flex: 1 1 auto; min-width: 0; }

/* Feldgruppen fuer dichte Erfassungsformulare: fasst thematisch zusammengehoerende Felder
   (Start / Landung / Zeiten / Flugzeug+Pilot) in einer umrandeten Gruppe mit Legende zusammen,
   statt alle Felder einer Seite in eine einzige, auf breiten Bildschirmen unlesbar lange Zeile
   zu legen. Die Gruppen selbst liegen in einem Spalten-Grid, damit sie je nach Viewport
   nebeneinander (Desktop) oder gestapelt (Tablet/Mobil) stehen. */
.rw-fieldsets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}
/* Feste Spaltenzahlen statt auto-fit: so entstehen immer symmetrische Anordnungen
   (4 Gruppen in einer Zeile am grossen Monitor, 2x2 am Laptop, gestapelt am Handy)
   statt einer angebrochenen letzten Zeile bei Zwischengroessen. Die Vierspaltigkeit beginnt erst
   bei 1700px, weil die Gruppen darunter so schmal werden, dass die Pilotenauswahl laengere
   Namen abschneidet. */
@media (min-width: 1700px) { .rw-fieldsets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rw-fieldsets { grid-template-columns: minmax(0, 1fr); } }
.rw-fieldset {
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius);
	padding: 12px 14px 14px;
	min-width: 0;
}
.rw-fieldset-legend {
	display: block;
	font-family: var(--rw-font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--rw-ink);
	margin-bottom: 12px;
}
/* Innerhalb einer Gruppe wird das Flex-Layout der .rw-field-grid auf ein festes Zweispalten-
   Raster umgestellt: so stehen die Paare (Datum|Zeit, Flugzeit|Landungen, Tag|Nacht) immer
   untereinander in derselben Spalte, unabhaengig von der Viewport-Breite. Breite Felder
   (Start-/Landeplatz, Checkboxen, Bemerkungen) spannen beide Spalten. */
.rw-fieldset .rw-field-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 12px 14px;
	margin-bottom: 0;
	align-items: end;
}
.rw-fieldset .rw-field--lg,
.rw-fieldset .rw-field--wide { grid-column: 1 / -1; }
/* Gruppe mit inhaltlich breiterer zweiter Spalte (z.B. Flugzeug-Kennzeichen schmal,
   Pilotenname breit) - Spaltenbreite folgt dem Inhalt, nicht der Feldreihenfolge. */
.rw-fieldset--wide-right .rw-field-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }

/* Checkbox mit Beschriftung rechts der Box (asp:CheckBox rendert input + label in dieses span). */
.rw-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--rw-ink); }
.rw-check label { cursor: pointer; }
/* Die Checkbox-Zeile soll dieselbe Zeilenhoehe belegen wie eine Label-plus-Feld-Zeile,
   damit alle Gruppen einer Reihe gleich hoch bleiben und unten keine Restluecke entsteht. */
.rw-check-stack { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-end; min-height: 60px; padding-bottom: 9px; }

.rw-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--rw-ink-muted);
	margin-bottom: 6px;
}

.rw-app input[type="text"],
.rw-app input[type="password"],
.rw-app input[type="email"],
.rw-app input[type="number"],
.rw-app input[type="search"],
.rw-app input:not([type]),
.rw-app select,
.rw-app textarea {
	width: 100%;
	font-family: var(--rw-font-body);
	font-size: 14px;
	color: var(--rw-ink);
	background: var(--rw-surface-sunken);
	border: 1.5px solid var(--rw-line);
	border-radius: var(--rw-radius);
	padding: 9px 12px;
}

.rw-app input[type="text"]:focus,
.rw-app input[type="password"]:focus,
.rw-app input[type="email"]:focus,
.rw-app input[type="number"]:focus,
.rw-app select:focus,
.rw-app textarea:focus {
	outline: none;
	border-color: var(--rw-focus-ring);
	box-shadow: 0 0 0 3px rgba(47, 143, 217, 0.25);
}

.rw-app input[type="checkbox"], .rw-app input[type="radio"] {
	width: 16px; height: 16px;
	vertical-align: middle;
	accent-color: var(--rw-navy);
}

.rw-checkbox-line { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--rw-ink); }

.rw-hint-error {
	display: block;
	font-size: 12.5px;
	color: var(--rw-error) !important;
	font-weight: 500;
	margin-top: 6px;
}

.rw-validation-summary {
	display: block;
	font-size: 12.5px;
	color: var(--rw-error) !important;
	background: var(--rw-error-tint);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 16px;
}
.rw-validation-summary ul { margin: 0; padding-left: 18px; }

.rw-success-text {
	display: block;
	font-size: 13.5px;
	color: var(--rw-success);
	font-weight: 600;
	margin-bottom: 12px;
}

/* Statusfarbe fuer Grid-Zeilen (z. B. FlightSigning-Grid) - nutzt dasselbe Token wie
   der "Ablehnen"-Button (rw-btn--danger-ghost), damit beide dieselbe Rot-Nuance zeigen
   und im Dark-Mode automatisch mitwandern. */
.rw-app .Grid .rw-row-error,
.rw-app .Grid .rw-row-error td {
	color: var(--rw-error);
}

/* Fixbreite Zahlen-/Datumsfelder (Flugbuch etc.) - Breiten bleiben aus Layoutgruenden erhalten,
   nur die Optik wird modernisiert. */
.rw-app .InputZiffernZwei,
.rw-app .InputddmmYYYY,
.rw-app .InputHHMM,
.rw-app .InputHHHMM,
.rw-app .InputMMMM {
	font-family: var(--rw-font-mono);
	text-align: left;
	background: var(--rw-surface-sunken);
	border: 1.5px solid var(--rw-line);
	border-radius: 7px;
	padding: 6px 8px;
	color: var(--rw-ink);
}

/* ---------- Buttons ---------- */

.rw-btn, .rw-app .button, .rw-app .Buttons, .rw-app input[type="submit"], .rw-app input[type="button"] {
	appearance: none;
	/* Feste Mindesthoehe, damit primaere (randlose) und sekundaere (umrandete) Buttons in
	   derselben Zeile exakt gleich hoch sind - Padding plus Rahmen alleine ergibt sonst
	   durch Rundung einen Pixel Unterschied. */
	min-height: 38px;
	border: none;
	border-radius: var(--rw-radius);
	background: var(--rw-navy);
	color: var(--rw-navy-ink);
	font-family: var(--rw-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	padding: 10px 18px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: auto;
	min-width: 0;
	margin: 0;
	vertical-align: middle;
}
.rw-btn:hover, .rw-app .button:hover, .rw-app .Buttons:hover, .rw-app input[type="submit"]:hover, .rw-app input[type="button"]:hover { opacity: 0.92; }
.rw-btn:focus-visible, .rw-app .button:focus-visible, .rw-app .Buttons:focus-visible, .rw-app input[type="submit"]:focus-visible { outline: 2px solid var(--rw-focus-ring); outline-offset: 2px; }
.rw-app .disabled, .rw-app input[type="submit"]:disabled, .rw-app .button:disabled, .rw-app .Buttons:disabled { background: var(--rw-surface-sunken); color: var(--rw-ink-faint); cursor: not-allowed; }
.rw-btn--block { width: 100%; justify-content: center; }

/* Button-Varianten: die Selektoren muessen .rw-app .Buttons (Spezifitaet 0,2,0) uebertreffen,
   sonst gewinnt die navy Basisfarbe unabhaengig von der Deklarationsreihenfolge. */
.rw-btn--secondary,
.rw-app .Buttons.rw-btn--secondary,
.rw-app input[type="submit"].rw-btn--secondary,
.rw-app input[type="button"].rw-btn--secondary {
	background: var(--rw-surface);
	color: var(--rw-ink);
	border: 1.5px solid var(--rw-line);
	padding: 8px 16px;
}
.rw-app .Buttons.rw-btn--secondary:hover,
.rw-app input[type="submit"].rw-btn--secondary:hover { background: var(--rw-surface-sunken); opacity: 1; }
/* Loeschen bleibt sekundaer, wird aber rot beschriftet: die primaere Aktion (Uebernehmen)
   soll die einzige vollflaechige Farbe der Zeile bleiben. */
.rw-btn--danger-ghost,
.rw-app .Buttons.rw-btn--danger-ghost,
.rw-app input[type="submit"].rw-btn--danger-ghost {
	color: var(--rw-error);
	border-color: var(--rw-error);
}
.rw-btn--danger, .rw-app .Buttons.rw-btn--danger { background: var(--rw-error); color: #fff; }
.rw-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; align-items: center; }

/* Aktionszeile mit zwei Gruppen: links die Datensatz-Aktionen, rechts die Report-Auswahl.
   Die Trennlinie setzt die Zeile optisch vom Formular ab. */
.rw-btn-row--split {
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--rw-line);
}
.rw-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Feste Breite gegen die globale width:100%-Regel fuer select (Spezifitaet 0,2,1 > 0,1,1) -
   sonst sprengt die Report-Auswahl die Zeile und der Anzeigen-Button rutscht darunter. */
.rw-app .rw-report-select { width: 270px; max-width: 100%; }

@media (max-width: 700px) {
	.rw-btn-row--split { flex-direction: column; align-items: stretch; }
	.rw-btn-group { width: 100%; }
	.rw-app .rw-report-select { width: 100%; }
}

.rw-secondary-link {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--rw-navy);
	text-decoration: none;
}
@media (prefers-color-scheme: dark) { .rw-secondary-link { color: var(--rw-accent); } }
.rw-secondary-link:hover { text-decoration: underline; }

/* ---------- Tabellen / GridView ---------- */

.rw-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-lg);
	background: var(--rw-surface);
	-webkit-overflow-scrolling: touch;
}

.rw-app .Grid, .rw-app table.Grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	background: var(--rw-surface);
}
.rw-app .Grid td, .rw-app .Grid th { padding: 9px 12px; border-bottom: 1px solid var(--rw-line); text-align: left; white-space: nowrap; }
.rw-app .GridHeader, .rw-app .GridHeader td, .rw-app .GridHeader th {
	background: var(--rw-navy);
	color: var(--rw-navy-ink);
	font-weight: 600;
	font-family: var(--rw-font-heading);
	font-size: 13px;
	border-bottom: none;
}
.rw-app .GridItem { background: var(--rw-surface); }
.rw-app .GridAltItem { background: var(--rw-surface-sunken); }
.rw-app .GridItem:hover, .rw-app .GridAltItem:hover { background: rgba(47, 143, 217, 0.1); }
/* Spaltenausrichtung im Grid MUSS ueber diese Klassen laufen: das von HorizontalAlign
   gerenderte align-Attribut ist nur ein Presentational Hint und verliert gegen die
   text-align-Regel fuer .Grid td/th weiter oben - die Markup-Angabe allein bleibt wirkungslos.
   Zahlenspalten rechtsbuendig mit Tabellenziffern, damit Stellenwerte untereinander stehen und
   die Werte vergleichbar sind; die Kopfzeile ist gleich ausgerichtet wie die Werte darunter.
   Wahrheitswerte (Checkbox) zentriert, weil dort kein Text zu lesen ist. */
.rw-app .Grid td.rw-num, .rw-app .Grid th.rw-num { text-align: right; }
.rw-app .Grid td.rw-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* Wie "rw-num", aber zentriert statt rechtsbuendig - fuer die Flugzeit/Landungen-Tag/Nacht-Spalten
   im Flugbuch, wo die Werte fast immer ein- bis zweistellig sind und die zentrierte Optik besser
   zur Kopfzeile ("Day"/"Night" ueber der jeweiligen Spalte, "FI" als Checkbox-Spalte) passt. */
.rw-app .Grid td.rw-num-center, .rw-app .Grid th.rw-num-center { text-align: center; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.rw-app .Grid td.rw-center, .rw-app .Grid th.rw-center { text-align: center; }
/* Bemerkungen kann beliebig lang werden; mit dem sitewide white-space:nowrap oben wuerde sie
   die ganze Tabelle in die Breite zwingen, statt dass die Zeile in der Hoehe waechst - der Text
   landet dann ausserhalb des sichtbaren Kartenbereichs und ist nur ueber Scrollen durch alle
   Spalten hinweg lesbar. Diese Spalte bricht deshalb um und bekommt eine grosszuegige
   Maximalbreite fuer ihren echten Freitext. */
.rw-app .Grid td.rw-wrap, .rw-app .Grid th.rw-wrap { white-space: normal; max-width: 320px; word-break: break-word; }
/* Orts-/Adressspalten (Start-/Landeplatz) sind meist kurz (Ortsname), koennen aber vereinzelt
   eine volle Adresse sein (z.B. "Buenzen Besenbuerenstrasse 38-40") - ohne Umbruch zwingt schon
   diese eine lange Zeile die Spalte fuer ALLE Zeilen auf ihre volle Breite, weil table-layout:auto
   die Spaltenbreite anhand des laengsten Werts im ganzen Grid festlegt, nicht pro Zeile. Deshalb
   dieselbe Umbruchbehandlung wie bei Bemerkungen, nur mit engerer Maximalbreite passend zu
   Ortsnamen/Adressen statt zu freiem Fliesstext. */
.rw-app .Grid td.rw-wrap-place, .rw-app .Grid th.rw-wrap-place { white-space: normal; max-width: 190px; word-break: break-word; }
/* Gruppierte Kopfzeile im Flugbuch-Grid (Flugzeit/Landungen je mit Tag/Nacht-Unterspalten):
   "rw-subhead" schwaecht die Tag/Nacht-Unterspaltentitel bewusst ab (normale statt fette Schrift,
   etwas kleiner/transparenter), damit auf den ersten Blick klar ist, dass sie zu "Flugzeit"/
   "Landungen" darueber gehoeren, ohne dass es dafuer eine zusaetzliche Trennlinie oder einen
   zweiten Blauton braucht. */
.rw-app .Grid tr.GridHeader td.rw-subhead, .rw-app .Grid tr.GridHeader th.rw-subhead { font-weight: normal; font-size: 0.85em; opacity: 0.85; }
/* "rw-grid-header-lines" (nur am Flugbuch-Grid gesetzt, nicht sitewide): die Kopfzeile bekommt
   dieselben duennen weissen 1px-Linien wie die Datenzeilen darunter. Ohne das bleiben Kopfzellen
   randlos, weil die Basisregel "Grid td { border }" gezielt nur td trifft - echte Kopfzellen
   rendern aber als th (siehe grvFlugbuch_RowCreated in Flugbuch.aspx.cs). Das ergibt die vom
   Anwender gewuenschte Linie zwischen Gruppentitel- und Tag/Nacht-Zeile UND zwischen Tag und
   Nacht selbst, ohne einen zweiten Blauton zu brauchen. */
.rw-app .Grid.rw-grid-header-lines tr.GridHeader td, .rw-app .Grid.rw-grid-header-lines tr.GridHeader th { border: solid 1px white; }
.rw-app .GridSelectedRowStyle { background: rgba(47, 143, 217, 0.18) !important; }
.rw-app .GridPager td { padding: 10px 12px; background: var(--rw-surface-sunken); }
.rw-app .GridPager a, .rw-app .GridPager span { font-size: 12.5px; margin: 0 3px; color: var(--rw-navy); }
@media (prefers-color-scheme: dark) { .rw-app .GridPager a { color: var(--rw-accent); } }
.rw-app .GroupHeaderRow { background: var(--rw-surface-sunken); color: var(--rw-ink); font-weight: 700; }

/* ---------- Online-Hilfe ---------- */

.rw-help-grid { display: flex; flex-direction: column; gap: 16px; max-width: 960px; }
.rw-help-section {
	display: flex;
	align-items: center;
	gap: clamp(16px, 4vw, 32px);
	flex-wrap: wrap;
}
.rw-help-section:nth-child(even) { flex-direction: row-reverse; }
.rw-help-text { flex: 1 1 320px; }
.rw-help-text h1 { font-size: 19px; margin: 0 0 8px; }
.rw-help-text .OnlineHelpText { font-size: 13.5px; line-height: 1.6; color: var(--rw-ink-muted); }
.rw-help-media { flex: 1 1 260px; max-width: 340px; }
.rw-help-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rw-radius);
	border: 1px solid var(--rw-line);
	box-shadow: var(--rw-shadow);
}

/* ---------- Karten fuer Fremdkomponenten (Google Maps / Signature Pad) ---------- */

.rw-embed-card {
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-lg);
	overflow: hidden;
	box-shadow: var(--rw-shadow);
	background: var(--rw-surface);
}
/* Google Maps positioniert seine eigenen Bedienelemente (Zoom, Kompass, Karte/Satellit-Umschalter)
   ueber Inline-Pixelmasse, die vom Browser-Standard-Boxmodell (box-sizing:content-box) ausgehen.
   Die sitewide Regel .rw-app * { box-sizing:border-box } reicht bis in dieses eingebettete
   Fremd-DOM hinein und verschiebt dadurch Rahmen/Padding INNERHALB der von Google vorgegebenen
   Groesse statt sie zu addieren - sichtbar u.a. als leeres/verzerrtes Zoom-Control. Innerhalb der
   Karten-Card gilt deshalb wieder das Standard-Boxmodell, exakt begrenzt auf Fremdkomponenten. */
.rw-embed-card * { box-sizing: content-box; }
/* Zusaetzlich rendert Google Maps einige seiner Bedienelement-Icons (Zoom, Kompass,
   Street-View-Pegman) als <img> mit fixen Pixelmassen ueber width-/height-Attribute.
   Die sitewide Regel img { max-width:100%; max-height:100% } aus ROTAIRStylesheet.css
   greift auch hier durch und quetscht diese Icons auf die (oft undefinierte oder zu
   kleine) Groesse ihres Containers zusammen. Innerhalb der Embed-Card wird die
   Bildgroessen-Beschraenkung deshalb wieder aufgehoben. */
.rw-embed-card img { max-width: none; max-height: none; }

.rw-split {
	display: flex;
	gap: 20px;
	align-items: stretch;
	flex-wrap: wrap;
}
/* Gleich gewichtet statt die Karte staerker wachsen zu lassen: die Liste ist auf dieser Seite die
   primaere Datenquelle (Name/Breite/Laenge/Hoehe), die Karte eine Orientierungshilfe dazu - vorher
   bekam die Karte per flex:1.4 mehr Breite als die Liste, wodurch Ortsnamen in der schmaleren Liste
   unnoetig frueh umbrachen. */
.rw-split > .rw-split-grid { flex: 1 1 360px; min-width: 0; }
/* align-items:stretch laesst die Karten-Spalte auf die Hoehe der (typischerweise laengeren)
   Listen-Spalte mitwachsen, damit unter der Karte keine ungenutzte Flaeche mehr steht - min-height
   verhindert nur, dass die Karte bei sehr wenigen Listenzeilen unbrauchbar klein wird. Die 100%-Kette
   bis zu #GoogleMap_Div (Codebehind setzt GoogleMapObject.Height="100%") gibt der Karte an jeder
   Stelle eine konkrete Pixelhoehe, bevor DrawGoogleMap() beim window-load-Event darauf zugreift. */
.rw-split > .rw-split-map { flex: 1 1 420px; min-width: 0; min-height: 360px; }
.rw-split-map .rw-embed-card,
.rw-split-map .rw-embed-card #GoogleMap_Div_Container { height: 100%; }

@media (prefers-reduced-motion: reduce) {
	.rw-app * { transition: none !important; animation: none !important; }
}

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