/* =========================================================
   RH+ Design-System – EIN Farbschema für Hell und Dunkel

   Aufbau:
   1. Farb-Tokens je Theme (.app-root.theme-light / .theme-dark)
   2. Abbildung auf Bootstrap-Variablen (damit Bootstrap-Bausteine automatisch passen)
   3. Bausteine: Formulare, Auswahlfelder, Haken/Radio/Schalter, Tabellen, Badges, Alerts,
      Buttons, Karten, Geldbeträge
   4. Seitenrahmen (Kopf, Brotkrumen, Aktionsleiste)

   Regel: Neue Farben NUR als Token hier eintragen, nie als feste Farbe in einer Seite.
   Alle Textfarben erreichen mindestens Kontrast 4,5:1 (normaler Text) gegen ihre Fläche.
   Nur diese Datei steuert die Farben; die Hell/Dunkel-Umschaltung setzt .theme-* UND
   data-bs-theme am .app-root (MainLayout), damit auch Bootstrap-eigene Elemente
   (Haken, Pfeile, Datumsfelder) die richtige Variante nehmen.
========================================================= */

/* ---------- 1. Tokens ---------- */

.app-root {
    --rh-accent: #4f46e5;
    --rh-accent-fg: #ffffff;
}

.app-root.theme-light {
    color-scheme: light;
    --rh-surface: #ffffff;
    --rh-surface-2: #f1f4f9;
    --rh-text: #111827;
    --rh-muted: #4b5563;
    --rh-border: rgba(17, 24, 39, .16);
    --rh-border-strong: rgba(17, 24, 39, .42);
    --rh-input-bg: #ffffff;
    --rh-row-hover: rgba(79, 70, 229, .07);
    --rh-link: #4338ca;
    --rh-focus: rgba(79, 70, 229, .40);
    --rh-shadow: 0 .15rem .6rem rgba(15, 23, 42, .08);

    --rh-ok-fg: #14532d;      --rh-ok-bg: #dcfce7;      --rh-ok-bd: #86efac;
    --rh-warn-fg: #713f12;    --rh-warn-bg: #fef3c7;    --rh-warn-bd: #fcd34d;
    --rh-danger-fg: #7f1d1d;  --rh-danger-bg: #fee2e2;  --rh-danger-bd: #fca5a5;
    --rh-info-fg: #1e3a8a;    --rh-info-bg: #dbeafe;    --rh-info-bd: #93c5fd;
    --rh-neutral-fg: #1f2937; --rh-neutral-bg: #e5e7eb; --rh-neutral-bd: #cbd5e1;
    --rh-accent-fg-soft: #3730a3; --rh-accent-bg-soft: #e0e7ff; --rh-accent-bd-soft: #a5b4fc;
}

.app-root.theme-dark {
    color-scheme: dark;
    --rh-surface: #141821;
    --rh-surface-2: #1b2130;
    --rh-text: #e6edf3;
    --rh-muted: #aab4c3;
    --rh-border: rgba(255, 255, 255, .14);
    --rh-border-strong: rgba(255, 255, 255, .42);
    --rh-input-bg: #0b1220;
    --rh-row-hover: rgba(129, 140, 248, .14);
    --rh-link: #a5b4fc;
    --rh-focus: rgba(129, 140, 248, .55);
    --rh-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .35);

    --rh-ok-fg: #86efac;      --rh-ok-bg: rgba(34, 197, 94, .18);   --rh-ok-bd: rgba(34, 197, 94, .55);
    --rh-warn-fg: #fcd34d;    --rh-warn-bg: rgba(245, 158, 11, .18); --rh-warn-bd: rgba(245, 158, 11, .55);
    --rh-danger-fg: #fca5a5;  --rh-danger-bg: rgba(239, 68, 68, .20); --rh-danger-bd: rgba(239, 68, 68, .55);
    --rh-info-fg: #93c5fd;    --rh-info-bg: rgba(59, 130, 246, .20);  --rh-info-bd: rgba(59, 130, 246, .55);
    --rh-neutral-fg: #d5dbe6; --rh-neutral-bg: rgba(148, 163, 184, .20); --rh-neutral-bd: rgba(148, 163, 184, .45);
    --rh-accent-fg-soft: #c7d2fe; --rh-accent-bg-soft: rgba(99, 102, 241, .24); --rh-accent-bd-soft: rgba(129, 140, 248, .55);
}

/* ---------- 2. Bootstrap-Variablen ---------- */

.app-root {
    color: var(--rh-text);
    --bs-body-color: var(--rh-text);
    --bs-body-bg: var(--rh-surface);
    --bs-emphasis-color: var(--rh-text);
    --bs-secondary-color: var(--rh-muted);
    --bs-secondary-bg: var(--rh-surface-2);
    --bs-tertiary-bg: var(--rh-surface-2);
    --bs-border-color: var(--rh-border);
    --bs-link-color: var(--rh-link);
    --bs-link-hover-color: var(--rh-link);
    --bs-focus-ring-color: var(--rh-focus);
}

.app-root .text-muted,
.app-root .form-text {
    color: var(--rh-muted) !important;
}

/* Signalfarben für Text aus den Tokens (Auftrag 68, D7): Bootstrap-Rot #dc3545 erreicht auf dunklem Grund nur 4:1 */
.app-root .text-danger { color: var(--rh-danger-fg) !important; }
.app-root .text-success { color: var(--rh-ok-fg) !important; }
.app-root .text-warning { color: var(--rh-warn-fg) !important; }
.app-root .text-info { color: var(--rh-info-fg) !important; }

