/* ─────────────────────────────────────────────────────────────────────────
   Pathfinder — App-Ebene über dem Conciso Design System
   ─────────────────────────────────────────────────────────────────────────
   Das Conciso Design System ist für eine Website gebaut: großzügig, zum Lesen,
   eine Seite nach der anderen. Pathfinder ist eine Anwendung: man arbeitet
   darin, oft, lange, mit viel Inhalt auf einmal. Diese Ebene übersetzt die
   Grundsätze des Systems in Bedienelemente für diesen Zweck.

   Was übernommen wird, unverändert:
   - Jede Farbe, jeder Abstand, jeder Radius, jede Schrift kommt aus den Tokens.
   - Farbiger Text nur über --XX-ink; Rahmen über --co-600. Nie feste Stufen.
   - Der focus-ring wird angewendet, nie überschrieben.
   - Zustand nie allein über Farbe: immer zusätzlich Wort oder Form.
   - c-success / c-warning / c-error bleiben Systemzuständen vorbehalten.
   - Türkis ist Akzent, kein Anstrich.

   Was neu ist, und warum:
   1. DREI FLÄCHEN, NICHT MEHR.  Das war die Ursache für „unübersichtlich":
      wenn jeder Block ein umrandeter Kasten ist, ist keiner wichtig.
        --app-sunken   zurückgesetzt  → Rail, Tabellenkopf, Leerzustand
        --app-canvas   die Arbeitsfläche selbst, trägt alles
        --app-raised   erhoben, EINMAL je Bereich → das Arbeitspanel
      Darüber liegt nur noch die Überlagerung (Dialog, Menü) mit --e3.
      Alles andere trennt mit Haarlinien, nicht mit Rahmen.
   2. ZWEI TYPO-ROLLEN.  Bedienoberfläche 14 px, gelesener Inhalt 16 px.
      Die Website kennt diesen Unterschied nicht, eine Anwendung braucht ihn:
      Etiketten, Tabellen und Knöpfe dürfen klein sein, ein Beobachtungstext
      nicht. Serifen (Libre Baskerville) nur auf Einstiegsseiten.
   3. DICHTE ALS TOKEN.  --app-ctl 36 px statt 44 px Bedienhöhe. Desktop-
      Anwendung, Maus und Tastatur. Die 44 px bleiben dort, wo getippt wird.
   4. ORTSANGABE IMMER SICHTBAR.  Seitenleiste mit aktivem Punkt, darin
      Marke, Navigation, Konto. Kein Zurücknavigieren, um zu wissen, wo man ist.

   Ladereihenfolge: NACH css/components.css.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  /* Flächen. --n-50 ist in beiden Modi die tiefste Stufe (Light #F5F7F7,
     Dark #0B0F11) — die Rail ist also in Hell wie Dunkel zurückgesetzt,
     ohne einen einzigen modusabhängigen Wert. */
  --app-sunken:var(--n-50);
  --app-canvas:var(--bg-page);
  --app-raised:var(--bg-surface);

  /* Dichte */
  --app-ctl:36px;          /* Knopf, Feld, Auswahl */
  --app-ctl-sm:28px;       /* Segment, Marke, Zeilenaktion */
  --app-row:44px;          /* Tabellenzeile, Listenzeile */
  --app-rail:208px;
  --app-index:272px;

  /* Typo-Rollen */
  --app-ty-ui:var(--ty-label-md);     /* 500 14px — Bedienelemente */
  /* Navigation eine Stufe kleiner als die Bedienelemente: die beiden
     Seitenspalten stehen immer im Bild und sollen den Arbeitsbereich nicht
     beschneiden. 13 px liegt über dem System-Minimum von 12 px. */
  --app-ty-nav:500 0.8125rem/1.125rem var(--font);
  --app-ty-navsub:400 0.75rem/1rem var(--font);
  --app-ty-body:var(--ty-body-sm);    /* 400 14px — Anwendungstext */
  --app-ty-read:var(--ty-body-md);    /* 400 16px — gelesener Inhalt */
  --app-ty-meta:var(--ty-body-xs);    /* 400 12px — Beiwerk */
}

/* Ab Tablet-Breite besitzt die Anwendung das Sichtfenster: gescrollt wird in
   den Spalten, nicht im Dokument. Ohne diese Regel bleibt ein Rest-Scroll
   übrig (Browser-Chrome, absolut positionierte Helfer), der die Seitenleiste
   um wenige Pixel wegschiebt. Schmale Bildschirme behalten Dokument-Scroll. */
@media (min-width:861px){
  html,body{height:100%;overflow:hidden}
}

/* ══ Rahmen ══════════════════════════════════════════════════════════════ */
/* Die Höhe ist auf das Sichtfenster begrenzt, damit Index und Detail
   eigenständig scrollen können: sonst wächst der Rahmen mit dem Inhalt, das
   Dokument scrollt, und der Überblick links scrollt mit weg. */
/* position:relative macht den Rahmen zum Bezugspunkt für alles absolut
   Positionierte darin — insbesondere für die visuell versteckten .sr-only-
   Beschriftungen des Systems. Ohne Bezugspunkt beziehen sie sich auf das
   Dokument, landen an ihrer statischen Stelle weit unten und verlängern die
   Seite; zusammen mit overflow:hidden sind sie jetzt eingefasst. */
.app-shell{display:grid;grid-template-columns:var(--app-rail) minmax(0,1fr);height:100vh;overflow:hidden;position:relative;background:var(--app-canvas);color:var(--tx-primary);font:var(--app-ty-body)}
/* Ausnahme: die Sprungmarke muss beim Fokus sichtbar werden und darf deshalb
   nicht mit eingefasst werden. position:fixed wird von overflow:hidden eines
   nur relativ positionierten Vorfahren nicht beschnitten. */
.app-shell .skip-link{position:fixed}
/* Nicht auf .app-shell einschränken: Überlagerungen (Dialog, Menü, Snackbar)
   hängen außerhalb des Rahmens, und display-Regeln der Bauteile schlagen sonst
   das [hidden] des Browsers. */
[hidden]{display:none!important}

.app-rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4) var(--s3);background:var(--app-sunken);border-right:var(--bd);overflow-y:auto}
.app-brand{display:flex;align-items:baseline;gap:var(--s2);padding:var(--s1) var(--s3) var(--s4);font:500 0.9375rem/1.375rem var(--font);letter-spacing:.02em;color:var(--tx-primary);text-decoration:none}
.app-brand span{font:var(--ty-label-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--tx-secondary)}
.app-railgroup{display:flex;flex-direction:column;gap:2px}
.app-railtitle{font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--tx-muted);margin:var(--s3) 0 var(--s1);padding:0 var(--s3)}
/* Aktiv: Fläche, Farbe UND Marke am Rand. Drei Merkmale, damit der Ort auch
   ohne Farbwahrnehmung ablesbar bleibt. */
