/* =====================================================================
   ATLAS UI-Regelwerk – zentrale Design-Tokens, Rahmen (Atlas-Shell) und
   Grundbausteine. Entwurf 0.1 (Team, 2026-09-15), verankert 2026-09-16.

   MASTER: portal/app/static/atlas-ui.css
   Byte-gleiche KOPIEN (bei Änderungen immer vom Master aus verteilen):
     - mapper/eingabe/static/atlas-ui.css
     - deckungsbeitraege/static/atlas-ui.css
   Dazu die Schriftdateien static/fonts/open-sans-*.woff2 (gleiche Kopie-Regel).

   Regelwerk (Kanon): docs/ui/UI-REGELN.md – gilt für die Atlas-Welt
   (Portal, Eingabe, Deckungsbeiträge, Analyse, Planung), NICHT für
   HfM-Analytics und das Bank-Dashboard (Register: ATLAS-UI-REGELWERK).

   Aufbau: 1 Schrift · 2 Tokens · 3 Grundstil · 4 Atlas-Shell (Seitenleiste,
   Kopfleiste, Inhalt) · 5 Bausteine (Seitenkopf, Karten, Buttons, Felder,
   Meldungen, Tags, Tabellen, Schrittleiste, Dialog) · 6 Helfer
   ===================================================================== */

/* ---------- 1 Schrift (T-01): Open Sans selbst gehostet, variabel 300–800 ---------- */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/open-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2 Tokens (docs/ui/UI-REGELN.md, Abschnitt 3) ---------- */

:root {
    /* Markenfarben (F-01…F-03, F-05) */
    --atlas-blau: #35639a;
    --atlas-blau-hover: #274b77;
    --atlas-blau-60: rgba(53, 99, 154, 0.6);
    --atlas-blau-20: rgba(53, 99, 154, 0.2);
    --nachtblau: #142136;
    --nachtblau-hell: #1f3352;          /* abgeleitet: Hover auf Nachtblau-Flächen */
    --leuchtblau: #8fb8e8;
    --leuchtblau-60: rgba(143, 184, 232, 0.6);
    --leuchtblau-20: rgba(143, 184, 232, 0.2);

    /* Grauskala (F-04) */
    --text: #303030;
    --text-2: #686868;
    --zurueck: #878787;
    --deaktiviert: #b2b2b2;
    --linie: #e9e9e9;
    --seite: #f5f6f7;
    --subtil: #fafbfb;
    --komponente: #ffffff;

    /* Status + Fokus (F-07, S-01) – Hinweis bewusst schiefergrau (abgeleitete Werte) */
    --erfolg: #177245;   --erfolg-flaeche: #e7f4ec;
    --warnung: #8a4b08;  --warnung-flaeche: #fff2dc;
    --fehler: #b42318;   --fehler-flaeche: #fce9e7;  --fehler-hover: #8f1c13;
    --hinweis: #4a5563;  --hinweis-flaeche: #eef0f3;

    /* Kategoriefarben des Atlas-Codes (F-09, Betreiber 2026-09-18) – je Hauptcluster EINE Farbe,
       nur für Zuordnungs-/Struktur-Bilder (Linien, Punkte, Gruppenköpfe), nie für Status oder Text */
    --kat-umsatz: #2e7d4f;    --kat-umsatz-flaeche: #e6f2ea;      /* G-1 Umsatzerlöse */
    --kat-ertrag: #1f7a7a;    --kat-ertrag-flaeche: #e2f1f1;      /* G-4 Sonstige betriebliche Erträge */
    --kat-material: #b45f06;  --kat-material-flaeche: #fdf0e0;    /* G-5 Materialaufwand */
    --kat-personal: #35639a;  --kat-personal-flaeche: #d7e0eb;    /* G-6 Personalaufwand */
    --kat-aufwand: #6b4ea0;   --kat-aufwand-flaeche: #ece7f5;     /* G-8 Sonstige betriebliche Aufwendungen */
    --fokus: #2f80ed;

    /* Abstände (A-01) */
    --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;

    /* Rundungen (A-04) und Schatten nur bei Höhe (A-05) */
    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;
    --schatten-hoch: 0 12px 32px rgba(20, 33, 54, 0.18);

    /* Layout (Abschnitt 5 des Regelwerks) */
    --kopf-hoehe: 64px;
    --seitenleiste-breite: 248px;
    --inhalt-max: 1220px;

    /* Schrift (T-01) */
    --schrift: "Open Sans", Arial, sans-serif;

    /* Rückwärts-Aliase für vorhandenes CSS (werden bei Gelegenheit abgelöst).
       Bedeutung: navy = Markenfläche, blau = Produktfarbe, blau-hell = Hover
       auf Weiß (NICHT Leuchtblau – F-03), blau-flaeche = ATLAS-Blau 20 % auf
       Weiß, schatten = keiner (A-05). */
    --navy: var(--nachtblau);
    --navy-hell: var(--nachtblau-hell);
    --blau: var(--atlas-blau);
    --blau-hell: var(--atlas-blau-hover);
    --blau-flaeche: #d7e0eb;
    --tinte: var(--text);
    --grau: var(--text-2);
    --flaeche: var(--seite);
    --weiss: var(--komponente);
    --radius: var(--radius-l);
    --schatten: none;
}

/* ---------- 3 Grundstil (T-02…T-05) ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 400 14px/20px var(--schrift);
    color: var(--text);
    background: var(--seite);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--text); }
h1 { font-size: 32px; line-height: 38px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 18px; line-height: 24px; }
h4 { font-size: 16px; line-height: 24px; }
@media (max-width: 700px) {
    h1 { font-size: 26px; line-height: 32px; }
    h2 { font-size: 21px; line-height: 27px; }
}

p { margin: 0 0 var(--space-3); }
.fliesstext { font-size: 16px; line-height: 25px; }
.meta { font-size: 12px; line-height: 17px; color: var(--text-2); }
.text-2 { color: var(--text-2); }
.zahl, .tabellarisch { font-variant-numeric: tabular-nums; }
.zahl { text-align: right; }
.kennzahl { font-size: 24px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }

a { color: var(--atlas-blau); }
a:hover { color: var(--atlas-blau-hover); }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

img { max-width: 100%; }

/* Icons (I-01, I-05): Bibliothek hfm-icons.js rendert <svg class="hfm-icon"> */
.hfm-icon { width: 20px; height: 20px; flex: none; }
.hfm-icon.gross { width: 24px; height: 24px; }
.hfm-icon.klein { width: 16px; height: 16px; }

