/* ============================================================
     Aegent Cockpit — Grundstil.

     Haltung, in einem Satz: ein Arbeitsgeraet aus Papier und Tinte,
     keine Kachelwand.

     Drei Regeln, aus denen alles andere folgt:

     1. WENIGE GROESSEN, GROSSZUEGIG GESETZT. Vorher standen in einer
        Zeile bis zu fuenf Schriftgroessen (9,5 / 10,5 / 11,5 / 12,5 /
        13,5 px). Wer alles verkleinert, um mehr unterzubringen, nimmt
        dem Auge den Rhythmus und bekommt Dichte ohne Ordnung. Jetzt:
        11,5 (Kennungen) / 12,5 (Beiwerk) / 15 (Inhalt) / 20 (Seite) /
        24 (Vorgang). Hierarchie kommt aus Gewicht und Abstand.

     2. MONO NUR FUER KENNUNGEN. Aktenzeichen, Datum, Uhrzeit, Betrag,
        Zaehler. Nie fuer Beschriftungen. Vorher war "24 WE · Duesseldorf"
        Mono und die ganze Oberflaeche sah aus wie ein Terminal.

     3. EINE AKZENTFARBE, EIN SIGNAL JE ZEILE. Der Akzent gehoert dem
        aktuellen Menuepunkt, dem Fokus, der Hauptschaltflaeche und der
        gewaehlten Zeile. Rot gehoert dem, was ueberfaellig ist — einmal,
        nicht drei Mal in derselben Zeile.

     Die Schriften sind die der Marke (Verkaufsseite apps/website), selbst
     gehostet: Serife fuer die Aussage, Groteske fuer die Arbeit. Kein
     Google-Aufruf — auf einem Produkt, das Deutschland-Hosting verspricht,
     waere das ein Eigentor.
     ============================================================ */

  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/schriften/ibm-plex-sans.woff2) format('woff2');
  }

  @font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url(/schriften/source-serif-4.woff2) format('woff2');
  }

  :root {
    /* Papierton statt Bildschirmgrau — derselbe Ursprung wie die
       Verkaufsseite, nur eine Spur kuehler und blasser: ein Arbeitsgeraet
       schaut man acht Stunden an, eine Verkaufsseite zwei Minuten. */
    --ground:        #F0EFEA;
    --surface:       #FFFFFF;
    --surface-sunk:  #F7F6F2;
    --surface-raise: #FBFAF7;
    --border:        #DCD8CE;
    --border-soft:   #E9E6DE;
    --ink:           #14201E;
    --ink-2:         #4A5852;
    --ink-3:         #77837D;
    --accent:        #0F5C57;
    --accent-ink:    #FFFFFF;
    --accent-soft:   #E3EEEB;
    --accent-line:   #A9CBC6;
    --notfall:       #A8321E;
    --notfall-soft:  #F8E9E4;
    --frist:         #8A5C08;
    --frist-soft:    #F7EEDC;
    --ok:            #3A6E41;
    --ok-soft:       #E7EFE6;

    /* Keine Schlagschatten. Tiefe entsteht aus einer Flaechenleiter und
       Haarlinien; Schatten auf jedem zweiten Kasten war die Haelfte des
       Unruhegefuehls. */
    --shadow:        0 8px 28px -18px rgba(20, 32, 30, .5);

    --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:  ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --r:    6px;
    --r-lg: 10px;

    --kopf:   54px;   /* Hoehe der Kopfzeile */
    --schiene: 236px; /* Breite der Navigationsschiene */
    --korb:   372px;  /* Breite der Warteschlange im Posteingang */
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:        #101615;
      --surface:       #18211F;
      --surface-sunk:  #131B1A;
      --surface-raise: #1D2725;
      --border:        #2B3A37;
      --border-soft:   #222E2C;
      --ink:           #E8EDEA;
      --ink-2:         #A9B8B3;
      --ink-3:         #7C8C87;
      --accent:        #58BDB0;
      --accent-ink:    #06201D;
      --accent-soft:   #17302D;
      --accent-line:   #2F5F59;
      --notfall:       #E8907B;
      --notfall-soft:  #33211D;
      --frist:         #D6A44E;
      --frist-soft:    #302716;
      --ok:            #7FBA87;
      --ok-soft:       #1B2E1E;
      --shadow:        0 8px 28px -18px rgba(0, 0, 0, .8);
    }
  }

  :root[data-theme="dark"] {
    --ground:        #101615;
    --surface:       #18211F;
    --surface-sunk:  #131B1A;
    --surface-raise: #1D2725;
    --border:        #2B3A37;
    --border-soft:   #222E2C;
    --ink:           #E8EDEA;
    --ink-2:         #A9B8B3;
    --ink-3:         #7C8C87;
    --accent:        #58BDB0;
    --accent-ink:    #06201D;
    --accent-soft:   #17302D;
    --accent-line:   #2F5F59;
    --notfall:       #E8907B;
    --notfall-soft:  #33211D;
    --frist:         #D6A44E;
    --frist-soft:    #302716;
    --ok:            #7FBA87;
    --ok-soft:       #1B2E1E;
    --shadow:        0 8px 28px -18px rgba(0, 0, 0, .8);
  }

  * { box-sizing: border-box; }

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

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
  }

  .mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: .82em;
    letter-spacing: 0;
  }

  /* Die Kleinueberschrift traegt Taxonomie, nicht Inhalt. Sie ist der
     einzige Text mit positiver Laufweite — daran erkennt man sie, ohne
     dass sie einen Kasten braucht. */
  .eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

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

  /* Normaler Fluss, feste Hoehe, kein position:fixed — das ist die
     Fassung, die auf dem iPhone keinen toten Balken ueber dem Home-
     Indikator hinterlaesst. Gescrollt wird INNEN, je Spalte einzeln:
     vorher schob die 63 Zeilen lange Liste die Seite auf ueber 4.000 px
     und man konnte Zeile und Detail nie zugleich sehen. */
  .app {
    height: 100vh;
    height: 100lvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    flex: none;
    height: var(--kopf);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-width: 0;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    flex: none;
  }
  .brand .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    flex: none;
  }
  .brand .env {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 2px;
  }

  .mandant {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-left: 1px solid var(--border-soft);
    padding-left: 16px;
  }
  .mandant strong {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mandant span {
    font-size: 12.5px;
    color: var(--ink-3);
    white-space: nowrap;
  }

  .kopf-rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
  }

  .avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-line);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    flex: none;
  }

  /* Der Themenschalter sass frueher als schwebender Kasten mitten im
     Inhalt und lag auf den Zeilen. Ein Werkzeug der Huelle gehoert in
     die Huelle. */
  #theme-toggle {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
  }
  #theme-toggle:hover { color: var(--ink); background: var(--surface-sunk); }

  .shell {
    flex: 1;
    display: grid;
    grid-template-columns: var(--schiene) 1fr;
    min-height: 0;
    overflow: hidden;
  }

  /* ---------- Schiene ---------- */

  .rail {
    background: var(--ground);
    border-right: 1px solid var(--border);
    padding: 14px 0 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
  }
  .rail-group { padding: 0 10px 20px; }
  .rail-group > .eyebrow {
    display: block;
    padding: 0 8px 8px;
    font-size: 10.5px;
  }

  .navitem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: var(--r);
    color: var(--ink-2);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.3;
  }
  .navitem:hover { background: var(--surface-sunk); color: var(--ink); }
  .navitem[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
  }
  .navitem .count {
    margin-left: auto;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--ink-3);
  }
  .navitem[aria-current="page"] .count { color: var(--accent); }
  .navitem .ico {
    width: 15px;
    text-align: center;
    opacity: .6;
    font-size: 13px;
    flex: none;
  }
  .navitem.ist-aus { opacity: .4; cursor: default; }
  .navitem.ist-aus .count { display: none; }

  .mandat {
    display: block;
    padding: 6px 9px;
    border-radius: var(--r);
    text-decoration: none;
    color: var(--ink-2);
    cursor: pointer;
  }
  .mandat:hover { background: var(--surface-sunk); }
  .mandat .n { font-size: 13.5px; color: var(--ink); display: block; line-height: 1.35; }
  .mandat .m {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--ink-3);
  }
  .tag-weg, .tag-sev {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .06em;
    padding: 0 4px;
    border-radius: 2px;
    border: 1px solid var(--border);
    color: var(--ink-3);
  }
  .tag-sev { border-color: var(--accent-line); color: var(--accent); }

  /* ---------- Buehne ---------- */

  .buehne {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ground);
  }

  /* Der Posteingang ist zweispaltig und scrollt in jeder Spalte fuer
     sich — die Zeile bleibt stehen, waehrend man das Detail liest. */
  .buehne.ist-geteilt {
    display: grid;
    grid-template-columns: var(--korb) minmax(0, 1fr);
    overflow: hidden;
  }

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

  /* Vorher ein Band aus vier Kacheln unter der Kopfzeile, auf JEDER
     Seite — auch dort, wo es nichts mit dem Inhalt zu tun hatte, und in
     einem anderen Geltungsbereich als die Gruppen darunter ("Verwaltung
     gesamt" gegen "meine"), was aussah wie ein Widerspruch. Jetzt: eine
     ruhige Zeile, nur auf der Startseite, und der Geltungsbereich steht
     im Satz statt in einer Fussnote. */
  .stats {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 22px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 22px;
  }
  .stats-hinweis {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex: none;
    width: 100%;
    margin-bottom: 6px;
  }
  .stats .stat {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }
  .stats .stat .num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
  }
  .stats .stat .lbl { font-size: 14px; color: var(--ink-2); }
  .stats .stat .delta { font-size: 12.5px; color: var(--ink-3); }
  .stats .stat.is-notfall .num { color: var(--notfall); }
  .stats .stat.is-frist .num { color: var(--frist); }

  /* ---------- Warteschlange ---------- */

  .queue {
    border-right: 1px solid var(--border);
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
  }
  .queue-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-soft);
    position: sticky; top: 0; z-index: 10;
    background: var(--surface);
  }
  .queue-head h2 {
    font-family: var(--serif);
    font-size: 19px;
    margin: 0;
    font-weight: 600;
    letter-spacing: -.015em;
  }
  .filters { display: flex; gap: 6px; flex-wrap: wrap; }

  /* Die Filter waren <button> ohne Handler und ohne Route: drei
     Schaltflaechen, die nichts schalten. In einer Demo ist das teurer
     als anderswo — der erste Klick eines Interessenten geht ins Leere.
     Jetzt sind es Links mit einem Serverfilter dahinter. */
  .chip {
    font-family: var(--sans);
    font-size: 12.5px;
    line-height: 1.3;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }
  .chip:hover { background: var(--surface-sunk); color: var(--ink); }
  .chip[aria-pressed="true"], .chip.ist-an {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ground);
    font-weight: 500;
  }
  .chip .zahl {
    font-family: var(--mono);
    font-size: 10.5px;
    opacity: .65;
    margin-left: 5px;
  }

  .section-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 22px 16px 6px;
  }
  .section-label .line { display: none; }
  .section-label.warn .eyebrow { color: var(--frist); }

  /* Eine Zeile, zwei Ebenen: was es ist, und wo es hingehoert.
     Der 3-px-Farbstreifen am linken Rand ist weg — er stand neben einer
     Marke, einem roten "ueberfaellig" und einem Konfidenzchip und war
     das vierte Signal fuer dieselbe Tatsache. */
  .row {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    position: relative;
  }
  .row .stripe {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: transparent;
  }
  .row:hover .row-body { background: var(--surface-sunk); }
  .row[aria-selected="true"] .row-body { background: var(--accent-soft); }
  .row[aria-selected="true"] .stripe { background: var(--accent); }
  .row[aria-selected="true"] .row-subject { color: var(--accent); }

  .row-body {
    padding: 11px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .row-top { display: flex; align-items: baseline; gap: 8px; }
  .row-kanal {
    font-size: 12px;
    color: var(--ink-3);
  }
  .row-time {
    margin-left: auto;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--ink-3);
    flex: none;
  }
  .row-subject {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.35;
    color: var(--ink);
  }
  .row-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ink-3);
  }
  .row-meta .obj { color: var(--ink-2); }
  .sep { color: var(--ink-3); opacity: .5; }

  .conf {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    padding: 0 5px;
    border-radius: 3px;
    border: 1px solid var(--frist-soft);
    color: var(--frist);
    background: var(--frist-soft);
    white-space: nowrap;
  }
  .conf.low { border-color: var(--frist); }

  .badge {
    font-size: 11.5px;
    line-height: 1.5;
    padding: 0 7px;
    border-radius: 999px;
    font-weight: 500;
    white-space: nowrap;
  }
  .badge.notfall { background: var(--notfall-soft); color: var(--notfall); }
  .badge.frist   { background: var(--frist-soft);   color: var(--frist); }
  .badge.ok      { background: var(--ok-soft);      color: var(--ok); }
  .badge.entwurf { background: var(--accent-soft);  color: var(--accent); }
  .badge.neutral { background: var(--surface-sunk); color: var(--ink-3); border: 1px solid var(--border-soft); }

  /* ---------- Detail ---------- */

  /* Ein Vorgang ist ein Dokument, also eine durchgehende Flaeche. Vorher
     lag der Kopf auf Weiss und alles darunter auf Papier — eine harte
     Kante quer durch die Akte, die keine Bedeutung hatte. */
  .detail {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 56px;
    background: var(--surface);
  }

  .detail-head {
    padding: 22px 28px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .detail-head .kicker {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .detail-head .kicker .aktenzeichen {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--ink-3);
  }
  .detail-head h1 {
    font-family: var(--serif);
    margin: 0 0 12px;
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -.018em;
    font-weight: 600;
    text-wrap: balance;
    max-width: 34ch;
  }
  .detail-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
    font-size: 13px;
    color: var(--ink-3);
  }
  .detail-facts b { font-weight: 500; color: var(--ink-2); }

  .zurueck {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-3);
    text-decoration: none;
    margin-bottom: 10px;
  }

  /* ---------- Bogen (frueher: Panel) ---------- */

  /* Kein Rahmen, kein Schatten, keine Kopfleiste in Fuellfarbe. Ein
     Abschnitt ist eine Ueberschrift und Text darunter — so wie in einem
     Dokument. Acht gleich schwere Kaesten untereinander waren der Grund,
     warum die Seite keine Reihenfolge hatte. */
  .panel {
    margin: 0 28px;
    padding: 22px 0 0;
    border-top: 1px solid var(--border-soft);
    background: transparent;
  }
  .panel:first-of-type { border-top: 0; }
  .panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    background: transparent;
    border: 0;
  }
  .panel-body { padding: 0 0 22px; }

  /* Alles, was Beleg ist und nicht Arbeit, klappt zu: Protokoll,
     Regelwerk, geprüfte Alternativen, Handwerker, Verlauf. Wer es
     braucht, findet es an derselben Stelle; wer arbeitet, sieht es
     nicht. Das ist der Unterschied zwischen dicht und voll. */
  details.falte {
    margin: 0 28px;
    border-top: 1px solid var(--border-soft);
  }
  details.falte > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    color: var(--ink-2);
    font-size: 14px;
  }
  details.falte > summary::-webkit-details-marker { display: none; }
  details.falte > summary::before {
    content: "›";
    font-size: 17px;
    line-height: 1;
    color: var(--ink-3);
    transition: transform .12s ease;
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    flex: none;
    transform-origin: 50% 50%;
  }
  details.falte[open] > summary::before { transform: rotate(90deg); }
  details.falte > summary:hover { color: var(--ink); }
  details.falte > summary .eyebrow { color: inherit; }
  details.falte > summary .stichwort {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--ink-3);
    font-weight: 400;
    text-align: right;
  }
  details.falte .falte-inhalt { padding: 0 0 22px 20px; }
  details.falte .panel { margin: 0; border-top: 0; padding-top: 0; }

  .kv { display: grid; grid-template-columns: 168px 1fr; gap: 10px 18px; font-size: 14px; }
  .kv dt { color: var(--ink-3); font-size: 13px; padding-top: 1px; }
  .kv dd { margin: 0; }

  .cite {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    border-bottom: 1px dotted var(--accent-line);
    cursor: pointer;
  }

  .rule {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--r);
    font-size: 13.5px;
    line-height: 1.5;
    align-items: flex-start;
  }
  .rule + .rule { margin-top: 6px; }
  .rule .mark { font-family: var(--mono); font-weight: 700; line-height: 1.4; flex: none; }
  .rule.pass { background: transparent; color: var(--ink-2); padding-left: 0; }
  .rule.pass .mark { color: var(--ok); }
  .rule.warn { background: var(--frist-soft); color: var(--frist); }
  .rule.stop { background: var(--notfall-soft); color: var(--notfall); }
  .rule strong { display: block; font-weight: 600; }
  .rule span { color: inherit; opacity: .9; }

  .quote {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
    border-left: 2px solid var(--border);
    padding-left: 16px;
    white-space: pre-line;
    max-width: 68ch;
  }
  .quote-from {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-bottom: 10px;
  }

  .hw {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
  }
  .hw + .hw { border-top: 1px solid var(--border-soft); }
  .hw .init {
    width: 32px; height: 32px; flex: none;
    border-radius: 50%;
    background: var(--surface-sunk);
    border: 1px solid var(--border);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600; color: var(--ink-2);
  }
  .hw .who { font-size: 14px; font-weight: 500; }
  .hw .sub { font-size: 12.5px; color: var(--ink-3); }
  .hw .pick { margin-left: auto; }

  .timeline { list-style: none; margin: 0; padding: 0; }
  .timeline li {
    display: grid;
    grid-template-columns: 78px 10px 1fr;
    gap: 12px;
    font-size: 13.5px;
    padding-bottom: 14px;
    position: relative;
  }
  .timeline li:last-child { padding-bottom: 0; }
  .timeline .t {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--ink-3);
    padding-top: 3px;
  }
  .timeline .pip {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--border); margin-top: 7px;
    justify-self: center;
  }
  .timeline li.is-ki .pip { background: var(--accent); }
  .timeline li::after {
    content: "";
    position: absolute;
    left: 93px; top: 18px; bottom: -1px;
    width: 1px; background: var(--border-soft);
  }
  .timeline li:last-child::after { display: none; }
  .timeline .who { color: var(--ink-3); }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 28px;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-soft);
  }
  .actions-hinweis {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-right: 4px;
  }

  .btn {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    line-height: 1.4;
  }
  .btn:hover { background: var(--surface-sunk); }
  .btn:disabled { opacity: .45; cursor: default; }
  .btn:disabled:hover { background: var(--surface); }
  .btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
  .btn.primary:hover { filter: brightness(1.1); }
  .btn.sm { font-size: 12.5px; padding: 5px 10px; }
  .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
  .btn.ghost:hover { color: var(--ink); background: var(--surface-sunk); }

  .note {
    margin: 22px 28px 0;
    font-size: 12.5px;
    color: var(--ink-3);
    line-height: 1.6;
    max-width: 78ch;
  }
  .note b { color: var(--ink-2); font-weight: 600; }

  /* ---------- Schmal ---------- */

  /* Die Schiene war unter 900 px schlicht display:none — auf dem Telefon
     hatte das Cockpit KEINE Navigation. Jetzt faehrt sie als Schublade
     herein, geschaltet ueber ein verstecktes Kaestchen, ohne eine Zeile
     JavaScript. Nach jedem Klick laedt die Seite neu und die Schublade
     ist wieder zu. */
  .nav-schalter { position: absolute; opacity: 0; pointer-events: none; }
  .burger {
    display: none;
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    place-items: center;
    cursor: pointer;
    color: var(--ink-2);
    flex: none;
  }
  .burger:hover { background: var(--surface-sunk); }
  .nav-deckel { display: none; }

  @media (max-width: 1240px) {
    :root { --schiene: 208px; --korb: 330px; }
  }

  @media (max-width: 980px) {
    .burger { display: grid; }
    .mandant { border-left: 0; padding-left: 0; }
    .mandant span { display: none; }

    .shell { grid-template-columns: 1fr; }

    .rail {
      position: fixed;
      z-index: 40;
      top: var(--kopf);
      left: 0;
      bottom: 0;
      width: 268px;
      max-width: 84vw;
      background: var(--surface);
      border-right: 1px solid var(--border);
      box-shadow: var(--shadow);
      transform: translateX(-100%);
      transition: transform .18s ease;
    }
    .nav-schalter:checked ~ .shell .rail { transform: translateX(0); }
    .nav-schalter:checked ~ .nav-deckel {
      display: block;
      position: fixed;
      z-index: 30;
      top: var(--kopf); left: 0; right: 0; bottom: 0;
      background: rgba(20, 32, 30, .34);
    }

    /* Geteilt heisst auf dem Telefon: entweder die Liste oder der
       Vorgang, nie beides halb. */
    .buehne.ist-geteilt {
      grid-template-columns: 1fr;
      overflow-y: auto;
    }
    .buehne.ist-geteilt .queue,
    .buehne.ist-geteilt .detail { overflow: visible; }
    .buehne.ist-geteilt .queue { border-right: 0; }
    .buehne.ist-geteilt.zeigt-detail .queue { display: none; }
    .buehne.ist-geteilt:not(.zeigt-detail) .detail { display: none; }
    .zurueck { display: inline-flex; }

    .detail-head { padding: 16px 18px 14px; position: static; }
    .detail-head h1 { font-size: 22px; }
    .panel, .actions, .note, details.falte { margin-left: 18px; margin-right: 18px; }
    .kv { grid-template-columns: 1fr; gap: 3px 0; }
    .kv dd { margin-bottom: 10px; }
    .timeline li { grid-template-columns: 66px 10px 1fr; gap: 8px; }
    .timeline li::after { left: 79px; }
  }

  @media (max-width: 560px) {
    .brand .env { display: none; }
    #theme-toggle { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* Die Gruppe heisst "Termin heute oder ueberschritten". Darunter stand in
     jeder Zeile noch einmal das Wort "ueberfaellig" — sieben Mal dieselbe
     Ueberschrift. Die Zahl traegt die Information, das Wort war Fuellung. */
  .korb-gruppe.stop .korb-frist .frist-wort { display: none; }


/* ============================================================
   Aegent Cockpit — Arbeitsflaechen.

   Fortsetzung von stil.css: dort steht der Rahmen (Kopfzeile, Schiene,
   Buehne, Posteingang, Vorgang), hier die Startseite, die Listen und
   alles, was ein Formular ist.

   Dieselben drei Regeln gelten: wenige Groessen, Mono nur fuer
   Kennungen, ein Signal je Zeile.
   ============================================================ */

a.row, a.navitem, a.mandat, a.korb-zeile { text-decoration: none; color: inherit; }

/* Bildlaufleisten: schmal und in der Tinte des Hauses statt im Grau des
   Betriebssystems. Sie sind jetzt sichtbarer Teil der Oberflaeche, weil
   jede Spalte fuer sich scrollt. */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

/* --- Listenseiten -------------------------------------------------------- */

.liste { padding: 26px 32px 56px; min-width: 0; }
.liste h1 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.018em;
  margin: 0 0 4px;
}
.liste .unterzeile { color: var(--ink-3); font-size: 14px; margin-bottom: 22px; }