.app-navlink{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:32px;padding:0 var(--s3);border:none;border-radius:var(--r-sm);background:none;cursor:pointer;font:var(--app-ty-nav);color:var(--tx-secondary);text-decoration:none;text-align:left;width:100%;transition:background var(--m-fast),color var(--m-fast)}
.app-navlink:hover{background:var(--bg-overlay);color:var(--tx-primary)}
.app-navlink:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-navlink[aria-current="page"]{background:var(--co-fill);color:var(--co-ink)}
.app-navlink[aria-current="page"]::before{content:"";position:absolute;left:calc(-1 * var(--s3) + 2px);top:6px;bottom:6px;width:3px;border-radius:var(--r-full);background:var(--co-600)}
.app-railfoot{margin-top:auto;padding-top:var(--s4);border-top:var(--bd);position:relative}
.app-railbtn{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s2);border:none;border-radius:var(--r-sm);background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.app-railbtn:hover{background:var(--bg-overlay)}
.app-railbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ══ Arbeitsfläche ═══════════════════════════════════════════════════════ */
.app-main{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.app-head{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding:var(--s4) var(--s6);background:var(--app-canvas);border-bottom:var(--bd)}
.app-head-main{flex:1 1 300px;min-width:0}
.app-crumb{display:flex;align-items:center;gap:var(--s2);font:var(--app-ty-meta);color:var(--tx-secondary);margin:0 0 2px}
.app-crumb-sep{color:var(--tx-muted)}
/* Montserrat, nicht Libre Baskerville: Serifen tragen die Einstiegsseiten,
   nicht die Arbeitsbildschirme. */
.app-title{font:var(--ty-title-sm);color:var(--tx-primary);margin:0;text-wrap:pretty}
/* Serifen nur auf Einstiegsseiten — dort ist Lesen der Zweck, nicht Arbeiten. */
.app-title--serif{font:var(--ty-headline-sm)}
.app-head-actions{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.app-body{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;padding:var(--s6);container-type:inline-size}
/* Zwei Spalten im Arbeitsbereich: Index links, Detail rechts. Beide scrollen
   eigenständig, damit der Überblick beim Arbeiten stehen bleibt. */
.app-work{flex:1 1 auto;display:flex;min-height:0;min-width:0}
/* container-type: die Inhalte richten sich nach der BREITE DIESER SPALTE,
   nicht nach der des Fensters. Rail und Index nehmen zusammen 480 px weg;
   eine @media-Abfrage auf das Fenster misst deshalb das Falsche. */
.app-detail{flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;padding:var(--s6);container-type:inline-size}
.app-body--flush{padding:0}
.app-scroll{overflow-y:auto}

/* ══ Fläche ══════════════════════════════════════════════════════════════
   Die einzige erhobene Fläche je Bereich. Kein Schatten: die Haarlinie und
   der Flächenwechsel reichen, Schatten trägt nur die Überlagerung. */
.app-panel{background:var(--app-raised);border:var(--bd-strong);border-radius:var(--r-md);overflow:hidden}
.app-panel--quiet{background:var(--app-sunken);border-color:var(--bd-c)}
.app-pad{padding:var(--s5)}
.app-sep{border:none;border-top:var(--bd);margin:0}
.app-stack{display:flex;flex-direction:column;gap:var(--s4)}
/* In einer Spalte dürfen Kinder nicht schrumpfen: sonst drückt ein hoher
   Block den nächsten in sich zusammen und Inhalt überlagert sich. */
.app-stack > *{flex-shrink:0}
.app-stack--tight{gap:var(--s2)}
.app-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.app-spread{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);justify-content:space-between}
/* Formularzeile: Spalten brechen selbsttätig um, statt sich zu quetschen. */
.app-formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);align-items:start}
.app-grow{flex:1 1 auto;min-width:0}

/* ══ Text ════════════════════════════════════════════════════════════════ */
.app-eyebrow{font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--tx-secondary);margin:0}
.app-h2{font:var(--ty-name);font-size:1.0625rem;line-height:1.5rem;color:var(--tx-primary);margin:0;text-wrap:pretty}
.app-h3{font:var(--app-ty-nav);color:var(--tx-primary);margin:0}
.app-label{font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--tx-secondary);margin:0}
.app-meta{font:var(--app-ty-meta);color:var(--tx-secondary);margin:0}
.app-muted{font:var(--app-ty-body);color:var(--tx-secondary);margin:0;text-wrap:pretty}
/* Gelesener Inhalt bleibt 16 px, auch wenn die Oberfläche drumherum 14 px ist. */
.app-read{font:var(--app-ty-read);color:var(--tx-primary);margin:0;white-space:pre-wrap;text-wrap:pretty;max-width:68ch}

/* ══ Knöpfe ══════════════════════════════════════════════════════════════ */
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--app-ctl);padding:0 var(--s4);border:1px solid transparent;border-radius:var(--r-sm);background:none;cursor:pointer;font:var(--app-ty-ui);color:var(--tx-primary);white-space:nowrap;transition:background var(--m-fast),border-color var(--m-fast)}
.app-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-btn:disabled{opacity:.45;cursor:not-allowed}
/* Weiß auf co-700 trägt 5,52:1 und ist modusunabhängig. */
.app-btn--primary{background:var(--co-700);color:#fff;border-color:var(--co-700)}
.app-btn--primary:hover:not(:disabled){background:var(--co-800);border-color:var(--co-800)}
.app-btn--outline{border-color:var(--bd-strong-c);color:var(--tx-primary)}
.app-btn--outline:hover:not(:disabled){background:var(--bg-overlay);border-color:var(--co-600)}
.app-btn--quiet{color:var(--tx-secondary);padding:0 var(--s3)}
.app-btn--quiet:hover:not(:disabled){background:var(--bg-overlay);color:var(--tx-primary)}
.app-btn--sm{min-height:var(--app-ctl-sm);padding:0 var(--s3);font:var(--ty-label-sm)}
.app-btn--icon{width:var(--app-ctl);padding:0}
.app-link{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;font:var(--app-ty-meta);color:var(--co-ink);text-decoration:underline;text-underline-offset:3px;font-family:var(--font);text-align:left}
.app-link:hover{text-decoration-thickness:2px}
.app-link:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}

/* ══ Felder ══════════════════════════════════════════════════════════════
   Tippflächen bleiben bei 44 px: dort ist Genauigkeit wichtiger als Dichte. */
.app-field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.app-field > label{font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--tx-secondary)}
.app-input,.app-select,.app-textarea{width:100%;min-height:var(--app-ctl);padding:var(--s2) var(--s3);border:1px solid var(--field-border);border-radius:var(--r-sm);background:var(--app-raised);color:var(--tx-primary);font:var(--app-ty-body);font-family:var(--font)}
.app-textarea{min-height:88px;padding:var(--s3);font:var(--app-ty-read);resize:vertical;line-height:1.5rem}
/* rows steuert die Anfangshöhe; die min-height darf sie dann nicht überstimmen. */
.app-textarea[rows]{min-height:0}
.app-input:focus-visible,.app-select:focus-visible,.app-textarea:focus-visible{outline:none;box-shadow:var(--focus-aa);border-color:var(--co-600)}
/* Sperrzustand der Ebene: ein gesperrtes Feld muss gesperrt aussehen, sonst
   widerspricht der Bildschirm seiner eigenen Aussage. Gilt für alle Feldarten
   an einer Stelle, nicht je Bildschirm. */
