body {
	font-size: 15px;
}

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

/* Der kompaktere Abstand entspricht der bisherigen Gestaltung; rem ist hier
   nicht erforderlich, weil dieser Abstand unabhängig von der Schriftgröße ist. */
.card-header + .card-body {
	padding: 12px;
}

.nav-tabs .nav-link {
	color: #212529;
}

/* Bootstrap-Standard: .75s; 20 % langsamer fuer eine ruhigere Ladeanzeige. */
.log-spinner {
	animation-duration: .9s;
}

#page-content-wrapper a:not(.btn):hover,
#page-content-wrapper a:not(.btn):focus {
	text-decoration: underline;
}

#mainnavi li a {
	font-weight:bold;
}
#mainnavi li ul li a {
	font-weight:normal;
}

.form-signin {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}

.is-login #wrapper,
.is-login #page-content-wrapper {
	min-height: var(--login-viewport-height, 100dvh);
}

.is-login #wrapper {
	padding-left: 0;
}

.is-login #sidebar-wrapper,
.is-login #sidebar-backdrop,
.is-login #menu-toggle {
	display: none;
}

.is-login #page-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--login-viewport-height, 100dvh);
	padding: 24px;
	box-sizing: border-box;
	overflow-y: auto;
}

.is-login #page-content-wrapper > .container-fluid {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
}

.is-login #page-content-wrapper .row {
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.is-login #page-content-wrapper .col-lg-12 {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
}

.login-shell {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
}

.login-logo {
	display: block;
	width: 100%;
	max-width: 280px;
	max-height: 110px;
	margin: 0 auto 24px;
	object-fit: contain;
	border-radius: 12px;
}

.login-content .alert {
	max-width: 360px;
	margin: 0 auto 16px;
	text-align: left;
}

.form-signin .form-control {
	min-height: 52px;
	margin-bottom: 12px;
}

.form-signin .btn {
	min-height: 52px;
	margin-top: 4px;
}

.login-copyright {
	margin: 28px 0 0;
	color: #6c757d;
	font-size: 9px;
}

.login-copyright a {
	color: inherit;
}

.rechnungkommentar,
.kurskommentar,
.teilnehmerkommentar{
	border-bottom:1px #ddd solid;
	margin-bottom:8px;
}

.today{
	font-style:italic;
}
.newweek td{
	border-top:1px #888 solid!important;
}
.newmonth td{
	border-top:2px #888 solid!important;
}

.floatr{
	float:right;
}

.wabkbuttons a{
	float:left;
	margin-right:5px;
}

.bold{
	font-weight:bold;
}

.alert-warning .gemahnt,
.alert-danger .gemahnt,
.alert-warning .faellig,
.alert-danger .faellig{
	font-weight:bold;
}


.hellgrau{
	color:#AAA;
}

/* Farbige Statuszeilen in Listen (Rechnungen etc.) im Hellmodus wieder einfaerben:
   BS5 gibt tr.alert-* ohne .alert keinen Hintergrund mehr, und die .table-Zellen
   uebermalen die Zeilenfarbe. Hintergrund direkt auf die Zellen legen; !important
   schlaegt .table-striped. (Dark Mode: siehe dark.css) */
