/* ==========================================================================
   EAM-Cockpit — Oberfläche
   Ruhige, dichte Darstellung: der Bildschirm soll in einem Vorstandsgespräch
   lesbar sein, ohne dass jemand die Legende erklärt bekommt.
   ========================================================================== */

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

:root {
    --grund: #f6f7f9;
    --flaeche: #ffffff;
    --flaeche-2: #fbfbfc;
    --flaeche-3: #f2f3f5;
    --rand: #e3e6ea;
    --rand-stark: #cdd2d9;
    --text: #1a1d21;
    --text-2: #5b6470;
    --text-3: #8b939f;

    --akzent: #23557e;
    --akzent-hell: #eaf1f7;
    --akzent-rand: #b9cfe0;

    --gut: #2c7d55;
    --gut-flaeche: #e8f4ed;
    --warn: #a8710f;
    --warn-flaeche: #fdf3e0;
    --krit: #a83a2c;
    --krit-flaeche: #fbeae7;
    --info: #2b6098;
    --info-flaeche: #e9f0f8;
    --aus: #9aa2ad;
    --aus-flaeche: #f1f2f4;

    --r-s: 5px;
    --r-m: 8px;
    --r-l: 12px;
    --schatten: 0 1px 2px rgba(20, 26, 33, .05), 0 2px 8px rgba(20, 26, 33, .04);
    --schatten-hoch: 0 8px 28px rgba(20, 26, 33, .14), 0 2px 6px rgba(20, 26, 33, .08);

    --kopf-h: 52px;
    --rail-w: 156px;
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #14171b;
        --flaeche: #1c2026;
        --flaeche-2: #20252c;
        --flaeche-3: #262c34;
        --rand: #2f3640;
        --rand-stark: #3d4650;
        --text: #e8ebef;
        --text-2: #a3adb9;
        --text-3: #737e8b;

        --akzent: #6fa8d6;
        --akzent-hell: #1e2b37;
        --akzent-rand: #33506b;

        --gut: #5fbc8c;
        --gut-flaeche: #182a21;
        --warn: #d8a44a;
        --warn-flaeche: #2c2517;
        --krit: #e0806f;
        --krit-flaeche: #2e1d1a;
        --info: #78aade;
        --info-flaeche: #1a232f;
        --aus: #6d7681;
        --aus-flaeche: #23272d;

        --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .22);
        --schatten-hoch: 0 10px 34px rgba(0, 0, 0, .5);
    }
}

html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }

/* ------------------------------------------------------------------ Kopfzeile */

.kopf {
    height: var(--kopf-h);
    display: flex; align-items: center; gap: 16px;
    padding: 0 14px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    position: sticky; top: 0; z-index: 60;
}
.kopf-marke { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.marke-zeichen {
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--akzent); color: #fff;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.marke-text { font-weight: 650; font-size: 13.5px; letter-spacing: -.1px; }

/*
 * DAS KUNDENLOGO IM KOPF.
 *
 * Es bekommt NICHT den Kasten des Kurzzeichens. Ein Firmenlogo ist fast nie
 * quadratisch — Wortmarken sind drei- bis fünfmal so breit wie hoch —, und der
 * Akzentgrund darunter faerbte jedes durchsichtige Logo ein. Deshalb: keine
 * feste Breite, kein Grund, nur eine Hoehengrenze.
 */
/*
 * DIE BREITE DES LOGOS IST DIE BREITE DER MENUELEISTE — nicht mehr.
 *
 * Kopf und Leiste beginnen beide links am Rand. Ein Logo, das ueber die
 * Leiste hinausragt, schiebt sich optisch in den Inhaltsbereich und laesst die
 * Kopfzeile schief wirken; ausserdem draengt es Flughoehe und Suchfeld nach
 * rechts. Die Grenze ist deshalb an `--rail-w` gebunden und nicht an eine
 * Zahl: wer die Leiste breiter macht, bekommt das Logo mit.
 *
 * Abgezogen wird der linke Innenabstand des Kopfes (14px), damit die rechte
 * Kante des Logos genau auf der Trennlinie der Leiste endet.
 */
.marke-zeichen.marke-bild {
    /*
     * KEIN GRID UND KEINE FESTE BREITE MEHR — beides bricht an dimensionslosem SVG.
     * Siehe die Erklaerung an .marke-logo.
     */
    display: flex; align-items: center;
    width: auto; min-width: 0; max-width: calc(var(--rail-w) - 14px); height: 26px;
    background: none; border-radius: 0;
}

/*
 * DIE HOEHE WIRD GESETZT, DIE BREITE FOLGT — NICHT UMGEKEHRT.
 *
 * Zuerst stand hier nur `max-height: 26px; max-width: 170px`. Das Ergebnis war
 * ein Logo von 26 x 2 Pixeln: ein Strich. Im Bildschirmfoto sah der Kopf
 * trotzdem richtig aus, weil daneben der Firmenname als TEXT steht — man haelt
 * den Text fuer das Logo und merkt nichts.
 *
 * Der Grund: das Logo einer Firmenwebsite ist fast immer ein SVG mit
 * `viewBox` und OHNE `width`/`height`. So ein Bild hat kein Eigenmass,
 * sondern nur ein Seitenverhaeltnis. Eine reine Obergrenze gibt ihm nichts, an
 * dem es sich aufrichten koennte, und es faellt auf die Breite des Kastens
 * zusammen — hier auf die 26 Pixel des Kurzzeichens.
 *
 * Eine gesetzte HOEHE ist der Halt: daraus folgt die Breite ueber das
 * Verhaeltnis. `max-width` deckelt nur noch sehr breite Wortmarken, und
 * `object-fit` haelt dabei das Verhaeltnis.
 */
/*
 * DER WORTLAUT EINER MAIL, wie er hinausgeht.
 *
 * Vorformatiert und umbrechend: der Text traegt eigene Zeilenenden, und wer
 * ihn in einem normalen Absatz zeigt, sieht einen Fliesstext, der mit dem
 * nicht mehr uebereinstimmt, was der Empfaenger bekommt. Genau dafuer ist
 * diese Vorschau aber da.
 */
/*
 * DER ANMELDEBILDSCHIRM.
 *
 * Er benutzt bewusst NICHT die Kopfleiste und die Menuefuehrung: solange
 * niemand angemeldet ist, gibt es nichts zu navigieren, und ein halbes
 * Cockpit im Hintergrund waere die Behauptung, es sei schon etwas geladen.
 */
.anmeldeseite {
    min-height: 100vh; display: grid; place-items: center;
    background: var(--grund); padding: 24px;
}
.anmeldekasten {
    width: 100%; max-width: 380px;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--r-l); box-shadow: var(--schatten);
    padding: 28px 26px 22px;
}
.anmelde-marke {
    font-size: 11px; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; color: var(--akzent); margin-bottom: 14px;
}
.anmeldekasten h1 { font-size: 19px; font-weight: 650; margin: 0 0 6px; }
.anmelde-unterzeile { font-size: 12.5px; color: var(--text-2); margin: 0 0 18px; }
.anmelde-feld { display: block; margin-bottom: 14px; }
.anmelde-feld > span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
.anmelde-feld input {
    width: 100%; height: 36px; padding: 0 10px;
    border: 1px solid var(--rand-stark); border-radius: var(--r-s);
    font-size: 14px; font-family: inherit; background: var(--flaeche);
    color: var(--text);
}
.anmelde-feld input:focus { outline: 2px solid var(--akzent-rand); outline-offset: 1px; }
.anmelde-hinweis { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
/* Fehler stehen UEBER dem Knopf: darunter liest sie niemand, der gerade drueckt. */
.anmelde-meldung {
    font-size: 12.5px; line-height: 1.45; margin: 4px 0 14px;
    padding: 9px 11px; border-radius: var(--r-s);
    background: var(--krit-flaeche); color: var(--krit);
    border: 1px solid var(--krit);
}
.anmelde-meldung.gut { background: var(--gut-flaeche); color: var(--gut); border-color: var(--gut); }

/* Der TOTP-Schlüssel und die Rettungscodes — zum Abtippen, nicht zum Zeilenumbruch. */
.mfa-geheimnis {
    font-family: ui-monospace, monospace;
    background: var(--flaeche-leise, #f5f6f8);
    border: 1px solid var(--rand, #d8dbe0);
    border-radius: 6px;
    padding: 10px 12px;
    letter-spacing: 1px;
    user-select: all;
    overflow-x: auto;
}
.anmelde-knopfreihe { margin-top: 4px; }
.anmelde-knopfreihe .knopf { width: 100%; height: 38px; justify-content: center; }
.anmelde-fuss { font-size: 11.5px; color: var(--text-3); margin: 16px 0 0; line-height: 1.5; }

.wortlaut {
    white-space: pre-wrap; word-break: break-word;
    font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
    background: var(--flaeche-3); border: 1px solid var(--rand);
    border-radius: var(--r-s); padding: 10px 12px; margin: 6px 0 14px;
    max-height: 420px; overflow: auto;
}

.marke-logo {
    height: 26px; width: auto; max-width: calc(var(--rail-w) - 14px);
    display: block; object-fit: contain;
}

.flughoehe { position: relative; }
.fh-knopf {
    display: flex; align-items: center; gap: 9px;
    height: 32px; padding: 0 10px 0 8px;
    background: var(--flaeche-3); border: 1px solid var(--rand);
    border-radius: var(--r-m);
    max-width: 400px;
}
.fh-knopf:hover { border-color: var(--rand-stark); }
.fh-ebene {
    font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--akzent); background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand);
    padding: 1px 5px; border-radius: 4px; flex-shrink: 0;
}
.fh-name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-pfeil { width: 11px; height: 11px; color: var(--text-3); flex-shrink: 0; }

.fh-panel, .person-panel {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 380px; max-height: 72vh; overflow: auto;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--r-l); box-shadow: var(--schatten-hoch);
    padding: 6px; z-index: 70;
}
.person-panel { left: auto; right: 0; min-width: 300px; }
.fh-panel-kopf {
    font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-3); padding: 6px 8px 7px;
}
.person-hinweis { font-size: 11px; color: var(--text-3); padding: 0 8px 8px; line-height: 1.4; }