.app-input:disabled,.app-select:disabled,.app-textarea:disabled{background:var(--app-sunken);color:var(--tx-secondary);border-color:var(--bd-c);cursor:not-allowed}
.app-seg-opt input:disabled + label{cursor:not-allowed;color:var(--tx-muted)}
.app-seg-opt input:disabled + label:hover{background:none;color:var(--tx-muted)}
.app-seg-opt input:disabled:checked + label{background:var(--bg-overlay);color:var(--tx-secondary)}
.app-item:disabled{cursor:not-allowed;opacity:.55}
.app-item:disabled:hover{background:none}
.app-input::placeholder,.app-textarea::placeholder{color:var(--tx-muted)}
.app-help{font:var(--app-ty-meta);color:var(--tx-secondary);margin:0;text-wrap:pretty}

/* ══ Segment (Stufenwahl) ════════════════════════════════════════════════
   Kompakter als .seg des Systems: 28 px statt 40 px, weil je Capability eines
   steht und neun davon untereinander sonst die Seite bestimmen. */
/* align-self, weil inline-flex in einem Spalten-Flex mit align-items:stretch
   trotzdem gestreckt wird — dann läuft der Rahmen über leere Fläche weiter. */
.app-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--field-border);border-radius:var(--r-sm);overflow:hidden;background:var(--app-raised)}
.app-seg:has(input:focus-visible){box-shadow:var(--focus-aa)}
.app-seg-opt{display:flex;position:relative}
/* Der versteckte Radio-Input ist absolut positioniert. Ohne positionierten
   Vorfahren bezieht er sich auf das Dokument und verlängert es — sichtbar als
   Rest-Scroll. Gilt auch für .seg des Systems, dort scoped nachgezogen. */
.app-shell .seg-option{position:relative}
.app-seg-opt:not(:last-child){border-right:1px solid var(--field-border)}
.app-seg-opt input{position:absolute;width:1px;height:1px;opacity:0}
.app-seg-opt label{display:flex;align-items:center;min-height:var(--app-ctl-sm);padding:0 var(--s3);font:var(--ty-label-sm);color:var(--tx-secondary);cursor:pointer;white-space:nowrap;transition:background var(--m-fast)}
.app-seg-opt label:hover{background:var(--bg-overlay);color:var(--tx-primary)}
.app-seg-opt input:checked + label{background:var(--co-700);color:#fff}
/* Bisherige Stufe: eine Marke unter dem K\u00fcrzel, keine F\u00fcllung. Sie darf nicht
   wie eine Auswahl aussehen \u2014 sie ist der Stand, nicht die Entscheidung.
   currentColor, damit sie auch auf der gef\u00fcllten Fl\u00e4che sichtbar bleibt. */
.app-seg-opt[data-stand="true"] label{position:relative}
.app-seg-opt[data-stand="true"] label::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:12px;height:2px;border-radius:var(--r-full);background:currentColor;opacity:.55}

/* ══ Zustandsmarke ═══════════════════════════════════════════════════════
   Punkt plus Wort. Die Form trägt den Zustand, die Farbe ist neutral —
   eine Stufeneinordnung ist keine Ampel. */
.app-dot{display:inline-block;width:8px;height:8px;border-radius:var(--r-full);border:1.5px solid var(--tx-secondary);flex-shrink:0}
.app-dot[data-state="offen"]{background:transparent}
.app-dot[data-state="arbeit"]{background:linear-gradient(to right,var(--tx-secondary) 50%,transparent 50%)}
.app-dot[data-state="fertig"]{background:var(--tx-secondary)}
.app-dot[data-state="archiv"]{border-style:dashed}
.app-state{display:inline-flex;align-items:center;gap:var(--s2);font:var(--app-ty-meta);color:var(--tx-secondary);white-space:nowrap}
/* align-self wie bei .app-seg: inline-flex allein schützt nicht vor der
   Streckung in einem Spalten-Flex, und eine gestreckte Marke ist eine leere
   umrandete Pille über die halbe Karte. */
.app-tag{display:inline-flex;align-self:flex-start;align-items:center;min-height:22px;padding:0 var(--s2);border:1px solid var(--bd-strong-c);border-radius:var(--r-xs);font:var(--ty-label-xs);letter-spacing:.04em;color:var(--tx-primary);background:var(--app-raised);white-space:nowrap}
.app-tag--empty{border-style:dashed;color:var(--tx-muted)}
.app-chip{display:inline-flex;align-items:center;min-height:var(--app-ctl-sm);padding:0 var(--s3);border:1px solid var(--bd-strong-c);border-radius:var(--r-full);background:none;cursor:pointer;font:var(--ty-label-sm);color:var(--tx-secondary)}
.app-chip:hover{border-color:var(--co-600);color:var(--tx-primary)}
.app-chip:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-chip[aria-pressed="true"]{background:var(--co-fill);border-color:var(--co-600);color:var(--co-ink)}

/* ══ Index-Liste (Überblick vor dem Detail) ══════════════════════════════ */
.app-index{width:var(--app-index);flex-shrink:0;border-right:var(--bd);background:var(--app-sunken);display:flex;flex-direction:column;overflow-y:auto}
.app-indexhead{padding:var(--s4) var(--s4) var(--s2);position:sticky;top:0;background:var(--app-sunken);z-index:1}
/* Der Fokus-Block gehört zum Inhalt der Spalte, nicht zu ihrem Rahmen: sticky
   belegte er 235 von 318 px und verdeckte die Liste, um die es hier geht.
   Er scrollt jetzt mit. */
.app-indexblock{padding:var(--s3) var(--s4) 0;flex-shrink:0}
.app-indexnote{font:var(--app-ty-meta);color:var(--tx-muted);margin:var(--s2) 0 0}
/* Fokus als zwei Plätze, nicht als Satz: belegt oder frei ist an der Form
   ablesbar. Der Name führt zu der Capability, in der der Skill steht. */
