/*
  Aufgaben- und Projektcockpit – Darstellung.

  Regel (Entscheidung E5): In dieser Datei steht KEIN Farbwert. Alle Farben
  kommen aus dem :root-Block von todo.css, dort unter „Cockpit". Wer das
  Aussehen ändern will, ändert diesen Block – sonst nichts.

  Der Aufbau unterscheidet sich bewusst von den Entwürfen in 02_Screens: Dort
  nimmt die dunkle Leiste das ganze Fenster ein. Hier steht darüber weiterhin
  die Kopfleiste der Anwendung (Menü, Home, Chat). Die Leiste ist deshalb
  `sticky` und nicht `fixed` – sie klebt im Inhaltsbereich, sobald die
  Kopfleiste weggescrollt ist.

  Form, Abstände, Schrift und Touch-Größe kommen aus bb-theme.css.
*/

/* ---------- Rahmen ---------- */

.cp {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0.5rem 0 2rem;
    font-family: var(--bb-font, system-ui, sans-serif);
    color: var(--todo-text);
}

/* ---------- Reiterleiste ---------- */

.cp-leiste {
    position: sticky;
    top: 0.5rem;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
    border-radius: var(--todo-card-radius);
    background: var(--cp-leiste-bg);
    overflow: hidden;
}

.cp-leiste-kopf {
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid var(--cp-leiste-trenner);
}

.cp-leiste-marke {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cp-leiste-marke);
}

.cp-leiste-sub {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--cp-leiste-sub);
}

.cp-leiste-liste {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex: 1;
}

.cp-leiste-eintrag {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    min-height: var(--bb-tap, 2.75rem);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--cp-leiste-text) !important;
    border-left: 3px solid transparent;
    transition: background var(--bb-motion, 0.15s) ease;
}

.cp-leiste-eintrag:hover {
    background: var(--cp-leiste-hover-bg);
    color: var(--cp-leiste-text-aktiv) !important;
    text-decoration: none;
}

.cp-leiste-eintrag.ist-aktiv {
    background: var(--cp-leiste-aktiv-bg);
    color: var(--cp-leiste-text-aktiv) !important;
    border-left-color: var(--cp-leiste-text-aktiv);
}

.cp-leiste-zeichen {
    width: 1.1rem;
    text-align: center;
    flex: none;
    opacity: 0.9;
}

.cp-leiste-text {
    min-width: 0;
}

/*
  Die Marke am Reiter – „hier liegt Eingang, den noch niemand angesehen hat".
  Was gezählt wird, steht in Reiterzahlen.cs.

  Sie steht am RECHTEN Rand der Zeile, nicht am Symbol. In der Leiste stehen
  die Reiter untereinander; eine Spalte rechts liest sich als eine Liste von
  Zahlen. Am Symbol geklebt – so wie der Chat-Badge in der Kopfleiste, wo nur
  ein einzelnes Icon steht – wären es Punkte an sechs verschiedenen Stellen.

  Auf schmalen Geräten wird aus der Leiste eine waagerechte Reihe. Dort gibt es
  keinen freien Platz, `margin-left: auto` wird dann zu 0 und die Zahl rückt
  von selbst hinter den Text.
*/
.cp-leiste-zahl {
    margin-left: auto;
    flex: none;
    min-width: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--cp-leiste-zahl-bg);
    color: var(--cp-leiste-zahl-text);
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* `.cp-leiste-trenner` stand hier bis 24.08.2026 – er trennte die
   Fachbereiche vom Werkzeug „Diagnose". Der Reiter ist weg, der Trenner
   hatte danach nichts mehr zu trennen. */

.cp-leiste-fuss {
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--cp-leiste-trenner);
    font-size: 0.8rem;
    color: var(--cp-leiste-sub);
}

.cp-leiste-fuss-link {
    display: inline-block;
    margin-top: 0.35rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--cp-leiste-text) !important;
}

.cp-leiste-fuss-link:hover {
    color: var(--cp-leiste-text-aktiv) !important;
}

/* ---------- Bühne ---------- */

.cp-buehne {
    min-width: 0;
}

.cp-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.25rem 0 1rem;
}

.cp-kopf-titel {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cp-titel);
}

.cp-kopf-sub {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--todo-text-leise);
}

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

/* ---------- Knöpfe ---------- */

/*
  Das `!important` auf der Schriftfarbe ist kein Schmuck, sondern Notwehr:
  Beide Hosts färben in ihrer app.css ALLE Links im Inhalt hellblau ein –
  ebenfalls mit `!important`. Ein `<a class="cp-btn cp-btn-haupt">` bekam so
  hellblaue Schrift auf dunkelblauem Grund und war kaum zu lesen. Als
  <button> gestaltete Knöpfe waren nie betroffen, deshalb fiel es nur an
  einzelnen Stellen auf.
*/
.cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bb-tap, 2.75rem);
    padding: 0 1rem;
    border-radius: var(--bb-radius-md, 8px);
    border: 1px solid var(--cp-btn-rand);
    background: var(--cp-btn-bg);
    color: var(--cp-btn-text) !important;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none !important;
}

/*
  Bisher gab es GAR KEINEN Hover — man sah einem Knopf nicht an, dass er
  klickbar ist (Felix, 17.08.2026). `.cp-btn-haupt` bleibt aussen vor: der
  ist bereits voll eingefärbt, ein Hover in derselben Randfarbe würde nichts
  zeigen, und ein weisser Text auf hellem Hover-Grund wäre unlesbar.
*/
.cp-btn:not(.cp-btn-haupt):hover:not(:disabled) {
    border-color: var(--cp-titel);
    background: var(--cpf-prio-bg);
}

.cp-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------- Stand und Aktualisieren ---------- */

/*
  „Stand 14:32" IST der Aktualisieren-Knopf (StandKnopf.razor). Er sitzt in der
  Kopfzeile neben den Aktionen des Reiters und ist bewusst LEISER als sie: Er
  ist nichts, was man tun will, sondern etwas, das man wissen will — und erst
  im zweiten Schritt ein Griff. Deshalb die Pillenform statt der Knopfform der
  Nachbarn und die zurückgenommene Schrift.

  Aufbauend auf `.cp-btn`, nicht daneben: Tap-Grösse, Hover und der
  Disabled-Zustand sollen dieselben sein wie bei jedem anderen Knopf.
*/
.cp-stand {
    gap: 0.35rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    color: var(--cp-stand-text) !important;
    font-size: 0.85rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cp-stand:hover:not(:disabled) {
    color: var(--cp-btn-text) !important;
}

/*
  Beim Laden dreht sich das Zeichen — die Rückmeldung, ohne die ein Griff
  folgenlos wirkt und ein zweites Mal getan wird (E34). Der Knopf ist dabei
  gesperrt, aber nicht blass: Ein drehendes Zeichen bei 60 % Deckkraft sieht
  nach Fehler aus, nicht nach Arbeit.
*/
.cp-stand.ist-aktiv {
    opacity: 1;
}

.cp-stand-zeichen {
    font-size: 1rem;
    line-height: 1;
}

.cp-stand.ist-aktiv .cp-stand-zeichen {
    display: inline-block;
    animation: cp-lade-dreh 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .cp-stand.ist-aktiv .cp-stand-zeichen {
        animation: cp-stand-pulst 1.4s ease-in-out infinite;
    }

    @keyframes cp-stand-pulst {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.35; }
    }
}

/*
  Ladering IM Knopf: Bei einer Sammelaktion auf viele Aufgaben lief die
  Schleife bisher unsichtbar durch — kein Unterschied zwischen "arbeitet"
  und "hängt". Derselbe Ring wie `.cp-lade-ring`, nur knopfgross.
*/
.cpd-mini-ring {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    border: 2px solid var(--cp-lade-ring-bg);
    border-top-color: var(--cp-lade-ring);
    animation: cp-lade-dreh 0.8s linear infinite;
    vertical-align: -0.1em;
}

.cp-btn-haupt,
a.cp-btn-haupt:hover,
a.cp-btn-haupt:focus {
    background: var(--cp-btn-haupt-bg);
    border-color: var(--cp-btn-haupt-bg);
    color: var(--cp-btn-haupt-text) !important;
}

.cpf-btn-loeschen {
    color: var(--cpf-loeschen-text) !important;
}

/*
  ---------- Info-Knopf (Punkt 4, Felix 17.08.2026) ----------
  Erklärungen, die eine Regel beschreiben statt nur, was ohnehin zu sehen ist,
  stehen jetzt hinter einem Tap statt fest im Text — kein `title`, denn das
  zeigt sich nur beim Hover, und auf dem Handy mit Handschuhen gibt es keinen.
  Siehe InfoKnopf.razor.
*/

.info-knopf-wrap {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.info-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 0.3rem;
    padding: 0;
    border: 1px solid var(--cpf-prio-rand);
    border-radius: 50%;
    background: var(--cpf-prio-bg);
    color: var(--cp-titel);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.info-knopf:hover {
    border-color: var(--cp-titel);
}

.info-popover {
    position: absolute;
    z-index: 20;
    top: 1.9rem;
    left: 0;
    width: max-content;
    max-width: 20rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
    box-shadow: var(--bb-shadow-sm);
    color: var(--todo-text);

    /* Der Knopf steht auch in Überschriften — und `.cpf-karte-kopf` ist
       GROSSGESCHRIEBEN, fett und weit gesperrt. Ohne diese Rücksetzung erbt der
       Erklärtext das und wird unlesbar. Die Rücksetzung gehört an die
       Komponente, nicht an jede Einbaustelle. */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    text-align: left;
}

/* Wächst nach links statt nach rechts — für einen Knopf nahe am rechten Rand
   eines schmalen oder waagerecht scrollenden Rahmens (Felix, 19.08.2026,
   „Vorrang" in der eingebetteten Erfassungsmaske). Siehe InfoKnopf.razor. */
.info-popover.ist-links {
    left: auto;
    right: 0;
}

.info-popover-titel {
    margin-bottom: 0.3rem;
    font-weight: 800;
}

.info-popover-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--todo-text-leise);
}

/* Mehrere Absätze in einer Erklärung: erster und letzter ohne Aussenabstand,
   damit das Kärtchen nicht auseinanderfällt. */
.info-popover-text p {
    margin: 0 0 0.55rem;
}

.info-popover-text p:last-child {
    margin-bottom: 0;
}

.info-popover-zu {
    display: block;
    margin-top: 0.6rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cp-titel);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Auf dem Handy darf das Kärtchen nicht über den Bildschirmrand hinauslaufen. */
@media (max-width: 640px) {
    .info-popover {
        max-width: min(20rem, 80vw);
    }
}

/* ---------- Karten, Hinweise, Meldungen ---------- */

.cp-karte {
    background: var(--todo-card-bg);
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    padding: 1rem;
    margin-bottom: 0.9rem;
}

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

.cp-karte-titel {
    font-size: 1.05rem;
    font-weight: 800;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.cp-karte-nummer {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--todo-text-sehr-leise);
}

.cp-karte-zweck {
    margin-top: 0.2rem;
    font-size: 0.88rem;
    color: var(--todo-text-leise);
}

.cp-karte-zeilen {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--todo-text-leise);
}

.cp-karte-leer {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-block-bg);
    font-size: 0.9rem;
    color: var(--todo-text-leise);
}

.cp-hinweis {
    padding: 1rem;
    color: var(--todo-text-leise);
}

.cp-fehler {
    margin: 0.5rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--bb-radius-md, 8px);
    background: var(--cp-marke-schlecht-bg);
    color: var(--cp-marke-schlecht-text);
    font-weight: 600;
}

.cp-fussnote {
    padding: 0.5rem 0 1rem;
    font-size: 0.82rem;
    color: var(--todo-text-sehr-leise);
}

/* ---------- Urteil ---------- */

.cp-urteil {
    border: 1px solid;
    border-radius: var(--todo-card-radius);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.cp-urteil.ist-gut {
    background: var(--cp-urteil-gut-bg);
    border-color: var(--cp-urteil-gut-rand);
}

.cp-urteil.ist-warnung {
    background: var(--cp-urteil-warn-bg);
    border-color: var(--cp-urteil-warn-rand);
}

.cp-urteil-titel {
    font-size: 1.05rem;
    font-weight: 800;
}

.cp-urteil-text {
    margin-top: 0.3rem;
    font-size: 0.92rem;
    color: var(--todo-text-leise);
}

.cp-urteil-fuss {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--todo-text-sehr-leise);
}

/* Beanstandete Spalten im Urteilsblock: vorhanden, aber nicht brauchbar */
.cp-urteil-liste {
    margin: 0.5rem 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
}

.cp-urteil-liste li {
    margin-bottom: 0.2rem;
}

/* ---------- Befundtabelle ---------- */

.cp-tabelle {
    width: 100%;
    margin-top: 0.7rem;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.cp-tabelle th {
    text-align: left;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--todo-text-sehr-leise);
    border-bottom: 1px solid var(--todo-card-border);
}

.cp-tabelle td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--todo-card-border);
}

.cp-tabelle tr.ist-fehlend td {
    background: var(--cp-zeile-fehlend-bg);
}

.cp-tabelle-leise {
    color: var(--todo-text-leise);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.cp-marke {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--todo-block-bg);
    color: var(--todo-text-leise);
    font-size: 0.78rem;
    font-weight: 700;
}

.cp-marke.ist-gut {
    background: var(--cp-marke-gut-bg);
    color: var(--cp-marke-gut-text);
}

.cp-marke.ist-schlecht {
    background: var(--cp-marke-schlecht-bg);
    color: var(--cp-marke-schlecht-text);
}

/* ---------- Platzhalter ---------- */

.cp-platzhalter {
    background: var(--todo-card-bg);
    border: 1px dashed var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.cp-platzhalter-zeichen {
    font-size: 2rem;
    color: var(--todo-text-sehr-leise);
}

.cp-platzhalter-titel {
    margin-top: 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.cp-platzhalter-text {
    margin: 0.5rem auto 0;
    max-width: 52ch;
    font-size: 0.92rem;
    color: var(--todo-text-leise);
}

/* ==========================================================================
   Erfassungsmaske (cpf-) und Vorlagen (cpv-)
   ========================================================================== */

/* ---------- Typ-Auswahl ---------- */

.cpf-typleiste {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
}

.cpf-pillen {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cpf-pille {
    min-height: var(--bb-tap, 2.75rem);
    padding: 0 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--cpf-pille-rand);
    background: var(--cpf-pille-bg);
    color: var(--cpf-pille-text);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.cpf-pille.ist-aktiv {
    background: var(--cpf-pille-aktiv-bg);
    border-color: var(--cpf-pille-aktiv-bg);
    color: var(--cpf-pille-aktiv-text);
}

.cpf-typtext {
    flex: 1 1 18rem;
    min-width: 0;
    font-size: 0.88rem;
    color: var(--todo-text-leise);
}

/* ---------- Vorlagenzeile ---------- */

.cpf-vorlagenzeile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    background: var(--todo-block-bg);
}

.cpf-vorlagenzeile label {
    font-size: 0.88rem;
    font-weight: 700;
}

.cpf-zeilenhinweis {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--todo-text-leise);
}

/* ---------- Spaltenraster ---------- */

.cpf-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 26rem);
    gap: 1.25rem;
    align-items: start;
}

