/* Design „Midnight Lime“ (#358): dunkles Theme über Bootstrap 5.3 und main.css. Wird nach main.css geladen; das html-Element trägt data-bs-theme="dark",
   damit Bootstrap seine dunklen Varianten nutzt. Farben stehen als Variablen (--lh-*) hier oben; ein heller Modus wäre später ein zweiter Satz Werte.
   Schriften: Inter (Text) und Space Grotesk (Überschriften, große Zahlen), variable Schriften von Google Fonts (SIL Open Font License, siehe assets/fonts). */

/* ------- Schriften-Anfang ------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-v20-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-v20-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/space-grotesk-v22-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/assets/fonts/space-grotesk-v22-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ------- Schriften-Ende ------- */

/* ------- Farben und Bootstrap-Variablen-Anfang ------- */
:root[data-bs-theme=dark] {
	--lh-bg: #0d0e12;
	--lh-surface: #17181e;
	--lh-surface-raised: #1e1f26;
	--lh-surface-hover: #262730;
	--lh-field-bg: #101116;
	--lh-border: #2c2d36;
	--lh-border-subtle: #22232b;
	--lh-text: #f4f4f6;
	--lh-text-body: #e3e4ea;
	--lh-text-muted: #9a9ba6;
	--lh-accent: #c6f432;
	--lh-accent-rgb: 198, 244, 50;
	--lh-accent-hover: #d6fb68;
	--lh-on-accent: #0d0e12;
	--lh-violet: #b4a9ff;
	--lh-cyan: #5ce1e6;
	--lh-orange: #ffb86b;
	--lh-pink: #ff8fc0;
	--lh-red: #ff7a6b;
	--lh-yellow: #ffd66b;
	/* Speichern: eigenes, klares Grün, damit es sich vom gelblichen Lime-Akzent abhebt */
	--lh-save: #4ade80;
	--lh-save-hover: #6ee79a;
	--lh-save-active: #22c55e;
	--lh-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
	--lh-radius-card: 22px;
	--lh-radius-field: 14px;
	--lh-bottom-bar-height: 0px;

	--lh-page-bg: var(--lh-bg);
	--bs-body-bg: var(--lh-surface);
	--bs-body-bg-rgb: 23, 24, 30;
	--bs-body-color: var(--lh-text-body);
	--bs-body-color-rgb: 227, 228, 234;
	--bs-emphasis-color: #fff;
	--bs-emphasis-color-rgb: 255, 255, 255;
	--bs-heading-color: var(--lh-text);
	--bs-secondary-color: var(--lh-text-muted);
	--bs-secondary-color-rgb: 154, 155, 166;
	--bs-secondary-bg: #1c1d24;
	--bs-secondary-bg-rgb: 28, 29, 36;
	--bs-tertiary-color: #7a7b86;
	--bs-tertiary-bg: #1a1b21;
	--bs-tertiary-bg-rgb: 26, 27, 33;
	--bs-border-color: var(--lh-border);
	--bs-border-color-translucent: rgba(255, 255, 255, .08);
	--bs-link-color: var(--lh-accent);
	--bs-link-color-rgb: var(--lh-accent-rgb);
	--bs-link-hover-color: var(--lh-accent-hover);
	--bs-link-hover-color-rgb: 214, 251, 104;
	--bs-highlight-bg: rgba(var(--lh-accent-rgb), .25);
	--bs-highlight-color: var(--lh-text);
	--bs-code-color: var(--lh-pink);

	--bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: .9375rem;
	--bs-border-radius: 12px;
	--bs-border-radius-sm: 9px;
	--bs-border-radius-lg: 18px;
	--bs-border-radius-xl: 24px;
	--bs-border-radius-xxl: 32px;

	--bs-primary: var(--lh-accent);
	--bs-primary-rgb: var(--lh-accent-rgb);
	--bs-success: var(--lh-accent);
	--bs-success-rgb: var(--lh-accent-rgb);
	--bs-secondary: #3a3b46;
	--bs-secondary-rgb: 58, 59, 70;
	--bs-info: var(--lh-cyan);
	--bs-info-rgb: 92, 225, 230;
	--bs-warning: var(--lh-orange);
	--bs-warning-rgb: 255, 184, 107;
	--bs-danger: var(--lh-red);
	--bs-danger-rgb: 255, 122, 107;
	--bs-light: #2c2d36;
	--bs-light-rgb: 44, 45, 54;
	--bs-dark: #0a0b0e;
	--bs-dark-rgb: 10, 11, 14;
	--bs-blue: #6ea8ff;
	--bs-indigo: var(--lh-violet);
	--bs-purple: var(--lh-violet);
	--bs-pink: var(--lh-pink);
	--bs-red: var(--lh-red);
	--bs-orange: var(--lh-orange);
	--bs-yellow: var(--lh-yellow);
	--bs-green: var(--lh-accent);
	--bs-teal: #4fd1b5;
	--bs-cyan: var(--lh-cyan);
	--bs-gray-200: var(--lh-border-subtle);
	--bs-gray-300: var(--lh-border);
	--bs-gray-400: #4a4b56;
	--bs-gray-500: #6c6d78;
	--bs-gray-600: #8a8b96;
	--bs-gray-800: #2c2d36;

	--bs-primary-text-emphasis: var(--lh-accent);
	--bs-primary-bg-subtle: rgba(var(--lh-accent-rgb), .1);
	--bs-primary-border-subtle: rgba(var(--lh-accent-rgb), .35);
	--bs-success-text-emphasis: var(--lh-accent);
	--bs-success-bg-subtle: rgba(var(--lh-accent-rgb), .1);
	--bs-success-border-subtle: rgba(var(--lh-accent-rgb), .35);
	--bs-secondary-text-emphasis: #c4c5ce;
	--bs-secondary-bg-subtle: #22232b;
	--bs-secondary-border-subtle: #3a3b46;
	--bs-info-text-emphasis: var(--lh-cyan);
	--bs-info-bg-subtle: rgba(92, 225, 230, .1);
	--bs-info-border-subtle: rgba(92, 225, 230, .35);
	--bs-warning-text-emphasis: var(--lh-orange);
	--bs-warning-bg-subtle: rgba(255, 184, 107, .1);
	--bs-warning-border-subtle: rgba(255, 184, 107, .35);
	--bs-danger-text-emphasis: var(--lh-red);
	--bs-danger-bg-subtle: rgba(255, 122, 107, .1);
	--bs-danger-border-subtle: rgba(255, 122, 107, .35);
	--bs-light-text-emphasis: var(--lh-text);
	--bs-light-bg-subtle: #22232b;
	--bs-light-border-subtle: #3a3b46;
	--bs-dark-text-emphasis: var(--lh-text);
	--bs-dark-bg-subtle: #0a0b0e;
	--bs-dark-border-subtle: #22232b;

	--bs-form-valid-color: var(--lh-accent);
	--bs-form-valid-border-color: var(--lh-accent);
	--bs-form-invalid-color: var(--lh-red);
	--bs-form-invalid-border-color: var(--lh-red);
	color-scheme: dark;
}
/* Farbe je Modul (Navigation, Menü auf dem Handy); data-module setzt _Layout aus dem Schlüssel des Moduls */
[data-module] { --lh-module-color: var(--lh-text-muted); }
[data-module=General], [data-module=PackingLists] { --lh-module-color: var(--lh-accent); }
[data-module=Emails], [data-module=Media], [data-module=NewsFeeds] { --lh-module-color: var(--lh-cyan); }
[data-module=Contacts], [data-module=Faq], [data-module=Shopping] { --lh-module-color: var(--lh-orange); }
[data-module=Finance], [data-module=BoardGames] { --lh-module-color: var(--lh-violet); }
[data-module=Health], [data-module=Audio], [data-module=Watchlist] { --lh-module-color: var(--lh-pink); }
[data-module=Nutrition] { --lh-module-color: var(--lh-yellow); }
[data-module=Training] { --lh-module-color: var(--lh-red); }
[data-module=Documents], [data-module=LoginCredentials], [data-module=Admin] { --lh-module-color: #c4c5ce; }
/* ------- Farben und Bootstrap-Variablen-Ende ------- */

/* ------- Grundlagen-Anfang ------- */
body { background-color: var(--lh-page-bg); color: var(--bs-body-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--lh-font-display); letter-spacing: -.01em; color: var(--bs-heading-color); }
::selection { background-color: rgba(var(--lh-accent-rgb), .35); color: #fff; }
.text-muted { color: var(--bs-secondary-color) !important; }
/* --bs-secondary ist hier die dunkle Fläche der Secondary-Knöpfe und Badges; als Textfarbe wäre sie auf dem dunklen Grund kaum lesbar (z. B. Mahlzeiten im Ernährungsplan) */
.text-secondary { color: var(--bs-secondary-color) !important; }
.text-dark { color: var(--lh-text) !important; }
.text-black { color: var(--lh-text) !important; }
.bg-white, .bg-light { background-color: var(--lh-surface-raised) !important; }
.border { border-color: var(--bs-border-color) !important; }
.shadow-sm { box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important; }
hr { border-color: var(--bs-border-color); opacity: 1; }
/* Scrollleisten unauffällig dunkel */
* { scrollbar-color: #3a3b46 transparent; }
/* auf den helleren Flächen von Auswahllisten und Popups (--lh-surface-raised) wäre der dunkle Daumen kaum zu sehen; #5c5d6a (#476) und #8e909c auf durchsichtiger Spur
   waren noch zu blass (#564): heller Daumen auf sichtbarer Spur, auch für scrollende Elemente darin (ein Feld, eine Liste), die sonst "*" wieder dunkel macht.
   Ebenso Listen mit eigener Scrollhöhe auf den Seiten: dort muss man sehen, dass es weitergeht (nur die Seite selbst und die Navigation bleiben unauffällig dunkel);
   eine neue Liste mit max-height und overflow-y gehört hierher */
:is(.dropdown-menu, .modal-body), :is(.dropdown-menu, .modal-body) *,
:is(.AccountListCard, .EmailFilingListCard > .card-body, .MediaFileDataBody, .MediaFileContactsBody, .MediaFileFaceMenu, .CategoryIconGrid, .WeekPlanningPreview,
	.FoodSearchResults, .FoodYazioResults, .TrainingRunInstructions, .NewsItemChapters, .ChangeEventValue, .LogContent, .UnknownFacePickList, .InstagramPhotos) { scrollbar-color: #c4c6d0 var(--lh-border); }
/* main.css: feste dunkle Schrift auf Feldern, Tabellen, Einträgen */
.form-control, .form-control:focus, .form-select, .input-group-text, .InboxItemText, .MyDayEventText { color: var(--lh-text-body); }
.InActive { color: #6c6d78 !important; --bs-table-color-state: #6c6d78; }
/* Grün für "erledigt/positiv" gedämpfter als der Akzent, sonst leuchten ganze Listen (Buchungen) */
.ColorGreen { color: #a6dba0 !important; --bs-table-color-state: #a6dba0; }
.ColorRed { color: var(--lh-red) !important; --bs-table-color-state: var(--lh-red); }
.Popup { background-color: var(--lh-surface-raised); border: 1px solid var(--lh-border); border-radius: var(--lh-radius-card); }
.TopicBadge { color: var(--lh-violet); background-color: rgba(180, 169, 255, .14); }
.ql-container { color: var(--lh-text-body); }
.ui-tooltip { background-color: #2c2d36; color: var(--lh-text); }
/* ------- Grundlagen-Ende ------- */

/* ------- Karten-Anfang ------- */
.card { --bs-card-bg: var(--lh-surface); --bs-card-border-color: var(--lh-border-subtle); --bs-card-border-radius: var(--lh-radius-card); --bs-card-inner-border-radius: calc(var(--lh-radius-card) - 1px); --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--lh-text); --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1.1rem; --bs-card-cap-padding-y: .8rem; --bs-card-cap-padding-x: 1.1rem; }
.card-header { font-family: var(--lh-font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; border-bottom-color: var(--lh-border-subtle); }
	/* Leisten und Felder im Kopf (Listen) in normaler Schrift */
	.card-header :is(.ListToolbar, .form-control, .form-select, .btn, .badge, small, .small) { font-family: var(--bs-body-font-family); letter-spacing: normal; }
.card-footer { border-top-color: var(--lh-border-subtle); }
/* Karte in einer Karte etwas heller */
.card .card { --bs-card-bg: var(--lh-surface-raised); --bs-card-border-color: var(--lh-border); --bs-card-border-radius: 18px; --bs-card-inner-border-radius: 17px; }
.card.AutoCollapsible > .card-header::before { color: var(--lh-text-muted); }
/* Teilblock mit schlankem Kopf (SlimHeader) eingeklappt: unter dem Titel so viel Luft wie darüber, sonst klebt die Karte am Titel (#521) */
.card.SlimHeader.AutoCollapsible.Collapsed > .card-header { padding-bottom: var(--bs-card-cap-padding-y); }
/* Handy: Karten in einer Karte (Personen der Mediendatei, FinTS am Konto) ohne eigenen Rahmen, eigene Fläche und seitlichen Innenabstand; ihre Felder stehen bündig
   mit denen der äußeren Karte, eine feine Linie trennt die Abschnitte (#521). Kacheln (h-100, z. B. Gruppen unbekannter Personen) und eigenständige Karten (NoCollapse) bleiben Karten */
@media (max-width: 767.98px) {
	.card .card:not(.h-100, .NoCollapse) { --bs-card-bg: transparent; --bs-card-border-width: 0; --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; --bs-card-spacer-x: 0; --bs-card-cap-padding-x: 0; border-top: var(--bs-border-width) solid var(--lh-border-subtle); box-shadow: none; }
		/* der Pfeil zum Einklappen steht dann am Rand, der Titel rückt nur um ihn ein */
		.card .card.AutoCollapsible:not(.h-100, .NoCollapse) > .card-header { padding-left: 1rem; }
			.card .card.AutoCollapsible:not(.h-100, .NoCollapse) > .card-header:has(> div:first-child)::before { left: 0; }
}
/* ------- Karten-Ende ------- */

/* ------- Buttons-Anfang ------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 999px; --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .42rem; --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--lh-accent-rgb), .3); }
/* Pillen brechen ihren Text nicht um (sonst werden sie auf schmalen Handys doppelt so hoch wie ihre Nachbarn, z. B. im Eingang): reicht der Platz nicht,
   rutscht der ganze Knopf in die nächste Zeile; breiter als sein Platz wird er nie, dann endet der Text mit … */
.btn:not(.btn-group > .btn) { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Ein reiner Symbol-Knopf (beschriftet über aria-label oder title) in einer Flex-Zeile (z. B. Abschicken beim Coach, Passkey löschen) wird nicht gestaucht, sonst wird sein Icon zu … */
.btn:is([aria-label], [title]):has(> i:only-child) { flex-shrink: 0; }
/* Symbole stehen sonst auf der Grundlinie der Schrift und sitzen 1,5 px über der Mitte des Knopfs (in Flex-Knöpfen ohne Wirkung) */
.btn > i:is(.fas, .far, .fab, .fa) { vertical-align: -0.05em; }
/* Info-Symbol mit Erklärung im title: antippbar (default.master.aspx.js zeigt den Text) */
i.fa-info-circle[title] { cursor: pointer; }
/* Kleine Knöpfe kompakt wie vor dem neuen Design (main.css setzt die Schrift der Knöpfe auf inherit, in Kartenköpfen wäre sie sonst so groß wie die Überschrift);
   reine Symbol-Knöpfe (nur ein Icon, beschriftet über aria-label; Text neben dem Icon erkennt CSS nicht) sind kreisrund und so hoch wie die Text-Knöpfe daneben */
.btn-sm, .card-header .btn-sm { font-size: .8125rem; }
/* Speichern-Knöpfe (Disketten-Icon) überall im Grün von --lh-save statt im Akzent, damit man sie auf einen Blick findet */
.btn:has(.fa-save) { --bs-btn-color: var(--lh-on-accent); --bs-btn-bg: var(--lh-save); --bs-btn-border-color: var(--lh-save); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: var(--lh-save-hover); --bs-btn-hover-border-color: var(--lh-save-hover); --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: var(--lh-save-active); --bs-btn-active-border-color: var(--lh-save-active); --bs-btn-disabled-color: var(--lh-on-accent); --bs-btn-disabled-bg: var(--lh-save); --bs-btn-disabled-border-color: var(--lh-save); }
.btn-sm[aria-label]:not(.btn-link):has(> i:only-child) { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: calc(.6rem + 1.5em + var(--bs-btn-border-width) * 2); height: calc(.6rem + 1.5em + var(--bs-btn-border-width) * 2); display: inline-flex; align-items: center; justify-content: center; }
.btn-sm { --bs-btn-border-radius: 999px; --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .3rem; }
.btn-lg { --bs-btn-border-radius: 999px; }
:is(.btn-primary, .btn-success) { --bs-btn-color: var(--lh-on-accent); --bs-btn-bg: var(--lh-accent); --bs-btn-border-color: var(--lh-accent); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: var(--lh-accent-hover); --bs-btn-hover-border-color: var(--lh-accent-hover); --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: #b3e01e; --bs-btn-active-border-color: #b3e01e; --bs-btn-disabled-color: var(--lh-on-accent); --bs-btn-disabled-bg: var(--lh-accent); --bs-btn-disabled-border-color: var(--lh-accent); }
:is(.btn-outline-primary, .btn-outline-success) { --bs-btn-color: var(--lh-accent); --bs-btn-border-color: rgba(var(--lh-accent-rgb), .55); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: var(--lh-accent); --bs-btn-hover-border-color: var(--lh-accent); --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: var(--lh-accent); --bs-btn-active-border-color: var(--lh-accent); --bs-btn-disabled-color: var(--lh-accent); --bs-btn-disabled-border-color: rgba(var(--lh-accent-rgb), .35); }
.btn-secondary { --bs-btn-color: var(--lh-text); --bs-btn-bg: #2c2d36; --bs-btn-border-color: #2c2d36; --bs-btn-hover-color: var(--lh-text); --bs-btn-hover-bg: #3a3b46; --bs-btn-hover-border-color: #3a3b46; --bs-btn-active-color: var(--lh-text); --bs-btn-active-bg: #44454f; --bs-btn-active-border-color: #44454f; --bs-btn-disabled-color: var(--lh-text-muted); --bs-btn-disabled-bg: #2c2d36; --bs-btn-disabled-border-color: #2c2d36; }
.btn-outline-secondary { --bs-btn-color: #c4c5ce; --bs-btn-border-color: #3a3b46; --bs-btn-hover-color: var(--lh-text); --bs-btn-hover-bg: #2c2d36; --bs-btn-hover-border-color: #4a4b56; --bs-btn-active-color: var(--lh-text); --bs-btn-active-bg: #3a3b46; --bs-btn-active-border-color: #4a4b56; --bs-btn-disabled-color: #6c6d78; --bs-btn-disabled-border-color: #2c2d36; }
:is(.btn-light, .btn-outline-light) { --bs-btn-color: var(--lh-text); --bs-btn-bg: var(--lh-surface-raised); --bs-btn-border-color: var(--lh-border); --bs-btn-hover-color: var(--lh-text); --bs-btn-hover-bg: var(--lh-surface-hover); --bs-btn-hover-border-color: #3a3b46; --bs-btn-active-color: var(--lh-text); --bs-btn-active-bg: #2c2d36; --bs-btn-active-border-color: #4a4b56; --bs-btn-disabled-color: #6c6d78; --bs-btn-disabled-bg: var(--lh-surface-raised); --bs-btn-disabled-border-color: var(--lh-border); }
:is(.btn-dark, .btn-outline-dark) { --bs-btn-color: var(--lh-text); --bs-btn-bg: #0a0b0e; --bs-btn-border-color: var(--lh-border); --bs-btn-hover-color: var(--lh-text); --bs-btn-hover-bg: #1a1b21; --bs-btn-hover-border-color: #3a3b46; --bs-btn-active-color: var(--lh-text); --bs-btn-active-bg: #22232b; --bs-btn-active-border-color: #3a3b46; }
.btn-danger { --bs-btn-color: var(--lh-on-accent); --bs-btn-bg: var(--lh-red); --bs-btn-border-color: var(--lh-red); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: #ff9587; --bs-btn-hover-border-color: #ff9587; --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: #f2604f; --bs-btn-active-border-color: #f2604f; --bs-btn-disabled-color: var(--lh-on-accent); --bs-btn-disabled-bg: var(--lh-red); --bs-btn-disabled-border-color: var(--lh-red); }
.btn-outline-danger { --bs-btn-color: var(--lh-red); --bs-btn-border-color: rgba(255, 122, 107, .55); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: var(--lh-red); --bs-btn-hover-border-color: var(--lh-red); --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: var(--lh-red); --bs-btn-active-border-color: var(--lh-red); --bs-btn-disabled-color: var(--lh-red); --bs-btn-disabled-border-color: rgba(255, 122, 107, .35); }
.btn-warning { --bs-btn-color: var(--lh-on-accent); --bs-btn-bg: var(--lh-orange); --bs-btn-border-color: var(--lh-orange); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: #ffc88a; --bs-btn-hover-border-color: #ffc88a; --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: #f5a752; --bs-btn-active-border-color: #f5a752; --bs-btn-disabled-color: var(--lh-on-accent); --bs-btn-disabled-bg: var(--lh-orange); --bs-btn-disabled-border-color: var(--lh-orange); }
.btn-outline-warning { --bs-btn-color: var(--lh-orange); --bs-btn-border-color: rgba(255, 184, 107, .55); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: var(--lh-orange); --bs-btn-hover-border-color: var(--lh-orange); --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: var(--lh-orange); --bs-btn-active-border-color: var(--lh-orange); }
.btn-info { --bs-btn-color: var(--lh-on-accent); --bs-btn-bg: var(--lh-cyan); --bs-btn-border-color: var(--lh-cyan); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: #84eaee; --bs-btn-hover-border-color: #84eaee; --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: #45d3d8; --bs-btn-active-border-color: #45d3d8; }
.btn-outline-info { --bs-btn-color: var(--lh-cyan); --bs-btn-border-color: rgba(92, 225, 230, .55); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: var(--lh-cyan); --bs-btn-hover-border-color: var(--lh-cyan); --bs-btn-active-color: var(--lh-on-accent); --bs-btn-active-bg: var(--lh-cyan); --bs-btn-active-border-color: var(--lh-cyan); }
.btn-link { --bs-btn-color: var(--lh-accent); --bs-btn-hover-color: var(--lh-accent-hover); --bs-btn-active-color: var(--lh-accent-hover); --bs-btn-disabled-color: #6c6d78; font-weight: 500; text-decoration: none; }
/* Gruppen (Auswahl wie Eingang/Aufgabe/Notiz): als Segment-Leiste */
.btn-group > .btn { --bs-btn-border-radius: 999px; }
/* Wochentage (Mo–So, Gewohnheit und Routine): auf dem Handy alle sieben gleich breit in einer Zeile, sonst rutscht "So" in die zweite (#521) */
@media (max-width: 767.98px) {
	.btn-group[aria-label="Wochentage"] { display: flex; flex-wrap: nowrap !important; width: 100%; }
		.btn-group[aria-label="Wochentage"] > .btn { --bs-btn-padding-x: 0; flex: 1 1 0; min-width: 0; }
}
/* Ausgabe/Einnahme (Radio-Knöpfe in der Eingabegruppe eines Betrags, Buchung und Fixkosten): klein und fest, der Betrag nimmt den Rest (mindestens 7rem, #521) */
.input-group > .btn-check + .btn { --bs-btn-padding-x: .6rem; flex: 0 0 auto; font-size: .85rem; }
.input-group:has(> .btn-check) > .form-floating { flex: 1 1 auto; min-width: 7rem; }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 .2rem rgba(var(--lh-accent-rgb), .3); }
/* ------- Buttons-Ende ------- */

/* ------- Formulare-Anfang ------- */
.form-control, .form-select { background-color: var(--lh-field-bg); border-color: var(--lh-border); border-radius: var(--lh-radius-field); }
.form-control:focus, .form-select:focus { background-color: var(--lh-field-bg); border-color: var(--lh-accent); box-shadow: 0 0 0 .2rem rgba(var(--lh-accent-rgb), .18); }
.form-control::placeholder { color: #6c6d78; }
.form-control-sm, .form-select-sm { border-radius: 11px; }
.form-control-lg, .form-select-lg { border-radius: 16px; }
/* gesperrte Felder (readonly wie disabled): heller als normale Felder, Schrift gedämpft */
.form-control[readonly], .form-select[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--bs-secondary-bg); color: var(--lh-text-muted); border-color: var(--lh-border-subtle); }
.form-floating > label { color: var(--lh-text-muted); }
.form-floating > .form-control:focus ~ label, .form-floating > .form-select:focus ~ label { color: var(--lh-accent); }
.form-floating > :is(.form-control, .form-control-plaintext):focus ~ label::after, .form-floating > :is(.form-control, .form-control-plaintext):not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after { background-color: var(--lh-field-bg); }
.form-floating > .form-control:is([readonly], :disabled) ~ label::after { background-color: var(--bs-secondary-bg); }
.input-group-text { background-color: var(--lh-surface-raised); border-color: var(--lh-border); color: var(--lh-text-muted); border-radius: var(--lh-radius-field); }
/* Suchfelder mit Lupe vorne (globale Suche, Produktsuchen): im Fokus Rahmen und Schein um das ganze Feld samt Lupe statt nur um das Eingabefeld, Lupe im Akzent */
.input-group:has(> .input-group-text:first-child > .fa-search):focus-within { border-radius: var(--lh-radius-field); box-shadow: 0 0 0 .2rem rgba(var(--lh-accent-rgb), .18); }
	.input-group:has(> .input-group-text:first-child > .fa-search):focus-within > :is(.input-group-text, .form-control) { border-color: var(--lh-accent); }
	.input-group:has(> .input-group-text:first-child > .fa-search):focus-within > .input-group-text:first-child { color: var(--lh-accent); }
	.input-group:has(> .input-group-text:first-child > .fa-search) > .form-control:focus { box-shadow: none; }
	/* Lupe und Schein wechseln so schnell wie der Rahmen des Eingabefelds (Bootstrap: .15s, ohne bei "reduzierter Bewegung"), sonst wird die Lupe sofort grün und das Feld blendet nach */
	@media (prefers-reduced-motion: no-preference) {
		.input-group:has(> .input-group-text:first-child > .fa-search) { transition: box-shadow .15s ease-in-out; }
			.input-group:has(> .input-group-text:first-child > .fa-search) > .input-group-text { transition: border-color .15s ease-in-out, color .15s ease-in-out; }
	}
/* Felder und Knöpfe einer Eingabegruppe: Rundung nur außen (Bootstrap setzt sie innen auf 0, sonst gilt der Radius der Felder) */
.input-group > .btn { --bs-btn-border-radius: var(--lh-radius-field); }
.input-group-sm > .btn { --bs-btn-border-radius: 11px; }
.form-check-input { background-color: var(--lh-field-bg); border-color: #4a4b56; }
.form-check-input:focus { border-color: var(--lh-accent); box-shadow: 0 0 0 .2rem rgba(var(--lh-accent-rgb), .25); }
.form-check-input:checked { background-color: var(--lh-accent); border-color: var(--lh-accent); }
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230d0e12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:checked[type=radio] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230d0e12'/%3e%3c/svg%3e"); }
.form-check-input[type=checkbox]:indeterminate { background-color: var(--lh-accent); border-color: var(--lh-accent); --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230d0e12' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); }
/* Schalter (Ja/Nein-Einstellungen) zwischen den Feldern einer Maske oder eines Popups beginnen wie der Text in den Feldern, nicht am Rahmen (#481); ihr Hilfetext rückt mit.
   Nicht in Tabellen, Filterleisten und Menüs */
:is(.card-body, .modal-body) .form-switch:not(.table .form-switch, .ListToolbar .form-switch, .dropdown-menu .form-switch),
:is(.card-body, .modal-body) .form-switch:not(.table .form-switch, .ListToolbar .form-switch, .dropdown-menu .form-switch) + .form-text { margin-left: calc(.75rem + var(--bs-border-width)); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230d0e12'/%3e%3c/svg%3e"); }
/* gesperrter Schalter bleibt als Schalter erkennbar (#513: mit halber Deckkraft verschwand der Rahmen im dunklen Hintergrund); gesperrt zeigt die graue Beschriftung */
.form-switch .form-check-input:disabled:not(:checked) { opacity: 1; border-color: #787986; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.45%29'/%3e%3c/svg%3e"); }
/* Kalendersymbol der Datums- und Zeitfelder senkrecht mittig wie der Pfeil der Auswahllisten (#513) */
.form-floating > input:is([type=date], [type=time], [type=datetime-local], [type=month])::-webkit-calendar-picker-indicator { position: relative; top: calc((var(--lh-floating-padding-bottom) - var(--lh-floating-padding-top)) / 2); }
.form-range::-webkit-slider-thumb { background-color: var(--lh-accent); }
.form-range::-moz-range-thumb { background-color: var(--lh-accent); }
.form-text { color: var(--lh-text-muted); }
/* Hilfetext direkt unter einem Feld beginnt wie der Text im Feld, nicht am Rahmen, unter einer Checkbox oder einem Schalter wie seine Beschriftung (#483; deren Einzug ist 1,5 bzw. 2,5 em der Schrift des form-check) */
:is(.form-floating, .input-group, .form-control, .form-select) + .form-text { padding-inline: calc(.75rem + var(--bs-border-width)); }
.form-check + .form-text { padding-left: calc(1.5 * var(--bs-body-font-size)); }
.form-switch + .form-text { padding-left: calc(2.5 * var(--bs-body-font-size)); }
/* Jeder Hinweis (form-text) in Karten und Popups beginnt wie der Text in den Feldern (#521), auch wenn er nicht direkt auf das Feld folgt (z. B. nach einer Spalte
   oder einer Tabelle); unter Häkchen und Schaltern gelten die Regeln oben, schon eingerückte Blöcke rücken nicht doppelt ein */
:is(.card-body, .modal-body) .form-text:not(.form-check + .form-text, .form-check .form-text, .table .form-text, .ListToolbar .form-text, .FieldTextIndent .form-text, .FieldTextIndent.form-text, .FieldHint .form-text, .TransactionSummary .form-text, .input-group .form-text) { padding-inline: calc(.75rem + var(--bs-border-width)); }
/* Freier Text in Karten und Popups (Hinweise, Statuszeilen, Zusammenfassungen) beginnt wie der Text in den Feldern (#513) */
.FieldTextIndent { padding-inline: calc(.75rem + var(--bs-border-width)); }
/* Hinweis rechts neben einem Feld derselben Zeile: senkrecht mittig zum Feld, beginnt wie dessen Text (#521); er darf nicht höher sein als das Feld, sonst rückt alles
   darunter nach unten (#513). Die Spalte behält ihren Innenabstand (Rinne), eingerückt wird ihr Inhalt */
.FieldHint { display: flex; align-items: center; }
	.FieldHint > * { padding-inline: calc(.75rem + var(--bs-border-width)); }
	.FieldHint > .form-text { margin: 0; }
@media (min-width: 768px) {
	/* ohne eigenen Abstand unten (mb-3 wie das Feld) mittig zum Feld statt zu Feld und Abstand */
	.FieldHint:not([class*="mb-"]) { padding-bottom: 1rem; }
		.card-body .FieldHint:not([class*="mb-"]) { padding-bottom: var(--lh-card-body-margin); }
}
@media (max-width: 767.98px) {
	/* Handy: unter das Feld gerutscht, klein, grau und näher am Feld */
	.FieldHint { margin-top: -.25rem; font-size: .875em; color: var(--lh-text-muted); }
		.FieldHint > .form-text { font-size: inherit; }
}
/* Zwischenüberschriften in einer Karte (h6, z. B. "Portionsgrößen", "Equipment") mit Abstand zum Block darüber (#521): etwa 1,5rem; nach einer Zeile mit Spalten
   zählt der Abstand ihrer Felder (mb-3) mit. Nicht in Menüs, Tabellen und Listen */
:is(.card-body, .modal-body) :is(h6, .h6, div:not([class*="col"], .tab-pane):has(> :is(h6, .h6):first-child)):not(:first-child, .dropdown-header, .dropdown-menu *, .table *, .list-group *) { margin-top: 1.5rem; }
	:is(.card-body, .modal-body) .row:not([class*="mb-"]) + :is(h6, .h6, div:not([class*="col"], .tab-pane):has(> :is(h6, .h6):first-child)):not(.dropdown-menu *, .table *, .list-group *) { margin-top: calc(1.5rem - var(--lh-card-body-margin)); }
/* Felder nach einem Knopf zum Hinzufügen ("+", z. B. Portionsgrößen): etwa 1rem Abstand (#521) */
:is(.card-body, .modal-body) .btn:has(> .fa-plus):not([class*="mb-"]) + :is(.form-floating, .row, .input-group, .form-check, h6) { margin-top: 1rem; }
:is(.card-body, .modal-body) .btn.mb-3:has(> .fa-plus) + :is(.form-floating, .row, .input-group, .form-check) { margin-top: calc(1rem - var(--lh-card-body-margin)); }
/* Schlanker Kartenkopf (#513): ohne Trennlinie und mit wenig Luft bis zum Inhalt, für Unterblöcke einer Maske (FinTS am Konto) und Karten mit Text oder Listen */
.card.SlimHeader > .card-header { border-bottom: 0; padding-bottom: 0; }
.card.SlimHeader > .card-body { padding-top: .5rem; padding-bottom: .75rem; }
/* Von der letzten Feldzeile bis zur Fußzeile so viel Luft wie von der Überschrift bis zur ersten Zeile (#513): die letzte Zeile hat keinen Abstand nach unten.
   Eine Zeile mit Spalten zieht den Abstand ihrer Felder mit negativem Rand zurück, damit auf dem Handy untereinander gestapelte Spalten ihren Abstand behalten.
   "Letzte" heißt die letzte sichtbare: Knockout "visible" blendet mit display: none aus, solche Geschwister dahinter zählen nicht */
.card-body:has(+ .card-footer) > :not(.card-text, [style*="display: none"]):not(:has(~ :not([style*="display: none"], script))),
.card-body:has(+ .card-footer) > .card-text > :not(.row, [style*="display: none"]):not(:has(~ :not([style*="display: none"], script))) { margin-bottom: 0 !important; }
.card-body:has(+ .card-footer) > .card-text > .row:not([style*="display: none"]):not(:has(~ :not([style*="display: none"], script))):has(> [class*=col]:not(.mb-md-0, .mb-xxl-0) > .mb-3:last-child, > [class*=col].mb-3:not(.mb-md-0, .mb-xxl-0)) { margin-bottom: calc(-1 * var(--lh-card-body-margin)) !important; }
/* ------- Formulare-Ende ------- */

/* ------- Tabellen-Anfang ------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--lh-text-body); --bs-table-border-color: var(--lh-border-subtle); --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-striped-color: var(--lh-text-body); --bs-table-active-bg: rgba(255, 255, 255, .05); --bs-table-active-color: var(--lh-text); --bs-table-hover-bg: rgba(var(--lh-accent-rgb), .06); --bs-table-hover-color: var(--lh-text); }
.table > thead > tr > th, .table > thead > tr > td { color: var(--lh-text-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--lh-border); }
.table > tbody > tr > td { border-bottom-color: var(--lh-border-subtle); }
/* Leere Liste ("Es wurden keine … gefunden.", emptyText in list-table.js): ein normaler grauer Satz ab dem Feldtext statt einer Spaltenüberschrift
   in Großbuchstaben, am Desktop und in der Kartenansicht (#521) */
.table > thead > tr.ListTableEmpty > td { padding: .5rem calc(.75rem + var(--bs-border-width)); border-bottom: 0; background-color: transparent; color: var(--lh-text-muted); font-size: .875rem; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; }
/* ------- Tabellen-Ende ------- */

/* ------- Kleinteile-Anfang ------- */
.badge { --bs-badge-font-weight: 600; --bs-badge-border-radius: 999px; --bs-badge-padding-x: .6em; --bs-badge-padding-y: .38em; }
.badge.bg-secondary { background-color: #2c2d36 !important; color: #dadbe2; }
.badge:is(.bg-success, .bg-primary, .bg-warning, .bg-info, .bg-danger, .bg-light) { color: var(--lh-on-accent); }
/* Zahlen in runden Plaketten (offene Einträge, Eingang, Glocke) genau mittig: Höhe der Ziffern (Versalhöhe bis Grundlinie) statt der Zeilenhöhe der Schrift,
   die je nach Browser (Safari) die Ziffer verschiebt; die Polsterung gleicht die kürzere Zeile aus, die Plakette bleibt gleich groß. Ziffern gleich breit, damit die 1 mittig steht */
.badge.rounded-pill { font-variant-numeric: tabular-nums; }
@supports (text-box: trim-both cap alphabetic) {
	.badge.rounded-pill { text-box: trim-both cap alphabetic; --bs-badge-padding-y: calc(.38em + (1em - 1cap) / 2); }
}
.bg-success { background-color: var(--lh-accent) !important; }
:is(.text-bg-primary, .text-bg-success, .text-bg-info, .text-bg-warning, .text-bg-danger) { color: var(--lh-on-accent) !important; }
.text-bg-secondary { color: var(--lh-text) !important; background-color: #2c2d36 !important; }
.text-bg-light { color: var(--lh-text) !important; background-color: var(--lh-surface-raised) !important; }
.progress, .progress-stacked { --bs-progress-bg: #26272f; --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--lh-accent); --bs-progress-bar-color: var(--lh-on-accent); }
.alert { --bs-alert-border-radius: 16px; }
.alert-light { --bs-alert-color: var(--lh-text-body); --bs-alert-bg: var(--lh-surface-raised); --bs-alert-border-color: var(--lh-border); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--lh-border-subtle); --bs-list-group-action-hover-bg: var(--lh-surface-hover); --bs-list-group-active-bg: var(--lh-accent); --bs-list-group-active-border-color: var(--lh-accent); --bs-list-group-active-color: var(--lh-on-accent); }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-color: #c4c5ce; --bs-pagination-border-color: var(--lh-border); --bs-pagination-hover-bg: var(--lh-surface-hover); --bs-pagination-hover-color: var(--lh-text); --bs-pagination-hover-border-color: #3a3b46; --bs-pagination-active-bg: var(--lh-accent); --bs-pagination-active-border-color: var(--lh-accent); --bs-pagination-active-color: var(--lh-on-accent); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: #4a4b56; --bs-pagination-border-radius: 999px; --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--lh-accent-rgb), .3); }
.spinner-border, .spinner-grow { color: var(--lh-accent); }
/* in Buttons die Textfarbe des Buttons, sonst ist der Spinner auf dem Lime-Button unsichtbar und der Text wirkt verschoben */
.btn :is(.spinner-border, .spinner-grow) { color: inherit; }
/* Der kleine Spinner ersetzt in Buttons meist ein Icon (Speichern, Löschen …): in Icon-Größe (1em statt fest 1rem) und auf deren Grundlinie, sonst sitzt er höher
   und der Button wird breiter (die Buttons daneben rutschen); der negative Rand gleicht die Breite an die üblichen .875em breiten Icons an */
.btn .spinner-border-sm { width: 1em; height: 1em; border-width: .15em; vertical-align: -.1875em; margin-left: -.0625em; margin-right: -.0625em; }
/* im Badge (z. B. "In Arbeit" auf den Hintergrundprozessen) so groß wie die Schrift des Badges */
.badge .spinner-border-sm { width: 1em; height: 1em; border-width: .15em; vertical-align: -.125em; color: inherit; }
.tooltip { --bs-tooltip-bg: #2c2d36; --bs-tooltip-color: var(--lh-text); --bs-tooltip-border-radius: 10px; }
.ValidationTooltip { --bs-tooltip-bg: var(--lh-red); --bs-tooltip-color: var(--lh-on-accent); }
.popover { --bs-popover-bg: var(--lh-surface-raised); --bs-popover-border-color: var(--lh-border); --bs-popover-border-radius: 16px; }
.toast { --bs-toast-bg: var(--lh-surface-raised); --bs-toast-border-color: var(--lh-border); --bs-toast-border-radius: 16px; }
/* Reiter (Edit-Masken) als Pillen-Leiste wie im Entwurf */
.nav-tabs { --bs-nav-tabs-border-width: 0; --bs-nav-tabs-border-radius: 999px; gap: .4rem; border-bottom: 0; margin-bottom: .75rem; }
	/* Schrift wie im Text, auch wenn die Reiter im Kartenkopf stehen (dessen Überschriftenschrift wäre viel zu groß) */
	.nav-tabs .nav-link { border: 1px solid var(--lh-border); border-radius: 999px; color: #c4c5ce; padding: .3rem .8rem; font-family: var(--bs-body-font-family); font-size: .875rem; font-weight: 500; letter-spacing: normal; }
	.nav-tabs .nav-link:hover { background-color: var(--lh-surface-hover); color: var(--lh-text); border-color: #3a3b46; isolation: auto; }
	.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: var(--lh-text); border-color: var(--lh-text); color: var(--lh-on-accent); font-weight: 600; }
	/* Anzahl als kleine Zahl statt "(67)", Reiter ohne Einträge im Menü "Mehr" (#481, default.master.aspx.js) */
	.nav-tabs .TabCountParen, .nav-tabs .TabCount.TabCountZero, .nav-tabs > .nav-item.TabEmpty { display: none; }
	.nav-tabs .TabCount { display: inline-block; min-width: 1.4em; margin-left: .4rem; padding: 0 .4rem; border-radius: 999px; background-color: rgba(255, 255, 255, .08); color: var(--lh-text-muted); font-size: .75rem; font-weight: 500; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
		.nav-tabs .nav-link.active .TabCount { background-color: rgba(0, 0, 0, .12); color: var(--lh-on-accent); }
	.nav-tabs > .TabMore > .dropdown-toggle { color: var(--lh-text-muted); }
.nav-pills { --bs-nav-pills-border-radius: 999px; --bs-nav-pills-link-active-bg: var(--lh-accent); --bs-nav-pills-link-active-color: var(--lh-on-accent); }
/* ------- Kleinteile-Ende ------- */

/* ------- Popups und Menüs-Anfang ------- */
/* Kopf unten ohne Innenabstand: zwischen Überschrift und Inhalt liegt dann so viel Abstand wie unter dem Inhalt (1rem) */
.modal { --bs-modal-bg: var(--lh-surface); --bs-modal-border-color: var(--lh-border); --bs-modal-border-radius: 26px; --bs-modal-inner-border-radius: 25px; --bs-modal-header-border-color: transparent; --bs-modal-footer-border-color: transparent; --bs-modal-header-padding: 1.1rem 1.25rem 0; --bs-modal-padding: 1rem 1.25rem; --bs-modal-box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.modal-title { font-family: var(--lh-font-display); font-weight: 700; }
/* Bootstrap rechnet den Fuß aus --bs-modal-padding; mit zwei Werten (oben) ist die Rechnung ungültig und der Fuß hätte keinen Abstand: daher fest, bündig mit Kopf und Inhalt */
.modal-footer { padding: .25rem 1.25rem 1.1rem; gap: .5rem; }
	.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .65; }
.dropdown-menu { --bs-dropdown-bg: var(--lh-surface-raised); --bs-dropdown-border-color: var(--lh-border); --bs-dropdown-border-radius: 16px; --bs-dropdown-padding-x: .35rem; --bs-dropdown-padding-y: .35rem; --bs-dropdown-link-color: var(--lh-text-body); --bs-dropdown-link-hover-bg: var(--lh-surface-hover); --bs-dropdown-link-hover-color: var(--lh-text); --bs-dropdown-link-active-bg: var(--lh-accent); --bs-dropdown-link-active-color: var(--lh-on-accent); --bs-dropdown-divider-bg: var(--lh-border); --bs-dropdown-box-shadow: 0 18px 40px rgba(0, 0, 0, .5); box-shadow: var(--bs-dropdown-box-shadow); }
.dropdown-item { color: var(--lh-text-body); border-radius: 10px; padding: .45rem .7rem; }
	.dropdown-item.hover, .dropdown-item:hover, .dropdown-item:focus { color: var(--lh-text); background-color: var(--lh-surface-hover); }
	.dropdown-item.active, .dropdown-item:active { color: var(--lh-on-accent); background-color: var(--lh-accent); }
.SearchSelectSearch { background: var(--lh-surface-raised); }
/* Auswahlliste unter einem Feld (#521, searchSelect und Vorschlagslisten): markiert (Tastatur, erster Treffer, Hover) ist ein Eintrag mit heller Fläche und Lime-Strich links,
   in normaler Schrift statt der vollen Lime-Fläche der Menüs */
.SearchSelectMenu .dropdown-item { font-weight: normal; }
	.SearchSelectMenu .dropdown-item:is(:hover, :focus, :active, .SearchSelectActive) { color: var(--lh-text); background-color: var(--lh-surface-hover); box-shadow: inset 3px 0 0 var(--lh-accent); }
	/* Zusatzinfo (Einheit, Typ) und Zwischenzeile "Im Zusatz" grau */
	.SearchSelectMenu :is(.SearchSelectExtra, .SearchSelectDivider) { color: var(--lh-text-muted); }
	/* Aktionszeilen ("„X“ übernehmen", "bei Open Food Facts suchen und anlegen"): grau mit Symbol, nach einer Trennlinie unter den Treffern */
	.SearchSelectMenu .SearchSelectAction { position: relative; color: var(--lh-text-muted); }
		.SearchSelectMenu .dropdown-item:not(.SearchSelectAction) ~ .SearchSelectAction:not(.SearchSelectAction ~ .SearchSelectAction) { margin-top: .5rem; }
			.SearchSelectMenu .dropdown-item:not(.SearchSelectAction) ~ .SearchSelectAction:not(.SearchSelectAction ~ .SearchSelectAction)::before { content: ""; position: absolute; left: .35rem; right: .35rem; top: -.3rem; border-top: var(--bs-border-width) solid var(--lh-border); }
/* ------- Popups und Menüs-Ende ------- */

/* ------- Quill-Anfang ------- */
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--lh-border); }
.ql-toolbar.ql-snow { border-radius: var(--lh-radius-field) var(--lh-radius-field) 0 0; background-color: var(--lh-surface-raised); }
.ql-container.ql-snow { border-radius: 0 0 var(--lh-radius-field) var(--lh-radius-field); background-color: var(--lh-field-bg); }
.ql-snow .ql-stroke { stroke: #c4c5ce; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #c4c5ce; }
.ql-snow .ql-picker { color: #c4c5ce; }
.ql-snow.ql-toolbar :is(button, .ql-picker-label, .ql-picker-item):hover, .ql-snow.ql-toolbar :is(button, .ql-picker-label, .ql-picker-item).ql-active { color: var(--lh-accent); }
	.ql-snow.ql-toolbar :is(button:hover, button.ql-active, button:focus) .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke { stroke: var(--lh-accent); }
	.ql-snow.ql-toolbar :is(button:hover, button.ql-active, button:focus) .ql-fill { fill: var(--lh-accent); }
.ql-snow .ql-picker-options { background-color: var(--lh-surface-raised); border-color: var(--lh-border) !important; border-radius: 12px; }
.ql-snow .ql-tooltip { background-color: var(--lh-surface-raised); border-color: var(--lh-border); color: var(--lh-text-body); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); border-radius: 12px; }
	.ql-snow .ql-tooltip input[type=text] { background-color: var(--lh-field-bg); border-color: var(--lh-border); color: var(--lh-text-body); }
.ql-editor.ql-blank::before { color: #6c6d78; }
.ql-snow a { color: var(--lh-accent); }
/* Eingefügte Farben aus der Zeit vor #521 (aus Webseiten und Mails, heute entfernt sie das Einfügen, utils.js): weißer Hintergrund und schwarze bzw. fast schwarze
   Schrift erscheinen im dunklen Design nicht; selbst gewählte Farben bleiben */
.ql-editor :is([style*="background-color: rgb(255, 255, 255)"], [style*="background-color: white" i], [style*="background-color: #fff" i], [style*="background-color: rgb(248, 249, 250)"], [style*="background-color: rgb(250, 250, 250)"]) { background-color: transparent !important; }
.ql-editor :is([style*="color: rgb(0, 0, 0)"], [style*="color: black" i], [style*="color: #000" i], [style*="color: windowtext" i], [style*="color: rgb(32, 33, 36)"], [style*="color: rgb(33, 37, 41)"], [style*="color: rgb(34, 34, 34)"], [style*="color: rgb(51, 51, 51)"]) { color: inherit !important; }
/* Handy: die verkleinerte Werkzeugleiste (utils.js) in einer Zeile */
@media (max-width: 767.98px) {
	.ql-toolbar.ql-snow { padding: 6px 4px; white-space: nowrap; }
		.ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
		.ql-toolbar.ql-snow .ql-picker-options { white-space: normal; }
}
/* ------- Quill-Ende ------- */

/* ------- Kopfzeile-Anfang ------- */
.Header { background-color: rgba(13, 14, 18, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--lh-border-subtle); }
.HeaderLogo img { border-radius: 9px; }
.HeaderSearch .form-control { border-radius: 999px 0 0 999px; background-color: var(--lh-surface); }
.HeaderSearch .input-group-text { border-radius: 999px 0 0 999px; background-color: var(--lh-surface); border-right: 0; }
	.HeaderSearch .input-group-text + .form-control { border-radius: 0; border-left: 0; }
.HeaderSearch .input-group > .btn:last-child { border-radius: 0 999px 999px 0; }
.HeaderSearch .input-group:focus-within { border-radius: 999px; }
.Header :is(.HeaderInbox, a:has(> .fa-bell)) { color: #c4c5ce; }
.Header .UserProfile > .btn { --bs-btn-padding-x: .7rem; }
.HeaderQueueBar { background-image: linear-gradient(90deg, transparent 0%, var(--lh-accent) 35%, var(--lh-accent) 65%, transparent 100%); }
@media (max-width: 767.98px) {
	.HeaderSearch { background-color: var(--lh-bg); box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
		/* die Lupe davor ist ausgeblendet, also braucht das Feld links selbst Rand und Rundung (Bootstrap nimmt sie dem zweiten Kind der input-group) */
		.HeaderSearch .input-group-text + .form-control { border-top-left-radius: 999px !important; border-bottom-left-radius: 999px !important; border-left: var(--bs-border-width) solid var(--lh-border); }
	/* Schnell erfassen als dezenter Kreis mit Blitz (die Leiste unten zeigt die Seiten des Moduls) */
	.Header .HeaderCapture > .btn { --bs-btn-bg: var(--lh-surface); --bs-btn-border-color: var(--lh-border); --bs-btn-color: var(--lh-accent); --bs-btn-hover-bg: var(--lh-surface-hover); --bs-btn-hover-color: var(--lh-accent); --bs-btn-active-bg: var(--lh-surface-hover); --bs-btn-active-color: var(--lh-accent); }
	.Header .HeaderCapture .fa-plus::before { content: "\f0e7"; }
}
/* ------- Kopfzeile-Ende ------- */

/* ------- Navigation-Anfang ------- */
.LeftMenu { background-color: #0f1015; border-right: 1px solid var(--lh-border-subtle); padding: calc(var(--lh-header-height) + 8px) 10px 16px; }
	.LeftMenu > ul { display: flex; flex-direction: column; gap: 2px; margin: 0; }
	.LeftMenu .NavTitle { display: flex; align-items: center; gap: .55rem; margin: 14px 8px 4px; }
		/* nur der allererste Titel rückt hoch; die Module nach den Favoriten stehen in einer eigenen Liste und brauchen denselben Abstand wie zwischen zwei Modulen (Lücke 2px + 14px) */
		.LeftMenu > ul:first-child > .NavTitle:first-child { margin-top: 2px; }
		.LeftMenu > ul + ul { margin-top: 2px; }
		.LeftMenu .NavTitle::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 3px; background-color: var(--lh-module-color); }
		/* Favoriten: kleiner Stern im Akzent statt des Modulpunkts */
		.LeftMenu .NavTitle.NavTitleFavorites::before { content: "\f005"; width: 8px; height: auto; border-radius: 0; background: none; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 8px; line-height: 1; text-align: center; color: var(--lh-accent); }
		.LeftMenu .NavTitle > span { color: #8a8b96; font-size: .6875rem; letter-spacing: .1em; padding-left: 0 !important; }
	.LeftMenu li.NavItem > a.row { display: flex; flex-wrap: nowrap; align-items: center; gap: .7rem; margin: 0; padding: 0 12px; min-height: 40px; border-radius: 999px; color: #b5b6c0; font-size: .9rem; transition: background-color .15s, color .15s; }
		.LeftMenu li.NavItem > a.row > span { width: auto; flex: 0 0 auto; padding: 0; margin: 0 !important; }
		.LeftMenu li.NavItem > a.row > span.col { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.LeftMenu li.NavItem > a i { width: 20px; text-align: center; font-size: 1rem; color: var(--lh-module-color); }
		.LeftMenu li.NavItem > a:hover { color: var(--lh-text); background-color: #1a1b21; }
		/* Stern zum Anheften: nur beim Überfahren, angeheftet immer im Akzent */
		.LeftMenu li.NavItem > a .NavFavoriteToggle { margin-left: auto !important; opacity: 0; }
		.LeftMenu li.NavItem > a .NavFavoriteToggle > i { color: var(--lh-text-muted); font-size: .8rem; }
		.LeftMenu li.NavItem > a:hover .NavFavoriteToggle, .LeftMenu li.NavItem > a .NavFavoriteToggle.NavFavoriteActive { opacity: 1; }
		.LeftMenu li.NavItem > a .NavFavoriteToggle.NavFavoriteActive > i { color: var(--lh-accent); }
		.LeftMenu li.NavItem.NavItemActive > a .NavFavoriteToggle > i { color: var(--lh-on-accent); }
	.LeftMenu li.NavItem.NavItemActive > a { color: var(--lh-on-accent); background-color: var(--lh-accent); font-weight: 600; border-radius: 999px; }
		.LeftMenu li.NavItem.NavItemActive > a i { color: var(--lh-on-accent); }
.NavBackdrop { background-color: rgba(0, 0, 0, .6); }
/* Desktop ab 1200 px: Navigation immer aufgeklappt (default.master.aspx.js), der Inhalt rückt daneben */
@media (min-width: 1200px) {
	.Content { margin-left: 250px; width: calc(100% - 250px); }
}
/* Handy: Menü über den ganzen Bildschirm mit Suche, zuletzt besuchten Seiten und den Modulen als Kacheln (die Seiten eines Moduls stehen in der Leiste unten) */
.MobileModules { display: none; }
@media (max-width: 767.98px) {
	.LeftMenu { left: 0; right: 0; width: auto !important; padding: calc(var(--lh-header-height) + 14px) 16px calc(var(--lh-bottom-bar-height) + 16px); background-color: var(--lh-bg); border-right: 0; }
		.LeftMenu > ul { display: none; }
	.MobileModules { display: flex; flex-direction: column; gap: 12px; }
	.MobileModulesSearch { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 24px; background-color: var(--lh-surface); border: 1px solid var(--lh-border); color: var(--lh-text-muted); }
		.MobileModulesSearch > input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--lh-text); font-size: 1rem; outline: none; }
		.MobileModulesSearch:focus-within { border-color: var(--lh-accent); color: var(--lh-accent); }
	.MobileModulesTitle { margin-top: 6px; padding: 0 4px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lh-text-muted); }
	.MobileModulesRecent { display: flex; flex-wrap: wrap; gap: 8px; }
		.MobileModulesRecent > a { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background-color: var(--lh-surface); border: 1px solid var(--lh-border-subtle); color: var(--lh-text-body); font-size: .875rem; text-decoration: none; }
			.MobileModulesRecent > a > i { color: var(--lh-module-color); }
	/* aktuelle Seite als Favorit anheften: dezent unter der Suche, angeheftet mit gefülltem Stern im Akzent */
	.MobileModulesPin { display: flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 0 4px; border: 0; background: transparent; color: var(--lh-text-muted); font-size: .875rem; }
		.MobileModulesPin > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.MobileModulesPin.MobileModulesPinActive > i { color: var(--lh-accent); }
	.MobileModulesGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; padding-top: 4px; }
	.MobileModule { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--lh-text-body); text-decoration: none; }
		.MobileModuleIcon { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 20px; background-color: var(--lh-surface); background-color: color-mix(in srgb, var(--lh-module-color) 14%, var(--lh-surface)); color: var(--lh-module-color); font-size: 1.45rem; }
		/* lange Namen (Anmeldeinformationen) mit Trennstrich umbrechen (lang="de" im Layout) */
		.MobileModuleName { max-width: 100%; font-size: .75rem; font-weight: 500; line-height: 1.2; text-align: center; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
		/* aktuelles Modul: Kachel in seiner Farbe, Icon dunkel */
		.MobileModule.MobileModuleActive .MobileModuleIcon { background-color: var(--lh-module-color); color: var(--lh-on-accent); }
		.MobileModule.MobileModuleActive .MobileModuleName { color: var(--lh-text); font-weight: 700; }
	.NavBackdrop { display: none !important; }
}
/* ------- Navigation-Ende ------- */

/* ------- Leiste unten (Handy)-Anfang ------- */
.BottomBar { display: none; }
@media (max-width: 767.98px) {
	:root[data-bs-theme=dark] { --lh-bottom-bar-height: calc(76px + env(safe-area-inset-bottom)); }
	body { padding-bottom: var(--lh-bottom-bar-height); }
	.BottomBar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1040; display: flex; align-items: center; gap: 6px; height: 62px; padding: 0 6px; border-radius: 31px; background-color: rgba(30, 31, 38, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--lh-border); box-shadow: 0 14px 34px rgba(0, 0, 0, .55); overflow: hidden; }
	/* links fest: Menü bzw. zurück */
	.BottomBarRound { flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 0; border-radius: 25px; background-color: #2c2d36; color: var(--lh-text); font-size: 1.1rem; }
		.BottomBarRound.BottomBarRoundActive { background-color: var(--lh-accent); color: var(--lh-on-accent); }
	/* daneben die Seiten bzw. Reiter, waagerecht scrollbar; rechts ausgeblendet, damit man sieht, dass es weitergeht (Abstand am Ende, damit auch die letzte ganz sichtbar wird) */
	.BottomBarPills { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; padding-right: 28px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
		.BottomBarPills::-webkit-scrollbar { display: none; }
	.BottomBarPill { flex: none; display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 15px; border-radius: 25px; color: #c4c5ce; font-size: .875rem; font-weight: 500; white-space: nowrap; text-decoration: none; }
		.BottomBarPill:hover { color: var(--lh-text); }
		.BottomBarPill.BottomBarPillActive { background-color: var(--lh-accent); color: var(--lh-on-accent); font-weight: 700; }
	.BottomBarBadge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background-color: var(--lh-orange); color: var(--lh-on-accent); font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
	/* Bearbeiten-Seiten: die Reiter stehen unten, oben fallen sie (und ihr sonst leerer Kartenkopf, auch mit nur verstecktem Titel wie im Profil) weg */
	body.HasBottomTabs #tabsControl, body.HasBottomTabs .card-header:has(> #tabsControl):not(:has(> :not(#tabsControl, .visually-hidden))) { display: none; }
	/* ohne Kopf lässt sich die Karte nicht mehr aufklappen: eingeklappt gemerkte Karten mit Reitern trotzdem zeigen */
	body.HasBottomTabs .card.AutoCollapsible.Collapsed:has(#tabsControl) > :not(.card-header) { display: block !important; }
	/* Was sonst unten am Bildschirm klebt, bleibt über der Leiste */
	.RecipeSaveBar, .MediaFileMobileBar, .NewsReaderActions { bottom: var(--lh-bottom-bar-height); }
	/* Die Fußzeile der Masken (Speichern) ohne Spalt auf der Leiste (#521): --lh-bottom-bar-height reicht 4 px über die Leiste (10 px Rand unten + 62 px Leiste);
	   solange sie klebt (Stuck, default.master.aspx.js), füllt eine Fläche in ihrer Farbe alles darunter bis zum Bildschirmrand, damit neben und unter der Leiste nichts durchscheint */
	.card-footer:not(.NotSticky) { bottom: calc(var(--lh-bottom-bar-height) - 4px); }
	.card-footer.Stuck:not(.NotSticky) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
		.card-footer.Stuck:not(.NotSticky)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--lh-bottom-bar-height) - 4px); background-color: var(--lh-surface); }
	.ScrollTopButton { bottom: calc(var(--lh-bottom-bar-height) + 1rem); }
	.ImpersonationBanner { bottom: calc(var(--lh-bottom-bar-height) + 8px); }
	body.Impersonating { padding-bottom: calc(var(--lh-bottom-bar-height) + 64px); }
	.NewsReaderActions { padding-bottom: .5rem; }
}
/* ------- Leiste unten (Handy)-Ende ------- */

/* ------- Inhalt-Anfang ------- */
.Content { padding: 14px 18px 24px; }
#waitControl { background-color: var(--lh-bg); color: var(--lh-text-muted); }
.ContactPhotoPlaceholder { background-color: #2c2d36; color: #c4c5ce; }
.ListToolbarCount { color: var(--lh-text-muted); }
/* Dezente graue Flächen aus main.css */
.InboxItem { border-color: var(--lh-border); border-radius: 16px; background-color: var(--lh-surface-raised); }
.InboxItemProcess { background-color: var(--lh-field-bg); border-radius: 12px; }
.MyDayEvent { border-bottom-color: var(--lh-border-subtle); }
.RecipeIngredient, .NewsListItem { border-bottom-color: var(--lh-border-subtle); }
.MediaFileActionBar, .RecipeSaveBar, .MediaFileMobileBar { background-color: var(--lh-surface-raised); border-color: var(--lh-border); }
.FamilyTreeMember:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
/* Kennzahlen (Kacheln) in der Schrift der Überschriften */
:is(.KeyFigureValue, .TrainingKeyFigureValue, .HealthTargetValue, .TrainingRunTimerValue, .TrainingRunReadyCount) { font-family: var(--lh-font-display); letter-spacing: -.02em; color: var(--lh-text); }
:is(.KeyFigure, .TrainingKeyFigure) { border-radius: 16px; border-color: var(--lh-border-subtle); background-color: var(--lh-surface-raised); }
.TrainingPriorityB { color: var(--lh-on-accent); }
:is(.HabitDayDone .HabitDayCheck, .HabitDone) { color: var(--lh-on-accent); }
.TrainingRunCurrent:not(.TrainingRunCurrentRest, .TrainingRunCurrentPreview) { color: var(--lh-on-accent); }
@media (max-width: 767.98px) {
	.Content { padding: 10px 10px 16px; }
	.card { --bs-card-spacer-y: .75rem; --bs-card-spacer-x: .8rem; --bs-card-cap-padding-x: .85rem; --bs-card-border-radius: 20px; --bs-card-inner-border-radius: 19px; }
	.card-footer:not(.NotSticky) { background-color: var(--lh-surface); box-shadow: 0 -10px 24px rgba(0, 0, 0, .45); }
	/* Kartenansicht der Listen: jede Zeile eine eigene, abgerundete Kachel */
	.table.MobileCards > tbody { display: flex; flex-direction: column; gap: 8px; }
	.table.MobileCards > tbody > tr { padding: .7rem .8rem; border: 0; border-radius: 16px; background-color: var(--lh-surface-raised); }
		.table.MobileCards > tbody > tr:nth-of-type(odd) { background-color: var(--lh-surface-raised); }
		.table.MobileCards > tbody > tr:has(> .MobileCheck) { padding-left: 2.3rem; }
		.table.MobileCards > tbody > tr > .MobileCheck { left: .75rem; top: .75rem; }
		.table.MobileCards > tbody > tr:has(> .MobileImage) { padding-left: calc(var(--lh-card-image-width) + 1.4rem); }
		.table.MobileCards > tbody > tr > .MobileImage { left: .7rem; top: .7rem; }
			.table.MobileCards > tbody > tr > .MobileImage > :is(img, .MobileImagePlaceholder) { border-radius: 8px; }
		.table.MobileCards > tbody > tr > .MobileCorner { top: .7rem; right: .7rem; }
		.table.MobileCards > tbody > tr > .MobileMiddleRight { right: .7rem; }
		.table.MobileCards > tbody > tr > .MobileActions { top: .7rem; right: .7rem; }
		/* Kopfzeile (Auswahl, Status-Überschriften) mit demselben Innenabstand wie die Kacheln, damit sie über Auswahl und Status stehen */
		.table.MobileCards > thead > tr.ListTableHeader { padding-left: .75rem; padding-right: .8rem; }
		.table.MobileCards :is(.MobileTitle) { color: var(--lh-text); font-weight: 600; }
		.table.MobileCards .MobileValue { color: var(--lh-text); font-family: var(--lh-font-display); }
		.table.MobileCards > tbody > tr > :is(.MobileFull, .MobileMeta, .MobileLast) { font-style: normal; color: var(--lh-text-muted); }
		/* Kartenansicht in einer Karte: Kacheln liegen direkt auf der Karte */
		.table.MobileCards > tbody > tr:hover > td { --bs-table-bg-state: transparent; }
}
/* ------- Inhalt-Ende ------- */

/* ------- Filterleiste der Listen-Anfang ------- */
/* Listenseiten (Karte mit ListToolbar im Kopf): die Filter stehen frei über der Liste, nur die Liste selbst ist eine Karte */
.card:has(> .card-header > .ListToolbar) { --bs-card-bg: transparent; --bs-card-border-color: transparent; }
	.card:has(> .card-header > .ListToolbar) > .card-header { padding: 0 0 .85rem; border-bottom: 0; }
	/* die Einträge so groß wie die Filter darüber (.ListToolbar) */
	.card:has(> .card-header > .ListToolbar) > .card-body { background-color: var(--lh-surface); border: 1px solid var(--lh-border-subtle); border-radius: var(--lh-radius-card); font-size: .875rem; }
	.card.ListLoading:has(> .card-header > .ListToolbar)::before { display: none; }
	.card.ListLoading:has(> .card-header > .ListToolbar) > .card-body { position: relative; overflow: hidden; }
		.card.ListLoading:has(> .card-header > .ListToolbar) > .card-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--lh-accent) 35%, var(--lh-accent) 65%, transparent 100%) no-repeat; background-size: 40% 100%; animation: HeaderQueueBarMove 1.4s linear infinite, ListLoadingFadeIn .15s step-end; }
/* Felder und Knöpfe als Pillen in einheitlicher Höhe, Schrift wie im Text (nicht die der Kartenköpfe) */
.ListToolbar { --lh-toolbar-height: 38px; font-family: var(--bs-body-font-family); font-size: .875rem; letter-spacing: normal; }
	.ListToolbar :is(.form-control, .form-select) { min-height: var(--lh-toolbar-height); padding-top: .35rem; padding-bottom: .35rem; padding-left: 1rem; border-radius: 999px; border-color: var(--lh-border); background-color: var(--lh-surface); color: var(--lh-text); }
	.ListToolbar .form-select { padding-right: 2.2rem; background-position: right .85rem center; }
	.ListToolbar :is(.form-control, .form-select):hover { border-color: #3a3b46; }
	.ListToolbar :is(.form-control, .form-select):focus { border-color: var(--lh-accent); }
	/* Suche mit Lupe */
	.ListToolbar input:is([placeholder^="Such"], [type=search]) { padding-left: 2.4rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ba6' stroke-width='2.2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='M20 20l-3.5-3.5'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: .95rem center; background-size: 16px; }
		/* Lupe im Fokus im Akzent wie in allen Suchfeldern (Farbe = --lh-accent) */
		.ListToolbar input:is([placeholder^="Such"], [type=search]):focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6f432' stroke-width='2.2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='M20 20l-3.5-3.5'/%3e%3c/svg%3e"); }
	:is(.ListToolbarFilters, .ListToolbarRow) > input:is([placeholder^="Such"], [type=search]) { flex: 1 1 18rem; max-width: 26rem; }
	/* Gruppen (Datum von–bis, Betrag): eine Pille, innen ohne Rundung (setzt Bootstrap), Trenner und Häkchen dezent */
	.ListToolbar .input-group > * { min-height: var(--lh-toolbar-height); border-radius: 999px; }
	.ListToolbar .input-group > .form-control, .ListToolbar .input-group > .form-select { padding-left: .8rem; }
	.ListToolbar .input-group-text { background-color: var(--lh-surface-raised); border-color: var(--lh-border); color: #c4c5ce; padding-left: .9rem; padding-right: .8rem; }
		.ListToolbar .input-group > .input-group-text:not(:first-child):not(:last-child) { padding: 0 .35rem; background-color: var(--lh-surface); border-left: 0; border-right: 0; color: #6c6d78; }
		.ListToolbar .input-group > .input-group-text:not(:first-child):not(:last-child) + .form-control { border-left: 0; }
		.ListToolbar .input-group > .form-control:has(+ .input-group-text:not(:last-child)) { border-right: 0; }
		/* Nur ein Häkchen (z. B. "Ignoriere Sparaufträge"): als Chip */
		.ListToolbar .input-group > .input-group-text:only-child { border-radius: 999px; padding: 0 .95rem; background-color: var(--lh-surface); cursor: pointer; }
		.ListToolbar .input-group-text > .form-check-input { margin-right: .15rem; }
	/* Anzahl als dezenter Text, Knöpfe rund in Feldhöhe, "Neu" gefüllt im Akzent */
	.ListToolbarActions { min-height: var(--lh-toolbar-height); }
		.ListToolbarActions .badge { padding: 0; background-color: transparent !important; color: var(--lh-text-muted); font-size: .8rem; font-weight: 500; white-space: normal; text-align: right; }
	.ListToolbar .btn { --bs-btn-padding-x: .85rem; min-height: var(--lh-toolbar-height); align-items: center; justify-content: center; gap: .4rem; }
		.ListToolbar .btn:not(.ListToolbarFilterToggle) { display: inline-flex; }
		.ListToolbar .btn[aria-label]:has(> i:only-child) { width: var(--lh-toolbar-height); padding: 0; }
		/* nur "Neu" (btn-outline-success) gefüllt im Akzent; ListToolbarAdd steuert sonst nur die Position, Neu laden, Importieren usw. behalten ihre Farbe */
		.ListToolbar .btn.ListToolbarAdd.btn-outline-success { --bs-btn-color: var(--lh-on-accent); --bs-btn-bg: var(--lh-accent); --bs-btn-border-color: var(--lh-accent); --bs-btn-hover-color: var(--lh-on-accent); --bs-btn-hover-bg: var(--lh-accent-hover); --bs-btn-hover-border-color: var(--lh-accent-hover); }
	.ListToolbarCount { right: 1rem; }
/* Desktop: feste Zeilen der Filter auflösen, alle Filter laufen nebeneinander und brechen erst bei Platzmangel um (spart Höhe) */
@media (min-width: 768px) {
	.ListToolbarRow { display: contents; }
	/* Auswahlen in fester Breite statt so breit wie ihr längster Eintrag: Die Anzahlen in den Einträgen ändern sich mit jeder Suche,
	   sonst sprängen die Filter dahinter hin und her; lange Einträge (Kategorien, Regeln) werden abgeschnitten */
	:is(.ListToolbarFilters, .ListToolbarRow) > .form-select { width: 15rem; text-overflow: ellipsis; }
		/* kurze Auswahlen (Jahr) */
		:is(.ListToolbarFilters, .ListToolbarRow) > .form-select.ListToolbarNarrow { width: 9rem; }
		/* Zeitraum-Vorauswahl in der Datumsgruppe */
		:is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-select { flex: 0 0 11rem; width: 11rem; text-overflow: ellipsis; }
}
@media (max-width: 767.98px) {
	.ListToolbar .btn.ListToolbarFilterToggle { display: inline-flex; }
	/* Bereich mit Vorauswahl (Datum): bricht in zwei Zeilen um (main.css), jede Zeile ist eine eigene Pille */
	.ListToolbar .input-group:has(> .form-select) { row-gap: 6px; }
		.ListToolbar .input-group:has(> .form-select) > .form-select { border-top-right-radius: 999px !important; border-bottom-right-radius: 999px !important; }
		.ListToolbar .input-group:has(> .form-select) > .form-select + .form-control { margin-left: 0 !important; border-left: var(--bs-border-width) solid var(--lh-border); border-top-left-radius: 999px !important; border-bottom-left-radius: 999px !important; }
	/* Handy: Kacheln der Kartenansicht direkt auf dem Seitengrund, ohne Karte drumherum */
	.card:has(> .card-header > .ListToolbar) > .card-body:has(.table.MobileCards) { padding: 0; background-color: transparent; border: 0; }
	.card:has(> .card-header > .ListToolbar) > .card-body .table.MobileCards > tbody > tr { background-color: var(--lh-surface); }
	:is(.ListToolbarFilters, .ListToolbarRow) > input:is([placeholder^="Such"], [type=search]) { max-width: none; }
	/* Summe o. ä. in der Leiste (z. B. Buchungen am Budget) beginnt wie der Text der Karten darunter (#521) */
	.ListToolbarActions .badge { text-align: left; padding-left: calc(.75rem + var(--bs-border-width)); }
}
/* ------- Filterleiste der Listen-Ende ------- */

/* ------- Dashboard-Anfang ------- */
/* Begrüßung als große Überschrift statt Karte */
.DashboardHero { padding: 6px 4px 4px; margin-bottom: 1rem; }
	.DashboardHeroDate { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--lh-text-muted); }
	.DashboardHeroTitle { margin: .2rem 0 0; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
/* Tageszeile: Gegessen, Getrunken, Gewicht als Kacheln */
.DaySummary { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }
	.DaySummary > .col > :first-child { display: flex; flex-direction: column; gap: .25rem !important; padding: .7rem .85rem; border-radius: 16px; background-color: var(--lh-surface-raised); }
		.DaySummary > .col > :first-child > span { font-family: var(--lh-font-display); font-size: 1.05rem; font-weight: 700; color: var(--lh-text); }
		.DaySummary > .col > .DaySummaryBar { margin-top: .5rem; }
@media (max-width: 767.98px) {
	/* Handy: zwei Kacheln je Zeile */
	.DaySummary > .col { flex: 0 0 50%; }
}
@media (min-width: 768px) {
	/* Desktop: Gegessen und Getrunken in einer Zeile, Eiweiß, Kohlenhydrate und Fett darunter (sonst stünde eine Kachel allein) */
	.DaySummary > .col { flex: 1 0 30%; }
		.DaySummary > .col.DaySummaryMain { flex-basis: 45%; }
}
	.DaySummaryBar { height: 8px; }
/* Einträge von heute: runde Haken wie in der App-Vorlage */
.MyDayEvent { align-items: center; gap: .75rem; padding: .55rem 0; }
.MyDayEventCheck { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid #3a3b46; border-radius: 50%; color: var(--lh-text-muted); font-size: .8rem; line-height: 1; }
	.MyDayEventCheck > .fa-square { visibility: hidden; }
	.MyDayEventCheck > .fa-check-square::before { content: "\f00c"; }
	.MyDayEventCheck:not(:disabled):hover { border-color: var(--lh-accent); color: var(--lh-accent); }
.MyDayEvent.MyDayEventDone .MyDayEventCheck { border-color: var(--lh-accent); background-color: var(--lh-accent); color: var(--lh-on-accent); }
.MyDayEvent.MyDayEventDone .MyDayEventText > span:first-child { color: var(--lh-text-muted); }
.MyDayEventTime { color: var(--lh-text-muted); font-size: .85rem; }
.MyDayEventTime:empty { display: none; }
.DashboardEventIcon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background-color: var(--lh-surface-raised); color: var(--lh-orange); }
.InboxHint .fa-inbox { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background-color: var(--lh-surface-raised); color: #c4c5ce; }
.InboxHint.InboxHintOld { border-color: var(--bs-warning-border-subtle); }
	.InboxHint.InboxHintOld .fa-inbox { color: var(--lh-orange); background-color: var(--bs-warning-bg-subtle); }
/* ------- Dashboard-Ende ------- */