.app-slots{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
/* Ein Platz: Name, darunter der Zustand als Punkt mit Wort. Das × sitzt in der
   Ecke des Platzes, damit es als „diesen entfernen" gelesen wird und nicht als
   loses Zeichen in einer eigenen Zeile. */
.app-slot{position:relative;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s2) var(--s6) var(--s2) var(--s3);border:1px solid var(--co-600);border-radius:var(--r-sm);background:var(--co-fill)}
.app-slot[data-frei="true"]{border-style:dashed;border-color:var(--bd-strong-c);background:none}
.app-slot-name{width:100%;padding:0;border:none;background:none;cursor:pointer;text-align:left;font:var(--app-ty-nav);color:var(--co-ink);text-wrap:pretty}
.app-slot-name:hover{text-decoration:underline;text-underline-offset:2px}
.app-slot-name:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
.app-slot-frei{padding:0;font:var(--app-ty-navsub);color:var(--tx-muted)}
.app-slot-weg{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;border-radius:var(--r-full);background:none;cursor:pointer;color:var(--co-ink);font:500 0.9375rem/1 var(--font)}
.app-slot-zustand{display:inline-flex;align-items:center;gap:var(--s2);font:var(--app-ty-navsub);color:var(--tx-secondary)}
.app-slot-weg:hover{background:var(--app-raised)}
.app-slot-weg:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-indexgroup{padding:var(--s3) var(--s4) var(--s1);font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--tx-muted)}
.app-indexlist{list-style:none;margin:0;padding:0 var(--s2) var(--s4)}
.app-item{position:relative;display:flex;align-items:center;gap:var(--s2);width:100%;min-height:36px;padding:var(--s2) var(--s3);border:none;border-radius:var(--r-sm);background:none;cursor:pointer;text-align:left;font:var(--app-ty-nav);color:var(--tx-primary);transition:background var(--m-fast)}
.app-item:hover{background:var(--bg-overlay)}
.app-item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-item[aria-current="true"],.app-item[aria-pressed="true"]{background:var(--app-raised);box-shadow:inset 0 0 0 1px var(--co-600);font-weight:500}
/* Mehrfachauswahl braucht ein Häkchen: die Kante allein ist im Raster von neun
   Einträgen zu leise, und aria-pressed muss auch sichtbar sein.
   Das Häkchen ist ui-check aus icons/icons.json und behält dessen eigene
   Strichstärke 1,6 — kein --icon-stroke-Token, das Icon bringt sie mit. */
.app-item-check{width:16px;height:16px;flex-shrink:0;border:1px solid var(--bd-strong-c);border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center}
.app-item-check svg{display:block;width:10px;height:10px;opacity:0;transition:opacity var(--m-fast)}
.app-item[aria-pressed="true"] .app-item-check{background:var(--co-700);border-color:var(--co-700);color:#fff}
.app-item[aria-pressed="true"] .app-item-check svg{opacity:1}
.app-pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s1) var(--s4)}
/* Gesetzte Capabilities: dieselbe Zeilengeometrie wie die Auswahl darunter,
   damit sie gleich viel wiegen — aber gefüllt statt umrandet und ohne
   Kästchen. Die Kante gehört der Auswahl, die Füllung dem Gesetzten. */
.app-fixed{display:flex;align-items:center;gap:var(--s3);min-height:36px;padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--app-sunken);font:var(--app-ty-nav);color:var(--tx-primary)}
/* Name über die volle Breite, Stand und Kürzel darunter in einer Zeile.
   Vorher stand das Kürzel neben dem Namen und nahm ihm 42 der 182 px —
   „Kundenkommunikation" (159 px) passte dann nicht mehr und musste brechen.
   Silbentrennung ist keine Lösung, weil sie ein Wörterbuch voraussetzt, das
   nicht überall vorhanden ist. */
.app-item-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:break-word;text-wrap:pretty}
.app-item-meta{display:flex;align-items:center;gap:var(--s2);min-width:0}
.app-item-sub{display:block;flex:1 1 auto;min-width:0;font:var(--app-ty-navsub);color:var(--tx-secondary);font-weight:400}

/* ══ Tabelle (Überblick in einem Bild) ═══════════════════════════════════ */
.app-tablewrap{overflow-x:auto}
.app-tablewrap:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font:var(--app-ty-body)}
.app-table thead th{position:sticky;top:0;z-index:1;padding:var(--s2) var(--s4);background:var(--app-sunken);border-bottom:var(--bd);font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--tx-secondary);text-align:left;white-space:nowrap}
/* Oben ausrichten: sobald eine Zelle mehrzeilig wird, soll die Zeile am
   oberen Rand beginnen statt zu zentrieren. */
.app-table td,.app-table tbody th{padding:var(--s3) var(--s4);border-bottom:var(--bd);text-align:left;vertical-align:top}
.app-table tbody th{font:var(--app-ty-ui);color:var(--tx-primary)}
.app-table tbody tr:last-child td,.app-table tbody tr:last-child th{border-bottom:none}
.app-table-clickrow{cursor:pointer}
.app-table-clickrow:hover td,.app-table-clickrow:hover th{background:var(--bg-overlay)}
.app-table-open td,.app-table-open th{background:var(--bg-overlay);border-bottom-color:transparent}
.app-table-detail > td{padding:0 var(--s4) var(--s5);background:var(--bg-overlay)}
.app-excerpt{display:block;max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx-secondary);font:var(--app-ty-meta)}
/* ══ Variante für die schmale Detailspalte ═══════════════════════════════
   STEHT BEWUSST NACH DEN BASISREGELN: .app-table td / thead th haben dieselbe
   Spezifität, also entscheidet die Quellordnung. Weiter oben platziert wirkte
   die Polsterung nur auf td, nicht auf th.
   Die 760 px Mindestbreite oben gelten der Kalibrierungstabelle im breiten
   Arbeitsbereich; in .app-detail (rund 430 px) schieben sie die wichtigste
   Spalte aus dem Bild. Breiten stehen auf thead, weil bei table-layout:fixed
   die erste Zeile die Spalten bestimmt. */
.app-table--fit{min-width:0;table-layout:fixed}
.app-table--fit th,.app-table--fit td{padding:var(--s3) var(--s2);vertical-align:top;overflow-wrap:break-word}
/* tbody th braucht die gleiche Spezifität wie die Basisregel (.app-table
   tbody th), sonst gewinnt die auch bei späterer Quellordnung. */
.app-table--fit tbody th{padding:var(--s3) var(--s2)}
.app-table--fit thead th{padding:var(--s2) var(--s2);white-space:normal}
.app-table--fit thead th:nth-child(1){width:36%}
.app-table--fit thead th:nth-child(2){width:24%}
/* Die zwei erforderlichen Capabilities auf der nächsttieferen Flächenstufe.
   Nicht --app-sunken: das trägt in dieser Tabelle schon den Kopf und die
   erledigten Pillen. Nicht Türkis: das heißt hier „etwas läuft", und eine
   Rolleneigenschaft ist kein Vorgang. */
.app-table--fit tbody tr[data-pflicht="true"] > *{background:var(--n-100)}
/* Vorrunde und aktuelle Stufe in einer Spalte: zwei eigene Spalten sind in
   der Detailbreite schmaler als ihre eigenen Überschriften. */
.app-stufenpaar{display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:nowrap;white-space:nowrap}
.app-pfeil{color:var(--tx-muted);font:var(--app-ty-meta)}
.app-grouprow td{padding:var(--s4) var(--s4) var(--s1);border-bottom:none;font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--tx-muted);background:var(--app-raised)}
/* Chevron aus dem Icon-Set des Systems (ui-chevron-down, "Chevron nach unten
   (FAQ/Akkordeon)" — usage: ep-faq, article-toc-summary). Eigene Strichstärke
   des Icons: 1.25 über --icon-stroke-sm. Die natürliche Richtung zeigt nach
   unten, also ist AUFGEKLAPPT die ungedrehte Lage. */