/* Code-Schnipsel (Feldnamen, Pfade): Bootstrap-Pink #d63384 erreicht auf getönten Flächen nur 3,5–4,4:1 */
.app-root.theme-light code { color: #9d174d; }
.app-root.theme-dark code { color: #f9a8d4; }

.app-root hr {
    border-color: var(--rh-border);
    opacity: 1;
}

/* Kopfleiste der App: deckend, damit beim Scrollen kein Inhalt durchscheint */
.app-root .main-topbar {
    background-color: var(--rh-surface-2) !important;
    border-bottom: 1px solid var(--rh-border) !important;
    z-index: 40;
}

/* ---------- 3a. Karten, Dropdowns, Modals ---------- */

.app-root .card,
.app-root .modal-content,
.app-root .dropdown-menu,
.app-root .list-group-item {
    background-color: var(--rh-surface);
    color: var(--rh-text);
    border-color: var(--rh-border);
}

.app-root .card {
    box-shadow: var(--rh-shadow);
}

.app-root .card-header,
.app-root .card-footer,
.app-root .modal-header,
.app-root .modal-footer {
    background-color: var(--rh-surface-2);
    color: var(--rh-text);
    border-color: var(--rh-border);
}

.app-root .dropdown-item {
    color: var(--rh-text);
}

    .app-root .dropdown-item:hover,
    .app-root .dropdown-item:focus {
        background-color: var(--rh-row-hover);
        color: var(--rh-text);
    }

.app-root .bg-white,
.app-root .bg-light,
.app-root .bg-body,
.app-root .bg-body-tertiary {
    background-color: var(--rh-surface-2) !important;
    color: var(--rh-text) !important;
}

/* ---------- 3b. Formulare ---------- */

.app-root .form-control,
.app-root .form-select,
.app-root textarea.form-control {
    background-color: var(--rh-input-bg);
    color: var(--rh-text);
    border-color: var(--rh-border-strong);
}

    .app-root .form-control::placeholder {
        color: var(--rh-muted);
        opacity: .8;
    }

    /* deaktiviert / nur lesbar: klar als „nicht änderbar“ erkennbar, Text bleibt lesbar */
    .app-root .form-control:disabled,
    .app-root .form-control[readonly],
    .app-root .form-select:disabled {
        background-color: var(--rh-surface-2);
        color: var(--rh-muted);
        border-color: var(--rh-border);
        opacity: 1;
        cursor: not-allowed;
    }

    /* Fokus: gut sichtbarer Rahmen in beiden Themes */
    .app-root .form-control:focus,
    .app-root .form-select:focus,
    .app-root .form-check-input:focus,
    .app-root .btn:focus-visible {
        border-color: var(--rh-accent) !important;
        box-shadow: 0 0 0 .25rem var(--rh-focus) !important;
        outline: 0;
    }

.app-root .input-group-text {
    background-color: var(--rh-surface-2);
    color: var(--rh-muted);
    border-color: var(--rh-border-strong);
}

/* Haken, Radio-Buttons, Schalter: Rahmen immer sichtbar, gesetzt = Akzentfarbe + weißer Haken.
   Das Häkchen-Bild kommt von Bootstrap (background-image); darum NIE mit der Kurzform
   „background:“ auf input-Elemente arbeiten – das löscht den Haken (früherer Dark-Mode-Fehler). */
.app-root .form-check-input {
    background-color: var(--rh-input-bg);
    border: 1.5px solid var(--rh-border-strong);
}

    .app-root .form-check-input:checked,
    .app-root .form-check-input[type="checkbox"]:indeterminate {
        background-color: var(--rh-accent);
        border-color: var(--rh-accent);
    }

    .app-root .form-check-input:disabled {
        opacity: .55;
    }

.app-root .form-check-label {
    color: var(--rh-text);
}

.app-root .form-check-input:disabled ~ .form-check-label {
    color: var(--rh-muted);
}

/* Schalter: ausgeschaltet sichtbarer Knopf */
.app-root .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238b95a5'/%3e%3c/svg%3e");
}

/* ---------- 3c. Tabellen ---------- */

.app-root .table {
    --bs-table-color: var(--rh-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--rh-border);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--rh-text);
    --bs-table-hover-bg: var(--rh-row-hover);
    --bs-table-hover-color: var(--rh-text);
    color: var(--rh-text);
}

    .app-root .table > thead > tr > th,
    .app-root .table-light,
    .app-root .table-light > tr > th,
    .app-root .table-light > tr > td {
        --bs-table-bg: var(--rh-surface-2);
        --bs-table-color: var(--rh-text);
        background-color: var(--rh-surface-2);
        color: var(--rh-text);
    }

/* Links in Tabellen: helle Linkfarbe, nicht dauerhaft unterstrichen (nur beim Darüberfahren), keine „besucht“-Farbe (Auftrag 68, D3) */
.app-root .table a:not(.btn),
.app-root .table a:not(.btn):visited {
    color: var(--rh-link);
    text-decoration: none;
}

    .app-root .table a:not(.btn):hover,
    .app-root .table a:not(.btn):focus-visible {
        text-decoration: underline;
    }

/* Schlichte Link-Knöpfe (btn-link, z. B. „Öffnen“): Linkfarbe des Themas statt festem Blau aus app.css */
.app-root .btn-link {
    --bs-btn-color: var(--rh-link);
    --bs-btn-hover-color: var(--rh-link);
    --bs-btn-active-color: var(--rh-link);
    color: var(--rh-link);
    text-decoration: none;
}

    .app-root .btn-link:hover { text-decoration: underline; }

/* Farbige Tabellenzeilen (Auftrag 68, D3) – EINMAL zentral statt Bootstrap-Hellfarben, die im dunklen Design grell leuchten.
   table-danger = überfällig/Fehler (rot), table-warning = bald fällig/Hinweis (Bernstein), table-success = erledigt,
   table-info/-primary = gerade in Bearbeitung, table-secondary = inaktiv. Schrift bleibt die normale Textfarbe,
   links an der Zeile ein 3-px-Farbrand. */
.app-root.theme-light {
    --rh-row-danger: #fdecec;  --rh-row-danger-hover: #fbdcdc;
    --rh-row-warn: #fdf6e3;    --rh-row-warn-hover: #fbedc8;
    --rh-row-ok: #e9f9ef;      --rh-row-ok-hover: #d8f3e2;
    --rh-row-info: #eaf2fe;    --rh-row-info-hover: #dbe8fd;
    --rh-row-neutral: #f1f3f6; --rh-row-neutral-hover: #e6e9ee;
}

.app-root.theme-dark {
    --rh-row-danger: rgba(220, 53, 69, .13);   --rh-row-danger-hover: rgba(220, 53, 69, .2);
    --rh-row-warn: rgba(245, 158, 11, .11);    --rh-row-warn-hover: rgba(245, 158, 11, .18);
    --rh-row-ok: rgba(34, 197, 94, .1);        --rh-row-ok-hover: rgba(34, 197, 94, .17);
    --rh-row-info: rgba(59, 130, 246, .13);    --rh-row-info-hover: rgba(59, 130, 246, .2);
    --rh-row-neutral: rgba(148, 163, 184, .07); --rh-row-neutral-hover: rgba(148, 163, 184, .13);
}

.app-root .table-danger, .app-root .table-warning, .app-root .table-success,
.app-root .table-info, .app-root .table-primary, .app-root .table-secondary {
    --bs-table-color: var(--rh-text);
    --bs-table-striped-color: var(--rh-text);
    --bs-table-hover-color: var(--rh-text);
    --bs-table-active-color: var(--rh-text);
    --bs-table-border-color: var(--rh-border);
    --bs-table-striped-bg: transparent;
    color: var(--rh-text);
}

.app-root .table-danger { --bs-table-bg: var(--rh-row-danger); --bs-table-hover-bg: var(--rh-row-danger-hover); --bs-table-active-bg: var(--rh-row-danger-hover); --rh-row-rand: var(--rh-danger-bd); }
.app-root .table-warning { --bs-table-bg: var(--rh-row-warn); --bs-table-hover-bg: var(--rh-row-warn-hover); --bs-table-active-bg: var(--rh-row-warn-hover); --rh-row-rand: var(--rh-warn-bd); }
.app-root .table-success { --bs-table-bg: var(--rh-row-ok); --bs-table-hover-bg: var(--rh-row-ok-hover); --bs-table-active-bg: var(--rh-row-ok-hover); --rh-row-rand: var(--rh-ok-bd); }
.app-root .table-info, .app-root .table-primary { --bs-table-bg: var(--rh-row-info); --bs-table-hover-bg: var(--rh-row-info-hover); --bs-table-active-bg: var(--rh-row-info-hover); --rh-row-rand: var(--rh-info-bd); }
.app-root .table-secondary { --bs-table-bg: var(--rh-row-neutral); --bs-table-hover-bg: var(--rh-row-neutral-hover); --bs-table-active-bg: var(--rh-row-neutral-hover); --rh-row-rand: var(--rh-neutral-bd); }

