/* Selbst gehostete Inter-Schriftart (Gewichte 300/400/500/600, Latin-Subset inkl. deutscher
   Umlaute/ß, U+0000-00FF) statt Google-Fonts-CDN – vermeidet einen externen Netzwerk-Request
   bei jedem Seitenaufruf (Ladezeit, FOUC-Risiko bei langsamer Verbindung) und die Übertragung
   der Besucher-IP an Google. Datei stammt unveraendert von fonts.gstatic.com (Inter v20, latin-
   Subset); alle vier Gewichte referenzieren dieselbe Variable-Font-Datei, wie von Google selbst
   ausgeliefert. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Blazicon Icon-Hilfsklassen ──────────────────────────────────────────── */
/* Ersetzen Inline-Styles in Razor-Komponenten für konsistente Icon-Größen.
   icon--sm/--md waren vorher 0.8/0.85rem – zwei praktisch nicht unterscheidbare Zwischenstufen
   neben icon--btn (0.9rem). Beide nutzen jetzt dieselbe Typografie-Skala-Stufe (--fs-sm), damit
   nur noch eine bewusste "klein"-Stufe statt zweier Beinahe-Duplikate existiert. */
.icon--sm      { width: var(--fs-sm); height: var(--fs-sm); margin-right: var(--space-1); }
.icon--md      { width: var(--fs-sm); height: var(--fs-sm); margin-right: var(--space-1); }
.icon--btn     { width: 0.9rem;  height: 0.9rem;  margin-right: 0.3rem;  }
.icon--lg      { width: 1.1rem;  height: 1.1rem;  margin-right: 0.35rem; }
.icon--nav     { width: 1rem;    height: 1rem;    margin-right: 0.4rem;  }
.icon--mobile-nav { width: 1rem; height: 1rem; color: #F1F5F9 !important; stroke: #F1F5F9 !important; }
.icon--stat    { width: 1rem;    height: 1rem;                           }
.icon--heading { width: 1.4rem;  height: 1.4rem;  margin-right: 0.3rem; vertical-align: middle; }
.icon--gantt   { width: 0.75rem; height: 0.75rem; margin-right: 0.2rem; vertical-align: middle; }
.icon--cleaning-btn { width: 1.05rem; height: 1.05rem; }

/* ── Erreichbarkeits-Statusanzeige (DiskSpaceIndicator/MewsAvailabilityIndicator/
   SevenIoAvailabilityIndicator) ────────────────────────────────────────────
   Alle drei duplizierten bislang dasselbe Wrapper-/Punkt-Markup 1:1 in eigenen
   Scoped-CSS-Dateien – hier einmal zentral, die Farbe kommt je nach Status als Modifier-Klasse. */
.status-indicator {
    margin-right: auto;
    font-size: 0.78rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.status-indicator__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: currentColor;
    flex: 0 0 auto;
}
.status-indicator--available   { color: var(--color-status-available); }
.status-indicator--degraded    { color: var(--color-status-degraded); }
.status-indicator--unavailable { color: var(--color-status-unavailable); }

:root {
    --color-bg:           #F1F5F9;
    --color-surface:      #E8EFF7;
    --color-surface-soft: #FFFFFF;
    --color-primary:      #3B82F6;
    --color-primary-dark: #1D4ED8;
    --color-accent:       #0EA5E9;
    --color-text:         #0F172A;
    --color-text-muted:   #64748B;
    /* Kräftigere Variante von --color-text-muted für Text auf getönten "-soft"-Hintergründen
       (Kennzahl-Kacheln .tile__label, .hk-badge--unknown): --color-text-muted selbst erreicht dort
       nur 3,9-4,4:1 (WCAG-AA-Minimum für Fließtext: 4,5:1) – analog zur Begründung bei
       --color-success-strong/--color-danger-strong/--color-info-strong oben. */
    --color-text-muted-strong: #475569;
    --color-border:       #CBD5E1;
    --color-danger:       #EF4444;
    --color-success:      #22C55E;
    --color-info:         #38BDF8;
    --color-warning:      #F97316;
    --color-white:        #ffffff;
    /* Kräftigere Varianten von success/danger/info für weißen Text auf farbigem Grund (Badges) –
       die Basistöne oben sind für Text/Rahmen auf hellem Grund gewählt und erreichen dort als
       Badge-Hintergrund mit weißer Schrift nur 2,1-3,8:1 Kontrast (WCAG-AA-Minimum: 4,5:1). */
    --color-success-strong: #15803D;
    --color-danger-strong:  #DC2626;
    --color-info-strong:    #0369A1;
    /* Kräftigere Varianten von due/warning für farbigen Text AUF dem jeweils eigenen -soft-
       Hintergrund (Kennzahl-Kacheln .tile__count): --color-due/--color-warning selbst erreichen dort
       nur 2,5-2,9:1 (WCAG-AA-Minimum für großen/fetten Text: 3:1). --color-accent nutzt für denselben
       Zweck bewusst --color-info-strong weiter unten mit statt einer eigenen, nahezu identischen
       dritten Kräftig-Variante. */
    --color-due-strong:     #B45309;
    --color-warning-strong: #C2410C;
    /* Neutrales Grau (kein Blaustich wie --color-border) fuer "keine Daten"-Schraffuren in
       Balkendiagrammen/Sparklines (Kennzahlen-Kacheln, Jahresverlaufsgrafik) – zentral hier
       gepflegt, damit beide Darstellungen immer denselben Ton verwenden. */
    --color-nodata:       #D1D5DB;
    --color-alert-danger-bg:     #FEF2F2;
    --color-alert-danger-border: #FECACA;
    --color-alert-danger-text:   #991B1B;
    --color-occupancy-arrival:   #16A34A;
    --color-occupancy-stayover:  #475569;
    --color-occupancy-departure: #DC2626;
    --color-hk-dirty:            #FCA5A5;
    --color-hk-clean:            #BAE6FD;
    --color-hk-inspected:        #86EFAC;
    --color-hk-outoforder:       #CBD5E1;
    --color-hk-outofservice:     #FDE68A;
    --color-abwesenheit-urlaub:    #5B9BD5;
    --color-abwesenheit-krankheit: #E8590C;
    /* rgba-Hilfsvariablen für Schatten und Hover */
    --shadow-primary:     rgba(59,130,246,0.15);
    --shadow-primary-lg:  rgba(59,130,246,0.25);
    --shadow-text:        rgba(15,23,42,0.06);
    --shadow-text-lg:     rgba(15,23,42,0.12);
    --stripe-primary:     rgba(59,130,246,0.05);
    --stripe-primary-lg:  rgba(59,130,246,0.10);
    --stripe-primary-focus: rgba(59,130,246,0.18);
    --hover-accent:       rgba(14,165,233,0.08);
    /* Heutiger Tag – transparentes Grün (Dashboard, Vorschau, Belegung) */
    --color-today-bg:     rgba(22, 163, 74, 0.04);

    /* Dringlichkeit (Heute-Seite, Baustein F) – ergänzt die Ampelfarben aus WorkItemSeverity */
    --color-due:          #D97706;
    --color-due-soft:     #FEF3E2;
    --color-critical-soft: var(--color-alert-danger-bg);
    --color-waiting-soft: var(--color-surface);
    --color-arrival-soft: #E7F6EC;

    /* Blasse Hintergründe für die Kennzahl-Kacheln (siehe .tile--* weiter unten): jede Kachel zeigt
       jetzt durchgehend (nicht nur im aktiven Zustand) einen blassen Hintergrund in der Farbfamilie
       ihrer Textfarbe. Ergänzt die oben bereits vorhandenen -soft-Töne um die bislang fehlenden bzw.
       als Hex-Literal wiederholten Fälle. */
    --color-accent-soft:  #DBEAFE;
    --color-info-soft:    #E0F2FE;
    --color-success-soft: #ECFDF5;
    --color-neutral-soft: #F3F4F6;
    --color-warning-soft: #FEF3C7;

    /* Zentrale Status-/Kanal-Farben für Listen-Badges, -Kacheln und -Streifen (aktuell Rechnungen,
       zur Wiederverwendung auf weiteren Listen gedacht – siehe .badge-wire-transfer/.badge-booking).
       Bewusst eigene Töne statt --color-primary/--color-accent, damit diese nicht an die dort
       bereits belegten Bedeutungen (Buttons/Links bzw. "läuft"-Badges, Bank-Kacheln) gekoppelt sind. */
    --color-wire-transfer:      #7C3AED;
    --color-wire-transfer-soft: #F3E8FF;
    --color-booking:            #1D4ED8;
    --color-booking-soft:       #DBEAFE;
    --color-done-soft:          #EAEFF5;

    /* "Auszahlung"-Korrektur auf der Seite Arbeitszeit (Con4Mews.Web/Pages/Arbeitszeit.razor.css) -
       eigener, heller Grünton statt --color-success/--color-success-strong (dort für "Gutschrift"
       reserviert): beide sollen auf einen Blick als "irgendeine positive Buchung" erkennbar bleiben,
       aber unterscheidbar sein. Hellstmöglicher Ton auf gleichem Farbton (142°) wie --color-success,
       der auf weißem Grund noch WCAG-AA (4,5:1) für normalen Fließtext erreicht (4,54:1) - heller wäre
       nicht mehr zuverlässig lesbar (siehe Auftrag 30.08.2026 "auf Kontrast achten wegen Lesbarkeit"). */
    --color-auszahlung: #168840;

    /* Kategorie "Dauerbuchung" (Zahlungsabgleich, Baustein L) – wiederkehrende Buchungen ohne
       Rechnungsdokument (z. B. Miete). Pink statt einer bereits belegten Farbe, damit die Kategorie
       auf einen Blick von "Rot" (ungeklärt/ohne Beleg) unterscheidbar bleibt. */
    --color-pink:      #DB2777;
    --color-pink-soft: #FCE7F3;

    /* Karten-Eckenradius (Heute-Feed: Kacheln, Bank-Zusammenfassung, Feed-Karten) */
    --radius-card: 0.65rem;
    /* Button-Eckenradius (.btn, NavMenu) – war 4x als literales "8px" dupliziert. */
    --radius-btn: 8px;
    /* Voll gerundete Pillen/Chips/Badges – 100px und 999px erzeugen bei den hier verwendeten
       Elementgrößen (immer deutlich unter 100px hoch) exakt dieselbe volle Rundung, standen aber
       als zwei verschiedene "willkürliche" Werte nebeneinander im Stylesheet. */
    --radius-pill: 999px;

    /* Sidebar/Kopfzeile (NavMenu/MainLayout) + vereinzelte Kartenrahmen (Abrechnung) – lagen
       vorher als rohes Hex in mehreren Scoped-CSS-Dateien statt hier zentral gepflegt zu werden. */
    --color-sidebar-bg:     #1E293B;
    --color-border-strong:  #E2E8F0;
    --color-text-faint:     #94A3B8;

    /* Erreichbarkeits-Ampel (Speicherplatz/MEWS/seven.io-Statusanzeigen im Header) – bewusst
       eigene, etwas gedecktere Töne statt --color-success/--color-danger (die für Akzentstreifen/
       Buttons kräftiger sein müssen), entsprechen den Bootstrap-Text-Farben text-success/-warning/
       -danger für gute Lesbarkeit auf weißem Grund. */
    --color-status-available:   #198754;
    /* War #997404 (~4,33:1 auf Weiß) – knapp unter dem WCAG-AA-Minimum 4,5:1 für Fließtext. */
    --color-status-degraded:    #8A6603;
    --color-status-unavailable: #bb2d3b;

    /* Helles Blau für Text auf dunklem Grund (Sidebar-Aktivzustand, Undo-Toast-Button) – war 2x als
       rohes Hex dupliziert. */
    --color-accent-on-dark: #93C5FD;

    /* Kleinerer Eckenradius für Chip-/Kachel-Elemente (Dienstplan-Zellen, Settings-Karten) neben der
       bereits vorhandenen --radius-card/--radius-btn/--radius-pill-Familie – war 5x als rohes
       "0.5rem" dupliziert. */
    --radius-sm: 0.5rem;

    /* Typografie-Skala – benennt die bereits etablierten Kern-Schriftgrößen (Fließtext, h1, h5)
       zentral, damit neue/angepasste Stellen sich an dieser Skala statt an beliebigen rem-Werten
       orientieren können. Bewusst kein flächendeckender Austausch aller ~30 im Projekt verstreuten
       font-size-Werte gegen diese Variablen – das wäre eine rein optische Änderung an sehr vielen
       Stellen gleichzeitig, ohne dass sie hier verifiziert werden kann. */
    --fs-2xs: 0.68rem;
    --fs-xs:  0.74rem;
    --fs-sm:  0.82rem;
    --fs-base: 0.95rem; /* = html/body Grundgröße */
    --fs-lg:  1.05rem;  /* = h5 */
    --fs-xl:  1.2rem;
    --fs-2xl: 1.6rem;   /* = h1 */

    /* Abstands-Skala für eigenes CSS (gap/padding/margin) – analog zur Typografie-Skala. Für
       Markup-Abstände stehen bereits Bootstraps Utility-Klassen (gap-1…5, p-1…5, m-1…5 usw.) zur
       Verfügung und werden im Projekt durchgängig genutzt; diese Variablen sind für component-
       eigenes CSS gedacht, das keine Utility-Klasse nutzen kann (z. B. Werte in Scoped-CSS-Dateien).
       Bewusst kein flächendeckender Austausch aller vorhandenen ad-hoc rem-Werte – siehe Kommentar
       bei --fs-* weiter oben, dieselbe Begründung gilt hier. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
}

/* ── Severity-Farbschema (Heute-Feed: WorkItemFeedCard/WorkItemFocusCard) ───
   Zentrale Token-Zuordnung je Dringlichkeitsstufe (siehe WorkItemDisplay.GetSeverityAccentClass).
   Die Karten-Kontexte (Streifen, Aktionsbutton, Raum-Badge, CTA) lesen nur noch
   var(--severity-color)/var(--severity-soft-bg) statt die drei Zustände selbst aufzulisten. */
.severity-critical { --severity-color: var(--color-danger);     --severity-soft-bg: var(--color-critical-soft); }
.severity-due       { --severity-color: var(--color-due);        --severity-soft-bg: var(--color-due-soft); }
.severity-waiting   { --severity-color: var(--color-text-muted); --severity-soft-bg: var(--color-waiting-soft); }

/* ── Kennzahlen-Karten (Kennzahlen-Seite) ────────────────────────────────
   Quadratische KPI-Karten, siehe KpiCard.razor. */
.kpi-card {
    aspect-ratio: 1;
}

/* ── Kennzahlen-Diagramme (Kennzahlen/Vorjahresvergleich) ────────────────
   Gemeinsame Bausteine für KpiCard/KpiYearChart/MultiYearLineChart, damit
   Formel-Tooltip, Legende und "keine Daten"-Balken überall gleich aussehen. */
.formula-info {
    margin-left: 3px;
    cursor: help;
    color: var(--color-text-muted);
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

.chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chart-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

/* ── Mehrjahres-/Kurvenliniendiagramm (MultiYearLineChart, PickupLineChart) ─────────────────
   Beide Komponenten teilen sich denselben Klassennamensraum ("myl-chart*") und identisches Markup/
   CSS - vorher byte-für-byte in beiden .razor.css-Dateien dupliziert (Blazor-CSS-Isolation erlaubt
   kein @@import zwischen Scoped-Dateien). Hier zentral, da unscoped/global keine Kollisionsgefahr
   birgt (Klassennamen bereits eindeutig namensraum-präfigiert). Nur die X-Achsen-Beschriftung
   (.myl-chart__months/-month-tick) unterscheidet sich fachlich zwischen Monats- und Tagesabstand-
   Achse und bleibt daher in der jeweiligen Scoped-Datei. */
.myl-chart {
    width: 100%;
}

.myl-chart__header {
    margin-bottom: 8px;
}

.myl-chart__title {
    font-weight: 600;
    font-size: 0.85rem;
}

.myl-chart__plot {
    position: relative;
}

.myl-chart__svg {
    width: 100%;
    height: 200px;
    display: block;
}

.myl-chart__grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.myl-chart__ticks {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 200px;
    pointer-events: none;
}

.myl-chart__tick-label {
    position: absolute;
    left: 0;
    right: 4px;
    transform: translateY(-50%);
    text-align: right;
    font-size: 9px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.myl-chart__line {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.myl-chart__points {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.myl-chart__point {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-surface, #fff);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: default;
}

.myl-chart__point:hover {
    width: 14px;
    height: 14px;
}

.chart-bar--nodata {
    /* Bewusst neutrales Grau (--color-nodata) statt --color-border (Slate, mit Blaustich) –
       "keine Daten" soll sich optisch klar von den blauen Datenbalken (--color-primary) abheben. */
    background-image: repeating-linear-gradient(135deg, var(--color-nodata) 0 4px, transparent 4px 8px);
    background-color: transparent;
    border: 1px dashed var(--color-nodata);
}

/* ── Übersichts-Kacheln (Heute, An-/Abreisen) ────────────────────────────
   Klickbare Kennzahl-Kacheln, die vor den Details einen Überblick geben
   (Chunking: erst die Zahl erfassen, dann bei Bedarf in die Liste springen).
   Zentral gehalten, damit Heute und An-/Abreisen dasselbe Muster teilen. */
.tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tile {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 7rem;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-card);
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px var(--shadow-text);
}

/* "all: unset" oben entfernt auch den Browser-eigenen Fokusring der Kachel-Buttons - ohne Ersatz
   sehen Tastaturnutzer:innen nicht, welche Kachel gerade fokussiert ist (WCAG 2.4.7). */
.tile:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.tile__count {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.tile__label {
    font-size: 0.74rem;
    /* -strong statt Basis-Ton: siehe Kommentar bei --color-text-muted-strong (WCAG-Kontrast auf den
       getönten Kachel-Hintergründen). */
    color: var(--color-text-muted-strong);
    font-weight: 550;
}

/* Jede Kennzahl-Kachel zeigt durchgehend (nicht mehr nur nach Klick) einen blassen Hintergrund in
   der Farbfamilie ihrer Textfarbe – Hintergrund = blasse Farbe, Text = die "echte", kräftige Farbe.
   Der aktive/gefilterte Zustand wird ausschließlich über den dickeren orangen Rahmen aus
   .tile.is-active markiert (weiter unten), unabhängig von der Kachel-Kategorie. Die Farbe je Kachel
   ist dieselbe, die auch in der zugehörigen Tabelle/Liste für denselben Status verwendet wird
   (Zeilen-Streifen arrival-stripe--*/severity-* bzw. Status-Badge) – siehe die Kommentare je Gruppe. */
.tile--critical { background: var(--color-critical-soft); }
.tile--critical .tile__count  { color: var(--color-danger); }
.tile--vortage { background: var(--color-waiting-soft); }
.tile--vortage .tile__count   { color: var(--color-text-muted); }
.tile--departure { background: var(--color-due-soft); }
/* -strong statt --color-due: Basis-Ton erreicht auf --color-due-soft nur 2,9:1
   (WCAG-AA-Minimum für die fette/große Kachel-Zahl: 3:1). */
.tile--departure .tile__count { color: var(--color-due-strong); }
.tile--arrival { background: var(--color-arrival-soft); }
/* -strong (success statt occupancy-arrival) aus demselben Grund: 2,95:1 auf --color-arrival-soft. */
.tile--arrival .tile__count   { color: var(--color-success-strong); }
/* An-/Abreisen: Abreisen heute – eigene Kachel-Klasse statt des auf der Heute-Seite verwendeten
   tile--departure (dort orange, Dringlichkeits-basiert). Diese Seite färbt Abreisen konsequent rot
   ein (siehe .anab-section--departure), daher dieselbe rote Familie wie tile--critical/-overdue. */
.tile--departure-today { background: var(--color-critical-soft); }
.tile--departure-today .tile__count { color: var(--color-danger); }
/* Anreisen morgen (An-/Abreisen-Seite): bewusst blau statt grün, analog zum blauen Streifen der
   zugehörigen Sektion (siehe .anab-section--arrival-tomorrow), damit heute/morgen auf einen Blick
   unterscheidbar bleiben. */
.tile--arrival-tomorrow { background: var(--color-accent-soft); }
/* -strong (info-strong statt accent, siehe Kommentar dort) statt --color-accent: Basis-Ton erreicht
   auf --color-accent-soft nur 2,27:1 (WCAG-AA-Minimum für die Kachel-Zahl: 3:1). */
.tile--arrival-tomorrow .tile__count { color: var(--color-info-strong); }
.tile--bank { background: var(--color-accent-soft); }
.tile--bank .tile__count      { color: var(--color-info-strong); }
/* Rechnungsstatus-Kacheln (Invoices) – Farbe je Status deckt sich mit dem Zeilen-Streifen
   (arrival-stripe--*) und dem Status-Badge derselben Zeile (siehe InvoiceDisplay.GetStateBadge). */
.tile--draft { background: var(--color-info-soft); }
.tile--draft .tile__count     { color: var(--color-info-strong); }
.tile--open { background: var(--color-warning-soft); }
/* -strong statt --color-warning: Basis-Ton erreicht auf --color-warning-soft nur 2,52:1
   (WCAG-AA-Minimum für die Kachel-Zahl: 3:1). */
.tile--open .tile__count      { color: var(--color-warning-strong); }
.tile--overdue { background: var(--color-critical-soft); }
.tile--overdue .tile__count   { color: var(--color-danger); }
.tile--wire-transfer { background: var(--color-wire-transfer-soft); }
.tile--wire-transfer .tile__count { color: var(--color-wire-transfer); }
.tile--paid { background: var(--color-success-soft); }
/* -strong statt --color-success: Basis-Ton erreicht auf --color-success-soft nur 2,16:1
   (WCAG-AA-Minimum für die Kachel-Zahl: 3:1). */
.tile--paid .tile__count      { color: var(--color-success-strong); }
/* Booking.com-Kanal-Filter (Rechnungen) – ergänzt die Status-Kacheln um eine zweite, unabhängige
   Filterdimension (Kanal statt Status), daher eigene Farbe statt einer der obigen Statusfarben. */
.tile--booking { background: var(--color-booking-soft); }
.tile--booking .tile__count   { color: var(--color-booking); }
/* "Erledigt"-Filter (Rechnungen) – dritte, unabhängige Filterdimension (bezahlt UND zugestellt),
   bewusst neutral/grau statt einer Statusfarbe. */
.tile--done { background: var(--color-neutral-soft); }
.tile--done .tile__count      { color: var(--color-text-muted); }

/* Trennt die Rechnungsstatus-Kacheln (Entwurf/Offen/Überfällig/…) visuell von den beiden
   orthogonalen Zusatzfiltern Booking/Erledigt – sonst konkurrieren bis zu acht gleich große,
   unterschiedlich eingefärbte Kacheln gleichzeitig um Aufmerksamkeit (Gestaltgesetz der
   Prägnanz/Ähnlichkeit: Status ist die primäre Kategorie, Kanal/Erledigt sind Zusatzfilter). */
.tiles__divider {
    align-self: stretch;
    width: 1px;
    background: var(--color-border);
    margin: 0.15rem 0.2rem;
}

/* Zusatzfilter-Kacheln (Booking/Erledigt) – gestrichelter statt durchgezogener Rahmen, damit sie als
   "weiterer Filter" statt als weiterer Status-Kachel-Typ wahrgenommen werden. Der Hintergrund kommt
   wie bei allen anderen Kacheln von der jeweiligen tile--booking/tile--done-Regel oben (kein eigener
   transparenter Grund mehr – einheitliches Layout). */
.tile--secondary {
    border-style: dashed;
}
/* Zahlungsstatus-Kacheln (Zahlungen) */
.tile--unmatched { background: var(--color-critical-soft); }
.tile--unmatched .tile__count { color: var(--color-danger); }
.tile--overpaid { background: var(--color-due-soft); }
/* -strong statt --color-due – siehe Kommentar bei .tile--departure (identische Kombination). */
.tile--overpaid .tile__count  { color: var(--color-due-strong); }
.tile--settled { background: var(--color-success-soft); }
/* -strong statt --color-success – siehe Kommentar bei .tile--paid (identische Kombination). */
.tile--settled .tile__count   { color: var(--color-success-strong); }
/* Anreise-Dringlichkeits-Kacheln (Buchungen) */
.tile--arrival-soon { background: var(--color-critical-soft); }
.tile--arrival-soon .tile__count     { color: var(--color-danger); }
.tile--arrival-upcoming { background: var(--color-success-soft); }
/* -strong statt --color-success – siehe Kommentar bei .tile--paid (identische Kombination). */
.tile--arrival-upcoming .tile__count { color: var(--color-success-strong); }
.tile--arrival-later { background: var(--color-accent-soft); }
/* -strong (info-strong) statt --color-accent – siehe Kommentar bei .tile--arrival-tomorrow. */
.tile--arrival-later .tile__count    { color: var(--color-info-strong); }
/* Zahlungsabgleich-Kacheln – dieselbe Farbzuordnung wie die arrival-stripe--payment-*/-invoice-*-
   Streifen der Zeilen darunter: grün = Zahlungen mit Rechnungen, blau = Rechnungen ohne Zahlung,
   rot = Zahlungen ohne Beleg, pink = Dauerbuchungen (Baustein L). */
.tile--payment-matched { background: var(--color-success-soft); }
/* -strong statt --color-success – siehe Kommentar bei .tile--paid (identische Kombination). */
.tile--payment-matched .tile__count   { color: var(--color-success-strong); }
.tile--invoice-unmatched { background: var(--color-accent-soft); }
/* -strong (info-strong) statt --color-accent – siehe Kommentar bei .tile--arrival-tomorrow. */
.tile--invoice-unmatched .tile__count { color: var(--color-info-strong); }
.tile--payment-unmatched { background: var(--color-critical-soft); }
.tile--payment-unmatched .tile__count { color: var(--color-danger); }
.tile--standing-order { background: var(--color-pink-soft); }
.tile--standing-order .tile__count    { color: var(--color-pink); }

/* Aktiver Filter – auf allen Seiten mit Kachel-Filtern (Heute, An-/Abreisen,
   Rechnungen, Zahlungen, Buchungsbestätigungen) einheitlich orange umrandet,
   damit auf einen Blick erkennbar ist, dass gerade gefiltert wird. Der
   Rahmen ist bewusst dicker als der Standardrahmen, damit die Kachel auch
   bei ähnlicher Hintergrundfarbe klar als aktiv erkennbar bleibt. */
.tile.is-active {
    border-color: var(--color-warning);
    border-width: 2px;
}

@media (max-width: 640px) {
    .tile { min-width: 5.6rem; padding: 0.5rem 0.75rem; }
}

/* ── Fortschrittsanzeige (Heute, Zahlungen) ──────────────────────────────
   "X von Y erledigt" mit Balken – macht den Fortschritt seit dem letzten
   Laden auf einen Blick sichtbar (Goal-Gradient-Effekt: sichtbarer
   Fortschritt motiviert, eine Liste weiter abzuarbeiten). */
.progress-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.progress-summary__label {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.progress-summary__label strong {
    color: var(--color-text);
    font-weight: 650;
}

.progress-summary__track {
    flex: 1 1 auto;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    overflow: hidden;
}

.progress-summary__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-success);
    transition: width 0.5s ease;
}

/* ── Feed-Gruppen (Heute, Zahlungen, Rechnungen) ─────────────────────────
   Gemeinsames Muster für nach Status gruppierte Ein-Spalten-Listen: Kopf mit
   Farbpunkt + Label, Abstand zwischen den Gruppen. Zentral gehalten, damit
   alle drei Seiten dasselbe Erscheinungsbild teilen. */
.feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.feed__group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.feed__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    padding: 0 0.1rem;
}

/* Anreise-Dringlichkeits-Streifen am linken Rand einer Buchungszeile (Buchungen) */
.arrival-stripe { border-left-width: 4px; border-left-style: solid; }
.arrival-stripe--soon     { border-left-color: var(--color-danger); }
.arrival-stripe--upcoming { border-left-color: var(--color-success); }
.arrival-stripe--later    { border-left-color: var(--color-accent); }

/* Rechnungsstatus-Streifen (Rechnungen) – wiederverwendet dieselbe Basisklasse .arrival-stripe.
   Überweisung (lila) und Bezahlt (grün) sind bewusst unterschiedlich eingefärbt. */
.arrival-stripe--overdue       { border-left-color: var(--color-danger); }
.arrival-stripe--closed-unpaid { border-left-color: var(--color-warning); }
.arrival-stripe--open          { border-left-color: var(--color-info); }
.arrival-stripe--wire-transfer { border-left-color: var(--color-wire-transfer); }
.arrival-stripe--paid          { border-left-color: var(--color-success); }

/* Booking.com-Kanal-Hervorhebung (Rechnungen) – sanftes Blau als Zeilenhintergrund, unabhängig vom
   Status-Streifen links (siehe .arrival-stripe--*). :hover/:focus/:active von .list-group-item-action
   überschreiben sonst mit Bootstraps Grau-Tönen (höhere Selektor-Spezifität), daher hier explizit
   mitgeführt. Zentral gepflegt (var(--color-booking-soft)) zur Wiederverwendung auf anderen Listen. */
.invoice-row--booking { background-color: var(--color-booking-soft); }
.list-group-item-action.invoice-row--booking:hover,
.list-group-item-action.invoice-row--booking:focus,
.list-group-item-action.invoice-row--booking:active { background-color: var(--color-booking-soft); }

/* "Erledigt"-Hervorhebung (Rechnungen) – sanftes Grau als Zeilenhintergrund, hat Vorrang vor der
   Booking-Hervorhebung oben (in Invoices.razor werden die Klassen daher gegenseitig ausschließend
   vergeben statt beide gleichzeitig zu setzen). Zentral gepflegt (var(--color-done-soft)). */
.invoice-row--done { background-color: var(--color-done-soft); }
.list-group-item-action.invoice-row--done:hover,
.list-group-item-action.invoice-row--done:focus,
.list-group-item-action.invoice-row--done:active { background-color: var(--color-done-soft); }

/* Zahlungsstatus-Streifen (Zahlungen) – wiederverwendet dieselbe Basisklasse .arrival-stripe.
   Ungeklärt (rot) und in Mews unbezahlt (blau) sind bewusst unterschiedlich eingefärbt. */
.arrival-stripe--unmatched   { border-left-color: var(--color-danger); }
.arrival-stripe--automatched { border-left-color: var(--color-accent); }
.arrival-stripe--overpaid    { border-left-color: var(--color-due); }
.arrival-stripe--settled     { border-left-color: var(--color-success); }

/* Zahlungsabgleich-Streifen (Eingangsbeleg-Zahlungsabgleich) – gleiches Listenformat wie bei
   Zahlungen: grün = Zahlungen mit Rechnungen, blau = Rechnungen ohne Zahlung, rot = Zahlungen
   ohne Beleg, pink = Dauerbuchungen (Baustein L, siehe var(--color-pink)). */
.arrival-stripe--payment-matched   { border-left-color: var(--color-success); }
.arrival-stripe--invoice-unmatched { border-left-color: var(--color-accent); }
.arrival-stripe--payment-unmatched { border-left-color: var(--color-danger); }
.arrival-stripe--standing-order    { border-left-color: var(--color-pink); }

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.65;
    font-size: var(--fs-base);
    scroll-behavior: smooth;
}

/* ── Reduzierte Bewegung (WCAG 2.2 – 2.3.3 Animation from Interactions) ─────
   Wer in den Betriebssystem-Einstellungen "Bewegung reduzieren" aktiviert hat (vestibuläre
   Beeinträchtigung, aber auch schlicht Präferenz), bekommt Animationen/Übergänge praktisch
   verzögerungsfrei statt der vollen Dauer – betrifft u. a. .tile:hover, .progress-summary__fill,
   .btn, Fortschrittsbalken (workload-chart) und den "scroll-behavior: smooth" oben. Funktionale
   Zustandswechsel bleiben erhalten (kein "display: none"), nur ihre zeitliche Animation entfällt. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Ausnahme: .spinner-border (Bootstrap-Lade-Indikator) ist KEINE überflüssige
       Interaktions-Animation im Sinne von WCAG 2.3.3, sondern trägt selbst die gesamte Information
       "es lädt gerade" - anders als bei Hover-Effekten/Fortschrittsbalken geht ohne Drehung nicht nur
       der optische Schliff verloren, sondern die Statusanzeige komplett (wirkt wie ein
       fertig gerenderter, stehender Ring statt eines laufenden Vorgangs). */
    .spinner-border {
        animation-duration: 0.75s !important;
        animation-iteration-count: infinite !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* h2-h4/h6 waren bislang undefiniert – jede bisherige Verwendung im Projekt trägt bereits eine
   explizite Bootstrap-Größenklasse (z.B. <h2 class="h5">) und ist von diesen Defaults unberührt;
   sie greifen nur, falls künftig eine Überschrift ohne solche Klasse verwendet wird. */
h1 { font-size: var(--fs-2xl); margin-bottom: 1.25rem; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); font-weight: 600; }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-sm); font-weight: 600; }