.tabelle-rahmen {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}

table.daten { border-collapse: collapse; width: 100%; font-size: 14px; }
table.daten th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
table.daten td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
table.daten tr:last-child td { border-bottom: 0; }
table.daten tr:hover td { background: var(--surface-sunk); }
table.daten .rechts {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
table.daten td:first-child { color: var(--ink); font-weight: 500; }

/* --- Entscheidungsgrundlage --------------------------------------------- */

.eg-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.eg-alt {
  border-left: 2px solid var(--border);
  padding: 2px 0 2px 14px;
  margin-top: 12px;
}
.eg-alt.ist-nicht-eingeholt { border-left-color: var(--frist); }
.eg-alt .kopf { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.eg-alt .kopf b { font-size: 14px; font-weight: 600; }
.eg-alt .stand { font-size: 12.5px; color: var(--ink-3); }
.eg-alt .grund { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; max-width: 66ch; }
.eg-fehlt { margin-top: 10px; }

/* --- Sperre und Anmeldung ------------------------------------------------ */

.sperre {
  max-width: 620px;
  margin: 14vh auto 0;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 34px 34px 30px;
}
.sperre h1 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 10px 0 8px;
}
.sperre p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.sperre code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surface-sunk);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 1px 5px;
}
.sperre .grund {
  margin: 14px 0;
  padding: 10px 13px;
  border-radius: var(--r);
  background: var(--notfall-soft);
  color: var(--notfall);
  font-size: 13.5px;
}

