/* =====================================================================================
   Angebotskonfigurator — das Erscheinungsbild der JH Suite (übernommen 2026-08-06)

   **Unverändert aus src/WpKonfig.Desktop/wwwroot/css/app.css**, mit genau zwei Eingriffen:

     1. Alles steht in `.konfigurator-rahmen { … }`. Ohne diese Klammer würde die Suite
        PlanBoards Erscheinungsbild überschreiben — Schrift, Farben, Abstände, überall.
        Verschachteltes CSS erledigt das, ohne eine einzige Regel umzuschreiben.
     2. `:root` wurde zu `&`, damit die Farbvariablen am Rahmen hängen statt am Dokument.

   Schriften (@font-face) und Bewegungsabläufe (@keyframes) stehen außerhalb — beide
   müssen global deklariert sein.

   Wer den Wizard pflegt, ändert weiterhin die Datei in der Suite und erzeugt diese hier
   neu: tools/css-isolieren.py
   ===================================================================================== */

/* --- Marken-Schrift, global deklariert --- */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Bold.ttf") format("truetype");
}

/* --- Bewegungsabläufe, global benannt --- */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes modal-auf {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes phasen-schritt-aufleuchten {
    0% {
        border-color: var(--kupfer);
        box-shadow: 0 0 0 3px var(--kupfer-rand);
        background: var(--kupfer-hell);
    }
    70% {
        border-color: var(--kupfer);
        box-shadow: 0 0 0 3px var(--kupfer-rand);
        background: var(--kupfer-hell);
    }
    100% {
        border-color: var(--grau-150);
        box-shadow: 0 0 0 0 transparent;
        background: var(--grau-0);
    }
}

@keyframes benach-toast-rein {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes erinnerung-overlay-rein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes erinnerung-modal-rein {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes anmelde-karte-rein {
    from { opacity: 0; transform: translateY(0.6rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes profil-menue-auf {
    from { opacity: 0; transform: translateY(-0.3rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Alles Übrige: nur innerhalb des Konfigurator-Rahmens --- */

.konfigurator-rahmen {
/* =========================================================================
   JH Suite – Oberflächen-Stil (Hannig-Markenauftritt)
   Ziel: modern, übersichtlich, professionell – ruhiges Layout, klare Hierarchie,
   viel Weißraum. Markenfarben aus dem Hannig-Logo + Kunden-PDF: Navy/Marine
   (#1D1D1B) als primäre Aktions-/Auswahlfarbe (mit weißem Text = Top-Kontrast),
   Kupfer (#D4862F) als warmer Highlight-Akzent (Häkchen, aktive Stepper-Marken,
   Spar-/Kennzahl-Hervorhebung – NICHT als Fläche hinter weißem Text), Beige
   (#F3EFE9) als warme Akzentfläche. Neutrale Palette sanft warm getönt statt
   kühl. Sanft gerundete Karten (10–12px), feine Schatten, feine Trennlinien.
   Schrift: „Plus Jakarta Sans" (offline eingebettet, konsistent zum Kunden-PDF).
   Barrierearm: ausreichende Kontraste (AA), sichtbarer Fokus, Tastatur, Labels.

   Token-System: ALLE Farben/Geometrien laufen über die CSS-Variablen unten. Die
   bisherigen Variablennamen (--grau-*, --akzent*, …) bleiben erhalten und werden
   nur auf die Markenpalette umgesetzt; --akzent* = NAVY (Aktion/Auswahl), die
   neuen --kupfer* = warmer Highlight-Akzent. So schaltet die gesamte Oberfläche
   zentral um (kein verstreutes Hex in den Komponenten).
   ========================================================================= */

/* --- Marken-Schrift „Plus Jakarta Sans" – offline aus wwwroot (kein CDN/Google).
   Vier Schnitte (400/500/600/700) decken Fließtext bis Überschriften ab; konsistent
   mit dem Kunden-PDF (dort ebenfalls Plus Jakarta Sans). --- */








& {
    color-scheme: light;

    /* --- Neutrale Palette – sanft WARM getönt (Greige statt kühlem Blaugrau) ---
       Die Namen bleiben (--grau-0 … --grau-900). Die Helligkeitsstufen bleiben
       nahezu identisch zur vorherigen Palette (Layout/Kontraste unverändert),
       der Farbton ist nur leicht ins Warme gedreht, damit Flächen/Ränder zur
       Navy/Beige-Marke passen. Ränder/Trennlinien orientieren sich am warmen
       PDF-Pendant (#E2E0DD). Fließtext-Grau bewusst neutral-dunkel gehalten. */
    --grau-0: #ffffff;    /* Karten/Inhaltsflächen */
    --grau-50: #f7f5f2;   /* App-Hintergrund, Sektionen, Zeilen-Hover (warmes Greige) */
    --grau-100: #f1eee9;  /* Akzentflächen, Zebra, Tabellenkopf (warm) */
    --grau-150: #ebe8e2;  /* sehr feine Trennlinie (zwischen 100 und 200) */
    --grau-200: #e3e0da;  /* subtile Karten-/Trennlinien-Ränder (warm, ~PDF-Trennlinie) */
    --grau-300: #d2cec6;  /* Eingabe-Ränder (warm) */
    /* **Dunkler gestellt am 2026-08-15.** Hier stand #a39e96 — auf Weiss 2,66:1 und damit
       weit unter den 4,5:1, ab denen Text als lesbar gilt. Das traf 49 Stellen, darunter
       den Platzhalter JEDES Eingabefelds im Konfigurator — also genau den Bildschirm, der
       beim Kunden vor Ort bedient wird, oft bei Tageslicht. #6b6862 haelt denselben warmen
       Ton und kommt auf 4,9:1. */
    --grau-400: #6b6862;  /* sekundär/Labels, Platzhalter (warmes Grau, AA) */
    --grau-500: #646a73;  /* gedämpfter Text (lesbar auf weiß + warmen Flächen, AA) */
    --grau-700: #374151;  /* Fließtext */
    --grau-900: #1D1D1B;  /* Überschriften / Haupttext = Marken-Navy */

    /* --- PRIMÄR-AKZENT = MARKEN-NAVY (#1D1D1B) ---
       --akzent / --akzent-dunkel = AKTIONS-/AUSWAHL-FLÄCHEN mit WEISSEM Text:
       Primär-Buttons, aktiver SegmentSchalter, aktiver Navigationspunkt, gewählte
       Karten/Listenzeilen, Fokus-Ring. Navy + Weiß = Top-Kontrast (15.99:1).
       --akzent-dunkel (#2B2B28, minimal heller) ist die HOVER-Fläche (dezente
       Anhebung). --akzent-tief = Navy-TEXT/LINK auf hellem Grund (gleiche Marke,
       voller Kontrast). --akzent-hell / --akzent-rand = sehr helle, dezent
       navy-getönte Fläche + Rand für gewählte Karten/Zeilen, Badges, Hinweise. */
    --akzent: #1D1D1B;        /* Primär-/Auswahl-Fläche (Navy) */
    --akzent-dunkel: #2B2B28; /* Hover (minimal heller) */
    --akzent-tief: #1D1D1B;   /* Navy-Text/Link (Kontrast auf hell) */
    --akzent-hell: #eef1f3;   /* helle, navy-getönte Fläche (gewählt/aktiv) */
    --akzent-rand: #c2ccd2;   /* Rand der Auswahlfläche (navy-getönt) */

    /* --- WARMER AKZENT = KUPFER (#D4862F) – nur markante HIGHLIGHTS ---
       Aktive Schritt-/Stepper-Marken, Häkchen/✓, Spar-/Preisvorteil-Hervorhebung,
       wichtige Kennzahlen, dezente Detail-Striche, Badge-Akzent. Kupfer NIE als
       Fläche hinter weißem Text (Weiß auf Kupfer nur 2.58:1). Navy-Text auf Kupfer
       ist dagegen sicher (6.2:1) → --kupfer für Symbol-Kreise mit Navy-Glyphe.
       --kupfer-text = AA-sichere dunklere Kupfer-Variante für Kupfer-TEXT auf Weiß
       (#9e5e1c, 5.16:1 = AA für Fließtext). --kupfer-stark (#b5702f) = kräftiger
       Kupfer-Ton für große Kennzahlen/UI (>=3:1, AA-large). */
    --kupfer: #D4862F;        /* Kupfer-Highlight-Fläche (Marken-Kupfer aus dem Logo, mit Navy-Glyphe) */
    --kupfer-hover: #CE832E;  /* Verlauf-/Hover-Variante (minimal dunkler) */
    --kupfer-text: #9e5e1c;   /* Kupfer-Text auf Weiß (AA, 5.16:1) */
    --kupfer-stark: #b5702f;  /* kräftige Kupfer-Kennzahl/UI (AA-large) */
    --kupfer-hell: #faf2e9;   /* sehr helle Kupfer-Tönung (Spar-Fläche) */
    --kupfer-rand: #ecc89f;   /* warmer Kupfer-Rand */

    /* --- Beige (warme Marken-Akzentfläche, 1:1 aus PDF) --- */
    --beige: #f3efe9;         /* warme Akzent-/Spar-Kachel */
    --beige-rand: #e2ddd3;    /* Rand auf Beige */

    /* --- Status ---
       „Erfolg" ist NICHT mehr knalliggrün, sondern markenkonform Navy (Text/Symbol)
       auf einer ruhigen Beige-Fläche – so passt „gespeichert/beauftragt" zur Marke,
       das Kupfer bleibt den echten Highlights vorbehalten. Fehler/Warnung bleiben
       als eigenständige, gut lesbare Statusfarben erhalten. */
    --erfolg: #1D1D1B;        /* Erfolgs-Text/Symbol = Navy (markenkonform) */
    --erfolg-hg: #f3efe9;     /* Erfolgs-Fläche = Beige */
    --erfolg-rand: #e2ddd3;   /* Erfolgs-Rand */
    --fehler: #c0392b;        /* etwas wärmeres, markenverträglicheres Rot */
    --fehler-dunkel: #9c2f23; /* Hover für Gefahr-Buttons (dunkler) */
    --fehler-hg: #fcf1ef;
    --fehler-rand: #f3cfc9;
    --warn-hg: #fbf3e6;       /* warme Warn-Fläche (passt zu Kupfer/Beige) */
    --warn-rand: #ecc89f;
    --warn-text: #8a5212;     /* lesbarer Warn-Text (AA auf warn-hg) */
    /* --- Info-Blau (nur für „Termin diese Woche" – ruhig, AA auf hellem Grund) --- */
    --info-hg: #eef4fb;       /* sehr helle Info-Fläche */
    --info-rand: #c7dbf2;     /* ruhiger blauer Rand */
    --info-text: #1f5aa6;     /* lesbarer Info-Text (AA, ~5.3:1 auf info-hg) */

    /* --- Geometrie (Karten 10–12px, ruhige Abstufung auf 8px-Grid) --- */
    --radius-xl: 16px;
    --radius-l: 12px;
    --radius-m: 10px;
    --radius-s: 8px;

    /* --- Schatten: fein, neutral; bei Hover/aktiv etwas stärker --- */
    --schatten-s: 0 1px 3px rgba(0, 0, 0, 0.08);
    --schatten-m: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(17, 24, 39, 0.06);
    --schatten-l: 0 4px 12px rgba(17, 24, 39, 0.10), 0 16px 40px rgba(17, 24, 39, 0.12);
    /* Fokus-Ring = Navy (Primärfarbe), gut sichtbar auf hellen Flächen. */
    --schatten-fokus: 0 0 0 3px rgba(15, 36, 47, 0.30);
    /* Warmer Kupfer-„Glow" für aktive Marken/Symbole (Stepper, Vorschlag-Symbol). */
    --schatten-akzent: 0 2px 8px rgba(222, 143, 76, 0.45);

    --font-stack: "Plus Jakarta Sans", "Segoe UI Variable Text", system-ui,
        -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: var(--font-stack);
    font-weight: 400;
    color: var(--grau-700);
    background-color: var(--grau-50);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Sicherheitsnetz: der Seitenkörper scrollt nie horizontal. Überbreite Inhalte (z. B. viele
       Kopf-Reiter auf schmalem Fenster) scrollen in ihrem EIGENEN Container (.kopf-reiter), nicht
       die ganze Seite – so verschwindet nichts hinter dem Fensterrand. */
    overflow-x: hidden;
}

h1, h2, h3 {
    color: var(--grau-900);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.012em;
    font-weight: 700;
}

p {
    margin: 0;
}

code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    font-size: 0.9em;
    background: var(--grau-100);
    padding: 0.05em 0.4em;
    border-radius: 5px;
}

.untertitel {
    color: var(--grau-500);
    font-size: 1.02rem;
    margin: 0.3rem 0 0;
}

/* =========================================================================
   App-Schale + Kopfzeile
   ========================================================================= */
.app-schale {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--grau-0);
    border-bottom: 1px solid var(--grau-200);
}

.kopf-innen {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.55rem 1.5rem;
    /* ZWEI ZEILEN per flex-wrap, allein aus der MARKUP-Reihenfolge (Marke · Suche · Aktionen · Reiter) –
       kein order mehr nötig: Zeile 1 = Marke links + Suche daneben + Aktionen rechts (margin-left:auto),
       Zeile 2 = die Bereichs-Reiter (flex-basis 100% → eigene, volle, umbrechende Zeile). So folgt der
       Tastatur-Fokus der Lesereihenfolge (WCAG 2.4.3). min-height statt fester Höhe, damit die zweite
       Zeile Platz bekommt. */
    min-height: 5.8rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 1rem;
}

.marke {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0.3rem 0.6rem;
    margin: 0;
    cursor: pointer;
    color: var(--grau-900);
    border-radius: var(--radius-m);
    font: inherit;
}

.marke:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* Marken-Lockup: oben SEHR GROSS die Hannig-Wortmarke, darunter dezent der
   Software-Name "JH Suite". Vertikal gestapelt, linksbündig. */
.marke-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    line-height: 1.05;
}

/* Software-Name "JH Suite" – dezenter Untertitel unter der prominenten Hannig-Wortmarke. */
.marke-suite {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--grau-700);
}

/* Hannig-Wortmarke (SVG) – das FÜHRENDE Markenelement im Kopf (Helmut Hannig), bewusst
   SEHR GROSS und voll deckend, damit das Hannig-Branding klar präsent ist; der Software-Name
   "JH Suite" läuft dezent darunter mit. Breite Wortmarke → über die Höhe skaliert. block
   verhindert die Grundlinienlücke. */
.marke-logo {
    display: block;
    height: 3.5rem;
    width: auto;
    opacity: 1;
}

/* Bereichs-Reiter (Mein Tag … Beratung) als EIGENE, die VOLLE Breite einnehmende ZWEITE Kopfzeile unter
   der Marken-/Aktionszeile: flex-basis:100% schiebt sie in eine eigene Zeile, wo sie bei Platzmangel
   UMBRECHEN (flex-wrap:wrap) statt horizontal zu scrollen – so ist die komplette Navigation auf einen
   Blick sichtbar (Wunsch Jörn: kein Scrollen in der Kopfleiste). Weil sie im Markup als LETZTES stehen,
   ist kein order mehr nötig (die Fokus-Reihenfolge stimmt dadurch mit der Anzeige überein). Die einzelnen
   Reiter behalten ihre Breite (white-space:nowrap am .nav-knopf) und brechen als ganze Knöpfe um. */
.kopf-reiter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 100%;
    padding-bottom: 0.1rem;
}

/* Rechts dauerhaft angepinnte Aktionsleiste (Sync · Glocke · Einstellungen · Profil):
   schrumpft NIE (flex-shrink:0) und bleibt damit auf jeder Fensterbreite vollständig sichtbar
   und klickbar. Der Kern des Bugfixes – Zahnrad und Profil verschwinden nie mehr hinter dem
   Rand. */
.kopf-aktionen-leiste {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* in Zeile 1 nach ganz rechts schieben (Marke links, Suche daneben, Aktionen rechts). Kein order –
       die Markup-Position (nach der Suche, vor den Reitern) sorgt zusammen mit margin-left:auto für die
       richtige Anzeige UND die richtige Fokus-Reihenfolge. */
    margin-left: auto;
    gap: 0.4rem;
}

.nav-knopf {
    background: none;
    border: none;
    font: inherit;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--grau-700);
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    /* Beschriftung nie umbrechen und Breite behalten – die Reiter brechen als GANZE Knöpfe in die
       nächste Kopfzeile um (flex-wrap am .kopf-reiter), statt sich zu stauchen oder zu scrollen. */
    white-space: nowrap;
    flex: 0 0 auto;
}

.nav-knopf:hover {
    background: var(--grau-100);
    color: var(--grau-900);
}

.nav-knopf.nav-aktiv {
    background: var(--akzent);
    color: #fff;
}

/* Reiter mit Zähler-Abzeichen (Feature #81b, „Meine Aufgaben"): das Abzeichen sitzt inline hinter der
   Beschriftung. inline-flex, damit der Text vertikal mit dem Abzeichen mittig steht. */
.nav-knopf--badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Kleines Kupfer-Abzeichen für die DRÄNGENDEN eigenen Aufgaben (überfällig + heute) – dieselbe ruhige
   Optik wie das Glocken-Abzeichen, nur inline statt aufgesetzt. Rein kennzeichnend (aria-hidden – die
   Zahl steht sprechend im aria-label des Reiters). */
.reiter-abzeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--kupfer);
    color: #1d1d1b;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    flex: none;
}

/* Auf dem aktiven Reiter (Akzent-Hintergrund, weiße Schrift) hebt sich das Abzeichen weiterhin ab –
   heller Grund mit dunkler Zahl bleibt gut lesbar. */
.nav-knopf.nav-aktiv .reiter-abzeichen {
    background: #fff;
    color: var(--akzent-tief);
}

.nav-mehr-huelle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.nav-mehr-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.nav-mehr-pfeil {
    font-size: 0.85rem;
    line-height: 1;
}

.nav-mehr-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    border: 0;
    background: transparent;
    cursor: default;
}

.nav-mehr-menue {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 46;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: 0 14px 38px rgba(15, 36, 47, 0.16);
}

.nav-mehr-eintrag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--grau-900);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nav-mehr-eintrag:hover {
    background: var(--grau-50);
    border-color: var(--grau-150);
}

.nav-mehr-eintrag:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

.nav-mehr-eintrag--aktiv {
    background: var(--akzent-hell);
    border-color: var(--akzent-rand);
}

.nav-mehr-titel {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--grau-900);
}

.nav-mehr-text {
    font-size: 0.78rem;
    color: var(--grau-500);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    border: none;
    background: none;
    color: var(--grau-700);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.4s ease;
}

.nav-icon:hover {
    background: var(--grau-100);
    color: var(--grau-900);
}

.nav-icon:hover svg {
    transform: rotate(35deg);
    transition: transform 0.5s ease;
}

.nav-icon svg {
    transition: transform 0.5s ease;
}

.nav-icon.nav-aktiv {
    background: var(--akzent-hell);
    color: var(--akzent-tief);
}

.nav-knopf:focus-visible,
.nav-icon:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.app-inhalt {
    flex: 1 1 auto;
    width: 100%;
}

/* =========================================================================
   Wizard-Container
   ========================================================================= */
.wizard {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* Breiter für die zwei Schritte mit Tabellen: „Leistungen" und „Übersicht" (2026-09-13).
   56rem sind für ein Formular richtig, für eine Positionentabelle mit vier Spalten zu
   wenig — auf einem 1600er Bildschirm blieben links und rechts je rund 350 px leer,
   während die Tabelle gedrängt stand. 80rem = 1280 px; der Rest des Wizards bleibt schmal,
   weil lange Zeilen in einem Formular schlechter zu lesen sind, nicht besser. */
.wizard.wizard-weit {
    max-width: 80rem;
}

/* =========================================================================
   Fortschrittsanzeige (Stepper)
   ========================================================================= */
.schrittanzeige {
    margin-bottom: 1.75rem;
}

.schritt-liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.2rem;
    margin: 0;
    padding: 0;
}

.schritt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: max-content;
    color: var(--grau-500);
    font-size: 0.88rem;
    font-weight: 500;
}

.schritt:not(:last-child)::after {
    content: "";
    flex: 1 1 1.5rem;
    height: 2px;
    min-width: 0.75rem;
    background: var(--grau-200);
    border-radius: 2px;
    margin-left: 0.25rem;
}

.schritt-marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--grau-0);
    border: 1.5px solid var(--grau-300);
    color: var(--grau-500);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Aktive Schritt-Marke = KUPFER-Highlight (Navy-Glyphe für Kontrast 6.2:1). */
.schritt.aktiv .schritt-marke {
    background: var(--kupfer);
    border-color: var(--kupfer);
    color: var(--grau-900);
    box-shadow: var(--schatten-akzent);
}

.schritt.aktiv {
    color: var(--grau-900);
    font-weight: 700;
}

/* Erledigte Schritte: ruhige Beige-Marke mit Kupfer-Häkchen (Highlight). */
.schritt.erledigt .schritt-marke {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
    color: var(--kupfer-text);
}

.schritt.erledigt:not(:last-child)::after {
    background: var(--kupfer-rand);
}

.schritt .haken {
    font-size: 0.95rem;
}

/* =========================================================================
   Schritt-Karte
   ========================================================================= */
.schritt-karte {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-m);
    padding: 2.25rem;
}

.schritt-kopf {
    margin-bottom: 1.75rem;
}

.schritt-kopf h2 {
    font-size: 1.45rem;
}

.schritt-hinweis {
    color: var(--grau-500);
    margin: 0.45rem 0 0;
    font-size: 1.0rem;
    line-height: 1.45;
}

.schritt-fussnote {
    color: var(--grau-500);
    font-size: 0.88rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--grau-200);
}

.lade-hinweis {
    color: var(--grau-500);
    font-size: 1.02rem;
    padding: 1.5rem 0;
}

.leer-hinweis {
    background: var(--grau-100);
    border-radius: var(--radius-m);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    color: var(--grau-700);
}

.leer-hinweis p {
    margin: 0.2rem 0;
}

/* =========================================================================
   Fortsetzen-Abfrage (unfertiger Entwurf gefunden)
   Ruhige Auswahl beim Modul-Einstieg: weitermachen oder neu beginnen.
   ========================================================================= */
.entwurf-abfrage h2 {
    font-size: 1.45rem;
    margin: 0 0 0.45rem;
}

.entwurf-details {
    margin: 1.1rem 0 0;
    padding: 0.85rem 1.1rem;
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-m);
    color: var(--grau-900);
    font-weight: 600;
    font-size: 0.98rem;
}

.entwurf-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

.entwurf-fussnote {
    color: var(--grau-500);
    font-size: 0.88rem;
    margin: 1rem 0 0;
}

/* =========================================================================
   Formularfelder
   ========================================================================= */
.feld-gitter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 1.5rem;
}

.feld {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.feld-breit {
    grid-column: 1 / -1;
}

.feld-schmal {
    max-width: 12rem;
}

label {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--grau-900);
}

label .optional {
    font-weight: 400;
    color: var(--grau-500);
    font-size: 0.85rem;
}

.eingabe {
    width: 100%;
    padding: 0.62rem 0.8rem;
    /* Dieselben 44 px wie an den Knöpfen — ein Eingabefeld wird genauso angetippt. */
    min-height: 44px;
    font-size: 1.0rem;
    font-family: inherit;
    color: var(--grau-900);
    background: var(--grau-0);
    border: 1px solid var(--grau-300);
    border-radius: var(--radius-s);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    appearance: none;
}

.eingabe::placeholder {
    color: var(--grau-400);
}

.eingabe:hover:not(:disabled):not(:focus) {
    border-color: var(--grau-400);
}

.eingabe:focus {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.eingabe:disabled {
    background: var(--grau-100);
    color: var(--grau-500);
    border-color: var(--grau-200);
    cursor: not-allowed;
}

.eingabe.invalid,
.eingabe.modified.invalid {
    border-color: var(--fehler);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.eingabe-text {
    resize: vertical;
    min-height: 3.5rem;
    line-height: 1.5;
}

.eingabe-kompakt {
    padding: 0.4rem 0.55rem;
    font-size: 0.92rem;
}

select.eingabe {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2rem;
    cursor: pointer;
}

.feld-hilfe {
    color: var(--grau-500);
    font-size: 0.84rem;
}

.eingabe-mit-einheit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eingabe-mit-einheit .eingabe {
    flex: 1 1 auto;
}

/* Eingabefeld + angehängter Aktions-Knopf in einer Zeile (z. B. Pfad + „Verbindung testen").
   Bricht auf schmalen Breiten unter das Feld um; der Knopf schrumpft nicht weg. */
.eingabe-mit-knopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.eingabe-mit-knopf .eingabe {
    flex: 1 1 18rem;
}

.eingabe-mit-knopf .btn {
    flex: 0 0 auto;
}

.einheit {
    color: var(--grau-500);
    font-size: 0.95rem;
    white-space: nowrap;
}

.validation-message,
.feld-fehler {
    color: var(--fehler);
    font-size: 0.86rem;
    font-weight: 500;
}

.feld-fehler {
    background: var(--fehler-hg);
    border-radius: var(--radius-s);
    padding: 0.65rem 0.9rem;
    margin-top: 0.85rem;
}

/* Ruhige Erfolgs-/Status-Meldung (z. B. Laufzettel übernommen) – markenkonform (Beige/Navy),
   bewusst NICHT alarmierend wie .feld-fehler. */
.feld-erfolg {
    color: var(--erfolg);
    background: var(--erfolg-hg);
    border: 1px solid var(--erfolg-rand);
    border-radius: var(--radius-s);
    padding: 0.65rem 0.9rem;
    margin-top: 0.85rem;
    font-size: 0.86rem;
    font-weight: 500;
}

/* =========================================================================
   Auswahl-Karten (Wärmepumpe / Förderung)
   ========================================================================= */
.karten-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.9rem;
}

.karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    padding: 1.2rem 1.25rem 1.2rem 1.35rem;
    background: var(--grau-0);
    border: 1.5px solid var(--grau-200);
    border-radius: var(--radius-l);
    cursor: pointer;
    font: inherit;
    color: var(--grau-900);
    box-shadow: var(--schatten-s);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.karte:hover {
    border-color: var(--grau-300);
    box-shadow: var(--schatten-m);
    transform: translateY(-1px);
}

.karte:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.karte-gewaehlt {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.karte-gewaehlt:hover {
    border-color: var(--akzent);
}

/* Häkchen auf gewählter Karte = KUPFER-Highlight (auf heller Navy-Tönung lesbar). */
.karte-haken {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    color: var(--kupfer-text);
    font-weight: 800;
    font-size: 1.05rem;
}

.karte-titel {
    font-weight: 600;
    font-size: 1.05rem;
    padding-right: 1.5rem;
}

.karte-detail {
    color: var(--grau-500);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* =========================================================================
   Paketinhalt – rein darstellende Liste der im Paket-Langtext hinterlegten
   Bauteile (Menge × Beschreibung, Bestell-Nr. gedämpft). Wird unter den
   Auswahl-Karten gezeigt, sobald ein Paket gewählt ist; nutzt die ruhige
   Karten-Sprache der App.
   ========================================================================= */
.paket-inhalt-rahmen {
    margin-top: 1rem;
    border: 1.5px solid var(--akzent-rand);
    border-radius: var(--radius-l);
    background: var(--akzent-hell);
    padding: 1.1rem 1.25rem;
}

.paket-inhalt-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grau-900);
    margin: 0;
}

.paket-inhalt-leer {
    margin: 0.55rem 0 0;
    color: var(--grau-500);
    font-size: 0.9rem;
}

.paket-inhalt-liste {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paket-inhalt-zeile {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.paket-inhalt-menge {
    flex-shrink: 0;
    min-width: 2.4rem;
    text-align: right;
    font-weight: 600;
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
}

.paket-inhalt-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.paket-inhalt-bez {
    color: var(--grau-900);
    line-height: 1.4;
}

.paket-inhalt-nr {
    color: var(--grau-500);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Auto-Paket-Vorschlag (Konfigurator Phase C) – dezente, gut sichtbare
   Hinweis-Karte über der Einzelkomponenten-Auswahl. Nutzt die ruhige
   Akzent-Sprache der App (akzent-hell/akzent-rand), mit Glühbirnen-Symbol
   und drei klaren Aktionen. Nicht aufdringlich (kein Modal).
   ========================================================================= */
.vorschlag-karte {
    border: 1.5px solid var(--kupfer-rand);
    border-radius: var(--radius-l);
    background: linear-gradient(135deg, var(--kupfer-hell), var(--beige));
    box-shadow: var(--schatten-s);
    padding: 1.15rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vorschlag-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

/* Glühbirnen-Symbol des Vorschlags = KUPFER-Highlight mit Navy-Glyphe. */
.vorschlag-symbol {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--kupfer);
    color: var(--grau-900);
    box-shadow: var(--schatten-akzent);
}

.vorschlag-kopf-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.vorschlag-titel {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grau-900);
}

.vorschlag-text {
    color: var(--grau-700);
    font-size: 0.95rem;
    line-height: 1.5;
}

.vorschlag-text strong {
    color: var(--grau-900);
    font-weight: 600;
}

.vorschlag-unsicher {
    color: var(--grau-500);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0.1rem 0 0;
}

.vorschlag-aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.vorschlag-details {
    margin-top: 0.1rem;
}

/* Die ausgeklappte Stückliste sitzt schon in einer eigenen Akzent-Karte
   (paket-inhalt-rahmen); innerhalb des Vorschlags die Doppel-Tönung beruhigen. */
.vorschlag-details .paket-inhalt-rahmen {
    margin-top: 0;
    background: var(--grau-0);
}

.vorschlag-weitere {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    color: var(--grau-500);
    font-size: 0.88rem;
    border-top: 1px solid var(--kupfer-rand);
    padding-top: 0.8rem;
}

/* =========================================================================
   Doppelungs-Warnung am Zubehör (Phase C, Teil 2) – dezenter Hinweis an
   einer Zubehör-Zeile, die bereits im gewählten Paket steckt. Warnt nur,
   blockiert nicht (der Nutzer entscheidet). Warn-Tönung, gerundet.
   ========================================================================= */
.zub-dedup-warnung {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    color: var(--warn-text);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.3;
}

.zub-dedup-warnung .zub-dedup-symbol {
    flex-shrink: 0;
    font-weight: 700;
}

/* =========================================================================
   Leistungspaket-Liste im Wizard (Aktivieren + Anzahl)
   ========================================================================= */
.leistungs-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.leistungs-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border: 1.5px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.leistungs-zeile.zeile-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.leistungs-auswahl {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    flex: 1 1 auto;
}

.leistungs-haken {
    width: 1.3rem;
    height: 1.3rem;
    accent-color: var(--akzent);
    cursor: pointer;
    flex-shrink: 0;
}

.leistungs-text {
    display: flex;
    flex-direction: column;
}

.leistungs-name {
    font-weight: 600;
    font-size: 1.0rem;
}

.leistungs-kategorie {
    color: var(--grau-500);
    font-size: 0.82rem;
}

.menge-label {
    font-size: 0.78rem;
    color: var(--grau-500);
    font-weight: 500;
}

.eingabe-menge {
    width: 6rem;
    text-align: right;
}

/* =========================================================================
   Schritt 2 – Wärmepumpe: Bereichswahl, Einzelkomponenten, Zubehör
   ========================================================================= */
/* Nur für Screenreader (sichtbar versteckt) – sonst optisch identisch zu sichtbar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wp-bereich-wahl {
    margin-bottom: 1.5rem;
}

.wp-bereich-inhalt {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Hinweis beim Moduswechsel (Paket ↔ Komponenten) */
.wp-modus-hinweis {
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-m);
    padding: 0.8rem 1.1rem;
    color: var(--grau-700);
    font-size: 0.92rem;
    line-height: 1.45;
}

.komp-intro {
    margin-top: -0.25rem;
}

/* Statuszeile unten: was aktuell gewählt ist */
.wp-auswahl-status {
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
    background: var(--grau-100);
    border-radius: var(--radius-m);
    color: var(--grau-700);
    font-size: 0.92rem;
    font-weight: 500;
}

/* Bereich „Zubehör & Zusatz": die drei Abschnitte (Zubehör/Regelung/Montagezubehör)
   gleichmäßig untereinander, mit Luft dazwischen. */
.wp-zusatz-abschnitte {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Block einer Einzelkomponente / eines Zusatz-Abschnitts */
.komp-block,
.zub-block {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 1.35rem 1.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.komp-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.komp-titel {
    font-size: 1.1rem;
    font-weight: 600;
}

.komp-hinweis {
    color: var(--grau-500);
    font-size: 0.9rem;
    line-height: 1.4;
}

.komp-suchfeld {
    max-width: 32rem;
}

/* Hervorgehobene aktuelle Auswahl einer Komponente */
.komp-gewaehlt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1.05rem;
    border: 1.5px solid var(--akzent);
    background: var(--akzent-hell);
    border-radius: var(--radius-m);
}

.komp-gewaehlt-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.komp-gewaehlt-name {
    font-weight: 600;
    font-size: 1.0rem;
    color: var(--grau-900);
}

.komp-gewaehlt-marke {
    color: var(--akzent-tief);
    font-weight: 600;
}

.komp-gewaehlt-meta {
    color: var(--grau-700);
    font-size: 0.88rem;
}

/* Trefferliste (Komponenten + Zubehör) */
.komp-treffer {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 22rem;
    overflow-y: auto;
}

.komp-treffer-zeile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    cursor: pointer;
    font: inherit;
    color: var(--grau-900);
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.komp-treffer-zeile:hover:not(:disabled) {
    border-color: var(--grau-300);
    box-shadow: var(--schatten-s);
}

.komp-treffer-zeile:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.komp-treffer-zeile.treffer-gewaehlt {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.komp-treffer-zeile.treffer-hinzugefuegt {
    cursor: default;
    background: var(--grau-50);
    color: var(--grau-500);
}

.treffer-haupt {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.treffer-name {
    font-weight: 500;
    font-size: 0.98rem;
}

.treffer-meta {
    color: var(--grau-500);
    font-size: 0.84rem;
}

.treffer-rechts {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.treffer-preis {
    font-variant-numeric: tabular-nums;
    color: var(--grau-700);
    font-size: 0.92rem;
    white-space: nowrap;
}

.treffer-aktion {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--akzent-tief);
    white-space: nowrap;
}

.treffer-hinzugefuegt .treffer-aktion {
    color: var(--erfolg);
}

/* Großes „… wählen“-Feld, das das Auswahlfenster öffnet (Schritt 2). Bewusst groß und
   ruhig als klares Klick-Ziel; gestrichelter Rahmen signalisiert „hier ergänzen“. */
.auswahl-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 0.95rem 1.15rem;
    border: 1.5px dashed var(--grau-300);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    cursor: pointer;
    font: inherit;
    color: var(--grau-700);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.auswahl-trigger:hover {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
}

.auswahl-trigger:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.auswahl-trigger-text {
    font-weight: 500;
    font-size: 1.0rem;
}

.auswahl-trigger-icon {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--akzent-tief);
    flex-shrink: 0;
}

/* Aktionen neben einer gewählten Komponente (Ändern / Entfernen) */
.komp-gewaehlt-aktionen {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Dezenter Hinweis-Badge für Bosch-Liste-Artikel (Listenpreis, ohne Taifun-Verknüpfung).
   Nutzt die etablierte Badge-Sprache (.komp-badge) in zurückhaltender Warn-Tönung. */
.bosch-badge {
    background: var(--warn-hg);
    color: var(--warn-text);
    border-color: var(--warn-rand);
    margin-left: 0.5rem;
    cursor: help;
}

/* Zubehör-Liste (Tabelle der gewählten Artikel) */
.zub-tabelle .spalte-menge-th {
    width: 9rem;
}

.zub-menge {
    max-width: 8.5rem;
}

.zub-menge .eingabe-menge {
    width: 5rem;
}

/* =========================================================================
   Die einfache Aufnahme (2026-08-15)

   Aus dem Betrieb: „das soll eine Reinigungskraft ausfüllen können."

   Alles hier ist größer als im fachlichen Weg: größere Schrift, größere
   Klickflächen, mehr Luft. Das ist kein Geschmack — die Aufnahme entsteht auf
   der Baustelle, im Stehen, oft auf dem Handy, und mit einer Hand.
   ========================================================================= */
.aufnahme-karte {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-klein, 6px);
    background: var(--grau-0);
    padding: 1rem 1.1rem 1.2rem;
    margin-bottom: 0.9rem;
}

.aufnahme-kopf {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

/* Die Nummer macht sichtbar, an welchem Raum man ist — bei sieben Räumen auf
   einem Handybildschirm ist das die halbe Orientierung. */
.aufnahme-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--akzent);
    color: var(--grau-0);
    font-weight: 600;
}

.aufnahme-name {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: 1.05rem;
}

.aufnahme-frage {
    margin-bottom: 1rem;
}

/* Die Frage steht über der Eingabe, nicht daneben: Nebeneinander bricht auf
   dem Handy um, und dann steht die Beschriftung über dem falschen Feld. */
.aufnahme-text {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1rem;
    color: var(--grau-900);
}

.aufnahme-eingabe {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.aufnahme-oder {
    color: var(--grau-400);
    padding: 0 0.4rem;
}

.feld-winzig {
    width: 5rem;
}

/* Die drei Orte als große Karten mit Zeichen — wer „Truhe" nicht kennt, erkennt
   den Ort. */
.aufnahme-wahl {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.aufnahme-ort {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 9.5rem;
    flex: 1 1 9.5rem;
    padding: 0.8rem 0.6rem;
    border: 2px solid var(--grau-300);
    border-radius: var(--radius-klein, 6px);
    background: var(--grau-0);
    cursor: pointer;
    font-family: inherit;
}

.aufnahme-ort:hover {
    background: var(--grau-50);
}

.aufnahme-ort-gewaehlt {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.aufnahme-ort-bild {
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--kupfer-stark);
}

.aufnahme-ort-text {
    font-weight: 600;
    text-align: center;
}

.aufnahme-ort-zeile {
    font-size: 0.8rem;
    color: var(--grau-500);
    text-align: center;
}

/* Das Häkchen bekommt die ganze Zeile als Klickfläche — auf dem Handy trifft
   niemand ein 14-Pixel-Kästchen. */
.aufnahme-haken {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-klein, 6px);
    cursor: pointer;
}

.aufnahme-haken:hover {
    background: var(--grau-50);
}

.aufnahme-haken input {
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* Was PlanBoard verstanden hat — sofort sichtbar, sonst füllt man ein Formular
   aus, ohne zu wissen, ob es angekommen ist. */
.aufnahme-ergebnis {
    margin: 0.8rem 0 0;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--kupfer);
    background: var(--kupfer-hell);
    font-size: 0.92rem;
    color: var(--grau-700);
}

/* Der Aufteilungsvorschlag — im einfachen wie im fachlichen Weg. */
.aufteilung-vorschlag {
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-klein, 6px);
    background: var(--akzent-hell);
    padding: 0.8rem 1rem;
    margin: 0.8rem 0;
}

.aufteilung-zeile {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0.35rem 0;
}

.aufteilung-name {
    font-weight: 600;
    min-width: 6.5rem;
}

.aufteilung-raeume {
    color: var(--grau-700);
}

.aufteilung-geraet {
    color: var(--grau-500);
    font-size: 0.92rem;
}

/* =========================================================================
   Die Anlagen des Angebots (2026-08-15)

   Bosch gibt höchstens fünf Innengeräte je Außeneinheit frei; ein Haus mit
   sechs Räumen braucht zwei Anlagen. Die Leiste steht nur da, wenn es mehr
   als eine gibt — bei einer wäre sie ein Bedienelement für nichts.
   ========================================================================= */
.anlagen-leiste {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--grau-200);
    padding-bottom: 0.6rem;
}

.anlagen-reiter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--grau-300);
    border-radius: var(--radius-klein, 6px);
    background: var(--grau-0);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.anlagen-reiter:hover {
    background: var(--grau-50);
}

/* Die aktive Anlage trägt den Akzentrahmen — welche gerade bearbeitet wird,
   muss ohne Suchen erkennbar sein: Wer an der falschen plant, merkt es erst
   beim Angebot. */
.anlagen-reiter-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    box-shadow: inset 0 -2px 0 var(--akzent);
}

.anlagen-reiter-titel {
    font-weight: 600;
    font-size: 0.95rem;
}

.anlagen-reiter-zeile {
    font-size: 0.8rem;
    color: var(--grau-500);
}

/* =========================================================================
   Die Anlage als räumliches Modell (2026-08-15)

   Aus dem Betrieb: „es soll 3d visuell dargestellt werden."

   Ohne Fremdbibliothek: `perspective` am Betrachter, `transform-style: preserve-3d`
   an der Welt, und jede Fläche sitzt mit `translate3d` an ihrem Platz. Der Browser
   rechnet die Projektion — das ist genau das, wofür diese Eigenschaften da sind,
   und es spart ein halbes Megabyte Fremdcode, den im Betrieb niemand aktualisiert.
   ========================================================================= */
.anlage3d {
    margin-bottom: 1.1rem;
}

.anlage3d-steuerung {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.anlage3d-steuerung input[type="range"] {
    width: 8rem;
    accent-color: var(--kupfer);
}

/* Die Bühne trägt die Perspektive und begrenzt die Höhe: Ein Modell, das die halbe
   Seite füllt, schiebt die Eingabefelder aus dem Bild — und die sind der Zweck. */
.anlage3d-buehne {
    position: relative;
    height: 420px;
    perspective: 1300px;
    perspective-origin: 50% 42%;
    background: linear-gradient(180deg, var(--grau-50), var(--grau-100));
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-klein, 6px);
    overflow: hidden;
    cursor: grab;
    touch-action: none;   /* sonst scrollt das Ziehen die Seite statt zu drehen */
    user-select: none;
}

.anlage3d-buehne:active {
    cursor: grabbing;
}

.anlage3d-welt {
    position: absolute;
    left: 50%;
    top: 64%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transition: transform 0.08s linear;
}

/* Jede Fläche hängt an derselben Mitte — die Formeln in der Komponente rechnen von
   dort aus. */
.anlage3d-welt > * {
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
}

/* Jeder Raum ist ein eigener räumlicher Kontext — sonst malt der Browser die
   Bodenflächen über die Wände, und übrig bleibt ein flacher Grundriss. */
.anlage3d-koerper {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}

/* Die nicht bearbeitete Anlage: da, aber zurückgenommen. Zwei gleich helle
   Gruppen nebeneinander wären eine Suchaufgabe — man müsste jedes Mal am Reiter
   nachsehen, an welcher man gerade plant. */
.anlage3d-fremd {
    opacity: 0.45;
}

.anlage3d-koerper > * {
    position: absolute;
    left: 0;
    top: 0;
}

/* Der Boden eines Raums trägt seine Ampelfarbe — er ist die Fläche, die man aus
   jedem Blickwinkel sieht. Als Knopf, weil ein Klick zur Karte des Raums führt. */
.anlage3d-raumboden {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 2px solid var(--grau-400);
    border-radius: 3px;
    background: var(--grau-0);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
}

/* Die Beschriftung liegt in der Bodenfläche und dreht mit ihr — wie in jedem
   Grundriss. Schwebende Schilder standen bei vier Räumen übereinander. */
.anlage3d-bodentitel {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--grau-900);
    line-height: 1.1;
}

.anlage3d-bodenzeile {
    font-size: 0.75rem;
    color: var(--grau-500);
    line-height: 1.1;
    text-align: center;
    padding: 0 2px;
}

/* Der Stab trägt das Gerät und zeigt seine Einbauhöhe. */
.anlage3d-stab {
    background: var(--grau-400);
    border-radius: 1px;
}

.anlage3d-raumboden:hover {
    filter: brightness(0.96);
}

.anlage3d-raumboden:focus-visible {
    outline: 3px solid var(--kupfer);
    outline-offset: 2px;
}

.anlage3d-vollstaendig {
    background: var(--erfolg-hg);
    border-color: var(--erfolg);
}

.anlage3d-offen {
    background: var(--grau-100);
    border-color: var(--grau-400);
}

.anlage3d-warnung {
    background: var(--warn-hg);
    border-color: var(--warn-rand);
}

.anlage3d-gesperrt {
    background: var(--fehler-hg);
    border-color: var(--fehler);
}

/* Wände nur angedeutet: Sie zeigen die Raumhöhe, ohne die Sicht zu nehmen. Ein
   geschlossener Kasten wäre von außen eine Kiste und von innen nicht zu sehen. */
.anlage3d-wand {
    /* **Deutlich, nicht zart** (2026-08-15, nach dem Blick im Browser). Der erste Entwurf
       hatte 6 % Deckkraft — die Wände waren im Bild nicht zu finden, und das Modell sah
       aus wie ein flacher Grundriss. Eine 3D-Ansicht ohne sichtbare Höhe ist keine. */
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--grau-400);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Das Innengerät auf seiner echten Einbauhöhe — die Höhe, an der nach DIN EN 378
   die nötige Raumfläche hängt. */
.anlage3d-geraet {
    background: var(--kupfer-stark);
    border: 1px solid var(--grau-0);
    outline: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Die Truhe steht am Boden und ist breiter als hoch, die Kassette sitzt flach an
   der Decke — die Form sagt die Bauform, auch wenn das Schild nicht lesbar ist. */
.anlage3d-geraet-truhe {
    background: var(--kupfer-stark);
    border-radius: 2px 2px 0 0;
}

.anlage3d-geraet-kassette {
    background: var(--grau-700);
    border-radius: 0 0 2px 2px;
}

.anlage3d-aussen {
    background: var(--akzent);
    border: 1px solid var(--grau-700);
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Schilder drehen gegen die Welt zurück (die Formel steht in der Komponente), damit
   sie in jedem Winkel lesbar bleiben. */
.anlage3d-schild {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: 4px;
    padding: 2px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    white-space: nowrap;
}

.anlage3d-schild-titel {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--grau-900);
}

.anlage3d-schild-zeile {
    font-size: 0.75rem;
    color: var(--grau-500);
}

.anlage3d-schild-aussen {
    border-color: var(--akzent-rand);
}

/* =========================================================================
   Raumkarten (2026-08-15)

   Aus dem Betrieb: „kann man den Konfigurator visueller machen für die ganzen
   Eingaben?" Bis hierher standen die Angaben zu EINEM Raum an ZWEI Stellen —
   Gerät und Meter oben, Fläche und Einbauhöhe zwei Blöcke weiter unten. Bei
   vier Räumen sind das acht Felder in zwei Listen, und wer sie zuordnen will,
   zählt mit dem Finger.

   Die Farben sind die vorhandenen Tokens, keine neuen: Eine Ampel, die sich
   eine eigene Palette mitbringt, sieht beim nächsten Feinschliff der Oberfläche
   plötzlich fremd aus.
   ========================================================================= */
.raumkarten {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.raumkarte {
    border: 1px solid var(--grau-200);

    /* Der farbige Streifen links trägt den Zustand. Er steht am Rand und nicht
       als Fläche hinter der Karte: Vier volle Warnflächen nebeneinander sind ein
       Jahrmarkt, und dann sticht die eine Sperre nicht mehr heraus. */
    border-left: 4px solid var(--grau-300);
    border-radius: var(--radius-klein, 6px);
    background: var(--grau-0);
    padding: 0.85rem 1rem;
}

.raumkarte-kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.raumkarte-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.raumkarte-ampel {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.raumkarte-punkt {
    font-size: 0.75rem;
    line-height: 1;
}

/* Vollständig: die ruhige Marken-Kombination. Kein Grün — die Oberfläche kennt
   keins, und ein einzelnes grünes Element wäre der einzige Fremdkörper. */
.raumkarte-vollstaendig {
    border-left-color: var(--erfolg);
}

.raumkarte-ampel-vollstaendig {
    background: var(--erfolg-hg);
    border-color: var(--erfolg-rand);
    color: var(--erfolg);
}

/* Offen: grau und nicht gelb. Ein Raum, in den noch nichts eingetragen ist, ist
   kein Problem — er ist unfertig. Wer Unfertiges warnend färbt, hat beim dritten
   Angebot eine Maske voller Warnungen und liest keine mehr. */
.raumkarte-offen {
    border-left-color: var(--grau-300);
}

.raumkarte-ampel-offen {
    background: var(--grau-100);
    border-color: var(--grau-200);
    color: var(--grau-500);
}

.raumkarte-warnung {
    border-left-color: var(--warn-rand);
}

.raumkarte-ampel-warnung {
    background: var(--warn-hg);
    border-color: var(--warn-rand);
    color: var(--warn-text);
}

.raumkarte-gesperrt {
    border-left-color: var(--fehler);
}

.raumkarte-ampel-gesperrt {
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
    color: var(--fehler);
    font-weight: 600;
}

.raumkarte-geraet {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

/* Das Auswahlfeld trägt den langen Katalognamen und darf den Rest verdrängen —
   aber nicht die Karte sprengen. */
.raumkarte-geraet .feld-eingabe {
    flex: 1 1 22rem;
    min-width: 0;
}

.raumkarte-felder {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.raumkarte-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.raumkarte-eingabe {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Der Befund gehört an seine Karte und bekommt dort etwas Luft nach oben. */
.raumkarte .feld-fehler,
.raumkarte .feld-hinweis {
    margin-top: 0.7rem;
    margin-bottom: 0;
}

/* Fortschritt der Aufnahme ------------------------------------------------- */
.raum-fortschritt {
    margin-bottom: 0.9rem;
}

.raum-fortschritt-text {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    color: var(--grau-700);
}

.raum-fortschritt-balken {
    height: 6px;
    border-radius: 999px;
    background: var(--grau-150);
    overflow: hidden;
}

.raum-fortschritt-fuellung {
    height: 100%;
    background: var(--kupfer);
    border-radius: 999px;
    transition: width 0.2s ease;
}

/* Handauswahl der Trasse: vier Gruppen, zugeklappt (2026-08-15).

   Aufklappbar, weil es zusammen fast fünfzig Teile sind — offen wäre der Schritt eine
   Katalogliste, und die eigentliche Planung (Räume, Meter) verschwände darin. Zugeklappt
   steht trotzdem da, WAS es gibt: Genau daran hat es bis hierher gefehlt, denn ergänzen
   ließ sich alles schon immer über die Artikelsuche. */
.zub-gruppe {
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein, 6px);
    margin-bottom: 0.6rem;
    background: var(--flaeche);
}

.zub-gruppe-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

/* Ein eigenes Dreieck statt des Browser-Markers: Der sitzt in Safari und Chrome
   verschieden, und die Zeile springt beim Aufklappen. */
.zub-gruppe-kopf::-webkit-details-marker {
    display: none;
}

.zub-gruppe-kopf::before {
    content: "▸";
    color: var(--akzent-tief);
    transition: transform 0.15s ease;
}

.zub-gruppe[open] > .zub-gruppe-kopf::before {
    transform: rotate(90deg);
}

.zub-gruppe-kopf:hover {
    background: var(--flaeche-hover, rgba(0, 0, 0, 0.03));
}

/* Die Zahl ist eine Nebeninformation und darf die Überschrift nicht mittragen. */
.zub-gruppe-zahl {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--text-leise);
}

.zub-gruppe > .komp-hinweis,
.zub-gruppe > .tabellen-rahmen {
    margin: 0 0.9rem 0.9rem;
}

/* =========================================================================
   Buttons
   ========================================================================= */
/* **44 Pixel, auch hier** (2026-08-15). Der Rest von PlanBoard hält diese Größe seit dem
   28.07. ein — app.css setzt sie für jeden MudBlazor-Knopf. Der Konfigurator benutzt eigene
   Klassen und war davon nie erfasst: 0,62rem Polsterung plus 0,98rem × 1,2 Zeilenhöhe plus
   Rand ergeben rund 41 px. Das sind drei Pixel zu wenig für einen Daumen — und es ist der
   Bildschirm, der beim Kunden am Küchentisch bedient wird. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.62rem 1.3rem;
    min-height: 44px;
    font-size: 0.98rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* Primär: grüne Fläche, weißer Text; bei Hover dunkler + dezente Anhebung. */
.btn-primaer {
    background: var(--akzent);
    color: #fff;
    box-shadow: var(--schatten-s);
}

.btn-primaer:hover:not(:disabled) {
    background: var(--akzent-dunkel);
    box-shadow: var(--schatten-m);
    transform: translateY(-1px);
}

/* Sekundär: ruhige graue Fläche, dunkler Text, feiner Rand; Hover etwas dunkler. */
.btn-sekundaer {
    background: var(--grau-100);
    color: var(--grau-900);
    border-color: var(--grau-300);
}

.btn-sekundaer:hover:not(:disabled) {
    background: var(--grau-200);
    border-color: var(--grau-400);
}

.btn-neutral {
    background: var(--grau-100);
    color: var(--grau-900);
    border-color: var(--grau-200);
}

.btn-neutral:hover:not(:disabled) {
    background: var(--grau-150);
}

.btn-gefahr {
    background: var(--fehler);
    color: #fff;
}

.btn-gefahr:hover:not(:disabled) {
    background: var(--fehler-dunkel);
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* Kompakter Button (z. B. „Ändern“ neben einer gewählten Komponente) */
.btn-klein {
    padding: 0.55rem 1rem;
    /* 40 px statt 32: bewusst kleiner als die 44 der Hauptknöpfe, aber nicht mehr so klein,
       dass man mit dem Daumen danebentrifft. */
    min-height: 40px;
    font-size: 0.9rem;
}

.btn .bald {
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.1);
    color: inherit;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}

/* Text-/Link-Buttons (Tabellen-Aktionen) */
.btn-text {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--akzent-tief);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-s);
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-text:hover {
    background: var(--akzent-hell);
}

.btn-text:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.btn-text-gefahr {
    color: var(--fehler);
}

.btn-text-gefahr:hover {
    background: var(--fehler-hg);
}

.knopf-gruppe {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* =========================================================================
   Wizard-Navigation
   ========================================================================= */
.wizard-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--grau-200);
}

.navigation-rechts {
    margin-left: auto;
}

/* =========================================================================
   Toggle-Schalter (Apple-Stil)
   ========================================================================= */
.toggle-zeile {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--grau-900);
}

.toggle-zeile.toggle-deaktiviert {
    cursor: not-allowed;
    opacity: 0.55;
}

.toggle {
    position: relative;
    flex-shrink: 0;
    width: 3.1rem;
    height: 1.8rem;
    border-radius: 999px;
    border: none;
    background: var(--grau-300);
    cursor: pointer;
    padding: 0;
    transition: background 0.22s ease;
}

.toggle:disabled {
    cursor: not-allowed;
}

.toggle-knopf {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.8rem - 4px);
    height: calc(1.8rem - 4px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.22s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.toggle.toggle-an {
    background: var(--erfolg);
}

.toggle.toggle-an .toggle-knopf {
    transform: translateX(1.3rem);
}

.toggle:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.toggle-text {
    font-weight: 500;
}

/* =========================================================================
   Segment-Schalter (segmentierter Umschalter / Tabs)
   ========================================================================= */
.segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--grau-100);
    border-radius: var(--radius-m);
    border: 1px solid var(--grau-200);
}

.segment-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--grau-700);
    padding: 0.45rem 0.95rem;
    border-radius: calc(var(--radius-m) - 4px);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.segment-knopf:hover:not(.segment-aktiv) {
    color: var(--grau-900);
}

.segment-aktiv {
    background: var(--grau-0);
    color: var(--grau-900);
    box-shadow: var(--schatten-s);
}

.segment-knopf:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.segment-symbol {
    font-size: 1rem;
}

/* =========================================================================
   Übersicht – Kunde, Positionstabelle, Summen
   ========================================================================= */
.uebersicht-kunde {
    background: var(--grau-100);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.75rem;
}

.uebersicht-kunde h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grau-500);
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.kunde-name {
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0;
}

.kunde-adresse {
    margin: 0.1rem 0 0;
    color: var(--grau-700);
}

.kunde-kontakt {
    margin: 0.4rem 0 0;
    color: var(--grau-500);
    font-size: 0.9rem;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.positionen-titel {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.tabellen-rahmen {
    overflow-x: auto;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    /* Defensiv: der Rahmen darf NIE breiter werden als sein Elternteil – sonst greift
       das horizontale Scrollen nicht und die Tabelle würde rechts abgeschnitten. So
       bleibt er an die Karten-/Schritt-Breite gebunden und scrollt sauber in sich. */
    max-width: 100%;
    min-width: 0;
}

.positionen-tabelle,
.datentabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.positionen-tabelle th,
.positionen-tabelle td,
.datentabelle th,
.datentabelle td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--grau-150);
    vertical-align: middle;
}

/* Lieferumfangs-Tabelle (Übersicht): 8 Spalten, von denen 6 nicht umbrechen (Art +
   die fünf Zahlen-Spalten inkl. „Material-EK"). Bei normaler Fensterbreite müssen ALLE
   Spalten inkl. „Gesamt"/„Material-EK" sichtbar sein. Deshalb hier kompakteres Zellen-
   Padding als in der allgemeinen .datentabelle – das senkt die Mindestbreite der Tabelle
   deutlich (8 Spalten × gespartem Padding), ohne die Lesbarkeit zu opfern. Reine Darstellung. */
.positionen-tabelle th,
.positionen-tabelle td {
    padding: 0.6rem 0.6rem;
}

/* Eine sinnvolle Mindestbreite, damit die Tabelle bei SEHR schmalem Fenster nicht
   unleserlich gequetscht, sondern im .tabellen-rahmen sauber horizontal gescrollt
   wird (Scrollbalken statt Abschneiden). Bei normaler Breite trägt width:100%. */
.positionen-tabelle {
    min-width: 40rem;
}

.positionen-tabelle thead th,
.datentabelle thead th {
    background: var(--grau-100);
    color: var(--grau-500);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.positionen-tabelle tbody tr:nth-child(even),
.datentabelle tbody tr:nth-child(even) {
    background: var(--grau-50);
}

.positionen-tabelle tbody tr:hover,
.datentabelle tbody tr:hover {
    background: var(--akzent-hell);
}

.positionen-tabelle tbody tr:last-child td,
.datentabelle tbody tr:last-child td {
    border-bottom: none;
}

.datentabelle tfoot td {
    border-top: 1px solid var(--grau-300);
    border-bottom: none;
    font-weight: 600;
    background: var(--grau-50);
}

.spalte-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Die Zahlen-Spalten der Lieferumfangs-Tabelle dürfen sich auf ihren Inhalt
   zusammenziehen (width:1%), damit der flexible Rest der Bezeichnung zufällt –
   sie bleiben durch nowrap kompakt und vollständig sichtbar (inkl. „Gesamt"). */
.positionen-tabelle .spalte-num {
    width: 1%;
}

.spalte-pos {
    width: 3rem;
    color: var(--grau-500);
}

/* Pos.-Spalte in der Lieferumfangs-Tabelle so schmal wie möglich (nowrap, knappe Zahl). */
.positionen-tabelle .spalte-pos {
    width: 1%;
    white-space: nowrap;
}

.spalte-art {
    color: var(--grau-500);
    white-space: nowrap;
}

.positionen-tabelle .spalte-art {
    width: 1%;
}

/* „Material-EK"-Spalte = interne Einkaufs-Kennzahl je Position (reiner EK × Menge, OHNE
   Multiplikator). Dezent gedämpft (ruhiger Ton), damit der kundenrelevante Verkaufs-Gesamtpreis
   die Hauptzahl bleibt; trotzdem rechtsbündig + tabellarische Ziffern wie die übrigen Zahlen. */
.positionen-tabelle .spalte-ek {
    color: var(--grau-500);
}

/* Bezeichnung = die einzige flexible Spalte: nimmt den verbleibenden Platz und darf
   umbrechen. Sehr lange, leerzeichenlose Texte (z. B. Artikelbezeichnungen) werden
   notfalls hart umbrochen, damit sie die Tabelle nicht in die Breite treiben und die
   rechten Spalten (Einzelpreis/Gesamt) verdrängen. */
.positionen-tabelle .spalte-bez {
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 8rem;
}

.spalte-aktion {
    text-align: right;
    white-space: nowrap;
}

.zell-bez {
    font-weight: 500;
}

.zell-num {
    font-variant-numeric: tabular-nums;
    color: var(--grau-700);
    white-space: nowrap;
}

.zeile-haupt {
    display: block;
    font-weight: 500;
}

.zeile-sub {
    display: block;
    color: var(--grau-500);
    font-size: 0.82rem;
}

.summe-label {
    text-align: right;
    color: var(--grau-700);
}

.summe-wert {
    font-variant-numeric: tabular-nums;
    color: var(--grau-900);
}

/* Titel-Abschnitts-Zeile in der Positionstabelle (gegliederte Übersicht): eine ruhige,
   klar abgesetzte Überschriftenzeile über den Positionen eines Gliederungs-Titels. */
.positionen-tabelle tr.titel-zeile td.titel-abschnitt {
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--akzent-rand);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Die Titel-Zeile nicht vom Zebra-Streifen/Hover einfärben lassen (sie ist eine Überschrift). */
.positionen-tabelle tbody tr.titel-zeile,
.positionen-tabelle tbody tr.titel-zeile:hover,
.positionen-tabelle tbody tr.titel-zeile:nth-child(even) {
    background: var(--akzent-hell);
}

/* Komponenten-Unterzeilen (Übersicht): die preisneutral mitgereichten Bestandteile eines
   Paket-Bundles. Sie hängen als ruhige, eingerückte „enthalten"-Zeilen unter der
   Paketposition – gedämpfte Farbe, kleinere Schrift, KEIN eigener Preis. Reine Anzeige
   (der Preis steckt allein in der Bundle-Position darüber). Bewusst neutral-grau gehalten,
   damit die echten, nummerierten Positionen optisch führen. */
.positionen-tabelle tbody tr.komponenten-zeile,
.positionen-tabelle tbody tr.komponenten-zeile:hover,
.positionen-tabelle tbody tr.komponenten-zeile:nth-child(even) {
    background: var(--grau-50);
}

.positionen-tabelle tbody tr.komponenten-zeile td {
    color: var(--grau-500);
    font-size: 0.86rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--grau-150);
}

/* Die „↳"-Marke in der Pos.-Spalte dezent halten (kein echter Nummern-Eindruck). */
.positionen-tabelle tbody tr.komponenten-zeile td.spalte-pos {
    color: var(--grau-400);
    text-align: center;
}

/* Eingerückte Bezeichnung mit vorangestelltem „↳", damit die Zugehörigkeit zur
   Paketposition auf einen Blick klar ist. */
.komponenten-bez {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-left: 1.1rem;
}

.komponenten-marker {
    color: var(--grau-400);
    flex: none;
}

.komponenten-name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Zweite, noch dezentere Zeile: Bestell-Nr. einer nicht aufgelösten Komponente. */
.komponenten-sub {
    display: block;
    padding-left: 2.6rem;
    color: var(--grau-400);
    font-size: 0.8rem;
}

/* „im Paketpreis enthalten" statt eines Betrags – ruhig, klein, rechtsbündig in der
   Gesamt-Spalte. Niemals ein erfundener/0-€-Wert. */
.komponenten-preishinweis {
    color: var(--grau-400);
    font-size: 0.8rem;
    font-style: italic;
    white-space: normal;
}

/* Einzelpreis-Bearbeitung je Position (Stufe B) – dezente Inline-Zeile UNTER der zugehörigen
   Position. Bewusst ruhig/eingerückt (wie die Komponenten-Unterzeilen), damit die eigentliche
   Positionszeile führt. */
.positionen-tabelle tbody tr.preis-editor-zeile,
.positionen-tabelle tbody tr.preis-editor-zeile:hover,
.positionen-tabelle tbody tr.preis-editor-zeile:nth-child(even) {
    background: var(--grau-50);
}

.positionen-tabelle tbody tr.preis-editor-zeile td {
    padding-top: 0.35rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--grau-150);
}

/* Felder + „Zurücksetzen" in einer Reihe; bricht bei schmalem Fenster sauber um. */
.preis-editor {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    padding-left: 1.1rem;
}

.preis-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preis-feld label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--grau-500);
}

.preis-eingabe {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Das Euro-/Stunden-Feld etwas breiter als die schmalen Mengen-Felder (Beträge brauchen Platz). */
.preis-eingabe .eingabe-menge {
    width: 8rem;
}

/* „Zurücksetzen" bündig zur Feld-Unterkante ausrichten. */
.preis-editor .btn-zuruecksetzen {
    margin-bottom: 0.1rem;
}

/* Ruhiger Zeilen-Hinweis (fehlender Lohnsatz) unter dem Editor – nicht alarmierend. */
.preis-editor-hinweis {
    margin: 0.5rem 0 0 1.1rem;
    color: var(--kupfer-text);
    font-size: 0.82rem;
    line-height: 1.4;
}

/* „manuell angepasst"-Marke an einer übersteuerten Position: dezentes Pill neben der Bezeichnung. */
.manuell-marke {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kupfer-text);
    background: var(--beige);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}

/* Übersteuerte Position optisch ruhig hervorheben (linker Akzentstreifen an der Pos.-Zelle). */
.positionen-tabelle tbody tr.position-uebersteuert td.spalte-pos {
    box-shadow: inset 3px 0 0 var(--kupfer-rand);
}

/* --- Stufe C: Eventualposition (sichtbar, zählt nicht in die Summe) --- */

/* „EP"-Kürzel neben der Bezeichnung – neutral-grau (kein Preis-/Warn-Signal), klar lesbar. */
.eventual-marke {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--grau-700);
    background: var(--grau-100);
    border: 1px solid var(--grau-300);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

/* Eventualpositions-Zeile gedämpft + kursiv, damit sie sichtbar „nicht mitgezählt" wirkt. */
.positionen-tabelle tbody tr.position-eventual td {
    color: var(--grau-500);
    font-style: italic;
}

/* Der Preis der EP-Zeile durchgestrichen + Klartext-Hinweis, dass er nicht in die Summe zählt. */
.eventual-preis {
    text-decoration: line-through;
    text-decoration-color: var(--grau-400);
}

.eventual-preis-hinweis {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    color: var(--grau-500);
    white-space: nowrap;
}

/* Eventualpositions-Schalter (Checkbox + Label) in der Inline-Editor-Zeile – ruhig, eingerückt
   wie der Preis-Editor. Steht ggf. unter dem Preis-Editor derselben Zeile. */
.eventual-schalter {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 1.1rem;
    margin-top: 0.5rem;
}

.eventual-schalter input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    flex: none;
    accent-color: var(--akzent);
    cursor: pointer;
}

.eventual-schalter label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.9rem;
    color: var(--grau-700);
    cursor: pointer;
}

.eventual-schalter-sub {
    font-size: 0.78rem;
    color: var(--grau-500);
}

/* „Ganzes Leistungspaket"-Schalter: dezent vom Positions-Schalter abgesetzt (kleine gestrichelte
   Trennlinie + etwas mehr Abstand), damit klar ist, dass er ALLE Positionen des Pakets betrifft. */
.eventual-schalter-paket {
    margin-top: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--grau-200);
}

/* =========================================================================
   Mengen-Editor (Übersicht): die eindeutig editierbaren Auswahl-Mengen
   (Zubehör + Leistungspakete). Ruhiger, klar getrennter Block über dem
   Lieferumfang; Änderungen rechnen live neu (Summen aktualisieren sich).
   ========================================================================= */
.mengen-editor {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.75rem;
}

.mengen-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mengen-kopf .positionen-titel {
    margin-bottom: 0;
}

/* „Summen aktualisiert" – dezenter Erfolgs-Hinweis nach einer Mengenänderung. */
.mengen-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kupfer-text);
    background: var(--beige);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

.mengen-gruppe-titel {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grau-500);
    font-weight: 600;
    margin: 1.1rem 0 0.5rem;
}

.mengen-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mengen-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    /* Bei schmalem Fenster darf das Mengen-Feld unter die Bezeichnung rutschen,
       statt die Zeile über den Rand zu schieben. */
    flex-wrap: wrap;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
}

.mengen-bez {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    /* min-width:0 ist Pflicht, damit das Flex-Kind schrumpfen darf und lange
       Texte umbrechen, statt die Zeile zu verbreitern. flex:1 lässt die
       Bezeichnung den verfügbaren Platz nehmen. */
    min-width: 0;
    flex: 1 1 14rem;
}

.mengen-name {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--grau-900);
    overflow-wrap: anywhere;
}

.mengen-sub {
    color: var(--grau-500);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.mengen-feld {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Kennzahlen-Block (Übersicht) – interne Kalkulations-/Planungssicht (Material-EK, Lohn,
   Stunden, Arbeitstage). Bewusst als eigene, klar abgesetzte Karten-Reihe ÜBER dem Preis-
   Summenblock und in ruhigem Beige (kein Preis fürs Angebot, sondern interne Zahlen). */
.kennzahlen-block {
    margin-top: 1.75rem;
    padding: 1.1rem 1.2rem 1.25rem;
    background: var(--beige);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-m);
}

.kennzahlen-block .positionen-titel {
    margin-bottom: 0.2rem;
}

.kennzahlen-hinweis {
    margin: 0 0 0.9rem;
    color: var(--grau-500);
    font-size: 0.86rem;
}

.kennzahlen-gitter {
    margin: 0;
    display: grid;
    /* Auto-Fit: vier Kacheln bei viel Platz, bricht bei schmalem Fenster sauber um. */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.kennzahl {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kennzahl-label {
    color: var(--grau-500);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
}

.kennzahl-wert {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--akzent-tief);
    font-variant-numeric: tabular-nums;
}

/* Zusatzzeile unter einer Kennzahl (2026-08-12) – erklärt, wie sich die Zahl zu der in TAIFUN
   verhält. Bewusst klein und ruhig: Sie ergänzt die Kennzahl, sie ersetzt sie nicht. Eigene
   Zeile, damit die große Zahl darüber ihre Wirkung behält. */
.kennzahl-zusatz {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--kupfer-text);
}

/* Pflegehinweis statt Zahl (kein Arbeitstag gepflegt) – ruhig und kleiner, nicht alarmierend. */
.kennzahl-wert-hinweis {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--kupfer-text);
}

/* Editor „Arbeitszeit anpassen" (Übersicht) – direkt unter den internen Kennzahlen, gleiche ruhige
   Beige-Karte (gehört thematisch zu Stunden/Lohn). Zwei große, klar beschriftete Felder; STUNDEN sind
   die führende Größe, der Lohn-Euro ist nur Eingabehilfe. */
.arbeitszeit-editor {
    margin-top: 1.25rem;
    padding: 1.1rem 1.2rem 1.25rem;
    background: var(--beige);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-m);
}

.arbeitszeit-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.arbeitszeit-kopf .positionen-titel {
    margin-bottom: 0;
}

/* Dezenter „Zurücksetzen"-Knopf: textartig, ruhig – setzt die manuelle Stunden-Vorgabe zurück. */
.btn-zuruecksetzen {
    border: 1px solid var(--kupfer-rand);
    background: var(--grau-0);
    color: var(--kupfer-text);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
}

.btn-zuruecksetzen:hover {
    background: var(--beige);
}

.btn-zuruecksetzen:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.arbeitszeit-hinweis {
    margin: 0.45rem 0 1rem;
    color: var(--grau-500);
    font-size: 0.86rem;
    line-height: 1.4;
}

.arbeitszeit-felder {
    display: grid;
    /* Zwei Felder nebeneinander bei Platz, untereinander bei schmalem Fenster. */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.9rem;
}

.arbeitszeit-feld {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    padding: 0.7rem 0.85rem;
}

.arbeitszeit-feld label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--grau-500);
}

.arbeitszeit-eingabe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Die Zahlfelder dürfen hier die volle Kartenbreite nutzen (anders als die schmalen Mengen-Felder). */
.arbeitszeit-eingabe .eingabe-menge {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Ruhiger Pflegehinweis (z. B. fehlender Lohnsatz) – NICHT alarmierend wie .feld-fehler. */
.feld-hinweis {
    margin-top: 0.85rem;
    color: var(--kupfer-text);
    font-size: 0.86rem;
    font-weight: 500;
}

/* Montage & Inbetriebnahme (Schritt „Wärmepumpe") – eigenständige Karte unterhalb der Auswahl,
   gleiche ruhige Beige-Note wie der Arbeitszeit-Editor (gehört thematisch zu Stunden/Lohn).
   Zwei große, klar beschriftete Felder; STUNDEN sind die führende Größe, der Lohn-Euro ist nur
   Eingabehilfe. */
.montage-block {
    margin-top: 1.5rem;
    padding: 1.35rem 1.45rem;
    background: var(--beige);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.montage-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.montage-felder {
    display: grid;
    /* Zwei Felder nebeneinander bei Platz, untereinander bei schmalem Fenster. */
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.9rem;
}

.montage-feld {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    padding: 0.7rem 0.85rem;
}

.montage-feld label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--grau-500);
}

.montage-eingabe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Die Zahlfelder dürfen hier die volle Kartenbreite nutzen (anders als die schmalen Mengen-Felder). */
.montage-eingabe .eingabe-menge {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Summen-Block (Übersicht) */
.summen-block {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.75rem;
}

.summen-liste {
    width: 100%;
    max-width: 25rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.summen-zeile {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
}

.summen-zeile dt {
    color: var(--grau-900);
}

.summen-zeile dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.summen-zwischen dt,
.summen-zwischen dd {
    color: var(--grau-500);
    font-weight: 450;
    font-size: 0.94rem;
}

.summen-netto {
    border-top: 1px solid var(--grau-200);
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    font-weight: 700;
}

.summen-netto dt {
    font-weight: 700;
}

.summen-brutto {
    border-top: 1.5px solid var(--grau-300);
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    font-size: 1.2rem;
}

.summen-brutto dt {
    font-weight: 700;
}

.summen-brutto dd {
    font-weight: 700;
}

/* Förderung = Preisvorteil/Ersparnis → KUPFER-Highlight (Kupfer-Text, AA). */
.summen-foerderung {
    color: var(--kupfer-text);
    margin-top: 0.4rem;
}

.summen-foerderung dt {
    color: var(--kupfer-text);
    font-weight: 600;
}

.summen-foerderung dd {
    color: var(--kupfer-text);
}

.foerder-info {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--grau-500);
}

/* Eigenanteil = zentrale Endkennzahl: Navy-Trennstrich (Struktur), der Betrag
   als markantes KUPFER-Highlight, das Label ruhig in Navy. */
.summen-eigenanteil {
    border-top: 1.5px solid var(--akzent);
    margin-top: 0.35rem;
    padding-top: 0.6rem;
    font-size: 1.2rem;
}

.summen-eigenanteil dt {
    font-weight: 700;
    color: var(--akzent-tief);
}

.summen-eigenanteil dd {
    font-weight: 700;
    color: var(--kupfer-stark);
}

/* „Voll gefördert" = starke Spar-Botschaft → Beige-Fläche, Kupfer-Text (AA). */
.voll-gefoerdert {
    background: var(--beige);
    color: var(--kupfer-text);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-s);
    padding: 0.6rem 0.85rem;
    margin: 0.65rem 0;
    font-weight: 600;
    font-size: 0.92rem;
}

/* =========================================================================
   Schritt 4 – Förderung: Boni-Checkboxen + Live-Förderbox
   Reine Anzeige; gerechnet wird im Core. Nutzt die vorhandenen Karten-/Listen-/
   Summen-Stile und Marken-Tokens (keine neuen Farben).
   ========================================================================= */
/* Boni-Auswahl: ruhiger Block (wie eine flache Karte), Checkboxen im Listen-Stil.
   min-inline-size: 0 hebt den impliziten Mindest-Inline-Size eines <fieldset> auf. */
.foerder-boni {
    margin-top: 1.5rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 1.25rem 1.4rem;
    min-inline-size: 0;
}

.foerder-boni-legende {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--grau-900);
    padding: 0;
}

.foerder-boni .leistungs-liste {
    margin-top: 0.85rem;
}

/* Boni-Pflege im Einstellungs-Editor: etwas Abstand über dem Boni-Kopf. */
.foerder-boni-kopf {
    margin-top: 0.5rem;
}

/* Live-Förderbox: warme Beige-Spar-Kachel (gleiche Sprache wie der Abschluss). */
.foerder-live {
    margin-top: 1.5rem;
    background: linear-gradient(135deg, var(--kupfer-hell), var(--beige));
    border: 1px solid var(--beige-rand);
    border-radius: var(--radius-l);
    padding: 1.35rem 1.6rem;
}

.foerder-live-titel {
    margin: 0 0 0.85rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--grau-900);
}

.foerder-live .summen-liste {
    max-width: none;
}

.foerder-hinweise {
    margin: 0.9rem 0 0;
    padding-left: 1.15rem;
    color: var(--kupfer-text);
    font-size: 0.88rem;
}

.foerder-hinweise li {
    margin: 0.2rem 0;
}

/* Dezenter Hinweis, wenn das Live-Rechnen (noch) nicht möglich ist. */
.foerder-live-hinweis {
    margin-top: 1.5rem;
    background: var(--grau-100);
    border-radius: var(--radius-m);
    padding: 1rem 1.25rem;
    color: var(--grau-700);
    font-size: 0.92rem;
}

/* =========================================================================
   Eigenständiger Bereich „Förder-PDF" (Beiblatt ohne Angebot)
   Nutzt die vorhandenen Karten-/Feld-/Summen-Stile und Marken-Tokens
   (keine neuen Farben). Zwei Spalten: links Eingabe, rechts die Live-Box +
   PDF-Knopf (klebt mit, damit das Ergebnis beim Tippen immer sichtbar ist).
   ========================================================================= */
.foerder-pdf-bereich {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 4rem;
}

.foerder-pdf-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.foerder-pdf-eingabe {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* Rechte Spalte klebt beim Scrollen mit – die Live-Förderung bleibt im Blick. */
.foerder-pdf-seite {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* In der eigenständigen Seite hat die Live-Box keinen Schritt-Abstand nach oben. */
.foerder-pdf-seite .foerder-live {
    margin-top: 0;
}

.foerder-live-leer {
    margin: 0;
    color: var(--kupfer-text);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* =========================================================================
   Förder-Check (schneller Förder-Rechner ohne Angebot)
   Teilt das Förder-PDF-Layout (.foerder-pdf-*) und die Summen-/Live-Stile.
   Ergänzt nur zwei ruhige Hinweis-Absätze in der Spar-Kachel – keine neuen Farben.
   ========================================================================= */
/* §35c-Steuervorteil: ehrlicher „wird nicht abgezogen"-Hinweis, ruhig auf der
   warmen Kachel (leicht abgesetzte Fläche, damit er sich vom Betrag abhebt). */
.foerder-check-steuer {
    margin: 0.9rem 0 0;
    padding: 0.65rem 0.85rem;
    background: var(--grau-0);
    border: 1px solid var(--beige-rand);
    border-radius: var(--radius-s);
    color: var(--grau-700);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Stand-/Ehrlichkeits-Hinweis (immer sichtbar): dezent, klar abgesetzt vom
   Ergebnis durch einen feinen oberen Trennstrich. */
.foerder-stand-hinweis {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--beige-rand);
    color: var(--kupfer-text);
    font-size: 0.82rem;
    line-height: 1.5;
}

.foerder-pdf-aktion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.foerder-pdf-aktion .btn-gross {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.2rem;
    font-size: 1.05rem;
}

@media (max-width: 860px) {
    .foerder-pdf-spalten {
        grid-template-columns: 1fr;
    }

    /* Auf schmalen Fenstern nicht mehr kleben (sonst verdeckt sie die Eingabe). */
    .foerder-pdf-seite {
        position: static;
    }
}

/* Fehler-/Hinweis-Boxen */
.fehler-box {
    background: var(--fehler-hg);
    border: 1px solid var(--fehler-rand);
    border-radius: var(--radius-l);
    padding: 1.25rem 1.5rem;
}

.fehler-titel {
    color: var(--fehler);
    font-weight: 700;
    font-size: 1.08rem;
    margin: 0 0 0.5rem;
}

.fehler-text {
    margin: 0 0 0.5rem;
    color: var(--grau-900);
}

.fehler-hinweis {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.9rem;
}

.hinweis-box {
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-l);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
}

.hinweis-titel {
    color: var(--warn-text);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}

.hinweis-text {
    margin: 0;
    color: var(--grau-700);
    line-height: 1.5;
}

.hinweis-box .btn {
    margin-top: 0.5rem;
}

/* =========================================================================
   Abschluss
   ========================================================================= */
/* Abschluss-Zusammenfassung: warme Beige-Kachel (Spar-/Kennzahl-Hervorhebung). */
.abschluss-zusammenfassung {
    background: linear-gradient(135deg, var(--kupfer-hell), var(--beige));
    border: 1px solid var(--beige-rand);
    border-radius: var(--radius-l);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

.abschluss-kunde {
    margin: 0 0 0.85rem;
    font-size: 1.02rem;
}

.abschluss-summen {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
}

.abschluss-summen div {
    display: flex;
    flex-direction: column;
}

.abschluss-summen dt {
    font-size: 0.78rem;
    color: var(--grau-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Große Abschluss-Kennzahlen = KUPFER-Highlight (kräftige, AA-large Variante). */
.abschluss-summen dd {
    margin: 0.15rem 0 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kupfer-stark);
    font-variant-numeric: tabular-nums;
}

.export-bereich {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    padding: 1.5rem;
    background: var(--grau-0);
}

.export-bereich h3 {
    font-size: 1.02rem;
    margin-bottom: 1rem;
}

.export-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.export-aktionen .btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

/* Speichern-Bereich (Abschluss) */
.speichern-bereich {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    padding: 1.5rem;
    background: var(--grau-0);
    margin-bottom: 1.5rem;
}

.speichern-bereich h3 {
    font-size: 1.02rem;
    margin-bottom: 0.75rem;
}

.speichern-hinweis {
    color: var(--grau-500);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0 0 1rem;
}

.speichern-bereich .aktionsleiste {
    justify-content: flex-start;
}

.speichern-erfolg {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--erfolg-hg);
    border: 1px solid var(--erfolg-rand);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.25rem;
}

.erfolg-symbol {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--erfolg);
    color: #fff;
}

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

.erfolg-titel {
    font-weight: 700;
    color: var(--erfolg);
    margin: 0;
}

.erfolg-detail {
    margin: 0.2rem 0 0;
    color: var(--grau-700);
    font-size: 0.92rem;
    line-height: 1.45;
}

.speichern-erfolg .btn {
    flex-shrink: 0;
}

/* Spinner im Button (Speichern läuft) */
.btn .spinner {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
}

/* =========================================================================
   EINSTELLUNGEN
   ========================================================================= */
.einstellungen {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 4rem;
}

/* Bearbeiten-Ansicht eines gespeicherten Angebots – gleiche Rahmung wie die übrigen
   Top-Bereiche (Dashboard/Förder-PDF): zentriert, begrenzt, luftiger Innenabstand. */
.angebot-bearbeiten-bereich {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 4rem;
}

/* Dezenter Hinweis, dass die Kundendaten aus dem Snapshot stammen und hier nicht editierbar sind. */
.bearbeiten-hinweis-readonly {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--grau-500);
}

.bereich-kopf {
    margin-bottom: 1.5rem;
}

.bereich-kopf h1 {
    font-size: 1.8rem;
}

.tab-leiste {
    margin-bottom: 1.75rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.tab-inhalt {
    /* nichts – die Blöcke bringen ihren eigenen Abstand mit */
}

.einst-block {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.block-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.kopf-aktionen {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.abschnitt-titel {
    font-size: 1.18rem;
    font-weight: 600;
}

.abschnitt-hinweis {
    color: var(--grau-500);
    font-size: 0.92rem;
    margin: 0.25rem 0 0;
}

/* Flache Karte (Einstellungs-Abschnitte) */
.karte-flach {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    padding: 1.5rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.karte-flach > .feld-gitter {
    margin: 0;
}

/* „Hannig-Standardpakete laden"-Karte: dezent abgesetzt unter dem Listenkopf, etwas Luft
   nach unten zur Tabelle. Reduziert den Innenabstand leicht (kompakte Aktionskarte). */
.hannig-laden {
    gap: 0.9rem;
    padding: 1.2rem 1.4rem;
    margin-bottom: 0.4rem;
}

.hannig-laden-text {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.aktionsleiste {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.status-erfolg {
    color: var(--erfolg);
    font-weight: 600;
    font-size: 0.92rem;
}

/* Fehler-Status (kurze, generische Meldung neben einer Aktion). */
.status-fehler {
    color: var(--fehler);
    font-weight: 600;
    font-size: 0.92rem;
}

/* Variante der Aktionsleiste mit linksbündigen Aktionen (z.B. Datensicherung). */
.aktionsleiste-links {
    justify-content: flex-start;
}

/* Such-Zeile + Treffer */
.such-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    max-width: 46rem;
}

/* In der flex-Such-Zeile bestimmt flex die Breite (das Grid-„1 / -1“ greift hier nicht). */
.such-zeile .feld-breit {
    flex: 1 1 22rem;
    min-width: 16rem;
}

.such-zeile .feld-schmal {
    flex: 0 1 16rem;
    min-width: 12rem;
    max-width: 18rem;
}

/* Dezente Werkzeug-Zeile unter der Suche (Hilfetext links, „Suchindex neu aufbauen“ rechts). */
.such-werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 46rem;
    margin-top: 0.5rem;
}

.such-werkzeuge .feld-hilfe {
    flex: 1 1 18rem;
    margin: 0;
}

.treffer-info {
    color: var(--grau-500);
    font-size: 0.9rem;
}

.seiten-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.seiten-anzeige {
    color: var(--grau-500);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* Positionsliste im Leistungspaket-Editor */
.positions-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.positions-zeile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-50);
}

.typ-marke {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    color: #fff;
}

/* Fachliche Typ-Marken (Material/Lohn/Fremd) – eigenes, klar unterscheidbares
   Farbsystem ohne Aktions-/Highlight-Semantik. Lohn = Marken-Navy; Fremd in
   gedämpftem Violett statt Orange, damit es NICHT mit dem Kupfer-Highlight
   verwechselt wird. Alle mit weißer Schrift (jeweils ausreichend Kontrast). */
.typ-material { background: #3b6fb5; }
.typ-lohn { background: var(--akzent); }
.typ-fremd { background: #7c5aa8; }

.positions-felder {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

.positions-haupt {
    flex: 1 1 14rem;
    min-width: 0;
}

.positions-eingabe {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.positions-eingabe label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--grau-500);
    font-weight: 500;
}

/* Lohn-Position: Stundengruppen-Wahl unter der Beschreibung */
.lohn-gruppe {
    margin-top: 0.5rem;
}

.lohn-gruppe-feld {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.lohn-gruppe-label {
    font-size: 0.78rem;
    color: var(--grau-500);
    font-weight: 500;
}

/* Dezenter Hinweis unter einer Lohn-Position (volle Breite, bricht um) */
.lohn-hinweis {
    flex-basis: 100%;
    margin-top: 0.15rem;
}

.positions-entfernen {
    flex-shrink: 0;
}

.roh-summen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--grau-200);
}

.roh-summen div {
    display: flex;
    flex-direction: column;
}

.roh-summen dt {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grau-500);
    font-weight: 600;
}

.roh-summen dd {
    margin: 0.1rem 0 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}

/* =========================================================================
   DATANORM-Import
   ========================================================================= */
.import-karte {
    background: var(--akzent-hell);
    border-color: var(--akzent-rand);
}

.pfad-zeile {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}

.pfad-zeile .eingabe {
    flex: 1 1 auto;
}

.pfad-zeile .btn {
    flex-shrink: 0;
}

.import-fortschritt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    color: var(--grau-700);
    font-size: 0.95rem;
}

.spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2.5px solid var(--grau-300);
    border-top-color: var(--akzent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}



.import-ergebnis {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.25rem;
}

.kennzahlen {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--grau-700);
    font-size: 0.95rem;
}

.kennzahlen strong {
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
}

/* Zweite Kennzahlen-Gruppe (z.B. Bosch-Import: neu/aktualisiert) ruhig abgesetzt. */
.kennzahlen-trenner {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--grau-200);
}

.warnungen {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    color: var(--grau-500);
}

.warnungen summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--grau-700);
}

.warnungen ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

/* =========================================================================
   Einstellungen von PC zu PC übertragen (Export/Import der Konfiguration).
   Zwei klar getrennte Spalten (Hergeben / Übernehmen), darunter prominent das
   Import-Ergebnis und – falls vorhanden – die Warnungen. Nutzt die ruhige
   Karten-/Status-Sprache; Warnungen bewusst kräftiger als die gedämpften
   .warnungen des DATANORM-Imports (hier sollen sie ins Auge fallen).
   ========================================================================= */
.austausch-aktionen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

/* Bei schmalem Fenster untereinander statt nebeneinander. */
@media (max-width: 48rem) {
    .austausch-aktionen {
        grid-template-columns: 1fr;
    }
}

.austausch-spalte {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    padding: 1.2rem 1.3rem;
}

.austausch-titel {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--grau-900);
}

.austausch-text {
    color: var(--grau-700);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

.austausch-text strong {
    color: var(--grau-900);
    font-weight: 600;
}

/* Kleine Statusbox unter einer Aktion (Export gespeichert / Import-Fehler). */
.austausch-hinweis {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-radius: var(--radius-s);
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.austausch-hinweis strong {
    font-weight: 700;
}

.austausch-hinweis-erfolg {
    background: var(--erfolg-hg);
    border: 1px solid var(--erfolg-rand);
    color: var(--erfolg);
}

.austausch-hinweis-erfolg span {
    color: var(--grau-700);
}

.austausch-hinweis-fehler {
    background: var(--fehler-hg);
    border: 1px solid var(--fehler-rand);
    color: var(--fehler);
}

.austausch-hinweis-fehler span {
    color: var(--grau-700);
}

/* Prominenter Warn-Block des Imports (z. B. „3 Artikel nicht gefunden"). Kräftige
   Warn-Tönung, klar abgesetzt; lange Listen sauber scrollbar statt endlos lang. */
.import-warnungen {
    margin-top: 1rem;
    border: 1px solid var(--warn-rand);
    background: var(--warn-hg);
    border-radius: var(--radius-m);
    padding: 0.95rem 1.1rem;
}

.import-warnungen-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    font-weight: 700;
    color: var(--warn-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

.import-warnungen-symbol {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--kupfer);
    color: var(--grau-900);
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
}

.import-warnungen-liste {
    margin: 0.7rem 0 0;
    padding-left: 1.3rem;
    color: var(--grau-700);
    font-size: 0.9rem;
    line-height: 1.5;
    /* Lange Listen (viele fehlende Artikel) bleiben handhabbar: in sich scrollbar. */
    max-height: 14rem;
    overflow-y: auto;
}

.import-warnungen-liste li {
    margin: 0.15rem 0;
    overflow-wrap: anywhere;
}

/* Ruhiger Neustart-Hinweis unter dem Import-Ergebnis. */
.import-neustart-hinweis {
    margin: 0.9rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--grau-200);
    color: var(--grau-700);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* =========================================================================
   Handlungs-Warnblock „Material-Artikel fehlen auf diesem PC" (Import).
   Steht GANZ OBEN im Import-Ergebnis und ist das Erste, was auffällt: warme
   Warn-Fläche (kein grelles Rot), dunkle, gut lesbare Schrift, kräftiger
   linker Akzent-Rand. Nicht-blockierend (der Import war im Übrigen erfolgreich),
   aber deutlich – mit klarer, nummerierter Handlungsanweisung.
   ========================================================================= */
.import-fehlmaterial {
    margin: 0.9rem 0 0;
    border: 1px solid var(--warn-rand);
    border-left: 4px solid var(--kupfer);
    background: var(--warn-hg);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.25rem;
}

.import-fehlmaterial-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--warn-text);
    line-height: 1.4;
}

.import-fehlmaterial-symbol {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--kupfer);
    color: var(--grau-900);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
}

.import-fehlmaterial-text {
    margin: 0.7rem 0 0;
    color: var(--grau-800, #1f2937);
    font-size: 0.92rem;
    line-height: 1.55;
}

.import-fehlmaterial-text strong {
    color: var(--grau-900);
    font-weight: 700;
}

/* Die fehlenden Artikelnummern als kompakte, monospace-artige Chips – klar als
   „Nummern" erkennbar, umbruchsicher; lange Listen bleiben in sich scrollbar. */
.import-fehlmaterial-nummern {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
}

.import-fehlmaterial-nummern li {
    background: var(--grau-0);
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-s);
    padding: 0.2rem 0.55rem;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.85rem;
    color: var(--grau-900);
    overflow-wrap: anywhere;
}

.import-fehlmaterial-rest {
    margin: 0.55rem 0 0;
    color: var(--grau-700);
    font-size: 0.88rem;
    font-style: italic;
}

/* Die zwei Lösungswege, klar abgesetzt vom erklärenden Text darüber. */
.import-fehlmaterial-wege {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--warn-rand);
}

.import-fehlmaterial-wege-titel {
    margin: 0 0 0.4rem;
    font-weight: 700;
    color: var(--warn-text);
    font-size: 0.95rem;
}

.import-fehlmaterial-wege-liste {
    margin: 0;
    padding-left: 1.3rem;
    color: var(--grau-800, #1f2937);
    font-size: 0.92rem;
    line-height: 1.55;
}

.import-fehlmaterial-wege-liste li {
    margin: 0.35rem 0;
}

.import-fehlmaterial-wege-liste strong {
    color: var(--grau-900);
    font-weight: 700;
}

/* Eingeklappte technische Detail-Liste UNTER dem lauten Handlungs-Block (Sekundär-
   Info: welche Position in welchem Paket). Ruhig und zurückhaltend. */
.import-warnungen-detail {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: var(--grau-700);
}

.import-warnungen-detail summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--grau-700);
}

.import-warnungen-detail summary:hover {
    color: var(--grau-900);
}

/* =========================================================================
   Paket-Inhalts-Analyse (Diagnose, Stufe 2) – read-only Bewertung der
   heuristischen Komponenten-Erkennung. Nutzt die etablierte Karten-/Badge-
   Sprache; eigene Klassen nur fürs Listen-Layout der Treffer.
   ========================================================================= */
.analyse-zusammenfassung {
    color: var(--grau-700);
    font-size: 0.95rem;
    margin: 0.6rem 0 0;
}

.analyse-zusammenfassung strong {
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
}

.analyse-liste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.analyse-paket {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    padding: 0.95rem 1.1rem;
}

/* Paket ohne erkannte Komponente deutlich, aber ruhig markieren. */
.analyse-paket-leer {
    border-color: var(--warn-rand);
    background: var(--warn-hg);
}

.analyse-paket-titel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--grau-900);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Kleine, gedämpfte Anzahl-Angabe rechts neben dem Paketnamen. */
.analyse-anzahl {
    flex-shrink: 0;
    color: var(--grau-500);
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* Bestandteile aus dem Langtext (Menge × Beschreibung, Bestell-Nr. gedämpft). */
.analyse-bestandteile {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.analyse-bestandteil-zeile {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.analyse-bestandteil-menge {
    flex-shrink: 0;
    min-width: 2.4rem;
    text-align: right;
    font-weight: 600;
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
}

.analyse-bestandteil-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.analyse-treffer {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.analyse-treffer-zeile {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
}

.analyse-artikel-name {
    font-weight: 500;
    color: var(--grau-900);
}

.analyse-artikel-nr {
    color: var(--grau-500);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.analyse-code {
    color: var(--grau-500);
    font-size: 0.82rem;
}

.analyse-unklar {
    margin-top: 0.7rem;
    color: var(--grau-500);
    font-size: 0.88rem;
}

.analyse-unklar .analyse-unklar-codes {
    color: var(--grau-700);
    font-weight: 500;
}

.analyse-treffer-fehlt {
    margin-top: 0.6rem;
    color: var(--grau-700);
    font-size: 0.9rem;
    font-weight: 500;
}

/* WP-Komponenten-Badges – an die Status-Badge-Sprache angelehnt (gerundet,
   farbcodiert über die vorhandenen Paletten-Variablen). */
.komp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
    flex-shrink: 0;
}

/* WP-Komponenten-Kategorien klar trennbar: Außen=Navy, Innen=Kupfer,
   Speicher=Warn, Zubehör=Grau. */
.komp-aussen {
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    border-color: var(--akzent-rand);
}

.komp-innen {
    background: var(--beige);
    color: var(--kupfer-text);
    border-color: var(--kupfer-rand);
}

.komp-speicher {
    background: var(--warn-hg);
    color: var(--warn-text);
    border-color: var(--warn-rand);
}

.komp-zubehoer {
    background: var(--grau-100);
    color: var(--grau-700);
    border-color: var(--grau-200);
}

/* =========================================================================
   Modaler Artikel-Auswahldialog
   ========================================================================= */
.modal-hintergrund {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 28, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1.5rem 2rem;
    overflow-y: auto;
}

.modal {
    width: 100%;
    max-width: 38rem;
    background: var(--grau-0);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-l);
    overflow: hidden;
    animation: modal-auf 0.18s ease;
}

.modal-schmal {
    max-width: 30rem;
}

.bestaetigung-text {
    color: var(--grau-700);
    line-height: 1.5;
    margin: 0;
}

.bestaetigung-detail {
    background: var(--grau-100);
    border-radius: var(--radius-s);
    padding: 0.7rem 0.9rem;
    margin: 0;
    color: var(--grau-900);
    font-size: 0.95rem;
}



.modal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--grau-200);
}

.modal-kopf h3 {
    font-size: 1.1rem;
}

.modal-schliessen {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--grau-500);
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.modal-schliessen:hover {
    background: var(--grau-100);
    color: var(--grau-900);
}

.modal-schliessen:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.modal-koerper {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wahl-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 22rem;
    overflow-y: auto;
}

.wahl-zeile {
    width: 100%;
    text-align: left;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wahl-zeile:hover {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.wahl-zeile:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.wahl-bez {
    font-weight: 500;
}

.wahl-detail {
    color: var(--grau-500);
    font-size: 0.84rem;
}

/* =========================================================================
   Auswahlfenster Schritt 2 (ArtikelAuswahlDialog) – großzügige, scrollbare
   Trefferliste mit großem Suchfeld. Baut auf der gemeinsamen .modal-Hülle auf.
   ========================================================================= */
.modal-auswahl {
    max-width: 46rem;
}

/* „Sonstiges" — Umschalter auf den ganzen Katalog (2026-08-12). Sitzt direkt unter dem
   Suchfeld, abgesetzt durch eine feine Linie: Er ändert, WORIN gesucht wird, und gehört
   damit zum Suchfeld und nicht zur Trefferliste. */
.auswahl-umfang {
    margin: 0.15rem 0 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--linie-leise, rgba(0, 0, 0, 0.08));
}

.auswahl-hinweis {
    color: var(--grau-700);
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0;
}

/* Woher die Treffer kommen, wenn in der Kategorie nichts gepflegt ist (2026-09-07).
   Steht in derselben Zeile wie die Trefferzahl, aber abgesetzt: Es ist eine Auskunft über
   die Liste darunter, keine Warnung — deshalb kein Rot und kein Rahmen. */
.treffer-herkunft {
    display: block;
    margin-top: 0.3rem;
    color: var(--grau-700);
    line-height: 1.45;
}

/* Lieferanten-Auswahl über der Trefferliste (2026-09-07, mit dem zweiten Großhändler).
   Sie steht zwischen Umschalter und Hinweis, weil sie — wie der Umschalter — beantwortet,
   WORIN gesucht wird, und nicht, wonach. Schmal gehalten: Ein Auswahlfeld über die volle
   Breite sähe wichtiger aus als das Suchfeld darüber. */
.auswahl-lieferant {
    margin: 0.6rem 0 0.7rem;
    max-width: 26rem;
}

.auswahl-lieferant .feld-beschriftung {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: var(--grau-700);
}

.auswahl-suchfeld {
    margin: 0;
}

/* Größeres Suchfeld – das Suchen ist die Hauptaktion des Fensters. */
.eingabe-gross {
    font-size: 1.05rem;
    padding: 0.8rem 1rem;
}

.auswahl-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: min(60vh, 30rem);
    overflow-y: auto;
}

.auswahl-zeile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 0.85rem 1.05rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    cursor: pointer;
    font: inherit;
    color: var(--grau-900);
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.auswahl-zeile:hover {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    box-shadow: var(--schatten-s);
}

.auswahl-zeile:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.auswahl-zeile-gewaehlt {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.auswahl-haupt {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.auswahl-name-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.auswahl-name {
    font-weight: 500;
    font-size: 1.0rem;
}

.auswahl-meta {
    color: var(--grau-500);
    font-size: 0.86rem;
}

/* Modell-Gruppenüberschrift in der WP-Geräte-Auswahl: kleines, ruhiges Label, das die nach
   Wärmepumpen-Modellreihe gruppierten Treffer optisch trennt. Kein Kasten/Klick (role="presentation");
   erscheint nur, wenn mehrere Modellreihen vorliegen. */
.auswahl-gruppe {
    padding: 0.3rem 0.25rem 0;
}

.auswahl-gruppe:not(:first-child) {
    margin-top: 0.4rem;
    border-top: 1px solid var(--grau-200);
    padding-top: 0.65rem;
}

.auswahl-gruppe-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--grau-500);
}

/* Matchcode/Herstellerschlüssel als ruhiges Beige-/Kupfer-Label neben dem Namen.
   Bricht bei schmaler Breite sauber in eine eigene Zeile (auswahl-name-zeile ist flex-wrap). */
.artikel-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--beige);
    color: var(--kupfer-text);
    border: 1px solid var(--kupfer-rand);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optionaler DATANORM-Langtext: auf max. 2 Zeilen gekürzt (Ellipsis), damit lange
   Beschreibungstexte das Zeilen-Layout der Trefferliste nicht sprengen. */
.artikel-langtext {
    color: var(--grau-700);
    font-size: 0.82rem;
    line-height: 1.4;
    margin-top: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Lange ungetrennte Token (z. B. Artikelcodes) nicht aus der Karte laufen lassen. */
    overflow-wrap: anywhere;
}

.auswahl-rechts {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.auswahl-preis {
    font-variant-numeric: tabular-nums;
    color: var(--grau-700);
    font-size: 0.95rem;
    white-space: nowrap;
}

.auswahl-aktion {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--akzent-tief);
    white-space: nowrap;
}

.auswahl-zeile-gewaehlt .auswahl-aktion {
    color: var(--erfolg);
}

/* Erklärende Fußnote, wenn Bosch-Liste-Artikel in der Liste auftauchen. */
.auswahl-bosch-fuss {
    margin: 0;
    padding: 0.7rem 0.9rem;
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-s);
    color: var(--grau-700);
    font-size: 0.85rem;
    line-height: 1.45;
}

.auswahl-bosch-fuss .bosch-badge {
    margin-left: 0;
    margin-right: 0.4rem;
    cursor: default;
}

/* =========================================================================
   „Wärmepumpe finden" – prominente kW-Suche (Schritt 2)
   ========================================================================= */
/* Hervorgehobene Einstiegs-Karte über den Einzelkomponenten: macht die kW-Suche zum
   sichtbaren Haupt-Weg, ohne die gezielte Bereichsauswahl darunter zu verdrängen. */
.geraete-finder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-l);
}

.geraete-finder-text {
    min-width: 0;
}

.geraete-finder-titel {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grau-900);
}

.geraete-finder-hinweis {
    margin: 0;
    color: var(--grau-700);
    font-size: 0.92rem;
    line-height: 1.45;
}

.geraete-finder-knopf {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Etwas breiteres Fenster: die kW-Suche zeigt zwei Felder nebeneinander + Geräte-Liste. */
.modal-geraete {
    max-width: 50rem;
}

/* kW-Feld + optionales Suchfeld nebeneinander (umbrechend auf schmal). Das kW-Feld ist
   kompakter, das Suchfeld nimmt den restlichen Platz – die kW-Eingabe ist die Hauptaktion. */
.geraete-suchzeile {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.geraete-kw-feld {
    flex: 0 0 11rem;
    max-width: 13rem;
}

.geraete-text-feld {
    flex: 1 1 16rem;
    min-width: 12rem;
}

/* „Speicher mit anzeigen" – dezenter Schalter unter den Suchfeldern. */
.geraete-speicher-schalter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--grau-700);
    cursor: pointer;
}

.geraete-speicher-schalter input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--akzent);
    cursor: pointer;
}

/* kW-Badge je Gerät (rechts in der Zeile). Markenkonform Kupfer-getönt, damit die
   Leistung als zentrale Kennzahl heraussticht; tabellarische Ziffern für ruhige Optik. */
.geraete-kw-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    border: 1px solid var(--kupfer-rand);
}

/* Geräte ohne hinterlegte kW: neutral statt Kupfer (keine erfundene Kennzahl). */
.geraete-kw-leer {
    background: var(--grau-100);
    color: var(--grau-500);
    border-color: var(--grau-200);
    font-weight: 600;
    cursor: help;
}

/* =========================================================================
   VERKAUFSTEXTE PFLEGEN (Einstellungen → Artikel → Verkaufstexte)
   Produktliste (nur WP-Sortiment) + Editor-Modal mit Live-Vorschau.
   ========================================================================= */
.vt-pflege {
    margin-top: 1rem;
}

/* Such-/Kategorie-Filter nebeneinander, umbrechend auf schmal. */
.vt-filterzeile {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.vt-suchfeld {
    flex: 1 1 18rem;
    min-width: 12rem;
}

.vt-kategoriefeld {
    flex: 0 0 14rem;
    max-width: 16rem;
}

/* Produktliste: große, klar abgegrenzte Klick-Ziele (eine Zeile = ein Produkt). */
.vt-produkt-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.vt-produkt-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 0.9rem 1.1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.vt-produkt-zeile:hover {
    border-color: var(--akzent-rand);
    background: var(--grau-50);
    box-shadow: var(--schatten-s);
}

.vt-produkt-zeile:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.vt-produkt-haupt {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.vt-produkt-name-zeile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.vt-produkt-name {
    font-weight: 600;
    color: var(--grau-900);
}

.vt-produkt-meta {
    color: var(--grau-500);
    font-size: 0.86rem;
}

/* Vorschauzeile in der Liste: zeigt den aktuell wirksamen Kurztext (gepflegt oder Auto). */
.vt-produkt-vorschau {
    color: var(--grau-700);
    font-size: 0.92rem;
    line-height: 1.4;
}

.vt-produkt-aktion {
    color: var(--akzent-tief);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Status-Marke je Zeile: „Eigener Text" (Kupfer) vs. „Automatisch" (neutral). */
.vt-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.vt-status-eigen {
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    border-color: var(--kupfer-rand);
}

.vt-status-auto {
    background: var(--grau-100);
    color: var(--grau-500);
    border-color: var(--grau-200);
}

/* --- Editor-Modal --- */
.modal-verkaufstext {
    max-width: 44rem;
}

.vt-kopf-titel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.vt-kopf-sub {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0;
}

.vt-produktname {
    font-weight: 600;
    color: var(--grau-700);
}

/* Live-Vorschau-Box: ruhige, hervorgehobene Fläche – „so steht es später im Angebot". */
.vt-vorschau {
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vt-vorschau-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vt-vorschau-titel {
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.vt-vorschau-marke {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.vt-marke-eigen {
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    border-color: var(--kupfer-rand);
}

.vt-marke-auto {
    background: var(--grau-100);
    color: var(--grau-500);
    border-color: var(--grau-200);
}

.vt-vorschau-feld {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.vt-vorschau-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--grau-500);
}

.vt-vorschau-kurz {
    margin: 0;
    font-weight: 600;
    color: var(--grau-900);
    line-height: 1.45;
}

.vt-vorschau-lang {
    margin: 0;
    color: var(--grau-700);
    line-height: 1.5;
    white-space: pre-wrap;
}

.vt-vorschau-leer {
    margin: 0;
    color: var(--grau-400);
    font-style: italic;
    line-height: 1.45;
}

/* Feld-Fußzeile: Hilfetext links, Restzeichen rechts. */
.vt-feld-fuss {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vt-restzeichen {
    font-size: 0.8rem;
    color: var(--grau-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vt-restzeichen-voll {
    color: var(--kupfer-text);
    font-weight: 600;
}

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.dashboard {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 4rem;
}

/* Hilfsklasse: nur für Screenreader sichtbar (visuell verborgen) */
.visuell-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Kennzahlen ---- */
.kennzahl-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.kennzahl-karte {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    padding: 1.4rem 1.6rem;
}

.kennzahl-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--grau-500);
}

.kennzahl-wert {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kennzahl-neben {
    font-size: 0.92rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
}

/* ---- Status-Filter-Chips ---- */
.status-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.status-chip {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    padding: 0.95rem 1.1rem;
    background: var(--grau-0);
    border: 1.5px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    cursor: pointer;
    font: inherit;
    color: var(--grau-900);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.status-chip:hover {
    border-color: var(--grau-300);
    box-shadow: var(--schatten-m);
    transform: translateY(-1px);
}

.status-chip:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.status-chip.chip-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.chip-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.chip-zahlen {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.chip-anzahl {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.chip-volumen {
    font-size: 0.86rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
}

/* Status-Punkt im Chip-Namen (farbcodiert wie das Badge) */
.status-punkt {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--grau-400);
}

/* Workflow-Status farblich klar getrennt: Entwurf=grau, Verschickt=Navy,
   Beauftragt=Kupfer (positiver Abschluss-Highlight), Abgelehnt=Rot. */
.chip-entwurf .status-punkt { background: var(--grau-400); }
.chip-verschickt .status-punkt { background: var(--akzent); }
.chip-beauftragt .status-punkt { background: var(--kupfer); }
.chip-abgelehnt .status-punkt { background: var(--fehler); }

/* ---- Zeitbezogene Büro-Kennzahlen (Idee „Zahlen-Dashboard") ----
   Ruhige Ergänzung der Angebots-Kennzahlen: drei Karten (offene Angebote, Auftragseingang mit
   Vormonats-Vergleich, Quote) + ein schlichter, reiner CSS-Balken über 6 Monate. Nutzt die
   bestehende Marken-/Grau-Palette; der aktuelle Monat wird in Kupfer hervorgehoben. */
.zahlen-sektion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.zahlen-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.zahlen-karte {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    padding: 1.25rem 1.4rem;
}

/* Ruhiger Vormonats-Vergleich: Pfeil + Klartext. Bewusst KEIN Alarmrot fürs normale Auf/Ab –
   „mehr" wird dezent grün hervorgehoben, „weniger"/„gleich" bleiben neutral-grau. */
.delta-zeile {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.15rem;
    font-size: 0.86rem;
    font-weight: 600;
}

.delta-pfeil {
    font-size: 0.8rem;
    line-height: 1;
}

.delta-mehr {
    color: #2e7d32; /* ruhiges Grün nur für den positiven Fall (mehr Auftragseingang) */
}

.delta-weniger,
.delta-gleich {
    color: var(--grau-500); /* neutral – kein Alarm bei normalem Rückgang/Gleichstand */
    font-weight: 500;
}

/* 6-Monats-Balken – reines HTML/CSS (keine externe Bibliothek: CSP/offline-tauglich). */
.balken-karte {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    padding: 1.25rem 1.4rem 1.1rem;
}

.mini-balken {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    align-items: end;
    height: 6.5rem;
}

.balken-spalte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    height: 100%;
    justify-content: flex-end;
}

/* Die Fläche gibt die volle Balkenhöhe vor; die Füllung wächst von unten (height in %). */
.balken-flaeche {
    position: relative;
    width: 100%;
    max-width: 3rem;
    flex: 1;
    display: flex;
    align-items: flex-end;
    border-radius: var(--radius-s);
    background: var(--grau-100); /* dezente „Spur" hinter dem Balken */
}

.balken-fuellung {
    width: 100%;
    min-height: 2px; /* bei 0 % bleibt nur ein Hauch der Spur sichtbar */
    background: var(--grau-300);
    border-radius: var(--radius-s);
    transition: height 0.2s ease;
}

/* Aktueller (letzter) Monat kräftig in Marken-Navy; kleiner Monat bleibt durch die Mindesthöhe sichtbar. */
.balken-aktuell .balken-fuellung {
    background: var(--akzent);
}

.balken-aktuell .balken-label {
    color: var(--grau-900);
    font-weight: 700;
}

.balken-label {
    font-size: 0.75rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.balken-leer {
    margin: 0;
    font-size: 0.85rem;
    color: var(--grau-500);
}

/* Ehrliche Fußnote (Signal-Herkunft) – klein und ruhig, damit keine Scheingenauigkeit entsteht. */
.zahlen-fussnote {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--grau-400);
}

/* ---- Liste ---- */
.liste-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.liste-kopf .abschnitt-titel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.liste-anzahl {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grau-500);
    background: var(--grau-100);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-variant-numeric: tabular-nums;
}

.zell-datum {
    color: var(--grau-700);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.zeilen-aktionen {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* =========================================================================
   Reihenfolge-Steuerung (Titel / Gliederung): Hoch/Runter-Pfeile + Nummer.
   Ruhig und unaufdringlich, klare Klick-Ziele, deaktiviert am Rand der Liste.
   ========================================================================= */
.spalte-reihenfolge {
    width: 8.5rem;
    white-space: nowrap;
}

.reihenfolge-zelle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.reihenfolge-pfeile {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
}

.btn-pfeil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--grau-300);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    color: var(--grau-700);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn-pfeil:hover:not(:disabled) {
    background: var(--akzent-hell);
    border-color: var(--akzent);
    color: var(--akzent-tief);
}

.btn-pfeil:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.btn-pfeil:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.reihenfolge-nummer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--grau-500);
    min-width: 1.2rem;
    text-align: center;
}

.status-wahl {
    display: inline-flex;
}

.status-wahl .eingabe-kompakt {
    width: auto;
    min-width: 9rem;
}

/* Status-Badge in der Liste */
.status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge-entwurf {
    background: var(--grau-100);
    color: var(--grau-700);
    border-color: var(--grau-200);
}

.badge-verschickt {
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    border-color: var(--akzent-rand);
}

/* Beauftragt = positiver Abschluss → Kupfer-Highlight (Beige-Fläche, Kupfer-Text). */
.badge-beauftragt {
    background: var(--beige);
    color: var(--kupfer-text);
    border-color: var(--kupfer-rand);
}

.badge-abgelehnt {
    background: var(--fehler-hg);
    color: var(--fehler);
    border-color: var(--fehler-rand);
}

/* Inaktive Tabellenzeile (z. B. deaktivierte Stundengruppe): dezent gedämpft, aber lesbar */
.zeile-inaktiv {
    opacity: 0.62;
}

/* Dezenter Hinweis, wenn ein Stundensatz noch 0 ist (Pflege nötig) */
.satz-pflegen {
    color: var(--grau-500);
    font-style: italic;
    font-size: 0.88rem;
}

/* ---- Leerzustand ---- */
.dashboard-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-s);
    padding: 3.5rem 2rem;
}

.leer-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--grau-100);
    color: var(--grau-400);
    margin-bottom: 0.5rem;
}

.leer-titel {
    font-size: 1.3rem;
}

.leer-detail {
    color: var(--grau-500);
    max-width: 26rem;
    line-height: 1.5;
}

.dashboard-leer .btn {
    margin-top: 0.85rem;
}

/* =========================================================================
   Responsiv (schmale Fenster)
   ========================================================================= */
@media (max-width: 720px) {
    .feld-gitter {
        grid-template-columns: 1fr;
    }

    .schritt-titel {
        display: none;
    }

    .schritt-karte {
        padding: 1.4rem;
    }

    .leistungs-zeile {
        flex-direction: column;
        align-items: stretch;
    }

    .eingabe-menge {
        width: 100%;
    }

    .komp-treffer-zeile,
    .auswahl-zeile {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }

    .treffer-rechts,
    .auswahl-rechts {
        width: 100%;
        justify-content: space-between;
    }

    .komp-gewaehlt {
        flex-direction: column;
        align-items: flex-start;
    }

    .komp-gewaehlt-aktionen {
        width: 100%;
        justify-content: flex-start;
    }

    /* kW-Suche auf schmal: Karte und Suchfelder untereinander, Knopf volle Breite. */
    .geraete-finder {
        flex-direction: column;
        align-items: stretch;
    }

    .geraete-finder-knopf {
        width: 100%;
    }

    .geraete-kw-feld,
    .geraete-text-feld {
        flex: 1 1 100%;
        max-width: none;
    }

    /* Schmales Fenster: die Hannig-Wortmarke bleibt sichtbar und führt, wird aber etwas
       kleiner skaliert, damit sie neben der Navigation Platz hat; der dezente Software-Name
       "JH Suite" wird ausgeblendet (platzsparender Fallback). */
    .marke-logo {
        height: 2.7rem;
    }

    .marke-suite {
        display: none;
    }

    .positions-zeile {
        flex-wrap: wrap;
    }

    .zeilen-aktionen {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .status-wahl .eingabe-kompakt {
        width: 100%;
    }

    .speichern-erfolg {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================================
   Blazor-Fehler-Leiste
   ========================================================================= */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1.25rem;
    background: var(--warn-hg);
    border-top: 1px solid var(--warn-rand);
    color: var(--warn-text);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

#blazor-error-ui .reload {
    color: var(--warn-text);
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1.25rem;
    top: 0.75rem;
}

/* Auffangnetz (ErrorBoundary) – ruhige Fehlerkarte statt zerlegter Oberfläche. */
.fehler-auffang {
    background: var(--fehler-hg);
    border: 1px solid var(--fehler);
}

.fehler-auffang-titel {
    font-weight: 600;
    color: var(--fehler);
}

.fehler-auffang .aktionsleiste {
    margin-top: 1rem;
}

/* =========================================================================
   Zubehör-Assistent (Wizard Schritt 2) + Antwort-Editor (Einstellungen)
   Nutzt ausschließlich die bestehenden Marken-Tokens (Navy = Auswahl,
   Kupfer/Beige = „daran denken"-Hervorhebung). Kein neues Farbschema.
   ========================================================================= */

/* Container des Assistenten – gleiches Karten-/Abstandsgefühl wie die Zusatz-Abschnitte. */
.assistent {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Liste der Fragen: nummeriert, mit Luft dazwischen, ohne klobige Default-Marker-Optik. */
.assistent-fragen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    counter-reset: assistent-frage;
}

.assistent-frage {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assistent-frage-text {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--grau-900);
    counter-increment: assistent-frage;
}

.assistent-frage-text::before {
    content: counter(assistent-frage) ". ";
    color: var(--kupfer-text);
    font-weight: 700;
}

/* Antwort-Optionen einer Frage – als umbrechende Klick-Karten (role=radio). */
.assistent-antworten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.assistent-antwort {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.95rem;
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    color: var(--grau-700);
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.assistent-antwort:hover {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
}

.assistent-antwort:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

/* Radio-Marke (Ring) – füllt sich im aktiven Zustand mit Navy. */
.assistent-antwort-marke {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid var(--grau-400);
    background: var(--grau-0);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.assistent-antwort-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    font-weight: 600;
}

.assistent-antwort-aktiv .assistent-antwort-marke {
    border-color: var(--akzent);
    background: var(--akzent);
    box-shadow: inset 0 0 0 3px var(--grau-0);
}

/* Fragen-Block: gleiches Karten-/Abstandsgefühl wie die übrigen Schritt-Abschnitte. */
.assistent-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Ergebnis-Bereich („Das empfehlen wir Ihnen") – fasst die empfohlenen Leistungs-Karten,
   die Übersicht der gewählten Leistungen und die Material-Empfehlungen zusammen. */
.assistent-ergebnis {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.assistent-empf-titel {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grau-900);
}

/* Eine Empfehlungs-Karte – warmer Kupfer/Beige-Verlauf wie die Vorschlag-Karte
   (signalisiert „Hinweis/daran denken", ohne Pflicht). */
.assistent-empf-karte {
    border: 1.5px solid var(--kupfer-rand);
    border-radius: var(--radius-l);
    background: linear-gradient(135deg, var(--kupfer-hell), var(--beige));
    box-shadow: var(--schatten-s);
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.assistent-empf-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.assistent-empf-kategorie {
    font-weight: 600;
    font-size: 1.0rem;
    color: var(--grau-900);
}

.assistent-empf-hinweise {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--grau-700);
    font-size: 0.95rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.assistent-empf-hinweise-leer {
    color: var(--grau-700);
    font-size: 0.95rem;
    line-height: 1.5;
}

.assistent-empf-aktion {
    display: flex;
}

.assistent-empf-fuss {
    margin-top: 0.1rem;
}

/* ---- Empfohlene Leistungspakete: auswählbare Karten (Navy-Auswahl-Sprache) ---- */
/* Raster aus Karten – füllt die Breite, bricht bei schmalem Fenster auf eine Spalte. */
.assistent-empf-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.7rem;
}

/* Eine Leistungs-Karte: ruhige weiße Karte; im aktiven Zustand navy-getönt + Navy-Rand
   (gleiche Auswahl-Sprache wie die Antwort-Optionen). Enthält oben den Klick-Bereich
   (Toggle) und – wenn übernommen – darunter das Anzahl-Feld. Keine neuen Farben. */
.assistent-leist-karte {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 0.85rem 1rem;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.assistent-leist-karte.leist-karte-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

/* Der anklickbare Haupt-Bereich der Karte (Toggle übernehmen/entfernen). */
.leist-karte-haupt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--grau-900);
    border-radius: var(--radius-s);
}

.leist-karte-haupt:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* Auswahl-Marke (Häkchen-Box) – füllt sich im aktiven Zustand mit Navy. */
.leist-karte-marke {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-s);
    border: 2px solid var(--grau-400);
    background: var(--grau-0);
    color: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.leist-karte-aktiv .leist-karte-marke {
    border-color: var(--akzent);
    background: var(--akzent);
}

.leist-karte-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.leist-karte-name {
    font-weight: 600;
    font-size: 1.0rem;
    color: var(--grau-900);
}

.leist-karte-status {
    font-size: 0.82rem;
    color: var(--grau-500);
}

.leist-karte-aktiv .leist-karte-status {
    color: var(--akzent-tief);
    font-weight: 500;
}

/* Anzahl-Feld an einer übernommenen Karte – dezent abgesetzt unter dem Toggle. */
.leist-karte-menge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--akzent-rand);
}

.leist-karte-menge .menge-label {
    margin: 0;
}

/* Übersicht „Weitere übernommene Leistungen" – Leistungen ohne aktuelle Empfehlungskarte,
   damit jederzeit sicht- und abwählbar bleibt, was gewählt ist. Ruhige, klare Liste. */
.assistent-gewaehlt {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.assistent-gewaehlt-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grau-700);
}

.assistent-gewaehlt-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assistent-gewaehlt-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.7rem 0.95rem;
    border: 1.5px solid var(--akzent-rand);
    border-radius: var(--radius-m);
    background: var(--akzent-hell);
}

.assistent-gewaehlt-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.assistent-gewaehlt-zeile .leist-karte-menge {
    padding-top: 0;
    border-top: none;
}

/* „Automatisch enthalten" – die als „Immer ins Angebot" markierten Leistungspakete. Steht
   ganz oben, dezent vom restlichen Ergebnis abgesetzt (Akzent-Rahmen), damit sofort klar ist:
   das kommt ohne Nachfrage ins Angebot. Nutzt die vorhandenen Auswahl-/Akzent-Tokens. */
.assistent-auto {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--akzent-rand);
    border-radius: var(--radius-l);
    background: var(--akzent-hell);
}

.assistent-auto-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Die Zeilen im Auto-Block stehen schon auf der Akzentfläche – innen ruhig weiß abheben. */
.assistent-auto-zeile {
    background: var(--grau-0);
    border-color: var(--akzent-rand);
}

/* Badge „Automatisch enthalten" – navy-getönt (wie „verschickt"), signalisiert: vom System
   gesetzt, informativ. Steht inline neben dem Paketnamen. */
.badge-auto {
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    border-color: var(--akzent-rand);
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Material-Empfehlungen als Unterabschnitt im Ergebnis-Bereich. */
.assistent-material {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Dezenter Trenner zwischen Leistungs- und Material-Empfehlungen. */
.assistent-empf-trenner {
    border-top: 1px solid var(--grau-200);
    margin: 0.2rem 0;
}

/* Editor (Einstellungen): eine Antwort-Zeile – die Felder nebeneinander, mit Umbruch. */
.assistent-antwort-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-start;
}

.assistent-antwort-felder .feld {
    margin: 0;
}

.assistent-antwort-felder .feld-breit {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.assistent-antwort-felder .feld-schmal {
    flex: 0 1 13rem;
    min-width: 10rem;
}

/* Editor (Einstellungen): Antworten als Karten, je Antwort eine Liste von Ausgaben.
   Verschachtelt: Frage → Antwort-Karte → Ausgaben-Bereich → Ausgabe-Zeilen. Markenlook
   über die vorhandenen Tokens (keine neuen Farben). */
.antwort-karten {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.antwort-karte {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.antwort-karte-kopf {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.antwort-karte-kopf .feld {
    flex: 1 1 auto;
    margin: 0;
}

.antwort-entfernen {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Ausgaben-Bereich: leicht eingerückte, abgesetzte Fläche unter der Antwort. */
.ausgaben-bereich {
    border-top: 1px solid var(--grau-200);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ausgaben-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ausgaben-titel {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--grau-500);
}

.ausgaben-leer {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.86rem;
}

.ausgaben-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

/* Eine Ausgabe-Zeile: Typ-Auswahl, das typabhängige Ziel-Feld(er) und „Entfernen“. */
.ausgabe-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
}

.ausgabe-zeile .feld {
    margin: 0;
}

.ausgabe-typ-feld {
    flex: 0 0 11rem;
    min-width: 9rem;
}

.ausgabe-ziel {
    flex: 1 1 18rem;
    min-width: 12rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: flex-start;
}

.ausgabe-ziel-haupt {
    flex: 1 1 14rem;
    min-width: 11rem;
}

.ausgabe-menge-feld {
    flex: 0 0 7rem;
}

.ausgabe-entfernen {
    flex-shrink: 0;
    align-self: center;
    white-space: nowrap;
}

/* Artikel-Wahl in einer Ausgabe-Zeile: gewählter Artikel als Text + „ändern“-Knopf. */
.artikel-wahl-zeile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-height: 2.6rem;
}

.artikel-wahl-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--grau-900);
    font-size: 0.95rem;
    word-break: break-word;
}

.artikel-wahl-leer {
    color: var(--grau-400);
    font-style: italic;
}

/* =========================================================================
   Dezente Update-Benachrichtigung (Velopack-Auto-Update). Schwebt unten rechts,
   erscheint NUR, wenn ein Update bereitsteht – kein Zwang, jederzeit wegklickbar.
   Markenlook: weiße Karte, feiner Navy-getönter Rand, weicher Schatten; keine
   neuen Farben (nur vorhandene Tokens). Bewusst zurückhaltend (kein Modal/Overlay),
   damit die Arbeit nicht unterbrochen wird.
   ========================================================================= */
.update-hinweis {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--grau-0);
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-l);
}

.update-hinweis-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.update-titel {
    font-weight: 600;
    color: var(--grau-900);
}

.update-detail {
    font-size: 0.875rem;
    color: var(--grau-500);
}

.update-hinweis-aktionen {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
}

/* =========================================================================
   Modul-Startseite „Was möchten Sie erstellen?"
   Zentraler Einstieg der App: die Angebotsarten als Kacheln. Hochwertig, ruhig,
   nicht überladen – Markenlook Navy/Kupfer/Beige (nur vorhandene Tokens). Eine
   Kachel je Modul; die verfügbaren führen in ihren Ablauf, die Vorschau-Kacheln
   tragen ein deutliches „Noch nicht verfügbar"-Badge und einen ausgegrauten Button.
   ========================================================================= */
.modul-start {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.modul-start-kopf {
    text-align: center;
    margin-bottom: 2.25rem;
}

.modul-start-kopf h1 {
    font-size: 2rem;
    letter-spacing: -0.01em;
}

.modul-start-kopf .untertitel {
    /* mittig zur Überschrift, angenehme Lesebreite */
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

/* Kachel-Raster: auf breiten Fenstern eine ruhige 2×2-Anordnung (ausgewogen für
   genau diese vier Module), auf schmalen Fenstern eine Spalte (siehe Media-Query). */
.modul-gitter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .modul-gitter {
        grid-template-columns: 1fr;
    }
}

/* Eine Modul-Kachel: ruhige weiße Karte, feiner Rand, sanfte Rundung. Als Flex-
   Spalte aufgebaut, damit der Button unten bündig sitzt (gleich hohe Kacheln). */
.modul-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.6rem 1.5rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

/* Verfügbare Kacheln reagieren spürbar auf Hover (laden zum Klick ein). */
.modul-kachel:not(.modul-kachel-vorschau):hover {
    border-color: var(--akzent-rand);
    box-shadow: var(--schatten-m);
    transform: translateY(-2px);
}

/* Vorschau-Kacheln (noch nicht verfügbar): dezent zurückgenommen, aber gut lesbar. */
.modul-kachel-vorschau {
    background: var(--grau-50);
    border-style: dashed;
}

.modul-kachel-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Icon-Plakette: Navy-getönte Fläche mit Navy-Glyphe (markenkonform, AA). */
.modul-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: var(--radius-m);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
}

.modul-kachel-vorschau .modul-icon {
    /* etwas ruhiger, da die Kachel insgesamt zurückgenommen ist */
    background: var(--grau-100);
    color: var(--grau-500);
}

/* Status-Badge „Noch nicht verfügbar": dezent, aber deutlich (warmer Kupfer-Ton). */
.modul-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
    white-space: nowrap;
}

.modul-titel {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--grau-900);
    margin: 0.15rem 0 0;
}

.modul-beschreibung {
    color: var(--grau-600);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    /* schiebt den Button-Block unten an die Kachelkante (gleich hohe Kacheln) */
    flex: 1 1 auto;
}

/* Der „Starten"-Button sitzt unten, über die volle Kachelbreite – großes Klick-Ziel. */
.modul-knopf {
    width: 100%;
    margin-top: 0.4rem;
}

/* Hülle um den deaktivierten Button: ein transparenter Overlay-Button fängt
   Klickversuche ab und löst den freundlichen Hinweis aus (der eigentliche Button
   ist disabled und damit nicht fokussierbar). */
.modul-knopf-huelle {
    position: relative;
    display: block;
    margin-top: 0.4rem;
}

.modul-knopf-huelle .modul-knopf {
    margin-top: 0;
}

/* Deaktivierter Primär-Button: sichtbar ausgegraut (kein Hover-Effekt). */
.modul-knopf:disabled {
    background: var(--grau-300);
    color: var(--grau-0);
    box-shadow: none;
    cursor: default;
}

.modul-knopf-sperre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: not-allowed;
    border-radius: var(--radius-s);
}

.modul-knopf-sperre:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* =========================================================================
   Reine Fragestrecke (Schritt „Leistungen", Baustein B)
   Nur Fragen – keine Karten/Pakete/Preise. Auswahl-Sprache (Navy) wie die
   übrigen Auswahlflächen; ausschließlich vorhandene Marken-Tokens.
   ========================================================================= */
.fragestrecke {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fragestrecke-fragen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Eine Frage als ruhige Karte – gleiches Gefühl wie die übrigen Schritt-Abschnitte. */
.fragestrecke-frage {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.fragestrecke-frage-text {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--grau-900);
    margin: 0;
}

.fragestrecke-frage-nr {
    color: var(--kupfer-text);
    font-weight: 700;
    margin-right: 0.35rem;
}

/* Antwort-Optionen (Einzelauswahl/JaNein) – umbrechende Klick-Karten (role=radio). */
.fragestrecke-antworten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

/* JaNein: zwei gleich große Flächen nebeneinander (auf Schmalansicht untereinander). */
.fragestrecke-antworten-janein .fragestrecke-antwort {
    flex: 1 1 10rem;
    justify-content: center;
}

.fragestrecke-antwort {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 0.95rem;
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    cursor: pointer;
    font: inherit;
    font-size: 0.95rem;
    color: var(--grau-700);
    text-align: left;
    min-height: 2.75rem;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.fragestrecke-antwort:hover {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
}

.fragestrecke-antwort:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

/* Radio-Marke (Ring) – füllt sich im aktiven Zustand mit Navy. */
.fragestrecke-antwort-marke {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 2px solid var(--grau-400);
    background: var(--grau-0);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fragestrecke-antwort-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    font-weight: 600;
}

.fragestrecke-antwort-aktiv .fragestrecke-antwort-marke {
    border-color: var(--akzent);
    background: var(--akzent);
    box-shadow: inset 0 0 0 3px var(--grau-0);
}

/* Mehrfachauswahl – Checkbox-Karten (eckige Marke statt Ring). */
.fragestrecke-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 0.95rem;
    border: 1.5px solid var(--grau-300);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--grau-700);
    min-height: 2.75rem;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.fragestrecke-check:hover {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
}

.fragestrecke-check-box {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--akzent);
    cursor: pointer;
    flex-shrink: 0;
}

.fragestrecke-check-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--akzent-tief);
    font-weight: 600;
}

.fragestrecke-check:focus-within {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

/* Freitext/Zahl/Dropdown – die vorhandene .eingabe-Optik, hier auf angenehme Breite. */
.fragestrecke-freitext,
.fragestrecke-zahl,
.fragestrecke-select {
    max-width: 28rem;
}

/* Ruhiger Status unter den Fragen. */
.fragestrecke-fuss {
    margin: 0;
}

/* =========================================================================
   Hinweise / Texte zum Angebot (Abschlussübersicht)
   Macht die abgeleiteten Textbausteine + internen Hinweise sichtbar.
   ========================================================================= */
.hinweise-block {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hinweise-gruppe {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 1rem 1.25rem;
}

.hinweise-gruppe-titel {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.hinweise-liste {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--grau-700);
    line-height: 1.5;
}

/* Interne Hinweise dezent warm tönen (klar als „nicht für den Kunden" abgesetzt). */
.hinweise-liste-intern {
    color: var(--warn-text);
}

/* =========================================================================
   Material / Belege → „Beleg einlesen" (UGL)
   Ruhige Karten, Ampel-Zusammenfassung (grün/gelb), Positionstabelle mit
   Erkennungs-Status. Ausschließlich vorhandene Marken-Tokens.
   ========================================================================= */
.beleg-bereich {
    max-width: 72rem;
    margin: 0 auto;
}

/* Datei-Auswahl-Karte: dezent navy-getönt (wie die Import-Karte), lädt zum Klick ein. */
.beleg-waehlen {
    background: var(--akzent-hell);
    border-color: var(--akzent-rand);
}

.beleg-dateiname {
    color: var(--grau-700);
    font-size: 0.95rem;
}

.beleg-dateiname strong {
    color: var(--grau-900);
    word-break: break-all;
}

/* --- Belegkopf als ruhiges Definitions-Gitter (Label oben, Wert darunter) --- */
.beleg-kopf-gitter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}

.beleg-kopf-zelle {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.beleg-kopf-zelle dt {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grau-500);
}

.beleg-kopf-zelle dd {
    margin: 0;
    font-size: 1.02rem;
    color: var(--grau-900);
    font-weight: 600;
    word-break: break-word;
}

/* --- Zusammenfassung als Ampel-Banner --- */
.beleg-ampel {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-l);
    border: 1px solid transparent;
}

/* Grün = alle erkannt → markenkonform Beige-Fläche mit Navy-Text (wie „Erfolg"). */
.beleg-ampel.ampel-gruen {
    background: var(--erfolg-hg);
    border-color: var(--erfolg-rand);
    color: var(--grau-900);
}

/* Gelb = es fehlt etwas → warme Warn-Fläche. */
.beleg-ampel.ampel-gelb {
    background: var(--warn-hg);
    border-color: var(--warn-rand);
    color: var(--warn-text);
}

.ampel-symbol {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.ampel-gruen .ampel-symbol {
    background: var(--kupfer);
    color: var(--grau-900);
}

.ampel-gelb .ampel-symbol {
    background: var(--warn-rand);
    color: var(--warn-text);
}

.ampel-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ampel-haupt {
    margin: 0;
    font-size: 1.05rem;
    color: var(--grau-900);
}

.ampel-haupt strong {
    font-variant-numeric: tabular-nums;
}

.ampel-detail {
    margin: 0;
    font-size: 0.92rem;
    color: var(--grau-700);
}

.ampel-gelb .ampel-haupt,
.ampel-gelb .ampel-detail {
    color: var(--warn-text);
}

.ampel-zusatz {
    color: var(--grau-500);
}

.ampel-gelb .ampel-zusatz {
    color: var(--warn-text);
    opacity: 0.85;
}

/* --- Positionstabelle --- */
/* Mindestbreite, damit die Tabelle bei schmalem Fenster nicht gequetscht, sondern im
   umgebenden .tabellen-rahmen horizontal gescrollt wird (Scrollbalken statt Abschneiden). */
.beleg-tabelle {
    min-width: 46rem;
}

.beleg-tabelle .spalte-pos {
    width: 1%;
    white-space: nowrap;
}

.beleg-tabelle .grau {
    color: var(--grau-400);
}

/* Untergeordnete Zeilen (Unterposition/Zuschlag) optisch absetzen: eingerückt + dezent. */
.beleg-tabelle .zeile-untergeordnet td:first-child {
    border-left: 3px solid var(--grau-300);
}

.beleg-tabelle .zeile-untergeordnet .bez-haupt {
    padding-left: 0.9rem;
    color: var(--grau-700);
}

.beleg-tabelle .bez-haupt {
    display: block;
    color: var(--grau-900);
}

/* Typ-Badge (Unterposition/Zuschlag) – kleine, ruhige Pille. */
.typ-badge {
    display: inline-block;
    margin-top: 0.25rem;
    margin-left: 0.9rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.typ-badge.badge-unter {
    background: var(--grau-100);
    color: var(--grau-600);
    border-color: var(--grau-200);
}

.typ-badge.badge-zuschlag {
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    border-color: var(--kupfer-rand);
}

/* Stamm-Treffer-Zeile unter einer erkannten Position: belegt die Zuordnung. */
.stamm-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    margin-top: 0.3rem;
    font-size: 0.86rem;
    color: var(--grau-500);
}

.stamm-pfeil {
    color: var(--kupfer-text);
    font-weight: 700;
}

.stamm-bez {
    color: var(--grau-700);
}

.stamm-ek {
    color: var(--grau-900);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stamm-lief {
    color: var(--grau-500);
    background: var(--grau-100);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.8rem;
}

/* Status-Pille je Zeile (Erkannt / Nicht im Stamm / Ohne Artikelnummer). */
.status-pille {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pille .status-symbol {
    font-weight: 700;
    line-height: 1;
}

.status-pille.status-erkannt {
    background: var(--erfolg-hg);
    color: var(--grau-900);
    border-color: var(--erfolg-rand);
}

.status-pille.status-erkannt .status-symbol {
    color: var(--kupfer-text);
}

.status-pille.status-fehlt {
    background: var(--warn-hg);
    color: var(--warn-text);
    border-color: var(--warn-rand);
}

.status-pille.status-ohne {
    background: var(--grau-100);
    color: var(--grau-500);
    border-color: var(--grau-200);
}

/* --- Liste nicht lesbarer Dateien (robustes Mehrfach-Einlesen) --- */
.datei-fehler-liste {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

/* --- Auswahl- + Übernahme-Leiste (gilt über ALLE eingelesenen Belege) --- */
.beleg-uebernahme-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--grau-100);
    border: 1px solid var(--grau-200);
    border-radius: 0.6rem;
}

.beleg-alle-wahl {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--grau-900);
    cursor: pointer;
}

.beleg-wahl-info {
    color: var(--grau-600);
    font-variant-numeric: tabular-nums;
}

/* Übernahme-Knopf schiebt sich ans rechte Ende der Leiste. */
.beleg-uebernahme-leiste .btn-primaer {
    margin-left: auto;
}

/* Zähler-Pille im Übernahme-Knopf (Anzahl ausgewählter Positionen). */
.anzahl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Erfolgsmeldung nach der Übernahme. */
.erfolg-box {
    margin: 0.75rem 0;
    padding: 0.7rem 1rem;
    background: var(--erfolg-hg);
    border: 1px solid var(--erfolg-rand);
    border-radius: 0.6rem;
    color: var(--grau-900);
}

/* Ruhige Erfolgsmeldung „Projekt aus Angebot angelegt" im Dashboard (Welle 3a, Punkt 1): ein ruhiges
   beiges Band (Marken-Erfolgsfläche, KEIN grelles Grün) mit Klartext links und der klaren Aktion
   „Projekt öffnen" rechts. Markenkonform – Navy-Text/-Symbol, der Kupfer-Akzent trägt nur der Primär-Knopf. */
.projekt-erfolg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin: 0.75rem 0 1rem;
    padding: 0.8rem 1.1rem;
    background: var(--erfolg-hg);
    border: 1px solid var(--erfolg-rand);
    border-radius: 0.6rem;
    color: var(--grau-900);
}

.projekt-erfolg-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.projekt-erfolg-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--grau-900);
}

/* Runder Erfolgs-Haken (Marken-Navy), damit die Meldung auch ohne Text als „geschafft" lesbar ist. */
.projekt-erfolg-haken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--erfolg);
    color: #fff;
    font-size: 0.82rem;
    line-height: 1;
    flex: none;
}

.projekt-erfolg-detail {
    font-size: 0.86rem;
    color: var(--grau-700);
}

.projekt-erfolg-aktionen {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

/* --- Ein eigener Abschnitt je eingelesenem Beleg --- */
.beleg-block {
    margin-top: 1rem;
}

.beleg-block-kopf {
    margin-bottom: 0.6rem;
}

.beleg-block-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--grau-600);
}

/* Baustein C: Hinweis „dieser Artikel ist schon in Paket X" (Paket-Vorschlag/Lern-Effekt). */
.paket-vorschlag {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
    font-size: 0.84rem;
    color: var(--kupfer-text);
}

.paket-vorschlag strong {
    color: var(--grau-900);
    font-weight: 600;
}

/* --- „Artikel anlegen"-Knopf bei einer „Nicht im Stamm"-Position (Material-Kreislauf) ---
   Kleine, ruhige Inline-Aktion direkt unter dem Belegtext; warmes Kupfer als Highlight, da
   es ein optionaler, abschließender Schritt ist. Kein lautes Voll-Button. */
.anlegen-zeile {
    display: block;
    margin-top: 0.35rem;
}

.btn-anlegen {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    font-size: 0.84rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn-anlegen:hover:not(:disabled) {
    background: #f5e6d3;
    border-color: var(--kupfer);
    transform: translateY(-1px);
}

.btn-anlegen:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.btn-anlegen:disabled {
    opacity: 0.55;
    cursor: default;
}

.btn-anlegen-symbol {
    font-weight: 700;
    line-height: 1;
    font-size: 0.95rem;
}

/* Anlege-Dialog etwas schmaler als der Übernahme-Dialog (kompaktes Formular). */
.modal-anlegen {
    max-width: 32rem;
}

/* Schmale Fenster: Belegkopf einspaltig, damit nichts gequetscht wird. */
@media (max-width: 720px) {
    .beleg-kopf-gitter {
        grid-template-columns: 1fr 1fr;
    }
}

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

/* =========================================================================
   Material-Bereich (Hub) – Tab-Leiste über „Belege einlesen" + „Nachkalkulation".
   Nutzt den vorhandenen Segment-Schalter; hier nur Rahmen/Abstände des Hubs.
   ========================================================================= */
.material-bereich {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 1rem;
}

.material-kopf {
    margin-bottom: 1.25rem;
}

/* Tab-Leiste etwas größer/prominenter als ein Inline-Segment (es ist die Bereichs-Navigation). */
.material-tabs.segment {
    margin-bottom: 1.5rem;
}

.material-tabs .segment-knopf {
    font-size: 0.95rem;
    padding: 0.55rem 1.15rem;
}

/* Das Panel hostet die jeweilige Unter-Komponente; die bringt ihre eigene Breite/Polsterung
   mit (beleg-bereich/nachkalk-bereich sind selbst zentriert), daher hier nur als Container. */
.material-panel {
    margin: 0;
}

/* Die gehosteten Bereiche laufen schon im Hub-Container -> deren eigene Außenpolsterung
   zurücknehmen, damit kein doppelter Rand entsteht. */
.material-panel .beleg-bereich,
.material-panel .nachkalk-bereich {
    max-width: none;
    margin: 0;
}

/* =========================================================================
   Nachkalkulation – Angebot wählen, Belege einlesen, Mengen-Gegenüberstellung.
   Teilt die Karten-/Ampel-/Status-Sprache mit dem Belege-Bereich (karte-flach,
   beleg-ampel, status-pille) und ergänzt nur das Nachkalkulations-Spezifische.
   ========================================================================= */
.nachkalk-bereich {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Schritt-1-Karte „Angebot wählen": dezent navy-getönt (wie die Beleg-Auswahl-Karte). */
.nachkalk-waehlen {
    background: var(--akzent-hell);
    border-color: var(--akzent-rand);
}

/* Info-Zeile zum geladenen Angebot (Kunde + Eckdaten). */
.nachkalk-angebot-info {
    margin-top: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nachkalk-info-kunde {
    font-weight: 700;
    color: var(--grau-900);
    font-size: 1.05rem;
}

.nachkalk-info-meta {
    color: var(--grau-500);
    font-size: 0.9rem;
}

/* Ehrlicher Preis-Hinweis (Preise NICHT aus dem Beleg) – ruhige, navy-getönte Notiz. */
.nachkalk-preishinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-m);
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    color: var(--grau-700);
    font-size: 0.92rem;
    line-height: 1.5;
}

.nachkalk-preishinweis strong {
    color: var(--grau-900);
}

.nachkalk-hinweis-symbol {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--akzent);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    font-style: normal;
    line-height: 1;
}

/* --- Gegenüberstellungs-Tabelle --- */
/* Mindestbreite, damit die 6 Spalten bei schmalem Fenster im .tabellen-rahmen horizontal
   gescrollt statt gequetscht werden (Scrollbalken statt Abschneiden). */
.nachkalk-tabelle {
    min-width: 48rem;
}

/* Artikelnummer als dezente Unterzeile unter der Bezeichnung. */
.nachkalk-artnr {
    display: block;
    color: var(--grau-500);
    font-size: 0.82rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    margin-top: 0.1rem;
}

/* Mehr geliefert / Mehrkosten = warmer Kupfer-Akzent (Aufmerksamkeit, AA-Textfarbe). */
.nachkalk-tabelle .nachkalk-mehr {
    color: var(--kupfer-text);
    font-weight: 600;
}

/* Weniger geliefert / Minderkosten (günstiger) = gedämpftes Grau (kein Alarm). */
.nachkalk-tabelle .nachkalk-weniger {
    color: var(--grau-500);
    font-weight: 600;
}

/* Fuß-/Saldo-Zeile: Label links, Wert rechts (nutzt .summe-label/.spalte-num der datentabelle). */
.nachkalk-tabelle tfoot .summe-label {
    font-weight: 700;
    color: var(--grau-900);
}

.summe-hinweis {
    display: block;
    color: var(--grau-500);
    font-size: 0.8rem;
    font-weight: 400;
}

/* Ehrliche Fußnote unter der Summe (Artikel ohne Angebots-EK sind nicht enthalten). */
.summe-fussnote {
    color: var(--grau-500);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.45;
    background: var(--grau-50);
}

.summe-fussnote strong {
    color: var(--grau-700);
}

/* Schmale Fenster: Tab-Knöpfe dürfen umbrechen (segment hat bereits flex-wrap). */
@media (max-width: 560px) {
    .nachkalk-info-meta {
        font-size: 0.85rem;
    }
}

/* Beleg-Quelle-Umschalter (Dateien einlesen ↔ aus Projekt laden) in der Nachkalkulation. */
.nachkalk-quelle {
    margin: 0.25rem 0 1rem;
    max-width: 28rem;
}

/* =========================================================================
   Projekte – Baustellen-Verwaltung des Material-Kreislaufs.
   Teilt die Karten-/Status-/Tabellen-Sprache mit den übrigen Material-Bereichen
   (karte-flach, status-pille, datentabelle) und ergänzt nur das Projekt-Spezifische.
   ========================================================================= */
.projekt-bereich {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Digitaler Projektprozess: Prozess- und Modulnavigation oberhalb des bestehenden Projekt-Boards. */
.storz-system {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-s);
}

.storz-system-kopf,
.storz-modulkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.storz-system-label {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kupfer-text);
}

.storz-system h2,
.storz-modulkopf h3 {
    margin: 0;
    color: var(--grau-900);
    line-height: 1.2;
}

.storz-system h2 {
    font-size: 1.18rem;
}

.storz-system-untertitel {
    margin: 0.25rem 0 0;
    max-width: 44rem;
    color: var(--grau-600);
    font-size: 0.88rem;
    line-height: 1.45;
}

.storz-modulkopf h3 {
    font-size: 1.05rem;
}

.storz-system-kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.storz-system-aktionen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: min(100%, 38rem);
}

.storz-suche {
    position: relative;
    flex: 1 1 13rem;
    min-width: 12rem;
}

.storz-suche span {
    position: absolute;
    left: 0.62rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grau-500);
    font-size: 0.84rem;
    pointer-events: none;
}

.storz-suche .eingabe {
    width: 100%;
    padding-left: 2rem;
}

.storz-ansichten {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.18rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
}

.storz-ansicht {
    min-height: 2rem;
    padding: 0.25rem 0.55rem;
    border: 0;
    border-radius: calc(var(--radius-s) - 2px);
    background: transparent;
    color: var(--grau-600);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

.storz-ansicht:hover,
.storz-ansicht:focus-visible {
    color: var(--kupfer-text);
    outline: none;
}

.storz-ansicht--aktiv {
    background: var(--grau-0);
    color: var(--kupfer-text);
    box-shadow: var(--schatten-s);
}

.storz-system-kennzahlen span,
.storz-prio,
.storz-status {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-s);
    border: 1px solid var(--grau-200);
    background: var(--grau-50);
    color: var(--grau-700);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.storz-system-kennzahlen span {
    justify-content: space-between;
}

.storz-prio {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
    color: var(--kupfer-text);
}

.storz-status.offen {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.storz-prozessleiste {
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.storz-prozessschritt {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.55rem;
    align-items: start;
    padding: 0.75rem;
    min-height: 6.25rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
}

.storz-prozessnummer {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--grau-900);
    color: var(--grau-0);
    font-size: 0.78rem;
    font-weight: 800;
}

.storz-prozessschritt strong {
    color: var(--grau-900);
    font-size: 0.9rem;
}

.storz-prozessschritt span:last-child {
    color: var(--grau-600);
    font-size: 0.82rem;
    line-height: 1.35;
}

.storz-prozessdetails,
.storz-filterdetails {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
}

.storz-prozessdetails summary,
.storz-filterdetails summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.7rem;
    color: var(--grau-800);
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.storz-prozessdetails summary::-webkit-details-marker,
.storz-filterdetails summary::-webkit-details-marker {
    display: none;
}

.storz-prozessdetails summary::after,
.storz-filterdetails summary::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-600);
}

.storz-prozessdetails[open] summary::after,
.storz-filterdetails[open] summary::after {
    content: "–";
}

.storz-module {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.storz-modul-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-700);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.storz-modul-tab:hover,
.storz-modul-tab:focus-visible {
    border-color: var(--kupfer-rand);
    box-shadow: 0 0 0 2px rgba(185, 115, 63, 0.12);
    outline: none;
}

.storz-modul-tab--aktiv {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
    color: var(--kupfer-text);
}

.storz-modul-tab span {
    font-weight: 800;
    font-size: 0.82rem;
}

.storz-modul-tab small {
    color: var(--grau-500);
    font-size: 0.75rem;
}

.storz-boardwerkzeuge {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.75rem 0.75rem;
}

.storz-filtergrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(8.5rem, 1fr)) auto;
    gap: 0.55rem;
    align-items: end;
}

.storz-filtergrid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    color: var(--grau-600);
    font-size: 0.76rem;
    font-weight: 800;
}

.storz-filtergrid .eingabe {
    width: 100%;
}

.storz-modulansicht {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-s);
}

.storz-kachelraster,
.storz-formularraster {
    display: grid;
    gap: 0.75rem;
}

.storz-datenband {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.65rem;
}

.storz-datenband article {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-s);
    background: var(--kupfer-hell);
    min-width: 0;
}

.storz-datenband span {
    color: var(--kupfer-text);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.storz-datenband strong {
    color: var(--grau-900);
    font-size: 1.05rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.storz-datenband small {
    color: var(--grau-600);
    font-size: 0.78rem;
    line-height: 1.35;
}

.storz-kachelraster {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.storz-formularraster {
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.storz-formularraster--kompakt {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.storz-kachel,
.storz-formular {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
}

.storz-kachel p,
.storz-formular p {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.storz-kachel h4,
.storz-formular h4 {
    margin: 0;
    color: var(--grau-900);
    font-size: 0.95rem;
}

.storz-kachel strong {
    color: var(--kupfer-text);
    font-size: 0.82rem;
}

.storz-kachel span,
.storz-formular span {
    color: var(--grau-600);
    font-size: 0.86rem;
    line-height: 1.4;
}

.storz-formular label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--grau-600);
    font-size: 0.78rem;
    font-weight: 700;
}

.storz-formular input,
.storz-formular select,
.storz-formular textarea {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    color: var(--grau-900);
    font: inherit;
}

.storz-formular textarea {
    resize: vertical;
}

.storz-tabelle-wrap {
    overflow-x: auto;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
}

.storz-tabelle {
    width: 100%;
    min-width: 54rem;
    border-collapse: collapse;
    background: var(--grau-0);
}

.storz-tabelle th,
.storz-tabelle td {
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid var(--grau-200);
    text-align: left;
    vertical-align: top;
    font-size: 0.84rem;
    line-height: 1.35;
}

.storz-tabelle th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--grau-50);
    color: var(--grau-600);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.storz-tabelle td:first-child {
    font-weight: 800;
    color: var(--grau-900);
}

.storz-tabelle tr:last-child td {
    border-bottom: 0;
}

.storz-uebersicht {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.storz-datenband--uebersicht {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.storz-arbeitsraster {
    display: grid;
    grid-template-columns: minmax(18rem, 1.25fr) repeat(2, minmax(14rem, 1fr));
    gap: 0.85rem;
}

.storz-arbeitskarte {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.95rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    box-shadow: var(--schatten-xs);
}

.storz-arbeitskarte h3,
.storz-fluss-kopf h3 {
    margin: 0;
    color: var(--grau-900);
    font-size: 1rem;
}

.storz-leertext {
    margin: 0;
    color: var(--grau-600);
    font-size: 0.86rem;
    line-height: 1.45;
}

.storz-aktionsliste {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.storz-aktionsliste li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: stretch;
}

.storz-aktionsliste button {
    min-width: 0;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    color: var(--grau-900);
    text-align: left;
    cursor: pointer;
}

.storz-aktionsliste button:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    padding: 0.55rem 0.65rem;
}

.storz-aktionsliste button span {
    color: var(--grau-600);
    font-size: 0.78rem;
}

.storz-miniaktion {
    padding: 0.45rem 0.6rem;
    color: var(--kupfer-text) !important;
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center !important;
}

.storz-freigabe-liste {
    display: grid;
    gap: 0.45rem;
}

.storz-freigabe-liste span {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--grau-200);
    color: var(--grau-600);
    font-size: 0.84rem;
}

.storz-freigabe-liste span:last-child {
    border-bottom: 0;
}

.storz-freigabe-liste strong {
    color: var(--grau-900);
}

.storz-warnband {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-s);
    background: var(--warn-hg);
}

.storz-warnband strong {
    color: var(--warn-text);
    font-size: 0.86rem;
}

.storz-warnband button {
    border: 1px solid var(--warn-rand);
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--warn-text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.storz-fluss-kopf {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    padding-top: 0.15rem;
    border-top: 1px solid var(--grau-200);
}

.storz-fluss-kopf span {
    color: var(--grau-500);
    font-size: 0.84rem;
    font-weight: 700;
}

.storz-projektfluss {
    display: grid;
    grid-template-columns: repeat(5, minmax(13rem, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.storz-fluss-spalte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 20rem;
    padding: 0.7rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
}

.storz-projektfluss--zieht .storz-fluss-spalte {
    border-style: dashed;
}

.storz-fluss-spalte--ziel {
    border-color: var(--kupfer);
    background: var(--kupfer-hell);
}

.storz-fluss-spaltenkopf {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.storz-fluss-spaltenkopf strong {
    color: var(--grau-900);
    font-size: 0.86rem;
}

.storz-fluss-spaltenkopf span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-600);
    font-size: 0.78rem;
    font-weight: 800;
}

.storz-fluss-karten {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 0;
}

.storz-fluss-karten > p {
    margin: 0;
    padding: 0.85rem;
    border: 1px dashed var(--grau-200);
    border-radius: var(--radius-s);
    color: var(--grau-500);
    font-size: 0.82rem;
    text-align: center;
}

@media (max-width: 980px) {
    .storz-system-kennzahlen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storz-prozessleiste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storz-filtergrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .storz-datenband--uebersicht,
    .storz-arbeitsraster,
    .storz-projektfluss {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .storz-system,
    .storz-modulansicht {
        padding: 0.8rem;
    }

    .storz-system-kennzahlen,
    .storz-prozessleiste,
    .storz-formularraster,
    .storz-formularraster--kompakt,
    .storz-filtergrid,
    .storz-datenband--uebersicht,
    .storz-arbeitsraster,
    .storz-projektfluss {
        grid-template-columns: 1fr;
    }

    .storz-prozessschritt {
        min-height: 0;
    }
}

/* Mockup-nahe Projektübersicht: Topbar, Focus-Pills, Board + rechte Arbeitsleiste. */
.projekt-bereich {
    gap: 0;
}

.storz-system {
    gap: 0;
    padding: 0;
    overflow: visible;
    background: var(--grau-0);
    border-radius: var(--radius-m);
}

.storz-system-kopf {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--grau-200);
}

.storz-system h2 {
    font-size: 1.3rem;
    font-weight: 800;
}

.storz-system-untertitel {
    max-width: 48rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}

.projekt-syncband {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1.25rem;
    background: #fbfaf8;
    border-bottom: 1px solid var(--grau-200);
}

.projekt-syncband--offline {
    background: var(--warn-hg);
}

.projekt-syncband-status {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.projekt-syncband-status strong,
.projekt-syncband-status span {
    display: block;
}

.projekt-syncband-status strong {
    color: var(--grau-900);
    font-size: 0.86rem;
    line-height: 1.25;
}

.projekt-syncband-status span {
    margin-top: 0.1rem;
    color: var(--grau-600);
    font-size: 0.76rem;
    line-height: 1.35;
}

.projekt-sync-dot {
    flex: 0 0 auto;
    width: 0.62rem;
    height: 0.62rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.12);
}

.projekt-sync-dot--an {
    background: #2e8b57;
}

.projekt-sync-dot--aus {
    background: var(--kupfer);
    box-shadow: 0 0 0 3px rgba(185, 115, 63, 0.16);
}

.projekt-syncband-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.projekt-sync-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.12rem 0.5rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-700);
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
}

.projekt-sync-pill--stand {
    color: var(--kupfer-text);
    border-color: var(--kupfer-rand);
    background: var(--kupfer-hell);
}

.storz-system-aktionen {
    flex-wrap: nowrap;
    min-width: 0;
}

.storz-suche {
    flex: 0 1 19rem;
}

.storz-ansichten {
    height: 2.25rem;
    border-radius: var(--radius-s);
    background: var(--grau-100);
}

.storz-ansicht {
    height: 1.75rem;
    min-height: 1.75rem;
    font-size: 0.76rem;
}

.storz-focus-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.65rem 1.25rem;
    overflow-x: auto;
    background: var(--grau-50);
    border-bottom: 1px solid var(--grau-200);
}

.storz-focus-pill {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-600);
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
}

.storz-focus-pill strong {
    color: var(--grau-900);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.storz-focus-pill.hot {
    color: var(--fehler);
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
}

.storz-focus-pill.warn {
    color: var(--warn-text);
    background: var(--warn-hg);
    border-color: var(--warn-rand);
}

.storz-focus-pill.aktiv {
    color: var(--grau-900);
    border-color: var(--kupfer-rand);
    box-shadow: 0 0 0 2px rgba(185, 115, 63, 0.16);
}

.storz-module {
    padding: 0.5rem 1.25rem;
    background: var(--grau-0);
    border-bottom: 1px solid var(--grau-200);
}

.storz-modul-tab {
    min-height: 1.95rem;
    padding: 0.25rem 0.65rem;
    background: var(--grau-50);
    font-size: 0.75rem;
}

.storz-modul-tab--aktiv {
    color: var(--grau-0);
    background: var(--grau-900);
    border-color: var(--grau-900);
}

.storz-filterdetails--kopf {
    position: relative;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
}

.storz-filterdetails--kopf summary {
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    white-space: nowrap;
}

.storz-filterdetails--kopf .storz-boardwerkzeuge {
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 20;
    width: min(46rem, calc(100vw - 3rem));
    padding: 0.8rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    box-shadow: var(--schatten-m);
}

.storz-focus-strip--reduziert,
.storz-module--fokus {
    flex-wrap: wrap;
    overflow: visible;
}

.storz-focus-label {
    flex: 0 0 auto;
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.storz-focus-pill--passiv {
    cursor: default;
}

.storz-arbeitsbereiche {
    border-bottom: 1px solid var(--grau-200);
    background: var(--grau-0);
}

.storz-arbeitsbereiche > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.45rem;
    padding: 0.55rem 1.25rem;
    color: var(--grau-700);
    cursor: pointer;
    list-style: none;
}

.storz-arbeitsbereiche > summary::-webkit-details-marker {
    display: none;
}

.storz-arbeitsbereiche > summary span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.storz-arbeitsbereiche > summary strong {
    min-width: 0;
    color: var(--grau-900);
    font-size: 0.82rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storz-arbeitsbereiche > summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-600);
    font-weight: 900;
}

.storz-arbeitsbereiche[open] > summary::after {
    content: "-";
}

.storz-arbeitsbereiche > .storz-module {
    border-top: 1px solid var(--grau-200);
}

.storz-metrikdetails,
.storz-moduldetails {
    position: relative;
    flex: 0 0 auto;
}

.storz-metrikdetails > summary,
.storz-moduldetails > summary {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-700);
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.storz-moduldetails > summary {
    min-height: 1.95rem;
    background: var(--grau-50);
}

.storz-metrikdetails > summary::-webkit-details-marker,
.storz-moduldetails > summary::-webkit-details-marker {
    display: none;
}

.storz-metrikdetails > summary::after,
.storz-moduldetails > summary::after {
    content: "+";
    color: var(--grau-500);
    font-weight: 900;
}

.storz-metrikdetails[open] > summary::after,
.storz-moduldetails[open] > summary::after {
    content: "-";
}

.storz-metrikdetails[open] > summary,
.storz-moduldetails[open] > summary {
    border-color: var(--kupfer-rand);
    box-shadow: 0 0 0 2px rgba(185, 115, 63, 0.12);
}

.storz-metrikdetails-menu,
.storz-moduldetails-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.65rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    box-shadow: var(--schatten-m);
}

.storz-metrikdetails-menu {
    left: 0;
    width: min(38rem, calc(100vw - 3rem));
}

.storz-moduldetails-menu {
    right: 0;
    width: min(30rem, calc(100vw - 3rem));
}

@media (max-width: 760px) {
    .projekt-syncband {
        grid-template-columns: 1fr;
    }

    .projekt-syncband-pills {
        justify-content: flex-start;
    }

    .storz-metrikdetails,
    .storz-moduldetails {
        width: 100%;
    }

    .storz-metrikdetails-menu,
    .storz-moduldetails-menu {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
    }
}

.storz-uebersicht {
    min-width: 0;
}

.storz-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    min-width: 0;
    min-height: 34rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    overflow: hidden;
    box-shadow: var(--schatten-s);
}

.storz-boardarea {
    min-width: 0;
    overflow: auto;
    padding: 1rem 1.25rem 1.25rem;
}

.storz-prozesspfad {
    min-width: 72rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.storz-prozesspfad-schritt {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--schatten-xs);
}

.storz-prozesspfad-schritt strong {
    color: var(--grau-900);
    font-size: 0.8rem;
    font-weight: 820;
}

.storz-prozesspfad-schritt span {
    color: var(--grau-600);
    font-size: 0.75rem;
    line-height: 1.35;
}

.storz-projektfluss {
    min-width: 72rem;
    grid-template-columns: repeat(5, minmax(13.5rem, 1fr));
    gap: 0.65rem;
}

.storz-fluss-spalte {
    min-height: 34rem;
    padding: 0;
    background: #f0ede7;
    border-color: var(--grau-200);
    overflow: hidden;
}

.storz-fluss-spaltenkopf {
    min-height: 3.55rem;
    align-items: flex-start;
    margin: 0;
    padding: 0.7rem 0.75rem 0.6rem;
    border-bottom: 1px solid var(--grau-200);
    background: rgba(255, 255, 255, 0.52);
}

.storz-fluss-spaltenkopf div {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.storz-fluss-spaltenkopf strong {
    font-size: 0.82rem;
    font-weight: 800;
}

.storz-fluss-spaltenkopf span {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--grau-600);
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storz-fluss-spaltenkopf em {
    min-width: 1.55rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    padding: 0 0.42rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--grau-600);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 850;
}

.storz-fluss-karten {
    gap: 0.5rem;
    padding: 0.55rem;
}

.storz-fluss-karten .board-karte {
    border-radius: var(--radius-s);
    background: var(--grau-0);
    box-shadow: var(--schatten-xs);
}

.storz-fluss-karten .board-karte {
    position: relative;
    overflow: hidden;
    border-left-width: 0;
    cursor: grab;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.storz-fluss-karten .board-karte:hover {
    border-color: #cfc6ba;
    box-shadow: 0 10px 24px rgba(29, 29, 27, 0.09);
    transform: translateY(-1px);
}

.storz-fluss-karten .board-karte::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--grau-300);
}

.storz-fluss-karten .board-karte.karte-status-ueberfaellig::before {
    background: var(--fehler);
}

.storz-fluss-karten .board-karte.karte-status-material::before {
    background: var(--kupfer-stark);
}

.storz-fluss-karten .board-karte.karte-status-termin::before {
    background: var(--info-text);
}

.storz-fluss-karten .board-karte-koerper {
    gap: 0.5rem;
    padding: 0.7rem 0.7rem 0.55rem;
}

.storz-fluss-karten .board-karte-titel {
    display: block;
    color: var(--grau-900);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storz-fluss-karten .board-karte-unterzeile {
    margin-top: -0.28rem;
    font-size: 0.75rem;
}

.storz-fluss-karten .board-status {
    width: 100%;
    min-height: 1.65rem;
    justify-content: space-between;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius-s) - 2px);
    font-size: 0.75rem;
    font-weight: 800;
}

.storz-fluss-karten .board-status--ruhig {
    border: 1px solid var(--grau-200);
    background: var(--grau-50);
}

.storz-fluss-karten .board-status.status-normal {
    color: var(--grau-600);
}

.board-karte-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.board-karte-meta {
    min-width: 0;
    display: grid;
    gap: 0.05rem;
    padding: 0.4rem 0.45rem;
    border: 1px solid #ebe7df;
    border-radius: calc(var(--radius-s) - 2px);
    background: #fbfaf8;
}

.board-karte-meta span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 750;
}

.board-karte-meta strong {
    color: var(--grau-900);
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storz-fluss-karten .board-karte-frist {
    margin-top: -0.1rem;
    font-size: 0.75rem;
}

.storz-fluss-karten .board-karte-fuss {
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.5rem 0.7rem 0.6rem;
    border-top: 1px solid #eee9e2;
}

.storz-fluss-karten .board-karte-fuss-chip,
.storz-fluss-karten .board-karte-aufgaben,
.storz-fluss-karten .wiedervorlage-chip,
.storz-fluss-karten .board-karte-glocke {
    min-height: 1.4rem;
    padding: 0.08rem 0.42rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: #fbfaf8;
    font-size: 0.75rem;
    font-weight: 800;
}

.storz-fluss-karten .board-avatar {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--grau-900);
    font-size: 0.75rem;
}

.storz-fluss-karten .board-karte-phase {
    padding: 0 0.7rem 0.7rem;
}

.storz-fluss-karten .board-phase-wahl {
    min-height: 1.9rem;
    padding: 0.28rem 0.45rem;
    border-radius: calc(var(--radius-s) - 2px);
    font-size: 0.75rem;
}

.storz-drawer {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    border-left: 1px solid var(--grau-200);
    background: var(--grau-0);
    box-shadow: -12px 0 32px rgba(29, 29, 27, 0.08);
}

.storz-drawer-head {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid var(--grau-200);
}

.storz-drawer-head h3 {
    margin: 0;
    color: var(--grau-900);
    font-size: 1.12rem;
}

.storz-drawer-head p:last-child {
    margin: 0;
    color: var(--grau-600);
    font-size: 0.8rem;
}

.storz-drawer-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 2.65rem;
    border-bottom: 1px solid var(--grau-200);
    background: var(--grau-50);
}

.storz-drawer-tabs button {
    border: 0;
    border-right: 1px solid var(--grau-200);
    background: transparent;
    color: var(--grau-600);
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

.storz-drawer-tabs button:last-child {
    border-right: 0;
}

.storz-drawer-tabs .aktiv {
    position: relative;
    color: var(--grau-900);
    background: var(--grau-0);
}

.storz-drawer-tabs .aktiv::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--kupfer);
}

.storz-drawer-body {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 0.9rem 1rem 1.15rem;
}

.storz-drawer-section {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
}

.storz-drawer-section--next {
    border-color: var(--kupfer-rand);
    background: linear-gradient(180deg, var(--kupfer-hell), var(--grau-0));
}

.storz-drawer-section--warn {
    border-color: var(--warn-rand);
    background: linear-gradient(180deg, var(--warn-hg), var(--grau-0));
}

.storz-drawer-section h4 {
    margin: 0;
    color: var(--grau-900);
    font-size: 0.86rem;
}

.storz-warnzeile {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    color: var(--warn-text);
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

/* Privater Bereich „Mein Büro": mockup-nahe Boardfläche, aber getrennt vom gemeinsamen Projektboard. */
.meinbuero-shell {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.meinbuero-kopf {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
}

.meinbuero-kopf h2,
.meinbuero-pane-kopf h3,
.meinbuero-drawer-kopf h3 {
    margin: 0;
    color: var(--grau-900);
}

.meinbuero-kopf h2 {
    font-size: 1.35rem;
    font-weight: 850;
}

.meinbuero-kopf p:not(.meinbuero-label) {
    margin: 0.15rem 0 0;
    color: var(--grau-600);
    font-size: 0.86rem;
}

.meinbuero-label {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.meinbuero-status {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
    color: var(--grau-600);
    font-size: 0.78rem;
}

.meinbuero-status strong {
    color: var(--grau-900);
}

.meinbuero-schutzband {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem 1.25rem;
    border: 1px solid #d7e8dc;
    border-radius: var(--radius-m);
    background: #f6fbf7;
}

.meinbuero-schutzband strong,
.meinbuero-schutzband span {
    display: block;
}

.meinbuero-schutzband strong {
    color: #21633a;
    font-size: 0.86rem;
}

.meinbuero-schutzband span {
    margin-top: 0.12rem;
    color: var(--grau-600);
    font-size: 0.76rem;
}

.meinbuero-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.meinbuero-pills span {
    min-height: 1.55rem;
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border: 1px solid #cfe2d4;
    border-radius: 999px;
    background: var(--grau-0);
    color: #21633a;
    font-size: 0.75rem;
    font-weight: 850;
    white-space: nowrap;
}

.meinbuero-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
}

.meinbuero-tab {
    min-height: 2.05rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-700);
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
}

.meinbuero-tab--aktiv {
    border-color: var(--grau-900);
    background: var(--grau-900);
    color: var(--grau-0);
}

.meinbuero-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    min-height: 34rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    overflow: hidden;
    box-shadow: var(--schatten-s);
}

.meinbuero-board {
    min-width: 0;
    padding: 1rem 1.25rem 1.25rem;
    overflow: auto;
}

.meinbuero-pane {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.meinbuero-pane-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.meinbuero-pane-kopf h3 {
    font-size: 1.05rem;
}

.meinbuero-spalten,
.meinbuero-vergleichgrid {
    display: grid;
    grid-template-columns: minmax(18rem, 1.4fr) minmax(14rem, 1fr) minmax(14rem, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

.meinbuero-kalkgrid {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(17rem, 22rem);
    gap: 0.75rem;
    align-items: start;
}

.meinbuero-karte,
.meinbuero-summe {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    box-shadow: var(--schatten-xs);
}

.meinbuero-karte--gross {
    min-height: 22rem;
}

.meinbuero-karte h4,
.meinbuero-drawer-box h4,
.meinbuero-verlauf h4 {
    margin: 0;
    color: var(--grau-900);
    font-size: 0.9rem;
}

.meinbuero-karte p,
.meinbuero-drawer-box p {
    margin: 0;
    color: var(--grau-600);
    font-size: 0.8rem;
    line-height: 1.45;
}

.meinbuero-karte label,
.meinbuero-summe label {
    display: grid;
    gap: 0.3rem;
    color: var(--grau-600);
    font-size: 0.75rem;
    font-weight: 800;
}

.meinbuero-liste {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--grau-700);
    font-size: 0.78rem;
    line-height: 1.35;
}

.meinbuero-summe {
    align-content: start;
    background: #fbfaf8;
}

.meinbuero-summe span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.meinbuero-summe strong {
    color: var(--grau-900);
    font-size: 1.15rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.meinbuero-summe strong.positiv {
    color: #21633a;
}

.meinbuero-summe strong.negativ,
.meinbuero-verlaufzeile b.negativ {
    color: var(--fehler);
}

.meinbuero-verlauf {
    display: grid;
    gap: 0.55rem;
}

.meinbuero-verlaufzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
}

.meinbuero-verlaufzeile strong,
.meinbuero-verlaufzeile span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meinbuero-verlaufzeile strong {
    color: var(--grau-900);
    font-size: 0.84rem;
}

.meinbuero-verlaufzeile span {
    margin-top: 0.1rem;
    color: var(--grau-600);
    font-size: 0.75rem;
}

.meinbuero-verlaufzeile b {
    color: var(--grau-900);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.meinbuero-projektmini {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #ebe7df;
    border-radius: calc(var(--radius-s) - 2px);
    background: #fbfaf8;
    color: var(--grau-600);
    font-size: 0.76rem;
}

.meinbuero-projektmini strong {
    color: var(--grau-900);
}

.meinbuero-drawer {
    min-width: 0;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 1rem;
    border-left: 1px solid var(--grau-200);
    background: var(--grau-0);
    box-shadow: -12px 0 32px rgba(29, 29, 27, 0.08);
}

.meinbuero-drawer-kopf {
    display: grid;
    gap: 0.3rem;
}

.meinbuero-drawer-kopf h3 {
    font-size: 1.05rem;
}

.meinbuero-statgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.meinbuero-statgrid article {
    display: grid;
    gap: 0.1rem;
    padding: 0.65rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
}

.meinbuero-statgrid span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 800;
}

.meinbuero-statgrid strong {
    color: var(--grau-900);
    font-size: 1rem;
    font-weight: 900;
}

.meinbuero-drawer-box {
    display: grid;
    gap: 0.55rem;
    padding: 0.8rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
}

.meinbuero-drawer-box button {
    width: 100%;
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    color: var(--grau-800);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.meinbuero-hinweis {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: #f6fbf7;
}

.meinbuero-hinweis strong {
    color: #21633a;
    font-size: 0.86rem;
}

.meinbuero-hinweis span {
    color: var(--grau-600);
    font-size: 0.78rem;
}

.meinbuero-nachkalkulation {
    display: grid;
    gap: 0.75rem;
}

@media (max-width: 1180px) {
    .storz-system-kopf {
        grid-template-columns: 1fr;
    }

    .storz-system-aktionen {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .storz-workspace {
        grid-template-columns: 1fr;
    }

    .storz-drawer {
        border-left: 0;
        border-top: 1px solid var(--grau-200);
    }

    .meinbuero-kopf,
    .meinbuero-schutzband,
    .meinbuero-workspace,
    .meinbuero-spalten,
    .meinbuero-vergleichgrid,
    .meinbuero-kalkgrid {
        grid-template-columns: 1fr;
    }

    .meinbuero-status {
        justify-items: start;
    }

    .meinbuero-pills {
        justify-content: flex-start;
    }

    .meinbuero-drawer {
        border-left: 0;
        border-top: 1px solid var(--grau-200);
    }
}

/* Projektliste = klickbare Karten, eine je Baustelle. */
.projekt-liste {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Eine Projekt-Karte ist ein großes, ruhiges Klick-Ziel (ganze Karte klickbar). */
.projekt-karte {
    display: flex;
    align-items: center;
    gap: 0.85rem 1.1rem;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--grau-200);
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.projekt-karte:hover {
    border-color: var(--kupfer-rand);
    box-shadow: 0 2px 10px rgba(15, 36, 47, 0.07);
}

.projekt-karte:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.projekt-karte:active {
    transform: translateY(1px);
}

.projekt-karte-haupt {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    min-width: 0;
}

.projekt-karte-titel {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grau-900);
}

.projekt-karte-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    color: var(--grau-500);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.projekt-karte-angebot {
    color: var(--kupfer-text);
}

/* Der „›"-Pfeil schiebt sich ans rechte Ende der Karte. */
.projekt-karte-pfeil {
    margin-left: auto;
    font-size: 1.4rem;
    color: var(--grau-500);
    line-height: 1;
}

/* --- Projekt-Detail --- */
.projekt-detail-kopf {
    margin-bottom: 0;
}

.projekt-detail-titelzeile {
    display: flex;
    align-items: center;
    gap: 0.7rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.projekt-detail-notiz {
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--grau-50);
    border-left: 3px solid var(--grau-200);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    color: var(--grau-700);
    white-space: pre-wrap;
}

.projekt-detail-datum {
    margin: 0 0 0.5rem;
    color: var(--grau-500);
    font-size: 0.88rem;
}

/* =========================================================================
   „AUF EINEN BLICK"-LEISTE (aufgeräumtes Detail-Layout: ÜBERBLICK ZUERST)
   Vier ruhige Eckdaten-Kacheln (Kunde · Angebot netto · Termin · Team) zwischen der
   Titelzeile und dem Hero – immer sichtbar, kein Klick. Reine Anzeige: die fertigen
   Texte kommen aus ProjektEckdatenAnzeige (kein Rechnen im Markup). Bewusst EIGENE
   Klassen (projekt-blick-*), getrennt von den Board-Filterkacheln (blick-*).
   Ruhig/warm nach dem abgenommenen Mockup; der Geldwert in Marken-Kupfer.
   ========================================================================= */
.projekt-blick-leiste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.projekt-blick-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-s);
    min-width: 0;
}

/* Kopfzeile der Kachel: kleines dezentes Symbol + Titel-Label (ruhig, in Versalien). */
.projekt-blick-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.projekt-blick-symbol {
    flex-shrink: 0;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.75;
}

.projekt-blick-titel {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--grau-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der eigentliche Wert: klar, etwas größer; bricht bei langen Namen sauber um. */
.projekt-blick-wert {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--grau-900);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Fehlt der Wert (kein Angebot/Termin, leeres Team): dezenter, leiser Platzhalter. */
.projekt-blick-wert--leer {
    color: var(--grau-400);
    font-weight: 500;
}

/* „Starke" Kachel = der Geldwert: warme Kupfer-Tönung als Fläche + Kupfer-Kennzahl. */
.projekt-blick-kachel--stark {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
}

.projekt-blick-kachel--stark .projekt-blick-wert {
    color: var(--kupfer-stark);
}

/* HERO „Was jetzt zu tun ist": sitzt zwischen Kopf-Karte und Tab-Leiste und ist das Erste, was beim
   Öffnen ins Auge fällt (Inhaber-Feedback: nicht im Tab versteckt). Klar abgesetzt nach oben und
   unten – darunter folgt die sekundäre Tab-Leiste. */
.projekt-detail-hero {
    margin: 1.25rem 0 1.5rem;
}

/* Die einzelnen Hero-Karten (Phasenfrist, Phasen-Schritte) leicht voneinander absetzen. */
.projekt-detail-hero > .karte-flach + .karte-flach {
    margin-top: 1rem;
}

/* =========================================================================
   PHASENFRIST (Einsatzplan-Stufe S3) – Zeitziel der aktuellen Phase im Detail-Hero.
   Reine Anzeige: Zieltermin/Überfälligkeit/Rest-Werktage kommen fertig aus der Core-Engine
   (über den getesteten Helfer PhasenfristAnzeige); hier nur Optik.
   ========================================================================= */
.projekt-phasenfrist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.phasenfrist-ueberschrift {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.phasenfrist-zeile {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.phasenfrist-symbol {
    flex-shrink: 0;
}

/* Im Plan = ruhig/neutral; kein Ziel = dezent grau; überfällig = ruhig-rot (kein Flächen-Alarm). */
.phasenfrist-zeile--plan {
    color: var(--grau-900);
}

.phasenfrist-zeile--kein-ziel {
    color: var(--grau-500);
    font-weight: 500;
}

.phasenfrist-zeile--ueberfaellig {
    color: var(--fehler);
}

/* Editor-Zeile: Datumsfeld + „Zurück auf Vorgabe" nebeneinander, umbrechend auf schmalen Fenstern. */
.phasenfrist-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.phasenfrist-feld {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.phasenfrist-zuruecksetzen {
    flex-shrink: 0;
}

/* Schmales Zahlenfeld (z.B. Werktage in den Phasen-Zeitvorgaben). */
.eingabe-schmal {
    max-width: 7rem;
}

/* =========================================================================
   Einstellungen → „Aufgaben & Laufzettel" (Aufgaben-Workflow-Paket, Welle 6)
   Vorwarnzeit + Standard-Zuständigkeit je Laufzettel-Schritt. Markenkonform
   (Navy/Kupfer über die Variablen), barrierearm, ruhig. Reine Darstellung.
   ========================================================================= */

/* Ruhiges Info-Band (z.B. „wirkt nur auf künftige Laufzettel, nicht rückwirkend"). */
.hinweis-band {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: var(--info-hg);
    border: 1px solid var(--info-rand);
    border-radius: var(--radius-m);
    color: var(--info-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Kompakte Schritt-Tabelle: schmale Nr.-Spalte, feste Personen-Spalte, Rest = Tätigkeit. */
.lz-standard-tabelle {
    min-width: 34rem;
}

.lz-standard-tabelle .lz-spalte-nr {
    width: 1%;
    white-space: nowrap;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
}

.lz-standard-tabelle .lz-spalte-person {
    width: 17rem;
}

.lz-taetigkeit {
    display: block;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
}

/* Zwischenüberschrift je Laufzettel-Abschnitt (eine Zeile über den Schritten der Gruppe). */
.lz-abschnitt-zeile {
    background: transparent;
}

.lz-standard-tabelle tbody tr.lz-abschnitt-zeile:hover {
    background: transparent; /* die Überschrift ist nicht „hoverbar" wie eine Datenzeile */
}

.lz-abschnitt-titel {
    text-align: left;
    padding: 1rem 0.9rem 0.45rem;
    color: var(--grau-900);
    font-weight: 700;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--kupfer);
    text-transform: none;
    letter-spacing: 0;
}

/* Die Personen-Zelle: Dropdown + „geändert"-Marke + dezente Speicher-Rückmeldung, umbrechend. */
.lz-person-zelle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}

.lz-person-auswahl {
    flex: 1 1 9rem;
    min-width: 8rem;
    max-width: 12rem;
}

/* Dezente „weicht von der Vorlage ab"-Marke (Kupfer-Tönung, AA-sicherer Kupfer-Text). */
.lz-geaendert {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Kleine, ruhige Zeilen-Rückmeldungen (erben Farbe von status-erfolg/status-fehler). */
.lz-gespeichert,
.lz-fehler {
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* =========================================================================
   Laufzettel-Vorlage-Editor (Feature „Laufzettel-Vorlage bearbeitbar")
   Schritte je Abschnitt/Phase: umbenennen, Zuständig, hoch/runter, aktiv,
   löschen; „Schritt hinzufügen" je Abschnitt + „Neuer Abschnitt". Ruhig,
   markenkonform (Navy/Kupfer/Beige über die Variablen), barrierearm.
   ========================================================================= */

.lz-vorlage-editor {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 0.9rem;
}

/* Ein Abschnitt-Block (Überschrift + Schritte + „Schritt hinzufügen"). */
.lz-vorlage-abschnitt {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    overflow: hidden;
}

.lz-vorlage-abschnitt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    background: var(--grau-100);
    border-bottom: 2px solid var(--kupfer);
}

.lz-vorlage-abschnitt-titel {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--grau-900);
}

/* Kleine Phasen-Marke am Abschnitts-Kopf (welche Board-Phase). */
.lz-vorlage-phase {
    flex-shrink: 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    border: 1px solid var(--kupfer-rand);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.lz-vorlage-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Eine Schritt-Zeile: Nr · Felder (Tätigkeit + Zuständig) · Aktionen · Rückmeldung. */
.lz-vorlage-zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem 0.8rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--grau-200);
}

.lz-vorlage-zeile:first-child {
    border-top: none;
}

/* Deaktivierte Schritte ruhig ausgrauen (sie landen nicht in neuen Laufzetteln). */
.lz-vorlage-zeile--inaktiv {
    background: var(--grau-100);
}

.lz-vorlage-zeile--inaktiv .lz-vorlage-taetigkeit {
    color: var(--grau-500);
    text-decoration: line-through;
    text-decoration-color: var(--grau-400);
}

.lz-vorlage-nr {
    flex-shrink: 0;
    width: 1.6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--grau-500);
    font-size: 0.85rem;
}

/* Tätigkeit (dehnt sich) + Zuständig (feste Breite), umbrechend auf schmalen Fenstern. */
.lz-vorlage-felder {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.7rem;
    flex-wrap: wrap;
    flex: 1 1 22rem;
    min-width: 0;
}

.lz-feld--taetigkeit {
    flex: 1 1 16rem;
    min-width: 0;
}

.lz-feld--zustaendig {
    flex: 0 0 auto;
}

.lz-vorlage-taetigkeit {
    width: 100%;
}

.lz-vorlage-zustaendig {
    width: 9.5rem;
    max-width: 100%;
}

/* Aktionen: Hoch/Runter-Pfeile + Deaktivieren/Löschen (Textknöpfe wie die Gliederung). */
.lz-vorlage-aktionen {
    display: flex;
    align-items: center;
    gap: 0.35rem 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.lz-vorlage-inaktiv-marke {
    flex-shrink: 0;
}

/* Erfolg-/Fehler-Rückmeldung rechts, bricht bei Bedarf in eine eigene Zeile um. */
.lz-vorlage-rueckmeldung {
    flex: 1 1 100%;
    font-size: 0.8rem;
    margin: 0;
}

/* „＋ Schritt hinzufügen" je Abschnitt (dezenter Textknopf, unter den Schritten). */
.lz-vorlage-hinzu {
    margin: 0.3rem 0.6rem 0.6rem;
}

/* Inline-Formular „Schritt hinzufügen" / „Neuer Abschnitt": ruhige, abgesetzte Fläche. */
.lz-vorlage-neuform {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem 0.8rem;
    flex-wrap: wrap;
    margin: 0.3rem 0.6rem 0.7rem;
    padding: 0.75rem 0.85rem;
    background: var(--grau-100);
    border: 1px dashed var(--grau-300);
    border-radius: var(--radius-m);
}

.lz-vorlage-neuform .lz-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lz-vorlage-neuform .lz-feld--taetigkeit {
    flex: 1 1 16rem;
}

.lz-vorlage-neuform label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--grau-700);
}

.lz-vorlage-neuform-knoepfe {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lz-vorlage-neuform-fehler {
    flex: 1 1 100%;
    margin: 0.1rem 0 0;
}

/* „Neuer Abschnitt"-Formular ist breiter (mehr Felder) → volle Breite je Feld erlauben. */
.lz-vorlage-neuform--abschnitt {
    margin: 0;
}

.lz-vorlage-neuabschnitt {
    margin-top: 0.4rem;
}

/* Ruhiger Hinweis, wenn die Vorlage (unerwartet) keine Schritte hat. */
.lz-leer-vorlage {
    margin: 0.8rem 0;
    color: var(--grau-500);
    font-style: italic;
}

/* Status + Angebots-Verknüpfung nebeneinander (umbrechend auf schmalen Fenstern). */
.projekt-detail-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 0.75rem;
}

.projekt-detail-felder .feld {
    flex: 1 1 16rem;
    min-width: 0;
}

/* --- Gespeicherte Belege je Projekt (aufklappbar) --- */
.projekt-belege {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.projekt-beleg {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    overflow: hidden;
}

/* Beleg-Kopf = der aufklappbare Trigger (ganze Zeile klickbar). */
.projekt-beleg-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem 0.9rem;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.7rem 0.9rem;
    text-align: left;
    background: var(--grau-50);
    border: none;
    cursor: pointer;
    color: var(--grau-900);
}

.projekt-beleg-kopf:hover {
    background: var(--grau-100);
}

.projekt-beleg-kopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
}

.projekt-beleg-aufklapp {
    flex: none;
    width: 1rem;
    color: var(--grau-500);
}

.projekt-beleg-name {
    font-weight: 600;
    word-break: break-all;
}

.projekt-beleg-meta {
    margin-left: auto;
    color: var(--grau-500);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.projekt-beleg-positionen {
    padding: 0.6rem 0.9rem 0.85rem;
    border-top: 1px solid var(--grau-200);
    background: var(--grau-0);
}

/* --- „An Projekt speichern"-Leiste im Belege-Bereich (Baustein C) --- */
.beleg-projekt-leiste {
    display: flex;
    align-items: center;
    gap: 0.6rem 1.25rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    border-radius: 0.6rem;
}

.beleg-projekt-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.beleg-projekt-titel {
    font-weight: 600;
    color: var(--grau-900);
}

.beleg-projekt-detail {
    color: var(--grau-500);
    font-size: 0.9rem;
}

.beleg-projekt-leiste .btn-primaer {
    margin-left: auto;
}

/* --- Dubletten-Nachfrage (Beleg liegt schon im Projekt) --- */
.dubletten-warnung {
    margin: 0.75rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-radius: 0.6rem;
}

.dubletten-text {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0 0 0.7rem;
    color: var(--warn-text);
    line-height: 1.5;
}

.dubletten-text span:last-child {
    display: inline;
}

.dubletten-symbol {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--warn-text);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

/* --- Projekt-Notiz-Textfeld (Anlege-/Wahl-Dialog) --- */
.projekt-notiz {
    resize: vertical;
    min-height: 3.2rem;
    font-family: inherit;
}

/* --- Lösch-Warnung (Sicherheitsabfrage „Lieferant entfernen") ---
   Bewusst die Fehler-/Gefahr-Tokens (rötlich) statt der warmen Warn-Fläche: die Aktion ist
   endgültig und destruktiv und soll nicht zu übersehen sein. */
.loesch-warnung {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    padding: 0.85rem 1.05rem;
    background: var(--fehler-hg);
    border: 1px solid var(--fehler-rand);
    border-radius: 0.6rem;
    color: var(--fehler-dunkel);
    line-height: 1.5;
}

.loesch-warnung-symbol {
    flex: none;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--fehler);
}

/* =========================================================================
   PROJEKT-DASHBOARD (Säule B – Reiter „Projekte", awork-Anlehnung)
   Übersicht mit Umschalter Liste/Board/Timeline, Phasen-Pillen, Board-Spalten
   und Fortschritts-Karte. Markenkonform, ruhig, barrierearm.
   ========================================================================= */

/* Kopfzeile (aufgeräumt): Titel links, rechts als EINE Gruppe Suche + Ansichts-Umschalter +
   „Neues Projekt". Auf schmalen Fenstern bricht die Aktions-Gruppe sanft um. */
.projekt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.projekt-kopf-titel {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

/* Die zusammengehörige Aktions-Gruppe rechts (Suche · Umschalter · Neues Projekt). */
.projekt-kopf-aktionen {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem 0.75rem;
    flex-wrap: wrap;
}

/* Filterzeile: „Auf einen Blick"-Chips links, „Filter"-Knopf rechts. */
.projekt-filterleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.projekt-filterleiste-chips {
    min-width: 0;
    flex: 1 1 auto;
}

/* „Filter"-Knopf: klappt die Detail-Filter aus/ein (Progressive Disclosure). */
.filter-schalter {
    flex-shrink: 0;
}

.filter-schalter-symbol {
    font-size: 0.9rem;
}

/* Kleine Zahl am „Filter"-Knopf: wie viele Detail-Filter gerade aktiv sind. */
.filter-schalter-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--grau-0);
    background: var(--akzent);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.filter-schalter-pfeil {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Aufgeklappter „Filter"-Knopf: dezent als aktiv markiert. */
.filter-schalter-offen {
    background: var(--grau-100);
    border-color: var(--grau-300);
}

/* Detail-Filter-Bereich (ausgeklappt): Mitarbeiter / Priorität / Termin von–bis + Zurücksetzen. */
.projekt-filterzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
    padding: 0.85rem 0.95rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.filter-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.filter-feld > label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--grau-700);
}

.filter-feld .eingabe {
    min-width: 9.5rem;
}

.filter-reset {
    margin-bottom: 0.05rem;
}

/* Deaktivierter Umschalter-Eintrag (Timeline in B1): sichtbar, aber nicht klickbar. */
.segment-knopf.segment-deaktiviert {
    color: var(--grau-500);
    cursor: not-allowed;
    opacity: 0.75;
}

.segment-bald {
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kupfer-text);
    background: var(--beige);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
}

/* Aktive Ansicht im Projekt-Umschalter: die Marke (Kupfer) markiert dezent den gewählten Reiter –
   Text + Symbol in Marken-Kupfer, dazu ein feiner Kupfer-Ring. Bewusst NUR hier (nicht global an
   .segment-aktiv), damit die Marken-Betonung der aktiven Ansicht vorbehalten bleibt. */
.projekt-ansicht-schalter .segment-aktiv {
    color: var(--kupfer-text);
    box-shadow: var(--schatten-s), inset 0 0 0 1px var(--kupfer-rand);
}

.projekt-ansicht-schalter .segment-aktiv .segment-symbol {
    color: var(--kupfer);
}

/* Suchfeld mit vorangestelltem Lupensymbol. */
.suchfeld {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.suchfeld-symbol {
    position: absolute;
    left: 0.6rem;
    font-size: 0.9rem;
    opacity: 0.6;
    pointer-events: none;
}

.suchfeld-eingabe {
    padding-left: 2rem;
    min-width: 14rem;
}

/* awork-Phase als ruhige, kupfer-getönte Pille (neben der Status-Pille). */
.phase-pille {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--kupfer-text);
    background: var(--beige);
    border: 1px solid var(--kupfer-rand);
}

/* =========================================================================
   PROJEKT-BOARD (aufgeräumt, Mockup vom Inhaber): Kanban mit FÜNF Spalten-
   Gruppen statt zehn Phasen-Spalten, schlanke Karten, natives HTML5-DnD.
   ========================================================================= */
.projekt-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16.5rem, 1fr);
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.6rem;
    align-items: start;
}

/* Aufgeräumtes Board: genau fünf Gruppen-Spalten, gleichmäßig über die Breite.
   Auf schmalen Fenstern fallen sie sanft auf Mindestbreite + horizontalen Scroll. */
.projekt-board--gruppen {
    grid-auto-columns: minmax(13.5rem, 1fr);
    grid-template-columns: repeat(5, minmax(13.5rem, 1fr));
    grid-auto-flow: row;
}

.board-spalte {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.7rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    min-width: 0;
    /* Sanfter Übergang für die Drop-Hervorhebung. */
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Während gezogen wird: alle gültigen Spalten dezent als „ablegbar" markieren. */
.projekt-board.board-zieht .board-spalte:not(.board-spalte-ohne) {
    border-style: dashed;
    border-color: var(--kupfer-rand);
}

/* Die Spalte direkt unter dem Cursor: klar hervorgehoben (Ziel). */
.board-spalte-ziel {
    background: var(--beige);
    border-color: var(--kupfer) !important;
    border-style: solid !important;
    box-shadow: inset 0 0 0 1px var(--kupfer);
}

/* „Ohne Phase"-Sammelspalte: kein Drop-Ziel, optisch zurückhaltend. */
.board-spalte-ohne {
    background: var(--grau-100);
    border-style: dashed;
}

/* Erledigte Spalte „Abgeschlossen": ruhig zurückgenommen – ihre Karten sind gedämpft (opacity),
   damit fertige Vorgänge das Board optisch nicht dominieren. Beim Hovern der Karte kehrt die volle
   Deckkraft zurück (Lesbarkeit auf Zuruf). Drag & Drop bleibt voll funktionsfähig. */
.board-spalte--abgeschlossen {
    background: var(--grau-100);
}

.board-spalte--abgeschlossen .board-karte {
    opacity: 0.62;
    transition: opacity 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.board-spalte--abgeschlossen .board-karte:hover,
.board-spalte--abgeschlossen .board-karte:focus-within {
    opacity: 1;
}

.board-spalte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.15rem;
    border-bottom: 2px solid var(--grau-200);
}

.board-spalte-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--grau-700);
    letter-spacing: 0.01em;
    word-break: break-word;
}

.board-spalte-zahl {
    flex-shrink: 0;
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--grau-700);
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.board-spalte-karten {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    /* Mindesthöhe, damit auch leere Spalten ein bequemes Drop-Ziel bleiben. */
    min-height: 3rem;
}

.board-spalte-leer {
    margin: 0.4rem 0;
    color: var(--grau-500);
    font-size: 0.85rem;
    font-style: italic;
}

/* --- Reiche Board-Karte: ziehbarer Container mit klickbarem Körper + Phasen-Dropdown. --- */
.board-karte {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-left: 3px solid var(--grau-300);
    border-radius: var(--radius-m);
    cursor: grab;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.board-karte:hover {
    border-color: var(--kupfer-rand);
    box-shadow: 0 2px 10px rgba(15, 36, 47, 0.08);
}

.board-karte:active {
    cursor: grabbing;
}

/* Die gerade gezogene Karte: halbtransparent (Foundations/Bauplan: Quelle halbtransparent). */
.board-karte-zieht {
    opacity: 0.45;
    box-shadow: none;
}

/* Klickbarer Karten-Körper (öffnet Detail) – als Button ohne eigene Box-Optik. */
.board-karte-koerper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    width: 100%;
    padding: 0.65rem 0.7rem 0.55rem;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.board-karte-koerper:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
    border-radius: var(--radius-m);
}

.board-karte-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.board-karte-titel {
    font-weight: 700;
    color: var(--grau-900);
    line-height: 1.3;
    word-break: break-word;
}

.board-karte-kunde {
    font-size: 0.86rem;
    color: var(--grau-700);
    word-break: break-word;
}

.board-karte-angebot {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    font-size: 0.82rem;
}

.board-karte-annr {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    color: var(--grau-500);
    word-break: break-all;
}

.board-karte-wert {
    font-weight: 600;
    color: var(--kupfer-text);
    font-variant-numeric: tabular-nums;
}

.board-karte-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    font-size: 0.82rem;
    color: var(--grau-700);
}

.board-karte-termin,
.board-karte-stunden {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Überfälliger Termin: rot hervorgehoben (Bauplan: „rot wenn überfällig"). */
.board-karte-termin.ist-ueberfaellig {
    color: var(--fehler);
    font-weight: 600;
}

/* Fußzeile der Karte: Avatar, Aufgaben, Material-Chip, Priorität. */
.board-karte-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin-top: 0.15rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--grau-100);
}

/* Mitarbeiter-Avatar (Kürzel im Kreis). */
.board-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--grau-0);
    background: var(--akzent);
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.board-avatar-leer {
    color: var(--grau-500);
    background: var(--grau-100);
    border: 1px dashed var(--grau-300);
}

.board-karte-aufgaben {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--grau-700);
    font-variant-numeric: tabular-nums;
}

/* Material-Status-Chip (Farbe je Status). */
.board-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.board-chip-text {
    /* Auf sehr schmalen Karten reicht das Symbol; Text bleibt im Tooltip/aria erhalten. */
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-chip.mat-offen {
    color: var(--grau-500);
    background: var(--grau-100);
    border-color: var(--grau-200);
}

.board-chip.mat-bestellt {
    color: var(--warn-text);
    background: var(--warn-hg);
    border-color: var(--warn-rand);
}

.board-chip.mat-unterwegs {
    color: var(--kupfer-text);
    background: var(--beige);
    border-color: var(--kupfer-rand);
}

.board-chip.mat-da {
    color: #2e6b3e;
    background: #eaf5ec;
    border-color: #bfe0c6;
}

/* Prioritäts-Badge (nur Hoch/Niedrig; Normal bleibt unsichtbar). */
.board-prio {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.board-prio-punkt {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.board-prio.prio-hoch {
    color: var(--fehler);
}

.board-prio.prio-hoch .board-prio-punkt {
    background: var(--fehler);
}

.board-prio.prio-niedrig {
    color: var(--grau-500);
}

.board-prio.prio-niedrig .board-prio-punkt {
    background: var(--grau-400);
}

/* Überfällig-Badge (Kopf der Karte). */
.board-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.08rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: 999px;
    white-space: nowrap;
}

.board-badge-ueberfaellig {
    color: var(--fehler);
    background: var(--fehler-hg);
    border: 1px solid var(--fehler-rand);
}

/* Phasen-Dropdown-Fallback am Fuß der Karte (Phase auch ohne Maus änderbar). */
.board-karte-phase {
    padding: 0 0.7rem 0.6rem;
}

.board-phase-wahl {
    width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    background: var(--grau-50);
}

/* =========================================================================
   „AUF EINEN BLICK" als kompakte Filter-Chips (aufgeräumtes Layout, vom Inhaber
   freigegeben): vier Chips mit kleinem Symbol + Zähler (Überfällig / Diese Woche /
   Material fehlt / In Arbeit) in EINER Zeile neben dem „Filter"-Knopf. Klick =
   Toggle-Filter; aktiver Chip klar markiert. Reine Anzeige – Zähler + Klick-Filter
   teilen sich dieselbe Core-Quelle (ProjektUeberblick).
   ========================================================================= */
.blick-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

/* Ein Chip: Symbol · Titel · Zähler in einer ruhigen Zeile. Ganzer Knopf klickbar. */
.blick-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--grau-700);
    white-space: nowrap;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.blick-chip:hover {
    border-color: var(--grau-300);
    box-shadow: 0 1px 4px rgba(15, 36, 47, 0.07);
}

.blick-chip:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.blick-chip-symbol {
    font-size: 0.9rem;
    line-height: 1;
}

.blick-chip-titel {
    font-weight: 600;
}

/* Zähler als kleine, kräftige Pille rechts im Chip (farbig je Kennzahl). */
.blick-chip-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--grau-700);
    background: var(--grau-100);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* Kleines „✕" am aktiven Chip (Hinweis: nochmal klicken hebt den Filter auf). */
.blick-chip-aus {
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.8;
}

/* --- Farbakzent je Kennzahl: Symbol + Zähler-Pille eingefärbt, Chip selbst ruhig. --- */
.blick-chip.blick-ueberfaellig .blick-chip-symbol {
    color: var(--fehler);
}

.blick-chip.blick-ueberfaellig .blick-chip-zahl {
    color: var(--fehler);
    background: var(--fehler-hg);
}

.blick-chip.blick-diese-woche .blick-chip-symbol {
    color: var(--info-text);
}

.blick-chip.blick-diese-woche .blick-chip-zahl {
    color: var(--info-text);
    background: var(--info-hg);
}

.blick-chip.blick-material .blick-chip-symbol {
    color: var(--kupfer-text);
}

.blick-chip.blick-material .blick-chip-zahl {
    color: var(--warn-text);
    background: var(--warn-hg);
}

.blick-chip.blick-in-arbeit .blick-chip-symbol {
    color: var(--akzent-tief);
}

/* Wiedervorlage fällig: warm/kupfer (die Marken-Highlight-Farbe – „hier ist heute etwas zu tun"). */
.blick-chip.blick-wiedervorlage .blick-chip-symbol {
    color: var(--kupfer-text);
}

.blick-chip.blick-wiedervorlage .blick-chip-zahl {
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
}

/* Aktiver Chip: dezent gefüllt + kräftigerer Rand, damit der aktive Filter klar sichtbar ist. */
.blick-chip.blick-aktiv {
    background: var(--grau-50);
    border-color: var(--grau-400);
    box-shadow: inset 0 0 0 1px var(--grau-300);
}

.blick-chip.blick-ueberfaellig.blick-aktiv {
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
    box-shadow: inset 0 0 0 1px var(--fehler-rand);
    color: var(--fehler);
}

.blick-chip.blick-diese-woche.blick-aktiv {
    background: var(--info-hg);
    border-color: var(--info-rand);
    box-shadow: inset 0 0 0 1px var(--info-rand);
    color: var(--info-text);
}

.blick-chip.blick-material.blick-aktiv {
    background: var(--warn-hg);
    border-color: var(--warn-rand);
    box-shadow: inset 0 0 0 1px var(--warn-rand);
    color: var(--warn-text);
}

.blick-chip.blick-in-arbeit.blick-aktiv {
    background: var(--akzent-hell);
    border-color: var(--akzent-rand);
    box-shadow: inset 0 0 0 1px var(--akzent-rand);
    color: var(--akzent-tief);
}

.blick-chip.blick-wiedervorlage.blick-aktiv {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
    box-shadow: inset 0 0 0 1px var(--kupfer-rand);
    color: var(--kupfer-text);
}

/* Deadline überfällig (Feature #47): rot – die härteste „die Zeit ist um"-Kennzahl (wie „Überfällig",
   aber eigene Achse: gesetzte Deadline statt geplanter Endtermin). */
.blick-chip.blick-deadline .blick-chip-symbol {
    color: var(--fehler);
}

.blick-chip.blick-deadline .blick-chip-zahl {
    color: var(--fehler);
    background: var(--fehler-hg);
}

.blick-chip.blick-deadline.blick-aktiv {
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
    box-shadow: inset 0 0 0 1px var(--fehler-rand);
    color: var(--fehler);
}

/* Am aktiven Chip die Zähler-Pille an die Aktiv-Farbe angleichen (weiße Fläche wirkt sonst fremd). */
.blick-chip.blick-aktiv .blick-chip-zahl {
    background: var(--grau-0);
}

/* =========================================================================
   SCHLANKE BOARD-KARTE (aufgeräumtes Board): nur Bauvorhaben (groß) + EINE
   adaptive Status-Zeile. Linker Farbstreifen spiegelt die Status-Art.
   ========================================================================= */
.board-karte--schlank .board-karte-koerper {
    gap: 0.35rem;
    padding: 0.7rem 0.75rem 0.6rem;
}

/* Optionale, ruhige Unterzeile (Kundenname) unter dem Bauvorhaben – dezent, einzeilig. */
.board-karte-unterzeile {
    font-size: 0.82rem;
    color: var(--grau-500);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dezente Karten-Fußzeile: Termin-Chip · Phasen-Fortschritt · rundes Zuständig-Kürzel. Feine
   Trennlinie nach oben, damit sie sich ruhig vom Status abhebt (überschreibt den Rich-Card-Default). */
.board-karte--schlank .board-karte-fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: 0.1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--grau-100);
}

/* Termin-Chip in der Fußzeile: ruhige graue Pille; überfällig → dezent rot. */
.board-karte-fuss-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--grau-600, #4b5563);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.board-karte-fuss-chip.ist-ueberfaellig {
    color: var(--fehler);
    font-weight: 600;
}

.board-karte-fuss-symbol {
    font-size: 0.75rem;
    line-height: 1;
}

/* --- Wiedervorlage auf der Karte (Feature #46) ---------------------------------------------------
   Ist ein Datum gesetzt, zeigt die Fußzeile einen dezenten 🔔-Chip (dd.MM.). Ist die Wiedervorlage
   fällig, wird er warm/kupfer deutlich hervorgehoben (konsistent mit der „Material fehlt"-Linie).
   Ist KEINE Wiedervorlage gesetzt, steht dort ein unaufdringlicher 🔔-Knopf zum Anlegen. Beide sind
   echte Buttons (klickbar/fokussierbar) und öffnen den Editor. */
.wiedervorlage-chip {
    cursor: pointer;
    font: inherit;
    background: none;
    border: 1px solid transparent;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* Ruhig = wie der Termin-Chip: zurückhaltend, ohne Fläche. */
.wiedervorlage-chip--ruhig {
    color: var(--grau-600, #4b5563);
}

.wiedervorlage-chip--ruhig:hover {
    background: var(--grau-100);
    border-color: var(--grau-200);
    color: var(--grau-700);
}

/* Fällig = warm/kupfer gefüllte Pille, klar sichtbar (die Erinnerung ist heute dran). */
.wiedervorlage-chip--faellig {
    color: var(--kupfer-text);
    background: var(--beige);
    border-color: var(--kupfer-rand);
    font-weight: 700;
}

.wiedervorlage-chip--faellig:hover {
    background: var(--kupfer-hell);
    border-color: var(--kupfer);
}

.wiedervorlage-chip:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* Unaufdringlicher 🔔-Knopf, wenn (noch) keine Wiedervorlage gesetzt ist. Dezent grau, wird beim
   Hover/Fokus warm – lädt zum Setzen ein, ohne die schlanke Karte zu belasten. */
.board-karte-glocke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    flex-shrink: 0;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    color: var(--grau-400);
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    opacity: 0.75;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.board-karte-glocke:hover {
    color: var(--kupfer-text);
    background: var(--beige);
    border-color: var(--kupfer-rand);
    opacity: 1;
}

.board-karte-glocke:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    opacity: 1;
}

/* --- Deadline auf der Karte (Feature #47) --------------------------------------------------------
   Eigener ⏰-Chip in der Fußzeile, deutlich getrennt vom geplanten Termin (📅) und der Wiedervorlage
   (🔔). Noch offen: ruhig-neutral mit Countdown („in N Tagen"). Überfällig: rot + fett – die härteste
   „das ist jetzt drüber"-Warnung. Baut auf der Fuß-Chip-Basis auf, überschreibt nur die Farbe. */
.deadline-chip.deadline-chip--offen {
    color: var(--info-text);
}

.deadline-chip.deadline-chip--ueberfaellig {
    color: var(--fehler);
    font-weight: 700;
}

/* Der Fortschritt-Chip in der Fußzeile ordnet sich zentriert ein (nicht oben ausgerichtet). */
.board-karte--schlank .board-karte-fuss .board-karte-aufgaben {
    align-self: center;
}

/* Wiedervorlage-Chip/-Knopf rücken nach rechts (sammeln sich rechts in der Fußzeile). Folgt zusätzlich
   ein Avatar, übernimmt DER das „nach rechts" (eigenes margin-left:auto weiter unten) und beide stehen
   zusammen rechts – dann bekommt der Chip/Knopf hier KEIN eigenes margin (sonst doppelter Abstand). */
.board-karte--schlank .board-karte-fuss .wiedervorlage-chip,
.board-karte--schlank .board-karte-fuss .board-karte-glocke {
    margin-left: auto;
}

.board-karte--schlank .board-karte-fuss .wiedervorlage-chip:has(~ .board-avatar),
.board-karte--schlank .board-karte-fuss .board-karte-glocke:has(~ .board-avatar) {
    margin-left: 0;
}

/* Der Avatar rückt in der Fußzeile nach rechts (rundes Zuständig-Kürzel). */
.board-karte--schlank .board-karte-fuss .board-avatar {
    margin-left: auto;
}

/* Linker Status-Streifen der ganzen Karte (überschreibt den neutralen Default). */
.board-karte.karte-status-ueberfaellig {
    border-left-color: var(--fehler);
}

.board-karte.karte-status-material {
    border-left-color: var(--kupfer);
}

.board-karte.karte-status-termin {
    border-left-color: var(--info-text);
}

.board-karte.karte-status-normal {
    border-left-color: var(--grau-300);
}

/* Die EINE Status-Zeile. Dringliches (überfällig/Material) als kräftige Badge,
   Ruhiges (Termin/Phase) als dezenter Punkt-Hinweis. */
.board-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    max-width: 100%;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.board-status-marke {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.board-status-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dringend = gefüllte Badge (klar sichtbar). */
.board-status--dringend {
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.board-status.status-ueberfaellig {
    color: var(--fehler);
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
}

.board-status.status-material {
    color: var(--warn-text);
    background: var(--warn-hg);
    border-color: var(--warn-rand);
}

/* Ruhig = farbiger Punkt + Text (kein Flächen-Rauschen). */
.board-status--ruhig .board-status-marke {
    color: inherit;
}

.board-status.status-termin {
    color: var(--info-text);
}

.board-status.status-normal {
    color: var(--grau-500);
    font-weight: 500;
}

/* Dezenter Checklisten-Fortschritt der Karte (z.B. „3/12"). Ruhige graue Pille; bei vollständig
   erledigter Checkliste in markenkonformem Grün/Kupfer hervorgehoben. Hält die Karte schlank. */
.board-karte-aufgaben {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--grau-100);
    color: var(--grau-600, #4b5563);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.board-karte-aufgaben-symbol {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--grau-500);
}

.board-karte-aufgaben--fertig {
    background: var(--erfolg-hg);
    color: var(--kupfer-text);
}

.board-karte-aufgaben--fertig .board-karte-aufgaben-symbol {
    color: var(--kupfer-text);
}

/* Dezente Phasenfrist-Marke der Karte (Einsatzplan-Stufe S3): „Ziel bis <Datum>" bzw. ruhig-rot
   „Phase überfällig". ZUSÄTZLICH zur adaptiven Status-Zeile – bewusst klein/leise, damit die Karte
   schlank bleibt. */
.board-karte-frist {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.board-karte-frist--plan {
    color: var(--grau-500);
}

.board-karte-frist--ueberfaellig {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--fehler-hg);
    color: var(--fehler);
    font-weight: 600;
}

.board-karte-frist-symbol {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1;
}

/* =========================================================================
   AUSLASTUNG / MATERIAL-WARNUNG (Projekt-Board-Bauplan Stufe S4)
   Reine Anzeige: alle Werte kommen fertig aus der Core-Engine (ProjektAuslastung).
   ========================================================================= */

/* Offline-Banner: gemeinsamer Projekt-Ordner konfiguriert, aber nicht erreichbar (Stufe S2).
   Ruhiger, warmer Hinweis statt Fehler-Rot oder leerem Board – das ist ein Netz-/Server-Zustand,
   kein Programmfehler. Bewusst pfad-/PII-frei. */
.board-offline {
    margin: 0 0 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-left: 3px solid var(--kupfer);
    border-radius: var(--radius-m);
}

.board-offline-titel {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--warn-text);
}

.board-offline-text {
    margin: 0 0 0.75rem;
    color: var(--grau-700);
}

/* Einmalige Übernahme bestehender lokaler Projekte in den gemeinsamen Ordner (Stufe S3). Ruhige,
   flache Karte: erklärender Text links, Knopf rechts. Bewusst zurückhaltend (kein Alarm) – es ist
   eine seltene, gefahrlose (idempotente) Komfort-Aktion. */
.board-uebernahme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--grau-100);
    border: 1px solid var(--erfolg-rand);
    border-radius: var(--radius-m);
}

.board-uebernahme-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 46rem;
}

.board-uebernahme-text strong {
    color: var(--grau-900);
}

.board-uebernahme-text span {
    color: var(--grau-700);
    font-size: 0.94rem;
}

/* Dezenter Stand-Hinweis „Stand aktualisiert HH:MM": klein, ruhig, nicht aufdringlich – signalisiert
   nur, dass von einem anderen PC eine Änderung kam (letzter gewinnt, kein hartes Sperren der UI). */
.board-stand {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 0.5rem;
    color: var(--grau-500);
    font-size: 0.9rem;
}

.board-stand-punkt {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--kupfer);
    flex: none;
}

/* Material-„rechtzeitig?"-Banner über dem Board (warm, aber nicht alarmierend rot –
   es ist ein Hinweis zum rechtzeitigen Bestellen, keine Fehlermeldung). */
.material-warnungen {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.95rem;
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-left: 3px solid var(--kupfer);
    border-radius: var(--radius-m);
}

.material-warnungen-titel {
    margin: 0 0 0.35rem;
    font-weight: 700;
    color: var(--warn-text);
}

.material-warnungen-liste {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.material-warnungen-liste li {
    color: var(--grau-700);
}

/* Jede Warnung ist ein Link zum Öffnen des Projekts (Button ohne Button-Optik). */
.material-warnung-link {
    padding: 0;
    background: transparent;
    border: none;
    color: var(--grau-700);
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--kupfer-rand);
    text-underline-offset: 0.15em;
}

.material-warnung-link:hover,
.material-warnung-link:focus-visible {
    color: var(--kupfer-text);
    text-decoration-color: var(--kupfer);
}

/* Kleiner Material-Warn-Hinweis auf der Karte (zwischen Körper-Infos und Fußzeile). */
.board-karte-matwarn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.15rem 0 0;
    padding: 0.12rem 0.45rem;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--warn-text);
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-radius: 999px;
    white-space: nowrap;
}

/* Material-Warn-Hinweis im Detail (Material-Tab). */
.material-warn-detail {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.8rem;
    padding: 0.55rem 0.8rem;
    color: var(--warn-text);
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-left: 3px solid var(--kupfer);
    border-radius: var(--radius-m);
    font-weight: 600;
}

/* --- Auslastungsleiste (jetzt in der Kalender-/Timeline-Ansicht, oberhalb der Zeitachse) --- */
.auslastung-leiste {
    margin-bottom: 1.25rem;
    padding: 0.95rem 1.1rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.auslastung-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.7rem;
}

.auslastung-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--grau-900);
}

.auslastung-unterzeile {
    font-size: 0.84rem;
    color: var(--grau-500);
}

.auslastung-leer {
    margin: 0.2rem 0;
    color: var(--grau-500);
    font-size: 0.86rem;
    font-style: italic;
}

.auslastung-wochen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Eine KW-Zeile: KW-Label | Balken (flexibel) | Stunden | Prozent. Auf schmalen
   Breiten bricht die Zeile um (Balken behält Vorrang). */
.auslastung-zeile {
    display: grid;
    grid-template-columns: 4rem 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
}

.auslastung-kw {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--grau-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Grafischer Balken: graue Spur + farbige Füllung; darüber liegt der Textbalken
   (▓▓▓░) als barrierearmer, auch ohne Farbe lesbarer Wert. */
.auslastung-balken {
    position: relative;
    display: block;
    height: 1.1rem;
    background: var(--grau-100);
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    overflow: hidden;
}

.auslastung-balken-fuellung {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    transition: width 0.2s ease;
}

.auslastung-balken-text {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--grau-700);
    /* Der Textbalken bleibt auch auf farbiger Füllung lesbar (dezenter Schatten). */
    text-shadow: 0 0 2px var(--grau-0);
    white-space: nowrap;
    pointer-events: none;
}

.auslastung-stunden {
    font-size: 0.82rem;
    color: var(--grau-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.auslastung-prozent {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 3rem;
    justify-content: flex-end;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--grau-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.auslastung-prozent.ist-ueber {
    color: var(--fehler);
}

.auslastung-ueber-marke {
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--fehler);
    background: var(--fehler-hg);
    border: 1px solid var(--fehler-rand);
    border-radius: 999px;
}

/* Balken-Füllfarbe je Auslastungs-Stufe (ruhig < hoch < voll < überlastet). */
.auslastung-zeile.auslastung-ok .auslastung-balken-fuellung {
    background: var(--kupfer-rand);
}

.auslastung-zeile.auslastung-hoch .auslastung-balken-fuellung {
    background: var(--kupfer);
}

.auslastung-zeile.auslastung-voll .auslastung-balken-fuellung {
    background: var(--kupfer-stark);
}

.auslastung-zeile.auslastung-ueber .auslastung-balken {
    border-color: var(--fehler-rand);
}

.auslastung-zeile.auslastung-ueber .auslastung-balken-fuellung {
    background: var(--fehler);
}

.auslastung-mehr {
    margin: 0.5rem 0 0;
    color: var(--grau-500);
    font-size: 0.82rem;
    font-style: italic;
}

.auslastung-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--grau-200);
    font-size: 0.86rem;
}

.auslastung-offen {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--grau-700);
    font-weight: 600;
}

.auslastung-frei {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--kupfer-text);
    font-weight: 600;
}

/* Auf schmalen Fenstern: KW-Zeile umbrechen, Balken volle Breite. */
@media (max-width: 640px) {
    .auslastung-zeile {
        grid-template-columns: 4rem 1fr;
        grid-template-areas:
            "kw balken"
            "stunden prozent";
        row-gap: 0.25rem;
    }

    .auslastung-kw {
        grid-area: kw;
    }

    .auslastung-balken {
        grid-area: balken;
    }

    .auslastung-stunden {
        grid-area: stunden;
    }

    .auslastung-prozent {
        grid-area: prozent;
        justify-content: flex-start;
    }
}

/* --- Detail: verknüpftes Angebot + Zwei-Spalten für Aufgaben/Termine --- */
.projekt-detail-angebot {
    margin: 0 0 0.5rem;
    color: var(--grau-700);
}

.projekt-detail-zwei-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.25rem;
}

/* =========================================================================
   PROJEKT-DETAIL: TAB-ANSICHT (Bauplan S3)
   Baut auf den bestehenden Bausteinen auf (karte-flach, status-pille, tab-leiste,
   datentabelle) und ergänzt nur das Tab-Spezifische.
   ========================================================================= */

.projekt-detail-arbeitsbereich {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1080px) {
    .projekt-detail-arbeitsbereich {
        grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
        gap: 1rem 1.1rem;
    }

    .projekt-detail-arbeitsbereich > .projekt-detail-karte {
        grid-column: 1;
        grid-row: 1;
    }

    .projekt-detail-arbeitsbereich > .projekt-status-leiste {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-bottom: 0;
        align-self: stretch;
    }

    .projekt-detail-arbeitsbereich > .projekt-blick-leiste {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    .projekt-detail-arbeitsbereich > .projekt-detail-hero,
    .projekt-detail-arbeitsbereich > .tab-leiste,
    .projekt-detail-arbeitsbereich > .tab-inhalt {
        grid-column: 1 / -1;
    }

    .projekt-detail-hero {
        display: grid;
        grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr) minmax(18rem, 0.9fr);
        gap: 1rem;
        align-items: stretch;
    }

    .projekt-detail-hero > .karte-flach + .karte-flach,
    .projekt-detail-hero > * + * {
        margin-top: 0;
    }
}

/* Jede Tab-Karte ist eine ruhige, flache Karte mit etwas Abstand untereinander. */
.projekt-tab-karte + .projekt-tab-karte {
    margin-top: 1.1rem;
}

/* Gebündelte Reiter (Überblick · Unterlagen · Verlauf) stapeln mehrere bestehende Tab-Karten
   untereinander. Jede eingebettete Komponente bringt ihre eigene Abschnitts-Überschrift mit; der
   Wrapper sorgt nur für den ruhigen Abstand zwischen den Abschnitten (gleicher Rhythmus wie zwei
   einzelne Tab-Karten). Reine Optik – keine Doppel-Überschrift. */
.projekt-gruppe + .projekt-gruppe {
    margin-top: 1.1rem;
}

.projekt-fokus-panel {
    padding: 1rem;
}

.projekt-fokus-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.projekt-fokus-label {
    margin: 0 0 0.15rem;
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.projekt-fokus-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-700);
    font-size: 0.76rem;
    font-weight: 800;
}

.projekt-fokus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.projekt-fokus-kachel {
    min-width: 0;
    min-height: 5.35rem;
    padding: 0.75rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
}

.projekt-fokus-kachel--breit {
    grid-column: span 2;
}

.projekt-fokus-kachel span {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.projekt-fokus-kachel strong {
    display: block;
    color: var(--grau-900);
    font-size: 0.96rem;
    line-height: 1.22;
    word-break: break-word;
}

.projekt-fokus-kachel small {
    display: block;
    margin-top: 0.32rem;
    color: var(--grau-600);
    font-size: 0.8rem;
    line-height: 1.35;
}

.projekt-fokus-notiz {
    margin: 0.85rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--grau-200);
    color: var(--grau-700);
}

.projekt-pflege-details {
    border-top: 1px solid var(--grau-200);
    padding-top: 0.65rem;
}

.projekt-pflege-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    color: var(--grau-900);
    cursor: pointer;
    list-style: none;
}

.projekt-pflege-details > summary::-webkit-details-marker {
    display: none;
}

.projekt-pflege-details > summary span {
    font-weight: 850;
}

.projekt-pflege-details > summary small {
    color: var(--grau-500);
    font-size: 0.78rem;
    text-align: right;
}

.projekt-pflege-details > summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-600);
    font-weight: 900;
}

.projekt-pflege-details[open] > summary {
    margin-bottom: 1rem;
    border-color: var(--kupfer-rand);
}

.projekt-pflege-details[open] > summary::after {
    content: "-";
}

.projekt-pflege-details-inhalt {
    min-width: 0;
}

@media (max-width: 900px) {
    .projekt-fokus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .projekt-fokus-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .projekt-fokus-kachel--breit {
        grid-column: auto;
    }

    .projekt-fokus-kopf,
    .projekt-pflege-details > summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .projekt-pflege-details > summary small {
        text-align: left;
    }
}

/* =========================================================================
   PROJEKTAKTE V5: Arbeitsboard statt Formularwand
   Links Entscheidung/Uebergabe, Mitte Phasenboard, rechts Karten-Inspector.
   Die Pflegebereiche bleiben darunter erhalten und sind nicht mehr der erste
   Eindruck beim Oeffnen eines Projekts.
   ========================================================================= */

.projektakte-v5 {
    display: grid;
    gap: 1rem;
}

.projektakte-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: start;
}

.projektakte-kopf .projekt-detail-titelzeile,
.projektakte-kopf .projekt-detail-datum {
    grid-column: 1;
}

.projektakte-kopf .projekt-detail-aktionen {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
}

.projektakte-haupt {
    display: grid;
    grid-template-columns: minmax(15rem, 18rem) minmax(30rem, 1fr) minmax(19rem, 24rem);
    gap: 0.9rem;
    align-items: stretch;
}

.projektakte-links,
.projektakte-rechts {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

.projektakte-label {
    margin: 0 0 0.18rem;
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.projektakte-antwort,
.projektakte-panel,
.projektakte-board,
.projektakte-inspektor,
.projektakte-automatik,
.projektakte-freigabe,
.projektakte-kommunikation,
.projektakte-ausklappung,
.projektakte-pflege {
    border: 1px solid var(--grau-200);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.projektakte-antwort {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem;
    border-color: var(--kupfer-rand);
    background: linear-gradient(180deg, var(--kupfer-hell), #ffffff);
}

.projektakte-antwort h2,
.projektakte-inspektor h2 {
    margin: 0;
    color: var(--grau-900);
    font-size: 1.15rem;
    line-height: 1.18;
    font-weight: 900;
}

.projektakte-antwort p,
.projektakte-inspektor p,
.projektakte-automatik p,
.projektakte-panel p {
    margin: 0;
    color: var(--grau-600);
    font-size: 0.9rem;
    line-height: 1.4;
}

.projektakte-antwort--blockiert {
    border-color: #e7b8b8;
    background: linear-gradient(180deg, #fff0f0, #ffffff);
}

.projektakte-antwort--warnung {
    border-color: #ead18e;
    background: linear-gradient(180deg, #fff8df, #ffffff);
}

.projektakte-antwort--ok {
    border-color: var(--erfolg-rand);
    background: linear-gradient(180deg, #edf9f0, #ffffff);
}

.projektakte-panel {
    padding: 0.85rem;
}

.projektakte-statuspanel {
    display: grid;
    gap: 0.72rem;
}

.projektakte-panel h3,
.projektakte-automatik h3,
.projektakte-kommunikation h3 {
    margin: 0 0 0.6rem;
    color: var(--grau-900);
    font-size: 0.95rem;
    font-weight: 900;
}

.projektakte-statuschips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.1rem, 1fr));
    gap: 0.35rem;
}

.projektakte-statuschip {
    min-width: 0;
    display: grid;
    gap: 0.04rem;
    min-height: 3.1rem;
    padding: 0.45rem 0.35rem;
    border: 1px solid var(--grau-200);
    border-left: 3px solid var(--grau-300);
    border-radius: 7px;
    background: var(--grau-50);
}

.projektakte-statuschip strong,
.projektakte-statuschip small {
    min-width: 0;
    display: block;
}

.projektakte-statuschip strong {
    color: var(--grau-900);
    font-size: 1rem;
    line-height: 1;
    font-weight: 950;
}

.projektakte-statuschip small {
    color: var(--grau-500);
    font-size: 0.75rem;
    line-height: 1.15;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projektakte-statuschip--offen {
    border-left-color: var(--grau-600);
}

.projektakte-statuschip--aktiv {
    border-left-color: #2563eb;
    background: #f4f8ff;
}

.projektakte-statuschip--wartet {
    border-left-color: #b7791f;
    background: #fffaf0;
}

.projektakte-statuschip--kritisch {
    border-left-color: #b91c1c;
    background: #fff5f5;
}

.projektakte-statuschip--ok {
    border-left-color: var(--erfolg);
    background: #f1fbf4;
}

.projektakte-zustaendige {
    display: grid;
    gap: 0.42rem;
}

.projektakte-zustaendig {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.04rem 0.55rem;
    align-items: center;
    padding: 0.55rem;
    border: 1px solid var(--grau-150);
    border-left: 3px solid var(--grau-300);
    border-radius: 7px;
    background: #ffffff;
}

.projektakte-zustaendig > span {
    grid-row: 1 / span 2;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-700);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.projektakte-zustaendig strong,
.projektakte-zustaendig small {
    min-width: 0;
    display: block;
}

.projektakte-zustaendig strong {
    color: var(--grau-900);
    font-size: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projektakte-zustaendig small {
    color: var(--grau-500);
    font-size: 0.75rem;
    line-height: 1.25;
}

.projektakte-zustaendig--aktiv {
    border-left-color: #2563eb;
}

.projektakte-zustaendig--wartet {
    border-left-color: #b7791f;
    background: #fffdf6;
}

.projektakte-zustaendig--kritisch {
    border-left-color: #b91c1c;
    background: #fff8f8;
}

.projektakte-letzte-aenderung {
    display: grid;
    gap: 0.12rem;
    padding: 0.58rem;
    border: 1px solid var(--grau-150);
    border-radius: 7px;
    background: var(--grau-50);
}

.projektakte-letzte-aenderung span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.projektakte-letzte-aenderung strong,
.projektakte-letzte-aenderung small,
.projektakte-letzte-aenderung em {
    min-width: 0;
}

.projektakte-letzte-aenderung strong {
    color: var(--grau-900);
    font-size: 0.82rem;
    line-height: 1.2;
}

.projektakte-letzte-aenderung small {
    color: var(--grau-600);
    font-size: 0.75rem;
    line-height: 1.3;
}

.projektakte-letzte-aenderung em {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 800;
}

.projektakte-signale {
    display: grid;
    gap: 0.45rem;
    list-style: none;
    margin: 0.65rem 0 0;
    padding: 0;
}

.projektakte-signal {
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
    min-height: 2.35rem;
}

.projektakte-signal-symbol {
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: #ffffff;
    color: var(--grau-700);
    font-size: 0.75rem;
    font-weight: 900;
}

.projektakte-signal strong,
.projektakte-signal small {
    display: block;
    min-width: 0;
}

.projektakte-signal strong {
    color: var(--grau-900);
    font-size: 0.83rem;
    line-height: 1.18;
}

.projektakte-signal small {
    color: var(--grau-500);
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projektakte-signal--kritisch .projektakte-signal-symbol {
    border-color: #e7b8b8;
    background: #fff0f0;
    color: #9a2c2c;
}

.projektakte-signal--warnung .projektakte-signal-symbol {
    border-color: #ead18e;
    background: #fff8df;
    color: #7a5c12;
}

.projektakte-signal--ok .projektakte-signal-symbol {
    border-color: var(--erfolg-rand);
    background: #edf9f0;
    color: var(--erfolg);
}

.projektakte-uebergabe {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.projektakte-uebergabe-zeile {
    display: grid;
    grid-template-columns: 4.3rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.55rem;
    border: 1px solid var(--grau-150);
    border-radius: 7px;
    background: var(--grau-50);
}

.projektakte-uebergabe-zeile span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.projektakte-uebergabe-zeile strong {
    min-width: 0;
    color: var(--grau-800);
    font-size: 0.8rem;
    line-height: 1.3;
    word-break: break-word;
}

.projektakte-board {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
}

.projektakte-board-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid var(--grau-200);
}

.projektakte-board-kopf h2 {
    margin: 0;
    color: var(--grau-900);
    font-size: 1.05rem;
    font-weight: 900;
}

.projektakte-board-metriken {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.projektakte-board-metriken span {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-600);
    font-size: 0.76rem;
    font-weight: 800;
}

.projektakte-board-hinweis,
.projektakte-aktionshinweis {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--grau-150);
    background: #f7fbff;
    color: var(--grau-700);
    font-size: 0.78rem;
    font-weight: 800;
}

.projektakte-spalten {
    min-height: 27rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12.5rem, 1fr);
    gap: 0.65rem;
    overflow: auto;
    padding: 0.85rem;
    background: #f8fafb;
}

.projektakte-spalte {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.5rem;
}

.projektakte-spalte-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    min-height: 2rem;
}

.projektakte-spalte-kopf h3 {
    min-width: 0;
    margin: 0;
    color: var(--grau-800);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projektakte-spalte-kopf span {
    width: 1.55rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: #ffffff;
    color: var(--grau-600);
    font-size: 0.75rem;
    font-weight: 900;
}

.projektakte-spalte.ist-aktuell .projektakte-spalte-kopf h3 {
    color: var(--kupfer-text);
}

.projektakte-spalte.ist-dropziel .projektakte-karten {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 8px;
}

.projektakte-karten {
    display: grid;
    align-content: start;
    gap: 0.5rem;
}

.projektakte-arbeitskarte {
    width: 100%;
    display: grid;
    gap: 0.42rem;
    padding: 0.7rem;
    border: 1px solid var(--grau-200);
    border-radius: 8px;
    background: #ffffff;
    color: var(--grau-900);
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.projektakte-arbeitskarte:hover,
.projektakte-arbeitskarte.ist-aktiv {
    border-color: var(--grau-900);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.projektakte-arbeitskarte[draggable="true"] {
    cursor: grab;
}

.projektakte-arbeitskarte.wird-gezogen {
    opacity: 0.56;
}

.projektakte-arbeitskarte:disabled {
    cursor: progress;
}

.projektakte-arbeitskarte strong,
.projektakte-arbeitskarte span {
    min-width: 0;
}

.projektakte-arbeitskarte strong {
    font-size: 0.84rem;
    line-height: 1.25;
}

.projektakte-arbeitskarte > span:not(.projektakte-card-meta) {
    color: var(--grau-600);
    font-size: 0.78rem;
    line-height: 1.3;
}

.projektakte-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.projektakte-card-meta small {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-600);
    font-size: 0.75rem;
    font-weight: 850;
}

.projektakte-status-blockiert {
    border-color: #e7b8b8;
    background: #fffafa;
}

.projektakte-status-wartet {
    border-color: #ead18e;
    background: #fffdf5;
}

.projektakte-status-aktiv {
    border-color: #c9dceb;
    background: #f5fbff;
}

.projektakte-status-erledigt {
    opacity: 0.72;
}

.projektakte-leer {
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--grau-200);
    border-radius: 8px;
    color: var(--grau-500);
    font-size: 0.78rem;
}

.projektakte-inspektor,
.projektakte-automatik,
.projektakte-freigabe {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
}

.projektakte-freigabe {
    border-color: #ead18e;
    background: linear-gradient(180deg, #fffdf6, #ffffff);
}

.projektakte-freigabe.ist-ok {
    border-color: var(--erfolg-rand);
    background: linear-gradient(180deg, #f1fbf4, #ffffff);
}

.projektakte-freigabe.ist-blockiert {
    border-color: #e7b8b8;
}

.projektakte-freigabe h3 {
    margin: 0;
    color: var(--grau-900);
    font-size: 0.95rem;
    font-weight: 900;
}

.projektakte-freigabe p {
    margin: 0;
    color: var(--grau-600);
    font-size: 0.82rem;
    line-height: 1.35;
}

.projektakte-gates {
    display: grid;
    gap: 0.42rem;
}

.projektakte-freigabe-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.projektakte-gate {
    min-width: 0;
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 0.08rem 0.48rem;
    align-items: center;
    padding: 0.54rem;
    border: 1px solid var(--grau-150);
    border-left: 3px solid var(--grau-300);
    border-radius: 7px;
    background: #ffffff;
}

.projektakte-gate > span {
    grid-row: 1 / span 2;
    width: 1.42rem;
    height: 1.42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-700);
    font-size: 0.75rem;
    font-weight: 950;
}

.projektakte-gate strong,
.projektakte-gate small {
    min-width: 0;
    display: block;
}

.projektakte-gate strong {
    color: var(--grau-900);
    font-size: 0.78rem;
    line-height: 1.18;
}

.projektakte-gate small {
    color: var(--grau-500);
    font-size: 0.75rem;
    line-height: 1.25;
}

.projektakte-gate--ok {
    border-left-color: var(--erfolg);
}

.projektakte-gate--kritisch {
    border-left-color: #b91c1c;
    background: #fff8f8;
}

.projektakte-gate--wartet {
    border-left-color: #b7791f;
    background: #fffdf6;
}

.projektakte-kommunikation {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
}

.projektakte-anrufablauf {
    border-color: #c9dceb;
    background: linear-gradient(180deg, #f7fbff, #ffffff);
}

.projektakte-kommunikation-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.projektakte-kommunikation-kopf h3 {
    margin-bottom: 0;
}

.projektakte-kommunikation-hinweis {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.78rem;
    line-height: 1.35;
}

.projektakte-anrufablauf-raster {
    display: grid;
    grid-template-columns: minmax(13rem, 0.7fr) minmax(16rem, 0.95fr) minmax(18rem, 1.1fr);
    gap: 0.65rem;
    align-items: start;
}

.projektakte-anrufablauf-schritte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.projektakte-anrufablauf-schritte div {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
    min-height: 5.2rem;
    padding: 0.6rem;
    border: 1px solid var(--grau-150);
    border-radius: 7px;
    background: #ffffff;
}

.projektakte-anrufablauf-schritte span {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 950;
}

.projektakte-anrufablauf-schritte strong {
    min-width: 0;
    color: var(--grau-900);
    font-size: 0.8rem;
    line-height: 1.15;
}

.projektakte-anrufablauf-schritte small {
    min-width: 0;
    color: var(--grau-500);
    font-size: 0.75rem;
    line-height: 1.25;
}

.projektakte-anrufablauf-kontakte {
    display: grid;
    gap: 0.48rem;
}

.projektakte-anrufablauf-timeline {
    padding-top: 0;
    border-top: 0;
}

.projektakte-kontakte {
    display: grid;
    gap: 0.48rem;
}

.projektakte-kontakte + .projektakte-timeline {
    margin-top: 0.2rem;
}

.projektakte-kontakt {
    display: grid;
    gap: 0.16rem;
    padding: 0.58rem;
    border: 1px solid var(--grau-150);
    border-left: 3px solid var(--grau-300);
    border-radius: 7px;
    background: #ffffff;
}

.projektakte-kontakt span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 850;
}

.projektakte-kontakt strong {
    color: var(--grau-900);
    font-size: 0.82rem;
    line-height: 1.2;
}

.projektakte-kontakt p {
    margin: 0;
    color: var(--grau-600);
    font-size: 0.75rem;
    line-height: 1.32;
}

.projektakte-kontakt--ok {
    border-left-color: var(--erfolg);
    background: #fbfffc;
}

.projektakte-kontakt--aktiv {
    border-left-color: #2563eb;
    background: #f7fbff;
}

.projektakte-kontakt--warnung {
    border-left-color: #b7791f;
    background: #fffaf0;
}

.projektakte-timeline {
    display: grid;
    gap: 0.42rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--grau-150);
}

.projektakte-timeline-eintrag {
    position: relative;
    display: grid;
    gap: 0.12rem;
    padding: 0.5rem 0.55rem 0.5rem 0.75rem;
    border: 1px solid var(--grau-150);
    border-radius: 7px;
    background: #ffffff;
}

.projektakte-timeline-eintrag::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 3px;
    border-radius: 999px;
    background: var(--grau-300);
}

.projektakte-timeline-eintrag > span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 850;
}

.projektakte-timeline-eintrag strong {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--grau-900);
    font-size: 0.8rem;
    line-height: 1.2;
}

.projektakte-timeline-eintrag strong small {
    min-height: 1.05rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.36rem;
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 900;
}

.projektakte-timeline-eintrag p {
    margin: 0;
    color: var(--grau-600);
    font-size: 0.75rem;
    line-height: 1.3;
}

.projektakte-timeline-eintrag--ok::before {
    background: var(--erfolg);
}

.projektakte-timeline-eintrag--aktiv::before,
.projektakte-timeline-eintrag--prozess::before {
    background: #2563eb;
}

.projektakte-timeline-eintrag--warnung::before,
.projektakte-timeline-eintrag--material::before {
    background: #b7791f;
}

.projektakte-uaf {
    display: grid;
    gap: 0.45rem;
}

.projektakte-uaf div {
    display: grid;
    grid-template-columns: 6.7rem minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.55rem;
    border: 1px solid var(--grau-150);
    border-radius: 7px;
    background: var(--grau-50);
}

.projektakte-uaf span {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.projektakte-uaf strong {
    min-width: 0;
    color: var(--grau-800);
    font-size: 0.8rem;
    line-height: 1.3;
}

.projektakte-inspektor-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.projektakte-rechts .projekt-status-leiste {
    margin-bottom: 0;
}

.projektakte-ausklappung {
    padding: 0;
}

.projektakte-ausklappung > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.75rem 0.95rem;
    cursor: pointer;
    list-style: none;
}

.projektakte-ausklappung > summary::-webkit-details-marker {
    display: none;
}

.projektakte-ausklappung > summary span {
    color: var(--grau-900);
    font-size: 0.9rem;
    font-weight: 900;
}

.projektakte-ausklappung > summary small {
    color: var(--grau-500);
    font-size: 0.78rem;
}

.projektakte-ausklappung > summary::after {
    content: "+";
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-700);
    font-weight: 900;
}

.projektakte-ausklappung[open] > summary {
    border-bottom: 1px solid var(--grau-200);
}

.projektakte-ausklappung[open] > summary::after {
    content: "-";
}

.projektakte-detail-werkzeuge {
    display: grid;
    grid-template-columns: minmax(17rem, 0.8fr) minmax(24rem, 1.2fr) minmax(17rem, 0.8fr);
    gap: 0.85rem;
    padding: 0.9rem;
    background: var(--grau-50);
}

.projektakte-eckdaten-inhalt {
    padding: 0.85rem;
    background: var(--grau-50);
}

.projektakte-detail-werkzeuge > .karte-flach + .karte-flach,
.projektakte-detail-werkzeuge > * + * {
    margin-top: 0;
}

.projektakte-pflege {
    padding: 0.85rem;
}

.projektakte-pflege-details .projektakte-pflege {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.projektakte-pflege .tab-leiste {
    margin-top: 0;
}

@media (max-width: 1320px) {
    .projektakte-haupt {
        grid-template-columns: minmax(14rem, 17rem) minmax(28rem, 1fr);
    }

    .projektakte-rechts {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .projektakte-anrufablauf-raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .projektakte-anrufablauf-schritte {
        grid-column: 1 / -1;
    }
}

@media (max-width: 920px) {
    .projektakte-kopf,
    .projektakte-haupt,
    .projektakte-rechts,
    .projektakte-detail-werkzeuge,
    .projektakte-anrufablauf-raster,
    .projektakte-anrufablauf-schritte {
        grid-template-columns: minmax(0, 1fr);
    }

    .projektakte-kopf .projekt-detail-aktionen {
        grid-column: 1;
        grid-row: auto;
    }

    .projektakte-spalten {
        min-height: 22rem;
        grid-auto-columns: minmax(14rem, 82vw);
    }
}

@media (max-width: 620px) {
    .projektakte-board-kopf,
    .projektakte-kommunikation-kopf,
    .projektakte-ausklappung > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .projektakte-uaf div,
    .projektakte-uebergabe-zeile {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Read-only Beschreibungsliste (Kundendaten, Angebot, Rechnung): Label links, Wert rechts. */
.projekt-datenliste {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0.4rem 0 0;
}

.projekt-datenzeile {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--grau-100);
}

.projekt-datenzeile:last-child {
    border-bottom: none;
}

.projekt-datenzeile dt {
    flex: 0 0 11rem;
    color: var(--grau-500);
    font-size: 0.92rem;
}

.projekt-datenzeile dd {
    margin: 0;
    color: var(--grau-900);
    min-width: 0;
    word-break: break-word;
}

.projekt-datenzeile-betrag {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Bearbeitbare Kopfdaten (Projektinformationen): zweispaltiges Feld-Gitter. */
.projekt-info-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 0.5rem;
}

.projekt-info-bezeichnung {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--grau-900);
}

/* =========================================================================
   Team / Einsatz (Projektinformationen, Einsatzplan S1)
   Eigene Achse neben dem zuständigen Mitarbeiter (Lead). Ruhige Chip-Liste
   (Avatar + Name + Rolle, je mit Entfernen-Knopf) plus ein Hinzufügen-Dropdown.
   ========================================================================= */
.team-block {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--grau-200);
}

.team-titel {
    margin: 0 0 0.2rem;
}

.team-hinweis {
    margin: 0 0 0.8rem;
}

.team-leer {
    margin: 0.2rem 0 0.8rem;
}

.team-liste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.team-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.5rem 0.35rem 0.4rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: 999px;
}

/* Kleinerer Avatar als in der Stammdaten-Tabelle, damit der Chip kompakt bleibt. */
.team-chip-avatar.ma-avatar {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.75rem;
}

.team-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.team-chip-name {
    font-weight: 600;
    color: var(--grau-900);
    font-size: 0.92rem;
}

.team-chip-rolle {
    font-size: 0.78rem;
    color: var(--grau-500);
}

.team-chip-entfernen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.1rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--grau-500);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.team-chip-entfernen:hover:not(:disabled) {
    background: var(--grau-200);
    color: var(--grau-900);
}

.team-chip-entfernen:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.team-chip-entfernen:disabled {
    cursor: default;
    opacity: 0.5;
}

.team-hinzufuegen {
    max-width: 24rem;
}

/* Person-Auswahl + „Hinzufügen"-Knopf nebeneinander; das Dropdown nimmt den Rest. */
.team-hinzufuegen-zeile {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.team-hinzufuegen-zeile .eingabe {
    flex: 1 1 auto;
    min-width: 0;
}

.team-hinzufuegen-knopf {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Beschriftung über der Hinzufügen-Zeile (eigenes <label>, damit das Feld sauber benannt ist). */
.team-hinzufuegen-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--grau-700);
    margin-bottom: 0.35rem;
}

/* =========================================================================
   PROJEKT-DETAIL ÜBERBLICK – neu strukturierte, erklärte Blöcke (v1.9.0 Welle 4)
   Baut auf projekt-tab-karte/projekt-info-gitter/feld/team-* auf. Vier klar
   betitelte Karten-Blöcke (Status · Zuständigkeit · Termine · Fuß-Hinweis) mit
   ruhigem Autosave-Chip, Erklär-Kasten und farbcodierten Termin-Untergruppen.
   Markenfarben: Kupfer (Highlight/Wiedervorlage), Navy (Text), Info-Blau
   (geplant), Rot (Fertig bis). Alles über die Token-Variablen.
   ========================================================================= */

/* Jeder Block ist eine flache Karte; Kopfzeile trägt den Autosave-Chip rechts (position:relative). */
.projekt-block {
    position: relative;
}

.projekt-block-titel {
    margin: 0 0 0.15rem;
    /* Platz für den Autosave-Chip rechts, damit lange Titel nicht darunterlaufen. */
    padding-right: 9rem;
}

.projekt-block-zweck {
    margin: 0 0 1rem;
    color: var(--grau-500);
    font-size: 0.92rem;
}

/* Ruhiger „✓ speichert automatisch"-Chip oben rechts in der Karte – markenkonform Navy-Text auf Beige
   (nicht grell), das ✓ in Kupfer als warmer Akzent. */
.karte-autosave {
    position: absolute;
    top: 1.25rem;
    right: 1.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--erfolg);
    background: var(--beige);
    border: 1px solid var(--beige-rand);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    white-space: nowrap;
}

.karte-autosave-haken {
    color: var(--kupfer-text);
    font-weight: 700;
}

/* Dezente Feld-Marke im Label (z. B. „ab Beauftragung" am Materialstatus) – kupferne Mini-Pille. */
.feld-marke {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: middle;
}

.feld-marke--spaeter {
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

/* Ein „noch nicht so wichtiges" Feld (Materialstatus in der Anfrage-Phase) ruhig gedimmt – gestrichelter
   Rand + wärmere Fläche signalisieren „später relevant", ohne es zu sperren. */
.eingabe--gedimmt {
    border-style: dashed;
    background: var(--grau-50);
    color: var(--grau-700);
}

/* Fuß-Hinweis unter den Blöcken (Bezeichnung bewusst nicht änderbar). */
.projekt-block-fuss {
    margin: 0.9rem 0 0;
    font-size: 0.84rem;
    color: var(--grau-500);
    text-align: center;
}

/* --- Erklär-Kasten „Was bedeutet welches Datum?" (in der Termine-Karte) --- */
.termin-legende {
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    display: grid;
    gap: 0.55rem;
}

.termin-legende-titel {
    margin: 0 0 0.1rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.termin-legende-zeile {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--grau-900);
}

.termin-legende-was {
    color: var(--grau-500);
}

/* Farbpunkte der Legende + Untergruppen-Titel. Rein dekorativ (die Bedeutung steht im Text daneben). */
.termin-punkt {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    margin-top: 0.28rem;
    flex: none;
}

/* In den Untergruppen-Titeln sitzt der Punkt in der Textzeile (kein oberer Versatz nötig). */
.termin-gruppe-titel .termin-punkt {
    margin-top: 0;
    margin-right: 0.5rem;
}

.termin-punkt--blau {
    background: var(--info-text);
}

.termin-punkt--kupfer {
    background: var(--kupfer);
}

.termin-punkt--rot {
    background: var(--fehler);
}

/* Grün nur für den dekorativen „Zieltermin je Phase"-Punkt (Verweis auf die Ampel oben). Eigener Ton –
   die --erfolg-Marke ist markenkonform Navy, nicht grün. */
.termin-punkt--gruen {
    background: #2e7d52;
}

/* --- Termin-Untergruppen (Ausführung geplant · Wiedervorlage · Fertig bis) --- */
.termin-gruppe {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 0.85rem 1rem;
    margin-top: 0.85rem;
}

.termin-gruppe:first-of-type {
    margin-top: 0;
}

/* Jede Gruppe leicht in ihrer Kennfarbe getönt – ruhig, nicht laut (heller Grund + farbiger Rand). */
.termin-gruppe--plan {
    background: var(--info-hg);
    border-color: var(--info-rand);
}

.termin-gruppe--wv {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
}

.termin-gruppe--fertig {
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
}

.termin-gruppe-titel {
    display: flex;
    align-items: center;
    margin: 0 0 0.1rem;
    font-size: 0.96rem;
    font-weight: 650;
    color: var(--grau-900);
}

.termin-gruppe-zweck {
    margin: 0 0 0.75rem;
    font-size: 0.84rem;
    color: var(--grau-500);
}

/* Häkchen „Termin mit Kunde abgesprochen" – ruhige, grün getönte Zeile unter den Ausführungs-Feldern. */
.termin-abgestimmt {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-top: 0.85rem;
    font-size: 0.86rem;
    color: var(--grau-700);
    background: var(--erfolg-hg);
    border: 1px solid var(--erfolg-rand);
    border-radius: var(--radius-s);
    padding: 0.6rem 0.75rem;
    cursor: pointer;
}

.termin-abgestimmt input {
    flex: none;
    margin-top: 0.15rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--kupfer);
    cursor: pointer;
}

.termin-abgestimmt input:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.termin-abgestimmt b {
    color: var(--grau-900);
}

/* --- Terminbestätigung als PDF (Idee „Termin-Bestätigung / Kunden-Infoblatt") ---
   Dezent am Ende der Untergruppe „Ausführung geplant": optionales Uhrzeit-Feld + Kupfer-Primärknopf +
   Hinweis/Rückmeldung. Durch eine gestrichelte Trennlinie vom Häkchen abgesetzt (wie der Outlook-Block),
   damit klar wird: das ist eine eigenständige Aktion. Markenkonform (Navy-Text, Kupfer-Akzent). */
.termin-bestaetigung {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--grau-200);
}

/* Uhrzeit-Feld schmal halten (Freitext, aber kein Muss) – nimmt nur so viel Breite wie nötig. */
.termin-bestaetigung-uhrzeit {
    max-width: 22rem;
    margin-bottom: 0.15rem;
}

/* Knopf linksbündig, nur so breit wie nötig (nicht über die ganze Karte ziehen). */
.termin-bestaetigung-knopf {
    align-self: flex-start;
}

.termin-bestaetigung-hinweis {
    margin: 0;
    color: var(--grau-600, #4b5563);
}

.termin-bestaetigung-meldung {
    margin: 0.1rem 0 0;
    font-weight: 500;
}

/* Gemeinsamer, dezenter Speicher-Status unter der Termine-Karte. */
.termin-status {
    margin: 0.85rem 0 0;
    padding: 0;
}

/* Auf schmalen Breiten den Autosave-Chip wieder in den Textfluss nehmen (kein Überlappen mit dem Titel). */
@media (max-width: 640px) {
    .karte-autosave {
        position: static;
        display: inline-flex;
        margin-bottom: 0.6rem;
    }

    .projekt-block-titel {
        padding-right: 0;
    }
}

/* Notiz-Feld füllt die Breite; angenehm hoch zum Schreiben. */
.projekt-notiz-feld {
    width: 100%;
    resize: vertical;
    min-height: 8rem;
    line-height: 1.5;
    font-family: inherit;
}

/* Angebot-Tab: Status-Pille über den Daten. */
.projekt-angebot-kopf {
    margin-bottom: 0.4rem;
}

/* Dokumente-Liste (eingelesene Belege als Dateieinträge). */
.projekt-dokumente-liste {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.projekt-dokument {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-s);
    background: var(--grau-0);
}

.projekt-dokument-symbol {
    flex: none;
    font-size: 1.1rem;
}

.projekt-dokument-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--grau-900);
    word-break: break-word;
}

.projekt-dokument-meta {
    flex: none;
    color: var(--grau-500);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

/* Aktionszeile „Laufzettel als PDF" (Laufzettel-Bauplan Stufe S2): Text links, Knopf rechts. */
.projekt-dokument-aktion {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
    padding: 1rem 1.15rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200, #e3e7eb);
    border-radius: var(--radius-m);
}

.projekt-dokument-aktion-text {
    flex: 1 1 16rem;
    min-width: 0;
}

.projekt-dokument-aktion-titel {
    margin: 0 0 0.2rem;
    font-weight: 600;
    color: var(--grau-900);
}

/* Ehrlicher Platzhalter-Hinweis (Datei-Anhänge / Rechnung über Taifun) – kein Fake-Feature. */
.projekt-platzhalter {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    background: var(--grau-50);
    border: 1px dashed var(--grau-300, #c9ced3);
    border-radius: var(--radius-m);
}

.projekt-platzhalter-symbol {
    flex: none;
    font-size: 1.4rem;
    line-height: 1.2;
}

.projekt-platzhalter-titel {
    margin: 0 0 0.2rem;
    font-weight: 600;
    color: var(--grau-900);
}

.projekt-platzhalter p {
    margin: 0;
    color: var(--grau-700);
}

/* Historie: senkrechte Zeitleiste, neueste zuerst. */
.projekt-historie {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.historie-eintrag {
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--grau-100);
}

.historie-eintrag:last-child {
    border-bottom: none;
}

.historie-punkt {
    flex: none;
    color: var(--kupfer);
    font-size: 0.8rem;
    line-height: 1.6;
}

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

.historie-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
    align-items: baseline;
    justify-content: space-between;
}

.historie-aktion {
    font-weight: 600;
    color: var(--grau-900);
}

.historie-zeit {
    color: var(--grau-500);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.historie-detail {
    margin: 0.2rem 0 0;
    color: var(--grau-700);
}

/* --- Fortschritts-Karte --- */
.projekt-fortschritt {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fortschritt-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.fortschritt-prozent {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
}

/* Nativer Balken, markenkonform eingefärbt (Cross-Browser-Pseudoelemente). */
.fortschritt-balken {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 0.7rem;
    border: none;
    border-radius: 999px;
    background: var(--grau-100);
    overflow: hidden;
}

.fortschritt-balken::-webkit-progress-bar {
    background: var(--grau-100);
    border-radius: 999px;
}

.fortschritt-balken::-webkit-progress-value {
    background: var(--kupfer);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.fortschritt-balken::-moz-progress-bar {
    background: var(--kupfer);
    border-radius: 999px;
}

/* Phasen-Kette: Schritte mit Punkt + Name, aktueller Schritt hervorgehoben. */
.phasen-kette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phase-schritt {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--grau-500);
}

.phase-schritt .phase-punkt {
    line-height: 1;
}

.phase-schritt.phase-erreicht {
    color: var(--grau-700);
}

.phase-schritt.phase-erreicht .phase-punkt {
    color: var(--kupfer-text);
}

.phase-schritt.phase-aktuell {
    font-weight: 700;
    color: var(--grau-900);
}

.phase-schritt.phase-aktuell .phase-punkt {
    color: var(--kupfer-text);
}

.fortschritt-beschreibung {
    margin: 0;
    color: var(--grau-700);
}

.fortschritt-hinweis {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.85rem;
}

/* --- Platzhalter-Karten (Timeline / Aufgaben / Termine in B1) --- */
.projekt-platzhalter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.platzhalter-text {
    margin: 0;
    color: var(--grau-500);
    line-height: 1.5;
}

.platzhalter-symbol-klein {
    font-size: 1rem;
}

/* --- Aufgaben-Checkliste (Bauplan B2) --- */
.projekt-aufgaben {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.aufgaben-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.aufgaben-kopf-symbol {
    font-size: 1rem;
}

.aufgaben-zaehler {
    font-size: 0.85rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Abschnitts-Gruppe (Laufzettel-Stufe S1): ruhige Überschrift, darunter die Aufgaben der Gruppe.
   Mehrere Gruppen untereinander mit etwas Luft – klare Hierarchie, viel Weißraum. */
.aufgaben-gruppe + .aufgaben-gruppe {
    margin-top: 1.1rem;
}

.aufgaben-gruppe-titel {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.aufgaben-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Aufgaben-Zeile im Detail-Reiter (Feature #49, Mockup-Ansicht 2): jetzt eine kleine „Karte" in drei
   Ebenen – Haupt-Zeile (Haken · Avatar · Titel · Erinnerung · Löschen), Steuer-Zeile (Zuweisen · Prio ·
   Status) und die optionale Bearbeiter-Notiz. Deshalb column statt row. */
.aufgaben-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.aufgaben-zeile-erledigt {
    background: var(--grau-50);
    border-color: var(--grau-100);
}

/* Haupt-Zeile: die eigentliche Aufgabe (Haken · Avatar · Titel · Erinnerung · Löschen). */
.aufgaben-zeile-haupt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Steuer-Zeile: Zuweisen · Priorität · Status – ruhig eingerückt unter den Titel (auf Höhe des Textes,
   nicht des Hakens), damit klar ist, dass sie zu dieser Aufgabe gehören. Umbruch auf schmal. */
.aufgaben-zeile-steuer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    padding-left: calc(1.25rem + 0.6rem);
}

.aufgaben-haken {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--akzent);
    cursor: pointer;
}

/* Dezentes Zuständigkeits-Kürzel-Badge (Laufzettel-Stufe S1): die feste Rolle (JH/BL/BT/CB/Hei)
   als ruhige Pille vor dem Titel – klein, hoher Kontrast, nicht alarmierend. */
.aufgaben-zustaendig {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-s);
    background: var(--grau-100);
    color: var(--grau-700);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Inline-Titelfeld: ruhig (randlos) bis Hover/Fokus, damit die Liste nicht wie ein Formular wirkt. */
.aufgaben-titel {
    flex: 1 1 auto;
    min-width: 0;
    border-color: transparent;
    background: transparent;
}

.aufgaben-titel:hover:not(:disabled):not(:focus) {
    border-color: var(--grau-200);
    background: var(--grau-0);
}

.aufgaben-titel:focus {
    background: var(--grau-0);
}

.aufgaben-titel-erledigt {
    color: var(--grau-500);
    text-decoration: line-through;
}

.aufgaben-herkunft {
    flex: none;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.7;
}

/* --- Erinnerung je Aufgabe (Feature #47) ---------------------------------------------------------
   Ist eine Wiedervorlage/Deadline gesetzt, eine dezente, klickbare Marke (🔔/⏰ + dd.MM.); eine
   überschrittene Deadline wird rot hervorgehoben. Ohne Erinnerung ein unaufdringlicher 🔔-Knopf.
   Beides öffnet den kompakten Erinnerungs-Editor. Echte Buttons (fokussierbar). */
.aufgaben-erinnerung {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.aufgaben-erinnerung-symbol {
    font-size: 0.75rem;
    line-height: 1;
}

/* Gesetzt (keine überfällige Deadline): warm/kupfer – „hier ist eine Erinnerung dran". */
.aufgaben-erinnerung--gesetzt {
    color: var(--kupfer-text);
    background: var(--beige);
    border-color: var(--kupfer-rand);
}

.aufgaben-erinnerung--gesetzt:hover:not(:disabled) {
    background: var(--kupfer-hell);
    border-color: var(--kupfer);
}

/* Überfällige Deadline: rot, klar hervorgehoben. */
.aufgaben-erinnerung--ueberfaellig {
    color: var(--fehler);
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
}

.aufgaben-erinnerung--ueberfaellig:hover:not(:disabled) {
    border-color: var(--fehler);
}

.aufgaben-erinnerung:focus-visible,
.aufgaben-erinnerung-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* Unaufdringlicher 🔔-Knopf, wenn (noch) keine Erinnerung gesetzt ist. Dezent grau, wird beim
   Hover/Fokus warm – lädt zum Setzen ein, ohne die Zeile zu belasten. */
.aufgaben-erinnerung-knopf {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    color: var(--grau-400);
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    opacity: 0.75;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.aufgaben-erinnerung-knopf:hover:not(:disabled) {
    color: var(--kupfer-text);
    background: var(--beige);
    border-color: var(--kupfer-rand);
    opacity: 1;
}

/* Feiner 5-Wert-Status der Aufgabe (Bauplan S3): kompaktes Dropdown mit farbigem linken Rand,
   damit der Status auf einen Blick erkennbar ist (farbliche Kennzeichnung). */
.aufgaben-status {
    flex: none;
    width: auto;
    min-width: 9.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    border-left-width: 4px;
}

.aufgaben-status.aufg-status-offen {
    border-left-color: var(--grau-300, #c9ced3);
}

.aufgaben-status.aufg-status-bearbeitung {
    border-left-color: #2f6fd4;
}

.aufgaben-status.aufg-status-erledigt {
    border-left-color: var(--erfolg);
}

.aufgaben-status.aufg-status-wartet-kunde {
    border-left-color: #d4862f;
}

.aufgaben-status.aufg-status-wartet-lieferant {
    border-left-color: #9a5bd4;
}

/* Status-Fundament (Transparenz-Paket, Baustein 3): Fremdgewerk = dritter Wartet-Ton (petrol),
   Blockiert = deutliches Rot (es geht NICHT weiter). Nur Farbklassen – kein Markup-Umbau. */
.aufgaben-status.aufg-status-wartet-fremdgewerk {
    border-left-color: #2f8f9d;
}

.aufgaben-status.aufg-status-blockiert {
    border-left-color: var(--fehler, #c0392b);
}

.aufgaben-loeschen {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-s);
    background: none;
    color: var(--grau-500);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.aufgaben-loeschen:hover:not(:disabled) {
    background: var(--fehler-hg);
    color: var(--fehler);
}

.aufgaben-loeschen:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.aufgaben-loeschen:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Neue-Aufgabe-Zeile + Vorlagen-Übernahme */
.aufgaben-neu {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.aufgaben-neu-feld {
    flex: 1 1 auto;
    min-width: 0;
}

/* ============================================================================================
   Team-Aufgaben im Projekt-Reiter (Feature #49, Mockup-Ansicht 2): Kopf-Umschalter „Meine / Alle",
   Bearbeiter-Avatar, „Zuweisen an", Prioritäts-Wahl und die Bearbeiter-Notiz („📝 BL: …").
   ============================================================================================ */

/* Kopf: Zähler + Umschalter rechts nebeneinander. */
.aufgaben-kopf-rechts {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* „Meine / Alle"-Umschalter – dieselbe ruhige Segment-Optik wie die Agenda (ma-toggle). */
.aufgaben-toggle {
    display: inline-flex;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    padding: 0.12rem;
    background: var(--grau-50);
    gap: 0.1rem;
}

.aufgaben-toggle-knopf {
    border: none;
    background: none;
    padding: 0.2rem 0.7rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--grau-500);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.aufgaben-toggle-knopf:hover:not(.ist-an) {
    color: var(--grau-700);
}

.aufgaben-toggle-knopf.ist-an {
    background: var(--kupfer);
    color: #fff;
}

.aufgaben-toggle-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* Bearbeiter-Avatar vor dem Titel: rundes Kürzel-Badge (wer ist dran). Navy-Fläche, weißes Kürzel. */
.aufgaben-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--akzent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Noch niemandem zugewiesen: dezenter, gestrichelter Platzhalter (nichts erfunden). */
.aufgaben-avatar-leer {
    background: var(--grau-100);
    color: var(--grau-400);
    border: 1px dashed var(--grau-300);
    font-weight: 500;
}

/* „Zuweisen an" – dezentes Dropdown; wenn niemand zugewiesen ist, wirkt es wie ein Aufforderungs-Chip
   (warm/kupfer), sobald jemand drin steht, ruhig-neutral. Beides über denselben Select. */
.aufgaben-zuweisen {
    flex: none;
    width: auto;
    min-width: 8.5rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.82rem;
}

/* Prioritäts-Wahl als Select mit der ma-prio-Farbe (Text/Fläche). Kompakt in der Steuerzeile. */
.aufgaben-prio-wahl {
    flex: none;
    width: auto;
    min-width: 6.5rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: var(--radius-s);
}

/* Status-Select in der Steuerzeile etwas schmaler (steht jetzt neben Zuweisen/Prio, nicht mehr allein). */
.aufgaben-zeile-steuer .aufgaben-status {
    min-width: 8.5rem;
}

/* Bearbeiter-Notiz („📝 BL: …"): dezente warm-getönte Zeile unter der Steuerzeile. Eingerückt wie die
   Steuerzeile, damit sie klar zur Aufgabe gehört. Das Eingabefeld ist randlos-ruhig bis Hover/Fokus. */
.aufgaben-notiz {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: calc(1.25rem + 0.6rem);
    padding: 0.35rem 0.55rem;
    background: var(--warm-hg, var(--grau-50));
    border: 1px dashed var(--grau-200);
    border-radius: var(--radius-s);
    font-size: 0.82rem;
}

.aufgaben-notiz-symbol {
    flex: none;
    font-size: 0.82rem;
    line-height: 1;
}

.aufgaben-notiz-praefix {
    flex: none;
    font-weight: 700;
    color: var(--kupfer-text);
}

.aufgaben-notiz-feld {
    flex: 1 1 auto;
    min-width: 0;
    border-color: transparent;
    background: transparent;
    font-size: 0.82rem;
    padding: 0.15rem 0.3rem;
}

.aufgaben-notiz-feld:hover:not(:disabled):not(:focus) {
    border-color: var(--grau-200);
    background: var(--grau-0);
}

.aufgaben-notiz-feld:focus {
    background: var(--grau-0);
}

/* „Notiz hinzufügen"-Knopf, wenn (noch) keine Notiz da ist – dezent, eingerückt, wird beim Hover warm. */
.aufgaben-notiz-knopf {
    align-self: flex-start;
    margin-left: calc(1.25rem + 0.6rem);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.4rem;
    font: inherit;
    font-size: 0.78rem;
    color: var(--grau-500);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.aufgaben-notiz-knopf:hover:not(:disabled) {
    color: var(--kupfer-text);
    background: var(--beige);
    border-color: var(--kupfer-rand);
}

.aufgaben-notiz-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.aufgaben-vorlage {
    border-top: 1px solid var(--grau-100);
    padding-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
}

/* Die Übernahme-Wahl (Leitfaden) soll bei geöffnetem Zustand die volle Breite unter den Knöpfen
   einnehmen, damit Auswahl + Knöpfe nicht gequetscht in einer Zeile stehen. */
.aufgaben-vorlage .aufgaben-vorlage-wahl {
    flex: 1 1 100%;
}

.aufgaben-vorlage-wahl {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.aufgaben-vorlage-zeile {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.aufgaben-vorlage-zeile .eingabe {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Aufgaben-Teilkennzahl in der Fortschritts-Karte */
.fortschritt-aufgaben {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--grau-700);
    font-size: 0.9rem;
}

.fortschritt-aufgaben-symbol {
    color: var(--kupfer-text);
    line-height: 1;
}

/* =========================================================================
   „WAS JETZT ZU TUN IST" – gekoppelte Phasen-Ansicht (Inhaber-Feedback:
   Leitfaden ↔ Phase). Prominent: aktuelle Phase + deren Schritte, abhakbar,
   mit Zuständig-Kürzel + „X von Y". Sekundär/einklappbar: andere Phasen.
   Ruhiges Layout, große Klick-Ziele, klare Hierarchie (Foundations: einfach
   bedienbar ohne Vorwissen).
   ========================================================================= */
.projekt-phasen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Dezenter kupferner Akzentstreifen oben – signalisiert „hier ist der Fokus". */
    border-top: 3px solid var(--kupfer);
}

.phasen-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
}

.phasen-ueberschrift {
    margin: 0 0 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kupfer-text);
}

.phasen-aktuelle-phase {
    margin: 0;
}

.phasen-zaehler {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--grau-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.phasen-leer {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.92rem;
}

/* Die Schritte der aktuellen Phase: große, ruhige Klick-Zeilen (Checkbox + Kürzel + Text). */
.phasen-schritte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Ein Schritt ist eine Spalte: oben die ruhige Kopf-Zeile (Haken + Titel + Marken + „⋯"), darunter –
   nur wenn aufgeklappt – der kompakte Editor. So bleiben die 32 Schritte übersichtlich. */
.phasen-schritt {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.phasen-schritt:hover {
    border-color: var(--grau-300);
}

.phasen-schritt-erledigt {
    background: var(--grau-50);
    border-color: var(--grau-100);
}

/* Der aufgeklappte Schritt wird ruhig hervorgehoben (Kupfer-Rand), damit klar ist, was gerade bearbeitet wird. */
.phasen-schritt--offen {
    border-color: var(--kupfer);
    box-shadow: 0 0 0 1px var(--kupfer);
}

/* Kommt der Nutzer aus einer Aufgaben-Erinnerung „Zum Projekt" (Feature #47), leuchtet GENAU dieser Schritt
   einmal kurz warm (Kupfer) auf und beruhigt sich dann wieder – ein sanfter „hier ist deine Aufgabe"-Blick,
   ohne die ruhige Liste zu stören. Die Markierung wird nach kurzer Zeit auch im Code wieder entfernt. */


.phasen-schritt--aufleuchten {
    animation: phasen-schritt-aufleuchten 2.4s ease-out 1;
}

/* Barrierearm: Wer reduzierte Bewegung wünscht, sieht statt der Animation eine ruhige, statische
   Kupfer-Markierung (gleicher „hier bin ich"-Effekt, ohne Bewegung). */
@media (prefers-reduced-motion: reduce) {
    .phasen-schritt--aufleuchten {
        animation: none;
        border-color: var(--kupfer);
        box-shadow: 0 0 0 2px var(--kupfer-rand);
        background: var(--kupfer-hell);
    }
}

/* Die primäre Zeile: Haken · Zuständig-Marke · Titel · „Fertig bis"-Marke · „⋯". */
.phasen-schritt-haupt {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.phasen-haken {
    width: 1.35rem;
    height: 1.35rem;
    flex: none;
}

/* Der Schritt-Text ist zugleich Label des Hakens → ganze Zeile gut klickbar. */
.phasen-schritt-titel {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    font-size: 0.98rem;
    color: var(--grau-800, #1f2937);
    line-height: 1.35;
}

.phasen-schritt-titel-erledigt {
    color: var(--grau-500);
    text-decoration: line-through;
}

/* Kompakte „Fertig bis"-Marke in der Kopf-Zeile: ruhig-neutral offen, rot bei überfällig. */
.schritt-deadline {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.schritt-deadline-symbol {
    font-size: 0.78rem;
    line-height: 1;
}

.schritt-deadline--offen {
    background: var(--grau-100);
    color: var(--grau-600, #4b5563);
}

.schritt-deadline--ueberfaellig {
    background: var(--fehler-hg);
    color: var(--fehler);
}

/* „⋯ bearbeiten": ruhiger, quadratischer Symbol-Knopf am Zeilenende; im offenen Zustand kupfern markiert. */
.schritt-bearbeiten {
    flex: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--grau-500);
}

.schritt-bearbeiten:hover:not(:disabled) {
    color: var(--kupfer);
}

.schritt-bearbeiten.ist-offen {
    color: var(--kupfer);
}

/* Der kompakte Editor: Zuständig · Priorität · Fertig bis nebeneinander, mit ruhigem Abstand vom Haken
   eingerückt (auf Höhe des Titels). Umbruch auf schmalen Fenstern. */
.schritt-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.9rem;
    margin-left: calc(1.35rem + 0.7rem);
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-s);
    background: var(--grau-50);
}

.schritt-editor-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.schritt-editor-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grau-600, #4b5563);
}

.schritt-editor-hilfe {
    font-size: 0.75rem;
    color: var(--grau-500);
}

.schritt-zustaendig {
    width: auto;
    min-width: 9rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

.schritt-prio {
    width: auto;
    min-width: 7rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-s);
}

.schritt-deadline-eingabe {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.schritt-dl-datum {
    width: auto;
    padding: 0.3rem 0.45rem;
    font-size: 0.85rem;
}

.schritt-dl-zeit {
    width: auto;
    padding: 0.3rem 0.45rem;
    font-size: 0.85rem;
}

/* Dezente „gespeichert"-Rückmeldung im Editor (grün, ruhig). */
.schritt-editor-gespeichert {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--erfolg, #15803d);
    white-space: nowrap;
}

/* Einmaliger, dezenter Hinweis unter der Schritt-Liste (zugewiesene Aufgaben erst ab Beauftragung sichtbar). */
.phasen-zuweis-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    font-size: 0.82rem;
    color: var(--grau-500);
    line-height: 1.4;
}

/* Die „andere Phasen"-Schritte nutzen dieselbe Zeile, aber etwas kompakter/ruhiger. */
.phasen-schritte--andere {
    gap: 0.35rem;
    margin-top: 0.4rem;
}

/* Phase abgeschlossen: ruhige Erfolgs-Fläche + Weiter-Knopf (kein automatischer Sprung). */
.phasen-fertig {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--erfolg-rand);
    border-radius: var(--radius-m);
    background: var(--erfolg-hg);
}

.phasen-fertig-symbol {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--kupfer);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1;
}

.phasen-fertig-text {
    flex: 1 1 14rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grau-800, #1f2937);
}

.phasen-fertig-ende {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.9rem;
    color: var(--grau-600, #4b5563);
}

.phasen-ruecken {
    flex: none;
    white-space: nowrap;
}

/* Leiser „Laufzettel hinzufügen"-Hinweis: Recovery für Alt-Projekte ohne Laufzettel. Bewusst ruhig
   (neutral-grau, KEIN Alarm-Rot) – es ist ein Angebot, kein Fehler. Erscheint nur, wenn HatLaufzettel
   false ist. */
.phasen-laufzettel-fehlt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--grau-200, #e5e7eb);
    border-radius: var(--radius-m);
    background: var(--grau-50, #f9fafb);
}

.phasen-laufzettel-fehlt-text {
    flex: 1 1 14rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--grau-600, #4b5563);
}

.phasen-laufzettel-knopf {
    flex: none;
    white-space: nowrap;
}

.phasen-laufzettel-knopf-symbol {
    margin-right: 0.3rem;
}

/* Andere Phasen / Weitere Aufgaben: dezent einklappbar (nichts verstecken, aber ruhig). */
.phasen-andere,
.phasen-weitere {
    border-top: 1px solid var(--grau-100);
    padding-top: 0.75rem;
}

.phasen-andere-summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--akzent-tief);
    padding: 0.2rem 0;
    list-style: revert;
}

.phasen-andere-summary:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
    border-radius: var(--radius-s);
}

.phasen-andere-inhalt {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.phasen-andere-hinweis {
    margin: 0;
    font-size: 0.88rem;
    color: var(--grau-500);
}

.phasen-andere-titel {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.phasen-andere-leer {
    margin: 0;
    font-size: 0.85rem;
    color: var(--grau-400, #9ca3af);
    font-style: italic;
}

.phasen-andere-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.phasen-andere-zeile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--grau-700);
}

.phasen-andere-zeile-erledigt {
    color: var(--grau-500);
}

.phasen-andere-zeile-erledigt .phasen-andere-text {
    text-decoration: line-through;
}

.phasen-andere-marke {
    flex: none;
    width: 1.1rem;
    text-align: center;
    color: var(--kupfer-text);
}

.phasen-andere-text {
    min-width: 0;
}

.platzhalter-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
}

.platzhalter-symbol {
    font-size: 2.2rem;
    opacity: 0.85;
}

/* =========================================================================
   TERMINE-PANEL (Bauplan B3) – Termin-/Meilenstein-Liste je Projekt
   Ruhige Liste im Aufgaben-Stil: je Zeile eine Marke (Punkt/Stern),
   Datum + Titel + Meilenstein-Schalter + Löschen, darunter eine Notiz.
   Meilensteine sind dezent hervorgehoben (warmer Kupfer-Akzent).
   ========================================================================= */
.projekt-termine {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.termine-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.termine-kopf-symbol {
    font-size: 1rem;
}

.termine-zaehler {
    font-size: 0.85rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.termine-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.termine-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-s);
    background: var(--grau-0);
}

/* Meilenstein-Zeile: warmer linker Akzentstreifen + leicht getönter Grund. */
.termine-zeile-meilenstein {
    border-color: var(--kupfer-rand);
    background: var(--kupfer-hell);
    box-shadow: inset 3px 0 0 var(--kupfer);
}

.termine-marke {
    flex: none;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--grau-500);
}

.termine-marke-meilenstein {
    color: var(--kupfer-text);
    font-size: 1.05rem;
}

.termine-felder {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.termine-zeile-haupt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.termine-datum {
    flex: none;
    width: auto;
    font-variant-numeric: tabular-nums;
}

/* Inline-Titelfeld wie bei den Aufgaben: ruhig bis Hover/Fokus. */
.termine-titel {
    flex: 1 1 12rem;
    min-width: 0;
    border-color: transparent;
    background: transparent;
}

.termine-titel:hover:not(:disabled):not(:focus) {
    border-color: var(--grau-200);
    background: var(--grau-0);
}

.termine-titel:focus {
    background: var(--grau-0);
}

.termine-notiz {
    width: 100%;
    font-size: 0.9rem;
    border-color: transparent;
    background: transparent;
    color: var(--grau-700);
}

.termine-notiz:hover:not(:disabled):not(:focus) {
    border-color: var(--grau-200);
    background: var(--grau-0);
}

.termine-notiz:focus {
    background: var(--grau-0);
}

/* Meilenstein-Schalter (Checkbox + Beschriftung) */
.termine-meilenstein-schalter {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--grau-700);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.termine-meilenstein-haken {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--kupfer);
    cursor: pointer;
}

.termine-loeschen {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-s);
    background: none;
    color: var(--grau-500);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.termine-loeschen:hover:not(:disabled) {
    background: var(--fehler-hg);
    color: var(--fehler);
}

.termine-loeschen:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.termine-loeschen:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Neuen Termin anlegen */
.termine-neu {
    border-top: 1px solid var(--grau-100);
    padding-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.termine-neu-zeile {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.termine-neu .feld {
    margin: 0;
}

.termine-neu-titel-feld {
    flex: 1 1 14rem;
    min-width: 0;
}

.termine-neu-notiz-feld {
    flex: 1 1 16rem;
    min-width: 0;
}

.termine-neu-meilenstein {
    padding-bottom: 0.5rem;
}

.termine-neu-knopf {
    flex: none;
}

/* =========================================================================
   TIMELINE-ANSICHT (Bauplan B3) – einfache, selbst gezeichnete SVG-Zeitachse
   Keine externe Charting-Bibliothek. Je Projekt eine Achsen-Zeile mit Punkten
   (Termine) und hervorgehobenen Rauten (Meilensteine) plus eine Heute-Linie.
   ========================================================================= */
.timeline-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--grau-700);
}

.timeline-legende-eintrag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.timeline-punkt-symbol {
    color: var(--grau-500);
}

.timeline-stern-symbol {
    color: var(--kupfer-text);
}

.timeline-heute-symbol {
    color: var(--akzent-tief);
}

.timeline-zeilen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-zeile-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.timeline-projekt-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grau-900);
}

.timeline-zeitraum {
    font-size: 0.85rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Das SVG skaliert responsiv mit der Kartenbreite (viewBox + 100% Breite). */
.timeline-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 130px;
    overflow: visible;
}

.timeline-achse-linie {
    stroke: var(--grau-200);
    stroke-width: 2;
}

.timeline-punkt {
    fill: var(--grau-0);
    stroke: var(--grau-500);
    stroke-width: 2;
}

.timeline-meilenstein {
    fill: var(--kupfer);
    stroke: var(--kupfer-text);
    stroke-width: 1.5;
}

.timeline-datum {
    fill: var(--grau-700);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

.timeline-heute-linie {
    stroke: var(--akzent-tief);
    stroke-width: 2;
    stroke-dasharray: 4 4;
}

.timeline-heute-text {
    fill: var(--akzent-tief);
    font-size: 20px;
    font-weight: 600;
}

/* Begleitende Text-Liste je Achse (Lesbarkeit + Barrierefreiheit). */
.timeline-text-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-top: 1px solid var(--grau-100);
    padding-top: 0.6rem;
}

.timeline-text-eintrag {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--grau-700);
}

.timeline-text-marke {
    flex: none;
    color: var(--grau-500);
}

.timeline-text-meilenstein {
    font-weight: 600;
    color: var(--grau-900);
}

.timeline-text-meilenstein .timeline-text-marke {
    color: var(--kupfer-text);
}

.timeline-text-datum {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--grau-500);
    min-width: 5.5rem;
}

.timeline-text-titel {
    min-width: 0;
}

/* =========================================================================
   BERATUNG / WISSENS-HUB (Säule A – Reiter „Beratung")
   Ruhiges Zwei-Spalten-Layout: links die Bereichs-Navigation (vier große, klar
   beschriftete Einträge), rechts der Inhalt des aktiven Bereichs als aufklappbare
   Karten. Markenkonform (Navy-Auswahl, Beige/Kupfer als Akzent), barrierearm.
   ========================================================================= */
.beratung-bereich {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.25rem 1.5rem 4rem;
}

/* Zwei Spalten ab Tablet-Breite; darunter (schmal) gestapelt. */
.beratung-raster {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: 1.75rem;
    align-items: start;
}

@media (max-width: 56rem) {
    .beratung-raster {
        grid-template-columns: 1fr;
    }
}

/* --- Linke Bereichs-Navigation --- */
.beratung-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: sticky;
    top: 1rem;
}

@media (max-width: 56rem) {
    .beratung-nav {
        position: static;
    }
}

.beratung-nav-knopf {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    border: 1.5px solid var(--grau-200);
    background: var(--grau-0);
    border-radius: var(--radius-m);
    padding: 0.85rem 1rem;
    cursor: pointer;
    font: inherit;
    color: var(--grau-700);
    box-shadow: var(--schatten-s);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.beratung-nav-knopf:hover:not(.beratung-nav-aktiv) {
    border-color: var(--akzent-rand);
    background: var(--grau-50);
}

.beratung-nav-knopf:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.beratung-nav-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
    color: var(--grau-900);
}

.beratung-nav-symbol {
    flex: none;
    font-size: 1.25rem;
    line-height: 1.3;
}

.beratung-nav-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.beratung-nav-titel {
    font-weight: 600;
    color: var(--grau-900);
    font-size: 0.98rem;
}

.beratung-nav-detail {
    font-size: 0.82rem;
    color: var(--grau-500);
    line-height: 1.35;
}

/* --- Rechte Inhaltsspalte --- */
.beratung-panel-kopf {
    margin-bottom: 1.25rem;
}

.beratung-panel-kopf h2 {
    font-size: 1.35rem;
    margin: 0;
}

.beratung-panel-kopf-aktion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Leerer Zustand / Pflegehinweis (keine Inhalte, keine Programme). */
.beratung-leer {
    background: var(--beige);
    border: 1px solid var(--beige-rand);
    border-radius: var(--radius-m);
    padding: 1.1rem 1.3rem;
    color: var(--grau-700);
    line-height: 1.55;
}

/* --- Aufklappbare Baustein-Karten (Lese-Ansicht) --- */
.baustein-liste {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.baustein-karte {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    overflow: hidden;
}

.baustein-karte[open] {
    border-color: var(--akzent-rand);
}

.baustein-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--grau-900);
}

/* Standard-Dreieck der <summary> ausblenden (eigener Pfeil rechts). */
.baustein-summary::-webkit-details-marker {
    display: none;
}

.baustein-summary:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
    border-radius: var(--radius-m);
}

.baustein-titel {
    flex: 1 1 auto;
    font-size: 1.02rem;
}

.baustein-badge {
    flex: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.baustein-pfeil {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--grau-400);
    border-bottom: 2px solid var(--grau-400);
    transform: rotate(45deg);
    transition: transform 0.16s ease;
}

.baustein-karte[open] .baustein-pfeil {
    transform: rotate(-135deg);
}

.baustein-koerper {
    padding: 0 1.2rem 1.2rem;
    color: var(--grau-700);
    line-height: 1.6;
}

.baustein-absatz {
    margin: 0 0 0.75rem;
}

.baustein-absatz:last-child {
    margin-bottom: 0;
}

.baustein-koerper .baustein-liste {
    /* Listen im Karten-Körper: nicht das Flex-Layout der Karten-Liste erben. */
    display: block;
    margin: 0 0 0.75rem;
    padding-left: 1.3rem;
}

.baustein-koerper ul.baustein-liste {
    list-style: disc;
}

.baustein-koerper ol.baustein-liste {
    list-style: decimal;
}

.baustein-koerper .baustein-liste li {
    margin-bottom: 0.3rem;
}

/* Nur-Lese-Häkchen (aus „- [ ]" im Markdown) – keine echten Kästchen. */
.baustein-haekchen-lese {
    list-style: none !important;
    padding-left: 0 !important;
}

.baustein-haekchen-lese li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.haekchen-lese-box {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid var(--grau-300);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--akzent);
    margin-top: 0.1rem;
}

.haekchen-lese-an {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.baustein-quelle {
    margin: 0.9rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--grau-150);
    font-size: 0.82rem;
    color: var(--grau-500);
}

/* Karte für einen Baustein mit nicht auflösbarem Token (klarer Hinweis statt falscher Zahl). */
.baustein-karte-fehler {
    padding: 1rem 1.2rem;
}

.baustein-karte-fehler .baustein-titel {
    display: block;
    margin: 0 0 0.4rem;
}

/* --- „Aktuelle wichtige Infos": Live-Förder-Übersichtskarten --- */
.foerder-live-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.foerder-live-karte {
    border: 1px solid var(--akzent-rand);
    background: var(--akzent-hell);
    border-radius: var(--radius-m);
    padding: 1rem 1.2rem;
}

.foerder-live-karte-titel {
    font-size: 1rem;
    margin: 0 0 0.7rem;
    color: var(--grau-900);
}

.foerder-kennzahlen {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
}

.foerder-kennzahlen > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.foerder-kennzahlen dt {
    color: var(--grau-500);
    font-size: 0.88rem;
}

.foerder-kennzahlen dd {
    margin: 0;
    font-weight: 600;
    color: var(--grau-900);
    text-align: right;
}

.foerder-steuer-hinweis {
    margin: 0 0 1.25rem;
    color: var(--grau-700);
    font-size: 0.92rem;
}

/* --- Leitfäden zum Abhaken (echte, abhakbare Checkliste, Session-State) --- */
.leitfaden-karte {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    box-shadow: var(--schatten-s);
    padding: 1.2rem 1.3rem;
}

.leitfaden-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.leitfaden-titel {
    font-size: 1.05rem;
    margin: 0;
    color: var(--grau-900);
}

.leitfaden-kopf-rechts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.leitfaden-zaehler {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kupfer-text);
    white-space: nowrap;
}

.leitfaden-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.leitfaden-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.leitfaden-zeile-an {
    border-color: var(--akzent-rand);
    background: var(--akzent-hell);
}

.leitfaden-haken {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--akzent);
    cursor: pointer;
    margin-top: 0.1rem;
}

.leitfaden-zeile-text {
    cursor: pointer;
    line-height: 1.5;
    color: var(--grau-700);
}

.leitfaden-zeile-an .leitfaden-zeile-text {
    color: var(--grau-900);
}

.leitfaden-hinweis {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--grau-150);
    font-size: 0.9rem;
    color: var(--grau-500);
    line-height: 1.55;
}

.leitfaden-hinweis .baustein-absatz {
    margin-bottom: 0.5rem;
}

/* =========================================================================
   Panel „Für den Kunden erzeugen" (Beratungs-Hub Säule A, Stufe A2)
   Immer sichtbar unter den Bereichen. Zwei Spalten: links Name + Themen-
   Auswahl, rechts die Vorschau „Im PDF enthalten" + Speichern-Knopf (klebt
   mit, damit das Ergebnis beim Anhaken sichtbar bleibt). Nutzt die
   vorhandenen Karten-/Feld-/Marken-Tokens – KEINE neuen Farben.
   ========================================================================= */
.kunden-pdf-panel {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--grau-200);
}

.kunden-pdf-raster {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.kunden-pdf-eingabe {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    min-width: 0;
}

.kunden-pdf-themen {
    border: 1px solid var(--beige-rand);
    border-radius: var(--radius-l);
    background: var(--beige);
    padding: 1.2rem 1.35rem 1.35rem;
    margin: 0;
}

.kunden-pdf-themen-legende {
    font-weight: 700;
    color: var(--grau-900);
    font-size: 1.02rem;
    padding: 0 0.35rem;
}

.kunden-pdf-themen-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.kunden-pdf-themen-kopf .abschnitt-hinweis {
    margin: 0;
    flex: 1 1 14rem;
}

.kunden-pdf-schnellwahl {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.kunden-pdf-themen .leistungs-liste {
    margin: 0;
}

/* Klebende rechte Seite (Vorschau + Aktion), wie die Förder-PDF-Seite. */
.kunden-pdf-seite {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.kunden-pdf-vorschau {
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-l);
    padding: 1.25rem 1.4rem;
}

.kunden-pdf-vorschau-titel {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--grau-900);
}

.kunden-pdf-vorschau-zahl {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kupfer-text);
}

.kunden-pdf-vorschau-liste {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--grau-700);
    font-size: 0.92rem;
    line-height: 1.45;
}

.kunden-pdf-vorschau-leer {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.92rem;
    line-height: 1.5;
}

.kunden-pdf-aktion {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kunden-pdf-aktion .btn-gross {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1.2rem;
    font-size: 1.05rem;
}

@media (max-width: 860px) {
    .kunden-pdf-raster {
        grid-template-columns: 1fr;
    }

    /* Auf schmalen Fenstern nicht mehr kleben (sonst verdeckt sie die Auswahl). */
    .kunden-pdf-seite {
        position: static;
    }
}

/* =========================================================================
   BERATUNG – Suche (Stufe A3)
   Bereichsübergreifendes Suchfeld oben im Hub + clientseitiges Filterfeld je
   Bereich. Ruhig, markenkonform, klare Treffer-Gruppierung nach Bereich.
   ========================================================================= */
.beratung-suche {
    margin-bottom: 1.75rem;
}

.beratung-suche-feld {
    max-width: 38rem;
}

/* Eingabezeile mit Lupe links und „leeren"-Knopf rechts (relativ positioniert). */
.beratung-suche-eingabe {
    position: relative;
    display: flex;
    align-items: center;
}

.beratung-suche-symbol {
    position: absolute;
    left: 0.85rem;
    font-size: 1rem;
    pointer-events: none;
    opacity: 0.7;
}

.beratung-suche-eingabe .eingabe {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.beratung-suche-leeren {
    position: absolute;
    right: 0.6rem;
    border: none;
    background: transparent;
    color: var(--grau-500);
    font-size: 1rem;
    line-height: 1;
    padding: 0.35rem;
    border-radius: var(--radius-s);
    cursor: pointer;
}

.beratung-suche-leeren:hover {
    background: var(--grau-100);
    color: var(--grau-900);
}

.beratung-suche-leeren:focus-visible {
    outline: 2px solid var(--kupfer);
    outline-offset: 1px;
}

.beratung-suche-ergebnis {
    margin-top: 1.5rem;
}

/* Herkunfts-Zeile über jeder Treffer-Karte (aus welchem Bereich der Treffer stammt). */
.beratung-treffer-bereich {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--kupfer-text);
    margin: 0 0 0.3rem 0.2rem;
}

.beratung-suche-ergebnis .baustein-liste > div + div {
    margin-top: 0.9rem;
}

/* Clientseitiges Filterfeld INNERHALB eines Bereichs-Panels. */
.beratung-panel-suche {
    max-width: 30rem;
    margin-bottom: 1.1rem;
}

/* =========================================================================
   EINSTELLUNGEN – Wissensbausteine (Pflege-UI, Stufe A3)
   Tabelle (aktive + deaktivierte), Status-Marken und der modale Editor mit
   der Förder-Token-Einfügehilfe (Dropdown statt Freitext).
   ========================================================================= */

/* Zentrierte Status-Spalten der Pflege-Tabelle. */
.datentabelle .spalte-zentriert {
    text-align: center;
    white-space: nowrap;
}

/* Status-/Sichtbarkeits-Marken in der Liste (zurückhaltend, Markenfarben). */
.wb-status {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.wb-status-aktiv,
.wb-status-kunde {
    background: var(--erfolg-hg);
    border-color: var(--erfolg-rand);
    color: var(--erfolg);
}

.wb-status-inaktiv {
    background: var(--grau-100);
    border-color: var(--grau-200);
    color: var(--grau-500);
}

.wb-status-intern {
    background: var(--grau-50);
    border-color: var(--grau-200);
    color: var(--grau-700);
}

/* =========================================================================
   Mitarbeiter-Pflege (Einstellungen → Mitarbeiter, Projekt-Board S1)
   Runder Avatar aus dem Kürzel (Markenfarbe, weißer Text = voller Kontrast)
   und ein ruhiger Aktiv-Schalter. Reine Stammdaten-Pflege; das Board kommt S2.
   ========================================================================= */
.ma-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: var(--akzent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ma-avatar-leer {
    background: var(--grau-100);
    color: var(--grau-500);
    border: 1px dashed var(--grau-300);
    font-weight: 500;
}

/* Aktiv-Schalter im Bearbeiten-Formular (gleiche ruhige Linie wie die übrigen Schalter). */
.ma-schalter-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0.4rem 0 0.2rem;
    cursor: pointer;
}

.ma-schalter-zeile input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

.ma-schalter-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ma-schalter-titel {
    font-weight: 600;
}

.ma-schalter-detail {
    color: var(--grau-500);
    font-size: 0.88rem;
}

/* Kleine Marke „enthält Platzhalter" hinter dem Titel. */
.wb-token-marke {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    color: var(--kupfer-text);
    vertical-align: middle;
}

/* Editor-Modal: etwas breiter (viel Inhalt: Inhalt-Textarea + Token-Hilfe). */
.modal-wissensbaustein {
    max-width: 46rem;
    width: 100%;
}

/* Förder-Token-Einfügehilfe (Dropdown-Programm + Token-Art + Knopf). */
.wb-token-hilfe {
    border: 1px solid var(--kupfer-rand);
    background: var(--kupfer-hell);
    border-radius: var(--radius-m);
    padding: 1rem 1.2rem 1.1rem;
    margin: 0.4rem 0 1.25rem;
}

.wb-token-hilfe > legend {
    font-weight: 600;
    color: var(--grau-900);
    padding: 0 0.4rem;
}

.wb-token-zeile {
    display: flex;
    align-items: flex-end;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.wb-token-zeile .feld {
    flex: 1 1 14rem;
    margin: 0;
}

.wb-token-einfuegen {
    flex: 0 0 auto;
}

.wb-token-leer {
    margin: 0.6rem 0 0;
    color: var(--warn-text);
}

.wb-token-steuer {
    margin-top: 0.85rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--kupfer-rand);
}

/* Liste der nicht auflösbaren Tokens (Speichern blockiert). */
.wb-token-fehler-liste {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.wb-token-fehler-liste code {
    font-size: 0.85rem;
}

/* Schalter-Zeilen (kundensichtbar / aktiv) im Editor. */
.wb-schalter {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0.5rem 0 1.25rem;
}

.wb-schalter-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
}

.wb-schalter-zeile input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    accent-color: var(--kupfer);
}

.wb-schalter-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.wb-schalter-titel {
    font-weight: 600;
    color: var(--grau-900);
}

.wb-schalter-detail {
    font-size: 0.85rem;
    color: var(--grau-500);
}

@media (max-width: 620px) {
    .wb-token-zeile {
        flex-direction: column;
        align-items: stretch;
    }

    .wb-token-einfuegen {
        width: 100%;
    }
}

/* =========================================================================
   Einsatzplan / Plantafel (Einsatzplan-Stufe S2b)
   Ruhiges, awork-artiges Wochen-/Monats-Raster: linke FIXE Mitarbeiter-Spalte
   (Name + Rolle + Auslastungsbalken), dann eine Spalte je Tag. Heute dezent
   hervorgehoben, Wochenende abgesetzt, Einsätze als Chips. Klar + aufgeräumt.
   ========================================================================= */
.einsatzplan-bereich {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* --- Steuerleiste: [‹ Zurück][Heute][Vor ›]  Periode  [Woche|Monat]  Gesamt --- */
.plan-steuerung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.plan-navigation {
    display: inline-flex;
    gap: 0.4rem;
}

/* Periode-Label: prominent, mittig zwischen Navigation und Umschalter; nimmt den freien Raum. */
.plan-periode {
    flex: 1 1 12rem;
    min-width: 9rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--grau-900);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* „Gesamt geplant: X h" – rechts, prominent (eine klare Kennzahl). */
.plan-gesamt {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    padding-left: 0.5rem;
}

.plan-gesamt-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--grau-500);
}

.plan-gesamt-wert {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kupfer-text);
    font-variant-numeric: tabular-nums;
}

/* --- „Unverplant"-Ziehleiste: aktive Projekte als ziehbare Chips (Durchgang 2) --- */
.plan-ziehleiste {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.plan-ziehleiste-kopf {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--grau-500);
}

.plan-ziehleiste-hinweis,
.plan-ziehleiste-leer {
    margin: 0;
    font-size: 0.84rem;
    color: var(--grau-500);
}

.plan-ziehleiste-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Ein ziehbares Projekt-Chip: ruhig, klar, mit „Greif"-Cursor. */
.plan-projekt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 22rem;
    padding: 0.4rem 0.7rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-left: 3px solid var(--grau-400);
    border-radius: var(--radius-s);
    cursor: grab;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.plan-projekt-chip:hover {
    border-color: var(--kupfer-rand);
    box-shadow: 0 2px 8px rgba(15, 36, 47, 0.08);
}

.plan-projekt-chip:active {
    cursor: grabbing;
}

.plan-projekt-chip.ist-prio {
    border-left-color: var(--kupfer);
}

.plan-projekt-chip.ist-ueberfaellig {
    border-left-color: var(--fehler);
}

/* Das gerade gezogene Projekt-Chip: halbtransparent (wie die Board-Karte). */
.plan-projekt-chip.ist-gezogen {
    opacity: 0.45;
    box-shadow: none;
}

.plan-projekt-chip-name {
    font-weight: 600;
    color: var(--grau-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.plan-projekt-chip-phase {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--grau-500);
    padding: 0.05rem 0.4rem;
    background: var(--grau-100);
    border-radius: 999px;
}

/* --- Tafel-Rahmen: erlaubt horizontales Scrollen (v.a. im Monat). --- */
.plan-tafel-rahmen {
    overflow-x: auto;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
}

/* Das Gitter: Grid mit fixer erster Spalte + N Tagesspalten (N = --plan-tage). */
.plan-tafel {
    --plan-person-breite: 13rem;
    --plan-tag-breite: 1fr;
    display: grid;
    grid-template-columns: var(--plan-person-breite) repeat(var(--plan-tage), var(--plan-tag-breite));
    min-width: 100%;
}

/* Woche: großzügige Tagesspalten (Projektname lesbar). */
.plan-tafel--woche {
    --plan-tag-breite: minmax(7.5rem, 1fr);
}

/* Monat: kompakte, schmale Spalten mit fester Breite → horizontales Scrollen statt Quetschen. */
.plan-tafel--monat {
    --plan-person-breite: 11rem;
    --plan-tag-breite: 2.5rem;
    /* Geometrie der Spannbalken (eine Reihe = Balkenhöhe + Abstand). Als Variablen, damit die Razor die
       top-Position je Stapel-Reihe berechnen kann, ohne Logik im Markup. */
    --plan-balken-hoehe: 1.9rem;
    --plan-balken-reihe: 2.2rem;
    --plan-balken-oben: 0.5rem;
}

/* ================= Monatsansicht als Spannbalken (Balken je Projekt über seine Tage) ================= */
/* EIN durchgehender „Track" je Person, über ALLE Tagesspalten (Grid-Spalte 2 bis Ende). Darauf liegen die
   Projekt-Balken absolut positioniert (left%/width% aus der getesteten Hilfe). Nur im Monat. */
.plan-spur {
    grid-column: 2 / -1;
    position: relative;
    border-top: 1px solid var(--grau-150);
    /* Höhe = oberer Rand + (Anzahl Stapel-Reihen) × Reihenhöhe + unterer Rand. --plan-reihen kommt je Zeile
       aus der Razol; mind. 1 Reihe, damit die „Nichts geplant"-Zeile ihre Höhe behält. */
    min-height: calc(var(--plan-balken-oben) * 2 + max(var(--plan-reihen, 1), 1) * var(--plan-balken-reihe));
    /* Feines Tagesraster als Hintergrund (senkrechte Linien je Tagesspalte) – ruhige Orientierung. */
    background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent calc(100% / var(--plan-tage) - 1px),
        var(--grau-150) calc(100% / var(--plan-tage) - 1px),
        var(--grau-150) calc(100% / var(--plan-tage)));
    overflow: hidden;
}

/* Wochenend-Tönung (deckungsgleich mit den grauen Kopf-Spalten) – je Wochenend-Tag ein Streifen. */
.plan-spur-we {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--grau-100);
    pointer-events: none;
}

/* Heute als zarte, senkrechte Kupfer-Tönung über die ganze Track-Höhe. */
.plan-spur-heute {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--kupfer-hell);
    pointer-events: none;
}

/* Hinweis in einer leeren Personen-Zeile (kein Einsatz im Monat). */
.plan-spur-leer {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: var(--grau-400);
    pointer-events: none;
}

/* Ein Spannbalken: absolut über seine Tage positioniert (left/width/top aus der Hilfe bzw. der Reihe). */
.plan-balken {
    position: absolute;
    height: var(--plan-balken-hoehe);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-s);
    font-size: 0.78rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 36, 47, 0.12);
    box-sizing: border-box;
}

/* Die dicke „× Tage"-Marke am Balkenanfang – klar ablesbare Dauer. */
.plan-balken-tage {
    flex: 0 0 auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 0.03rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.30);
}

.plan-balken-name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/* Echter, belegter Einsatz → VOLLTON Kupfer, weißer Text (Top-Kontrast). */
.plan-balken--echt {
    background: var(--kupfer);
    color: #ffffff;
}

/* Abgeleitet + fest mit dem Kunden abgestimmt → ebenfalls VOLLTON Kupfer (wie in der Vorlage). */
.plan-balken--overlay.ist-fest {
    background: var(--kupfer);
    color: #ffffff;
}

/* Abgeleitet + vorläufig (nur Planung) → SCHRAFFUR + gestrichelte Kupfer-Umrandung, kupferner Text. */
.plan-balken--overlay.ist-vorlaeufig {
    color: var(--kupfer-text);
    background: repeating-linear-gradient(45deg, #fbead3, #fbead3 6px, #f1d3ac 6px, #f1d3ac 12px);
    border: 1px dashed var(--kupfer);
    box-shadow: none;
}

.plan-balken--overlay.ist-vorlaeufig .plan-balken-tage {
    background: rgba(158, 94, 28, 0.16);
}

/* Überfälliger echter Balken: roter linker Akzentstreifen (dezent, wie bei den Wochen-Chips). */
.plan-balken--echt.ist-ueberfaellig {
    box-shadow: inset 3px 0 0 var(--fehler), 0 1px 2px rgba(15, 36, 47, 0.12);
}

/* Eine Tafel-Zeile = ein zusammenhängender Grid-Row (display: contents überträgt das Grid auf die
   Kinder, sodass alle Zellen aller Zeilen an denselben Spalten ausgerichtet sind). */
.plan-zeile {
    display: contents;
}

/* --- Kopfzeile (sticky oben) --- */
.plan-kopfzeile > * {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--grau-100);
    border-bottom: 1px solid var(--grau-200);
}

.plan-ecke {
    /* linke obere Ecke: zugleich oben UND links fixiert (über den Tagesköpfen). */
    left: 0;
    z-index: 3;
    padding: 0.6rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--grau-500);
    border-right: 1px solid var(--grau-200);
}

.plan-tagkopf {
    padding: 0.5rem 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--grau-700);
    border-left: 1px solid var(--grau-150);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Linke fixe Mitarbeiter-Spalte (Name + Rolle + Auslastung) --- */
.plan-person {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    background: var(--grau-0);
    border-right: 1px solid var(--grau-200);
    border-top: 1px solid var(--grau-150);
}

.plan-person-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.plan-person-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grau-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-person-rolle {
    font-size: 0.76rem;
    color: var(--grau-500);
}

/* Auslastungs-Mini-Balken je Person: graue Spur + farbige Füllung (Status), daneben „32 / 40 h". */
.plan-auslast {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.plan-auslast-balken {
    position: relative;
    flex: 1 1 auto;
    height: 0.5rem;
    min-width: 2.5rem;
    background: var(--grau-100);
    border-radius: 999px;
    overflow: hidden;
}

.plan-auslast-fuellung {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    transition: width 0.2s ease;
}

.plan-auslast-zahl {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--grau-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Ruhige Ampel je Auslastungsstatus (frei → gut → voll → überlastet). */
.plan-auslast.auslast-frei .plan-auslast-fuellung {
    background: var(--grau-400);
}

.plan-auslast.auslast-gut .plan-auslast-fuellung {
    background: var(--kupfer);
}

.plan-auslast.auslast-voll .plan-auslast-fuellung {
    background: var(--kupfer-stark);
}

.plan-auslast.auslast-ueber .plan-auslast-fuellung {
    background: var(--fehler);
}

.plan-auslast.auslast-ueber .plan-auslast-zahl {
    color: var(--fehler);
}

/* --- Tageszellen (klar abgegrenztes Drop-Ziel für Durchgang 2) --- */
.plan-zelle {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem;
    border-left: 1px solid var(--grau-150);
    border-top: 1px solid var(--grau-150);
    min-height: 3.2rem;
    min-width: 0;
}

.plan-tafel--monat .plan-zelle {
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.15rem;
    min-height: 2.6rem;
}

.plan-zelle.ist-leer {
    background: var(--grau-50);
}

/* Wochenende dezent abgesetzt (Kopf + Zellen). */
.plan-tagkopf.ist-wochenende,
.plan-zelle.ist-wochenende {
    background: var(--grau-100);
}

.plan-zelle.ist-wochenende.ist-leer {
    background: var(--grau-150);
}

/* Heute deutlich, aber ruhig hervorheben (Kopf kräftiger, Spalte zart kupfer getönt). */
.plan-tagkopf.ist-heute {
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--kupfer);
}

.plan-zelle.ist-heute {
    background: var(--kupfer-hell);
}

.plan-zelle.ist-heute.ist-leer {
    background: var(--kupfer-hell);
}

/* --- Einsatz-Chip (Block): Projektname + Stunden, ruhig gestapelt. --- */
.plan-chip {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    border-left: 3px solid var(--kupfer);
    border-radius: var(--radius-s);
    font-size: 0.82rem;
    line-height: 1.2;
}

.plan-chip-name {
    font-weight: 600;
    color: var(--grau-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.plan-chip-stunden {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--kupfer-text);
    font-variant-numeric: tabular-nums;
}

/* Kompakter Chip im Monat: nur die Tages-Summe, mittig, Details on hover/title. */
.plan-chip--kompakt {
    justify-content: center;
    padding: 0.2rem 0.35rem;
    width: 100%;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--kupfer-text);
}

.plan-zelle-leer {
    display: block;
}

/* --- Drag & Drop auf die Zellen (Durchgang 2) --- */

/* Während gezogen wird: alle Zellen bekommen einen zarten Ziel-Rahmen (man sieht die Drop-Felder). */
.plan-tafel.plan-zieht .plan-zelle {
    outline: 1px dashed var(--grau-300);
    outline-offset: -3px;
}

/* Die aktuell überschwebte Zelle deutlich (aber ruhig) hervorheben. */
.plan-zelle.ist-ziel {
    background: var(--kupfer-hell);
    outline: 2px solid var(--kupfer);
    outline-offset: -2px;
}

/* „+"-Knopf einer leeren Zelle (Fallback ohne Ziehen / Touch). Dezent, bis man die Zelle berührt. */
.plan-zelle-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2rem;
    padding: 0;
    background: transparent;
    border: 1px dashed var(--grau-300);
    border-radius: var(--radius-s);
    color: var(--grau-500);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

/* Auf Hover/Fokus der Zelle bzw. des Knopfes sichtbar (Touch zeigt ihn dauerhaft, s.u.). */
.plan-zelle:hover .plan-zelle-plus,
.plan-zelle-plus:focus-visible {
    opacity: 1;
    border-color: var(--kupfer-rand);
    color: var(--kupfer-text);
    background: var(--grau-0);
}

.plan-zelle-plus:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

/* Ohne feinen Hover (Touch): den „+" dauerhaft dezent zeigen, damit er bedienbar bleibt. */
@media (hover: none) {
    .plan-zelle-plus {
        opacity: 0.6;
    }
}

/* Block-Chip als Knopf (ziehbar + klickbar): erbt die Chip-Optik, ohne Button-Standard-Look. */
.plan-chip--knopf {
    width: 100%;
    text-align: left;
    cursor: grab;
    font: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.plan-chip--knopf:hover {
    border-color: var(--kupfer-rand);
    box-shadow: 0 2px 8px rgba(15, 36, 47, 0.08);
}

.plan-chip--knopf:active {
    cursor: grabbing;
}

.plan-chip--knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

/* Der gerade gezogene Block: halbtransparent. */
.plan-chip--knopf.ist-gezogen {
    opacity: 0.45;
    box-shadow: none;
}

/* Überfällig-Marke am Chip (Block + Ziehleiste): roter Akzent + kleines Warn-Symbol. */
.plan-chip.ist-ueberfaellig {
    border-left-color: var(--fehler);
}

.plan-chip-ueberfaellig {
    flex: 0 0 auto;
    color: var(--fehler);
    font-size: 0.8rem;
    line-height: 1;
}

/* Inline-Variante in der Legende (im Fließtext). */
.plan-chip-ueberfaellig--inline {
    display: inline;
}

/* --- Abgeleitetes Ausführungs-Overlay (Welle 6): geplante Ausführung, REIN INFORMATIV --- */
/* Erscheint zusätzlich zu den echten Einsatz-Chips: NICHT klickbar, NICHT ziehbar (bewusst ein <div>,
   kein Knopf, kein Fokus-Ziel). Optisch klar als „geplante Ausführung" (Kupfer) erkennbar. */
.plan-overlay-chip {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.28rem 0.5rem;
    border-radius: var(--radius-s);
    border: 1px solid var(--kupfer);
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: default;
    /* nicht auswählbar/anklickbar wirken – es ist reine Anzeige */
    user-select: none;
}

/* Fest mit dem Kunden abgestimmt → VOLLTON Kupfer mit weißem Text (Top-Kontrast, wie im Mockup). */
.plan-overlay-chip.ist-fest {
    background: var(--kupfer);
    border-color: var(--kupfer);
    color: #ffffff;
}

/* Vorläufig (nur Planung) → SCHRAFFUR (repeating-linear-gradient) + gestrichelte Kupfer-Umrandung. */
.plan-overlay-chip.ist-vorlaeufig {
    color: var(--kupfer-text);
    background:
        repeating-linear-gradient(45deg, #fbead3, #fbead3 7px, #f5dbb8 7px, #f5dbb8 14px);
    border: 1px dashed var(--kupfer);
}

.plan-overlay-chip-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.plan-overlay-chip-stunden {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Dezenter Overlay-Hinweis in der kompakten Monats-Zelle („+ N h geplant"). */
.plan-overlay-monat {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kupfer-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Legende für das Ausführungs-Overlay --- */
.plan-overlay-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.3rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-s);
    font-size: 0.82rem;
    color: var(--grau-700);
}

.plan-overlay-legende-titel {
    font-weight: 700;
    color: var(--grau-900);
}

.plan-overlay-legende-eintrag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.plan-overlay-legende-hinweis {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: var(--grau-500);
}

/* Kleine Farbfelder der Legende – identische Optik wie die Blöcke (fest = Vollton, vorläufig = Schraffur). */
.plan-overlay-swatch {
    display: inline-block;
    width: 26px;
    height: 14px;
    border-radius: 4px;
    flex: 0 0 auto;
}

.plan-overlay-swatch.ist-fest {
    background: var(--kupfer);
}

.plan-overlay-swatch.ist-vorlaeufig {
    background:
        repeating-linear-gradient(45deg, #fbead3, #fbead3 5px, #f5dbb8 5px, #f5dbb8 10px);
    border: 1px dashed var(--kupfer);
}

/* --- Inline-Editor eines Blocks (kleines Popover, nutzt die Modal-Hintergrund-Schicht) --- */
.plan-editor {
    width: min(26rem, 92vw);
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: 0 18px 50px rgba(15, 36, 47, 0.22);
}

/* „Entfernen" als ruhiger Text-Gefahr-Knopf (links in der verteilten Aktionsleiste). */
.btn-gefahr-text {
    background: transparent;
    color: var(--fehler);
    border: 1px solid transparent;
}

.btn-gefahr-text:hover:not(:disabled) {
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
}

/* Aktionsleiste mit „Entfernen" links und Abbrechen/Speichern rechts. */
.aktionsleiste--verteilt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.aktionsleiste-rechts {
    display: inline-flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Datenschutz-Hinweis an der Notiz (warm, nicht alarmierend). */
.feld-hilfe--warnung {
    color: var(--kupfer-text);
}

/* Sanfter Aktions-Fehler unter der Tafel (Mutationsfehler) – mit OK-Knopf. */
.plan-aktionsfehler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* --- LIVE-Vorschau der Stunden-Verteilung im „+"-Dialog (Einsatzplan-Stufe S3) ---
   Ruhige, informative Fläche unter dem Gesamt-Stunden-Feld. Zeigt, auf welche Arbeitstage sich der
   Einsatz verteilt; bei fehlendem Wochenprofil ein warmer Pflegehinweis (nicht alarmierend). */
.einsatz-vorschau {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.einsatz-vorschau:empty {
    margin-top: 0;
}

.einsatz-vorschau-satz {
    margin: 0;
    padding: 0.5rem 0.7rem;
    background: var(--info-hg);
    border: 1px solid var(--info-rand);
    border-radius: var(--radius-s);
    color: var(--info-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Mehrtägige Verteilung dezent hervorheben (das ist der eigentliche Mehrwert des Features). */
.einsatz-vorschau-satz.ist-mehrtaegig {
    font-weight: 600;
}

/* Pflege-/Prüfhinweis (z. B. kein Wochenprofil) – warm, ruhig, wie der Notiz-Datenschutzhinweis. */
.einsatz-vorschau-hinweis {
    margin: 0;
    color: var(--kupfer-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .plan-steuerung {
        gap: 0.6rem 0.75rem;
    }

    .plan-periode {
        order: -1;
        flex-basis: 100%;
    }

    .plan-tafel--woche {
        --plan-person-breite: 10rem;
        --plan-tag-breite: minmax(6rem, 1fr);
    }
}

/* =========================================================================
   Board-Benachrichtigung (Einsatzplan-Stufe S4)
   Ruhige Bildschirm-Benachrichtigung, wenn ein Kollege am gemeinsamen Board
   etwas ändert. Zwei Teile: (1) ein dezenter Toast unten rechts (klingt selbst
   ab, wegklickbar), (2) die Glocke in der Kopfzeile mit ungelesen-Zähler +
   Aktivitäten-Panel. Markenkonform: Kupfer als ruhiger Akzent, keine grellen
   Alarmfarben – es ist eine Info, kein Fehler.
   ========================================================================= */

/* --- Toast unten rechts (analog zur Update-Benachrichtigung, eigener ruhiger Ton) --- */
.benach-toast {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1100;
    max-width: 23rem;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-left: 3px solid var(--kupfer);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-l);
    animation: benach-toast-rein 0.22s ease-out;
}



.benach-toast-punkt {
    margin-top: 0.45rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--kupfer);
    flex: none;
}

.benach-toast-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.benach-toast-titel {
    font-weight: 600;
    color: var(--grau-900);
    font-size: 0.95rem;
}

.benach-toast-meldung {
    font-size: 0.875rem;
    color: var(--grau-500);
    word-break: break-word;
}

.benach-toast-zu {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    margin: -0.2rem -0.2rem 0 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--grau-400);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.benach-toast-zu:hover {
    background: var(--grau-100);
    color: var(--grau-700);
}

.benach-toast-zu:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* --- Glocke in der Kopfzeile --- */
.glocke-huelle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.glocke-knopf {
    position: relative;
}

/* ungelesen-Zähler als kleines Kupfer-Abzeichen oben rechts an der Glocke. */
.glocke-abzeichen {
    position: absolute;
    top: 0.15rem;
    right: 0.1rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--kupfer);
    color: #1d1d1b;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--grau-0);
    pointer-events: none;
}

/* Unsichtbare Auffang-Fläche: Klick außerhalb des Panels schließt es. */
.glocke-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: default;
}

/* --- Aktivitäten-Panel (Dropdown unter der Glocke) --- */
.benach-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1200;
    width: 22rem;
    max-width: min(22rem, calc(100vw - 1.5rem));
    max-height: 26rem;
    overflow-y: auto;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-l);
    animation: benach-toast-rein 0.16s ease-out;
}

.benach-panel-kopf {
    position: sticky;
    top: 0;
    padding: 0.85rem 1rem 0.6rem;
    background: var(--grau-0);
    border-bottom: 1px solid var(--grau-150);
}

.benach-panel-titel {
    font-weight: 600;
    color: var(--grau-900);
}

.benach-panel-leer {
    margin: 0;
    padding: 1rem;
    color: var(--grau-500);
    font-size: 0.9rem;
}

.benach-panel-liste {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0;
}

.benach-panel-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
}

.benach-panel-zeile + .benach-panel-zeile {
    border-top: 1px solid var(--grau-150);
}

.benach-panel-punkt {
    margin-top: 0.5rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--kupfer);
    flex: none;
}

.benach-panel-inhalt {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.benach-panel-text {
    color: var(--grau-900);
    font-size: 0.9rem;
    word-break: break-word;
}

.benach-panel-zeit {
    color: var(--grau-400);
    font-size: 0.8rem;
}

/* =========================================================================
   Sync-Statusanzeige (Feature #40) – Icon-Knopf mit Status-Punkt in der
   Kopfzeile + kleines Popover. Nutzt Hülle/Overlay/Panel wie die Glocke;
   nur der ruhige Status-Punkt und die Popover-Zeilen sind hier eigen.
   ========================================================================= */
.sync-huelle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.sync-knopf {
    position: relative;
}

/* Dezenter Status-Punkt: rechts unten am Knopf (in der Zeile davor vor dem Text).
   „an" = ruhiges Grün (Signal „verbunden"), „aus" = warmes Grau (nicht erreichbar).
   Das Grün ist bewusst nur ein winziger Signal-Punkt – die Marke bleibt Navy/Kupfer. */
.sync-punkt {
    position: absolute;
    right: 0.28rem;
    bottom: 0.28rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--grau-0);
    pointer-events: none;
}

.sync-punkt-an {
    background: #2e8b57;
}

.sync-punkt-aus {
    background: var(--grau-400);
}

/* Das Sync-Popover ist etwas schmaler als das Aktivitäten-Panel (weniger Inhalt). */
.sync-panel {
    width: 20rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
}

.sync-panel-inhalt {
    padding: 0.85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Statuszeile mit vorangestelltem Punkt: der Punkt sitzt hier NICHT absolut,
   sondern inline links vor dem Text (statisch positioniert). */
.sync-status-zeile {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.sync-status-zeile .sync-punkt {
    position: static;
    box-shadow: none;
    flex: none;
}

.sync-zuletzt {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--grau-700);
}

.sync-zuletzt-titel {
    color: var(--grau-500);
}

.sync-zuletzt-wert {
    font-weight: 600;
    color: var(--grau-900);
}

/* Dezenter UNC-Hinweis (nur bei gemapptem Laufwerk + offline). Ruhige Warn-Fläche. */
.sync-hinweis {
    margin: 0;
    padding: 0.6rem 0.7rem;
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-s);
    color: var(--warn-text);
    font-size: 0.85rem;
    line-height: 1.4;
}

.sync-hinweis code {
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
}

/* Der „Jetzt synchronisieren"-Knopf füllt die Panel-Breite (großes Klick-Ziel). */
.sync-jetzt-knopf {
    width: 100%;
    margin-top: 0.1rem;
}

/* Ruhige Klartext-Rückmeldung nach dem Sync. */
.sync-meldung {
    margin: 0;
    font-size: 0.9rem;
    color: var(--grau-700);
}

/* =========================================================================
   Projekte archivieren / löschen
   Löschen-Bestätigung (deutliche, aber nicht schreiende Rückfrage) + der
   dezente „Archiv anzeigen"-Bereich unter dem Board. Markenkonform: das Rot
   nur für die echte Gefahr (endgültiges Löschen), das Archiv bleibt ruhig-grau.
   ========================================================================= */

/* Warntext im Löschen-Dialog: klar, aber ruhig (kein greller Vollflächen-Alarm). */
.warn-box {
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.95rem;
    background: var(--fehler-hg);
    border: 1px solid var(--fehler-rand);
    border-left: 3px solid var(--fehler);
    border-radius: var(--radius-m);
    color: var(--grau-900);
    line-height: 1.45;
}

/* Dezenter Umschalter „Archiv anzeigen (N)" unter dem Board. */
.archiv-umschalter {
    margin: 1.1rem 0 0.4rem;
}

.archiv-umschalter-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.2rem;
    background: transparent;
    border: none;
    color: var(--grau-700);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--grau-400);
    text-underline-offset: 0.15em;
}

.archiv-umschalter-knopf:hover,
.archiv-umschalter-knopf:focus-visible {
    color: var(--kupfer-text);
    text-decoration-color: var(--kupfer);
}

/* Der aufgeklappte Archiv-Bereich: bewusst gedämpft (weggeräumte Projekte). */
.archiv-bereich {
    margin: 0 0 1rem;
    padding: 0.7rem 0.95rem;
    background: var(--grau-100);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.archiv-bereich-titel {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--grau-700);
}

.archiv-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.archiv-zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.55rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
}

.archiv-zeile-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.archiv-zeile-name {
    color: var(--grau-900);
    font-weight: 600;
    word-break: break-word;
}

.archiv-zeile-unterzeile {
    color: var(--grau-400);
    font-size: 0.85rem;
}

.archiv-zeile-aktionen {
    display: flex;
    gap: 0.4rem;
    flex: none;
}

/* Aktionsleiste „Archivieren / Löschen" im Projekt-Detail (unter den Kopfdaten). */
.projekt-archiv-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--grau-200);
}

/* =========================================================================
   WIEDERVORLAGE + DEADLINE (Feature #46/#47): der Erinnerungs-Editor (Dialog,
   aus der Übersicht + im Detail wiederverwendet), der Detail-Block und die
   Marke je Laufzettel-Aufgabe. Markenkonform: Kupfer/Beige als warme „daran
   denken"-Hervorhebung (Wiedervorlage 🔔); Rot bleibt der echten Frist/Gefahr
   vorbehalten (Deadline ⏰ überfällig). Reine Anzeige – Aufbereitung macht der
   getestete Helfer.
   ========================================================================= */

/* Der Editor ist ein schmaler Dialog (zwei Abschnitte: Wiedervorlage + Deadline, je Datum + Uhrzeit). */
.modal-wiedervorlage {
    max-width: 30rem;
}

/* Kleines 🔔 vor der Editor-/Block-Überschrift (rein dekorativ). */
.wiedervorlage-titel-symbol {
    margin-right: 0.35rem;
    font-size: 0.95em;
}

/* --- Erinnerungs-Abschnitte (Wiedervorlage / Deadline) im Editor UND im Detail-Block --------------
   Jeder Abschnitt ist ein <fieldset> mit ruhiger Umrandung + <legend> mit Symbol – so sind die zwei
   Achsen klar getrennt, ohne laut zu wirken. */
.erinnerung-abschnitt {
    margin: 0 0 0.9rem;
    padding: 0.7rem 0.85rem 0.85rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.erinnerung-abschnitt:last-of-type {
    margin-bottom: 0;
}

/* Die Wiedervorlage warm angedeutet, die Deadline neutral (die Farbe „überfällig" trägt der Chip). */
.erinnerung-abschnitt--wv {
    border-color: var(--kupfer-rand);
    background: var(--beige);
}

.erinnerung-abschnitt-titel {
    padding: 0 0.35rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--grau-700);
}

.erinnerung-abschnitt-titel span[aria-hidden] {
    margin-right: 0.2rem;
}

/* Datum + Uhrzeit nebeneinander (Uhrzeit schmaler). Auf sehr engen Breiten bricht die Uhrzeit um. */
.erinnerung-datum-zeit {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
}

.erinnerung-datum-zeit .feld {
    margin-bottom: 0;
}

.erinnerung-datum-zeit .feld:first-child {
    flex: 1 1 9rem;
    min-width: 8rem;
}

/* Das Uhrzeit-Feld nimmt nur so viel Breite wie nötig (ein <input type="time"> ist schmal). */
.feld-zeit {
    flex: 0 1 7rem;
    min-width: 6rem;
}

/* Füller, der die linke Seite der verteilten Aktionsleiste einnimmt, wenn es (noch) kein „Entfernen"
   gibt – so bleiben Abbrechen/Speichern rechts, auch ohne linken Knopf. */
.aktionsleiste-fueller {
    flex: 1 1 auto;
}

/* „Entfernen" ist eine ruhige Sekundär-Aktion (kein Gefahr-Rot – Wiedervorlage-Löschen ist
   ungefährlich und jederzeit neu setzbar). */
.wiedervorlage-entfernen {
    color: var(--grau-600, #4b5563);
}

/* --- Wiedervorlage-Block im Projekt-Detail (Reiter „Überblick") --- */
.wiedervorlage-block {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--grau-200);
}

.wiedervorlage-titel {
    display: flex;
    align-items: center;
    margin: 0 0 0.2rem;
}

.wiedervorlage-hinweis {
    margin: 0 0 0.9rem;
}

.wiedervorlage-aktionen {
    margin-top: 0.9rem;
}

/* --- „In Outlook eintragen" (Wiedervorlage Stufe 3) --- */
/* Ruhiger, abgesetzter Bereich unter der Speichern-Zeile bzw. im Editor unter der Notiz. Der Knopf ist
   sekundär (kein Wettbewerb zur Haupt-Aktion „Speichern"); darunter ein kurzer Hilfetext und – nach dem
   Klick – die Rückmeldung. */
.wiedervorlage-outlook {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--grau-200);
}

/* Kleines 📅-Symbol steckt im Knopftext – der Knopf selbst bleibt im Sekundär-Stil, nimmt aber nur so viel
   Breite wie nötig (linksbündig). */
.wiedervorlage-outlook-knopf {
    align-self: flex-start;
}

.wiedervorlage-outlook-hinweis {
    margin: 0;
    color: var(--grau-600, #4b5563);
}

/* Rückmeldung nach dem Klick – dezent farbcodiert: Erfolg (Beige/Navy) vs. Fehler/„nicht gefunden" (Rot).
   Bewusst schlicht (kein Kasten wie die großen Status-Boxen), passend zum kleinen Bereich. */
.wiedervorlage-outlook-meldung {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.wiedervorlage-outlook-meldung.ist-erfolg {
    color: var(--erfolg);
}

.wiedervorlage-outlook-meldung.ist-fehler {
    color: var(--fehler);
}

/* =========================================================================
   Erinnerungs-Pop-up (Feature #47, Stufe 2) – prominentes, markenkonformes
   Modal, das eine fällige Wiedervorlage/Deadline in JEDEM Reiter aufpoppt.
   Deutlich (dunkles Overlay, kräftiges Kupfer-Band, große Fläche), aber nicht
   grell: Navy-Text auf Weiß, Kupfer nur als Akzent-Band/Highlight – nie als
   Fläche hinter weißem Text (Markenregel). Keine externen Assets/JS.
   ========================================================================= */

/* Abgedunkeltes, leicht unscharfes Overlay – bewusst kräftiger als der ruhige
   Board-Toast, damit die Erinnerung nicht zu übersehen ist. Zentriert das Modal;
   sehr hoher z-index (über Toast/Glocke/Update-Hinweis). */
.erinnerung-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(20, 22, 28, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: erinnerung-overlay-rein 0.16s ease-out;
}



.erinnerung-modal {
    position: relative;
    width: 100%;
    max-width: 30rem;
    background: var(--grau-0);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-l);
    overflow: hidden;
    animation: erinnerung-modal-rein 0.2s ease;
}



/* Kräftiges Kupfer-Band am oberen Rand – der deutliche Marken-Akzent (kein Text
   darauf, daher regelkonform). Macht das Fenster sofort als „Erinnerung" erkennbar.
   Die Ampel-Art färbt das Band (Welle 4): Kupfer = Wiedervorlage (neutral),
   Amber = Vorwarnung („wird knapp"), kräftiges Rot = überfällige Deadline. Bewusst
   KRÄFTIGE Vollfarben (nicht die hellen Pillen-Flächen) – auf dem 6px-Band ohne Text. */
.erinnerung-band {
    height: 6px;
    background: var(--kupfer);
}

.erinnerung-band.ampel--grau {
    background: var(--kupfer);
}

.erinnerung-band.ampel--gelb {
    background: var(--warn-text);
}

.erinnerung-band.ampel--rot {
    background: var(--fehler);
}

.erinnerung-inhalt {
    padding: 1.5rem 1.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.erinnerung-kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Titel je Art („🔔 Wiedervorlage" / „⏰ Deadline") – groß, Navy, gut lesbar. */
.erinnerung-art {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--grau-900);
    line-height: 1.2;
}

/* Warteschlangen-Zähler „1 von 3" – dezente, warme Kupfer-Pille (Kupfer-Text auf
   heller Kupfer-Tönung = AA, kein Weiß auf Kupfer). */
.erinnerung-zaehler {
    flex: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

/* Haupttext = Aufgabe ODER Projekt-Bezeichnung – klar hervorgehoben. */
.erinnerung-haupttext {
    margin: 0.2rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grau-900);
    line-height: 1.35;
    word-break: break-word;
}

/* Unterzeile = Projekt/Kunde – ruhiger, sekundär. */
.erinnerung-unterzeile {
    margin: 0;
    font-size: 0.92rem;
    color: var(--grau-500);
    word-break: break-word;
}

/* Notiz – in einer ruhigen, leicht abgesetzten Fläche, damit sie als „Merktext" auffällt. */
.erinnerung-notiz {
    margin: 0.15rem 0 0;
    padding: 0.6rem 0.8rem;
    background: var(--grau-50);
    border-left: 3px solid var(--kupfer-rand);
    border-radius: var(--radius-s);
    color: var(--grau-700);
    font-size: 0.95rem;
    line-height: 1.45;
    word-break: break-word;
}

/* „fällig seit …" – dezent, aber sichtbar (Dringlichkeit ohne Alarm-Rot). */
.erinnerung-faellig {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kupfer-text);
}

/* Vorwarnung „wird knapp — noch nicht erledigt. Deadline in N Tagen": warme Warn-Fläche
   mit Warn-Text (Amber-Ton der Ampel), damit sie klar als Vorabhinweis abgesetzt ist –
   deutlich ruhiger als eine überfällige Deadline, aber sichtbar dringlicher als neutral. */
.erinnerung-faellig--vorwarnung {
    display: inline-block;
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-s);
    background: var(--warn-hg);
    color: var(--warn-text);
}

.erinnerung-fehler {
    margin: 0.1rem 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fehler);
}

/* Hauptknöpfe: „Zum Projekt" (primär/Navy, volle Breite oben) + Erledigt + Später erinnern (sekundär,
   Zeile darunter). Große Klick-Ziele. */
.erinnerung-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.erinnerung-btn {
    flex: 1 1 0;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* „Zum Projekt" ist der PRIMÄR-Weg (Navy) und nimmt die volle Breite oben ein – klare Hierarchie: die
   wichtige Handlung prominent, „Erledigt" + „Später erinnern" teilen sich die Zeile darunter. Ein dezenter
   warmer Kupfer-Rand (Markenfarbe) hebt ihn zusätzlich von den beiden sekundären Knöpfen ab. */
.erinnerung-btn--projekt {
    flex-basis: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: inset 0 0 0 1.5px var(--kupfer);
}

.erinnerung-btn--projekt .erinnerung-btn-symbol {
    font-size: 1.05em;
    line-height: 1;
    transform: translateY(0.02em);
}

/* Snooze-Auswahl */
.erinnerung-snooze {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.erinnerung-snooze-optionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.erinnerung-snooze-btn {
    flex: 1 1 8rem;
}

/* „Eigener Zeitpunkt" – abgesetzter kleiner Block mit Datum + Uhrzeit + Bestätigen. */
.erinnerung-eigen {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.8rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.erinnerung-eigen-titel {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grau-700);
}

.erinnerung-eigen-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.erinnerung-eigen-datum {
    flex: 1 1 8rem;
    min-width: 8rem;
}

.erinnerung-eigen-zeit {
    flex: 0 1 6rem;
    min-width: 5.5rem;
}

.erinnerung-eigen-ok {
    flex: none;
}

.erinnerung-zurueck {
    align-self: flex-start;
}

/* =========================================================================
   MEINE AUFGABEN / TEAM (Feature #49, Stufe B1) – Agenda (Ansicht 1) + Admin-
   Gesamtübersicht (Ansicht 4). Layout 1:1 nach dem vom Inhaber freigegebenen
   Mockup, umgesetzt mit den Marken-Variablen (Navy/Kupfer + Status-Töne) statt
   roher Hex-Werte. Ruhig, viel Weißraum, große Klick-Ziele, AA-Kontraste,
   Tastatur-bedienbar. Alle Klassen mit ma-* Präfix (kollisionsfrei).
   ========================================================================= */
.ma-bereich {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 60rem;
}

/* --- Panel „Meine Aufgaben" --- */
.ma-panel {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--schatten-s);
}

.ma-panel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--grau-150);
    background: var(--grau-50);
}

.ma-panel-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--grau-900);
}

.ma-glocke {
    color: var(--kupfer-text);
    flex: none;
}

.ma-panel-body {
    padding: 1.1rem;
}

/* --- Umschalter „Meine / Alle (Team)" (nur Admin) --- */
.ma-toggle {
    display: inline-flex;
    border: 1px solid var(--grau-300);
    border-radius: 999px;
    overflow: hidden;
}

.ma-toggle-knopf {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.9rem;
    color: var(--grau-500);
    padding: 0.35rem 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ma-toggle-knopf:hover {
    color: var(--grau-900);
}

.ma-toggle-knopf.ma-toggle-an {
    background: var(--akzent);
    color: #fff;
    font-weight: 500;
}

.ma-toggle-knopf:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* --- „Angezeigt für <Name>" + Ändern-Link --- */
.ma-ich-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--grau-200);
}

.ma-ich-text {
    color: var(--grau-500);
    font-size: 0.9rem;
}

.ma-ich-text strong {
    color: var(--grau-900);
    font-weight: 600;
}

.ma-aendern-link {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.88rem;
    color: var(--kupfer-text);
    cursor: pointer;
    padding: 0.15rem 0.25rem;
    border-radius: var(--radius-s);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ma-aendern-link:hover {
    color: var(--kupfer-stark);
}

.ma-aendern-link:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* ============================================================================
   Steuerung der eigenen Agenda: Filter-Chips (eigene Zeile) + Gruppieren-
   Umschalter (in der Werkzeugleiste). Wirken rein auf die schon geladene Liste
   (kein Nachladen). Ruhig/dezent, damit die Liste im Vordergrund bleibt
   (Foundations: klare Hierarchie).
   ============================================================================ */

/* --- Filter-Chips (Alle · Überfällig · Heute · Prio hoch · Ohne Termin) – eigene ruhige Zeile
   unter der Werkzeugleiste. --- */
.ma-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
}

.ma-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--grau-700);
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ma-chip:hover {
    border-color: var(--kupfer-rand);
    color: var(--grau-900);
}

.ma-chip:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* Aktiver Chip: deutlich hervorgehoben (Navy-Fläche) – aria-pressive Auswahl auch farblich klar. */
.ma-chip--an {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
    font-weight: 500;
}

.ma-chip--an:hover {
    color: #fff;
}

/* Die dezente Trefferzahl am Chip. */
.ma-chip-zahl {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--grau-400);
}

.ma-chip:hover .ma-chip-zahl {
    color: var(--grau-500);
}

.ma-chip--an .ma-chip-zahl {
    color: rgba(255, 255, 255, 0.75);
}

/* --- Gruppieren-Umschalter (nach Datum / nach Projekt) – nutzt die .ma-toggle-Optik --- */
.ma-gruppieren {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ma-gruppieren-label {
    font-size: 0.82rem;
    color: var(--grau-500);
}

/* --- Hinweis, wenn der aktive Filter nichts trifft (Chips bleiben sichtbar) --- */
.ma-filter-leer {
    margin-bottom: 1rem;
}

/* --- Gruppen-Abschnitte (Heute / Diese Woche / …) --- */
.ma-grp {
    margin-bottom: 1.2rem;
}

.ma-grp:last-child {
    margin-bottom: 0;
}

.ma-grp-titel {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.ma-grp-zahl {
    color: var(--grau-400);
    font-weight: 500;
    letter-spacing: 0;
}

/* Der „Überfällig"-Abschnitt bekommt die dringende, rote Überschrift (genehmigter Entwurf) – er steht
   ganz oben und drängt am meisten. Ein kleines ⚠-Zeichen vorweg (dekorativ). */
.ma-grp--dringend .ma-grp-titel {
    color: var(--fehler);
}

.ma-grp--dringend .ma-grp-titel::before {
    content: "⚠";
    margin-right: 0.35rem;
    font-weight: 700;
}

/* Der „Heute"-Abschnitt wird ruhig betont (ink-farbene Überschrift statt Grau) – wichtig, aber nicht
   alarmierend (das Rot bleibt „Überfällig" vorbehalten). */
.ma-grp--heute .ma-grp-titel {
    color: var(--grau-900);
}

/* --- Eine Aufgabenzeile = großes Klick-Ziel (ganze Zeile öffnet das Projekt) --- */
.ma-task {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.ma-task + .ma-task {
    margin-top: 0.45rem;
}

.ma-task:hover {
    border-color: var(--kupfer-rand);
    box-shadow: 0 2px 10px rgba(15, 36, 47, 0.07);
}

.ma-task:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.ma-task:active {
    transform: translateY(1px);
}

.ma-task-haupt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Titelzeile = Text + kleine Marken (🔔/🔁) nebeneinander, umbruchfähig. */
.ma-task-titel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--grau-900);
}

.ma-task-titel-text {
    min-width: 0;
}

/* Kleine, dezente Marke hinter dem Titel (🔔 = eigene Wiedervorlage, 🔁 = Wiederholung). Rein
   kennzeichnend, gedämpft – der Titel bleibt der Blickfang (Foundations: klare Hierarchie). */
.ma-marke {
    flex: none;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--grau-500);
    cursor: default;
}

.ma-task-meta {
    font-size: 0.82rem;
    color: var(--grau-500);
}

.ma-task-rechts {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Prioritäts-Badge (Hoch rot / Normal grau / Niedrig hell) --- */
.ma-prio {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ma-prio-punkt {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    flex: none;
}

.ma-prio--hoch {
    background: var(--fehler-hg);
    color: var(--fehler);
}

.ma-prio--hoch .ma-prio-punkt {
    background: var(--fehler);
}

.ma-prio--normal {
    background: var(--grau-100);
    color: var(--grau-500);
}

.ma-prio--normal .ma-prio-punkt {
    background: var(--grau-400);
}

.ma-prio--niedrig {
    background: var(--grau-100);
    color: var(--grau-400);
}

.ma-prio--niedrig .ma-prio-punkt {
    background: var(--grau-300);
}

/* Nur-Punkt-Variante für die Legende (kein Text). */
.ma-prio--punktnur {
    padding: 0.2rem 0.35rem;
}

/* Nur-Punkt-Variante in der ruhigen Aufgabenzeile (genehmigter Entwurf): ein nackter, etwas größerer
   Farbpunkt OHNE Pillen-Fläche – die Farbe ist nie die einzige Info (Tooltip/aria „Priorität …" trägt
   die Bedeutung). */
.ma-prio--nur-punkt {
    padding: 0;
    background: transparent;
}

.ma-prio--nur-punkt .ma-prio-punkt {
    width: 0.55rem;
    height: 0.55rem;
}

/* ============================================================================
   EINHEITLICHE AMPEL (Aufgaben-Workflow-Paket, Welle 4)
   Ein Farb-Vokabular für „wie dringend?" – überall gleich: Agenda-Termin-Pille,
   Team-/Admin-„Fällig"-Zelle und (farblich) die Laufzettel-„Fertig bis"-Marke.
   Nur Farbe (Fläche + Text); Form/Abstand kommen von der jeweiligen Basisklasse
   (.ma-pille / .ma-faellig-pille / .erinnerung-band). Markenkonform:
     grau  = offen/später   (neutral)
     gelb  = bald fällig     (warmes Kupfer/Amber – innerhalb der Vorwarnzeit)
     rot   = überfällig      (markenverträgliches Rot)
     grün  = erledigt        (Navy auf Beige, ausgegraut)
   Die Farbe ist NIE die einzige Information – es steht immer ein Text/Tooltip
   daneben (barrierearm). AA-Kontraste über die bestehenden Design-Tokens.
   ============================================================================ */
.ampel--grau {
    background: var(--grau-100);
    color: var(--grau-600, #4b5563);
}

.ampel--gelb {
    background: var(--warn-hg);
    color: var(--warn-text);
}

.ampel--rot {
    background: var(--fehler-hg);
    color: var(--fehler);
}

.ampel--gruen {
    background: var(--erfolg-hg);
    color: var(--erfolg);
}

/* --- Termin-Pille (Ampel-Farbe: grau/gelb/rot/grün über .ampel--*) --- */
.ma-pille {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Bestandsklassen der Termin-Pille bleiben als Alias auf die einheitliche Ampel bestehen
   (rückwärtskompatibel für Stellen/Tests, die sie noch nennen): frist = rot, offen = grau. */
.ma-pille--frist {
    background: var(--fehler-hg);
    color: var(--fehler);
}

.ma-pille--offen {
    background: var(--grau-100);
    color: var(--grau-600, #4b5563);
}

/* „Fällig"-Zelle der Team-/Admin-Übersicht: kompakte Ampel-Pille (Farbe über .ampel--*). */
.ma-faellig-pille {
    display: inline-block;
    font-weight: 700;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* --- Status-Pille (Offen / In Bearbeitung / wartet …) --- */
.ma-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ma-status--offen {
    background: var(--grau-100);
    color: var(--grau-500);
}

.ma-status--arbeit {
    background: var(--warn-hg);
    color: var(--warn-text);
}

.ma-status--warten {
    background: var(--info-hg);
    color: var(--info-text);
}

.ma-status--erledigt {
    background: var(--erfolg-hg);
    color: var(--erfolg);
}

/* Status-Fundament (Transparenz-Paket, Baustein 3): Blockiert = rote/dunkle Pille („es geht nicht
   weiter" fällt sofort auf). Fremdgewerk nutzt die bestehende Wartet-Pille (.ma-status--warten). */
.ma-status--blockiert {
    background: var(--fehler-hg);
    color: var(--fehler);
}

/* --- Legende unter der Agenda --- */
.ma-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0 0.25rem;
    font-size: 0.8rem;
    color: var(--grau-500);
}

.ma-legende > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* --- Selbst-Zuordnung („Ich bin …") --- */
.ma-zuordnung {
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-left: 3px solid var(--kupfer);
    border-radius: var(--radius-m);
    padding: 1rem 1.1rem;
}

.ma-zuordnung-titel {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--grau-900);
}

.ma-zuordnung-text {
    margin: 0 0 0.85rem;
    color: var(--grau-700);
    font-size: 0.92rem;
}

.ma-zuordnung-leer {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.9rem;
}

.ma-zuordnung-wahl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ma-zuordnung-wahl label {
    font-size: 0.9rem;
    color: var(--grau-700);
    font-weight: 500;
}

.ma-select {
    font: inherit;
    font-size: 0.95rem;
    color: var(--grau-900);
    background: var(--grau-0);
    border: 1px solid var(--grau-300);
    border-radius: var(--radius-s);
    padding: 0.45rem 0.6rem;
    min-width: 14rem;
    cursor: pointer;
}

.ma-select:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
    border-color: var(--akzent-rand);
}

/* ============================================================================
   „🔥 BRENNT GERADE" – Admin-Sektion (Aufgaben-Workflow-Paket, Welle 5)
   Hervorgehobene Card OBERHALB der vollständigen Team-Tabelle: projektübergreifend
   nur die drängenden Aufgaben (rot = überfällig / gelb = bald fällig), dringendste
   zuerst. Der ruhige Rest bleibt in der Tabelle darunter. Markenkonform: warmes
   Beige (Kupfer-nah) als Card-Ton, Navy-Text, Kupfer-Akzentstreifen. Die Ampel-
   Farbe der Zeile steckt in einem LINKEN Balken (nie Farbe als einzige Info – die
   Frist-Marke trägt Text + Punkt + Tooltip; barrierearm).
   ============================================================================ */
.ma-brennt {
    margin: 0 0 1.4rem;
    padding: 1rem 1.1rem 1.1rem;
    background: var(--warn-hg);
    border: 1px solid var(--grau-200);
    border-top: 3px solid var(--kupfer);
    border-radius: var(--radius-l);
}

.ma-brennt-titel {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--grau-900);
}

.ma-brennt-flamme {
    font-size: 1.1rem;
    line-height: 1;
}

.ma-brennt-zahl {
    color: var(--kupfer-text);
    font-weight: 700;
}

/* Leerfall: ruhige, positive Entwarnung – kein Alarm, keine leere Fläche. */
.ma-brennt-entwarnung {
    margin: 0;
    color: var(--grau-700);
    font-size: 0.92rem;
}

.ma-brennt-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ma-brennt-zeile {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-left: 4px solid var(--grau-300);
    border-radius: var(--radius-m);
    overflow: hidden;
}

/* Linker Balken in der Ampelfarbe der Zeile (rot/gelb; grau/grün kommen hier nie vor). */
.ma-brennt-zeile.ampel--rot {
    border-left-color: var(--fehler);
}

.ma-brennt-zeile.ampel--gelb {
    border-left-color: var(--kupfer);
}

/* Ganze Zeile = ein großes Klick-Ziel (öffnet das Projekt). */
.ma-brennt-knopf {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ma-brennt-knopf:hover {
    background: var(--grau-50);
}

.ma-brennt-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
}

/* Frist-/Termin-Marke (Ampelfarbe über .ampel--*) mit Punkt – feste Breite für saubere Spalten. */
.ma-brennt-frist {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    min-width: 5.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ma-brennt-punkt {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

/* Mitte: Bauvorhaben + Kunde (oben, kräftig) und die Aufgabe (darunter, ruhiger). */
.ma-brennt-mitte {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ma-brennt-bv {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--grau-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-brennt-aufgabe {
    font-size: 0.85rem;
    color: var(--grau-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zuständig: Avatar-Kürzel + Klartext (auf schmalen Breiten blendet der Text aus). */
.ma-brennt-wer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    color: var(--grau-700);
    font-size: 0.85rem;
}

.ma-brennt-wer-text {
    white-space: nowrap;
}

@media (max-width: 720px) {
    .ma-brennt-wer-text {
        display: none;
    }
}

/* --- Admin-Gesamtübersicht (Tabelle, Ansicht 4) --- */
.ma-alle-hinweis {
    margin: 0 0 0.85rem;
    color: var(--grau-500);
    font-size: 0.9rem;
}

.ma-tabelle-huelle {
    overflow-x: auto;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.ma-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ma-tabelle thead th {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--grau-500);
    font-weight: 700;
    padding: 0.6rem 0.7rem;
    background: var(--grau-50);
    border-bottom: 1px solid var(--grau-200);
    white-space: nowrap;
}

.ma-tabelle tbody td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--grau-150);
    vertical-align: middle;
    color: var(--grau-700);
}

.ma-tabelle tbody tr:last-child td {
    border-bottom: none;
}

.ma-tabelle-zeile {
    cursor: pointer;
    transition: background 0.12s ease;
}

.ma-tabelle-zeile:hover {
    background: var(--grau-50);
}

.ma-tabelle-zeile:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
}

.ma-tnum {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Avatar-Kürzel in der Team-Tabelle (Navy-Kreis, weiße Initialen). */
.ma-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--akzent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.ma-zustaendig {
    color: var(--grau-700);
}

/* --- Ändern-Dialog („Das bin nicht ich") --- */
.ma-dialog-hintergrund {
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 27, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
}

.ma-dialog {
    background: var(--grau-0);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-l);
    width: 100%;
    max-width: 27rem;
    overflow: hidden;
}

.ma-dialog-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem 0.75rem;
    border-bottom: 1px solid var(--grau-150);
}

.ma-dialog-titel {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--grau-900);
}

.ma-dialog-schliessen {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--grau-400);
    cursor: pointer;
    padding: 0 0.35rem;
    border-radius: var(--radius-s);
}

.ma-dialog-schliessen:hover {
    color: var(--grau-900);
}

.ma-dialog-schliessen:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.ma-dialog-body {
    padding: 1rem 1.1rem;
}

.ma-dialog-text {
    margin: 0 0 0.85rem;
    color: var(--grau-700);
    font-size: 0.92rem;
}

.ma-dialog-fuss {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--grau-150);
    background: var(--grau-50);
}

/* ================================================================================================
   Freie Aufgaben (eigene To-Dos) – „+ Neue Aufgabe"-Knopf, dezente „Persönlich"-Marke in der Agenda
   und der Anlege-/Bearbeiten-Dialog. Markenkonform, ruhig; nutzt die vorhandene ma-dialog-Hülle.
   ================================================================================================ */

/* Kopf-Aktionen (Knopf + Umschalter) rechts im Panel-Kopf nebeneinander. */
.ma-kopf-aktionen {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ma-neu-knopf {
    white-space: nowrap;
}

/* Dezente „Persönlich"-Marke in der Agenda-Meta-Zeile (statt „Projekt · Kunde"). */
.ma-frei-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kupfer-text);
    background: var(--beige);
    border: 1px solid var(--beige-rand);
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
}

/* Eine freie Aufgabe bekommt einen zarten, warmen Rand-Akzent links (nie Farbe als einzige Info –
   die „Persönlich"-Marke trägt die Bedeutung; der Streifen ist nur ein ruhiger visueller Anker). */
.ma-task--frei {
    border-left: 3px solid var(--beige-rand);
}

/* ============================================================================
   Agenda-Zeile mit „🔔 erinnern"-Schnellzugriff (Feature #78) + Projekt-
   Wiedervorlage-Badge (Feature #77). Die Zeile ist jetzt ein Flex-Container aus
   dem Navigations-Knopf (nimmt die Breite) + dem dezenten „erinnern"-Knopf
   daneben (KEIN Button-im-Button). Der „erinnern"-Knopf ist ruhig-sekundär und
   tritt beim Hover/Fokus der Zeile hervor (barrierearm: immer fokussierbar).
   ============================================================================ */
.ma-task-zeile {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.ma-task-zeile + .ma-task-zeile {
    margin-top: 0.45rem;
}

/* Der Zeilen-Knopf trägt den bisherigen .ma-task + .ma-task-Abstand nicht mehr selbst
   (den Rhythmus gibt jetzt .ma-task-zeile) – Abstand hier zurücksetzen. */
.ma-task-zeile .ma-task {
    flex: 1 1 auto;
    min-width: 0;
}

.ma-task-zeile .ma-task + .ma-task {
    margin-top: 0;
}

/* Ein Projekt-Wiedervorlage-Eintrag: zarter kupferner Rand-Akzent links (wie die freie Aufgabe einen
   beigen hat) – nie Farbe als einzige Info; das Badge „🔔 Wiedervorlage" trägt die Bedeutung. */
.ma-task--wv {
    border-left: 3px solid var(--kupfer-rand);
}

/* Das „🔔 Wiedervorlage"-Badge in der Meta-Zeile (Agenda) und in der Team-Tabelle: warm/kupfern,
   konsistent mit dem Board-Karten-Wiedervorlage-Chip. Rein kennzeichnend. */
.ma-wv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
    white-space: nowrap;
}

/* In der Team-Tabelle steht das Badge hinter dem Titel – etwas Luft davor. */
.ma-tabelle .ma-wv-badge {
    margin-left: 0.4rem;
}

/* Kleiner Abstand zwischen dem Wiedervorlage-Badge und der „Projekt · Kunde"-Zeile in der Agenda-Meta. */
.ma-task-meta-text {
    margin-left: 0.4rem;
    color: var(--grau-500);
}

/* Der dezente „🔔 erinnern"-Knopf rechts an der Zeile. Ruhig-neutral, tritt bei Hover/Fokus hervor. */
.ma-erinnern-knopf {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kupfer-text);
    background: var(--grau-0);
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-m);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.ma-erinnern-knopf:hover {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
}

.ma-erinnern-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* Ruhige „Erinnert am …" / „Wiedervorlage entfernt."-Rückmeldung oben in der Agenda. */
.ma-erinnern-rueckmeldung {
    margin: 0.2rem 0 0.6rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-m);
}

/* ============================================================================
   Das dezente „⋯"-Menü einer Aufgabenzeile (genehmigter Entwurf): der ruhige
   Auslöser rechts an der Zeile + das schwebende Dropdown mit den Schnell-Aktionen.
   Bündelt, was vorher lose neben der Zeile stand (Auf morgen/+1 Woche/Erinnern/
   Bearbeiten). Das Erledigt-Häkchen bleibt bewusst AUSSERHALB (primär).
   ============================================================================ */
.ma-menue-huelle {
    position: relative;
    flex: none;
    align-self: center;
    display: inline-flex;
}

/* Der „⋯"-Auslöser: ruhig-neutral, tritt bei Hover/Fokus der Zeile hervor (barrierearm: immer fokussierbar). */
.ma-menue-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--grau-400);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.ma-task-zeile:hover .ma-menue-knopf,
.ma-menue-knopf:hover,
.ma-menue-knopf--offen {
    color: var(--grau-900);
    background: var(--grau-0);
    border-color: var(--grau-150);
}

.ma-menue-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    color: var(--grau-900);
}

.ma-menue-knopf:disabled {
    cursor: default;
    opacity: 0.5;
}

/* Transparentes Overlay hinter dem offenen Menü – ein Klick daneben schließt es. */
.ma-menue-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* Das schwebende Dropdown – rechtsbündig unter dem Auslöser. */
.ma-menue {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 41;
    min-width: 12.5rem;
    padding: 0.3rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: 0 10px 30px rgba(15, 36, 47, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.ma-menue-eintrag {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    font-size: 0.86rem;
    color: var(--grau-900);
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-m) - 3px);
    cursor: pointer;
    transition: background 0.12s ease;
}

.ma-menue-eintrag:hover {
    background: var(--beige);
}

.ma-menue-eintrag:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
    background: var(--beige);
}

.ma-menue-sym {
    flex: none;
    width: 1.1rem;
    text-align: center;
    color: var(--grau-500);
}

.ma-menue-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* ============================================================================
   „Schnell-Paket" – die tägliche Bedienung beschleunigen. Alles bewusst ruhig/
   dezent, damit die Agenda übersichtlich bleibt (Foundations: klare Hierarchie).
   ============================================================================ */

/* --- Ruhige Werkzeugleiste (genehmigter Entwurf): Schnell-Erfassen links, Gruppieren-Umschalter rechts,
   alles in EINER Karte statt lose untereinander. --- */
.ma-werkzeug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin: 0.1rem 0 0.8rem;
    padding: 0.7rem 0.8rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-m);
    box-shadow: 0 1px 2px rgba(15, 36, 47, 0.04);
}

.ma-werkzeug-links {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Schnell-Erfassen: eine Ein-Zeilen-Eingabe (Feld + ＋) in der Werkzeugleiste --- */
.ma-schnell {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ma-schnell-label {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grau-700);
}

/* Das Textfeld nimmt die Breite; große Klick-/Tippfläche. */
.ma-schnell-feld {
    flex: 1 1 auto;
    min-width: 0;
}

/* Der ＋-Knopf: quadratisch, großes Klick-Ziel, deutlich als Primär-Aktion. */
.ma-schnell-knopf {
    flex: none;
    min-width: 2.6rem;
    padding-inline: 0.75rem;
    font-size: 1.15rem;
    line-height: 1;
}

/* --- Erledigt-Häkchen links an der Aufgabenzeile (großes Klick-Ziel) --- */
.ma-abhaken {
    flex: none;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    color: var(--grau-400);
    background: var(--grau-0);
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.ma-abhaken:hover {
    color: var(--erfolg);
    background: var(--erfolg-hg);
    border-color: var(--erfolg-rand);
}

.ma-abhaken:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.ma-abhaken:disabled {
    cursor: default;
    opacity: 0.6;
}

.ma-abhaken-icon {
    pointer-events: none;
}

/* --- „verschieben"-Schnellzugriff (auf morgen / +1 Woche) --- */
.ma-verschieben {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ma-verschieben-knopf {
    white-space: nowrap;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--grau-700);
    background: var(--grau-0);
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-m);
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.ma-verschieben-knopf:hover {
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
}

.ma-verschieben-knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.ma-verschieben-knopf:disabled {
    cursor: default;
    opacity: 0.6;
}

/* --- „Heute erledigt" – einklappbarer, ruhiger Rückblick unten --- */
.ma-erledigt {
    margin-top: 1.4rem;
    border-top: 1px solid var(--grau-150);
    padding-top: 0.8rem;
}

.ma-erledigt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    padding: 0.3rem 0.1rem;
    border-radius: var(--radius-m);
    color: var(--grau-500);
}

/* Das Standard-Dreieck des <summary> ausblenden (wir zeigen einen eigenen Pfeil). */
.ma-erledigt-kopf::-webkit-details-marker {
    display: none;
}

.ma-erledigt-kopf:hover {
    color: var(--grau-700);
}

.ma-erledigt-kopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.ma-erledigt-titel {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ma-erledigt-zahl {
    color: var(--grau-400);
    font-weight: 500;
    letter-spacing: 0;
}

.ma-erledigt-pfeil {
    flex: none;
    color: var(--grau-400);
    transition: transform 0.15s ease;
}

.ma-erledigt-pfeil--auf {
    transform: rotate(180deg);
}

.ma-erledigt-leer {
    margin: 0.5rem 0 0.2rem;
    font-size: 0.85rem;
    color: var(--grau-400);
}

.ma-erledigt-liste {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Eine erledigte Zeile: gedämpft, durchgestrichener Titel – klar „abgeschlossen". */
.ma-erledigt-zeile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--erfolg-rand);
    border-radius: var(--radius-m);
    background: var(--erfolg-hg);
}

.ma-erledigt-haken {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--grau-0);
    background: var(--erfolg);
    border-radius: 999px;
}

.ma-erledigt-haupt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.ma-erledigt-aufgabe {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--grau-700);
    text-decoration: line-through;
    text-decoration-color: var(--grau-300);
}

.ma-erledigt-zeit {
    font-size: 0.78rem;
    color: var(--grau-500);
}

.ma-rueckgaengig {
    flex: none;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--grau-700);
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 0.32rem 0.6rem;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.ma-rueckgaengig:hover {
    color: var(--kupfer-text);
    border-color: var(--kupfer-rand);
    background: var(--kupfer-hell);
}

.ma-rueckgaengig:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.ma-rueckgaengig:disabled {
    cursor: default;
    opacity: 0.6;
}

/* ============================================================================
   Der kleine „🔔 erinnern"-Popover (Feature #78) – ein schlichtes, mittiges
   Mini-Fenster (Datum + Uhrzeit + optionale Notiz). Dieselbe Overlay-/Karten-
   Optik wie die übrigen Dialoge, nur kompakter.
   ============================================================================ */
.ma-erinnern-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 36, 47, 0.38);
}

.ma-erinnern {
    width: min(26rem, 100%);
    max-height: min(85vh, 34rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-l, 14px);
    box-shadow: 0 18px 50px rgba(15, 36, 47, 0.25);
    padding: 1.1rem 1.2rem 1.2rem;
}

.ma-erinnern-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ma-erinnern-titel {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--grau-900);
}

.ma-erinnern-schliessen {
    flex: none;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--grau-500);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-s, 8px);
}

.ma-erinnern-schliessen:hover {
    color: var(--grau-900);
    background: var(--grau-100);
}

.ma-erinnern-fuer {
    margin: 0;
    font-size: 0.9rem;
    color: var(--grau-700, #374151);
}

.ma-erinnern-zweck {
    margin: 0;
    font-size: 0.82rem;
    color: var(--grau-500);
}

.ma-erinnern-datum-zeit {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
    align-items: end;
}

.ma-erinnern-hinweis {
    margin: 0;
    font-size: 0.82rem;
    color: var(--warn-text);
    background: var(--warn-hg);
    border-radius: var(--radius-s, 8px);
    padding: 0.35rem 0.55rem;
}

.ma-erinnern-aktionen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.ma-erinnern-fueller {
    flex: 1 1 auto;
}

.ma-erinnern-rechts {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* --- Der Freie-Aufgabe-Dialog (etwas breiter als der schlichte Zuordnungs-Dialog) --- */
.fa-dialog {
    max-width: 34rem;
}

/* Der Dialog-Body kann bei vielen Feldern höher werden als der Bildschirm → scrollbar halten. */
.fa-dialog .ma-dialog-body {
    max-height: min(70vh, 40rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Einzelnes Feld im Dialog (die generische .feld-Optik, hier ohne zusätzlichen Abstand – der
   Body-Flex-gap trägt den vertikalen Rhythmus). */
.fa-feld {
    margin: 0;
}

/* Zwei Felder nebeneinander (Projekt/Zuständig, Prio/Status, Datum/Uhrzeit); bricht schmal um. */
.fa-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Das Uhrzeit-Feld braucht neben dem Datum weniger Platz. */
.fa-feld--zeit {
    max-width: 9rem;
}

@media (max-width: 30rem) {
    .fa-zeile {
        grid-template-columns: 1fr;
    }

    .fa-feld--zeit {
        max-width: none;
    }
}

/* Gruppierter Abschnitt (Fällig / Wiedervorlage) als ruhiger Kasten – setzt die Default-fieldset-Optik
   zurück und rahmt dezent. */
.fa-block {
    margin: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.fa-block-titel {
    padding: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.fa-block-zweck {
    margin: 0;
}

/* Der Dialog-Fuß trägt beim Bearbeiten links die Erledigt-/Löschen-Aktionen, rechts Abbrechen/Speichern. */
.fa-dialog-fuss {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.fa-fuss-links,
.fa-fuss-rechts {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.fa-fuss-rechts {
    margin-left: auto;
}

/* ================================================================================================
   Notiz je Phase (Feature #49, Mockup-Ansicht 3) – ruhige, warm getönte Notiz-Karte im Hero, direkt
   bei der Phasen-Anzeige. Für alle sichtbar, Autosave beim Verlassen; darunter „— Autor, Datum".
   ================================================================================================ */
.phasen-notiz {
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem;
    background: var(--beige);
    border: 1px solid var(--beige-rand);
    border-radius: var(--radius-m);
}

.phasen-notiz-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.phasen-notiz-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--grau-900);
}

.phasen-notiz-symbol {
    font-size: 0.9rem;
    line-height: 1;
}

/* „für alle sichtbar" – dezenter Hinweis, dass die Notiz gesynct ist. */
.phasen-notiz-sichtbar {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}

.phasen-notiz-feld {
    width: 100%;
    resize: vertical;
    min-height: 2.6rem;
    background: var(--grau-0);
}

.phasen-notiz-fuss {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.phasen-notiz-hilfe {
    margin: 0;
}

/* Signaturzeile „— Autor, Datum": dezent, rechtsbündig – wer hat's zuletzt geschrieben. */
.phasen-notiz-signatur {
    font-size: 0.78rem;
    color: var(--grau-500);
    font-style: italic;
    white-space: nowrap;
}

/* Kompakte Liste der Notizen ANDERER Phasen (nur wenn vorhanden), einklappbar. */
.phasen-notiz-andere {
    margin-top: 0.6rem;
    border-top: 1px dashed var(--beige-rand);
    padding-top: 0.5rem;
}

.phasen-notiz-andere-summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kupfer-text);
}

.phasen-notiz-andere-summary:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.phasen-notiz-andere-liste {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.phasen-notiz-andere-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.55rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-150);
    border-radius: var(--radius-s);
}

.phasen-notiz-andere-phase {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.phasen-notiz-andere-text {
    font-size: 0.85rem;
    color: var(--grau-700);
    white-space: pre-wrap;
}

.phasen-notiz-andere-sig {
    font-size: 0.75rem;
    color: var(--grau-400);
    font-style: italic;
}

/* ================================================================================================
   Prioritäts-Auswahl im Erinnerungs-Editor (Feature #49, Mockup-Ansicht 5) – drei ruhige Chip-Knöpfe.
   ================================================================================================ */
.erinnerung-prio {
    gap: 0.35rem;
}

.erinnerung-prio-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grau-700);
}

.erinnerung-prio-wahl {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Der einzelne Prio-Chip: neutral als Umriss, bis er gewählt ist – dann trägt er seine ma-prio-Farbe
   (Fläche + Text) und wird deutlich hervorgehoben. */
.erinnerung-prio-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--grau-500);
    background: var(--grau-0);
    border: 1px solid var(--grau-300);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.erinnerung-prio-opt .ma-prio-punkt {
    background: var(--grau-400);
}

.erinnerung-prio-opt:hover:not(:disabled) {
    border-color: var(--grau-400);
    color: var(--grau-700);
}

/* Gewählt: die volle ma-prio-Farbe greift (die Klasse steht bereits am Element), Rand kräftiger. */
.erinnerung-prio-opt.ist-gewaehlt {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.erinnerung-prio-opt:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.erinnerung-prio-opt:disabled {
    cursor: default;
    opacity: 0.6;
}

/* ================================================================================================
   Anmelde-Bildschirm (Feature #50 – Login professionell/schön)
   Zentrierte Karte auf ruhiger, dezent marken-getönter Bühne; oben die Hannig-Wortmarke + „JH Suite".
   Drei Zustände (Erststart / Benutzer-Kacheln / Passwort). Markenkonform: Navy (Aktion/Auswahl),
   Kupfer nur als warmer Akzent (Admin-Avatar-Ring). Großzügige Abstände, große Klick-Ziele, sichtbarer
   Fokus, tastaturbedienbar (Enter = anmelden). Rein visuell – die Logik/Krypto liegt im AnmeldeAblauf.
   ================================================================================================ */

/* Vollflächige, vertikal + horizontal zentrierte Bühne. Der ruhige, sehr dezente Radial-Verlauf gibt
   der Karte Tiefe, ohne laut zu werden (warmes Greige → Navy-Hauch außen). */
.anmelde-buehne {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem;
    background:
        radial-gradient(120% 90% at 50% -10%, #ffffff 0%, var(--grau-50) 46%, #eceae5 100%);
}

/* Die eigentliche Anmelde-Karte: weiße Fläche, weiche Rundung, feiner Rand + ruhiger, tieferer
   Schatten (schwebt sichtbar über der Bühne). Bewusst schmal (ein Blickfeld). */
.anmelde-karte {
    width: 100%;
    max-width: 26rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--schatten-l);
    padding: 2.5rem 2.4rem 2.6rem;
    animation: anmelde-karte-rein 0.28s ease both;
}



/* Marken-Lockup oben in der Karte: die Hannig-Wortmarke prominent zentriert, darunter dezent „JH Suite"
   mit einer feinen Trennlinie – ruhiger Abschluss zum Formular. */
.anmelde-marke {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 1.6rem;
    margin-bottom: 1.7rem;
    border-bottom: 1px solid var(--grau-150);
}

.anmelde-logo {
    display: block;
    height: 2.9rem;
    width: auto;
}

.anmelde-suite {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grau-500);
}

/* Überschrift + Unterzeile über dem jeweiligen Formular. */
.anmelde-kopf {
    margin-bottom: 1.6rem;
}

.anmelde-kopf h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.anmelde-unter {
    color: var(--grau-500);
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0.4rem 0 0;
}

/* Ruhiger Ladezustand (Auto-Login/Benutzer laden) mit dezentem Spinner. */
.anmelde-laedt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    color: var(--grau-500);
    font-size: 1.0rem;
    padding: 1.75rem 0;
}

.anmelde-spinner {
    width: 1.2rem;
    height: 1.2rem;
    border: 2.5px solid var(--grau-200);
    border-top-color: var(--akzent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Das Anmelde-Formular: großzügige, gleichmäßige Abstände zwischen den Feldern. */
.anmelde-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

/* Etwas größere Eingaben speziell für die Anmeldung (angenehmes Klick-/Tipp-Ziel). */
.eingabe-gross {
    padding: 0.72rem 0.9rem;
    font-size: 1.05rem;
}

/* Großer, volle-Breite Hauptknopf (Anmelden / Konto anlegen). */
.btn-block {
    width: 100%;
}

.btn-gross {
    padding: 0.78rem 1.3rem;
    font-size: 1.03rem;
}

/* --- (2) Benutzer-Kacheln: „wer bin ich?" --- */
.anmelde-kacheln {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Eine Benutzer-Kachel: großes, ruhiges Klick-Ziel (Avatar + Name + Rolle + Pfeil). Bei Hover/Fokus
   hebt sie sich dezent an und der Rand nimmt die Navy-Auswahlfarbe auf. */
.wer-kachel {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    background: var(--grau-0);
    border: 1.5px solid var(--grau-200);
    border-radius: var(--radius-l);
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.wer-kachel:hover {
    border-color: var(--akzent-rand);
    background: var(--grau-50);
    box-shadow: var(--schatten-m);
    transform: translateY(-1px);
}

.wer-kachel:focus-visible {
    outline: none;
    border-color: var(--akzent);
    box-shadow: var(--schatten-fokus);
}

.wer-kachel:active {
    transform: translateY(0);
}

/* Avatar mit Initiale: ruhiger Navy-Kreis mit weißer Glyphe (Top-Kontrast). Admin-Konten bekommen
   einen dezenten Kupfer-Ring als Kennzeichnung (warmer Highlight, kein lautes Farbfeld). */
.wer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--akzent);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
}

.wer-avatar-admin {
    box-shadow: 0 0 0 2px var(--grau-0), 0 0 0 4px var(--kupfer);
}

.wer-avatar-gross {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.3rem;
}

.wer-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1 1 auto;
}

.wer-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--grau-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rollen-Etikett („Administrator") – dezent, in Kupfer-Text (AA auf Weiß). */
.wer-rolle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kupfer-text);
    letter-spacing: 0.01em;
}

/* Der dezente „weiter"-Pfeil rechts an der Kachel; folgt bei Hover der Bewegung. */
.wer-pfeil {
    flex-shrink: 0;
    color: var(--grau-400);
    transition: color 0.15s ease, transform 0.15s ease;
}

.wer-kachel:hover .wer-pfeil {
    color: var(--akzent);
    transform: translateX(2px);
}

/* --- (3) Passwort-Schritt: gewählter Benutzer oben --- */
.anmelde-gewaehlt {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.anmelde-gewaehlt-text {
    min-width: 0;
}

.anmelde-gewaehlt-text h1 {
    font-size: 1.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* „Anderer Benutzer" – ruhiger, textnaher Zurück-Weg unter dem Anmelden-Knopf (zentriert). */
.anmelde-zurueck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    align-self: center;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--grau-500);
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.anmelde-zurueck:hover:not(:disabled) {
    color: var(--akzent-tief);
    background: var(--grau-100);
}

.anmelde-zurueck:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.anmelde-zurueck:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Dezente Fußzeile unter der Karte (Marke ausgeschrieben) – ruhiger Abschluss der Bühne. */
.anmelde-fuss {
    color: var(--grau-400);
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Schmales Fenster: die Karte darf randlos werden und die Abstände schrumpfen etwas. */
@media (max-width: 30rem) {
    .anmelde-buehne {
        padding: 1.25rem 1rem;
    }

    .anmelde-karte {
        padding: 2rem 1.5rem 2.2rem;
        border-radius: var(--radius-l);
    }

    .anmelde-logo {
        height: 2.5rem;
    }
}

/* ================================================================================================
   „Passwort vergessen?" / Notfall-Code-Wiederherstellung (AnmeldeBildschirm.razor)
   Dezenter Einstiegs-Link unter dem Anmelde-Inhalt + kleiner Hilfe-/Wiederherstellungs-Bereich in
   derselben Karte. Markenkonform (Navy/Kupfer), barrierearm. KEINE Krypto hier – nur Anzeige.
   ================================================================================================ */

/* Der dezente Einstiegs-Link („Passwort vergessen?") – textnah, ruhig, zentriert unter dem Inhalt. */
.anmelde-vergessen {
    display: block;
    margin: 1.3rem auto 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--grau-500);
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.anmelde-vergessen:hover:not(:disabled) {
    color: var(--akzent-tief);
    background: var(--grau-100);
    text-decoration: underline;
}

.anmelde-vergessen:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.anmelde-vergessen:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Einstieg: die zwei Wege (normaler Benutzer / Admin ausgesperrt) als ruhige, getrennte Blöcke. */
.wh-wege {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.wh-weg {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.05rem 1.15rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
}

.wh-weg-titel {
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--grau-900);
}

.wh-weg-text {
    color: var(--grau-700);
    font-size: 0.94rem;
    line-height: 1.5;
    margin: 0;
}

/* Das Notfall-Code-Feld: etwas gesperrt + Großbuchstaben, damit der Code gut lesbar eingetippt wird. */
.wh-code-feld {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wh-code-feld::placeholder {
    letter-spacing: 0.12em;
    text-transform: none;
}

/* Hinweis auf das eindeutige Ziel-Admin-Konto (Ein-Admin-Fall, keine Auswahl nötig). */
.wh-ziel-admin {
    margin: 0;
}

/* ================================================================================================
   Notfall-Code-Abschnitt (EinstellungBenutzer.razor, nur Admin)
   Eigene flache Karte unter der Benutzer-Liste. Der frisch erzeugte KLARTEXT-Code wird EINMALIG groß
   + gut lesbar gezeigt (mit deutlicher Warnung + Kopieren). Markenkonform (Navy/Kupfer).
   ================================================================================================ */
.notfall-karte {
    gap: 1.1rem;
}

.notfall-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

/* Symbol-Kreis in warmem Kupfer mit Navy-Glyphe (AA; kein weißer Text auf Kupfer). */
.notfall-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    font-size: 1.2rem;
    line-height: 1;
}

.notfall-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.notfall-status-text {
    color: var(--grau-500);
    font-size: 0.92rem;
}

/* Die einmalige Code-Anzeige: warme, hervorgehobene Box – „jetzt notieren“. */
.notfall-code-box {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.15rem 1.25rem;
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-l);
}

.notfall-code-warnung {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warn-text);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

/* Der Code selbst: groß, monospace, gut gesperrt und markierbar (für Strg+C-Fallback). */
.notfall-code {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--grau-900);
    background: var(--grau-0);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-m);
    padding: 0.85rem 1rem;
    margin: 0;
    text-align: center;
    user-select: all;
    word-break: break-all;
}

.notfall-code-aktionen {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.notfall-kopiert {
    color: var(--erfolg);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Vorwarnung beim Neu-Erzeugen (alter Code wird ungültig) – ruhige Warn-Fläche. */
.notfall-warnfeld {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: var(--warn-hg);
    border: 1px solid var(--warn-rand);
    border-radius: var(--radius-l);
}

.notfall-warnfeld p {
    color: var(--warn-text);
    font-size: 0.94rem;
    line-height: 1.5;
    margin: 0;
}

/* ================================================================================================
   Profil-Menü in der Kopfzeile („Angemeldet als …" · Benutzer wechseln · Abmelden)
   Gehört zu AppKopf.razor; markenkonform passend zum Anmelde-Avatar (gleicher Navy-Kreis). Rein
   Navigation – das Ab-/Anmelden erledigt der AnmeldeAblauf.
   ================================================================================================ */
.profil-huelle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

/* Der Profil-Knopf: kompaktes Avatar + Name + Pfeil, ruhig als „Chip". */
.profil-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid transparent;
    font: inherit;
    color: var(--grau-900);
    padding: 0.3rem 0.55rem 0.3rem 0.35rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.profil-knopf:hover,
.profil-knopf.profil-offen {
    background: var(--grau-100);
    border-color: var(--grau-200);
}

.profil-knopf:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* Kleiner Avatar im Kopf (gleiche Navy-Kreis-Sprache wie die Anmelde-Kacheln). */
.profil-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    background: var(--akzent);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1;
    user-select: none;
}

.profil-name {
    font-weight: 600;
    font-size: 0.92rem;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profil-pfeil {
    color: var(--grau-400);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.profil-knopf.profil-offen .profil-pfeil {
    transform: rotate(180deg);
}

/* Unsichtbare Auffang-Fläche: Klick außerhalb schließt das Menü. */
.profil-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: default;
}

/* Das aufklappende Menü: kleine schwebende Karte unter dem Knopf. */
.profil-menue {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 61;
    min-width: 13rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-l);
    padding: 0.4rem;
    animation: profil-menue-auf 0.16s ease both;
}



.profil-menue-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.65rem 0.6rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--grau-150);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--grau-900);
}

.profil-menue-rolle {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kupfer-text);
}

.profil-menue-knopf {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.92rem;
    color: var(--grau-700);
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.profil-menue-knopf:hover:not(:disabled) {
    background: var(--grau-100);
    color: var(--grau-900);
}

.profil-menue-knopf:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.profil-menue-knopf:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* „Abmelden" dezent als Gefahr-Ton (nicht laut, aber unterscheidbar). */
.profil-menue-gefahr {
    color: var(--fehler);
}

.profil-menue-gefahr:hover:not(:disabled) {
    background: var(--fehler-hg);
    color: var(--fehler-dunkel);
}

/* =========================================================================
   PROJEKTE-ÜBERSICHT („Überblick", Standard-Reiter; Konzept vom Inhaber
   freigegeben). Drei Ebenen: Handlungsbedarf-Band (große Kacheln) · Phasen-
   Verteilung (Zähler + Balken) · gruppierte, dichte, einklappbare Liste.
   Markenkonform (Navy/Kupfer), ruhig, barrierearm.
   ========================================================================= */
.uebersicht {
    display: flex;
    flex-direction: column;
}

/* Kleine „Augenbrauen"-Überschrift über jeder Ebene (ruhig, Kupfer-Ton). */
.uebersicht-augenbraue {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kupfer-text);
    margin: 0 0 0.55rem;
}

.uebersicht-augenbraue:not(:first-child) {
    margin-top: 1.5rem;
}

/* ---------- 1) Handlungsbedarf-Band: fünf große, klickbare Kacheln ---------- */
.aktion-band {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.aktion {
    flex: 1 1 9.5rem;
    min-width: 9.5rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.aktion:hover {
    box-shadow: var(--schatten-m);
}

.aktion:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.aktion-symbol {
    font-size: 1.2rem;
    line-height: 1;
    flex: none;
}

.aktion-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.aktion-zahl {
    font-size: 1.3rem;
    font-weight: 750;
    line-height: 1;
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
}

.aktion-titel {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--grau-700);
}

.aktion-unterzeile {
    font-size: 0.75rem;
    color: var(--grau-500);
    line-height: 1.25;
}

.aktion-aus {
    margin-left: auto;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.8;
}

/* Zustand „dringend" (warm/amber): Zähler + Rahmen betont. */
.aktion-dringend {
    border-color: var(--kupfer-rand);
    background: #fefbf6;
}

.aktion-dringend .aktion-zahl {
    color: var(--warn-text);
}

/* Zustand „rot" (Deadline überfällig – härteste „Zeit ist um"). */
.aktion-rot {
    border-color: var(--fehler-rand);
    background: var(--fehler-hg);
}

.aktion-rot .aktion-zahl {
    color: var(--fehler);
}

/* Zustand „leer" (Zähler 0): dezent gedämpft, aber sichtbar. */
.aktion-leer {
    opacity: 0.62;
}

.aktion-leer .aktion-zahl {
    color: var(--grau-400);
}

/* Aktive Kachel (Filter gesetzt): kräftigerer Rahmen + feiner Ring. */
.aktion-aktiv {
    box-shadow: var(--schatten-s), inset 0 0 0 1px var(--akzent-rand);
}

.aktion-dringend.aktion-aktiv {
    box-shadow: var(--schatten-s), inset 0 0 0 1px var(--kupfer-rand);
}

.aktion-rot.aktion-aktiv {
    box-shadow: var(--schatten-s), inset 0 0 0 1px var(--fehler-rand);
}

/* ---------- 2) Phasen-Verteilung: Zähler-Zellen + ein Balken ---------- */
.verteilung {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    padding: 0.9rem 1.1rem;
}

.verteilung-zeile {
    display: flex;
    gap: 1rem 1.4rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

.verteilung-zelle {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.15rem 0.3rem;
    background: none;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.verteilung-zelle:hover {
    background: var(--grau-50);
}

.verteilung-zelle:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

.verteilung-zahl {
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1;
    color: var(--grau-900);
    font-variant-numeric: tabular-nums;
}

.verteilung-name {
    font-size: 0.76rem;
    color: var(--grau-500);
}

/* Größte Gruppe dezent in Marken-Kupfer betont. */
.verteilung-zelle--gross .verteilung-zahl {
    color: var(--kupfer-stark);
}

/* Aktive (gefilterte) Gruppe: Zähler in Navy + feiner Ring. */
.verteilung-zelle--aktiv {
    background: var(--akzent-hell);
    box-shadow: inset 0 0 0 1px var(--akzent-rand);
}

.verteilung-zelle--aktiv .verteilung-name {
    color: var(--akzent-tief);
}

/* Der schmale, mehrfarbige Verteilungsbalken (Anteile via flex-grow, inline gesetzt). */
.verteilung-balken {
    display: flex;
    height: 8px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--grau-200);
}

.verteilung-balken-teil {
    display: block;
    min-width: 3px;
}

.verteilung-balken-teil.gruppe-anfrage {
    background: var(--kupfer);
}

.verteilung-balken-teil.gruppe-vorbereitung {
    background: var(--info-text);
}

.verteilung-balken-teil.gruppe-ausfuehrung {
    background: #7ba05b;
}

.verteilung-balken-teil.gruppe-abrechnung {
    background: #c9a227;
}

.verteilung-balken-teil.gruppe-abgeschlossen {
    background: var(--grau-300);
}

/* ---------- 3) Gruppierte, dichte, einklappbare Liste ---------- */
.uebersicht-gruppe {
    margin-bottom: 0.5rem;
}

.uebersicht-gruppe-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.uebersicht-gruppe-kopf:hover .uebersicht-gruppe-titel {
    color: var(--akzent-tief);
}

.uebersicht-gruppe-kopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

.uebersicht-gruppe-caret {
    color: var(--grau-400);
    font-size: 0.75rem;
    width: 0.9rem;
    flex: none;
}

.uebersicht-gruppe-titel {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0;
}

.uebersicht-gruppe-anz {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--grau-500);
    background: var(--grau-100);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-variant-numeric: tabular-nums;
}

.uebersicht-gruppe-sort {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--grau-400);
}

.uebersicht-liste {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Eine dichte Zeile: Körper (Titel+Kunde+Chips) · seit N Tagen · Netto · 🔔. Die GANZE Zeile ist der
   Einstieg ins Projekt (Welle 3a, Punkt 3): ein deutlicheres Hover auf der kompletten Zeile + der
   „Öffnen ›"-Hinweis am rechten Körper-Rand machen das sichtbar. Der Übergang ist ruhig/markenkonform. */
.uebersicht-liste .row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 0 0.35rem 0 0;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Deutliches, aber ruhiges Hover auf der GESAMTEN Zeile – sobald der Zeiger irgendwo über der Zeile steht
   (Körper, Netto, Rand). Kupfer-Rand + leichter Schub signalisieren „hier geht es hinein". Nicht an :hover
   des Körper-Buttons gebunden, damit die ganze Fläche als klickbar wirkt. */
.uebersicht-liste .row:hover {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
    box-shadow: var(--schatten-s, 0 1px 3px rgba(29, 29, 27, 0.08));
}

.uebersicht-liste .row.row-warn {
    border-left: 3px solid var(--kupfer);
}

.uebersicht-liste .row.row-rot {
    border-left: 3px solid var(--fehler);
}

/* Der „Öffnen ›"-Hinweis am rechten Körper-Rand: normal dezent (grau, leicht transparent), wird bei
   Hover/Fokus der Zeile deutlicher – so ist der Weg ins Projekt sofort erkennbar, ohne laut zu sein. */
.uebersicht-row-oeffnen {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex: none;
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--grau-400);
    opacity: 0.75;
    transition: color 0.12s ease, opacity 0.12s ease;
}

.uebersicht-row-oeffnen-text {
    white-space: nowrap;
}

.uebersicht-row-chevron {
    font-size: 1rem;
    line-height: 1;
}

/* Zeile berührt (oder Körper fokussiert) → Hinweis in Kupfer, voll deckend. */
.uebersicht-liste .row:hover .uebersicht-row-oeffnen,
.uebersicht-row-koerper:focus-visible .uebersicht-row-oeffnen {
    color: var(--kupfer-text);
    opacity: 1;
}

.uebersicht-row-koerper {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.5rem 0.6rem 0.8rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.uebersicht-row-koerper:hover .uebersicht-row-bv {
    color: var(--akzent-tief);
}

.uebersicht-row-koerper:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
    border-radius: var(--radius-m);
}

.uebersicht-row-haupt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.uebersicht-row-bv {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--grau-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uebersicht-row-kunde {
    font-size: 0.78rem;
    color: var(--grau-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uebersicht-row-signale {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    align-items: center;
    flex: none;
}

/* Signal-Chip an einer Zeile (🔔/📮/⏰/📦 …). Farbe je Dringlichkeit. */
.uebersicht-row-signale .sig {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.13rem 0.5rem;
    white-space: nowrap;
}

.uebersicht-row-signale .sig-symbol {
    font-size: 0.75rem;
    line-height: 1;
}

.uebersicht-row-signale .sig-amber {
    background: var(--warn-hg);
    color: var(--warn-text);
}

.uebersicht-row-signale .sig-kupfer {
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
}

.uebersicht-row-signale .sig-rot {
    background: var(--fehler-hg);
    color: var(--fehler);
}

.uebersicht-row-signale .sig-blau {
    background: var(--info-hg);
    color: var(--info-text);
}

.uebersicht-row-signale .sig-grau {
    background: var(--grau-100);
    color: var(--grau-500);
}

.uebersicht-row-alter {
    font-size: 0.75rem;
    color: var(--grau-400);
    white-space: nowrap;
    text-align: right;
    flex: none;
}

.uebersicht-row-netto {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--grau-900);
    white-space: nowrap;
    text-align: right;
    min-width: 5rem;
    flex: none;
    font-variant-numeric: tabular-nums;
}

/* Die Glocke am Zeilenende: unaufdringlich, wird bei Hover/Fokus deutlicher. */
.uebersicht-row-glocke {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: 0.9rem;
    opacity: 0.55;
    transition: opacity 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.uebersicht-row-glocke:hover {
    opacity: 1;
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
}

.uebersicht-row-glocke:focus-visible {
    opacity: 1;
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* „N weitere anzeigen" – dezenter, gestrichelter Knopf am Ende einer gekürzten Gruppe. */
.uebersicht-mehr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem;
    background: none;
    border: 1px dashed var(--grau-300);
    border-radius: var(--radius-s);
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--kupfer-text);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.uebersicht-mehr:hover {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
}

.uebersicht-mehr:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* Auf schmalen Fenstern die „seit N Tagen"-Spalte zurücknehmen (Titel/Chips haben Vorrang). */
@media (max-width: 640px) {
    .uebersicht-row-alter {
        display: none;
    }
}

/* =========================================================================
   Material-Reiter · Block „Benötigtes Material" (Projekt-Board-Welle 5)
   Preisfreie, nach Lieferant gruppierte Bestellliste aus dem Angebot – GANZ OBEN
   über Status + Belegen. Ruhiges Layout, Markenfarben Navy/Kupfer; der Preisfrei-
   Hinweis nutzt die dezente blaue Info-Fläche. Keine Preise (die Liste trägt keine).
   ========================================================================= */
.bestellliste-block {
    /* Dezente kupferne Kante links markiert den „neu aus dem Angebot"-Charakter (wie im Mockup). */
    border-left: 4px solid var(--kupfer);
}

.bestellliste-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem 0.9rem;
    flex-wrap: wrap;
}

.bestellliste-titelzeile {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

/* Kupferne Augenbraue über dem Titel (Herkunft der Liste). */
.augenbraue {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kupfer-text);
}

/* Zweck-/Erklärzeile unter dem Titel (ruhig, sekundär). */
.bestellliste-block > .zweck {
    margin: 0.2rem 0 1rem;
    font-size: 0.92rem;
    color: var(--grau-600);
}

.bestellliste-pdf-knopf {
    margin-left: auto;
    flex: none;
}

/* --- Eine Lieferanten-Gruppe (Kopf + Tabelle) --- */
.bestellliste-lieferant {
    margin-bottom: 1rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    overflow: hidden;
}

.bestellliste-lieferant:last-child {
    margin-bottom: 0;
}

.bestellliste-lieferant-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.85rem;
    background: var(--grau-100);
    border-bottom: 1px solid var(--grau-200);
}

.bestellliste-lieferant-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--grau-900);
}

.bestellliste-lieferant-anz {
    font-size: 0.85rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
}

.bestellliste-kopier-knopf {
    margin-left: auto;
}

/* Die Tabelle sitzt bündig im Gruppen-Rahmen (kein doppelter Rand/Radius). */
.bestellliste-lieferant .tabellen-rahmen {
    border: none;
    border-radius: 0;
}

/* Sinnvolle Mindestbreite, damit die drei Spalten bei schmalem Fenster sauber im
   .tabellen-rahmen horizontal scrollen statt unleserlich zu quetschen. */
.bestellliste-tabelle {
    min-width: 28rem;
}

.bestellliste-tabelle .zell-num {
    color: var(--grau-500);
}

/* --- Zeilen-Status „bestellt/geliefert" (Idee „Material bestellt/geliefert") --- */

/* Etwas mehr Platz für die beiden Häkchen; im .tabellen-rahmen scrollt es sonst sauber. */
.bestellliste-tabelle {
    min-width: 34rem;
}

/* Die Status-Spalte nicht schrumpfen lassen, oben ausrichten (Text „von … am …" darunter). */
.bestellliste-status-spalte {
    white-space: nowrap;
    vertical-align: top;
}

/* Punkt + Häkchen-Paar in einer Zeile. */
.mat-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Dezente Ampel: offen grau / bestellt kupfer / geliefert grün (Farben wie board-chip.mat-*). */
.mat-punkt {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex: none;
    border: 1px solid transparent;
}

.mat-punkt--offen {
    background: var(--grau-200);
    border-color: var(--grau-300);
}

.mat-punkt--bestellt {
    background: var(--kupfer);
    border-color: var(--kupfer-stark);
}

.mat-punkt--geliefert {
    background: #2e7d52;
    border-color: #256844;
}

.mat-haken-gruppe {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
}

/* Klar beschriftetes Häkchen mit großem Klick-Ziel (ganze Label klickbar). */
.mat-haken {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--grau-700);
    cursor: pointer;
    user-select: none;
}

.mat-haken input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--kupfer);
    cursor: pointer;
}

/* „von <Kürzel> am <Datum>" – ruhig, sekundär, unter den Häkchen. */
.mat-status-info {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--grau-500);
}

.mat-status-zeile {
    display: block;
}

/* Dezente Kopf-Zusammenfassung „x von y bestellt · z geliefert". */
.bestellliste-status-summe {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: -0.4rem 0 0.9rem;
    font-size: 0.86rem;
    color: var(--grau-600);
    font-variant-numeric: tabular-nums;
}

/* --- Eventualpositionen: eigener, klar abgesetzter Block (nicht untermischen) --- */
.bestellliste-eventual {
    margin: 1.1rem 0 0;
    padding: 0.9rem 1rem 1rem;
    background: var(--warn-hg);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-m);
}

.bestellliste-eventual-titel {
    margin: 0 0 0.2rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--grau-900);
}

.bestellliste-eventual-hinweis {
    margin: 0 0 0.75rem;
    font-size: 0.86rem;
    color: var(--kupfer-text);
}

/* --- „Ganze Liste kopieren" + Preisfrei-Hinweis --- */
.bestellliste-aktionen {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.hinweis-preisfrei {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-top: 0.8rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--info-text);
    background: var(--info-hg);
    border: 1px solid var(--info-rand);
    border-radius: var(--radius-m);
}

/* --- Fallback: markierbarer Text, wenn keine Zwischenablage verfügbar ist --- */
.bestellliste-kopier-fallback {
    margin-top: 0.8rem;
}

.bestellliste-kopier-text {
    width: 100%;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.82rem;
    white-space: pre;
    resize: vertical;
}

/* Auf schmalen Fenstern die Kopier-Knöpfe unter den Lieferanten-Namen umbrechen lassen. */
@media (max-width: 640px) {
    .bestellliste-pdf-knopf,
    .bestellliste-kopier-knopf {
        margin-left: 0;
    }
}

/* =========================================================================
   Sammelbestellung (Feature „Sammelbestellung", Material-Reiter 3)
   Zwei ruhige Schritte: Projekte wählen (Checkbox-Liste + Zähler) → gebündelte
   Liste je Lieferant (nutzt die vorhandenen .bestellliste-*-Bausteine wieder;
   hier nur das Zusätzliche: Auswahl, Schritt-Kopf, „Woraus?"-Aufklapper).
   Markenkonform (Navy/Kupfer), nicht überladen.
   ========================================================================= */
.sammelbestellung {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Kopf jedes Schritts: Augenbraue + Titel links, Zähler/Knöpfe rechts. */
.sammel-schritt-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem 0.9rem;
    flex-wrap: wrap;
}

.sammel-schritt-titelzeile {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.sammel-schritt > .zweck {
    margin: 0.2rem 0 1rem;
    font-size: 0.92rem;
    color: var(--grau-500);
}

/* Auswahl-Zähler (ruhig, tabellarische Ziffern) – rechts im Schritt-1-Kopf. */
.sammel-zaehler {
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* „alle/keine"-Zeile über der Projektliste. */
.sammel-auswahl-aktionen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

/* Die Checkbox-Liste als randloses Fieldset (die Karten tragen den Rahmen). */
.sammel-projektliste {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.6rem;
}

/* Eine Projekt-Zeile = großes Klick-Ziel (ganze Karte klickbar). */
.sammel-projekt {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.sammel-projekt:hover {
    border-color: var(--grau-300);
    background: var(--grau-50);
}

/* Ausgewählt: dezente Navy-Marke (Auswahl-Zustand klar, nicht schreiend). */
.sammel-projekt-an {
    border-color: var(--akzent-rand);
    background: var(--akzent-hell);
    box-shadow: inset 0 0 0 1px var(--akzent-rand);
}

.sammel-projekt input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    accent-color: var(--akzent);
    cursor: pointer;
    flex: none;
}

.sammel-projekt-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sammel-projekt-bv {
    font-weight: 600;
    color: var(--grau-900);
    overflow-wrap: anywhere;
}

.sammel-projekt-kunde {
    font-size: 0.85rem;
    color: var(--grau-500);
    overflow-wrap: anywhere;
}

/* Fuß von Schritt 1: der „bündeln"-Knopf, rechts. */
.sammel-schritt-fuss {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.1rem;
}

.sammel-buendeln-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Schritt 2: Bezugszeile („N Projekte ausgewählt") unter dem Kopf. */
.sammel-schritt-bezug {
    margin: 0.2rem 0 0.9rem;
    font-size: 0.9rem;
    color: var(--grau-500);
    font-variant-numeric: tabular-nums;
}

/* Der „zurück"-Knopf sitzt vor dem PDF-Knopf; auf breiten Fenstern ans Ende schieben. */
.sammel-zurueck-knopf {
    margin-left: auto;
}

/* Bei sichtbarem PDF-Knopf soll DIESER ganz rechts stehen (zurück links daneben). */
.sammel-schritt-kopf .bestellliste-pdf-knopf {
    margin-left: 0;
}

/* „Woraus?"-Spalte: schmal halten, oben ausrichten. */
.sammel-woraus-spalte {
    white-space: nowrap;
    vertical-align: top;
}

/* Aufklappbarer Beitrag je Zeile: ein dezenter Zähler-Chip als Summary, Text beim Aufklappen. */
.sammel-woraus {
    display: inline-block;
}

.sammel-woraus-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--grau-100);
    border: 1px solid var(--grau-200);
    color: var(--grau-500);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* Standard-Dreieck des <summary> ausblenden (wir zeigen nur den Zähler-Chip). */
.sammel-woraus-summary::-webkit-details-marker {
    display: none;
}

.sammel-woraus-summary::marker {
    content: "";
}

.sammel-woraus[open] .sammel-woraus-summary {
    border-color: var(--kupfer);
    color: var(--kupfer-text);
}

.sammel-woraus-text {
    display: block;
    margin-top: 0.35rem;
    max-width: 22rem;
    white-space: normal;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--grau-500);
}

.sammel-woraus-leer {
    color: var(--grau-300);
}

/* =========================================================================
   Ort/PLZ-Combobox (Kundendaten, Schritt 1) – Projekt-Board v1.9.0
   Textfeld mit aufklappender Live-Vorschlagsliste (Ort + PLZ, „Gelernt"-Marke).
   Ruhig, markenkonform (Navy-Auswahl, Kupfer-Marke), sichtbarer Fokus. Die Liste
   liegt als Overlay über dem Formular, damit sie das Feld-Gitter nicht verschiebt.
   ========================================================================= */
.ortplz {
    position: relative;
}

.ortplz-hilfe {
    margin-top: 0.25rem;
}

/* Aufklappende Vorschlagsliste – als Overlay direkt unter dem Feld. */
.ortplz-liste {
    position: absolute;
    top: calc(100% - 1.15rem);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0.3rem 0 0;
    padding: 0.3rem;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-l);
}

.ortplz-option {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--grau-900);
}

/* Hervorgehobene Option (Tastatur-Navigation ODER Maus-Hover): Navy-Fläche, weißer Text =
   Top-Kontrast, wie die primäre Auswahlfarbe der Oberfläche. */
.ortplz-option-aktiv {
    background: var(--akzent);
    color: #ffffff;
}

/* Die PLZ als feste, ruhige „Kennzahl" links; im aktiven Zustand hell auf Navy. */
.ortplz-option-plz {
    flex: 0 0 auto;
    min-width: 3.4rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--grau-500);
}

.ortplz-option-aktiv .ortplz-option-plz {
    color: rgba(255, 255, 255, 0.85);
}

.ortplz-option-ort {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* „Gelernt"-Marke: dezenter Kupfer-Chip für nicht verifizierte (vom Nutzer gemerkte) Einträge. */
.ortplz-marke {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--kupfer-text);
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: 999px;
}

/* Auf der aktiven (Navy-)Zeile die Marke hell/transparent halten, damit sie lesbar bleibt. */
.ortplz-option-aktiv .ortplz-marke {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

/* =========================================================================
   Kunden-Picker „Bestehenden Kunden übernehmen" (Kundendaten, Schritt 1)
   Optionales Typeahead OBEN im Formular: einen früheren Kunden wählen statt neu
   tippen. Dezent von den Pflichtfeldern abgesetzt (ruhige Karte + „oder"-Trenner),
   markenkonform (Navy-Auswahl), Overlay-Liste wie die Ort/PLZ-Combobox.
   ========================================================================= */

/* Abgesetzte, ruhige Karte für den optionalen Komfort – hebt sich leicht vom Formular ab,
   drängt sich aber nicht vor die Pflichtfelder. */
.kundenpicker-block {
    padding: 1rem 1.1rem 1.1rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

/* „oder neu eintragen“ – zarte Trennlinie zwischen Picker und den Eingabefeldern, damit klar
   ist: der Picker ist optional, das Eintippen bleibt gleichberechtigt. */
.kundenpicker-trenner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0 0.35rem;
    color: var(--grau-500);
    font-size: 0.85rem;
}

.kundenpicker-trenner::before,
.kundenpicker-trenner::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--grau-200);
}

.kundenpicker {
    position: relative;
}

.kundenpicker-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--grau-900);
}

/* Feld + „Leeren“-Knopf nebeneinander (der Knopf sitzt rechts im Feld). */
.kundenpicker-feld-zeile {
    position: relative;
}

.kundenpicker-eingabe {
    /* Platz rechts für den Leeren-Knopf freihalten. */
    padding-right: 2.5rem;
}

.kundenpicker-leeren {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--grau-500);
    background: transparent;
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
}

.kundenpicker-leeren:hover {
    color: var(--grau-900);
    background: var(--grau-100);
}

.kundenpicker-leeren:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

.kundenpicker-hilfe {
    margin-top: 0.3rem;
}

/* Hinweis, wenn die Suche nichts findet – dezent, kein Fehler. */
.kundenpicker-leer {
    margin: 0.4rem 0 0;
    color: var(--grau-500);
    font-size: 0.85rem;
}

/* Aufklappende Vorschlagsliste – als Overlay direkt unter dem Feld (verschiebt das Layout nicht). */
.kundenpicker-liste {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0.3rem 0 0;
    padding: 0.3rem;
    list-style: none;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-l);
}

.kundenpicker-option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--grau-900);
}

/* Hervorgehobene Option (Tastatur-Navigation ODER Maus-Hover): Navy-Fläche, weißer Text = Top-Kontrast. */
.kundenpicker-option-aktiv {
    background: var(--akzent);
    color: #ffffff;
}

/* Kräftige erste Zeile „Name — Ort“. */
.kundenpicker-option-primaer {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dezente zweite Zeile „Straße, PLZ“ zur eindeutigen Unterscheidung. */
.kundenpicker-option-sekundaer {
    font-size: 0.82rem;
    color: var(--grau-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kundenpicker-option-aktiv .kundenpicker-option-sekundaer {
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================================================
   Einstellungen → Datensicherung (Automatik-Schalter, „zuletzt gesichert“,
   Liste der Sicherungen, Wiederherstellen). Nutzt die Marken-Variablen
   (Navy = --akzent/--grau-900, Kupfer = --kupfer*); ruhiges, klares Layout,
   große Klick-Ziele, ausreichende Kontraste (barrierearm).
   ========================================================================= */

/* Automatik-Schalter (gleiche Linie wie .ma-schalter-zeile, eigener ds-Namensraum). */
.ds-automatik {
    margin: 0.25rem 0 1.1rem;
}

.ds-schalter-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0.2rem 0;
    cursor: pointer;
}

.ds-schalter-box {
    margin-top: 0.2rem;
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    accent-color: var(--akzent);
    cursor: pointer;
}

.ds-schalter-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ds-schalter-titel {
    font-weight: 600;
    color: var(--grau-900);
}

.ds-schalter-hilfe {
    color: var(--grau-500);
    font-size: 0.88rem;
    line-height: 1.4;
    max-width: 46rem;
}

/* „Zuletzt gesichert: …“ – ruhige Statuszeile unter dem Schalter. */
.ds-zuletzt {
    margin: 0.7rem 0 0;
    color: var(--grau-700);
    font-size: 0.95rem;
}

/* Vormerk-Rückmeldung (Neustart nötig): warmer Kupfer-Hinweisband, deutlich aber ruhig. */
.ds-vorgemerkt {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1rem 0 0;
    max-width: 52rem;
}

/* Abstand über der Liste-Überschrift, damit die Sektion sich klar gliedert. */
.ds-liste-titel {
    margin-top: 1.6rem;
}

/* Tabelle der Sicherungen: Größe + Aktion schmal, Zeitpunkt bekommt den Rest. */
.ds-tabelle {
    margin-top: 0.6rem;
}

.ds-tabelle .ds-spalte-groesse {
    white-space: nowrap;
    width: 8rem;
}

.ds-tabelle .ds-spalte-aktion {
    width: 12rem;
    text-align: right;
    white-space: nowrap;
}

/* =========================================================================
   Einstellungen → Katalog (DATANORM vom Server)
   Ergebnis der Ordner-Prüfung + „Jetzt aktualisieren"-Ergebnis + Erklärung.
   Ruhige, klare Hierarchie; Marken-Statuspalette (Navy-Erfolg, --fehler, neutral).
   ========================================================================= */

/* Neutraler / hinweisender Statustext (unverändert/übersprungen; „bereits aktuell"). */
.kat-neutral {
    color: var(--grau-700);
    font-size: 0.92rem;
}

.kat-hinweis {
    color: var(--grau-500);
    font-weight: 600;
    font-size: 0.92rem;
}

/* Schalter-Block „Automatisch beim Start aktualisieren" (Toggle + Hilfe + evtl. Fehler). */
.kat-schalter {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.1rem 0 0.4rem;
}

/* Ergebnis-Container (Ordner-Prüfung / „Jetzt aktualisieren") – dezent abgesetzte Fläche. */
.kat-pruef,
.kat-ergebnis {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kat-pruef > p:first-child,
.kat-ergebnis > p:first-child {
    margin: 0;
}

/* Kleine Überschrift über der Lieferanten-/Ergebnisliste. */
.kat-liste-titel {
    margin: 0.35rem 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--grau-500);
}

/* Liste der gefundenen Lieferanten bzw. der Ergebniszeilen je Lieferant. */
.kat-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kat-liste li {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.94rem;
    color: var(--grau-700);
    font-variant-numeric: tabular-nums;
}

/* Symbol vor einer Ergebniszeile (✓ / = / – / ✕): schmal, ruhig, farblich von der Zeile geerbt. */
.kat-zeile-symbol {
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
    font-weight: 700;
}

/* Lieferant ohne DATANORM-Datei (noch nicht einlesbar): dezent ausgegraut. */
.kat-zeile-blass {
    color: var(--grau-500);
}

/* Erklär-Karte (Ordner-Aufbau + Rechte-Hinweis) etwas ruhiger im Textton. */
.kat-erklaerung .abschnitt-hinweis {
    max-width: 60rem;
}

/* Kleiner „Baum" als Beispiel-Aufbau des Katalog-Ordners. */
.kat-baum,
.kat-baum ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kat-baum > li {
    font-weight: 600;
    color: var(--grau-900);
}

.kat-baum ul {
    margin: 0.25rem 0 0 1.1rem;
    border-left: 2px solid var(--kupfer-rand);
    padding-left: 0.9rem;
}

.kat-baum ul li {
    font-weight: 500;
    color: var(--grau-700);
    padding: 0.15rem 0;
}

.kat-baum-datei {
    color: var(--grau-500);
    font-weight: 400;
    font-size: 0.9rem;
}

/* Rechte-/Preis-Hinweisband: warm-neutral, deutlich aber ruhig. */
.kat-hinweis-band {
    max-width: 60rem;
}

/* ================================================================================================
   Band „Nachfassen fällig" (Idee „Angebot in 1 Klick nachfassen") – ganz oben in der Übersicht.
   Warm/kupfer-getönt (kalt werdende Angebote sind „dringend, aber nicht rot"), passend zum
   Handlungsbedarf-Zustand „dringend". Je Eintrag ein klar beschrifteter 1-Klick-Knopf; darunter ein
   dezent aufklappbares Mini-Formular. Markenfarben: Navy (--akzent) + Kupfer (--kupfer).
   ================================================================================================ */
.nachfass-band {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #fefbf6;                     /* sehr helle Kupfer-Tönung (wie .aktion-dringend) */
    border: 1px solid var(--kupfer-rand);
    border-left: 3px solid var(--kupfer);    /* warmer Akzentstreifen links */
    border-radius: var(--radius-l);
    padding: 0.85rem 1rem;
    margin-bottom: 0.4rem;
}

.nachfass-band-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nachfass-band-titelzeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nachfass-band-symbol {
    font-size: 1.1rem;
    line-height: 1;
    flex: none;
}

.nachfass-band-titel {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--grau-900);
}

/* Zähler-Badge (wie viele fällig): kupfern, ruhig. */
.nachfass-band-anz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    color: var(--kupfer-text);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nachfass-band-zweck {
    margin: 0;
    font-size: 0.8rem;
    color: var(--grau-600);
    line-height: 1.35;
}

/* Ruhige Bestätigung nach dem Nachfassen (navy-getönte Erfolgs-Linie, kein knalliges Grün). */
.nachfass-band-meldung {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.5rem 0.7rem;
    background: var(--erfolg-hg);
    border: 1px solid var(--erfolg-rand);
    border-radius: var(--radius-s);
    color: var(--erfolg);
    font-size: 0.85rem;
    font-weight: 600;
}

.nachfass-liste {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nachfass-zeile {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    padding: 0.5rem 0.6rem;
}

.nachfass-zeile-kopf {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

/* Klickbarer Textkörper (Titel + Kunde) öffnet das Detail – eigener Knopf (kein Button-im-Button). */
.nachfass-zeile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 12rem;
    gap: 0.05rem;
    padding: 0.15rem 0.1rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.nachfass-zeile-text:hover .nachfass-zeile-bv {
    color: var(--akzent-tief);
}

.nachfass-zeile-text:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

.nachfass-zeile-bv {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--grau-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nachfass-zeile-kunde {
    font-size: 0.78rem;
    color: var(--grau-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nachfass-zeile-alter {
    font-size: 0.75rem;
    color: var(--warn-text);
    white-space: nowrap;
    flex: none;
}

.nachfass-zeile-aktionen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    margin-left: auto;
}

/* Der 1-Klick-Hauptknopf trägt sein ✓ selbst (Beschriftung „Nachgefasst ✓"). */
.nachfass-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Dezenter Zusatz-Link „… mit Notiz/Termin" (verkompliziert den 1-Klick-Weg NICHT). */
.nachfass-mehr-link {
    background: none;
    border: none;
    padding: 0.2rem 0.15rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kupfer-text);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.nachfass-mehr-link:hover {
    color: var(--kupfer-stark);
}

.nachfass-mehr-link:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

/* Aufklappbares Mini-Formular (Notiz + Wunschtermin) – ruhig abgesetzt unter der Zeile. */
.nachfass-formular {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--grau-200);
}

.nachfass-formular-aktionen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Auf schmalen Fenstern: Aktionen unter den Text, volle Breite bleibt lesbar. */
@media (max-width: 560px) {
    .nachfass-zeile-aktionen {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

/* =====================================================================================
   Einstellungen → E-Mail-Vorlagen (Feature „E-Mail-Vorlagen-Bibliothek", UI Teil 1)
   Baut auf den bestehenden Bausteinen auf (einst-block, karte-flach, hinweis-band,
   feld/eingabe, status-erfolg, btn-*, ToggleSchalter). Markenkonform Navy/Kupfer,
   barrierearm (Fokus/Kontraste kommen aus den Basis-Klassen). Zweispaltiges Layout:
   links die Vorlagen-Liste, rechts die immer sichtbare Platzhalter-Hilfe (klebt mit).
   ===================================================================================== */

/* Ruhige Variante des Info-Bands (nicht-rückwirkend-Hinweis) – dezenter als das blaue. */
.hinweis-band--ruhig {
    background: var(--grau-50);
    border-color: var(--grau-200);
    color: var(--grau-700);
}

/* Zweispaltiges Grundlayout: Liste + mitlaufende Hilfe. */
.emv-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    align-items: start;
    margin-top: 1rem;
}

.emv-liste {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* Eine Art-Gruppe (Überschrift + zugehörige Vorlagen-Karten). */
.emv-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.emv-gruppe-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid var(--grau-200);
}

.emv-gruppe-titel {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--grau-900);
}

.emv-gruppe-erklaerung {
    margin: 0;
    font-size: 0.86rem;
    color: var(--grau-500);
    line-height: 1.4;
}

/* Eine Vorlagen-Karte (Name/Schalter, Betreff, Text, Aktionen). Kupfer-Akzent links. */
.emv-karte {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-left: 3px solid var(--kupfer);
}

/* Inaktive Vorlage: dezent gedämpft (bleibt aber voll bedienbar). */
.emv-karte--inaktiv {
    border-left-color: var(--grau-300);
    background: var(--grau-50);
}

.emv-karte--inaktiv .emv-feld-name .eingabe {
    color: var(--grau-500);
}

/* Kopfzeile der Karte: Name links (wächst), Aktiv-Schalter rechts. */
.emv-karte-kopf {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.emv-feld-name {
    flex: 1 1 16rem;
    min-width: 12rem;
    margin: 0;
}

.emv-karte-schalter {
    flex: 0 0 auto;
    padding-bottom: 0.35rem;
}

/* Das mehrzeilige Text-Eingabefeld: monospace-nah für saubere Platzhalter-Sicht, aber
   gut lesbar; ausreichend hoch, vertikal größenveränderbar. */
.emv-textfeld {
    min-height: 9.5rem;
    resize: vertical;
    line-height: 1.5;
    font-family: inherit;
}

/* Aktionsleiste der Karte: Löschen links, Speichern rechts. */
.emv-karte-aktionen {
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* „Vorlage hinzufügen"-Formular hebt sich dezent navy-getönt ab. */
.emv-neu {
    border-left: 3px solid var(--akzent);
    background: var(--akzent-hell);
}

/* --- Immer sichtbare Platzhalter-Hilfe (rechte Spalte) --- */
.emv-hilfe {
    position: sticky;
    top: 0.5rem;
    min-width: 0;
}

.emv-hilfe-karte {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
}

.emv-hilfe-titel {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
    color: var(--grau-900);
}

.emv-hilfe-hinweis {
    margin: 0;
    font-size: 0.84rem;
    color: var(--grau-500);
    line-height: 1.45;
}

.emv-platzhalter-liste {
    margin: 0.15rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.emv-platzhalter-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
}

.emv-platzhalter-zeile dt {
    margin: 0;
}

/* Der abtippbare Platzhalter – kräftiger Kupfer-Text, leicht getönte Fläche. */
.emv-token {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: var(--kupfer-hell);
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-s);
    color: var(--kupfer-text);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.emv-platzhalter-erklaerung {
    margin: 0;
    font-size: 0.82rem;
    color: var(--grau-700);
    line-height: 1.4;
}

.emv-hilfe-fussnote {
    margin: 0.15rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--grau-150);
    font-size: 0.8rem;
    color: var(--grau-500);
    line-height: 1.45;
}

/* Bewertungs-Link-Abschnitt: kleiner Abstand nach oben zur Liste/Hilfe. */
.emv-bewertung {
    margin-top: 1.25rem;
}

/* Schmale Fenster: Hilfe unter die Liste, nicht mehr sticky (kein knapper Platz). */
@media (max-width: 900px) {
    .emv-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .emv-hilfe {
        position: static;
    }
}

/* =====================================================================================
   „E-Mail-Text erzeugen"-Dialog (Feature „E-Mail-Vorlagen", UI Teil 2)
   Baut auf den bestehenden Bausteinen auf (modal/-kopf/-koerper/-schliessen, feld/eingabe,
   hinweis-band, aktionsleiste, btn-*, speichern-hinweis, leer-/lade-hinweis, feld-fehler).
   Hier nur das Feature-Spezifische: etwas breiteres Modal, zweispaltige Empfänger/Nummer-Zeile,
   der mehrzeilige Text-Bereich (Monospace-nah für sauberen Umbruch) und der Kopier-Fallback.
   Markenkonform, barrierearm (Fokus/Kontraste aus den Basis-Klassen).
   ===================================================================================== */

/* Etwas breiteres Modal als der Standard – der E-Mail-Text braucht Zeilenbreite. */
.modal-mail {
    max-width: 44rem;
}

/* Ruhiger Hinweis oben (kein Versand) – kompakter Abstand zur ersten Eingabe. */
.mail-erzeugen-hinweis {
    margin: 0 0 0.35rem;
}

/* Empfänger + optionale Angebotsnummer nebeneinander (auf schmalen Fenstern untereinander). */
.mail-erzeugen-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

/* Mehrzeiliger E-Mail-Text: gut lesbarer Zeilenabstand, vertikal größenveränderbar, ruhige Schrift. */
.mail-erzeugen-text {
    width: 100%;
    resize: vertical;
    min-height: 9rem;
    line-height: 1.5;
    font-family: inherit;
}

/* Dezenter „lieber kopieren"-Warnhinweis bei sehr langem Text (nicht alarmierend). */
.mail-erzeugen-warn {
    color: var(--grau-600);
}

/* Markierbarer Fallback, wenn keine Zwischenablage verfügbar ist. */
.mail-erzeugen-fallback {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Aktionsleiste rechtsbündig (Kopieren als Hauptaktion ganz rechts). */
.mail-erzeugen-aktionen {
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

/* Aktionszeile im Projekt-Detail-Kopf für „E-Mail-Text" (dezenter Abstand). */
.projekt-detail-aktionen {
    margin: 0.5rem 0 0.25rem;
}

/* Schmale Fenster: Empfänger/Nummer untereinander. */
@media (max-width: 640px) {
    .mail-erzeugen-zeile {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===================================================================================================
   Abschluss-Hinweis „Kunde um Bewertung bitten?" (Feature „Bewertung nach Projektabschluss")
   Dezentes, freundliches Handlungsband im Reiter „Überblick" – erscheint NUR bei Phase „Abgeschlossen".
   Warme, ruhige Kupfer/Beige-Tönung (passt zur „geschafft"-Stimmung), kein aufdringliches Modal/Rot.
   Klare Hierarchie: Kupfer-Stern-Symbol links · Titel/Text/Aktionen mittig · dezentes Ausblenden-✕ rechts.
   Markenkonform (Navy/Kupfer), barrierearm (Fokus/Kontraste aus den Basis-Klassen, Labels/aria im Markup).
   =================================================================================================== */
.abschluss-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0 0 1rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, var(--kupfer-hell), var(--beige));
    border: 1px solid var(--kupfer-rand);
    border-left: 4px solid var(--kupfer);
    border-radius: var(--radius-l);
}

/* Symbol-Kreis: Kupfer-Fläche mit Navy-Glyphe (AA-sicher, 6.2:1) – markiert das Band ruhig als „positiv". */
.abschluss-hinweis-symbol {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--kupfer);
    color: var(--grau-900);
    font-size: 1.05rem;
    line-height: 1;
}

.abschluss-hinweis-inhalt {
    flex: 1 1 auto;
    min-width: 0;
}

.abschluss-hinweis-titel {
    margin: 0.1rem 0 0.25rem;
    font-weight: 700;
    color: var(--grau-900);
}

.abschluss-hinweis-text {
    margin: 0 0 0.75rem;
    color: var(--grau-700);
    font-size: 0.95rem;
    line-height: 1.45;
}

/* „Bewertungs-Link fehlt"-Hinweis: ruhig, nicht alarmierend (warmer Kupfer-Text) – blockiert nichts. */
.abschluss-hinweis-linkfehlt {
    margin: 0 0 0.75rem;
    color: var(--kupfer-text);
    font-size: 0.88rem;
    line-height: 1.4;
}

.abschluss-hinweis-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Ruhige Rückmeldung nach „Später erinnern" (dezent farbcodiert, kein Kasten) – analog outlook-meldung. */
.abschluss-hinweis-meldung {
    margin: 0.55rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.abschluss-hinweis-meldung.ist-erfolg {
    color: var(--erfolg);
}

.abschluss-hinweis-meldung.ist-fehler {
    color: var(--fehler);
}

/* Dezentes Ausblenden-✕ oben rechts – unaufdringlich, aber gut klickbar; klarer Fokus/Hover. */
.abschluss-hinweis-schliessen {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: -0.2rem -0.3rem 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--grau-500);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.abschluss-hinweis-schliessen:hover {
    background: var(--kupfer-rand);
    color: var(--grau-900);
}

.abschluss-hinweis-schliessen:focus-visible {
    outline: 2px solid var(--kupfer-stark);
    outline-offset: 2px;
}

/* Schmale Fenster: Symbol behält Größe; Aktionen dürfen umbrechen (bereits flex-wrap). */
@media (max-width: 560px) {
    .abschluss-hinweis {
        padding: 0.85rem 0.9rem;
        gap: 0.65rem;
    }
}

/* ============================================================================
   STARTSEITE „MEIN TAG" (Cockpit)
   Auf einen Blick, was heute ansteht. Bewusst dieselbe ruhige Optik wie die
   Meine-Aufgaben-Agenda: weiße Karten mit feinem Rand/Schatten, viel Weißraum,
   klare Hierarchie. Vier gleichwertige Karten in einem responsiven Raster; je
   Karte eine ruhige Liste aus großen Klick-Zeilen (Ampelpunkt/Symbol · Titel +
   Meta · Termin-/Fällig-Pille) und ein dezenter „alles ansehen"-Link. Pillen
   nutzen die EINHEITLICHEN .ampel--*-Farben (ein Vokabular für „wie dringend?").
   Barrierearm: Zeilen sind echte Knöpfe (Fokus/Tastatur), Farbe nie allein.
   ============================================================================ */
.tag-cockpit {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 86rem;
}

/* Kopf: Titel + freundliche Begrüßung (ruhig, kein Fettdruck-Lärm). */
.tag-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tag-titel {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--grau-900);
}

.tag-gruss {
    margin: 0;
    font-size: 1rem;
    color: var(--grau-500);
}

.tag-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--kupfer-rand);
    border-radius: var(--radius-l);
    background: linear-gradient(180deg, var(--kupfer-hell), var(--grau-0));
    box-shadow: var(--schatten-s);
}

.tag-hero-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tag-hero-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kupfer-text);
}

.tag-hero h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.3vw, 2rem);
    line-height: 1.12;
    font-weight: 800;
    color: var(--grau-900);
}

.tag-hero p {
    margin: 0;
    max-width: 52rem;
    color: var(--grau-700);
}

.tag-hero-aktionen {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 13rem;
}

.tag-kpi-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.tag-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: 0 1px 2px rgba(15, 36, 47, 0.04);
}

.tag-kpi strong {
    color: var(--grau-900);
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.tag-kpi span {
    color: var(--grau-500);
    font-size: 0.82rem;
    font-weight: 650;
}

.tag-kpi--rot {
    background: var(--fehler-hg);
    border-color: var(--fehler-rand);
}

.tag-kpi--gelb {
    background: var(--warn-hg);
    border-color: var(--warn-rand);
}

.tag-kpi--blau {
    background: var(--akzent-hell);
    border-color: var(--akzent-rand);
}

.tag-kpi--gruen {
    background: var(--erfolg-hg);
    border-color: var(--erfolg-rand);
}

/* Schlanke Chip-Zeile oben: kleine Zähler-Knöpfe mit Sprung. Bewusst zurückhaltend
   (Pillen-Optik), umbrechend bei wenig Platz. Nur gerendert, wenn es Chips gibt. */
.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: -0.4rem;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--grau-700);
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tag-chip:hover {
    background: var(--grau-50);
    border-color: var(--grau-300);
}

.tag-chip:focus-visible {
    outline: 2px solid var(--akzent, #0f242f);
    outline-offset: 1px;
}

/* Kleiner Vollton-Punkt links im Chip (Ampel) – die Farbe ist zusätzlich zum Text, nie allein. */
.tag-chip-punkt {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--grau-300);
}

.tag-chip-punkt.ampel--rot {
    background: var(--fehler);
}

.tag-chip-punkt.ampel--gelb {
    background: var(--kupfer);
}

.tag-chip-punkt.ampel--grau {
    background: var(--grau-300);
}

.tag-arbeitslayout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.72fr);
    gap: 1rem;
    align-items: start;
}

.tag-hauptspalte,
.tag-statusspalte {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tag-statusspalte {
    position: sticky;
    top: 1rem;
}

/* Responsives Raster: zwei Spalten ab mittlerer Breite, sonst gestapelt. Karten
   gleicher Höhe wirken ruhig; auto-fit füllt die Breite ohne Riesenlücken. */
.tag-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 1.15rem;
    align-items: start;
}

/* Eine Cockpit-Karte (ein Abschnitt) – wie die Meine-Aufgaben-Panels. */
.tag-karte {
    display: flex;
    flex-direction: column;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-s);
    padding: 1.25rem 1.35rem 1.15rem;
}

.tag-karte--primaer {
    border-color: var(--akzent-rand);
}

.tag-karte-kopf {
    margin-bottom: 0.85rem;
}

.tag-karte-titelzeile {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.tag-karte-symbol {
    font-size: 1.15rem;
    line-height: 1;
}

.tag-karte-titel {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--grau-900);
}

/* Ruhiger Zähler neben dem Titel (nur bei > 0 gerendert). */
.tag-karte-anz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--grau-100);
    color: var(--grau-700);
    font-size: 0.8rem;
    font-weight: 700;
}

.tag-karte-zweck {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--grau-500);
}

/* Die ruhige Liste je Abschnitt. */
.tag-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tag-zeile {
    margin: 0;
}

/* Ganze Zeile = ein großes Klick-Ziel. Ruhig, mit dezentem Hover/Fokus. */
.tag-zeile-knopf {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.65rem;
    border: 0;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--grau-900);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tag-zeile-knopf:hover {
    background: var(--grau-50);
}

.tag-zeile-knopf:focus-visible {
    outline: 2px solid var(--akzent, #0f242f);
    outline-offset: 1px;
}

/* Ampel-PUNKT links (Vollton) – die Farbe ist zusätzlich zur Pille/Meta, nie allein. */
.tag-ampel {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--grau-300);
}

.tag-ampel.ampel--rot {
    background: var(--fehler);
}

.tag-ampel.ampel--gelb {
    background: var(--kupfer);
}

.tag-ampel.ampel--grau {
    background: var(--grau-300);
}

/* Symbol-Variante (Erinnerungen): 🔔/⏰/⚠ statt eines Punkts. */
.tag-zeile-symbol {
    flex: 0 0 auto;
    width: 1.3rem;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1;
}

/* Haupttext: Titel oben, dezente Meta („Projekt · Kunde") darunter. Bricht nicht,
   sondern kürzt mit Ellipse (ruhige, gleichmäßige Zeilen). */
.tag-zeile-haupt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tag-zeile-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grau-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-zeile-meta {
    font-size: 0.8rem;
    color: var(--grau-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der „hängt“-HauptGrund (Abschnitt „Projekte, die hängen“): die Kern-Info dieser Zeile, darum
   darf sie auf max. zwei Zeilen umbrechen (nicht wegkürzen). Dezent gefärbt je Art (rot = akut,
   kupfer = dran denken) – der Ton ist AA-tauglicher Text auf Weiß, nie Farbe allein. */
.tag-zeile-grund {
    font-size: 0.8rem;
    color: var(--grau-700);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tag-zeile-grund.ampel--rot {
    color: var(--fehler);
}

.tag-zeile-grund.ampel--gelb {
    color: var(--kupfer-text);
}

/* Termin-/Fällig-Pille rechts. Farbe kommt aus .ampel--* (Fläche + Text). */
.tag-pille {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Neutrale Termin-Pille (ruhiger Beige-Ton) – Termine sind nicht „dringend". */
.tag-pille--termin {
    background: var(--beige);
    color: var(--grau-700);
}

/* Rechte Termin-Zone: Pille + optional der „vorläufig"-Hinweis darunter. */
.tag-termin-rechts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.tag-vorlaeufig {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--grau-400);
}

/* Freundlicher Ruhezustand („nichts offen") – dezent, kein Alarm. */
.tag-ruhe {
    padding: 0.9rem 0.65rem;
    color: var(--grau-500);
    font-size: 0.9rem;
}

.tag-ruhe p {
    margin: 0 0 0.4rem;
}

.tag-ruhe p:last-child {
    margin-bottom: 0;
}

/* Dezenter „alles ansehen"-Link je Abschnitt (Kupfer-Text, ganz unten). */
.tag-alles-link {
    align-self: flex-start;
    margin-top: 0.6rem;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: var(--kupfer-text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.tag-alles-link:hover {
    text-decoration: underline;
}

.tag-alles-link:focus-visible {
    outline: 2px solid var(--akzent, #0f242f);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}

@media (max-width: 920px) {
    .tag-hero,
    .tag-arbeitslayout {
        grid-template-columns: 1fr;
    }

    .tag-statusspalte {
        position: static;
    }

    .tag-kpi-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Schmale Fenster: Karten stapeln (auto-fit erledigt das bereits); etwas
   kompakter, Titel behält Größe. */
@media (max-width: 560px) {
    .tag-hero {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .tag-hero-aktionen {
        min-width: 0;
    }

    .tag-kpi-band,
    .tag-arbeitslayout {
        grid-template-columns: 1fr;
    }

    .tag-statusspalte {
        position: static;
    }

    .tag-karte {
        padding: 1.05rem 1rem 1rem;
    }
}

/* ============================================================================
   VARIANTEN VERGLEICHEN (Feature „Varianten-Vergleich")
   In der Angebote-Übersicht: ein Auswahl-Modus (Checkbox-Spalte + Band) und ein
   Dialog, der 2–3 Angebote NEBENEINANDER gegenüberstellt. Baut auf den Basis-
   Bausteinen auf (modal-*, feld/eingabe, btn-*, hinweis-band, datentabelle).
   Markenkonform: Navy (--akzent*) für Auswahl/Aktion, Kupfer nur als warmer
   Akzent für den hervorgehobenen Eigenanteil. Barrierearm: Farbe nie allein
   (gewählte Zeile trägt zusätzlich das Häkchen, „gleicher Kunde" auch als Text;
   Fokus/Kontraste aus den Basis-Klassen).
   ============================================================================ */

/* --- Auswahl-Band im Vergleichsmodus (über der Tabelle) --- */
.vergleich-band {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    border-radius: var(--radius-l);
}

.vergleich-band-hinweis {
    margin: 0;
    color: var(--grau-700);
    line-height: 1.45;
}

.vergleich-band-aktion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.vergleich-band-status {
    font-weight: 600;
    color: var(--akzent-tief);
}

/* --- Auswahl-Spalte + gewählte/„gleicher Kunde"-Zeilen in der Angebote-Tabelle --- */
.angebote-tabelle .spalte-auswahl {
    width: 2.75rem;
    text-align: center;
}

.auswahl-haken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.auswahl-haken input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
    accent-color: var(--akzent);
}

.auswahl-haken input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.angebote-tabelle tr.zeile-gewaehlt > td {
    background: var(--akzent-hell);
}

/* Dezenter „gleicher Kunde"-Hinweis (kleiner Kupfer-Text – Farbe NICHT allein,
   trägt echten Text). */
.zeile-kunden-hinweis {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kupfer-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* --- Dialog: breiter als das Standard-Modal, damit 2–3 Spalten passen --- */
.modal-vergleich {
    max-width: 56rem;
}

/* Spalten der Gegenüberstellung: gleichbreit, umbrechend bei schmalem Fenster. */
.vergleich-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 0.25rem;
}

.vergleich-karte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    background: var(--grau-0);
    overflow: hidden;
}

.vergleich-karte-kopf {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 0.9rem;
    background: var(--grau-50);
    border-bottom: 1px solid var(--grau-200);
}

/* Kleine Marke „Variante A/B/C" (Default-Label, unabhängig von der editierten
   Bezeichnung) – ordnet die Spalte ruhig ein. */
.vergleich-marke {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--akzent-tief);
    background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

/* Kennzahlen als Definitionsliste (Label links, Betrag rechts). */
.vergleich-kennzahlen {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.35rem 0.9rem 0.75rem;
}

.vergleich-kennzahl {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--grau-100);
}

.vergleich-kennzahl:last-child {
    border-bottom: none;
}

.vergleich-kennzahl dt {
    margin: 0;
    color: var(--grau-500);
    font-size: 0.85rem;
}

.vergleich-kennzahl dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--grau-900);
    text-align: right;
}

/* Eigenanteil: der Kunden-relevante Betrag – warm hervorgehoben (Kupfer), etwas
   größer. Farbe nicht allein: er steht als letzte, klar benannte Zeile. */
.vergleich-kennzahl--haupt {
    margin-top: 0.15rem;
    padding-top: 0.55rem;
    border-top: 2px solid var(--kupfer-rand);
}

.vergleich-kennzahl--haupt dt {
    color: var(--grau-700);
    font-weight: 600;
}

.vergleich-kennzahl--haupt dd {
    font-size: 1.15rem;
    color: var(--kupfer-text);
}

.vergleich-aktionen {
    margin-top: 0.5rem;
}

/* Schmale Fenster: Dialog-Spalten stapeln (auto-fit erledigt das bereits). */
@media (max-width: 620px) {
    .vergleich-spalten {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Globales Suchfeld im Kopf (Feature „Globale Suche")
   Links neben den Reitern: ein ruhiges Feld mit Lupe; darunter ein Overlay
   mit den nach Art gruppierten Treffern. Markenkonform (Navy-Fokus, Navy-
   Auswahl, Kupfer-Gruppensymbole); nutzt das Overlay-Muster des Kunden-
   Pickers / Benachrichtigungs-Panels.
   ========================================================================= */

/* Hülle in der Kopf-Navigation: nimmt eine angenehme feste Breite ein, darf aber schrumpfen, damit die
   scrollende Reiter-Zone daneben Platz behält. position:relative verankert das Overlay unter dem Feld. */
.kopfsuche-huelle {
    position: relative;
    flex: 0 1 20rem;
    min-width: 8.5rem;
    display: flex;
}

.kopfsuche {
    position: relative;
    width: 100%;
}

/* Feldzeile: Lupe links, Eingabe dehnend, „ד rechts – alles in einer ruhigen, gerundeten Fläche. */
.kopfsuche-feld-zeile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.4rem;
    padding: 0 0.5rem 0 0.7rem;
    background: var(--grau-50);
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

/* Fokus liegt am <input>; die ganze Fläche zeigt den Navy-Fokusring (barrierearm, gut sichtbar). */
.kopfsuche-feld-zeile:focus-within {
    background: var(--grau-0);
    border-color: var(--akzent-rand);
    box-shadow: var(--schatten-fokus);
}

.kopfsuche-lupe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--grau-500);
}

.kopfsuche-eingabe {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    color: var(--grau-900);
    padding: 0;
}

.kopfsuche-eingabe::placeholder {
    color: var(--grau-400);
}

.kopfsuche-eingabe:focus {
    outline: none;
}

/* „Suche leeren“ (×) – dezent, wird erst bei Text gezeigt. */
.kopfsuche-leeren {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    border-radius: 999px;
    color: var(--grau-500);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.kopfsuche-leeren:hover {
    background: var(--grau-100);
    color: var(--grau-900);
}

.kopfsuche-leeren:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* Treffer-Overlay: schwebt unter dem Feld (verschiebt das Kopf-Layout nie). Breiter als das Feld, damit
   Titel/Untertitel gut lesbar sind; auf schmalem Fenster über max-width gedeckelt. */
.kopfsuche-overlay {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 1200;
    width: 26rem;
    max-width: min(26rem, calc(100vw - 1.5rem));
    max-height: 28rem;
    overflow-y: auto;
    padding: 0.35rem;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-l);
    animation: benach-toast-rein 0.16s ease-out;
}

.kopfsuche-lade,
.kopfsuche-leer {
    margin: 0;
    padding: 0.85rem 0.75rem;
    color: var(--grau-500);
    font-size: 0.9rem;
}

/* Eine Art-Gruppe (z. B. „Angebote“) im Overlay. */
.kopfsuche-gruppe + .kopfsuche-gruppe {
    margin-top: 0.15rem;
    border-top: 1px solid var(--grau-150);
    padding-top: 0.15rem;
}

/* Gruppen-Überschrift: kleines Kupfer-Symbol + Plural-Titel, dezent und ruhig. */
.kopfsuche-gruppe-titel {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.65rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grau-500);
}

.kopfsuche-gruppe-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kupfer-text);
}

/* Eine Treffer-Zeile: Titel (fett) + dezenter Untertitel. */
.kopfsuche-option {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-s);
    cursor: pointer;
    color: var(--grau-900);
}

/* Hervorgehobene Option (Pfeiltasten ODER Maus-Hover): Navy-Fläche, weißer Text = Top-Kontrast. */
.kopfsuche-option-aktiv {
    background: var(--akzent);
    color: #ffffff;
}

.kopfsuche-option-titel {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kopfsuche-option-untertitel {
    font-size: 0.82rem;
    color: var(--grau-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Auf der Navy-Auswahlfläche muss auch der Untertitel hell/lesbar sein. */
.kopfsuche-option-aktiv .kopfsuche-option-untertitel {
    color: rgba(255, 255, 255, 0.82);
}

/* Dezenter grauer „· archiviert"-Chip hinter dem Titel eines archivierten Projekt-Treffers (Welle-3b-Punkt 3):
   ruhig, klein und normal-gewichtet, damit archivierte Projekte sichtbar, aber nicht laut sind. */
.kopfsuche-option-archiv {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--grau-500);
    white-space: nowrap;
}

/* Auf der Navy-Auswahlfläche den Chip ebenfalls hell/lesbar halten (leicht gedämpft gegenüber dem Titel). */
.kopfsuche-option-aktiv .kopfsuche-option-archiv {
    color: rgba(255, 255, 255, 0.72);
}

/* Sehr schmale Fenster: das Suchfeld tiefer schrumpfen lassen (Lupe + Platzhalter-Kürzung), damit die
   Reiter/Aktionen sichtbar bleiben. Das Feld bleibt bedienbar (kein reines Icon-Umschalten nötig). */
@media (max-width: 900px) {
    .kopfsuche-huelle {
        flex: 0 1 13rem;
    }

    /* Auf schmalen Fenstern nur Avatar + Pfeil zeigen: ein langer Benutzername würde die angepinnte
       Aktionsleiste sonst verbreitern und die Kopfzeile auf eine dritte Zeile drücken. Der Name bleibt
       als aria-label/title am Knopf erhalten (barrierearm). */
    .profil-name {
        display: none;
    }
}


/* ====================================================================================
   PROJEKT-STATUSLEISTE + „DAS FEHLT HIER" + ANRUF/BLOCKIEREN (Transparenz-Paket, B1b+5)
   Eine RUHIGE Chip-Zeile ganz oben im Projekt-Detail (Marken-Navy #1D1D1B als Text,
   Kupfer nur als warmer Akzent, die bestehenden Ampel-Farben für rot/gelb) plus die
   optionale „Das fehlt hier"-Karte. Bewusst zurückhaltend: kleine Chips, viel Weißraum.
   ==================================================================================== */

.projekt-status-leiste {
    background: #ffffff;
    border: 1px solid var(--grau-200);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.9rem;
}

.projekt-status-leiste--fehler {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--grau-700);
}

/* Die eine Chip-Zeile: umbricht bei schmalen Fenstern, bleibt aber luftig. */
.status-leiste-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

/* Grund-Chip: dezente Pille mit Navy-Text. Buttons (klickbare Chips) erben die Optik. */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    background: var(--grau-50);
    color: var(--grau-900);
    font-size: 0.85rem;
    line-height: 1.25;
    white-space: nowrap;
    max-width: 100%;
    /* Lange Chip-Texte (z.B. Aufgaben-Titel im „Nächster Schritt") sauber kürzen statt sprengen. */
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-chip--phase {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #ffffff;
    font-weight: 600;
}

/* Klickbare Chips: Button-Reset + spürbares Hover/Fokus-Feedback (große Klickziele). */
button.status-chip--klick {
    cursor: pointer;
    font-family: inherit;
}

button.status-chip--klick:hover {
    background: #ffffff;
    border-color: var(--grau-400);
}

button.status-chip--klick:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

/* Rote Dringlichkeit (überfälliger nächster Schritt, Blockiert) – wie die bestehende Ampel. */
.status-chip--rot {
    background: #fdeeee;
    border-color: #eec2c2;
    color: #9a2c2c;
    font-weight: 600;
}

button.status-chip--rot:hover {
    background: #fbe2e2;
    border-color: #e0a9a9;
}

/* „fehlt"-Zustand (kein Termin): gestrichelt + gedimmt, ohne Alarm. */
.status-chip--leer {
    border-style: dashed;
    color: var(--grau-500);
}

/* Ball-Chip: Label + kleines Select + „seit …"-Zusatz in EINER Pille. */
.status-chip--ball {
    gap: 0.4rem;
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
}

.status-ball-label {
    font-size: 0.85rem;
    color: var(--grau-900);
    margin: 0;
}

.status-ball-wahl {
    border: 1px solid var(--kupfer-rand);
    border-radius: 6px;
    background: #ffffff;
    color: var(--grau-900);
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
}

.status-ball-wahl:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

.status-ball-seit {
    color: var(--kupfer-text);
    font-size: 0.8rem;
}

/* Verdichtete Signale „Projekt hängt" / „Ball zu lange beim Kunden" als kleine Badges. */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge--rot {
    background: #9a2c2c;
    color: #ffffff;
}

.status-badge--gelb {
    background: #fdf3d7;
    border: 1px solid #ecd9a0;
    color: #7a5c12;
}

/* Dezente „Zuletzt passiert"-Zeile unter den Chips. */
.status-leiste-zuletzt {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--grau-500);
}

/* --- „Das fehlt hier"-Karte (nur sichtbar, wenn es Hinweise gibt) --- */
.fehlt-karte {
    margin-top: 0.7rem;
    border: 1px solid var(--kupfer-rand);
    border-left: 4px solid var(--kupfer);
    border-radius: 8px;
    background: var(--kupfer-hell);
    padding: 0.6rem 0.8rem;
}

.fehlt-karte-titel {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--grau-900);
}

.fehlt-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fehlt-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fehlt-symbol {
    flex: 0 0 auto;
}

/* Der Hinweistext nimmt nur seinen eigenen Platz ein – der Fix-Knopf steht DIREKT DANEBEN
   (nicht rechtsbündig ans Zeilenende: bei sehr breiten Layouts wäre er sonst weit weg vom Text). */
.fehlt-text {
    flex: 0 1 auto;
    font-size: 0.86rem;
    color: var(--grau-900);
    line-height: 1.35;
}

.fehlt-fix {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Blockieren mit Pflicht-Grund (Aufgaben-Reiter) --- */
.aufgaben-blockiert-editor {
    margin: 0.4rem 0 0.15rem 2.1rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #eec2c2;
    border-radius: 8px;
    background: #fdf5f5;
}

.aufgaben-blockiert-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--grau-900);
    margin-bottom: 0.3rem;
}

.aufgaben-blockiert-zeile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.aufgaben-blockiert-feld {
    flex: 1 1 14rem;
}

/* Sichtbarer Grund einer blockierten Aufgabe (ruhige rote Zeile unter der Aufgabe). */
.aufgaben-blockiert-grund {
    margin: 0.3rem 0 0.15rem 2.1rem;
    font-size: 0.84rem;
    color: #9a2c2c;
}

/* --- „Anruf dokumentieren"-Dialog --- */
.anruf-dialog {
    max-width: 34rem;
}

.anruf-ergebnis {
    border: 1px solid var(--grau-200);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    margin: 0 0 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}

.anruf-feld-titel {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--grau-900);
    padding: 0 0.25rem;
}

.anruf-ergebnis-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.anruf-feld {
    margin-bottom: 0.75rem;
}

.anruf-folge-haken {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    cursor: pointer;
}

.anruf-folge-titel-label {
    display: block;
    margin-top: 0.45rem;
}

/* Pflicht-Sternchen an Feldern (kupfer, dezent – die Pflicht steht zusätzlich im Fehlertext). */
.pflicht {
    color: var(--kupfer-text);
    font-weight: 700;
}

/* ============================================================================
   Aufgaben-POSTEINGANG (Transparenz-Paket, Baustein 2)
   Ruhige Liste der noch NICHT zugewiesenen, offenen Aufgaben – je Zeile Titel,
   „Projekt · …" / „Ohne Projekt", Prio-Punkt, Termin-Pille (einheitliche Ampel)
   und Alter, dazu die Aktionen Annehmen / Zuweisen an … / öffnen. Optik an
   „Meine Aufgaben" angelehnt (gleiche Marken-Töne Navy/Kupfer + einheitliche
   Ampel), aber bewusst schlicht/nicht überladen. Farbe ist nie die einzige
   Information (Text/Tooltip daneben; barrierearm).
   ============================================================================ */
.pe-bereich {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 60rem;
}

.pe-panel {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--schatten-s);
}

.pe-panel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--grau-150);
    background: var(--grau-50);
}

.pe-panel-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--grau-900);
}

.pe-symbol {
    color: var(--kupfer-text);
    flex: none;
}

.pe-kopf-zahl {
    color: var(--grau-500);
    font-weight: 500;
    font-size: 0.92rem;
}

.pe-panel-body {
    padding: 1.1rem;
}

/* Kurzer Erklärtext oben – ruhig, nicht dominant. */
.pe-erklaer {
    margin: 0 0 1rem;
    color: var(--grau-500);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Ruhige Rückmeldung nach Annehmen/Zuweisen. */
.pe-rueckmeldung {
    margin: 0 0 0.9rem;
    padding: 0.5rem 0.75rem;
    background: var(--erfolg-hg);
    color: var(--erfolg);
    border-radius: var(--radius-s);
    font-size: 0.9rem;
}

/* Hinweis „Ordne dich erst einem Mitarbeiter zu" (Annehmen deaktiviert). */
.pe-hinweis {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.55rem 0.8rem;
    background: var(--warn-hg);
    color: var(--warn-text);
    border-radius: var(--radius-s);
    font-size: 0.88rem;
}

.pe-hinweis-link {
    background: none;
    border: none;
    font: inherit;
    font-size: inherit;
    color: var(--kupfer-text);
    cursor: pointer;
    padding: 0.1rem 0.2rem;
    border-radius: var(--radius-s);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pe-hinweis-link:hover {
    color: var(--kupfer-stark);
}

.pe-hinweis-link:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

/* --- Filter-Chips (Alle · Überfällig · Mit Projekt · Ohne Projekt · Prio hoch) --- */
.pe-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
}

.pe-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--grau-700);
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.pe-chip:hover {
    border-color: var(--kupfer-rand);
    color: var(--grau-900);
}

.pe-chip:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.pe-chip--an {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
}

.pe-chip--an:hover {
    color: #fff;
}

.pe-chip-zahl {
    color: var(--grau-500);
    font-weight: 600;
    font-size: 0.8rem;
}

.pe-chip:hover .pe-chip-zahl {
    color: var(--grau-700);
}

.pe-chip--an .pe-chip-zahl {
    color: rgba(255, 255, 255, 0.85);
}

.pe-filter-leer {
    margin-bottom: 0;
}

/* --- Die Liste --- */
.pe-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pe-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    background: var(--grau-0);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.pe-zeile:hover {
    border-color: var(--kupfer-rand);
    box-shadow: var(--schatten-s);
}

.pe-zeile-haupt {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    flex: 1 1 20rem;
}

.pe-titel-zeile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.pe-titel-text {
    font-weight: 600;
    color: var(--grau-900);
    overflow-wrap: anywhere;
}

/* „To-Do"-Marke für freie Aufgaben (dezent, damit der Typ erkennbar bleibt). */
.pe-typ-marke {
    flex: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--kupfer-text);
    background: var(--grau-100);
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
}

.pe-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--grau-500);
}

.pe-meta-projekt {
    overflow-wrap: anywhere;
}

.pe-alter {
    color: var(--grau-500);
    white-space: nowrap;
}

/* Prio-Punkt (nur Punkt, wie in der Agenda – gleiche ma-prio-Farbtöne über die geteilten Klassen). */
.pe-prio {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.pe-prio-punkt {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--grau-300);
}

.pe-prio.ma-prio--hoch .pe-prio-punkt {
    background: var(--fehler);
}

.pe-prio.ma-prio--normal .pe-prio-punkt {
    background: var(--grau-400, #9aa0a6);
}

.pe-prio.ma-prio--niedrig .pe-prio-punkt {
    background: var(--grau-300);
}

/* --- Aktionen je Zeile --- */
.pe-aktionen {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: none;
}

.pe-select {
    font: inherit;
    font-size: 0.85rem;
    color: var(--grau-700);
    background: var(--grau-0);
    border: 1px solid var(--grau-300);
    border-radius: var(--radius-s);
    padding: 0.32rem 0.55rem;
    cursor: pointer;
    max-width: 12rem;
}

.pe-select:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
}

.pe-select:disabled {
    opacity: 0.6;
    cursor: default;
}

/* --- Leerzustand („Nichts Neues – alles zugewiesen.") --- */
.pe-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    background: var(--erfolg-hg);
    color: var(--grau-700);
}

.pe-leer-haken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: var(--grau-0);
    color: var(--erfolg);
    margin-bottom: 0.2rem;
}

.pe-leer-titel {
    font-weight: 600;
    color: var(--grau-900);
}

.pe-leer-text {
    font-size: 0.9rem;
    color: var(--grau-500);
    max-width: 30rem;
}

/* =========================================================================
   Anfragen & Vertrieb
   ========================================================================= */
.vertrieb-bereich {
    max-width: 1220px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.vertrieb-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.vertrieb-kopf h1,
.vertrieb-panel h2,
.vertrieb-neu h2,
.vertrieb-spalte h2 {
    margin: 0;
    color: var(--grau-900);
    letter-spacing: 0;
}

.vertrieb-kopf h1 {
    font-size: 1.9rem;
}

.vertrieb-label {
    margin: 0 0 0.25rem;
    color: var(--kupfer-text);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.vertrieb-untertitel {
    margin: 0.35rem 0 0;
    color: var(--grau-500);
    max-width: 44rem;
}

.vertrieb-kopf-aktionen {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vertrieb-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-100);
}

.vertrieb-segment-knopf {
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--grau-700);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.42rem 0.72rem;
    cursor: pointer;
    white-space: nowrap;
}

.vertrieb-segment-knopf:hover,
.vertrieb-segment-knopf:focus-visible {
    background: var(--grau-0);
    color: var(--grau-900);
    outline: none;
}

.vertrieb-segment-knopf--aktiv {
    background: var(--akzent);
    color: #fff;
}

.vertrieb-segment-knopf--aktiv:hover,
.vertrieb-segment-knopf--aktiv:focus-visible {
    background: var(--akzent);
    color: #fff;
}

.vertrieb-kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vertrieb-kennzahl {
    min-height: 7.25rem;
    border: 1px solid var(--grau-200);
    border-left: 4px solid var(--grau-300);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.vertrieb-akzent--kupfer {
    border-left-color: var(--kupfer);
}

.vertrieb-akzent--kritisch {
    border-left-color: var(--fehler);
}

.vertrieb-akzent--erfolg {
    border-left-color: var(--akzent);
}

.vertrieb-kennzahl-wert {
    font-size: 1.75rem;
    line-height: 1;
    font-weight: 800;
    color: var(--grau-900);
}

.vertrieb-kennzahl-titel {
    font-weight: 700;
    color: var(--grau-900);
}

.vertrieb-kennzahl-text,
.vertrieb-meta,
.vertrieb-aktion-zusatz,
.vertrieb-spalte-kopf p,
.vertrieb-spalte-leer {
    color: var(--grau-500);
    font-size: 0.9rem;
}

.vertrieb-werkzeuge {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
}

.vertrieb-suche {
    display: grid;
    gap: 0.35rem;
    min-width: min(100%, 25rem);
}

.vertrieb-suche span,
.vertrieb-form span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--grau-700);
}

.vertrieb-treffer {
    color: var(--grau-500);
    font-size: 0.9rem;
    white-space: nowrap;
}

.vertrieb-meldung {
    margin-bottom: 1rem;
}

.vertrieb-tageslayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.38fr);
    gap: 1rem;
    align-items: start;
}

.vertrieb-panel,
.vertrieb-neu,
.vertrieb-kompass {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
}

.vertrieb-panel,
.vertrieb-neu {
    padding: 1rem;
}

.vertrieb-panel-kopf,
.vertrieb-spalte-kopf {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.vertrieb-panel-anz,
.vertrieb-spalte-kopf span {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--kupfer-hell);
    color: var(--kupfer-text);
    font-weight: 800;
    flex: none;
}

.vertrieb-aktionen,
.vertrieb-vorgaenge {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.65rem;
}

.vertrieb-aktion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--grau-200);
    border-left: 4px solid var(--grau-300);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    padding: 0.8rem;
}

.vertrieb-aktion-inhalt {
    min-width: 0;
    display: grid;
    gap: 0.16rem;
}

.vertrieb-aktion-inhalt strong,
.vertrieb-vorgang strong {
    color: var(--grau-900);
    overflow-wrap: anywhere;
}

.vertrieb-aktion-art {
    color: var(--kupfer-text);
    font-size: 0.82rem;
    font-weight: 800;
}

.vertrieb-aktion-knopfgruppe {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.vertrieb-seite {
    display: grid;
    gap: 1rem;
}

.vertrieb-form {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.vertrieb-form label {
    display: grid;
    gap: 0.35rem;
}

.vertrieb-form textarea {
    resize: vertical;
    min-height: 7rem;
}

.vertrieb-kompass {
    padding: 0.85rem;
    display: grid;
    gap: 0.45rem;
}

.vertrieb-kompass-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    color: var(--grau-700);
    padding: 0.55rem 0.65rem;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.vertrieb-kompass-zeile:hover,
.vertrieb-kompass-zeile:focus-visible {
    background: var(--kupfer-hell);
    border-color: var(--kupfer-rand);
    outline: none;
}

.vertrieb-kompass-zeile strong {
    color: var(--grau-900);
}

.vertrieb-prozess {
    display: grid;
    grid-template-columns: repeat(5, minmax(13rem, 1fr));
    gap: 0.8rem;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.vertrieb-spalte {
    min-width: 13rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: var(--grau-0);
    padding: 0.85rem;
}

.vertrieb-spalte-kopf h2 {
    font-size: 1rem;
}

.vertrieb-spalte-kopf p {
    margin: 0.18rem 0 0;
}

.vertrieb-spalte-leer {
    margin: 1rem 0 0;
    background: var(--grau-50);
    border-radius: var(--radius-s);
    padding: 0.7rem;
}

.vertrieb-vorgang {
    display: grid;
    gap: 0.55rem;
    border: 1px solid var(--grau-200);
    border-left: 4px solid var(--grau-300);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    padding: 0.65rem;
}

.vertrieb-vorgang-haupt {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    text-align: left;
    display: grid;
    gap: 0.16rem;
    cursor: pointer;
}

.vertrieb-vorgang-haupt span {
    color: var(--grau-500);
    font-size: 0.86rem;
}

.vertrieb-vorgang-haupt em {
    color: var(--kupfer-text);
    font-size: 0.84rem;
    font-style: normal;
    font-weight: 700;
}

.vertrieb-vorgang-haupt:focus-visible {
    outline: none;
    box-shadow: var(--schatten-fokus);
    border-radius: var(--radius-s);
}

.vertrieb-leer {
    margin-top: 1rem;
}

@media (max-width: 980px) {
    .vertrieb-kopf,
    .vertrieb-werkzeuge {
        align-items: stretch;
        flex-direction: column;
    }

    .vertrieb-kopf-aktionen {
        justify-content: flex-start;
    }

    .vertrieb-kennzahlen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vertrieb-tageslayout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vertrieb-bereich {
        padding: 1.25rem 1rem 3rem;
    }

    .vertrieb-kennzahlen {
        grid-template-columns: 1fr;
    }

    .vertrieb-aktion {
        grid-template-columns: 1fr;
    }

    .vertrieb-aktion-knopfgruppe {
        justify-content: flex-start;
    }
}

/* =========================================================================
   Workflow V3 – Kalkulation und Steuerung
   ========================================================================= */

.arbeitsbereich {
    width: min(100%, 1480px);
    margin: 0 auto;
    padding: clamp(1.15rem, 2vw, 1.75rem) clamp(1rem, 2.2vw, 2rem) 3rem;
}

.kalkulation-bereich,
.steuerung-bereich {
    display: grid;
    gap: 1.2rem;
}

.kalkulation-kopf,
.steuerung-kopf {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.bereich-eyebrow {
    color: var(--kupfer-text);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 0.28rem;
    text-transform: uppercase;
}

.kalkulation-layout {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
}

.kalkulation-panel,
.steuerung-panel {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-m);
    box-shadow: var(--schatten-s);
}

.kalkulation-panel {
    display: grid;
    gap: 1rem;
    padding: 1.05rem;
}

.kalkulation-panel-kopf h2,
.steuerung-panel-kopf h2 {
    margin: 0;
}

.kalkulation-konfigurator {
    border-bottom: 1px solid var(--grau-200);
    border-top: 1px solid var(--grau-200);
    display: grid;
}

.kalkulation-konfigurator > div {
    display: grid;
    gap: 0.3rem;
    padding: 0.9rem 0;
}

.kalkulation-konfigurator > div + div {
    border-top: 1px solid var(--grau-150);
}

.kalkulation-status {
    color: var(--grau-500);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.kalkulation-konfigurator h3 {
    font-size: 1rem;
    margin: 0;
}

.kalkulation-konfigurator p,
.kalkulation-karte small,
.steuerung-regeln span,
.steuerung-person p,
.steuerung-hinweis span {
    color: var(--grau-500);
}

.kalkulation-konfigurator p {
    margin: 0;
}

.kalkulation-start {
    align-items: center;
    background: var(--akzent);
    border: 0;
    border-radius: var(--radius-s);
    color: #fff;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-weight: 800;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1rem;
}

.kalkulation-start:hover {
    background: var(--akzent-dunkel);
}

.kalkulation-werkzeuge {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kalkulation-karte {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-left: 4px solid var(--kupfer);
    border-radius: var(--radius-s);
    box-shadow: var(--schatten-xs);
    color: inherit;
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 0.38rem;
    min-height: 9.2rem;
    padding: 0.9rem;
    text-align: left;
}

.kalkulation-karte:hover,
.steuerung-kpi:hover,
.steuerung-aufgabe:hover {
    border-color: var(--akzent-rand);
    box-shadow: var(--schatten-s);
    transform: translateY(-1px);
}

.kalkulation-karte span {
    color: var(--kupfer-text);
    font-size: 0.78rem;
    font-weight: 800;
}

.kalkulation-karte strong {
    font-size: 1.02rem;
}

.steuerung-hinweis {
    align-items: flex-start;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-left: 4px solid var(--kupfer);
    border-radius: var(--radius-s);
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
}

.steuerung-hinweis--fehler {
    border-left-color: var(--fehler);
}

.steuerung-kpis {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.steuerung-kpi {
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    box-shadow: var(--schatten-xs);
    color: inherit;
    display: grid;
    font: inherit;
    gap: 0.18rem;
    min-height: 7.2rem;
    padding: 0.85rem;
    text-align: left;
}

button.steuerung-kpi {
    cursor: pointer;
}

.steuerung-kpi span {
    color: var(--grau-500);
    font-size: 0.78rem;
    font-weight: 800;
}

.steuerung-kpi strong {
    font-size: clamp(1.55rem, 2vw, 2.2rem);
    line-height: 1;
}

.steuerung-kpi small {
    color: var(--grau-500);
    font-weight: 700;
}

.steuerung-kpi--ok {
    border-left: 4px solid var(--erfolg);
}

.steuerung-kpi--warnung {
    border-left: 4px solid var(--kupfer);
}

.steuerung-kpi--kritisch {
    border-left: 4px solid var(--fehler);
}

.steuerung-raster {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(520px, 1.1fr) minmax(360px, 0.9fr);
}

.steuerung-panel {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
}

.steuerung-panel--team {
    grid-row: span 2;
}

.steuerung-panel-kopf {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.steuerung-teamliste {
    display: grid;
    gap: 0.7rem;
}

.steuerung-person {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    display: grid;
    gap: 0.72rem;
    padding: 0.82rem;
}

.steuerung-person-kopf {
    align-items: center;
    display: flex;
    gap: 0.7rem;
}

.steuerung-avatar {
    align-items: center;
    background: var(--akzent);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: 0 0 2.3rem;
    font-size: 0.78rem;
    font-weight: 800;
    height: 2.3rem;
    justify-content: center;
    min-width: 2.3rem;
}

.steuerung-person h3,
.steuerung-person p {
    margin: 0;
}

.steuerung-auslastung {
    background: var(--grau-100);
    border-radius: 999px;
    height: 0.46rem;
    overflow: hidden;
}

.steuerung-auslastung-balken {
    display: block;
    height: 100%;
}

.steuerung-auslastung-balken--ok {
    background: var(--erfolg);
}

.steuerung-auslastung-balken--warnung {
    background: var(--kupfer);
}

.steuerung-auslastung-balken--kritisch {
    background: var(--fehler);
}

.steuerung-person-werte {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.steuerung-person-werte div {
    background: var(--grau-50);
    border-radius: var(--radius-s);
    padding: 0.5rem;
}

.steuerung-person-werte dt {
    color: var(--grau-500);
    font-size: 0.75rem;
    font-weight: 800;
}

.steuerung-person-werte dd {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0.1rem 0 0;
}

.steuerung-leer {
    color: var(--grau-500);
    margin: 0;
}

.steuerung-aufgabenliste,
.steuerung-regeln {
    display: grid;
    gap: 0.65rem;
}

.steuerung-aufgabe {
    align-items: start;
    background: var(--grau-0);
    border: 1px solid var(--grau-200);
    border-left: 4px solid var(--grau-300);
    border-radius: var(--radius-s);
    color: inherit;
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.72rem;
    text-align: left;
}

.steuerung-aufgabe--warnung {
    border-left-color: var(--kupfer);
}

.steuerung-aufgabe--kritisch {
    border-left-color: var(--fehler);
}

.steuerung-aufgabe strong,
.steuerung-aufgabe small,
.steuerung-aufgabe-meta {
    display: block;
}

.steuerung-aufgabe small,
.steuerung-aufgabe-meta em {
    color: var(--grau-500);
    font-size: 0.8rem;
    font-style: normal;
}

.steuerung-aufgabe-meta {
    display: grid;
    gap: 0.2rem;
    justify-items: end;
    min-width: 8rem;
}

.steuerung-regeln > div {
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    display: grid;
    gap: 0.25rem;
    padding: 0.76rem;
}

@media (max-width: 1180px) {
    .steuerung-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .steuerung-raster,
    .kalkulation-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .kalkulation-kopf,
    .steuerung-kopf,
    .steuerung-panel-kopf {
        align-items: stretch;
        flex-direction: column;
    }

    .kalkulation-werkzeuge,
    .steuerung-kpis {
        grid-template-columns: 1fr;
    }

    .steuerung-person-werte {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steuerung-aufgabe {
        grid-template-columns: 1fr;
    }

    .steuerung-aufgabe-meta {
        justify-items: start;
        min-width: 0;
    }
}


/* BüroFlow-Systemeinstieg in den Einstellungen: bündelt die anpassbaren Strukturpunkte. */
.bueroflow-system {
    display: grid;
    gap: 1rem;
}

.bueroflow-kachelband {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.bueroflow-kachel {
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.bueroflow-nummer {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-s);
    display: inline-grid;
    place-items: center;
    background: var(--akzent);
    color: #fff;
    font-weight: 800;
}

.bueroflow-matrix {
    display: grid;
    gap: 0.55rem;
}

.bueroflow-matrix--kompakt {
    margin-top: 0.4rem;
}

.bueroflow-zeile {
    display: grid;
    grid-template-columns: minmax(11rem, 0.7fr) minmax(16rem, 1.35fr) minmax(10rem, 0.65fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--linie);
}

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

.bueroflow-zeile strong {
    color: var(--grau-900);
}

.bueroflow-zeile span {
    color: var(--grau-700);
}

.bueroflow-zeile em {
    color: var(--grau-600);
    font-style: normal;
    font-weight: 700;
}

.bueroflow-phasen {
    display: grid;
    grid-template-columns: repeat(6, minmax(7rem, 1fr));
    gap: 0.55rem;
}

.bueroflow-phasen span {
    min-height: 2.75rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    display: grid;
    place-items: center;
    padding: 0.35rem 0.5rem;
    color: var(--grau-900);
    font-weight: 800;
    text-align: center;
}

.projektakte-detail-werkzeuge--tab {
    margin-top: 0;
}

@media (max-width: 900px) {
    .bueroflow-kachelband,
    .bueroflow-phasen {
        grid-template-columns: 1fr 1fr;
    }

    .bueroflow-zeile {
        grid-template-columns: 1fr;
    }
}

/* ---- Projektbereich: MeisterTask/monday-inspirierte Arbeitssteuerung ---- */

.workos-modulkopf span:not(.storz-prio) {
    display: block;
    margin-top: 0.2rem;
    color: var(--grau-700);
    line-height: 1.4;
}

.workos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr);
    gap: 0.85rem;
    align-items: start;
}

.workos-layout--mobile {
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
}

.workos-mainpanel,
.workos-sidepanel,
.workos-intake,
.workos-phone {
    border: 1px solid var(--linie);
    border-radius: var(--radius-m);
    background: #fff;
    box-shadow: var(--schatten-weich);
}

.workos-mainpanel,
.workos-sidepanel {
    padding: 0.85rem;
}

.workos-mainpanel {
    display: grid;
    gap: 0.85rem;
}

.workos-sidepanel {
    display: grid;
    gap: 0.85rem;
}

.workos-sidepanel section {
    display: grid;
    gap: 0.65rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--linie);
}

.workos-sidepanel section:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.workos-sidepanel h4 {
    margin: 0;
    color: var(--grau-900);
}

.workos-sidepanel label {
    display: grid;
    gap: 0.35rem;
    color: var(--grau-700);
    font-size: 0.85rem;
    font-weight: 750;
}

.workos-hinweis {
    margin: 0;
    color: var(--grau-700);
    line-height: 1.4;
}

.workos-ansichtsleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.25rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-m);
    background: var(--grau-50);
}

.workos-ansichtsleiste .storz-ansicht {
    min-height: 2.1rem;
}

.workos-spalten {
    display: grid;
    grid-template-columns: repeat(6, minmax(8.5rem, 1fr));
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.workos-spalte {
    min-height: 7.2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-content: start;
    border: 1px solid var(--linie);
    border-left-width: 4px;
    border-radius: var(--radius-m);
    background: var(--grau-50);
    padding: 0.7rem;
}

.workos-spalte div {
    display: grid;
    gap: 0.25rem;
}

.workos-spalte strong {
    color: var(--grau-900);
}

.workos-spalte span,
.workos-spalte small {
    color: var(--grau-700);
    line-height: 1.35;
}

.workos-spalte em {
    min-width: 3.1rem;
    min-height: 1.75rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: #fff;
    color: var(--grau-900);
    font-style: normal;
    font-weight: 900;
}

.workos-spalte small {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    font-weight: 750;
}

.workos-spalte--ok {
    border-left-color: var(--erfolg);
}

.workos-spalte--ueber {
    border-left-color: var(--gefahr);
    background: #fff5f5;
}

.workos-reportliste,
.workos-feldliste {
    display: grid;
    gap: 0.5rem;
}

.workos-reportliste button,
.workos-feldliste article {
    min-height: 3.2rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-s);
    background: var(--grau-50);
    padding: 0.65rem;
    text-align: left;
}

.workos-reportliste button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
}

.workos-reportliste strong {
    color: var(--grau-900);
    font-size: 1rem;
}

.workos-reportliste span,
.workos-feldliste span {
    color: var(--grau-700);
    line-height: 1.35;
}

.workos-feldliste article {
    display: grid;
    gap: 0.25rem;
}

.workos-intake {
    padding: 0.85rem;
    display: grid;
    gap: 0.8rem;
}

.workos-intake-kopf {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: start;
}

.workos-intake h4 {
    margin: 0;
    color: var(--grau-900);
}

.workos-formgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.workos-formgrid label {
    display: grid;
    gap: 0.35rem;
    color: var(--grau-700);
    font-size: 0.85rem;
    font-weight: 750;
}

.workos-formgrid-breit {
    grid-column: 1 / -1;
}

.workos-statusband {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.workos-statusband span {
    min-height: 1.7rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--grau-50);
    padding: 0.25rem 0.55rem;
    color: var(--grau-800);
    font-size: 0.8rem;
    font-weight: 800;
}

.workos-workload {
    display: grid;
    gap: 0.6rem;
}

.workos-workload-zeile {
    display: grid;
    grid-template-columns: minmax(9rem, 0.45fr) minmax(12rem, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    border: 1px solid var(--linie);
    border-radius: var(--radius-m);
    background: var(--grau-50);
    padding: 0.7rem;
}

.workos-workload-zeile div:first-child {
    display: grid;
    gap: 0.2rem;
}

.workos-workload-zeile strong {
    color: var(--grau-900);
}

.workos-workload-zeile span,
.workos-workload-zeile em {
    color: var(--grau-700);
}

.workos-workload-zeile em {
    font-style: normal;
    font-weight: 900;
}

.workos-workload-balken {
    height: 0.75rem;
    border-radius: 999px;
    background: #e3e8ee;
    overflow: hidden;
}

.workos-workload-balken span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--akzent);
}

.workos-workload-zeile.auslastung-ok .workos-workload-balken span {
    background: var(--erfolg);
}

.workos-workload-zeile.auslastung-hoch .workos-workload-balken span,
.workos-workload-zeile.auslastung-voll .workos-workload-balken span {
    background: var(--warnung);
}

.workos-workload-zeile.auslastung-ueber .workos-workload-balken span {
    background: var(--gefahr);
}

.workos-phone {
    padding: 0.7rem;
    background: #111820;
}

.workos-phone-screen {
    min-height: 34rem;
    border-radius: var(--radius-m);
    background: var(--grau-50);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.workos-phone-screen header {
    padding: 0.9rem;
    background: #fff;
    border-bottom: 1px solid var(--linie);
    display: grid;
    gap: 0.3rem;
}

.workos-phone-screen h4 {
    margin: 0;
    color: var(--grau-900);
    font-size: 1.1rem;
}

.workos-phone-screen small {
    color: var(--grau-700);
}

.workos-phone-list {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: 0.75rem;
    overflow: auto;
}

.workos-phone-list article {
    border: 1px solid var(--linie);
    border-radius: var(--radius-s);
    background: #fff;
    padding: 0.7rem;
    display: grid;
    gap: 0.35rem;
}

.workos-phone-list article > span {
    color: var(--akzent);
    font-size: 0.78rem;
    font-weight: 900;
}

.workos-phone-list strong {
    color: var(--grau-900);
}

.workos-phone-screen nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--linie);
    background: #fff;
}

.workos-phone-screen nav button {
    min-height: 2.9rem;
    border: 0;
    border-right: 1px solid var(--linie);
    background: #fff;
    color: var(--grau-700);
    font-size: 0.75rem;
    font-weight: 900;
}

.workos-phone-screen nav button:first-child {
    background: var(--grau-100);
    color: var(--grau-900);
}

.workos-phone-screen nav button:last-child {
    border-right: 0;
}

@media (max-width: 1100px) {
    .workos-layout,
    .workos-layout--mobile {
        grid-template-columns: 1fr;
    }

    .workos-spalten {
        grid-template-columns: repeat(3, minmax(8.5rem, 1fr));
    }

    .workos-phone {
        max-width: 24rem;
    }
}

@media (max-width: 720px) {
    .workos-formgrid,
    .workos-workload-zeile {
        grid-template-columns: 1fr;
    }

    .workos-spalten {
        grid-template-columns: 1fr;
    }
}

}


/* Vorschau: was der Kunde bekommt (2026-09-04)
   ------------------------------------------------------------------
   Steht ueber der Weiter-Leiste und bewusst mit btn-neutral, nicht mit
   btn-primaer: "Weiter zum Abschluss" bleibt der Hauptweg. Wer nur nachsehen
   will, soll dabei nicht denken, er habe den falschen Knopf gedrueckt. */
.vorschau-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rahmen, #e3e6ea);
}

.vorschau-hinweis {
    flex: 1 1 16rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-leise, #5a6472);
}
/* =====================================================================================
   Der Bad-Ablauf (2026-09-05): Schritt „Ihr Bad" und die gruppierten Leistungen.

   Die Plätze stehen als Karten nebeneinander — je Platz eine Zeile aus „Nicht dabei",
   Basis, Komfort, Premium. Die gewählte Karte trägt den Akzent; der Kundentext steht
   klein darunter, damit man liest, was in einer Stufe steckt, ohne die Stammdaten zu
   öffnen. Dieselben Farben und Radien wie die übrigen Schritte.
   ===================================================================================== */

.bad-raum {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.85rem 1.1rem;
    align-items: end;
}

.bad-raum .feld-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bad-raum .feld-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--grau-500);
}

.bad-raum .feld-eingabe {
    width: 100%;
    max-width: 100%;
}

.bad-platz {
    margin-top: 1rem;
}

.bad-stufen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.bad-stufe {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--grau-200);
    border-radius: var(--radius-s);
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.bad-stufe:hover {
    border-color: var(--grau-400);
}

.bad-stufe input[type="radio"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.bad-stufe-aktiv {
    border-color: var(--akzent);
    background: var(--akzent-hell);
}

.bad-stufe-text-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.bad-stufe-name {
    font-weight: 600;
    font-size: 1rem;
}

.bad-stufe-text {
    color: var(--grau-500);
    font-size: 0.85rem;
    line-height: 1.4;
}

.bad-gruppe {
    margin-top: 1.5rem;
}

.bad-gruppe-titel {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.bad-gruppe .komp-hinweis {
    margin: 0 0 0.6rem;
}

/* Der Text des Kundenblatts — je Angebot (2026-09-08)
   ------------------------------------------------------------------
   Aus dem Betrieb: „ich möchte wenn ich das an fertig gestellt habe den text für die
   pdf auch noch anpassen können." Der Block steht im Abschluss-Schritt, zwischen dem
   Speichern und der Ausgabe.

   ACHTUNG, wie bei allem hier unten: Diese Regeln stehen AUSSERHALB von
   `.konfigurator-rahmen` (der schließt weiter oben). Die Farbvariablen hängen am Rahmen
   und gelten hier nicht — deshalb trägt jede einen Rückfallwert, genau wie die
   Vorschau-Leiste darüber. Ohne ihn bliebe der Kasten unsichtbar. */
.beiblatt-texte {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--grau-0, #ffffff);
    border: 1px solid var(--grau-200, #e3e0da);
    border-radius: var(--radius-m, 10px);
}

.beiblatt-texte-kopf h3 {
    margin: 0 0 0.25rem;
}

.beiblatt-block {
    padding: 1rem 0;
    border-top: 1px solid var(--grau-200, #e3e0da);
}

.beiblatt-block:first-of-type {
    border-top: none;
}

.beiblatt-block-titel {
    margin: 0;
    font-size: 1.02rem;
}

.beiblatt-block-erklaerung {
    margin: 0.15rem 0 0.75rem;
    color: var(--text-leise, #5a6472);
    font-size: 0.9rem;
}

/* Eine Zeile = ein Punkt des Blocks: Überschrift, Text, und der Weg, ihn wieder
   loszuwerden. Der linke Strich hält die Punkte optisch zusammen. */
.beiblatt-zeile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--grau-200, #e3e0da);
}

.beiblatt-feld {
    display: block;
}

.beiblatt-feld .feld-beschriftung {
    display: block;
    margin-bottom: 0.2rem;
}

/* Der Fließtext ist der lange von beiden — er bekommt Platz und darf wachsen. */
.beiblatt-text {
    min-height: 5.5rem;
    line-height: 1.45;
    resize: vertical;
}

.beiblatt-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--grau-200, #e3e0da);
}

/* Der Aufklapper über dem Textblock. Die ganze Zeile ist der Schalter — ein kleines
   Dreieck allein trifft auf dem Handy niemand. */
.beiblatt-schalter {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

.beiblatt-schalter-pfeil {
    line-height: 1.4;
    color: var(--text-leise, #5a6472);
}

.beiblatt-schalter-titel {
    display: block;
    font-size: 1.08rem;
    font-weight: 600;
}

.beiblatt-schalter-hinweis {
    display: block;
    margin: 0.15rem 0 0;
}

.beiblatt-zu {
    margin: 0.5rem 0 0 1.6rem;
}