h1:focus { outline: none; }

a, .btn-link {
    color: var(--color-primary-dark);
    text-decoration: none;
}

a:hover { color: var(--color-primary); }

/* ── Buttons ─────────────────────────────── */
.btn {
    border-radius: var(--radius-btn);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 0.18s, box-shadow 0.18s;
}

.btn-primary {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
    box-shadow: 0 1px 3px var(--shadow-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 2px 6px var(--shadow-primary-lg);
}

.btn-outline-secondary {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background-color: var(--color-surface-soft);
}
.btn-outline-secondary:hover {
    background-color: var(--color-surface);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.btn-sm { border-radius: 6px; font-size: 0.82rem; }

/* ── Cards ───────────────────────────────── */
.card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 18px;
    box-shadow: 0 2px 8px var(--shadow-text);
}
.card-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-radius: 18px 18px 0 0 !important;
    font-weight: 600;
    color: var(--color-text);
    padding: 1rem 1.25rem;
}
.card-body { padding: 1.25rem; }

/* ── Karten-Grid (Einstellungen, Benutzerverwaltung) ─────────────────────
   Gemeinsames Kachel-Grid-Muster für Listen aus gleichartigen Einträgen
   (DATEV-Konten, Portalregeln, ignorierte Bank-Absender, Benutzerliste).
   Basis-Maße entsprechen der Einstellungen-Seite; der Modifier --wide liefert
   die etwas breiteren/luftigeren Kacheln der Benutzerverwaltung (mehr Inhalt
   je Kachel: Name+Rolle+Badges+drei Kontaktzeilen+Aktionen). */
