/* ------- Tags-Anfang ------- */
:root { --bs-blue: #2c8ef8; --bs-indigo: #727cf5; --bs-purple: #6b5eae; --bs-pink: #ff679b; --bs-red: #fa5c7c; --bs-orange: #fd7e14; --bs-yellow: #ffbc00; --bs-green: #0acf97; --bs-teal: #02a8b5; --bs-cyan: #39afd1; --bs-white: #fff; --bs-gray: #98a6ad; --bs-gray-dark: #343a40; --bs-gray-100: #f1f3fa; --bs-gray-200: #eef2f7; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #98a6ad; --bs-gray-700: #6c757d; --bs-gray-800: #343a40; --bs-gray-900: #313a46; --bs-primary: #727cf5; --bs-secondary: #6c757d; --bs-success: #0acf97; --bs-info: #39afd1; --bs-warning: #ffbc00; --bs-danger: #fa5c7c; --bs-light: #eef2f7; --bs-dark: #313a46; --bs-primary-rgb: 114,124,245; --bs-secondary-rgb: 108,117,125; --bs-success-rgb: 10,207,151; --bs-info-rgb: 57,175,209; --bs-warning-rgb: 255,188,0; --bs-danger-rgb: 250,92,124; --bs-light-rgb: 238,242,247; --bs-dark-rgb: 49,58,70; --bs-white-rgb: 255,255,255; --bs-black-rgb: 0,0,0; --bs-body-color-rgb: 108,117,125; --bs-font-sans-serif: "Nunito",sans-serif; --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --bs-gradient: linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,0)); --bs-body-font-family: Nunito,sans-serif; --bs-body-font-size: .9rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #6c757d; --bs-body-bg: #fff; --bs-body-bg-rgb: 255,255,255; --lh-page-bg: #fafbfe; }
/* Seit Bootstrap 5.3 nutzen Karten, Eingabefelder, Tabellen und Modals --bs-body-bg als Hintergrund; die Seite selbst hat deshalb eine eigene Farbe (--lh-page-bg) */
@media(prefers-reduced-motion:no-preference) {
	:root { scroll-behavior: smooth; }
}
body { margin: 0; font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); color: var(--bs-body-color); text-align: var(--bs-body-text-align); background-color: var(--lh-page-bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; padding: 0; }
a, a:hover { color: inherit; }
h5 { margin: 0; }
/* ------- Tags-Ende ------- */

/* ------- Klassen-Anfang ------- */
.LaterVisible { display: none !important; }
.ActionLink { cursor: pointer; }
.ValidationTooltip { --bs-tooltip-bg: var(--bs-danger); --bs-tooltip-color: #fff; }
.dropdown-item { color: var(--bs-body-color); font-size: 0.9rem; }
	.dropdown-item.active, .dropdown-item:active { color: var(--bs-body-color); background-color: var(--lh-page-bg); }
	.dropdown-item.hover, .dropdown-item:hover { color: var(--bs-body-color); background-color: var(--lh-page-bg); }
.form-check { margin-bottom: 0; }
.card-header { font-weight: bold; }
.form-control, .form-select, .btn { font-size: inherit; }
/* Kompaktere Masken (Bootstrap-Standard: Felder 3.5rem hoch, Karten 1rem Innenabstand), mit etwas Luft zwischen Titel und Wert, sonst wirken die Felder gedrungen; Werte fürs Handy in der Media Query weiter unten */
:root { --lh-floating-height: 3.15rem; --lh-floating-padding-y: .95rem; --lh-floating-padding-top: 1.5rem; --lh-floating-padding-bottom: .45rem; --lh-floating-label-shift: -.6rem; --lh-card-body-margin: .75rem; }
.form-floating > .form-control, .form-floating > .form-control-plaintext, .form-floating > .form-select { height: calc(var(--lh-floating-height) + calc(var(--bs-border-width) * 2)); min-height: calc(var(--lh-floating-height) + calc(var(--bs-border-width) * 2)); }
.form-floating > label, .form-floating > .form-control, .form-floating > .form-control-plaintext { padding: var(--lh-floating-padding-y) .75rem; }
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown), .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown),
.form-floating > .form-control:-webkit-autofill, .form-floating > .form-control-plaintext:-webkit-autofill, .form-floating > .form-select { padding-top: var(--lh-floating-padding-top); padding-bottom: var(--lh-floating-padding-bottom); }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label,
.form-floating > .form-control:-webkit-autofill ~ label { transform: scale(.85) translateY(var(--lh-floating-label-shift)) translateX(.15rem); }
/* Hintergrund hinter dem Label eines Textfelds über die ganze Breite vom oberen Rand bis zum Textanfang, damit gescrollter Text nicht durchs Label läuft (#406);
   Label und ::after werden skaliert (.85) und verschoben (--lh-floating-label-shift, .15rem nach rechts), deshalb zurückgerechnet */
.form-floating > textarea:focus ~ label, .form-floating > textarea:not(:placeholder-shown) ~ label { width: calc(100% / .85 - .15rem); max-width: none; }
.form-floating > textarea:focus ~ label::after, .form-floating > textarea:not(:placeholder-shown) ~ label::after {
	inset: calc(var(--bs-border-width) / .85 - var(--lh-floating-label-shift)) .375rem auto;
	height: calc((var(--lh-floating-padding-top) - var(--bs-border-width)) / .85);
}
.card { --bs-card-spacer-y: .75rem; --bs-card-spacer-x: .75rem; --bs-card-cap-padding-y: .4rem; --bs-card-cap-padding-x: .75rem; }
	/* Abstände zwischen den Feldern in den Karten */
	.card-body .mb-3 { margin-bottom: var(--lh-card-body-margin) !important; }