.app-root tr:is(.table-danger, .table-warning, .table-success, .table-info, .table-primary, .table-secondary) > :first-child {
    box-shadow: inset 3px 0 0 var(--rh-row-rand), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

/* Listen (list-group) mit Farbe: gleiche Tönung wie Tabellenzeilen */
.app-root .list-group-item-danger { background-color: var(--rh-row-danger); color: var(--rh-text); border-left: 3px solid var(--rh-danger-bd); }
.app-root .list-group-item-warning { background-color: var(--rh-row-warn); color: var(--rh-text); border-left: 3px solid var(--rh-warn-bd); }
.app-root .list-group-item-success { background-color: var(--rh-row-ok); color: var(--rh-text); border-left: 3px solid var(--rh-ok-bd); }
.app-root .list-group-item-info, .app-root .list-group-item-primary { background-color: var(--rh-row-info); color: var(--rh-text); border-left: 3px solid var(--rh-info-bd); }
.app-root .list-group-item-secondary, .app-root .list-group-item-light { background-color: var(--rh-row-neutral); color: var(--rh-text); }

/* Zeilenknöpfe rechtsbündig in fester Reihenfolge; fehlende Aktion als unsichtbarer Platzhalter gleicher Größe */
.rh-zeilen-aktionen { display: inline-flex; gap: .35rem; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.rh-platzhalter { visibility: hidden; }

/* Ausgegraute Aktion als Platzhalter (Auftrag 68, D4) */
.app-root .rh-aktion-leer { opacity: .35; pointer-events: none; }

/* Inaktive Zeile (z. B. deaktivierter Benutzer, Auftrag 68, D4): dunkel wie jede Zeile, Schrift gedimmt über die gedämpfte
   Textfarbe statt Deckkraft (Deckkraft .6 würde kleine graue Texte unter 4,5:1 drücken); Marken bleiben voll lesbar. */
.app-root tr.rh-zeile-inaktiv > td { color: var(--rh-muted); --bs-table-color: var(--rh-muted); }
.app-root tr.rh-zeile-inaktiv > td:not(.rh-aktionen-zelle) .badge:not(.bg-secondary) { filter: saturate(.4); }

/* Dashboard einrichten (Auftrag 68, D5): nichts ragt rechts hinaus – Spalten dürfen schrumpfen, lange Codes umbrechen,
   Widget-Liste mit eigener Scrollfläche, SQL-Feld volle Breite mit Mindesthöhe */
.rh-dash-formular, .rh-dash-formular .row > * { min-width: 0; }
.rh-dash-formular code { word-break: break-all; }
.rh-dash-widgetliste { max-height: 60vh; overflow-y: auto; }
.rh-sql-feld { width: 100%; min-height: 14rem; }

/* Aufmaß-Hinweis (Auftrag 68, D6): eigener Kasten mit Symbol und Knopf, Schrift in normaler Größe */
.rh-aufmass-hinweis {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
    padding: .85rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--rh-info-bd);
    border-left-width: 4px;
    border-radius: .6rem;
    background: var(--rh-info-bg);
    color: var(--rh-text);
}

.rh-aufmass-hinweis-symbol { font-size: 1.6rem; color: var(--rh-info-fg); }

/* Mengenfelder nicht übermäßig breit; neutraler Hinweis vor der ersten Eingabe statt sofort roter Fehlermeldung (D6) */
.rh-menge-feld { max-width: 11rem; }
.rh-prozent-feld { max-width: 6.5rem; }
@media (max-width: 575.98px) { .rh-menge-feld { max-width: none; } }
.rh-hinweis-neutral { color: var(--rh-muted); font-size: .95rem; }

/* „Mehr anzeigen“-Aufklapper (Auftrag 68, D8): überall derselbe deutliche Knopf statt kleiner grauer Zeile,
   Zustand wird je Browser gemerkt (layout.js, data-merken). */
summary.rh-mehr-knopf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    list-style: none;
    cursor: pointer;
    min-height: 2.5rem;
    padding: .45rem 1rem;
    border: 1px solid var(--rh-accent-bd-soft);
    border-radius: .5rem;
    background: var(--rh-accent-bg-soft);
    color: var(--rh-accent-fg-soft);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    user-select: none;
}

    summary.rh-mehr-knopf::-webkit-details-marker { display: none; }
    summary.rh-mehr-knopf::marker { content: ""; }
    summary.rh-mehr-knopf:hover { border-color: var(--rh-accent); }
    summary.rh-mehr-knopf:focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 2px; }

.rh-mehr-pfeil { transition: transform .15s ease; }
details[open] > summary.rh-mehr-knopf .rh-mehr-pfeil { transform: rotate(180deg); }