.con4-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.6rem;
}

.con4-card-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--space-3);
}

.con4-card-grid__item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.con4-card-grid--wide > .con4-card-grid__item {
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
}

/* Kopf-/Aktionszeile innerhalb einer .con4-card-grid__item-Kachel – war byte-identisch als
   .uv-card__header/__actions (Benutzerverwaltung) und .settings-rule-card__head/__actions
   (Einstellungen) dupliziert, jetzt einmal zentral. */
.con4-card-grid__item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.con4-card-grid__item-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.25rem;
}

/* ── Badges ──────────────────────────────── */
.badge.bg-primary   { background-color: var(--color-primary)   !important; }
.badge.bg-success   { background-color: var(--color-success-strong) !important; }
.badge.bg-warning   { background-color: var(--color-warning)   !important; color: var(--color-white) !important; }
.badge.bg-danger    { background-color: var(--color-danger-strong)  !important; }
.badge.bg-info      { background-color: var(--color-info-strong)    !important; color: var(--color-white) !important; }
.badge.bg-secondary { background-color: var(--color-surface)   !important; color: var(--color-text) !important; border: 1px solid var(--color-border); }

/* Bootstrap 5.1 kennt die text-bg-*-Utilities (erst ab 5.3) noch nicht - ohne diese Regeln
   bleibt der Badge-Hintergrund transparent, waehrend .badge weissen Text erzwingt (unlesbar). */