/* ---------- 4 Atlas-Shell: Seitenleiste + Kopfleiste + Inhalt ---------- */

.atlas-shell {
    display: grid;
    grid-template-columns: var(--seitenleiste-breite) minmax(0, 1fr);
    min-height: 100vh;
}

.atlas-shell.ohne-seitenleiste { grid-template-columns: minmax(0, 1fr); }

/* Seitenleiste einklappbar (Betreiber 2026-09-18): Standard offen; der Griff an
   ihrer rechten Kante klappt sie ein (atlas-shell.js merkt den Zustand und setzt
   `leiste-zu` am <html>). Unter 900 px ist die Leiste eine obere Leiste – dort
   gibt es keinen Griff und sie bleibt immer sichtbar. */
html.leiste-zu .atlas-shell { grid-template-columns: minmax(0, 1fr); }
html.leiste-zu .seitenleiste { display: none; }
.leisten-griff {
    position: fixed;
    top: 50%;
    left: calc(var(--seitenleiste-breite) - 12px);
    transform: translateY(-50%);
    z-index: 50;
    width: 24px;
    height: 56px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--linie);
    border-radius: var(--radius-m);
    background: var(--komponente);
    color: var(--text-2);
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.leisten-griff:hover { color: var(--atlas-blau); border-color: var(--atlas-blau-60); }
.leisten-griff:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
html.leiste-zu .leisten-griff { left: 0; border-left: 0; border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.atlas-shell.ohne-seitenleiste .leisten-griff { display: none; }
@media (max-width: 900px) {
    .leisten-griff { display: none; }
    html.leiste-zu .seitenleiste { display: flex; }
}
@media print { .leisten-griff { display: none; } }

.sprung {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    background: var(--komponente);
    color: var(--text);
    border-radius: var(--radius-m);
}
.sprung:focus { left: 8px; }

/* Seitenleiste: Nachtblau = Markenfläche (F-02); aktiver Eintrag in Leuchtblau (F-03) */
.seitenleiste {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--nachtblau);
    color: rgba(255, 255, 255, 0.88);
}

.seitenleiste-marke {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--kopf-hoehe);
    padding: 0 var(--space-6);
    border-bottom: 1px solid var(--leuchtblau-20);
    text-decoration: none;
    color: inherit;
}

.seitenleiste-marke .atlas-kugel { width: 32px; height: auto; display: block; }
.seitenleiste-marke .atlas-wortmarke { height: 16px; width: auto; display: block; }
/* Bereichsname (z. B. „Deckungsbeiträge") als zweite Zeile unter der Marke –
   nie neben der Wortmarke, sonst läuft die Leiste über (248 px) */
.seitenleiste-marke { flex-wrap: wrap; row-gap: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.seitenleiste-marke .marke-bereich {
    flex-basis: 100%;
    font-size: 12px;
    line-height: 17px;
    font-weight: 600;
    color: var(--leuchtblau);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seitenleiste-nav { flex: 1; padding: var(--space-3) var(--space-3) var(--space-4); }

.nav-rubrik {
    margin: var(--space-4) var(--space-3) var(--space-1);
    font-size: 12px;
    line-height: 17px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--leuchtblau);
}
.nav-rubrik:first-child { margin-top: var(--space-1); }

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;                       /* B-05 */
    padding: 0 var(--space-3);
    border-left: 3px solid transparent;
    border-radius: var(--radius-m);
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border-top: 0; border-right: 0; border-bottom: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.nav-link:hover { background: var(--leuchtblau-20); color: #fff; }
.nav-link.aktiv, .nav-link[aria-current="page"] {
    background: var(--leuchtblau-20);
    border-left-color: var(--leuchtblau);
    color: var(--leuchtblau);
}
.nav-link.inaktiv { color: rgba(255, 255, 255, 0.4); cursor: default; }
.nav-link.inaktiv:hover { background: transparent; color: rgba(255, 255, 255, 0.4); }
.nav-link .hfm-icon { width: 20px; height: 20px; }
.nav-link .nav-zusatz { margin-left: auto; font-size: 12px; font-weight: 400; opacity: 0.7; }
.nav-link:focus-visible { outline-color: var(--leuchtblau); }

.seitenleiste-fuss {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--leuchtblau-20);
    font-size: 12px;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.seitenleiste-fuss form { margin: 0; }
.seitenleiste-fuss .nutzer { font-weight: 600; color: #fff; font-size: 13px; }
.seitenleiste-fuss .knopf {
    width: 100%;
    background: transparent;
    border-color: var(--leuchtblau-60);
    color: #fff;
}
.seitenleiste-fuss .knopf:hover { background: var(--leuchtblau-20); border-color: var(--leuchtblau); }

/* Bühne = alles rechts der Seitenleiste */
.buehne { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* Kopfleiste = Werkzeugleiste (Brotkrumen, Kontext, Hilfe); Linie statt Schatten (A-05) */
.kopfleiste {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--kopf-hoehe);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-6);
    background: var(--komponente);
    border-bottom: 1px solid var(--linie);
}

.brotkrumen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
    font-size: 14px;
    color: var(--text-2);
}
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--atlas-blau); text-decoration: underline; }
.brotkrumen b, .brotkrumen [aria-current="page"] { color: var(--text); font-weight: 600; }
.brotkrumen .trenner { color: var(--deaktiviert); }

.kopfleiste-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kontext-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--linie);
    border-radius: var(--radius-m);
    background: var(--subtil);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