/* Zwei Spalten statt drei – für Masken ohne Seitenspalte (Projekt anlegen) */
.cpf-raster-zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 70rem;
}

.cpf-spalte,
.cpf-seite {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cpf-gruppe {
    margin: 0.9rem 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cpf-gruppe-text);
}

.cpf-spalte > .cpf-gruppe:first-child {
    margin-top: 0;
}

/* ---------- Felder ---------- */

.cpf-feld {
    margin-bottom: 0.85rem;
}

.cpf-feld label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.88rem;
    font-weight: 700;
}

.cpf-input {
    width: 100%;
    min-height: var(--bb-tap, 2.75rem);
    padding: 0.45rem 0.7rem;
    border-radius: var(--bb-radius-md, 8px);
    border: 1px solid var(--todo-feld-rand);
    background: var(--todo-feld-bg);
    color: var(--todo-text);
    font-family: inherit;
    font-size: 0.95rem;
}

.cpf-input:disabled {
    background: var(--cpf-platzhalter-bg);
    color: var(--cpf-platzhalter-text);
    cursor: not-allowed;
}

.cpf-input-schmal {
    width: auto;
    min-width: 14rem;
}

.cpf-textarea {
    min-height: 6rem;
    resize: vertical;
}

.cpf-hinweis {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--todo-text-leise);
}

/* Ein Hinweis, der auf eine Grenze zeigt, die beim Speichern gleich zuschlaegt
   – nicht die uebliche leise Erklaerung darunter. Erscheint nur im Fall selbst. */
.cpf-hinweis.ist-warnung {
    margin-top: 0.45rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--bb-radius-md, 8px);
    background: var(--cp-urteil-warn-bg);
    border: 1px solid var(--cp-urteil-warn-rand);
    color: var(--cp-titel);
    font-weight: 600;
}

.cpf-pflicht {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cpf-pflicht);
}

.cpf-optional {
    margin-left: 0.25rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--cpf-optional);
}

.cpf-platzhalter-marke {
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--cpf-platzhalter-bg);
    color: var(--cpf-platzhalter-text);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Umschalter Person/Gruppe ---------- */

.cpf-umschalter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--bb-radius-md, 8px);
    border: 1px solid var(--todo-feld-rand);
    background: var(--todo-block-bg);
}

.cpf-umschalter-knopf {
    min-height: 2.4rem;
    border: none;
    border-radius: var(--bb-radius-sm, 6px);
    background: transparent;
    color: var(--todo-text-leise);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.cpf-umschalter-knopf.ist-aktiv {
    background: var(--todo-card-bg);
    color: var(--todo-text);
    box-shadow: var(--bb-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12));
}

.cpf-umschalter-drei {
    grid-template-columns: repeat(3, 1fr);
}

.cpf-haken {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

/* ---------- Zeitfenster-Blöcke ---------- */

.cpf-bloecke {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cpf-block {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--todo-feld-rand);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-feld-bg);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.cpf-block.ist-aktiv {
    background: var(--cpf-prio-bg);
    border-color: var(--cp-titel);
    color: var(--cp-titel);
}

/* Abkürzung, kein sechster eigener Zeitfenster-Zustand (Felix, 19.08.2026,
   „Ganzer Tag" statt fünf Häkchen einzeln) — gestrichelt im Ruhezustand macht
   sichtbar, dass er nur die fünf echten Blöcke daneben zusammenfasst. */
.cpf-block-ganzertag {
    border-style: dashed;
}

.cpf-block-ganzertag.ist-aktiv {
    border-style: solid;
}

.cpf-hinweis-block {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-block-bg);
}

.cpf-haken label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
}

/* ---------- Karten in der Seitenspalte ---------- */

.cpf-karte {
    padding: 1rem;
    margin-bottom: 0.9rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
}

.cpf-karte-prio {
    background: var(--cpf-prio-bg);
    border-color: var(--cpf-prio-rand);
}

.cpf-karte-kopf {
    margin-bottom: 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cp-titel);
}

.cpf-prioraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
}

.cpf-score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--bb-radius-md, 8px);
    border: 1px solid var(--todo-card-border);
    background: var(--todo-card-bg);
    font-weight: 700;
}

.cpf-score strong {
    font-size: 1.5rem;
    color: var(--cp-titel);
}

/* ---------- Vorrang ---------- */

.cpf-karte-vorrang-an {
    background: var(--cpf-vorrang-bg);
    border-color: var(--cpf-vorrang-rand);
}

/*
  Gemeldetes Problem (3a): dieselbe Bauart wie die Vorrang-Karte, nur rot statt
  amber — steht ganz oben links in der geöffneten Aufgabe, sobald sie blockiert
  ist, mit den Eckdaten aus dem Verlauf und dem Knopf zum Lösen an derselben
  Stelle.
*/
.cpf-karte-problem {
    background: var(--cpf-problem-bg);
    border-color: var(--cpf-loeschen-rand);
}

.cpf-karte-problem .cpf-karte-kopf {
    color: var(--cpf-loeschen-text);
}

.cpd-problem-wer {
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--todo-text-leise);
}

.cpf-schalter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    cursor: pointer;
}

.cpf-schalter-text {
    font-size: 1rem;
    font-weight: 800;
}

.cpf-karte-vorrang-an .cpf-schalter-text,
.cpf-karte-vorrang-an .cpf-karte-kopf {
    color: var(--cpf-vorrang-text);
}

/* Der Vorrang-Kasten benutzt seit dem 20.08.2026 denselben Kopf wie „Status
   setzen" und „Verlauf" (Felix: andere Schriftart, anderes Layout als alle
   anderen Boxen). Seine Knoepfe und Eingaben brauchen dafuer denselben Abstand
   nach oben, den die anderen Kaesten aus ihrem Kopf-Abstand bekommen. */
.cpd-hebel > .cpf-input {
    margin-bottom: 0.5rem;
}

/* ---------- Wiederkehrende Aufgabe ----------
   Zugeklappt ist der Block EINE Zeile. Erst der Haken bringt die Felder — und
   die stehen dann nebeneinander in fester Breite, nicht über die ganze Seite:
   Ein Intervall-Auswahlfeld braucht keine 60 Zeichen Platz.
*/

/* Der Kasten ist so breit wie sein Inhalt und nicht so breit wie das Formular
   (Felix, 20.08.2026: "aufgeklappt benoetigt es nur die Haelfte des
   Arbeitsbereichs"). Drei Felder zu je hoechstens 16rem plus Abstaende - mehr
   war da nie, der Rest war leere Flaeche mit Rahmen drum.

   min(100%, ...) statt einer festen Breite: Auf einem schmalen Formular
   gewinnt die 100% und der Kasten bleibt bedienbar. */
.cpf-wiederholung {
    margin-top: 0.5rem;
    max-width: min(100%, 52rem);
}

.cpf-wiederholung.ist-an {
    background: var(--cpf-prio-bg);
    border-color: var(--cpf-prio-rand);
}

.cpf-wiederholung-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 16rem));
    justify-content: start;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

/* Die Felder im Raster tragen ihren Abstand über das Raster, nicht selbst */
.cpf-wiederholung-raster .cpf-feld {
    margin-bottom: 0;
}

/* Der Umschalter Person/Gruppe darf hier schmal sein */
.cpf-wiederholung-raster .cpf-umschalter {
    grid-template-columns: 1fr 1fr;
}

.cpf-schalter-zusatz {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--todo-text-leise);
}

/* ---------- Fuß und Meldungen ---------- */

.cpf-fuss {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 1rem 0 0.5rem;
}

.cpf-btn-loeschen {
    border-color: var(--cpf-loeschen-rand);
    margin-right: auto;
}

.cpf-meldung {
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--cpf-meldung-rand);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--cpf-meldung-bg);
    color: var(--cpf-meldung-text);
    font-weight: 600;
}

.cpf-typmarke {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--cpf-prio-bg);
    border: 1px solid var(--cpf-prio-rand);
    color: var(--cp-titel);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ---------- Vorlagen ---------- */

.cpv-raster {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.cpv-liste {
    min-width: 0;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
    overflow: hidden;
}

.cpv-liste-kopf {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--todo-card-border);
    background: var(--todo-block-bg);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--todo-text-leise);
}

.cpv-eintrag {
    display: block;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: none;
    border-bottom: 1px solid var(--todo-card-border);
    border-left: 3px solid transparent;
    background: var(--todo-card-bg);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--todo-text);
}

.cpv-eintrag:hover {
    background: var(--todo-card-bg-hover);
}

.cpv-eintrag.ist-aktiv {
    background: var(--cpf-prio-bg);
    border-left-color: var(--cp-titel);
}

.cpv-eintrag-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cpv-eintrag-name {
    font-size: 1rem;
    font-weight: 700;
}

.cpv-eintrag-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.cpv-eintrag-score {
    font-size: 0.8rem;
    color: var(--todo-text-leise);
}

.cpv-eintrag-text {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--todo-text-leise);
}

.cpv-editor {
    min-width: 0;
}

/* ==========================================================================
   Projekte (cpk-): Kennzahlen, Fortschritt, Ampel
   ========================================================================== */

/* Kompakt statt gross (Felix, 18.08.2026): Die Kacheln fuellten vorher eine
   Rasterspalte von mindestens 11rem und wirkten dadurch schwerer, als die
   Aufgabe – eine Zahl zeigen – es rechtfertigt. Jetzt eine Reihe, jede Kachel
   nur so breit wie ihr Inhalt, Zahl und Beschriftung nebeneinander statt
   gestapelt. Gilt fuer Aufgaben- UND Projektcockpit zugleich, beide teilen
   sich diese Klassen. */
.cpk-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.cpk-karte {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-card-bg);
}

.cpk-zahl {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cpk-zahl);
}

.cpk-zahl-rot {
    color: var(--cpk-zahl-rot);
}

.cpk-zahl-leer {
    color: var(--cpk-zahl-leer);
}

.cpk-text {
    font-size: 0.78rem;
    color: var(--todo-text-leise);
    white-space: nowrap;
}

/* War eine Zeile unter Zahl und Text, ist jetzt ein Punkt dahinter – dieselbe
   Farbaussage, ohne dass die Kachel dafuer Hoehe braucht. Der Sonderfall
   „aktiver Filter, klicken zum Zuruecksetzen" (.cpd-kennzahl-hinweis weiter
   unten) ueberschreibt Form und Inhalt ohnehin vollstaendig. */
.cpk-strich {
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--cpk-strich);
    align-self: center;
}

.cpk-strich-blau {
    background: var(--cpk-strich-blau);
}

.cpk-strich-rot {
    background: var(--cpk-strich-rot);
}

/* Weniger wichtig, deshalb an den Rand: schiebt die Kachel in einer
   Flex-Reihe an das rechte Ende, mit sichtbarem Abstand zu den anderen. Auf
   der Projekteseite fuer „abgeschlossen" (Felix, 18.08.2026). */
.cpk-nebensaechlich {
    margin-left: auto;
}

.cpk-filter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* ---------- Ampel ---------- */

.cpk-ampel {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--cpk-ampel-kurs-bg);
    color: var(--cpk-ampel-kurs-text);
}

.cpk-ampel.ist-blocker {
    background: var(--cpk-ampel-blocker-bg);
    color: var(--cpk-ampel-blocker-text);
}

.cpk-ampel.ist-pausiert {
    background: var(--cpk-ampel-pausiert-bg);
    color: var(--cpk-ampel-pausiert-text);
}

.cpk-ampel.ist-fertig {
    background: var(--cpk-ampel-fertig-bg);
    color: var(--cpk-ampel-fertig-text);
}

/*
  Erledigt (2c, Felix 17.08.2026): eigene, ruhige Farbe statt eine der vier
  Arbeits-Ampeln zweitzuverwenden — sonst sähe eine fertige Aufgabe wie eine
  offene oder pausierte aus. Kein neues Tokenpaar, sondern zwei bestehende
  neu kombiniert: derselbe Grund wie bei „pausiert", nur die leisere Schrift.
*/
.cpk-ampel.ist-erledigt {
    background: var(--cpk-ampel-pausiert-bg);
    color: var(--todo-text-sehr-leise);
}

/*
  Keine Aufgaben (Felix, 17.08.2026): ein aktives Projekt ohne eine einzige
  Aufgabe hat keinen Fortschritt und soll auffallen, nicht als "auf Kurs"
  durchgehen. Dieselben zwei Töne wie bei "Zieltermin nah" (--cpd-score-hoch)
  und dem Vorrang-Hebel (--cpf-vorrang-text) — kein neues Tokenpaar nötig.
*/
.cpk-ampel.ist-keine-aufgaben {
    background: var(--cpd-score-hoch-bg);
    color: var(--cpf-vorrang-text);
}

/* ---------- Fortschritt ---------- */

.cpk-balkenzeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.cpk-balken {
    flex: 1;
    min-width: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--cpk-balken-bg);
    overflow: hidden;
}

.cpk-balken-fuellung {
    height: 100%;
    border-radius: 3px;
    background: var(--cpk-balken-fuell);
}

.cpk-balken-text {
    flex: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--todo-text-leise);
}

.cpk-balkenzeile-gross {
    margin-top: 0.9rem;
}

.cpk-balkenzeile-gross .cpk-balken {
    height: 9px;
}

.cpk-balkenzeile-gross .cpk-balken-text {
    font-size: 0.88rem;
    color: var(--todo-text);
}

/* ---------- Detailkopf ---------- */

.cpk-detailkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Die Handlungen des Vorhabens, seit dem 20.08.2026 oben statt in einer
   Fusszeile. `margin-left: auto` schiebt sie an den rechten Rand, ohne dass
   Name und Ampel ihre Plaetze tauschen muessten; bei schmaler Karte bricht die
   Gruppe als Ganzes um. */
.cpk-detailknoepfe {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cpk-detailname {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cp-titel);
}

.cpk-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.cpk-chip {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--cpk-chip-bg);
    color: var(--cpk-chip-text);
    font-size: 0.8rem;
    font-weight: 600;
}

.cpk-chip-leer {
    color: var(--todo-text-sehr-leise);
}

.cpk-detailtext {
    margin: 0.7rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--todo-text-leise);
}

.cpk-blocker {
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--cpk-blocker-rand);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--cpk-blocker-bg);
    color: var(--cpk-blocker-text);
    font-weight: 600;
}

/* ---------- Aufgaben im Projekt ---------- */

.cpk-aufgabe {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.2rem;
    border-bottom: 1px solid var(--todo-card-border);
}

.cpk-aufgabe-zeichen {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--todo-block-bg);
    font-size: 0.8rem;
    color: var(--todo-text-leise);
}

.cpk-aufgabe-titel {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.cpk-aufgabe-wer {
    flex: none;
    font-size: 0.82rem;
    color: var(--todo-text-leise);
}

.cpk-aufgabe.ist-erledigt .cpk-aufgabe-titel {
    text-decoration: line-through;
    color: var(--todo-text-sehr-leise);
    font-weight: 400;
}

.cpk-leer {
    padding: 1rem 0.2rem;
    font-size: 0.9rem;
    color: var(--todo-text-leise);
}

/* ==========================================================================
   Stammdaten (cps-)
   ========================================================================== */

.cps-navigation {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cps-nav-rand);
}