.badge.text-bg-primary     { background-color: var(--color-primary)   !important; color: var(--color-white) !important; }
.badge.text-bg-success     { background-color: var(--color-success-strong) !important; color: var(--color-white) !important; }
.badge.text-bg-warning     { background-color: var(--color-warning)   !important; color: var(--color-white)  !important; }
.badge.text-bg-danger      { background-color: var(--color-danger-strong)  !important; color: var(--color-white) !important; }
.badge.text-bg-info        { background-color: var(--color-info-strong)    !important; color: var(--color-white) !important; }
.badge.text-bg-secondary   { background-color: var(--color-text-muted) !important; color: var(--color-white) !important; }

/* Zusätzliche Kennzeichnung für Gutschriften (Rechnungen) – Storno nutzt das bereits vorhandene
   .badge.bg-danger (Rot), für Gutschriften gibt es sonst keine "Orange"-Bootstrap-Klasse. */
.badge.badge-orange { background-color: var(--color-due) !important; color: var(--color-white) !important; }

/* Statusbadge "Überweisung" (Rechnungen) – eigener Lila-Ton statt .bg-primary, damit er sich klar
   von den generischen Primary-Badges anderer Seiten (z. B. "läuft") und vom neuen Booking-Badge
   unterscheidet. Zentral gepflegt (var(--color-wire-transfer)) zur Wiederverwendung auf anderen Listen. */