a.kontext-chip:hover { border-color: var(--atlas-blau-60); color: var(--text); }
.kontext-chip .chip-label { font-size: 12px; font-weight: 400; color: var(--text-2); }
.kontext-chip .hfm-icon { color: var(--atlas-blau); width: 18px; height: 18px; }

.inhalt {
    flex: 1;
    width: 100%;
    max-width: var(--inhalt-max);
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-12);
}
.inhalt.breit { max-width: none; }
.inhalt.schmal { max-width: 720px; }

.fuss {
    padding: var(--space-4) var(--space-6) var(--space-6);
    font-size: 12px;
    line-height: 17px;
    color: var(--zurueck);
    text-align: center;
}

/* Anmeldung: dunkle Bühne, weiße Karte (F-02) */
.login-buehne {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-4);
    background: var(--nachtblau);
}
.login-marke { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.login-marke .atlas-kugel { width: 120px; height: auto; }
.login-marke .atlas-wortmarke { height: 28px; width: auto; }
.login-claim { margin: 0; color: var(--leuchtblau); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-align: center; }
.login-karte {
    width: 100%;
    max-width: 440px;
    padding: var(--space-8) var(--space-6);
    background: var(--komponente);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-hoch);   /* echte Höhe über der Bühne */
}
.login-fuss { color: rgba(255, 255, 255, 0.6); font-size: 12px; text-align: center; }

/* Mobil (< 900 px): Seitenleiste wird zur horizontal scrollbaren Leiste oben (A-06) */
@media (max-width: 900px) {
    .atlas-shell { grid-template-columns: minmax(0, 1fr); }
    .seitenleiste {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .seitenleiste-marke { border-bottom: 0; border-right: 1px solid var(--leuchtblau-20); padding: 0 var(--space-4); min-height: 56px; }
    .seitenleiste-marke .marke-bereich { display: none; }
    .seitenleiste-nav { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); }
    .nav-rubrik { display: none; }
    .nav-link {
        width: auto;
        white-space: nowrap;
        min-height: 48px;
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: var(--radius-s) var(--radius-s) 0 0;
    }
    .nav-link.aktiv, .nav-link[aria-current="page"] { border-bottom-color: var(--leuchtblau); }
    .seitenleiste-fuss { border-top: 0; border-left: 1px solid var(--leuchtblau-20); flex-direction: row; align-items: center; white-space: nowrap; }
    .seitenleiste-fuss .knopf { width: auto; }
    .kopfleiste { position: static; height: auto; flex-wrap: wrap; padding: var(--space-2) var(--space-4); gap: var(--space-2); }
    .kopfleiste-rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
    .inhalt { padding: var(--space-4) var(--space-4) var(--space-8); }
}

/* ---------- 5 Bausteine ---------- */

/* Seitenkopf: H1, Untertitel, Aktionen (T-04) */
.seitenkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: 0 0 var(--space-6);
}
.seitenkopf-text { min-width: 0; }
.seiten-titel { margin: 0; font-size: 32px; line-height: 38px; font-weight: 600; color: var(--text); }
.seiten-untertitel { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; color: var(--text-2); max-width: 900px; }
.seitenkopf-aktionen { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 700px) { .seiten-titel { font-size: 26px; line-height: 32px; } }

.zurueck-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    color: var(--atlas-blau);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.zurueck-link:hover { color: var(--atlas-blau-hover); text-decoration: underline; }

/* Karten: Rahmen statt Schatten (A-05), 16 px Rundung (A-04) */
.karte {
    background: var(--komponente);
    border: 1px solid var(--linie);
    border-radius: var(--radius-l);
    padding: var(--space-6);
}
.karte.kompakt { padding: var(--space-4); border-radius: var(--radius-m); }
.karte + .karte { margin-top: var(--space-6); }
.karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.karte-titel { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; }
.karte-hinweis { margin: var(--space-1) 0 0; color: var(--text-2); }
.karte-leiste {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: var(--nachtblau); color: #fff;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-4);
    font-weight: 600;
}
.karte-leiste .leiste-zusatz { color: var(--leuchtblau); font-size: 12px; }

.bereich-abstand { margin-top: var(--space-8); }

/* Buttons (B-01…B-06): .knopf – .wj-knopf ist der Altname im Portal und wird mitgeführt */
.knopf, .wj-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;                       /* B-05 */
    padding: 0 var(--space-4);
    border: 1px solid var(--zurueck);
    border-radius: var(--radius-m);
    background: var(--komponente);
    color: var(--text);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.knopf:hover, .wj-knopf:hover { background: var(--subtil); border-color: var(--text-2); color: var(--text); }
.knopf:active, .wj-knopf:active { background: var(--linie); }

