/*
 * Müller Motorcycle – Oberfläche der Zeiterfassung
 *
 * Liegt über dem alten Theme (core.min.css / app.css) und übernimmt die
 * Gestaltung des Anwesenheits-Dashboards (raspi.php): dunkler Grund,
 * Markenrot, Barlow Condensed.
 *
 * Alles steht in @media screen – der Ausdruck bleibt hell wie bisher.
 */

:root {
	--grund: #07090b;
	--kachel-hell: #1a222c;
	--kachel-dunkel: #11161d;
	--feld: #0b0f14;
	--kante: #2b3642;
	--kante-hell: #435061;
	--chalk: #eceff3;
	--text: #dde3ea;
	--stahl: #aab5c3;
	--stahl-dunkel: #8d9aab;
	--rot: #94121b; /* Markenrot aus dem Logo */
	--rot-tief: #45090c;
	--rot-hell: #e8232e;
	--gruen: #4fd69a;
	--gelb: #f3bd45;

	--radius: 10px;
	--radius-klein: 6px;
	--seitenleiste: 190px;
	--kopf-h: 64px;

	--schrift: 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', Roboto, system-ui, sans-serif;
	--schrift-text: 'Barlow Semi Condensed', 'Barlow Condensed', Roboto, system-ui, sans-serif;
}