.cps-navigation-eintrag {
    padding: 0.6rem 1rem;
    border-bottom: 3px solid transparent;
    background: var(--cps-nav-bg);
    color: var(--cps-nav-text) !important;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none !important;
}

.cps-navigation-eintrag:hover {
    color: var(--cps-nav-aktiv-text) !important;
}

.cps-navigation-eintrag.ist-aktiv {
    color: var(--cps-nav-aktiv-text) !important;
    border-bottom-color: var(--cps-nav-aktiv-text);
}

.cps-formel {
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--cps-formel-rand);
    border-radius: var(--todo-card-radius);
    background: var(--cps-formel-bg);
}

.cps-formel-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-titel);
}

.cps-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    align-items: start;
}

.cps-kachel {
    margin-bottom: 0;
}

.cps-kachel-text {
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: var(--todo-text-leise);
}

.cps-knopfzeile {
    display: flex;
    justify-content: center;
    padding: 0.9rem 0 0.4rem;
}

.cps-mittig {
    text-align: center;
}

.cps-ampelzeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

.cps-gruppenliste {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.cps-gruppenliste .cpf-block {
    justify-content: flex-start;
}

.cps-gruppen-anzahl {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--todo-text-sehr-leise);
}

/* ---------- Mittlere Breiten ---------- */

@media (max-width: 1400px) {
    .cpf-raster {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cpf-seite {
        grid-column: 1 / -1;
    }
}

/* ---------- Schmale Geräte ----------
   Aus der Leiste wird eine waagerechte Reihe über dem Inhalt. Das Cockpit
   bleibt ein Schreibtisch-Werkzeug; unterwegs führt der Weg über
   „Meine Aufgaben".
*/

@media (max-width: 900px) {
    .cp {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .cp-leiste {
        position: static;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cp-leiste-kopf,
    .cp-leiste-fuss {
        display: none;
    }

    .cp-leiste-liste {
        flex-direction: row;
        padding: 0.35rem;
        gap: 0.25rem;
    }

    .cp-leiste-eintrag {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: var(--bb-radius-md, 8px);
        padding: 0.55rem 0.75rem;
    }

    .cp-leiste-eintrag.ist-aktiv {
        border-left-color: transparent;
        border-bottom-color: var(--cp-leiste-text-aktiv);
    }

    .cp-kopf-titel {
        font-size: 1.35rem;
    }

    .cpf-raster,
    .cpv-raster {
        grid-template-columns: minmax(0, 1fr);
    }

    .cpf-input-schmal {
        width: 100%;
        min-width: 0;
    }

    .cpf-fuss {
        justify-content: stretch;
    }

    .cpf-fuss .cp-btn {
        flex: 1 1 8rem;
    }

    .cpf-btn-loeschen {
        margin-right: 0;
    }
}

/* Feld, das im Raster über die ganze Breite geht (z. B. der Accountable-Block) */
.cpf-feld-breit {
    grid-column: 1 / -1;
}

/* ---------- Mehrfachauswahl im Klappfeld (Mithelfer) ---------- */

.cpf-auswahl {
    border: 1px solid var(--todo-feld-rand);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-feld-bg);
}

.cpf-auswahl-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--bb-tap, 2.75rem);
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: 0.95rem;
    list-style: none;
}

.cpf-auswahl-kopf::-webkit-details-marker {
    display: none;
}

.cpf-auswahl-kopf::before {
    content: "▸";
    flex: none;
    color: var(--todo-text-leise);
}

.cpf-auswahl[open] .cpf-auswahl-kopf::before {
    content: "▾";
}

.cpf-auswahl-kopf > span:not(.cpf-auswahl-zahl) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpf-auswahl-leer {
    color: var(--cpf-platzhalter-text);
}

.cpf-auswahl-zahl {
    flex: none;
    min-width: 1.5rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--cpf-prio-bg);
    color: var(--cp-titel);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.cpf-auswahl-liste {
    max-height: 15rem;
    overflow-y: auto;
    border-top: 1px solid var(--todo-feld-rand);
    padding: 0.3rem;
}

.cpf-auswahl-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.5rem;
    border-radius: var(--bb-radius-sm, 6px);
    font-size: 0.92rem;
    cursor: pointer;
}

.cpf-auswahl-zeile:hover {
    background: var(--todo-card-bg-hover);
}

.cpf-auswahl-zeile.ist-aktiv {
    background: var(--cpf-prio-bg);
    font-weight: 600;
}

.cps-umschaltzeile {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--todo-card-border);
    background: var(--todo-block-bg);
}

.cpk-zahl-orange { color: var(--cpk-zahl-orange); }
.cpk-strich-orange { background: var(--cpk-zahl-orange); }

.cpk-chip-warn {
    background: var(--cpk-ampel-blocker-bg);
    color: var(--cpk-ampel-blocker-text);
}

/* ---------- Projektcockpit: Gliederungstabelle (E76) ----------
   Volle Breite statt Liste links und Detail rechts. Die Einrueckung zeigt die
   Verschachtelung, die vorher nur im Detail sichtbar war. */

.cpg-scroll {
    overflow-x: auto;
}

.cpg-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.cpg-tabelle th {
    text-align: left;
    padding: 0.45rem 0.6rem;
    background: var(--todo-block-bg);
    border-bottom: 1px solid var(--todo-card-border);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--todo-text-sehr-leise);
    white-space: nowrap;
}

.cpg-tabelle td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--todo-card-border);
    vertical-align: middle;
    white-space: nowrap;
}

.cpg-zeile:hover td {
    background: var(--todo-block-bg);
}

.cpg-zeile.ist-offen td {
    background: var(--cpf-prio-bg);
}

/* Ein Unterprojekt ist ein vollwertiges Vorhaben - nur leiser gesetzt, damit
   das Auge die Wurzeln zuerst findet. */
.cpg-zeile.ist-kind .cpg-titel {
    font-weight: 600;
}

.cpg-spalte-name {
    width: 34%;
    min-width: 18rem;
    white-space: normal;
}

.cpg-spalte-fortschritt {
    width: 12rem;
}

.cpg-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cpg-knoten {
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 0;
    border-radius: var(--bb-radius-md, 8px);
    background: transparent;
    color: var(--todo-text-leise);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.cpg-knoten:hover {
    background: var(--todo-card-border);
    color: var(--cp-titel);
}

.cpg-knoten-leer {
    display: inline-block;
    cursor: default;
}

.cpg-titel {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cp-titel);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.cpg-titel:hover {
    text-decoration: underline;
}

.cpg-kinderzahl {
    font-size: 0.75rem;
    color: var(--todo-text-sehr-leise);
}

.cpg-leise {
    color: var(--todo-text-leise);
}

.cpg-mitte { text-align: center; }
.cpg-zahl { text-align: right; }

/* Steht jetzt VOR der Prio-Zahl, nicht mehr dahinter (E78) - der Abstand
   wandert deshalb von links nach rechts. */
.cpg-aufschlag {
    margin-right: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--todo-text-leise);
}

.cpg-termin-nah {
    font-weight: 800;
    color: var(--cpk-zahl-orange);
}

/* Die aufgeklappte Karte laeuft ueber die ganze Breite - sie ist kein
   Tabelleninhalt mehr, sondern die Arbeitsflaeche zu dieser Zeile. */
.cpg-kartezeile > td {
    padding: 0.9rem 0.6rem 1.2rem;
    background: var(--todo-card-bg);
    white-space: normal;
}

.cpg-allezu {
    margin-left: 0.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--todo-text-leise);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* Auf schmalen Geraeten (iPad hochkant) fallen die beiden Spalten weg, die am
   wenigsten zur Entscheidung beitragen. Der Rest scrollt notfalls waagerecht. */
@media (max-width: 900px) {
    .cpg-weg-schmal { display: none; }
    .cpg-spalte-name { min-width: 14rem; }
}

/* ---------- Projektliste: Suche und Bereich ----------
   Unmittelbar ueber der Liste, nicht in einem Riegel darueber - dieselbe
   Anordnung wie in der Dispositionsliste. Ohne Suche blieb nur, alles in den
   Namen zu schreiben (E75). */

.cpv-suchzeile {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--todo-card-border);
}

.cpv-suchfeld {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
}

.cpv-bereichwahl {
    flex: 0 1 11rem;
    font-size: 0.85rem;
}

/* ---------- Stammdaten · Objekte ---------- */

.cpo-kopfzeile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0.2rem;
}

.cpo-kopfzeile-titel {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--todo-text-leise);
}

/* Die Tabelle traegt Eingabefelder, nicht nur Text - etwas mehr Luft je Zeile,
   und waagerecht scrollbar, damit sie auf schmalen Geraeten nicht die Seite
   auseinanderzieht. */
.cpo-tabelle {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.cpo-tabelle td {
    padding: 0.5rem;
    vertical-align: top;
}

.cpo-zahl { text-align: right; }
.cpo-mitte { text-align: center; }

.cpo-name {
    font-weight: 700;
}

.cpo-nebenzeile {
    font-size: 0.78rem;
    color: var(--todo-text-leise);
}

.cpo-haken {
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
}

.cpo-eingabe {
    min-width: 11rem;
    font-size: 0.85rem;
}

/* Ein Mitglied erscheint nicht mehr fuer sich - gedaempft, damit man beim
   Ueberfliegen sieht, welche Zeilen hinter einem Leitobjekt verschwunden sind. */
.cpo-ist-mitglied td {
    background: var(--todo-block-bg);
    color: var(--todo-text-leise);
}

/* ---------- Ladeanzeige ---------- */

.cp-lade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

.cp-lade-ring {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid var(--cp-lade-ring-bg);
    border-top-color: var(--cp-lade-ring);
    animation: cp-lade-dreh 0.8s linear infinite;
}

@keyframes cp-lade-dreh {
    to { transform: rotate(360deg); }
}

/*
  Wer „reduzierte Bewegung" eingestellt hat, bekommt statt der Drehung ein
  ruhiges Pulsieren – sichtbar bleibt es trotzdem, sonst wäre die Anzeige
  nutzlos für genau die Leute, die sie brauchen.
*/
@media (prefers-reduced-motion: reduce) {
    .cp-lade-ring,
    .cpd-mini-ring {
        animation: cp-lade-puls 1.4s ease-in-out infinite;
        border-top-color: var(--cp-lade-ring);
    }

    @keyframes cp-lade-puls {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.35; }
    }
}

.cp-lade-text {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cp-titel);
}

.cp-lade-zusatz {
    font-size: 0.85rem;
    color: var(--todo-text-leise);
    max-width: 34ch;
}

/* ==========================================================================
   Dispositionsliste (cpd-) — Entwurf 01
   ========================================================================== */

/* ---------- Werkzeugleiste über der Tabelle ----------
   Die Suche steht dort, wo gesucht wird: unmittelbar über der Liste, nicht
   oben rechts neben „Neue Aufgabe". Dort sähe sie aus wie eine globale Suche
   über die ganze Anwendung.
*/

.cpd-werkzeuge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--todo-card-border);
    background: var(--todo-block-bg);
}

.cpd-suchfeld {
    position: relative;
    flex: 1 1 20rem;
    min-width: 0;
}

.cpd-such-zeichen {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--todo-text-sehr-leise);
    pointer-events: none;
}

.cpd-suche {
    width: 100%;
    min-height: var(--bb-tap, 2.75rem);
    padding: 0.45rem 0.7rem 0.45rem 2.1rem;
    border-radius: var(--bb-radius-md, 8px);
    border: 1px solid var(--todo-feld-rand);
    background: var(--todo-feld-bg);
    color: var(--todo-text);
    font-family: inherit;
    font-size: 0.95rem;
}

.cpd-anzahl {
    flex: none;
    font-size: 0.85rem;
    color: var(--todo-text-leise);
}

/* ---------- Marken der aktiven Filter ----------
   Filter im Spaltenkopf haben eine bekannte Schwäche: Man sieht der Liste
   nicht an, warum Zeilen fehlen. Diese Zeile macht es sichtbar und erlaubt,
   jeden Filter einzeln wieder wegzunehmen.
*/

.cpd-aktivfilter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--todo-card-border);
}

.cpd-aktivfilter-titel {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--todo-text-sehr-leise);
}

.cpd-filtermarke {
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--cpf-prio-rand);
    background: var(--cpf-prio-bg);
    color: var(--cp-titel);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.cpd-filtermarke:hover {
    border-color: var(--cp-titel);
}

.cpd-filtermarke.ist-alles {
    background: transparent;
    border-color: transparent;
    color: var(--todo-text-leise);
    text-decoration: underline;
}

/* ---------- Knopf, der wie Text aussieht ---------- */

.cpd-textknopf {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cp-titel);
    cursor: pointer;
    text-decoration: underline;
}

.cpd-textknopf:disabled {
    color: var(--todo-text-sehr-leise);
    cursor: default;
}

/* ---------- Kennzahl als Filterknopf ----------
   Die Kacheln sehen aus wie die im Projektreiter, sind hier aber Knöpfe:
   Wer auf „blockiert" schaut, will als Nächstes die blockierten sehen.
*/

.cpd-kennzahl {
    text-align: left;
    font-family: inherit;
    color: var(--todo-text);
    cursor: pointer;
}

.cpd-kennzahl:hover {
    background: var(--todo-card-bg-hover);
}

/*
  Kräftig statt zart (Felix, 17.08.2026): Der helle Ton von vorher liess sich
  kaum von "unmarkiert" unterscheiden — man wusste weder, dass gefiltert ist,
  noch wie man zurückkommt. Jetzt dieselbe gefüllte Fläche wie bei den
  Filter-Pillen (.cpf-pille.ist-aktiv), und die Kachel sagt selbst, wie man
  sie wieder loswird, statt nur auf die Marken-Zeile darunter zu verweisen.
*/
.cpd-kennzahl.ist-aktiv {
    border-color: var(--cpf-pille-aktiv-bg);
    background: var(--cpf-pille-aktiv-bg);
}

.cpd-kennzahl.ist-aktiv:hover {
    background: var(--cpf-pille-aktiv-bg);
}

.cpd-kennzahl.ist-aktiv .cpk-zahl {
    color: var(--cpf-pille-aktiv-text);
}

.cpd-kennzahl.ist-aktiv .cpk-text {
    color: var(--cpf-pille-aktiv-text);
}

.cpk-strich.cpd-kennzahl-hinweis {
    width: auto;
    height: auto;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cpf-pille-aktiv-text);
    white-space: nowrap;
}

/* ---------- Eingang ---------- */

.cpd-eingang {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--cpd-eingang-rand);
    border-radius: var(--todo-card-radius);
    background: var(--cpd-eingang-bg);
}

.cpd-eingang-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cpd-eingang-titel {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--cpd-eingang-titel);
}

.cpd-eingang-text {
    margin: 0.4rem 0 0;
    max-width: 92ch;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--todo-text-leise);
}

/* ---------- Eingang: eine gemeldete, noch unbewertete Zeile (E59) ---------- */

.cpd-meldung {
    margin-top: 0.6rem;
    border: 1px solid var(--cpd-eingang-rand);
    border-radius: var(--bb-radius-sm);
    background: var(--todo-card-bg);
    overflow: hidden;
}

.cpd-meldung.ist-offen {
    border-color: var(--cpd-eingang-titel);
}

/* Titel und Bild-Knopf nebeneinander (E61) — zwei getrennte Knöpfe, damit sich
   das Foto ansehen lässt, ohne die Erfassungsmaske zu öffnen. */