.anmelden { max-width: 400px; width: calc(100% - 32px); }
.anmelden form { display: grid; gap: 4px; margin: 20px 0 6px; }
.anmelden label { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.anmelden input {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.anmelden input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.anmelden button {
  margin-top: 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--r);
}
.anmelden button:hover { filter: brightness(1.1); }
.anmelden .hinweis { font-size: 13px; margin-top: 20px; color: var(--ink-3); }

/* --- Arbeitskorb ---------------------------------------------------------
   Die Startseite. Sie beantwortet vier Fragen in zwei Bahnen: was ich
   selbst tun muss, und wo ich bei anderen nachfassen muss.

   Was hier weg ist: die graue Fuellung in jedem Gruppenkopf, der
   gestrichelte Kasten um jede leere Gruppe und die Umrandung um jede
   Einheitennummer. Drei Rahmen fuer eine Zeile, in der nichts passiert. */

.korb { padding: 26px 32px 56px; min-width: 0; }

.korb-titelzeile {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.korb-titelzeile h1 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 3px;
}
.korb-titelzeile .unterzeile {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 64ch;
}
.korb-titelzeile .filters { margin-left: auto; display: flex; gap: 6px; }
.korb-titelzeile .chip { text-decoration: none; }
/* --accent-ink ist die Schrift *auf* der Akzentflaeche und im hellen Modus
   weiss. Auf --accent-soft, der blassen Variante, stand damit weiss auf
   fast weiss: der aktive Filter war der einzige unlesbare Knopf der Seite. */
.korb-titelzeile .chip.ist-an {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}

/* --- Zwei Bahnen ---------------------------------------------------------
   Die fuenf Gruppen beantworten zwei verschiedene Fragen, und die Antwort
   fuehrt zu zwei verschiedenen Handlungen: selbst arbeiten oder bei einem
   anderen nachfassen. Untereinander gestapelt sieht man das nicht — und
   die zweite Haelfte liegt unter der Falz.

   Die linke Bahn ist breiter, weil dort die laengeren Listen stehen. */
.korb-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 0 32px;
  align-items: start;
}
.korb-lane { min-width: 0; }
.korb-lane > .eyebrow {
  display: block;
  padding: 0 2px 12px;
  font-size: 10.5px;
}