.badge.badge-wire-transfer { background-color: var(--color-wire-transfer) !important; color: var(--color-white) !important; }

/* Kanal-Badge "Booking" (Rechnungen) – kennzeichnet Gastadressen auf @guest.booking.com
   (siehe BookingEmailAddress), sattes Blau mit weißer Schrift. Zentral gepflegt
   (var(--color-booking)) zur Wiederverwendung auf anderen Listen (z. B. An-/Abreisen). */
.badge.badge-booking { background-color: var(--color-booking) !important; color: var(--color-white) !important; }

/* Kategorie-Badge "Dauerbuchung" (Zahlungsabgleich, Baustein L) – siehe var(--color-pink). */
.badge.badge-pink { background-color: var(--color-pink) !important; color: var(--color-white) !important; }

.badge.fs-6 { font-size: 0.9rem !important; padding: 0.45em 0.85em; border-radius: var(--radius-btn); }

/* ── Buttons ─────────────────────────────── */
/* Aktive Sprachauswahl "EN" (Buchungen/Stornierungen/Angebote, PDF-Sprache) – dunkles Blau statt
   dem grauen .btn-secondary der aktiven "DE"-Auswahl, damit die aktuell gewählte Fremdsprache auf
   einen Blick auffällt. */
.btn.btn-lang-en-active { background-color: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; color: var(--color-white) !important; }

/* Bestätigungs-Button "Dauerbuchung" (Zahlungsabgleich, Baustein L) – gleicher Pink-Ton wie
   .badge-pink, damit die Kategorie-Farbe auch bei der auslösenden Aktion konsistent ist. */
.btn.btn-pink { background-color: var(--color-pink) !important; border-color: var(--color-pink) !important; color: var(--color-white) !important; }

/* ── Alleinstehende Aktions-Knöpfe: weißer Hintergrund, Rand/Schrift in Aktionsfarbe ──────
   Zentrales Muster für einzeln stehende Aktions-Buttons (kein Paar wie Bestätigen/Ablehnen,
   das bewusst durch Volltonfarbe hervorgehoben bleibt): immer weißer Hintergrund, immer
   .btn-sm-Höhe (keine einzelnen py-0-Ausnahmen mehr innerhalb einer Knopf-Zeile), Rand und
   Schrift in der jeweiligen Aktionsfarbe. Bootstraps btn-outline-primary/-success/-danger/-dark
   liefern dieses Aussehen bereits standardmäßig – hier nur die eine Farbe ergänzt, die
   Bootstrap nicht kennt (Orange, siehe .badge-orange/var(--color-due)). */
.btn.btn-outline-orange {
    background-color: var(--color-white) !important;
    border-color: var(--color-due) !important;
    color: var(--color-due) !important;
}
.btn.btn-outline-orange:hover, .btn.btn-outline-orange:focus {
    background-color: var(--color-due-soft) !important;
    border-color: var(--color-due) !important;
    color: var(--color-due) !important;
}

/* Grau gefüllter Aktions-Knopf für "Wert setzen"/"Suchen"-Aktionen neben einem Eingabefeld
   (z. B. "Teilbetrag setzen", "Suchen") – bewusst KEIN alleinstehender Knopf im Sinne des
   Musters oben (Aktion gehört zu einem Eingabefeld, nicht zu sich selbst), daher grauer
   Hintergrund/weiße Schrift statt weißem Hintergrund. Eigene Klasse statt des bereits
   anderweitig für Abbrechen/Schließen genutzten .btn-secondary, damit beide Bedeutungen
   (Eingabe-Aktion vs. Dialog-Abbruch) unabhängig voneinander gestaltet werden können. */