.cpd-meldung-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.cpd-meldung-kopf {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.8rem;
    text-align: left;
    background: transparent;
    border: 0;
    font-family: var(--bb-font);
    color: inherit;
    cursor: pointer;
}

.cpd-meldung-bild {
    flex: 0 0 auto;
    margin: 0.5rem 0.6rem 0 0;
    white-space: nowrap;
}

.cpd-meldung-bilder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.2rem 0.8rem 0.8rem;
}

.cpd-bild {
    margin: 0;
    max-width: 22rem;
}

.cpd-bild img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-sm);
}

.cpd-bild figcaption {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--todo-text-leise);
}

.cpd-meldung-kopf:hover {
    background: var(--cpd-zeile-hover);
}

.cpd-meldung-titel {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--todo-text);
}

.cpd-meldung-herkunft {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.82rem;
    color: var(--todo-text-leise);
}

/* Die vollständige Erfassungsmaske, eingebettet in die Meldung (E60). */
.cpd-meldung-form {
    padding: 0.6rem 0.8rem 0.8rem;
    border-top: 1px solid var(--cpd-zeile-trenner);
    background: var(--cpd-detail-bg);
}

/* Was gemeldet wurde — VOR jeder Maske (Felix, 20.08.2026). Bis dahin ging
   beim Anklicken sofort die Erfassung auf; wer nur nachsehen wollte, bekam ein
   Formular mit zwanzig Feldern. */
.cpd-meldung-detail {
    padding: 0.7rem 0.8rem 0.8rem;
    border-top: 1px solid var(--cpd-zeile-trenner);
    background: var(--cpd-detail-bg);
}

.cpd-meldung-text {
    margin: 0 0 0.7rem;
    white-space: pre-wrap;
    line-height: 1.5;
}

.cpd-meldung-text.ist-leer {
    color: var(--todo-text-leise);
    font-style: italic;
}

/* Drei Wege nebeneinander: anlegen, zumachen, wegwerfen. „Verwerfen" steht
   hier OBEN bei der Meldung und nicht mehr unter der Maske - es ist eine
   Entscheidung ueber die Meldung, nicht ueber die Aufgabe, die vielleicht
   daraus wird. */
.cpd-meldung-aktionen {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

/* `.cpd-meldung-verwerfen` ist mit dieser Umstellung entfallen - die Klasse
   beschrieb eine Zeile unter der Maske, die es nicht mehr gibt. */

.cpd-meldung-hinweis {
    font-size: 0.82rem;
    color: var(--todo-text-leise);
}

/* ---------- Raster: Liste links, Seitenspalte rechts ---------- */

.cpd-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 1.25rem;
    align-items: start;
}

.cpd-liste {
    min-width: 0;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
    overflow: hidden;
}

.cpd-liste-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.cpd-liste-kopf-rest {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--todo-text-sehr-leise);
}

.cpd-seite {
    min-width: 0;
}

.cpd-seite-sub {
    margin: -0.4rem 0 0.6rem;
    font-size: 0.8rem;
    color: var(--todo-text-leise);
}

/* ---------- Tabelle ----------
   Der Rahmen scrollt waagerecht, nicht die Seite: Bei schmalen Fenstern soll
   die Liste rutschen, nicht das ganze Cockpit.
*/

.cpd-tabelle-rahmen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cpd-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.cpd-tabelle th {
    padding: 0.4rem 0.6rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--todo-text-sehr-leise);
    border-bottom: 1px solid var(--todo-card-border);
    white-space: nowrap;
}

/* ---------- Filterknopf im Spaltenkopf ---------- */

.cpd-kopfzelle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.cpd-kopftext {
    min-width: 0;
}

.cpd-filterknopf {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--bb-radius-sm, 6px);
    background: transparent;
    color: var(--todo-text-sehr-leise);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}

.cpd-filterknopf:hover {
    background: var(--todo-block-bg);
    border-color: var(--todo-card-border);
    color: var(--cp-titel);
}

/* Ein gesetzter Filter muss man sehen, ohne die Spalte aufzuklappen */
.cpd-filterknopf.ist-aktiv {
    background: var(--cpf-prio-bg);
    border-color: var(--cp-titel);
    color: var(--cp-titel);
}

.cpd-filterknopf.ist-offen {
    background: var(--cp-btn-haupt-bg);
    border-color: var(--cp-btn-haupt-bg);
    color: var(--cp-btn-haupt-text);
}

/* ---------- Aufgeklapptes Filterfeld ----------
   Eigene Tabellenzeile über die volle Breite statt schwebendes Menü: Die
   Tabelle steht in einem waagerecht scrollenden Rahmen, ein absolut
   positioniertes Menü würde dort abgeschnitten.
*/

.cpd-filterzeile > td {
    padding: 0;
    background: var(--cpf-prio-bg);
    border-bottom: 1px solid var(--cpf-prio-rand);
}

/* Knapp statt geräumig (Felix, 18.08.2026): Kein Titel mehr, der nur die
   Spaltenüberschrift wiederholt, kein „Schliessen"-Knopf (derselbe Pfeil im
   Kopf klappt wieder zu), kein Fuss mit einer eigenen Rückgängig-Aktion, die
   dasselbe tut wie nochmal alle Häkchen abzuwählen. Das Feld ist dadurch auf
   das reduziert, was eine Auswahl wirklich braucht: die Häkchen oder
   Sortierknöpfe selbst. */
.cpd-filterfeld {
    padding: 0.5rem 0.7rem;
}

.cpd-filter-inhalt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Zwei Häkchengruppen in einem Feld (etwa Sortieren + Eingrenzen bei einer
   Termin-Spalte) trennt eine dünne Linie statt eines Zwischentitels. */
.cpd-filter-inhalt + .cpd-filter-inhalt {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--todo-card-border);
}

/* Die Sortier-Knöpfe benutzen dieselbe Form wie die Filter-Häkchen */
.cpd-filter-inhalt button.cpf-block {
    font-family: inherit;
    color: var(--todo-text);
}

.cpd-tabelle td {
    padding: 0.6rem;
    vertical-align: top;
    border-bottom: 1px solid var(--cpd-zeile-trenner);
}

.cpd-zeile {
    border-left: 3px solid transparent;
}

.cpd-zeile:hover {
    background: var(--cpd-zeile-hover);
}

/* Reihenfolge ist Absicht: Ist beides gesetzt, gewinnt der Vorrang-Balken —
   bei gleicher Spezifität entscheidet die spätere Regel. */
.cpd-zeile.ist-blockiert {
    border-left-color: var(--cpd-zeile-blockiert);
}

.cpd-zeile.ist-vorrang {
    border-left-color: var(--cpd-zeile-vorrang);
}

.cpd-zeile.ist-gewaehlt {
    background: var(--cpd-zeile-gewaehlt-bg);
}

.cpd-zeile.ist-markiert {
    background: var(--cpd-zeile-markiert-bg);
}

/* Erledigt (2c): derselbe Durchstrich wie bei .cpk-aufgabe.ist-erledigt im Projektreiter. */
.cpd-zeile.ist-erledigt .cpd-titel span:not(.cpd-titel-pfeil) {
    text-decoration: line-through;
    color: var(--todo-text-sehr-leise);
    font-weight: 400;
}

/* Spaltenbreiten: alles ausser dem Titel bekommt so wenig Platz wie nötig */
.cpd-sp-wahl { width: 2.2rem; }
.cpd-sp-prio { width: 3.5rem; }
.cpd-sp-typ { width: 7rem; }
.cpd-sp-faellig { width: 7.5rem; }
.cpd-sp-eff { width: 3rem; }
.cpd-sp-acc { width: 13rem; }
.cpd-sp-status { width: 8rem; }

/* ---------- Score ---------- */

.cpd-score {
    display: inline-block;
    min-width: 2.6rem;
    padding: 0.25rem 0.4rem;
    border-radius: var(--bb-radius-sm, 6px);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: var(--cpd-score-leise-bg);
    color: var(--cpd-score-leise-text);
}

.cpd-score.ist-mittel {
    background: var(--cpd-score-mittel-bg);
    color: var(--cpd-score-mittel-text);
}

.cpd-score.ist-hoch {
    background: var(--cpd-score-hoch-bg);
    color: var(--cpd-score-hoch-text);
}

/* `.cpd-score-herkunft` („aus Vorhaben" unter dem Score, E81) stand hier bis
   24.08.2026 — Felix: die Ortszeile nennt das Vorhaben ohnehin, der Hinweis
   war doppelt. Die Erklärung steckt seither nur noch im Titel-Attribut der
   Zahl (`ScoreErklaerung` in CockpitAufgabenSub.razor). */

/* ---------- Titelzelle ---------- */

.cpd-vorrang {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--cpd-vorrang-text);
}

.cpd-vorrang-grund {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--cpd-vorrang-text);
}

/*
  Der Titel ist ein <button> und kein <a>: Er klappt die Aufgabe in der Liste
  auf, er führt nicht woandershin. Gestaltet ist er wie Text, damit die Zeile
  ruhig bleibt; das Dreieck davor sagt, dass sich etwas öffnet.
*/
.cpd-titel {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--todo-text);
    cursor: pointer;
}

.cpd-titel:hover {
    color: var(--cp-titel);
}

.cpd-titel:hover > span:last-child {
    text-decoration: underline;
}

.cpd-titel-pfeil {
    flex: none;
    font-size: 0.75rem;
    color: var(--todo-text-sehr-leise);
}

.cpd-titel.ist-offen {
    color: var(--cp-titel);
}

.cpd-titel.ist-offen .cpd-titel-pfeil {
    color: var(--cp-titel);
}

.cpd-ort {
    margin-top: 0.15rem;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: var(--todo-text-leise);
}

.cpd-marke {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    background: var(--todo-block-bg);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--todo-text-leise);
}

.cpd-marke-herkunft {
    background: var(--cpk-chip-bg);
    color: var(--cpk-chip-text);
}

.cpd-blocker {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cpd-blocker-text);
}

/* ---------- Fällig ---------- */

.cpd-terminart {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--todo-text-sehr-leise);
}

.cpd-frist {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.cpd-frist.ist-rot { color: var(--cpd-frist-rot); }
.cpd-frist.ist-orange { color: var(--cpd-frist-orange); }

.cpd-leer {
    color: var(--todo-text-sehr-leise);
}

/* ---------- Aufwand ---------- */

.cpd-eff {
    display: inline-block;
    min-width: 2.1rem;
    padding: 0.15rem 0.35rem;
    border-radius: var(--bb-radius-sm, 6px);
    text-align: center;
    background: var(--cpd-eff-bg);
    color: var(--cpd-eff-text);
    font-size: 0.78rem;
    font-weight: 700;
}

/* ---------- Zuweisen ---------- */

.cpd-zuweisen {
    min-height: 2.2rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
}

/* Noch niemand zuständig – das ist die Handlung, die diese Seite verlangt */
.cpd-zuweisen.ist-offen {
    border-color: var(--cpd-zuweisen-offen-rand);
    color: var(--cpd-zuweisen-offen-text);
    font-weight: 700;
}

.cpd-plus {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--todo-text-leise);
}

.cpd-warte {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cpd-blocker-text);
}

.cpd-fussleiste {
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--todo-card-border);
    background: var(--todo-block-bg);
    margin-top: 0;
}

/* ---------- Ausgeklappte Aufgabe ----------
   Die Aufgabe öffnet sich IN der Liste, nicht in einer Karte daneben: So
   bleibt sie an ihrem Platz in der Reihenfolge, und es ist nie unklar, welche
   Zeile gerade offen ist.
*/

.cpd-detailzeile > td {
    padding: 0;
    background: var(--cpd-detail-bg);
    border-bottom: 2px solid var(--cpf-prio-rand);
}

/* Flex statt fester Rasterspalten (Felix, 20.08.2026: "sehr viel
   verschwendeter Platz ... viel freiem Weiss und Grau Raum").

   Der Grund fuer den Wechsel ist nicht Geschmack: Die Karte steht in drei
   verschieden breiten Umgebungen - Dispositionsliste (voll), Projektcockpit
   (voll) und seit dem 20.08.2026 in der aufgeklappten Schrittliste eines
   Wechsels, also in einer Tabelle in einer Tabelle. Ein festes Raster kann nur
   eine davon richtig treffen; Flex mit Mindestbreiten trifft alle drei und
   bricht von selbst um, wenn es eng wird. Ohne Medienabfrage, denn die fragt
   nach der Fensterbreite und nicht nach der Breite DIESER Karte. */
.cpd-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 1rem 1rem;
}

/* Angaben oben ueber die ganze Breite, Handlungen darunter in EINER Reihe
   (Felix, 20.08.2026). Vorher standen die Angaben links und die Handlungen
   rechts - dadurch begannen "Status setzen" und "Verlauf" auf Hoehe der Chips,
   waehrend "Vorrang setzen" unter den Angaben lag. Drei Kaesten, die dasselbe
   tun, auf drei verschiedenen Hoehen.

   Die Chips fuellen die volle Breite ohnehin besser als eine halbe Spalte:
   Sie brechen um, statt zu stapeln. */
.cpd-detail-links,
.cpd-hebelreihe,
.cpd-detail > .cpf-karte {
    flex: 1 1 100%;
    min-width: 0;
}

/* ---------- Kopfzeile der Karte ---------- */

/* Titel links, "Bearbeiten"/"Zuklappen" rechts. Vorher standen die beiden
   Knoepfe ganz unten in einer eigenen Zeile: Wer zuklappen wollte, musste an
   der ganzen Karte vorbeiscrollen, und die Zeile kostete Hoehe fuer zwei
   Knoepfe. Oben ist der Platz neben dem Titel ohnehin leer. */
.cpd-detail-kopf {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cpd-detail-titel {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--cp-titel);
}

.cpd-detail-knoepfe {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------- Status und Verlauf nebeneinander ---------- */

.cpd-hebelreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.9rem;
}

.cpd-hebelreihe > .cpf-karte {
    flex: 1 1 15rem;
    min-width: min(100%, 14rem);
    margin-top: 0;
    margin-bottom: 0.9rem;
}

/* Der Verlauf darf breiter werden als die Statusknoepfe: Seine Zeilen tragen
   Datum, Text und Namen nebeneinander, die Knoepfe nur je ein Wort. */
.cpd-verlauf-karte {
    flex-grow: 1.6;
}

/* "Vorrang setzen" muss absolut nicht so breit sein (Felix). Es ist ein
   Schalter mit einem Satz Erklaerung - ueber die halbe Seite gezogen sah er
   aus wie der Hauptteil der Karte. In der Hebelreihe teilt es sich die Breite
   jetzt ohnehin mit Status und Verlauf; die Angabe bleibt als Obergrenze fuer
   den Fall, dass die Reihe umbricht. */
.cpd-hebelreihe > .cpf-karte-vorrang-an,
.cpd-hebelreihe > .cpf-karte:first-child {
    max-width: 26rem;
}

.cpd-detail-ort {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--todo-text-leise);
}