.btn { --bs-btn-padding-y: .34rem; --bs-btn-padding-x: .7rem; }
/* Kompakte Variante (-sm) zwischen Bootstrap-Standard und -sm: normale Schriftgröße, etwas weniger Innenabstand */
.form-control-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-text, .input-group-sm > .btn { padding: .3rem .6rem; font-size: inherit; }
.form-select-sm, .input-group-sm > .form-select { padding: .3rem 2.25rem .3rem .6rem; font-size: inherit; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .6rem; }
.table-sm > :not(caption) > * > * { padding: .375rem .375rem; }
.form-control, .form-control:focus, .form-select, .input-group-text { color: #212529; }
/* Button hinter einem Feld mit schwebendem Label (z. B. Link zur Referenz): wird auf die Feldhöhe gezogen, das Icon steht vertikal mittig */
.input-group > .form-floating ~ .btn { display: flex; align-items: center; }
/* Schreibgeschützte Felder (readonly) wie deaktivierte (disabled) grau darstellen, damit beide Arten von gesperrten Feldern gleich aussehen */
.form-control[readonly], .form-select[readonly] { background-color: var(--bs-secondary-bg); opacity: 1; }
/* Watchlist: Logos der Streaming-Anbieter (TheMovieDb), Abos der Gruppe grün umrandet */
.WatchProviderLogo { width: 28px; height: 28px; border-radius: 6px; }
.WatchProviderLogo.WatchProviderSubscribed { outline: 2px solid var(--bs-success); outline-offset: 1px; }
.WatchProviderLogo.WatchProviderSmall { width: 20px; height: 20px; border-radius: 4px; }
/* Auswahl mehrerer Dienste als Dropdown mit Häkchen (Watchlist-Filter, Abos der Benutzergruppe) */
.ProviderDropdownMenu { max-height: 320px; overflow-y: auto; min-width: 260px; }
/* Quellenhinweis bleibt beim Scrollen der Dienste unten sichtbar */
.ProviderDropdownSource { position: sticky; bottom: calc(-1 * var(--bs-dropdown-padding-y)); background-color: var(--bs-dropdown-bg); }
/* Knopf "Nach oben" (Test auf emailfiling.aspx): unten rechts, eingeblendet über die Klasse ScrollTopVisible */
.ScrollTopButton { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
	.ScrollTopButton.ScrollTopVisible { opacity: .85; visibility: visible; }
/* searchSelect (search-select.js): Auswahl mit Suchfeld, das beim Blättern oben stehen bleibt */
.SearchSelect > .form-select { width: 100%; }
	.SearchSelect.ColorGreen > .form-select { color: inherit; }
/* searchSelect mit optionsSubText: Icon links mittig, daneben der Text und darunter klein und kursiv der zweite Text (z. B. der Typ einer Referenz) */
.SearchSelectTwoLines > .form-select, .SearchSelectTwoLines .dropdown-item { display: flex; align-items: center; }
.form-floating.SearchSelectTwoLines > .form-select { height: auto; }
.SearchSelectLines { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
	.SearchSelectLines > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.SearchSelectLines > small { font-style: italic; color: var(--bs-secondary-color); padding-right: .15em; }
/* searchSelect ohne schwebendes Label in einer input-group (z. B. mit Link-Button dahinter) wie ein Feld der Gruppe: füllt die Breite, innen keine Rundung */
.input-group > .SearchSelect:not(.form-floating) { flex: 1 1 auto; width: 1%; min-width: 0; }
	.input-group > .SearchSelect:not(:last-child) > .form-select { border-top-right-radius: 0; border-bottom-right-radius: 0; }
	.input-group > .SearchSelect:not(:first-child) > .form-select { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* Auswahlliste unter einem Feld (#521, Standard für searchSelect und jede Vorschlagsliste unter einem Eingabefeld, z. B. die Zutaten im Rezept: dropdown-menu SearchSelectMenu
   mit dropdown-item; Aussehen in theme.css): so breit wie das ganze Feld samt angehängten Knöpfen (search-select.js setzt die Breite beim Öffnen) */
.SearchSelectMenu { max-height: 360px; overflow-y: auto; width: 100%; min-width: 260px; padding-top: 0; }
	.SearchSelectSearch { position: sticky; top: 0; z-index: 1; padding: .5rem; background: var(--bs-dropdown-bg); }
	/* Zusatzinfo eines Eintrags (Einheit, Typ) rechts */
	.SearchSelectMenu .dropdown-item:has(> .SearchSelectExtra) { display: flex; align-items: baseline; gap: .5rem; }
		.SearchSelectExtra { flex: 0 0 auto; margin-left: auto; font-size: .8125rem; }
	/* Zwischenzeile "Im Zusatz": darunter die Treffer nur im Zusatz in Klammern */
	.SearchSelectDivider { padding: .5rem .7rem .2rem; font-size: .8125rem; }
/* Watchlist-Eintrag: Poster und darunter der Trailer als Vorschaubild in Posterbreite */
.WatchlistPoster { height: 320px; display: block; margin-bottom: .75rem; }
.WatchlistTrailerThumb { position: relative; display: block; width: 213px; margin-bottom: 1rem; }
.WatchlistTrailerThumb img { width: 100%; border-radius: 4px; }
.WatchlistTrailerThumb i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, .6); }
/* Sichtung erfassen: Desktop eine Zeile (Staffel, Datum, Wer, Auge); Handy Staffel und Datum, darunter Wer, rechts daneben mittig das Auge */
.ViewingForm { display: flex; align-items: center; gap: .5rem; }
	.ViewingFields { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
		.ViewingDate { width: 11rem; }
@media (max-width: 767.98px) {
	.ViewingFields { flex: 1 1 auto; min-width: 0; }
		.ViewingDate { flex: 1 1 0; width: auto; min-width: 0; }
		.ViewingUsers { flex: 1 1 100%; }
			.ViewingUsers > .dropdown > .form-select { width: 100%; }
}
/* Handy: Poster und Trailer nebeneinander über den Feldern */
@media (max-width: 767.98px) {
	.WatchlistMedia { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
		.WatchlistMedia .WatchlistPoster { height: 180px; margin-bottom: 0; }
		.WatchlistMedia .WatchlistTrailerThumb { flex: 1 1 auto; max-width: 213px; margin-bottom: 0; }
}
/* Brettspiele: Vorschaubild in Listen und Partie, Bild in der Bearbeitung (Schachteln sind meist quadratisch, daher ohne Zuschnitt) */
.BoardGameThumbnail { display: block; width: 48px; height: 48px; object-fit: contain; border-radius: 3px; }
	div.BoardGameThumbnail { display: flex; align-items: center; justify-content: center; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
/* Vorschaubild eines Treffers im Popup "Auf BoardGameGeek suchen" */
.BoardGameGeekResultImage { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 4px; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 1.5rem; overflow: hidden; }
.BoardGameGeekResultImage img { width: 100%; height: 100%; object-fit: contain; }
/* Feedsuche (#530, newsfeeds.edit.aspx): Bild des Podcasts bzw. Feeds, sonst das Symbol seiner Art */
.FeedSearchImage { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 6px; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 1.35rem; overflow: hidden; }
	.FeedSearchImage img { width: 100%; height: 100%; object-fit: cover; }
/* Gesundheit: Tagesziele als große Zahlen mit kleiner Beschriftung darunter */
.HealthTargetValue { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.HealthTargetLabel { font-size: .875rem; color: var(--bs-secondary-color); }
/* Symbol einer Kategorie (#521, categories.edit.aspx): Knopf vor dem Namen (blass = geerbt), Auswahl als Raster mit Suche */
.CategoryIconButton { width: 3.5rem; font-size: 1.35rem; color: var(--bs-success); }
	.CategoryIconButton.CategoryIconInherited { color: var(--bs-secondary-color); }
.CategoryIconMenu { width: min(20rem, calc(100vw - 2rem)); }
	.CategoryIconGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; max-height: 15rem; overflow-y: auto; }
	.CategoryIconGrid > .btn { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
/* Gewohnheiten: rundes Symbol (das der Kategorie ihres Themas, #521) in der Liste und beim Abhaken, dort rechts ein runder Haken-Knopf je Zeile */
.HabitIcon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
	.table.MobileCards > tbody > tr > .MobileImage > .MobileImagePlaceholder.HabitIcon { aspect-ratio: 1 / 1; border-radius: 50%; }
.HabitDay { display: flex; align-items: center; gap: .75rem; }
	.HabitDayIcon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--bs-secondary-bg); color: var(--bs-success); }
	.HabitDayDone .HabitDayIcon { background-color: var(--bs-success); color: var(--bs-body-bg); }
	.HabitDayText { flex: 1 1 auto; min-width: 0; }
	.HabitDayCheck { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bs-border-color); background-color: transparent; color: var(--bs-secondary-color); }
		.HabitDayCheck:disabled { opacity: .6; }
	.HabitDayDone .HabitDayCheck { border-color: var(--bs-success); background-color: var(--bs-success); color: #fff; }
	.HabitDayDone .HabitDayText, .HabitDaySkipped .HabitDayText { color: var(--bs-secondary-color); }
		.HabitDayDone .HabitDayText .fw-semibold { text-decoration: line-through; }
	.HabitDaySkipped .HabitDayCheck { border-color: var(--bs-secondary-color); color: var(--bs-secondary-color); }
/* Kalender einer Gewohnheit: 7 Spalten Montag bis Sonntag */
.HabitCalendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 360px; }
	.HabitCalendarHead { text-align: center; font-size: .75rem; color: var(--bs-secondary-color); }
	.HabitCalendarDay { text-align: center; font-size: .875rem; line-height: 36px; border-radius: 6px; color: var(--bs-secondary-color); }
.HabitCalendarLegend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.HabitDue { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); }
.HabitDone { background-color: var(--bs-success); color: #fff; }
.HabitSkipped { background-color: var(--bs-secondary-bg-subtle, #e9ecef); color: var(--bs-secondary-color); text-decoration: line-through; }
.HabitMissed { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
/* Verlauf einer wiederkehrenden Aufgabe: Zeitleiste je Jahr, eine Linie verbindet die Punkte der Erledigungen */
.CompletedStats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
	.CompletedStat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background-color: var(--bs-secondary-bg); font-size: .875rem; color: var(--bs-secondary-color); }
	.CompletedStat b { color: var(--bs-body-color); }
	.CompletedStat > .fa-check { color: var(--bs-success); }
.CompletedTimeline { max-width: 480px; }
	.CompletedTimelineYear { margin: 12px 0 4px 0; font-weight: 700; }
	.CompletedTimelineYear:first-child { margin-top: 0; }
	.CompletedTimelineEntry { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 0 5px 22px; }
	.CompletedTimelineEntry::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background-color: var(--bs-border-color); }
	.CompletedTimelineDot { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background-color: var(--bs-success); }
	.CompletedTimelineEntry > .CompletedTimelineGap { margin-left: auto; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-weight: 500; }
	.CompletedTimelineEntry > .CompletedTimelineGapLong { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
	/* übersprungene Fälligkeit (#559): grauer Punkt mit Vorspulen-Symbol, Datum gedimmt */
	.CompletedTimelineSkipped { color: var(--bs-secondary-color); }
	.CompletedTimelineSkipped > .CompletedTimelineDot { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; left: -2px; margin-top: -8px; background-color: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: .45rem; }
/* Spieler einer Partie: Kontakt bzw. Gast, Punkte, Gewinner, erste Partie, entfernen in einer Zeile (auch auf dem Handy) */
.BoardGamePlayer { display: flex; align-items: flex-start; gap: .375rem; margin-bottom: .5rem; }
	.BoardGamePlayerName { flex: 1 1 auto; min-width: 0; }
	.BoardGamePlayerScore { flex: 0 0 5.5rem; width: 5.5rem; }
/* Handy: Kontakt bzw. Gast über die ganze Breite, darunter Punkte und Knöpfe */
@media (max-width: 767.98px) {
	.BoardGamePlayer { flex-wrap: wrap; padding-bottom: .5rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
		.BoardGamePlayerName { flex-basis: 100%; }
		/* min-width: 0, sonst bleibt das Feld so breit wie seine Standardgröße und schiebt den Löschen-Knopf in die nächste Zeile */
		.BoardGamePlayerScore { flex: 1 1 0; width: auto; min-width: 0; }
}
/* Zugehörigkeiten eines Kontakts (contacts.edit): Kreis, Detail, im Namen, Knöpfe in einer Zeile; auf dem Handy der Kreis über die ganze Breite */
.ContactAffiliation { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin-bottom: .5rem; }
	.ContactAffiliationGroup { flex: 0 1 16rem; min-width: 12rem; }
	.ContactAffiliationDetail { flex: 1 1 12rem; width: auto; min-width: 0; }
	.ContactAffiliationButtons { display: flex; gap: .25rem; }
@media (max-width: 767.98px) {
	.ContactAffiliation { padding-bottom: .5rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
		.ContactAffiliationGroup { flex-basis: 100%; }
}
/* Statistiken (Brettspiele, Finanzen): Kennzahlen als Kacheln, großer Wert und darunter die Bezeichnung */
.KeyFigure { height: 100%; padding: .5rem .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); }
	.KeyFigureValue { font-size: 1.5rem; font-weight: bold; font-variant-numeric: tabular-nums; }
/* Seite eines Abschnitts (topicperiods.edit.aspx, #521): Titel groß, darunter Thema · Zeitraum und der Ordner, Kennzahlen in einer Zeile
   (Instagram als Kachel-Knopf); Zeilen "Dazu gehört", Vorschläge und Kosten ohne inneren Rahmen, mit Trennlinien und farbigem Typ-Symbol */
.PeriodTitle { margin-bottom: .25rem; font-family: var(--lh-font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.PeriodSubline { font-size: 1.05rem; }
.PeriodFolder { margin-top: .25rem; overflow-wrap: anywhere; }
.PeriodKeyFigures .KeyFigure { padding-inline: .6rem; overflow: hidden; }
	.PeriodKeyFigures .KeyFigureValue { white-space: nowrap; }
	.PeriodInstagramTile { color: var(--bs-body-color); text-align: start; }
		.PeriodInstagramTile .KeyFigureValue { color: var(--bs-success); }
		.PeriodInstagramTile:hover:not(:disabled) { border-color: var(--bs-success); }
.PeriodRows { padding-inline: calc(.75rem + var(--bs-border-width)); }
	.PeriodRows > .PeriodRow + .PeriodRow { border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); }
.PeriodRow { display: flex; align-items: center; gap: .25rem; padding: .55rem 0; }
	.PeriodRowMain { display: flex; flex: 1 1 auto; align-items: center; gap: .75rem; min-width: 0; color: inherit; text-decoration: none; }
		a.PeriodRowMain[href]:hover .PeriodRowTitle { color: var(--bs-success); }
	.PeriodRowIcon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background-color: color-mix(in srgb, var(--lh-cat-color) 22%, transparent); color: var(--lh-cat-color); }
	.PeriodRowText { display: flex; flex-direction: column; min-width: 0; }
		.PeriodRowTitle, .PeriodRowDetail { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
		.PeriodRowTitle { font-weight: 600; }
		.PeriodRowDetail { font-size: .875rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) {
	.PeriodTitle { font-size: 1.75rem; }
	.PeriodKeyFigures .KeyFigureValue { font-size: 1.15rem; }
}
/* Anzahl der Partien eines Brettspiels als Zahl im Badge */
.BoardGamePlaysBadge { min-width: 2rem; font-size: .85rem; }
/* Status eines Batches (batchcontrols): lange Texte ("Durch Timeout unterbrochen …") gekürzt, voll im Tooltip; auf dem Handy oben rechts in der Karte */
.BatchStatusBadge { display: inline-block; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
@media (max-width: 767.98px) {
	.table.MobileCards > tbody > tr:has(> .MobileCorner > .BatchStatusBadge) { padding-right: 7.5rem; }
	.table.MobileCards .BatchStatusBadge { max-width: 7rem; }
}

/* Training-Events: Saisonlinie aus Wochen (1,5rem je Woche, gleiche Breite wie in getSeasonMonths), Monate darüber, scrollt auf dem Handy waagerecht */
.TrainingSeasonScroll { overflow-x: auto; padding-bottom: .25rem; }
	.TrainingSeasonMonths, .TrainingSeasonWeeks { display: flex; width: max-content; }
	.TrainingSeasonMonth { flex-shrink: 0; padding-left: .25rem; border-left: var(--bs-border-width) solid var(--bs-border-color); font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; }
	.TrainingSeasonWeeks { gap: 2px; }
	.TrainingSeasonWeek { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(1.5rem - 2px); height: 1.75rem; border-radius: 3px; color: #fff; font-size: .7rem; font-weight: bold; }
	.TrainingSeasonWeeks .TrainingSeasonWeek:first-child { outline: 2px solid var(--bs-body-color); outline-offset: 1px; }
.TrainingSeasonLegend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; font-size: .8rem; color: var(--bs-secondary-color); }
	.TrainingSeasonLegend .TrainingSeasonWeek { width: .9rem; height: .9rem; margin-right: .35rem; vertical-align: -2px; }
.TrainingPhaseBase { background-color: var(--bs-info); }
.TrainingPhaseBuild { background-color: var(--bs-success); }
.TrainingPhaseSpecific { background-color: var(--bs-primary); }
.TrainingPhaseTaper { background-color: var(--bs-warning); }
.TrainingPhaseEventWeek { background-color: var(--bs-danger); }
.TrainingPhaseRecovery { background-color: var(--bs-gray-600); }
.TrainingPhaseFallback { background: repeating-linear-gradient(135deg, var(--bs-gray-500), var(--bs-gray-500) 4px, var(--bs-gray-400) 4px, var(--bs-gray-400) 8px); }
/* Priorität eines Events als runder Buchstabe; vergangene grau */
.TrainingPriority { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: bold; font-size: .8rem; color: #fff; background-color: var(--bs-secondary); }
	.TrainingPriorityA { background-color: var(--bs-danger); }
	.TrainingPriorityB { background-color: var(--bs-warning); color: #313a46; }
	.TrainingPriorityC { background-color: var(--bs-gray-600); }
	.TrainingPriorityDone { background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.TrainingNumber { font-variant-numeric: tabular-nums; }
/* Fallback-Schwerpunkt: Auswahl, Gewichtung, Entfernen in einer Zeile */
.TrainingFocusRow { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: .5rem; max-width: 36rem; }
/* Splits des Ergebnisses: zwei Spalten (bei Hyrox Läufe links, Stationen rechts), auf dem Handy eine */
.TrainingSplits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.5rem; max-width: 48rem; }
	.TrainingSplit { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 5.5rem; gap: .5rem; align-items: center; margin: 0; }
	.TrainingSplitShortName { font-size: .75rem; font-weight: bold; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.TrainingSplitRun .TrainingSplitShortName { color: var(--bs-blue); }
	.TrainingSplitStation .TrainingSplitShortName { color: var(--bs-red); }
	.TrainingSplit input { font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
	.TrainingSplits { grid-template-columns: minmax(0, 1fr); }
}
/* Auswertung der Events: Kennzahlen als Kacheln, Hinweise, Tabelle der Splits */
.TrainingKeyFigure { height: 100%; padding: .5rem .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); }
	.TrainingKeyFigureValue { font-size: 1.5rem; font-weight: bold; font-variant-numeric: tabular-nums; }
	.TrainingKeyFigureSmall { font-size: 1.15rem; }
	.TrainingRecordActivity { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.TrainingHints { padding: .5rem .75rem; border-radius: var(--bs-border-radius); background-color: rgba(var(--bs-primary-rgb), .08); }
.TrainingSplitTable td:not(:first-child), .TrainingSplitTable th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
	.TrainingSplitTable tr.TrainingSplitTableSum td { font-style: italic; }
	.TrainingSplitTable tr.TrainingSplitTableTotal td { font-weight: bold; }

/* Übungskatalog: Vorschaubild, Start- und Endbild, Körperregionen, Import als Kachelraster */
.TrainingExerciseThumbnail { display: block; flex-shrink: 0; width: 64px; height: 48px; object-fit: cover; border-radius: 3px; }
	div.TrainingExerciseThumbnail { display: flex; align-items: center; justify-content: center; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
/* Kategorie einer Übung als Badge (Liste; auf dem Handy oben rechts in der Karte, die dafür etwas mehr Platz lässt) */
.TrainingCategoryBadge { font-weight: 500; border: var(--bs-border-width) solid transparent; }
	.TrainingCategoryStrength { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
	.TrainingCategoryConditioning { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle); }
	.TrainingCategoryPlyometrics { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
	.TrainingCategoryEndurance { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
	.TrainingCategoryMobility, .TrainingCategoryStretching { background-color: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border-color: var(--bs-info-border-subtle); }
	.TrainingCategoryActivation { background-color: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); border-color: var(--bs-secondary-border-subtle); }
	.table.MobileCards > tbody > tr:has(> .MobileCorner > .TrainingCategoryBadge) { padding-right: 6.5rem; }
/* Übung (trainingexercises.edit.aspx): Ansicht mit Kopf, Bildern zum Wischen, Muskeln als Pillen; Bearbeiten mit Bildkacheln */
.TrainingExerciseHead { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .5rem; }
	.TrainingExerciseTitle { flex: 1; min-width: 0; margin: 0; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; }
.TrainingExerciseFacts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
	.TrainingExerciseFact { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; border: var(--bs-border-width) solid var(--bs-border-color); background-color: var(--bs-tertiary-bg); font-size: .875rem; }
	.TrainingExerciseFact i { position: relative; top: 1px; color: var(--bs-secondary-color); font-size: .75rem; } /* optisch mittig zur Schrift */
	.TrainingExerciseAnimation { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--bs-border-radius); }
	.TrainingExerciseImagePlaceholder { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--bs-border-radius); }
.TrainingExerciseMuscleRow { display: flex; align-items: baseline; gap: .75rem; padding: .5rem 0; }
	.TrainingExerciseMuscleRow + .TrainingExerciseMuscleRow { border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); }
	.TrainingExerciseMuscleLabel { flex: 0 0 7.5rem; color: var(--bs-secondary-color); font-size: .875rem; }
.TrainingExerciseMuscles { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.TrainingMusclePill { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .7rem; border-radius: 999px; border: var(--bs-border-width) solid rgba(var(--bs-primary-rgb), .5); background: none; color: var(--bs-primary); font-size: .9rem; font-weight: 500; line-height: 1.5; }
	.TrainingMusclePill.Primary { border-color: var(--bs-primary); background-color: var(--bs-primary); color: var(--lh-on-accent, #000); }
	button.TrainingMusclePill i { font-size: .7rem; opacity: .8; }
	button.TrainingMusclePill:disabled { opacity: .65; }
.TrainingMuscleField { position: relative; padding: 1.9rem .75rem .6rem; margin-bottom: .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); }
	.TrainingMuscleField:last-child { margin-bottom: 0; }
	.TrainingMuscleFieldLabel { position: absolute; top: .35rem; left: .75rem; color: var(--bs-secondary-color); font-size: .75rem; }
	.TrainingMuscleAdd > .form-select { width: auto; min-height: 0; padding: .2rem 2rem .2rem .75rem; border-radius: 999px; border-style: dashed; font-size: .9rem; line-height: 1.5; }
.TrainingExerciseStrength { display: block; color: inherit; text-decoration: none; }
	.TrainingExerciseStrength:hover { color: inherit; border-color: var(--bs-primary); }
	.TrainingExerciseStrengthValue { font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.TrainingExerciseSteps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
	.TrainingExerciseSteps li { display: flex; gap: .75rem; padding: .5rem 0; counter-increment: step; }
	.TrainingExerciseSteps li + li { border-top: var(--bs-border-width) solid var(--bs-border-color-translucent); }
	.TrainingExerciseSteps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .05rem; border-radius: 999px; border: var(--bs-border-width) solid var(--bs-border-color); background-color: var(--bs-tertiary-bg); font-size: .75rem; font-weight: 600; }
	.TrainingExerciseImagePlaceholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; color: var(--bs-secondary-color); background-color: var(--bs-secondary-bg); }
	.TrainingExerciseAnimationUpload.disabled { pointer-events: none; opacity: .65; }
	.TrainingImportText { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
/* Sportarten: Farbe am linken Rand der Einheit */
.TrainingSportRun { --lh-sport-color: var(--bs-blue); }
.TrainingSportBike { --lh-sport-color: var(--bs-green); }
.TrainingSportSwim { --lh-sport-color: var(--bs-cyan); }
.TrainingSportStrength { --lh-sport-color: var(--bs-orange); }
.TrainingSportHybrid { --lh-sport-color: var(--bs-red); }
.TrainingSportMobility { --lh-sport-color: var(--bs-gray-600); }
/* Trainingsprofil: Wochentage als Knöpfe */
.TrainingTimeSlotDayName { width: 2rem; }
/* Trainingsorte im Profil: ganze Zeile anklickbar */
.TrainingLocationRow:hover { background-color: var(--bs-tertiary-bg); }
/* Zeitauswahl des Geräts (type="time") braucht Platz für Uhrzeit und Symbol */
.TrainingTimeSlotTime { width: 6.5rem; }
.TrainingGoalSport { width: 8.3rem; }
.TrainingGoalNumber { width: 2.4rem; }
/* Trainingsort: Gewichte als Badges, kleine Eingabefelder für Gewicht und Reihe */
.TrainingLocationWeightInput { width: 4.5rem; min-width: 0; flex: 0 1 4.5rem; }
.TrainingLocationWeightBadge { font-weight: normal; font-size: .875rem; }
	.TrainingLocationWeightToggle { cursor: pointer; }
	/* Gewicht mehrfach vorhanden: im Akzent, damit es in der Liste auffällt */
	.TrainingLocationWeightBadge.TrainingLocationWeightMultiple { border-color: var(--bs-success) !important; color: var(--bs-success) !important; }
/* Trainingsplan: sieben Spalten (auf dem Handy untereinander), Einheiten als Karten, Belastung als Balken */
.TrainingWeekKeyFigure { height: auto; }
.TrainingWeekDays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
	.TrainingWeekDay { display: flex; flex-direction: column; gap: .4rem; min-height: 9rem; padding: .5rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); }
	.TrainingWeekDay.TrainingWeekDayToday { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
	.TrainingWeekDay.TrainingWeekDayRest { background-color: var(--bs-tertiary-bg); }
	.TrainingWeekDayHead { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }
		.TrainingWeekDayTitle { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
		.TrainingWeekDayAdd { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; padding: 0; }
	.TrainingWeekEvent { display: block; padding: .2rem .4rem; border-radius: 3px; font-size: .8rem; font-weight: bold; color: #fff; background-color: var(--bs-danger); text-decoration: none; }
	.TrainingWeekSession { display: flex; flex-direction: column; gap: .1rem; padding: .35rem .45rem; border-left: 3px solid var(--lh-sport-color, var(--bs-secondary)); border-radius: 3px; background-color: rgba(var(--bs-secondary-rgb), .07); font-size: .85rem; color: inherit; text-decoration: none; }
		.TrainingWeekSession.TrainingStatusDone { opacity: .7; }
		.TrainingWeekSession.TrainingStatusSkipped { opacity: .45; text-decoration: line-through; }
		.TrainingWeekSessionBlocks { color: var(--bs-secondary-color); }
.TrainingWeekLoad { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; height: 4.5rem; align-items: end; }
	.TrainingWeekLoadDay { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
	.TrainingWeekLoadBar { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background-color: rgba(var(--bs-primary-rgb), .3); }
		.TrainingWeekLoadBar.TrainingWeekLoadHard { background-color: var(--bs-primary); }
@media (max-width: 767.98px) {
	.TrainingWeekDays { grid-template-columns: minmax(0, 1fr); }
	.TrainingWeekDay { min-height: 0; }
}
/* Einheit: Blöcke mit ihren Feldern und Übungen */
.TrainingBlock { padding: .6rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); }
	.TrainingBlockHead { display: grid; grid-template-columns: auto 10rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
	.TrainingBlockFields { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
		.TrainingBlockFields label { display: flex; flex-direction: column; gap: .15rem; width: 8rem; margin: 0; font-size: .75rem; color: var(--bs-secondary-color); }
	.TrainingBlockExercise { display: grid; grid-template-columns: 64px minmax(0, 1fr) 5rem 5rem 5.5rem auto; gap: .4rem; align-items: center; }
		.TrainingBlockExercise .TrainingExerciseThumbnail { width: 64px; height: 40px; }
	/* Hinweis zu Equipment und Gewicht am Ort und die erledigten Sätze, unter dem Namen der Übung */
	.TrainingBlockExerciseHint { margin-left: calc(64px + .4rem); }
	.TrainingBlockExerciseSets { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .35rem; }
		.TrainingBlockExerciseSet { display: grid; grid-template-columns: 1.6rem 4.5rem 5rem 4.5rem auto; justify-content: start; gap: .35rem; align-items: center; }
@media (max-width: 767.98px) {
	.TrainingBlockExerciseHint { margin-left: calc(48px + .4rem); }
	.TrainingBlockHead { grid-template-columns: auto minmax(0, 1fr) auto; }
		.TrainingBlockHead input { grid-column: 1 / -1; grid-row: 2; }
	/* #521: Zeile 1 Bild (über beide Zeilen) | Name | ✕, Zeile 2 Menge | Einheit | kg; feine Linie zwischen den Übungen */
	.TrainingBlockExercise { grid-template-columns: 48px minmax(0, 1fr) 4.5rem 4.5rem auto; padding-top: .4rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }
		.TrainingBlockExercise:first-child { padding-top: 0; border-top: 0; }
		.TrainingBlockExercise .TrainingExerciseThumbnail { grid-row: 1 / 3; grid-column: 1; width: 48px; height: 36px; }
		.TrainingBlockExercise > .TrainingBlockExerciseName { grid-row: 1; grid-column: 2 / 5; }
		.TrainingBlockExercise > .TrainingBlockExerciseRemove { grid-row: 1; grid-column: 5; }
		.TrainingBlockExercise > .TrainingBlockExerciseAmount { grid-row: 2; grid-column: 2; }
		.TrainingBlockExercise > .TrainingBlockExerciseUnit { grid-row: 2; grid-column: 3; }
		.TrainingBlockExercise > .TrainingBlockExerciseWeight { grid-row: 2; grid-column: 4; }
}
.TrainingRpe { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .25rem; max-width: 28rem; }
.TrainingSaveAsTemplate { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 40rem; }
	.TrainingSaveAsTemplate input[type=text] { width: auto; flex: 1 1 12rem; }
/* Durchführung auf dem Handy: großer Timer, aktueller Schritt farbig, Liste der Schritte */
.TrainingRun { max-width: 40rem; }
.TrainingRunTimer { text-align: center; margin-bottom: .75rem; }
	.TrainingRunTimerValue { font-size: 3rem; font-weight: bold; line-height: 1.1; font-variant-numeric: tabular-nums; }
.TrainingRunCurrent { padding: .75rem; margin-bottom: .75rem; border-radius: var(--bs-border-radius); color: #fff; background-color: var(--bs-primary); }
	.TrainingRunCurrent.TrainingRunCurrentRest { background-color: var(--bs-gray-600); }
	.TrainingRunCurrent.TrainingRunCurrentEndurance { background-color: var(--bs-blue); }
	.TrainingRunCurrent.TrainingRunCurrentAmrap, .TrainingRunCurrent.TrainingRunCurrentEmom, .TrainingRunCurrent.TrainingRunCurrentForTime { background-color: var(--bs-red); }
	.TrainingRunCurrentLabel { font-size: .75rem; font-weight: bold; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
	.TrainingRunCurrentWhat { font-size: 1.3rem; font-weight: bold; }
	.TrainingRunImage { display: block; width: 100%; max-height: 14rem; margin-top: .5rem; aspect-ratio: 3 / 2; object-fit: contain; border-radius: var(--bs-border-radius); }
	.TrainingRunThumbnail { width: 64px; flex-shrink: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
	.TrainingRunExerciseItem { padding: .35rem; border-radius: var(--bs-border-radius); background-color: rgba(255, 255, 255, .12); }
	.TrainingRunExerciseItemClickable { cursor: pointer; }
	.TrainingRunCountdown { font-size: 1.4rem; font-weight: bold; font-variant-numeric: tabular-nums; }
	.TrainingRunWeight { max-width: 16rem; }
	.TrainingRunInstructions { max-height: 12rem; overflow-y: auto; padding-left: 1.25rem; opacity: .95; }
	/* Vorschau einer Übung und Aufwärmsatz; Satz mit großen Feldern für Menge und Gewicht, RIR als Knöpfe, letztes Mal und Hinweis abgesetzt */
	.TrainingRunCurrent.TrainingRunCurrentPreview { background-color: var(--bs-gray-800); }
	.TrainingRunCurrent.TrainingRunCurrentWarmUpSet { background-color: var(--bs-teal); }
	.TrainingRunNote { margin-top: .5rem; padding: .4rem .6rem; border-radius: var(--bs-border-radius); background-color: rgba(0, 0, 0, .2); font-style: italic; }
	.TrainingRunLast { margin-top: .5rem; font-size: .85rem; font-style: italic; opacity: .9; }
	.TrainingRunSet { display: flex; gap: .75rem; margin-top: .75rem; }
		.TrainingRunSetField { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin: 0; font-size: .8rem; }
			.TrainingRunSetField input { width: 6.5rem; font-size: 1.8rem; font-weight: bold; text-align: center; font-variant-numeric: tabular-nums; }
	.TrainingRunRir { display: flex; gap: .35rem; margin-top: .25rem; }
		.TrainingRunRir .btn { min-width: 2.75rem; }
/* Mach dich bereit: Countdown vor dem Start */
.TrainingRunReady { padding: 1.5rem .75rem; margin-bottom: .75rem; text-align: center; border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); }
	.TrainingRunReadyCount { font-size: 5rem; font-weight: bold; line-height: 1.1; color: var(--bs-primary); font-variant-numeric: tabular-nums; }
/* Leseansicht einer Einheit: Ziel hervorgehoben, Blöcke mit Nummer, Übungen als klickbare Zeilen mit Animation, die sie groß im Popup zeigen */
.TrainingView { max-width: 52rem; }
.TrainingViewGoal { padding: .5rem .75rem; border-left: 3px solid var(--bs-primary); border-radius: 3px; background-color: rgba(var(--bs-primary-rgb), .06); font-style: italic; }
.TrainingViewBlock { padding: .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
	.TrainingViewBlockHead { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
	.TrainingViewBlockNumber { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: .85rem; font-weight: bold; color: #fff; background-color: var(--bs-primary); }
.TrainingViewExercises { display: flex; flex-direction: column; gap: .5rem; }
	.TrainingViewExercise { display: flex; gap: 1rem; width: 100%; padding: .5rem; border: 0; border-radius: var(--bs-border-radius); color: inherit; text-align: left; background-color: var(--bs-tertiary-bg); }
		.TrainingViewExercise:hover { box-shadow: inset 0 0 0 1px var(--bs-primary); }
	.TrainingViewExerciseImage { width: 120px; flex-shrink: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
	.TrainingViewExerciseText { flex-grow: 1; min-width: 0; }
		.TrainingViewExerciseText > span { display: block; }
	.TrainingViewPopupAnimation { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--bs-border-radius); }
	.TrainingViewSteps { margin: .5rem 0 0; padding-left: 1.25rem; }
@media (max-width: 575.98px) {
	.TrainingViewExerciseImage { width: 88px; }
}
.TrainingRunSteps { display: flex; flex-direction: column; }
	.TrainingRunStep { display: flex; align-items: center; gap: .5rem; padding: .3rem .2rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); font-size: .85rem; }
		.TrainingRunStep.TrainingRunStepDone { color: var(--bs-secondary-color); }
		.TrainingRunStep.TrainingRunStepSkipped { color: var(--bs-secondary-color); text-decoration: line-through; }
		.TrainingRunStep.TrainingRunStepNow { font-weight: bold; }
	.TrainingRunCheck { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--bs-border-color); border-radius: 3px; font-size: .65rem; color: #fff; }
		.TrainingRunStepDone .TrainingRunCheck { border-color: var(--bs-success); background-color: var(--bs-success); }
		.TrainingRunStepNow .TrainingRunCheck { border-color: var(--bs-primary); }
.TrainingTodaySession { font-size: .9rem; }
/* täglicher Abgleich des Coachs auf dem Dashboard: Farbe nach Einschätzung (wie geplant grün, lockerer/Ruhetag gelb, härter rot, tauschen blau) */
.TrainingCoachDayCheck { padding: .5rem .75rem; border-left: 3px solid var(--bs-secondary); border-radius: 3px; background-color: var(--bs-tertiary-bg); font-size: .9rem; }
/* Wochen-Check-in (trainingcheckin.aspx, Hinweis in "Training heute") und "Passt heute nicht" */
.TrainingCheckInHint { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: .5rem; border: 1px solid rgba(var(--lh-accent-rgb), .45); color: var(--lh-accent); }
	.TrainingCheckInHint .small { color: var(--lh-text-muted); }
.TrainingReport { margin-top: .4rem; padding-top: .5rem; border-top: 1px solid var(--lh-border); }
.CheckInChip { border: 1px solid var(--lh-border); border-radius: 1rem; background-color: var(--lh-surface-raised); color: var(--lh-text-body); margin: 0 .3rem .4rem 0; }
	.CheckInChip.CheckInChipOn { background-color: var(--lh-accent); border-color: var(--lh-accent); color: var(--lh-on-accent); }
.CheckInMood { font-size: 1.3rem; padding: .3rem 0; }
.CheckInGoal { display: inline-block; padding: .15rem .6rem; border-radius: 1rem; font-size: .85rem; background-color: rgba(var(--lh-accent-rgb), .12); color: var(--lh-accent); }
	.CheckInGoal.CheckInGoalOpen { background-color: rgba(255, 184, 107, .14); color: var(--lh-orange); }
.CheckInSession { display: flex; align-items: baseline; gap: .5rem; padding: .3rem 0; }
.CheckInSessionDay { width: 1.8rem; flex: none; color: var(--lh-text-muted); }
.CheckInNote { height: 5rem !important; }
	.TrainingCoachDayCheck.TrainingCoachDayCheckAsPlanned { border-left-color: var(--bs-success); }
	.TrainingCoachDayCheck.TrainingCoachDayCheckLighter, .TrainingCoachDayCheck.TrainingCoachDayCheckRest { border-left-color: var(--bs-warning); }
	.TrainingCoachDayCheck.TrainingCoachDayCheckHarder { border-left-color: var(--bs-danger); }
	.TrainingCoachDayCheck.TrainingCoachDayCheckSwap { border-left-color: var(--bs-info); }
/* Kraft: Übungen als Liste (ausgewählte hervorgehoben), Einheiten der ausgewählten Übung als Zeilen */
.TrainingStrengthList { display: flex; flex-direction: column; }
	.TrainingStrengthItem { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem; border: 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); color: inherit; background: none; }
		.TrainingStrengthItem:hover { background-color: var(--bs-tertiary-bg); }
		.TrainingStrengthItem.TrainingStrengthItemSelected { background-color: rgba(var(--bs-primary-rgb), .08); box-shadow: inset 3px 0 0 var(--bs-primary); }
	.TrainingStrengthThumbnail { width: 56px; height: 42px; flex-shrink: 0; object-fit: cover; border-radius: 3px; }
.TrainingStrengthSessions { display: flex; flex-direction: column; font-size: .9rem; }
	.TrainingStrengthSession { display: flex; align-items: baseline; gap: .75rem; padding: .3rem 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
/* Mobility: die letzten vier Wochen als Kästchen (erledigt grün, heute umrandet), Erfassung abgesetzt, Vorschläge als Kacheln */
.TrainingMobilityCalendar { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; height: 100%; align-content: center; }
	.TrainingMobilityCalendarDay { aspect-ratio: 1; max-height: 1.6rem; border-radius: 3px; background-color: rgba(var(--bs-secondary-rgb), .15); }
	.TrainingMobilityCalendarDay.TrainingMobilityCalendarDone { background-color: var(--bs-success); }
	.TrainingMobilityCalendarDay.TrainingMobilityCalendarToday { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.TrainingMobilityForm { padding: .75rem; border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); }
.TrainingMobilityTestInput { width: 5.5rem; flex-shrink: 0; }
.TrainingMobilitySuggestion { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 7.5rem; padding: .35rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); color: inherit; text-align: center; text-decoration: none; }
	.TrainingMobilitySuggestion:hover { border-color: var(--bs-primary); }
/* KI-Coach: Nachrichten als Sprechblasen (eigene rechts), Antwort mit einfachem Markdown, Vorschlag auf großen Bildschirmen mitlaufend */
.TrainingCoachMessages { display: flex; flex-direction: column; gap: .75rem; }
.TrainingCoachMessage { max-width: 90%; padding: .5rem .75rem; border-radius: var(--bs-border-radius-lg); }
	.TrainingCoachMessageUser { align-self: flex-end; background-color: rgba(var(--bs-primary-rgb), .12); }
	.TrainingCoachMessageCoach { align-self: flex-start; background-color: var(--bs-tertiary-bg); }
	.TrainingCoachMessageText > :last-child { margin-bottom: 0; }
	.TrainingCoachMessageText p, .TrainingCoachMessageText ul, .TrainingCoachMessageText ol { margin-bottom: .5rem; }
	.TrainingCoachMessageText ul, .TrainingCoachMessageText ol { padding-left: 1.25rem; }
	.TrainingCoachMessageText ul { list-style: disc; }
	.TrainingCoachMessageText ol { list-style: decimal; }
	.TrainingCoachMessageMeta { margin-top: .25rem; font-size: .75rem; color: var(--bs-secondary-color); }
.TrainingCoachThinking { margin-top: .75rem; color: var(--bs-secondary-color); }
.TrainingCoachInput { resize: vertical; }
/* Gedächtnis des Coachs im Trainingsprofil: Einträge mit Herkunft und Datum */
.TrainingCoachMemories { display: flex; flex-direction: column; gap: .35rem; }
	.TrainingCoachMemory { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem .5rem; border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); }
@media (min-width: 992px) {
	.TrainingCoachProposal { position: sticky; top: 4.5rem; }
}
/* Packliste: Von und Bis auf dem Handy nebeneinander über die volle Breite, die Anzahl der Tage darunter */
@media (max-width: 767.98px) {
	.PackingListDates { row-gap: .25rem; }
		.PackingListDates > .form-floating { flex: 1 1 0; min-width: 0; }
		.PackingListDates > .text-muted { flex: 1 1 100%; text-align: center; }
}
/* Packliste: Mitreisende (Kontakt oder Gast) wie die Spieler einer Partie */
.PackingListTraveler { display: flex; align-items: flex-start; gap: .375rem; margin-bottom: .5rem; max-width: 30rem; }
	.PackingListTravelerName { flex: 1 1 auto; min-width: 0; }
/* Packen: Gruppen mit Kopf, Einträge als große Tippflächen (Handy) */
.PackingGroup { margin-bottom: 1rem; }
.PackingGroupHeader { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-weight: bold; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.PackingItem { display: flex; align-items: center; gap: .375rem; min-height: 2.75rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color-translucent); }
	.PackingItemCheck { flex: 0 0 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--bs-body-color); }
	.PackingItemCheck:disabled { color: var(--bs-secondary-color); }
	.PackingItemText { flex: 1 1 auto; min-width: 0; cursor: pointer; user-select: none; overflow-wrap: anywhere; }
	.PackingItemAmount { display: inline-block; min-width: 2.25rem; color: var(--bs-secondary-color); }
.PackingItemDone .PackingItemCheck { color: var(--bs-success); }
.PackingItemDone .PackingItemText { text-decoration: line-through; color: var(--bs-secondary-color); }
.PackingItemNotNeeded .PackingItemText { font-style: italic; color: var(--bs-secondary-color); }
.PackingAddItem { margin-top: 1rem; padding-top: .75rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }
	.PackingAddItemName { flex: 1 1 14rem; width: auto; }
	.PackingAddItemAmount { flex: 0 0 4.5rem; width: 4.5rem; }
	.PackingAddItemSelect { flex: 0 1 11rem; width: auto; }
/* Import aus BG Stats: Name des Spielers vor seiner Zuordnung */
.BoardGameImportName { flex: 0 0 10rem; min-width: 0; overflow-wrap: anywhere; }
/* Karten, die sich über ihren Kopf einklappen lassen (Klasse Collapsed), auf allen Bildschirmen */
.card.CollapsibleCard > .card-header { cursor: pointer; user-select: none; }
.card.CollapsibleCard.Collapsed > :not(.card-header) { display: none !important; }
.card.CollapsibleCard.Collapsed > .card-header { border-bottom: 0; }
/* Alle übrigen Karten klappt default.master.aspx.js über den Kopf ein (AutoCollapsible); der Pfeil links zeigt den Zustand */
/* Der Pfeil steht in der Textzeile des Titels (#521; absolut auf 50 % der Kopfhöhe saß er bei SlimHeader ohne Innenabstand unten zu hoch): links im Innenabstand des Kopfs,
   per negativem Rand ohne Platz in der Zeile. In Flex-Köpfen ist er das erste Element (die Lücke gap-2 gleicht der Rand aus); beginnt der Kopf mit einem Block (div),
   stünde er in einer eigenen Zeile darüber, dort bleibt er absolut mittig */
.card.AutoCollapsible > .card-header { position: relative; padding-left: 1.6rem; cursor: pointer; }
	.card.AutoCollapsible > .card-header::before { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; flex: none; width: .6rem; margin-left: -1rem; margin-right: .4rem; text-align: center; vertical-align: middle; line-height: 1; font-size: .6rem; color: var(--bs-gray-600); transition: transform .15s; }
	.card.AutoCollapsible > .card-header.gap-2::before { margin-right: -.1rem; }
	.card.AutoCollapsible > .card-header:has(> div:first-child)::before { position: absolute; left: .6rem; top: 50%; margin: 0; transform: translateY(-50%); }
	/* folgt dem Titel-Block noch etwas (z. B. das Suchfeld der Personen an der Mediendatei), steht der Pfeil mittig zur ersten Zeile statt zum ganzen Kopf */
	.card.AutoCollapsible > .card-header:has(> div:first-child + *)::before { top: calc(var(--bs-card-cap-padding-y) + .75em); }
.card.AutoCollapsible.Collapsed > .card-header::before { transform: rotate(-90deg); }
.card.AutoCollapsible.Collapsed > .card-header:has(> div:first-child)::before { transform: translateY(-50%) rotate(-90deg); }
/* !important: sonst bleibt Inhalt mit d-flex/d-grid (Bootstrap, ebenfalls !important) sichtbar, z. B. „Training heute“ auf dem Dashboard;
   auch die Fußzeile eines Formulars (Speichern) klappt mit ein (#549: was man speichert, sieht man dann ja nicht), nur der Kopf bleibt */
.card.AutoCollapsible.Collapsed > :not(.card-header) { display: none !important; }
.card.AutoCollapsible.Collapsed > .card-header { border-bottom: 0; }
/* Eingang und Schnell erfassen (#294) */
.HeaderInbox { display: block; line-height: 1; color: inherit; }
	.HeaderInbox > i { font-size: 20px; vertical-align: middle; }
.CaptureTargets > .btn > i { display: block; margin-bottom: .2rem; }
/* fünf Ziele passen auch auf schmale Handys: gleich breit, wenig Innenabstand */
.CaptureTargets > .btn { flex: 1 1 0; min-width: 0; padding-left: .35rem; padding-right: .35rem; font-size: .8rem; }
/* Erfassen: Diktieren rechts oben im Textfeld, Knöpfe für Geplantes und Häufiges, erkannte Einträge, Hinweis nach dem Eintragen */
.CaptureSpeak { position: absolute; top: .4rem; right: .4rem; }
.CaptureSpeakPadding { padding-right: 3rem; }
.CaptureChip { border: 1px solid var(--lh-border); border-radius: 1rem; background-color: var(--lh-surface-raised); color: var(--lh-text-body); margin: 0 .3rem .4rem 0; }
	.CaptureChip.CaptureChipPlanned { border-color: rgba(var(--lh-accent-rgb), .5); color: var(--lh-accent); }
.CaptureFoodItem { border: 1px solid var(--lh-border); border-radius: .5rem; padding: .5rem .65rem; margin-bottom: .5rem; color: var(--lh-text-body); }
.CaptureEstimate { display: inline-block; margin-top: .3rem; font-size: .78rem; color: var(--lh-orange); }
.CaptureToast { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1070; display: flex; align-items: center; max-width: 520px; margin: 0 auto; padding: .6rem .9rem; border-radius: .75rem; background-color: var(--lh-surface-raised); border: 1px solid var(--lh-border); color: var(--lh-text); box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
	.CaptureToast > .btn { flex: none; white-space: nowrap; }
@media (min-width: 768px) {
	.CaptureToast { bottom: 24px; }
}
.InboxItem { border: 1px solid var(--bs-gray-300); border-radius: .4rem; background-color: var(--bs-body-bg); padding: .6rem .75rem; margin-bottom: .6rem; }
.InboxItem.InboxItemOld { border-left: 4px solid var(--bs-warning); }
.InboxItem.InboxItemOpen { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .2); }
.InboxItemText { color: #212529; white-space: pre-line; overflow-wrap: anywhere; }
.InboxItemMeta { font-size: .78rem; margin-top: .15rem; }
.InboxItemActions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.InboxItemProcess { background-color: var(--lh-page-bg); border-radius: .3rem; padding: .6rem; margin-top: .6rem; }
.InboxEmpty { text-align: center; padding: 1.5rem 0; color: var(--bs-success); }
	.InboxEmpty > i { font-size: 2rem; margin-bottom: .4rem; }
.InboxHint .fa-inbox { color: var(--bs-gray-600); }
/* Unser Jahr (myyear.aspx): verworfene Vorschläge blass, Einträge mit Monat vorn, Textfeld im Popup */
.YearProposalDismissed { opacity: .55; }
.YearProposalMonth { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--lh-text-muted); margin: 1rem 0 .4rem; }
	.YearProposalMonth:first-child { margin-top: 0; }
.YearEntry { display: flex; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--lh-border-subtle); }
	.YearEntry:last-child { border-bottom: 0; }
	.YearEntry.YearEntryEditable { cursor: pointer; }
	.YearEntry.YearEntryEditable:hover .YearEntryText { color: var(--lh-accent); }
.YearEntryMonth { flex: 0 0 6.5rem; color: var(--lh-text-muted); font-size: .85rem; padding-top: .1rem; }
@media (max-width: 767.98px) {
	.YearEntryMonth { flex-basis: 5.5rem; font-size: .8rem; }
}
.YearEntryText { color: var(--lh-text-body); white-space: pre-line; overflow-wrap: anywhere; min-width: 0; }
.YearEntryOthers { color: var(--lh-text-muted); font-size: .85rem; }
.YearEntryTextInput { height: 7rem !important; }
/* Wochenplanung (weekplanning.aspx): Tage mit Mahlzeiten und Lücken */
.WeekPlanningDay { display: flex; align-items: flex-start; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--lh-border); }
.WeekPlanningDayName { width: 3.6rem; flex: none; font-weight: 600; color: var(--lh-text); }
.WeekPlanningMeal { padding: .1rem 0; }
.WeekPlanningMissing { padding: .1rem 0; color: var(--lh-orange); }
.WeekPlanningDone { color: var(--lh-accent); }
/* Vorschau des Einkaufs: abwählbar ("Habe ich da"), bei vielen Lebensmitteln mit eigenem Scrollbereich */
.WeekPlanningPreview { max-height: 24rem; overflow-y: auto; }
	.WeekPlanningPreview > .form-check { padding: .3rem 0; margin: 0; border-bottom: 1px solid var(--lh-border-subtle); cursor: pointer; }
	.WeekPlanningPreview .form-check-input { float: none; margin-left: 0; flex: none; }
	.InboxHint.InboxHintOld .fa-inbox { color: var(--bs-warning); }
/* Dashboard: Einträge von heute als Checkliste, Termine und wichtige Todos in derselben Zeilenform */
.MyDayEvent { display: flex; align-items: flex-start; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--bs-gray-200); }
	.MyDayEvent:last-child { border-bottom: 0; }
.MyDayEventCheck { border: 0; background: none; padding: 0; width: 1.3rem; font-size: 1.15rem; line-height: 1.2; color: var(--bs-gray-600); flex-shrink: 0; }
	.MyDayEventCheck:not(:disabled):hover { color: var(--bs-success); }
/* Tauschen oder weglassen (#516, _MealSwap): die geplanten Mahlzeiten einer Zeile untereinander */
.MealSwapEntry + .MealSwapEntry { border-top: 1px solid var(--lh-border); padding-top: 1rem; }
.MyDayEventTime { width: 2.8rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.MyDayEventText { flex: 1; min-width: 0; color: #212529; overflow-wrap: anywhere; }
.MyDayEventOverdue { display: block; font-size: .78rem; color: var(--bs-danger); }
.MyDayEvent.MyDayEventDone .MyDayEventCheck { color: var(--bs-success); }
.DayNoteEditor .ql-editor { min-height: 10rem; }
.MyDayEvent.MyDayEventDone .MyDayEventText > span:first-child { text-decoration: line-through; color: var(--bs-gray-600); }
.DashboardEventIcon { width: 1.3rem; flex-shrink: 0; text-align: center; line-height: 1.5; color: var(--bs-gray-600); }
/* Dashboard "Heute": Tageszeile mit schmalen Balken gegen das Tagesziel, Gewicht eintragen ohne volle Breite */
.DaySummaryBar { height: 6px; margin-top: .25rem; }
/* noch geplant (#516): schraffiert hinter dem Gegessenen, zählt nicht als gegessen */
.DaySummaryBar .DaySummaryPlanned, .MealTotalBar .DaySummaryPlanned { background-color: transparent; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 3px, transparent 3px 6px); }
/* Abendbilanz: fehlendes Eiweiß mit Vorschlag */
.DashboardProteinHint { display: flex; align-items: baseline; padding: .5rem .75rem; border-radius: .5rem; border: 1px solid rgba(255, 184, 107, .45); color: var(--lh-orange); font-size: .9rem; }
/* Überweisung (#583): etwas breiter als modal-lg, damit die IBAN (4/12 neben Empfänger und BIC) ganz ins Feld passt */
@media (min-width: 992px) {
	.TransferDialog { --bs-modal-width: 920px; }
}
/* Handy: Schnell erfassen fährt von unten herein, über die ganze Breite */
@media (max-width: 767.98px) {
	.CapturePopup .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; height: auto; max-height: 100%; }
	.CapturePopup.fade .modal-dialog { transform: translateY(100%); }
	.CapturePopup.show .modal-dialog { transform: none; }
	.CapturePopup .modal-content { border-radius: 1rem 1rem 0 0; }
}
/* Fehler beim Erfassen: das Fehler-Popup steht im Layout vor dem Erfassen-Popup und läge sonst darunter; ebenso die Rückfrage vor Popups der Seite (Unser Jahr: Eintrag löschen) */
#errorPopup, #confirmYesNoPopup { z-index: 1065; }
.TopicBadge { font-size: .75rem; font-weight: 600; white-space: nowrap; border-radius: 1rem; padding: .1rem .55rem; background-color: rgba(var(--bs-primary-rgb), .12); color: #4d56c9; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
/* Watchlist Lücken & Tipps: Vorschlagskarten mit Poster */
.SuggestionCard { width: 120px; position: relative; }
.SuggestionCard.SuggestionSaving .SuggestionPoster { opacity: .4; }
.SuggestionSpinner { position: absolute; top: 65px; left: 35px; width: 50px; height: 50px; }
.SuggestionPoster { width: 120px; height: 180px; object-fit: cover; border-radius: 4px; }
.SuggestionPosterEmpty { display: flex; align-items: center; justify-content: center; background-color: var(--bs-secondary-bg); font-size: 2rem; color: var(--bs-secondary-color); }
/* bis zu vier Aktionen teilen sich die Breite der Karte */
.SuggestionActions .btn { flex: 1 1 0; padding-left: 0; padding-right: 0; }
/* Bootstrap färbt den Hintergrund hinter dem schwebenden Label von Textareas nur bei disabled grau */
.form-floating > .form-control[readonly] ~ label::after { background-color: var(--bs-secondary-bg); }
.badge { margin-left: 5px; }
	/* Badge am Anfang einer Tabellenzelle (z. B. "Gemeinsam") bündig mit dem übrigen Text, der Abstand gilt nur hinter Text */
	.table > tbody > tr > td > .badge:first-child { margin-left: 0; }
	/* In Flex-Zeilen mit Lücke (gap) und als erstes Element eines Blocks ohne Text davor kein eigener Abstand (#521), sonst steht ein Badge am Zeilenanfang eingerückt.
	   CSS sieht keinen Text vor dem Badge, daher nur, wo der Block mit dem Badge beginnt (:first-child) und kein Text davor stehen kann (Flex, Zellen, Listen) */
	:is(.d-flex, .d-inline-flex):is([class*="gap-"]) > .badge, .ListToolbarFilters > .badge, :is(li, dd, .list-group-item) > .badge:first-child { margin-left: 0; }
	/* Badge am Anfang einer Zeile, deren Text umbricht (Klasse BadgeLineStart): ohne Abstand und um seinen Innenabstand nach links, damit der Badge-Text
	   bündig mit den Folgezeilen beginnt */
	.badge.BadgeLineStart { margin-left: calc(-1 * var(--bs-badge-padding-x)); }
.nav-link { color: inherit; }
.Popup { visibility: hidden; position: fixed; background-color: #FFFFFF; border: solid 4px #000000; padding: 6px 8px; outline: 0; box-sizing: border-box; }
	.Popup h3 { margin: 5px 0 10px 0; }
/* --bs-table-color-state: Tabellenzellen setzen seit Bootstrap 5.3 ihre Farbe selbst und erben sie nicht mehr von der Zeile */
.InActive { color: gray !important; --bs-table-color-state: gray; }
.Bold { font-weight: bold !important; }
.ColorGreen { color: forestgreen !important; --bs-table-color-state: forestgreen; }
.ColorRed { color: orangered !important; --bs-table-color-state: orangered; }
/* ------- Klassen-Ende ------- */

/* ------- Navigation-Anfang ------- */
/* feste Spalte über die ganze Höhe (unter der Kopfzeile) mit eigenem Scrollen, damit sie beim Scrollen der Seite und beim Seitenwechsel an ihrer Stelle bleibt
   (default.master.aspx.js merkt sich die Position und zeigt die aktuelle Seite); am Desktop mit schmaler, dezenter Scrollleiste (#550: ohne sie kam man ohne
   Scrollrad nicht an die unteren Menüpunkte) */
.LeftMenu { background-color: #313a46; padding: 10px; padding-top: calc(var(--lh-header-height) + 4px); position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.LeftMenu .NavTitle { margin: 10px 5px 5px 5px; }
		.LeftMenu .NavTitle > span { font-size: small; color: #8391a2; letter-spacing: .05em; pointer-events: none; cursor: default; font-size: .6875rem; text-transform: uppercase; font-weight: 700; }
.LeftMenu li.NavItem { }
	.LeftMenu li.NavItem > a { display: block; font-size: .9375rem; color: #8391a2; position: relative; -webkit-transition: all .4s; transition: all .4s; list-style: none; vertical-align: middle; text-decoration: none; padding: 7px 0 7px 10px; }
		.LeftMenu li.NavItem > a:hover { color: #cedce4; }
		.LeftMenu li.NavItem > a i { display: inline-block; line-height: 1.0625rem; font-size: 1.1rem; vertical-align: middle; width: 20px; }
	/* aktuelle Seite (auch ihre Bearbeitungsseiten) */
	.LeftMenu li.NavItem.NavItemActive > a { color: #fff; background-color: rgba(255, 255, 255, .08); border-radius: 4px; }
.card-title { margin-bottom: 0; }
/* Handy: Die Navigation liegt geöffnet über die ganze Höhe (unter der Kopfzeile) und ist scrollbar, dahinter abgedunkelt */
.NavBackdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background-color: rgba(0, 0, 0, .4); }
@media (max-width: 767.98px) {
	.LeftMenu { scrollbar-width: auto; }
}
/* ------- Navigation-Ende ------- */
/* ------- ContentPage-Anfang ------- */

/* ------- Header-Anfang ------- */
.Header { background-color: #fff; padding: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: transform .2s ease-in-out; }
.HeaderLogo { width: 65px; text-align: center; }
/* Logo und Glocke ohne Unterlänge der Textzeile, sonst sitzen sie höher als die Buttons und unten bleibt mehr Platz als oben */
	.HeaderLogo img { display: block; margin: 0 auto; }
.Header a:has(> .fa-bell) { line-height: 1; }
/* Desktop: Suchfeld mit Abstand zu Logo und Glocke, auf breiten Bildschirmen mittig und nicht breiter als nötig */
@media (min-width: 768px) {
	.HeaderSearch { padding-left: 4rem; padding-right: 4rem; }
		.HeaderSearch > .input-group { max-width: 700px; margin: 0 auto; }
}
/* Inhalt und Sprungziele (Anker, scrollIntoView) unterhalb des festen Headers; die Höhe misst default.master.aspx.js */
:root { --lh-header-height: 56px; scroll-padding-top: calc(var(--lh-header-height) + 10px); }
/* mit .Content (padding-top 6px) etwa 10px Luft zwischen Header und erster Karte */
.HeaderOffset { margin-top: calc(var(--lh-header-height) + 4px); }
/* Hintergrundprozesse: wandernder Streifen am unteren Rand des Headers; die unsichtbare Fläche darüber macht ihn antippbar.
   Er wandert auch bei reduzierter Bewegung (#431): nur die Bewegung zeigt, dass gerade etwas läuft, und der Streifen ist nur 3 px hoch */
.HeaderQueueBar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; padding: 0; overflow: visible; background: linear-gradient(90deg, transparent 0%, var(--bs-success) 35%, var(--bs-success) 65%, transparent 100%) no-repeat; background-size: 40% 100%; animation: HeaderQueueBarMove 1.4s linear infinite; }
	.HeaderQueueBar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; }
	.HeaderQueueBar.HeaderQueueBarError { background: var(--bs-danger); animation: none; }
@keyframes HeaderQueueBarMove {
	from { background-position: -70% 0; }
	to { background-position: 170% 0; }
}
@media (max-width: 767.98px) {
	/* Die Zeile bricht nie um: ohne die negativen Ränder der Bootstrap-Row und mit schmalerem Abstand passen alle Knöpfe ab 360 px */
	.Header { --bs-gutter-x: .75rem; margin-left: 0; margin-right: 0; padding-left: 4px; padding-right: 4px; }
	.HeaderLogo { width: auto; }
	.HeaderIconButton { width: 38px; padding-left: 0; padding-right: 0; }
	/* Beim Herunterscrollen weg, beim Hochscrollen wieder da (default.master.aspx.js) */
	.Header.HeaderHidden { transform: translateY(-100%); }
	/* Suchleiste: unter dem Header über die ganze Breite, über die Lupe ein- und ausgeblendet */
	.HeaderSearch { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 0 24px 10px; background-color: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, .08); }
	.Header.HeaderSearchOpen .HeaderSearch { display: block; animation: HeaderSearchSlide .15s ease-out; }
}
@keyframes ListLoadingFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes ListToolbarCountPulse {
	0% { transform: translateY(-50%) scale(1); }
	40% { transform: translateY(-50%) scale(1.25); color: var(--bs-primary); }
	100% { transform: translateY(-50%) scale(1); }
}
@keyframes HeaderSearchSlide {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
.UserProfileItem > i { margin-right: 5px; width: 20px; font-size: 14px; }
/* Als anderer Benutzer: schwebende Pille unten in der Mitte über allem (auf dem Handy über der Leiste unten), der Inhalt bekommt darunter Platz */
.ImpersonationBanner { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); padding: 6px 6px 6px 14px; border-radius: 999px; background-color: var(--bs-warning); color: #1a1a1a; font-size: .875rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
	.ImpersonationBannerText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.ImpersonationBannerButton { --bs-btn-color: #fff; --bs-btn-bg: rgba(0, 0, 0, .8); --bs-btn-border-color: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: transparent; flex: 0 0 auto; border-radius: 999px; }
body.Impersonating { padding-bottom: 64px; }
/* ------- Header-Ende ------- */

/* ------- Content-Anfang ------- */
/* min-width: 0, damit breite Inhalte (Tabellen) die Spalte nicht über den Bildschirm hinaus aufweiten, sondern selbst scrollen */
.Content { padding: 6px 10px 10px 10px; min-width: 0; }
/* Desktop: Platz für die schmale Navigationsleiste; auf dem Handy liegt die Navigation nur bei Bedarf über dem Inhalt */
@media (min-width: 768px) {
	.Content { margin-left: 65px; width: calc(100% - 65px); }
}
#waitControl { position: fixed; z-index: 9999; top: 0; left: 0; right: 0; bottom: 0; }
.LoadingText { margin-left: 10px; font-weight: bold; }
.table { --bs-table-color: #212529; --bs-table-striped-color: #212529; --bs-table-active-color: #212529; --bs-table-hover-color: #212529; }
/* Zellen senkrecht mittig: bricht ein Wert um (z. B. ein langer Name), stehen die übrigen in der Mitte der Zeile statt oben; Badges (kleinere Schrift) mittig zur Zeile statt auf der Grundlinie */
.table tbody tr td { vertical-align: middle; overflow-wrap: anywhere; }
	.table tbody tr td > .badge { vertical-align: .1em; }
/* Abgerufene Buchung als Zusammenfassung (#481, accounttransactions.edit.aspx): Kontakt und Betrag groß, darunter Konto und Datum, der Verwendungszweck als Text,
   dann nur die vorhandenen Angaben als zweispaltige Liste (Bezeichnung, Wert); bündig mit dem Text in den Feldern (#513) */
.TransactionSummary { padding-inline: calc(.75rem + var(--bs-border-width)); }
.TransactionSummaryHead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .25rem 1.5rem; }
	.TransactionSummaryTitle { min-width: 0; }
	.TransactionSummaryContact { font-family: var(--lh-font-display); font-size: 1.25rem; font-weight: 600; color: var(--lh-text); overflow-wrap: anywhere; }
	.TransactionSummaryAmount { font-family: var(--lh-font-display); font-size: 1.5rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.TransactionSummaryUsage { margin-top: .75rem; padding: .6rem .8rem; border-radius: var(--lh-radius-field); background-color: var(--lh-surface-raised); white-space: pre-wrap; overflow-wrap: anywhere; }
.TransactionSummaryDetails { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: .35rem 1.25rem; margin: .9rem 0 0; font-size: .875rem; }
	.TransactionSummaryDetails > dt { font-weight: normal; color: var(--bs-secondary-color); }
	.TransactionSummaryDetails > dd { margin: 0; overflow-wrap: anywhere; }
/* Filter-/Aktionsleiste im Kopf der Listenmasken: links die Filter (brechen bei Platzmangel um), rechts fest Anzahl und Buttons */
.ListToolbar { display: flex; align-items: flex-start; gap: .5rem; font-weight: normal; }
	/* ohne Filter und ohne sichtbaren Knopf (z. B. "+" ohne Recht oder ohne Voraussetzung, Knockout visible) keine leere Leiste über der Tabelle (#481) */
	.ListToolbar:not(:has(> .ListToolbarFilters > *)):not(:has(> .ListToolbarActions > :not([style*="display: none"]))) { display: none; }
	/* Listen in Tabs der Edit-Masken: Tabelle oder andere Liste (Verlauf des Themas) folgt direkt auf die Leiste */
	:is(.ListToolbar:has(+ .table), .tab-pane > .ListToolbar) { margin-bottom: .5rem; }
	.ListToolbarFilters { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
	/* Untertabellen mit weniger als 6 Einträgen (#484, default.master.aspx.js): ohne Suche und Filter (auch am Handy, wo sich die Filter sonst auflösen); ohne sichtbaren Knopf keine Leiste */
	.ListToolbar.ListToolbarFewEntries > .ListToolbarFilters { display: none !important; }
	.ListToolbar.ListToolbarFewEntries:not(:has(> .ListToolbarActions > :not([style*="display: none"]))) { display: none; }
		/* das "+" bleibt rechts, auch am Handy, wo sich die Aktionen in die Leiste auflösen */
		.ListToolbar.ListToolbarFewEntries > .ListToolbarActions > .ListToolbarAdd { margin-left: auto; }
	/* Text statt Filter (z. B. "3 aktive Gewohnheiten"): mittig zu den Buttons; die Leiste selbst richtet oben aus, auf dem Handy ist der Text ihr direktes Element (display: contents) */
	.ListToolbarFilters:has(> span:first-child), .ListToolbarFilters > span:first-child { align-self: center; }
		/* Optional: feste Zeilen innerhalb der Filter (z.B. Buchungen) */
		.ListToolbarRow { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
		:is(.ListToolbarFilters, .ListToolbarRow) > .form-control, :is(.ListToolbarFilters, .ListToolbarRow) > .form-select { width: auto; }
		:is(.ListToolbarFilters, .ListToolbarRow) > .input-group { width: auto; flex-wrap: nowrap; }
			:is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-control { flex: 0 0 auto; width: 9rem; }
			:is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-control.ListToolbarNumber { width: 6rem; }
			:is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-select { flex: 0 0 auto; width: auto; }
	/* Mindesthöhe = Höhe eines Filterfelds, damit Anzahl und Buttons auf Höhe der ersten Filterzeile stehen */
	/* Liste lädt (Klasse ListLoading an der Karte): Inhalt abgedunkelt, Streifen wandert am oberen Rand;
	   erst nach kurzer Verzögerung, damit schnelle Suchen nicht flackern.
	   Unterlisten in Reitern (eigenes Model je Reiter) setzen die Klasse am Reiter: dort wird nur die Tabelle abgedunkelt, die Filterleiste bleibt bedienbar */
	:is(.card.ListLoading > .card-body, .tab-pane.ListLoading > .table) { opacity: .45; pointer-events: none; transition: opacity .15s ease-in .15s; }
	.tab-pane.ListLoading { position: relative; }
	:is(.card, .tab-pane).ListLoading::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5; border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0; background: linear-gradient(90deg, transparent 0%, var(--bs-primary) 35%, var(--bs-primary) 65%, transparent 100%) no-repeat; background-size: 40% 100%; animation: HeaderQueueBarMove 1.4s linear infinite, ListLoadingFadeIn .15s step-end; }
	/* Suche mit Trefferanzahl rechts im Feld; padding-right gilt nur bis default.master.aspx.js es an die Breite der Zahl anpasst */
	.ListToolbarSearch { position: relative; }
		.ListToolbarSearch > .form-control { width: 100%; padding-right: 3rem; }
		.ListToolbarCount { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; pointer-events: none; }
		.ListToolbarCount.ListToolbarCountPulse { animation: ListToolbarCountPulse .4s ease-out; }
	/* Keine Treffer mit den gesetzten Filtern: Hinweis mit "Filter zurücksetzen" über der Liste (default.master.aspx.js, oder eigener der Seite) */
	.ListNoHitsGeneric { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
	.ListToolbarActions { flex: 0 0 auto; margin-left: auto; min-height: calc(1.5em + .6rem + 2px); display: flex; align-items: center; gap: .5rem; }
		.ListToolbarActions .badge { margin-left: 0; }
	/* Button "Filter" (default.master.aspx.js) nur auf dem Handy */
	.ListToolbarFilterToggle { display: none; }
/* Profilbild eines Kontakts (Binding contactPhoto in contact-photo.js), Größe setzt das Binding */
.ContactPhoto { display: inline-block; flex: 0 0 auto; border-radius: 50%; object-fit: cover; vertical-align: middle; }
	.ContactPhotoPlaceholder { display: inline-flex; align-items: center; justify-content: center; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-weight: bold; user-select: none; }
/* Stammbaum (contacts.familytree): Generationen untereinander, mit kurzer Linie verbunden; Gruppen nebeneinander */
.FamilyTree { display: flex; flex-direction: column; align-items: center; }
	.FamilyTreeGeneration { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
		.FamilyTreeGeneration + .FamilyTreeGeneration { margin-top: 1.75rem; }
			.FamilyTreeGeneration + .FamilyTreeGeneration::before { content: ""; position: absolute; top: -1.75rem; left: 50%; height: 1.75rem; border-left: 2px solid var(--bs-border-color); }
		.FamilyTreeGenerationCaption { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-secondary-color); margin-bottom: .35rem; background-color: var(--bs-body-bg); position: relative; padding: 0 .5rem; }
		.FamilyTreeGroups { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .75rem 1.5rem; }
			.FamilyTreeGroup { border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .5rem; background-color: var(--bs-tertiary-bg); }
				.FamilyTreeGroupCaption { font-size: .75rem; color: var(--bs-secondary-color); text-align: center; margin-bottom: .35rem; }
				.FamilyTreeMembers { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
					.FamilyTreeMember { position: relative; width: 8.5rem; padding: .6rem .4rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background-color: var(--bs-body-bg); text-align: center; cursor: pointer; transition: box-shadow .15s; }
						.FamilyTreeMember:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
						.FamilyTreeMemberCurrent { border: 2px solid var(--bs-primary); cursor: default; }
							.FamilyTreeMemberCurrent:hover { box-shadow: none; }
						.FamilyTreeMemberDeceased { opacity: .65; }
							.FamilyTreeMemberDeceased .ContactPhoto { filter: grayscale(1); }
						.FamilyTreeMemberEdit { position: absolute; top: .25rem; right: .4rem; font-size: .8rem; color: var(--bs-secondary-color); }
						.FamilyTreeMemberName { margin-top: .35rem; font-weight: bold; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
						.FamilyTreeMemberRole { font-size: .8rem; font-style: italic; color: var(--bs-secondary-color); }
						.FamilyTreeMemberLifeDates { font-size: .75rem; color: var(--bs-secondary-color); }
/* Zusatzinfos: am Desktop als Symbol mit Tooltip (DesktopOnly), auf dem Handy ohne Hover als Text (MobileInfo).
   Eigene Klassen statt d-none/d-md-*, weil deren !important die visible-Bindung von Knockout überstimmen würde. */
.MobileInfo { display: none; }
/* Icon vor einer Angabe nur in der Kartenansicht, am Desktop steht die Spaltenüberschrift darüber */
.MobileIcon { display: none; }
@media (max-width: 767.98px) {
	/* Handy: Karten und Seitenrand kompakter */
	:root { --lh-floating-padding-y: .9rem; --lh-card-body-margin: .5rem; }
	.card { --bs-card-spacer-y: .5rem; --bs-card-spacer-x: .5rem; --bs-card-cap-padding-x: .6rem; }
	.Content { padding: 4px 6px 8px 6px; }
	/* Handy: Filter über die volle Breite, Anzahl und Buttons darunter; nur der erste Filter ist ohne Aufklappen sichtbar */
	.ListToolbar { flex-wrap: wrap; }
		.ListToolbarFilters { flex-basis: 100%; }
			:is(.ListToolbarFilters, .ListToolbarRow) > :is(.form-control, .form-select, .input-group) { flex: 1 1 100%; width: 100%; }
				:is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-control, :is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-control.ListToolbarNumber { flex: 1 1 auto; width: 1%; min-width: 0; }
				/* Bereichsfilter mit Vorauswahl (Datum): Auswahl in eigener Zeile, Von/Bis darunter */
				:is(.ListToolbarFilters, .ListToolbarRow) > .input-group:has(> .form-select) { flex-wrap: wrap; }
					:is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-control[type="date"] { min-width: 7.5rem; }
					:is(.ListToolbarFilters, .ListToolbarRow) > .input-group > .form-select { flex: 1 1 auto; }
			/* Der erste Filter (meist die Suche) teilt sich die Zeile mit dem Button "Filter" */
			.ListToolbarFilters > :first-child:not(.ListToolbarRow), .ListToolbarFilters > .ListToolbarRow:first-child > :first-child { flex: 1 1 0; min-width: 0; }
			.ListToolbarFilterToggle { display: inline-block; flex: 0 0 auto; }
			.ListToolbar:not(.ListToolbarOpen) .ListToolbarCollapsible { display: none !important; }
		.ListToolbarActions { flex: 1 1 100%; min-width: 0; margin-left: 0; flex-wrap: wrap; }
			.ListToolbarActions .badge { white-space: normal; text-align: left; }
		/* Neu-Button bzw. Icon-Knöpfe mit Klasse ListToolbarAdd (z. B. Queue leeren auf den Hintergrundprozessen): stehen rechts neben "Filter" in der Zeile der Suche.
		   Filter und Aktionen lösen sich dafür auf (display: contents), ihre Elemente ordnen sich direkt in der Leiste: Suche, Filter, Neu, darunter je Zeile die aufgeklappten Filter (ohne eigenes Umbruch-Element, das leer eine zusätzliche Zeile samt Abstand erzeugen würde) */
		.ListToolbar:has(> .ListToolbarActions > .ListToolbarAdd) > :is(.ListToolbarFilters, .ListToolbarActions) { display: contents; }
			.ListToolbar:has(> .ListToolbarActions > .ListToolbarAdd) > .ListToolbarFilters > :not(:first-child, .ListToolbarFilterToggle) { flex-basis: 100%; }
			.ListToolbar:has(> .ListToolbarActions > .ListToolbarAdd) > .ListToolbarFilters > * { order: 3; }
			.ListToolbar:has(> .ListToolbarActions > .ListToolbarAdd) > .ListToolbarActions > * { order: 4; }
			.ListToolbar:has(> .ListToolbarActions > .ListToolbarAdd) > .ListToolbarFilters > :is(:first-child, .ListToolbarFilterToggle), .ListToolbar:has(> .ListToolbarActions > .ListToolbarAdd) > .ListToolbarActions > .ListToolbarAdd { order: 1; flex: 0 0 auto; }
			/* Mindestbreite der Suche: Weitere Aktionen (Knöpfe mit Text) rutschen in die nächste Zeile, statt die Suche zusammenzudrücken */
			.ListToolbar:has(> .ListToolbarActions > .ListToolbarAdd) > .ListToolbarFilters > :first-child { flex: 1 1 0; min-width: 8rem; }
		/* Nur ein Filter und daneben nur Symbol-Knöpfe (z. B. Format und Flagge in der Event-Auswertung): alles in einer Zeile statt die Knöpfe verloren darunter */
		.ListToolbar:has(> .ListToolbarFilters > :only-child):not(:has(> .ListToolbarActions > :not(.btn[aria-label]))) { flex-wrap: nowrap; }
			.ListToolbar:has(> .ListToolbarFilters > :only-child):not(:has(> .ListToolbarActions > :not(.btn[aria-label]))) > .ListToolbarFilters { flex: 1 1 0; }
			.ListToolbar:has(> .ListToolbarFilters > :only-child):not(:has(> .ListToolbarActions > :not(.btn[aria-label]))) > .ListToolbarActions { flex: 0 0 auto; }
	/* Edit-Masken: Button-Leiste (Speichern usw.) bleibt unten sichtbar, solange die Karte im Bild ist */
	.card-footer:not(.NotSticky) { position: sticky; bottom: 0; z-index: 20; background-color: #f7f7f7; box-shadow: 0 -2px 6px rgba(0, 0, 0, .08); }
	/* Button-Texte wie „Änderungen verwerfen“ nicht umbrechen; reicht der Platz nicht, rutscht der ganze Button in die nächste Zeile */
	.card-footer .btn { white-space: nowrap; }
	/* Eingebettete Inhalte (z. B. Trailer) nicht breiter als der Bildschirm */
	.Content :is(iframe, video) { max-width: 100%; }
	.DesktopOnly { display: none !important; }
	/* nur in der Kartenansicht fett (der Titel, MobileTitle, ist es ohnehin; z. B. der Betreff in einer anderen Zelle) */
	.table.MobileCards .MobileBold { font-weight: bold; }
	/* nur in der Kartenansicht dezent (kursiv, grau), z. B. ein Status unter dem Titel */
	.table.MobileCards .MobileSubtle { font-style: italic; color: var(--bs-secondary-color); }
	/* Zelle als letzte Zeile der Karte, unter den Meta-Angaben (z. B. Anbieter-Logos) */
	.table.MobileCards > tbody > tr > .MobileLast { order: 6; flex: 1 1 100%; margin-top: 3px; }
	/* Meta-Angabe ohne vorangestellten Trenner "·" (z. B. wenn ein Icon die Angabe schon absetzt) */
	.table.MobileCards > tbody > tr > .MobileMeta.MobileNoSeparator::before { content: none !important; }
	/* Zelle oben rechts in der Karte, auf Höhe des Titels (z. B. ein Typ-Badge); der Titel macht ihr Platz */
	.table.MobileCards > tbody > tr:has(> .MobileCorner) { padding-right: 4.5rem; }
	.table.MobileCards > tbody > tr > .MobileCorner { position: absolute; top: .5rem; right: .375rem; margin: 0; }
	/* Zelle rechts, vertikal mittig in der Karte (z. B. ein Löschen-Icon); ist sie leer (z. B. keine Fehler), behält die Karte die volle Breite */
	.table.MobileCards > tbody > tr:has(> .MobileMiddleRight:not(:empty)) { padding-right: 2.75rem; }
	.table.MobileCards > tbody > tr > .MobileMiddleRight { position: absolute; top: 50%; right: .375rem; transform: translateY(-50%); margin: 0; }
		.table.MobileCards > tbody > tr > .MobileMiddleRight:empty { display: none !important; }
	/* Aktionsleiste rechts: mehrere Knöpfe untereinander am rechten Rand der Karte (Test, E-Mails ablegen); die Karte ist ohnehin hoch genug */
	.table.MobileCards > tbody > tr:has(> .MobileActions) { padding-right: 3rem; min-height: 6.5rem; }
	.table.MobileCards > tbody > tr > .MobileActions { position: absolute; top: .5rem; right: .375rem; display: flex; flex-direction: column; gap: .25rem; margin: 0; min-width: 0; }
	/* alles unter dem Titel eine Stufe kleiner (Klasse MobileSmallDetails an der Tabelle) */
	.table.MobileCards.MobileSmallDetails > tbody > tr > :not(.MobileTitle, .MobileCheck, .MobileActions) { font-size: .8rem; }
	/* Karten, die auf dem Handy eingeklappt sind (Klasse MobileCollapsed); der Kopf klappt sie auf */
	.card.MobileCollapsible > .card-header { cursor: pointer; }
	.card.MobileCollapsible.MobileCollapsed > :not(.card-header) { display: none; }
	.card.MobileCollapsible.MobileCollapsed > .card-header { border-bottom: 0; }
	.MobileInfo { display: block; font-size: .8rem; font-style: italic; }
	.table.MobileCards .MobileIcon { display: inline-block; width: 1.25em; margin-right: .25rem; text-align: center; color: var(--bs-secondary-color); }
	/* Meta-Angaben untereinander statt mit · in einer Zeile (Klasse MobileStackedMeta an der Tabelle, z. B. Turnus und Fälligkeit der Aufgaben) */
	.table.MobileCards.MobileStackedMeta > tbody > tr > .MobileMeta { flex-basis: 100%; }
		.table.MobileCards.MobileStackedMeta > tbody > tr > .MobileMeta::before { content: none !important; }
		.MobileMeta .MobileInfo { display: inline; }
	/* Benutzer: der Knopf "Rollen zuweisen" mittig rechts neben den untereinander stehenden Angaben */
	.table.MobileCards.UsersTable > tbody > tr { padding-right: 3.5rem; }
	.table.MobileCards.UsersTable > tbody > tr > .MobileStatus { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); margin: 0; }
	/* Status einer Zeile (Haken oder Warndreieck, z. B. Datei- und Ordnerlisten): rechts vertikal mittig */
	.table.MobileCards > tbody > tr:has(> .ListStatus) { padding-right: 2.5rem; }
	.table.MobileCards > tbody > tr > .ListStatus { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); margin: 0; }
	/* Lange Texte in der Karte auf zwei Zeilen kürzen */
	.table.MobileCards .MobileClamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	/* Tabellen ohne Kartenansicht: nur an Wortgrenzen umbrechen, zu breite Tabellen scrollen seitlich */
	.table tbody tr td { overflow-wrap: break-word; }
	:is(.card-text, .tab-pane):has(> .table:not(.MobileCards)) { overflow-x: auto; }
	/* Kartenansicht (Tabelle mit Klasse MobileCards, Spalteneigenschaft mobile in list-table.js): je Zeile eine Karte
	   1. Zeile: Titel links, Wert rechts; dann volle Zeilen; unten Meta-Angaben (mit · getrennt) links, Status-Symbole rechts; Auswahl-Checkbox links daneben */
	/* Block statt Tabellen-Layout: Sonst bestimmen lange, nicht trennbare Wörter (Pfade) die Mindestbreite und die Karten werden breiter als der Bildschirm */
	.table.MobileCards, .table.MobileCards > tbody, .table.MobileCards > thead { display: block; }
	/* Zeile "Es wurden keine … gefunden" (emptyText in list-table.js) über die ganze Breite, sonst endet ihre Linie nach dem Text */
	.table.MobileCards > thead > tr:not(.ListTableHeader), .table.MobileCards > thead > tr:not(.ListTableHeader) > td { display: block; }
	/* letzte Tabelle der Karte ohne Bootstrap-Abstand darunter, sonst bleibt unter der letzten Karte mehr Platz als über der ersten */
	.table.MobileCards:last-child { margin-bottom: 0; }
	.table.MobileCards > tbody > tr > * { min-width: 0; overflow-wrap: anywhere; }
	.table.MobileCards > tbody > tr { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; padding: .5rem .375rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
		.table.MobileCards > tbody > tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, .05); }
		.table.MobileCards > tbody > tr:has(> .MobileCheck) { padding-left: 2rem; }
		.table.MobileCards > tbody > tr > * { display: block; padding: 0; border: 0; box-shadow: none; background-color: transparent; }
		/* Titel in natürlicher Breite, damit z. B. Vor- und Nachname zusammen stehen; der Wert rückt per margin-left: auto nach rechts */
		.table.MobileCards :is(.MobileTitle) { order: 1; flex: 0 1 auto; min-width: 0; font-weight: bold; }
			/* mehrere Titel-Zellen (Vor- und Nachname) nur mit Wortabstand statt der Spaltenlücke */
			.table.MobileCards > tbody > tr > .MobileTitle + .MobileTitle { margin-left: -.25rem; }
			/* ein einzelner Titel neben einem Wert (z. B. Betrag) bricht in sich um, damit der Wert in der ersten Zeile rechts daneben bleibt */
			.table.MobileCards > tbody > tr:has(> .MobileValue):not(:has(> .MobileTitle ~ .MobileTitle)) > .MobileTitle { flex: 1 1 0; }
			/* fett nur zur Unterscheidung von weiteren Angaben; steht der Titel allein (nur mit Status, Bild oder Häkchen), ist er normal */
			.table.MobileCards > tbody > tr:not(:has(> :is(.MobileValue, .MobileFull, .MobileMeta, .MobileLast))) > .MobileTitle,
			.table.MobileCards > tbody > tr:not(:has(> :is(.MobileValue, .MobileFull, .MobileMeta, .MobileLast))) > .MobileTitle .MobileBold { font-weight: normal; }
		/* Meta-Angaben und Status beginnen in einer neuen Zeile (ohne Meta-Angaben bleibt der Status neben dem Titel) */
		.table.MobileCards > tbody > tr:has(> .MobileMeta)::after { content: ""; order: 3; flex-basis: 100%; }
		.table.MobileCards .MobileValue { order: 2; margin-left: auto; white-space: nowrap; font-weight: bold; text-align: right !important; }
		.table.MobileCards .MobileFull { order: 3; flex: 1 1 100%; text-align: left !important; }
		.table.MobileCards .MobileMeta { order: 4; flex: 0 1 auto; font-size: .8rem; }
		/* alles unter dem fetten Titel kursiv und kleiner */
		.table.MobileCards > tbody > tr > :is(.MobileFull, .MobileMeta, .MobileLast) { font-style: italic; font-size: .8rem; }
			/* Trenner nur nach einer sichtbaren Meta-Angabe (Zellen, deren Inhalte alle ausgeblendet oder leer sind, fallen weg, z. B. Häkchen-Spalten ohne Häkchen; Bilder und Icons zählen als Inhalt) */
			.table.MobileCards > tbody > tr > .MobileMeta:not(:has(> *):not(:has(> :not([style*="display: none"]):is(:not(:empty), img, i, svg, input)))) ~ .MobileMeta::before { content: "· "; }
		.table.MobileCards .MobileStatus { order: 5; flex: 0 0 auto; min-width: 2rem; text-align: center !important; }
			.table.MobileCards > tbody > tr > :not(.MobileStatus) + .MobileStatus { margin-left: auto; }
			/* ohne den Bearbeiten-Link: den blendet die Regel zu fa-edit unten aus, die Zeile selbst ist der Link */
			.table.MobileCards > tbody > tr > .MobileStatus :is(a:not(:has(> .fa-edit)), [data-bind*="click"]) { display: inline-block; padding: .25rem .4rem; }
		.table.MobileCards > tbody > tr > .MobileCheck { position: absolute; left: .5rem; top: .5rem; }
		/* Bild (z. B. Poster) links neben dem Inhalt; die Karte ist mindestens so hoch wie das Bild */
		.table.MobileCards > tbody > tr:has(> .MobileImage) { padding-left: calc(var(--lh-card-image-width) + .875rem); min-height: calc(var(--lh-card-image-width) * 1.5 + 1rem); align-content: flex-start; }
		.table.MobileCards > tbody > tr > .MobileImage { position: absolute; left: .375rem; top: .5rem; width: var(--lh-card-image-width); }
			.table.MobileCards > tbody > tr > .MobileImage > :is(img, .MobileImagePlaceholder) { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; }
			.table.MobileCards > tbody > tr > .MobileImage > .MobileImagePlaceholder { display: flex; align-items: center; justify-content: center; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
			/* Brettspiel-Schachteln: quadratisch und ohne Zuschnitt */
			.table.MobileCards > tbody > tr > .MobileImage > .BoardGameThumbnail { height: auto; aspect-ratio: 1; object-fit: contain; }
			.table.MobileCards > tbody > tr:has(> .MobileImage > .BoardGameThumbnail) { min-height: calc(var(--lh-card-image-width) + 1rem); }
			/* Bilder der Übungen: Querformat wie in der Übungsdatenbank, ohne Zuschnitt */
			.table.MobileCards > tbody > tr > .MobileImage > .TrainingExerciseThumbnail { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
			/* Kontakte: rundes Profilbild bzw. Initialen vertikal mittig, Name und Kontaktgruppe daneben ebenfalls mittig */
			.table.MobileCards > tbody > tr:has(> .MobileImage .ContactPhoto) { min-height: calc(var(--lh-card-image-width) + 1rem); align-content: center; }
			.table.MobileCards > tbody > tr > .MobileImage:has(.ContactPhoto) { top: 50%; transform: translateY(-50%); }
				.table.MobileCards > tbody > tr > .MobileImage > span:has(> .ContactPhoto) { display: flex; }
				.table.MobileCards > tbody > tr > .MobileImage .ContactPhoto { width: var(--lh-card-image-width) !important; height: var(--lh-card-image-width) !important; font-size: 1.1rem !important; }
			/* Anzahl der Partien oben rechts: nur so viel Platz wie das Badge braucht */
			.table.MobileCards > tbody > tr:has(> .MobileCorner > .BoardGamePlaysBadge) { padding-right: 3rem; }
		.table.MobileCards .MobileHide { display: none !important; }
		/* Häkchen-Spalten mit mobileLabel: Überschrift voranstellen; ohne sichtbares Häkchen (alle Kinder per visible ausgeblendet) fällt die Zelle weg */
		.table.MobileCards > tbody > tr > .MobileLabel::before { content: attr(data-label) " "; }
		.table.MobileCards > tbody > tr > .MobileMeta:not(:has(> *):not(:has(> :not([style*="display: none"]):is(:not(:empty), img, i, svg, input)))) ~ .MobileMeta.MobileLabel::before { content: "· " attr(data-label) " "; }
		.table.MobileCards > tbody > tr > .MobileMeta:has(> *):not(:has(> :not([style*="display: none"]):is(:not(:empty), img, i, svg, input))) { display: none; }
	/* Kopfzeile der Karten: nur das Häkchen "Alle auswählen" (Sammelaktionen); die Überschriften der übrigen Spalten und der Status-Spalten ("OK", #521) entfallen,
	   die Symbole in den Karten sprechen für sich */
	.table.MobileCards > thead > tr.ListTableHeader { display: flex; align-items: flex-end; column-gap: .5rem; padding: 0 .375rem .25rem; }
		/* Ohne Häkchen in der Auswahl-Spalte bleibt nichts zu zeigen */
		.table.MobileCards > thead > tr.ListTableHeader:not(:has(> .MobileCheck input[type=checkbox])) { display: none; }
		.table.MobileCards > thead > tr.ListTableHeader > :not(.MobileCheck) { display: none; }
		.table.MobileCards > thead > tr.ListTableHeader > * { display: block; width: auto !important; padding: 0; border: 0; }
		.table.MobileCards > thead > tr.ListTableHeader > .MobileCheck { display: flex; align-items: center; gap: .5rem; padding-left: .125rem; }
			/* Beschriftung neben dem Häkchen (list-table.js), normale Schrift statt Spaltenüberschrift */
			.table.MobileCards > thead > tr.ListTableHeader > .MobileCheck > .ListTableCheckAllLabel { display: inline; cursor: pointer; font-size: .8125rem; font-weight: normal; letter-spacing: normal; text-transform: none; }
}
/* Bild-Spalten (mobile: 'image') gibt es nur in der Kartenansicht, mit imageOnDesktop (DesktopImage) auch in der Tabelle als kleines Bild (z. B. Poster der Watchlist) */
:root { --lh-card-image-width: 46px; }
@media (min-width: 768px) {
	.table .MobileImage:not(.DesktopImage) { display: none; }
	.table > tbody > tr > .DesktopImage { width: 3.5rem; }
		.table > tbody > tr > .DesktopImage > :is(img, .MobileImagePlaceholder) { display: block; width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; }
		.table > tbody > tr > .DesktopImage > .MobileImagePlaceholder { display: flex; align-items: center; justify-content: center; background-color: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
}
/* Zeilen mit Bearbeiten-Link (fa-edit) sind komplett anklickbar (default.master.aspx.js): Das Icon selbst wird nicht angezeigt,
   die Zeile ist der Link und wird beim Drüberfahren hervorgehoben (ohne Recht blendet Knockout den Link aus, dann ist die Zeile kein Link) */
.table > tbody > tr > td a[href]:has(> .fa-edit) { display: none; }
.table > tbody > tr:has(> td a[href]:not([style*="display: none"]) > .fa-edit) { cursor: pointer; }
	.table > tbody > tr:has(> td a[href]:not([style*="display: none"]) > .fa-edit):hover > td { --bs-table-bg-state: var(--bs-table-hover-bg); }
/* Spalten mit nur dem Bearbeiten-Link (list-table.js setzt EditLinkOnly an Überschrift und Zellen) wären leer; !important, weil die Kartenansicht Zellen und Kopfzeile sonst als block zeigt (die Kopfzeile verschöbe dann die Status-Überschriften gegen die Häkchen) */
.table > * > tr > .EditLinkOnly { display: none !important; }
/* "Alle auswählen" neben dem Häkchen im Kopf (list-table.js) nur in der Kartenansicht, am Desktop steht das Häkchen über der Spalte */
.ListTableCheckAllLabel { display: none; }
@media (max-width: 767.98px) {
	/* Karten: die dann leere Zelle des Icons nimmt keinen Platz weg */
	.table.MobileCards > tbody > tr > td:has(> a[href] > .fa-edit):not(:has(> :not(a))) { display: none !important; }
}
/* Diagramme (charts.js): Chart.js übernimmt die Größe des Containers */
.ChartContainer { position: relative; height: 250px; }
/* ------- Content-Ende ------- */
/* ------- ContentPage-Ende ------- */

/* Dateitypen in den Datei-Untertabellen (#510, getFileTypeIcon in utils.js) */
.FileTypeIcon { width: 1.1em; text-align: center; }
.FileTypePdf { color: #ff6b5e; }
.FileTypeEmail { color: #c6f432; }
.FileTypeWord { color: #7fb3ff; }
.FileTypeExcel { color: #4ade80; }
.FileTypePowerpoint { color: #f5a04a; }
.FileTypeImage { color: #c79bff; }
.FileTypeVideo { color: #f0a6d8; }
.FileTypeAudio { color: #5fd4e8; }
.FileTypeOther { color: var(--lh-text-muted); }

/* ------- MediaFiles-Workflow-Anfang ------- */
/* Bildkachel (#510), gleich auf mediafiles.edit, newmedia und unknownfaces: quadratisch, Auswahl als runder Haken oben links (lime Rahmen), Zustand als
   Streifen unten (grün Ist Ok, rot Fehler, ohne offen), Personen als Zahl unten links, Video oben rechts */
.MediaTile { position: relative; display: block; width: 101px; height: 101px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background-color: var(--bs-tertiary-bg); cursor: pointer; }
	.MediaTile > img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.MediaTile.Selected { border-color: var(--bs-success); }
	.MediaTile.Unselected > img { opacity: .4; }
	.MediaTile.Active { outline: 3px solid #7fb3ff; outline-offset: 1px; }
	.MediaTile.Changed { border-color: var(--bs-danger); border-style: dashed; }
	.MediaTile.Saving > img { opacity: .5; }
.MediaTileCheck { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); background-color: rgba(13, 14, 18, .55); color: transparent; font-size: 11px; line-height: 1; opacity: 0; transition: opacity .15s; }
	.MediaTile:hover .MediaTileCheck, .MediaTile:focus-within .MediaTileCheck, .MediaTile.Selected .MediaTileCheck, .MediaTileSelecting .MediaTileCheck { opacity: 1; }
	.MediaTile.Selected .MediaTileCheck { border-color: var(--bs-success); background-color: var(--bs-success); color: var(--lh-on-accent); }
.MediaTileBar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
	.MediaTile.IsOk .MediaTileBar { background-color: var(--lh-save); }
	.MediaTile.HasErrors .MediaTileBar { background-color: var(--bs-danger); }
.MediaTileBadge { position: absolute; padding: 0 .35rem; border-radius: 999px; font-size: .7rem; line-height: 1.4; background-color: rgba(13, 14, 18, .72); color: var(--bs-body-color); white-space: nowrap; }
	.MediaTileBadge.People { left: 4px; bottom: 7px; }
	.MediaTileBadge.Video { right: 4px; top: 4px; }
	.MediaTileBadge.Rating { right: 4px; bottom: 7px; color: #ffd84a; }
.MediaTile > .spinner-border { position: absolute; top: calc(50% - 1rem); left: calc(50% - 1rem); color: var(--bs-body-color); }
.MediaTile.More { display: flex; align-items: center; justify-content: center; color: var(--lh-text-muted); font-size: .9rem; }
	/* der kleine Spinner beim Aufklappen: Flex zentriert ihn (die absolute Lage oben gilt für den großen, 2rem) */
	.MediaTile.More > .spinner-border { position: static; }
.MediaTileGrid { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Galerie der Mediendateien (#545, mediafiles.aspx): Kacheln über die ganze Breite ab 140 px (auf dem Handy drei je Zeile), ein Klick öffnet die große
   Vorschau, der Haken oben links wählt aus (sichtbar bei Hover, sobald etwas ausgewählt ist und immer auf Touch-Geräten) */
.MediaGalleryGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
	.MediaGalleryGrid .MediaTile { width: auto; height: auto; aspect-ratio: 1; }
	.MediaGalleryGrid .MediaTile > .MediaTileView { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
		.MediaGalleryGrid .MediaTile > .MediaTileView > img { display: block; width: 100%; height: 100%; object-fit: cover; }
	.MediaGalleryGrid .MediaTileCheck { width: 26px; height: 26px; top: 6px; left: 6px; font-size: 13px; cursor: pointer; }
	@media (hover: none) {
		.MediaGalleryGrid .MediaTileCheck { opacity: 1; }
	}
	@media (max-width: 767.98px) {
		.MediaGalleryGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
	}
/* Personen-Filter (#561): die gewählten Personen als Chips in einer Pille der Leiste, "+" ist die Auswahl (searchSelect) ohne eigenen Rahmen */
.MediaFilesPersons { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-height: var(--lh-toolbar-height, 38px); padding: .2rem .25rem .2rem .9rem; border: 1px solid var(--lh-border); border-radius: 999px; background-color: var(--lh-surface); }
.MediaFilesPersonChip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .35rem .1rem .6rem; border-radius: 999px; background-color: var(--lh-surface-hover); color: var(--lh-text); font-size: .8rem; }
	.MediaFilesPersonChip > .btn-close { width: .55rem; height: .55rem; padding: .2rem; background-size: .55rem; }
.ListToolbar .MediaFilesPersons .MediaFilesPersonSelect { flex: 0 0 auto; width: auto; }
	.ListToolbar .MediaFilesPersons .MediaFilesPersonSelect > .form-select { min-height: 30px; width: 2.6rem; padding: 0; border: 0; background-image: none; background-color: transparent; text-align: center; font-weight: 600; color: var(--lh-accent); }
	.MediaFilesPersons .MediaFilesPersonSelect .SearchSelectMenu { min-width: 280px; }
/* Vorschläge der Suche (#561): Personen zum getippten Text, unter dem Feld wie die Liste von searchSelect */
.MediaFilesSearch { position: relative; }
.MediaFilesSuggestions { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 1050; width: 100%; min-width: 280px; }
/* Album (#551): Leiste des geöffneten Albums über der Galerie */
.MediaAlbumBar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .4rem .5rem .4rem .9rem; border: 1px solid var(--bs-border-color); border-radius: 14px; background-color: var(--lh-surface-raised); font-size: .875rem; }
.MediaGalleryGroup { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 1.25rem 0 .6rem; }
	.MediaGalleryGroup:first-child { margin-top: 0; }
.MediaGalleryGroupCheck { width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--lh-text-muted); background: none; color: transparent; font-size: 11px; }
	.MediaGalleryGroupCheck.Selected { border-color: var(--bs-success); background-color: var(--bs-success); color: var(--lh-on-accent); }
/* Leiste der Auswahl (Galerie der Fotos, Buchungen #588): unten in der Karte klebend, über der Leiste der Navigation auf dem Handy */
.SelectionBar { position: sticky; bottom: calc(var(--lh-bottom-bar-height) + .5rem); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; padding: .5rem .5rem .5rem 1rem; border: 1px solid var(--bs-success); border-radius: 16px; background-color: var(--lh-surface-raised); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
	/* trennt die Auswahl-Knöpfe von den Aktionen */
	.SelectionBarDivider { align-self: stretch; width: 1px; margin: .2rem .15rem; background-color: var(--bs-border-color); }
/* große Vorschau (#545, wie auf newmedia.aspx): dunkel über den ganzen Bildschirm, das Bild so groß wie möglich */
.MediaPreview .modal-content { background-color: #000; }
.MediaPreview .modal-header { gap: .5rem; border-bottom: 0; }
.MediaPreviewStage { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
	.MediaPreviewStage > img, .MediaPreviewStage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
	.MediaPreviewStage > .spinner-border { position: absolute; top: calc(50% - 1rem); left: calc(50% - 1rem); color: var(--bs-body-color); }
.MediaPreviewNav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 0; background-color: rgba(13, 14, 18, .6); color: var(--bs-body-color); font-size: 1.2rem; }
	.MediaPreviewNav.Previous { left: .75rem; }
	.MediaPreviewNav.Next { right: .75rem; }
.MediaPreviewTitle { min-width: 0; }
	.MediaPreviewTitle > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
	/* auf dem Handy wischt man, die Pfeile verdecken nur das Bild */
	.MediaPreviewNav { display: none; }
}
/* Reiter "Fotos" eines Kontakts (#545): Einstieg in die Galerie; die neuesten als eine Reihe Kacheln, die Jahre wie die Anlässe (MediaOccasion) */
.ContactPhotosTotal { font-family: var(--lh-font-display); font-weight: 600; font-size: 1.75rem; color: var(--lh-text); margin-right: .35rem; }
.ContactPhotosHeading { margin: 1.25rem 0 .6rem; font-weight: 600; color: var(--lh-text); }
.ContactPhotosStrip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .4rem; }
	.ContactPhotosStrip > .MediaTile { width: auto; height: auto; aspect-ratio: 1; cursor: zoom-in; }
	@media (max-width: 767.98px) {
		.ContactPhotosStrip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	}
.MediaOccasionGrid.ContactPhotosYears { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
	.ContactPhotosYears .MediaOccasionCover { height: 90px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
	.ContactPhotosYears .MediaOccasionCover > img:first-child { grid-row: auto; }
/* Anlässe eines Monatsordners (#545): Kachel mit bis zu drei Vorschaubildern (das erste groß), Titel, Zeitraum und Anzahl */
.MediaOccasionGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.MediaOccasion { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: 16px; background-color: var(--lh-surface-raised); color: var(--bs-body-color); text-decoration: none; }
	.MediaOccasion:hover, .MediaOccasion:focus-visible { border-color: var(--lh-module-color, var(--bs-success)); color: var(--bs-body-color); }
.MediaOccasionCover { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 120px; background-color: var(--bs-tertiary-bg); }
	.MediaOccasionCover > img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
	.MediaOccasionCover > img:first-child { grid-row: span 2; }
	.MediaOccasionCover > img:only-child { grid-column: span 2; }
.MediaOccasionText { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem .75rem; }
.MediaOccasionTitle { font-weight: 600; color: var(--lh-text); }
.MediaOccasionChip { align-self: flex-start; margin-top: .25rem; padding: 0 .5rem; border: 1px solid var(--bs-border-color); border-radius: 999px; font-size: .75rem; color: var(--lh-text-muted); }
.MediaFileActionBar { margin-top: 10px; padding: .5rem .75rem; background-color: #f7f7f7; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
/* mediafiles.edit: Desktop feste Größen; Handy Bild in voller Breite, Stammdaten ohne Innen-Scrollen, Vorschaubilder als waagerechter Streifen, Leiste unten */
.MediaFileViewer { width: 500px; height: 500px; touch-action: pan-y; }
/* Personen taggen (#527): der Monat als Titel im Kopf */
.MediaFilePersonsTitle { font-family: var(--lh-font-display); font-weight: 600; font-size: 1.1rem; }
.MediaFileDataBody { height: 413px; overflow: auto; }
.MediaFileContactsBody { height: 370px; overflow-y: auto; }
/* Personen (#510): eine Liste mit Abschnitten; das Leeren der Suche sitzt im Feld, damit die Karte ihre Breite behält */
.MediaFilePersons { width: 270px; max-width: 100%; }
/* auf dem Handy über die ganze Breite, Suchfeld bündig mit der Liste (#521) */
@media (max-width: 767.98px) {
	.MediaFilePersons { width: 100%; }
		.MediaFilePersons > .card-header > .position-relative { margin-left: -1rem; }
}
.MediaFilePersonsSearch { padding-right: 2.25rem; }
.MediaFilePersonsSearchClear { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); color: var(--lh-text-muted); }
.MediaFileFrameText { color: #7fb3ff; }
.MediaFilePersonsHeading { margin: .5rem 0 .35rem; font-size: .75rem; color: var(--lh-text-muted); }
	.MediaFilePersonsHeading:first-child { margin-top: 0; }
.MediaFileContactsBody .MediaFileFaceSuggestion { margin-bottom: .35rem; }
/* "Wer ist das?" an einem Rahmen (#510) */
.MediaFileFaceMenu { position: fixed; z-index: 1060; width: 280px; max-height: 360px; display: flex; flex-direction: column; gap: .25rem; padding: .5rem; overflow-y: auto; border: 1px solid var(--bs-border-color); border-radius: 14px; background-color: var(--bs-body-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
	.MediaFileFaceMenu .MediaFilePersonsHeading { margin: .25rem .25rem 0; }
	.MediaFileFaceMenu .list-group-item { display: flex; justify-content: space-between; gap: .5rem; border-radius: 8px; border: 0; padding: .4rem .5rem; }
/* Gesichtserkennung (#506): Rahmen um die Gesichter, relativ zum Bild; blau getaggt, lime Vorschlag, grau gestrichelt unbekannt */
.MediaFileFaceFrame { position: relative; width: fit-content; margin: auto; }
.MediaFileFace { position: absolute; border: 2px solid var(--bs-success); border-radius: 6px; cursor: pointer; }
	.MediaFileFace.Highlighted { box-shadow: 0 0 0 4px rgba(198, 244, 50, .35); z-index: 1; }
	.MediaFileFace.Locked { cursor: default; }
	.MediaFileFace > span { position: absolute; left: -2px; bottom: 100%; margin-bottom: 2px; white-space: nowrap; font-size: .75rem; font-weight: 600; padding: 0 .4rem; border-radius: 4px; background-color: var(--bs-success); color: var(--lh-on-accent); }
	.MediaFileFace.Tagged { border-color: #7fb3ff; }
		.MediaFileFace.Tagged > span { background-color: #7fb3ff; color: #0b1420; }
	.MediaFileFace.Unknown { border-style: dashed; border-color: var(--lh-text-muted); }
		.MediaFileFace.Unknown > span { background-color: var(--bs-tertiary-bg); color: var(--lh-text-muted); }
.MediaFileFaceSuggestion { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border: 1px dashed var(--bs-success); border-radius: var(--bs-border-radius); }
@media (max-width: 767.98px) {
	.MediaFileViewer { width: 100%; height: auto; }
		.MediaFileViewer :is(img, video) { max-width: 100%; max-height: 55vh; }
	.MediaFileDataBody { height: auto; overflow: visible; }
	.MediaFileContactsBody { width: auto; height: 40vh; }
	.MediaFileThumbs { flex-wrap: nowrap; overflow-x: auto; }
		.MediaFileThumbs > * { flex: 0 0 auto; width: auto; align-self: center; }
	.MediaFileMobileBar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; background-color: #f7f7f7; border-top: var(--bs-border-width) solid var(--bs-border-color); box-shadow: 0 -2px 6px rgba(0, 0, 0, .08); }
		.MediaFileMobileBar .btn-light { font-size: 1.4rem; line-height: 1; padding: .3rem .9rem; }
	.card-footer .row { row-gap: .5rem; }
}
/* ------- MediaFiles-Workflow-Ende ------- */

/* ------- Faqs-Anfang ------- */
/* Zuerst lesen: hervorgehobene Fragen oben in der Liste, mit Akzent */
.FaqHighlights { display: grid; gap: .5rem; margin-bottom: 1rem; }
.FaqHighlight { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background-color: var(--lh-surface-raised); border: 1px solid rgba(var(--lh-accent-rgb), .45); color: var(--lh-text); text-decoration: none; }
	.FaqHighlight:hover { background-color: var(--lh-surface-hover); color: var(--lh-text); }
	.FaqHighlightIcon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background-color: rgba(var(--lh-accent-rgb), .15); color: var(--lh-accent); font-size: 1.1rem; }
	.FaqHighlightText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
	.FaqHighlightLabel { color: var(--lh-accent); font-size: .8rem; }
	.FaqHighlightQuestion { font-size: 1.02rem; }
	.FaqHighlightArrow { flex: 0 0 auto; color: var(--lh-text-muted); }
/* Themen-Chips: am Desktop umbrechend, am Handy eine Zeile zum Wischen */
.FaqChips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: .5rem; }
.FaqChip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background-color: var(--lh-surface); border: 1px solid var(--lh-border); color: var(--lh-text-body); font-size: .9rem; white-space: nowrap; }
	.FaqChip:hover { border-color: var(--lh-text-muted); }
	.FaqChipCount { color: var(--lh-text-muted); font-variant-numeric: tabular-nums; }
	.FaqChip.FaqChipActive { background-color: var(--lh-accent); border-color: var(--lh-accent); color: var(--lh-on-accent); }
		.FaqChip.FaqChipActive .FaqChipCount { color: var(--lh-on-accent); }
	.FaqChip.FaqChipEmpty:not(.FaqChipActive) { opacity: .45; }
@media (max-width: 767.98px) {
	.FaqChips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
		.FaqChips::-webkit-scrollbar { display: none; }
}
/* Fragen: schlanke Zeilen mit Trennlinie, Thema als Zwischenüberschrift */
.FaqGroup { scroll-margin-top: 80px; }
.FaqGroupTitle { margin: 1.5rem 4px .25rem; color: var(--lh-text-muted); font-family: var(--bs-body-font-family); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.FaqRow { border-top: 1px solid var(--lh-border-subtle); scroll-margin-top: 80px; }
	.FaqRowHead { display: flex; align-items: center; gap: .5rem; }
.FaqToggle { flex: 1 1 auto; display: flex; align-items: baseline; gap: .75rem; padding: 12px 4px; border: 0; background: none; color: var(--lh-text); font-size: 1rem; text-align: left; }
.FaqChevron { flex: 0 0 auto; color: var(--lh-text-muted); font-size: .8rem; transition: transform .15s; }
	.FaqRowOpen .FaqChevron { transform: rotate(90deg); color: var(--lh-accent); }
.FaqEdit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--lh-text-muted); }
	.FaqEdit:hover { background-color: var(--lh-surface-hover); color: var(--lh-accent); }
.FaqAnswer { padding: 0 4px 14px 28px; }
	.FaqAnswer .ql-editor { padding: 0; }
/* Quill rückt Listen selbst ein, am Handy reicht das */
@media (max-width: 767.98px) {
	.FaqAnswer { padding-left: 4px; }
}
.FaqCopyLink { margin-top: .5rem; padding: 0; border: 0; background: none; color: var(--lh-text-muted); font-size: .85rem; }
	.FaqCopyLink:hover { color: var(--lh-accent); }
.FaqEmpty { padding: 1.5rem 4px; color: var(--lh-text-muted); }
.FaqPage mark { padding: 0 2px; border-radius: 3px; background-color: rgba(var(--lh-accent-rgb), .25); color: var(--lh-text); }
/* ------- Faqs-Ende ------- */

/* ------- Meals-Anfang ------- */
/* Ernährungsplan (#518): Kopf in einer Zeile; bis lg ein Tag pro Bildschirm zum Wischen mit den Wochentagen darüber, ab xl die Woche als Raster */
.MealHead { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.MealRoundButton { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.MealHeadTitle { flex: 1; min-width: 0; text-align: center; }
.MealHeadWeek { font-family: var(--lh-font-display); font-weight: 600; font-size: 1.1rem; color: var(--lh-text); line-height: 1.2; }
.MealHeadSub { font-size: .8rem; color: var(--lh-text-muted); }
.MealTemplateMenu .dropdown-item-text { max-width: 20rem; white-space: normal; }
.MealEmptyWeek { padding: .875rem 1rem; margin-bottom: .75rem; border-radius: var(--lh-radius-card); border: 1px solid rgba(var(--lh-accent-rgb), .3); background-color: rgba(var(--lh-accent-rgb), .06); }
/* Wochentage mit Planungsstand: grün alles geplant, orange Mahlzeiten offen, grau nichts geplant */
.MealDayChips { display: flex; gap: .3rem; margin-bottom: .75rem; }
.MealDayChip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: .35rem 0 .3rem; line-height: 1.15; border-radius: 1rem; border: 1px solid var(--lh-border); background: transparent; color: var(--lh-text-body); font-size: .8rem; font-weight: 600; }
.MealDayChipNumber { font-family: var(--lh-font-display); font-size: 1rem; }
.MealDayChipToday { border-color: var(--lh-accent); }
.MealDayChipSelected { background-color: var(--lh-accent); border-color: var(--lh-accent); color: var(--lh-on-accent); }
.MealDayChipDot { width: 5px; height: 5px; border-radius: 50%; margin-top: 3px; }
.MealDayChipDotDone { background-color: var(--lh-accent); }
.MealDayChipDotOpen { background-color: var(--lh-orange); }
.MealDayChipDotEmpty { background-color: var(--lh-border); }
.MealDayChipSelected .MealDayChipDot { background-color: var(--lh-on-accent); }
.MealWeek { display: flex; align-items: flex-start; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.MealWeek::-webkit-scrollbar { display: none; }
.MealDay { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }
.MealGrid { display: none; }
@media (min-width: 1200px) {
	.MealDayChips, .MealWeek { display: none; }
	.MealGrid { display: block; overflow: hidden; }
	.MealHeadTitle { flex: 0 1 auto; min-width: 15rem; }
	.MealHead > .MealRoundButton:nth-of-type(2) { margin-right: auto; }
}
.MealDayToday { border-color: rgba(var(--lh-accent-rgb), .6); }
.MealDayHead { display: flex; align-items: center; gap: .5rem; padding: .875rem .75rem .25rem 1rem; }
.MealDayHead h2 { margin: 0; font-family: var(--lh-font-display); font-size: 1.15rem; font-weight: 600; color: var(--lh-text); }
/* Nährwerte: kcal als Ring, Makros als schmale Balken, gegessen kräftig, noch geplant blass bzw. schraffiert */
.MealNutrition { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem .75rem; }
.MealRing { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.MealRing svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.MealRing circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.MealRing .MealRingTrack { stroke: var(--lh-surface-hover); }
.MealRing .MealRingPlanned { stroke: rgba(var(--lh-accent-rgb), .3); }
.MealRing .MealRingEaten { stroke: var(--lh-accent); }
.MealRingText { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--lh-font-display); font-weight: 700; font-size: 1.2rem; color: var(--lh-text); line-height: 1.1; }
.MealRingText small { font-family: var(--bs-body-font-family); font-weight: 500; font-size: .7rem; color: var(--lh-text-muted); }
.MealMacros { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.MealMacroLabel { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--lh-text-muted); margin-bottom: .2rem; }
.MealMacroLabel > span:first-child { color: var(--lh-text-body); }
.MealMacroLabel b { color: var(--lh-text); font-weight: 600; }
.MealTotalBar { height: 6px; }
.MealBarFat { background-color: var(--lh-pink); }
.MealWater { display: flex; align-items: center; gap: .75rem; margin: 0 1rem .875rem; padding: .6rem .75rem; border-radius: var(--lh-radius-field); background-color: var(--lh-surface-raised); }
.MealNutritionPills { display: flex; flex-wrap: wrap; gap: .375rem; padding: .25rem 1rem .75rem; }
.MealNutritionPills span { font-size: .78rem; color: var(--lh-text-muted); background-color: var(--lh-surface-raised); border-radius: 999px; padding: .25rem .65rem; }
.MealCooking { display: flex; align-items: flex-start; margin: 0 1rem .75rem; padding: .5rem .75rem; border-radius: var(--lh-radius-field); background-color: rgba(255, 184, 107, .1); color: var(--lh-orange); font-size: .875rem; }
.MealCookingDone { opacity: .55; }
/* Mahlzeiten als Zeilen: Uhrzeit links, Einträge zum Abhaken (Kreis) und Bearbeiten (Text) */
.MealSlotRow { display: flex; gap: .75rem; padding: .75rem .5rem .75rem 1rem; border-top: 1px solid var(--lh-border-subtle); }
.MealSlotEmpty { align-items: center; }
.MealSlotCurrent { background-color: rgba(var(--lh-accent-rgb), .06); box-shadow: inset 3px 0 0 var(--lh-accent); }
.MealSlotTime { width: 2.75rem; flex-shrink: 0; font-family: var(--lh-font-display); font-weight: 600; font-size: .82rem; color: var(--lh-text-muted); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.MealSlotEmpty .MealSlotTime { padding-top: 0; }
.MealSlotName { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lh-text-muted); }
.MealSlotCurrent .MealSlotTime, .MealSlotCurrent .MealSlotName { color: var(--lh-accent); }
.MealSlotNothing { font-size: .82rem; color: var(--lh-text-muted); opacity: .75; }
.MealAddButton { width: 2.25rem; height: 2.25rem; padding: 0; flex-shrink: 0; color: var(--lh-accent); }
.MealEntryRow { display: flex; align-items: flex-start; gap: .625rem; margin-top: .5rem; }
.MealCheck { width: 1.5rem; height: 1.5rem; flex-shrink: 0; padding: 0; border-radius: 50%; border: 2px solid var(--lh-text-muted); background: transparent; color: transparent; font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; }
.MealCheck:hover:not(:disabled) { border-color: var(--lh-accent); color: rgba(var(--lh-accent-rgb), .6); }
.MealEntryEaten .MealCheck { background-color: var(--lh-accent); border-color: var(--lh-accent); color: var(--lh-on-accent); }
.MealEntryOptional .MealCheck { border-style: dashed; }
.MealCheckSmall { width: 1.1rem; height: 1.1rem; font-size: .55rem; margin-top: .1rem; }
.MealEntryBody { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; border: 0; background: transparent; text-align: start; color: inherit; }
.MealEntryBody:disabled { opacity: 1; }
.MealEntryText { font-size: .95rem; font-weight: 500; color: var(--lh-text); line-height: 1.35; }
.MealEntryOptional .MealEntryText { color: var(--lh-text-body); }
.MealEntryEaten .MealEntryText { color: var(--lh-text-muted); }
.MealEntryMeta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .375rem; margin-top: .15rem; font-size: .75rem; color: var(--lh-text-muted); }
.MealPill { border: 1px solid var(--lh-border); border-radius: 999px; padding: 0 .45rem; font-weight: 600; font-size: .7rem; color: var(--lh-text-body); }
.MealPillDashed { border-style: dashed; }
/* Desktop: Raster mit einer Spalte je Tag */
.MealGridInner { display: grid; grid-template-columns: 8.5rem repeat(7, minmax(0, 1fr)); }
.MealGridCorner { padding: .75rem 1rem; font-size: .75rem; color: var(--lh-text-muted); display: flex; align-items: flex-end; }
.MealGridDay { padding: .75rem .625rem; border-left: 1px solid var(--lh-border-subtle); }
.MealGridDayTitle { font-family: var(--lh-font-display); font-weight: 600; color: var(--lh-text); }
.MealGridDayState { font-size: .72rem; color: var(--lh-text-muted); margin: .2rem 0 .3rem; }
.MealGridCooking { margin-top: .4rem; font-size: .75rem; color: var(--lh-orange); }
.MealGridLabel { display: flex; flex-direction: column; gap: .1rem; padding: .625rem 1rem; border-top: 1px solid var(--lh-border-subtle); }
.MealGridLabel .MealSlotTime { width: auto; padding: 0; }
.MealGridCell { display: flex; flex-direction: column; gap: .375rem; padding: .5rem .625rem; border-top: 1px solid var(--lh-border-subtle); border-left: 1px solid var(--lh-border-subtle); min-width: 0; }
.MealGridToday { background-color: rgba(var(--lh-accent-rgb), .04); }
.MealGridDay.MealGridToday { box-shadow: inset 0 3px 0 var(--lh-accent); }
.MealGridDay.MealGridToday .MealGridDayTitle { color: var(--lh-accent); }
.MealGridEntry { display: flex; align-items: flex-start; gap: .375rem; }
.MealGridEntry .MealEntryBody { font-size: .82rem; font-weight: 500; color: var(--lh-text); line-height: 1.3; display: block; overflow-wrap: anywhere; }
.MealGridEntry.MealEntryEaten .MealEntryBody { color: var(--lh-text-muted); }
.MealGridEntry.MealEntryOptional .MealEntryBody { font-style: italic; }
.MealGridAdd { align-self: flex-start; padding: 0 .4rem; border: 1px dashed transparent; border-radius: .5rem; background: transparent; color: var(--lh-text-muted); font-size: .72rem; opacity: 0; }
.MealGridCell:hover .MealGridAdd, .MealGridAdd:focus-visible, .MealGridAddEmpty { opacity: 1; }
.MealGridAddEmpty { border-color: var(--lh-border); padding: .15rem .5rem; }
.MealGridAdd:hover:not(:disabled) { color: var(--lh-accent); border-color: rgba(var(--lh-accent-rgb), .5); }
.MealGridNone { font-size: .75rem; color: var(--lh-text-muted); opacity: .6; }
/* ------- Meals-Ende ------- */

/* ------- Einkaufslisten-Anfang ------- */
/* große Flächen zum Abhaken im Laden am Handy */
.ShoppingListCard:hover { border-color: var(--bs-success); }
/* Kopf in einer Zeile: der Name nimmt den restlichen Platz, der Laden höchstens 40 %, das Menü bleibt rechts */
.ShoppingListName { flex: 1 1 auto; min-width: 0; max-width: 320px; }
.ShoppingListHeader > .dropdown { flex: 0 0 auto; margin-left: auto; }
.ShoppingListHeader > .ShoppingListShop { flex: 0 1 auto; min-width: 0; max-width: 40%; margin-left: 0; position: relative; }
/* echtes select unsichtbar über dem Logo: ein Tipp öffnet die Auswahl des Geräts (Android, iOS) */
	.ShoppingListShop > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
	.ShoppingListShop.disabled > :not(select) { opacity: var(--bs-btn-disabled-opacity); }
	.ShoppingListShop > .ShopLogo { display: flex; width: 32px; height: 32px; }
	.ShoppingListHeader > .ShoppingListShop:has(> .ShopLogo) { flex-shrink: 0; }
/* Knopf mit echtem select unsichtbar darüber (Auf andere Liste): die Auswahl des Geräts statt eines Menüs */
.NativeSelectButton { position: relative; }
	.NativeSelectButton > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
	.NativeSelectButton > select:disabled { cursor: default; }
/* Logos der Läden (data-URI von der Website): auf hellem Grund, weil viele Logos für weiße Seiten gemacht sind; leicht vergrößert und an den Ecken
   abgeschnitten, damit ein schmaler weißer Rahmen im Bild (z. B. bei Lidl) nicht als Rand stehen bleibt */
.ShopLogo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; color: var(--lh-text-muted); }
	.ShopLogo img { width: 100%; height: 100%; object-fit: contain; background: #fff; transform: scale(1.1); }
.ShopLogo.ShopLogoSmall { width: 20px; height: 20px; border-radius: 4px; }
.ShopsCard { max-width: 640px; }
.ShoppingRowIcon.ShoppingRowIconSmall { width: 28px; height: 28px; font-size: .8rem; }
/* Eine Zeile "Wir brauchen …" wie die Suche im Menü */
.ShoppingSearch { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 18px; border-radius: 26px; background-color: var(--lh-surface); border: 1px solid var(--lh-border); color: var(--lh-text-muted); }
	.ShoppingSearch:focus-within { border-color: var(--lh-accent); color: var(--lh-accent); }
	.ShoppingSearch > input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--lh-text); font-size: 1.05rem; outline: none; }
/* Einträge und Treffer: große Zeilen mit Kategorie-Symbol im farbigen Kreis (--lh-cat-color aus FoodCategoryTypeDT.Color), rechts Haken bzw. Plus */
.ShoppingRow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 4px; border-bottom: 1px solid var(--lh-border-subtle); cursor: pointer; }
	.ShoppingRowIcon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background-color: color-mix(in srgb, var(--lh-cat-color) 22%, transparent); color: var(--lh-cat-color); font-size: 1.1rem; }
	.ShoppingRowText { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; }
	.ShoppingRowAction { flex: 0 0 auto; color: var(--lh-accent); font-size: 1.6rem; line-height: 1; }
	.ShoppingRowCheck { flex: 0 0 auto; width: 26px; height: 26px; border: 2px solid var(--lh-text-muted); border-radius: 6px; }
	.ShoppingRow:hover .ShoppingRowCheck { border-color: var(--lh-accent); }
/* zuletzt abgehakt: gedämpft, das Plus setzt den Eintrag wieder auf die Liste */
.ShoppingRowsChecked .ShoppingRowText { color: var(--lh-text-muted); }
.ShoppingRowsChecked .ShoppingRowIcon { opacity: .6; }
.ShoppingSectionTitle { margin: 1.5rem 4px .25rem; font-weight: 600; }
/* Reihenfolge per Drag & Drop (Binding sortableList in javascript/sortable-list.js, z. B. Kategorien eines Ladens, Zutaten eines Rezepts): die anderen Einträge weichen aus,
   der gezogene schwebt darüber */
.SortableItem { position: relative; user-select: none; transition: transform 0.18s ease, background-color 0.9s ease; }
.SortableEnabled .SortableItem { cursor: grab; }
.SortableHandle { display: none; touch-action: none; color: var(--bs-secondary-color); padding: 0.25rem 0.5rem; margin-left: -0.5rem; }
	.SortableEnabled .SortableHandle { display: inline-block; }
	.SortableHandle:hover { color: var(--bs-body-color); }
.SortableItem.SortableDragging { z-index: 10; cursor: grabbing; transition: box-shadow 0.18s ease; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25); background-color: var(--bs-tertiary-bg); }
	.SortableDragging .SortableHandle { color: var(--bs-success); }
.SortableItem.SortableDropped { transition: none; background-color: var(--bs-success-bg-subtle); }
/* ------- Einkaufslisten-Ende ------- */

/* ------- Quill-Editor-Anfang ------- */
.ql-container {
	color: black;
}
/* Leseansicht von Quill-Inhalten (siehe convertQuillDeltaToHtml): ohne Editor-Abstände und -Höhe */
.ql-editor.QuillReadOnly { padding: 0; height: auto; overflow-y: visible; }
.ql-editor.QuillReadOnly > * { cursor: auto; }
/* ------- Quill-Editor-Ende ------- */

/* ------- Bootstrap-Anfang ------- */
.bg-success { background-color: #088b08 !important; }
/* ------- Bootstrap-Ende ------- */

/* ------- jQuery-UI-Tooltip-Anfang ------- */
/* Das jQuery-UI-CSS ist nicht eingebunden; Aussehen angelehnt an den Bootstrap-Tooltip. */
.ui-helper-hidden-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ui-tooltip { position: absolute; z-index: 2147483647; max-width: 300px; padding: 0.25rem 0.5rem; font-size: 0.8rem; color: #fff; background-color: rgba(33, 37, 41, 0.92); border-radius: 0.375rem; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15); pointer-events: none; }
/* ------- jQuery-UI-Tooltip-Ende ------- */

/* ------- Lebensmittel-Anfang ------- */
/* Treffer von Open Food Facts als Kacheln mit Produktbild (foods.edit und Vorschläge unter foods); Bilder sind freigestellt oder Fotos, daher auf weißem Grund und ganz sichtbar */
.FoodTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.FoodTile { display: flex; flex-direction: column; gap: .2rem; padding: .4rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); color: inherit; text-align: left; text-decoration: none; }
.FoodTile:hover, .FoodTile:focus-visible { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .25); color: inherit; }
.FoodTileImage { display: flex; align-items: center; justify-content: center; height: 6.5rem; border-radius: calc(var(--bs-border-radius) - 2px); background-color: #fff; color: var(--bs-gray-400); font-size: 2rem; overflow: hidden; }
/* feste Fläche: ohne sie ist das Bild vor dem Laden 0×0 groß und wird mit loading="lazy" nie geladen (Handy) */
.FoodTileImage img { width: 100%; height: 100%; object-fit: contain; }
.FoodTileName { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; line-height: 1.25; }
.FoodTileDetail { font-size: .75rem; color: var(--bs-secondary-color); }
/* in foods.edit begrenzt hoch, damit die Barcode-Übernahme darunter sichtbar bleibt */
.FoodSearchResults { max-height: 28rem; overflow-y: auto; }
/* foods.edit: gewählter Treffer für den Vergleich; Yazio-Treffer als Liste (Name, kcal, Portionen) */
.FoodTile.FoodTileSelected { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .45); }
.FoodYazioResults { max-height: 18rem; overflow-y: auto; }
/* Vergleichstabelle: jeder Wert einer Quelle ist ein Knopf zum Übernehmen, gleiche Werte wie gespeichert sind gedämpft */
.FoodCompare td, .FoodCompare th { vertical-align: middle; white-space: nowrap; }
.FoodCompareValue { padding: 0 .25rem; text-decoration: none; }
.FoodCompareValue.FoodCompareSame { color: var(--bs-secondary-color); }
.BarcodeScanVideo { width: 100%; max-height: 16rem; object-fit: cover; border-radius: 0.375rem; background-color: #000; }
/* ------- Lebensmittel-Ende ------- */

/* ------- Rezepte-Anfang ------- */
/* Zutat in einer Zeile (#521, auch auf dem Handy): Griff | Name mit kcal und Eiweiß | Menge mit Einheit (96 px, mit Portionsgrößen breiter) | Entfernen */
.RecipeIngredient { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
	.RecipeIngredient > .SortableHandle { flex: 0 0 auto; }
	.RecipeIngredientText { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
	.RecipeIngredientAmount { flex: 0 0 96px; flex-wrap: nowrap; }
		.RecipeIngredientAmount > .form-control { min-width: 0; }
		.RecipeIngredientAmount:has(.RecipeIngredientUnit) { flex-basis: 11rem; }
	/* Einheit fest breit und mittig, damit "g" und "ml" bündig stehen (auch auf dem PC) */
	.RecipeIngredientUnitText { flex: 0 0 2.6rem; justify-content: center; padding-left: 0; padding-right: 0; }
	.RecipeIngredientUnit { flex: 0 0 auto; width: auto; max-width: 7rem; }
	.RecipeIngredientRemove { flex: 0 0 auto; }
/* Schnell-Eingabe mit Vorschlagsliste direkt darunter (Auswahlliste wie searchSelect: SearchSelectMenu, 4 px unter dem Feld, über den folgenden Karten) */
.RecipeEntry { position: relative; }
	.RecipeEntrySuggestions { top: 100%; left: 0; right: 0; z-index: 1000; margin-top: 4px; }
.RecipeNutrition th:first-child { font-weight: 600; }
	.RecipeNutrition td, .RecipeNutrition thead th:not(:first-child) { text-align: right; white-space: nowrap; }
.RecipePreparations { min-height: 10rem; }
/* Speichern bleibt unten sichtbar, auch über alle Karten hinweg; die Leiste schwebt mit etwas Abstand über dem Rand (#513) */
.RecipeSaveBar { position: sticky; bottom: .75rem; z-index: 20; display: flex; align-items: center; gap: .5rem; padding: .75rem; background-color: #f7f7f7; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 -4px 16px rgba(0, 0, 0, .35); }
/* ------- Rezepte-Ende ------- */

/* ------- News-lesen-Anfang ------- */
/* NewsFeed-Liste: Anzahl der Artikel als Badge wie die Partien bei den Brettspielen */
.NewsList { display: flex; flex-direction: column; }
.NewsListItem { display: block; padding: .55rem .25rem; border-bottom: 1px solid var(--bs-gray-200); color: inherit; text-decoration: none; }
	.NewsListItem:hover { background-color: var(--lh-page-bg); }
	.NewsListItem.NewsListItemMissing { color: var(--bs-warning-text-emphasis); }
.NewsListItemSubject { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; overflow-wrap: anywhere; }
.NewsListItemMeta { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
/* lesbare Zeilenlänge am Desktop */
.NewsReader { max-width: 900px; margin: 0 auto; }
.NewsReaderHeader { cursor: default; }
.NewsReaderSubject { font-weight: 500; overflow-wrap: anywhere; }
.NewsReaderMeta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--bs-secondary-color); margin-top: .2rem; }
.NewsReaderBody { padding: 0; }
.NewsReaderFrame { display: block; width: 100%; height: 300px; border: 0; }
/* Aktionen bleiben unten sichtbar, auf dem Handy in Daumenhöhe */
.NewsReaderActions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .5rem; padding: .5rem 0; background-color: var(--lh-page-bg); }
	.NewsReaderActions > .btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: .4rem; }
@media (max-width: 767.98px) {
	.NewsReaderActions { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
		.NewsReaderActions > .btn { flex-direction: column; gap: .1rem; font-size: .8rem; padding: .35rem .25rem; }
}
/* Lesen & Hören (#525): Bilder der Folgen quadratisch (nicht im Hochformat der Filmplakate), Cover im Kopf, Kapitel, Player und Player-Leiste */
.table.NewsItemsCards > tbody > tr > :is(.MobileImage, .DesktopImage) > :is(img, .MobileImagePlaceholder) { aspect-ratio: 1 / 1; object-fit: cover; }
.NewsItemCover { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.NewsItemChapters { max-height: 260px; overflow-y: auto; }
	.NewsItemChapterStart { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
	.NewsItemChapters > .list-group-item.active { background-color: rgba(var(--lh-accent-rgb), .12); color: var(--lh-text); border-color: transparent; }
/* Sprungknöpfe: Symbol und Sekunden zusammen mittig im Kreis, die Zahl klein unter dem Symbol */
.PodcastControls .btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; line-height: 1; }
.PodcastSkip { font-size: .55rem; font-weight: 700; line-height: 1; }
.PodcastControls .PodcastPlay { width: 3.25rem; height: 3.25rem; }
/* die Leiste klebt in der Liste unten in der Inhaltsspalte (auf dem Handy über der unteren Leiste); beim Lesen steht sie im klebenden Block über den Aktionen */
.PodcastBar { padding: .5rem .75rem; background-color: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 12px; }
.PodcastBarSticky { position: sticky; z-index: 6; bottom: var(--lh-bottom-bar-height); margin-top: .75rem; box-shadow: 0 -4px 16px rgba(0, 0, 0, .35); }
.NewsReaderSticky { position: sticky; bottom: var(--lh-bottom-bar-height); z-index: 5; padding-top: .5rem; background-color: var(--lh-page-bg); }
	.NewsReaderSticky > .NewsReaderActions { position: static; }
.PodcastBarTitle { color: var(--lh-text); font-weight: 600; text-decoration: none; }
/* ------- News-lesen-Ende ------- */
/* ------- E-Mails-ablegen-Anfang (#455) ------- */
/* Liste links: klebt unter dem Kopf und scrollt für sich, damit sie beim Lesen langer E-Mails sichtbar bleibt */
.EmailFilingListCard { position: sticky; top: calc(var(--lh-header-height) + .75rem); display: flex; flex-direction: column; max-height: calc(100vh - var(--lh-header-height) - 1.5rem); }
	.EmailFilingListCard > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem; }
.EmailFilingCheckAll { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .25rem .6rem .5rem; font-size: .8rem; color: var(--bs-secondary-color); cursor: pointer; }
	.EmailFilingCheckAll > .form-check-input { margin: 0; }
.EmailFilingList { display: flex; flex-direction: column; gap: .25rem; }
.EmailFilingItem { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem; border: 1px solid transparent; border-radius: var(--lh-radius-field); }
	.EmailFilingItem:hover { background-color: var(--lh-surface-hover); }
	.EmailFilingItem.EmailFilingItemChecked { background-color: rgba(var(--lh-accent-rgb), .05); }
	.EmailFilingItem.EmailFilingItemActive { background-color: var(--lh-surface-raised); border-color: rgba(var(--lh-accent-rgb), .55); }
	.EmailFilingItem > .form-check-input { flex: none; margin: .2rem 0 0; }
.EmailFilingItemButton { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
	.EmailFilingItemButton:focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 3px; border-radius: 4px; }
.EmailFilingItemTop { display: flex; align-items: baseline; gap: .5rem; }
.EmailFilingItemFrom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lh-text); font-weight: 500; }
.EmailFilingItemDate { flex: none; font-size: .75rem; color: var(--bs-secondary-color); }
.EmailFilingItemSubject, .EmailFilingItemSnippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.EmailFilingItemSubject { font-size: .875rem; }
.EmailFilingItemSnippet { font-size: .8rem; color: var(--bs-secondary-color); }
.EmailFilingItemNoSuggestion :is(.EmailFilingItemFrom, .EmailFilingItemSubject) { font-weight: 700; }
.EmailFilingItemMeta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .75rem; color: var(--bs-secondary-color); }
/* Vorschlag als Chip, ohne Vorschlag orange */
.EmailFilingChip { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .1rem .55rem; border-radius: 999px; background-color: rgba(var(--lh-accent-rgb), .1); color: var(--lh-accent); font-size: .75rem; white-space: nowrap; }
	.EmailFilingChip > span { overflow: hidden; text-overflow: ellipsis; }
	.EmailFilingChip.EmailFilingChipMissing { background-color: rgba(255, 184, 107, .12); color: var(--lh-orange); }
/* Ablegen klebt über der Vorschau; die Knöpfe in Standardgröße (mit Anzahl bei mehreren E-Mails) */
.EmailFilingBar { position: sticky; top: calc(var(--lh-header-height) + .75rem); z-index: 10; margin-bottom: 1rem; }
	.EmailFilingBarTitle { font-family: var(--lh-font-display); font-weight: 600; color: var(--lh-text); }
	.EmailFilingBarButton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.EmailFilingSubject { font-family: var(--lh-font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--lh-text); overflow-wrap: anywhere; }
.EmailFilingMeta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .75rem; margin-bottom: .75rem; font-size: .85rem; }
	.EmailFilingMeta > dt { font-weight: normal; color: var(--bs-secondary-color); }
	.EmailFilingMeta > dd { margin: 0; overflow-wrap: anywhere; }
.EmailFilingTabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
	.EmailFilingTabs > .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.EmailFilingTabSize { margin-left: .35rem; opacity: .7; }
/* E-Mails sind meist für hellen Grund gestaltet */
.EmailFilingFrame { display: block; width: 100%; height: 300px; border: 0; border-radius: var(--lh-radius-field); background-color: #fff; }
.EmailFilingViewer { display: flex; flex-direction: column; gap: .5rem; }
	.EmailFilingViewer > img { align-self: center; max-width: 100%; max-height: 75vh; border-radius: var(--lh-radius-field); }
	.EmailFilingViewer > .EmailFilingPdf { width: 100%; height: calc(100vh - var(--lh-header-height) - 4rem); min-height: 420px; border: 0; border-radius: var(--lh-radius-field); }
	.EmailFilingViewer > .EmailFilingText { width: 100%; height: 60vh; border: 0; border-radius: var(--lh-radius-field); background-color: #fff; }
/* Handy: Blättern oben, Ablegen unten über der Navigationsleiste */
.EmailFilingPhoneNav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
	.EmailFilingPhoneNav > span { font-family: var(--lh-font-display); font-weight: 600; color: var(--lh-text); }
.EmailFilingDock { position: sticky; bottom: 0; z-index: 20; display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; padding: .6rem; background-color: var(--lh-surface-raised); border: 1px solid var(--lh-border); border-radius: var(--lh-radius-card); }
.EmailFilingDockTarget { display: flex; align-items: center; gap: .5rem; text-align: left; }
	.EmailFilingDockTarget > span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.EmailFilingDockActions { display: flex; gap: .5rem; }
	.EmailFilingDockActions > .btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .35rem .25rem; font-size: .8rem; }
	.EmailFilingDockActions > .EmailFilingDockFile { flex-grow: 2; }
@media (max-width: 767.98px) {
	.EmailFilingDock { bottom: calc(var(--lh-bottom-bar-height) + .5rem); }
	/* Anhänge in einer Zeile zum Wischen */
	.EmailFilingTabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
		.EmailFilingTabs > .btn { flex: none; max-width: 80%; }
	/* "Nach oben" über der Leiste statt auf ihren Knöpfen */
	body:has(.EmailFilingDock) .ScrollTopButton { bottom: calc(var(--lh-bottom-bar-height) + 8.5rem); }
}
/* ------- E-Mails-ablegen-Ende ------- */
/* ------- Verbindungen (Mein Profil): je Dienst eine Zeile mit Stand und Aktionen ------- */
.ConnectionList > .ConnectionRow { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color); }
	.ConnectionList > .ConnectionRow:first-child { padding-top: 0; }
	.ConnectionList > .ConnectionRow:last-child { padding-bottom: 0; border-bottom: none; }
.ConnectionActions { display: flex; gap: .5rem; flex-shrink: 0; }
/* ------- Verbindungen-Ende ------- */

/* ------- Ereignisse-Anfang ------- */
/* Aufgeklappte Unterschiede eines Ereignisses unter dem Objekt (auf dem Handy im Kartentitel, daher normale Schrift); lange Werte (z. B. Notizen) umbrechen und scrollen */
.ChangeEventChanges { margin: .35rem 0 .25rem 1.6rem; font-size: .875rem; font-weight: normal; }
	.ChangeEventChanges .table { --bs-table-bg: transparent; font-size: inherit; }
	.ChangeEventChanges .ChangeEventField { width: 1%; white-space: nowrap; color: var(--bs-secondary-color); }
.ChangeEventValue { max-height: 12rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ------- Ereignisse-Ende ------- */

/* ------- Log-Dateien-Anfang ------- */
/* Inhalt der Log-Datei (logfiles.aspx): wie ein Feld, aber ohne Umbruch und mit eigenem Scrollbereich in beide Richtungen */
.LogContent { margin: 0; padding: .5rem .75rem; overflow: auto; white-space: pre; font-size: .8125rem; background-color: var(--lh-field-bg); border: var(--bs-border-width) solid var(--lh-border); border-radius: var(--lh-radius-field); }
/* ------- Log-Dateien-Ende ------- */
/* ------- Buchungen-Kontoliste-Anfang (#462) ------- */
/* Kontoliste links wie in Banking4: klebt unter dem Kopf und scrollt für sich */
.AccountListCard { width: 250px; position: sticky; top: calc(var(--lh-header-height) + .75rem); max-height: calc(100vh - var(--lh-header-height) - 1.5rem); overflow-y: auto; }
	.AccountListCard > .card-body { padding: .5rem; }
.AccountList { display: flex; flex-direction: column; gap: .15rem; }
.AccountListGroup { margin: .6rem .6rem .15rem; font-size: .75rem; color: var(--lh-text-muted); }
/* Name und Saldo in der ersten Zeile, letzter Abruf und Treffer in der zweiten */
.AccountListItem { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .5rem; width: 100%; padding: .45rem .6rem; text-align: left; color: var(--lh-text-body); background: none; border: 1px solid transparent; border-radius: var(--lh-radius-field); }
	.AccountListItem:hover { background-color: var(--lh-surface-hover); }
	.AccountListItem.AccountListItemActive { background-color: var(--lh-surface-raised); border-color: rgba(var(--lh-accent-rgb), .55); }
.AccountListName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.AccountListBalance { font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* zweite Zeile (#550): der letzte Abruf dezent, klein und kursiv; rechts die ungelesenen Buchungen wie bei E-Mails (leer, wenn keine) */
.AccountListInfo { font-size: .6875rem; font-style: italic; color: var(--lh-text-muted); opacity: .85; }
.AccountListCount { font-size: .75rem; font-weight: 600; text-align: right; color: var(--lh-accent); }
.AccountListWarning { margin: 0 .6rem .3rem; font-size: .75rem; color: var(--lh-yellow); text-decoration: none; }
	.AccountListWarning:hover { text-decoration: underline; }
/* Reihenfolge der Gruppen (#533): Knopf unter der Liste (das Popup sortiert per Drag & Drop, sortableList) */
.AccountListActions { display: flex; justify-content: flex-end; margin: .5rem .6rem .15rem; }
/* ------- Buchungen-Kontoliste-Ende ------- */
/* ------- Daueraufträge-Anfang (#464) ------- */
/* Daueraufträge auf der Seite des Kontos: je Auftrag Empfänger und Betrag, Verwendungszweck, Turnus und Abweichungen von Fixkosten und Budgets */
.StandingOrder { padding: .6rem 0; border-top: 1px solid var(--lh-border-subtle); }
	.StandingOrder:first-of-type { border-top: 0; }
.StandingOrderDifference { color: var(--lh-yellow); }
/* ------- Daueraufträge-Ende ------- */
/* ------- Instagram-Beitrag-Anfang (#488) ------- */
/* Popup am Abschnitt: Fotos zum Antippen (Nummer = Reihenfolge im Beitrag) und die fertigen Bilder 4:5 zum Wischen */
.InstagramPhotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4rem; max-height: 22rem; overflow-y: auto; }
.InstagramPhoto { position: relative; padding: 0; aspect-ratio: 1; overflow: hidden; background: var(--lh-surface-raised); border: 2px solid transparent; border-radius: var(--lh-radius-field); }
	.InstagramPhoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.InstagramPhoto.Selected { border-color: var(--lh-accent); }
	.InstagramPhoto.Selected img { opacity: .75; }
.InstagramPhotoNumber { position: absolute; top: .25rem; right: .25rem; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; font-size: .8rem; font-weight: 700; line-height: 1.5rem; color: #0d0e12; background: var(--lh-accent); border-radius: .75rem; }
.InstagramSlides { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x mandatory; }
	.InstagramSlides img { flex: 0 0 auto; width: 216px; aspect-ratio: 4 / 5; scroll-snap-align: start; border-radius: var(--lh-radius-field); }
/* ------- Instagram-Beitrag-Ende ------- */
/* #521 Finanzen (Buchungen, Buchung, Budget, Fixkosten, Konto, Popup „Buchung“) */
/* Betrag mit „€“ und Ausgabe/Einnahme (Fixkosten, Popup „Buchung“): der Betrag nimmt den Platz, die Knöpfe sind kleiner */
.AmountDirectionGroup > .form-floating { flex: 1 1 auto; min-width: 7rem; }
.AmountDirectionGroup > .btn { flex: 0 0 auto; padding-inline: .6rem; font-size: .85rem; }
/* Buchung: Punkt vor „Noch nicht bestätigt“ */
.TransactionNotConfirmedDot { font-size: .55em; vertical-align: .2em; }
/* Buchungsliste: Zuordnung, Vorschlag und Bestätigung nur auf dem Handy als letzte Zeile der Karte (am Desktop die Spalten Ref., Vorschlag und OK) */
.AccountTransactionMobileState { display: none; }
@media (max-width: 767.98px) {
	/* Kennzahlen in drei schmalen Spalten (Budget-Daten): kleiner, damit „-1236,20 €“ ohne Umbruch passt */
	.KeyFigure:has(> .CompactKeyFigureValue) { padding-inline: .6rem; }
		.CompactKeyFigureValue { font-size: 1rem; }
	.table.MobileCards > tbody > tr > .AccountTransactionStateCell { margin-top: .5rem; font-size: inherit; font-style: normal; font-weight: normal; text-align: left !important; }
		.table.MobileCards > tbody > tr > .AccountTransactionStateCell:not(:has(> .AccountTransactionMobileState)) { display: none; }
		.AccountTransactionMobileState { display: block; }
			/* bricht um statt … (theme.css hält Knöpfe sonst einzeilig, daher die höhere Spezifität) */
			.table.MobileCards .AccountTransactionMobileState > .btn { white-space: normal; text-overflow: clip; text-align: left; }
			.AccountTransactionMobileReason { margin-top: .25rem; padding-left: .6rem; }
}
/* Konto: der Unterblock FinTS mit Abstand nach oben, auch am Desktop (die letzte Feldzeile darüber hat keinen Abstand nach unten) */
.AccountFinTSCard { margin-top: 1rem; }
/* #521 Medien, Dokumente, Kontakte, Logins, E-Mail, Watchlist (Ordner, Dateien, Kontakt, Login, E-Mail-Konto und -Regel, NewsFeed, Kalendereintrag, Benutzer) */
/* Wert als Text statt gesperrtes Feld: kleine graue Überschrift über dem Wert (Medienordner, Dokumentordner, Kontaktgruppe) */
.ValueLabel { font-size: .8125rem; color: var(--bs-secondary-color); }
/* Ordner- und Dateipfad als grauer Text mit Ordnersymbol, bricht an den "\" um (<wbr>) */
.FolderPathText { display: flex; align-items: baseline; gap: .5rem; min-width: 0; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
	.FolderPathText > i { flex: 0 0 auto; }
/* Statuszeile mit Symbol (Dokumentdatei: durchsuchbar, Muster) */
.StatusLine { display: flex; align-items: baseline; gap: .5rem; }
	.StatusLine > i { flex: 0 0 auto; width: 1em; text-align: center; }
/* Kopf eines Datensatzes aus einem anderen System (Kontakt aus Google, Login aus Bitwarden): rundes Bild oder Symbol, Name groß, darunter klein die Herkunft */
.RecordHead { display: flex; align-items: center; gap: 1rem; padding-inline: calc(.75rem + var(--bs-border-width)); }
	.RecordHeadIcon { flex: 0 0 auto; }
	.RecordHeadSymbol { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-size: 1.6rem; color: var(--lh-accent); background-color: var(--bs-secondary-bg); }
	.RecordHeadText { min-width: 0; overflow-wrap: anywhere; }
	.RecordHeadTitle { font-family: var(--lh-font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.25; color: var(--lh-text); }
/* Auswahl ohne Wert ("[Bitte wählen]") grau wie ein Platzhalter, die Optionen in der Liste normal (E-Mail-Regel) */
.form-select.SelectEmpty { color: var(--bs-secondary-color); }
	.form-select.SelectEmpty option { color: var(--bs-body-color); }
/* E-Mail-Konto: Ordner, die leer sein müssen, in zwei Spalten */
.EmailAccountFolders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; }
@media (min-width: 768px) {
	.EmailAccountFolders { grid-template-columns: repeat(5, max-content); column-gap: 2rem; }
}
/* Watchlist: Handlung auf 5 Zeilen gekürzt, "mehr" zeigt alles */
.ClampLines5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Benutzer: Suche der Rechte und "Rechte übernehmen von …" am Desktop wie bisher, auf dem Handy volle Breite */
.UserRightsSearch { width: 300px; }
.UserRightsSource { width: auto; }
/* Mediendatei: Datum und Zeit nebeneinander, größere Sterne; Personenwahl der Aktionen am Desktop schmal */
.MediaFileDateCol { min-width: 0; }
.MediaFileRating .fa-star { font-size: 1.25rem; }
.MediaFileActionContact { width: 220px; }
@media (max-width: 767.98px) {
	.UserRightsSearch, .UserRightsSource { flex: 1 1 100%; width: 100%; }
	/* Mediendatei: die Karten in der Ordnerkarte verlieren Rahmen, Fläche und seitlichen Innenabstand, Abschnitte trennt eine feine Linie */
	.MediaFileEditCard .card { border: 0; border-radius: 0; background-color: transparent; box-shadow: none; }
		.MediaFileEditCard .card > :is(.card-header, .card-body, .card-footer) { padding-left: 0; padding-right: 0; background-color: transparent; }
		.MediaFileEditCard .card .card > .card-header { border-bottom: 0; padding-top: .75rem; }
		.MediaFileEditCard .card .card-footer { border-top: var(--bs-border-width) solid var(--bs-border-color); }
	.MediaFileEditCard .MediaFileActionBar { padding: .75rem 0 0; border: 0; border-top: var(--bs-border-width) solid var(--bs-border-color); border-radius: 0; background-color: transparent; }
	.MediaFileActionContact, .MediaFileActionButtons { flex: 1 1 100%; width: 100%; }
}
/* ------- #521 Seiten: Aufgaben, Thema, Training, Ernährung, Packen, Brettspiele, Tagesplan-Anfang ------- */
/* #521 Thema: Verlauf */
.TopicPeriodsSummary { margin: -.25rem 0 .75rem; text-align: center; }
.TopicPeriodRow { display: flex; align-items: center; gap: .75rem; }
.TopicPeriodBubble { display: flex; flex: 0 0 4.25rem; flex-direction: column; align-items: center; justify-content: center; padding: .35rem .25rem; border-radius: 16px; background-color: rgba(255, 255, 255, .06); line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; }
	.TopicPeriodBubbleYear { font-family: var(--lh-font-display); font-size: 1.15rem; font-weight: 700; }
	.TopicPeriodBubbleMonth, .TopicPeriodBubbleDays { color: var(--lh-text-muted); font-size: .7rem; white-space: nowrap; }
.TopicPeriodMain { flex: 1 1 auto; min-width: 0; }
	.TopicPeriodTitle { font-weight: 600; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.TopicPeriodSide { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: .3rem; max-width: 45%; text-align: right; }
	.TopicPeriodSide .badge { margin-left: 0; }
	.TopicPeriodFileCount { display: inline-block; min-width: 1.6rem; 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.6rem; text-align: center; font-variant-numeric: tabular-nums; }
/* #521 Trainings-Event: aufgeklappte Erklärung der Priorität nah am Feld, Absätze mit Abstand */
.TrainingEventPriorityInfo { margin-top: -.5rem; }
	.TrainingEventPriorityInfo > p { margin-bottom: .5rem; }
	.TrainingEventPriorityInfo > p:last-child { margin-bottom: 0; }
/* #521 Lebensmittel: "Suchen und vergleichen" klappt selbst ein (steht auf dem Handy oben, im Dokument aber hinter dem Formular); Pfeil wie bei den übrigen Karten */
.FoodSearchCard > .card-header { padding-left: 1.6rem; cursor: pointer; user-select: none; }
	.FoodSearchCard > .card-header::before { content: "\f078"; display: inline-block; width: 1rem; margin-left: -1rem; font-family: "Font Awesome 5 Free"; font-size: .6rem; font-weight: 900; color: var(--lh-text-muted); vertical-align: middle; transition: transform .15s; }
.FoodSearchCard.FoodSearchCollapsed > .card-header::before { transform: rotate(-90deg); }
.FoodSearchCard.FoodSearchCollapsed > :not(.card-header) { display: none !important; }
.FoodSearchCard.FoodSearchCollapsed > .card-header { border-bottom: 0; }
/* #521 Pack-Kategorie: Pack-Einträge auf dem Handy in drei bündigen Zeilen (Name; Gruppe mit Symbol; Anzahl mit Symbol), nicht kursiv, gleicher Abstand */
@media (max-width: 767.98px) {
	.table.MobileCards.PackingItemsCards > tbody > tr { row-gap: .25rem; }
		.table.MobileCards.PackingItemsCards > tbody > tr > .MobileMeta { font-style: normal; color: var(--lh-text-muted); }
}
/* #523 Grundbedarf: Kategorie-Symbol vor dem Namen, Liste als Badge; auf dem Handy Rhythmus und Datum nebeneinander mit Symbol statt Trennpunkt,
   darunter der Vorrat und die Liste je in einer eigenen Zeile, nicht kursiv, leere Angaben (Vorrat beim Rhythmus, Datum beim Vorrat) ausgeblendet */
.table.StaplesCards .ShoppingRowIcon { display: inline-flex; vertical-align: middle; }
@media (max-width: 767.98px) {
	.table.MobileCards.StaplesCards > tbody > tr { row-gap: .25rem; column-gap: .9rem; }
		.table.MobileCards.StaplesCards > tbody > tr > .StapleStock { order: 5; flex-basis: 100%; }
		.table.MobileCards.StaplesCards > tbody > tr > .StapleList { order: 6; flex-basis: 100%; }
		.table.MobileCards.StaplesCards > tbody > tr > .MobileMeta { font-style: normal; color: var(--lh-text-muted); }
		.table.MobileCards.StaplesCards > tbody > tr > .MobileMeta:not(:has(> *)) { display: none; }
}
/* #521 Brettspiel: Kopf wie bei der Watchlist, Cover klein links, daneben die Daten von BoardGameGeek als Text */
.BoardGameHead { display: flex; align-items: flex-start; gap: 1rem; }
	.BoardGameCover { flex: 0 0 auto; width: 88px; height: 88px; object-fit: cover; border-radius: 12px; }
	.BoardGameHeadText { flex: 1 1 auto; min-width: 0; }
/* #521 Tagesplan: vom System eingeplante Aufgaben als Textzeilen mit feiner Trennlinie, rechts der Link */
.MyDaySystemTask { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; }
	.MyDaySystemTask + .MyDaySystemTask { border-top: var(--bs-border-width) solid var(--bs-border-color); }
	.row + .MyDaySystemTask { margin-top: .5rem; }
	.MyDaySystemTaskText { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* #521 Rezeptliste: Tags mit Abstand (auch zwischen den Zeilen), auf dem Handy bündig unter dem Titel, mehr Luft zwischen Titel, Tags und Zeitzeile */
.RecipeTags { display: flex; flex-wrap: wrap; gap: .4rem; }
	.RecipeTags > .badge { margin-left: 0; }
@media (max-width: 767.98px) {
	.table.MobileCards.RecipesTable > tbody > tr { row-gap: .6rem; padding-top: .9rem; padding-bottom: .9rem; }
		.table.MobileCards.RecipesTable > tbody > tr > .MobileFull { font-style: normal; }
}
/* ------- #521 Seiten: Aufgaben, Thema, Training, Ernährung, Packen, Brettspiele, Tagesplan-Ende ------- */
/* ------- #531 Englisch-Tagebuch (englishjournal.aspx, Satz des Tages) ------- */
.EnglishPrompt { font-style: italic; }
.EnglishEntryHead, .EnglishPatternHead { display: flex; align-items: center; gap: .5rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.EnglishEntryPreview { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.EnglishEntryBody { margin-top: .75rem; }
.EnglishDiff { white-space: pre-wrap; line-height: 1.7; }
.EnglishDiffAdded { background-color: rgba(var(--bs-success-rgb), .2); color: var(--bs-success); border-radius: .2rem; }
.EnglishDiffRemoved { color: var(--bs-danger); text-decoration: line-through; opacity: .8; }
.EnglishPraise { margin-top: .5rem; color: var(--bs-success); }
.EnglishMistakes { margin: .5rem 0 0; padding-left: 1.2rem; }
.EnglishMistakes > li { margin-bottom: .4rem; }
.EnglishNatural { margin-top: .5rem; padding: .5rem .75rem; border-radius: var(--bs-border-radius); background-color: var(--bs-tertiary-bg); }
.EnglishPattern { padding: .35rem 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.EnglishPattern:last-child { border-bottom: 0; }
.EnglishCardSentence { font-size: 1.1rem; }
.EnglishCardAnswer { margin-top: .75rem; padding-top: .75rem; border-top: var(--bs-border-width) solid var(--bs-border-color); }