.kp-detailansicht{padding:16px;background:var(--kp-surface,#fff);color:var(--kp-ink,#1c2b36);min-height:60vh}
.kp-detailansicht__kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.kp-detailansicht__kopf h2{margin:0;font-size:1.2rem}
.kp-detailansicht__kopf p{margin:3px 0 0;color:var(--kp-ink-muted,#687887);font-size:.85rem}
.kp-detailansicht__tabelle{font-size:12px;white-space:nowrap}
.kp-detailansicht__tabelle th{position:sticky;top:0;background:var(--kp-surface,#fff);color:var(--kp-ink-muted,#687887);z-index:1}
.kp-detailansicht__tabelle th:not(:last-child),.kp-detailansicht__tabelle td:not(:last-child){border-right:1px solid var(--kp-line-2,#c7d0d5)}
.kp-detailansicht__tabelle th:nth-child(3),.kp-detailansicht__tabelle td:nth-child(3),.kp-detailansicht__tabelle th:nth-child(7),.kp-detailansicht__tabelle td:nth-child(7){border-right:2px solid var(--kp-line-2,#c7d0d5)}
.kp-detailansicht__tabelle th button{padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.kp-detailansicht__tabelle th button:hover,.kp-detailansicht__tabelle th button:focus{color:var(--kp-ink,#17222a);text-decoration:underline}
.kp-sort-arrow{display:inline-block;margin-left:4px;color:var(--kp-ink-muted,#7a8d9b);font-size:.9em;line-height:1;vertical-align:1px}
.kp-detailansicht__tabelle th button.kp-sort-active .kp-sort-arrow{color:var(--kp-ink,#17222a);font-weight:800}
.kp-detailansicht__tabelle th[draggable="true"]{cursor:grab}
.kp-detailansicht__tabelle th[draggable="true"]:active{cursor:grabbing}
.kp-detailansicht__tabelle th.kp-column-dragging{opacity:.45}
.kp-detailansicht__tabelle th.kp-column-drop{box-shadow:inset 3px 0 0 var(--kp-good,#0ca30c)}
.kp-detailansicht__tabelle td{vertical-align:top}
.kp-detailansicht__tabelle td:nth-child(3){white-space:normal;min-width:190px}
.kp-detailansicht__tabelle td:nth-child(3) small{display:block;color:var(--kp-ink-muted,#687887);margin-top:2px}
.kp-category{display:inline-block;padding:3px 6px;border-radius:4px;border-left:4px solid transparent;background:rgba(120,140,155,.08)}
.kp-category small{font-size:10px;text-transform:uppercase;letter-spacing:.03em}
/* Kategoriefarben kommen aus kappaplanungFFB-farben.js - dieselbe Quelle wie
   die Balken auf der Plantafel. Der farbige Streifen links traegt die
   Kennfarbe, die Flaeche eine stark abgeschwaechte Fassung davon: So bleibt
   der Text lesbar und die Zuordnung trotzdem auf einen Blick erkennbar. */
.kp-category--konzept{border-left-color:var(--kp-kat-konzept)}
.kp-category--konstruktion{border-left-color:var(--kp-kat-konstruktion)}
.kp-category--kundenzeichnung{border-left-color:var(--kp-kat-kundenzeichnung)}
.kp-category--änderungsschleife{border-left-color:var(--kp-kat-aenderungsschleife)}
.kp-category--muster{border-left-color:var(--kp-kat-muster)}
.kp-category--urmuster{border-left-color:var(--kp-kat-urmuster)}
.kp-category--puffer{border-left-color:var(--kp-kat-puffer)}
.kp-category--kvp{border-left-color:var(--kp-kat-kvp)}
/* Die Unterarten des Puffers teilen sich seine Farbe - so wie auf der
   Plantafel. Ohne diese drei Zeilen haetten sie in Gantt und
   Auftragsuebersicht gar keinen Streifen. */
.kp-category--puffer-nx,
.kp-category--puffer-ktr,
.kp-category--puffer-catia,
.kp-category--sonstiges{border-left-color:var(--kp-kat-puffer)}
.kp-category--schule{border-left-color:var(--kp-kat-schule)}
.kp-category--neuentwicklung{border-left-color:var(--kp-kat-neuentwicklung)}
.kp-category--urlaub{border-left-color:var(--kp-kat-urlaub)}
.kp-category--abwesenheit{border-left-color:var(--kp-kat-abwesenheit)}
.kp-category--unbekannt{border-left-color:var(--kp-kat-unbekannt)}
[data-kp-theme="dark"] .kp-detailansicht__tabelle{--bs-table-bg:#111a22;--bs-table-color:#f2f6f9;--bs-table-border-color:#33434f}
[data-kp-theme="dark"] .kp-detailansicht__tabelle th{background:#17222c;color:#f2f6f9;border-color:#5b7186}
[data-kp-theme="dark"] .kp-detailansicht__tabelle td{color:#e3edf3;border-color:#33434f}
[data-kp-theme="dark"] .kp-detailansicht__tabelle th:not(:last-child),[data-kp-theme="dark"] .kp-detailansicht__tabelle td:not(:last-child){border-right-color:#5b7186}
[data-kp-theme="dark"] .kp-detailansicht__tabelle th:nth-child(3),[data-kp-theme="dark"] .kp-detailansicht__tabelle td:nth-child(3),[data-kp-theme="dark"] .kp-detailansicht__tabelle th:nth-child(7),[data-kp-theme="dark"] .kp-detailansicht__tabelle td:nth-child(7){border-right-color:#7d95aa}
[data-kp-theme="dark"] .kp-detailansicht__tabelle td small{color:#b6c7d4}
[data-kp-theme="dark"] .kp-detailansicht .btn-outline-secondary{color:#f2f6f9;border-color:#7d95aa}
[data-kp-theme="dark"] .kp-detailansicht .btn-outline-secondary:hover{color:#111a22;background:#cbd8e2;border-color:#cbd8e2}
.kp-freeze{display:inline-block;padding:2px 6px;border-radius:4px;font-weight:600;white-space:nowrap}
.kp-freeze--gruen{color:#087f42;background:rgba(12,163,12,.14)}
.kp-freeze--gelb{color:#956000;background:rgba(250,178,25,.22)}
.kp-freeze--rot{color:#b21f2d;background:rgba(208,59,59,.18)}
[data-kp-theme="dark"] .kp-freeze--gruen{color:#70e29a;background:rgba(12,163,12,.25)}
[data-kp-theme="dark"] .kp-freeze--gelb{color:#ffd36b;background:rgba(250,178,25,.25)}
[data-kp-theme="dark"] .kp-freeze--rot{color:#ff9292;background:rgba(208,59,59,.3)}
.kp-skillsansicht,.kp-bereich{padding:16px;background:var(--kp-surface,#fff);color:var(--kp-ink,#17222a);min-height:60vh}
.kp-skillsansicht__kopf h2,.kp-bereich__kopf h2{margin:0;font-size:1.2rem}
.kp-skillsansicht__kopf p,.kp-bereich__kopf p{margin:3px 0 16px;color:var(--kp-ink-muted,#687887);font-size:.85rem}
.kp-skill-panel,.kp-bereich__tafel{margin-bottom:18px;border:1px solid var(--kp-line-2,#c7d0d5);border-radius:6px;padding:12px;background:var(--kp-surface-2,#eef1f3)}
.kp-skill-panel h3,.kp-bereich__tafel h3{margin:0 0 10px;font-size:.95rem}
.kp-skill-table{font-size:12px;margin:0;background:var(--kp-surface,#fff)}
.kp-skill-table th,.kp-skill-table td{border-right:1px solid var(--kp-line-2,#c7d0d5);vertical-align:top}
.kp-skill{display:inline-block;margin:2px 4px 2px 0;padding:3px 6px;border-radius:10px;font-size:11px;font-weight:600}
.kp-skill-toggle{border:0;cursor:pointer}
.kp-skill--ok{color:#087f42;background:rgba(12,163,12,.14)}
.kp-skill--off{color:var(--kp-ink-muted,#687887);background:transparent;border:1px dashed var(--kp-line-2,#c7d0d5)}
.kp-skill--tone-0{color:#087f42;background:rgba(12,163,12,.14)}
.kp-skill--tone-1{color:#3541bb;background:rgba(53,65,187,.14)}
.kp-skill--tone-2{color:#956000;background:rgba(250,178,25,.22)}
.kp-skill--tone-3{color:#8c287f;background:rgba(203,143,255,.18)}
.kp-skill--tone-4{color:#087f72;background:rgba(3,151,177,.14)}
.kp-skill--tone-5{color:#a61e7a;background:rgba(166,30,122,.14)}
.kp-skill-editor{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kp-skill-editor select,.kp-skill-editor input{min-height:32px;padding:5px 8px;border:1px solid var(--kp-line-2,#c7d0d5);border-radius:5px;background:var(--kp-surface,#fff);color:var(--kp-ink,#17222a);font-size:12px}
.kp-skill-editor select{min-width:180px}.kp-skill-editor input{min-width:240px}
.kp-skill-toggle span{font-weight:800;margin-left:3px}
.kp-skill--required{color:#3541bb;background:rgba(53,65,187,.14)}
.kp-team-lead{display:block;margin-top:3px;color:var(--kp-ink-muted,#687887);font-size:11px}
.kp-skill-hinweis{margin:-4px 0 10px;color:var(--kp-ink-muted,#687887);font-size:12px}
.kp-core{display:inline-block;padding:3px 7px;border-radius:4px;font-weight:700}
.kp-core--nx{color:#087f42;background:rgba(12,163,12,.14)}
.kp-core--catia{color:#956000;background:rgba(250,178,25,.22)}
[data-kp-theme="dark"] .kp-skillsansicht,[data-kp-theme="dark"] .kp-bereich{background:#111a22;color:#f2f6f9}
[data-kp-theme="dark"] .kp-skillsansicht__kopf p,[data-kp-theme="dark"] .kp-bereich__kopf p{color:#b6c7d4}
[data-kp-theme="dark"] .kp-skill-panel,[data-kp-theme="dark"] .kp-bereich__tafel{background:#17222c;border-color:#5b7186}
[data-kp-theme="dark"] .kp-skill-table{background:#111a22;color:#e3edf3}
[data-kp-theme="dark"] .kp-skill-table th,[data-kp-theme="dark"] .kp-skill-table td{border-color:#5b7186}
[data-kp-theme="dark"] .kp-skill--ok{color:#70e29a;background:rgba(12,163,12,.25)}
[data-kp-theme="dark"] .kp-skill--off{color:#b6c7d4;border-color:#5b7186}
[data-kp-theme="dark"] .kp-team-lead,[data-kp-theme="dark"] .kp-skill-hinweis{color:#b6c7d4}
[data-kp-theme="dark"] .kp-skill--tone-0{color:#70e29a;background:rgba(12,163,12,.25)}
[data-kp-theme="dark"] .kp-skill--tone-1{color:#9fc0ff;background:rgba(53,65,187,.35)}
[data-kp-theme="dark"] .kp-skill--tone-2{color:#ffd36b;background:rgba(250,178,25,.25)}
[data-kp-theme="dark"] .kp-skill--tone-3{color:#e1cfff;background:rgba(153,109,255,.3)}
[data-kp-theme="dark"] .kp-skill--tone-4{color:#72dbea;background:rgba(2,142,178,.28)}
[data-kp-theme="dark"] .kp-skill--tone-5{color:#e86bd0;background:rgba(175,2,133,.28)}
[data-kp-theme="dark"] .kp-skill-editor select,[data-kp-theme="dark"] .kp-skill-editor input{background:#111a22;color:#f2f6f9;border-color:#7d95aa}
[data-kp-theme="dark"] .kp-skill--required{color:#9fc0ff;background:rgba(53,65,187,.35)}
[data-kp-theme="dark"] .kp-core--nx{color:#70e29a;background:rgba(12,163,12,.25)}
[data-kp-theme="dark"] .kp-core--catia{color:#ffd36b;background:rgba(250,178,25,.25)}
/* ---------------------------------------------------------------------------
 * Kapazitaetsplanung FFB - Variante B "Cockpit"
 *
 * Wird ZUSAETZLICH zu kappaplanungFFB.css geladen (nur bei ?design=b) und
 * ueberschreibt gezielt. Variante A bleibt dadurch unangetastet.
 *
 * Neu gegenueber Variante A:
 *   - Kennzahlenleiste ueber der Plantafel
 *   - Auslastungsanzeige je Person
 *   - Hell und Dunkel aus einem Satz Werten, folgt der Systemeinstellung
 *
 * Die dunklen Kennfarben sind eigene, gepruefte Stufen - keine automatische
 * Umkehrung der hellen. Auf dunklem Grund ist das nutzbare Helligkeitsband nur
 * etwa halb so breit, deshalb wirken sie kraeftiger.
 * ------------------------------------------------------------------------- */


/* --- Dunkelmodus ---------------------------------------------------------
   Gesetzt wird data-kp-theme ganz oben im Template (Systemeinstellung oder
   gespeicherte Wahl). Diese Werte stehen deshalb nur an dieser einen Stelle. */

:root[data-kp-theme="dark"] {
    --kp-plane:      #0b1218;
    --kp-surface:    #111a22;
    --kp-surface-2:  #17222c;

    /* Muss mit dem Block fuer die Systemeinstellung oben uebereinstimmen. */
    --kp-ink:        #f2f6f9;
    --kp-ink-2:      #cbd8e2;
    --kp-ink-muted:  #b6c7d4;

    --kp-line:       #23303b;
    --kp-line-2:     #33434f;

    --kp-shadow:     0 1px 2px rgba(0, 0, 0, .40), 0 2px 12px rgba(0, 0, 0, .30);
}

/* --- Kennzahlenleiste ---------------------------------------------------- */

/* Bewusst kompakt: die Leiste soll der Plantafel keinen Platz wegnehmen.
   Vier schmale Kacheln in einer Zeile statt fuenf hoher Kaesten. */
.kp-kpis {
    display: grid;
    /* 130 statt 150: Mit der Lieferzeitkachel, die zwei Spalten breit ist,
       braucht die Zeile acht Spalten. Bei 150 passten nur sieben, und die
       letzte Kachel rutschte in eine zweite Zeile - genau die Bildschirmhoehe,
       die an anderer Stelle muehsam gespart wurde. */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: .45rem;
    margin-bottom: .5rem;
}

.kp-kpi {
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    padding: .45rem .65rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 0;
}

.kp-kpi__body {
    min-width: 0;
}

.kp-kpi__label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--kp-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kp-kpi__value {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--kp-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.kp-kpi__value small {
    font-size: .75rem;
    font-weight: 500;
    color: var(--kp-ink-2);
    margin-left: .2rem;
}

.kp-kpi__note {
    font-size: .625rem;
    color: var(--kp-ink-muted);
    margin-top: .05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der farbige Punkt links traegt keine Information allein -
   die Zahl daneben sagt dasselbe. */
.kp-kpi__mark {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    background: var(--kp-surface-2);
    color: var(--kp-ink-2);
}

.kp-kpi--warn .kp-kpi__mark    { background: rgba(250, 178, 25, .16); color: #a06f00; }
.kp-kpi--serious .kp-kpi__mark { background: rgba(236, 131, 90, .18); color: #b4592c; }
.kp-kpi--alert .kp-kpi__mark   { background: rgba(208, 59, 59, .16);  color: var(--kp-critical); }
.kp-kpi--good .kp-kpi__mark    { background: rgba(12, 163, 12, .16);  color: #0a7d0a; }

.kp-meter__fill--serious { background: #ec835a; }

:root[data-kp-theme="dark"] .kp-kpi--warn .kp-kpi__mark { color: #fab219; }
:root[data-kp-theme="dark"] .kp-kpi--good .kp-kpi__mark { color: #37c437; }


/* Balkenanzeige innerhalb einer Kennzahl */
.kp-meter {
    height: 5px;
    border-radius: 3px;
    background: var(--kp-surface-2);
    overflow: hidden;
    margin-top: .35rem;
}

.kp-meter__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--kp-ink-muted);
}

.kp-meter__fill--warn  { background: #fab219; }
.kp-meter__fill--alert { background: var(--kp-critical); }
.kp-meter__fill--good  { background: var(--kp-good); }

/* --- Auslastung je Person (Achsenbeschriftung) --------------------------- */

/* Die Zeilenhoehe meldet das Diagramm (siehe zeilenhoeheMelden). Bild und Ring
   richten sich danach, damit sie bei vielen Personen nicht ueberlappen und
   angeschnitten wirken. Der Rueckfallwert gilt nur bis zum ersten Zeichnen. */
.kp-person {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-right: .4rem;
    max-width: 235px;
    max-height: var(--kp-zeilenhoehe, 30px);
    overflow: hidden;
}

/* Bild oder Initialen. Solange keine Bildquelle angebunden ist, tragen die
   Initialen die Wiedererkennung - der Name daneben bleibt immer sichtbar,
   das Bild ist Beiwerk und nie der einzige Traeger einer Information. */
.kp-avatar {
    flex: 0 0 auto;
    width: clamp(14px, calc(var(--kp-zeilenhoehe, 30px) - 8px), 26px);
    height: clamp(14px, calc(var(--kp-zeilenhoehe, 30px) - 8px), 26px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--kp-ink-2);
    background: var(--kp-surface-2);
    box-shadow: inset 0 0 0 1px var(--kp-line-2);
    overflow: hidden;
    user-select: none;
}

.kp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kp-person__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--kp-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

/* Zeichen fuer "einzelne Tage ueber Pensum" - bewusst getrennt vom Ring,
   weil es eine andere Aussage ist als die Auslastung ueber den Zeitraum. */
.kp-person__flag {
    color: var(--kp-critical);
    font-size: 9px;
    margin-left: .3rem;
    vertical-align: 1px;
}

/* Auslastungsring wie im Entwurf - die Zahl steht in der Mitte,
   der Ring ist nur die Verstaerkung. */
.kp-ring {
    flex: 0 0 auto;
    position: relative;
    width: clamp(16px, calc(var(--kp-zeilenhoehe, 30px) - 4px), 30px);
    height: clamp(16px, calc(var(--kp-zeilenhoehe, 30px) - 4px), 30px);
}

.kp-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    display: block;
}

.kp-ring__track {
    fill: none;
    stroke: var(--kp-surface-2);
    stroke-width: 3;
}

.kp-ring__value {
    fill: none;
    stroke: var(--kp-ink-muted);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset .3s ease;
}

/* Je voller, desto roter - gruen unter 60, gelb ab 60, orange ab 85, rot ueber 100 */
.kp-ring--good    .kp-ring__value { stroke: var(--kp-good); }
.kp-ring--warn    .kp-ring__value { stroke: #fab219; }
.kp-ring--serious .kp-ring__value { stroke: #ec835a; }
.kp-ring--alert   .kp-ring__value { stroke: var(--kp-critical); }

.kp-ring__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kp-ink-2);
    line-height: 1;
}

.kp-ring--good    .kp-ring__text { color: #0a7d0a; }
.kp-ring--warn    .kp-ring__text { color: #a06f00; }
.kp-ring--serious .kp-ring__text { color: #b4592c; }
.kp-ring--alert   .kp-ring__text { color: var(--kp-critical); }

:root[data-kp-theme="dark"] .kp-ring--good .kp-ring__text { color: #37c437; }
:root[data-kp-theme="dark"] .kp-ring--warn .kp-ring__text { color: #fab219; }
:root[data-kp-theme="dark"] .kp-ring--serious .kp-ring__text { color: #ec835a; }


/* --- Sortierung ---------------------------------------------------------- */

.kp-sort {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.kp-sort__label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kp-ink-muted);
    white-space: nowrap;
}

.kp-sort__select {
    font-size: .8125rem;
    color: var(--kp-ink);
    background: var(--kp-surface);
    border: 1px solid var(--kp-line-2);
    border-radius: var(--kp-radius);
    padding: .35rem 1.6rem .35rem .55rem;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.kp-sort__select:hover {
    border-color: var(--kp-ink-muted);
}

/* --- Umschalter Hell/Dunkel als Schiebeschalter -------------------------- */

/* Bewusst schlicht: ein Knopf in derselben Sprache wie die uebrigen
   Bedienelemente, ein einzelnes Zeichen in gedaempfter Schriftfarbe.
   Keine bunten Scheiben - die lenkten nur ab und passten zu nichts. */
.kp-theme-switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--kp-line-2);
    border-radius: 10px;
    background: var(--kp-surface);
    color: var(--kp-ink-2);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.kp-theme-switch:hover {
    color: var(--kp-ink);
    border-color: var(--kp-ink-muted);
    background: var(--kp-surface-2);
}

/* --- Zweite Bedienzeile -------------------------------------------------- */

.kp-leiste2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    padding: .45rem .7rem;
    margin-bottom: .5rem;
}

/* Suche und Sortierung nach rechts */
.kp-leiste2 .kp-suche {
    margin-left: auto;
}

/* --- Zeitraum-Voreinstellungen ------------------------------------------- */

.kp-segment {
    display: inline-flex;
    border: 1px solid var(--kp-line-2);
    border-radius: var(--kp-radius);
    overflow: hidden;
    background: var(--kp-surface);
}

.kp-segment__btn {
    border: 0;
    background: none;
    color: var(--kp-ink-2);
    font-size: .8125rem;
    font-weight: 500;
    padding: .35rem .65rem;
    cursor: pointer;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.kp-segment__btn + .kp-segment__btn {
    border-left: 1px solid var(--kp-line);
}

.kp-segment__btn:hover {
    background: var(--kp-surface-2);
    color: var(--kp-ink);
}

.kp-segment__btn--aktiv {
    background: #1654a9;
    color: #fff;
    font-weight: 600;
}

.kp-segment__btn--aktiv:hover {
    background: #11468d;
    color: #fff;
}

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

.kp-zeitachse {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.kp-zeitachse__btn,
.kp-zeitachse__heute {
    border: 1px solid var(--kp-line-2);
    background: var(--kp-surface);
    color: var(--kp-ink-2);
    border-radius: var(--kp-radius);
    padding: .35rem .55rem;
    font-size: .8125rem;
    line-height: 1.2;
    cursor: pointer;
}

.kp-zeitachse__btn {
    min-width: 30px;
    font-size: 1rem;
    padding: .2rem .4rem;
}

.kp-zeitachse__btn:hover,
.kp-zeitachse__heute:hover:not([disabled]) {
    color: var(--kp-ink);
    border-color: var(--kp-ink-muted);
    background: var(--kp-surface-2);
}

.kp-zeitachse__heute[disabled] {
    opacity: .45;
    cursor: default;
}

/* --- Kalender zum Monatssprung ------------------------------------------ */

.kp-kalender-huelle {
    position: relative;
}

.kp-zeitachse__kalender {
    min-width: 96px;
    border: 1px solid var(--kp-line-2);
    background: var(--kp-surface);
    color: var(--kp-ink);
    border-radius: var(--kp-radius);
    padding: .35rem .6rem;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.kp-zeitachse__kalender:hover {
    border-color: var(--kp-ink-muted);
    background: var(--kp-surface-2);
}

.kp-kalender {
    display: none;
    position: absolute;
    top: calc(100% + .35rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: 232px;
    background: var(--kp-surface);
    border: 1px solid var(--kp-line-2);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(23, 34, 42, .22);
    padding: .55rem;
}

.kp-kalender--offen {
    display: block;
}

.kp-kalender__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
}

.kp-kalender__jahr {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--kp-ink);
    font-variant-numeric: tabular-nums;
}

.kp-kalender__pfeil {
    border: 1px solid var(--kp-line-2);
    background: var(--kp-surface);
    color: var(--kp-ink-2);
    border-radius: 6px;
    width: 28px;
    height: 26px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.kp-kalender__pfeil:hover:not([disabled]) {
    color: var(--kp-ink);
    border-color: var(--kp-ink-muted);
}

.kp-kalender__pfeil[disabled] {
    opacity: .35;
    cursor: default;
}

/* Drei Spalten mal vier Zeilen - das ganze Jahr auf einen Blick */
.kp-kalender__monate {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .3rem;
}

.kp-kalender__monat {
    border: 1px solid transparent;
    background: var(--kp-surface-2);
    color: var(--kp-ink);
    border-radius: 6px;
    padding: .45rem .2rem;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
}

.kp-kalender__monat:hover:not([disabled]) {
    border-color: var(--kp-ink-muted);
}

.kp-kalender__monat[disabled] {
    opacity: .3;
    cursor: default;
}

.kp-kalender__monat--aktiv {
    background: #1654a9;
    border-color: #1654a9;
    color: #fff;
    font-weight: 600;
}

/* --- Leerer Zeitraum ----------------------------------------------------- */

.kp-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 100%;
    min-height: 220px;
    text-align: center;
    color: var(--kp-ink-2);
}

.kp-leer__titel {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kp-ink);
}

.kp-leer__text {
    font-size: .8125rem;
    color: var(--kp-ink-muted);
}

.kp-leer__btn {
    margin-top: .3rem;
    border: 1px solid var(--kp-line-2);
    background: var(--kp-surface);
    color: var(--kp-ink-2);
    border-radius: var(--kp-radius);
    padding: .4rem .8rem;
    font-size: .8125rem;
    cursor: pointer;
}

.kp-leer__btn:hover {
    color: var(--kp-ink);
    border-color: var(--kp-ink-muted);
}

/* --- Monatsschiene und Bildlaufleiste unter der Tafel -------------------- */

.kp-schiene {
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    padding: .35rem .5rem .3rem;
    margin-top: .5rem;
}

/* Echte Bildlaufleiste: der Inhalt ist so breit wie das ganze Jahr,
   der sichtbare Ausschnitt entspricht dem Fenster. */
.kp-schiene__lauf {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
}

.kp-schiene__inhalt {
    height: 1px;
}

.kp-schiene__lauf::-webkit-scrollbar {
    height: 12px;
}

.kp-schiene__lauf::-webkit-scrollbar-track {
    background: var(--kp-surface-2);
    border-radius: 6px;
}

.kp-schiene__lauf::-webkit-scrollbar-thumb {
    background: var(--kp-ink-muted);
    border-radius: 6px;
    border: 3px solid var(--kp-surface);
}

.kp-schiene__lauf::-webkit-scrollbar-thumb:hover {
    background: var(--kp-ink-2);
}

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

.kp-suche {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Nach dem Vorbild aus dem Entwurf: breit, deutlich gerundet, Lupe links.
   Die Lupe steckt als Hintergrundbild im Feld - kein zusaetzliches Markup. */
.kp-suche__feld {
    width: 270px;
    font-size: .875rem;
    color: var(--kp-ink);
    background-color: var(--kp-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8d9b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 11px 50%;
    background-size: 16px 16px;
    border: 1px solid var(--kp-line-2);
    border-radius: 10px;
    padding: .5rem .8rem .5rem 2.15rem;
    line-height: 1.3;
}

.kp-suche__feld::placeholder {
    color: var(--kp-ink-muted);
}

.kp-suche__feld:hover {
    border-color: var(--kp-ink-muted);
}

.kp-suche__feld:focus {
    outline: none;
    border-color: #1654a9;
    box-shadow: 0 0 0 3px rgba(22, 84, 169, .16);
}

/* Das eingebaute Kreuz von type="search" passt farblich nicht ins dunkle Thema */
.kp-suche__feld::-webkit-search-cancel-button {
    filter: grayscale(1) opacity(.55);
    cursor: pointer;
}

.kp-suche__treffer {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--kp-ink-muted);
    white-space: nowrap;
    min-width: 72px;
}

.kp-suche__treffer--leer {
    color: var(--kp-critical);
}

/* --- Legende in der Kennzahlenleiste ------------------------------------- */

.kp-legend {
    margin-bottom: .5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .45rem;
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow);
    padding: .4rem .6rem;
}

.kp-legend__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    padding: .15rem .5rem .15rem .3rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--kp-ink-2);
    cursor: pointer;
    line-height: 1.4;
}

.kp-legend__chip:hover {
    background: var(--kp-surface-2);
    color: var(--kp-ink);
}

.kp-legend__chip[aria-pressed="true"] {
    background: var(--kp-surface-2);
    border-color: var(--kp-line-2);
    color: var(--kp-ink);
    font-weight: 600;
}

.kp-legend__chip--aus {
    opacity: .4;
}

.kp-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.kp-legend__hinweis {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: .6875rem;
    color: var(--kp-ink-muted);
    white-space: nowrap;
}

/* Stand der Abas-Daten - stand vorher als Untertitel mitten ueber der Tafel */
.kp-legend__stand {
    padding-left: .8rem;
    border-left: 1px solid var(--kp-line);
    font-variant-numeric: tabular-nums;
}

/* --- Anpassungen an Variante A ------------------------------------------ */

.kp-page {
    /* Kennzahlenleiste braucht oben etwas weniger Luft */
    padding-top: .25rem;
}

/* Im Dunkelmodus muessen Bootstrap-Bausteine mitziehen, sonst leuchten
   Formularfelder und Tabellen weiss aus der dunklen Flaeche heraus. */
:root[data-kp-theme="dark"] .kp-modal .form-control,
:root[data-kp-theme="dark"] .kp-modal .form-select,
:root[data-kp-theme="dark"] .kp-page .form-control,
:root[data-kp-theme="dark"] .kp-page .form-select {
    background-color: var(--kp-surface-2);
    color: var(--kp-ink);
    border-color: var(--kp-line-2);
}

:root[data-kp-theme="dark"] .kp-modal .btn-close,
:root[data-kp-theme="dark"] .kp-page .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}

:root[data-kp-theme="dark"] .kp-modal .table,
:root[data-kp-theme="dark"] .kp-modal .detail-table,
:root[data-kp-theme="dark"] .kp-modal .kp-stale-table {
    --bs-table-color: var(--kp-ink);
    --bs-table-bg: transparent;
    --bs-table-hover-color: var(--kp-ink);
    color: var(--kp-ink);
}


@media (max-width: 767.98px) {
    .kp-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media print {
    .kp-kpis {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Der Umschalter traegt die Klasse kp-theme-switch - die Kennung
       kp-theme-toggle ist die id und greift als Klassenregel nicht. */
    .kp-theme-switch {
        display: none;
    }
}

/* Die vier neuen Hauptbereiche. Flaeche, Kopf und Tafel teilen sie sich mit
   der Skills-Ansicht - hier steht nur, was es dort nicht gibt: die Marke, die
   einen noch nicht gebauten Bereich als solchen ausweist. */
.kp-bereich__marke{display:inline-block;margin:0 0 10px;padding:3px 9px;border-radius:10px;background:rgba(250,178,25,.22);color:#7a4f00;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.kp-bereich__tafel ul{margin:0;padding-left:20px}
.kp-bereich__tafel li{margin-bottom:5px;font-size:.85rem;line-height:1.45}
[data-kp-theme="dark"] .kp-bereich__marke{background:rgba(250,178,25,.26);color:#ffd36b}

/* Hilfe-Dialog: drei getrennte Abschnitte (Bedienung, Notizen, Ideen). Die
   Trennlinie ist nicht Zierde - der Auftrag verlangt ausdruecklich, dass
   Anleitung, Notizen und Zukunftsideen nicht ineinanderlaufen. */
.kp-hilfe-knopf{margin-right:6px}
/* Schriftfarbe ausdruecklich setzen: ".kp-modal .modal-content" legt nur den
   Hintergrund fest. Die sechs aelteren Dialoge faerben jedes Textelement
   einzeln, deshalb faellt das dort nicht auf - dieser Dialog benutzt aber
   schlichte Absaetze und Listen. Ohne diese Zeile stuenden sie im
   Dunkelmodus fast schwarz auf dunklem Grund. Bewusst nur auf diesen
   Dialog begrenzt, um die vorhandenen nicht zu veraendern. */
.kp-hilfe-modal .modal-content{color:var(--kp-ink,#17222a)}
.kp-hilfe__teil{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--kp-line-2,#c7d0d5)}
.kp-hilfe__teil:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.kp-hilfe__titel{margin:0 0 8px;font-size:.95rem;font-weight:600}
.kp-hilfe__zweck{margin:0 0 10px;font-size:.88rem;line-height:1.5}
.kp-hilfe__zwischen{margin:0 0 6px;font-size:.8rem;color:var(--kp-ink-muted,#687887)}
.kp-hilfe__leer{margin:0;font-size:.85rem;font-style:italic;color:var(--kp-ink-muted,#687887)}
.kp-hilfe__teil ol,.kp-hilfe__teil ul{margin:0 0 10px;padding-left:20px}
.kp-hilfe__teil li{margin-bottom:4px;font-size:.85rem;line-height:1.45}
.kp-hilfe__beispiel{margin:0;padding:8px 10px;border-left:3px solid var(--kp-line,#c8d2d9);background:var(--kp-surface-2,#eef1f3);font-size:.83rem;line-height:1.45}
.kp-hilfe__notiz{font-size:.85rem}
.kp-hilfe__notiz-leiste{display:flex;align-items:center;gap:10px;margin-top:8px}
.kp-hilfe__quittung{font-size:.8rem;color:var(--kp-ink-muted,#687887)}
.kp-hilfe__quittung--ok{color:#087f42}
.kp-hilfe__quittung--fehler{color:#b03b3b}
[data-kp-theme="dark"] .kp-hilfe__teil{border-bottom-color:#5b7186}
[data-kp-theme="dark"] .kp-hilfe__zwischen,[data-kp-theme="dark"] .kp-hilfe__leer,[data-kp-theme="dark"] .kp-hilfe__quittung{color:#b6c7d4}
[data-kp-theme="dark"] .kp-hilfe__beispiel{background:#17222c;border-left-color:#5b7186}
[data-kp-theme="dark"] .kp-hilfe__quittung--ok{color:#70e29a}
[data-kp-theme="dark"] .kp-hilfe__quittung--fehler{color:#ff9292}

/* Mitarbeiter & Faehigkeiten. Die Gruppenzeile trennt Entwicklung und
   Musterbau sichtbar voneinander - Abschnitt 8 des Auftrags verlangt den
   Musterbau als eigene, erkennbare Gruppe. */
.kp-ma__umschalter{display:flex;gap:6px;align-items:flex-start}
.kp-ma__formular{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:10px}
.kp-ma__feld{display:flex;flex-direction:column;gap:3px;margin:0}
.kp-ma__feld-titel{font-size:11px;font-weight:600;color:var(--kp-ink-muted,#687887)}
.kp-ma__feld input[type="text"],.kp-ma__feld select{min-width:190px}
.kp-ma__feld input[type="number"]{width:110px}
.kp-ma__feld input[type="checkbox"]{margin:4px 0 0}
.kp-ma__knopfzeile{display:flex;gap:8px}
.kp-ma__meldung{margin:0 0 12px;padding:8px 11px;border-radius:5px;font-size:.85rem}
.kp-ma__meldung--ok{background:rgba(12,163,12,.12);color:#087f42}
.kp-ma__meldung--fehler{background:rgba(208,59,59,.12);color:#b03b3b}
.kp-ma__gruppe td{padding-top:12px;font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;color:var(--kp-ink-muted,#687887);background:var(--kp-surface-2,#eef1f3)}
.kp-ma__inaktiv{opacity:.55}
.kp-ma__matrix th,.kp-ma__matrix td{text-align:center;vertical-align:middle}
.kp-ma__matrix tbody th{text-align:left;font-weight:600;white-space:nowrap}
.kp-ma__matrix-kopf{font-size:11px;font-weight:600;line-height:1.2;min-width:64px}
.kp-ma__matrix-zelle input{cursor:pointer}
[data-kp-theme="dark"] .kp-ma__feld-titel{color:#b6c7d4}
[data-kp-theme="dark"] .kp-ma__gruppe td{background:#17222c;color:#b6c7d4}
[data-kp-theme="dark"] .kp-ma__meldung--ok{background:rgba(12,163,12,.22);color:#70e29a}
[data-kp-theme="dark"] .kp-ma__meldung--fehler{background:rgba(208,59,59,.25);color:#ff9292}

/* Teamzuordnung. Die Warnung steht bewusst oben und nicht als Fussnote: dass
   ein Team die Qualifikation nicht ersetzt, ist der haeufigste Irrtum. */
.kp-team__warnung{margin-bottom:14px;padding:9px 12px;border-left:3px solid var(--kp-line,#c8d2d9);
background:var(--kp-surface-2,#eef1f3);border-radius:4px;font-size:.83rem;line-height:1.45}
.kp-team__tabelle td{vertical-align:middle}
.kp-team__marke{display:inline-flex;align-items:center;gap:4px;margin:2px 5px 2px 0;padding:3px 4px 3px 8px;
border-radius:10px;background:rgba(53,65,187,.12);color:#3541bb;font-size:11px;font-weight:600}
.kp-team__marke--haupt{background:rgba(12,163,12,.14);color:#087f42}
.kp-team__knopf{border:0;background:transparent;color:inherit;font:inherit;line-height:1;padding:1px 3px;cursor:pointer;border-radius:3px}
.kp-team__knopf:hover,.kp-team__knopf:focus{background:rgba(0,0,0,.1)}
.kp-team__auswahl{display:flex;gap:6px;align-items:center}
.kp-team__auswahl select{min-width:150px}
.kp-team__luecke{font-size:11px;font-style:italic;color:var(--kp-ink-muted,#687887)}
.kp-team__stand{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap}
.kp-team__stand--ok{color:#087f42;background:rgba(12,163,12,.14)}
.kp-team__stand--offen{color:#956000;background:rgba(250,178,25,.22)}
[data-kp-theme="dark"] .kp-team__warnung{background:#17222c;border-left-color:#5b7186}
[data-kp-theme="dark"] .kp-team__marke{background:rgba(3,84,228,.3);color:#8fb4ff}
[data-kp-theme="dark"] .kp-team__marke--haupt{background:rgba(12,163,12,.28);color:#70e29a}
[data-kp-theme="dark"] .kp-team__knopf:hover,[data-kp-theme="dark"] .kp-team__knopf:focus{background:rgba(255,255,255,.16)}
[data-kp-theme="dark"] .kp-team__luecke{color:#b6c7d4}
[data-kp-theme="dark"] .kp-team__stand--ok{color:#70e29a;background:rgba(12,163,12,.25)}
[data-kp-theme="dark"] .kp-team__stand--offen{color:#ffd36b;background:rgba(250,178,25,.25)}

/* Warengruppen & Planzeiten. 21 Warengruppen mal drei Taetigkeiten - die
   Uebersicht muss auf einen Blick zeigen, wo noch etwas fehlt. */
.kp-wg__leiste{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.kp-wg__leiste input[type="search"]{max-width:340px}
.kp-wg__tabelle td{vertical-align:middle}
.kp-wg__spalte{font-size:11px;min-width:96px}
.kp-wg__stand-zelle{text-align:center}
.kp-wg__block{margin:14px 0;padding:11px;border:1px solid var(--kp-line-2,#c7d0d5);border-radius:5px;background:var(--kp-surface,#fff)}
.kp-wg__block h4{margin:0 0 9px;font-size:.88rem;font-weight:600}
.kp-wg__skills{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:5px}
.kp-wg__skill{display:flex;align-items:center;gap:5px;margin:0;font-size:12px;white-space:nowrap}
[data-kp-theme="dark"] .kp-wg__block{background:#111a22;border-color:#5b7186}

/* Auftragsuebersicht: Filter, Status und Terminrisiko. */
.kp-auf__filter{margin-bottom:14px;border:1px solid var(--kp-line-2,#c7d0d5);border-radius:6px;padding:11px;background:var(--kp-surface-2,#eef1f3)}
.kp-auf__filter h3{margin:0 0 9px;font-size:.95rem}
.kp-auf__filterzeile{display:flex;flex-wrap:wrap;gap:10px}
.kp-auf__feld{display:flex;flex-direction:column;gap:3px;margin:0}
.kp-auf__feld select,.kp-auf__feld input{min-width:150px}
.kp-auf__status,.kp-auf__risiko{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap;cursor:help}
.kp-auf__status--eingeplant{color:#087f42;background:rgba(12,163,12,.14)}
.kp-auf__status--ungeplant{color:#3541bb;background:rgba(53,65,187,.14)}
.kp-auf__status--pausiert{color:var(--kp-ink-muted,#687887);background:rgba(120,140,155,.18)}
.kp-auf__status--klaerung{color:#956000;background:rgba(250,178,25,.22)}
.kp-auf__risiko--im-plan{color:#087f42;background:rgba(12,163,12,.14)}
.kp-auf__risiko--gefaehrdet{color:#956000;background:rgba(250,178,25,.22)}
.kp-auf__risiko--nicht-haltbar,.kp-auf__risiko--ueberschritten{color:#b21f2d;background:rgba(208,59,59,.18)}
.kp-auf__risiko--unbekannt{color:var(--kp-ink-muted,#687887);background:transparent;border:1px dashed var(--kp-line-2,#c7d0d5)}
.kp-auf__risiko--keins{color:var(--kp-ink-muted,#687887);background:transparent}
[data-kp-theme="dark"] .kp-auf__filter{background:#17222c;border-color:#5b7186}
[data-kp-theme="dark"] .kp-auf__status--pausiert,[data-kp-theme="dark"] .kp-auf__risiko--unbekannt,[data-kp-theme="dark"] .kp-auf__risiko--keins{color:#b6c7d4}
[data-kp-theme="dark"] .kp-auf__status--eingeplant,[data-kp-theme="dark"] .kp-auf__risiko--im-plan{color:#70e29a;background:rgba(12,163,12,.25)}
[data-kp-theme="dark"] .kp-auf__status--ungeplant{color:#8fb4ff;background:rgba(3,84,228,.3)}
[data-kp-theme="dark"] .kp-auf__status--klaerung,[data-kp-theme="dark"] .kp-auf__risiko--gefaehrdet{color:#ffd36b;background:rgba(250,178,25,.25)}
[data-kp-theme="dark"] .kp-auf__risiko--nicht-haltbar,[data-kp-theme="dark"] .kp-auf__risiko--ueberschritten{color:#ff9292;background:rgba(208,59,59,.3)}

/* Gantt. Wochenenden dezent, Rot bleibt kritischen Terminen vorbehalten. */
.kp-gantt__rahmen{overflow-x:auto;border:1px solid var(--kp-line-2,#c7d0d5);border-radius:5px;background:var(--kp-surface,#fff)}
.kp-gantt{--kp-gantt-name:220px;--kp-gantt-tag:26px;min-width:min-content;font-size:11px}
.kp-gantt__kw-zeile,.kp-gantt__tag-zeile,.kp-gantt__zeile{display:grid;align-items:stretch}
.kp-gantt__kw-zeile{position:sticky;top:0;z-index:2;background:var(--kp-surface-2,#eef1f3)}
.kp-gantt__ecke{padding:4px 8px;font-weight:600;background:var(--kp-surface-2,#eef1f3);border-right:1px solid var(--kp-line-2,#c7d0d5);position:sticky;left:0;z-index:3}
.kp-gantt__kw{padding:4px 6px;font-weight:600;text-align:center;border-left:2px solid var(--kp-line-2,#c7d0d5);white-space:nowrap;overflow:hidden}
.kp-gantt__tag-zeile{background:var(--kp-surface-2,#eef1f3);border-bottom:1px solid var(--kp-line-2,#c7d0d5)}
.kp-gantt__tag{padding:3px 0;text-align:center;color:var(--kp-ink-muted,#687887)}
.kp-gantt__tag--wochenende{background:rgba(120,140,155,.14)}
.kp-gantt__zeile{border-bottom:1px solid var(--kp-line-2,#c7d0d5);min-height:30px;position:relative}
.kp-gantt__name{padding:4px 8px;border-right:1px solid var(--kp-line-2,#c7d0d5);position:sticky;left:0;background:var(--kp-surface,#fff);z-index:1;overflow:hidden}
.kp-gantt__name strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-gantt__name small{display:block;font-size:10px;color:var(--kp-ink-muted,#687887);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-gantt__zelle{border-left:1px solid rgba(120,140,155,.12)}
.kp-gantt__zelle--wochenende{background:rgba(120,140,155,.1)}
.kp-gantt__balken{align-self:center;height:17px;border-radius:3px;font-size:10px;line-height:17px;padding:0 4px;overflow:hidden;white-space:nowrap;cursor:help}
.kp-gantt__meilenstein{align-self:center;justify-self:center;width:11px;height:11px;transform:rotate(45deg);background:var(--kp-ink-muted,#687887);cursor:help}
.kp-gantt__meilenstein--kritisch{background:#d03b3b}
[data-kp-theme="dark"] .kp-gantt__rahmen{background:#111a22;border-color:#5b7186}
[data-kp-theme="dark"] .kp-gantt__kw-zeile,[data-kp-theme="dark"] .kp-gantt__tag-zeile,[data-kp-theme="dark"] .kp-gantt__ecke{background:#17222c}
[data-kp-theme="dark"] .kp-gantt__name{background:#111a22}
[data-kp-theme="dark"] .kp-gantt__kw,[data-kp-theme="dark"] .kp-gantt__zeile,[data-kp-theme="dark"] .kp-gantt__ecke,[data-kp-theme="dark"] .kp-gantt__name{border-color:#5b7186}
[data-kp-theme="dark"] .kp-gantt__tag,[data-kp-theme="dark"] .kp-gantt__name small{color:#b6c7d4}
[data-kp-theme="dark"] .kp-gantt__meilenstein{background:#b6c7d4}
[data-kp-theme="dark"] .kp-gantt__meilenstein--kritisch{background:#ff9292}

/* Workflow-Vorlagen. Die Nummer links macht die Reihenfolge auf einen Blick
   erkennbar, ohne dass eine Zeichnung noetig waere. */
.kp-wf__ablauf{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.kp-wf__schritt{padding:9px 11px;border:1px solid var(--kp-line-2,#c7d0d5);border-radius:5px;background:var(--kp-surface,#fff)}
.kp-wf__schritt-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kp-wf__nummer{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
border-radius:50%;background:rgba(53,65,187,.14);color:#3541bb;font-size:11px;font-weight:700;flex:none}
.kp-wf__zeit{font-size:11px;color:var(--kp-ink-muted,#687887)}
.kp-wf__knoepfe{display:flex;gap:4px;margin-left:auto}
.kp-wf__text{margin:6px 0 4px;font-size:.83rem}
.kp-wf__merkmale{margin:0 0 7px;font-size:11px;color:var(--kp-ink-muted,#687887)}
[data-kp-theme="dark"] .kp-wf__schritt{background:#111a22;border-color:#5b7186}
[data-kp-theme="dark"] .kp-wf__nummer{background:rgba(3,84,228,.3);color:#8fb4ff}
[data-kp-theme="dark"] .kp-wf__zeit,[data-kp-theme="dark"] .kp-wf__merkmale{color:#b6c7d4}

/* Vorschau der automatischen Einplanung. */
.kp-vorschau__grund{margin:4px 0 0;padding-left:18px;font-size:11px;color:var(--kp-ink-muted,#687887)}
.kp-vorschau__grund li{margin-bottom:2px}
.kp-vorschau__kruecke{margin:6px 0 0;padding:6px 9px;border-left:3px solid rgba(250,178,25,.6);background:rgba(250,178,25,.12);font-size:11px;line-height:1.4}
[data-kp-theme="dark"] .kp-vorschau__grund{color:#b6c7d4}
[data-kp-theme="dark"] .kp-vorschau__kruecke{background:rgba(250,178,25,.18)}
.kp-auf__diese td{font-weight:700;background:rgba(53,65,187,.1)}
[data-kp-theme="dark"] .kp-auf__diese td{background:rgba(3,84,228,.25)}

/* --- Kopfzeile und Reiternavigation ------------------------------------
   Waagerechte Karteireiter statt eines Auswahlfeldes: Alle Bereiche sind auf
   einen Blick sichtbar. Der aktive Reiter waechst optisch mit der Flaeche
   darunter zusammen - deshalb unten KEIN Rahmen und ein Deckstreifen ueber
   der Trennlinie. Farbe bleibt dezent; die Unterscheidung traegt die Form. */
/* EINE Zeile fuer alles: Marke links, Reiter in der Mitte, rechts Hilfe,
   Hell/Dunkel und der angemeldete Benutzer. Der Bereichstitel stand vorher
   als eigene Zeile darunter und wiederholte nur den aktiven Reiter - eine
   ganze Bildschirmzeile fuer eine Doppelung. */
.kp-kopf{display:flex;align-items:stretch;gap:14px;padding:6px 2px 0;
border-bottom:1px solid var(--kp-line,#c8d2d9)}
.kp-brand{flex:0 0 auto;align-self:center}
.kp-kopf__aktionen{display:flex;align-items:center;gap:8px;flex:0 0 auto;align-self:center;padding-bottom:6px}

/* Die Reiterleiste scrollt waagerecht, wenn acht Reiter nicht nebeneinander
   passen. Damit das auffaellt, blendet der rechte Rand weich aus - ohne
   diesen Hinweis sieht eine abgeschnittene Leiste einfach nur zu Ende aus. */
.kp-reiter{position:relative;display:flex;gap:3px;align-items:flex-end;flex:1 1 auto;min-width:0;
overflow-x:auto;overflow-y:hidden;padding:0 2px;margin-bottom:-1px;
scrollbar-width:thin;-webkit-overflow-scrolling:touch;
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
.kp-reiter::-webkit-scrollbar{height:4px}
.kp-reiter::-webkit-scrollbar-thumb{background:var(--kp-line-2,#c7d0d5);border-radius:2px}
.kp-reiter__symbol{display:inline-flex;align-items:center;margin-right:6px;opacity:.75}
.kp-reiter__knopf--aktiv .kp-reiter__symbol{opacity:1}

/* Angemeldeter Benutzer. In der Vorfuehrung fest vorgegeben - der Zusatz
   "Vorfuehrung" unter dem Namen sagt das, damit niemand denkt, es haenge an
   einer echten Anmeldung. */
.kp-benutzer{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:20px;
background:var(--kp-surface-2,#eef1f3);cursor:default}
.kp-benutzer__kreis{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:50%;background:var(--kp-akzent,#0354e4);color:#fff;font-size:11px;font-weight:700;flex:none}
.kp-benutzer__text{display:flex;flex-direction:column;line-height:1.15}
.kp-benutzer__name{font-size:12px;font-weight:600;color:var(--kp-ink,#17222a);white-space:nowrap}
.kp-benutzer__rolle{font-size:10px;color:var(--kp-ink-muted,#687887);white-space:nowrap}
[data-kp-theme="dark"] .kp-benutzer{background:#17222c}
[data-kp-theme="dark"] .kp-benutzer__name{color:#f2f6f9}
[data-kp-theme="dark"] .kp-benutzer__rolle{color:#b6c7d4}
[data-kp-theme="dark"] .kp-kopf{border-bottom-color:#5b7186}
.kp-reiter__knopf{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;padding:9px 14px;
border:1px solid transparent;border-bottom:0;border-radius:7px 7px 0 0;
background:transparent;color:var(--kp-ink-muted,#687887);
font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .12s,color .12s}
.kp-reiter__knopf:hover{background:var(--kp-surface-2,#eef1f3);color:var(--kp-ink,#17222a)}
.kp-reiter__knopf:focus-visible{outline:2px solid var(--kp-akzent,#0354e4);outline-offset:-2px}
.kp-reiter__knopf--aktiv{background:var(--kp-surface,#fff);color:var(--kp-ink,#17222a);font-weight:700;
border-color:var(--kp-line,#c8d2d9);box-shadow:0 -2px 0 0 var(--kp-akzent,#0354e4) inset}
/* Deckt die Trennlinie unter dem aktiven Reiter ab, damit Reiter und Inhalt
   als eine Flaeche wirken. */
.kp-reiter__knopf--aktiv::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--kp-surface,#fff)}

[data-kp-theme="dark"] .kp-kopf__titel{color:#f2f6f9}
[data-kp-theme="dark"] .kp-reiter{border-bottom-color:#5b7186}
[data-kp-theme="dark"] .kp-reiter__knopf{color:#b6c7d4}
[data-kp-theme="dark"] .kp-reiter__knopf:hover{background:#17222c;color:#f2f6f9}
[data-kp-theme="dark"] .kp-reiter__knopf--aktiv{background:#111a22;color:#f2f6f9;border-color:#5b7186;box-shadow:0 -2px 0 0 #4b8cff inset}
[data-kp-theme="dark"] .kp-reiter__knopf--aktiv::after{background:#111a22}

/* Auf schmalen Schirmen bleiben die Reiter waagerecht scrollbar statt
   abgeschnitten zu werden; die Werkzeuge darunter brechen um. */
@media (max-width:1100px){
    .kp-reiter__knopf{padding:8px 10px;font-size:12px}
    .kp-benutzer__text{display:none}
    .kp-benutzer{padding:4px}
}
@media (max-width:820px){
    .kp-kopf{gap:8px}
    .kp-brand{max-width:120px;overflow:hidden}
    .kp-toolbar{flex-wrap:wrap;row-gap:8px}
}

/* Personenbild: Foto oder Initialen. Kein gezeichnetes Platzhaltergesicht -
   ein Bild, das niemanden darstellt, ist irrefuehrender als zwei Buchstaben. */
.kp-ma__bild{display:inline-flex;align-items:center;justify-content:center;flex:none;
width:30px;height:30px;border-radius:50%;overflow:hidden;background:var(--kp-surface-2,#eef1f3)}
.kp-ma__bild img{width:100%;height:100%;object-fit:cover;display:block}
.kp-ma__bild--initialen{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--kp-ink-muted,#687887)}
.kp-ma__person{display:flex;align-items:center;gap:8px}
.kp-ma__person small{display:block}
.kp-ma__fotozeile{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:4px 0 2px}
.kp-ma__fotozeile input[type="file"]{max-width:260px}
.kp-ma__chips{display:flex;flex-wrap:wrap;gap:3px;align-items:center;max-width:340px}
.kp-ma__mehr{border:0;background:transparent;padding:2px 4px;font-size:11px;font-weight:600;
color:var(--kp-ink-muted,#687887);text-decoration:underline;cursor:pointer}
.kp-skill--verfahren{color:#3541bb;background:rgba(53,65,187,.12)}
.kp-skill--produkt{color:#087f72;background:rgba(3,151,177,.14)}
.kp-ma__matrix-gruppe{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;color:var(--kp-ink-muted,#687887);background:var(--kp-surface-2,#eef1f3);
border-bottom:1px solid var(--kp-line-2,#c7d0d5)}
.kp-ma__matrix-kopf--trenner{border-left:2px solid var(--kp-line,#c8d2d9)!important}
[data-kp-theme="dark"] .kp-ma__bild{background:#17222c}
[data-kp-theme="dark"] .kp-ma__bild--initialen,[data-kp-theme="dark"] .kp-ma__mehr{color:#b6c7d4}
[data-kp-theme="dark"] .kp-skill--verfahren{color:#8fb4ff;background:rgba(3,84,228,.28)}
[data-kp-theme="dark"] .kp-skill--produkt{color:#38c6df;background:rgba(2,142,178,.28)}
[data-kp-theme="dark"] .kp-ma__matrix-gruppe{background:#17222c;color:#b6c7d4;border-bottom-color:#5b7186}
[data-kp-theme="dark"] .kp-ma__matrix-kopf--trenner{border-left-color:#7d95aa!important}

/* Kernangaben unter dem Personennamen. Vor allem das CAD-System: Beim Planen
   von Kapazitaet entscheidet genau das darueber, ob eine Position ueberhaupt
   bei dieser Person liegen kann. */
.kp-person__block{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.kp-person__koennen{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.kp-person__koennen-teil{font-size:9px;font-weight:600;line-height:1.4;padding:0 4px;border-radius:3px;
background:rgba(120,140,155,.16);color:var(--kp-ink-muted,#687887);white-space:nowrap;
max-width:96px;overflow:hidden;text-overflow:ellipsis}
.kp-person--gedimmt{opacity:.32}
[data-kp-theme="dark"] .kp-person__koennen-teil{background:rgba(150,176,200,.2);color:#b6c7d4}

/* Schnellfilter nach CAD-System, direkt neben der Suche. Nur die beiden
   Systeme, von denen der Grossteil der Lieferzeit abhaengt - dreissig
   Schalter waeren kein Filter mehr, sondern eine zweite Matrix. */
.kp-skillfilter{display:flex;align-items:center;gap:5px;margin-left:8px}
.kp-skillfilter__titel{font-size:11px;font-weight:600;color:var(--kp-ink-muted,#687887)}
.kp-skillfilter__knopf{padding:4px 10px;border:1px solid var(--kp-line-2,#c7d0d5);border-radius:13px;
background:var(--kp-surface,#fff);color:var(--kp-ink-muted,#687887);font-size:11px;font-weight:600;
white-space:nowrap;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.kp-skillfilter__knopf:hover{color:var(--kp-ink,#17222a);border-color:var(--kp-line,#c8d2d9)}
.kp-skillfilter__knopf--aktiv{background:var(--kp-akzent,#0354e4);border-color:var(--kp-akzent,#0354e4);color:#fff}
.kp-skillfilter__zaehler{font-size:11px;color:var(--kp-ink-muted,#687887);white-space:nowrap}
[data-kp-theme="dark"] .kp-skillfilter__titel,[data-kp-theme="dark"] .kp-skillfilter__zaehler{color:#b6c7d4}
[data-kp-theme="dark"] .kp-skillfilter__knopf{background:#111a22;border-color:#5b7186;color:#b6c7d4}
[data-kp-theme="dark"] .kp-skillfilter__knopf:hover{color:#f2f6f9}
[data-kp-theme="dark"] .kp-skillfilter__knopf--aktiv{background:#0354e4;border-color:#0354e4;color:#fff}

/* --- Feiertagsfahne auf der Plantafel ----------------------------------
   Zwei Fehler, beide vorher schon vorhanden:

   1. Die Grundregel in kappaplanungFFB.css setzt die Schriftfarbe fest auf
      ein dunkles Braun (#7a5300) und kennt keinen Dunkelmodus. Auf dunklem
      Grund war "Betriebsruhe" damit praktisch unsichtbar.

   2. Highcharts begrenzt die Beschriftung auf die Breite des Bandes. Ein
      Feiertag ist eine Tagesspalte breit - aus "Betriebsruhe" wurde je nach
      Fensterbreite "Betriebs..." oder nur noch "Be".

   Die Fahne darf ueber ihre Spalte hinausragen: Sie liegt ueber leerer
   Flaeche und verdeckt nichts. */
.kp-page .highcharts-plot-band-label{overflow:visible!important}
.kp-page .hc-holiday-band-label{
    display:inline-block;white-space:nowrap;overflow:visible;text-overflow:clip;
    padding:1px 7px;border-radius:9px;font-size:10px;font-weight:600;
    letter-spacing:.02em;transform:translateX(-50%);margin-left:50%}
[data-kp-theme="dark"] .kp-page .hc-holiday-band-label{
    background:rgba(250,178,25,.26);color:#ffd36b;
    box-shadow:0 0 0 1px rgba(250,178,25,.5) inset}

/* Musterbau als eigene Gruppe unter der Entwicklung. Die erste Zeile der
   Gruppe traegt eine kraeftige Trennlinie und die Ueberschrift - so ist ohne
   Nachzaehlen erkennbar, wo die eine Gruppe endet und die andere beginnt. */
/* Die Trennlinie zwischen Entwicklung und Musterbau wird als Linie IM
   Diagramm gezeichnet (gruppenTrennerZeichnen). Hier steht bewusst nichts,
   was eine einzelne Zeilenbeschriftung hoeher machen wuerde - genau das hat
   vorher die Nachbarzeile ueberlagert. */
/* Bei engen Zeilen entfaellt die zweite Textzeile - der Name hat Vorrang.
   Die Angaben stehen weiterhin im Reiter "Mitarbeiter & Faehigkeiten". */
.kp-zeilen-eng .kp-person__koennen{flex-wrap:nowrap;overflow:hidden;margin-top:1px}
/* Bei engen Zeilen steht die wichtigste Angabe neben dem Namen statt
   darunter - lieber knapp als gar nicht. */
.kp-person__koennen-teil--neben{margin-left:5px;font-size:8px;padding:0 3px;vertical-align:1px}
/* "Nur ich" ist kein Koennen-Filter, sondern eine Sicht. Die schwache
   Trennlinie sagt das, ohne einen zweiten Titel zu brauchen. */
.kp-skillfilter__knopf--ich{margin-left:6px;border-left-width:2px}
.kp-skillfilter__knopf--ich::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:currentColor;margin-right:4px;vertical-align:1px;opacity:.6}

/* --- Tafelhoehe und Scrollbereich ---------------------------------------
   Die Klasse vh-80 stammt aus der urspruenglichen Vorlage und war nirgends
   definiert - der Behaelter blieb deshalb bei den 400 Pixeln, die Highcharts
   von sich aus nimmt. Das war der eigentliche Grund fuer die gequetschten
   Zeilen. Jetzt bekommt die Tafel, was unter den Kennzahlen uebrig ist. */
.kp-page #container.vh-80{height:calc(100vh - 340px);min-height:320px}
.kp-page #container{position:relative}

/* Der Rollbalken des Zeilenbereichs - schmal und zurueckhaltend, er soll
   die Tafel nicht dominieren. */
.kp-page .highcharts-scrolling{scrollbar-width:thin}
.kp-page .highcharts-scrolling::-webkit-scrollbar{width:9px}
.kp-page .highcharts-scrolling::-webkit-scrollbar-thumb{
  background:rgba(120,140,160,.45);border-radius:5px}
.kp-page .highcharts-scrolling::-webkit-scrollbar-thumb:hover{
  background:rgba(120,140,160,.7)}

/* --- Spaltenkoepfe ueber der Namensspalte --------------------------------
   Sitzt genau ueber den Namen, auf Hoehe der Datumszeile. Breite und Hoehe
   setzt spaltenkopfZeichnen, weil nur Highcharts weiss, wo die Spalte
   endet. */
.kp-spaltenkopf{
  position:absolute;left:0;top:0;z-index:6;
  display:flex;align-items:flex-end;gap:4px;
  padding:0 8px 5px 14px;pointer-events:none}
.kp-spaltenkopf__knopf{
  pointer-events:auto;background:none;border:0;padding:2px 5px;border-radius:5px;
  font-weight:600;font-size:10px;line-height:1.2;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--kp-text-schwach,#687887);cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px}
.kp-spaltenkopf__knopf--name{flex:1;justify-content:flex-start}
.kp-spaltenkopf__knopf--auslastung{justify-content:flex-end}
.kp-spaltenkopf__knopf:hover{background:rgba(125,145,165,.16);color:var(--kp-text,#2c3a45)}
.kp-spaltenkopf__knopf--aktiv{color:var(--kp-akzent,#1c5fb8)}
.kp-spaltenkopf__pfeil{font-size:8px;line-height:1}
[data-kp-theme="dark"] .kp-spaltenkopf__knopf{color:#8fa3b3}
[data-kp-theme="dark"] .kp-spaltenkopf__knopf:hover{background:rgba(150,175,200,.18);color:#e3ecf3}
[data-kp-theme="dark"] .kp-spaltenkopf__knopf--aktiv{color:#7fb4ff}

/* Personenbild mit Initialen darunter: faellt das Bild aus, nimmt es sich
   selbst weg (onerror) und die Initialen stehen da - kein kaputtes
   Bildsymbol in der Zeile. */
.kp-avatar--bild{position:relative;overflow:hidden}
.kp-avatar--bild .kp-avatar__kuerzel{position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center}
.kp-avatar--bild img{position:relative;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block}

/* --- Lieferzeit nach Faehigkeit -----------------------------------------
   Drei Zahlen in einer Kachel statt drei Kacheln: Die Kennzahlenzeile ist
   ohnehin voll, und die drei Werte gehoeren zusammen - man liest sie im
   Vergleich, nicht einzeln. */
.kp-kpi--breit{grid-column:span 2}
/* Drei Spalten, Zahl oben, Kuerzel darunter. Nebeneinander in einer Zeile
   brauchten die drei Werte 174 Pixel und bekamen 74 - der dritte fiel
   heraus. Uebereinander passen sie auch in eine einspaltige Kachel. */
/* auto statt 1fr: Gleich breite Spalten gaben "Musterbau" 51 Pixel, es
   braucht 53 - zwei Pixel, und schon stand dort "MUSTERB…". Jede Spalte
   nimmt sich jetzt, was ihre Beschriftung braucht. */
/* Vier Werte, dazwischen Trenner: ohne sie sahen die Zahlen
   aufeinandergestapelt aus. Die Spaltenzahl waechst deshalb auf sieben
   (vier Werte, drei Trenner). */
.kp-lz-reihe{display:grid;grid-template-columns:repeat(7,auto);
  justify-content:space-between;align-items:stretch;
  gap:.3rem;margin:.1rem 0 .05rem;min-width:0}
.kp-lz__trenner{align-self:center;width:1px;height:20px;
  background:var(--kp-line,#dbe3e9)}
.kp-lz__trenner--stark{width:2px;height:24px;
  background:var(--kp-line-stark,#a9b8c4);border-radius:1px}
[data-kp-theme="dark"] .kp-lz__trenner{background:#33445a}
[data-kp-theme="dark"] .kp-lz__trenner--stark{background:#5a7186}
.kp-lz{display:flex;flex-direction:column;align-items:center;gap:0;cursor:help;min-width:0}
.kp-lz__wert{font-size:1.05rem;font-weight:700;line-height:1.1}
.kp-lz__wert--good{color:var(--kp-gut,#1a9a4b)}
.kp-lz__wert--warn{color:var(--kp-warn,#c98a00)}
.kp-lz__wert--alert{color:var(--kp-alarm,#d03b3b)}
.kp-lz__name{font-size:.55rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--kp-text-schwach,#687887);font-weight:600;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
[data-kp-theme="dark"] .kp-lz__wert--good{color:#3fcf7a}
[data-kp-theme="dark"] .kp-lz__wert--warn{color:#ffc04d}
[data-kp-theme="dark"] .kp-lz__wert--alert{color:#ff6b6b}
[data-kp-theme="dark"] .kp-lz__name{color:#8fa3b3}
/* Unter 820 Pixeln ist fuer eine doppelt breite Kachel kein Platz mehr -
   dann stehen die drei Zahlen eben enger. Der fruehere Wert 1100 war zu
   frueh: Bei 1024 Pixeln Fensterbreite bekam die Kachel nur 133 Pixel, und
   aus "CATIA" wurde "CA…". Gemessen am Fenster, nicht geschaetzt. */
@media (max-width:820px){.kp-kpi--breit{grid-column:span 1}}

/* Anklickbare Zeilen der Auftragsuebersicht. Der Zeiger und die Hervorhebung
   sagen vorher, dass ein Klick etwas tut - sonst probiert man es nicht. */
.kp-auftragszeile{cursor:pointer}
.kp-auftragszeile:hover>td{background:rgba(125,145,165,.12)}
.kp-auftragszeile:focus-visible{outline:2px solid var(--kp-akzent,#1c5fb8);outline-offset:-2px}
[data-kp-theme="dark"] .kp-auftragszeile:hover>td{background:rgba(150,175,200,.14)}

/* --- Betriebszeiten je Wochentag ----------------------------------------
   Sieben schmale Felder nebeneinander, damit das Wochenmuster auf einen
   Blick erkennbar ist. */
.kp-ma__zeiten{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .3rem}
.kp-ma__zeit{display:flex;flex-direction:column;gap:.15rem;width:66px}
.kp-ma__zeit-tag{font-size:.68rem;font-weight:600;letter-spacing:.03em;
  color:var(--kp-text-schwach,#687887);text-transform:uppercase}
.kp-ma__zeit input{text-align:right}
[data-kp-theme="dark"] .kp-ma__zeit-tag{color:#8fa3b3}

/* --- Fraesfreigabe und Uebergabe ----------------------------------------
   Die Schaetzung wird als Rechnung gezeigt, nicht als Ergebnis: Jeder Posten
   traegt sichtbar, ob er aus gepflegten Daten stammt oder ein Ersatzwert
   ist. */
.kp-fraes-modal .modal-content{color:var(--kp-text,#2c3a45)}
.kp-fraes__block{margin-bottom:1.1rem;padding-bottom:.9rem;
  border-bottom:1px solid var(--kp-line,#dbe3e9)}
.kp-fraes__block:last-child{border-bottom:0;margin-bottom:0}
.kp-fraes__ueberschrift{font-size:.82rem;font-weight:700;letter-spacing:.02em;
  margin:0 0 .45rem;text-transform:uppercase;color:var(--kp-text-schwach,#687887)}
.kp-fraes__kopf .kp-fraes__ueberschrift{text-transform:none;font-size:1rem;
  color:var(--kp-text,#2c3a45)}
.kp-fraes__feld{display:flex;flex-direction:column;gap:.12rem;margin-bottom:.4rem}
.kp-fraes__feld-titel{font-size:.65rem;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887)}
.kp-fraes__feld-wert{font-size:.85rem}
.kp-fraes__formular{display:flex;gap:.7rem;flex-wrap:wrap}
.kp-fraes__formular .kp-fraes__feld{min-width:170px;flex:1}
.kp-fraes__summe{display:flex;align-items:baseline;gap:.3rem;margin-bottom:.5rem}
.kp-fraes__summe-wert{font-size:1.7rem;font-weight:700;line-height:1}
.kp-fraes__summe-einheit{font-size:.75rem;color:var(--kp-text-schwach,#687887)}
.kp-fraes__rechnung{font-size:.78rem;margin-bottom:.35rem}
.kp-fraes__erklaerung{color:var(--kp-text-schwach,#687887)}
.kp-fraes__marke{display:inline-block;padding:.05rem .35rem;border-radius:3px;
  font-size:.66rem;font-weight:700;letter-spacing:.02em}
.kp-fraes__marke--ersatz{background:rgba(224,122,0,.18);color:#9c5500}
.kp-fraes__marke--gepflegt{background:rgba(26,154,75,.16);color:#137a3a}
.kp-fraes__hinweis{font-size:.76rem;margin:.2rem 0 0}
.kp-fraes__hinweis--warn{color:#9c5500;font-weight:600}
.kp-fraes__freigegeben{background:rgba(26,154,75,.1);border:1px solid rgba(26,154,75,.3);
  border-radius:6px;padding:.45rem .6rem;margin-bottom:.6rem;font-size:.85rem}
.kp-fraes__demo{display:block;margin-top:.2rem;color:var(--kp-text-schwach,#687887)}
.kp-fraes__empfaenger{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  margin-bottom:.5rem}
.kp-fraes__person{background:var(--kp-flaeche-2,#eef2f5);border-radius:10px;
  padding:.1rem .5rem;font-size:.76rem}
.kp-fraes__person--ohne{background:rgba(224,122,0,.15)}
.kp-fraes__person small{opacity:.75}
.kp-fraes__text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;line-height:1.45;white-space:pre}
.kp-fraes__knopfzeile{display:flex;gap:.4rem;margin-top:.5rem;flex-wrap:wrap}
[data-kp-theme="dark"] .kp-fraes-modal .modal-content{color:#e3ecf3}
[data-kp-theme="dark"] .kp-fraes__kopf .kp-fraes__ueberschrift{color:#e3ecf3}
[data-kp-theme="dark"] .kp-fraes__marke--ersatz{background:rgba(255,157,41,.22);color:#ffc04d}
[data-kp-theme="dark"] .kp-fraes__marke--gepflegt{background:rgba(22,180,90,.2);color:#3fcf7a}
[data-kp-theme="dark"] .kp-fraes__hinweis--warn{color:#ffc04d}
[data-kp-theme="dark"] .kp-fraes__person{background:rgba(150,175,200,.16)}
.kp-auftrag__knoepfe{white-space:nowrap}
.kp-auftrag__knoepfe .btn+.btn{margin-left:.3rem}

/* --- Prozesskette -------------------------------------------------------
   Von Hand gezeichnetes SVG: Es sind Rechtecke und Linien, dafuer lohnt
   keine zusaetzliche Bibliothek. Die Farben kommen aus denselben Variablen
   wie der Rest, damit die Kette im Dunkelmodus mitwandert. */
.kp-wf__kette-huelle{overflow-x:auto;padding:.3rem 0 .5rem;margin-bottom:.3rem}
.kp-wf__kette{display:block;max-width:none}
.kp-wf__kasten-flaeche{fill:var(--kp-flaeche-2,#f4f7f9);
  stroke:var(--kp-line,#dbe3e9);stroke-width:1}
.kp-wf__kasten-flaeche--maschine{fill:rgba(3,151,177,.10);stroke:rgba(3,151,177,.45)}
.kp-wf__kasten:hover .kp-wf__kasten-flaeche{stroke:var(--kp-akzent,#1c5fb8);stroke-width:1.5}
.kp-wf__kasten-nummer{font-size:10px;font-weight:700;fill:var(--kp-text-schwach,#687887)}
.kp-wf__kasten-name{font-size:11.5px;font-weight:700;fill:var(--kp-text,#2c3a45)}
.kp-wf__kasten-io{font-size:9.5px;fill:var(--kp-text-schwach,#687887)}
.kp-wf__kasten-io--aus{fill:#1a7a4b}
.kp-wf__kasten-zeit{font-size:9.5px;font-weight:700;fill:var(--kp-text-schwach,#687887)}
.kp-wf__linie{fill:none;stroke:var(--kp-line-stark,#a9b8c4);stroke-width:1.4}
.kp-wf__pfeilspitze{fill:var(--kp-line-stark,#a9b8c4)}
.kp-wf__linientext{font-size:8.5px;fill:var(--kp-text-schwach,#687887)}
[data-kp-theme="dark"] .kp-wf__kasten-flaeche{fill:#1a2734;stroke:#33445a}
[data-kp-theme="dark"] .kp-wf__kasten-flaeche--maschine{fill:rgba(44,196,224,.12);stroke:rgba(44,196,224,.45)}
[data-kp-theme="dark"] .kp-wf__kasten-name{fill:#e3ecf3}
[data-kp-theme="dark"] .kp-wf__kasten-nummer,
[data-kp-theme="dark"] .kp-wf__kasten-io,
[data-kp-theme="dark"] .kp-wf__kasten-zeit,
[data-kp-theme="dark"] .kp-wf__linientext{fill:#8fa3b3}
[data-kp-theme="dark"] .kp-wf__kasten-io--aus{fill:#3fcf7a}
[data-kp-theme="dark"] .kp-wf__linie{stroke:#5a7186}
[data-kp-theme="dark"] .kp-wf__pfeilspitze{fill:#5a7186}

/* Input und Output in der Schrittliste */
.kp-wf__fluss{display:flex;gap:.45rem;flex-wrap:wrap;margin:.25rem 0}
.kp-wf__io{display:inline-flex;align-items:baseline;gap:.28rem;font-size:.76rem;
  background:var(--kp-flaeche-2,#eef2f5);border-radius:10px;padding:.08rem .5rem}
.kp-wf__io-titel{font-size:.62rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887)}
.kp-wf__io--aus{background:rgba(26,154,75,.12)}
[data-kp-theme="dark"] .kp-wf__io{background:rgba(150,175,200,.14)}
[data-kp-theme="dark"] .kp-wf__io--aus{background:rgba(22,180,90,.16)}
[data-kp-theme="dark"] .kp-wf__io-titel{color:#8fa3b3}

/* Ein Feld, das sich von allein fuellt, blinkt kurz auf - sonst merkt man
   die Uebernahme nicht. */
.kp-feld--uebernommen{background:rgba(26,154,75,.16);transition:background .5s}
[data-kp-theme="dark"] .kp-feld--uebernommen{background:rgba(22,180,90,.22)}

/* --- Auftragsuebersicht: Spalten in ihrer natuerlichen Breite -----------
   Bootstrap setzt der Tabelle width:100% - damit werden Spalten wie
   "Design Freeze" kuenstlich in die Breite gezogen, obwohl nichts drinsteht,
   und bei vielen Spalten umgekehrt gestaucht. Mit max-content nimmt jede
   Spalte genau die Breite ihres Inhalts; was nicht hinpasst, wird
   geschoben. */
.kp-detailansicht__tabelle{width:max-content;min-width:100%}
.kp-detailansicht__tabelle th,
.kp-detailansicht__tabelle td{white-space:nowrap}
/* Der Positionstext darf umbrechen - er ist die einzige Spalte, die lang
   werden kann, und sonst wandert die halbe Tabelle nach rechts. */
.kp-detailansicht__tabelle .kp-auf__lang{white-space:normal;max-width:24ch}

.kp-auf__rollflaeche{overflow-x:auto;scrollbar-width:thin}

/* Zweite Schiebeleiste ueber der Tabelle: Bei vielen Spalten liegt die
   untere ausserhalb des Bildes. */
.kp-schiebeleiste{overflow-x:auto;overflow-y:hidden;height:12px;
  scrollbar-width:thin;margin-bottom:2px}
.kp-schiebeleiste__innen{height:1px}

/* Spaltenauswahl */
.kp-spaltenwahl{position:relative;display:inline-block;margin-bottom:.45rem}
.kp-spaltenwahl__klappe{position:absolute;z-index:20;top:calc(100% + 4px);left:0;
  min-width:230px;max-height:340px;overflow-y:auto;
  background:var(--kp-surface,#fff);border:1px solid var(--kp-line,#dbe3e9);
  border-radius:6px;box-shadow:0 6px 20px rgba(20,35,50,.16);padding:.4rem}
.kp-spaltenwahl__eintrag{display:flex;align-items:center;gap:.45rem;
  padding:.2rem .35rem;border-radius:4px;cursor:pointer;font-size:.82rem}
.kp-spaltenwahl__eintrag:hover{background:rgba(125,145,165,.14)}
.kp-spaltenwahl__reset{padding:.2rem .35rem;font-size:.76rem}
[data-kp-theme="dark"] .kp-spaltenwahl__klappe{background:#16202b;border-color:#33445a}
[data-kp-theme="dark"] .kp-spaltenwahl__eintrag:hover{background:rgba(150,175,200,.16)}

/* --- Kennnummern in den Planungsdialogen --------------------------------
   Auftrag, Artikel und Projekt sind die Bezugspunkte, ueber die im
   Unternehmen gesprochen wird - sie gehoeren an den Anfang des Dialogs und
   nicht hinter einen Klick. */
.kp-kennzahlen{display:flex;flex-wrap:wrap;gap:.15rem .9rem;
  padding:.45rem .6rem;margin:0 0 .7rem;border-radius:6px;
  background:var(--kp-flaeche-2,#f2f5f8);border:1px solid var(--kp-line,#dbe3e9)}
.kp-kennzahlen__feld{display:flex;flex-direction:column;gap:.05rem;min-width:0}
.kp-kennzahlen__titel{font-size:.6rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887)}
.kp-kennzahlen__wert{font-size:.84rem;font-weight:600;white-space:nowrap}
.kp-kennzahlen__wert--leer{font-weight:400;opacity:.55}
[data-kp-theme="dark"] .kp-kennzahlen{background:#16202b;border-color:#33445a}
[data-kp-theme="dark"] .kp-kennzahlen__titel{color:#8fa3b3}

/* --- Terminvorschlag beim Anlegen --------------------------------------- */
.kp-vorschlag{margin-bottom:.8rem}
.kp-vorschlag__leer{font-size:.8rem;color:var(--kp-text-schwach,#687887);margin:0}
.kp-vorschlag__kette{display:flex;gap:.4rem;flex-wrap:wrap;margin:.35rem 0}
.kp-vorschlag__karte{flex:1 1 140px;min-width:130px;padding:.4rem .55rem;
  border:1px solid var(--kp-line,#dbe3e9);border-radius:6px;
  display:flex;flex-direction:column;gap:.1rem;background:var(--kp-surface,#fff)}
.kp-vorschlag__karte-titel{font-size:.6rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887)}
.kp-vorschlag__karte-datum{font-size:1rem;font-weight:700;line-height:1.15}
.kp-vorschlag__karte-person{font-size:.76rem;font-weight:600}
.kp-vorschlag__karte-text{font-size:.68rem;color:var(--kp-text-schwach,#687887)}
.kp-vorschlag__hinweis{font-size:.74rem;margin:.2rem 0 0}
.kp-vorschlag__hinweis--warn{color:#9c5500;font-weight:600}
.kp-vorschlag__hinweis--info{color:var(--kp-text-schwach,#687887)}
.kp-vorschlag__knopf{margin-top:.45rem}
[data-kp-theme="dark"] .kp-vorschlag__karte{background:#16202b;border-color:#33445a}
[data-kp-theme="dark"] .kp-vorschlag__karte-titel,
[data-kp-theme="dark"] .kp-vorschlag__karte-text,
[data-kp-theme="dark"] .kp-vorschlag__hinweis--info{color:#8fa3b3}
[data-kp-theme="dark"] .kp-vorschlag__hinweis--warn{color:#ffc04d}

/* --- Erklaerung der automatischen Einplanung ---------------------------- */
.kp-regel-modal .modal-content{color:var(--kp-text,#2c3a45)}
.kp-regel__vorwort{font-size:.88rem;margin-bottom:.9rem}
.kp-regel__liste{list-style:none;padding:0;margin:0 0 1.2rem}
.kp-regel{padding:.65rem 0;border-top:1px solid var(--kp-line,#dbe3e9)}
.kp-regel:first-child{border-top:0;padding-top:0}
.kp-regel__kopf{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.25rem}
.kp-regel__nummer{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--kp-akzent,#1c5fb8);color:#fff;font-size:.72rem;font-weight:700}
.kp-regel__titel{font-size:.95rem;font-weight:700}
.kp-regel__text{font-size:.84rem;margin:0 0 .25rem;padding-left:30px}
.kp-regel__zahl{font-size:.76rem;margin:0 0 .2rem;padding-left:30px;
  color:var(--kp-akzent,#1c5fb8);font-weight:600}
.kp-regel__scheitert{font-size:.78rem;margin:0;padding:.3rem .5rem .3rem 30px;
  border-left:3px solid rgba(224,122,0,.5);background:rgba(224,122,0,.07);
  border-radius:0 4px 4px 0}
.kp-regel__block{border-top:1px solid var(--kp-line,#dbe3e9);padding-top:.8rem}
.kp-regel__ueberschrift{font-size:.95rem;font-weight:700;margin:0 0 .4rem}
.kp-regel__kette{font-size:.84rem;margin:.3rem 0 .5rem;padding-left:1.2rem}
.kp-regel__kette li{margin-bottom:.15rem}
.kp-regel__hinweis{font-size:.76rem;color:var(--kp-text-schwach,#687887);margin:.4rem 0 0}
[data-kp-theme="dark"] .kp-regel-modal .modal-content{color:#e3ecf3}
[data-kp-theme="dark"] .kp-regel{border-color:#33445a}
[data-kp-theme="dark"] .kp-regel__block{border-color:#33445a}
[data-kp-theme="dark"] .kp-regel__nummer{background:#2f6fd0}
[data-kp-theme="dark"] .kp-regel__zahl{color:#7fb4ff}
[data-kp-theme="dark"] .kp-regel__scheitert{background:rgba(255,157,41,.1);
  border-left-color:rgba(255,157,41,.5)}
[data-kp-theme="dark"] .kp-regel__hinweis{color:#8fa3b3}

/* Kopfzeile der Gruppenverwaltung: Ueberschrift links, Knopf rechts. */
.kp-ma__gruppenkopf{display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;flex-wrap:wrap;margin-bottom:.35rem}
.kp-ma__gruppenkopf h3{margin:0}

/* Warengruppe nicht ueber den Artikelstamm bestimmt - kleines Warnzeichen. */
.kp-auf__herkunft{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:4px;border-radius:50%;cursor:help;
  background:rgba(224,122,0,.22);color:#9c5500;font-size:.6rem;font-weight:700}
[data-kp-theme="dark"] .kp-auf__herkunft{background:rgba(255,157,41,.24);color:#ffc04d}

/* --- Der Vorgang im Bearbeiten-Dialog -----------------------------------
   Alle Positionen desselben Auftrags mit derselben Artikelnummer. Sie
   haengen terminlich voneinander ab - wer eine anfasst, muss die anderen
   sehen. Regel: VORGANGSKETTE.md */
.kp-vorgang{margin:0 0 1rem;padding:.6rem;border:1px solid var(--kp-line,#dbe3e9);
  border-radius:6px;background:var(--kp-flaeche-2,#f7f9fb)}
.kp-vorgang__ueberschrift{display:flex;align-items:baseline;gap:.5rem;
  justify-content:space-between;flex-wrap:wrap}
.kp-vorgang__bezug{font-size:.74rem;color:var(--kp-text-schwach,#687887)}
.kp-vorgang__erklaerung{font-size:.74rem;color:var(--kp-text-schwach,#687887);
  margin:.15rem 0 .5rem}
.kp-vorgang__liste{display:flex;flex-direction:column;gap:.3rem}

.kp-vorgang__schritt{display:grid;
  grid-template-columns:minmax(120px,1.3fr) auto minmax(150px,1fr);
  align-items:center;gap:.4rem;padding:.35rem .5rem;border-radius:5px;
  background:var(--kp-surface,#fff);border:1px solid transparent}
.kp-vorgang__schritt--hier{border-color:var(--kp-akzent,#1c5fb8);
  box-shadow:0 0 0 1px var(--kp-akzent,#1c5fb8) inset}
.kp-vorgang__schritt--fehlt{opacity:.55}
.kp-vorgang__kopf{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;min-width:0}
.kp-vorgang__name{font-size:.84rem;font-weight:600}
.kp-vorgang__hier{font-size:.6rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--kp-akzent,#1c5fb8)}
.kp-vorgang__weitere{font-size:.64rem;color:var(--kp-text-schwach,#687887)}
.kp-vorgang__zustand{font-size:.7rem;color:var(--kp-text-schwach,#687887);cursor:help;
  white-space:nowrap}
.kp-vorgang__termin{font-size:.8rem;text-align:right}
.kp-vorgang__leer{text-align:right;color:var(--kp-text-schwach,#687887)}
.kp-vorgang__planen{display:flex;gap:.3rem;align-items:center;justify-content:flex-end}
.kp-vorgang__datum{max-width:150px}
.kp-vorgang__hinweis{grid-column:1/-1;font-size:.66rem;
  color:var(--kp-text-schwach,#687887);margin-top:.1rem}
.kp-vorgang__alles{margin-top:.55rem;width:100%}
.kp-vorgang__fuss{font-size:.68rem;color:var(--kp-text-schwach,#687887);margin:.45rem 0 0}
.kp-vorgang__meldung{font-size:.76rem;margin:0 0 .5rem;padding:.35rem .5rem;
  border-radius:5px;font-weight:600}
.kp-vorgang__meldung--ok{background:rgba(26,154,75,.14);color:#137a3a}
.kp-vorgang__meldung--warn{background:rgba(224,122,0,.14);color:#9c5500}
.kp-fieldset__bezug{font-weight:400;color:var(--kp-text-schwach,#687887);
  text-transform:none;letter-spacing:0}

[data-kp-theme="dark"] .kp-vorgang{background:#141d27;border-color:#33445a}
[data-kp-theme="dark"] .kp-vorgang__schritt{background:#1a2734}
[data-kp-theme="dark"] .kp-vorgang__bezug,
[data-kp-theme="dark"] .kp-vorgang__erklaerung,
[data-kp-theme="dark"] .kp-vorgang__zustand,
[data-kp-theme="dark"] .kp-vorgang__weitere,
[data-kp-theme="dark"] .kp-vorgang__hinweis,
[data-kp-theme="dark"] .kp-vorgang__fuss,
[data-kp-theme="dark"] .kp-fieldset__bezug{color:#8fa3b3}
[data-kp-theme="dark"] .kp-vorgang__hier{color:#7fb4ff}
[data-kp-theme="dark"] .kp-vorgang__meldung--ok{background:rgba(22,180,90,.18);color:#3fcf7a}
[data-kp-theme="dark"] .kp-vorgang__meldung--warn{background:rgba(255,157,41,.16);color:#ffc04d}

/* --- Schriftfarbe in ALLEN Dialogen, Dunkelmodus ------------------------
   Gemessen am 2026-09-13: In den Dialogen stand der Text mit rgb(33,37,41)
   auf rgb(17,26,34) - Bootstraps Vorgabefarbe auf dunklem Grund, also
   praktisch unsichtbar. Betroffen war alles, was seine Farbe nicht selbst
   setzt; die Beschriftungen waren lesbar, die WERTE nicht.

   Bisher war das je Dialog einzeln geflickt, um die vorhandenen nicht
   anzufassen. Das hat zweimal nicht gereicht - jeder neue Abschnitt fiel in
   dieselbe Grube. Deshalb jetzt an der Wurzel, fuer jeden Dialog mit der
   Klasse kp-modal. Dunkler Text auf dunklem Grund ist in keinem Fall
   gewollt; die Regel kann nichts verschlechtern. */
[data-kp-theme="dark"] .kp-modal .modal-content{color:#e3ecf3}
[data-kp-theme="dark"] .kp-modal .modal-title{color:#f2f6f9}

/* Die Werte in den Kennzahlen- und Terminbloecken ausdruecklich hell -
   sie tragen die eigentliche Aussage und sollen etwas kraeftiger stehen
   als der Fliesstext daneben. */
[data-kp-theme="dark"] .kp-kennzahlen__wert{color:#f2f6f9}
[data-kp-theme="dark"] .kp-vorschlag__karte-datum,
[data-kp-theme="dark"] .kp-vorschlag__karte-person{color:#f2f6f9}
[data-kp-theme="dark"] .kp-vorgang__name,
[data-kp-theme="dark"] .kp-vorgang__termin{color:#f2f6f9}

/* Die Beschriftungen im Fraesfreigabe-Dialog lagen im Dunkelmodus bei 3,9:1 -
   sie benutzten den Rueckfallwert der hellen Ansicht. Nachgemessen und
   angehoben; 4,5:1 ist die Untergrenze fuer kleine Schrift. */
[data-kp-theme="dark"] .kp-fraes__feld-titel,
[data-kp-theme="dark"] .kp-fraes__ueberschrift,
[data-kp-theme="dark"] .kp-fraes__summe-einheit,
[data-kp-theme="dark"] .kp-fraes__erklaerung,
[data-kp-theme="dark"] .kp-fraes__demo{color:#9fb3c4}

/* Mehrere Belegungen je Schritt - beim Fraesen die Maschine UND der
   Musterbauer. Untereinander, damit beide sichtbar sind. */
.kp-vorgang__belegung{display:block;font-size:.8rem;line-height:1.3}
.kp-vorgang__belegung+.kp-vorgang__belegung{margin-top:.15rem;
  padding-top:.15rem;border-top:1px dashed var(--kp-line,#dbe3e9)}
.kp-vorgang__was{display:block;font-size:.66rem;color:var(--kp-text-schwach,#687887)}
[data-kp-theme="dark"] .kp-vorgang__belegung+.kp-vorgang__belegung{border-top-color:#33445a}
[data-kp-theme="dark"] .kp-vorgang__was{color:#8fa3b3}

/* --- Warnungen ----------------------------------------------------------
   Der Knopf traegt eine ZAHL, kein blosses Ausrufezeichen: "3" laesst sich
   mit dem letzten Blick vergleichen, ein Zeichen nicht. */
.kp-warn-knopf{display:inline-flex;align-items:center;gap:.35rem}
.kp-warn-knopf--fehler{border-color:#d03b3b;color:#a62b2b}
.kp-warn-knopf--warnung{border-color:#e07a00;color:#9c5500}
.kp-warn__punkt{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kp-warn__punkt--fehler{background:#d03b3b}
.kp-warn__punkt--warnung{background:#e07a00}
.kp-warn__punkt--hinweis{background:#5f7280}
.kp-warn__punkt--ok{background:#1a9a4b}

.kp-warn-modal .modal-content{color:var(--kp-text,#2c3a45)}
.kp-warn__vorwort{font-size:.84rem;margin:0 0 .9rem}
.kp-warn__leer{font-size:.88rem;margin:0}
.kp-warn__block{margin-bottom:1.1rem}
.kp-warn__gruppe{display:flex;align-items:center;gap:.4rem;font-size:.86rem;
  font-weight:700;margin:0 0 .45rem}
.kp-warn__eintrag{padding:.45rem .6rem;border-radius:5px;margin-bottom:.35rem;
  border-left:3px solid var(--kp-line,#dbe3e9);background:var(--kp-flaeche-2,#f4f7f9)}
.kp-warn__eintrag--fehler{border-left-color:#d03b3b;background:rgba(208,59,59,.07)}
.kp-warn__eintrag--warnung{border-left-color:#e07a00;background:rgba(224,122,0,.07)}
.kp-warn__eintrag--hinweis{border-left-color:#5f7280;background:rgba(95,114,128,.07)}
.kp-warn__zeile{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.kp-warn__art{font-size:.6rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887);white-space:nowrap}
.kp-warn__titel{font-size:.86rem;font-weight:600}
.kp-warn__text{font-size:.8rem;margin:.15rem 0 0}
.kp-warn__rat{font-size:.74rem;margin:.2rem 0 0;color:var(--kp-text-schwach,#687887);
  font-style:italic}

[data-kp-theme="dark"] .kp-warn-knopf--fehler{border-color:#ff6b6b;color:#ff8f8f}
[data-kp-theme="dark"] .kp-warn-knopf--warnung{border-color:#ff9d29;color:#ffc04d}
[data-kp-theme="dark"] .kp-warn__eintrag{background:#16202b;border-left-color:#33445a}
[data-kp-theme="dark"] .kp-warn__eintrag--fehler{background:rgba(208,59,59,.14);border-left-color:#ff6b6b}
[data-kp-theme="dark"] .kp-warn__eintrag--warnung{background:rgba(255,157,41,.12);border-left-color:#ff9d29}
[data-kp-theme="dark"] .kp-warn__eintrag--hinweis{background:rgba(150,175,200,.1);border-left-color:#7d8b96}
[data-kp-theme="dark"] .kp-warn__art,
[data-kp-theme="dark"] .kp-warn__rat{color:#9fb3c4}

/* ── Maschine steht still ─────────────────────────────────────────────
   Ein Hinweis, der eine Handlung VERHINDERT, muss anders aussehen als
   einer, der nur danebensteht. Deshalb Rahmen und Flaeche, nicht nur
   roter Text. */
.kp-fraes__sperre{margin:.55rem 0 0;padding:.5rem .65rem;border-radius:6px;
  border:1px solid #d03b3b;background:rgba(208,59,59,.10);
  color:#8c1f1f;font-size:.78rem;line-height:1.45}
[data-kp-theme="dark"] .kp-fraes__sperre{border-color:#ff6b6b;
  background:rgba(255,107,107,.13);color:#ffb3b3}

/* ── Maschinenausfaelle: Status ───────────────────────────────────────── */
.kp-vorfall__status{display:inline-block;padding:.1rem .45rem;border-radius:10px;
  font-size:.68rem;font-weight:600;white-space:nowrap}
.kp-vorfall__status--offen{background:rgba(208,59,59,.15);color:#8c1f1f;
  border:1px solid rgba(208,59,59,.45)}
.kp-vorfall__status--erledigt{background:rgba(45,125,70,.13);color:#1e5c33;
  border:1px solid rgba(45,125,70,.35)}
[data-kp-theme="dark"] .kp-vorfall__status--offen{background:rgba(255,107,107,.18);
  color:#ffb3b3;border-color:rgba(255,107,107,.5)}
[data-kp-theme="dark"] .kp-vorfall__status--erledigt{background:rgba(100,200,140,.15);
  color:#9fe0b8;border-color:rgba(100,200,140,.4)}
.kp-vorfall__zeile--offen{background:rgba(208,59,59,.055)}
[data-kp-theme="dark"] .kp-vorfall__zeile--offen{background:rgba(255,107,107,.07)}
.kp-vorfall__fehlt{display:block;font-size:.7rem;color:#8c1f1f;margin-top:.15rem}
[data-kp-theme="dark"] .kp-vorfall__fehlt{color:#ffb3b3}

/* --- Wartungsstand je Maschine ------------------------------------- */
.kp-ma__wartungsstand{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 .9rem}
.kp-ma__stand-karte{display:flex;flex-direction:column;gap:.1rem;min-width:150px;
  padding:.5rem .65rem;border:1px solid var(--kp-rahmen,#d7dee6);border-radius:7px;
  background:var(--kp-flaeche,#fff)}
.kp-ma__stand-karte--faellig{border-color:#d03b3b;background:rgba(208,59,59,.07)}
[data-kp-theme="dark"] .kp-ma__stand-karte{border-color:#2c3e4d;background:#16212b}
[data-kp-theme="dark"] .kp-ma__stand-karte--faellig{border-color:#ff6b6b;
  background:rgba(255,107,107,.09)}
.kp-ma__stand-zeile{font-size:.7rem;opacity:.85}
.kp-vorfall__nachtragen{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem;
  max-width:230px}
.kp-vorfall__nachtragen input{font-size:.72rem}

/* --- Design-Freeze-Ampel in der Auftragsuebersicht --------------------
   Eine Spalte statt zwei: Die Farbe sagt, wie viel Luft bleibt, das
   Datum nennt den Termin, der Tooltip den Grund. Fuenf Stufen, in der
   Helligkeit gestaffelt - Farbton allein reicht dem Auge nicht, bei
   Rot-Gruen-Sehschwaeche erst recht nicht. */
.kp-auf__freeze{display:flex;flex-direction:column;gap:.05rem;
  padding:.25rem .45rem;border-radius:5px;border-left:3px solid transparent;
  line-height:1.25}
.kp-auf__freeze-datum{font-weight:600;font-size:.78rem}
.kp-auf__freeze-rest{font-size:.66rem;opacity:.85}
/* Die Zelle IST ein <td>, und fuer die Tabelle gilt bereits
   "[data-kp-theme='dark'] .kp-detailansicht__tabelle td{color:#e3edf3}".
   Diese Regel ist um ein Element spezifischer als eine reine Klasse und
   hat die Ampelfarben im Dunkelmodus ueberschrieben - gemessen: ueberall
   rgb(227,237,243) statt der fuenf Toene. Deshalb hier "td." davor: gleiche
   Spezifitaet, aber spaeter in der Datei. */
td.kp-auf__freeze--weit{background:rgba(26,154,75,.13);border-left-color:#1a9a4b;color:#155e32}
td.kp-auf__freeze--gut{background:rgba(150,170,30,.15);border-left-color:#8ba61e;color:#5b6b12}
td.kp-auf__freeze--knapp{background:rgba(250,178,25,.20);border-left-color:#e0a00a;color:#7a5800}
td.kp-auf__freeze--eng{background:rgba(224,122,0,.20);border-left-color:#e07a00;color:#8a4b00}
td.kp-auf__freeze--vorbei{background:rgba(208,59,59,.20);border-left-color:#d03b3b;color:#8c1f1f}
[data-kp-theme="dark"] td.kp-auf__freeze--weit{background:rgba(22,180,90,.16);color:#7fe0a4}
[data-kp-theme="dark"] td.kp-auf__freeze--gut{background:rgba(190,210,60,.18);color:#dcee9a}
[data-kp-theme="dark"] td.kp-auf__freeze--knapp{background:rgba(250,178,25,.18);color:#ffd479}
[data-kp-theme="dark"] td.kp-auf__freeze--eng{background:rgba(255,157,41,.18);color:#ffc089}
[data-kp-theme="dark"] td.kp-auf__freeze--vorbei{background:rgba(255,107,107,.18);color:#ffb3b3}

/* --- Workflow: Fehlerarten und Zweck --------------------------------- */
.kp-wf__fehler{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin-top:.45rem}
.kp-wf__fehler-marke{display:inline-block;padding:.1rem .45rem;border-radius:10px;
  font-size:.68rem;background:rgba(208,59,59,.10);color:#8c1f1f;
  border:1px solid rgba(208,59,59,.30)}
[data-kp-theme="dark"] .kp-wf__fehler-marke{background:rgba(255,107,107,.13);
  color:#ffb3b3;border-color:rgba(255,107,107,.35)}
.kp-wf__zweck{margin:.7rem 0 0;padding:.6rem .8rem;border-radius:7px;
  border:1px solid var(--kp-rahmen,#d7dee6);background:rgba(28,95,184,.05)}
.kp-wf__zweck h4{font-size:.82rem;font-weight:600;margin:0 0 .35rem}
.kp-wf__zweck ul{margin:0;padding-left:1.1rem}
.kp-wf__zweck li{font-size:.78rem;line-height:1.5}
[data-kp-theme="dark"] .kp-wf__zweck{border-color:#2c3e4d;background:rgba(75,140,255,.08)}

/* ── Musteranfertigung: Arbeitsansicht fuer das Tablet ──────────────────
   Groessere Flaechen als sonst in der Anwendung. Wer mit Handschuhen
   davorsteht, trifft keine 24-Pixel-Schaltflaeche. */
.kp-st__sichtwahl{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 .8rem}

.kp-st__karten{display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.kp-st__karte{display:flex;flex-direction:column;gap:.3rem;padding:.75rem .85rem;
  border:1px solid var(--kp-rahmen,#d7dee6);border-radius:9px;
  background:var(--kp-flaeche,#fff)}
.kp-st__karte--fertig{border-color:#1a9a4b;background:rgba(26,154,75,.05)}
[data-kp-theme="dark"] .kp-st__karte{border-color:#2c3e4d;background:#16212b}
[data-kp-theme="dark"] .kp-st__karte--fertig{border-color:#16b45a;background:rgba(22,180,90,.07)}
.kp-st__karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.kp-st__auftrag{font-size:.7rem;opacity:.7;white-space:nowrap}
.kp-st__wg{font-size:.82rem;font-weight:600}
.kp-st__kunde{font-size:.74rem;opacity:.8}
.kp-st__termine{display:flex;flex-direction:column;gap:.1rem;margin-top:.2rem}
.kp-st__termin{font-size:.72rem;opacity:.9}
.kp-st__balken{display:flex;gap:2px;margin:.45rem 0 .15rem}
.kp-st__balken-teil{flex:1;height:7px;border-radius:3px;background:#dfe5ea}
.kp-st__balken-teil--fertig{background:#1a9a4b}
.kp-st__balken-teil--uebersprungen{background:#e0a00a}
.kp-st__balken-teil--laeuft{background:#1c5fb8}
[data-kp-theme="dark"] .kp-st__balken-teil{background:#2c3e4d}
.kp-st__fortschritt{font-size:.7rem;opacity:.85}
.kp-st__start{margin-top:.45rem;align-self:flex-start}

.kp-st__stationen{list-style:none;margin:.8rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.45rem}
.kp-st__station{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;
  padding:.6rem .75rem;border:1px solid var(--kp-rahmen,#d7dee6);border-radius:8px;
  border-left-width:4px}
.kp-st__station--fertig{border-left-color:#1a9a4b}
.kp-st__station--uebersprungen{border-left-color:#e0a00a}
.kp-st__station--offen{border-left-color:#9bb0c2}
[data-kp-theme="dark"] .kp-st__station{border-color:#2c3e4d}
.kp-st__station-kopf{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.kp-st__station-name{font-weight:600;font-size:.92rem}
.kp-st__station-stand{font-size:.72rem;opacity:.8}
.kp-st__rolle{font-size:.64rem;padding:.05rem .4rem;border-radius:9px;
  background:rgba(28,95,184,.10);color:#1c5fb8;border:1px solid rgba(28,95,184,.25)}
[data-kp-theme="dark"] .kp-st__rolle{background:rgba(75,140,255,.15);color:#8fb6ff;
  border-color:rgba(75,140,255,.35)}
.kp-st__station-info{font-size:.72rem;opacity:.85}

.kp-st__arbeitsflaeche{max-width:900px}
.kp-st__kopfzeile{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.kp-st__kopf-artikel{font-size:.78rem;opacity:.8}
.kp-st__vorliegend{margin:.7rem 0;padding:.65rem .8rem;border-radius:8px;
  background:rgba(28,95,184,.05);border:1px solid var(--kp-rahmen,#d7dee6)}
[data-kp-theme="dark"] .kp-st__vorliegend{background:rgba(75,140,255,.08);border-color:#2c3e4d}
.kp-st__vorliegend h4,.kp-st__erfassung h4{font-size:.84rem;font-weight:600;margin:0 0 .3rem}
.kp-st__vorliegend p{font-size:.8rem;margin:0 0 .3rem}
.kp-st__vorliegend ul{margin:0;padding-left:1.1rem;font-size:.78rem}
.kp-st__erfassung{margin-top:.9rem}
.kp-st__erfassung h5{font-size:.8rem;font-weight:600;margin:.9rem 0 .3rem}
.kp-st__raster{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.kp-st__feld{display:flex;flex-direction:column;gap:.2rem}
.kp-st__feld--haken{flex-direction:row;align-items:center;gap:.45rem}
.kp-st__feld-titel{font-size:.72rem;font-weight:600;opacity:.85}
.kp-st__haken{width:22px;height:22px}
.kp-st__zahl,.kp-st__select{font-size:1rem;padding:.45rem .6rem}
.kp-st__notiz{font-size:.85rem}
.kp-st__aufspann{margin-top:.9rem;padding:.65rem .8rem;border-radius:8px;
  border:1px solid var(--kp-rahmen,#d7dee6)}
[data-kp-theme="dark"] .kp-st__aufspann{border-color:#2c3e4d}
.kp-st__aufspann-reihe{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:.5rem}
.kp-st__summe{font-size:.85rem;font-weight:600;margin:.3rem 0 .5rem}
.kp-st__fehlerblock{margin-top:.9rem}
.kp-st__fehlerwahl{display:flex;flex-wrap:wrap;gap:.4rem}
.kp-st__fehlerwahl-marke{display:flex;align-items:center;gap:.35rem;
  padding:.35rem .6rem;border-radius:18px;font-size:.78rem;
  border:1px solid rgba(208,59,59,.30);background:rgba(208,59,59,.06)}
[data-kp-theme="dark"] .kp-st__fehlerwahl-marke{border-color:rgba(255,107,107,.35);
  background:rgba(255,107,107,.09)}
.kp-st__knopfzeile{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin-top:1.1rem;padding-top:.8rem;border-top:1px solid var(--kp-rahmen,#d7dee6)}
[data-kp-theme="dark"] .kp-st__knopfzeile{border-top-color:#2c3e4d}
.kp-st__gross{font-size:1rem;padding:.6rem 1.3rem}
.kp-st__grund{max-width:280px}
.kp-st__abschluss{margin-top:.8rem;padding:.6rem .8rem;border-radius:8px;
  font-size:.8rem;background:rgba(26,154,75,.08);border:1px solid rgba(26,154,75,.3)}
[data-kp-theme="dark"] .kp-st__abschluss{background:rgba(22,180,90,.10);
  border-color:rgba(22,180,90,.35)}
.kp-st__hinweis-fertig{font-size:.78rem;opacity:.85;margin:.5rem 0}

/* ── Stand der Anwendung ────────────────────────────────────────────────── */
.kp-rev__knopf{display:inline-flex;align-items:center;gap:.35rem}
.kp-rev__punkt{width:8px;height:8px;border-radius:50%;background:#1a9a4b;
  display:inline-block;flex:0 0 auto}
.kp-rev__koerper{font-size:.84rem}
.kp-rev__vorspann{font-size:.78rem;opacity:.88;line-height:1.55;margin:0 0 .7rem}
.kp-rev__stufe{margin:0 0 .8rem;padding:.6rem .75rem;border-radius:8px;
  border:1px solid var(--kp-rahmen,#d7dee6);border-left-width:3px;
  border-left-color:#9bb0c2}
.kp-rev__stufe--aktuell{border-left-color:#1c5fb8;background:rgba(28,95,184,.04)}
[data-kp-theme="dark"] .kp-rev__stufe{border-color:#2c3e4d}
[data-kp-theme="dark"] .kp-rev__stufe--aktuell{border-left-color:#4b8cff;
  background:rgba(75,140,255,.07)}
.kp-rev__stufe-kopf{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  margin-bottom:.3rem}
.kp-rev__nummer{font-weight:700;opacity:.5}
.kp-rev__zeitraum{font-size:.7rem;opacity:.75;margin-left:auto}
.kp-rev__stufe ul{margin:0;padding-left:1.1rem}
.kp-rev__stufe li{font-size:.78rem;line-height:1.5;margin-bottom:.1rem}
.kp-rev__abschnitt{margin-top:1.2rem;padding-top:.9rem;
  border-top:1px solid var(--kp-rahmen,#d7dee6)}
[data-kp-theme="dark"] .kp-rev__abschnitt{border-top-color:#2c3e4d}
.kp-rev__abschnitt h6{font-weight:600;margin:0 0 .4rem}
.kp-rev__offen{display:flex;flex-direction:column;gap:.35rem}
.kp-rev__offen-zeile{display:flex;gap:.5rem;align-items:flex-start}
.kp-rev__offen-text{display:flex;flex-direction:column}
.kp-rev__offen-text strong{font-size:.79rem;font-weight:600}
.kp-rev__offen-text span{font-size:.72rem;opacity:.8}
.kp-rev__marke{flex:0 0 auto;min-width:88px;text-align:center;font-size:.66rem;
  font-weight:600;padding:.12rem .4rem;border-radius:10px;border:1px solid}
.kp-rev__marke--anbindung{background:rgba(124,77,255,.10);color:#5a2fd0;
  border-color:rgba(124,77,255,.35)}
.kp-rev__marke--auskunft{background:rgba(250,178,25,.15);color:#7a5800;
  border-color:rgba(250,178,25,.4)}
.kp-rev__marke--entscheidung{background:rgba(208,59,59,.10);color:#8c1f1f;
  border-color:rgba(208,59,59,.3)}
.kp-rev__marke--arbeit{background:rgba(26,154,75,.10);color:#155e32;
  border-color:rgba(26,154,75,.3)}
[data-kp-theme="dark"] .kp-rev__marke--anbindung{background:rgba(180,155,255,.15);color:#c9b6ff}
[data-kp-theme="dark"] .kp-rev__marke--auskunft{background:rgba(250,178,25,.15);color:#ffd479}
[data-kp-theme="dark"] .kp-rev__marke--entscheidung{background:rgba(255,107,107,.15);color:#ffb3b3}
[data-kp-theme="dark"] .kp-rev__marke--arbeit{background:rgba(100,200,140,.15);color:#9fe0b8}
.kp-rev__dateien{display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.kp-rev__datei{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.4rem .55rem;border-radius:6px;text-align:left;
  border:1px solid var(--kp-rahmen,#d7dee6);background:var(--kp-flaeche,#fff);
  cursor:pointer;font:inherit;color:inherit}
.kp-rev__datei:hover{border-color:#1c5fb8}
.kp-rev__datei--offen{border-color:#1c5fb8;background:rgba(28,95,184,.07)}
[data-kp-theme="dark"] .kp-rev__datei{border-color:#2c3e4d;background:#16212b}
[data-kp-theme="dark"] .kp-rev__datei--offen{border-color:#4b8cff;background:rgba(75,140,255,.10)}
.kp-rev__datei-name{font-size:.74rem;font-weight:600;word-break:break-all}
.kp-rev__datei-groesse{font-size:.66rem;opacity:.7}
.kp-rev__anzeige{margin-top:.8rem}
.kp-rev__text{max-height:340px;overflow:auto;font-size:.72rem;line-height:1.5;
  padding:.7rem .8rem;border-radius:7px;white-space:pre-wrap;word-break:break-word;
  background:var(--kp-flaeche,#f6f8fa);border:1px solid var(--kp-rahmen,#d7dee6)}
[data-kp-theme="dark"] .kp-rev__text{background:#111a22;border-color:#2c3e4d;color:#cfe0ec}

/* ── Musteranfertigung: Rollen und Vorbereitung ───────────────────────── */
.kp-st__rollenwahl{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:.5rem 0 .2rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--kp-rahmen,#d7dee6)}
[data-kp-theme="dark"] .kp-st__rollenwahl{border-bottom-color:#2c3e4d}
.kp-st__rollenwahl .kp-st__feld-titel{margin-right:.2rem}

.kp-st__vorbereitung{margin:.8rem 0;padding:.6rem .75rem;border-radius:8px;
  border:1px dashed var(--kp-rahmen,#c3ced8);background:rgba(103,124,140,.05)}
[data-kp-theme="dark"] .kp-st__vorbereitung{border-color:#3a4b5a;
  background:rgba(150,176,200,.06)}
.kp-st__vorbereitung h4{font-size:.78rem;font-weight:600;margin:0 0 .4rem;opacity:.85}
.kp-st__vorbereitung-reihe{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.kp-st__vorb-karte{display:flex;flex-direction:column;gap:.1rem;
  padding:.45rem .6rem;border-radius:6px;border-left:3px solid #9bb0c2;
  background:var(--kp-flaeche,#fff)}
.kp-st__vorb-karte--fertig{border-left-color:#1a9a4b}
.kp-st__vorb-karte--uebersprungen{border-left-color:#e0a00a}
[data-kp-theme="dark"] .kp-st__vorb-karte{background:#16212b}
.kp-st__vorb-name{font-size:.76rem;font-weight:600}
.kp-st__vorb-stand{font-size:.68rem;opacity:.75}
.kp-st__vorb-wert{font-size:.7rem;opacity:.9}
.kp-st__vorb-fehlt{font-size:.7rem;font-weight:600;color:#8c1f1f}
[data-kp-theme="dark"] .kp-st__vorb-fehlt{color:#ffb3b3}
.kp-st__vorb-hinweis{font-size:.72rem;opacity:.85;margin:.5rem 0 0;line-height:1.5}

/* --- Regelwerk: Schritte, die nicht automatisch geplant werden ------- */
.kp-regel__anweisung{display:inline-block;margin-left:.4rem;padding:.05rem .45rem;
  border-radius:10px;font-size:.66rem;font-weight:600;white-space:nowrap;
  background:rgba(250,178,25,.18);color:#7a5800;border:1px solid rgba(250,178,25,.45)}
[data-kp-theme="dark"] .kp-regel__anweisung{background:rgba(250,178,25,.16);
  color:#ffd479;border-color:rgba(250,178,25,.4)}

/* ── Vorgangskette: Schritte anklickbar ────────────────────────────────── */
.kp-vorgang__umschalthinweis{font-size:.72rem;opacity:.8;margin:.15rem 0 .5rem}
.kp-vorgang__schritt--klickbar{cursor:pointer;transition:border-color .12s,background .12s}
.kp-vorgang__schritt--klickbar:hover,
.kp-vorgang__schritt--klickbar:focus-visible{border-color:var(--kp-akzent,#1c5fb8);
  background:rgba(28,95,184,.05);outline:none}
[data-kp-theme="dark"] .kp-vorgang__schritt--klickbar:hover,
[data-kp-theme="dark"] .kp-vorgang__schritt--klickbar:focus-visible{
  border-color:#4b8cff;background:rgba(75,140,255,.08)}
.kp-vorgang__schritt--klickbar .kp-vorgang__name::after{content:" ›";opacity:.45;
  font-weight:700}

/* ── Vorgangskette: fehlende Positionen anlegen ───────────────────────── */
.kp-vorgang__anlegen{margin-top:.35rem;align-self:flex-start;font-size:.74rem}
.kp-anlegen__herkunft{margin:0 0 .7rem;padding:.5rem .65rem;border-radius:6px;
  font-size:.76rem;line-height:1.45;
  background:rgba(28,95,184,.07);border:1px solid rgba(28,95,184,.25)}
[data-kp-theme="dark"] .kp-anlegen__herkunft{background:rgba(75,140,255,.10);
  border-color:rgba(75,140,255,.3)}

/* ── Anlegen-Dialog: die vorgeschlagene Kette ──────────────────────────── */
.kp-kette{margin:.7rem 0;padding:.65rem .8rem;border-radius:8px;
  border:1px solid var(--kp-rahmen,#d7dee6);background:var(--kp-flaeche,#fff)}
[data-kp-theme="dark"] .kp-kette{border-color:#2c3e4d;background:#16212b}
.kp-kette__titel{font-size:.82rem;font-weight:600;margin:0 0 .25rem}
.kp-kette__hinweis{font-size:.73rem;opacity:.85;line-height:1.45;margin:0 0 .6rem}
.kp-kette__zeile{display:flex;flex-direction:column;gap:.25rem;padding:.5rem 0;
  border-top:1px solid var(--kp-rahmen,#e6ebf0)}
[data-kp-theme="dark"] .kp-kette__zeile{border-top-color:#26333f}
.kp-kette__kopf{display:flex;align-items:baseline;gap:.5rem}
.kp-kette__name{font-weight:600;font-size:.82rem}
.kp-kette__stunden{font-size:.7rem;opacity:.75}
.kp-kette__felder{display:flex;gap:.4rem;flex-wrap:wrap}
.kp-kette__datum{max-width:160px}
.kp-kette__wer{max-width:230px}
.kp-kette__erklaerung{font-size:.7rem;opacity:.8;line-height:1.4}
.kp-kette__eng{font-size:.72rem;font-weight:600;color:#8a4b00}
[data-kp-theme="dark"] .kp-kette__eng{color:#ffc089}
.kp-kette__schalter{display:flex;align-items:center;gap:.45rem;margin-top:.6rem;
  padding-top:.55rem;border-top:1px solid var(--kp-rahmen,#e6ebf0);font-size:.76rem}
[data-kp-theme="dark"] .kp-kette__schalter{border-top-color:#26333f}
.kp-kette__nachricht{margin:.8rem 0 .5rem;padding:.65rem .8rem;border-radius:8px;
  border:1px dashed var(--kp-rahmen,#c3ced8);background:rgba(103,124,140,.05)}
[data-kp-theme="dark"] .kp-kette__nachricht{border-color:#3a4b5a;
  background:rgba(150,176,200,.06)}
.kp-kette__text{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.72rem;line-height:1.5}

/* ── Anlegen-Dialog: Verteilung ueber mehrere Tage ─────────────────────── */
.kp-kette__verteilung{display:flex;flex-direction:column;gap:.15rem;margin-top:.35rem;
  padding:.45rem .6rem;border-radius:6px;background:rgba(28,95,184,.06);
  border-left:3px solid var(--kp-akzent,#1c5fb8)}
[data-kp-theme="dark"] .kp-kette__verteilung{background:rgba(75,140,255,.09);
  border-left-color:#4b8cff}
.kp-kette__verteilung-titel{font-size:.72rem;font-weight:600}
.kp-kette__tag{display:flex;justify-content:space-between;max-width:200px;
  font-size:.74rem;padding:.05rem 0}
.kp-kette__tag strong{font-weight:600}
.kp-kette__verteilung-ende{font-size:.71rem;opacity:.85;margin-top:.2rem}

/* ── Dialoge verschieben ───────────────────────────────────────────────── */
.kp-modal__griff{cursor:grab;user-select:none}
.kp-modal__griff--zieht{cursor:grabbing}
.kp-modal__griff::before{content:"⠿";margin-right:.5rem;opacity:.35;
  font-size:.9rem;letter-spacing:-1px}

/* ── Anlegen-Dialog: Schritte klar getrennt ────────────────────────────── */
.kp-kette__zeile{border:1px solid var(--kp-rahmen,#d7dee6);border-radius:8px;
  padding:.6rem .7rem;margin-bottom:.55rem;background:var(--kp-flaeche,#fff);
  border-top:1px solid var(--kp-rahmen,#d7dee6)}
[data-kp-theme="dark"] .kp-kette__zeile{border-color:#2c3e4d;background:#18242f}
.kp-kette__zeile:hover{border-color:var(--kp-akzent,#1c5fb8)}
[data-kp-theme="dark"] .kp-kette__zeile:hover{border-color:#4b8cff}
.kp-kette__kopf{justify-content:space-between}
.kp-kette__rolle{font-size:.63rem;padding:.05rem .4rem;border-radius:9px;
  background:rgba(28,95,184,.10);color:#1c5fb8;border:1px solid rgba(28,95,184,.25)}
[data-kp-theme="dark"] .kp-kette__rolle{background:rgba(75,140,255,.15);
  color:#8fb6ff;border-color:rgba(75,140,255,.35)}
.kp-kette__stundenfeld{max-width:78px}
.kp-kette__einheit{align-self:center;font-size:.74rem;opacity:.7}
.kp-kette__start{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--kp-rahmen,#e6ebf0)}
[data-kp-theme="dark"] .kp-kette__start{border-bottom-color:#26333f}
.kp-kette__start-titel{font-size:.74rem;font-weight:600;white-space:nowrap}
.kp-kette__start select{max-width:190px}
.kp-rohfelder{margin-top:.9rem}
.kp-rohfelder>summary{font-size:.76rem;opacity:.8;cursor:pointer}

/* ── Vorgangskette: Entwurf ────────────────────────────────────────────── */
.kp-vorgang__entwurfshinweis{margin:.4rem 0 .6rem;padding:.45rem .65rem;
  border-radius:6px;font-size:.75rem;line-height:1.45;
  background:rgba(250,178,25,.15);border:1px solid rgba(250,178,25,.45);color:#7a5800}
[data-kp-theme="dark"] .kp-vorgang__entwurfshinweis{background:rgba(250,178,25,.13);
  border-color:rgba(250,178,25,.4);color:#ffd479}
.kp-vorgang__entwurf{display:block;margin-top:.3rem;font-size:.71rem;
  font-weight:600;color:#7a5800}
[data-kp-theme="dark"] .kp-vorgang__entwurf{color:#ffd479}
.kp-vorgang__schritt .kp-kette__felder{display:flex;gap:.4rem;flex-wrap:wrap;
  margin-top:.35rem}
.kp-vorgang__schritt .kp-kette__datum{max-width:150px}
.kp-vorgang__schritt .kp-kette__wer{max-width:210px}
.kp-vorgang__schritt .kp-kette__stundenfeld{max-width:78px}

/* ── Vorgangskette: Felder wie im Anlegen-Dialog anordnen ─────────────── */
.kp-vorgang__schritt--geplant{display:block}
.kp-vorgang__schritt .kp-vorgang__kopf{margin-bottom:.35rem}
.kp-vorgang__schritt .kp-kette__felder{align-items:center}
.kp-vorgang__schritt .kp-kette__verteilung{margin-top:.4rem;max-width:100%}
.kp-vorgang__schritt .kp-kette__tag{max-width:210px}

/* ── Musteranfertigung: Stand und Übergabe ─────────────────────────────── */
.kp-st__karte--fertig{border-color:#1a9a4b;background:rgba(26,154,75,.05)}
.kp-st__karte--faellig{border-color:#e07a00;background:rgba(224,122,0,.06)}
[data-kp-theme="dark"] .kp-st__karte--fertig{border-color:#16b45a;background:rgba(22,180,90,.07)}
[data-kp-theme="dark"] .kp-st__karte--faellig{border-color:#ff9d29;background:rgba(255,157,41,.08)}
.kp-st__stand{align-self:flex-start;font-size:.66rem;font-weight:600;
  padding:.08rem .45rem;border-radius:10px;border:1px solid}
.kp-st__stand--fertig{background:rgba(26,154,75,.13);color:#155e32;border-color:rgba(26,154,75,.4)}
.kp-st__stand--faellig{background:rgba(224,122,0,.15);color:#8a4b00;border-color:rgba(224,122,0,.45)}
.kp-st__stand--offen{background:rgba(103,124,140,.12);color:#4a5a67;border-color:rgba(103,124,140,.3)}
[data-kp-theme="dark"] .kp-st__stand--fertig{background:rgba(22,180,90,.16);color:#9fe0b8}
[data-kp-theme="dark"] .kp-st__stand--faellig{background:rgba(255,157,41,.16);color:#ffc089}
[data-kp-theme="dark"] .kp-st__stand--offen{background:rgba(150,176,200,.14);color:#b6c7d4}
.kp-st__rolle--ich{background:rgba(26,154,75,.13);color:#155e32;
  border-color:rgba(26,154,75,.4);font-weight:600}
[data-kp-theme="dark"] .kp-st__rolle--ich{background:rgba(22,180,90,.16);
  color:#9fe0b8;border-color:rgba(22,180,90,.4)}

.kp-st__uebergabe{margin:.8rem 0;padding:.65rem .8rem;border-radius:8px;
  border-left:4px solid var(--kp-akzent,#1c5fb8);background:rgba(28,95,184,.05)}
[data-kp-theme="dark"] .kp-st__uebergabe{border-left-color:#4b8cff;
  background:rgba(75,140,255,.08)}
.kp-st__uebergabe h4{font-size:.82rem;font-weight:600;margin:0 0 .45rem}
.kp-st__uebergabe-karte{margin-bottom:.55rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--kp-rahmen,#dde4ea)}
.kp-st__uebergabe-karte:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
[data-kp-theme="dark"] .kp-st__uebergabe-karte{border-bottom-color:#2c3e4d}
.kp-st__uebergabe-kopf{display:flex;justify-content:space-between;align-items:baseline;
  gap:.5rem;margin-bottom:.2rem}
.kp-st__uebergabe-kopf strong{font-size:.79rem}
.kp-st__uebergabe-wer{font-size:.68rem;opacity:.75}
.kp-st__uebergabe-zeile{display:flex;justify-content:space-between;gap:.7rem;
  font-size:.75rem;padding:.06rem 0}
.kp-st__uebergabe-titel{opacity:.8}
.kp-st__uebergabe-wert{font-weight:600;text-align:right}
.kp-st__uebergabe-zeile--warnung .kp-st__uebergabe-wert{color:#8c1f1f}
[data-kp-theme="dark"] .kp-st__uebergabe-zeile--warnung .kp-st__uebergabe-wert{color:#ffb3b3}
.kp-st__hinweis-fertig{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-size:.78rem;opacity:.9;margin:.5rem 0}
.kp-st__korrektur{margin:.5rem 0;padding:.45rem .65rem;border-radius:6px;
  font-size:.76rem;background:rgba(250,178,25,.15);
  border:1px solid rgba(250,178,25,.45);color:#7a5800}
[data-kp-theme="dark"] .kp-st__korrektur{background:rgba(250,178,25,.13);color:#ffd479}

/* ── Zeit ohne Auftrag: Puffer, Urlaub, Schule ─────────────────────────── */
.kp-artwahl{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:0 0 .8rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--kp-rahmen,#dde4ea)}
[data-kp-theme="dark"] .kp-artwahl{border-bottom-color:#2c3e4d}
.kp-artwahl__titel{font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887);margin-right:.2rem}
[data-kp-theme="dark"] .kp-artwahl__titel{color:#8fa3b3}

.kp-sonderzeit__vorschau{margin:.7rem 0}
.kp-sonderzeit__kopf{font-size:.95rem;font-weight:700;margin-bottom:.35rem}
.kp-sonderzeit__tage{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.4rem}
.kp-sonderzeit__tag{font-size:.72rem;font-weight:600;padding:.12rem .45rem;
  border-radius:10px;border:1px solid var(--kp-rahmen,#dde4ea);
  background:var(--kp-flaeche-2,#f4f7f9)}
[data-kp-theme="dark"] .kp-sonderzeit__tag{border-color:#33445a;background:#16202b}
.kp-sonderzeit__zeile{font-size:.74rem;margin:.2rem 0}
.kp-sonderzeit__zeile--info{color:var(--kp-text-schwach,#687887)}
.kp-sonderzeit__zeile--warn{color:#9c5500;font-weight:600}
[data-kp-theme="dark"] .kp-sonderzeit__zeile--info{color:#8fa3b3}
[data-kp-theme="dark"] .kp-sonderzeit__zeile--warn{color:#ffc04d}
.kp-sonderzeit__konflikt{margin-top:.45rem;padding:.45rem .6rem;border-radius:6px;
  font-size:.74rem;background:rgba(208,59,59,.09);
  border:1px solid rgba(208,59,59,.35);color:#8c1f1f}
.kp-sonderzeit__konflikt strong{display:block;margin-bottom:.2rem}
[data-kp-theme="dark"] .kp-sonderzeit__konflikt{background:rgba(208,59,59,.14);
  color:#ffb3b3;border-color:rgba(208,59,59,.4)}

/* Eine Tätigkeit, die bei dieser Warengruppe gar nicht anfällt.
   Zurückgenommen, aber lesbar — sie ist keine Lücke, sondern eine Antwort. */
.kp-wg__entfaellt{color:var(--kp-text-schwach,#687887);opacity:.65;font-size:.85rem}
[data-kp-theme="dark"] .kp-wg__entfaellt{color:#8fa3b3}

/* ── Wartungsplan und Ausfall in der Maschinenverwaltung ──────────────── */
.kp-wartung__vorschau{margin:.7rem 0}
.kp-wartung__kopf{font-size:.9rem;font-weight:700;margin-bottom:.35rem}
.kp-wartung__tage{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.4rem}
.kp-wartung__tag{font-size:.72rem;font-weight:600;padding:.12rem .45rem;
  border-radius:10px;border:1px solid var(--kp-rahmen,#dde4ea);
  background:var(--kp-flaeche-2,#f4f7f9)}
.kp-wartung__tag--da{opacity:.55;font-weight:500}
[data-kp-theme="dark"] .kp-wartung__tag{border-color:#33445a;background:#16202b}

.kp-ausfall__rechnung{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:.5rem 0;font-size:.8rem}
.kp-ausfall__rechnung strong{font-size:1rem}
.kp-ausfall__bis{display:inline-block;width:9.5rem;margin-right:.35rem}

.kp-ma__meldung--warnung{background:rgba(250,178,25,.16);color:#7a5800}
[data-kp-theme="dark"] .kp-ma__meldung--warnung{background:rgba(250,178,25,.16);color:#ffd479}
.kp-vorfall__status--geplant{background:rgba(28,95,184,.12);color:#1c5fb8;
  border:1px solid rgba(28,95,184,.35)}
[data-kp-theme="dark"] .kp-vorfall__status--geplant{background:rgba(75,140,255,.16);
  color:#9dc2ff;border-color:rgba(75,140,255,.4)}
.kp-ma__stand-zeile--plan{color:#1c5fb8;font-weight:600}
[data-kp-theme="dark"] .kp-ma__stand-zeile--plan{color:#9dc2ff}

/* ── Maschinenverwaltung: offener Bereich und Aktionen ────────────────── */
.kp-ma__offen{border-left:4px solid var(--kp-akzent,#1c5fb8)}
[data-kp-theme="dark"] .kp-ma__offen{border-left-color:#4b8cff}
.kp-ma__aktionen{white-space:nowrap}
.kp-ma__aktionen .btn{margin:0 .2rem .2rem 0}
button.kp-ma__stand-karte{cursor:pointer;text-align:left;font:inherit;width:100%}
button.kp-ma__stand-karte:hover{border-color:var(--kp-akzent,#1c5fb8)}
[data-kp-theme="dark"] button.kp-ma__stand-karte:hover{border-color:#4b8cff}

/* ── Kettenzeile: woher der Wert kommt ────────────────────────────────── */
.kp-kette__marken{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.kp-kette__auto{font-size:.63rem;font-weight:600;padding:.05rem .4rem;
  border-radius:9px;background:rgba(224,122,0,.12);color:#9c5500;
  border:1px solid rgba(224,122,0,.35);white-space:nowrap}
[data-kp-theme="dark"] .kp-kette__auto{background:rgba(255,157,41,.16);
  color:#ffbe70;border-color:rgba(255,157,41,.4)}
.kp-kette__auto--hand{background:rgba(26,154,75,.12);color:#155e32;
  border-color:rgba(26,154,75,.35)}
[data-kp-theme="dark"] .kp-kette__auto--hand{background:rgba(22,180,90,.16);
  color:#9fe0b8;border-color:rgba(22,180,90,.4)}

/* Der Tag, von dessen Balken man gekommen ist. */
.kp-kette__tag--hier{border-color:var(--kp-akzent,#1c5fb8);
  background:rgba(28,95,184,.12);font-weight:700}
[data-kp-theme="dark"] .kp-kette__tag--hier{border-color:#4b8cff;
  background:rgba(75,140,255,.18)}

/* ── Reiter selbst anordnen ───────────────────────────────────────────── */
.kp-reiter__knopf{cursor:grab}
.kp-reiter__knopf:active{cursor:grabbing}
.kp-reiter__knopf--zieht{opacity:.45}
.kp-reiter__knopf--ziel{box-shadow:inset 2px 0 0 var(--kp-akzent,#1c5fb8)}
[data-kp-theme="dark"] .kp-reiter__knopf--ziel{box-shadow:inset 2px 0 0 #4b8cff}

/* ── Meine Arbeit ─────────────────────────────────────────────────────────
 *
 * Drei Schriftgroessen ueber EINE Variable. Wer das Tablet an die Saege
 * haengt, steht zwei Meter davor - dann muss alles mitwachsen, nicht nur
 * die Ueberschrift. Deshalb rechnen alle Groessen hier in em und haengen
 * an --kp-arb-basis.
 */
.kp-arb{--kp-arb-basis:1rem;font-size:var(--kp-arb-basis)}
.kp-arb--gross{--kp-arb-basis:1.3rem}
.kp-arb--riesig{--kp-arb-basis:1.7rem}

.kp-arb__steuerung{display:flex;flex-direction:column;gap:.45em;
  padding:.7em .8em;margin-bottom:.8em;border-radius:10px;
  background:var(--kp-flaeche-2,#f4f7f9);border:1px solid var(--kp-rahmen,#dde4ea)}
[data-kp-theme="dark"] .kp-arb__steuerung{background:#16202b;border-color:#2c3e4d}
.kp-arb__wahl{display:flex;align-items:center;gap:.35em;flex-wrap:wrap}
.kp-arb__wahl-titel{font-size:.7em;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887);
  min-width:5.5em}
[data-kp-theme="dark"] .kp-arb__wahl-titel{color:#8fa3b3}
.kp-arb__wahl .btn{font-size:.8em;padding:.3em .7em}

/* Stationsreiter: gross genug fuer einen Finger mit Handschuh. */
.kp-arb__stationen{display:flex;align-items:stretch;gap:.4em;flex-wrap:wrap;
  margin-bottom:.8em}
.kp-arb__station{display:flex;align-items:center;gap:.5em;
  padding:.5em .9em;border-radius:9px;cursor:pointer;
  border:2px solid var(--kp-rahmen,#dde4ea);background:var(--kp-flaeche,#fff);
  font-size:.95em;font-weight:600;color:inherit}
.kp-arb__station:hover{border-color:var(--kp-akzent,#1c5fb8)}
.kp-arb__station--aktiv{border-color:var(--kp-akzent,#1c5fb8);
  background:rgba(28,95,184,.08)}
.kp-arb__station--leer{opacity:.5}
.kp-arb__station-zahl{min-width:1.8em;text-align:center;border-radius:9px;
  padding:.05em .45em;font-size:.85em;
  background:var(--kp-akzent,#1c5fb8);color:#fff}
.kp-arb__station--leer .kp-arb__station-zahl{background:var(--kp-rahmen,#dde4ea);
  color:var(--kp-text-schwach,#687887)}
[data-kp-theme="dark"] .kp-arb__station{background:#16202b;border-color:#33445a}
[data-kp-theme="dark"] .kp-arb__station--aktiv{border-color:#4b8cff;
  background:rgba(75,140,255,.14)}
[data-kp-theme="dark"] .kp-arb__station-zahl{background:#4b8cff;color:#0d1520}
.kp-arb__schalter{display:flex;align-items:center;gap:.4em;font-size:.8em;
  margin-left:auto;align-self:center}

.kp-arb__listenkopf{margin-bottom:.6em}
.kp-arb__listenkopf h3{display:inline;font-size:1.4em;margin-right:.5em}
.kp-arb__listenzahl{font-size:.85em;color:var(--kp-text-schwach,#687887)}
.kp-arb__listenzweck{font-size:.8em;margin:.2em 0 0;
  color:var(--kp-text-schwach,#687887)}
[data-kp-theme="dark"] .kp-arb__listenzahl,
[data-kp-theme="dark"] .kp-arb__listenzweck{color:#8fa3b3}

/* Die Karten: eine Arbeit, eine Karte. */
.kp-arb__karten{display:grid;gap:.7em;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,26em),1fr))}
.kp-arb__karte{padding:.8em .9em;border-radius:11px;
  border:2px solid var(--kp-rahmen,#dde4ea);background:var(--kp-flaeche,#fff)}
[data-kp-theme="dark"] .kp-arb__karte{background:#16202b;border-color:#33445a}
.kp-arb__karte--wartet{opacity:.72;border-style:dashed}
.kp-arb__karte-kopf{display:flex;justify-content:space-between;
  align-items:baseline;gap:.6em;margin-bottom:.5em}
.kp-arb__karte-titel{display:flex;flex-direction:column}
.kp-arb__karte-titel strong{font-size:1.15em}
.kp-arb__karte-bezeichnung{font-size:.82em;color:var(--kp-text-schwach,#687887)}
.kp-arb__karte-auftrag{font-size:.8em;font-weight:600;white-space:nowrap;
  color:var(--kp-text-schwach,#687887)}
[data-kp-theme="dark"] .kp-arb__karte-bezeichnung,
[data-kp-theme="dark"] .kp-arb__karte-auftrag{color:#8fa3b3}

/* DIE ZAHLEN, AUF DIE ES ANKOMMT. Von drei Metern lesbar. */
.kp-arb__werte{display:grid;gap:.4em;margin:.5em 0 .6em;
  grid-template-columns:repeat(auto-fit,minmax(6em,1fr))}
.kp-arb__wert{padding:.45em .55em;border-radius:8px;
  background:var(--kp-flaeche-2,#f4f7f9);border:1px solid var(--kp-rahmen,#dde4ea)}
[data-kp-theme="dark"] .kp-arb__wert{background:#0f1a24;border-color:#2c3e4d}
.kp-arb__wert-titel{display:block;font-size:.62em;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--kp-text-schwach,#687887)}
.kp-arb__wert-zahl{display:block;font-size:1.5em;font-weight:700;line-height:1.15}
.kp-arb__wert-quelle{display:block;font-size:.58em;opacity:.7;margin-top:.1em}
[data-kp-theme="dark"] .kp-arb__wert-titel{color:#8fa3b3}

.kp-arb__karte-zeile{display:flex;gap:.4em;flex-wrap:wrap;align-items:center;
  margin-bottom:.5em}
.kp-arb__termin{font-size:.78em;font-weight:700;padding:.1em .5em;
  border-radius:9px;background:rgba(224,122,0,.14);color:#8a4b00}
[data-kp-theme="dark"] .kp-arb__termin{background:rgba(255,157,41,.18);color:#ffc089}
.kp-arb__wer{font-size:.75em;padding:.1em .5em;border-radius:9px;
  border:1px solid var(--kp-rahmen,#dde4ea)}
.kp-arb__wer--ich{background:rgba(26,154,75,.13);color:#155e32;
  border-color:rgba(26,154,75,.4);font-weight:700}
[data-kp-theme="dark"] .kp-arb__wer--ich{background:rgba(22,180,90,.16);color:#9fe0b8}
.kp-arb__wartet{font-size:.78em;margin:.2em 0 .5em;color:#9c5500;font-weight:600}
[data-kp-theme="dark"] .kp-arb__wartet{color:#ffc04d}

.kp-arb__knoepfe{display:flex;gap:.4em;flex-wrap:wrap}
.kp-arb__fertig{font-size:1.05em;font-weight:700;padding:.55em 1.3em;flex:1 1 auto}
.kp-arb__erfassen{font-size:.8em;padding:.55em .9em}

.kp-arb__leer{padding:2em 1em;text-align:center}
.kp-arb__leer-titel{font-size:1.2em;font-weight:700;margin-bottom:.3em}

/* ── Meine Arbeit: Symbole, Grünton, Positionsansicht ─────────────────────
 *
 * GRÜN ALS LEITFARBE, aber vorsichtig dosiert. Der Auftraggeber hat den
 * Einwand selbst genannt: Grün kann auch leicht als "ist erledigt" gelesen
 * werden. Deshalb die Trennung:
 *
 *   Grün GEFÜLLT  = erledigt, fertig, liegt vor      (ein Zustand)
 *   Grün UMRANDET = hier bist du gerade              (eine Auswahl)
 *
 * Nur so bleibt beides unterscheidbar. Ein grün gefüllter Reiter, der nur
 * "ausgewählt" bedeutet, würde eine Station als abgeschlossen lesen lassen.
 */
.kp-arb{--kp-gruen:#1a7f4b;--kp-gruen-hell:rgba(26,127,75,.10);
  --kp-gruen-rand:rgba(26,127,75,.45)}
[data-kp-theme="dark"] .kp-arb{--kp-gruen:#3fbf78;
  --kp-gruen-hell:rgba(63,191,120,.14);--kp-gruen-rand:rgba(63,191,120,.45)}

.kp-arb__kopf{position:relative}
.kp-arb__zoom{position:absolute;top:0;right:0;display:flex;align-items:center;
  gap:.3rem;flex-wrap:wrap}
.kp-arb__zoom-titel{font-size:.65rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--kp-text-schwach,#687887)}
[data-kp-theme="dark"] .kp-arb__zoom-titel{color:#8fa3b3}
@media (max-width:820px){
  .kp-arb__zoom{position:static;margin-bottom:.6rem}
}

.kp-arb__symbol{display:inline-flex;width:1.35em;height:1.35em;flex:none}
.kp-arb__symbol svg{width:100%;height:100%}

/* Der ausgewählte Reiter: grün UMRANDET, nicht gefüllt. */
.kp-arb__station--aktiv{border-color:var(--kp-gruen);
  background:var(--kp-gruen-hell);color:var(--kp-gruen)}
.kp-arb__station--aktiv .kp-arb__station-zahl{background:var(--kp-gruen);color:#fff}
[data-kp-theme="dark"] .kp-arb__station--aktiv .kp-arb__station-zahl{color:#0d1520}
.kp-arb__station:hover{border-color:var(--kp-gruen)}

.kp-arb__karte--klickbar{cursor:pointer}
.kp-arb__karte--klickbar:hover{border-color:var(--kp-gruen)}
.kp-arb__karte--klickbar:focus-visible{outline:3px solid var(--kp-gruen);
  outline-offset:2px}
.kp-arb__fertig{background:var(--kp-gruen);border-color:var(--kp-gruen)}
.kp-arb__fertig:hover{background:#15663c;border-color:#15663c}

/* ── Positionsansicht ──────────────────────────────────────────────────── */
.kp-pos__kette{display:flex;align-items:flex-start;gap:0;flex-wrap:wrap;
  margin:.8rem 0 1.1rem}
.kp-pos__kette-punkt{display:flex;flex-direction:column;align-items:center;
  gap:.25rem;flex:1 1 0;min-width:4.5rem;position:relative}
.kp-pos__kette-punkt::before{content:"";position:absolute;top:.72rem;left:-50%;
  width:100%;height:2px;background:var(--kp-rahmen,#dde4ea)}
.kp-pos__kette-punkt:first-child::before{display:none}
[data-kp-theme="dark"] .kp-pos__kette-punkt::before{background:#33445a}
.kp-pos__kette-kreis{position:relative;z-index:1;width:1.45rem;height:1.45rem;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;
  border:2px solid var(--kp-rahmen,#dde4ea);background:var(--kp-flaeche,#fff)}
[data-kp-theme="dark"] .kp-pos__kette-kreis{background:#16202b;border-color:#33445a}
.kp-pos__kette-punkt--fertig .kp-pos__kette-kreis{background:#1a7f4b;
  border-color:#1a7f4b;color:#fff}
.kp-pos__kette-punkt--hier .kp-pos__kette-kreis{border-color:#1a7f4b;
  border-width:3px;box-shadow:0 0 0 3px rgba(26,127,75,.18)}
[data-kp-theme="dark"] .kp-pos__kette-punkt--fertig .kp-pos__kette-kreis{
  background:#3fbf78;border-color:#3fbf78;color:#0d1520}
[data-kp-theme="dark"] .kp-pos__kette-punkt--hier .kp-pos__kette-kreis{
  border-color:#3fbf78;box-shadow:0 0 0 3px rgba(63,191,120,.22)}
.kp-pos__kette-name{font-size:.68rem;text-align:center;line-height:1.2;
  color:var(--kp-text-schwach,#687887)}
.kp-pos__kette-punkt--hier .kp-pos__kette-name{font-weight:700;color:inherit}
[data-kp-theme="dark"] .kp-pos__kette-name{color:#8fa3b3}

.kp-pos__block{margin:.9rem 0;padding:.75rem .85rem;border-radius:10px;
  border:1px solid var(--kp-rahmen,#dde4ea);background:var(--kp-flaeche-2,#f4f7f9)}
[data-kp-theme="dark"] .kp-pos__block{background:#16202b;border-color:#2c3e4d}
.kp-pos__block-kopf{display:flex;align-items:center;gap:.45rem;margin-bottom:.55rem}
.kp-pos__block-kopf h4{margin:0;font-size:.95rem}
.kp-pos__block-symbol{font-size:1rem;opacity:.75}
.kp-pos__block--input{border-left:4px solid #1c5fb8}
.kp-pos__block--output{border-left:4px solid #1a7f4b}
.kp-pos__block--uhr{border-left:4px solid #c97a00}
[data-kp-theme="dark"] .kp-pos__block--input{border-left-color:#4b8cff}
[data-kp-theme="dark"] .kp-pos__block--output{border-left-color:#3fbf78}
[data-kp-theme="dark"] .kp-pos__block--uhr{border-left-color:#ffb04d}

.kp-pos__werte{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.kp-pos__wert{position:relative;padding:.6rem .65rem;border-radius:8px;
  background:var(--kp-flaeche,#fff);border:1px solid var(--kp-rahmen,#dde4ea)}
[data-kp-theme="dark"] .kp-pos__wert{background:#0f1a24;border-color:#2c3e4d}
.kp-pos__wert-haken{position:absolute;top:.4rem;right:.5rem;font-size:.8rem;
  font-weight:700;color:#1a7f4b}
.kp-pos__wert--fehlt{border-color:rgba(208,59,59,.45);
  background:rgba(208,59,59,.06)}
.kp-pos__wert--fehlt .kp-pos__wert-haken{color:#c0392b}
[data-kp-theme="dark"] .kp-pos__wert-haken{color:#3fbf78}
.kp-pos__wert-titel{display:block;font-size:.63rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--kp-text-schwach,#687887)}
.kp-pos__wert-zahl{display:block;font-size:1.75rem;font-weight:700;line-height:1.15}
.kp-pos__wert-leer{display:block;font-size:1rem;font-weight:600;opacity:.6;
  line-height:1.9}
.kp-pos__wert-quelle{display:block;font-size:.6rem;opacity:.7}
[data-kp-theme="dark"] .kp-pos__wert-titel{color:#8fa3b3}
.kp-pos__fehlt{margin:.55rem 0 0;font-size:.78rem;color:#8c1f1f;font-weight:600}
[data-kp-theme="dark"] .kp-pos__fehlt{color:#ffb3b3}

.kp-pos__output{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.kp-pos__output-zeile{display:flex;align-items:center;gap:.5rem;
  padding:.3rem .5rem;border-radius:6px;font-size:.85rem;
  background:var(--kp-flaeche,#fff);border:1px solid var(--kp-rahmen,#dde4ea)}
[data-kp-theme="dark"] .kp-pos__output-zeile{background:#0f1a24;border-color:#2c3e4d}
.kp-pos__output-haken{display:inline-flex;width:1.1rem;height:1.1rem;flex:none;
  align-items:center;justify-content:center;border-radius:4px;font-size:.75rem;
  font-weight:700;border:1.5px solid var(--kp-rahmen,#dde4ea)}
.kp-pos__output-zeile--da{border-color:var(--kp-gruen-rand,rgba(26,127,75,.45));
  background:rgba(26,127,75,.07)}
.kp-pos__output-zeile--da .kp-pos__output-haken{background:#1a7f4b;
  border-color:#1a7f4b;color:#fff}
[data-kp-theme="dark"] .kp-pos__output-zeile--da .kp-pos__output-haken{
  background:#3fbf78;border-color:#3fbf78;color:#0d1520}
.kp-pos__neu{margin-left:auto;font-size:.58rem;font-weight:700;padding:.05rem .35rem;
  border-radius:8px;background:rgba(250,178,25,.2);color:#7a5800}
[data-kp-theme="dark"] .kp-pos__neu{background:rgba(250,178,25,.18);color:#ffd479}

.kp-pos__uhr-zeit{font-size:2.6rem;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.kp-pos__uhr-zeit--laeuft{color:#c97a00}
[data-kp-theme="dark"] .kp-pos__uhr-zeit--laeuft{color:#ffb04d}
.kp-pos__uhr-stand{margin:.1rem 0 .55rem;font-size:.78rem;
  color:var(--kp-text-schwach,#687887)}
[data-kp-theme="dark"] .kp-pos__uhr-stand{color:#8fa3b3}
.kp-pos__uhr-knoepfe{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.kp-pos__uhr-uebernehmen{font-size:.82rem}
.kp-pos__uhr-uebernommen{margin:.45rem 0 0;font-size:.8rem;font-weight:600;
  color:#1a7f4b}
[data-kp-theme="dark"] .kp-pos__uhr-uebernommen{color:#3fbf78}

/* Das Grün eine Nummer kleiner.
 *
 * Vier große grüne Balken untereinander zogen den Blick auf den Abschluss,
 * obwohl die Zahlen darüber die Information sind. Der Startknopf bleibt
 * kräftig — er ist die Handlung —, aber er brüllt nicht mehr. */
.kp-arb__fertig{background:transparent;border:2px solid var(--kp-gruen);
  color:var(--kp-gruen);font-weight:700}
.kp-arb__fertig:hover{background:var(--kp-gruen);border-color:var(--kp-gruen);
  color:#fff}
[data-kp-theme="dark"] .kp-arb__fertig:hover{color:#0d1520}

/* Die Kettenpunkte sind Knöpfe — sie müssen sich auch so anfühlen. */
button.kp-pos__kette-punkt{background:none;border:none;padding:.2rem .1rem;
  cursor:pointer;font:inherit;color:inherit}
button.kp-pos__kette-punkt:disabled{cursor:default}
button.kp-pos__kette-punkt:not(:disabled):hover .kp-pos__kette-kreis{
  border-color:var(--kp-akzent,#1c5fb8)}
button.kp-pos__kette-punkt:not(:disabled):hover .kp-pos__kette-name{
  color:inherit;text-decoration:underline}

/* ── Meine Arbeit: Bedienung links, Stationen rechts ─────────────────────
 *
 * "Diese beiden Fenster sind ja ein Block, und dieser Block wird ziemlich
 * in die Länge gezogen. Tu den mal links platzieren und rechts davon die
 * Einzelkategorien." (Auftraggeber, 2026-09-14)
 *
 * Vier kurze Knopfreihen untereinander brauchten die volle Breite und
 * schoben die eigentliche Arbeit nach unten. Jetzt: links WAS gezeigt
 * wird, rechts WORAN gearbeitet wird.
 */
.kp-arb__leiste{display:flex;align-items:flex-start;gap:.8rem;
  margin-bottom:.9rem;flex-wrap:wrap}
.kp-arb__leiste > .kp-arb__steuerung{flex:0 0 auto;min-width:19rem;margin:0}
.kp-arb__leiste > .kp-arb__stationen{flex:1 1 22rem;margin:0;align-content:flex-start}

@media (max-width:760px){
  .kp-arb__leiste{flex-direction:column}
  .kp-arb__leiste > .kp-arb__steuerung,
  .kp-arb__leiste > .kp-arb__stationen{width:100%}
}

/* ── Der Zoom wirkt NUR auf den Inhalt ───────────────────────────────────
 *
 * "Wenn Du diesen Zoomfaktor anwendest, dann wende ihn bitte nur auf die
 * einzelnen Kacheln weiter unten an, nicht auf das Auswahlzeug. Das soll
 * alles schön klein weiter oben bleiben."
 *
 * Genau richtig: Die Bedienung fasst man einmal an, den Inhalt liest man
 * aus zwei Metern. Die Schriftgröße gehört deshalb an die Karten und an
 * die Positionsansicht — nicht an die Hülle.
 */
.kp-arb{font-size:1rem}
.kp-arb__leiste,
.kp-arb__listenkopf{font-size:1rem}

.kp-arb__karten{font-size:var(--kp-arb-basis)}
.kp-arb--gross .kp-arb__karten{font-size:1.3rem}
.kp-arb--riesig .kp-arb__karten{font-size:1.7rem}

/* Die Stationsreiter bleiben klein und ruhig. */
.kp-arb__stationen{gap:.35rem}
.kp-arb__station{font-size:.88rem;padding:.4rem .7rem}
.kp-arb__station-zahl{font-size:.8rem}
.kp-arb__schalter{font-size:.75rem;margin-left:0;flex-basis:100%}

/* ── Die Bühne: links die Liste, rechts der eine Artikel ─────────────────
 *
 * "Da ist es schön gelöst — im Grunde fast ein Viertel vom Blatt ganz
 * rechts, in dem man die ganzen Informationen sehen kann, die es zu
 * diesem Artikel gibt. Dieses Fenster, was sich öffnet, vielleicht sogar
 * noch breiter." (Auftraggeber, 2026-09-14)
 *
 * Breiter als ein Viertel: 38 % statt 25 %. Rechts stehen Eingabefelder,
 * nicht nur Text — bei einem Viertel steht jedes Feld allein in seiner
 * Zeile, und aus zwei Spalten Erfassung wird eine endlose Rolle.
 */
.kp-arb__buehne{display:flex;align-items:flex-start;gap:1rem}
.kp-arb__liste{flex:1 1 auto;min-width:0}

.kp-arb__buehne--geteilt > .kp-arb__liste{flex:1 1 55%;min-width:0}

.kp-arb__tafel{
  flex:0 0 38%;
  min-width:25rem;
  max-height:calc(100vh - 7rem);
  overflow-y:auto;
  position:sticky;
  top:.5rem;
  font-size:1rem;
}

/* Die Tafel trägt ihren eigenen Rahmen — das Panel darin soll ihn nicht
   verdoppeln. */
.kp-arb__tafel > .kp-skill-panel{margin:0;height:100%}

/* Der Kopf der Tafel bleibt stehen, auch wenn man darin scrollt: Der
   Schließen-Knopf muss immer erreichbar sein. */
.kp-st__tafelkopf{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin:-.25rem 0 .6rem;
  padding-bottom:.5rem;border-bottom:1px solid rgba(0,0,0,.08);
}
.kp-st__tafeltitel{
  font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#6b7280;
}
.kp-st__schliessen{
  border:0;background:transparent;line-height:1;
  font-size:1.5rem;color:#6b7280;cursor:pointer;
  padding:0 .35rem;border-radius:.3rem;
}
.kp-st__schliessen:hover{background:rgba(0,0,0,.06);color:#111}

/* Die offene Karte in der Liste zeigt, wozu die Tafel gehört. */
.kp-arb__karte--offen{
  border-color:var(--kp-gruen, #1a7a4c);
  box-shadow:0 0 0 2px var(--kp-gruen, #1a7a4c) inset;
}

/* In der schmalen Spalte bleibt die Kartenreihe einspaltig — zwei halbe
   Karten nebeneinander sind schlechter als eine ganze. */
.kp-arb__buehne--geteilt .kp-arb__karten{grid-template-columns:1fr}

/* Unter 1200 px passen zwei Spalten nicht mehr nebeneinander: Dann steht
   die Tafel wieder unter der Liste, in voller Breite. */
@media (max-width:1200px){
  .kp-arb__buehne{flex-direction:column}
  .kp-arb__buehne--geteilt > .kp-arb__liste,
  .kp-arb__tafel{width:100%;flex:1 1 auto;min-width:0}
  .kp-arb__tafel{position:static;max-height:none;overflow:visible}
}

/* ══ Input und Output ═══════════════════════════════════════════════════
 *
 * "Eins der wichtigsten Sachen fehlt mir hier immer noch: die Input und
 * Output." (Auftraggeber, mehrfach)
 *
 * Der Block war die ganze Zeit da — nur hieß er anders und stand
 * untereinander. Jetzt: zwei Kästen nebeneinander, gleich unter dem
 * Fortschritt, mit den Namen, die er benutzt.
 */
.kp-pos__paar{display:flex;gap:.7rem;align-items:stretch;
  flex-wrap:wrap;margin:.7rem 0}
.kp-pos__paar > .kp-pos__block{flex:1 1 15rem;min-width:0;margin:0}

/* Unter 620 px Tafelbreite stapeln sie — zwei halbe Kästen sind
   schlechter als einer ganzer. */
@media (max-width:1400px){
  .kp-pos__paar > .kp-pos__block{flex:1 1 100%}
}
@media (min-width:1700px){
  .kp-pos__paar > .kp-pos__block{flex:1 1 15rem}
}

/* Der Zähler im Kopf: "5 von 5 da" sagt, wie viel fehlt. Ein Balken sagt
   nur, DASS etwas fehlt. */
.kp-pos__block-zahl{margin-left:auto;font-size:.72rem;font-weight:700;
  padding:.1rem .45rem;border-radius:999px;
  background:rgba(26,122,76,.12);color:#166a42;white-space:nowrap}
.kp-pos__block-zahl--fehlt{background:rgba(208,110,32,.15);color:#9a5410}
.kp-pos__block-zahl--offen{background:rgba(0,0,0,.07);color:#5b6672}
[data-kp-theme="dark"] .kp-pos__block-zahl{background:rgba(70,200,140,.18);color:#8fe3b8}
[data-kp-theme="dark"] .kp-pos__block-zahl--fehlt{background:rgba(230,140,60,.22);color:#f0b678}
[data-kp-theme="dark"] .kp-pos__block-zahl--offen{background:rgba(255,255,255,.09);color:#9fb0c0}

.kp-pos__block-kopf{display:flex;align-items:center;gap:.4rem}

/* ── Die Karte sagt es auch, ohne dass man sie öffnet ─────────────────── */
.kp-arb__io{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.5em}
.kp-arb__io-marke{display:inline-flex;align-items:center;gap:.3em;
  font-size:.75em;font-weight:700;padding:.15em .5em;border-radius:999px;
  background:rgba(26,122,76,.12);color:#166a42;white-space:nowrap}
.kp-arb__io-marke--fehlt{background:rgba(208,110,32,.15);color:#9a5410}
.kp-arb__io-marke--output{background:rgba(0,0,0,.06);color:#5b6672}
.kp-arb__io-pfeil{font-size:.9em;line-height:1}
[data-kp-theme="dark"] .kp-arb__io-marke{background:rgba(70,200,140,.18);color:#8fe3b8}
[data-kp-theme="dark"] .kp-arb__io-marke--fehlt{background:rgba(230,140,60,.22);color:#f0b678}
[data-kp-theme="dark"] .kp-arb__io-marke--output{background:rgba(255,255,255,.09);color:#9fb0c0}

/* ══ Problem / Abweichung melden ════════════════════════════════════════
 *
 * Ohne eine Stelle für „geht gerade nicht" passiert eines von zwei Dingen:
 * Die Arbeit bleibt still liegen und niemand weiß warum, oder sie wird als
 * „fertig" weggeklickt, damit die Liste stimmt.
 */
.kp-st__problem{margin-top:1rem;padding-top:.8rem;
  border-top:1px solid rgba(0,0,0,.08)}
.kp-st__problem-knopf{width:100%;justify-content:center;
  border:1.5px solid #d06e20;color:#9a5410;background:rgba(208,110,32,.07);
  font-weight:600}
.kp-st__problem-knopf:hover{background:rgba(208,110,32,.15);color:#7d4409}
.kp-st__problem-formular{margin-top:.6rem;display:flex;
  flex-direction:column;gap:.5rem}
.kp-st__problem-schnell{display:flex;gap:.35rem;flex-wrap:wrap}
.kp-st__problem-schnell .btn{font-size:.78rem}

.kp-st__problem-offen{border:1.5px solid #d03b3b;border-radius:9px;
  padding:.7rem .8rem;background:rgba(208,59,59,.07)}
.kp-st__problem-kopf{display:flex;align-items:center;gap:.4rem;
  color:#a32020;margin-bottom:.3rem}
.kp-st__problem-zeichen{font-size:1.1rem;line-height:1}
.kp-st__problem-text{margin:0 0 .25rem;font-weight:600}
.kp-st__problem-quelle{margin:0 0 .5rem;font-size:.78rem;opacity:.75}

.kp-arb__problem{display:flex;align-items:flex-start;gap:.35em;
  margin:.5em 0 0;font-size:.82em;font-weight:600;color:#a32020}
.kp-arb__problem-zeichen{line-height:1.2}
.kp-arb__karte--problem{border-color:#d03b3b}
[data-kp-theme="dark"] .kp-arb__problem{color:#ff9a9a}

/* ══ Die Fußleiste ══════════════════════════════════════════════════════
 *
 * Die Frage, die eine Liste nie beantwortet: Bin ich weiter als heute
 * früh? Eine Liste wird kürzer, aber sie lobt niemanden.
 */
.kp-arb__fuss{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  margin-top:1rem;padding:.6rem .9rem;border-radius:10px;
  background:var(--kp-flaeche,#fff);border:1px solid var(--kp-rahmen,#dde4ea);
  font-size:.9rem}
[data-kp-theme="dark"] .kp-arb__fuss{background:#16202b;border-color:#33445a}
.kp-arb__fuss-teil{display:inline-flex;align-items:center;gap:.4rem}
.kp-arb__fuss-zeichen{opacity:.6}
.kp-arb__fuss-titel{color:#5b6672}
[data-kp-theme="dark"] .kp-arb__fuss-titel{color:#9fb0c0}
.kp-arb__fuss-zahl{font-weight:800;font-size:1.05rem}
.kp-arb__fuss-teil--gut .kp-arb__fuss-zahl{color:#166a42}
.kp-arb__fuss-teil--offen .kp-arb__fuss-zahl{color:#1b5fa8}
.kp-arb__fuss-teil--warnung .kp-arb__fuss-zeichen,
.kp-arb__fuss-teil--warnung .kp-arb__fuss-zahl{color:#a32020}
.kp-arb__fuss-hinweis{margin-left:auto;font-size:.75rem;opacity:.6}

/* ══ Benutzerwechsel in der Kopfzeile ═══════════════════════════════════
 *
 * Der feste Benutzer sitzt in der Entwicklung und hatte in der Werkstatt
 * nichts zu tun — „Meine Aufgaben" blieb leer. Eine Ansicht, die beim
 * Vorführen leer bleibt, beweist nichts.
 */
.kp-benutzer--waehlbar{position:relative;cursor:pointer;
  border-radius:9px;padding:.2rem .4rem}
.kp-benutzer--waehlbar:hover{background:rgba(0,0,0,.05)}
[data-kp-theme="dark"] .kp-benutzer--waehlbar:hover{background:rgba(255,255,255,.08)}
.kp-benutzer__pfeil{margin-left:.35rem;opacity:.55;font-size:.7rem}

.kp-benutzer__menue{position:absolute;top:calc(100% + .4rem);right:0;
  z-index:1200;min-width:15rem;padding:.5rem;border-radius:10px;
  background:var(--kp-flaeche,#fff);border:1px solid var(--kp-rahmen,#dde4ea);
  box-shadow:0 10px 30px rgba(0,0,0,.18);text-align:left}
[data-kp-theme="dark"] .kp-benutzer__menue{background:#16202b;border-color:#33445a}
.kp-benutzer__menue-kopf{margin:0 .3rem .4rem;font-size:.75rem;opacity:.65}
.kp-benutzer__menue-gruppe{margin:.5rem .3rem .2rem;font-size:.68rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
.kp-benutzer__menue-eintrag{display:block;width:100%;text-align:left;
  border:0;background:transparent;padding:.35rem .5rem;border-radius:7px;
  font-size:.88rem;cursor:pointer;color:inherit}
.kp-benutzer__menue-eintrag:hover{background:rgba(26,122,76,.12)}
.kp-benutzer__menue-eintrag--aktiv{font-weight:700;
  background:rgba(26,122,76,.16)}
.kp-benutzer__menue-fuss{margin:.5rem .3rem 0;font-size:.7rem;opacity:.55;
  border-top:1px solid rgba(0,0,0,.08);padding-top:.4rem}

/* Im Paar wird es eng: zwei Kästen nebeneinander in einer 38-%-Tafel sind
   je rund 260 px. Die großen Zahlen bleiben groß genug zum Lesen, aber sie
   stehen zu zweit in einer Reihe — sonst ist der Eingangskasten dreimal so
   hoch wie der Ausgangskasten daneben und das Paar kippt optisch um. */
.kp-pos__paar .kp-pos__werte{grid-template-columns:1fr 1fr;gap:.4rem}
.kp-pos__paar .kp-pos__wert{padding:.45rem .5rem}
.kp-pos__paar .kp-pos__wert-zahl{font-size:1.2rem}
.kp-pos__paar .kp-pos__wert-leer{font-size:.85rem;line-height:1.7}
.kp-pos__paar .kp-pos__block{align-self:flex-start}

/* ══ Die Stationen als Kette ════════════════════════════════════════════
 *
 * "Häng diese einzelnen Prozessschritte irgendwie wie an eine Art
 * Workflow-Baumstruktur, dass die miteinander verbunden sind, dass es eher
 * so aussieht, dass eins nach dem anderen sich hier entlangarbeitet."
 * (Auftraggeber, 2026-09-14)
 *
 * Elf gleich aussehende Knöpfe sagen nicht, dass Rüsten VOR dem Fräsen
 * kommt. Die Nummer und der Verbindungsstrich sagen es.
 */
.kp-arb__stationen{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.kp-arb__glied{display:flex;align-items:center;position:relative}

/* Der Strich zum Vorgänger. Er gehört zum Glied, nicht zum Knopf — sonst
   stünde er beim Umbruch am Zeilenanfang in der Luft. */
.kp-arb__glied::before{content:"";width:.85rem;height:2px;
  background:var(--kp-rahmen,#cfd8e0);flex:0 0 auto}
.kp-arb__glied--erstes::before{display:none}

.kp-arb__station{display:inline-flex;align-items:center;gap:.35rem;
  margin:.18rem 0}
.kp-arb__station-nr{display:inline-flex;align-items:center;
  justify-content:center;width:1.15rem;height:1.15rem;border-radius:50%;
  background:rgba(0,0,0,.09);font-size:.68rem;font-weight:800;
  flex:0 0 auto;line-height:1}
.kp-arb__station--aktiv .kp-arb__station-nr{background:rgba(255,255,255,.3)}
[data-kp-theme="dark"] .kp-arb__station-nr{background:rgba(255,255,255,.14)}

/* ENTWURF heißt: Felder nicht aus der Datei belegt. Das muss man sehen. */
.kp-arb__station--entwurf .kp-arb__station-name::after{content:" ·E";
  font-size:.7em;opacity:.55;font-weight:700}

/* Der Schalter „nur Stationen mit Arbeit" gehört nicht in die Kette. */
.kp-arb__stationen > .kp-arb__schalter{flex-basis:100%;margin-top:.35rem}

/* ══ Weitergereicht aus den Schritten davor ═════════════════════════════
 *
 * "Das sind die Eingaben, die sich aus der vorherigen Station ergeben …
 * auch wenn das im vorherigen Prozessschritt fehlen sollte, solltest Du
 * das hier mitreichen."
 *
 * Deshalb steht hier auch das Fehlende. „Sägezeit fehlt noch" ist eine
 * Information — eine leere Zeile ist keine.
 */
.kp-pos__weiter{margin-top:.7rem}
.kp-pos__weiter-titel{margin:0 0 .4rem;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--kp-text-schwach,#687887)}
.kp-pos__weiter-gruppe{margin-bottom:.45rem;padding:.4rem .5rem;
  border-radius:7px;border:1px solid var(--kp-rahmen,#dde4ea);
  background:var(--kp-flaeche,#fff)}
[data-kp-theme="dark"] .kp-pos__weiter-gruppe{background:#0f1a24;border-color:#2c3e4d}
.kp-pos__weiter-gruppe--offen{opacity:.82;border-style:dashed}
.kp-pos__weiter-kopf{display:flex;align-items:baseline;gap:.4rem;
  font-size:.82rem;flex-wrap:wrap}
.kp-pos__weiter-zeichen{color:#1a7f4b;font-weight:700}
.kp-pos__weiter-gruppe--offen .kp-pos__weiter-zeichen{color:#94a3b0}
.kp-pos__weiter-zahl{font-size:.7rem;font-weight:700;padding:.05rem .35rem;
  border-radius:999px;background:rgba(0,0,0,.07)}
[data-kp-theme="dark"] .kp-pos__weiter-zahl{background:rgba(255,255,255,.1)}
.kp-pos__weiter-wer{margin-left:auto;font-size:.7rem;opacity:.65}

.kp-pos__weiter-liste{list-style:none;margin:.3rem 0 0;padding:0}
.kp-pos__weiter-zeile{display:flex;gap:.5rem;align-items:baseline;
  font-size:.82rem;padding:.12rem 0;
  border-top:1px solid rgba(0,0,0,.05)}
.kp-pos__weiter-zeile:first-child{border-top:0}
.kp-pos__weiter-name{flex:1 1 auto;color:var(--kp-text-schwach,#687887)}
.kp-pos__weiter-wert{flex:0 0 auto;font-weight:700;text-align:right}
.kp-pos__weiter-zeile--fehlt .kp-pos__weiter-wert{color:#9a5410;
  font-weight:600;font-style:italic}
.kp-pos__weiter-zeile--warnung .kp-pos__weiter-wert{color:#a32020}
.kp-pos__weiter-zeile--zeit .kp-pos__weiter-wert{color:#166a42}
[data-kp-theme="dark"] .kp-pos__weiter-zeile--fehlt .kp-pos__weiter-wert{color:#f0b678}

/* Im engen Paar bekommt der Eingang mehr Luft als der Ausgang: Er trägt
   die ganze Vorgeschichte, der Ausgang nur die eigenen Felder. */
.kp-pos__paar > .kp-pos__block--input{flex:1.25 1 17rem}

/* ══ Zeit von Hand ══════════════════════════════════════════════════════
 *
 * Der Knopf „Gemessene Zeit eintragen" schrieb in das erste Zeitfeld der
 * Station — an Stationen ohne Zeitfeld tat er sichtbar nichts. Jetzt hat
 * die Uhr ihr eigenes Feld, an jeder Station.
 */
.kp-pos__uhr-hand{margin:.6rem 0 .4rem;padding:.55rem .6rem;border-radius:8px;
  background:rgba(0,0,0,.04);border:1px dashed var(--kp-rahmen,#cfd8e0)}
[data-kp-theme="dark"] .kp-pos__uhr-hand{background:rgba(255,255,255,.05)}
.kp-pos__uhr-hand-titel{display:block;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:.25rem;
  color:var(--kp-text-schwach,#687887)}
.kp-pos__uhr-hand-feld{max-width:9rem;font-size:1.15rem;font-weight:700}
.kp-pos__uhr-hand-hinweis{margin:.3rem 0 0;font-size:.72rem;opacity:.7}

/* ══ Problem melden: antippen statt tippen ══════════════════════════════
 *
 * "Die Kollegen an dieser Maschine können zum Teil auch nicht richtig
 * schreiben und würden lieber tippen oder irgendwas ankreuzen."
 */
.kp-st__problem-frage{margin:.6rem 0 .35rem;font-size:.82rem;font-weight:700}
.kp-st__problem-wahl{display:flex;flex-wrap:wrap;gap:.35rem}
.kp-st__problem-marke{border:1.5px solid var(--kp-rahmen,#cfd8e0);
  background:var(--kp-flaeche,#fff);color:inherit;
  border-radius:999px;padding:.42rem .8rem;font-size:.85rem;font-weight:600;
  cursor:pointer;line-height:1.2}
.kp-st__problem-marke:hover{border-color:#d06e20}
.kp-st__problem-marke--an{background:#d03b3b;border-color:#d03b3b;color:#fff}
[data-kp-theme="dark"] .kp-st__problem-marke{background:#16202b;border-color:#3a4c60}
.kp-st__problem-senden{margin-top:.5rem;align-self:flex-start;
  padding:.5rem 1.1rem;font-weight:700}
.kp-st__problem-senden:disabled{opacity:.45}

/* ══ Fußleiste: die Zahlen lassen sich aufmachen ════════════════════════ */
.kp-arb__fuss-teil--klickbar{border:0;background:transparent;cursor:pointer;
  padding:.25rem .5rem;border-radius:7px;font:inherit;color:inherit}
.kp-arb__fuss-teil--klickbar:hover{background:rgba(0,0,0,.06)}
[data-kp-theme="dark"] .kp-arb__fuss-teil--klickbar:hover{background:rgba(255,255,255,.09)}

.kp-arb__filtermarke{display:flex;align-items:center;gap:.6rem;
  margin-bottom:.6rem;padding:.4rem .7rem;border-radius:8px;
  background:rgba(27,95,168,.1);font-size:.85rem;font-weight:600}
[data-kp-theme="dark"] .kp-arb__filtermarke{background:rgba(90,160,230,.16)}

.kp-arb__erledigt{display:flex;align-items:baseline;gap:.6rem;
  padding:.45rem .7rem;border-radius:8px;
  border:1px solid var(--kp-rahmen,#dde4ea);background:var(--kp-flaeche,#fff);
  font-size:.9rem}
[data-kp-theme="dark"] .kp-arb__erledigt{background:#16202b;border-color:#33445a}
.kp-arb__erledigt-haken{color:#1a7f4b;font-weight:800}
.kp-arb__erledigt-station{color:var(--kp-text-schwach,#687887)}
.kp-arb__erledigt-wer{margin-left:auto;font-size:.8rem;opacity:.75}
.kp-arb__erledigt-marke{font-size:.7rem;font-weight:700;padding:.08rem .4rem;
  border-radius:999px;background:rgba(0,0,0,.08)}