/* Kennzahlenzeile Bauvorhaben (Auftrag 68, D8): Gewinn, Stunden, Abgerechnet direkt unter der Schrittleiste */
.rh-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.rh-kennzahl {
    display: block;
    padding: .65rem .9rem;
    border: 1px solid var(--rh-border);
    border-left: 4px solid var(--rh-kennzahl-farbe, var(--rh-border-strong));
    border-radius: .6rem;
    background: var(--rh-surface);
    color: var(--rh-text);
    text-decoration: none;
}

    a.rh-kennzahl:hover { border-color: var(--rh-accent); color: var(--rh-text); }
    .rh-kennzahl-titel { font-size: .85rem; color: var(--rh-muted); }
    .rh-kennzahl-wert { font-size: 1.25rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
    .rh-kennzahl-zusatz { font-size: .85rem; color: var(--rh-muted); }
    .rh-kennzahl-gruen { --rh-kennzahl-farbe: var(--rh-ok-bd); }
    .rh-kennzahl-gelb { --rh-kennzahl-farbe: var(--rh-warn-bd); }
    .rh-kennzahl-rot { --rh-kennzahl-farbe: var(--rh-danger-bd); }

/* Geldbeträge und Zahlenspalten: rechtsbündig-Spalten brechen nie um, Ziffern gleich breit.
   Gilt automatisch für alle Seiten, auf denen Betragsspalten die übliche Klasse text-end tragen. */
.app-root td.text-end,
.app-root th.text-end,
.rh-geld {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rh-geld.rh-geld-negativ {
    color: var(--rh-danger-fg);
}

.rh-geld.rh-geld-stark {
    font-weight: 600;
}

/* Breite Tabellen scrollen am Handy IN der Karte, nie die ganze Seite (gilt für alle Seiten) */
@media (max-width: 991.98px) {
    .app-root .card-body > table.table,
    .app-root .card > table.table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- 3d. Badges (Status-Marken) ---------- */

.app-root .badge {
    font-weight: 600;
    border: 1px solid transparent;
}

.app-root .badge.bg-success,
.app-root .badge.text-bg-success { background-color: var(--rh-ok-bg) !important; color: var(--rh-ok-fg) !important; border-color: var(--rh-ok-bd); }
.app-root .badge.bg-warning,
.app-root .badge.text-bg-warning { background-color: var(--rh-warn-bg) !important; color: var(--rh-warn-fg) !important; border-color: var(--rh-warn-bd); }
.app-root .badge.bg-danger,
.app-root .badge.text-bg-danger { background-color: var(--rh-danger-bg) !important; color: var(--rh-danger-fg) !important; border-color: var(--rh-danger-bd); }
.app-root .badge.bg-info,
.app-root .badge.text-bg-info { background-color: var(--rh-info-bg) !important; color: var(--rh-info-fg) !important; border-color: var(--rh-info-bd); }
.app-root .badge.bg-secondary,
.app-root .badge.text-bg-secondary,
.app-root .badge.bg-dark,
.app-root .badge.bg-light,
.app-root .badge.text-bg-light { background-color: var(--rh-neutral-bg) !important; color: var(--rh-neutral-fg) !important; border-color: var(--rh-neutral-bd); }
.app-root .badge.bg-primary,
.app-root .badge.text-bg-primary,
.app-root .badge.bg-primary-subtle { background-color: var(--rh-accent-bg-soft) !important; color: var(--rh-accent-fg-soft) !important; border-color: var(--rh-accent-bd-soft); }

/* „text-dark“ in Badges würde im dunklen Design unleserlich: Badge-Farbe gewinnt */
.app-root .badge.text-dark,
.app-root .badge.text-primary-emphasis { color: inherit !important; }

/* ---------- 3e. Hinweisboxen ---------- */

.app-root .alert {
    color: var(--rh-text);
    background-color: var(--rh-surface-2);
    border-color: var(--rh-border);
}

.app-root .alert-success { background-color: var(--rh-ok-bg); border-color: var(--rh-ok-bd); color: var(--rh-ok-fg); }
.app-root .alert-warning { background-color: var(--rh-warn-bg); border-color: var(--rh-warn-bd); color: var(--rh-warn-fg); }
.app-root .alert-danger { background-color: var(--rh-danger-bg); border-color: var(--rh-danger-bd); color: var(--rh-danger-fg); }
.app-root .alert-info { background-color: var(--rh-info-bg); border-color: var(--rh-info-bd); color: var(--rh-info-fg); }

/* ---------- 3f. Buttons ---------- */

.app-root .btn-outline-secondary {
    --bs-btn-color: var(--rh-text);
    --bs-btn-border-color: var(--rh-border-strong);
    --bs-btn-hover-color: var(--rh-text);
    --bs-btn-hover-bg: var(--rh-row-hover);
    --bs-btn-hover-border-color: var(--rh-border-strong);
    --bs-btn-active-color: var(--rh-text);
    --bs-btn-active-bg: var(--rh-row-hover);
    --bs-btn-disabled-color: var(--rh-muted);
    --bs-btn-disabled-border-color: var(--rh-border);
}

.app-root .btn-outline-primary { --bs-btn-color: var(--rh-link); --bs-btn-border-color: var(--rh-link); --bs-btn-hover-bg: var(--rh-accent); --bs-btn-hover-border-color: var(--rh-accent); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--rh-accent); --bs-btn-active-color: #fff; }
.app-root .btn-outline-success { --bs-btn-color: var(--rh-ok-fg); --bs-btn-border-color: var(--rh-ok-bd); --bs-btn-hover-bg: var(--rh-ok-bg); --bs-btn-hover-color: var(--rh-ok-fg); --bs-btn-hover-border-color: var(--rh-ok-bd); --bs-btn-active-bg: var(--rh-ok-bg); --bs-btn-active-color: var(--rh-ok-fg); }
.app-root .btn-outline-danger { --bs-btn-color: var(--rh-danger-fg); --bs-btn-border-color: var(--rh-danger-bd); --bs-btn-hover-bg: var(--rh-danger-bg); --bs-btn-hover-color: var(--rh-danger-fg); --bs-btn-hover-border-color: var(--rh-danger-bd); --bs-btn-active-bg: var(--rh-danger-bg); --bs-btn-active-color: var(--rh-danger-fg); }
.app-root .btn-outline-info { --bs-btn-color: var(--rh-info-fg); --bs-btn-border-color: var(--rh-info-bd); --bs-btn-hover-bg: var(--rh-info-bg); --bs-btn-hover-color: var(--rh-info-fg); --bs-btn-hover-border-color: var(--rh-info-bd); --bs-btn-active-bg: var(--rh-info-bg); --bs-btn-active-color: var(--rh-info-fg); }
.app-root .btn-outline-warning { --bs-btn-color: var(--rh-warn-fg); --bs-btn-border-color: var(--rh-warn-bd); --bs-btn-hover-bg: var(--rh-warn-bg); --bs-btn-hover-color: var(--rh-warn-fg); --bs-btn-hover-border-color: var(--rh-warn-bd); --bs-btn-active-bg: var(--rh-warn-bg); --bs-btn-active-color: var(--rh-warn-fg); }

/* Menü-Schalter am Handy (ein verstecktes Kontrollkästchen mit Symbol als Hintergrund) */
.app-root .navbar-toggler {
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
}

/* ---------- 4. Seitenrahmen ---------- */

.rh-frame {
    padding-bottom: 5rem; /* Platz für die feste Leiste am Handy */
}

.rh-crumbs {
    font-size: .85rem;
    color: var(--rh-muted);
    margin: .25rem 0 .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}

    .rh-crumbs a {
        color: var(--rh-link);
        text-decoration: none;
    }

        .rh-crumbs a:hover {
            text-decoration: underline;
        }

    /* Trenner gedämpft über die Textfarbe statt Deckkraft .6 (die drückte ihn unter 4,5:1, Auftrag 68, D7) */
    .rh-crumbs .rh-crumb-sep {
        color: var(--rh-muted);
    }

.rh-frame-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: .25rem;
}

    .rh-frame-title h1 {
        font-size: 1.5rem;
        margin: 0;
        overflow-wrap: break-word;
    }

.rh-frame-meta {
    color: var(--rh-muted);
    font-size: .95rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin-bottom: .75rem;
}

    .rh-frame-meta a {
        color: var(--rh-link);
    }

/* Aktionsleiste: bleibt beim Scrollen oben stehen (am Handy unten fest) */
.rh-actionbar {
    position: sticky;
    top: 3.5rem; /* unter der Kopfleiste der App (Desktop) */
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .5rem .75rem;
    margin-bottom: 1rem;
    background-color: var(--rh-surface);
    border: 1px solid var(--rh-border);
    border-radius: .75rem;
    box-shadow: var(--rh-shadow);
}

    .rh-actionbar .rh-dirty {
        margin-right: auto;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .9rem;
        font-weight: 600;
        color: var(--rh-warn-fg);
    }

        .rh-actionbar .rh-dirty::before {
            content: "";
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            background: var(--rh-warn-fg);
        }

    .rh-actionbar .rh-saved-hint {
        margin-right: auto;
        font-size: .9rem;
        color: var(--rh-ok-fg);
    }

    .rh-actionbar .rh-locked-hint {
        margin-right: auto;
        font-size: .9rem;
        color: var(--rh-muted);
    }

.rh-menu {
    position: relative;
}

.rh-menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + .25rem);
    min-width: 15rem;
    z-index: 30;
    padding: .35rem;
    background-color: var(--rh-surface);
    border: 1px solid var(--rh-border);
    border-radius: .6rem;
    box-shadow: var(--rh-shadow);
}

    .rh-menu-list .dropdown-item {
        border-radius: .4rem;
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem .65rem;
        white-space: normal;
    }

    .rh-menu-list .rh-menu-danger {
        color: var(--rh-danger-fg);
    }

    .rh-menu-list hr {
        margin: .35rem 0;
    }