.app-caret{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke-sm);stroke-linecap:round;stroke-linejoin:round;transition:transform var(--m-fast);transform:rotate(-90deg)}
.app-caret[data-open="true"]{transform:rotate(0deg)}

/* ══ Gegenüberstellung ═══════════════════════════════════════════════════
   Einspaltig als Grundzustand, zwei Spalten erst, wenn die Spalte sie trägt. */
.app-versus{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
@container (min-width:680px){
  .app-versus{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.app-versus-col{display:flex;flex-direction:column;gap:var(--s2);min-width:0}

/* ══ Kontext (Stufenerwartung beim Feld) ═════════════════════════════════ */
.app-aside{background:var(--app-sunken);border:var(--bd);border-radius:var(--r-sm);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}

/* ══ Klappe ══════════════════════════════════════════════════════════════ */
.app-disc{border-top:var(--bd)}
.app-disc > summary{display:flex;align-items:center;gap:var(--s2);min-height:var(--app-ctl);cursor:pointer;list-style:none;font:var(--app-ty-meta);color:var(--tx-secondary)}
.app-disc > summary::-webkit-details-marker{display:none}
.app-disc > summary:hover{color:var(--tx-primary)}
.app-disc > summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
/* An das Verhalten gebunden, nicht an ein Bauteil: jedes offene <details>
   dreht sein Chevron. Sonst muss jede neue Klappe die Regel nachziehen. */
details[open] > summary .app-caret{transform:rotate(0deg)}
.app-disc-body{padding:0 0 var(--s4);display:flex;flex-direction:column;gap:var(--s3)}

/* ══ Überlagerung — das Einzige mit Erhebung ═════════════════════════════ */
.app-snackwrap{position:fixed;left:50%;bottom:var(--s6);transform:translateX(-50%);z-index:70}
.app-scrim{position:fixed;inset:0;z-index:60;background:rgba(6,15,15,.55);display:flex;align-items:flex-start;justify-content:center;padding:var(--s10) var(--s4);overflow-y:auto}
.app-dialog{width:min(820px,100%);background:var(--app-raised);border:var(--bd-strong);border-radius:var(--r-lg);box-shadow:var(--e5);display:flex;flex-direction:column;max-height:100%}
.app-dialog-head{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s5);border-bottom:var(--bd)}
.app-dialog-body{padding:var(--s5);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4)}
.app-pop{position:absolute;top:calc(100% + var(--s2));right:0;z-index:50;width:280px;background:var(--app-raised);border:var(--bd-strong);border-radius:var(--r-md);box-shadow:var(--e3);padding:var(--s2)}
.app-pop--up{top:auto;bottom:calc(100% + var(--s2));left:0;right:auto;width:100%}
.app-pop-head{padding:var(--s2) var(--s3) var(--s3);border-bottom:var(--bd);margin-bottom:var(--s2)}
.app-popgroup{padding:var(--s2) var(--s3);border-bottom:var(--bd);margin-bottom:var(--s2);display:flex;flex-direction:column;gap:var(--s2)}
.app-anchor{position:relative;display:inline-flex}
.app-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--app-ctl);height:var(--app-ctl);padding:0;border:none;border-radius:var(--r-full);background:none;cursor:pointer}
.app-avatar:hover{background:var(--bg-overlay)}
.app-avatar:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ══ Zeilenliste (Startseite, Schritte, Verlauf) ═════════════════════════
   Löst die Kachelwüste ab: Zeilen in EINER Fläche, getrennt durch Haarlinien.
   Kein Kasten je Eintrag, also auch keine neun gleich lauten Kanten. */
.app-rows{list-style:none;margin:0;padding:0}
.app-rows > li + li{border-top:var(--bd)}
.app-rowitem{display:flex;align-items:flex-start;gap:var(--s4);width:100%;padding:var(--s4) var(--s5);border:none;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.app-rowitem:hover{background:var(--bg-overlay)}
.app-rowitem:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-rowitem--static{cursor:default}
.app-rowitem--static:hover{background:none}
.app-rowitem-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--s1)}
.app-rowitem-side{flex-shrink:0;display:flex;align-items:center;gap:var(--s3)}
/* Erfüllungskriterium: die einzige Akzentkante im Arbeitsbereich. */
.app-criterion{display:flex;gap:var(--s3);padding:var(--s2) var(--s3);border-left:2px solid var(--co-600);background:var(--app-sunken);border-radius:0 var(--r-xs) var(--r-xs) 0;margin-top:var(--s2)}

/* ══ Verlauf ═════════════════════════════════════════════════════════════ */
.app-timeline{list-style:none;margin:0;padding:0 0 0 var(--s5);border-left:var(--bd);display:flex;flex-direction:column;gap:var(--s6)}
.app-tl-item{position:relative;display:flex;flex-direction:column;gap:var(--s2)}
/* Das Datum führt die Zeile an, nicht am rechten Rand: der Verlauf wird von
   links nach rechts gelesen, und dort wird das Datum gesucht. */
.app-tl-kopf{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.app-tl-datum{font:var(--ty-label-xs);letter-spacing:.05em;color:var(--tx-primary);font-variant-numeric:tabular-nums;min-width:80px}
.app-tl-item::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 5px);top:5px;width:9px;height:9px;border-radius:var(--r-full);background:var(--app-raised);border:1.5px solid var(--bd-strong-c)}

/* ══ Leerzustand ═════════════════════════════════════════════════════════ */
.app-empty{padding:var(--s5);border:1px dashed var(--bd-strong-c);border-radius:var(--r-sm);font:var(--app-ty-body);color:var(--tx-secondary)}

/* ══ Filterleiste ════════════════════════════════════════════════════════ */
.app-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4)}
.app-filters .app-field{min-width:200px}

/* ══ Karten (Skill-Pool) ═════════════════════════════════════════════════
   Die Ausnahme von der Zeilenliste: im Pool wird gestöbert, nicht abgearbeitet.
   Karten geben jedem Skill gleiches Gewicht und eine eigene Fläche zum
   Anklicken. Kein Schatten im Ruhezustand — die Kante trägt, der Schatten
   kommt erst im Hover dazu. */