/* Zwei echte Knöpfe nebeneinander — mit text-align allein standen sie fast
   aneinander (Felix, 18.08.2026). Flex mit gap setzt den Abstand verlässlich,
   auch wenn später ein dritter dazukommt.

   In der Aufgabenkarte gibt es diese Zeile seit dem 20.08.2026 nicht mehr; die
   Knöpfe stehen oben neben dem Titel. Das Beschwerden-Cockpit benutzt die
   Klasse weiter für seine eigene Fusszeile — deshalb bleibt sie. */
.cpd-detail-fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.7rem;
}

/* ---------- Statusknöpfe ---------- */

.cpd-statusknoepfe {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.cpd-statusknoepfe .cp-btn {
    flex: 1 1 7rem;
}

/* ---------- Mehrfachauswahl ---------- */

.cpd-mehrfach {
    border-color: var(--cp-titel);
}

.cpd-mehrfach-zahl {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
    color: var(--todo-text-leise);
}

.cpd-mehrfach-zahl strong {
    font-size: 1.3rem;
    color: var(--cp-titel);
}

.cpd-mehrfach-knoepfe {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cpd-mehrfach-fuss {
    margin-top: 0.7rem;
    text-align: right;
}

.cpd-frage {
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--cpk-blocker-rand);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--cpk-blocker-bg);
    color: var(--cpk-blocker-text);
    font-size: 0.95rem;
    font-weight: 700;
}

/* ---------- Reihenfolge zwischen Aufgaben (cpr-, E52) ---------- */

/* In der Dispositionsliste: warum diese Aufgabe stillsteht */
.cpd-wartet {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cpr-wartet-text);
}

/* In der Projektansicht: eine wartende Zeile tritt zurück, ohne zu verschwinden */
.cpr-zeile.ist-wartend .cpk-aufgabe-titel {
    color: var(--cpr-wartet-text);
}

/* Das Klappfeld gehört zur Zeile darüber, nicht zur nächsten */
.cpr-auswahl {
    margin: -0.2rem 0 0.5rem 2.05rem;
    background: var(--cpr-wartet-bg);
}

.cpr-auswahl .cpf-auswahl-kopf {
    min-height: 2rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.82rem;
}

/* Was einen Ring erzeugen würde, ist sichtbar gesperrt statt still zu fehlen */
.cpf-auswahl-zeile.ist-gesperrt {
    color: var(--cpr-gesperrt-text);
    cursor: not-allowed;
}

.cpr-ringhinweis {
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--cpr-gesperrt-text);
}

/* ---------- Nachladen ---------- */

.cpd-mehr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.8rem 0.9rem;
    border-top: 1px solid var(--todo-card-border);
    background: var(--todo-block-bg);
}

.cpd-mehr-text {
    font-size: 0.8rem;
    color: var(--todo-text-leise);
}

.cpd-hebel {
    margin-top: 0.9rem;
    margin-bottom: 0;
}

.cpd-hebel .cp-btn {
    margin-top: 0.5rem;
}

.cpd-hebel-knopf {
    margin-top: 0.6rem;
}

/* `.cpd-verlauf-kopf` gab dem Verlauf Abstand nach oben, solange er lose unter
   „Status setzen" hing. Seit dem 20.08.2026 steht er in einer eigenen Karte
   neben den Statusknöpfen und braucht ihn nicht mehr. */

/* Ab dem vierten Eintrag scrollt der Verlauf in einem Fenster von rund drei
   Zeilen Höhe, statt die Karte beliebig lang werden zu lassen (Felix,
   18.08.2026). Bis drei Einträge bleibt alles wie vorher — ein Rahmen mit
   Bildlaufleiste um zwei Zeilen wäre nur Zierat. */
.cpd-verlauf-liste.ist-scrollbar {
    max-height: 7.5rem;
    overflow-y: auto;
    padding-right: 0.3rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-sm, 4px);
}

/* Die letzte Zeile im Fenster braucht keinen Trennstrich — er sähe aus wie
   ein abgeschnittener weiterer Eintrag. */
.cpd-verlauf-liste .cpd-verlauf:last-child {
    border-bottom: 0;
}

.cpd-verlauf {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--cpd-zeile-trenner);
    font-size: 0.82rem;
}

.cpd-verlauf-datum {
    flex: none;
    color: var(--todo-text-sehr-leise);
    font-variant-numeric: tabular-nums;
}

.cpd-verlauf-text {
    flex: 1;
    min-width: 0;
    color: var(--todo-text);
}

.cpd-verlauf-wer {
    flex: none;
    color: var(--todo-text-leise);
}

/* ---------- Team-Auslastung ---------- */

.cpd-person {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--cpd-zeile-trenner);
}

.cpd-person-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.cpd-person-name {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--todo-text);
    cursor: pointer;
    text-align: left;
}

.cpd-person-name:hover {
    color: var(--cp-titel);
    text-decoration: underline;
}

.cpd-person-wert {
    flex: none;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--cpk-ampel-kurs-bg);
    color: var(--cpk-ampel-kurs-text);
}

.cpd-person-wert.ist-pausiert {
    background: var(--cpk-ampel-pausiert-bg);
    color: var(--cpk-ampel-pausiert-text);
}

.cpd-person-wert.ist-blocker {
    background: var(--cpk-ampel-blocker-bg);
    color: var(--cpk-ampel-blocker-text);
}

.cpd-person-balken {
    height: 5px;
    margin-top: 0.3rem;
    border-radius: 3px;
    background: var(--cpd-balken-bg);
    overflow: hidden;
}

.cpd-person-fuell {
    height: 100%;
    border-radius: 3px;
    background: var(--cpd-balken-frei);
}

.cpd-person-fuell.ist-pausiert { background: var(--cpd-balken-gut); }
.cpd-person-fuell.ist-blocker { background: var(--cpd-balken-voll); }

.cpd-person-zerlegung {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--todo-text-sehr-leise);
}

/* ---------- Mittlere Breiten ---------- */

@media (max-width: 1400px) {
    .cpd-raster {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Die Seitenspalte wird zur Reihe unter der Liste, damit sie nicht
       hochkant in eine 24rem-Säule gepresst wird. */
    .cpd-seite {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
        gap: 0 1rem;
        align-items: start;
    }
}

@media (max-width: 1100px) {
    /* Die ausgeklappte Aufgabe untereinander statt nebeneinander — zwei
       Spalten in einer ohnehin schon eingerückten Zeile werden sonst zu eng. */
    .cpd-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .cpd-seite {
        grid-template-columns: minmax(0, 1fr);
    }

    .cpd-werkzeuge {
        align-items: stretch;
    }

    .cpd-statusknoepfe .cp-btn {
        flex: 1 1 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Unterprojekte (17.08.2026)

   Ein Vorhaben kann Teil eines grösseren sein. Zwei Bausteine:
   der Pfad im Kopf des Details, und die Zeilen der Unterprojekte.

   Alle Farben über Token aus todo.css — kein Farbwert steht hier.
   Beide Bausteine sind `button`, nicht `a`: Als Link würde sie die
   `:not()`-Kette in app.css hellblau übermalen.
   ══════════════════════════════════════════════════════════════════════════ */

.cpk-pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}

/* Zurueck-Knopf: sichtbar als Knopf, Pfeil LINKS und nach links zeigend
   (Felix, 18.08.2026). Vorher stand hier eine Brotkrumenleiste, deren Pfeil
   rechts stand und nach rechts zeigte - der las sich als "weiter". */
.cpk-pfad-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-sm, 4px);
    background: var(--todo-block-bg);
    color: var(--todo-text-leise);
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}

.cpk-pfad-zurueck:hover,
.cpk-pfad-zurueck:focus-visible {
    background: var(--todo-card-bg-hover);
    color: var(--todo-text);
    border-color: var(--todo-text-sehr-leise);
}

/* Ab der dritten Ebene der vollstaendige Weg - nur zur Orientierung, nicht
   anklickbar: Wer tiefer sitzt, will wissen wo, nicht ueberall hinspringen. */
.cpk-pfad-weg {
    color: var(--todo-text-sehr-leise);
}

/* Dieselbe Zeilenform wie eine Aufgabe im Projekt — Einrückung setzt die
   Komponente je Ebene, damit die Gliederung ohne Diagramm lesbar ist. */
.cpk-unterprojekt {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.4rem;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--todo-card-border);
    border-left: 3px solid transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cpk-unterprojekt:hover,
.cpk-unterprojekt:focus-visible {
    background: var(--todo-card-bg-hover);
}

.cpk-unterprojekt.ist-aktiv {
    border-left-color: var(--todo-status-arbeit);
    background: var(--todo-block-bg);
}

/* Herkunft einer Aufgabe in der Vorgängerauswahl — steht nur dort, wo der
   Vorgänger aus einem ANDEREN Teil des Vorhabens kommt. */
.cpf-auswahl-herkunft {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    color: var(--todo-text-sehr-leise);
    white-space: nowrap;
}

/* Anklickbare Aufgabenzeile im Projektdetail (17.08.2026).
   Als `button` gebaut, nicht als `a` — ein Link würde von der Regel in
   app.css hellblau übermalt. Die Knopf-Vorgaben des Browsers müssen dafür
   zurückgesetzt werden, sonst sieht die Zeile aus wie eine Schaltfläche. */
.cpk-aufgabe-klickbar {
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--todo-card-border);
    border-left: 3px solid transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cpk-aufgabe-klickbar:hover,
.cpk-aufgabe-klickbar:focus-visible {
    background: var(--todo-card-bg-hover);
}

.cpk-aufgabe-klickbar.ist-aktiv {
    border-left-color: var(--todo-status-arbeit);
    background: var(--todo-block-bg);
}

/* Die aufgeklappte Karte sitzt unter ihrer Zeile und rückt mit ihr ein. */
.cpk-aufgabe-detail {
    margin-bottom: 0.6rem;
    padding: 0.6rem 0 0.2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Artwahl vor dem Formular (18.08.2026)

   Der Typ entscheidet, welche Felder erscheinen und welche Pflicht sind.
   Deshalb steht die Wahl vor dem Formular und nicht als Auswahlfeld darin,
   das man überlesen kann. Karten statt Knöpfen, weil zu jeder Art ein Satz
   gehört, der die Entscheidung trägt.
   ══════════════════════════════════════════════════════════════════════════ */

.cpf-artwahl {
    padding: 1.5rem 0 0.5rem;
}

.cpf-artwahl-frage {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--todo-text);
}

/* Automatisch so viele Spalten wie passen — auf dem Schreibtisch vier
   nebeneinander, auf schmalen Geräten untereinander, ohne eigene Abfrage. */
.cpf-artwahl-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.85rem;
}

.cpf-artkarte {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cpf-artkarte:hover,
.cpf-artkarte:focus-visible {
    border-color: var(--todo-status-arbeit);
    background: var(--todo-card-bg-hover);
}

.cpf-artkarte-titel {
    font-size: 1rem;
    font-weight: 700;
}

.cpf-artkarte-text {
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--todo-text-leise);
}

/* Die Vorlagenkarte ist kein Knopf, sondern enthält eine Auswahl — deshalb
   kein Zeigefinger und keine Hervorhebung beim Überfahren. */
.cpf-artkarte-vorlage {
    cursor: default;
    background: var(--todo-block-bg);
}

.cpf-artkarte-vorlage:hover,
.cpf-artkarte-vorlage:focus-within {
    border-color: var(--todo-card-border);
    background: var(--todo-block-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   Beschwerden (cpb-)

   Die Tabelle selbst ist die der Dispositionsliste (cpd-) — dieselbe Bauart,
   dieselben Filterköpfe, dieselben Zeilenzustände. Hier stehen nur die Dinge,
   die es dort nicht gibt: die Alters-Spalte, der Ort in zwei Zeilen, die
   Dringlichkeit als Auswahl in der Zeile, und der Meldungstext.

   Wie überall in dieser Datei: kein Farbwert, nur Verweise auf den
   :root-Block von todo.css (E5).
   ══════════════════════════════════════════════════════════════════════════ */

.cpb-sp-alter { width: 5.5rem; }
.cpb-sp-ort { width: 11rem; }
.cpb-sp-dringlich { width: 10rem; }
.cpb-sp-kategorie { width: 8.5rem; }
.cpb-sp-zustand { width: 9rem; }

/* Das Alter ist die wichtigste Zahl der Seite: Sie sagt, wie lange ein Mieter
   schon wartet. Deshalb tabellarische Ziffern — sonst tanzen die Zahlen
   untereinander. Die Farbe gilt dem WARTEN, nicht dem Alter (siehe
   AlterKlasse): Woran gearbeitet wird, bleibt grau, auch nach drei Wochen. */
.cpb-alter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--todo-text-leise);
    white-space: nowrap;
}

.cpb-alter.ist-orange {
    color: var(--cpd-frist-orange);
    font-weight: 700;
}

.cpb-alter.ist-rot {
    color: var(--cpd-frist-rot);
    font-weight: 700;
}

.cpb-objekt {
    font-size: 0.85rem;
    font-weight: 600;
}

.cpb-einheit {
    font-size: 0.78rem;
    color: var(--todo-text-leise);
}

/* Dringlichkeit: eine feste Marke (Felix, 18.08.2026 — vom Mieter gesetzt,
   hier nicht disponierbar). ERST über .cpd-score versucht (19.08.2026,
   Felix: „sieht aus wie ein Button, den man nicht drücken kann") — dessen
   fette 0,95rem-Schrift und 2,6rem-Mindestbreite sind für eine kurze ZAHL
   gebaut, nicht für einen Text wie „Sofort / Fixtermin". Jetzt derselbe
   kleine Zustands-Pill wie .cpk-ampel, mit denselben drei Farbstufen wie der
   Score (E5: keine neue Farbe, nur ein neuer Name für dieselben Tokens). */
.cpb-dringlich {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    background: var(--cpd-score-leise-bg);
    color: var(--cpd-score-leise-text);
}

.cpb-dringlich.ist-mittel {
    background: var(--cpd-score-mittel-bg);
    color: var(--cpd-score-mittel-text);
}

.cpb-dringlich.ist-hoch {
    background: var(--cpd-score-hoch-bg);
    color: var(--cpd-score-hoch-text);
}

/* „Beschwerde abschliessen" und sein Info-Knopf als eine sichtbare Einheit —
   zwei unabhängige Knöpfe nebeneinander, keiner im anderen verschachtelt, ein
   Klick auf den einen löst den anderen nie mit aus. */
.cpb-abschliessen-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.cpb-aufgabenzahl {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--todo-text-leise);
}

/* Mehrere Meldungen aus derselben Wohnung sind bei Studenten der Normalfall:
   erst schreibt der eine, zwei Tage später der Mitbewohner. Die Marke ist ein
   Hinweis, keine Warnung — deshalb dieselbe ruhige Fläche wie die Chips. */
.cpb-marke-doppelt {
    background: var(--cpk-chip-bg);
    color: var(--cpk-chip-text);
}

/* ---------- Die aufgeklappte Beschwerde ---------- */

/* Der Text des Mieters ist der Kern der Zeile und darf lesbar breit stehen —
   aber nicht unbegrenzt hoch: Ein Roman aus dem Web-Formular soll die
   Handlungsknöpfe nicht aus dem Bild schieben. */
.cpb-meldung {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-card-bg);
    font-size: 0.9rem;
    line-height: 1.45;
}

.cpb-wege {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.cpb-abschnitt {
    margin-top: 0.9rem;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cpf-gruppe-text);
}