.table > tbody > tr.alert-success > td,
.table > tbody > tr.alert-success > th,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th { background-color:#d1e7dd !important; }
.table > tbody > tr.alert-warning > td,
.table > tbody > tr.alert-warning > th,
.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th { background-color:#fff3cd !important; }
.table > tbody > tr.alert-danger > td,
.table > tbody > tr.alert-danger > th,
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th { background-color:#f8d7da !important; }
.table > tbody > tr.alert-info > td,
.table > tbody > tr.alert-info > th,
.table > tbody > tr.info > td,
.table > tbody > tr.info > th { background-color:#cff4fc !important; }

/* Inline-/Zell-Markierungen mit .alert-* OHNE .alert-Basisklasse (z.B.
   Platzhalter-Kurse "-folgt" als <span class="alert-danger"> in der
   Kursuebersicht). BS5 setzt hier nur noch CSS-Variablen und faerbt nichts
   mehr; darum Hintergrund + Textfarbe wie unter BS3 wiederherstellen. Ohne
   !important, damit die spezifischeren Dark-Mode-Regeln gewinnen (dark.css). */
.alert-success:not(.alert) { background-color:#d1e7dd; color:#0f5132; }
.alert-warning:not(.alert) { background-color:#fff3cd; color:#664d03; }
.alert-danger:not(.alert)  { background-color:#f8d7da; color:#842029; }
.alert-info:not(.alert)    { background-color:#cff4fc; color:#055160; }

/* Darstellung: Label + 3-fach Segmented Control (Auto/Hell/Dunkel) unten in der Sidebar */
.theme-switch{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:0 0 12px 10px;
	color:#fff;
	text-shadow:0 1px 2px rgba(0,0,0,0.55);
	font-size:13px;
	line-height:1;
}
.theme-switch-group{
	display:inline-flex;
	background:rgba(0,0,0,0.30);
	border:1px solid rgba(255,255,255,0.35);
	border-radius:4px;
	overflow:hidden;
}
.theme-switch-group button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:5px 8px;
	background:transparent;
	border:none;
	border-right:1px solid rgba(255,255,255,0.25);
	color:#fff;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
.theme-switch-group button:last-child{
	border-right:none;
}
.theme-switch-group button:hover,
.theme-switch-group button:focus{
	background:rgba(0,0,0,0.35);
	outline:none;
}
.theme-switch-group button[aria-pressed="true"]{
	background:rgba(255,255,255,0.22);
}
.theme-switch svg{
	width:16px;
	height:16px;
	stroke-linecap:round;
	stroke-linejoin:round;
	flex:none;
	display:block;
}

.datepicker.dropdown-menu{
	z-index: 2000;
}

/* Zeit-Auswahl: Dropdown-Toggle soll wie ein .form-select wirken (nahtlos am
   Feld, gleicher Chevron), nicht wie ein separater Outline-Button. */
.input-group .zeit-caret,
.input-group .zeit-caret:hover,
.input-group .zeit-caret:focus,
.input-group .zeit-caret:active,
.input-group .zeit-caret.show,
.input-group .zeit-caret:first-child {
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-left: 0;
	color: #343a40;
	box-shadow: none;
}

tr{
	vertical-align: top;
}

/* Aktionsleiste auf Rechnungsdetailseiten: Buttons/Links fliessen inline
   (kein Flex) mit etwas Abstand und brechen bei Bedarf um. */
.rgactions > .btn {
	margin: 0 4px 4px 0;
	vertical-align: top;
}

/* Keine Inline-Baseline: Alle Rechnungsaktionen starten exakt auf derselben Hoehe. */
.invoice-actions {
	display: flex;
	align-items: flex-start;
	gap: .25rem;
	white-space: nowrap;
}
.invoice-actions > .btn {
	margin: 0;
}

/* Ressourcen-Zeiten: nur in der Handy-Kachel (dort bei den Ressourcen integriert);
   auf dem Desktop stehen die Zeiten in der eigenen Spalte. */
.res-zeit{
	display:none;
}

/* ===== Mobile-Optimierungen ===== */
@media (max-width: 767px) {
	/* Touch-Groesse: btn-sm ist auf Smartphones zu klein zum Tippen */
	.btn-sm {
		padding: 6px 10px;
		font-size: 13px;
	}

	/* Detailseiten-Formular: Felder untereinander statt 2-spaltig (Label ueber Feld).
	   table/tbody als Block, sonst bestimmt der breiteste Inhalt die Seitenbreite. */
	.formtable-mobile,
	.formtable-mobile > tbody {
		display: block;
		width: 100%;
	}
	.formtable-mobile > tbody > tr {
		display: block;
	}
	.formtable-mobile > tbody > tr > td {
		display: block;
		width: 100% !important;
		overflow-x: auto; /* verschachtelte breite Tabellen scrollen in der Zelle */
	}

	/* Aktions-Buttons auf der Detailseite: gestapelt in voller Breite */
	.rgactions .btn {
		display: block;
		width: 100%;
		height: auto;
		margin-bottom: 8px;
	}

	/* Speichern-/Submit-Buttons in Detailformularen (.formtable-mobile) auf dem
	   Handy voll breit und gestapelt statt schmal nebeneinander. Nur direkte
	   Zellen-Kinder, damit Icon-Buttons in verschachtelten Tabellen unberuehrt
	   bleiben. */
	.formtable-mobile > tbody > tr > td > input[type="submit"].btn,
	.formtable-mobile > tbody > tr > td > input[type="button"].btn,
	.formtable-mobile > tbody > tr > td > button[type="submit"].btn {
		display: block;
		width: 100%;
		float: none !important;
		margin: 0 0 8px 0 !important;
	}

	/* Lange Button-Texte umbrechen statt die Seite zu verbreitern */
	.btn {
		white-space: normal;
	}

	/* Lange E-Mail-Adressen in Listen umbrechen lassen */
	.table a[href^="mailto:"] {
		overflow-wrap: anywhere;
		word-break: break-all;
	}

	/* Tabellen mit .table-mobilewrap sollen auf dem Handy umbrechen statt scrollen. */
	.table-responsive > .table-mobilewrap > tbody > tr > td,
	.table-responsive > .table-mobilewrap > thead > tr > th {
		white-space: normal;
	}

	/* ===== Karten-Layout fuer Kurs-/Datentabellen (.table-cards) =====
	   Wiederverwendbar: Tabelle bekommt class="table-cards", jede <td> ein
	   data-label="Spaltenname". Auf dem Handy wird jede Zeile zu einer Karte,
	   die Kopfzeile ausgeblendet und jede Zelle als "Label: Wert" gezeigt.
	   Desktop bleibt unveraendert. Kein JavaScript.
	   Uebernahme auf weitere Seiten/Forks: gleiche Klasse + data-label setzen. */
	.table-responsive > .table-cards,
	.table-cards {
		display: block;
		width: 100%;
		margin-bottom: 0;
	}
	.table-cards > tbody {
		display: block;
		width: 100%;
	}
	/* Kopfzeile ausblenden (echtes <thead> oder <tr class="header">) */
	.table-cards > thead,
	.table-cards > tbody > tr.header {
		display: none;
	}
	/* Jede Datenzeile = Karte */
	.table-cards > tbody > tr {
		display: block;
		width: 100%;
		margin: 0 0 10px;
		padding: 8px 12px;
		border: 1px solid #ddd;
		border-radius: 6px;
		background: #fff;
	}
	/* Bootstrap-Zebrastreifen auf dem Handy neutralisieren */
	.table-cards.table-striped > tbody > tr:nth-of-type(odd) {
		background: #fff;
	}
	/* Warn-Zeilen (zu wenig Anmeldungen) weiterhin hervorheben */
	.table-cards > tbody > tr.alert-warning {
		background: #fcf8e3;
		border-color: #faebcc;
	}
	/* Zellen untereinander; nowrap und Zell-Rahmen aufheben */
	.table-responsive > .table-cards > tbody > tr > td,
	.table-cards > tbody > tr > td {
		display: block;
		width: 100% !important;
		border: 0 !important;
		padding: 2px 0;
		white-space: normal !important;
	}
	/* Leere Zellen (z.B. keine Zeiten/Anmeldungen) ausblenden statt leeres Label */
	.table-cards > tbody > tr > td:empty {
		display: none;
	}
	/* Spaltenname als Label vor dem Wert */
	.table-cards > tbody > tr > td[data-label]::before {
		content: attr(data-label) ":";
		display: inline-block;
		padding-right: 6px;
		font-weight: bold;
		color: #888;
		vertical-align: top;
	}
	/* Ort auf dem Handy kommagetrennt statt auf zwei Zeilen */
	.table-cards td[data-label="Ort"] br.ort-br {
		display: none;
	}
	.table-cards td[data-label="Ort"] .ort-plz::before {
		content: ", ";
	}
	/* Ressourcen-Zeiten in der Kachel neben der Ressource anzeigen */
	.res-zeit {
		display: inline;
	}

	/* ===== Kurs-spezifisches Kachel-Layout (.table-cards-kurse) =====
	   Erste Zeile = Titel: "Kurs <ID> <Kursart/Titel>" (Spalten 1 + 3 nebeneinander),
	   restliche Felder darunter. Zeiten-Spalte ausblenden (bei Ressourcen integriert). */
	.table-cards-kurse > tbody > tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
	}
	.table-cards-kurse > tbody > tr > td {
		order: 1;
	}
	/* Kurs-ID (Spalte 1) und Kursart/Titel (Spalte 3) auf die erste Zeile */
	.table-cards-kurse > tbody > tr > td:nth-child(1),
	.table-cards-kurse > tbody > tr > td:nth-child(3) {
		order: 0;
		flex: 0 0 auto;
		width: auto !important;
	}
	/* "Kurs"-Prefix ohne Doppelpunkt und ohne feste Label-Breite */
	.table-cards-kurse > tbody > tr > td:nth-child(1)::before {
		content: "Kurs";
		min-width: 0;
		padding-right: 4px;
	}
	/* Kursart/Titel ohne Label, direkt hinter der ID */
	.table-cards-kurse > tbody > tr > td:nth-child(3)::before {
		content: none;
	}
	.table-cards-kurse > tbody > tr > td:nth-child(3) {
		padding-left: 6px;
	}
	/* Zeiten-Spalte in der Kachel ausblenden (steht bei den Ressourcen) */
	.table-cards-kurse > tbody > tr > td[data-label="Zeiten"] {
		display: none;
	}
}