.btn.btn-gray-action {
    background-color: var(--color-text-muted) !important;
    border-color: var(--color-text-muted) !important;
    color: var(--color-white) !important;
}
.btn.btn-gray-action:hover, .btn.btn-gray-action:focus {
    background-color: var(--color-text) !important;
    border-color: var(--color-text) !important;
    color: var(--color-white) !important;
}

/* ── Zeilen aus Text + rechtsbündigen Aktions-Knöpfen ──────────────────────────────────
   Zentrales Layout-Muster für Listenzeilen mit Freitext (Belegtext, Referenz, o. Ä.) neben
   einer Knopfgruppe: die Knöpfe müssen bei langem Text immer rechts stehen und dürfen NIE auf
   eine neue Zeile unterhalb des Texts springen. .flexline-text wächst/schrumpft und bricht
   Text intern um (min-width:0 verhindert, dass Flexbox das Schrumpfen verweigert);
   .flexline-actions bleibt in fester Breite rechts stehen (flex-shrink:0) und bricht bei
   eigenem Platzmangel nur innerhalb der eigenen Knopfgruppe um, nie als Ganzes nach unten-links.
   Der umgebende Container braucht dafür KEIN .flex-wrap mehr (siehe Anwendungsstellen). */
.flexline-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.flexline-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Alerts ──────────────────────────────── */
.alert-danger    { background: var(--color-alert-danger-bg); border-color: var(--color-alert-danger-border); color: var(--color-alert-danger-text); border-radius: 12px; }
.alert-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted); border-radius: 12px; }

/* ── Tables ──────────────────────────────── */
.table {
    --bs-table-bg:           var(--color-surface-soft);
    --bs-table-striped-bg:   var(--stripe-primary);
    --bs-table-hover-bg:     var(--hover-accent);
    --bs-table-border-color: var(--color-border);
    color: var(--color-text);
    font-size: 0.9rem;
}
.table > :not(caption) > * > * { padding: 0.6rem 0.75rem; }

.table-light {
    --bs-table-bg:           var(--color-surface);
    --bs-table-border-color: var(--color-border);
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table-secondary {
    --bs-table-bg:           var(--stripe-primary-lg);
    --bs-table-border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* Vertikal scrollende Tabellen-Panels (Kreditkartenabrechnung, Systemstatus) – eigene Klasse statt
   nur "overflow-y: auto" per Inline-Style, damit der Tabellenkopf beim Scrollen sichtbar bleibt
   (Nielsen: "Recognition rather than recall" – Spaltenköpfe wie "#/Datum/Händler/Betrag/Status"
   verschwinden sonst in langen Listen). Die Höhe (max-height) bleibt je Stelle als Inline-Style,
   da sie sich unterscheidet. */
.table-scroll-y {
    overflow-y: auto;
}
.table-scroll-y thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    /* Undurchsichtiger Grund nötig, damit darunter weggescrollte Zeilen nicht durchscheinen. */
    background: var(--color-surface-soft);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--hover-accent);
}

/* ── Skeleton (LoadingErrorPanel, UseSkeleton) ───────────────────────────
   Wandernder Hell-/Dunkel-Verlauf statt statischem Grau, damit klar erkennbar bleibt "es lädt
   noch" statt es könnte ein fertig gerendertes, leeres Element sein. Läuft unter
   prefers-reduced-motion praktisch verzögerungsfrei (siehe globale Regel weiter oben). */
.skeleton-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0;
}

.skeleton-line {
    height: 1rem;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-border) 37%, var(--color-surface) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Forms ───────────────────────────────── */
.form-control, .form-select {
    background-color: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    color: var(--color-text);
    font-size: 0.92rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--stripe-primary-focus);
    background-color: var(--color-white);
}

/* ── Spinner ─────────────────────────────── */
.spinner-border { color: var(--color-primary); }

/* ── Content area ────────────────────────── */
.content { padding-top: 1.5rem; }

/* ── Validation ──────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-primary); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); }

/* ── Error UI ────────────────────────────── */
#blazor-error-ui {
    background: var(--color-surface);
    border-top: 2px solid var(--color-accent);
    bottom: 0; left: 0;
    box-shadow: 0 -2px 8px var(--shadow-text-lg);
    display: none;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: var(--color-text);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--color-white);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ── Breakfast Cards ─────────────────────── */
.bf-section { margin-bottom: var(--space-6); }

.bf-section__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    margin-bottom: var(--space-3);
    color: var(--color-white);
    font-size: 1.05rem;
    font-weight: 600;
}

.bf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.6rem;
}

.bf-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bf-card__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3rem;
}