.rh-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
}

@media (max-width: 640.98px) {
    .rh-actionbar {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: .75rem .75rem 0 0;
        z-index: 1040;
        padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
    }

        .rh-actionbar .rh-btn-text-optional {
            display: none;
        }

        .rh-actionbar .btn {
            min-height: 2.75rem; /* Daumen-tauglich */
        }

    .rh-menu-list {
        top: auto;
        bottom: calc(100% + .25rem);
    }

    .rh-frame-title h1 {
        font-size: 1.25rem;
    }
}

/* Reiter-Leiste (Positionen / Dokumente / Mahnungen / Zahlungen): scrollt am Handy seitlich in sich */
.rh-tabs {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
}

    .rh-tabs .btn {
        white-space: nowrap;
        flex: 0 0 auto;
    }


/* Belegfluss-Leiste: bricht um, kein seitliches Scrollen (Auftrag 41, B4) */
.rh-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    padding: .4rem .1rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--rh-border);
    font-size: .85rem;
}

.rh-flow-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .2rem .6rem;
    border: 1px solid var(--rh-border);
    border-radius: 999px;
    color: var(--rh-link);
    background: var(--rh-surface);
    text-decoration: none;
    cursor: pointer;
}

a.rh-flow-chip:hover, summary.rh-flow-chip:hover { background: var(--rh-row-hover); }

.rh-flow-sep { color: var(--rh-muted); flex: 0 0 auto; }

.rh-flow-sub { color: var(--rh-muted); font-size: .75rem; }

.rh-flow-missing {
    color: var(--rh-muted);
    border-style: dashed;
    cursor: default;
}

.rh-flow-current {
    font-weight: 700;
    color: var(--rh-text);
    background: var(--rh-accent-bg-soft);
    border-color: var(--rh-accent);
    border-left-width: 4px;
}

.rh-flow-group {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

    .rh-flow-group > summary { list-style: none; }
    .rh-flow-group > summary::-webkit-details-marker { display: none; }


/* Durchsuchbare Auswahl (Schritt 6) */
.rh-suche { position: relative; }

.rh-suche-liste {
    position: absolute;
    z-index: 1050;
    top: 100%; left: 0; right: 0;
    margin: .15rem 0 0;
    padding: .25rem 0;
    list-style: none;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--rh-surface);
    border: 1px solid var(--rh-border-strong);
    border-radius: .5rem;
    box-shadow: var(--rh-shadow);
}

.rh-suche-eintrag {
    display: block;
    width: 100%;
    text-align: left;
    padding: .55rem .8rem;
    border: 0;
    background: transparent;
    color: var(--rh-text);
}

    .rh-suche-eintrag:hover, .rh-suche-eintrag:focus { background: var(--rh-row-hover); }

.rh-suche-leer { padding: .5rem .8rem; color: var(--rh-muted); }

.rh-flow-plus { border-style: dashed; color: var(--rh-link); }



/* Dialog "Aus Kalkulation einfuegen" (Schritt 8) */
.rh-kalk-liste { border: 1px solid var(--rh-border); border-radius: .5rem; }

.rh-kalk-zeile {
    display: grid;
    grid-template-columns: auto 1fr 7rem 7.5rem;
    gap: .6rem;
    align-items: center;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--rh-border);
}

    .rh-kalk-zeile:last-child { border-bottom: 0; }

.rh-kalk-gesamt { white-space: nowrap; font-weight: 600; }