.cpb-protokoll {
    margin-top: 0.9rem;
}

/* Das interne Protokoll ist zeilenweise gewachsen und trägt seine Bedeutung in
   den Umbrüchen — deshalb `pre`. Umgebrochen wird trotzdem, sonst reisst eine
   lange Zeile die Tabelle auf. */
.cpb-protokoll-text {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.65rem;
    max-height: 14rem;
    overflow-y: auto;
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-block-bg);
    font-family: var(--bb-font-mono, ui-monospace, monospace);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--todo-text-leise);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ==========================================================================
   Schritte einer Projektvorlage (cppv-) und ihre Anzeige beim Anlegen (cpp-)
   ==========================================================================
   Ein Schritt ist ein kleines Formular in einem grossen. Damit das nicht als
   Feldersuppe endet, bekommt jeder Schritt eine eigene Karte mit einer
   nummerierten Kopfzeile — dieselbe Idee wie die Aufgabenkarte im Cockpit,
   nur eine Stufe kleiner. */

.cppv-schritt {
    margin-bottom: 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--todo-card-border);
    border-left: 3px solid var(--cp-titel);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-card-bg);
}

.cppv-schritt-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Die Nummer ist keine Zierde: „wartet auf 3" verweist auf genau sie. */
.cppv-schritt-nr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--cpf-prio-bg);
    color: var(--cp-titel);
    font-size: 0.82rem;
    font-weight: 800;
}

.cppv-schritt-kopf .cpf-input {
    flex: 1 1 auto;
    min-width: 0;
}

.cppv-schritt-knopf {
    flex: 0 0 auto;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-sm, 6px);
    background: var(--todo-block-bg);
    color: var(--todo-text);
    font-size: 0.82rem;
    cursor: pointer;
}

.cppv-schritt-knopf:hover:not(:disabled) {
    background: var(--todo-card-bg-hover);
}

.cppv-schritt-knopf:disabled {
    opacity: 0.4;
    cursor: default;
}

.cppv-schritt-knopf.ist-weg:hover:not(:disabled) {
    border-color: var(--cpf-loeschen-rand);
    color: var(--cpf-loeschen-text);
}

/* Zeitfenster und „wartet auf" sind beides Mehrfachauswahlen. Sie sehen
   deshalb gleich aus — verschiedene Gestalt für dieselbe Handlung müsste man
   sich zweimal merken. */
.cppv-bloecke {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.cppv-block {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-sm, 6px);
    background: var(--todo-block-bg);
    font-size: 0.82rem;
    cursor: pointer;
}

.cppv-schritt-fuss {
    justify-content: flex-start;
}

/* ---------- Beim Anlegen: was die Vorlage mitbringt ---------- */

.cpp-schritte {
    margin: 0 0 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--bb-radius-md, 8px);
    background: var(--todo-block-bg);
}

.cpp-schritte-kopf {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--cp-titel);
}

.cpp-schritte-liste {
    margin: 0.6rem 0 0;
    padding-left: 1.4rem;
    font-size: 0.84rem;
    line-height: 1.7;
}

.cpp-schritte-liste li {
    display: list-item;
}

.cpp-schritt-titel {
    margin-left: 0.35rem;
}

.cpp-schritt-zusatz {
    margin-left: 0.35rem;
    font-size: 0.78rem;
    color: var(--todo-text-leise);
}

/* Bleibt stehen, bis der Anwender weitergeht — deshalb etwas mehr Luft als ein
   gewöhnlicher Hinweis. */
.cpp-nacharbeit ul {
    margin: 0.4rem 0 0.6rem;
    padding-left: 1.2rem;
    line-height: 1.6;
}

/* ==========================================================================
   Zustandsaufnahme an einer Aufgabe (cpd-zustand-, E86 Baustufe 3)
   ==========================================================================
   Eine Ankreuzliste, die auf dem Handy in der Wohnung bedient wird. Deshalb
   ganze Zeilen als Klickflaeche statt nur des Kaestchens, und ein sichtbarer
   Unterschied zwischen „bedeutet Arbeit" und „nur festhalten" — sonst kreuzt
   jemand fuenf Dinge an und wundert sich ueber fuenf neue Aufgaben. */

.cpd-zustand-liste {
    max-height: 22rem;
    overflow-y: auto;
    margin-bottom: 0.6rem;
    padding-right: 0.2rem;
}

.cpd-zustand-bereich {
    margin: 0.6rem 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--todo-text-leise);
}

.cpd-zustand-bereich:first-child {
    margin-top: 0;
}

.cpd-zustand-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--bb-radius-sm, 6px);
    font-size: 0.86rem;
    line-height: 1.35;
    cursor: pointer;
}

.cpd-zustand-zeile:hover {
    background: var(--todo-card-bg-hover);
}

/* Was Arbeit bedeutet, bekommt eine Kante — das ist der Unterschied, auf den
   es beim Ankreuzen ankommt. */
.cpd-zustand-zeile.ist-arbeit {
    border-left: 3px solid var(--cp-titel);
}

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

.cpd-zustand-marke {
    flex: 0 0 auto;
    padding: 0.15rem 0.45rem;
    border-radius: var(--bb-radius-sm, 6px);
    background: var(--todo-block-bg);
    font-size: 0.74rem;
    color: var(--todo-text-leise);
    white-space: nowrap;
}

/* ==========================================================================
   Reiter Wohnungswechsel (cpw-, E86 Baustufe 4)
   ==========================================================================
   Der Reiter hat EINE Liste: eine Zeile je Einheit, ob dafuer schon ein
   Wechsel laeuft oder nicht. Bis zum 20.08.2026 waren es zwei Tabellen
   untereinander, und die zweite lag unterhalb des Bildschirmrands (Felix).
   Alles Uebrige teilt sich die Seite mit den anderen Cockpits. */

/* Eine Zeile, hinter der ein laufendes Vorhaben steht.

   BEWUSST NICHT cpo-ist-mitglied: Das daempft die Zeile grau, weil ein
   Projektmitglied nicht mehr fuer sich selbst zaehlt. Hier ist es umgekehrt —
   die laufende Zeile ist die wichtigere. Also eine Kante an der Seite statt
   einer Daempfung: erkennbar beim Ueberfliegen, ohne Rangordnung im Grauwert. */
.cpw-ist-aktiv > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--cp-btn-haupt-bg, #1e3a8a);
}

/* Die aufgeklappten Schritte eines Wechsels (E88, 20.08.2026).
   Sie stehen hier, seit Wechsel aus dem Projektcockpit ausgefiltert sind —
   vorher fuehrte "Oeffnen" dorthin und danach ins Leere. */
.cpw-schrittzeile > td {
    padding: 0.6rem 0.8rem;
    background: var(--todo-block-bg);
}

.cpw-schritt-knopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cpw-schritt-knopf:hover .cpw-schritt-titel {
    text-decoration: underline;
}

.cpw-schritt-titel {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
}

/* ==========================================================================
   ECHTES GELD (Felix, 20.08.2026)
   ==========================================================================
   "Bitte markiere alles, was wirklich Geld abbucht, als solches! Ich moechte
   beim Probieren nicht aus Versehen echtes Geld abbuchen."

   Diese Marke steht an JEDER Stelle, an der ein Betrag zu einer Buchung auf
   einem Mieterkonto fuehren kann. Sie ist bewusst dieselbe Farbe wie der
   Loeschknopf: Beides sind Handlungen, die man nicht versehentlich tun soll.

   Wer hier etwas dazubaut: Ein neues Feld mit einem Betrag bekommt diese Marke,
   sonst ist die Kennzeichnung loechrig - und eine loechrige Kennzeichnung ist
   schlimmer als keine, weil man sich auf sie verlaesst. */
.cps-geldmarke {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.3rem;
    border-radius: var(--bb-radius-sm, 4px);
    background: var(--cpk-blocker-bg, #fef2f2);
    color: var(--cpf-loeschen-text, #b91c1c);
    font-size: 0.78rem;
    font-weight: 800;
}

/* Ein Feld, in dem ein Betrag steht, sieht anders aus als eines mit einem
   Namen darin - auch dann, wenn gerade nichts drinsteht. */
.cps-geldfeld {
    max-width: 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cps-geldfeld:not(:placeholder-shown),
.cps-geldfeld:focus {
    border-color: var(--cpf-loeschen-rand, #fecaca);
}

/* ---------- Zurueck auf offen ---------- */

/* Steht abgesetzt unter den drei Statuswegen, nicht zwischen ihnen: Es ist
   eine Ruecknahme und keine vierte Richtung. */
.cpd-zurueck {
    margin-top: 0.5rem;
}

/* ---------- Rueckfrage vor dem Zuruecknehmen eines Wechsels ---------- */

.cpw-ruecknahme > td {
    padding: 0.7rem 0.8rem;
    background: var(--cpk-blocker-bg);
    border-bottom: 1px solid var(--cpk-blocker-rand);
}

.cpw-ruecknahme strong {
    color: var(--cpk-blocker-text);
}

/* ---------- Termin-Formulare am Wechsel-Schritt (E86, Formulare 1 und 3) ----

   Der Kasten steht in der gemeinsamen Aufgabenkarte, neben Vorrang, Status und
   Verlauf. Er ist so breit wie noetig und nicht so breit wie die Karte: Ein
   Datumsfeld ueber die ganze Seite gezogen sieht aus, als koennte man mehr
   hineinschreiben als ein Datum. */
.cpw-termin {
    max-width: min(100%, 44rem);
}

.cpw-termin-felder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.cpw-termin-felder > .cpf-feld {
    flex: 0 1 16rem;
    margin-bottom: 0;
}

/* ---------- Phase und Fortschritt in der Hauptliste ---------- */

.cpw-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- Filtern und Sortieren ---------- */

/* Die Kennzahlkacheln sind seit dem 20.08.2026 Knoepfe (Felix). Sie sehen
   unveraendert aus - wer auf eine Zahl schaut und wissen will, welche Zeilen
   dahinterstehen, soll sie sehen koennen, ohne dass die Leiste dafuer anders
   aussieht als in den anderen Cockpits. Nur der aktive Zustand ist markiert. */
.cpk-karte-knopf {
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cpk-karte-knopf:hover {
    border-color: var(--cp-btn-haupt-bg, #1e3a8a);
}

.cpk-karte-knopf.ist-aktiv {
    border-color: var(--cp-btn-haupt-bg, #1e3a8a);
    box-shadow: inset 0 -3px 0 0 var(--cp-btn-haupt-bg, #1e3a8a);
}

/* Hier standen fuer wenige Stunden eigene Klassen fuer eine Filterleiste ueber
   der Tabelle und anklickbare Spaltenkoepfe (cpo-filterzeile, cpo-sortknopf und
   Verwandte). Sie sind ersatzlos entfallen: Der Reiter benutzt jetzt dieselbe
   Mechanik wie Dispositionsliste (E51) und Projektcockpit (E77) - Pfeil im
   Spaltenkopf, Feld als eigene Tabellenzeile, cpd-kopfzelle und cpd-filterfeld.

   Felix, 20.08.2026: "ein ganz komischer Filter". Er hatte recht, und der Grund
   war nicht das Aussehen: Es war ein DRITTER Weg neben zwei bereits
   eingefuehrten. Der dritte Weg ist immer der, den niemand erwartet. */

/* Der Balken beantwortet "wie weit?" ohne Kopfrechnen, die Zahlen daneben
   beantworten "wie viel?" - "5 von 7" ist etwas anderes als "50 von 70". */
.cpw-fortschritt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cpw-balken {
    flex: 1 1 auto;
    min-width: 3.5rem;
    max-width: 7rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--todo-block-bg);
    overflow: hidden;
}

.cpw-balken-voll {
    height: 100%;
    border-radius: 999px;
    background: var(--cp-btn-haupt-bg, #1e3a8a);
}

/* Blockiert schlaegt Fortschritt: Ein halb voller Balken in Ruhefarbe neben
   einem gemeldeten Problem laese sich wie "laeuft doch". */
.cpw-balken-voll.ist-blocker {
    background: var(--cpk-ampel-blocker-text);
}

.cpw-balken-zahl {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--todo-text-leise);
}

/* ---------- Die Schritte als Tabelle ---------- */

.cpw-schritte th {
    font-size: 0.72rem;
}

.cpw-schritte .cpw-schritt-knopf {
    padding: 0;
}

.cpw-schritte tr.cpw-ist-offen > td {
    background: var(--todo-card-bg-hover);
}

/* Vier Zustaende, vier Farben (Felix, 20.08.2026: "sollte color coded sein").

   Die allgemeine Ampel taugte hier nicht: "erledigt" benutzt seit dem
   17.08.2026 bewusst dieselbe ruhige Grundflaeche wie "pausiert", damit eine
   fertige Aufgabe in der Projektliste nicht wie eine offene aussieht - im
   Ergebnis sahen "Erledigt" und "Offen" hier aber fast gleich aus. Und
   "Angefangen" hatte gar keine eigene Klasse.

   Deshalb NUR IN DIESER TABELLE umbelegt, aus vorhandenen Tokenpaaren: gruen
   = erledigt, blau = angefangen, rot = Problem, grau = offen. Die Bedeutung
   der Farben bleibt damit dieselbe wie ueberall - nur die Zuordnung ist hier
   feiner. */
.cpw-schritte .cpk-ampel.ist-erledigt {
    background: var(--cpk-ampel-kurs-bg);
    color: var(--cpk-ampel-kurs-text);
}

.cpk-ampel.ist-arbeit {
    background: var(--cpk-ampel-fertig-bg);
    color: var(--cpk-ampel-fertig-text);
}

/* Zuordnung: gruen = eine Person hat sie angenommen, gelb = sie liegt noch in
   der Gruppe (jeder und damit niemand), rot = gar keine Zuordnung. Der Punkt
   ist Beiwerk zum Namen und deshalb aria-hidden - vorgelesen wird der Name. */
.cpw-zuord {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.cpw-punkt {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
}

.cpw-zuord.ist-person {
    color: var(--todo-status-erledigt);
}

.cpw-zuord.ist-gruppe {
    color: var(--todo-status-blockiert);
}

.cpw-zuord.ist-offen {
    color: var(--todo-vorrang);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Stapelerfassung (E99) — das Raster
   ═══════════════════════════════════════════════════════════════════════════

   Bewusst Desktop (T5): Berührziele spielen hier keine Rolle, dafür ist die
   Maske nicht gedacht. Deshalb kleinere Zeilenhöhen als sonst im Modul — man
   soll dreissig Zeilen auf einmal sehen.

   Farben ausschliesslich über die vorhandenen Tokens (E5/E12); kein einziger
   Farbwert steht hier. */

.stg-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.75rem;
}

.stg-anker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stg-anker label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--todo-text-sehr-leise);
    white-space: nowrap;
}

.stg-anker select {
    min-width: 22rem;
    max-width: 34rem;
}

.stg-werkzeuge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ─── Meldungen ─────────────────────────────────────────────────────────── */

.stg-meldung {
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.5rem;
    border-radius: var(--bb-radius-md, 6px);
    border: 1px solid var(--todo-card-border);
    background: var(--todo-block-bg);
    color: var(--todo-text);
    font-size: 0.86rem;
}

.stg-meldung.ist-gut {
    background: var(--cp-marke-gut-bg);
    color: var(--cp-marke-gut-text);
    border-color: var(--cp-marke-gut-bg);
}

.stg-meldung.ist-schlecht {
    background: var(--cp-marke-schlecht-bg);
    color: var(--cp-marke-schlecht-text);
    border-color: var(--cp-marke-schlecht-bg);
}

.stg-meldung.ist-hinweis {
    color: var(--todo-text-leise);
}

/* ─── Das Raster ────────────────────────────────────────────────────────── */

.stg-rahmen {
    overflow: auto;
    max-height: 62vh;
    border: 1px solid var(--todo-card-border);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
}

/* `fixed`: Die Breiten kommen aus dem colgroup und sind damit verbindlich —
   sonst rechnete der Browser sie aus dem Inhalt und ignorierte das Ziehen.
   Nebeneffekt: Bei 200 Zeilen muss er nicht mehr jede Spalte ausmessen. */
.stg-raster {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
    table-layout: fixed;
}

.stg-raster th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    padding: 0.35rem 0.5rem;
    background: var(--todo-block-bg);
    border-bottom: 1px solid var(--todo-card-border);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--todo-text-sehr-leise);
    white-space: nowrap;
}

.stg-raster td {
    padding: 0;
    border-bottom: 1px solid var(--todo-card-border);
    border-right: 1px solid var(--todo-card-border);
    vertical-align: middle;
}

/* ─── Die drei stehenbleibenden Spalten ──────────────────────────────────────

   `#`, `Ebene` und `Titel` bleiben beim Scrollen nach rechts stehen. Ohne das
   sieht man hinten in der Tabelle nicht mehr, welche Zeile man gerade
   bearbeitet (Felix, 26.08.2026).

   Die `left`-Werte muessen zu den Breiten passen — deshalb stehen beide hier
   untereinander und nicht verstreut. Wer eine Breite aendert, aendert die
   Versaetze mit. */

.stg-raster .stg-lfd {
    padding: 0.25rem 0.5rem;
    color: var(--todo-text-sehr-leise);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--todo-block-bg);
    text-align: left;
}

.stg-raster th:nth-child(-n + 3),
.stg-raster td:nth-child(-n + 3) {
    position: sticky;
    z-index: 1;
}

/* Die Versaetze folgen den TATSAECHLICHEN Breiten — beim Ziehen setzt
   `breitenSetzen` die beiden Variablen neu. Die Rueckfallwerte gelten nur,
   solange das Skript noch nicht gelaufen ist. */
.stg-raster th:nth-child(1), .stg-raster td:nth-child(1) { left: 0; }
.stg-raster th:nth-child(2), .stg-raster td:nth-child(2) { left: var(--stg-l2, 106px); }
.stg-raster th:nth-child(3), .stg-raster td:nth-child(3) { left: var(--stg-l3, 173px); }

/* Die Kopfzeile klebt oben UND links — sie braucht die hoechste Ebene, sonst
   scrollt der Tabelleninhalt darueber hinweg. */
.stg-raster th:nth-child(-n + 3) { z-index: 6; }

/* Stehende Zellen brauchen einen eigenen Hintergrund: Sonst scheint beim
   Scrollen durch, was darunter durchlaeuft. */
.stg-raster td:nth-child(2),
.stg-raster td:nth-child(3) {
    background: var(--todo-card-bg);
}

.stg-raster td:nth-child(3) {
    border-right: 2px solid var(--todo-card-border);
}

.stg-zahl {
    display: inline-block;
    min-width: 1.6rem;
}

/* Die Nummer des angelegten Datensatzes. Keine Spalte, sondern eine Marke:
   Sie wird vom System vergeben, und eine Zeile, die sie traegt, wird beim
   naechsten Uebernehmen uebersprungen (R14). */
.stg-angelegt {
    display: inline-block;
    padding: 0 0.3rem;
    border-radius: var(--bb-radius-sm, 4px);
    background: var(--cp-marke-gut-bg);
    color: var(--cp-marke-gut-text);
    font-size: 0.72rem;
    font-weight: 700;
}

.stg-weg {
    margin-left: 0.35rem;
    border: 0;
    background: none;
    color: var(--todo-text-sehr-leise);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0;
}

.stg-zeile:hover .stg-weg {
    opacity: 1;
}

.stg-weg:hover {
    color: var(--todo-vorrang);
}

/* ─── Die Zellen ────────────────────────────────────────────────────────── */

.stg-zelle input {
    width: 100%;
    min-width: 6rem;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    padding: 0.3rem 0.45rem;
    background: transparent;
    color: var(--todo-text);
    font: inherit;
}

.stg-zelle input:focus {
    background: var(--todo-card-bg-hover);
    box-shadow: inset 0 0 0 2px var(--cp-titel);
}

/* Was fuer die Zeile nicht gilt, wird ausgegraut und GESPERRT — nicht
   ausgeblendet [MUSS]. Verschwindende Spalten verschieben beim Einfuegen die
   Ausrichtung, und das merkt niemand rechtzeitig. */
.stg-zelle.ist-tot {
    background: var(--todo-block-bg);
}

.stg-zelle.ist-tot input {
    color: var(--todo-text-sehr-leise);
    cursor: not-allowed;
}

/* R7: Was nicht auf die Werteliste passt, bleibt LESBAR stehen und wird rot.
   Nie stillschweigend leeren, nie auf den naechstbesten Wert raten. */
.stg-zelle.ist-falsch {
    background: var(--cp-marke-schlecht-bg);
}

.stg-zelle.ist-falsch input {
    color: var(--cp-marke-schlecht-text);
    font-weight: 700;
}

.stg-zelle.ist-gewaehlt {
    background: var(--todo-card-bg-hover);
    box-shadow: inset 0 0 0 1px var(--cp-titel);
}

/* Die Gliederung sichtbar machen, ohne sie zu speichern: Eingerueckt wird nur
   der Titel, und zwar aus der Ebenen-SPALTE (R2). Eine echte Einrueckung
   ueberlebt Copy-Paste nicht, diese hier ist reine Anzeige. */
.stg-zeile[data-ebene="2"] td:nth-child(3) input { padding-left: 1.2rem; }
.stg-zeile[data-ebene="3"] td:nth-child(3) input { padding-left: 2.1rem; }
.stg-zeile[data-ebene="4"] td:nth-child(3) input { padding-left: 3.0rem; }
.stg-zeile[data-ebene="5"] td:nth-child(3) input { padding-left: 3.9rem; }
.stg-zeile[data-ebene="6"] td:nth-child(3) input { padding-left: 4.8rem; }

.stg-art-vorhaben td:nth-child(3) input {
    font-weight: 700;
    color: var(--cp-titel);
}

/* ─── Fehlerliste ───────────────────────────────────────────────────────── */

.stg-fehlerliste {
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--cp-marke-schlecht-bg);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
}

.stg-fehlerkopf {
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--cp-marke-schlecht-text);
    margin-bottom: 0.35rem;
}

.stg-fehlerliste ul {
    margin: 0;
    padding-left: 1.1rem;
}

.stg-fehlerliste li {
    font-size: 0.84rem;
    color: var(--todo-text);
    margin-bottom: 0.2rem;
}

.stg-fehlerliste em {
    color: var(--todo-text-leise);
    font-style: normal;
}

.stg-fehlerrest {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--todo-text-leise);
}