.knopf.primaer, .wj-knopf.primaer { background: var(--atlas-blau); border-color: var(--atlas-blau); color: #fff; }
.knopf.primaer:hover, .wj-knopf.primaer:hover { background: var(--atlas-blau-hover); border-color: var(--atlas-blau-hover); color: #fff; }

.knopf.text, .wj-knopf.text { background: transparent; border-color: transparent; color: var(--atlas-blau); }
.knopf.text:hover, .wj-knopf.text:hover { background: var(--atlas-blau-20); color: var(--atlas-blau-hover); }

.knopf.kritisch, .wj-knopf.kritisch, .wj-knopf.warn { background: var(--fehler); border-color: var(--fehler); color: #fff; }
.knopf.kritisch:hover, .wj-knopf.kritisch:hover, .wj-knopf.warn:hover { background: var(--fehler-hover); border-color: var(--fehler-hover); color: #fff; }

.knopf.akzent { background: var(--leuchtblau); border-color: var(--leuchtblau); color: var(--nachtblau); }
.knopf.akzent:hover { background: #a3c5ec; border-color: #a3c5ec; color: var(--nachtblau); }

.knopf:disabled, .wj-knopf:disabled, .knopf[aria-disabled="true"], .knopf.inaktiv {
    background: var(--linie); border-color: var(--linie); color: var(--zurueck); cursor: default;
}

.knopf.klein, .wj-knopf.klein { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.kritisch-text { color: var(--fehler); }                                   /* rote Textaktion (B-03) */
.kritisch-text:hover { color: var(--fehler-hover); background: var(--fehler-flaeche); }
.knopf.icon { width: 44px; padding: 0; }
.knopf.icon.klein { width: 36px; }
.knopf.breit { width: 100%; }

.knopf.laeuft::before {
    content: "";
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: knopf-dreht 0.8s linear infinite;
}
@keyframes knopf-dreht { to { transform: rotate(360deg); } }

.knopf-gruppe { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.formular-aktionen { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* Eingabefelder (E-01…E-06): Label oben, Stern rechts, Fehler unter dem Feld */
.feld { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.feld > label, .feld-label {
    display: flex; align-items: baseline; gap: var(--space-2);
    font-size: 13px; line-height: 17px; font-weight: 600; color: var(--text);
}
.feld-label .optional-marke, .feld > label .optional-marke { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--zurueck); }
.pflicht::after { content: " *"; color: var(--fehler); font-weight: 700; }

.feld input:not([type="checkbox"]):not([type="radio"]),
.feld select, .feld textarea, .eingabe {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--zurueck);
    border-radius: var(--radius-m);
    background: var(--komponente);
    color: var(--text);
    font-size: 14px;
    line-height: 20px;
}
.feld textarea { min-height: 88px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .eingabe:focus {
    outline: 2px solid var(--fokus); outline-offset: 1px; border-color: var(--atlas-blau);
}
.feld input::placeholder, .feld textarea::placeholder, .eingabe::placeholder { color: var(--deaktiviert); }
.feld input:disabled, .feld select:disabled, .eingabe:disabled { background: var(--subtil); color: var(--zurueck); border-color: var(--linie); }
.feld.fehlerhaft input, .feld.fehlerhaft select, .feld.fehlerhaft textarea, .eingabe.fehlerhaft { border-color: var(--fehler); }
.feld-fehler { font-size: 12px; line-height: 17px; color: var(--fehler); }
.feld-hinweis { font-size: 12px; line-height: 17px; color: var(--text-2); }
.feld.kompakt input, .feld.kompakt select, .eingabe.kompakt { min-height: 36px; padding: var(--space-1) var(--space-2); }
.feld input.zahl, .eingabe.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.feld-zeile { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.feld-gruppe { display: flex; flex-direction: column; gap: var(--space-4); }
.haken-feld { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.haken-feld input { width: 18px; height: 18px; accent-color: var(--atlas-blau); }

/* Statusmeldungen (S-01…S-03): Farbe + Zeichen + Text */
.meldung {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-m);
    font-size: 14px;
    line-height: 20px;
}
.meldung::before {
    flex: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 12px; line-height: 17px; font-weight: 700;
    text-align: center;
}
.meldung.hinweis { background: var(--hinweis-flaeche); border-color: rgba(74, 85, 99, 0.35); color: var(--hinweis); }
.meldung.hinweis::before { content: "i"; }
.meldung.erfolg { background: var(--erfolg-flaeche); border-color: rgba(23, 114, 69, 0.35); color: var(--erfolg); }
.meldung.erfolg::before { content: "\2713"; }
.meldung.warnung { background: var(--warnung-flaeche); border-color: rgba(138, 75, 8, 0.35); color: var(--warnung); }
.meldung.warnung::before { content: "!"; }
.meldung.fehler { background: var(--fehler-flaeche); border-color: rgba(180, 35, 24, 0.35); color: var(--fehler); }
.meldung.fehler::before { content: "\00d7"; }
.meldung a { color: inherit; font-weight: 600; }
.meldung .meldung-text { flex: 1; min-width: 0; }
.meldung .meldung-titel { display: block; font-weight: 600; }
.meldung .knopf { margin-left: auto; align-self: center; }
.meldung.banner { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }

/* Tags und Statuskennzeichen (A-04: 6 px) */
.tag {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 22px; padding: 0 var(--space-2);
    border-radius: var(--radius-s);
    background: var(--linie); color: var(--text-2);
    font-size: 12px; line-height: 17px; font-weight: 600;
    white-space: nowrap;
}
.tag.erfolg { background: var(--erfolg-flaeche); color: var(--erfolg); }
.tag.warnung { background: var(--warnung-flaeche); color: var(--warnung); }
.tag.fehler { background: var(--fehler-flaeche); color: var(--fehler); }
.tag.hinweis { background: var(--hinweis-flaeche); color: var(--hinweis); }
.tag.blau { background: var(--atlas-blau-20); color: var(--atlas-blau-hover); }
.tag.leucht { background: var(--leuchtblau-20); color: var(--nachtblau); }

/* Auswahl-Chips (Wirtschaftsjahr, Untertabs): 10 px, kein Pillen-Rund */
.wahl-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 36px; padding: 0 var(--space-3);
    border: 1px solid var(--linie); border-radius: var(--radius-m);
    background: var(--komponente); color: var(--text);
    font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.wahl-chip:hover { border-color: var(--atlas-blau-60); color: var(--text); }
.wahl-chip.aktiv, .wahl-chip[aria-current="true"] { background: var(--atlas-blau); border-color: var(--atlas-blau); color: #fff; }
.wahl-chip.klein { min-height: 32px; padding: 0 var(--space-2); font-size: 13px; }   /* nur in dichten Leisten (Jahrgang/Stufe) */

/* Tabellen (T-05): Kopf in Sekundärgrau, Zahlen rechts, Zebra nur bei Hover */
.tabelle-umschlag { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.tabelle th {
    text-align: left; padding: var(--space-2) var(--space-3);
    font-size: 12px; line-height: 17px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-2); border-bottom: 2px solid var(--linie); white-space: nowrap;
}
.tabelle td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th.zahl, .tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle tbody tr:hover td { background: var(--subtil); }
.tabelle tfoot td { border-top: 2px solid var(--linie); border-bottom: 0; font-weight: 600; }
.tabelle tr.ausgewaehlt td { background: var(--atlas-blau-20); }

/* Schrittleiste (P-01…P-07): Segmente statt Pfeile */
.schrittleiste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
    background: var(--komponente);
    border: 1px solid var(--linie);
    border-radius: var(--radius-l);
    overflow: hidden;
}
.schritt {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4) var(--space-6);
    border-right: 1px solid var(--linie);
}
.schritt:last-child { border-right: 0; }
.schritt.aktiv { background: var(--atlas-blau-20); }              /* P-03 */
.schritt-kopf { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--text); }
a.schritt-kopf:hover .schritt-titel { text-decoration: underline; }
.schritt-marker {
    flex: 0 0 44px; width: 44px; height: 44px;                     /* P-02 */
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 16px; font-weight: 600;
}
.schritt-marker .hfm-icon { width: 22px; height: 22px; }
.schritt.erledigt .schritt-marker { background: var(--nachtblau); color: #fff; }
.schritt.aktiv .schritt-marker { background: var(--atlas-blau); color: #fff; }
.schritt.offen .schritt-marker { background: var(--komponente); border: 2px solid var(--zurueck); color: var(--text-2); }
.schritt-titel { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.schritt.aktiv .schritt-titel { color: var(--atlas-blau-hover); }
.schritt.offen .schritt-titel { color: var(--text-2); }                                      /* P-05 */
.schritt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.schritt-chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 36px; padding: 0 var(--space-3);                    /* P-04 */
    border: 1px solid var(--linie); border-radius: var(--radius-m);
    background: var(--seite); color: var(--text-2);
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.schritt-chip.ok { background: var(--komponente); border-color: var(--atlas-blau-60); color: var(--text); }
.schritt-chip.ok::before { content: "\2713"; color: var(--atlas-blau); font-weight: 700; }
.schritt-chip.geplant { font-style: italic; }
a.schritt-chip:hover { border-color: var(--atlas-blau); color: var(--atlas-blau-hover); }
@media (max-width: 700px) {                                         /* P-07 */
    .schrittleiste { grid-auto-flow: row; grid-auto-columns: auto; }
    .schritt { border-right: 0; border-bottom: 1px solid var(--linie); }
    .schritt:last-child { border-bottom: 0; }
}

/* Reiter (Unterseiten innerhalb einer Karte, z. B. Zuteilen · Konten-Übersicht):
   Tab-Liste mit 44-px-Zielen, aktiver Reiter ATLAS-Blau mit Unterstrich – keine
   Schrittleiste (die bleibt dem Prozess vorbehalten) */
.reiter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; border-bottom: 1px solid var(--linie); }
.reiter-knopf {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: 44px; padding: 0 var(--space-4);
    border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
    background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2);
    cursor: pointer; white-space: nowrap;
}
.reiter-knopf:hover { color: var(--text); }
.reiter-knopf[aria-selected="true"] { color: var(--atlas-blau-hover); border-bottom-color: var(--atlas-blau); }
.reiter-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; border-radius: var(--radius-s); }

/* Dialog (S-04…S-06): einziger Ort mit Schatten (echte Höhe) */
.dialog-schleier {
    position: fixed; inset: 0; z-index: 80;
    display: none; align-items: center; justify-content: center;
    padding: var(--space-4);
    background: rgba(20, 33, 54, 0.55);
}
.dialog-schleier.offen, .dialog-schleier[open] { display: flex; }
.dialog {
    width: 100%; max-width: 520px;
    padding: var(--space-6);
    background: var(--komponente);
    border-radius: var(--radius-l);
    box-shadow: var(--schatten-hoch);
}
.dialog h2 { font-size: 18px; line-height: 24px; margin: 0 0 var(--space-2); }
.dialog-text { color: var(--text-2); }
.dialog-aktionen { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); flex-wrap: wrap; }

/* Leere Zustände */
.leer-flaeche {
    padding: var(--space-8) var(--space-6);
    border: 2px dashed var(--linie);
    border-radius: var(--radius-m);
    color: var(--text-2);
    text-align: center;
}

/* ---------- 6 Helfer ---------- */

.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zeile { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.zeile.auseinander { justify-content: space-between; }
.abstand-oben { margin-top: var(--space-6); }
.abstand-unten { margin-bottom: var(--space-6); }
.rechts { text-align: right; }

/* Marke: drehende Kugel, respektiert prefers-reduced-motion */
.atlas-kugel { display: block; animation: kugel-drehen 36s linear infinite; }
@keyframes kugel-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .atlas-kugel { animation: none; } .knopf.laeuft::before { animation: none; } }

/* ------------------------------------------------------------------ */
/* Werkzeugleiste (rechts) mit Rechner – Betreiber 2026-09-21.          */
/* Gegenstück zur Seitenleiste: derselbe Griff (.leisten-griff.rechts), */
/* die Leiste schiebt den Inhalt nach links statt Zahlen zu verdecken.  */
/* Aufbau + Logik: static/atlas-werkzeuge.js; die Eingabe-Matrix hat    */
/* eine eigene Leiste (.zieh-baum) und nutzt Griff + Rechner-Stile.     */
/* ------------------------------------------------------------------ */
.werkzeugleiste {
    position: fixed; top: var(--kopf-hoehe); right: 0; bottom: 0; z-index: 65;
    width: 400px; max-width: 92vw;
    display: none; flex-direction: column;
    background: var(--komponente); border-left: 1px solid var(--linie); box-shadow: var(--schatten-hoch);
}
.werkzeugleiste.offen { display: flex; }
.werkzeugleiste .rechner { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding: 12px 16px 16px; background: var(--komponente); }
.werkzeugleiste .rechner.ueber { box-shadow: inset 0 0 0 2px var(--atlas-blau); }
.werkzeugleiste .r-kopf { cursor: default; }
body.leiste-rechts .inhalt { width: auto; margin: 0 var(--leiste-rechts, 400px) 0 0; }
body.leiste-rechts .fuss { margin-right: var(--leiste-rechts, 400px); }
.leisten-griff.rechts { left: auto; right: 0; z-index: 66; border-right: 0; border-left: 1px solid var(--linie); border-radius: var(--radius-m) 0 0 var(--radius-m); }
.leisten-griff.rechts::before { content: "‹"; }
body.leiste-rechts .leisten-griff.rechts { right: calc(var(--leiste-rechts, 400px) - 12px); border: 1px solid var(--linie); border-radius: var(--radius-m); }
body.leiste-rechts .leisten-griff.rechts::before { content: "›"; }
html.leiste-zu .leisten-griff.rechts { left: auto; }
[data-rechner-zahlen] td[draggable=true] { cursor: grab; }
@media (max-width: 900px) {
    body.leiste-rechts .inhalt { width: 100%; margin: 0 auto; }
    body.leiste-rechts .fuss { margin-right: 0; }
}
@media print { .werkzeugleiste { display: none !important; } }
/* Rechner mit Verlauf: Rechenart · Name groß · Zahl, darunter Ergebnis und Tasten */
.r-kopf{cursor:move;user-select:none;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:8px}
.r-kopf > span{flex:1 1 auto}
.r-verlauf{flex:1 1 auto;min-height:120px;overflow-y:auto;border-top:1px solid var(--linie)}
.r-zeile{display:grid;grid-template-columns:20px minmax(0,1fr) auto 24px;gap:8px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--linie)}
.r-z-op{font-size:16px;font-weight:600;color:var(--atlas-blau);text-align:center}
button.r-z-op{border:none;background:none;font-family:inherit;line-height:22px;padding:0;cursor:pointer;border-radius:var(--radius-s)}
button.r-z-op:hover, button.r-z-op:focus-visible{background:var(--atlas-blau-20)}
.r-z-name{font-size:16px;line-height:22px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-z-name.getippt{font-weight:400;color:var(--text-2)}
.r-z-wert{font-size:16px;line-height:22px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.r-z-weg{border:none;background:none;color:var(--zurueck);cursor:pointer;font-size:14px;line-height:1;padding:0;visibility:hidden}
.r-zeile:hover .r-z-weg, .r-z-weg:focus-visible{visibility:visible}
.r-z-weg:hover{color:var(--fehler)}
.r-nächste{border-bottom:none;border:1px dashed var(--atlas-blau-60);border-radius:var(--radius-m);padding:8px;margin-top:8px}
.r-nächste .r-z-name{font-weight:400;font-size:14px;color:var(--text-2)}
.r-summe{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:2px solid var(--nachtblau);
  margin-top:10px;padding:8px 0 10px;font-size:14px;font-weight:600}
.r-summe b{font-size:24px;line-height:30px;font-variant-numeric:tabular-nums}
.r-tasten{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.r-tasten button.r-breit{grid-column:span 2}
.r-tasten button{min-height:32px;border:1px solid var(--linie);border-radius:var(--radius-s);background:var(--subtil);
  font:inherit;font-size:14px;color:var(--text);cursor:pointer;padding:0}
.r-tasten button:hover, .r-tasten button.gedrückt{background:var(--atlas-blau-20);border-color:var(--atlas-blau-60)}
.r-tasten button.r-op{color:var(--atlas-blau);font-weight:600}
.r-tasten button.r-ac{color:var(--fehler);font-weight:600}
.r-tasten button.r-gleich{background:var(--atlas-blau);border-color:var(--atlas-blau);color:#fff;font-weight:600}

/* Diagramm (Werkzeugleiste unter dem Rechner + Fenster) – Betreiber 2026-09-24, Regel F-10.
   Farben --dia-1…8 in fester Reihenfolge (geprüft: Farbsehschwäche, Helligkeit; drei Farben unter 3:1
   Kontrast – darum steht immer die Tabelle Name · Betrag · Anteil daneben), „Übrige“ grau. */
:root {
    --dia-1: #35639a; --dia-2: #eb6834; --dia-3: #1baf7a; --dia-4: #eda100;
    --dia-5: #e87ba4; --dia-6: #008300; --dia-7: #6b4ea0; --dia-8: #e34948;
    --dia-uebrige: var(--deaktiviert);
}
/* Kacheln wie in der Eingabe: erst Werkzeug wählen, dann ist nur dieses Werkzeug in der Leiste */
.wl-kopf{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 16px;border-bottom:1px solid var(--linie);font-size:14px;font-weight:600}
.wl-kopf .wl-titel{flex:1 1 auto}
.werkzeugleiste:not([data-werkzeug]) .wl-zurueck, .werkzeugleiste[data-werkzeug=""] .wl-zurueck{display:none}
.wl-kacheln{display:none;flex-direction:column;gap:12px;padding:16px}
.werkzeugleiste[data-werkzeug=""] .wl-kacheln, .werkzeugleiste:not([data-werkzeug]) .wl-kacheln{display:flex}
.wl-kachel{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:2px dashed var(--atlas-blau-60);border-radius:var(--radius-l);
  background:var(--subtil);color:var(--text);font:inherit;font-size:16px;text-align:left;cursor:pointer}
.wl-kachel:hover, .wl-kachel.ueber{background:var(--atlas-blau-20);border-style:solid;border-color:var(--atlas-blau)}
.wl-symbol{flex:none;width:32px;font-size:24px;line-height:1;color:var(--atlas-blau);text-align:center}
.wl-symbol svg{width:24px;height:24px}
.werkzeugleiste .rechner, .werkzeugleiste .diagramm{display:none}
.werkzeugleiste[data-werkzeug="rechner"] .rechner{display:flex}
.werkzeugleiste[data-werkzeug="rechner"] .rechner > .r-kopf{display:none}
.werkzeugleiste .diagramm{flex:1 1 auto;flex-direction:column;min-height:0;padding:12px 16px 16px;background:var(--komponente)}
.werkzeugleiste[data-werkzeug="diagramm"] .diagramm{display:flex}
.werkzeugleiste .diagramm.ueber{box-shadow:inset 0 0 0 2px var(--atlas-blau)}
.d-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--text-2)}
.d-kopf .d-summe{font-size:20px;color:var(--text);font-variant-numeric:tabular-nums}
.d-liste{flex:1 1 auto;min-height:48px;overflow-y:auto;border-top:1px solid var(--linie)}
.r-zeile.d-zeile{grid-template-columns:minmax(0,1fr) auto 24px}
.r-zeile.d-zeile .r-z-name, .r-zeile.d-zeile .r-z-wert{font-size:14px;line-height:20px}
.d-knoepfe{display:flex;gap:8px;margin-top:10px}
.d-knoepfe .knopf{flex:1 1 0}
/* Auswählen mit dem Kasten */
body.d-auswahl .inhalt{cursor:crosshair;user-select:none}
body.d-auswahl [data-rechner-zahlen] td[draggable=true]{cursor:crosshair}
td.d-markiert{background:var(--atlas-blau-20) !important;box-shadow:inset 0 0 0 1px var(--atlas-blau-60)}
.d-rahmen{position:fixed;z-index:80;border:1px dashed var(--atlas-blau);background:var(--atlas-blau-20);pointer-events:none}
/* Fenster */
.diagramm-fenster{position:fixed;z-index:75;left:50%;top:14vh;transform:translateX(-50%);width:640px;max-width:94vw;max-height:78vh;
  display:flex;flex-direction:column;background:var(--komponente);border:1px solid var(--linie);border-radius:var(--radius-l);box-shadow:var(--schatten-hoch)}
.diagramm-fenster[hidden]{display:none}
.df-kopf{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--linie);cursor:move;user-select:none}
.df-titel{flex:1 1 auto;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-form{display:inline-flex;gap:4px}
.df-summe{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 16px 0;font-size:14px;font-weight:600;color:var(--text-2)}
.df-summe b{font-size:24px;line-height:30px;color:var(--text);font-variant-numeric:tabular-nums}
.df-bild{overflow-y:auto;padding:12px 16px 16px}
.df-kreis-reihe{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.df-kreis{width:220px;height:220px;flex:0 0 auto}
.df-stueck{stroke:var(--komponente);stroke-width:2px;transition:opacity .12s}
.df-mitte{text-anchor:middle;font-size:14px;fill:var(--text-2)}
.df-legende{flex:1 1 240px;border-collapse:collapse;font-size:13px;min-width:0}
.df-legende td{padding:4px 6px;border-bottom:1px solid var(--linie);vertical-align:baseline}
.df-legende td.zahl, .df-balken .zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.df-farbe i{display:inline-block;width:10px;height:10px;border-radius:3px}
.df-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.df-anteil{color:var(--text-2)}
.df-balken{display:flex;flex-direction:column}
.df-b-zeile{display:grid;grid-template-columns:180px minmax(0,1fr) 84px 52px;gap:10px;align-items:center;padding:5px 0;font-size:13px;border-bottom:1px solid var(--linie)}
.df-b-spur{position:relative;height:14px;--null:0%}
.df-b-spur::before{content:"";position:absolute;left:var(--null);top:-5px;bottom:-5px;border-left:1px solid var(--zurueck)}
.df-b-balken{position:absolute;top:1px;bottom:1px;background:var(--dia-1);transition:opacity .12s}
.df-b-balken.plus{border-radius:0 4px 4px 0}
.df-b-balken.minus{border-radius:4px 0 0 4px}
.df-b-balken.uebrige{background:var(--dia-uebrige)}
.gedimmt{opacity:.3}
.df-tipp{position:absolute;z-index:2;max-width:320px;padding:6px 10px;border-radius:var(--radius-s);background:var(--nachtblau);color:#fff;
  font-size:13px;line-height:18px;white-space:pre-line;pointer-events:none}
@media print { .diagramm-fenster, .d-rahmen { display: none !important; } }

/* ------------------------------------------------------------------ */
/* Zeitleiste – Betreiber 2026-09-22, Vorbild Fusion-360-Bearbeitungs- */
/* leiste: Werkzeug, das sich unten am Bildschirmrand einblendet.      */
/* Obere Reihe = Blöcke (ein Arbeitsschritt: SuSa einlesen, Konten     */
/* zuteilen …) als reine Symbole mit Zähler, zweite Reihe = die Einzel- */
/* schritte des gewählten Blocks, darunter der Schritt im Klartext.    */
/* Ein Marker teilt die Leiste: links geschehen, rechts noch nicht.    */
/* Die Stelle auf der Seite bekommt einen ROTEN Rahmen (.zl-fokus).    */
/* Aufbau + Logik: static/atlas-zeitleiste.js (Master im Portal).       */
/* ------------------------------------------------------------------ */
:root { --zeitleiste-hoehe: 172px; --zl-rot: #d0342c; }
/* Der Knopf sitzt als Chip in der Kopfleiste (= Werkzeugleiste oben) neben Betrieb und WJ */
button.kontext-chip { cursor: pointer; font-family: inherit; }
button.kontext-chip:hover, button.kontext-chip.aktiv { border-color: var(--atlas-blau-60); }
button.kontext-chip.aktiv { background: var(--atlas-blau-20); }
button.kontext-chip:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.zeitleiste {
    position: fixed; left: var(--seitenleiste-breite); right: 0; bottom: 0; z-index: 68;
    display: none; flex-direction: column; height: var(--zeitleiste-hoehe);
    background: var(--komponente); border-top: 1px solid var(--linie); box-shadow: var(--schatten-hoch);
    font-size: 13px; line-height: 18px;
}
.zeitleiste.offen { display: flex; }
html.leiste-zu .zeitleiste { left: 0; }
body.zeitleiste-offen { padding-bottom: var(--zeitleiste-hoehe); }
body.zeitleiste-offen .werkzeugleiste, body.zeitleiste-offen .zieh-baum { bottom: var(--zeitleiste-hoehe); }
.zl-kopf { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-4); border-bottom: 1px solid var(--linie); }
.zl-titel { font-weight: 600; font-size: 14px; }
.zl-steuer { display: flex; align-items: center; gap: var(--space-1); }
.zl-steuer button, .zl-zu {
    min-height: 26px; min-width: 26px; padding: 0 var(--space-2); border: 1px solid var(--linie); border-radius: var(--radius-s);
    background: var(--subtil); font: inherit; font-size: 13px; color: var(--text); cursor: pointer;
}
.zl-steuer button:hover, .zl-zu:hover { background: var(--atlas-blau-20); border-color: var(--atlas-blau-60); }
.zl-steuer button:disabled { color: var(--deaktiviert); cursor: default; background: var(--subtil); border-color: var(--linie); }
.zl-steuer button.zl-abspielen { color: var(--atlas-blau); font-weight: 600; }
.zl-steuer button.zl-abspielen.laeuft { background: var(--atlas-blau); border-color: var(--atlas-blau); color: #fff; }
.zl-steuer select { min-height: 26px; border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--komponente); font: inherit; font-size: 13px; color: var(--text); padding: 0 var(--space-1); }
.zl-stand { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.zl-leer { padding: var(--space-3) var(--space-4); color: var(--text-2); }
/* Block-Reihe und Schritt-Reihe: kleine Symbol-Kacheln, waagerecht scrollbar wie in Fusion */
.zl-bloecke, .zl-schritte { display: flex; align-items: center; gap: 3px; padding: 5px var(--space-4); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.zl-bloecke { border-bottom: 1px solid var(--linie); }
.zl-tag { flex: none; font-size: 10px; line-height: 12px; color: var(--zurueck); margin: 0 var(--space-1) 0 var(--space-2); white-space: nowrap; }
.zl-tag:first-child { margin-left: 0; }
.zl-schritte-name { flex: none; font-size: 12px; color: var(--text-2); margin-right: var(--space-2); white-space: nowrap; }
.zl-block, .zl-schritt {
    flex: none; display: inline-flex; align-items: center; justify-content: center; position: relative;
    border: 1px solid var(--linie); border-radius: var(--radius-s); background: var(--komponente); color: var(--text);
    font: inherit; cursor: pointer; padding: 0;
}
.zl-block { width: 34px; height: 30px; }
.zl-schritt { width: 26px; height: 24px; }
.zl-block .hfm-icon { width: 17px; height: 17px; }
.zl-schritt .hfm-icon { width: 14px; height: 14px; }
.zl-block i { position: absolute; right: 1px; bottom: 0; font: 600 9px/11px var(--schrift); color: var(--text-2); }
.zl-block:hover, .zl-schritt:hover { border-color: var(--atlas-blau-60); background: var(--atlas-blau-20); }
.zl-block.gewaehlt { border-color: var(--atlas-blau); box-shadow: inset 0 0 0 1px var(--atlas-blau); }
.zl-block.aktiv, .zl-schritt.aktiv { background: var(--atlas-blau); border-color: var(--atlas-blau); color: #fff; }
.zl-block.aktiv i { color: rgba(255,255,255,.85); }
.zl-block.kommend, .zl-schritt.kommend { opacity: .35; }
.zl-schritt.warnung { color: var(--warnung); }
.zl-schritt.zurueck { color: var(--fehler); }
/* Marker: der senkrechte Strich zwischen „geschehen“ und „noch nicht“ */
.zl-marker { flex: none; width: 3px; height: 26px; margin: 0 3px; border-radius: 2px; background: var(--nachtblau); }
.zl-schritte .zl-marker { height: 20px; }
.zl-detail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 6px var(--space-4) 8px; border-top: 1px solid var(--linie); min-height: 0; overflow: hidden; }
.zl-detail .zl-d-symbol { color: var(--atlas-blau); }
.zl-detail .zl-d-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zl-detail .zl-d-meta { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-detail .zl-d-aenderung { font-variant-numeric: tabular-nums; }
.zl-detail .zl-d-aenderung b { color: var(--text); font-weight: 600; }
/* Roter Rahmen um die Stelle, an der der gewählte Schritt passiert ist (Betreiber: „da passiert grad das“) */
.zl-fokus { outline: 2px solid var(--zl-rot) !important; outline-offset: 2px; border-radius: var(--radius-s); animation: zl-puls .9s ease-out 2; }
tr.zl-fokus > td:first-child, tr.zl-fokus > th:first-child { box-shadow: inset 3px 0 0 var(--zl-rot); }
@keyframes zl-puls { 0% { outline-color: transparent; } 40% { outline-color: var(--zl-rot); } 100% { outline-color: var(--zl-rot); } }
/* Bewegung: „war hier“ (gestrichelt, alte Stelle) → „jetzt hier“ (Rahmen), dazwischen eine Linie */
.zl-war { outline: 2px dashed var(--zl-rot) !important; outline-offset: 2px; border-radius: var(--radius-s); }
.zl-chip { display: inline-block; margin-left: var(--space-2); padding: 0 6px; border-radius: 10px; background: var(--zl-rot); color: #fff; font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.zl-chip.war { background: transparent; color: var(--zl-rot); border: 1px dashed var(--zl-rot); line-height: 14px; }
.zl-linie { position: absolute; z-index: 67; pointer-events: none; overflow: visible; }
.zl-linie path { fill: none; stroke: var(--zl-rot); stroke-width: 2; stroke-dasharray: 6 4; animation: zl-lauf 1.2s linear infinite; }
.zl-linie circle { fill: var(--zl-rot); }
@keyframes zl-lauf { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .zl-fokus { animation: none; } .zl-linie path { animation: none; } }
@media (max-width: 900px) { .zeitleiste { left: 0; } }
@media print { .zeitleiste { display: none !important; } body.zeitleiste-offen { padding-bottom: 0; } }