.fh-zeile {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 5px 8px; border: 0; background: none; border-radius: var(--r-s);
    text-align: left;
}
.fh-zeile:hover { background: var(--flaeche-3); }
.fh-zeile[aria-current="true"] { background: var(--akzent-hell); }
.fh-zeile-name { font-weight: 550; font-size: 12px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-zeile[aria-current="true"] .fh-zeile-name { color: var(--akzent); font-weight: 650; }
.fh-zeile-meta { font-size: 10.5px; color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fh-stufe { width: 4px; height: 16px; border-radius: 2px; background: var(--rand-stark); flex-shrink: 0; }
.fh-e1 .fh-stufe { background: var(--akzent); }
.fh-e2 .fh-stufe { background: #7a97b3; }
.fh-e3 .fh-stufe { background: #a8b8c6; }
.fh-e4 .fh-stufe { background: var(--rand-stark); }
.fh-e2 { padding-left: 20px; } .fh-e3 { padding-left: 34px; } .fh-e4 { padding-left: 48px; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.stichtag { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-2); }
.stichtag input {
    height: 30px; padding: 0 7px; background: var(--flaeche-3);
    border: 1px solid var(--rand); border-radius: var(--r-s);
    font-size: 12px; font-variant-numeric: tabular-nums;
}
.person { position: relative; }
.person-knopf {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 9px 0 5px;
    background: none; border: 1px solid transparent; border-radius: var(--r-m);
}
.person-knopf:hover { background: var(--flaeche-3); border-color: var(--rand); }
.person-kuerzel {
    width: 25px; height: 25px; border-radius: 50%;
    background: var(--akzent); color: #fff;
    display: grid; place-items: center; font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.person-block { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.person-name { font-size: 11.5px; font-weight: 600; }
.person-rolle { font-size: 9.5px; color: var(--text-3); }
.person-liste { max-height: 50vh; overflow: auto; }
.person-eintrag {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 6px 8px; border: 0; background: none; border-radius: var(--r-s); text-align: left;
}
.person-eintrag:hover { background: var(--flaeche-3); }
.person-eintrag[aria-current="true"] { background: var(--akzent-hell); }
.person-eintrag .pe-name { font-size: 12px; font-weight: 550; }
.person-eintrag .pe-rolle { font-size: 10px; color: var(--text-3); }

/* ------------------------------------------------------------------ Rumpf */

.rumpf { display: flex; min-height: calc(100vh - var(--kopf-h)); }

.rail {
    width: var(--rail-w); flex-shrink: 0;
    padding: 10px 8px; border-right: 1px solid var(--rand);
    background: var(--flaeche); display: flex; flex-direction: column; gap: 1px;
    position: sticky; top: var(--kopf-h); height: calc(100vh - var(--kopf-h));
}
.rail-knopf {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border: 0; background: none; border-radius: var(--r-m);
    font-size: 12.5px; font-weight: 500; color: var(--text-2); text-align: left;
}
.rail-knopf svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; opacity: .75; }
.rail-knopf:hover { background: var(--flaeche-3); color: var(--text); }
.rail-knopf[aria-current="true"] { background: var(--akzent-hell); color: var(--akzent); font-weight: 650; }
.rail-knopf[aria-current="true"] svg { opacity: 1; }
.rail-trenner { height: 1px; background: var(--rand); margin: 8px 6px; }

.buehne { flex: 1; min-width: 0; padding: 16px 18px 40px; }

.ladeschirm { display: flex; align-items: center; gap: 10px; color: var(--text-2); padding: 40px 0; }
.spinner {
    width: 14px; height: 14px; border: 2px solid var(--rand-stark);
    border-top-color: var(--akzent); border-radius: 50%;
    animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

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

.seitenkopf { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.seitentitel { font-size: 18px; font-weight: 650; letter-spacing: -.25px; }
.seitenfrage { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.seitenkopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pfad { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.pfad span:not(:last-child)::after { content: "›"; margin-left: 5px; color: var(--rand-stark); }
.pfad span:last-child { color: var(--text-2); font-weight: 550; }

/*
 * Acht Reiter passen nicht in jede Fensterbreite. Vorher lief der letzte aus
 * dem Bild und war unerreichbar — das schlimmste Verhalten, weil es aussieht
 * wie „gibt es nicht". Jetzt scrollt die Leiste, mit einem weichen Rand als
 * Hinweis, dass rechts noch etwas steht.
 */
.gruppe {
    display: inline-flex; background: var(--flaeche-3); border: 1px solid var(--rand);
    border-radius: var(--r-m); padding: 2px; gap: 2px;
    max-width: 100%; overflow-x: auto; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.gruppe::-webkit-scrollbar { height: 4px; }
.gruppe::-webkit-scrollbar-thumb { background: var(--rand-stark); border-radius: 999px; }
.gruppe button {
    padding: 4px 10px; border: 0; background: none; border-radius: 6px;
    font-size: 11.5px; font-weight: 550; color: var(--text-2); white-space: nowrap;
}
.gruppe button:hover { color: var(--text); }
.gruppe button[aria-pressed="true"] { background: var(--flaeche); color: var(--akzent); font-weight: 650; box-shadow: var(--schatten); }


.knopf {
    height: 30px; padding: 0 12px; border-radius: var(--r-m);
    border: 1px solid var(--rand); background: var(--flaeche);
    font-size: 12px; font-weight: 550; color: var(--text-2);
}
.knopf:hover { border-color: var(--rand-stark); color: var(--text); }
.knopf-haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf-haupt:hover { filter: brightness(1.08); color: #fff; }
.knopf-klein { height: 25px; padding: 0 9px; font-size: 11px; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }

.karte-flaeche {
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--r-l); box-shadow: var(--schatten);
}

/* Kennzahlenband */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kz {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    padding: 9px 11px; box-shadow: var(--schatten); text-align: left;
}
button.kz { display: block; width: 100%; }
button.kz:hover { border-color: var(--rand-stark); }
button.kz[aria-pressed="true"] { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.kz-wert { font-size: 19px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kz-name { font-size: 10.5px; color: var(--text-2); margin-top: 1px; }
/*
 * EINE ZEILE, UND DIE GANZE WAHRHEIT IM TITEL.
 *
 * Die Zusatzzeile bei „IT-Sachkosten" lautet „Verträge, Lizenzen, Wartung,
 * Hosting — Personal und Dienstleistungen noch nicht erfasst". Drei Zeilen — und
 * weil Gitterzeilen gleich hoch werden, hat dieser eine Satz ALLE acht
 * Kennzahlen in die Höhe gezogen. Ein wichtiger Hinweis darf nicht das Layout
 * seiner Nachbarn bestimmen.
 *
 * Sichtbar bleibt eine Zeile mit Auslassung; der vollständige Satz steht im
 * `title` und wird beim Zeigen gelesen. Weggelassen wird er nicht — das war ja
 * der Grund, ihn hinzuschreiben.
 */
.kz-zusatz {
    font-size: 10px; color: var(--text-3); margin-top: 2px;
    line-height: 1.35; min-height: 1.35em;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* Zwei Zeilen, wo es die Regel ist und nicht die Ausnahme — etwa in der Erfassung. */
.kz-zusatz.zweizeilig { -webkit-line-clamp: 2; min-height: calc(2 * 1.35em); }
.kz.ist-gut .kz-wert { color: var(--gut); }
.kz.ist-warn .kz-wert { color: var(--warn); }
.kz.ist-krit .kz-wert { color: var(--krit); }
.kz.ist-info .kz-wert { color: var(--info); }

/* Legende */
.legende { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.leg {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px 4px 7px; border-radius: 20px;
    border: 1px solid var(--rand); background: var(--flaeche);
    font-size: 11px; color: var(--text-2);
}
.leg:hover { border-color: var(--rand-stark); }
.leg[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.leg-punkt { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.leg-zahl { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Landkarte */

.karte-gitter {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.domaene {
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--r-l); box-shadow: var(--schatten);
    overflow: hidden; display: flex; flex-direction: column;
}
.domaene.gedimmt { opacity: .32; }
/*
 * GLEICHE HÖHE, EGAL WIE LANG DER NAME IST.
 *
 * „Asset Management" ist einzeilig, „International Trade and Global Tax"
 * zweizeilig — und damit begannen die Kacheln darunter auf verschiedenen Höhen.
 * Zwanzig Karten nebeneinander, jede ein paar Pixel versetzt: das liest sich
 * nicht als Raster, sondern als Unfall. Der Kopf reserviert deshalb IMMER zwei
 * Zeilen. Das kostet bei kurzen Namen etwas Luft und gewinnt die Ruhe, die ein
 * Raster erst zum Raster macht.
 *
 * `align-items: flex-start` statt `center`: bei zwei Zeilen soll die Nummer
 * neben der ERSTEN stehen, nicht in der Mitte zwischen beiden schweben.
 */
.dom-kopf {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--rand);
    background: var(--flaeche-2); width: 100%; border-radius: 0; text-align: left;
    /*
     * FESTE HÖHE, nicht `min-height`. Mit einer Mindesthöhe blieben zwei
     * Varianten uebrig — 52 px bei einzeiligen, 56 px bei zweizeiligen Namen —,
     * weil sich Zeilenhoehe, Polster und Rand nicht auf einen runden Wert
     * addieren. Pixel nachzurechnen ist der falsche Weg: das Namensfeld bekommt
     * genau zwei Zeilen, der Kopf genau diese Hoehe, und damit ist die Frage
     * nicht mehr vom Textumfang abhaengig.
     */
    height: 56px;
}
.dom-kopf:hover { background: var(--flaeche-3); }
.dom-nr {
    width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--flaeche-3); color: var(--text-2); border: 1px solid var(--rand);
    /* Optisch auf die Grundlinie der ersten Zeile, nicht auf deren Oberkante. */
    margin-top: 1px;
}
.dom-name {
    font-size: 12.5px; font-weight: 620; letter-spacing: -.1px; flex: 1; min-width: 0;
    line-height: 1.3;
    /* Genau zwei Zeilen — reserviert, nicht nur begrenzt. */
    height: calc(2 * 1.3em);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/*
 * Der Zustandsvermerk rechts hat eine EIGENE Spur. Vorher stand er inline und
 * schob bei „niemand zuständig" den Namen zusammen — die Marke bestimmte, wie
 * viel vom Titel zu lesen war.
 */
.dom-wert {
    font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
    flex-shrink: 0; margin-top: 1px;
}
.dom-kopf > .marke { flex-shrink: 0; margin-top: 1px; max-width: 46%; }
.dom-streifen { height: 3px; width: 100%; }
/*
 * Keine `grid-auto-rows` mehr: die Kachel hat eine feste Hoehe, damit sind alle
 * Zeilen ohnehin gleich — und zwar ueber Kartengrenzen hinweg. `1fr` glich nur
 * innerhalb einer Karte aus und erzeugte dadurch zwei Kachelhoehen im Raster.
 */
.dom-koerper {
    padding: 8px; display: grid; gap: 6px;
    grid-template-columns: 1fr 1fr; align-content: start;
}

.kachel {
    position: relative; text-align: left;
    border: 1px solid var(--rand); border-radius: var(--r-s);
    background: var(--flaeche-2); padding: 7px 8px 7px 11px;
    /* Feste Hoehe: drei Namenszeilen, eine Zustandszeile, Polster. */
    height: 75px; display: flex; flex-direction: column; justify-content: flex-start;
    overflow: hidden;
}
.kachel::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--aus);
}
.kachel:hover { border-color: var(--rand-stark); background: var(--flaeche-3); }
/*
 * Der Name reserviert zwei Zeilen (`min-height` aus 2 x line-height), damit die
 * Zustandszeile darunter in allen Kacheln auf derselben Hoehe sitzt. Ohne das
 * rutscht „niemand" bei kurzen Namen nach oben und bei langen nach unten — in
 * einer Karte mit acht Kacheln sind das acht verschiedene Hoehen.
 */
/*
 * DREI ZEILEN, WEIL DER NAME DER INHALT IST.
 *
 * Bei zwei Zeilen wurden elf von 98 Fähigkeiten abgeschnitten — „Payables and
 * Receivables Manage…", „Manufacturing Operations Manage…", „Supply Chain
 * Performance Manage…". Gekürzt wurde also genau der unterscheidende Teil, und
 * zwei Kacheln nebeneinander sahen gleich aus, obwohl sie es nicht sind.
 *
 * Die Alternative — bei zwei Zeilen bleiben und auf den Tooltip verweisen — ist
 * in einer Karte, die in einem Gremium gezeigt wird, keine: dort zeigt jemand
 * auf die Kachel und fragt, was da steht. Die Karte wird dadurch etwa ein
 * Achtel höher. Das ist der billigere Preis.
 *
 * `min-height` auf zwei Zeilen bleibt: die Zustandszeile darunter soll in allen
 * Kacheln auf derselben Höhe sitzen, auch bei einzeiligen Namen.
 */
/*
 * DIE HÖHE STECKT IM RAHMEN, NICHT IM TEXTFELD.
 *
 * Zwei Anlaeufe daneben. Erst zwei Zeilen mit Kuerzung — elf Namen abgeschnitten,
 * und zwar am unterscheidenden Teil. Dann drei Zeilen im NAMENSFELD reserviert —
 * damit waren alle Kacheln gleich hoch, aber bei einem einzeiligen Namen klaffte
 * eine Luecke bis zur Personenzeile, die wie ein Fehler aussah.
 *
 * Richtig ist: der RAHMEN hat eine feste Hoehe, der Text nimmt sich davon, was er
 * braucht, und alles fliesst von oben. Was unten frei bleibt, ist Luft und sieht
 * auch danach aus — nicht nach einem verrutschten Element.
 */
.kachel-name {
    font-size: 11px; font-weight: 550; line-height: 1.3;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/*
 * Direkt unter dem Namen, nicht an den unteren Rand geschoben. `margin-top: auto`
 * stand hier und riss bei kurzen Namen ein Loch in die Mitte der Kachel.
 */
.kachel-wert {
    font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
}
.kachel.gedimmt { opacity: .3; }
.kachel-marke {
    position: absolute; top: 4px; right: 4px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--info);
}

/* Zustände — gelten für Kachel-Streifen, Domänen-Streifen und Legenden-Punkte */
.z-gut::before, .z-gut.dom-streifen, .z-gut.leg-punkt { background: var(--gut); }
.z-warn::before, .z-warn.dom-streifen, .z-warn.leg-punkt { background: var(--warn); }
.z-krit::before, .z-krit.dom-streifen, .z-krit.leg-punkt { background: var(--krit); }
.z-info::before, .z-info.dom-streifen, .z-info.leg-punkt { background: var(--info); }
.z-aus::before, .z-aus.dom-streifen, .z-aus.leg-punkt { background: var(--aus); }
.z-ruhig::before, .z-ruhig.dom-streifen, .z-ruhig.leg-punkt { background: var(--rand-stark); }

.kachel.z-gut { background: var(--gut-flaeche); }
.kachel.z-warn { background: var(--warn-flaeche); }
.kachel.z-krit { background: var(--krit-flaeche); }
.kachel.z-info { background: var(--info-flaeche); }
.kachel.z-aus {
    background: repeating-linear-gradient(135deg, var(--aus-flaeche) 0 5px, transparent 5px 10px);
    color: var(--text-3);
}
.kachel.z-aus .kachel-name { font-weight: 450; }

/* Kostenlinse: fünf Stufen statt Ampel */
.kachel.k1 { background: color-mix(in srgb, var(--info-flaeche) 40%, var(--flaeche)); }
.kachel.k2 { background: color-mix(in srgb, var(--info-flaeche) 70%, var(--flaeche)); }
.kachel.k3 { background: var(--info-flaeche); }
.kachel.k4 { background: color-mix(in srgb, var(--info) 22%, var(--flaeche)); }
.kachel.k5 { background: color-mix(in srgb, var(--info) 38%, var(--flaeche)); }
.k1::before { background: color-mix(in srgb, var(--info) 30%, var(--rand)); }
.k2::before { background: color-mix(in srgb, var(--info) 50%, var(--rand)); }
.k3::before { background: color-mix(in srgb, var(--info) 70%, var(--rand)); }
.k4::before { background: var(--info); }
.k5::before { background: color-mix(in srgb, var(--info) 100%, #000 18%); }

/* ------------------------------------------------------------------ Tabellen */

.tab-huelle { overflow-x: auto; border-radius: var(--r-l); border: 1px solid var(--rand); background: var(--flaeche); box-shadow: var(--schatten); }
table.tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.tab th {
    text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-3); padding: 8px 10px; border-bottom: 1px solid var(--rand);
    background: var(--flaeche-2); white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.tab td { padding: 7px 10px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.tab tbody tr:last-child td { border-bottom: 0; }
.tab tbody tr:hover { background: var(--flaeche-2); }
.tab .num { text-align: right; font-variant-numeric: tabular-nums; }
.tab .klick { cursor: pointer; }
.tab-gruppe td {
    background: var(--flaeche-3); font-weight: 650; font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-2);
}

/* ------------------------------------------------------------------ Marken & Chips */

/*
 * EINE MARKE HAT EINE HÖHE, KEINE ZWEI — und sie kürzt, statt zu wachsen.
 *
 * `white-space: nowrap` stand schon hier; was fehlte, war eine feste Höhe und
 * eine Kürzung. Ohne beides bestimmt die Länge des Zustandstexts die Höhe der
 * Zeile, in der er steht — im Domänenkopf war „niemand zuständig" damit ein
 * Layout-Ereignis.
 *
 * Ich hatte dafür zuerst eine ZWEITE `.marke`-Regel weiter oben angelegt. Sie
 * war wirkungslos, weil diese hier später kommt und gewinnt — und sie wäre
 * genau die Doppelung gewesen, die überall sonst in diesem Projekt als Fehler
 * gilt: zwei Fassungen derselben Regel driften.
 */
.marke {
    display: inline-flex; align-items: center; gap: 4px;
    height: 18px; padding: 0 8px; border-radius: 20px;
    font-size: 10px; font-weight: 650; letter-spacing: .2px;
    border: 1px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-gut { background: var(--gut-flaeche); color: var(--gut); border-color: color-mix(in srgb, var(--gut) 25%, transparent); }
.m-warn { background: var(--warn-flaeche); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.m-krit { background: var(--krit-flaeche); color: var(--krit); border-color: color-mix(in srgb, var(--krit) 25%, transparent); }
.m-info { background: var(--info-flaeche); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.m-aus { background: var(--aus-flaeche); color: var(--text-3); border-color: var(--rand); }

.herkunft {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; color: var(--text-3);
}
.herkunft.lokal { color: var(--akzent); font-weight: 600; }
.herkunft-punkt { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.person-zeile { display: flex; align-items: center; gap: 8px; }
.avatar {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-size: 9.5px; font-weight: 700;
    background: var(--flaeche-3); color: var(--text-2); border: 1px solid var(--rand);
}
.avatar.it { background: var(--info-flaeche); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.avatar.leer { background: repeating-linear-gradient(135deg, var(--krit-flaeche) 0 4px, transparent 4px 8px); color: var(--krit); border-color: color-mix(in srgb, var(--krit) 25%, transparent); }
.person-text { min-width: 0; }
.person-text b { font-weight: 600; font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-text small { font-size: 10px; color: var(--text-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ Detailtafel */

.tafel-hintergrund { position: fixed; inset: 0; background: rgba(12, 16, 21, .35); z-index: 90; }
.tafel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 94vw);
    background: var(--grund); border-left: 1px solid var(--rand);
    box-shadow: var(--schatten-hoch); z-index: 100; overflow-y: auto;
    animation: rein .18s ease-out;
}
@keyframes rein { from { transform: translateX(24px); opacity: .4; } }

.tafel-kopf {
    position: sticky; top: 0; z-index: 5;
    background: var(--flaeche); border-bottom: 1px solid var(--rand);
    padding: 12px 16px 10px;
}
.tafel-titel { font-size: 16px; font-weight: 650; letter-spacing: -.2px; }
.tafel-schliessen {
    position: absolute; top: 10px; right: 12px;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--rand); background: var(--flaeche);
    display: grid; place-items: center; font-size: 14px; color: var(--text-2); line-height: 1;
}
.tafel-schliessen:hover { border-color: var(--rand-stark); color: var(--text); }
.tafel-reiter { display: flex; gap: 2px; padding: 0 12px; background: var(--flaeche); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 4; }
.tafel-reiter button {
    padding: 8px 11px; border: 0; background: none; font-size: 12px; font-weight: 550;
    color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tafel-reiter button:hover { color: var(--text); }
.tafel-reiter button[aria-selected="true"] { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 650; }
.tafel-koerper { padding: 14px 16px 60px; }

.block { margin-bottom: 16px; }
.block-titel {
    font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 7px;
    display: flex; align-items: center; gap: 8px;
}
.block-titel::after { content: ""; flex: 1; height: 1px; background: var(--rand); }

.feldgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.feld {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m); padding: 8px 10px;
}
.feld-name { font-size: 10px; color: var(--text-3); margin-bottom: 2px; }
.feld-wert { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.feld-zusatz { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }

/*
 * Vernetzung: eine Kante je Zeile, zwei Spalten auf breiten Tafeln.
 * Fehlende Kanten bleiben in der Reihe stehen und werden markiert — sie
 * wegzulassen hiesse, eine Lücke wie einen erledigten Punkt aussehen zu lassen.
 */
.netzgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px; }
.netzkante {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    padding: 7px 10px;
}
.netzkante-luecke { border-style: dashed; border-color: var(--krit); background: transparent; }
.netzkante-kopf { display: flex; align-items: center; gap: 8px; }
.netzkante-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.netzkante-zahl {
    margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.netzkante-kopf .marke { margin-left: auto; }
.netzkante-ziele { flex-wrap: wrap; gap: 4px; margin-top: 5px; min-width: 0; }
/* Lange Maßnahmentitel dürfen die Karte nicht sprengen — abschneiden, nicht überlaufen. */
.netzkante-ziele .marke {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.netzkante-warum { margin-top: 4px; line-height: 1.35; }

/*
 * Betriebsform-Erfassung: eine Zeile je Anwendung, die Wahl direkt daneben.
 * Kein Formular, keine Maske — der Weg von „gelesen" zu „beantwortet" ist ein
 * Klick, sonst wird der Bildschirm einmal benutzt und nie wieder.
 */
.gruppenkopf {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: none; border: 0; padding: 4px 0 8px; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
}
.gk-pfeil { color: var(--text-3); width: 12px; }
.gruppenkopf .marke { margin-left: auto; }

.bf-zeile {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
    padding: 7px 9px; border: 1px solid var(--rand); border-radius: var(--r-m);
    margin-bottom: 5px; background: var(--flaeche);
}
/* Erledigte Zeilen bleiben lesbar, treten aber zurueck — die Arbeit liegt bei den offenen. */
.bf-erledigt { opacity: .62; }
.bf-text { min-width: 0; }
.bf-text .reihe { flex-wrap: wrap; gap: 6px; }
.bf-kosten { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-wahl { gap: 4px; flex-wrap: wrap; }
.bf-knopf {
    font: inherit; font-size: 10.5px; letter-spacing: .02em;
    padding: 4px 8px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--rand); background: var(--flaeche-2, transparent); color: var(--text-2);
}
.bf-knopf:hover { border-color: var(--text-3); }
.bf-aktiv { background: var(--akzent, #1f4e79); border-color: transparent; color: #fff; font-weight: 600; }
/* „Weiss ich nicht" sieht anders aus als eine Antwort — es IST eine andere Sorte Antwort. */
.bf-unklar { border-style: dashed; }
.bf-unklar.bf-aktiv { background: var(--warn); }

/*
 * Kapazitätsantwort: vier Stufen, ein Ausweichfeld, das Ergebnis daneben.
 *
 * Das Ergebnis steht in derselben Zeile wie die Knöpfe und nicht darunter — wer
 * auf „25 %" klickt, soll im selben Blick sehen, dass daraus 12 Personenmonate
 * werden. Eine Zahl, die man erst nach dem Speichern sieht, ist keine Kontrolle.
 */
.kap-antwort { gap: 4px; flex-wrap: wrap; align-items: center; }
/*
 * Das Ausweichfeld darf die Knopfreihe nicht sprengen: `.eingabe` ist auf volle
 * Breite gestellt, und ohne `flex: 0 0 auto` schob es die vier Stufen und
 * „weiss ich nicht" in je eine eigene Zeile — aus einer Antwort wurden drei.
 */
/*
 * `input.eingabe` steht weiter unten in dieser Datei und ist gleich spezifisch —
 * bei Gleichstand gewinnt die spätere Regel, und deren `width: 100 %` sprengte
 * die Knopfreihe: aus einer Antwortzeile wurden drei. Nur höhere Spezifität
 * hilft, nicht derselbe Elementname.
 */
.kap-antwort input.kap-frei {
    flex: 0 0 auto; width: 86px; padding: 3px 8px; font-size: 11px; border-radius: 999px;
}
.kap-ergebnis {
    margin-left: 4px; font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--text-2);
}

/*
 * Versionszeile: die Version breit, die drei Termine schmal daneben.
 *
 * Die Gewichtung ist Absicht — die Version ist die Frage, die Termine sind die
 * Kür. Dieselbe Spezifitätsfalle wie beim Kapazitätsfeld: `input.eingabe` steht
 * weiter unten und setzt `width: 100 %`, deshalb hier mit Elternklasse.
 */
.ver-antwort { gap: 6px; flex-wrap: wrap; align-items: flex-end; }
/* Der Name steht ÜBER dem Feld: drei gleich aussehende Datumskästchen sind sonst Raten. */
.ver-datumfeld { display: flex; flex-direction: column; gap: 2px; }
.ver-datumname {
    font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-3); white-space: nowrap;
}
.ver-antwort input.ver-version {
    flex: 0 0 auto; width: 168px; padding: 4px 8px; font-size: 11.5px;
}
.ver-antwort input.ver-datum {
    flex: 0 0 auto; width: 132px; padding: 3px 6px; font-size: 11px;
    color: var(--text-2);
}
.ver-stand { margin-left: 4px; white-space: nowrap; align-self: flex-end; padding-bottom: 5px; }

/*
 * Eignung: die Skala oben, der Anhaltspunkt an der Zeile, die Noten rechts.
 *
 * Die Skala steht als eigener Block und nicht als Tooltip an den Knöpfen — eine
 * Erklärung, die man erst durch Hovern findet, hilft nur dem, der schon ahnt,
 * dass es sie gibt. Genau daran ist dieses Feld bisher leer geblieben.
 */
.eig-skala { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; }
.eig-stufe { display: flex; align-items: baseline; gap: 6px; }
.eig-stufe-zahl {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; border-radius: 999px;
    background: var(--flaeche-2); border: 1px solid var(--rand);
    font-size: 10.5px; font-weight: 600; color: var(--text-2);
}
/* Der Anhaltspunkt hängt an der Zeile, abgesetzt — er ist Beleg, keine Antwort. */
.eig-vorschlag {
    margin-top: 6px; padding-left: 9px;
    border-left: 2px solid var(--rand);
    display: flex; flex-direction: column; gap: 2px;
}
.eig-beleg { color: var(--text-3); font-style: italic; }
.eig-noten { gap: 4px; flex-wrap: wrap; align-items: center; }
.eig-note { min-width: 30px; justify-content: center; font-variant-numeric: tabular-nums; }
.eig-gewaehlt { margin-left: 4px; color: var(--text-2); }

/*
 * Die Prüfkarte: was mit „Stimmt" bestätigt wird, direkt unter dem Namen.
 * Lücken sind hervorgehoben — sie sind der Grund, warum sich das Hinsehen lohnt.
 */
.pruef-karte { flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.pruef-feld {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 2px 7px; border-radius: 999px;
    background: var(--flaeche-2); border: 1px solid var(--rand);
    font-size: 10.5px; color: var(--text-2); max-width: 100%;
}
.pruef-feldname { color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; font-size: 9px; }
.pruef-feld.ist-luecke {
    border-style: dashed; border-color: var(--warn, #b8860b);
    background: transparent; color: var(--warn, #b8860b);
}
/* Geerbt, nicht am Satz gepflegt — der Pfeil steht für „kommt von weiter oben". */
.pruef-feld.ist-geerbt { border-style: dotted; }
/* Steht da, ist aber falsch: der genannte Mensch ist nicht mehr ansprechbar. */
.pruef-feld.ist-hinfaellig {
    border-color: var(--krit); color: var(--krit);
    background: transparent; text-decoration: line-through;
}
.pruef-herkunft { color: var(--text-3); font-size: 9px; }

/*
 * Die Frage eines Klärfalls steht vollständig da, mit ihren Zeilenumbrüchen.
 *
 * Die Aufzählungen darin SIND die Arbeitsliste — „34 Sätze, hier sind sie".
 * Eine abgeschnittene Frage ist keine Frage, und ein zusammengeschobener
 * Absatz ist keine Liste.
 */
/*
 * Der Zähler am eigenen Namen. Rot erst, wenn etwas überfällig ist — sonst
 * gewöhnt man sich an Rot und übersieht den Tag, an dem es zählt.
 */
.person-offen {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px;
    border-radius: 999px; background: var(--akzent); color: #fff;
    font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.person-offen.ist-ueberfaellig { background: var(--krit, #a4262c); }

/*
 * Meine Runde: die offenen Fragen einer Anwendung untereinander.
 *
 * Jede Frage ist ein eigener Block mit eigener Antwortreihe — nicht drei
 * Spalten. Drei Spalten hiessen: alles oder nichts. Untereinander heisst:
 * beantworte, was du weisst, und lass den Rest stehen.
 */
.runde-fragen { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.runde-frage {
    padding: 6px 9px; border-radius: var(--r-s, 4px);
    background: var(--flaeche-2); border: 1px solid var(--rand);
}
/* Beantwortetes tritt zurück, ohne zu verschwinden — sonst springt die Liste. */
.runde-frage.ist-beantwortet { background: transparent; border-style: dashed; opacity: .75; }
.runde-frage-name {
    font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 4px;
}
.runde-hinweis { margin-bottom: 4px; }
.runde-knoepfe { gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 5px; }

.klaer-frage {
    white-space: pre-wrap;
    font-size: 12px; line-height: 1.5; color: var(--text-1);
    margin: 5px 0 4px;
    padding-left: 9px; border-left: 2px solid var(--rand);
    max-height: 22em; overflow-y: auto;
}

.speicherleiste {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px; margin-top: 12px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
}

@media (max-width: 720px) {
    .bf-zeile { grid-template-columns: 1fr auto; }
    .bf-wahl { grid-column: 1 / -1; }
}

/* Vernetzungsgrad: eine Zeile je Kantenart, Balken statt Gesamtnote. */
.netzgrad { display: flex; flex-direction: column; gap: 5px; }
/*
 * Feste Spaltenbreiten. `minmax(…, auto)` liess die Zusatzspalte je Zeile
 * mitwachsen — jede Zeile ist ein eigenes Raster, also zerdrueckte der
 * laengste Zusatz in SEINER Zeile den Balken auf null und die Spalten
 * standen untereinander nicht mehr auf einer Linie.
 */
.netzgrad-zeile { display: grid; grid-template-columns: 160px 1fr 46px 116px 72px; align-items: center; gap: 10px; }
/* Nur Zeilen mit Erfassungsbildschirm sind anklickbar — der Rest bleibt stumm. */
.netzgrad-zeile.anklickbar { cursor: pointer; border-radius: var(--r-s, 4px); padding: 2px 4px; margin: -2px -4px; }
.netzgrad-zeile.anklickbar:hover { background: var(--akzent-hell); }
/*
 * Der Absprung steht dauerhaft da, nur zurueckgenommen. Nur beim Ueberfahren
 * sichtbar hiesse: wer nicht zufaellig mit der Maus darueberfaehrt, erfaehrt
 * nie, dass sich diese Luecke von hier aus schliessen laesst — und genau
 * dafuer gibt es die vier Bildschirme.
 */
/* Feste Breite auch hier: bei `auto` fehlt die Spalte in Zeilen ohne Absprung,
 * und deren Balken wird laenger als der der anderen — die Zeilen stehen dann
 * nicht mehr untereinander auf einer Linie und lassen sich nicht vergleichen. */
.netzgrad-pfeil { color: var(--akzent); white-space: nowrap; opacity: .55; text-align: right; }
.netzgrad-zeile.anklickbar:hover .netzgrad-pfeil { opacity: 1; }
.netzgrad-label { font-size: 11.5px; color: var(--text-2); }
.netzgrad-balken { height: 7px; border-radius: 4px; background: var(--rand); overflow: hidden; }
.netzgrad-fuell { display: block; height: 100%; border-radius: 4px; }
.nf-gut { background: var(--gut); }
.nf-warn { background: var(--warn); }
.nf-krit { background: var(--krit); }
.netzgrad-wert { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.netzgrad-zusatz { white-space: nowrap; }
.netzgrad-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 * Schmal: Beschriftung und Wert in eine Zeile, Balken darunter, Zusatz zuletzt.
 * Ohne die ausdrücklichen Zeilennummern verteilt die automatische Platzierung
 * den Prozentwert UNTER den Balken und den Zusatz direkt über die nächste
 * Beschriftung — dann liest sich „182 Lücken" wie eine Angabe zur folgenden
 * Kantenart statt zur eigenen.
 */
/*
 * Umbruchgrenze bei 820px, nicht bei 560.
 *
 * Gemessen wird das FENSTER, gebraucht wird die Breite des INHALTS — und der
 * ist hier um die linke Leiste schmaler. Bei 637px Fenster blieben 430px
 * Inhalt, und die festen Spalten (160 + 46 + 116 + 72 + Abstaende = 434)
 * drueckten den Balken auf null: elf Zeilen mit Prozentzahl und ohne Balken.
 */
@media (max-width: 820px) {
    .netzgrad-zeile { grid-template-columns: 1fr auto; gap: 3px 8px; margin-bottom: 4px; }
    /* Zusatz und Absprung in EINE Zeile: getrennt sass der Pfeil naeher an der
     * naechsten Beschriftung als an seiner eigenen. */
    .netzgrad-pfeil { grid-column: 2; grid-row: 3; opacity: 1; }
    .netzgrad-label { grid-column: 1; grid-row: 1; }
    .netzgrad-wert { grid-column: 2; grid-row: 1; }
    .netzgrad-balken { grid-column: 1 / -1; grid-row: 2; }
    .netzgrad-zusatz { grid-column: 1; grid-row: 3; }
}

.rollenkarte {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    padding: 9px 11px; margin-bottom: 6px;
}
.rollenkarte.fehlt { border-color: color-mix(in srgb, var(--krit) 35%, var(--rand)); background: var(--krit-flaeche); }
.rollenkarte.eben-gespeichert {
    border-color: var(--gut); background: var(--gut-flaeche);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 18%, transparent);
    animation: bestaetigt 2.4s ease-out;
}
@keyframes bestaetigt { 0% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gut) 34%, transparent); } }
.suche.speichert input { opacity: .65; background: var(--flaeche-3); }
.suche.speichert::after {
    content: "speichert …"; position: absolute; right: 8px; top: 7px;
    font-size: 10px; color: var(--text-3);
}
.rk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rk-rolle { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-3); }
.rk-fuss { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }

.hinweis {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 8px 10px; border-radius: var(--r-m); font-size: 11.5px; line-height: 1.45;
    background: var(--akzent-hell); border: 1px solid var(--akzent-rand); color: var(--text-2);
}
.hinweis.warn { background: var(--warn-flaeche); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.hinweis.krit { background: var(--krit-flaeche); border-color: color-mix(in srgb, var(--krit) 30%, transparent); }
.hinweis b { color: var(--text); }

.leer { padding: 26px 14px; text-align: center; color: var(--text-3); font-size: 12px; }

/* Auswahl von Personen */
.suche { position: relative; }
.suche input {
    width: 100%; height: 30px; padding: 0 9px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-s); font-size: 12px;
}
.suche input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.vorschlaege {
    position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 20;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    box-shadow: var(--schatten-hoch); max-height: 240px; overflow: auto; padding: 4px;
}
.vorschlag { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 7px; border: 0; background: none; border-radius: var(--r-s); text-align: left; }
.vorschlag:hover, .vorschlag[aria-selected="true"] { background: var(--akzent-hell); }

/* ------------------------------------------------------------------ Zeitachse */

.achse { position: relative; padding: 0 0 4px; --namensspalte: 250px; }
/* Die Jahresleiste muss am selben Nullpunkt beginnen wie die Balkenspur,
   sonst zeigt der Balken auf ein anderes Jahr als die Beschriftung darüber. */
.achse-jahre {
    display: flex; border-bottom: 1px solid var(--rand); margin-bottom: 8px;
    margin-left: var(--namensspalte); margin-right: 110px;
}
.achse-jahr { flex: 1; font-size: 10px; font-weight: 700; color: var(--text-3); padding: 0 0 5px 6px; border-left: 1px solid var(--rand); }
.achse-heute { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--krit); z-index: 1; }
.achse-heute::after {
    content: "heute"; position: absolute; top: -2px; left: 3px;
    font-size: 9px; font-weight: 700; color: var(--krit); background: var(--grund); padding: 0 3px;
}
.balken-zeile { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.balken-name { width: 240px; flex-shrink: 0; font-size: 11.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken-spur { position: relative; flex: 1; height: 20px; background: var(--flaeche-3); border-radius: 4px; overflow: hidden; }
.balken {
    position: absolute; top: 3px; bottom: 3px; border-radius: 3px;
    background: var(--info); display: flex; align-items: center; padding: 0 5px;
    font-size: 9.5px; font-weight: 650; color: #fff; white-space: nowrap; overflow: hidden;
}
.balken.gruen { background: var(--gut); } .balken.gelb { background: var(--warn); } .balken.rot { background: var(--krit); }
.balken.geplant { background: repeating-linear-gradient(135deg, var(--aus) 0 4px, color-mix(in srgb, var(--aus) 70%, #fff) 4px 8px); }
.balken-verbrauch { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0,0,0,.22); }

/* Blasengrafik */
.blasen { position: relative; height: 380px; margin: 8px 0 4px; }
.blasen-flaeche { position: absolute; inset: 26px 12px 30px 44px; border-left: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.blasen-netz { position: absolute; inset: 0; }
.blasen-netz div { position: absolute; background: var(--rand); opacity: .55; }
.blase {
    position: absolute; transform: translate(-50%, 50%); border-radius: 50%;
    display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff;
    border: 1.5px solid var(--flaeche); cursor: pointer;
}
.blase:hover { filter: brightness(1.12); z-index: 3; }
.achsbeschriftung { position: absolute; font-size: 10px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; }

/* ------------------------------------------------------------------ Meldungen */

.meldungen { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.meldung {
    display: flex; align-items: flex-start; gap: 9px; max-width: 560px;
    padding: 9px 13px; border-radius: var(--r-m);
    background: var(--text); color: var(--grund);
    font-size: 12px; line-height: 1.4; box-shadow: var(--schatten-hoch);
    animation: hoch .2s ease-out;
}
@keyframes hoch { from { transform: translateY(8px); opacity: 0; } }
.meldung.ist-fehler { background: var(--krit); color: #fff; }
.meldung.ist-gut { background: var(--gut); color: #fff; }
.meldung.ist-warn { background: var(--warn); color: #fff; }
/*
 * Der kritische Fall ist nicht bloss ein Fehler, sondern einer, der die
 * Ansicht unvollständig zurücklässt — er muss sich auch vom roten Fehler
 * abheben, sonst geht er in der Menge unter.
 */
.meldung.ist-krit { background: var(--krit); color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--krit), var(--schatten-hoch); font-weight: 600; }
.meldung b { font-weight: 700; }

/* ------------------------------------------------------------------ Kleinteile */

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1100px) { .zwei-spalten { grid-template-columns: 1fr; } }
.reihe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abstand { margin-top: 10px; }
.mono { font-family: var(--mono); font-size: 11px; }
.mini { font-size: 10.5px; color: var(--text-3); }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
textarea.eingabe, input.eingabe, select.eingabe {
    width: 100%; padding: 6px 8px; background: var(--flaeche);
    border: 1px solid var(--rand); border-radius: var(--r-s); font-size: 12px;
}
textarea.eingabe { min-height: 120px; font-family: var(--mono); font-size: 11px; resize: vertical; }
.eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.balken-mini { height: 5px; background: var(--flaeche-3); border-radius: 3px; overflow: hidden; min-width: 54px; }
.balken-mini i { display: block; height: 100%; background: var(--info); }

/* ------------------------------------------------------------------ Wirkungskette */

.kette-rahmen { padding: 0; overflow: auto; }
.kette {
    position: relative; display: flex; gap: 56px;
    padding: 12px 16px 16px; min-width: 980px;
}
.kette-linien { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.k-linie { fill: none; stroke: var(--rand-stark); stroke-width: 1.2; opacity: .75; }
.k-linie.bruch { stroke: var(--krit); stroke-width: 1.8; stroke-dasharray: 5 4; opacity: 1; }

.kette-spalte { position: relative; z-index: 1; flex: 1; min-width: 190px; }
.kette-spalte-kopf { margin-bottom: 9px; }
.kette-spalte-titel { font-size: 12px; font-weight: 700; letter-spacing: .2px; }
.kette-spalte-frage { font-size: 10.5px; color: var(--text-3); }
.kette-spalte-zahl { font-size: 10px; color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kette-knoten { display: flex; flex-direction: column; gap: 5px; }

.k-knoten {
    position: relative; text-align: left; width: 100%;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-left-width: 3px; border-radius: var(--r-s);
    padding: 5px 8px; display: flex; flex-direction: column; gap: 1px;
}
.k-knoten:hover { border-color: var(--rand-stark); background: var(--flaeche-2); }
.k-knoten.k-gut { border-left-color: var(--gut); }
.k-knoten.k-warn { border-left-color: var(--warn); }
.k-knoten.k-krit { border-left-color: var(--krit); }
.k-knoten.gebrochen { background: var(--krit-flaeche); border-color: color-mix(in srgb, var(--krit) 30%, var(--rand)); }
.k-knoten.gewaehlt {
    border-color: var(--akzent);
    box-shadow: 0 0 0 2px var(--akzent-hell);
}
/*
 * Der Weg zum Ändern — nur an der gewählten Karte. Der Doppelklick, der ihn
 * vorher als einziger anbot, war unsichtbar; dreiundneunzig Karten dauerhaft
 * mit einem Knopf zu versehen wäre die andere Übertreibung gewesen.
 */
.k-oeffnen {
    margin-top: 4px; align-self: flex-start; cursor: pointer;
    color: var(--akzent); font-weight: 600; font-size: 10px;
}
.k-oeffnen:hover, .k-oeffnen:focus-visible { text-decoration: underline; outline: none; }

.k-name { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.k-zusatz { font-size: 10px; color: var(--text-2); line-height: 1.3; }
.k-marke { margin-top: 3px; }

/* ------------------------------------------------------------------ Metamodell */

.schichten { display: flex; flex-direction: column; gap: 8px; }
.schicht {
    display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: stretch;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--r-l); padding: 8px; box-shadow: var(--schatten);
}
.schicht-band {
    border-radius: var(--r-m); display: flex; align-items: center; padding: 10px 12px;
    color: #fff; font-weight: 650; font-size: 12.5px; line-height: 1.25;
}
.schicht-band.z-info { background: var(--info); }
.schicht-band.z-gut { background: var(--gut); }
.schicht-band.z-warn { background: var(--warn); }
.schicht-band.z-krit { background: var(--krit); }
.schicht-typen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.typ-karte {
    background: var(--flaeche-2); border: 1px solid var(--rand);
    border-radius: var(--r-m); padding: 8px 10px;
}
.typ-karte.leer { opacity: .5; background: repeating-linear-gradient(135deg, var(--flaeche-3) 0 5px, transparent 5px 10px); }
.typ-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.typ-name { font-size: 12px; font-weight: 650; }
.typ-zahl { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--akzent); }
.typ-frage { font-size: 10.5px; color: var(--text-3); margin-top: 3px; line-height: 1.35; }

/* Beschriftung neben einem zu schmalen Balken */
.balken-neben {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 9.5px; font-weight: 650; color: var(--text-2); white-space: nowrap;
}

/* ------------------------------------------------------------------ Bearbeitung */

.bearb-huelle {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(12, 16, 21, .42);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 20px; overflow-y: auto;
}
.bearb-kasten {
    width: min(760px, 100%); background: var(--grund);
    border: 1px solid var(--rand); border-radius: var(--r-l);
    box-shadow: var(--schatten-hoch); overflow: hidden;
    animation: rein .16s ease-out;
}
.bearb-kopf {
    position: relative; padding: 13px 46px 12px 16px;
    background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
.bearb-titel { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.bearb-koerper { padding: 14px 16px; max-height: 62vh; overflow-y: auto; }
.bearb-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.bearb-feld { display: flex; flex-direction: column; gap: 3px; }
.bearb-label { font-size: 11px; font-weight: 600; color: var(--text-2); }
.bearb-pflicht { color: var(--krit); }
.bearb-hinweis { font-size: 10.5px; color: var(--text-3); line-height: 1.35; }
/*
 * Ein Feld, das nur zum Ansehen da ist. Es muss auf den ersten Blick anders
 * aussehen als ein Eingabefeld — sonst tippt jemand hinein, und der Grund,
 * warum das nicht geht, erreicht ihn erst beim Speichern.
 */
.bearb-fest {
    min-height: 30px; padding: 6px 9px; font-size: 12px;
    background: var(--flaeche); border: 1px dashed var(--rand); border-radius: 5px;
    color: var(--text-2); white-space: pre-wrap; word-break: break-word;
}
.bearb-schalter { display: flex; align-items: center; gap: 6px; height: 30px; }
.bearb-person { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; min-height: 22px; }
.bearb-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 16px; background: var(--flaeche); border-top: 1px solid var(--rand);
}

/* ------------------------------------------------------------------ Historie */

.hist-liste { display: flex; flex-direction: column; gap: 1px; }
.hist-zeile {
    display: grid; grid-template-columns: 108px 1fr; gap: 10px;
    padding: 7px 9px; border-radius: var(--r-s); background: var(--flaeche);
    border: 1px solid var(--rand);
}
.hist-zeit { font-size: 11px; color: var(--text-2); }
.hist-wandel { font-size: 11px; margin-top: 3px; }
.hist-vorher { color: var(--krit); text-decoration: line-through; text-decoration-thickness: 1px; opacity: .85; }
.hist-nachher { color: var(--gut); font-weight: 600; }
.hist-kommentar { margin-top: 3px; font-style: italic; }

/* ------------------------------------------------------------------ Datenpflege */

.pflege-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pflege-gruppe {
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--r-m); padding: 8px 10px;
}
.pflege-gruppe-name {
    font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 6px;
}
.pflege-knoepfe { display: flex; flex-wrap: wrap; gap: 4px; }

/* Aufgeklappte Kostenherleitung in der Kostenansicht */
.kosten-detail {
    padding: 10px 4px 6px 22px;
    border-left: 2px solid var(--akzent-rand);
    background: var(--flaeche-2);
}

/* Kachel, die zum Bearbeiten anklickbar ist */
button.feld.feld-klick { display: block; width: 100%; text-align: left; cursor: pointer; }
button.feld.feld-klick:hover { border-color: var(--akzent); background: var(--akzent-hell); }
button.feld.feld-klick::after {
    content: "✎"; position: absolute; top: 6px; right: 8px;
    font-size: 10px; color: var(--text-3); opacity: 0;
}
button.feld.feld-klick { position: relative; }
button.feld.feld-klick:hover::after { opacity: 1; }

/*
 * Feldkachel, die genau ihr Feld oeffnet.
 *
 * Dieselbe Anmutung wie die Knopf-Variante darueber — der Unterschied ist ein
 * Umsetzungsdetail, kein sichtbares. Wer zwei Sorten anklickbarer Kacheln
 * unterschiedlich aussehen laesst, lehrt den Nutzer eine Regel, die es nicht gibt.
 */
.feld.anklickbar { position: relative; cursor: pointer; }
.feld.anklickbar:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.feld.anklickbar:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.feld.anklickbar::after {
    content: "✎"; position: absolute; top: 6px; right: 8px;
    font-size: 10px; color: var(--text-3); opacity: 0; transition: opacity .12s ease;
}
.feld.anklickbar:hover::after,
.feld.anklickbar:focus-visible::after { opacity: 1; }

/*
 * Der Vererbungsblock im Einzelfeld-Dialog: er erklaert, warum unten „niemand
 * gewaehlt" steht, obwohl rechts ein Name stand. Deshalb steht er ganz oben und
 * ist abgesetzt — er ist die Antwort auf die Frage, mit der der Nutzer kommt.
 */
.vererb-block {
    border-left: 3px solid var(--akzent);
    padding-left: 10px;
    margin-bottom: 14px;
}
.vererb-hinweis { margin-top: 4px; line-height: 1.45; }

/* ------------------------------------------------------------------ Zuordnung */

.bearb-kasten.bearb-breit { width: min(1080px, 100%); }
button.verweis {
    border: 0; background: none; padding: 0; text-align: left;
    color: var(--akzent); font-weight: 600; text-decoration: underline;
    text-decoration-color: var(--akzent-rand); text-underline-offset: 2px;
}
button.verweis:hover { text-decoration-color: var(--akzent); }
button.typ-karte.typ-klick { width: 100%; text-align: left; cursor: pointer; }
button.typ-karte.typ-klick:hover { border-color: var(--akzent); background: var(--akzent-hell); }

.zuord-capliste { max-height: 190px; overflow-y: auto; margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.zuord-capzeile {
    display: flex; flex-direction: column; gap: 1px; text-align: left;
    padding: 5px 8px; border: 1px solid var(--rand); border-radius: var(--r-s);
    background: var(--flaeche); font-size: 12px;
}
.zuord-capzeile:hover { border-color: var(--rand-stark); background: var(--flaeche-3); }
.zuord-capzeile[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-hell); }

.zuord-baum {
    max-height: 260px; overflow-y: auto; margin-top: 5px;
    border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--flaeche); padding: 5px;
}
.zuord-orgzeile {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 6px; border-radius: var(--r-s); font-size: 12px; cursor: pointer;
}
.zuord-orgzeile:hover { background: var(--flaeche-3); }
.zuord-orgzeile.gewaehlt { background: var(--akzent-hell); }
.zuord-orgzeile.geerbt { opacity: .62; cursor: default; }
.zuord-orgname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zuord-e2 { padding-left: 20px; } .zuord-e3 { padding-left: 36px; } .zuord-e4 { padding-left: 52px; }

/* ------------------------------------------------------------------ Fristen */

.frist-zeile {
    display: grid; grid-template-columns: 4px minmax(160px, 1fr) 120px 110px 140px 130px auto;
    gap: 12px; align-items: center;
    padding: 8px 10px 8px 0; margin-bottom: 4px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    overflow: hidden;
}
.frist-zeile.frist-schmal { grid-template-columns: 4px minmax(160px, 1fr) 150px 130px 160px auto; }
.frist-balken { align-self: stretch; background: var(--rand-stark); }
.frist-krit { border-color: color-mix(in srgb, var(--krit) 35%, var(--rand)); background: var(--krit-flaeche); }
.frist-krit .frist-balken { background: var(--krit); }
.frist-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--rand)); background: var(--warn-flaeche); }
.frist-warn .frist-balken { background: var(--warn); }
.frist-daten { font-size: 12px; min-width: 0; }
.frist-daten.rechts { text-align: right; }
.frist-zeile > div { min-width: 0; }
.frist-zeile b, .frist-zeile .mini { overflow: hidden; text-overflow: ellipsis; }

/*
 * Auf schmalen Fenstern bricht die Zeile in zwei Bänder um, statt die ganze
 * Seite seitwärts zu schieben. Eine Fristenliste, die man horizontal scrollen
 * muss, liest niemand durch.
 */
@media (max-width: 1240px) {
    .frist-zeile, .frist-zeile.frist-schmal {
        grid-template-columns: 4px 1fr 1fr 1fr;
        row-gap: 6px; padding-top: 9px; padding-bottom: 9px;
    }
    .frist-zeile > *:nth-child(2) { grid-column: 2 / -1; }
    .frist-balken { grid-row: 1 / -1; }
}

/* ------------------------------------------------------------------ Organigramm */

.orgchart { display: flex; flex-direction: column; gap: 6px; }
.org-knoten {
    border: 1px solid var(--rand); border-radius: var(--r-m);
    background: var(--flaeche); padding: 8px 10px; margin-bottom: 6px;
}
.org-e1 { border-color: var(--rand-stark); background: var(--flaeche-2); }
.org-e2 { margin-left: 14px; }
.org-e3 { margin-left: 26px; }
.org-e4 { margin-left: 38px; }
.org-psp { opacity: .72; border-style: dashed; }
.org-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.org-name { font-weight: 650; font-size: 13px; }
.org-leute { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.org-rubrik {
    flex-basis: 100%; font-size: 10px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--text-3); margin-top: 4px;
}
.org-person {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border: 1px solid var(--rand); border-radius: 999px;
    background: var(--flaeche-3); font-size: 12px; cursor: pointer;
}
.org-person:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.org-person.auffaellig { border-color: color-mix(in srgb, var(--warn) 45%, var(--rand)); background: var(--warn-flaeche); }
.org-person-name { font-weight: 550; }

/* ------------------------------------------------------------------ Skills */

.skill-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.skill-karte {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    padding: 10px 12px; border: 1px solid var(--rand); border-radius: var(--r-m);
    background: var(--flaeche); cursor: pointer;
}
.skill-karte:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.skill-stufe3 {
    font-size: 11px; color: var(--text-3); font-style: italic;
    border-left: 2px solid var(--rand-stark); padding-left: 7px; margin: 3px 0;
}

/* ------------------------------------------------------------------ Bestätigung */

.pruef-zeile {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 9px 12px; margin-bottom: 5px;
    border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--flaeche);
}
.pruef-zeile:hover { border-color: var(--rand-stark); }
.pruef-zeile.erledigt { opacity: .6; }
/*
 * Wartend: sichtbar zurueckgenommen, aber nicht ausgegraut. Ausgrauen hiesse
 * „erledigt"; hier ist das Gegenteil der Fall — es ist noch nicht entschieden.
 */
.pruef-zeile.wartet { border-style: dashed; background: transparent; }
/*
 * Der Buendelkopf traegt die Zeilen darunter optisch — deshalb sitzt er auf
 * ihnen auf und nicht daneben. Ohne den Abstand oben verschwimmen zwei Buendel
 * zu einer langen Liste, und genau die wollten wir loswerden.
 */
.buendel-kopf {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 18px 0 -1px; padding: 8px 12px;
    border: 1px solid var(--rand); border-radius: 8px 8px 0 0;
    background: var(--flaeche-2);
}
.buendel-kopf.wartet { opacity: .75; }
.buendel-kopf + .pruef-zeile { border-radius: 0; }

/*
 * Die Begründung eines erschlossenen Adressaten. Abgesetzt, aber nicht
 * versteckt: wer sie überliest, hält die Frage für einen Irrtum.
 */
.abgeleitet-hinweis {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    margin-top: 3px;
}

/* ------------------------------------------------------------------ Organigramm-Zeichnung */

.chart { padding: 14px 4px 6px; overflow-x: auto; }
.chart-kopfreihe {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 18px; justify-items: center;
}
.chart-kasten {
    display: flex; flex-direction: column; gap: 2px; text-align: center;
    min-width: 168px; max-width: 210px; padding: 9px 12px;
    border: 1px solid var(--rand-stark); border-radius: var(--r-m);
    background: var(--flaeche); box-shadow: var(--schatten);
}
button.chart-kasten { cursor: pointer; }
button.chart-kasten:hover { border-color: var(--akzent); background: var(--akzent-hell); }
button.chart-kasten.offen { border-color: var(--akzent); background: var(--akzent-hell); box-shadow: 0 0 0 2px var(--akzent-rand); }
.chart-wurzel { min-width: 232px; background: var(--flaeche-2); border-width: 2px; }
.chart-stab { min-width: 150px; opacity: .95; }
.chart-code { font-size: 10px; font-weight: 800; letter-spacing: .8px; color: var(--text-3); }
.chart-name { font-size: 13px; font-weight: 650; line-height: 1.25; }
.chart-leitung { font-size: 12px; color: var(--text-2); }
.chart-leitung.vakant { color: var(--krit); font-style: italic; }
.chart-fuss { display: flex; gap: 4px; justify-content: center; margin-top: 3px; }

/* Verbindungslinien: ein senkrechter Stamm, ein Querbalken, je Spalte ein Ast */
.chart-stamm { width: 2px; height: 18px; background: var(--rand-stark); margin: 0 auto; }
.chart-querbalken { height: 2px; background: var(--rand-stark); margin: 0 8%; }
.chart-spalten {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 12px; align-items: start; margin-top: 0;
}
.chart-spalte { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chart-ast { width: 2px; height: 16px; background: var(--rand-stark); }
.chart-abteilung { width: 100%; }
.chart-gruppe {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    width: 100%; padding: 5px 9px; font-size: 11.5px; text-align: left;
    border: 1px solid var(--rand); border-radius: var(--r-s);
    background: var(--flaeche-3); cursor: pointer;
}
.chart-gruppe:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.chart-gruppe.hat-vakanz { border-color: color-mix(in srgb, var(--krit) 40%, var(--rand)); }
.chart-gruppe-name { line-height: 1.2; }
.chart-gruppe-zahl { font-weight: 700; color: var(--text-3); font-size: 11px; }

.gruppe-block { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rand); }
.gruppe-kopf { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }

/* ------------------------------------------------------------------ Mitarbeiterprofil */

.profil-kopf {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px 12px; border-bottom: 1px solid var(--rand);
}
.profil-avatar {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 16px;
    background: var(--akzent-hell); color: var(--akzent); border: 1px solid var(--akzent-rand);
}
.profil-titel { flex: 1; min-width: 0; }
.profil-titel h3 { margin: 0 0 2px; font-size: 17px; }
.profil-zahlen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--rand); background: var(--flaeche-2);
}
.profil-zahl {
    display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; text-align: left;
    border: 1px solid var(--rand); border-radius: var(--r-m); background: var(--flaeche); cursor: pointer;
}
.profil-zahl:hover { border-color: var(--akzent); }
.profil-zahl-wert { font-size: 19px; font-weight: 700; line-height: 1.1; }
.profil-zahl-text { font-size: 11px; color: var(--text-3); }
.profil-zahl.z-warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--rand)); background: var(--warn-flaeche); }
.profil-zahl.z-krit { border-color: color-mix(in srgb, var(--krit) 45%, var(--rand)); background: var(--krit-flaeche); }
.profil-zahl.z-krit .profil-zahl-wert { color: var(--krit); }
.profil-zeile {
    display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: start;
    padding: 8px 0; border-bottom: 1px solid var(--rand);
}
.profil-zeile-titel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
@media (max-width: 760px) { .profil-zeile { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Organigramm-Editor */

.chart-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.chart-verschiebe {
    display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--akzent-hell); border: 1px solid var(--akzent-rand);
}
.chart-staebe { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.chart-mit-werkzeug { position: relative; display: inline-block; }
.chart-gruppe-reihe { position: relative; display: flex; width: 100%; }
.chart-werkzeuge {
    position: absolute; top: -9px; right: -6px; display: flex; gap: 2px;
    opacity: 0; transition: opacity .12s;
}
.chart-mit-werkzeug:hover .chart-werkzeuge,
.chart-gruppe-reihe:hover .chart-werkzeuge,
.person-mit-werkzeug:hover .chart-werkzeuge { opacity: 1; }
.chart-wz {
    width: 20px; height: 20px; display: grid; place-items: center;
    font-size: 11px; line-height: 1; cursor: pointer;
    border: 1px solid var(--rand-stark); border-radius: 50%;
    background: var(--flaeche); color: var(--text-2); box-shadow: var(--schatten);
}
.chart-wz:hover { border-color: var(--akzent); color: var(--akzent); }
.chart-wz.wz-krit:hover { border-color: var(--krit); color: var(--krit); }
.chart-kasten.wird-verschoben, .chart-gruppe.wird-verschoben {
    border-color: var(--akzent); border-style: dashed; background: var(--akzent-hell);
}
.chart-neu {
    width: 100%; padding: 5px 9px; font-size: 11.5px; cursor: pointer;
    border: 1px dashed var(--rand-stark); border-radius: var(--r-s);
    background: transparent; color: var(--text-3);
}
.chart-neu:hover { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-hell); }
.person-mit-werkzeug { position: relative; display: inline-flex; }
.person-mit-werkzeug .chart-wz { position: absolute; top: -8px; right: -8px; }

/* ------------------------------------------------------------------ Entscheidungsvorlage */

.vorlage-liste { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.vorlage-liste li { margin-bottom: 4px; }
.vorlage-liste.luecken { color: var(--text-2); font-style: italic; }

/* ------------------------------------------------------------------ Portfoliobrett */

.brett-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 8px; }
.brett-karte {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 9px 11px; border: 1px solid var(--rand); border-radius: var(--r-m);
    background: var(--flaeche); cursor: pointer;
}
.brett-karte:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.brett-karte.ist-bedarf { border-style: dashed; }
.brett-titel { font-weight: 600; font-size: 13px; line-height: 1.3; }

/* ------------------------------------------------------------------ Statuspuls */

.puls-form { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
.puls-ampel {
    padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 550; cursor: pointer;
    border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text-2);
}
.puls-ampel.gewaehlt { color: #fff; border-color: transparent; }
.pa-gruen.gewaehlt { background: var(--gut); }
.pa-gelb.gewaehlt { background: var(--warn); }
.pa-rot.gewaehlt { background: var(--krit); }
.puls-verlauf { display: inline-flex; gap: 3px; align-items: center; }
.puls-punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pp-gruen { background: var(--gut); } .pp-gelb { background: var(--warn); } .pp-rot { background: var(--krit); }
.rollenkarte.erledigt { opacity: .68; }

/* ------------------------------------------------------------------ Lage heute */

.lage-liste { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.lage-karte {
    display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
    padding: 12px 14px; border: 1px solid var(--rand); border-left-width: 4px;
    border-radius: var(--r-m); background: var(--flaeche); cursor: pointer;
}
.lage-karte:hover { border-color: var(--akzent); border-left-color: var(--akzent); background: var(--akzent-hell); }
.lk-krit { border-left-color: var(--krit); }
.lk-warn { border-left-color: var(--warn); }
.lk-info { border-left-color: var(--akzent); }
.lk-aus { border-left-color: var(--rand-stark); }
.lage-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lage-titel { font-weight: 650; font-size: 14px; line-height: 1.3; }
.lage-text { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.lage-pfeil { color: var(--text-3); font-size: 15px; }

/* ------------------------------------------------------------------ Suche */

.suchfeld { position: relative; flex: 1; max-width: 420px; }
.suchfeld input {
    width: 100%; padding: 6px 12px; font-size: 13px;
    border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche-2);
}
.suchfeld input:focus { border-color: var(--akzent); background: var(--flaeche); outline: none; }
.such-ergebnis {
    position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 60;
    max-height: 60vh; overflow-y: auto;
    border: 1px solid var(--rand-stark); border-radius: var(--r-m);
    background: var(--flaeche); box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
.such-zeile {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    padding: 7px 12px; border: 0; background: none; cursor: pointer; font-size: 13px;
}
.such-zeile:hover, .such-zeile.aktiv { background: var(--akzent-hell); }
.such-art {
    flex: 0 0 92px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: var(--text-3);
}
.such-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.such-kopf { padding: 7px 12px; font-size: 11px; color: var(--text-3); border-bottom: 1px solid var(--rand); }

/* ------------------------------------------------------------------ Erzählte Lage */

.erz { margin-bottom: 14px; }
.erz-text { font-size: 14.5px; line-height: 1.62; max-width: 82ch; }
.erz-absatz { margin: 0 0 10px; }
.erz-beleg {
    display: inline; padding: 1px 6px; margin: 0 1px;
    font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--akzent); background: var(--akzent-hell);
    border: 1px solid var(--akzent-rand); border-radius: var(--r-s); cursor: pointer;
}
.erz-beleg:hover { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.erz-verworfen { margin-top: 8px; font-size: 12px; }
.erz-verworfen summary { cursor: pointer; color: var(--krit); }

/* ------------------------------------------------------------------ Gruppenansicht */

.gruppe-werkzeuge {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--rand);
}

/*
 * Die Schnittstellen-Zeile trägt mehr als eine Auswahl: Gegenüber, Art,
 * Richtung und die bereits erfassten Kanten. Sie bekommt deshalb die volle
 * Breite statt der dreispaltigen Aufteilung der beiden anderen Erfassungen.
 */
.bf-breit { grid-template-columns: 1fr auto; }
.bf-breit .bf-wahl { grid-column: 1 / -1; margin-top: 4px; }

/* ==========================================================================
   Erfassungs-Stapel — die gemeinsame Mechanik der sechs Erfassungsbildschirme.

   Der Vorgänger hat 207 aufgeklappte Formulare untereinander gezeichnet. Die
   Gestaltung hier folgt einer einzigen Regel: eine Zeile ist eine Zeile, bis
   jemand sie auswählt. Alles, was Höhe kostet, muss sich diese Höhe verdienen.
   ========================================================================== */

.stapel { display: flex; flex-direction: column; gap: 0; }

.stapel-werkzeug {
    position: sticky; top: 42px; z-index: 3;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 0 10px; margin-bottom: 2px;
    background: var(--grund);
    border-bottom: 1px solid var(--rand);
}
.stapel-suchbox {
    display: flex; align-items: center; gap: 6px; min-width: 210px; flex: 0 1 300px;
    height: 30px; padding: 0 10px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
}
.stapel-suchbox:focus-within { border-color: var(--akzent-rand); box-shadow: 0 0 0 3px var(--akzent-hell); }
.stapel-lupe { color: var(--text-3); font-size: 14px; line-height: 1; }
.stapel-suche {
    flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text);
}
.stapel-suche:focus { outline: none; }
.stapel-suche::-webkit-search-cancel-button { cursor: pointer; }
/* `select.eingabe` setzt width:100% und gewinnt gegen eine einzelne Klasse —
   deshalb hier ebenfalls mit Elementnamen, sonst nimmt das Auswahlfeld mit
   seinen vier Eintraegen eine ganze Zeile ein. */
select.stapel-sort { width: auto; min-width: 152px; height: 30px; font-size: 12px; padding: 0 8px; }

.stapel-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.stapel-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 9px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 550;
    border: 1px solid var(--rand); background: var(--flaeche); color: var(--text-2);
}
.stapel-chip:hover:not(:disabled) { border-color: var(--rand-stark); color: var(--text); }
.stapel-chip:disabled { opacity: .4; cursor: default; }
.stapel-chip-zahl {
    font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 600;
    color: var(--text-3); background: var(--flaeche-3); border-radius: 999px; padding: 1px 5px;
}
.stapel-chip.ist-an { background: var(--akzent); border-color: transparent; color: #fff; }
.stapel-chip.ist-an .stapel-chip-zahl { background: rgba(255, 255, 255, .22); color: #fff; }

.stapel-zaehler { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stapel-sammel:not(:empty) { padding: 8px 0 2px; }
.stapel-liste { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }

.stapel-gruppe {
    display: flex; align-items: baseline; gap: 8px;
    padding: 12px 2px 4px; margin-top: 4px;
    border-bottom: 1px solid var(--rand);
}
.stapel-gruppe:first-child { margin-top: 0; }

/*
 * Die Zeile. Drei Spalten: was es ist, was es kostet, was zu antworten ist.
 * Der linke Rand traegt die Dringlichkeit — eine Farbe, kein zweites Symbol.
 */
.st-zeile {
    display: grid; grid-template-columns: 1fr auto minmax(0, auto);
    align-items: center; gap: 10px;
    padding: 5px 10px 5px 8px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    border-left: 3px solid transparent;
    transition: border-color .12s, background .12s;
}
.st-zeile:hover { border-color: var(--rand-stark); }
.st-zeile.ist-dringend { border-left-color: var(--warn); }
.st-zeile.ist-erledigt { background: var(--flaeche-2); }
.st-zeile.ist-erledigt .st-name b { color: var(--text-2); font-weight: 550; }
.st-zeile.ist-auf { border-color: var(--akzent-rand); box-shadow: var(--schatten); }

.st-titel {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font: inherit; text-align: left; color: inherit;
    background: none; border: 0; padding: 3px 0; cursor: pointer;
}
button.st-titel:hover .st-name b { color: var(--akzent); }
.st-pfeil { color: var(--text-3); width: 11px; flex: none; font-size: 10px; }
.st-kopf { min-width: 0; }
.st-name { flex-wrap: wrap; gap: 6px; }
.st-name b { font-size: 12.5px; font-weight: 600; }
.st-beleg { color: var(--warn); margin-top: 1px; line-height: 1.3; }
.st-kosten { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-2); }
.st-antwort { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* Die Maske faellt unter die Zeile — sie gehoert zu ihr, nicht neben sie. */
.st-maske {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 6px; padding: 9px 2px 3px;
    border-top: 1px dashed var(--rand);
}

.stapel-fuss:not(:empty) {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 2px 2px;
}

@media (max-width: 760px) {
    .st-zeile { grid-template-columns: 1fr auto; }
    .st-antwort { grid-column: 1 / -1; justify-content: flex-start; }
    .stapel-zaehler { margin-left: 0; }
}

/* ==========================================================================
   Beziehungsblock — Zuordnungen bearbeiten, überall gleich.

   Vorher standen Beziehungen als Marken da: sie sahen aus wie eine Angabe und
   verhielten sich wie ein Bild. Ein Chip mit Löschknopf sieht anders aus als
   eine Marke, und genau das ist der Zweck — man muss auf einen Blick erkennen,
   ob etwas gepflegt werden kann.
   ========================================================================== */

.bez-reihe { flex-wrap: wrap; gap: 5px; }

.bez-chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 4px 0 9px; border-radius: 999px;
    font-size: 11px; font-weight: 550;
    background: var(--info-flaeche); color: var(--info);
    border: 1px solid color-mix(in srgb, var(--info) 22%, transparent);
}
/* Abgeleitet sieht anders aus als bestaetigt — auch beim Bearbeiten. */
.bez-chip.ist-abgeleitet {
    background: var(--flaeche-2); color: var(--text-2);
    border-style: dashed; border-color: var(--rand-stark);
}
.bez-chip.ist-markiert {
    background: var(--krit-flaeche); color: var(--krit);
    border-color: color-mix(in srgb, var(--krit) 40%, transparent);
}

.bez-weg {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    border: 0; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: 10px; font-weight: 700; line-height: 1;
    background: color-mix(in srgb, currentColor 14%, transparent); color: inherit;
}
.bez-weg:hover { background: color-mix(in srgb, currentColor 26%, transparent); }

.bez-neu { gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bez-feld { width: auto; min-width: 190px; flex: 0 1 260px; height: 28px; }
.bez-gesperrt { margin-top: 6px; color: var(--text-3); }

/* ------------------------------------------------------------------ Rückmeldung
 *
 * Der Knopf schwebt, weil der Ärger nicht im Menü entsteht. Er sitzt unten
 * rechts über allem — aber unter den Meldungen, damit er eine Bestätigung
 * nicht verdeckt.
 */
.rm-knopf {
    position: fixed; right: 18px; bottom: 18px; z-index: 40;
    background: var(--akzent); color: #fff; border: none;
    border-radius: 999px; padding: 9px 16px; font-size: 12px; font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,.22); cursor: pointer;
}
.rm-knopf:hover { filter: brightness(1.08); }
/*
 * Beim Ziehen: kein Textmarkieren, kein Systemgesten-Abfangen, und sichtbar
 * angehoben — sonst weiss der Nutzer nicht, dass der Langdruck gegriffen hat.
 */
.rm-knopf { touch-action: none; user-select: none; transition: transform .12s, box-shadow .12s; }
.rm-knopf.rm-zieht {
    transform: scale(1.06); cursor: grabbing;
    box-shadow: 0 6px 18px rgba(0,0,0,.32);
}

.rm-schicht {
    position: fixed; inset: 0; z-index: 60; background: rgba(15,20,28,.45);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.rm-fenster {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    width: min(680px, 100%); max-height: 90vh; overflow: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.rm-kopf { display: flex; align-items: center; justify-content: space-between; }
.rm-vorschau { display: flex; flex-direction: column; gap: 6px; }
/*
 * Absenden bleibt am Fensterboden. Mit einem Bild in der Vorschau ist das
 * Fenster laenger als der Schirm; vorher rollte die Leiste mit und man musste
 * sie suchen. Dasselbe gilt fuer die Stiftleiste am oberen Rand der Vorschau —
 * wer im Bild scrollt, verliert sonst die Bedienung aus dem Blick.
 */
.rm-fenster .speicherleiste {
    position: sticky; bottom: -16px; z-index: 2;
    background: var(--flaeche); border-top: 1px solid var(--rand);
    padding-top: 10px; margin-top: 2px;
}
.rm-vorschau > .reihe {
    position: sticky; top: -16px; z-index: 2;
    background: var(--flaeche); padding: 6px 0;
}
/* Das Bild wird gezeigt, nicht angedeutet — wer es nicht lesen kann, prüft es nicht. */
.rm-bild {
    max-width: 100%; max-height: 42vh; object-fit: contain;
    border: 1px solid var(--rand); border-radius: var(--r-s); background: var(--flaeche-2);
}

/* ------------------------------------------------------------------ Schattenwurf
 *
 * Die Rückfrage vor dem Schreiben. Was FOLGT, ist die Mehrheit und bekommt
 * eine Zahl; was NICHT folgt, ist die Arbeit und bekommt Zeilen mit Namen,
 * Datum und Urheber. Die drei Farben sind dieselben wie in der Landkarte —
 * grün trägt, bernstein braucht eine Entscheidung, grau ist unberührt.
 */
.sw-schicht {
    position: fixed; inset: 0; z-index: 70; background: rgba(15,20,28,.5);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.sw-fenster {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-m);
    width: min(720px, 100%); max-height: 88vh; overflow: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.sw-kopf { border-bottom: 1px solid var(--rand); padding-bottom: 8px; }

.sw-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sw-kachel {
    border: 1px solid var(--rand); border-left-width: 3px; border-radius: var(--r-s);
    padding: 8px 10px; background: var(--flaeche-2);
}
.sw-zahl { font-size: 22px; font-weight: 700; line-height: 1.1; }
.sw-kachel.sw-folgt  { border-left-color: var(--gut); }
.sw-kachel.sw-eigen  { border-left-color: var(--warn); }
.sw-kachel.sw-anders { border-left-color: var(--rand-stark); }

/* Ein Balken statt hundertelf Zeilen: das Verhältnis auf einen Blick. */
.sw-balken { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--flaeche-2); }
.sw-teil { display: block; min-width: 2px; }
.sw-teil.sw-folgt  { background: var(--gut); }
.sw-teil.sw-eigen  { background: var(--warn); }
.sw-teil.sw-anders { background: var(--rand-stark); }

.sw-titel { font-weight: 600; font-size: 12px; margin-top: 4px; }
.sw-liste { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow: auto; }
.sw-zeile {
    display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    border: 1px solid var(--rand); border-left: 3px solid var(--warn);
    border-radius: var(--r-s); padding: 7px 9px; background: var(--warn-flaeche, var(--flaeche-2));
}
.sw-zeile:hover { border-color: var(--rand-stark); border-left-color: var(--warn); }
/* Angehakt = wird entfernt. Die Zeile muss das zeigen, nicht nur das Kästchen. */
.sw-zeile:has(input:checked) { opacity: .55; border-left-color: var(--krit); text-decoration: line-through; }
.sw-zeile-text { display: flex; flex-direction: column; gap: 2px; }

/* ------------------------------------------------------------------ Rückmeldung: Fenster
 *
 * Angelehnt an BelegrAIdar, wo dieser Knopf sich bewährt hat: Titel mit
 * Untertitel statt nackter Überschrift, runde Chips für die Art, weicher
 * Kasten. Der Rest bleibt Hausstil — ein Fenster, das wie ein Fremdkörper
 * aussieht, wirkt wie ein Fremdkörper.
 */
.rm-titelzeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rm-titel { font-size: 17px; font-weight: 700; line-height: 1.2; }
.rm-unter { font-size: 12.5px; color: var(--text-2); line-height: 1.2; }
/* Die Grösse rutscht ans Ende der Stiftleiste — sie ist Beiwerk, kein Befehl. */
.rm-groesse { margin-left: 10px; opacity: .75; white-space: nowrap; }
.rm-kopf { display: flex; align-items: flex-start; gap: 12px; }
.rm-zu {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    font-size: 15px; line-height: 1; padding: 6px 8px; border-radius: var(--r-s); color: var(--text-2);
}
.rm-zu:hover { background: var(--flaeche-2); color: var(--text); }
.rm-kontext { padding: 7px 10px; background: var(--flaeche-2); border-radius: var(--r-s); }

.rm-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.rm-chip {
    border: 1.5px solid var(--rand); background: none; border-radius: 999px;
    padding: 5px 14px; font-size: 12.5px; cursor: pointer; color: var(--text);
}
.rm-chip:hover { border-color: var(--rand-stark); }
.rm-chip.rm-an {
    border-color: var(--akzent); font-weight: 650;
    background: color-mix(in srgb, var(--akzent) 10%, transparent);
}

/* Meine Rückmeldungen — der Teil, der den Rücklauf am Leben hält. */
.rm-meine { display: flex; flex-direction: column; }
.rm-abschnitt {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-2); margin: 14px 0 6px;
}
.rm-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--rand); }
.rm-zeile-text { font-size: 12.5px; }
.rm-antwort { font-size: 12px; color: var(--akzent); margin-top: 3px; }
.rm-abzeichen {
    font-size: 10.5px; font-weight: 650; border-radius: 999px; padding: 3px 9px;
    white-space: nowrap; background: var(--flaeche-2); color: var(--text-2);
}
.rm-st-geplant   { background: var(--akzent-hell); color: var(--akzent); }
.rm-st-umgesetzt { background: var(--gut-flaeche, var(--flaeche-2)); color: var(--gut); }
.rm-st-abgelehnt { background: var(--krit-flaeche, var(--flaeche-2)); color: var(--krit); }

/* Der rote Stift: die Fläche muss als malbar zu erkennen sein, und ein Zug
 * darf nicht als Textmarkierung oder Wischgeste enden. */
/*
 * Der Stift ist AUS, bis man ihn einschaltet. Vorher fing die Flaeche jeden
 * Druck ab — anklicken oder wischen war unmoeglich, und jeder Fehlgriff
 * hinterliess einen Punkt. Der Zustand muss sichtbar sein, sonst raet man.
 */
.rm-stift { touch-action: auto; user-select: none; }
.rm-stift.rm-malt {
    cursor: crosshair; touch-action: none;
    outline: 2px solid #e01b24; outline-offset: 2px;
}

/* Meine Rückmeldungen: zugeklappt eine Zeile, aufgeklappt die ganze Sache.
 * Ob es eine Antwort gibt, muss man SEHEN, nicht aufklappen müssen. */
.rm-abschnitt { display: flex; align-items: baseline; gap: 8px; }
.rm-antwortzahl {
    font-size: 10.5px; font-weight: 650; text-transform: none; letter-spacing: 0;
    color: var(--akzent); background: var(--akzent-hell); border-radius: 999px; padding: 2px 9px;
}
button.rm-zeile {
    width: 100%; text-align: left; background: none; border: 0;
    border-top: 1px solid var(--rand); cursor: pointer;
    display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px;
}
button.rm-zeile:hover { background: var(--flaeche-2); }
.rm-zeile-inhalt { flex: 1; min-width: 0; }
.rm-hat-antwort {
    font-size: 10.5px; font-weight: 650; white-space: nowrap;
    color: var(--akzent); background: var(--akzent-hell); border-radius: 999px; padding: 2px 8px;
}
.rm-pfeil { color: var(--text-2); font-size: 11px; padding-top: 2px; }

.rm-mehr { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 10px 2px; }
.rm-mehr-block {
    border-left: 3px solid var(--rand); padding: 6px 10px;
    background: var(--flaeche-2); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: 12.5px;
}
.rm-mehr-block.rm-antwortblock { border-left-color: var(--akzent); }
.rm-mehr-titel {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-2); margin-bottom: 3px;
}
.rm-ohne-antwort { font-style: italic; }

/* ------------------------------------------------------------------ Kritischer Pfad */
.kp-balken { display: flex; height: 22px; border-radius: var(--r-s); overflow: hidden; gap: 1px; }
.kp-teil {
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; color: #fff; min-width: 18px;
}
.kp-krit { background: var(--krit); }
.kp-warn { background: var(--warn); }
.kp-info { background: var(--info); }
.kp-gut  { background: var(--gut); }
.kp-aus  { background: var(--rand-stark); color: var(--text-2); }

.kp-dringlich { display: flex; flex-direction: column; gap: 6px; }
.kp-fall {
    width: 100%; text-align: left; cursor: pointer;
    background: var(--krit-flaeche, var(--flaeche-2));
    border: 1px solid var(--rand); border-left: 3px solid var(--krit);
    border-radius: var(--r-s); padding: 8px 10px;
    display: flex; flex-direction: column; gap: 3px;
}
.kp-fall:hover { border-color: var(--krit); }

/* Die Zerlegung: jeder Beitrag mit Rohwert, Punkten und Balken. */
.kp-zerlegung { width: 100%; border-collapse: collapse; font-size: 12px; }
.kp-zerlegung td { padding: 5px 8px; border-top: 1px solid var(--rand); vertical-align: top; }
.kp-stab { background: var(--flaeche-2); border-radius: 999px; height: 8px; width: 100px; overflow: hidden; }
.kp-stab span { display: block; height: 100%; background: var(--akzent); }
.kp-befunde { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* Verschiebbare Pillen: der Zustand muss sichtbar sein, sonst rät man. */
.gruppe-sortierbar button { touch-action: none; }
.gruppe-sortierbar button.zieht {
    opacity: .9; transform: scale(1.05); cursor: grabbing;
    box-shadow: 0 4px 14px rgba(0,0,0,.22); z-index: 2;
}
.gruppe.sortiert button:not(.zieht) { opacity: .6; }

/* ───────────────────────────────────────────── Wertelisten ─────────────
 *
 * Eine Liste ist ein aufklappbarer Block: oben der Name mit den Zahlen, die
 * über das Aufklappen entscheiden (wie viele Werte, wie viele benutzt), unten
 * die Werte selbst. Ohne die Zahlen im Kopf müsste man jede Liste öffnen, um
 * zu sehen, ob sich das Öffnen lohnt — bei 53 Listen ist das der Unterschied
 * zwischen einer Seite und einem Suchspiel.
 */
.listenblock { border: 1px solid var(--rand); border-radius: var(--r-m); margin-top: 8px; overflow: hidden; }
.listenblock.ist-offen { border-color: var(--akzent); }

.listenkopf {
    display: flex; align-items: baseline; gap: 12px; width: 100%;
    text-align: left; padding: 9px 12px; border: 0; background: none;
    cursor: pointer; font-size: 13px;
}
.listenkopf:hover { background: var(--flaeche-2); }
.listenblock.ist-offen .listenkopf { background: var(--flaeche-2); }
/*
 * Der Listenname ist eine Kennung aus dem Schema, kein Fliesstext — deshalb
 * dieselbe Schrift wie überall dort, wo eine Kennung steht.
 */
.listenname { font-family: var(--mono); font-weight: 600; }
/* Die Verwendungsstellen dürfen den Kopf nicht sprengen. */
.listenkopf .mini:last-child { margin-left: auto; text-align: right; opacity: .75; }

/* Ein stillgelegter Wert bleibt LESBAR — er ist nicht gelöscht, nur nicht mehr wählbar. */
tr.ist-still td { opacity: .55; }
tr.ist-still code { text-decoration: line-through; }

.werkzeugleiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.werkzeugleiste .feld { flex: 1 1 220px; }
.abstand-klein { margin-top: 6px; }