@media (max-width: 1180px) {
  .korb-board { grid-template-columns: 1fr; gap: 0; }
  .korb-lane + .korb-lane > .eyebrow { padding-top: 14px; }
}

.korb-gruppe {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  overflow: hidden;
}
.korb-gruppe.ist-leer { opacity: .6; }

.korb-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--border-soft);
}
.korb-gruppe.ist-leer .korb-kopf { border-bottom: 0; }
.korb-kopf h2 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0;
}
.korb-zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-3);
}
.korb-gruppe.stop .korb-zahl { background: var(--notfall-soft); color: var(--notfall); }
.korb-gruppe.warn .korb-zahl { background: var(--frist-soft); color: var(--frist); }
.korb-erklaerung {
  flex: 1 1 100%;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.korb-leer { margin: 0; padding: 12px 18px; font-size: 13px; color: var(--ink-3); }

.korb-zeile {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  color: inherit;
}
.korb-zeile:last-child { border-bottom: 0; }
.korb-zeile:hover { background: var(--surface-sunk); }
.korb-haupt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }

/* Genau eine Sache traegt Fettung. Der Titel unterscheidet die Zeilen,
   das Objekt verankert sie — beides zusammen waren vorher zwei
   Ueberschriften je Zeile, von denen keine gewinnt. */