.app-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s4)}
.app-card{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border:var(--bd-strong);border-radius:var(--r-md);background:var(--app-raised);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--m-fast),box-shadow var(--m-fast)}
.app-card:hover{border-color:var(--co-600);box-shadow:var(--e1)}
.app-card:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-card-title{font:var(--ty-name);font-size:.9375rem;line-height:1.375rem;color:var(--tx-primary);margin:0;text-wrap:pretty}
.app-card-text{font:var(--app-ty-body);color:var(--tx-secondary);margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.app-card-foot{margin-top:auto;padding-top:var(--s3);display:flex;align-items:center;gap:var(--s2);font:var(--app-ty-meta);color:var(--tx-muted)}

/* ══ Lesetext einer Detailseite ══════════════════════════════════════════ */
.app-lead{font:var(--ty-body-md);line-height:1.625rem;color:var(--tx-primary);margin:0;max-width:62ch;text-wrap:pretty}
.app-section{padding-top:var(--s5);border-top:var(--bd);display:flex;flex-direction:column;gap:var(--s1)}
.app-list{margin:var(--s2) 0 0;padding-left:var(--s5);display:flex;flex-direction:column;gap:var(--s2);font:var(--app-ty-read);color:var(--tx-primary);max-width:66ch}
.app-list li{text-wrap:pretty}

/* ══ Skill-Detailseite ═══════════════════════════════════════════════════
   Die sechs Felder haben verschiedene Naturen: Begriffe, Handgriffe, Wege,
   Situationen, Beobachtungen. Fünf gleiche Aufzählungen darunter machen daraus
   eine Textwüste. Jedes Feld bekommt deshalb eine eigene Form — und die Seite
   einen Rhythmus aus Band, zwei Paaren und einem Schlussblock. */
.app-hero{background:var(--app-sunken);border:var(--bd);border-radius:var(--r-md);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.app-hero-lead{font:var(--ty-serif-md);color:var(--tx-primary);margin:0;max-width:54ch;text-wrap:pretty}
.app-hero-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding-top:var(--s3);border-top:var(--bd)}
.app-stat{display:flex;flex-direction:column;gap:2px}
.app-stat-n{font:var(--ty-title-sm);color:var(--co-ink);line-height:1.5rem}
.app-stat-l{font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--tx-secondary)}

.app-twoup{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4);align-items:stretch}
.app-fieldblock{border:var(--bd-strong);border-radius:var(--r-md);background:var(--app-raised);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s1)}

/* Begriffsgerüst: gezählt, weil es ein Inventar ist. */
.app-numlist{counter-reset:pfn;list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.app-numlist li{counter-increment:pfn;display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s3);font:var(--app-ty-body);color:var(--tx-primary);text-wrap:pretty}
.app-numlist li::before{content:counter(pfn,decimal-leading-zero);font:var(--ty-label-xs);letter-spacing:.05em;color:var(--co-ink);padding-top:3px}

/* Handgriffe und Wege: abhakbar gedacht, deshalb eine Marke statt einer Zahl. */
.app-ticklist{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.app-ticklist li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:var(--s3);font:var(--app-ty-body);color:var(--tx-primary);text-wrap:pretty}
.app-ticklist li::before{content:"";width:6px;height:6px;margin-top:7px;border-radius:2px;border:1.5px solid var(--co-600)}

/* Situationen: kurz, nebeneinander lesbar. */
.app-situations{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s2)}
.app-situations li{padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--app-sunken);font:var(--app-ty-body);color:var(--tx-primary);text-wrap:pretty}

/* Sichtbarkeit: Beobachtungssätze, der Schlussblock der Seite. */
.app-observe{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4)}
.app-observe li{padding-left:var(--s4);border-left:2px solid var(--co-600);font:var(--app-ty-read);color:var(--tx-primary);text-wrap:pretty}

/* ══ Skill-Zeile als Formular ════════════════════════════════════════════
   Der Kern der Einschätzung: nicht ein leeres Feld je Capability, sondern
   je Skill eine Zeile. Das Raster holt die Erinnerung zurück und macht die
   Eintragung belegbar. Leere Zeilen sind ausdrücklich in Ordnung — niemand
   arbeitet an allem. Bewertet wird nichts: kein Häkchen, keine Stufe, keine
   Punktzahl je Skill; die Stufe gilt der Capability. */
.app-entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.app-entry{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3) var(--s5);align-items:start;padding:var(--s4) 0;border-top:var(--bd)}
@container (min-width:620px){
  .app-entry{grid-template-columns:minmax(200px,2fr) minmax(0,3fr)}
}
.app-entries li:first-child .app-entry{border-top:none;padding-top:0}
.app-entry-head{min-width:0;display:flex;flex-direction:column;gap:2px;cursor:pointer}
.app-entry-side{min-width:0;display:flex;flex-direction:column;gap:var(--s2)}
.app-skillname{font:var(--app-ty-ui);color:var(--tx-primary);display:block}
.app-skillkurz{font:var(--app-ty-meta);color:var(--tx-secondary);text-wrap:pretty;display:block}
/* Eine Zeile mit Eintrag hebt sich ab — über die Marke, nicht über Farbe. */
.app-entry[data-gefuellt="true"] .app-skillname::before{content:"";display:inline-block;width:6px;height:6px;border-radius:2px;background:var(--co-600);margin-right:var(--s2);vertical-align:middle}
.app-entry-said{font:var(--app-ty-read);color:var(--tx-primary);margin:0;white-space:pre-wrap;text-wrap:pretty}
.app-entry-leer{font:var(--app-ty-meta);color:var(--tx-muted);margin:0}
.app-skillref{display:inline-flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;font:var(--app-ty-meta);color:var(--tx-secondary)}

/* ══ Entwurf eines Entwicklungsschritts ══════════════════════════════════ */
.app-draft{border:1px solid var(--co-600);border-radius:var(--r-md);background:var(--app-raised);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}

@media (max-width:760px){
  .app-hero{padding:var(--s5)}
}

/* ══ Skill-Karten im Kontext ═════════════════════════════════════════════
   Eine Karte je Skill statt eines Absatzes mit Gruppennamen. Der Status
   beschreibt den Ablauf, nicht die Güte: vereinbart → in Arbeit → zur
   Rückmeldung → abgeschlossen. Vier Schritte als Balken plus Wort, damit die
   Stelle im Ablauf ohne Farbwahrnehmung ablesbar ist.
   Ab „vereinbart" trägt die Karte Fläche und Kante — das ist die Auszeichnung,
   und sie sagt „daran arbeiten wir", nicht „das kann er gut". */
/* auto-fill füllt die Reihe, je breiter das Fenster desto mehr und desto
   schmaler. Ab genügend Breite deshalb feste drei Spalten: die Karte soll
   lesbar breit sein, nicht die Reihe voll. */