.stg-listen {
    display: none;
}

/* ─── Breitmodus ────────────────────────────────────────────────────────────

   Kein echtes Vollbild: Das nimmt Adressleiste und Reiter mit und faengt die
   Escape-Taste ab — bei einer Maske, in der man tippt, mehr Ueberraschung als
   Nutzen. Hier bleibt alles eine gewoehnliche Seite, nur breiter: Reiterleiste
   weg, Breitenbegrenzung weg, Raster hoeher. */

body.stg-weit .cp {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

body.stg-weit .cp-leiste {
    display: none;
}

body.stg-weit .stg-rahmen {
    max-height: 82vh;
}

/* ─── Ladekringel am Uebernehmen-Knopf ─────────────────────────────────────

   Ein Knopf, der nur ausgraut, sieht bei 187 Zeilen aus wie ein Haenger. Der
   Text daneben sagt, WAS gerade laeuft — dieselbe Ueberlegung wie beim
   Foto-Upload (E62/E34). */

.stg-dreht {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
    vertical-align: -0.05em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: stg-drehen 0.7s linear infinite;
}

@keyframes stg-drehen {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .stg-dreht { animation-duration: 2.4s; }
}

/* ─── Zuklappen und Einfuegen (26.08.2026) ───────────────────────────────── */

.stg-raster td.stg-lfd {
    position: sticky;           /* schon oben gesetzt — hier nur der Bezug */
    padding-bottom: 0.25rem;
}

.stg-klapp,
.stg-klapp-leer {
    display: inline-block;
    width: 1.1rem;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1;
}

.stg-klapp {
    border: 0;
    background: none;
    padding: 0;
    color: var(--todo-text-leise);
    cursor: pointer;
}

.stg-klapp:hover {
    color: var(--cp-titel);
}

/* Wie viele Zeilen eingeklappt sind. Absichtlich sichtbar: Ein zugeklappter
   Zweig wird trotzdem geschrieben — wer ihn fuer geloescht haelt, verliert
   beim Uebernehmen die halbe Gliederung. */
.stg-zugeklappt {
    display: inline-block;
    margin-left: 0.2rem;
    padding: 0 0.25rem;
    border-radius: var(--bb-radius-sm, 4px);
    background: var(--todo-card-border);
    color: var(--todo-text-leise);
    font-size: 0.68rem;
    font-weight: 700;
}

/* Der Knopf sitzt am UNTEREN Rand der Zelle — dort, wo die Luecke zwischen
   zwei Zeilen ist. Absolut positioniert, damit er keine Spaltenbreite kostet. */
.stg-plus {
    position: absolute;
    left: 1.1rem;
    bottom: -0.55rem;
    z-index: 2;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 1px solid var(--todo-card-border);
    border-radius: 50%;
    background: var(--todo-card-bg);
    color: var(--todo-text-leise);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.stg-zeile:hover .stg-plus {
    opacity: 1;
}

.stg-plus:hover,
.stg-plus:focus-visible {
    opacity: 1;
    border-color: var(--cp-titel);
    color: var(--cp-titel);
}

/* ─── Rueckfrage vor dem Entfernen eines Vorhabens (26.08.2026) ───────────── */

.cpf-loeschfrage {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cp-marke-schlecht-bg);
    border-radius: var(--todo-card-radius);
    background: var(--todo-card-bg);
}

.cpf-loeschfrage-kopf {
    font-size: 0.9rem;
    color: var(--todo-text);
    margin-bottom: 0.6rem;
}

.cpf-loeschfrage-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cpf-loeschfrage .cpf-hinweis {
    margin-top: 0.6rem;
}

/* ─── Nachtrag 26.08.2026: Griffe, Plus ueber beiden Zeilen ───────────────── */

/* Bei `table-layout: fixed` darf die Zelle sich nicht an ihrem Inhalt
   festhalten — sonst liesse sich keine Spalte schmaler ziehen. */
.stg-zelle input {
    min-width: 0;
}

.stg-raster th {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stg-griff {
    position: absolute;
    top: 0;
    right: -3px;
    width: 7px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

.stg-griff:hover::after,
body.stg-zieht .stg-griff::after {
    content: "";
    position: absolute;
    top: 0;
    left: 2px;
    width: 2px;
    height: 100%;
    background: var(--cp-titel);
}

/* Waehrend des Ziehens nichts markieren — sonst faerbt sich beim Wischen die
   halbe Kopfzeile blau. */
body.stg-zieht {
    user-select: none;
    cursor: col-resize;
}

/* Das "+" sitzt auf der Grenze zwischen zwei Zeilen und ragt zur Haelfte in
   die naechste hinein. Deren Zelle kommt im DOM SPAETER und uebermalte es
   deshalb (Felix, 26.08.2026). Die ueberfahrene Zeile bekommt darum eine
   hoehere Ebene als ihre Nachbarn — aber eine niedrigere als die Kopfzeile. */
.stg-zeile:hover td:nth-child(-n + 3) {
    z-index: 4;
}

/* Es zeigt sich NUR an der ueberfahrenen Zeile — nicht zusaetzlich an der
   darueber. Der Versuch, die Luecke von beiden Seiten anzubieten, brachte
   zwei Plus gleichzeitig auf den Schirm, und das obere lag zur Haelfte unter
   der naechsten Zeile (Felix, 26.08.2026). Ein Knopf je Luecke, und zwar der,
   auf dessen Zeile der Zeiger steht. */

/* Wochenstunden je Person (E100 Stufe 1): Zahl und Knopf in einer Zeile.
   Das Feld bleibt schmal — es nimmt hoechstens zwei Ziffern auf, und ein
   ueber die halbe Karte gezogenes Zahlenfeld sieht aus wie ein Textfeld. */
.cps-kapazitaet-zeile {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.cps-kapazitaet-zeile .cpf-input {
    width: 7rem;
    flex: 0 0 auto;
}

/* Rueckstau in der Team-Auslastung (E100 Stufe 1): bewusst RUHIG.
   Er bekommt keine Ampelfarbe - ein Rueckstau ist ein Vorrat, keine
   Ueberlast. Faerbte man ihn, waere jede Person am Umstelltag rot. */
.cpd-rueckstau {
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Wochenplaner (cpp-, E100 Stufe 2)

   Ein eigenes HTML-Raster, kein Telerik-Grid (E99, T1). Die Tabelle traegt
   `table-layout: fixed`: Ohne das misst der Browser bei jedem Zeichnen alle
   Spalten neu aus, und die Spalten sprangen, sobald eine Karte dazukam.

   Die Namensspalte klebt links (`position: sticky`), der Kopf oben. Wer bei
   KW 42 ankommt, muss noch wissen, in wessen Zeile er steht.

   FARBEN NUR UEBER TOKENS (E5). Die drei Ampelstufen sind dieselben wie in
   der Dispositionsliste und zeigen auf dieselben Werte — eine Zelle, die
   „voll" anders faerbt als die Leiste zwei Klicks weiter, waere eine zweite
   Bedeutung fuer dieselbe Farbe.
   ═══════════════════════════════════════════════════════════════════════════ */

.cpp-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.6rem;
}

.cpp-bezug {
    font-size: 0.95rem;
    color: var(--todo-text);
}

.cpp-bezug span {
    color: var(--todo-text-leise);
}

.cpp-leiste-hinweise {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Was der Planer NICHT weiss, steht neben dem, was er zeigt — nicht in einer
   Fussnote. Ruhig gehalten: Es ist eine Einschraenkung, keine Stoerung. */
.cpp-warnung {
    font-size: 0.8rem;
    color: var(--cpd-blocker-text);
}

.cpp-navi {
    display: inline-flex;
    gap: 0.25rem;
}

.cpp-anzahl {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--todo-text-leise);
}

.cpp-anzahl .cpf-input {
    width: 4.5rem;
}

/* ─── Das Raster ───────────────────────────────────────────────────────── */

.cpp-rahmen {
    overflow: auto;
    max-height: 62vh;
    border: 1px solid var(--cpp-rand);
    border-radius: var(--bb-radius-sm, 10px);
    background: var(--cpp-zelle-bg);
}

.cpp-tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.cpp-tabelle th,
.cpp-tabelle td {
    border-right: 1px solid var(--cpp-rand);
    border-bottom: 1px solid var(--cpp-rand);
    vertical-align: top;
    text-align: left;
}

.cpp-ecke,
.cpp-wochenkopf {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--cpp-kopf-bg);
    padding: 0.4rem 0.5rem;
    font-size: 0.8rem;
}

.cpp-ecke {
    left: 0;
    z-index: 4;
    width: 12rem;
}

.cpp-wochenkopf.ist-aktuell {
    background: var(--cpp-woche-aktuell-bg);
    box-shadow: inset 0 2px 0 var(--cpp-woche-aktuell-rand);
}

/* Vergangene Wochen treten zurueck, verschwinden aber nicht: Der Plan schaut
   nach vorn (R16), und was hinter einem liegt, soll man sehen, ohne dass es
   um Aufmerksamkeit mit der naechsten Woche konkurriert. */
.cpp-wochenkopf.ist-vergangen,
.cpp-zelle.ist-vergangen {
    background: var(--cpp-zelle-vergangen-bg);
}

.cpp-wochenname {
    font-weight: 700;
    color: var(--todo-text);
}

.cpp-wochenspanne {
    color: var(--todo-text-sehr-leise);
    font-size: 0.75rem;
}

.cpp-name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 12rem;
    background: var(--cpp-kopf-bg);
    padding: 0.45rem 0.5rem;
    font-weight: 400;
}

.cpp-name-text {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--todo-text);
}

.cpp-name-sub {
    font-size: 0.72rem;
    color: var(--todo-text-sehr-leise);
}

.cpp-zeile.ist-gruppe .cpp-name {
    background: var(--cpd-zeile-gewaehlt-bg);
}

.cpp-marke {
    display: inline-block;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--cpk-chip-bg);
    color: var(--cpk-chip-text);
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
}