.korb-titel { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.korb-objekt { font-weight: 600; color: var(--ink-2); }
.korb-we { font-size: 12.5px; color: var(--ink-3); }
.korb-betreff { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.korb-wer { color: var(--ink-3); }
.korb-meta {
  font-size: 12.5px;
  color: var(--ink-3);
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
  align-items: baseline;
}
.korb-meta .obj { color: var(--ink-2); font-weight: 600; }

.korb-rechts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
  max-width: 44%;
}
.korb-frist {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.korb-frist.ist-rot { color: var(--notfall); }
/* Die Zahl traegt, das Wort begleitet. Vorher stand in elf von zwoelf
   Zeilen dasselbe Wort in kraeftigem Rot und hat die Notfallmarke
   danebengeschluckt. */
.korb-frist b { font-weight: 600; }
.korb-frist .frist-wort { font-weight: 400; opacity: .6; margin-left: 5px; }

/* Leere Gruppe: eine Zeile, keine Karte, kein gestrichelter Rahmen.
   Eine gute Nachricht braucht keinen Kasten. */
.korb-nichts {
  margin: 0 0 12px;
  padding: 2px 2px 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.korb-nichts span { color: var(--ink-2); font-weight: 500; }

/* Der Erklaerblock ist eingeklappt: er erklaert die Bauart einmal, nicht
   jeden Tag aufs Neue. */
.note-klapp { margin-top: 26px; }
.note-klapp > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-3);
  padding: 8px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.note-klapp > summary::-webkit-details-marker { display: none; }
.note-klapp > summary::before {
  content: "›";
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  flex: none;
  transform-origin: 50% 50%;
}
.note-klapp[open] > summary::before { transform: rotate(90deg); }
.note-klapp > summary:hover { color: var(--ink-2); }

/* Fliesstext braucht ein Mass, auch wenn daneben Platz ist. */
.korb .note { max-width: 78ch; margin: 12px 0 0; }

/* --- Aufgabenkette in der Vorgangsansicht -------------------------------- */

.schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.schritte li {
  display: flex;
  align-items: center;
  /* Die Verben stehen unter der Zeile, nicht daneben: sonst quetschen sie
     Titel und Frist auf dem Telefon in zwei Zeichen. */
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.schritte li:last-child { border-bottom: 0; }
.schritt-mark {
  flex: 0 0 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  border: 1px solid var(--border);
  color: var(--ink-3);
  background: var(--surface-sunk);
}
.schritte li.ist-fertig .schritt-mark { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.schritte li.ist-wartend .schritt-mark { background: var(--frist-soft); border-color: var(--frist); color: var(--frist); }
.schritte li.ist-faellig .schritt-mark { background: var(--notfall-soft); border-color: var(--notfall); color: var(--notfall); }
.schritte li.ist-fertig .schritt-text b,
.schritte li.ist-entfallen .schritt-text b { font-weight: 400; color: var(--ink-3); }
.schritte li.ist-entfallen .schritt-text b { text-decoration: line-through; }
.schritt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.schritt-text b { font-size: 14px; font-weight: 500; line-height: 1.4; }
.schritt-text .sub { font-size: 12.5px; color: var(--ink-3); }

/* --- Die zwei Verben am Schritt ------------------------------------------
   Aufgeklappt statt Dialog: <details> braucht kein Skript und bleibt auf
   dem Telefon bedienbar. Geschlossen kostet es eine Knopfbreite. */
.schritt-verben { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.schritte li.ist-fertig .schritt-verben,
.schritte li.ist-entfallen .schritt-verben { display: none; }

.verb { position: relative; min-width: 0; }
.verb[open] { flex: 1 0 100%; }
.verb > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}
.verb > summary::-webkit-details-marker { display: none; }
.verb[open] > summary { background: var(--surface-sunk); color: var(--ink); }

.verb > form {
  margin: 10px 0 4px;
  padding: 14px 16px;
  background: var(--surface-raise);
  border: 1px solid var(--border-soft);
  border-radius: var(--r);
  max-width: min(48ch, 100%);
}

/* Feldbeschriftung und Feld — eine Sprache fuer alle Formulare im
   Cockpit: Aufklapper, Zuordnung, Entwurf. */
.verb label,
form.zuordnen label,
.entwurf-label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0 0 5px;
}
.verb label + input { margin-bottom: 14px; }
.verb input,
form.zuordnen select,
.entwurf-betreff,
.entwurf-text {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 9px 11px;
}
.verb input:focus-visible,
form.zuordnen select:focus-visible,
.entwurf-betreff:focus-visible,
.entwurf-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.verb .opt, form.zuordnen .opt { color: var(--ink-3); font-weight: 400; }
.verb .pflicht, form.zuordnen .pflicht { color: var(--notfall); }
.verb-hinweis {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 56ch;
}
.verb-hinweis b { color: var(--ink-2); }

/* --- Antwortentwurf ------------------------------------------------------
   Die erste schreibende Maske im Cockpit. Bewusst nuechtern: ein Betreff,
   ein Text, drei Verben. Kein Editor und keine Formatierung — was hier
   entsteht, geht als reiner Text in ein Mailprogramm. */

.entwurf .panel-body {
  background: var(--surface-sunk);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
  padding: 18px 20px 0;
  margin-bottom: 22px;
}
.entwurf .panel-head .eyebrow { color: var(--accent); }
.entwurf.ist-fertig .panel-body { border-color: var(--border-soft); }
.entwurf.ist-fertig .panel-head .eyebrow { color: var(--ink-3); }

.entwurf-an { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.entwurf-an-fehlt { color: var(--frist); font-family: var(--sans); }

.entwurf-label + * { margin-bottom: 16px; }
.entwurf-betreff { font-weight: 500; }
/* Fliesstext braucht ein Mass, auch in einem Eingabefeld: ueber die volle
   Breite einer 1200px-Spalte ist der Brief nicht mehr lesbar — und genau
   so soll er gelesen werden, bevor er rausgeht. */
.entwurf-text {
  max-width: 74ch;
  resize: vertical;
}

.entwurf-hinweis {
  margin: 0;
  padding: 16px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 74ch;
}
.entwurf-hinweis b { color: var(--ink-2); }

.entwurf-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--border-soft);
}

/* Rueckmeldung nach einem Schreibvorgang. */
.meldung {
  margin: 18px 28px 0;
  padding: 11px 14px;
  border-radius: var(--r);
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid;
}
.meldung.ist-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.meldung.ist-fehler {
  background: var(--notfall-soft);
  color: var(--notfall);
  border-color: var(--notfall);
}

/* ---- Zuordnung -------------------------------------------------------
   Der erste Schritt des Klickpfads. Solange er offen ist, traegt der
   Abschnitt eine Kante in der Fristfarbe: nicht rot, weil nichts kaputt
   ist, aber auffaellig, weil ohne diesen Schritt nichts weitergeht. */

.panel.zuordnung-offen .panel-body {
  background: var(--surface-sunk);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--frist);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.panel.zuordnung-offen .panel-head .marke-offen {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--frist);
}
.panel.zuordnung-offen .note { margin: 0 0 14px; max-width: 66ch; }

form.zuordnen { margin: 0; max-width: min(48ch, 100%); }
form.zuordnen select { margin-bottom: 14px; }

/* Eine Auswahlliste im Browserlook ist das einzige Bedienteil, das nicht
   nach diesem Haus aussieht. Der Pfeil des Betriebssystems weicht einem
   eigenen; die Liste selbst bleibt die native — sie ist auf dem Telefon
   bedienbarer als jeder Nachbau. */
form.zuordnen select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.panel-head .zuordnung-luecke {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* --- Schmal -------------------------------------------------------------- */

@media (max-width: 980px) {
  .meldung { margin-left: 18px; margin-right: 18px; }
  .korb { padding: 20px 16px 40px; }
  .liste { padding: 20px 16px 40px; }
  .korb-titelzeile h1 { font-size: 23px; }
  .korb-titelzeile .filters { margin-left: 0; flex-basis: 100%; }
}

/* Die Kopfzeile des Entwurfs ist eine Flexreihe aus Beschriftung, Marke und
   Empfaenger. Auf 390px brach die Beschriftung dreizeilig um und die
   Adresse lief ueber den rechten Rand. Untereinander, und die Adresse
   kuerzt sich. */
@media (max-width: 700px) {
  .entwurf .panel-head { flex-wrap: wrap; row-gap: 6px; }
  .entwurf .panel-head .eyebrow { flex: 1 1 100%; }
  .entwurf-an {
    margin-left: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .entwurf-aktionen .btn { flex: 1 1 auto; }
  .korb-zeile { flex-direction: column; gap: 8px; }
  .korb-rechts { max-width: 100%; justify-content: flex-start; }
  .tabelle-rahmen { overflow-x: auto; }
}