.app-skillcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3);margin-top:var(--s3)}
@container (min-width:720px){
  .app-skillcards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Auswählbare Karte: beim Überfahren färbt sich die Fläche und ein Plus
   erscheint. Ein Klick vereinbart den Skill, ein zweiter nimmt ihn zurück.
   Karten ohne Auswahlmöglichkeit bleiben still — kein Zeigefinger, kein Plus. */
button.app-skillcard{cursor:pointer;position:relative;width:100%;text-align:left;font:inherit;color:inherit}
button.app-skillcard:hover:not(:disabled){background:var(--co-fill);border-color:var(--co-600)}
button.app-skillcard:focus-visible{outline:none;box-shadow:var(--focus-ring)}
button.app-skillcard:disabled{cursor:default}
.app-skillcard-mark{position:absolute;top:var(--s3);right:var(--s3);width:24px;height:24px;border-radius:var(--r-full);border:1px solid var(--co-600);background:var(--app-raised);color:var(--co-ink);font:500 0.9375rem/1 var(--font);align-items:center;justify-content:center;display:none}
button.app-skillcard:hover:not(:disabled) .app-skillcard-mark,
button.app-skillcard:focus-visible .app-skillcard-mark{display:flex}
.app-skillcard{position:relative;border:var(--bd);border-radius:var(--r-sm);background:var(--app-raised);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.app-skillcard[data-aktiv="true"]{background:var(--co-fill);border-color:var(--co-600)}
/* Zwei Ziele auf einer Karte: die Fläche öffnet die Details, die Marke in der
   Ecke vereinbart. Der Öffnen-Knopf spannt sich über die ganze Karte
   (::after), die Marke liegt mit z-index darüber. */
.app-skillcard-open{position:static;border:none;background:none;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.app-skillcard-open::after{content:"";position:absolute;inset:0;border-radius:var(--r-sm)}
.app-skillcard:hover{border-color:var(--co-600);box-shadow:var(--e1)}
.app-skillcard-open:focus-visible{outline:none}
.app-skillcard-open:focus-visible::after{box-shadow:var(--focus-ring)}
.app-skillcard-mark{position:absolute;z-index:1;top:var(--s3);right:var(--s3);width:24px;height:24px;border-radius:var(--r-full);border:1px solid var(--co-600);background:var(--app-raised);color:var(--co-ink);font:500 0.9375rem/1 var(--font);align-items:center;justify-content:center;display:none;cursor:pointer}
.app-skillcard:hover .app-skillcard-mark,
.app-skillcard-mark:focus-visible{display:flex}
.app-skillcard-mark:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-skillcard-mark:disabled{display:none}
/* Eigener Skill: gestrichelt, weil er noch nicht existiert. Dieselbe Geometrie
   wie die übrigen Karten, damit die Reihe nicht bricht. */
.app-skillcard--neu{border-style:dashed;border-color:var(--bd-strong-c);background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.app-skillcard--neu:hover{border-color:var(--co-600);border-style:solid;background:var(--app-raised)}
.app-skillcard--neu:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-skillcard-plus{font:500 1.125rem/1 var(--font);color:var(--co-ink)}
/* Kommentarverlauf im Skill-Dialog */
.app-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.app-note{padding-left:var(--s4);border-left:2px solid var(--bd-strong-c)}
.app-note[data-status="true"]{border-left-color:var(--co-600)}
.app-note-kopf{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline}
.app-note-autor{font:var(--app-ty-ui);color:var(--tx-primary)}
.app-note-datum{font:var(--app-ty-meta);color:var(--tx-muted)}
.app-note-text{font:var(--app-ty-read);color:var(--tx-primary);margin:var(--s1) 0 0;white-space:pre-wrap;text-wrap:pretty}
.app-skillcard-title{font:var(--app-ty-ui);color:var(--tx-primary);margin:0;text-wrap:pretty}
.app-skillcard-text{font:var(--app-ty-meta);color:var(--tx-secondary);margin:0;text-wrap:pretty}
.app-flow{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.app-flow-steps{display:inline-flex;gap:2px;flex-shrink:0}
.app-flow-step{width:12px;height:4px;border-radius:2px;background:var(--bd-strong-c)}
.app-flow-step[data-on="true"]{background:var(--co-ink)}
.app-flow-label{font:var(--ty-label-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--tx-secondary)}

/* ══ Personen-Kacheln ════════════════════════════════════════════════════
   Die Übersicht über die eigene Gruppe. Das Bild ist der Initialenkreis des
   Design Systems; echte Fotos gehören später an dieselbe Stelle. */
.app-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
.app-person{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);border:var(--bd-strong);border-radius:var(--r-md);background:var(--app-raised);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--m-fast),box-shadow var(--m-fast)}
.app-person:hover{border-color:var(--co-600);box-shadow:var(--e1)}
.app-person:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-person-head{display:flex;align-items:center;gap:var(--s3);min-width:0}
.app-person-name{font:var(--ty-name);font-size:.9375rem;line-height:1.25rem;color:var(--tx-primary);margin:0;display:block}
.app-person-stufe{font:var(--app-ty-meta);color:var(--tx-secondary);margin:0;display:block}
.app-person-next{font:var(--app-ty-ui);color:var(--tx-primary);margin:0;text-wrap:pretty}
.app-person-foot{margin-top:auto;padding-top:var(--s3);border-top:var(--bd);display:flex;flex-direction:column;gap:2px}

/* ══ Tabs auf der Personenseite ══════════════════════════════════════════
   Eine Person, zwei Sichten: der Plan trägt den Zeitverlauf und steht zuerst,
   die Einschätzungen sind die einzelnen Runden darin. */
.app-tabs{display:flex;gap:var(--s1);padding:0 var(--s6);border-bottom:var(--bd);flex-shrink:0}
.app-tab{min-height:42px;padding:0 var(--s4);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;font:var(--app-ty-ui);color:var(--tx-secondary)}
.app-tab:hover{color:var(--tx-primary)}
.app-tab:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-tab[aria-selected="true"]{color:var(--co-ink);border-bottom-color:var(--co-600)}
/* Im Dialog ohne die Seitenpolsterung des Arbeitsbereichs. */
.app-tabs--dlg{padding:0}

/* ══ Runden-Kacheln ══════════════════════════════════════════════════════
   Der Verlauf, den J-002 verlangt: jede abgeschlossene Runde hat einen Ort
   und ist Vorgeschichte, nicht Archiv. Die Eröffnungs-Kachel erzeugt nichts,
   sie öffnet die Runde, die für den Zeitraum ansteht. */
.app-rounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4)}
.app-round{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border:var(--bd-strong);border-radius:var(--r-md);background:var(--app-raised);text-align:left;font:inherit;color:inherit;cursor:pointer;transition:border-color var(--m-fast),box-shadow var(--m-fast)}
.app-round:hover{border-color:var(--co-600);box-shadow:var(--e1)}
.app-round:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-round[data-neu="true"]{border-style:dashed;background:var(--app-sunken)}
.app-round-titel{font:var(--ty-name);font-size:.9375rem;line-height:1.25rem;color:var(--tx-primary);margin:0}
.app-round-meta{font:var(--app-ty-meta);color:var(--tx-secondary);margin:0}
.app-round-foot{margin-top:auto;padding-top:var(--s3);border-top:var(--bd);display:flex;align-items:center;gap:var(--s3)}

/* ══ Ausrichtungs-Band ═══════════════════════════════════════════════════
   Stufe, Schwerpunkt und Nebenschwerpunkte — die gemeinsam getroffenen
   Festlegungen. Steht oben auf der Personenseite in beiden Tabs; geändert
   werden sie nur im Gesamtbild einer Runde. Eigene Klasse, weil dasselbe
   Band auch in anderen Ansichten stehen wird. */
.app-band{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);padding:var(--s4) var(--s6);border-bottom:var(--bd);background:var(--app-sunken);flex-shrink:0}
.app-band-feld{display:flex;flex-direction:column;gap:2px;min-width:0}
.app-band-wert{font:var(--app-ty-ui);color:var(--tx-primary);text-wrap:pretty}
.app-band-leer{font:var(--app-ty-ui);color:var(--tx-muted)}
.app-band-seit{margin-left:auto;align-self:flex-end}