.cpp-marke.ist-still {
    background: transparent;
    color: var(--todo-text-sehr-leise);
    font-weight: 600;
}

/* ─── Die Zelle ────────────────────────────────────────────────────────── */

.cpp-zelle {
    padding: 0.35rem;
    min-width: 9rem;
    background: var(--cpp-zelle-bg);
}

/* Waehrend eines Zuges: wo darf es hin, und wo steht der Zeiger gerade.
   Beides ist noetig — nur das Ziel zu faerben laesst offen, ob die anderen
   Zellen verboten oder nur unbeteiligt sind. */
.cpp-zelle.ist-moeglich {
    background: var(--cpp-moeglich-bg);
}

.cpp-zelle.ist-ziel {
    background: var(--cpp-ziel-bg);
    box-shadow: inset 0 0 0 2px var(--cpp-ziel-rand);
}

/* Eine Zelle mit noch nicht geschriebenen Aenderungen. */
.cpp-zelle.ist-geaendert {
    box-shadow: inset 3px 0 0 var(--cpp-offen-rand);
}

.cpp-messung {
    margin-bottom: 0.3rem;
}

.cpp-zahl {
    display: inline-block;
    padding: 0.02rem 0.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--cpk-ampel-kurs-bg);
    color: var(--cpk-ampel-kurs-text);
}

.cpp-zahl.ist-gut {
    background: var(--cpk-ampel-pausiert-bg);
    color: var(--cpk-ampel-pausiert-text);
}

.cpp-zahl.ist-voll {
    background: var(--cpk-ampel-blocker-bg);
    color: var(--cpk-ampel-blocker-text);
}

.cpp-balken {
    height: 4px;
    margin-top: 0.2rem;
    border-radius: 3px;
    background: var(--cpd-balken-bg);
    overflow: hidden;
}

.cpp-fuell {
    height: 100%;
    border-radius: 3px;
    background: var(--cpd-balken-frei);
}

.cpp-fuell.ist-gut { background: var(--cpd-balken-gut); }
.cpp-fuell.ist-voll { background: var(--cpd-balken-voll); }

.cpp-karten {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 2rem;
}

/* ─── Die Karte ────────────────────────────────────────────────────────── */

.cpp-karte,
.cpp-poolkarte {
    border: 1px solid var(--cpp-karte-rand);
    border-radius: var(--bb-radius-xs, 6px);
    background: var(--cpp-karte-bg);
    color: var(--cpp-karte-text);
    padding: 0.25rem 0.35rem;
    font-size: 0.78rem;
    cursor: grab;

    /* Ohne das faengt der Browser beim Ziehen an, Text zu markieren, und der
       Zug sieht aus wie ein misslungener Klick. `touch-action: none` ist auf
       dem Tablet Pflicht — sonst scrollt die Seite statt zu ziehen. */
    user-select: none;
    touch-action: none;
}

.cpp-karte.ist-fortsetzung {
    background: transparent;
    border-style: dashed;
    color: var(--cpp-fortsetzung-text);
    cursor: default;
}

.cpp-karte.ist-offen,
.cpp-poolkarte.ist-offen {
    background: var(--cpp-offen-bg);
    border-color: var(--cpp-offen-rand);
}

.cpp-karte.ist-gewaehlt,
.cpp-poolkarte.ist-gewaehlt {
    box-shadow: 0 0 0 2px var(--cpp-ziel-rand);
}

/* Vorrang und Blocker bekommen einen Balken links, keine Flaeche — dieselbe
   Regel wie in der Dispositionsliste. Eine Liste, in der alles leuchtet, hat
   keine Rangfolge mehr. */
.cpp-karte.ist-vorrang,
.cpp-poolkarte.ist-vorrang {
    border-left: 3px solid var(--cpd-zeile-vorrang);
}

.cpp-karte.ist-blockiert {
    border-left: 3px solid var(--cpd-zeile-blockiert);
}

.cpp-karte-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.cpp-karte-titel {
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpp-karte-stunden {
    flex: none;
    font-size: 0.7rem;
    color: var(--todo-text-leise);
}

.cpp-karte-ort,
.cpp-karte-weiter {
    font-size: 0.7rem;
    color: var(--todo-text-sehr-leise);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Die Hover-Karte an einer Aufgabe ---------- */

/* Sie ersetzt den nativen Tooltip, solange ein Zeiger da ist: mehr Platz,
   lesbare Struktur, und sie erscheint schnell genug zum Überfliegen. Am Klick
   hängt sie bewusst NICHT — der ist für das Verschieben ohne Maus vergeben. */
.cpp-info {
    position: fixed;
    z-index: 10000;
    max-width: 22rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--todo-rand, rgba(127, 127, 127, 0.35));
    border-radius: var(--todo-radius, 6px);
    background: var(--todo-flaeche-hoch, #fff);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    font-size: 0.78rem;
    line-height: 1.35;
    /* Sie darf den Zeiger nie abfangen — sonst löst sie beim Erscheinen unter
       dem Zeiger ein `pointerout` auf der Karte aus und schliesst sich sofort
       wieder. Genau dieses Flackern ist die klassische Falle. */
    pointer-events: none;
}

.cpp-info-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.cpp-info-nummer {
    flex: none;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--todo-text-sehr-leise);
}

.cpp-info-titel {
    font-weight: 600;
}

.cpp-info-liste {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.6rem;
    margin: 0;
}

.cpp-info-liste dt {
    color: var(--todo-text-sehr-leise);
}

.cpp-info-liste dd {
    margin: 0;
}

.cpp-info-marken {
    margin-top: 0.4rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--todo-rand, rgba(127, 127, 127, 0.25));
    color: var(--todo-text-leise);
}

/* ---------- Wechsel-Zeile: das Kalenderband über den Personen ---------- */

/* Auf- und Zuklappen. Zugeklappt ist die Vorgabe — zwei dauerhaft offene
   Zeilen über allen Personen schieben die eigentliche Arbeit aus dem Bild. */
.cpp-klapp {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cpp-klapp-zeichen {
    flex: none;
    font-size: 0.7rem;
    color: var(--todo-text-leise);
}

/* Die Anzahl steht rechts und immer — sie ist der Grund, warum man die Zeile
   zugeklappt lassen kann: Man sieht, ob sich das Aufklappen lohnt. */
.cpp-klapp-zahl {
    flex: none;
    margin-left: auto;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--todo-flaeche, rgba(127, 127, 127, 0.12));
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

/* Zugeklappt braucht die Zeile fast keine Höhe — genau das ist ihr Zweck. */
.cpp-zeile.ist-wechsel.ist-zu > td,
.cpp-zeile.ist-wechsel.ist-zu > th {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.cpp-wechselzahl {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    background: var(--todo-flaeche, rgba(127, 127, 127, 0.15));
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--todo-text-leise);
}


/* Sie sieht bewusst anders aus als eine Personenzeile — keine Kapazität, kein
   Balken, keine Ampel. Wer sie für eine Person hält, sucht dort eine Auslastung
   und findet keine. */
.cpp-zeile.ist-wechsel > th,
.cpp-zeile.ist-wechsel > td {
    background: var(--cpp-wechsel-grund, rgba(127, 127, 127, 0.06));
}

.cpp-zeile.ist-wechsel > td {
    /* Ohne Balken braucht die Zeile weniger Höhe — sie soll den Blick auf die
       Personen darunter nicht verstellen. */
    vertical-align: top;
}

.cpp-meilenstein {
    padding: 0.3rem 0.4rem;
    border-radius: var(--todo-radius-klein, 4px);
    border-left: 3px solid var(--cpd-zeile-vorrang);
    background: var(--todo-flaeche, rgba(127, 127, 127, 0.08));
    font-size: 0.75rem;
    /* Kein Griff, kein Zeiger: Ein Mietvertrag verschiebt sich nicht dadurch,
       dass man seine Karte zieht. */
    cursor: default;
}

.cpp-meilenstein.ist-einzug {
    border-left-color: var(--cpd-ampel-voll, #c0392b);
}

.cpp-meilenstein-kopf {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.cpp-meilenstein-zeichen {
    flex: none;
    font-size: 0.6rem;
    color: var(--todo-text-leise);
}

/* Die Fusszeile der Karte: Vorhaben und Prio. Sie steht bewusst UNTER dem
   Ort und leiser als er — beim Überfliegen einer Zelle sucht man erst den
   Titel, dann wo es ist, und erst dann, wozu es gehört. */
.cpp-karte-fuss {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    overflow: hidden;
}

/* Das Vorhaben darf schrumpfen, die Prio nie: Eine halbe Zahl wäre
   unbrauchbar, ein abgeschnittener Vorhabensname immer noch ein Hinweis. */
.cpp-karte-fuss .cpp-marke {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpp-karte-prio {
    flex: none;
    margin-left: auto;
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
    color: var(--todo-text-leise);
}

.cpp-punkt {
    color: var(--cpd-zeile-vorrang);
    font-size: 0.6rem;
}

/* Der Geist folgt dem Zeiger. `pointer-events: none` ist Pflicht — sonst
   liegt er unter dem Zeiger und `elementFromPoint` findet nur ihn selbst,
   nie die Zelle darunter. */
.cpp-geist {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-1.5deg);
    border: 1px solid var(--cpp-offen-rand);
    border-radius: var(--bb-radius-xs, 6px);
    background: var(--cpp-offen-bg);
    padding: 0.25rem 0.35rem;
    font-size: 0.78rem;
    box-shadow: var(--bb-shadow-sm, 0 2px 10px rgba(2, 6, 23, 0.22));
    opacity: 0.95;
}

body.cpp-zieht {
    cursor: grabbing;
}

/* ─── Der Pool ─────────────────────────────────────────────────────────── */

.cpp-pool {
    margin-top: 0.75rem;
    border: 1px solid var(--cpp-rand);
    border-radius: var(--bb-radius-sm, 10px);
    background: var(--cpp-pool-bg);
    padding: 0.5rem;
}

.cpp-pool-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.cpp-pool-titel {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--todo-text);
}

.cpp-pool-zahl {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--cpk-chip-bg);
    color: var(--cpk-chip-text);
    font-size: 0.72rem;
}

.cpp-pool-suche {
    width: 14rem;
    max-width: 45%;
}

/* Der Pool ist selbst ein Ablageziel: Eine Karte hierher zurueckzuziehen
   nimmt ihr den Termin. Deshalb braucht er auch dann eine Flaeche, wenn er
   leer ist — sonst gaebe es nichts zu treffen. */
.cpp-pool-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 4rem;
    max-height: 22vh;
    overflow: auto;
    padding: 0.25rem;
    border-radius: var(--bb-radius-xs, 6px);
}

.cpp-pool-liste.ist-moeglich {
    background: var(--cpp-moeglich-bg);
}

.cpp-pool-liste.ist-ziel {
    background: var(--cpp-ziel-bg);
    box-shadow: inset 0 0 0 2px var(--cpp-ziel-rand);
}

.cpp-poolkarte {
    width: 16rem;
    max-width: 100%;
}

.cpp-leer {
    padding: 0.75rem;
    color: var(--todo-text-sehr-leise);
    font-size: 0.85rem;
}

/* ─── Was geschrieben wurde ────────────────────────────────────────────── */

.cpp-ergebnis {
    margin-bottom: 0.6rem;
    border: 1px solid var(--cpp-rand);
    border-radius: var(--bb-radius-sm, 10px);
    padding: 0.5rem 0.75rem;
    background: var(--cpp-zelle-bg);
}

.cpp-ergebnis-kopf {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.cpp-ergebnis ul {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.8rem;
}

.cpp-ergebnis li {
    color: var(--todo-text-leise);
}

.cpp-ergebnis li strong {
    color: var(--todo-text);
    margin-right: 0.35rem;
}

.cpp-ergebnis li.ist-fehler strong,
.cpp-ergebnis li.ist-fremd strong {
    color: var(--cpd-frist-rot);
}

.cpp-ergebnis li.ist-stand-schon {
    color: var(--todo-text-sehr-leise);
}

/* ─── Breitmodus ───────────────────────────────────────────────────────── */

body.cpp-weit .cp {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

body.cpp-weit .cp-leiste {
    display: none;
}

body.cpp-weit .cpp-rahmen {
    max-height: 72vh;
}

/* Eine Aufgabe, die wegen ihres TERMINS hier liegt und nicht wegen einer
   Disposition (E109/D2). Sie laesst sich verschieben, aber nicht in den Pool
   zuruecklegen - ein Termin verschwindet nicht dadurch, dass man ihn nicht
   einplant. Der Rand sagt es, ohne dass jemand die Karte anfassen muss. */
.cpp-karte.ist-termin {
    border-left: 3px solid var(--cpp-woche-aktuell-rand);
}

.cpp-marke.ist-termin {
    background: var(--cpk-ampel-fertig-bg);
    color: var(--cpk-ampel-fertig-text);
}

/* Samstag und Sonntag in der Tagesansicht. Sie werden GEZEIGT, nicht
   weggelassen: Eine Aufgabe, die versehentlich dort liegt, waere sonst
   unsichtbar. Ihre Kapazitaet ist null, also steht alles, was dort liegt,
   ohnehin auf rot - die Spalte muss nur zurueckhaltend genug sein, dass sie
   die Arbeitstage nicht stoert. */
.cpp-wochenkopf.ist-frei,
.cpp-zelle.ist-frei {
    background: var(--cpp-zelle-vergangen-bg);
}

.cpp-wochenkopf.ist-frei .cpp-wochenname {
    color: var(--todo-text-sehr-leise);
}