.bf-card__room {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.bf-card__count {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.bf-card__note-left {
    font-size: 1rem;
    font-weight: 600;
    /* War #c2610a (~4,19:1 auf Weiß) – knapp unter dem WCAG-AA-Minimum 4,5:1 für Fließtext
       (Schriftgröße/-schnitt hier zu klein für die "große Text"-Schwelle 3:1). */
    color: #9A4A08;
    line-height: 1.2;
    text-align: center;
    margin-top: 0.35rem;
}

.bf-card--grouped {
    padding-left: calc(0.9rem - 4px);
}

.bf-card__right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* white-space/overflow/text-overflow kommen über die Bootstrap-Utility-Klasse .text-truncate
   (siehe Markup) statt hier dupliziert zu werden. */
.bf-card__guest {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
}

.bf-card__note {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.bf-limit-hint {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.4rem;
}

/* ── Room Cards (Housekeeping) ───────────── */
.room-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.55rem;
}

.room-card {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.room-card--arrival        { border-left-color: var(--color-occupancy-arrival); }
.room-card--stayover       { border-left-color: var(--color-occupancy-stayover); }
.room-card--departure      { border-left-color: var(--color-occupancy-departure); }
.room-card--arrivalanddeparture { border-left-color: var(--color-occupancy-departure); }
.room-card--free           { border-left-color: var(--color-border); }

.room-card__number {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.room-card__occupancy {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.room-card__guests {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

/* ── HK-Status Badge ─────────────────────── */
.hk-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2em 0.6em;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.hk-badge--clean       { background: var(--color-hk-clean);        color: #0C4A6E; }
.hk-badge--dirty       { background: var(--color-hk-dirty);        color: #7F1D1D; }
.hk-badge--inspected   { background: var(--color-hk-inspected);    color: #14532D; }
.hk-badge--outoforder  { background: var(--color-hk-outoforder);   color: #334155; }
.hk-badge--outofservice{ background: var(--color-hk-outofservice); color: #78350F; }
/* -strong statt --color-text-muted: Basis-Ton erreicht auf --color-surface nur 4,11:1
   (WCAG-AA-Minimum: 4,5:1) – siehe Kommentar bei --color-text-muted-strong. */
.hk-badge--unknown     { background: var(--color-surface); color: var(--color-text-muted-strong); }

/* ── Gantt ──────────────────────────────────────────────────── */
.gantt-wrap {
    background: #E2E8F0;
    border-radius: 12px;
    border: 1px solid #64748B;
    box-shadow: 0 2px 12px var(--shadow-text-lg);
    overflow: hidden;
}

.gantt-scroll {
    overflow-x: auto;
}

.gantt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.gantt-th {
    padding: 0.6rem 0.75rem;
    background: #E2E8F0;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #CBD5E1;
    white-space: nowrap;
}

.gantt-th--room { width: 5rem; text-align: center; border-right: 1px solid #64748B; }
.gantt-th--day  { position: relative; min-width: 7.5rem; text-align: center; border-right: 1px solid #64748B; background: #FFFFFF; }
.gantt-th--day:last-child { border-right: none; }

.gantt-cell--day { background: #FFFFFF; }

/* Heutiger Tag – transparentes Grün, analog zu Dashboard/Vorschau.
   Weißer Untergrund + Grün-Verlauf statt reinem rgba-Hintergrund: sonst würde die Transparenz
   gegen den grauen .gantt-wrap-Hintergrund (statt gegen Weiß wie bei den anderen Tagen) gemischt
   und wirkt gräulich statt grün. */
.gantt-th--today,
.gantt-cell--today {
    background-color: #FFFFFF;
    background-image: linear-gradient(var(--color-today-bg), var(--color-today-bg));
}

.gantt-th__today-badge {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-occupancy-arrival);
}

.gantt-day-label { font-size: 0.78rem; font-weight: 600; color: var(--color-text); }

.gantt-day-badges {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 4px;
}

.gantt-badge {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.gantt-badge--arrival    { background: var(--color-occupancy-arrival); }
.gantt-badge--stayover   { background: var(--color-occupancy-stayover); }
.gantt-badge--departure  { background: var(--color-occupancy-departure); }

.gantt-row { border-bottom: 1px solid #CBD5E1; }
.gantt-row:last-child { border-bottom: none; }
.gantt-row:hover { background: #D1D9E6; }
.gantt-row--spacer { pointer-events: none; }
.gantt-row--spacer td { border-top: 1px solid #CBD5E1; border-bottom: 1px solid #CBD5E1; }

.gantt-cell {
    padding: 0;
    vertical-align: middle;
}

.gantt-cell--room {
    padding: 0.2rem 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-text);
    background: var(--hk-color, transparent);
    border-right: 1px solid #64748B;
    white-space: nowrap;
    cursor: pointer;
}


.gantt-cell__hk-label {
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    line-height: 1;
    margin-bottom: 0.1rem;
}

.gantt-cell--day {
    position: relative;
    height: 1.7rem;
    border-right: 1px solid #64748B;
}
.gantt-cell--day:last-child { border-right: none; }

.gantt-bar {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 4px;
}

.gantt-bar--stayover  { left: 2px; right: 2px; background: var(--color-occupancy-stayover); opacity: 0.75; }
.gantt-bar--arrival   { left: 60%; right: 2px; background: var(--color-occupancy-arrival);
                         display: flex; align-items: center; justify-content: center; }
.gantt-bar--departure { left: 2px; right: 60%; background: var(--color-occupancy-departure); }

.gantt-bar--half-left  { left: 2px; right: 60%; }
.gantt-bar--half-right { left: 60%; right: 2px; display: flex; align-items: center; justify-content: center; }

.gantt-bar__persons {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

/* Legende */
.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.gantt-legend__item { display: flex; align-items: center; gap: 5px; }
.gantt-legend__item--hk { margin-left: var(--space-2); }

.gantt-legend__dot {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.gantt-legend__dot--arrival   { background: var(--color-occupancy-arrival); }
.gantt-legend__dot--stayover  { background: var(--color-occupancy-stayover); }
.gantt-legend__dot--departure { background: var(--color-occupancy-departure); }

/* ── Reinigungs-/Kontroll-Vorschau (Balkendiagramm) ──────────────────────── */
.workload-chart {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1rem;
    box-shadow: 0 2px 8px var(--shadow-text);
}

.workload-chart__plot {
    position: relative;
    height: 260px;
    margin: 0 0.5rem 0.5rem 2.2rem;
}

.workload-chart__gridline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--color-border);
}

.workload-chart__gridline-label {
    position: absolute;
    left: -2.2rem;
    top: -0.55rem;
    width: 1.8rem;
    text-align: right;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.workload-chart__bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.workload-chart__day {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    border-radius: 6px;
}

/* Tag mit Arbeitsaufwand über dem Schwellenwert – 2. Servicekraft nötig */
.workload-chart__day--overloaded {
    background: rgba(249, 115, 22, 0.12);
}

.workload-chart__day--overloaded .workload-chart__day-weekday,
.workload-chart__day--overloaded .workload-chart__day-date {
    color: var(--color-warning);
    font-weight: 700;
}

/* Heutiger Tag – transparentes Grün, analog zum Orange der 2.-Servicekraft-Kennzeichnung */
.workload-chart__day--today {
    background: var(--color-today-bg);
}

.workload-chart__day--today .workload-chart__day-weekday,
.workload-chart__day--today .workload-chart__day-date {
    color: var(--color-occupancy-arrival);
    font-weight: 700;
}

.workload-chart__day-top-labels {
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    z-index: 3;
}

.workload-chart__day-top-label {
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}

.workload-chart__day-top-label--today       { color: var(--color-occupancy-arrival); }
.workload-chart__day-top-label--overloaded  { color: var(--color-warning); }

.workload-chart__bar-group {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
}

.workload-chart__bar {
    position: relative;
    width: 2.55rem;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    transition: height 0.2s;
}

.workload-chart__bar--clean { background: var(--color-primary); }
.workload-chart__bar--iron  { background: rgba(139, 92, 246, 0.25); }
.workload-chart__bar--check { background: #64748B; }

.workload-chart__bar-value {
    position: absolute;
    top: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.workload-chart__day-label {
    position: absolute;
    top: 100%;
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
}

.workload-chart__day-weekday {
    font-weight: 600;
    color: var(--color-text);
    text-transform: capitalize;
}

.workload-chart__day-date {
    color: var(--color-text-muted);
}

.workload-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: 2.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.workload-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.workload-chart__legend-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
}

.workload-chart__legend-dot--clean { background: var(--color-primary); }
.workload-chart__legend-dot--check { background: #64748B; }
.workload-chart__legend-dot--iron  { background: rgba(139, 92, 246, 0.25); }

.workload-chart__legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
}

.workload-chart__legend-swatch--overloaded {
    background: rgba(249, 115, 22, 0.35);
    border: 1px solid var(--color-warning);
}

/* ── Housekeeping Cards ─────────────────────────────────────── */
.hk-date-label {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    font-weight: 400;
    white-space: nowrap;
}

.hk-date-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.5rem;
}

.hk-date-nav__btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-primary);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-pill);
    transition: background 0.15s;
}

.hk-date-nav__btn:hover:not(:disabled) { background: var(--stripe-primary-lg); }
.hk-date-nav__btn:disabled { color: var(--color-text-muted); cursor: default; opacity: 0.4; }

.hk-date-nav__label {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    min-width: 13rem;
    text-align: center;
}
.hk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.hk-card {
    background: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 1px 6px var(--shadow-text);
    padding: 0.7rem 0.8rem 0.65rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid var(--color-border);
    border-top: 3px solid transparent;
    transition: box-shadow 0.15s, background-color 0.15s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Kachel immer mindestens quadratisch (Höhe >= Breite); wächst mit Inhalt, schrumpft nie darunter. */
    aspect-ratio: 1 / 1;
    min-height: min-content;
}

/* freies Zimmer: hellgrauer Hintergrund */
.hk-card--vacant {
    background: #F8FAFC;
    box-shadow: none;
    border-top-color: #CBD5E1;
}

/* Reinigungsfortschritt per Kachel-Klick: 1. Klick = wird geputzt (orange), 2. Klick = fertig (blasses Grün) */
.hk-card--cleaning-in-progress {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.55), rgba(253, 186, 116, 0.3));
}

.hk-card--cleaning-done {
    background: #DCFCE7;
    cursor: default;
}

/* Explizite Reinigungs-Aktion unten rechts – quadratisch, leicht abgerundet */
/* Name des abreisenden Gastes – immer unten links, in Rot */
/* white-space/overflow/text-overflow kommen über die Bootstrap-Utility-Klasse .text-truncate
   (siehe Markup) statt hier dupliziert zu werden. */
.hk-card__departing-guest {
    position: absolute;
    left: 1.1rem;
    bottom: 0.65rem;
    right: 2.5rem;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-occupancy-departure);
}

.hk-card__cleaning-btn {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    transition: filter 0.15s, transform 0.1s;
    z-index: 1;
}

.hk-card__cleaning-btn:hover  { filter: brightness(0.93); }
.hk-card__cleaning-btn:active { transform: scale(0.94); }

.hk-card__cleaning-btn--start {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.85), rgba(253, 186, 116, 0.7));
}

.hk-card__cleaning-btn--complete {
    background: #4ADE80;
}

.hk-card__cleaning-error {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.55rem;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.7rem;
    line-height: 1.15;
    color: #b91c1c;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    padding: 0.15rem 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
}

/* Gleicher Grün-Akzent wie der Fertig-Knopf auf den Zimmer-Kacheln, für Buttons außerhalb der Kachel
   (z. B. "Erledigt" in der Aufgabenliste) – auffälliger als ein reiner Outline-Button. */
.btn-cleaning-done {
    background: #4ADE80;
    border-color: #4ADE80;
    color: #fff;
}

.btn-cleaning-done:hover,
.btn-cleaning-done:focus {
    background: #22C55E;
    border-color: #22C55E;
    color: #fff;
}

.hk-card:hover { box-shadow: 0 3px 12px var(--shadow-text-lg); }

.hk-card--dirty       { border-top-color: var(--color-hk-dirty); }
.hk-card--clean       { border-top-color: var(--color-hk-clean); }
.hk-card--inspected   { border-top-color: var(--color-hk-inspected); }
.hk-card--outoforder  { border-top-color: var(--color-hk-outoforder); }
.hk-card--outofservice{ border-top-color: var(--color-hk-outofservice); }
.hk-card--unknown     { border-top-color: var(--color-border); }

.hk-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.hk-card__number {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.hk-card__status {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2em 0.55em;
    border-radius: var(--radius-pill);
}

.hk-card__status--dirty       { background: var(--color-hk-dirty);        color: #7F1D1D; }
.hk-card__status--clean       { background: var(--color-hk-clean);        color: #0C4A6E; }
.hk-card__status--inspected   { background: var(--color-hk-inspected);    color: #14532D; }
.hk-card__status--outoforder  { background: var(--color-hk-outoforder);   color: #334155; }
.hk-card__status--outofservice{ background: var(--color-hk-outofservice); color: #78350F; }
.hk-card__status--unknown     { background: var(--color-surface); color: var(--color-text-muted); }
.hk-card__status--stayover-check { background: #E2E8F0; color: #000000; }

.hk-card__status--toggle {
    cursor: pointer;
    user-select: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: inherit;
    line-height: 1;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
    transition: opacity 0.15s, filter 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.hk-card__status--toggle:hover,
.hk-card__status--toggle:focus-visible { opacity: 0.85; filter: brightness(0.95); outline: 2px solid var(--color-border); }
.hk-card__status--toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.hk-card__status--toggle:active { opacity: 0.7; }
.hk-card__status-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: hk-spin 0.6s linear infinite;
    flex-shrink: 0;
}
@keyframes hk-spin { to { transform: rotate(360deg); } }

.hk-card__category {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: -0.1rem;
}

.hk-card__guests {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-text);
    font-weight: 500;
    margin-top: var(--space-1);
}

.hk-card__guest-name {
    font-weight: 700;
}

.hk-card__guest-icon--arrival  { color: var(--color-occupancy-arrival); }
.hk-card__guest-icon--stayover { color: var(--color-occupancy-stayover); }
.hk-card__guest-icon--departure{ color: var(--color-occupancy-departure); }

.hk-card__persons {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.hk-card__note {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.72rem;
    padding: 0.18em 0.45em;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hk-card__note--res     { background: var(--stripe-primary); color: var(--color-primary-dark); }
.hk-card__note--profile { background: var(--hover-accent);   color: var(--color-text); }

.hk-card__icon { font-style: normal; flex-shrink: 0; }

.hk-card__vacant {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.2rem;
}

/* linker Belegungs-Streifen */
.hk-card__occ-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
}

.hk-card__occ-bar--arrival    { background: var(--color-occupancy-arrival); }
.hk-card__occ-bar--stayover   { background: var(--color-occupancy-stayover); }
.hk-card__occ-bar--departure  { background: var(--color-occupancy-departure); }

/* bei Abreise+Anreise: erstes Bar = untere Hälfte Abreise, zweites Bar = obere Hälfte Anreise */
.hk-card__occ-bar--departure:nth-child(1) {
    top: 50%;
    bottom: 0;
    background: var(--color-occupancy-departure);
}
.hk-card__occ-bar--arrival.hk-card__occ-bar--top {
    top: 0;
    bottom: 50%;
    background: var(--color-occupancy-arrival);
}

/* Belegungs-Label unter Kategorie */
.hk-card__occ-labels {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.hk-card__occ-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15em 0.5em;
    border-radius: var(--radius-pill);
    align-self: flex-start;
}

.hk-card__occ-label--arrival  { background: var(--color-occupancy-arrival);   color: #fff; }
.hk-card__occ-label--stayover { background: var(--color-occupancy-stayover);  color: #fff; }
.hk-card__occ-label--departure{ background: var(--color-occupancy-departure); color: #fff; }
.hk-card__occ-label--free     { display: none; }

/* ── Day Dashboard ─────────────────────────────────────────────────────────── */
.day-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.day-card {
    position: relative;
    max-width: 340px;
    background: #FFFFFF;
    border: 1px solid #64748B;
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem 1rem;
    box-shadow: 0 4px 16px rgba(15,23,42,0.10), 0 1px 4px rgba(15,23,42,0.06);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Heutiger Tag – transparentes Grün, analog zur Vorschau-Kennzeichnung */
.day-card--today {
    background: var(--color-today-bg);
}

.day-card__today-badge {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-occupancy-arrival);
}

.day-card__date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.15rem;
}

.day-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.day-card__stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 0.5rem;
    padding: 0.25rem 0.6rem;
    color: var(--color-text);
}

.day-card__stat-icon {
    font-size: 1rem;
    line-height: 1;
}

.day-card__stat-value {
    font-weight: 700;
    font-size: 0.95rem;
}

.day-card__arrivals {
    margin-top: var(--space-1);
    border-top: 1px solid #CBD5E1;
    padding-top: 0.5rem;
}

.day-card__arrivals-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}

.day-card__arrival-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.day-card__arrival-item {
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
}

.day-card__room-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border-radius: 0.35rem;
    padding: 0.05em 0.45em;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 2rem;
    text-align: center;
}

/* Sections innerhalb der Day-Card */
.day-card__section {
    padding-top: 0.5rem;
    min-width: 0;
}

.day-card__section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    margin-bottom: var(--space-1);
}

.day-card__section-title {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}

.day-card__section-count {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text);
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-pill);
    padding: 0.05em 0.55em;
    min-width: 1.5rem;
    text-align: center;
}

.day-card--service-tasks .day-card__section-count {
    background: var(--color-surface-soft);
    border-color: var(--color-border);
}

.day-card__detail-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    width: 100%;
}

.day-card__detail-list--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    min-width: 0;
    width: 100%;
}

.day-card__detail-item {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text);
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 0.4rem;
    padding: 0.1em 0.5em;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.day-card--service-tasks .day-card__detail-item {
    background: var(--color-surface-soft);
    border-color: var(--color-border);
}

/* ── Service-Task Farbklassen ────────────────────────────────────────────── */
/* Verwenden die bestehenden CSS-Variablen für konsistentes Erscheinungsbild (--color-warning ist
   im zentralen :root oben definiert). */
.task--overdue {
    color: var(--color-danger);
    font-weight: 500;
}

.task--due-soon {
    color: var(--color-warning);
}

.task--completed-today {
    color: var(--color-success);
}

/* Service-Task-Karte im Dashboard – bleibt grau, unabhängig vom heutigen Tag */
.day-card--service-tasks {
    background: var(--color-border-strong);
    box-shadow: 0 2px 8px var(--shadow-text);
    border-left: 3px solid var(--color-warning);
}

/* ── Dialog / Modal ────────────────────────────────────────────────────── */

.con4-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);   /* dunkles Slate, dezent */
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: var(--space-4);
}

.con4-modal {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18);
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.con4-modal--lg {
    max-width: 640px;
}

.con4-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.875rem 1rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}

.con4-modal__header span {
    flex: 1;
}

.con4-modal__close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0 0.25rem;
}

.con4-modal__close:hover {
    color: var(--color-text);
}

.con4-modal__task-info {
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.con4-modal__task-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.con4-modal__task-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.con4-modal__body {
    padding: var(--space-4);
    overflow-y: auto;
    min-height: 0;
}

.con4-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* Handy: Dialog füllt den ganzen Bildschirm */
@media (max-width: 575.98px) {
    .con4-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .con4-modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0.75rem 0.75rem 0 0;
        min-height: 60vh;
    }

    .con4-modal__body {
        flex: 1;
    }
}

/* E-Mail-Editor */
[contenteditable]:focus {
    outline: 2px solid #0d6efd;
    border-color: #0d6efd !important;
}