/* ══ Skill-Labels in der Übersicht ═══════════════════════════════════════
   Nicht erledigte zuerst, erledigte danach — was läuft, steht vorn. Über der
   Grenze ein Mehr-Label statt einer wachsenden Zelle. */
.app-labels{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
/* Die Pille trägt eine Zeile. In einer 150-px-Spalte passt kein voller
   Skill-Name, deshalb kürzt der Text mit Auslassung; der ganze Name steht im
   title und im Dialog, den ein Klick öffnet. Das innere Element braucht
   min-width:0, sonst schrumpft der Text als Flex-Item nicht. */
.app-skilltag{display:inline-flex;align-items:center;gap:var(--s2);max-width:100%;min-width:0;min-height:24px;padding:0 var(--s3);border:1px solid var(--co-600);border-radius:var(--r-full);background:var(--co-fill);cursor:pointer;font:var(--app-ty-meta);color:var(--tx-primary);text-align:left}
.app-skilltag-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-skilltag[data-erledigt="true"]{border-color:var(--bd-strong-c);background:var(--app-sunken);color:var(--tx-secondary)}
.app-skilltag:hover{border-color:var(--co-600)}
.app-skilltag:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-skilltag--mehr{border-style:dashed;background:none}
/* max-width + anywhere: „Kundenkommunikation" ist ein Wort von 171 px und
   sprengt sonst die Spalte. break-word senkt die min-content-Breite nicht. */
.app-linkrow{display:inline-block;max-width:100%;padding:0;border:none;background:none;cursor:pointer;font:inherit;color:var(--co-ink);text-align:left;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.app-linkrow:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ══ Verlauf einer Capability ════════════════════════════════════════════
   Je Vorrunde eine Zeile im Stil der Capability-Tabelle: Zeitraum, Stufe,
   abgeschlossene Skills. Aufklappen zeigt die Texte jener Runde. Ersetzt den
   alten Vorrunde-Kasten, der nur die letzte Runde zeigte und ein Feld führte,
   das es im Formular nicht mehr gibt. */
.app-hist{list-style:none;margin:0;padding:0}
.app-hist > li + li{border-top:var(--bd)}
.app-hist details > summary{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);cursor:pointer;list-style:none}
.app-hist details > summary::-webkit-details-marker{display:none}
.app-hist details > summary:hover{background:var(--bg-overlay)}
.app-hist details > summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.app-hist details[open] > summary{background:var(--app-sunken)}
.app-hist-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.app-hist-titel{font:var(--app-ty-ui);color:var(--tx-primary)}
.app-hist-meta{font:var(--app-ty-meta);color:var(--tx-secondary)}
.app-hist-skills{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s1)}
.app-hist-body{padding:var(--s4);border-top:var(--bd);display:flex;flex-direction:column;gap:var(--s4)}

/* ══ Entwicklungsplan ════════════════════════════════════════════════════
   Zwei Fragen auf einem Bildschirm: woran gerade gearbeitet wird (Zustand)
   und wie sich jemand entwickelt hat (Verlauf). Die Fokus-Karten sind groß,
   weil sie die einzigen zwei Dinge sind, die gerade laufen. */
.app-fokusgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4)}
.app-fokuskarte{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);border:1px solid var(--co-600);border-radius:var(--r-md);background:var(--app-raised)}
.app-fokuskarte[data-frei="true"]{border-style:dashed;border-color:var(--bd-strong-c);background:var(--app-sunken)}
.app-fokuskarte-titel{padding:0;border:none;background:none;cursor:pointer;text-align:left;font:var(--ty-name);font-size:1rem;line-height:1.375rem;color:var(--co-ink)}
.app-fokuskarte-titel:hover{text-decoration:underline;text-underline-offset:2px}
.app-fokuskarte-titel:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
.app-fokuskarte-leer{font:var(--app-ty-body);color:var(--tx-muted);text-wrap:pretty}
.app-fokuskarte-zitat{margin:var(--s2) 0 0;padding-left:var(--s3);border-left:2px solid var(--bd-strong-c);font:var(--app-ty-body);color:var(--tx-secondary);text-wrap:pretty}
/* Die Art des Eintrags über die Form des Punkts, nicht über Farbe. */
.app-tl-item[data-art="runde"]::before{background:var(--co-600);border-color:var(--co-600)}
.app-tl-item[data-art="skill"]::before{border-radius:2px}
/* Notizen: offener Punkt — gesagt, nicht entschieden. */
.app-tl-item[data-art="kommentar"]::before{background:var(--app-canvas)}

/* ══ Erwartungsstufen ════════════════════════════════════════════════════ */
.app-level{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s4) 0;border-top:var(--bd)}
@container (min-width:560px){
  .app-level{grid-template-columns:minmax(150px,180px) minmax(0,1fr);gap:var(--s4)}
}
.app-level:first-child{border-top:none;padding-top:0}
.app-level[data-current="true"] .app-level-name{color:var(--co-ink)}
.app-level-name{font:var(--app-ty-ui);color:var(--tx-primary);margin:0}

/* ══ Fortschritt ohne Wertung ════════════════════════════════════════════ */
.app-marks{display:inline-flex;gap:3px}
.app-mark{width:9px;height:9px;border-radius:2px;border:1px solid var(--bd-strong-c)}
.app-mark[data-filled="true"]{background:var(--tx-secondary);border-color:var(--tx-secondary)}

/* ══ Fußleiste ═══════════════════════════════════════════════════════════ */
.app-foot{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s3) var(--s6);background:var(--app-canvas);border-top:var(--bd)}

/* ══ Schmale Bildschirme ═════════════════════════════════════════════════ */
@media (max-width:1100px){
  .app-index{width:240px}
}
@media (max-width:860px){
  /* Schmale Bildschirme scrollen als Dokument: nebeneinander liegende
     Scrollbereiche sind dort mehr Last als Hilfe. */
  .app-shell{grid-template-columns:minmax(0,1fr);height:auto;min-height:100vh;overflow:visible}
  .app-main,.app-body,.app-detail,.app-index{overflow:visible;min-height:0}
  .app-rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:var(--bd)}
  .app-railtitle,.app-railfoot{display:none}
  .app-railgroup{flex-direction:row;flex-wrap:wrap}
  .app-navlink{width:auto}
  .app-navlink[aria-current="page"]::before{display:none}
  .app-index{width:100%;border-right:none;border-bottom:var(--bd)}
  .app-work{flex-direction:column}
  .app-body{padding:var(--s4)}
}