@media screen {

	/* ---------- Grund ---------- */
	html,
	body {
		background: var(--grund);
	}

	body {
		color: var(--text);
		font-family: var(--schrift-text);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.45;
		-webkit-font-smoothing: antialiased;
		font-variant-numeric: tabular-nums;
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--schrift);
		color: var(--chalk);
		font-weight: 600;
		letter-spacing: 0;
	}

	b, strong {
		font-weight: 600;
	}

	small {
		color: var(--stahl);
		font-weight: 400;
	}

	a {
		color: var(--chalk);
	}

	a:hover,
	a:focus {
		color: #fff;
	}

	::selection {
		background: var(--rot);
		color: #fff;
	}

	/* Beschriftungen: klein, gesperrt, Versalien – wie auf der Tafel */
	.card-title,
	.table thead th,
	.nav-tabs .nav-link,
	.menu-link .title,
	label,
	.btn {
		font-family: var(--schrift-text);
		text-transform: uppercase;
		letter-spacing: 0.12em;
	}

	/* ---------- Seitenleiste ---------- */
	.sidebar {
		width: var(--seitenleiste);
		background: var(--kachel-dunkel);
		border-right: 1px solid var(--kante);
		box-shadow: none;
	}

	.sidebar-header {
		height: var(--kopf-h);
		padding: 0 14px;
		background: linear-gradient(180deg, var(--rot) 0%, var(--rot-tief) 100%);
		border-bottom: 1px solid var(--kante);
	}

	.sidebar-header .marke {
		display: block;
		margin: 0;
		flex: 1 1 auto;
	}

	.sidebar-header .marke img {
		display: block;
		width: 100%;
		max-height: 40px;
	}

	.sidebar-navigation {
		overflow-y: auto;
		padding-top: 10px;
	}

	.sidebar .menu {
		margin-bottom: 10px;
	}

	.sidebar .menu-link {
		position: relative;
		height: 46px;
		padding: 0 6px;
		color: var(--text);
	}

	.sidebar .menu-link .icon {
		font-size: 15px;
		color: var(--stahl);
	}

	.sidebar .menu-link .title {
		font-size: 13px;
		font-weight: 500;
	}

	.sidebar .menu > .menu-item:hover > .menu-link,
	.sidebar .menu:not(.menu-bordery) > .menu-item.active > .menu-link {
		color: #fff;
		background: rgba(255, 255, 255, 0.04);
	}

	.sidebar .menu-submenu .menu-item:hover > .menu-link {
		color: #fff;
	}

	.sidebar .menu-item:hover > .menu-link .icon,
	.sidebar .menu-item.active > .menu-link .icon {
		color: var(--rot-hell);
	}

	/* Kontrollleuchte am aktiven Menüpunkt */
	.sidebar .menu > .menu-item.active > .menu-link::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 3px;
		margin: 0;
		border-radius: 0 2px 2px 0;
		background: var(--rot-hell);
		box-shadow: 0 0 10px rgba(232, 35, 46, 0.8);
	}

	.sidebar .menu-submenu {
		background: transparent;
		padding: 0 0 8px;
	}

	.sidebar .menu-submenu .menu-link {
		height: 30px;
		color: var(--text);
	}

	.sidebar .menu-submenu .menu-link .title {
		font-size: 14px;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0.02em;
	}

	.sidebar .menu-submenu .menu-link .dot::after {
		width: 5px;
		height: 5px;
		top: -2px;
		margin-left: -2px;
		border: 0;
		background: var(--stahl-dunkel);
	}

	.sidebar .menu-submenu .menu-item:hover > .menu-link .dot::after,
	.sidebar .menu-submenu .menu-item.active > .menu-link .dot::after {
		background: var(--rot-hell);
		border: 0;
	}

	.sidebar .menu-submenu .menu-item.active > .menu-link {
		color: #fff;
	}

	.seitenleiste__login,
	.seitenleiste__zeit {
		flex: none;
		width: 100%;
		padding: 14px;
		border-top: 1px solid var(--kante);
		white-space: normal;
	}

	.seitenleiste__zeit {
		font-family: var(--schrift-text);
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--stahl);
	}

	.seitenleiste__zeit strong {
		display: block;
		margin-top: 2px;
		font-family: var(--schrift);
		font-size: 26px;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 1.1;
		color: var(--chalk);
	}

	.sidebar ~ main {
		margin-left: var(--seitenleiste);
	}

	/* ---------- Seitenkopf ---------- */
	.header {
		margin: 0;
		padding: 0;
		background: linear-gradient(180deg, var(--rot) 0%, var(--rot-tief) 100%);
		border: 0;
		border-bottom: 1px solid var(--kante);
		box-shadow: none;
	}

	.header-info {
		min-height: var(--kopf-h);
		margin: 0;
		padding: 0 30px;
		display: flex;
		align-items: center;
		background: transparent;
	}

	.header-title {
		margin: 0;
		font-family: var(--schrift);
		font-size: 30px;
		font-weight: 600;
		line-height: 1;
		color: #fff;
	}

	.header-title strong {
		font-weight: 400;
		color: rgba(255, 255, 255, 0.82);
	}

	.header-title small {
		display: block;
		margin-top: 6px;
		font-family: var(--schrift-text);
		font-size: 12px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.82);
	}

	.main-content {
		padding: 24px 30px 0;
	}

	/* ---------- Kacheln ---------- */
	.card {
		margin-bottom: 24px;
		color: var(--text);
		background: linear-gradient(155deg, var(--kachel-hell) 0%, var(--kachel-dunkel) 100%);
		border: 1px solid var(--kante);
		border-radius: var(--radius);
		box-shadow: none;
		overflow: hidden;
	}

	/* Kacheln in Kacheln (Reiter rechts) liegen flach auf */
	.card .card {
		background: transparent;
		border: 0;
		border-radius: 0;
		margin-bottom: 0;
	}

	.card-title {
		padding: 16px 20px;
		margin: 0;
		font-size: 14px;
		font-weight: 600;
		color: var(--chalk);
		border-bottom: 1px solid var(--kante);
	}

	.card-title strong {
		font-weight: 600;
		color: var(--chalk);
	}

	.card-header {
		padding: 12px 20px;
		background: transparent;
		border-bottom: 1px solid var(--kante);
	}

	.card-header > .card-title,
	.abschnitt > .card-title {
		padding: 0;
		border: 0;
	}

	.card-body {
		padding: 20px;
	}

	.card-footer {
		padding: 14px 20px;
		background: transparent;
		border-top: 1px solid var(--kante);
	}

	/* Zwischenüberschrift innerhalb einer Kachel */
	.abschnitt {
		margin: 0;
		padding: 14px 20px;
		border-top: 1px solid var(--kante);
		border-bottom: 1px solid var(--kante);
		background: rgba(0, 0, 0, 0.25);
	}

	/* ---------- Tabellen ---------- */
	.table {
		margin-bottom: 0;
		color: var(--text);
		background: transparent;
	}

	.table th,
	.table td,
	table.table-smaller th,
	table.table-smaller td {
		padding: 9px 12px;
		vertical-align: middle;
		border-top: 1px solid var(--kante);
		font-weight: 400;
	}

	.table th:first-child,
	.table td:first-child {
		padding-left: 20px;
	}

	.table th:last-child,
	.table td:last-child {
		padding-right: 20px;
	}

	.table thead th {
		padding-top: 12px;
		padding-bottom: 12px;
		font-size: 12px;
		font-weight: 600;
		color: var(--stahl);
		border-top: 0;
		border-bottom: 1px solid var(--kante);
	}

	.table tbody th,
	.table tfoot th {
		border-top: 1px solid var(--kante);
		color: var(--chalk);
		font-weight: 500;
	}

	.table tbody tr:first-child > td,
	.table tbody tr:first-child > th {
		border-top: 0;
	}

	.table tfoot th {
		font-family: var(--schrift);
		font-size: 20px;
		background: rgba(0, 0, 0, 0.25);
	}

	.table tfoot th small {
		font-family: var(--schrift-text);
		font-size: 13px;
	}

	.table-hover tbody tr:hover {
		background: rgba(255, 255, 255, 0.035);
	}

	.table-striped tbody tr:nth-of-type(odd) {
		background: rgba(255, 255, 255, 0.025);
	}

	.table-bordered,
	.table-bordered th,
	.table-bordered td {
		border-color: var(--kante);
	}

	.table .schauher th {
		color: var(--chalk);
	}

	/* Zeitspalte: die eigentliche Messgröße bekommt die Anzeigeschrift */
	.table-zeiten tbody td:nth-child(3) {
		font-family: var(--schrift);
		font-size: 20px !important;
		font-weight: 500 !important;
		color: var(--chalk);
		white-space: nowrap;
	}

	.table-zeiten tbody td:nth-child(4) {
		color: var(--text);
	}

	/* Zwischenüberschrift als Tabellenzeile (Eintrag hinzufügen) */
	.table .abschnitt-zeile th {
		padding-top: 14px;
		padding-bottom: 14px;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--chalk);
		background: rgba(0, 0, 0, 0.25);
		border-top: 1px solid var(--kante);
		border-bottom: 1px solid var(--kante);
	}

	/* Ergebniszeilen (Soll, Über-/Fehlstunden) unter "Gesamt" */
	.table tfoot .btn {
		font-family: var(--schrift-text);
	}

	/* Statusmarken */
	.avatar {
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 13px;
		border-radius: 50%;
	}

	.table .avatar,
	table.table-smaller .avatar {
		width: 28px;
		height: 28px;
		line-height: 26px;
		font-size: 13px;
		text-align: center;
		border-radius: 50%;
		border: 1px solid var(--kante-hell);
		background: var(--feld);
		color: var(--stahl);
	}

	.table .avatar.bg-zeit,
	.table .avatar.bg-success {
		background: rgba(63, 178, 127, 0.22) !important;
		border-color: rgba(63, 178, 127, 0.45);
		color: var(--gruen);
	}

	.table .avatar.bg-pause,
	.table .avatar.bg-warning,
	.table .avatar.bg-orange {
		background: rgba(224, 167, 46, 0.22) !important;
		border-color: rgba(224, 167, 46, 0.45);
		color: var(--gelb);
	}

	.table .avatar.bg-urlaub,
	.table .avatar.bg-feiertag,
	.table .avatar.bg-gleitzeit {
		background: rgba(170, 181, 195, 0.2) !important;
		border-color: rgba(124, 138, 157, 0.45);
		color: var(--chalk);
	}

	.table .avatar.bg-krank,
	.table .avatar.bg-geloescht,
	.table .avatar.bg-danger {
		background: rgba(232, 35, 46, 0.24) !important;
		border-color: rgba(232, 35, 46, 0.5);
		color: var(--rot-hell);
	}

	.ist-minus {
		color: #ff5a63 !important;
	}

	.ist-plus {
		color: var(--gruen) !important;
	}

	.table .nav-link {
		padding: 4px 6px;
		color: var(--stahl);
	}

	.table .nav-link.hover-danger:hover {
		color: var(--rot-hell);
	}

	.table .nav-link.hover-primary:hover {
		color: var(--gruen);
	}

	/* ---------- Monatswechsel ---------- */
	.monatsauswahl {
		position: static;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		max-height: none;
		margin: 0;
		padding: 12px 20px;
		background: transparent;
	}

	.monatsauswahl > div {
		float: none !important;
		width: auto !important;
		flex: 1 1 0;
	}

	.monatsauswahl > div:last-child {
		text-align: right;
	}

	.monatsauswahl .card-title {
		flex: none;
		font-family: var(--schrift);
		font-size: 26px;
		letter-spacing: 0;
		text-transform: none;
	}

	.monatsauswahl .card-title strong {
		font-weight: 600;
	}

	/* ---------- Schaltflächen ---------- */
	.btn {
		padding: 7px 16px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.5;
		color: var(--chalk);
		background: var(--kachel-hell);
		border: 1px solid var(--kante-hell);
		border-radius: var(--radius-klein);
		box-shadow: none !important;
		transition: background-color 0.15s, border-color 0.15s, color 0.15s;
	}

	.btn:hover,
	.btn:focus {
		color: #fff;
		background: var(--kante);
		border-color: var(--stahl);
	}

	.btn-primary,
	.btn-primary:not([disabled]):not(.disabled):active {
		color: #fff;
		background: #b0151f;
		border-color: var(--rot-hell);
	}

	.btn-primary:hover,
	.btn-primary:focus {
		color: #fff;
		background: #c91a25;
		border-color: #ff5a63;
	}

	.btn.btn-secondary,
	.btn.btn-secondary:not([disabled]):not(.disabled):active {
		opacity: 1;
		color: var(--chalk);
		background: var(--kachel-hell);
		border-color: var(--kante-hell);
	}

	.btn-xs,
	.btn-sm {
		padding: 4px 10px;
		font-size: 12px;
	}

	.btn-table-end {
		margin: 3px 0 3px 10px;
	}

	.btn:focus-visible,
	.form-control:focus-visible,
	.nav-link:focus-visible,
	.menu-link:focus-visible {
		outline: 2px solid var(--rot-hell);
		outline-offset: 2px;
	}

	/* ---------- Formulare ---------- */
	label {
		margin-bottom: 4px;
		font-size: 12px;
		font-weight: 500;
		color: var(--stahl);
	}

	.form-control,
	.input-group > input[type="text"],
	.table-end-form input[type="text"] {
		height: auto;
		padding: 8px 12px;
		font-family: var(--schrift-text);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--chalk);
		background: var(--feld);
		border: 1px solid var(--kante-hell);
		border-radius: var(--radius-klein);
		box-shadow: none;
	}

	select.form-control:not([size]):not([multiple]) {
		height: auto;
	}

	.form-control:focus {
		color: #fff;
		background: var(--feld);
		border-color: var(--rot-hell);
		box-shadow: 0 0 0 3px rgba(232, 35, 46, 0.18);
	}

	.form-control:disabled,
	.form-control[readonly] {
		color: var(--stahl);
		background: transparent;
		border-color: var(--kante);
		opacity: 1;
	}

	.form-control::placeholder {
		color: var(--stahl-dunkel);
	}

	.input-group .form-control:not(:last-child),
	.input-group > input:not(:last-child) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.input-group-addon {
		padding: 0 12px;
		color: var(--stahl);
		background: var(--kachel-hell);
		border: 1px solid var(--kante-hell);
		border-left: 0;
		border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
	}

	/* das alte Theme verschmilzt Felder zu einem Block – hier stehen sie einzeln */
	.form-type-combine .form-group,
	.form-type-combine .form-groups-attached .form-group {
		margin: 0 0 14px;
		padding: 0;
		background: transparent;
		border: 0;
	}

	.form-type-combine .form-group .form-control.form-control,
	.form-type-combine select.form-control:not([size]):not([multiple]) {
		height: auto;
		padding: 8px 12px;
		color: var(--chalk);
		background: var(--feld);
		border: 1px solid var(--kante-hell);
		border-radius: var(--radius-klein);
	}

	.form-type-combine .form-group .form-control.form-control:focus {
		border-color: var(--rot-hell);
	}

	.form-type-combine .form-group .form-control.form-control:disabled {
		color: var(--stahl);
		background: transparent;
		border-color: var(--kante);
	}

	.form-type-combine .card-body,
	.fix-sidebar-right .form-type-combine .card-body {
		padding: 20px;
	}

	.form-groups-attached {
		margin-bottom: 0;
	}

	.in-weiss {
		margin: 0;
	}

	.in-weiss > [class*="col-"] {
		padding: 0;
	}

	.in-weiss .card {
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.form-type-combine h6 {
		margin-bottom: 10px;
		font-family: var(--schrift-text);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--stahl);
	}

	/* Warnung direkt am Formular (z. B. widersprüchliche Konditionen) */
	.feld-warnung {
		margin: 0 0 14px;
		padding: 10px 12px;
		font-size: 15px;
		color: #fff;
		background: rgba(232, 35, 46, 0.18);
		border: 1px solid var(--rot-hell);
		border-left-width: 3px;
		border-radius: var(--radius-klein);
	}

	.feld-warnung[hidden] {
		display: none;
	}

	.form-type-combine .form-group .form-control.form-control.ist-konflikt {
		border-color: var(--rot-hell);
		box-shadow: 0 0 0 3px rgba(232, 35, 46, 0.18);
	}

	/* unveredelte Auswahlfelder (bis bootstrap-select greift) */
	.table-end-form select,
	.card-header select {
		padding: 7px 10px;
		font-family: var(--schrift-text);
		font-size: 15px;
		color: var(--chalk);
		background: var(--feld);
		border: 1px solid var(--kante-hell);
		border-radius: var(--radius-klein);
	}

	.form-type-combine .form-groups-attached > .row {
		margin-left: -7px;
		margin-right: -7px;
	}

	.form-type-combine .form-groups-attached > .row > [class*="col-"] {
		padding-left: 7px;
		padding-right: 7px;
	}

	.form-type-combine .form-group label {
		padding: 0;
	}

	.form-type-combine .form-groups-attached .card-footer {
		margin: 0 -20px 20px;
		padding: 0 20px 20px;
		border-top: 0;
		border-bottom: 1px solid var(--kante);
	}

	.form-type-combine > .card-footer {
		margin: 0;
		padding-top: 14px;
		border-top: 1px solid var(--kante);
		border-bottom: 0;
	}

	.in-weiss > [class*="col-"] + [class*="col-"] > .card {
		border-top: 1px solid var(--kante);
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	/* Auswahlfelder (bootstrap-select) */
	.bootstrap-select.btn-group .dropdown-toggle {
		padding: 7px 12px;
		font-family: var(--schrift-text);
		font-size: 15px;
		letter-spacing: 0;
		text-transform: none;
		color: var(--chalk);
		background: var(--feld);
		border: 1px solid var(--kante-hell);
	}

	/* Pfeil sitzt fest am rechten Rand des Feldes */
	.bootstrap-select.btn-group .dropdown-toggle {
		position: relative;
		width: 100%;
		padding-right: 28px;
		text-align: left;
	}

	.bootstrap-select.btn-group .dropdown-toggle .filter-option {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bootstrap-select.btn-group .dropdown-toggle::after {
		position: absolute;
		top: 50%;
		right: 11px;
		margin: -2px 0 0;
		opacity: 1;
		color: var(--stahl);
	}

	.bootstrap-select.btn-group .dropdown-toggle .bs-caret {
		display: none;
	}

	.dropdown-menu,
	.bootstrap-select.btn-group .dropdown-menu {
		color: var(--text);
		background: var(--kachel-hell);
		border: 1px solid var(--kante-hell);
		border-radius: var(--radius-klein);
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
	}

	.dropdown-item,
	.bootstrap-select.btn-group .dropdown-menu li a {
		color: var(--text);
	}

	.dropdown-item:hover,
	.dropdown-item:focus,
	.bootstrap-select.btn-group .dropdown-menu li a:hover,
	.bootstrap-select.btn-group .dropdown-menu li.selected a {
		color: #fff;
		background: var(--rot);
	}

	/* Datums- und Uhrzeitwähler */
	.datepicker.dropdown-menu,
	.popover.clockpicker-popover {
		color: var(--text);
		background: var(--kachel-hell);
		border: 1px solid var(--kante-hell);
	}

	.datepicker table tr td,
	.datepicker table tr th {
		color: var(--text);
	}

	.datepicker table tr td.old,
	.datepicker table tr td.new {
		color: var(--stahl-dunkel);
	}

	.datepicker table tr td.day:hover,
	.datepicker table tr td.focused,
	.datepicker .datepicker-switch:hover,
	.datepicker .prev:hover,
	.datepicker .next:hover,
	.datepicker table tr td span:hover {
		background: var(--kante-hell);
	}

	.datepicker table tr td.active,
	.datepicker table tr td.active:hover,
	.datepicker table tr td span.active {
		color: #fff !important;
		background: var(--rot) !important;
	}

	.datepicker table tr td.today {
		color: #fff;
		background: transparent;
		box-shadow: inset 0 0 0 1px var(--rot-hell);
	}

	.clockpicker-popover .popover-title {
		color: var(--chalk);
		background: var(--kachel-dunkel);
		border-bottom-color: var(--kante-hell);
	}

	.clockpicker-popover .popover-content,
	.clockpicker-plate {
		background: var(--feld);
		border-color: var(--kante-hell);
	}

	.clockpicker-tick {
		color: var(--text);
	}

	/* ---------- Reiter ---------- */
	.nav-tabs {
		margin: 0;
		padding: 0 8px;
		border-bottom: 1px solid var(--kante);
	}

	.nav-tabs .nav-link {
		padding: 16px 12px 14px;
		font-size: 13px;
		font-weight: 600;
		color: var(--stahl);
		background: transparent;
		border-bottom: 2px solid transparent;
		transition: color 0.15s, border-color 0.15s;
	}

	.nav-tabs .nav-link:hover {
		color: var(--chalk);
		border-color: var(--kante-hell);
	}

	.nav-tabs .nav-link.active,
	.nav-tabs .nav-link.active:focus,
	.nav-tabs .nav-link.active:hover {
		color: #fff;
		background: transparent;
		border-color: var(--rot-hell);
	}

	.nav-tabs-light-mode,
	.fix-sidebar-right .card-body ul.nav {
		background: transparent;
		border-bottom: 1px solid var(--kante);
	}

	.nav-tabs-light-mode .nav-link {
		border-bottom: 2px solid transparent;
	}

	.fix-sidebar-right .card-body ul.nav li {
		border-right: 0;
	}

	/* rechte Spalte: steht ab 992px fest neben der Zeitenliste */
	.fix-sidebar-right {
		background: var(--kachel-dunkel);
	}

	.fix-sidebar-right > .card-body {
		padding: 0;
	}

	@media (min-width: 992px) {
		.fix-sidebar-right {
			width: calc((100vw - var(--seitenleiste)) / 12 * 5);
			padding-left: 0;
			border: 0;
			border-left: 1px solid var(--kante);
			border-radius: 0;
			box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
			overflow-y: auto;
		}

		.fix-sidebar-right .card-body ul.nav {
			position: sticky;
			top: 0;
			z-index: 2;
			height: var(--kopf-h);
			align-items: flex-end;
			background: var(--kachel-dunkel);
		}
	}

	/* ---------- Hinweisfelder (Urlaubsübersicht) ---------- */
	.alert {
		margin-bottom: 14px;
		padding: 12px 14px;
		color: var(--text);
		background: var(--feld);
		border: 1px solid var(--kante-hell);
		border-radius: var(--radius-klein);
	}

	.alert-success {
		color: var(--gruen);
		border-color: rgba(63, 178, 127, 0.45);
		background: rgba(63, 178, 127, 0.1);
	}

	.urlaub-summe {
		margin: 0;
		padding: 6px 12px 0;
		border-top: 1px solid var(--kante);
	}

	.urlaub-summe > [class*="col-"] {
		padding-left: 8px;
		padding-right: 8px;
	}

	.urlaub-summe__titel {
		margin: 10px 0 6px;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-align: center;
		color: var(--stahl);
	}

	/* Formularblock unter einer Tabelle (Gleitzeit) */
	.table-end-form {
		padding: 20px;
		border-top: 1px solid var(--kante);
		background: rgba(0, 0, 0, 0.25);
	}

	.table-end-form h4 {
		margin-bottom: 14px;
		font-family: var(--schrift-text);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.table-end-form .row > .btn {
		flex: 1 1 auto;
		max-width: none;
		margin: 0 15px;
	}

	/* Wochenwechsel beim Urlaubsantrag */
	.kw-wechsel {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.kw-wechsel .btn {
		min-width: 44px;
		font-size: 16px;
		line-height: 1.2;
	}

	.kw-wechsel__titel {
		margin: 0;
		font-size: 22px;
		font-weight: 600;
		white-space: nowrap;
	}

	.kw-wechsel__titel small {
		font-family: var(--schrift-text);
		font-size: 14px;
		color: var(--stahl);
	}

	/* ---------- Stempelfeld (Kacheln wie auf der Tafel in raspi.php) ---------- */
	.stempeltafel {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 10px;
	}

	.stempel {
		position: relative;
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 104px;
		padding: 14px 16px 14px 22px;
		overflow: hidden;
		color: var(--text);
		text-decoration: none;
		border: 1px solid var(--kante);
		border-radius: var(--radius);
		background: linear-gradient(155deg, var(--kachel-hell) 0%, var(--kachel-dunkel) 100%);
		transition: border-color 0.15s, filter 0.15s;
	}

	a.stempel:hover,
	a.stempel:focus {
		color: var(--text);
		border-color: var(--stahl-dunkel);
		filter: brightness(1.12);
	}

	.stempel__lampe {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 6px;
		background: var(--kante-hell);
	}

	.stempel--an {
		border-color: #8a161d;
		background:
			linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 16%),
			linear-gradient(155deg, #8a1319 0%, #5a0c11 58%, #33080b 100%);
	}

	a.stempel--an:hover,
	a.stempel--an:focus {
		border-color: var(--rot-hell);
	}

	.stempel--an .stempel__lampe {
		background: linear-gradient(180deg, #ff6167 0%, var(--rot-hell) 38%, #a8151c 100%);
		box-shadow: 0 0 12px rgba(232, 35, 46, 0.95), 0 0 26px rgba(232, 35, 46, 0.45);
	}

	.stempel__foto {
		position: relative;
		flex: none;
		width: 68px;
		height: 68px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.16);
		background: var(--feld);
		font-family: var(--schrift);
		font-size: 24px;
		font-weight: 600;
		color: var(--stahl);
	}

	.stempel__foto img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(1) contrast(0.92) brightness(0.8);
	}

	.stempel--an .stempel__foto {
		border-color: rgba(255, 255, 255, 0.45);
		background: #2b0709;
		color: rgba(255, 255, 255, 0.8);
	}

	.stempel--an .stempel__foto img {
		filter: none;
	}

	.stempel__ident {
		flex: 1 1 auto;
		min-width: 0;
	}

	.stempel__name {
		display: block;
		font-family: var(--schrift);
		font-size: 28px;
		font-weight: 600;
		line-height: 1.05;
		color: var(--text);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.stempel--an .stempel__name {
		color: #fff;
	}

	.stempel__rest,
	.stempel__seit,
	.stempel__anzeige--aus {
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.12em;
		line-height: 1.3;
		text-transform: uppercase;
		color: var(--stahl);
	}

	.stempel__rest {
		display: block;
		margin-top: 5px;
	}

	.stempel--an .stempel__rest,
	.stempel--an .stempel__seit {
		color: rgba(255, 255, 255, 0.82);
	}

	.stempel__anzeige {
		flex: none;
		text-align: right;
		line-height: 1;
	}

	.stempel__dauer {
		display: block;
		font-family: var(--schrift);
		font-size: 34px;
		font-weight: 500;
		color: #fff;
		white-space: nowrap;
	}

	.stempel__seit {
		display: block;
		margin-top: 6px;
		white-space: nowrap;
	}

	.stempel__anzeige--aus {
		color: var(--stahl-dunkel);
	}

	@media (max-width: 480px) {
		.stempeltafel {
			grid-template-columns: 1fr;
		}

		.stempel__foto {
			width: 54px;
			height: 54px;
		}

		.stempel__name {
			font-size: 24px;
		}

		.stempel__dauer {
			font-size: 28px;
		}
	}

	/* ---------- Anmeldung ---------- */
	.login_smartphone > div[style] {
		background: var(--kachel-dunkel) !important;
		border-bottom: 1px solid var(--kante);
	}

	/* ---------- Kleine Bildschirme ---------- */
	@media (max-width: 991px) {
		.sidebar ~ main {
			margin-left: 0;
		}

		.main-content {
			padding: 16px 12px 0;
		}

		.header-info {
			padding: 0 16px;
		}

		.header-title {
			font-size: 24px;
		}

		.monatsauswahl {
			padding: 10px 12px;
		}

		.monatsauswahl .card-title {
			font-size: 20px;
		}

		.table th:first-child,
		.table td:first-child {
			padding-left: 12px;
		}

		.table th:last-child,
		.table td:last-child {
			padding-right: 12px;
		}
	}

	@media (prefers-reduced-motion: reduce) {

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			transition-duration: 0.01ms !important;
		}
	}
}