/* Kopfleiste: Suche, + Neu, Zuletzt geöffnet (Schritt 14) */
.rh-kbd { font-size: .7rem; padding: .05rem .35rem; border: 1px solid var(--rh-border-strong); border-radius: .25rem; background: transparent; color: var(--rh-muted); }
.rh-aufklapp { position: relative; }
.rh-aufklapp-liste {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 1060; min-width: 14rem; max-width: 80vw;
    background: var(--rh-surface); color: var(--rh-text); border: 1px solid var(--rh-border-strong);
    border-radius: .5rem; box-shadow: var(--rh-shadow); padding: .3rem; max-height: 70vh; overflow: auto;
}
.rh-aufklapp-eintrag { display: block; padding: .45rem .7rem; border-radius: .35rem; color: var(--rh-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-aufklapp-eintrag:hover, .rh-aufklapp-eintrag:focus { background: var(--rh-row-hover); }
.rh-aufklapp-leer { padding: .5rem .7rem; color: var(--rh-muted); }
.rh-aufklapp-schleier { position: fixed; inset: 0; z-index: 1050; background: transparent; }
.rh-suche-schleier { position: fixed; inset: 0; z-index: 1070; background: rgba(0, 0, 0, .5); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 1rem 1rem; }
/* Nur das Suchfenster: ohne die Abgrenzung wurde jede Such-Auswahl (Kunde, Bauvorhaben …) zum Kasten mit Liste über dem Feld (Auftrag 58, zweiter Durchlauf) */
.rh-suche-schleier .rh-suche { width: min(40rem, 100%); background: var(--rh-surface); color: var(--rh-text); border: 1px solid var(--rh-border-strong); border-radius: .75rem; box-shadow: var(--rh-shadow); padding: .8rem; max-height: 80vh; display: flex; flex-direction: column; gap: .5rem; }
/* Globale Suche: die Liste liegt UNTER dem Feld. Die Klassen teilt sie mit der Such-Auswahl (dort schwebende Liste, position:absolute) –
   ohne diese Abgrenzung legte sich die Trefferliste über das Eingabefeld (Auftrag 58, am Handy gemeldet). */
.rh-suche-schleier .rh-suche-liste { position: static; overflow: auto; margin: 0; padding: 0; border: 0; box-shadow: none; max-height: none; flex: 1 1 auto; min-height: 0; }
.rh-suche-hinweis { color: var(--rh-muted); padding: .5rem .3rem; }
.rh-suche-gruppe { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rh-muted); padding: .5rem .5rem .15rem; }
.rh-suche-treffer { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .6rem; border-radius: .4rem; color: var(--rh-text); text-decoration: none; }
.rh-suche-treffer:hover, .rh-suche-aktiv { background: var(--rh-row-hover); }
.rh-suche-titel { font-weight: 600; white-space: nowrap; }
.rh-suche-unter { color: var(--rh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
@media (max-width: 575.98px) {
    /* Handy (Auftrag 58): Suchfeld fest oben, Liste darunter im sichtbaren Bereich über der Tastatur (visualViewport → --rh-vv-hoehe), höchstens etwa 6 Treffer sichtbar */
    .rh-suche-schleier { padding: 0; align-items: flex-start; }
    .rh-suche-schleier .rh-suche { position: fixed; top: 0; left: 0; right: 0; width: 100%; border-radius: 0 0 .75rem .75rem; max-height: var(--rh-vv-hoehe, 100dvh); }
    .rh-suche-schleier .rh-suche-liste { max-height: min(19rem, calc(var(--rh-vv-hoehe, 100dvh) - 6.5rem)); overscroll-behavior: contain; }
    .rh-suche-schleier .rh-suche-treffer { flex-wrap: wrap; }
}

/* Brotkrumen (Schritt 13) */
.rh-brotkrumen .breadcrumb { font-size: .85rem; --bs-breadcrumb-divider-color: var(--rh-muted); --bs-breadcrumb-item-active-color: var(--rh-muted); }
.rh-brotkrumen a { color: var(--rh-link); text-decoration: none; }
.rh-brotkrumen a:hover { text-decoration: underline; }

/* Bauvorhaben-Cockpit (Schritt 12): Prozessleiste und Kacheln */
.rh-prozess {
    list-style: none;
    padding: 0;
    margin: 0 0 .8rem;
    gap: .4rem;
    flex-wrap: wrap;
}

.rh-prozess-schritt {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--rh-border);
    border-radius: 2rem;
    color: var(--rh-muted);
    font-size: .9rem;
}

.rh-prozess-erledigt { color: var(--rh-ok-fg); background: var(--rh-ok-bg); border-color: var(--rh-ok-bd); }
.rh-prozess-aktuell { color: var(--rh-accent-fg-soft); background: var(--rh-accent-bg-soft); border-color: var(--rh-accent-bd-soft); font-weight: 600; }
/* Auftrag 65, K6: optionaler Schritt ohne Inhalt (kein Nachtrag, ohne Aufmaß abgerechnet) – grau gestrichelt, nie grün */
.rh-prozess-optional { color: var(--rh-muted); border-style: dashed; }
.rh-prozess-zusatz { font-size: .75rem; opacity: .85; }
/* Auftrag 60, Block 7: Schritte mit eindeutigem Ziel sind Links (Farbe des Schritts, unterstrichen beim Darüberfahren); ohne Ziel: Erklärung im Tooltip */
.rh-prozess-link { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
a.rh-prozess-link:hover, a.rh-prozess-link:focus-visible { text-decoration: underline; }
.rh-prozess-ohne { cursor: help; }

.rh-naechster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* Auftrag 65, K7: alle Knöpfe der Zeile „Nächster Schritt“ gleich hoch, gleiche Schrift, gleiche Mindestbreite.
   Der empfohlene ist gefüllt, die anderen mit Rahmen. Am Handy untereinander in voller Breite. */
.rh-naechster .rh-schritt-knopf {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    min-height: 42px; min-width: 15rem; padding: .45rem 1rem; font-size: 1rem; line-height: 1.25; white-space: normal;
}
.rh-naechster .rh-wege-knopf { display: none; }
html.rh-knopf-kompakt .rh-naechster .rh-weg { display: none; }
html.rh-knopf-kompakt .rh-naechster .rh-wege-knopf { display: inline-flex; }
html.rh-knopf-kompakt .rh-naechster.rh-wege-offen .rh-weg { display: inline-flex; }
@media (max-width: 575.98px) {
    .rh-naechster > .text-muted:first-child { width: 100%; }
    .rh-naechster .rh-schritt-knopf { width: 100%; min-width: 0; min-height: 3.5rem; }   /* lange Texte brechen um – alle gleich hoch */
}
.rh-knopf-kompakt-an { display: none; }
html.rh-knopf-kompakt .rh-knopf-kompakt-an { display: inline; }
html.rh-knopf-kompakt .rh-knopf-kompakt-aus { display: none; }

.rh-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .8rem;
}

.rh-kachel {
    border: 1px solid var(--rh-border);
    border-radius: .6rem;
    padding: .8rem .95rem;
    background: var(--rh-surface);
    box-shadow: var(--rh-shadow);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.rh-kachel-kopf { font-weight: 600; margin-bottom: .2rem; }
.rh-kachel-aktionen { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }

@media (max-width: 767.98px) {
    /* Baustellen-Kacheln (Stunden, Bautagebuch) stehen am Handy ganz oben */
    .rh-kacheln { grid-template-columns: 1fr; }
    .rh-kachel-baustelle { order: -1; }
}

/* Zahlen der Rechnung (Schritt 11): Netto/Brutto getrennt, „Jetzt fällig“ hervorgehoben */
.rh-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

.rh-zahl {
    border: 1px solid var(--rh-border);
    border-radius: .5rem;
    padding: .55rem .8rem;
    background: var(--rh-surface);
}

.rh-zahl-label { font-size: .78rem; color: var(--rh-muted); }
.rh-zahl-wert { font-size: 1.15rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rh-zahl-sub { font-size: .75rem; color: var(--rh-muted); }
.rh-zahl-faellig { border-width: 2px; border-color: var(--rh-accent); }
.rh-zahl-offen .rh-zahl-wert { color: var(--rh-danger-fg); }
.rh-zahl-ok .rh-zahl-wert { color: var(--rh-ok-fg); }

/* Offene Posten: Karten am Handy (Schritt 11) */
.rh-op-karte {
    border: 1px solid var(--rh-border);
    border-radius: .5rem;
    padding: .7rem .85rem;
    margin-bottom: .6rem;
}

.rh-op-karte.rh-op-ueberfaellig { border-left: 4px solid var(--rh-danger-bd); }

/* Nachtragspositionen (Schritt 10): Bezeichnung, Menge, Einheit, EP, Gesamt, Löschen */
.rh-npos {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 6rem 5rem 7rem 7.5rem auto;
    gap: .5rem;
    align-items: center;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--rh-border);
}

    .rh-npos:last-child { border-bottom: 0; }

@media (max-width: 767.98px) {
    .rh-npos { grid-template-columns: 1fr 1fr; }
    .rh-npos .rh-npos-name { grid-column: 1 / -1; }
    .rh-npos .rh-kalk-gesamt { text-align: left !important; }
}

/* Abgleich Kalkulation → Beleg (Schritt 9): Auswahl, Beschreibung, Differenz */
.rh-abgleich-zeile {
    display: grid;
    grid-template-columns: auto 1fr 7.5rem;
    gap: .6rem;
    align-items: center;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--rh-border);
}

    .rh-abgleich-zeile:last-child { border-bottom: 0; }

.rh-abgleich-gesperrt { opacity: .8; }

@media (max-width: 575.98px) {
    .rh-abgleich-zeile { grid-template-columns: auto 1fr; }
    .rh-abgleich-zeile .rh-kalk-gesamt { grid-column: 2; text-align: left !important; }
}

@media (max-width: 575.98px) {
    .rh-kalk-zeile { grid-template-columns: auto 1fr; }
    .rh-kalk-menge { grid-column: 2; }
    .rh-kalk-gesamt { grid-column: 2; text-align: left !important; }
}

/* K-Markierung an Positionen mit Kalkulationsherkunft */
.rh-k-marke {
    display: inline-block;
    padding: 0 .4rem;
    margin-left: .35rem;
    font-size: .7rem;
    font-weight: 700;
    border-radius: .3rem;
    border: 1px solid var(--rh-accent-bd-soft);
    background: var(--rh-accent-bg-soft);
    color: var(--rh-accent-fg-soft);
    text-decoration: none;
}

/* ---------- 5. Listen (RhListe) ---------- */
.rh-liste-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.rh-liste-suche { flex: 1 1 220px; max-width: 420px; }
.rh-liste-filter { flex: 0 1 200px; width: auto; }
.rh-liste-tabelle { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: .6rem; overflow-x: auto; }
.rh-liste-tabelle thead th { background: var(--rh-surface-2); color: var(--rh-text); white-space: nowrap; font-weight: 600; }
.rh-liste-tabelle td { color: var(--rh-text); }
.rh-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; font-weight: inherit; cursor: pointer; }
.rh-sort:hover { color: var(--rh-link); }
.rh-klickbar { cursor: pointer; }
.rh-liste-laedt { opacity: .6; transition: opacity .15s; }
.rh-liste-leer { padding: 1.5rem 1rem; border: 1px dashed var(--rh-border-strong); border-radius: .6rem; color: var(--rh-muted); text-align: center; }
.rh-liste-karten { display: grid; gap: .6rem; }
.rh-karte { background: var(--rh-surface); border: 1px solid var(--rh-border); border-radius: .6rem; padding: .7rem .85rem; color: var(--rh-text); }
.rh-karte .rh-karte-titel { display: flex; justify-content: space-between; gap: .5rem; font-weight: 600; }
.rh-karte .rh-karte-zeile { font-size: .875rem; color: var(--rh-muted); }
.rh-karte .rh-karte-betrag { font-weight: 600; color: var(--rh-text); }
.rh-liste-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

/* btn-outline-dark ist im Dunkelmodus sonst unsichtbar */
.app-root.theme-dark .btn-outline-dark { --bs-btn-color: var(--rh-text); --bs-btn-border-color: var(--rh-border-strong); --bs-btn-hover-bg: var(--rh-surface-2); --bs-btn-hover-color: var(--rh-text); --bs-btn-hover-border-color: var(--rh-border-strong); --bs-btn-active-bg: var(--rh-surface-2); --bs-btn-active-color: var(--rh-text); }

/* Auswahl-Chips (z. B. Mitarbeiter einer Kolonne) */
.rh-chip { display: inline-flex; align-items: center; padding: .3rem .65rem; border: 1px solid var(--rh-border-strong); border-radius: 2rem; background: var(--rh-surface); color: var(--rh-text); cursor: pointer; font-size: .9rem; user-select: none; }
.rh-chip-an { background: var(--rh-accent-bg-soft); border-color: var(--rh-accent-bd-soft); color: var(--rh-accent-fg-soft); }

/* ⓘ-Hilfen und leere Zustände (Schritt 17) */
.rh-info { position: relative; display: inline-block; margin-left: .25rem; }
.rh-info-knopf { background: none; border: 0; padding: 0 .15rem; color: var(--rh-link); cursor: pointer; line-height: 1; }
.rh-info-text { display: block; position: absolute; z-index: 30; left: 0; top: 1.6rem; width: min(22rem, 80vw); padding: .6rem .75rem; background: var(--rh-surface); color: var(--rh-text); border: 1px solid var(--rh-border-strong); border-radius: .5rem; box-shadow: var(--rh-shadow); font-size: .85rem; font-weight: 400; white-space: normal; text-align: left; }
/* Am Handy ragte die Erklärung rechts aus dem Bild (Auftrag 58): fester Kasten über die volle Breite, über der unteren Leiste */
@media (max-width: 640.98px) { .rh-info-text { position: fixed; left: .75rem; right: .75rem; top: 30vh; width: auto; z-index: 1060; } }
.rh-leer-icon { font-size: 2rem; display: block; margin-bottom: .35rem; color: var(--rh-muted); }
.rh-leer-aktion { margin-top: .75rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.rh-schritte { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rh-schritt { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border: 1px solid var(--rh-border-strong); border-radius: 2rem; color: var(--rh-muted); font-size: .9rem; }
.rh-schritt b { display: inline-flex; width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--rh-surface-2); color: var(--rh-text); font-size: .8rem; }
.rh-schritt-an { background: var(--rh-accent-bg-soft); border-color: var(--rh-accent-bd-soft); color: var(--rh-accent-fg-soft); }
.rh-schritt-an b { background: var(--rh-accent); color: var(--rh-accent-fg); }

/* Auftrag 41, Prinzip 7: Positionstabellen werden am Handy zu Karten (kein seitliches Scrollen) */
@media (max-width: 767.98px) {
    table.rh-karten-mobil thead { display: none; }
    table.rh-karten-mobil, table.rh-karten-mobil tbody, table.rh-karten-mobil tr, table.rh-karten-mobil td { display: block; width: 100% !important; }
    table.rh-karten-mobil tr { border: 1px solid var(--rh-border); border-radius: .5rem; margin-bottom: .6rem; padding: .4rem .6rem; background: var(--rh-surface); }
    table.rh-karten-mobil td { border: 0; padding: .15rem 0; text-align: left !important; }
    table.rh-karten-mobil td[data-label] { display: flex; justify-content: space-between; gap: 1rem; }
    table.rh-karten-mobil td[data-label]::before { content: attr(data-label); color: var(--rh-muted); font-size: .8rem; }
}

/* Belegfluss-Chips dürfen umbrechen (kein seitliches Scrollen am Handy) */
.rh-flow-chip { white-space: normal; flex: 0 1 auto; max-width: 100%; }

/* Kopfleiste am Handy: umbrechen statt über den Rand laufen (Auftrag 41, Prinzip 7) */
.rh-werkzeuge { flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .main-topbar { height: auto !important; padding: .4rem .5rem !important; }
    .main-topbar .btn, .main-topbar .theme-toggle-btn { padding-left: .5rem; padding-right: .5rem; }
}
.rh-flow, .rh-flow-group { max-width: 100%; }
.rh-flow-group > .rh-flow-chip { max-width: 100%; overflow-wrap: break-word; }

/* Lange Tabellen: Spaltenueberschrift bleibt unter der Aktionsleiste stehen, Summenzeile unten (Auftrag 47, A1).
   --rh-actionbar-h setzt layout.js aus der echten Hoehe der Leiste (Desktop); am Handy liegt die Leiste unten. */
.rh-sticky-tabelle thead th {
    position: sticky;
    top: calc(3.5rem + var(--rh-actionbar-h, 3.5rem) - 1px);
    z-index: 10;
    background-color: var(--rh-surface-2);
    box-shadow: 0 1px 0 var(--rh-border-strong);
}

.rh-sticky-tabelle tr.rh-summenzeile > td {
    position: sticky;
    bottom: 0;
    z-index: 9;
    background-color: var(--rh-surface-2);
    box-shadow: 0 -1px 0 var(--rh-border-strong);
}

.rh-sticky-fuss {
    position: sticky;
    bottom: .5rem;
    z-index: 15;
    background-color: var(--rh-surface);
    border-top: 1px solid var(--rh-border);
    border-radius: 0 0 .75rem .75rem;
}

@media (max-width: 640.98px) {
    .rh-sticky-tabelle thead th {
        top: 3.5rem;
    }

    .rh-sticky-tabelle tr.rh-summenzeile > td,
    .rh-sticky-fuss {
        bottom: 4.5rem; /* ueber der festen Aktionsleiste am Handy */
    }
}

/* Auftrag 60, 5b: fester Spaltenkopf fuer Positions- und Materiallisten am PC. Ein Scroll-Behaelter (.table-responsive) hebt "sticky" auf,
   deshalb scrollt er am PC nicht selbst (die Zellen brechen um). Am Handy bleibt alles wie bisher: Karten mit beschrifteten Werten (.rh-karten-mobil). */
@media (min-width: 768px) {
    .rh-kopf-fest thead th {
        position: sticky;
        top: calc(3.5rem + var(--rh-actionbar-h, 3.5rem) - 1px);
        z-index: 10;
        background-color: var(--rh-surface-2);
        box-shadow: 0 1px 0 var(--rh-border-strong);
    }
    .table-responsive:has(> table.rh-kopf-fest) { overflow: visible; }
    .app-root table.rh-kopf-fest td, .app-root table.rh-kopf-fest th { white-space: normal; overflow-wrap: break-word; }
}

/* Der allgemeine Handy-Ausgleich (Tabelle als Block mit eigenem Scrollen) wuerde den stehenden Kopf aufheben:
   Tabellen mit .rh-sticky-tabelle bleiben echte Tabellen, die Zellen brechen um (kein seitliches Scrollen). */
.app-root table.table.rh-sticky-tabelle,
.app-root.layout-compact table.rh-sticky-tabelle {
    display: table;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    table-layout: auto;
}

    .app-root table.table.rh-sticky-tabelle td,
    .app-root table.table.rh-sticky-tabelle th {
        white-space: normal;
        overflow-wrap: break-word;
    }

    .app-root table.table.rh-sticky-tabelle input.form-control {
        min-width: 7rem;
    }

/* Auftrag 60, Block 2a: am Handy fuehrt von jeder Seite ein sichtbarer Weg zurueck.
   Die Kopfzeile mit dem Menue (Hamburger) bleibt oben stehen, das geoeffnete Menue liegt ueber der festen Leiste unten
   und scrollt in sich; daneben "<- Zurueck" (Elternseite bzw. gezielter Rueckweg der Seite). Die Werkzeugleiste scrollt mit. */
.rh-zurueck { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; font-weight: 600; white-space: nowrap; }
.rh-zurueck span { overflow: hidden; text-overflow: ellipsis; }
.rh-zurueck .bi { margin-right: 0; width: auto; height: auto; top: 0; }
.rh-zurueck-mobil { display: none; }
/* Auftrag 65, K8: am PC echte Knöpfe statt kleiner Textlinks (Rahmen, Pfeil, mind. 40 px hoch, hell und dunkel lesbar) */
.rh-zurueck-pc { display: inline-flex; margin-bottom: .5rem; font-size: 1rem; min-height: 40px; padding: .4rem .9rem; border-radius: .5rem;
    color: var(--rh-accent-fg-soft); background: var(--rh-accent-bg-soft); border: 1px solid var(--rh-accent-bd-soft); }
.rh-zurueck-pc:hover, .rh-zurueck-pc:focus-visible { color: var(--rh-accent-fg-soft); border-color: currentColor; text-decoration: none; }
.rh-zurueck-pc .bi { font-size: 1.1rem; }
@media (max-width: 640.98px) {
    .app-root .sidebar { position: sticky; top: 0; z-index: 1045; }
    .app-root .sidebar .nav-scrollable { max-height: calc(100dvh - 3.5rem); overflow-y: auto; overscroll-behavior: contain; }
    .app-root .main-topbar { position: static; }
    .app-root .sidebar .top-row .container-fluid { padding-right: 4.75rem; flex-wrap: nowrap; gap: .5rem; }
    .app-root .sidebar .navbar-brand .small { display: none; }
    .rh-zurueck-mobil { display: inline-flex; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
        border-radius: .5rem; padding: .45rem .7rem; min-height: 2.6rem; max-width: 11.5rem; font-size: .95rem; }
    .rh-zurueck-mobil:hover, .rh-zurueck-mobil:focus { color: #fff; background: rgba(255, 255, 255, .28); }
    .rh-zurueck-pc { display: none; }
    /* „Nächste Aufgabe →“ steht am Handy als Knopf über dem Inhalt („← Zurück zu Heute“ ist schon in der Kopfzeile) */
    .rh-zurueck-pc.rh-weiter { display: inline-flex; margin-left: 0 !important; min-height: 2.6rem; }
}
/* Auftrag 60, Block 2b: Kolonne buchen - Summe und Knopf bleiben am Handy ueber der festen Leiste unten sichtbar */
@media (max-width: 640.98px) {
    .rh-kolonne-fuss { position: sticky; bottom: 4.6rem; z-index: 5; background: var(--rh-surface); border-top: 1px solid var(--rh-border); padding-top: .5rem; padding-bottom: .5rem; }
}

/* Auftrag 67, F1: "Was bauen Sie?" im Positions-Dialog (Angebot, Auftrag) */
.rh-leistung-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.rh-leistung-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; padding: .8rem; min-height: 6rem;
    border: 1px solid var(--rh-border); border-radius: .8rem; background: var(--rh-surface); color: inherit; }
.rh-leistung-kachel:hover, .rh-leistung-kachel:focus-visible { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15); }
.rh-leistung-kachel .bi { font-size: 1.4rem; color: var(--bs-primary); }
.rh-leistung-titel { font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.rh-leistung-preis { font-size: .8rem; color: var(--bs-secondary-color); }

/* Auftrag 67, F3: große Auswahlkarte im Assistenten ("So wie gemessen" / "Mengen selbst eintragen") */
.rh-wahl-karte { display: block; text-align: left; padding: 1rem 1.1rem; border: 2px solid var(--rh-border); border-radius: .9rem; background: var(--rh-surface); color: inherit; }
.rh-wahl-karte:hover, .rh-wahl-karte:focus-visible { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15); }

/* Auftrag 67, F10: Konto-Menü in der Kopfleiste (Passwort, Anmeldung sichern, Ansicht, Abmelden) */
.rh-konto { position: relative; }
.rh-konto > summary { list-style: none; }
.rh-konto > summary::-webkit-details-marker { display: none; }
.rh-konto-liste {
    position: absolute; right: 0; top: calc(100% + .25rem); min-width: 14rem; z-index: 1060; padding: .35rem;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .6rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
}
.rh-konto-liste .dropdown-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border-radius: .4rem; width: 100%; }
.rh-konto-liste hr { margin: .35rem 0; }